UI/refactor

src/renderer/shell/components/AppBar.vue

@@ -79,7 +79,7 @@
         <Icon icon="lucide:history" class="w-4 h-4" />
       </Button>
       <Button
-        variant="ghost"
+        size="icon"
         class="window-no-drag-region shrink-0 w-10 bg-transparent shadow-none rounded-none hover:bg-card/80 text-xs font-medium text-foreground flex items-center justify-center transition-all duration-200 group border-l"
         @click="openSettings"
       >

src/renderer/src/App.vue

@@ -322,9 +322,10 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div
-    class="flex flex-col h-screen border-x border-b border-window-inner-border rounded-b-[10px] bg-background"
-  >
+  <div class="flex flex-col h-screen bg-background">
+    <div
+      class="border-x border-b border-window-inner-border rounded-b-[10px] fixed z-10 top-0 left-0 bottom-0 right-0 pointer-events-none"
+    ></div>
     <div class="flex flex-row h-0 grow relative overflow-hidden px-px py-px" :dir="langStore.dir">
       <!-- Main content area -->
 

src/renderer/src/assets/style.css

@@ -59,19 +59,19 @@
 
     --container: var(--white);
     --background: var(--white);
-    --foreground: var(--base-800);
+    --foreground: hsl(0 0 15% / 1);
     --card: hsl(0 0% 100%);
-    --card-foreground: var(--base-800);
+    --card-foreground: hsl(0 0 15% / 1);
     --popover: hsl(0 0% 100%);
-    --popover-foreground: var(--base-800);
+    --popover-foreground: hsl(0 0 15% / 1);
     --primary: hsl(210 100% 43%);
     --primary-foreground: hsl(0 0% 100%);
-    --secondary: var(--base-200);
-    --secondary-foreground: var(--base-700);
+    --secondary: hsl(0 0 0% / 0.05);
+    --secondary-foreground: hsl(0 0 15% / 0.5);
     --muted: hsl(0 0 0% / 0.03);
-    --muted-foreground: var(--base-400);
+    --muted-foreground: hsl(0 0 15% / 0.5);
     --accent: hsl(0 0 15% / 0.05);
-    --accent-foreground: hsl(0 0 15% / 0.05);
+    --accent-foreground: hsl(0 0 15% / 0.8);
     --destructive: hsl(0 84.2% 60.2%);
     --destructive-foreground: hsl(0 0% 98%);
     /* --border: var(--base-200); */
@@ -152,7 +152,7 @@
     --secondary: hsl(0 0 15% / 0.8);
     --secondary-foreground: var(--base-50);
     --muted: hsl(0 0 100% / 0.03);
-    --muted-foreground: var(--base-500);
+    --muted-foreground: hsl(0 0 100% / 0.2);
     --accent: hsl(0 0 100% / 0.05);
     --accent-foreground: hsl(0 0 100% / 0.8);
     --destructive: hsl(0 62.8% 30.6%);
@@ -210,7 +210,7 @@
       --secondary: hsl(0 0 15% / 0.8);
       --secondary-foreground: hsl(0 0 100%);
       --muted: hsl(0 0 100% / 0.03);
-      --muted-foreground: var(--base-500);
+      --muted-foreground: hsl(0 0 100% / 0.2);
       --accent: hsl(0 0 100% / 0.05);
       --accent-foreground: hsl(0 0 100% / 0.8);
       --destructive: hsl(0 62.8% 30.6%);

src/renderer/src/components/message/MessageList.vue

@@ -54,15 +54,14 @@
           v-if="showCancelButton"
           key="cancel"
           variant="outline"
-          size="sm"
-          class="rounded-lg"
+          size="icon"
+          class="w-8 h-8 shrink-0 opacity-100 bg-card backdrop-blur-lg z-20"
           @click="handleCancel"
         >
           <Icon
             icon="lucide:square"
             class="w-6 h-6 bg-red-500 p-1 text-primary-foreground rounded-full"
           />
-          <span class="">{{ t('common.cancel') }}</span>
         </Button>
 
         <!-- 新聊天按钮 (仅在非生成状态显示) -->
@@ -74,7 +73,7 @@
           class="w-8 h-8 shrink-0 opacity-100 bg-card backdrop-blur-lg z-20"
           @click="createNewThread"
         >
-          <Icon icon="lucide:brush-cleaning" class="w-6 h-6 text-primary-foreground" />
+          <Icon icon="lucide:brush-cleaning" class="w-6 h-6 text-foreground" />
           <!-- <span class="">{{ t('common.newChat') }}</span> -->
         </Button>
 
@@ -87,7 +86,7 @@
           class="w-8 h-8 shrink-0 relative z-10 backdrop-blur-lg"
           @click="scrollToBottom(true)"
         >
-          <Icon icon="lucide:arrow-down" class="w-5 h-5 text-primary-foreground" />
+          <Icon icon="lucide:arrow-down" class="w-5 h-5 text-foreground" />
         </Button>
       </TransitionGroup>
     </template>

src/renderer/src/components/prompt-input/PromptInput.vue

@@ -77,7 +77,7 @@
                     :class="[
                       'flex w-7 border-none rounded-none shadow-none items-center gap-1.5 px-2 h-full text-foreground ',
                       settings.webSearch
-                        ? 'dark:!bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground'
+                        ? 'dark:!bg-primary hover:bg-primary/90 hover:text-primary-foreground'
                         : 'dark:text-white/70'
                     ]"
                     :dir="langStore.dir"