From 06756777eaee8b9f5e82688eef0dcbb4a66c09cc Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Sat, 21 Dec 2024 20:25:32 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/editor/CommandSideBar.vue | 57 +++++++++++++++---------
 src/pages/ConfigurationPage.vue          | 32 ++++++++++++-
 2 files changed, 68 insertions(+), 21 deletions(-)

diff --git a/src/components/editor/CommandSideBar.vue b/src/components/editor/CommandSideBar.vue
index b10e2ed..7c8b020 100644
--- a/src/components/editor/CommandSideBar.vue
+++ b/src/components/editor/CommandSideBar.vue
@@ -57,6 +57,7 @@
             <!-- 匹配类型 -->
             <q-select
               :disable="!canCommandSave"
+              popup-content-class="side-bar-popup-content"
               hide-dropdown-icon
               stack-label
               label-color="primary"
@@ -74,14 +75,12 @@
                 <q-icon class="command-side-bar-icon" :name="cmdType.icon" />
               </template>
               <template v-slot:option="scope">
-                <q-item v-bind="scope.itemProps">
-                  <q-item-section avatar>
-                    <q-icon :name="scope.opt.icon" />
-                  </q-item-section>
-                  <q-item-section>
+                <q-item v-bind="scope.itemProps" class="row items-center">
+                  <q-icon :name="scope.opt.icon" class="q-mr-md" />
+                  <div>
                     <q-item-label v-html="scope.opt.name" />
                     <q-item-label caption>{{ scope.opt.desc }}</q-item-label>
-                  </q-item-section>
+                  </div>
                 </q-item>
               </template>
             </q-select>
@@ -89,6 +88,7 @@
             <q-select
               v-if="cmdType.valueType === 'array'"
               :disable="!canCommandSave"
+              popup-content-class="side-bar-popup-content"
               hide-dropdown-icon
               stack-label
               label-color="primary"
@@ -151,6 +151,7 @@
               :disable="!canCommandSave"
               hide-dropdown-icon
               stack-label
+              popup-content-class="side-bar-popup-content"
               label-color="primary"
               transition-show="jump-down"
               transition-hide="jump-up"
@@ -179,6 +180,7 @@
             <q-select
               :disable="!canCommandSave"
               hide-dropdown-icon
+              popup-content-class="side-bar-popup-content"
               stack-label
               label-color="primary"
               transition-show="jump-down"
@@ -218,6 +220,7 @@
               hide-dropdown-icon
               stack-label
               label-color="primary"
+              popup-content-class="side-bar-popup-content"
               transition-show="jump-down"
               transition-hide="jump-up"
               borderless
@@ -235,13 +238,11 @@
                 />
               </template>
               <template v-slot:option="scope">
-                <q-item v-bind="scope.itemProps">
-                  <q-item-section avatar>
-                    <q-icon :name="outputTypes[scope.opt].icon" />
-                  </q-item-section>
-                  <q-item-section>
+                <q-item v-bind="scope.itemProps" class="row items-center">
+                  <q-icon :name="outputTypes[scope.opt].icon" class="q-mr-md" />
+                  <div>
                     <q-item-label v-html="outputTypes[scope.opt].label" />
-                  </q-item-section>
+                  </div>
                 </q-item>
               </template>
             </q-select>
@@ -251,6 +252,7 @@
               hide-dropdown-icon
               stack-label
               label-color="primary"
+              popup-content-class="side-bar-popup-content"
               transition-show="jump-down"
               transition-hide="jump-up"
               borderless
@@ -287,6 +289,7 @@
               hide-dropdown-icon
               stack-label
               label-color="primary"
+              popup-content-class="side-bar-popup-content"
               transition-show="jump-down"
               transition-hide="jump-up"
               borderless
@@ -312,15 +315,16 @@
                 </q-chip>
               </template>
               <template v-slot:option="scope">
-                <q-item v-bind="scope.itemProps">
-                  <q-item-section avatar>
-                    <span
-                      :class="`iconfont icon-${platformTypes[scope.opt].icon}`"
-                    ></span>
-                  </q-item-section>
-                  <q-item-section>
+                <q-item v-bind="scope.itemProps" class="row items-center">
+                  <q-img
+                    :src="platformTypes[scope.opt].icon"
+                    width="24px"
+                    class="q-mr-md"
+                  />
+                  <div>
                     <q-item-label v-html="platformTypes[scope.opt].label" />
-                  </q-item-section>
+                    <q-item-label caption>{{ scope.opt.desc }}</q-item-label>
+                  </div>
                 </q-item>
               </template>
             </q-select>
@@ -631,4 +635,17 @@ export default {
   background: var(--q-primary);
   opacity: 0.85;
 }
+
+.side-bar-popup-content .q-item .q-icon {
+  font-size: 20px;
+}
+
+.command-side-bar-content *,
+.side-bar-popup-content .q-item__label {
+  font-size: 13px;
+}
+
+.side-bar-popup-content .q-item__label--caption {
+  font-size: 12px;
+}
 </style>
diff --git a/src/pages/ConfigurationPage.vue b/src/pages/ConfigurationPage.vue
index ac360c0..f94c7c9 100644
--- a/src/pages/ConfigurationPage.vue
+++ b/src/pages/ConfigurationPage.vue
@@ -175,6 +175,7 @@
               color="primary"
               label="分享中心"
               icon="groups"
+              class="share-btn"
             />
             <!-- <q-separator vertical /> -->
             <!-- 新建按钮 -->
@@ -185,6 +186,7 @@
               color="primary"
               label="新建"
               icon="add"
+              class="new-btn"
             />
             <!-- <q-separator vertical /> -->
             <q-btn
@@ -834,5 +836,33 @@ body.body--dark.glass-effect-menu .absolute-bottom {
   background: none !important;
 }
 
-/* ... 其他样式保持不变 ... */
+/* 基础按钮动画 */
+.share-btn,
+.new-btn {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.share-btn:hover,
+.new-btn:hover {
+  transform: translateY(-2px);
+  background: rgba(var(--q-primary-rgb), 0.1) !important;
+}
+
+/* 搜索框动画 */
+@keyframes searchIconShake {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-10deg);
+  }
+  75% {
+    transform: rotate(10deg);
+  }
+}
+
+.q-field--focused .q-field__prepend .q-icon {
+  animation: searchIconShake 0.8s ease;
+  color: var(--q-primary);
+}
 </style>