From a65d9ccdffb3e1d87975ed6edd406bf8a93abd6c Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Fri, 20 Dec 2024 20:02:28 +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/card/CommandCardContent.vue | 26 ++------
 src/components/popup/EditorHistory.vue     | 71 +++++++++++++++++-----
 src/pages/ConfigurationPage.vue            |  4 +-
 3 files changed, 61 insertions(+), 40 deletions(-)

diff --git a/src/components/card/CommandCardContent.vue b/src/components/card/CommandCardContent.vue
index 77bda34..f59a9cd 100644
--- a/src/components/card/CommandCardContent.vue
+++ b/src/components/card/CommandCardContent.vue
@@ -117,24 +117,6 @@ export default {
 </script>
 
 <style scoped>
-.q-card.command {
-  cursor: pointer;
-  user-select: none;
-  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-  background: rgba(255, 255, 255, 0.3) !important;
-  backdrop-filter: blur(calc(var(--glass-effect-strength) * 1px)) !important;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.07);
-  will-change: transform, box-shadow;
-}
-
-.body--dark .q-card.command {
-  background: rgba(57, 57, 57, 0.09) !important;
-  border: 1px solid rgb(59 58 58 / 5%);
-  box-shadow: 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%),
-    0 3px 1px -2px rgb(69 67 67 / 12%);
-}
-
 .ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -173,14 +155,14 @@ export default {
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
-  filter: blur(6px) brightness(1.2);
-  transform: scale(1.1);
+  filter: blur(8px) brightness(1.1);
+  transform: scale(1.05);
   pointer-events: none;
 }
 
 .featureIcoHover::after {
-  opacity: 1;
-  transform: scale(1.2);
+  opacity: 0.8;
+  transform: scale(1.1);
 }
 
 .feature-disabled {
diff --git a/src/components/popup/EditorHistory.vue b/src/components/popup/EditorHistory.vue
index 01d62a7..5606a96 100644
--- a/src/components/popup/EditorHistory.vue
+++ b/src/components/popup/EditorHistory.vue
@@ -27,19 +27,25 @@
         <div class="history-layout">
           <!-- 左侧预览区域 -->
           <div class="preview-container">
-            <div v-if="selectedIndex !== null" class="preview-content">
-              <div class="preview-header text-h6">
-                <q-icon name="code" size="16px" />
-                <span class="q-ml-sm">代码预览</span>
-              </div>
-              <pre>{{ historyList[selectedIndex]?.content || "" }}</pre>
+            <div class="preview-header text-h6">
+              <q-icon name="code" size="16px" />
+              <span class="q-ml-sm">代码预览</span>
             </div>
-            <div v-else class="preview-placeholder">
-              <q-icon name="code" size="48px" color="grey-7" />
-              <div class="text-grey-7 q-mt-sm text-subtitle1">
-                鼠标悬停查看代码预览
+            <transition
+              mode="out-in"
+              enter-active-class="fade-in"
+              leave-active-class="fade-out"
+            >
+              <div v-if="selectedIndex !== null" class="preview-content" :key="selectedIndex">
+                <pre>{{ historyList[selectedIndex]?.content || "" }}</pre>
               </div>
-            </div>
+              <div v-else class="preview-placeholder" key="placeholder">
+                <q-icon name="code" size="48px" color="grey-7" />
+                <div class="text-grey-7 q-mt-sm text-subtitle1">
+                  鼠标悬停查看代码预览
+                </div>
+              </div>
+            </transition>
           </div>
 
           <!-- 右侧历史列表 -->
@@ -118,7 +124,7 @@
 </template>
 
 <script>
-import { ref, reactive } from "vue";
+import { reactive } from "vue";
 
 export default {
   name: "EditorHistory",
@@ -361,18 +367,20 @@ export default {
 .preview-container {
   flex: 1;
   display: flex;
+  flex-direction: column;
   align-items: stretch;
   justify-content: stretch;
   overflow: hidden;
   background: #f4f4f4;
   transition: all 0.3s ease;
+  position: relative;
 }
 
 .preview-header {
   padding: 16px 16px 8px;
-  /* font-size: 13px; */
   display: flex;
   align-items: center;
+  z-index: 1;
 }
 
 .history-list {
@@ -411,9 +419,13 @@ export default {
   transform: translateX(2px);
 }
 
-.preview-content {
-  width: 100%;
-  height: 100%;
+.preview-content,
+.preview-placeholder {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 48px;
+  bottom: 0;
   margin: 0;
   font-size: 12px;
   overflow: hidden;
@@ -546,4 +558,31 @@ export default {
   min-width: 300px;
   padding: 8px;
 }
+
+/* 自定义淡入淡出动画 */
+.fade-in {
+  animation: fadeIn 0.3s ease-out;
+}
+
+.fade-out {
+  animation: fadeOut 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
 </style>
diff --git a/src/pages/ConfigurationPage.vue b/src/pages/ConfigurationPage.vue
index 8a17e9b..119d2d0 100644
--- a/src/pages/ConfigurationPage.vue
+++ b/src/pages/ConfigurationPage.vue
@@ -61,8 +61,8 @@
         left: tabBarWidth,
       }"
       v-model="currentTag"
-      transition-prev="slide-down"
-      transition-next="slide-up"
+      transition-prev="jump-down"
+      transition-next="jump-up"
     >
       <q-tab-panel
         style="padding: 0"