Browse Source

fix(ui): 降饱和度+多色层次+去花哨,修正廉价感

Mochocyang 3 tháng trước cách đây
mục cha
commit
c6706e8514
3 tập tin đã thay đổi với 37 bổ sung và 40 xóa
  1. 1 2
      src/components/chat/chat-panel.tsx
  2. 12 14
      src/components/project/welcome-screen.tsx
  3. 24 24
      src/index.css

+ 1 - 2
src/components/chat/chat-panel.tsx

@@ -1456,7 +1456,7 @@ export function ChatPanel() {
   }, [])
 
   return (
-    <div className="flex h-full flex-col overflow-hidden bg-muted/30">
+    <div className="flex h-full flex-col overflow-hidden bg-background">
       <ConversationTabs onAbortStream={abortConversationStream} />
 
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
@@ -1518,7 +1518,6 @@ export function ChatPanel() {
         )}
 
         <div className="shrink-0 bg-background">
-          <div className="h-0.5 bg-gradient-to-r from-primary/0 via-primary/40 to-primary/0" />
           <ChatInput
             onSend={handleSend}
             onStop={handleStop}

+ 12 - 14
src/components/project/welcome-screen.tsx

@@ -58,18 +58,16 @@ export function WelcomeScreen({
   }
 
   return (
-    <div className="fixed inset-0 flex items-center justify-center bg-gradient-to-br from-primary/5 via-background to-background">
+    <div className="fixed inset-0 flex items-center justify-center bg-background">
       <div className="flex flex-col items-center gap-8 px-4">
         <div className="flex flex-col items-center gap-4 text-center">
-          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10 p-3">
-            <img
-              src={logoImg}
-              alt={t(novelMode ? "novel.app.title" : "app.title")}
-              className="h-10 w-10 rounded-[22%]"
-            />
-          </div>
+          <img
+            src={logoImg}
+            alt={t(novelMode ? "novel.app.title" : "app.title")}
+            className="h-12 w-12 rounded-[22%]"
+          />
           <div>
-            <h1 className="bg-gradient-to-r from-primary to-primary/70 bg-clip-text text-4xl font-bold text-transparent">
+            <h1 className="text-3xl font-bold text-foreground">
               {t(novelMode ? "novel.app.title" : "app.title")}
             </h1>
             <p className="mt-2 text-muted-foreground">
@@ -79,15 +77,15 @@ export function WelcomeScreen({
         </div>
 
         <div className="flex flex-wrap justify-center gap-3">
-          <Button size="lg" onClick={onCreateProject}>
+          <Button onClick={onCreateProject}>
             <Plus className="mr-2 h-4 w-4" />
             {t("welcome.newProject")}
           </Button>
-          <Button variant="outline" size="lg" onClick={onOpenProject}>
+          <Button variant="outline" onClick={onOpenProject}>
             <FolderOpen className="mr-2 h-4 w-4" />
             {t("welcome.openProject")}
           </Button>
-          <Button variant="secondary" size="lg" onClick={handleRestoreBackup} disabled={isRestoring}>
+          <Button variant="secondary" onClick={handleRestoreBackup} disabled={isRestoring}>
             <Database className="mr-2 h-4 w-4" />
             {isRestoring ? "恢复中..." : "恢复数据"}
           </Button>
@@ -99,12 +97,12 @@ export function WelcomeScreen({
               <Clock className="h-3.5 w-3.5" />
               {t("welcome.recentProjects")}
             </div>
-            <div className="space-y-2">
+            <div className="rounded-lg border">
               {recentProjects.map((proj) => (
                 <button
                   key={proj.path}
                   onClick={() => onSelectProject(proj)}
-                  className="group flex w-full items-center justify-between rounded-xl border bg-card px-4 py-3 text-left shadow-sm transition-all hover:-translate-y-0.5 hover:bg-accent hover:shadow-md"
+                  className="group flex w-full items-center justify-between rounded-lg border bg-card px-4 py-3 text-left transition-colors hover:bg-accent"
                 >
                   <div className="min-w-0 flex-1">
                     <div className="truncate text-sm font-medium">{proj.name}</div>

+ 24 - 24
src/index.css

@@ -55,23 +55,23 @@
     --card-foreground: oklch(0.145 0 0);
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.62 0.11 185);
+    --primary: oklch(0.55 0.055 195);
     --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.97 0 0);
+    --secondary: oklch(0.965 0.005 230);
     --secondary-foreground: oklch(0.205 0 0);
     --muted: oklch(0.97 0 0);
     --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
+    --accent: oklch(0.955 0.01 250);
     --accent-foreground: oklch(0.205 0 0);
     --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: oklch(0.72 0.11 185);
-    --chart-2: oklch(0.6 0.1 190);
-    --chart-3: oklch(0.5 0.08 195);
-    --chart-4: oklch(0.45 0.05 200);
-    --chart-5: oklch(0.4 0.02 210);
+    --border: oklch(0.915 0.008 195);
+    --input: oklch(0.92 0.008 195);
+    --ring: oklch(0.65 0.04 195);
+    --chart-1: oklch(0.68 0.06 195);
+    --chart-2: oklch(0.55 0.05 230);
+    --chart-3: oklch(0.45 0.04 260);
+    --chart-4: oklch(0.5 0.06 30);
+    --chart-5: oklch(0.4 0.03 340);
     --radius: 0.625rem;
     --sidebar: oklch(0.985 0 0);
     --sidebar-foreground: oklch(0.145 0 0);
@@ -90,23 +90,23 @@
     --card-foreground: oklch(0.985 0 0);
     --popover: oklch(0.205 0 0);
     --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.72 0.1 185);
+    --primary: oklch(0.65 0.05 195);
     --primary-foreground: oklch(0.145 0 0);
-    --secondary: oklch(0.269 0 0);
+    --secondary: oklch(0.269 0.008 250);
     --secondary-foreground: oklch(0.985 0 0);
     --muted: oklch(0.269 0 0);
     --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
+    --accent: oklch(0.28 0.015 250);
     --accent-foreground: oklch(0.985 0 0);
     --destructive: oklch(0.704 0.191 22.216);
     --border: oklch(1 0 0 / 10%);
     --input: oklch(1 0 0 / 15%);
     --ring: oklch(0.556 0 0);
-    --chart-1: oklch(0.78 0.12 185);
-    --chart-2: oklch(0.66 0.1 190);
-    --chart-3: oklch(0.56 0.09 195);
-    --chart-4: oklch(0.5 0.07 200);
-    --chart-5: oklch(0.45 0.05 210);
+    --chart-1: oklch(0.7 0.06 195);
+    --chart-2: oklch(0.58 0.05 230);
+    --chart-3: oklch(0.5 0.04 260);
+    --chart-4: oklch(0.55 0.06 30);
+    --chart-5: oklch(0.48 0.03 340);
     --sidebar: oklch(0.205 0 0);
     --sidebar-foreground: oklch(0.985 0 0);
     --sidebar-primary: oklch(0.488 0.243 264.376);
@@ -119,13 +119,13 @@
 
 /* 深蓝护眼主题 */
 .deep-blue {
-    --background: oklch(0.18 0.05 240);
-    --foreground: oklch(0.95 0.02 230);
+    --background: oklch(0.17 0.045 240);
+    --foreground: oklch(0.96 0.015 230);
     --card: oklch(0.22 0.06 238);
     --card-foreground: oklch(0.95 0.02 230);
     --popover: oklch(0.22 0.06 238);
     --popover-foreground: oklch(0.95 0.02 230);
-    --primary: oklch(0.7 0.12 195);
+    --primary: oklch(0.6 0.06 195);
     --primary-foreground: oklch(0.98 0 0);
     --secondary: oklch(0.28 0.07 235);
     --secondary-foreground: oklch(0.95 0.02 230);
@@ -134,7 +134,7 @@
     --accent: oklch(0.32 0.08 233);
     --accent-foreground: oklch(0.95 0.02 230);
     --destructive: oklch(0.65 0.2 20);
-    --border: oklch(0.35 0.06 235);
+    --border: oklch(0.4 0.06 235);
     --input: oklch(0.32 0.07 233);
     --ring: oklch(0.55 0.12 238);
     --chart-1: oklch(0.7 0.15 240);
@@ -144,7 +144,7 @@
     --chart-5: oklch(0.35 0.07 225);
     --sidebar: oklch(0.2 0.055 236);
     --sidebar-foreground: oklch(0.95 0.02 230);
-    --sidebar-primary: oklch(0.6 0.18 240);
+    --sidebar-primary: oklch(0.5 0.06 195);
     --sidebar-primary-foreground: oklch(0.98 0 0);
     --sidebar-accent: oklch(0.26 0.065 234);
     --sidebar-accent-foreground: oklch(0.95 0.02 230);