Merge pull request #39 from hexart/fix/theme-light-blue

Optimize light blue theme

packages/ui/src/components/InputPanel.vue

@@ -37,7 +37,7 @@
         <button
           @click="$emit('submit')"
           :disabled="loading || disabled || !modelValue.trim()"
-          class="w-full h-10 theme-button-primary flex items-center justify-center space-x-2"
+          class="w-full h-10 theme-button-primary flex items-center truncate justify-center space-x-2"
         >
           <span>{{ loading ? loadingText : buttonText }}</span>
         </button>

packages/ui/src/components/Modal.vue

@@ -31,7 +31,7 @@
                 </h3>
                 <button
                   @click="$emit('update:modelValue', false)"
-                  class="theme-text-secondary hover:theme-text transition-colors"
+                  class="hover:theme-text transition-colors"
                 >
                   <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@@ -82,7 +82,7 @@ defineProps({
   }
 })
 
-defineEmits(['update:modelValue', 'confirm'])
+const emit = defineEmits(['update:modelValue', 'confirm'])
 
 const handleBackdropClick = (event) => {
   if (event.target === event.currentTarget) {

packages/ui/src/components/ModelSelect.vue

@@ -2,7 +2,7 @@
   <div class="relative">
     <button
       @click.stop="toggleDropdown"
-      class="theme-select-button"
+      class="theme-template-select-button"
       :disabled="disabled"
     >
       <div class="flex items-center justify-between">
@@ -50,7 +50,7 @@
       <div class="theme-dropdown-section">
         <button
           @click="$emit('config')"
-          class="theme-dropdown-button"
+          class="theme-dropdown-config-button"
         >
           <span>⚙️</span>
           <span>{{ t('model.select.configure') }}</span>
@@ -147,7 +147,7 @@ const dropdownStyle = computed(() => ({
 </script>
 
 <style scoped>
-.theme-select-button {
+.theme-template-select-button {
   position: relative;
 }
 </style> 

packages/ui/src/components/OutputPanel.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="flex flex-col h-full">
     <div class="flex items-center justify-between mb-3">
-      <h3 v-if="resultTitle" class="text-lg font-semibold theme-text">{{ resultTitle }}</h3>
+      <h3 v-if="resultTitle" class="text-lg font-semibold theme-text truncate">{{ resultTitle }}</h3>
       <div v-else-if="!hideTitle" class="text-lg font-semibold theme-text">{{ t('output.title') }}</div>
       <div v-else></div>
       
@@ -21,7 +21,7 @@
           ref="resultContainer"
           class="absolute inset-0 h-full theme-input whitespace-pre-wrap overflow-auto"
         >
-          <span v-if="!contentTokens.length" class="theme-text-secondary">{{ t('output.placeholder') }}</span>
+          <span v-if="!contentTokens.length" class="theme-text-placeholder">{{ t('output.placeholder') }}</span>
           <span v-else v-text="displayContent" class="theme-text"></span>
         </div>
       </div>

packages/ui/src/components/TemplateManager.vue

@@ -92,7 +92,7 @@
                   <button
                     @click="selectTemplate(template)"
                     :class="[
-                      'rounded-lg hidden',
+                      'rounded-lg hidden text-sm',
                       (currentType === 'optimize' ? selectedOptimizeTemplate?.id : selectedIterateTemplate?.id) === template.id
                         ? 'theme-manager-button-primary'
                         : 'theme-manager-button-secondary'
@@ -105,27 +105,27 @@
                   <button
                     v-if="!template.isBuiltin"
                     @click="editTemplate(template)"
-                    class="theme-manager-button-secondary"
+                    class="text-sm theme-manager-button-secondary"
                   >
                     {{ t('common.edit') }}
                   </button>
                   <button
                     v-if="template.isBuiltin"
                     @click="viewTemplate(template)"
-                    class="theme-manager-button-secondary"
+                    class="text-sm theme-manager-button-secondary"
                   >
                     {{ t('template.view') }}
                   </button>
                   <button
                     v-if="template.isBuiltin"
                     @click="copyTemplate(template)"
-                    class="theme-manager-button-secondary"
+                    class="text-sm theme-manager-button-secondary"
                   >
                     {{ t('templateManager.copyTemplate') }}
                   </button>
                   <button
                     @click="exportTemplate(template.id)"
-                    class="theme-manager-button-secondary inline-flex items-center justify-center gap-1"
+                    class="text-sm theme-manager-button-secondary inline-flex items-center justify-center gap-1"
                   >
                   <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
@@ -135,7 +135,7 @@
                   <button
                     v-if="!template.isBuiltin"
                     @click="confirmDelete(template.id)"
-                    class="theme-manager-button-danger"
+                    class="text-sm theme-manager-button-danger"
                   >
                     {{ t('common.delete') }}
                   </button>

packages/ui/src/components/TemplateSelect.vue

@@ -2,7 +2,7 @@
   <div class="relative">
     <button
       @click.stop="isOpen = !isOpen"
-      class="theme-select-button"
+      class="theme-template-select-button"
     >
       <div class="flex items-center justify-between">
         <div class="flex items-center space-x-2 min-w-0">
@@ -54,7 +54,7 @@
       <div class="theme-dropdown-section">
         <button
           @click="$emit('manage')"
-          class="theme-dropdown-button"
+          class="theme-dropdown-config-button"
         >
           <span>📝</span>
           <span>{{ t('template.configure') }}</span>
@@ -108,7 +108,7 @@ const updateDropdownPosition = () => {
   if (!isOpen.value) return
   
   // 获取按钮元素
-  const button = document.querySelector('.theme-select-button')
+  const button = document.querySelector('.theme-template-select-button')
   if (!button) return
 
   const buttonRect = button.getBoundingClientRect()
@@ -205,7 +205,7 @@ const selectTemplate = (template: Template) => {
 </script>
 
 <style scoped>
-.theme-select-button {
+.theme-template-select-button {
   position: relative;
 }
 </style> 

packages/ui/src/styles/theme.css

@@ -20,7 +20,7 @@ html {
 
 /* 蓝色主题背景 */
 :root.theme-blue {
-  @apply bg-blue-100 text-blue-950;
+  @apply bg-sky-100 text-sky-950;
 }
 
 /* 绿色主题背景 */
@@ -57,19 +57,15 @@ html * {
   .theme-header {
     @apply sticky top-0 z-20 
          bg-white/90 
-         theme-blue:bg-blue-200/90 
          backdrop-blur-sm 
          border-b border-gray-200 
-         theme-blue:border-blue-300 
          shadow-sm transition-colors duration-300;
   }
 
   /* 主题卡片 */
   .theme-card {
     @apply p-4 rounded-lg bg-white 
-         theme-blue:bg-blue-200 
          border border-gray-200 
-         theme-blue:border-blue-400 
          shadow-sm;
   }
 
@@ -77,27 +73,23 @@ html * {
 
   /* 主题标题 */
   .theme-title {
-    @apply text-gray-500 
-         theme-blue:text-blue-950 
+    @apply text-gray-500
          font-semibold;
   }
 
   /* 主题文本 */
   .theme-text {
-    @apply text-stone-600 
-         theme-blue:text-blue-950;
+    @apply text-stone-600;
   }
 
   /* 主题次要文本 */
-  .theme-text-secondary {
-    @apply text-stone-600/80  
-         theme-blue:text-blue-800;
+  .theme-text-placeholder {
+    @apply text-stone-400/80;
   }
 
   /* 主题标签 */
   .theme-label {
-    @apply text-gray-700 
-         theme-blue:text-blue-700
+    @apply text-gray-700
          font-medium;
   }
 
@@ -107,15 +99,10 @@ html * {
   .theme-input {
     @apply w-full rounded-lg px-4 py-3 
          bg-stone-50 
-         theme-blue:bg-blue-50 
          border border-stone-300 
-         theme-blue:border-blue-200  
          text-stone-800 
-         theme-blue:text-blue-900 
-         placeholder-gray-400  
-         theme-blue:placeholder-blue-400  
+         placeholder-stone-400/80  
           focus:ring-2 focus:ring-stone-500/50 
-         theme-blue:focus:ring-blue-500/50 
          focus:border-transparent outline-none transition duration-300;
   }
 
@@ -127,18 +114,13 @@ 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 font-medium transition-colors
-         disabled:opacity-50 disabled:cursor-not-allowed
-         theme-blue:disabled:bg-blue-600/50;
+         disabled:opacity-50 disabled:cursor-not-allowed;
   }
 
   /* 主题次要按钮 */
   .theme-button-secondary {
-    @apply theme-button bg-stone-100 hover:bg-stone-200 text-stone-700 
-         theme-blue:bg-blue-100 
-         theme-blue:text-blue-700 
-         theme-blue:hover:bg-blue-200;
+    @apply theme-button bg-stone-100 hover:bg-stone-200 text-stone-700;
   }
 
   .theme-prompt-version-selected {
@@ -154,30 +136,24 @@ html * {
   .theme-icon-button {
     @apply flex items-center gap-1 px-3 py-3 h-9 rounded-lg transition-all duration-300
            bg-stone-100 
-           theme-blue:bg-blue-100 
            text-stone-700 
-           theme-blue:text-blue-700 
-           hover:bg-stone-200 
-           theme-blue:hover:bg-blue-200;
+           hover:bg-stone-200;
   }
 
   /* ===== 状态组件 ===== */
   /* 主题加载中 */
   .theme-loading {
-    @apply text-stone-600 
-         theme-blue:text-blue-600 animate-pulse;
+    @apply text-sm rounded text-stone-600 animate-pulse;
   }
 
   /* 主题错误 */
   .theme-error {
-    @apply text-red-600 
-         theme-blue:text-red-600;
+    @apply text-red-600;
   }
 
   /* 主题成功 暂无引用*/
   .theme-success {
-    @apply text-teal-600 
-         theme-blue:text-teal-600;
+    @apply text-teal-600;
   }
 
   /* ===== 滚动条 ===== */
@@ -195,11 +171,11 @@ html * {
   }
 
   ::-webkit-scrollbar-thumb {
-    @apply bg-white/60 theme-blue:bg-blue-300 rounded;
+    @apply bg-white/60 rounded;
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    @apply bg-white theme-blue:bg-blue-400;
+    @apply bg-white;
   }
 
   /* 特定元素滚动条类（跨浏览器支持） */
@@ -214,31 +190,26 @@ html * {
     @apply absolute z-50 min-w-[300px] w-max max-w-[90vw] mt-1 px-1
           backdrop-blur-sm rounded-lg 
           bg-white/90 
-          theme-blue:bg-blue-50/95 
          border border-white 
-         theme-blue:border-blue-200/50 
          shadow-xl;
   }
 
   /* 下拉菜单按钮 */
-  .theme-select-button {
+  .theme-template-select-button {
     @apply w-full h-10 px-3 py-2 rounded-lg transition-all
     bg-stone-50 
-         theme-blue:bg-blue-100/30 
          border border-stone-300 
-         theme-blue:border-blue-300/50 
          text-gray-900 
-         theme-blue:text-blue-900
-         theme-blue:hover:border-blue-500/70 
          hover:ring-2 hover:ring-stone-500/50 hover:border-transparent
-         theme-blue:focus:ring-blue-500/50 
          outline-none duration-300;
   }
   /* 下拉菜单项 */
   .theme-dropdown-item {
-    @apply px-3 py-2 mb-1 rounded-lg cursor-pointer transition-colors
-        text-stone-600 
-        theme-blue:text-blue-950;
+    @apply px-3 py-2 mb-1 text-sm rounded-lg cursor-pointer transition-colors
+        text-stone-600;
+  }
+  .theme-dropdown-item-description {
+    @apply text-stone-600/60;
   }
   .theme-dropdown-item:last-child {
     @apply mb-0;
@@ -246,20 +217,14 @@ html * {
 
   /* 下拉菜单项激活 */
   .theme-dropdown-item-active {
-    @apply bg-stone-300/70 
-        theme-blue:bg-blue-200/90 
-        text-stone-600 
-        theme-blue:text-blue-800;
+    @apply bg-stone-300/70 text-stone-600;
   }
 
   /* 下拉菜单项未激活 */
   .theme-dropdown-item-inactive {
-    @apply border-transparent
-        theme-blue:border-blue-200/50 
+    @apply 
         hover:bg-stone-300/40 
-        theme-blue:hover:bg-blue-100/50 
-        text-stone-700 
-        theme-blue:text-blue-700;
+        text-stone-700;
   }
   .theme-dropdown-item-tag {
     @apply bg-stone-500/80  text-white;
@@ -268,53 +233,42 @@ html * {
   /* 下拉菜单分组 */
   .theme-dropdown-section {
     @apply p-2 rounded-xl mb-1 
-    bg-stone-200/60 
-        theme-blue:border-blue-200/50 
-        theme-blue:bg-blue-100 
-        text-purple-700 
-        theme-blue:text-blue-700 
+       bg-stone-200/60 
+       text-purple-700 
         cursor-pointer;
   }
 
   /* 下拉菜单按钮 */
-  .theme-dropdown-button {
+  .theme-dropdown-config-button {
     @apply w-full px-3 py-2 text-sm rounded-lg
         bg-stone-300/60 
-        theme-blue:bg-blue-100 
         text-stone-600 
-        theme-blue:text-blue-700 
         hover:bg-stone-300 
-        theme-blue:hover:bg-blue-200 
         transition-colors flex items-center justify-center space-x-1;
   }
 
   /* 下拉菜单空状态 */
   .theme-dropdown-empty {
     @apply px-3 py-2 text-sm
-        text-gray-500 
-        theme-blue:text-blue-500;
+        text-gray-500;
   }
   /* 占位符 */
   .theme-placeholder {
-    @apply text-gray-400 
-         theme-blue:text-blue-400;
+    @apply text-gray-400;
   }
 
   /* ===== 模态框组件 ===== */
 
   /* 模态框容器 */
   .theme-modal {
-    @apply bg-white/80 
-         theme-blue:bg-blue-100 
+    @apply bg-white/90 
          backdrop-blur-sm rounded-xl shadow-xl 
-         border border-gray-200
-         theme-blue:border-blue-400;
+         border border-gray-200;
   }
 
   /* 模态框标题栏 */
   .theme-modal-header {
-    @apply border-b border-gray-200 
-         theme-blue:border-blue-200 p-4;
+    @apply border-b border-gray-200 p-4;
   }
 
   /* 模态框内容 */
@@ -325,7 +279,6 @@ html * {
   /* 模态框底部 */
   .theme-modal-footer {
     @apply border-t border-gray-200 
-         theme-blue:border-blue-200
          p-4 flex justify-end space-x-3;
   }
 
@@ -334,18 +287,14 @@ html * {
   /* 历史容器 */
   .theme-history {
     @apply bg-white/90 
-         theme-blue:bg-blue-100 
          backdrop-blur-sm rounded-xl shadow-xl 
-         border border-l border-gray-200 
-         theme-blue:border-blue-400;
+         border border-l border-gray-200;
   }
 
   /* 历史标题栏 */
   .theme-history-header {
     @apply border-b border-gray-200 
-         theme-blue:border-blue-200 
-         p-4 sm:p-6 flex items-center justify-between rounded-t-xl 
-         theme-blue:bg-blue-50/95;
+         p-4 sm:p-6 flex items-center justify-between rounded-t-xl;
   }
 
   .theme-history-empty-button {
@@ -357,18 +306,15 @@ html * {
 
   /* 历史记录卡片 */
   .theme-history-card {
-    @apply p-3 bg-gray-50/80 
-         theme-blue:bg-blue-200 
+    @apply p-3 bg-stone-50/80 
          rounded-xl border 
-         border-gray-200 
-         theme-blue:border-blue-400 
-         overflow-hidden;
+         border-stone-200 
+         shadow-sm hover:shadow-md overflow-hidden;
   }
 
   /* 历史记录卡片头部 */
   .theme-history-card-header {
-    @apply p-3 border-b border-gray-200/50 /*卡片头部下边线*/
-         theme-blue:border-blue-200/50;
+    @apply p-3 border-b border-gray-200/50; /*卡片头部下边线*/
   }
 
   /* 历史提示词内容*/
@@ -381,23 +327,19 @@ html * {
   /* 管理界面容器 */
   .theme-manager-container {
     @apply bg-white/90  
-         theme-blue:bg-blue-100/90
          backdrop-blur-sm rounded-xl shadow-xl 
-         border border-slate-200 
-         theme-blue:border-blue-400;
+         border border-slate-200;
   }
 
   /* 管理界面卡片 */
   .theme-manager-card {
     @apply bg-stone-50 
-         theme-blue:bg-blue-200 
          rounded-xl shadow-sm hover:shadow-md transition-shadow 
-         border border-gray-200 
-         theme-blue:border-blue-400;
+         border border-gray-200;
   }
 
   .theme-manager-card-optimize {
-    @apply bg-stone-300/80;
+    @apply bg-stone-400/60;
   }
 
   .theme-manager-card-iterate {
@@ -407,10 +349,8 @@ html * {
   /* 管理界面标签 */
   .theme-manager-tag {
     @apply px-2 py-1 text-xs rounded-full
-    bg-stone-300/80 
-         theme-blue:bg-blue-200
-         text-white 
-         theme-blue:text-blue-800;
+    bg-stone-400
+         text-white;
   }
   .theme-manager-tag-optimize {
     @apply px-2 py-1 text-xs rounded-full bg-amber-500/50 text-white;
@@ -429,13 +369,9 @@ html * {
   .theme-manager-input {
     @apply w-full px-4 py-2 rounded-lg 
     bg-stone-50 
-         theme-blue:bg-blue-50 
          border border-stone-300 
-         theme-blue:border-blue-300 
          text-stone-800 
-         theme-blue:text-blue-900 
          placeholder-gray-400 
-         theme-blue:placeholder-blue-400 
          focus:ring-2 focus:ring-stone-500/50 focus:border-transparent outline-none transition duration-300;
   }
 
@@ -454,9 +390,7 @@ html * {
   .theme-manager-button-test {
     @apply px-4 py-2 rounded-lg transition-colors
           bg-cyan-500/70 
-          theme-blue:bg-blue-600
           hover:bg-cyan-500 
-          theme-blue:hover:bg-blue-500 
           text-white;
   }
 
@@ -464,9 +398,7 @@ html * {
   .theme-manager-button-edit {
     @apply px-4 py-2 rounded-lg transition-colors
           bg-teal-500/70 
-          theme-blue:bg-blue-600 
           hover:bg-teal-500 
-          theme-blue:hover:bg-blue-500 
           text-white;
   }
 
@@ -474,9 +406,7 @@ html * {
   .theme-manager-button-success {
     @apply px-4 py-2 rounded-lg transition-colors
          bg-green-500/70 
-         theme-blue:bg-blue-600 
          hover:bg-green-500 
-         theme-blue:hover:bg-blue-500 
          text-white;
   }
 
@@ -484,9 +414,7 @@ html * {
   .theme-manager-button-warning {
     @apply px-4 py-2 rounded-lg transition-colors
          bg-stone-500/70 
-         theme-blue:bg-gray-500 
          hover:bg-stone-500 
-         theme-blue:hover:bg-gray-400 
          text-white;
   }
 
@@ -494,75 +422,341 @@ html * {
   .theme-manager-button-danger {
     @apply px-4 py-2 rounded-lg transition-colors
          bg-red-500/70 
-         theme-blue:bg-red-600/80 
          hover:bg-red-500 
-         theme-blue:hover:bg-red-500/80 
          text-white;
   }
 
   /* 管理界面文本 - 主要 */
   .theme-manager-text {
-    @apply text-stone-600 
-         theme-blue:text-blue-900;
+    @apply text-stone-600;
   }
 
   /* 管理界面文本 - 次要 */
   .theme-manager-text-secondary {
-    @apply text-stone-600 
-         theme-blue:text-blue-700;
+    @apply text-stone-600;
   }
 
   /* 管理界面文本 - 禁用 */
   .theme-manager-text-disabled {
-    @apply text-stone-400 
-         theme-blue:text-blue-400;
+    @apply text-stone-400;
   }
 }
 
 /* 主题变体 */
 :root[data-theme="blue"] {
+  .theme-mask {
+    @apply bg-sky-950/50;
+  }
+  /* 主题头部导航栏 */
+  .theme-header {
+    @apply bg-white/80 border-sky-300;
+  }
+  /* 主题卡片 */
+  .theme-card {
+    @apply bg-white/90 border-sky-200 shadow-sm;
+  }
+
+    /* ===== 文本组件 ===== */
+
+  /* 主题标题 */
+  .theme-title {
+    @apply text-sky-700;
+  }
+
+  /* 主题文本 */
   .theme-text {
-    @apply text-blue-950;
+    @apply text-sky-700;
   }
 
-  .theme-text-secondary {
-    @apply text-blue-800;
+  /* 主题次要文本 */
+  .theme-text-placeholder {
+    @apply text-sky-600/40;
   }
 
-  .theme-card,
-  .theme-modal,
-  .theme-history,
-  .theme-manager-container,
+  /* 主题标签 */
+  .theme-label {
+    @apply text-sky-700;
+  }
+/* ===== 表单组件 ===== */
+
+  /* 主题输入框 */
+  .theme-input {
+    @apply bg-sky-50 border-sky-200 
+         text-sky-800 placeholder-sky-600/40 
+         focus:ring-blue-500/50;
+  }
+
+  /* ===== 按钮组件 ===== */
+  /* 主题主要按钮 */
+  .theme-button-primary {
+    @apply bg-sky-200 text-sky-600 hover:bg-sky-300/80 disabled:bg-sky-300/80;
+  }
+
+  /* 主题次要按钮 */
+  .theme-button-secondary {
+    @apply bg-sky-100 text-sky-600 hover:bg-sky-200;
+  }
+
+  .theme-prompt-version-selected {
+    @apply bg-sky-400/80 text-white;
+  }
+
+  .theme-prompt-version-unselected {
+    @apply bg-sky-100 hover:bg-sky-400/20 text-sky-400 
+    transition duration-300;
+  }
+
+  /* 主题图标按钮 */
+  .theme-icon-button {
+    @apply bg-sky-100 text-sky-700 hover:bg-sky-200;
+  }
+
+    /* ===== 状态组件 ===== */
+  /* 主题加载中 */
+  .theme-loading {
+    @apply text-sky-600;
+  }
+
+  /* ===== 滚动条 ===== */
+  ::-webkit-scrollbar-thumb {
+    @apply bg-sky-200;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-sky-400;
+  }
+
+  /* ===== 下拉菜单 ===== */
+  .theme-dropdown {
+    @apply bg-sky-50/95 border-sky-200/50;
+  }
+
+  /* 下拉菜单按钮 */
+  .theme-template-select-button {
+    @apply bg-sky-100/30 
+         border-sky-200 
+         text-sky-900
+         hover:ring-blue-500/50 
+         focus:ring-sky-500/50;
+  }
+  /* 下拉菜单项 */
+  .theme-dropdown-item {
+    @apply text-sky-800;
+  }
+  .theme-dropdown-item-description {
+    @apply text-sky-600/60;
+  }
+  /* 下拉菜单项激活 */
+  .theme-dropdown-item-active {
+    @apply 
+        bg-sky-200/90 
+        text-sky-800;
+  }
+
+  /* 下拉菜单项未激活 */
+  .theme-dropdown-item-inactive {
+    @apply 
+        hover:bg-sky-200/50 
+        text-sky-700/80;
+  }
+  .theme-dropdown-item-tag {
+    @apply bg-sky-500/80  text-white;
+  }
+
+  /* 下拉菜单分组 */
+  .theme-dropdown-section {
+    @apply bg-sky-100 border-sky-100/50 ;
+  }
+
+  /* 下拉菜单按钮 */
+  .theme-dropdown-config-button {
+    @apply 
+        bg-sky-200/60 
+        text-sky-700 
+        hover:bg-sky-200;
+  }
+
+  /* 下拉菜单空状态 */
+  .theme-dropdown-empty {
+    @apply 
+        text-sky-500;
+  }
+  /* 占位符 */
+  .theme-placeholder {
+    @apply 
+         text-sky-400;
+  }
+
+  /* ===== 模态框组件 ===== */
+  /* 模态框容器 */
+  .theme-modal {
+    @apply 
+         bg-sky-100
+         border-sky-300;
+  }
+
+  /* 模态框标题栏 */
+  .theme-modal-header {
+    @apply bg-white rounded-t-xl
+         border-sky-200;
+  }
+  .theme-modal-content {
+    @apply bg-white;
+  }
+  /* 模态框底部 */
+  .theme-modal-footer {
+    @apply bg-white rounded-b-xl
+         border-sky-200;
+  }
+
+  /* ===== 历史记录组件 ===== */
+
+  /* 历史容器 */
+  .theme-history {
+    @apply bg-sky-100 
+         border-sky-300;
+  }
+
+  /* 历史标题栏 */
+  .theme-history-header {
+    @apply 
+         border-blue-200 
+         bg-blue-50/95;
+  }
+
+  /* ===== 卡片组件 ===== */
+
+  /* 历史记录卡片 */
+  .theme-history-card {
+    @apply 
+         bg-white 
+         border-sky-200;
+  }
+
+  /* 历史记录卡片头部 */
+  .theme-history-card-header {
+    @apply border-sky-200/50; /*卡片头部下边线*/
+  }
+
+  /* 历史提示词内容*/
+  .theme-history-card-content {
+    @apply bg-sky-200/40 border-sky-200/50;
+  }
+
+  /* ===== 管理界面组件 ===== */
+
+  /* 管理界面容器 */
+  .theme-manager-container {
+    @apply 
+         bg-sky-100
+         border-sky-200;
+  }
+
+  /* 管理界面卡片 */
   .theme-manager-card {
-    @apply bg-white border-blue-200;
+    @apply 
+         bg-white 
+         border-sky-100;
   }
 
-  .theme-modal-header,
-  .theme-history-header,
+  .theme-manager-card-optimize {
+    @apply bg-sky-400/60;
+  }
+
+  .theme-manager-card-iterate {
+    @apply bg-teal-300/80;
+  }
+
+  /* 管理界面标签 */
+  .theme-manager-tag {
+    @apply bg-sky-200
+         text-sky-800;
+  }
+  .theme-manager-tag-optimize {
+    @apply bg-amber-500/50 text-white;
+  }
+
+  .theme-manager-tag-iterate {
+    @apply bg-green-500/50 text-white;
+  }
+
+  /* 管理界面分割线 */
   .theme-manager-divider {
-    @apply divide-blue-400/80;
-  }
-
-  .theme-manager-text {
-    @apply text-blue-950;
-  }
-
-  .theme-manager-text-secondary {
-    @apply text-blue-800;
-  }
-  .theme-manager-button-primary {
-    @apply bg-sky-500 hover:bg-sky-400 text-white;
-  }
-  .theme-manager-button-secondary {
-    @apply bg-sky-200 hover:bg-sky-300 text-sky-900;
-  }
-
-  .theme-manager-text-disabled {
-    @apply text-blue-500;
+    @apply divide-sky-100;
   }
 
+  /* 管理界面表单输入框 */
   .theme-manager-input {
-    @apply bg-white border-blue-300 text-blue-950 placeholder-blue-400;
+    @apply bg-sky-50 
+         border-blue-300 
+         text-blue-900 
+         placeholder-blue-400 
+         focus:ring-sky-500/50 focus:border-transparent;
+  }
+
+  /* 管理界面按钮 - 主要 （添加自定义模型） */
+  .theme-manager-button-primary {
+    @apply 
+         bg-sky-200 text-sky-600;
+  }
+
+  /* 管理界面按钮 - 次要 */
+  .theme-manager-button-secondary {
+    @apply 
+         bg-sky-200/50 hover:bg-sky-200 text-sky-600;
+  }
+  /* 管理界面按钮 - 测试连接 */
+  .theme-manager-button-test {
+    @apply 
+
+          bg-sky-300
+          hover:bg-sky-400;
+  }
+
+  /* 管理界面按钮 - 编辑 */
+  .theme-manager-button-edit {
+    @apply
+          bg-teal-300 
+          hover:bg-teal-400;
+  }
+
+  /* 管理界面按钮 - 成功（启用） */
+  .theme-manager-button-success {
+    @apply
+         bg-teal-600 
+         hover:bg-teal-500;
+  }
+
+  /* 管理界面按钮 - 警告（禁用） */
+  .theme-manager-button-warning {
+    @apply
+         bg-gray-300 
+         hover:bg-gray-400;
+  }
+
+  /* 管理界面按钮 - 危险（删除） */
+  .theme-manager-button-danger {
+    @apply 
+         bg-red-400/80 
+         hover:bg-red-500/80;
+  }
+
+  /* 管理界面文本 - 主要 */
+  .theme-manager-text {
+    @apply 
+        text-sky-700;
+  }
+
+  /* 管理界面文本 - 次要 */
+  .theme-manager-text-secondary {
+    @apply 
+        text-sky-600;
+  }
+
+  /* 管理界面文本 - 禁用 */
+  .theme-manager-text-disabled {
+    @apply 
+         text-blue-400;
   }
 }
 
@@ -596,8 +790,8 @@ html * {
     @apply text-teal-200;
   }
 
-  .theme-text-secondary {
-    @apply text-teal-600;
+  .theme-text-placeholder {
+    @apply text-teal-500/80;
   }
 
   .theme-header {
@@ -622,7 +816,7 @@ html * {
   /* ===== 状态组件 ===== */
   /* 主题加载中 */
   .theme-loading {
-    @apply text-teal-300;
+    @apply text-teal-200;
   }
   /* 主题错误 */
   .theme-error {
@@ -657,7 +851,7 @@ html * {
   .theme-dropdown-section {
     @apply border-teal-200/50 bg-teal-200/60 text-teal-700;
   }
-  .theme-dropdown-button {
+  .theme-dropdown-config-button {
     @apply bg-teal-300 hover:bg-teal-200 text-teal-700;
   }
   /* 下拉菜单空状态 */
@@ -716,10 +910,10 @@ html * {
   }
 
   .theme-input {
-    @apply bg-teal-800/50 border-teal-700 text-teal-300 placeholder-teal-400 focus:ring-teal-500/80;
+    @apply bg-teal-800/50 border-teal-700 text-teal-300 placeholder-teal-500/80 focus:ring-teal-500/80;
   }
 
-  .theme-select-button {
+  .theme-template-select-button {
     @apply bg-teal-700 border-teal-600 hover:ring-2 hover:ring-teal-500/80 text-teal-300;
   }
 
@@ -801,7 +995,7 @@ html * {
   }
 
   /* 主题次要文本 */
-  .theme-text-secondary {
+  .theme-text-placeholder {
     @apply text-white/50;
   }
 
@@ -826,8 +1020,8 @@ html * {
 
   /* 主题次要按钮 */
   .theme-button-secondary {
-    @apply bg-purple-400/60
-         text-purple-300
+    @apply bg-purple-400/20
+         text-purple-200
          hover:bg-purple-500/80;
   }
   .theme-prompt-version-selected {
@@ -880,7 +1074,7 @@ html * {
   }
 
   /* 下拉菜单按钮 */
-  .theme-select-button {
+  .theme-template-select-button {
     @apply bg-black/20 border-purple-600/50
          text-white 
          hover:ring-purple-300/50;
@@ -909,7 +1103,7 @@ html * {
   }
 
   /* 下拉菜单按钮 */
-  .theme-dropdown-button {
+  .theme-dropdown-config-button {
     @apply bg-purple-600/20 text-purple-300 hover:bg-purple-600/30;
   }
 
@@ -1063,8 +1257,8 @@ html * {
     @apply text-slate-100;
   }
 
-  .theme-text-secondary {
-    @apply text-slate-300;
+  .theme-text-placeholder {
+    @apply text-slate-500/80;
   }
   /* 主题标签 */
   .theme-label {
@@ -1081,9 +1275,9 @@ html * {
   }
   .theme-input {
     @apply bg-slate-800 border-slate-600 
-    text-slate-100 placeholder-slate-500 focus:ring-purple-600/50;
+    text-slate-100 placeholder-slate-500/80 focus:ring-purple-600/50;
   }
-  .theme-select-button {
+  .theme-template-select-button {
     @apply bg-slate-800 border-gray-700/50 text-slate-100 hover:ring-purple-600/50;
   }
   .theme-prompt-version-selected {
@@ -1100,7 +1294,7 @@ html * {
   /* ===== 状态组件 ===== */
   /* 主题加载中 */
   .theme-loading {
-    @apply text-purple-400;
+    @apply text-slate-400;
   }
 
   /* 主题错误 */
@@ -1151,7 +1345,7 @@ html * {
   }
 
   /* 下拉菜单按钮 */
-  .theme-dropdown-button {
+  .theme-dropdown-config-button {
     @apply bg-purple-800/30 text-purple-300 hover:bg-purple-800/50;
   }
   /* 下拉菜单空状态 */