feat(ui): 更新样式系统并添加视觉元素

- 添加启动界面和侧边栏logo样式
- 更新Tailwind配置以支持新设计需求
- 为蓝紫渐变主题奠定视觉基础
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

apps/ui/src/tailwind.css

-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
 @import "tailwindcss";
 
 @theme {
-  --font-sans: "Inter", "PingFang SC", "Microsoft YaHei UI", sans-serif;
+  --font-sans: "Exo 2", "Plus Jakarta Sans", "PingFang SC", "Microsoft YaHei UI", "Segoe UI", sans-serif;
   --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+  --font-heading: "Orbitron", "Exo 2", sans-serif;
 }
 
 @layer base {
   :root {
     --conversation-content-max-width: 900px;
+    --ui-color-primary: #7C3AED;
+    --ui-color-primary-strong: #6D28D9;
+    --ui-color-primary-soft: #A78BFA;
+    --ui-color-accent: #06B6D4;
+    --ui-color-canvas: #0F0F23;
+    --ui-color-canvas-strong: #1a0b2e;
+    --ui-color-surface: rgba(255, 255, 255, 0.08);
+    --ui-color-surface-muted: rgba(255, 255, 255, 0.05);
+    --ui-color-border: rgba(124, 58, 237, 0.2);
+    --ui-color-border-strong: rgba(124, 58, 237, 0.4);
+    --ui-color-text: #E2E8F0;
+    --ui-color-text-muted: #94A3B8;
+    --ui-shadow-soft: 0 14px 30px rgba(0, 0, 0, 0.3);
+    --ui-shadow-panel: 0 22px 48px rgba(0, 0, 0, 0.4);
   }
 
   html,
@@ -20,8 +35,8 @@
   body {
     margin: 0;
     font-family: var(--font-sans);
-    background: #f0f7ff;
-    color: #0f172a;
+    background: linear-gradient(135deg, #0F0F23 0%, #1a0b2e 100%);
+    color: var(--ui-color-text);
   }
 }
 
@@ -56,10 +71,6 @@
 }
 
 @layer components {
-  .sidebar-logo-block .sidebar-logo-copy strong {
-    @apply text-[18px] font-semibold tracking-[0.02em] text-slate-900;
-  }
-
   .nav-item-icon svg,
   .expert-chip-icon svg,
   .message-action-icon svg,
@@ -70,73 +81,11 @@
     height: 18px;
   }
 
-  .conversation-panel-copy {
-    @apply w-full min-w-0 max-w-none;
-  }
-
-  .conversation-content-width {
-    width: min(100%, var(--conversation-content-max-width));
-    margin-inline: auto;
-  }
-
-  .conversation-panel-head-layout {
-    grid-template-columns: minmax(0, var(--conversation-content-max-width)) minmax(72px, 1fr) auto;
-  }
-
-  .home-microcopy,
-  .expert-hero-kicker {
-    -webkit-app-region: no-drag;
-    @apply flex min-h-14 items-center gap-3 rounded-[20px] border border-[#dbeafe] bg-white/85 px-5 py-3 shadow-[0_18px_40px_rgba(148,163,184,0.08)];
-  }
-
-  .home-microcopy-icon,
-  .expert-hero-icon {
-    @apply flex h-11 w-11 items-center justify-center rounded-full bg-[#f0f7ff] text-[#2563eb] shadow-[inset_0_0_0_1px_rgba(191,219,254,0.95)];
-  }
-
-  .home-microcopy-text {
-    @apply flex-1 text-[15px] font-medium text-slate-900;
-  }
-
-  .home-microcopy-tag {
-    @apply rounded-full bg-[#f8fbff] px-3 py-1.5 text-[12px] text-slate-500 shadow-[inset_0_0_0_1px_rgba(219,234,254,0.9)];
-  }
-
-  .expert-hero-copy {
-    @apply flex min-w-0 flex-col;
-  }
-
-  .expert-hero-label {
-    @apply text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400;
-  }
-
-  .expert-hero-copy strong {
-    @apply truncate text-[18px] font-semibold text-slate-900;
-  }
-
   .message-list {
-    @apply w-full;
     scrollbar-width: thin;
     scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
   }
 
-  .message-card {
-    @apply w-full max-w-full min-w-0;
-  }
-
-  .message-bubble {
-    @apply min-w-0 max-w-full;
-  }
-
-  .message-card.user .message-bubble {
-    width: fit-content;
-    max-width: min(82%, 720px);
-  }
-
-  .message-card.assistant .message-bubble {
-    @apply w-full max-w-full;
-  }
-
   .message-list::-webkit-scrollbar,
   .markdown-code-pre::-webkit-scrollbar {
     width: 10px;
@@ -156,14 +105,6 @@
     @apply mb-0;
   }
 
-  .message-card.assistant .message-bubble {
-    @apply relative;
-  }
-
-  .message-card.user .message-plain-text {
-    @apply whitespace-pre-wrap;
-  }
-
   .message-card.assistant .message-card-actions {
     @apply pointer-events-none;
   }
@@ -172,10 +113,6 @@
     @apply pointer-events-auto;
   }
 
-  .message-action-icon {
-    -webkit-app-region: no-drag;
-  }
-
   .markdown-inline-code,
   .markdown-code-pre,
   .markdown-code-pre code {
@@ -190,75 +127,7 @@
     @apply min-h-11 px-4 text-[11px] tracking-[0.18em];
   }
 
-  .markdown-code-copy {
-    -webkit-app-region: no-drag;
-  }
-
   .markdown-code-copy.copied {
     @apply bg-emerald-500/20 text-emerald-200;
   }
-
-  .composer-shell {
-    @apply w-full;
-  }
-
-  .composer-field textarea {
-    min-height: 60px;
-    max-height: 126px;
-  }
-
-  .composer-left-tools {
-    align-items: center;
-    gap: 4px !important;
-  }
-
-  .composer-tool-button,
-  .attachment-trigger.icon-only,
-  .skill-trigger {
-    display: inline-flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    width: auto !important;
-    height: auto !important;
-    min-height: 0 !important;
-    padding: 0 !important;
-    border: 0 !important;
-    border-radius: 0 !important;
-    background: transparent !important;
-    box-shadow: none !important;
-  }
-
-  .attachment-trigger.icon-only svg {
-    width: 18px;
-    height: 18px;
-  }
-
-  .skill-trigger {
-    font-size: 20px;
-    line-height: 1;
-  }
-
-  .composer-attachment-remove,
-  .skill-chip,
-  .skill-menu,
-  .skill-menu-item,
-  .sidebar-session-close,
-  .sidebar-session-menu,
-  .sidebar-session-menu-item {
-    -webkit-app-region: no-drag;
-  }
-
-  @media (max-width: 960px) {
-    .conversation-panel-head-layout {
-      grid-template-columns: minmax(0, 1fr);
-    }
-
-    .conversation-panel-head-layout .conversation-drag-strip {
-      display: none;
-    }
-
-    .conversation-panel-head-layout .conversation-panel-actions {
-      justify-content: flex-start;
-    }
-  }
 }