From b9f1dcf39871859fef0aca0fc593bfb14bd341ac Mon Sep 17 00:00:00 2001
From: Joseph Hau <hexart@gmail.com>
Date: Wed, 12 Mar 2025 14:43:56 +0800
Subject: [PATCH] Add click event on template card

---
 packages/ui/src/components/HistoryDrawer.vue  |  2 +-
 .../ui/src/components/TemplateManager.vue     |  1 +
 packages/ui/src/components/TestPanel.vue      |  2 +-
 packages/ui/src/styles/theme.css              | 71 ++++++++++++++-----
 4 files changed, 55 insertions(+), 21 deletions(-)

diff --git a/packages/ui/src/components/HistoryDrawer.vue b/packages/ui/src/components/HistoryDrawer.vue
index b017ef53..2255a9ca 100644
--- a/packages/ui/src/components/HistoryDrawer.vue
+++ b/packages/ui/src/components/HistoryDrawer.vue
@@ -85,7 +85,7 @@
                     <!-- 版本详细内容 -->
                     <div
                       v-show="expandedVersions[record.id]"
-                      class="p-4 theme-history-content space-y-3"
+                      class="p-4 theme-history-card-content space-y-3"
                     >
                       <!-- 迭代说明 -->
                       <div v-if="record.iterationNote" class="text-xs">
diff --git a/packages/ui/src/components/TemplateManager.vue b/packages/ui/src/components/TemplateManager.vue
index 045acf02..0e526376 100644
--- a/packages/ui/src/components/TemplateManager.vue
+++ b/packages/ui/src/components/TemplateManager.vue
@@ -76,6 +76,7 @@
                     : 'opacity-70 shadow-none'
                   : 'theme-manager-card'
               ]"
+              @click="selectTemplate(template)"
             >
               <div class="flex items-start justify-between">
                 <div>
diff --git a/packages/ui/src/components/TestPanel.vue b/packages/ui/src/components/TestPanel.vue
index c4a85aa7..25acb5c3 100644
--- a/packages/ui/src/components/TestPanel.vue
+++ b/packages/ui/src/components/TestPanel.vue
@@ -28,7 +28,7 @@
               />
               <button
                 @click="isCompareMode = !isCompareMode"
