study/uTools-quickcommand
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-quickcommand.git synced 2025-06-11 16:14:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化 ArrayEditor 组件的栅栏布局样式，优化按钮位置；调整 SelectListEditor 列宽设置

Browse Source
This commit is contained in:
fofolee 2025-01-24 17:31:25 +08:00
parent acf924dc8b
commit 9257faf132
2 changed files with 87 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/composer/common/ArrayEditor.vue
View File

@ -6,11 +6,8 @@
:model-value="isCollapse" :model-value="isCollapse"
> >
<div class="array-editor"> <div class="array-editor">
<div <div v-for="(row, index) in rows" :key="index" class="array-row">
v-for="(row, index) in rows" <div class="row-content row q-col-gutter-sm">
:key="index"
class="row items-center q-gutter-sm"
>
<template v-if="!!columns"> <template v-if="!!columns">
<div <div
v-for="column in processedColumns" v-for="column in processedColumns"
@ -35,7 +32,8 @@
/> />
</div> </div>
</template> </template>
<div class="col-auto"> </div>
<div class="btn-container"> <div class="btn-container">
<template v-if="rows.length === 1"> <template v-if="rows.length === 1">
<q-btn <q-btn
@ -78,7 +76,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</component> </component>
</template> </template>
@ -271,7 +268,18 @@ export default defineComponent({
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; /*消除q-gutter-sm为第一行带来的额外padding*/
margin-top: -8px;
margin-left: -8px;
}
.array-row {
display: flex;
}
.row-content {
flex: 1;
margin: 0; /* 覆盖 Quasar 的默认 margin */
} }
/* 防止输入框换行 */ /* 防止输入框换行 */
@ -283,11 +291,12 @@ export default defineComponent({
.btn-container { .btn-container {
position: relative; position: relative;
width: 32px; width: 16px;
height: 32px; padding-top: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0;
} }
.btn-container .q-btn { .btn-container .q-btn {
@ -296,18 +305,20 @@ export default defineComponent({
height: 16px; height: 16px;
min-height: 16px; min-height: 16px;
padding: 0; padding: 0;
/*抵消array-editor的margin-left，顺便和左边保持距离*/
margin-right: -8px;
} }
.btn-container .center-btn { .btn-container .center-btn {
position: relative; top: 18px;
} }
.btn-container .top-btn { .btn-container .top-btn {
top: 0; top: 8px;
} }
.btn-container .bottom-btn { .btn-container .bottom-btn {
bottom: 0; top: 28px;
} }
.array-editor :deep(.q-btn .q-icon) { .array-editor :deep(.q-btn .q-icon) {

3
src/components/composer/ui/SelectListEditor.vue
View File

@ -199,11 +199,12 @@ export default defineComponent({
title: { title: {
label: "标题", label: "标题",
noIcon: true, noIcon: true,
width: 4,
}, },
description: { description: {
label: "描述", label: "描述",
noIcon: true, noIcon: true,
width: 5, width: 6,
}, },
}, },
subCommands: [ subCommands: [