From 2194b1cdfb086076cab00cc2fa4a8810c1287961 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Sun, 22 Dec 2024 11:06:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=84=E7=B1=BBbug=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommandEditor.vue         | 14 ++++++------
 src/components/config/TagBar.vue         |  7 +++++-
 src/components/editor/CommandSideBar.vue | 29 ++++++++++++++++++++----
 src/pages/ConfigurationPage.vue          | 14 ++++++++----
 4 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/src/components/CommandEditor.vue b/src/components/CommandEditor.vue
index 8384860..64d463c 100644
--- a/src/components/CommandEditor.vue
+++ b/src/components/CommandEditor.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="command-editor-container"
-    :class="{ 'leaving': isLeaving, 'run-code': isRunCodePage }"
+    :class="{ leaving: isLeaving, 'run-code': isRunCodePage }"
     @animationend="$emit('animationend')"
   >
     <!-- 命令设置栏 -->
@@ -125,16 +125,16 @@ export default {
   props: {
     action: {
       type: Object,
-      required: true
+      required: true,
     },
     allQuickCommandTags: {
       type: Array,
-      required: true
+      required: true,
     },
     isLeaving: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   created() {
     this.commandInit();
@@ -279,8 +279,8 @@ export default {
     },
     handleBack() {
       // 触发返回事件
-      this.$emit('editorEvent', { type: 'back' });
-    }
+      this.$emit("editorEvent", { type: "back" });
+    },
   },
 };
 </script>
diff --git a/src/components/config/TagBar.vue b/src/components/config/TagBar.vue
index 690a987..ec1d9da 100644
--- a/src/components/config/TagBar.vue
+++ b/src/components/config/TagBar.vue
@@ -76,10 +76,15 @@ export default {
 <style scoped>
 /* 标签栏容器样式 */
 .q-tabs {
-  height: 100vh !important;
+  height: auto !important;
+  min-height: 100vh !important;
   background: transparent !important;
 }
 
+.q-scroll-area {
+  height: 100vh;
+}
+
 /* 标签栏和底栏内的按钮悬浮效果 */
 .q-tabs .q-tab:hover {
   background: rgba(255, 255, 255, 0.1) !important;
diff --git a/src/components/editor/CommandSideBar.vue b/src/components/editor/CommandSideBar.vue
index e0a8ed4..4273dc3 100644
--- a/src/components/editor/CommandSideBar.vue
+++ b/src/components/editor/CommandSideBar.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="command-side-bar" :style="{ width: sideBarWidth + 'px' }">
+  <div
+    class="command-side-bar"
+    :style="{
+      width: sideBarWidth + 'px',
+      '--icon-url': `url(${currentCommand.features.icon})`,
+    }"
+  >
     <!-- 头部区域 -->
     <div class="header-section">
       <div class="header-content">
@@ -13,7 +19,7 @@
           @click="$emit('back')"
         />
         <div class="logo-container">
-          <q-avatar size="64" square class="commandLogo">
+          <q-avatar size="64" square class="featureIco">
             <q-img
               @click="showIconPicker = true"
               :src="currentCommand.features.icon"
@@ -601,6 +607,20 @@ export default {
 };
 </script>
 <style scoped>
+/* 其他样式从app.css中继承 */
+.featureIco {
+  cursor: pointer;
+}
+
+.featureIco:hover {
+  transform: scale(1.02) translateY(-2px);
+}
+
+.featureIco:hover::after {
+  opacity: 0.8;
+  transform: scale(1.05);
+}
+
 .command-side-bar {
   height: 100%;
   background: #f4f4f4;
@@ -696,12 +716,13 @@ export default {
   font-size: 20px;
 }
 
-.command-side-bar-content *,
+.command-side-bar-content .q-field,
 .side-bar-popup-content .q-item__label {
   font-size: 13px;
 }
 
-.side-bar-popup-content .q-item__label--caption {
+.side-bar-popup-content .q-item__label--caption,
+.command-side-bar-content :deep(.q-chip) {
   font-size: 12px;
 }
 </style>
diff --git a/src/pages/ConfigurationPage.vue b/src/pages/ConfigurationPage.vue
index 300972e..eaa16f9 100644
--- a/src/pages/ConfigurationPage.vue
+++ b/src/pages/ConfigurationPage.vue
@@ -40,7 +40,7 @@
 
     <!-- 命令编辑界面 -->
     <CommandEditor
-      v-show="isCommandEditorShow"
+      v-if="isCommandEditorShow"
       ref="commandEditor"
       :action="commandEditorAction"
       @editorEvent="editorEvent"
@@ -115,7 +115,9 @@ export default {
 
       switch (this.currentTag) {
         case "未分类":
-          return sortByOrder(commands.filter((cmd) => !cmd.tags || cmd.tags.length === 0));
+          return sortByOrder(
+            commands.filter((cmd) => !cmd.tags || cmd.tags.length === 0)
+          );
         case "搜索结果":
           if (this.commandSearchKeyword?.length < 2) return;
           let searchResult = [];
@@ -142,7 +144,9 @@ export default {
         case "默认":
           return commands.filter((cmd) => cmd.tags?.includes(this.currentTag));
         default:
-          return sortByOrder(commands.filter((cmd) => cmd.tags?.includes(this.currentTag)));
+          return sortByOrder(
+            commands.filter((cmd) => cmd.tags?.includes(this.currentTag))
+          );
       }
     },
     // 标签栏宽度
@@ -479,14 +483,14 @@ export default {
       commands.forEach((command, index) => {
         tagCommands[command.features.code] = {
           ...command,
-          order: index // 添加排序信息
+          order: index, // 添加排序信息
         };
       });
 
       // 更新存储
       this.allQuickCommands = {
         ...this.allQuickCommands,
-        ...tagCommands
+        ...tagCommands,
       };
 
       // 只保存被修改的命令