From 3e9bebf2898ebc8e7b9652e137ebba3da320e889 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Wed, 18 Dec 2024 17:14:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=8F=8A=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommandSideBar.vue | 78 +++++++++++++++----------------
 src/css/app.css                   | 58 +++++++++++++++++++++++
 src/pages/ConfigurationPage.vue   | 55 ++++++++++++++++++++--
 3 files changed, 149 insertions(+), 42 deletions(-)

diff --git a/src/components/CommandSideBar.vue b/src/components/CommandSideBar.vue
index c70fffc..50ef3eb 100644
--- a/src/components/CommandSideBar.vue
+++ b/src/components/CommandSideBar.vue
@@ -24,45 +24,6 @@
       </q-avatar>
       <div class="row">
         <div>
-          <!-- 搜索面板推送 -->
-          <q-field
-            :disable="!canCommandSave"
-            stack-label
-            label-color="primary"
-            borderless
-            square
-            type="text"
-            label="搜索面板推送"
-          >
-            <template v-slot:control>
-              <div class="self-center full-width no-outline" tabindex="0">
-                {{
-                  currentCommand.features.mainPush
-                    ? "主搜索框执行"
-                    : "进插件后执行"
-                }}
-                <q-btn
-                  flat
-                  round
-                  icon="help_outline"
-                  size="sm"
-                  dense
-                  @click="showMainPushHelp"
-                ></q-btn>
-              </div>
-            </template>
-            <template v-slot:prepend>
-              <q-icon color="primary" name="troubleshoot" />
-            </template>
-            <template v-slot:append>
-              <q-toggle
-                v-model="currentCommand.features.mainPush"
-                color="primary"
-                size="md"
-                dense
-              />
-            </template>
-          </q-field>
           <!-- 说明 -->
           <q-input
             :disable="!canCommandSave"
@@ -260,6 +221,45 @@
               </q-item>
             </template>
           </q-select>
+          <!-- 搜索面板推送 -->
+          <q-field
+            :disable="!canCommandSave"
+            stack-label
+            label-color="primary"
+            borderless
+            square
+            type="text"
+            label="搜索面板推送"
+          >
+            <template v-slot:control>
+              <div class="self-center full-width no-outline" tabindex="0">
+                {{
+                  currentCommand.features.mainPush
+                    ? "主搜索框执行"
+                    : "进插件后执行"
+                }}
+                <q-btn
+                  flat
+                  round
+                  icon="help_outline"
+                  size="xs"
+                  dense
+                  @click="showMainPushHelp"
+                ></q-btn>
+              </div>
+            </template>
+            <template v-slot:prepend>
+              <q-icon color="primary" name="search" />
+            </template>
+            <template v-slot:append>
+              <q-toggle
+                v-model="currentCommand.features.mainPush"
+                color="primary"
+                size="md"
+                dense
+              />
+            </template>
+          </q-field>
           <!-- 平台 -->
           <q-select
             :disable="!canCommandSave"
diff --git a/src/css/app.css b/src/css/app.css
index 8a9f9ba..32aebdc 100644
--- a/src/css/app.css
+++ b/src/css/app.css
@@ -25,3 +25,61 @@
 .icon-windows1:before {
   content: "\e6bb";
 }
+
+/* 优化 Tooltip 样式 */
+.q-tooltip {
+  background: rgba(255, 255, 255, 0.18) !important;
+  border-radius: 6px;
+  backdrop-filter: blur(8px);
+  padding: 6px 10px;
+  font-size: 0.85rem;
+  font-weight: 400;
+  letter-spacing: 0.3px;
+  color: rgba(35, 35, 35, 0.98) !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transform-origin: center;
+  animation: tooltip-appear 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 暗色模式适配 */
+.body--dark .q-tooltip {
+  background: rgba(35, 35, 35, 0.18) !important;
+  color: rgba(255, 255, 255, 0.98) !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* Tooltip 动画 */
+@keyframes tooltip-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* 多行文本的 Tooltip */
+.q-tooltip.multiline {
+  max-width: 280px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+/* Tooltip 位置微调 */
+.q-tooltip[data-v-anchor="top middle"] {
+  transform-origin: bottom center;
+}
+
+.q-tooltip[data-v-anchor="bottom middle"] {
+  transform-origin: top center;
+}
+
+.q-tooltip[data-v-anchor="center left"] {
+  transform-origin: center right;
+}
+
+.q-tooltip[data-v-anchor="center right"] {
+  transform-origin: center left;
+}
diff --git a/src/pages/ConfigurationPage.vue b/src/pages/ConfigurationPage.vue
index 683cbf0..b6d2200 100644
--- a/src/pages/ConfigurationPage.vue
+++ b/src/pages/ConfigurationPage.vue
@@ -36,7 +36,7 @@
           {{ tag }}
           <q-tooltip v-if="tag === '未分类'">
             所有没有添加标签的命令都会归在未分类 <br />
-            可以在新建命令时在标签��栏选择或直接键入标签名来添加标签
+            可以在新建命令时在标签选择或直接键入标签名来添加标签
           </q-tooltip>
         </q-tab>
       </q-tabs>
@@ -159,7 +159,7 @@
               <template v-slot:mini>
                 <q-icon name="view_comfy" />
                 <q-tooltip
-                  >按四列排列的面板视图<br />
+                  >按四列的面板视图<br />
                   老版本的「快捷面板」已被弃用，取而代之的是新版的「面板视图」<br />
                   注意：<br />
                   1.未启用、匹配类型为窗口的命令在此视图下不显示<br />
@@ -370,7 +370,7 @@ export default {
           : currentFts.push(x)
       );
       this.activatedQuickCommandFeatureCodes = currentFts.map((f) => f.code);
-      // 已启用的面板
+      // 启用的面板
       this.activatedQuickPanels = quickpanels;
     },
     // 获取所有的快捷命令（导出的格式）
@@ -642,5 +642,54 @@ export default {
 .q-tab {
   word-break: break-all;
   white-space: normal;
+  position: relative;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 标签悬浮效果 */
+.q-tab:hover {
+  transform: translateX(4px);
+}
+
+.q-tab:hover::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--q-primary);
+  opacity: 0.1;
+  border-radius: 4px;
+  transition: opacity 0.3s;
+}
+
+/* 标签内容过渡效果 */
+.q-tab__content {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 面板过渡效果 */
+.q-tab-panels {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.q-tab-panel {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 暗色模式适配 */
+:deep(.body--dark) .q-tab:hover::after {
+  opacity: 0.15;
+}
+
+/* 标签滚动区域样式 */
+.q-scroll-area {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+:deep(.body--dark) .q-scroll-area {
+  background: rgba(255, 255, 255, 0.03);
 }
 </style>