From 66a4283b9b0a7b18769f67f477b5390206204265 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Mon, 17 Feb 2025 01:14:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96CommandConfig=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=EF=BC=8C=E8=8A=82=E7=9C=81=E7=A9=BA=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommandEditor.vue        |   1 +
 src/components/composer/FlowTabs.vue    |   1 +
 src/components/editor/CommandConfig.vue | 127 ++++++++++++++----------
 3 files changed, 77 insertions(+), 52 deletions(-)

diff --git a/src/components/CommandEditor.vue b/src/components/CommandEditor.vue
index facb4c9..96dfce2 100644
--- a/src/components/CommandEditor.vue
+++ b/src/components/CommandEditor.vue
@@ -11,6 +11,7 @@
     <CommandConfig
       v-if="!isRunCodePage"
       v-model="commandManager.state.currentCommand"
+      from="quickcommand"
       @update:is-expanded="isConfigExpanded = $event"
       :expand-on-focus="true"
       class="command-config"
diff --git a/src/components/composer/FlowTabs.vue b/src/components/composer/FlowTabs.vue
index 24cfb64..2d1a0fa 100644
--- a/src/components/composer/FlowTabs.vue
+++ b/src/components/composer/FlowTabs.vue
@@ -76,6 +76,7 @@
         class="command-config-panel"
         v-if="flow.id === 'main' && showCommandConfig"
         :model-value="commandConfig"
+        from="quickcomposer"
         @update:model-value="updateCommandConfig"
       />
       <ComposerFlow
diff --git a/src/components/editor/CommandConfig.vue b/src/components/editor/CommandConfig.vue
index b7af58c..5cb6251 100644
--- a/src/components/editor/CommandConfig.vue
+++ b/src/components/editor/CommandConfig.vue
@@ -3,9 +3,10 @@
     v-model="isExpanded"
     @update:model-value="$emit('update:is-expanded', $event)"
     class="command-composer command-config"
+    expand-icon-toggle
   >
     <template v-slot:header>
-      <div class="row basic-config">
+      <div class="row basic-config q-col-gutter-sm">
         <q-avatar size="36px" square class="featureIco">
           <q-img
             @click.stop="showIconPicker = true"
@@ -15,7 +16,7 @@
         <q-input
           ref="explainInput"
           :model-value="currentCommand.features.explain"
-          borderless
+          filled
           dense
           @update:model-value="updateModelValue('features.explain', $event)"
           @click.stop
@@ -24,6 +25,28 @@
           class="col"
         >
         </q-input>
+        <q-select
+          class="col-6 tag-select"
+          :model-value="currentCommand.tags"
+          @update:model-value="updateModelValue('tags', $event)"
+          :options="allQuickCommandTags"
+          @focus="expandOnFocus && updateExpanded(true)"
+          dense
+          options-dense
+          filled
+          use-input
+          use-chips
+          multiple
+          hide-dropdown-icon
+          new-value-mode="add-unique"
+          popup-content-class="command-tag-popup"
+          placeholder="标签，回车添加，最多3个"
+          max-values="3"
+          @new-value="tagVerify"
+          input-debounce="0"
+          ref="commandTagRef"
+          @blur="(e) => autoAddInputVal(e, $refs.commandTagRef)"
+        />
       </div>
     </template>
 
@@ -59,42 +82,19 @@
         />
       </div>
 
-      <!-- 标签 -->
+      <!-- 输出和搜索面板推送 -->
       <div class="config-section">
-        <div class="section-title">
-          <q-icon name="label" size="16px" />
-          <span class="q-ml-sm">标签</span>
-        </div>
-        <q-select
-          :model-value="currentCommand.tags"
-          @update:model-value="updateModelValue('tags', $event)"
-          :options="allQuickCommandTags"
-          dense
-          options-dense
-          filled
-          use-input
-          use-chips
-          multiple
-          hide-dropdown-icon
-          new-value-mode="add-unique"
-          popup-content-class="command-tag-popup"
-          placeholder="回车添加，最多3个"
-          max-values="3"
-          @new-value="tagVerify"
-          input-debounce="0"
-          ref="commandTagRef"
-          @blur="(e) => autoAddInputVal(e, $refs.commandTagRef)"
-        />
-      </div>
-
-      <!-- 输出 -->
-      <div class="config-section">
-        <div class="section-title">
-          <q-icon name="output" size="16px" />
-          <span class="q-ml-sm">输出</span>
-        </div>
         <div class="row q-col-gutter-sm">
-          <div class="col-12">
+          <div
+            :class="{
+              'col-12': from === 'quickcomposer',
+              'col-8': from === 'quickcommand',
+            }"
+          >
+            <div class="section-title">
+              <q-icon name="output" size="16px" />
+              <span class="q-ml-sm">输出</span>
+            </div>
             <ButtonGroup
               :model-value="currentCommand.output"
               :options="outputTypesOptionsDy"
@@ -102,25 +102,29 @@
               height="26px"
             />
           </div>
-          <div class="col-12">
+          <div
+            :class="{
+              'col-12': from === 'quickcomposer',
+              'col-4': from === 'quickcommand',
+            }"
+            :style="{
+              'margin-top': from === 'quickcomposer' ? '-4px' : '0',
+            }"
+          >
             <div class="section-title">
               <q-icon name="search" size="16px" />
-              <span class="q-ml-sm"
-                >搜索面板推送
-                <q-btn
-                  flat
-                  round
-                  size="xs"
-                  icon="help"
-                  @click="showMainPushHelp"
-                />
-              </span>
+              <span class="q-ml-sm q-mr-xs"> 搜索面板推送 </span>
+              <q-icon
+                name="help"
+                class="cursor-pointer"
+                @click.stop="showMainPushHelp"
+              />
             </div>
             <ButtonGroup
               :model-value="currentCommand.features.mainPush"
               :options="searchPushOptions"
               @update:model-value="handleMainPushChange"
-              height="30px"
+              height="26px"
             />
           </div>
         </div>
@@ -179,6 +183,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    from: {
+      type: String,
+      default: "quickcommand",
+    },
   },
   emits: ["update:modelValue", "update:is-expanded"],
   data() {
@@ -315,9 +323,19 @@ export default defineComponent({
   width: 100%;
 }
 
-.basic-config :deep(.q-field__native),
-.basic-config :deep(.q-field__control) {
-  height: 36px;
+.tag-select :deep(.q-field__control) {
+  overflow-x: auto;
+}
+
+.tag-select :deep(.q-field__native) {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  padding-bottom: 4px;
+}
+
+.tag-select :deep(.q-field__native::-webkit-scrollbar) {
+  height: 1px;
 }
 
 .command-config :deep(.q-item) {
@@ -327,7 +345,12 @@ export default defineComponent({
 }
 
 .command-config :deep(.q-item__section--side) {
-  padding: 0;
+  padding-left: 8px;
+  padding-right: 0;
+}
+
+.command-config :deep(.q-item__section--side .q-icon) {
+  top: 13px;
 }
 
 .command-config :deep(.q-item:hover) {