-                class="theme-button-secondary px-4 py-2.5 text-sm whitespace-nowrap"
+                class="theme-button-secondary text-sm whitespace-nowrap"
                 :class="{ 'theme-button-primary': isCompareMode }"
               >
                 {{ isCompareMode ? '关闭对比' : '开启对比' }}
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 491fb13c..7ddbaccb 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -128,7 +128,7 @@ html * {
   .theme-button-primary {
     @apply theme-button bg-stone-200 hover:bg-stone-300 
          theme-blue:bg-blue-600 theme-blue:hover:bg-blue-500 
-         text-stone-700 rounded-lg px-4 py-2 font-medium transition-colors
+         text-stone-700 rounded-lg font-medium transition-colors
          disabled:opacity-50 disabled:cursor-not-allowed
          theme-blue:disabled:bg-blue-600/50;
   }
@@ -164,20 +164,20 @@ html * {
   /* ===== 状态组件 ===== */
   /* 主题加载中 */
   .theme-loading {
-    @apply text-stone-600 dark:text-purple-400 
+    @apply text-stone-600 
          theme-blue:text-blue-600 animate-pulse;
   }
 
   /* 主题错误 */
   .theme-error {
-    @apply text-red-600 dark:text-red-400
-         theme-blue:text-red-600 theme-green:text-red-600;
+    @apply text-red-600 
+         theme-blue:text-red-600;
   }
 
   /* 主题成功 暂无引用*/
   .theme-success {
-    @apply text-teal-600 dark:text-teal-400
-         theme-blue:text-teal-600 theme-green:text-teal-700;
+    @apply text-teal-600 
+         theme-blue:text-teal-600;
   }
 
   /* ===== 滚动条 ===== */
@@ -195,13 +195,11 @@ html * {
   }
 
   ::-webkit-scrollbar-thumb {
-    @apply bg-white/60 dark:bg-slate-700
-      theme-blue:bg-blue-300 rounded;
+    @apply bg-white/60 theme-blue:bg-blue-300 rounded;
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    @apply bg-white dark:bg-slate-600
-      theme-blue:bg-blue-400;
+    @apply bg-white theme-blue:bg-blue-400;
   }
 
   /* 特定元素滚动条类（跨浏览器支持） */
@@ -349,10 +347,6 @@ html * {
          p-4 sm:p-6 flex items-center justify-between rounded-t-xl 
          theme-blue:bg-blue-50/95;
   }
-  /* 历史提示词内容*/
-  .theme-history-content {
-    @apply p-4 sm:p-6 rounded-xl border bg-stone-200/40 border-stone-300/50 overflow-y-auto;
-  }
 
   .theme-history-empty-button {
     @apply px-2 py-1 rounded text-sm bg-red-300 hover:bg-red-500 transition-colors
@@ -377,9 +371,9 @@ html * {
          theme-blue:border-blue-200/50;
   }
 
-  /* 历史记录卡片内容 暂无引用*/
+  /* 历史提示词内容*/
   .theme-history-card-content {
-    @apply p-4 pt-3;
+    @apply p-4 sm:p-6 rounded-xl border bg-stone-200/40 border-stone-300/50 overflow-y-auto shadow-inner;
   }
 
   /* ===== 管理界面组件 ===== */
@@ -624,10 +618,23 @@ html * {
   .theme-prompt-version-unselected {
     @apply bg-amber-300/10 hover:bg-amber-300/50 text-white;
   }
+
+  /* ===== 状态组件 ===== */
+  /* 主题加载中 */
   .theme-loading {
     @apply text-teal-700;
   }
+  /* 主题错误 */
+  .theme-error {
+    @apply text-red-600;
+  }
 
+  /* 主题成功 暂无引用*/
+  .theme-success {
+    @apply text-teal-700;
+  }
+
+  /* ===== 下拉菜单 ===== */
   .theme-dropdown {
     @apply bg-teal-700/90 border-teal-700 backdrop-blur-sm;
   }
@@ -670,7 +677,7 @@ html * {
     @apply bg-teal-900/95 border-teal-700;
   }
   /* 历史提示词内容*/
-  .theme-history-content {
+  .theme-history-card-content {
     @apply bg-teal-950/20 border-teal-600/60;
   }
   .theme-card,
@@ -939,7 +946,7 @@ html * {
     @apply bg-purple-900/95 border-purple-700/50;
   }
   /* 历史提示词内容*/
-  .theme-history-content {
+  .theme-history-card-content {
     @apply bg-purple-900/90 border-purple-600/50;
   }
   /* ===== 卡片组件 ===== */
@@ -1091,6 +1098,32 @@ html * {
     @apply bg-gray-800 text-gray-300 hover:bg-gray-700;
   }
 
+  /* ===== 状态组件 ===== */
+  /* 主题加载中 */
+  .theme-loading {
+    @apply text-purple-400 animate-pulse;
+  }
+
+  /* 主题错误 */
+  .theme-error {
+    @apply text-red-400;
+  }
+
+  /* 主题成功 暂无引用*/
+  .theme-success {
+    @apply text-teal-400;
+  }
+
+  /* ===== 滚动条 ===== */
+  /* 全局滚动条样式（WebKit浏览器） */
+  ::-webkit-scrollbar-thumb {
+    @apply bg-slate-700 rounded;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-slate-600;
+  }
+
   /* ===== 下拉菜单 ===== */
   .theme-dropdown {
     @apply bg-gray-800/95 border-gray-600/50;
@@ -1139,7 +1172,7 @@ html * {
     @apply border-slate-700 bg-gray-900/95;
   }
   /* 历史提示词内容*/
-  .theme-history-content {
+  .theme-history-card-content {
     @apply bg-slate-900/40 border-slate-700/80;
   }
   .theme-modal {