From 5ea958e5c10007157404d688c7bf24c1842a2492 Mon Sep 17 00:00:00 2001 From: thzxx Date: Fri, 17 Apr 2026 13:52:55 +0800 Subject: [PATCH] =?UTF-8?q?style:=20UI=20=E4=B8=BB=E9=A2=98=E6=94=B9?= =?UTF-8?q?=E7=89=88=20=E2=80=94=20=E6=9A=97=E8=89=B2=E2=86=92=E6=9A=96?= =?UTF-8?q?=E8=89=B2=E8=B0=83=E4=BA=AE=E8=89=B2=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 奶白背景 (#FAF7F2) + 珊瑚橙主色 (#E8734A) - 圆润柔和设计: radius 8-20px, 柔和阴影 - 紫色辅助色 (Think/推理), 金色标签 (Token) - 终端区域保留深色 (#2D2016 暖棕) 保证可读性 - 窗口背景色、导出 HTML、theme-color 同步更新 - 字体升级: Inter + JetBrains Mono --- src/main/main.ts | 2 +- src/renderer/components/chat-area.ts | 10 +- src/renderer/index.html | 8 +- src/renderer/styles/style.css | 1035 +++++++++++++------------- 4 files changed, 547 insertions(+), 508 deletions(-) diff --git a/src/main/main.ts b/src/main/main.ts index 5819e43..dc5a8f0 100644 --- a/src/main/main.ts +++ b/src/main/main.ts @@ -47,7 +47,7 @@ function createMainWindow(): BrowserWindow { minHeight: 600, icon: process.platform === 'win32' ? ICO_PATH : ICON_PATH, title: APP_NAME, - backgroundColor: '#202020', + backgroundColor: '#FAF7F2', show: false, autoHideMenuBar: true, webPreferences: { diff --git a/src/renderer/components/chat-area.ts b/src/renderer/components/chat-area.ts index fdc3654..d2ebce9 100644 --- a/src/renderer/components/chat-area.ts +++ b/src/renderer/components/chat-area.ts @@ -431,11 +431,11 @@ export async function exportAsMarkdown(session: ChatSession): Promise { export async function exportAsHtml(session: ChatSession): Promise { let html = `${escapeHtml(session.title)} - +

${escapeHtml(session.title)}

${formatTime(session.createdAt)} · ${session.model}

`; session.messages.forEach(m => { html += `
${m.role === 'user' ? '👤 用户' : '🤖 AI'}
${(m.content || '').replace(/\n/g, '
')}
`; diff --git a/src/renderer/index.html b/src/renderer/index.html index 1bdb68e..b55a27a 100644 --- a/src/renderer/index.html +++ b/src/renderer/index.html @@ -3,7 +3,7 @@ - + Metona Ollama @@ -431,9 +431,9 @@
diff --git a/src/renderer/styles/style.css b/src/renderer/styles/style.css index b2444c6..bcdf2cc 100644 --- a/src/renderer/styles/style.css +++ b/src/renderer/styles/style.css @@ -1,60 +1,62 @@ /* ═══════════════════════════════════════════════════════════════ - Metona Ollama — Windows 11 Fluent Design 暗色主题 - Mica 材质 · Segoe UI Variable · WinUI 3 控件风格 + Metona Ollama — Warm Light Theme + 暖色调 · 圆润柔和 · 珊瑚橙主色 · 奶白背景 ═══════════════════════════════════════════════════════════════ */ /* ── CSS 变量 ── */ :root { - /* Windows 11 暗色调色板 */ - --bg-solid: #202020; - --bg-card: #2d2d2d; - --bg-card-hover: #323232; - --bg-layer: #383838; - --bg-layer-alt: #2a2a2a; - --bg-smoke: rgba(0, 0, 0, 0.3); - --bg-mica: rgba(32, 32, 32, 0.72); - --bg-acrylic: rgba(32, 32, 32, 0.8); + /* 暖色调色板 */ + --bg-solid: #FAF7F2; + --bg-card: #FFFFFF; + --bg-card-hover: #FFF8F0; + --bg-layer: #F5F0E8; + --bg-layer-alt: #FBF6EE; + --bg-smoke: rgba(0, 0, 0, 0.12); + --bg-mica: rgba(250, 247, 242, 0.85); + --bg-acrylic: rgba(250, 247, 242, 0.9); - --border-subtle: rgba(255, 255, 255, 0.06); - --border-default: rgba(255, 255, 255, 0.08); - --border-strong: rgba(255, 255, 255, 0.12); - --border-focus: #60CDFF; + --border-subtle: rgba(0, 0, 0, 0.06); + --border-default: rgba(0, 0, 0, 0.1); + --border-strong: rgba(0, 0, 0, 0.15); + --border-focus: #E8734A; - --text-primary: #FFFFFF; - --text-secondary: #999999; - --text-tertiary: #666666; - --text-disabled: #505050; + --text-primary: #2D2016; + --text-secondary: #7A6E5D; + --text-tertiary: #B0A594; + --text-disabled: #CCC5B8; - --accent: #60CDFF; - --accent-hover: #7AD8FF; - --accent-subtle: rgba(96, 205, 255, 0.06); - --accent-subtle-hover: rgba(96, 205, 255, 0.1); + /* 珊瑚橙主色 */ + --accent: #E8734A; + --accent-hover: #D4623A; + --accent-subtle: rgba(232, 115, 74, 0.08); + --accent-subtle-hover: rgba(232, 115, 74, 0.14); - --critical: #F1707B; - --critical-bg: rgba(241, 112, 123, 0.06); - --success: #6CCB5F; - --success-bg: rgba(108, 203, 95, 0.06); - --caution: #FCE100; - --caution-bg: rgba(252, 225, 0, 0.06); + --critical: #D94F5C; + --critical-bg: rgba(217, 79, 92, 0.08); + --success: #4AAE6B; + --success-bg: rgba(74, 174, 107, 0.08); + --caution: #D4A03C; + --caution-bg: rgba(212, 160, 60, 0.08); - /* 圆角 — Windows 11 标准 */ - --radius-control: 4px; - --radius-sm: 8px; - --radius-md: 8px; - --radius-lg: 12px; - --radius-xl: 16px; + /* 圆角 — 温暖圆润 */ + --radius-control: 8px; + --radius-sm: 10px; + --radius-md: 12px; + --radius-lg: 16px; + --radius-xl: 20px; - /* 阴影 — Fluent Design 深度 */ - --shadow-flyout: 0 8px 16px rgba(0, 0, 0, 0.14); - --shadow-dialog: 0 24px 48px rgba(0, 0, 0, 0.18); - --shadow-tooltip: 0 4px 8px rgba(0, 0, 0, 0.14); + /* 阴影 — 柔和温暖 */ + --shadow-flyout: 0 4px 24px rgba(45, 32, 22, 0.08); + --shadow-dialog: 0 12px 48px rgba(45, 32, 22, 0.12); + --shadow-tooltip: 0 2px 12px rgba(45, 32, 22, 0.1); + --shadow-card: 0 1px 4px rgba(45, 32, 22, 0.04), 0 4px 16px rgba(45, 32, 22, 0.06); /* 字体 */ - --font: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif; - --font-mono: 'Cascadia Mono', 'Cascadia Code', 'Consolas', monospace; + --font: 'Inter', 'SF Pro Display', -apple-system, 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif; + --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace; - --transition: 167ms cubic-bezier(0, 0, 0, 1); - --transition-fast: 83ms cubic-bezier(0, 0, 0, 1); + --transition: 200ms cubic-bezier(0.25, 0.1, 0.25, 1); + --transition-fast: 100ms cubic-bezier(0.25, 0.1, 0.25, 1); } /* ── 全局重置 ── */ @@ -71,7 +73,7 @@ html, body { color: var(--text-primary); font-family: var(--font); font-size: 14px; - line-height: 1.5; + line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -99,7 +101,7 @@ html, body { display: flex; align-items: center; justify-content: space-between; - padding: 10px 12px; + padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; } @@ -114,7 +116,7 @@ html, body { flex: 1; overflow-y: auto; padding: 6px 0; - font-family: 'Cascadia Code', 'Consolas', 'Menlo', monospace; + font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; } @@ -129,15 +131,15 @@ html, body { align-items: baseline; padding: 3px 10px; gap: 6px; - border-bottom: 1px solid rgba(255,255,255,0.02); + border-bottom: 1px solid rgba(0,0,0,0.02); } .log-entry:hover { - background: rgba(255,255,255,0.03); + background: rgba(0,0,0,0.02); } .log-time { - color: var(--text-muted); + color: var(--text-tertiary); font-size: 10px; flex-shrink: 0; min-width: 56px; @@ -158,8 +160,8 @@ html, body { width: 100%; margin: 2px 0 0; padding: 4px 8px; - background: rgba(0,0,0,0.25); - border-radius: 4px; + background: var(--bg-layer); + border-radius: 6px; font-size: 10.5px; line-height: 1.4; white-space: pre-wrap; @@ -172,11 +174,11 @@ html, body { /* 日志级别颜色 */ .log-info .log-msg { color: var(--text-secondary); } .log-success .log-msg { color: var(--success); } -.log-warn .log-msg { color: #FFB74D; } -.log-error .log-msg { color: #EF5350; } -.log-debug .log-msg { color: var(--text-muted); } -.log-tool .log-msg { color: #FFB74D; } -.log-think .log-msg { color: var(--accent); } +.log-warn .log-msg { color: var(--caution); } +.log-error .log-msg { color: var(--critical); } +.log-debug .log-msg { color: var(--text-tertiary); } +.log-tool .log-msg { color: var(--caution); } +.log-think .log-msg { color: #9B7ED8; } .log-stream .log-msg { color: var(--accent); } /* 主内容区 */ @@ -193,10 +195,10 @@ html, body { display: flex; align-items: center; justify-content: space-between; - padding: 8px 16px; + padding: 10px 20px; background: var(--bg-mica); - backdrop-filter: saturate(180%) blur(20px); - -webkit-backdrop-filter: saturate(180%) blur(20px); + backdrop-filter: saturate(180%) blur(16px); + -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; z-index: 50; @@ -211,25 +213,26 @@ html, body { } .logo { - font-size: 20px; + font-size: 22px; flex-shrink: 0; } .app-title { - font-size: 14px; - font-weight: 600; + font-size: 15px; + font-weight: 700; color: var(--text-primary); white-space: nowrap; + letter-spacing: -0.3px; } .app-version { font-size: 10px; font-weight: 600; - color: var(--text-secondary); - background: var(--bg-layer); - border: 1px solid var(--border-default); - border-radius: 12px; - padding: 1px 8px; + color: var(--accent); + background: var(--accent-subtle); + border: 1px solid rgba(232, 115, 74, 0.15); + border-radius: 20px; + padding: 2px 10px; white-space: nowrap; user-select: none; } @@ -245,7 +248,7 @@ html, body { display: flex; align-items: center; gap: 6px; - padding: 4px 10px; + padding: 4px 12px; border-radius: var(--radius-control); font-size: 12px; color: var(--text-secondary); @@ -264,7 +267,7 @@ html, body { .conn-status.connected .status-dot { background: var(--success); - box-shadow: 0 0 4px var(--success); + box-shadow: 0 0 6px rgba(74, 174, 107, 0.4); } .conn-status.disconnected .status-dot { @@ -281,7 +284,7 @@ html, body { 50% { opacity: 0.4; } } -/* ── 图标按钮 (WinUI 3 风格) ── */ +/* ── 图标按钮 ── */ .icon-btn { display: flex; align-items: center; @@ -290,7 +293,7 @@ html, body { height: 36px; border: none; background: transparent; - color: var(--text-secondary); + color: var(--text-tertiary); border-radius: var(--radius-control); cursor: pointer; transition: var(--transition); @@ -308,11 +311,11 @@ html, body { } .icon-btn:hover::before { - opacity: 0.06; + opacity: 0.08; } .icon-btn:active::before { - opacity: 0.04; + opacity: 0.05; } .icon-btn:hover { @@ -320,7 +323,7 @@ html, body { } .icon-btn:active { - transform: scale(0.97); + transform: scale(0.96); } .icon-btn svg { @@ -332,18 +335,17 @@ html, body { .icon-btn.disabled, .icon-btn:disabled { - opacity: 0.36; + opacity: 0.3; cursor: not-allowed; } -/* 图片按钮禁用时保留 pointer-events 以显示 tooltip 和 cursor */ #btnAttachImg.disabled { pointer-events: auto; } #btnAttachImg.disabled:hover { opacity: 0.3; - background: rgba(241, 112, 123, 0.08); + background: var(--critical-bg); } .icon-btn.sm { @@ -362,7 +364,7 @@ html, body { .help-btn { margin-left: 2px; - opacity: 0.5; + opacity: 0.4; } .help-btn:hover { @@ -374,12 +376,13 @@ html, body { align-items: center; gap: 4px; margin-left: 8px; - padding: 2px 8px; + padding: 3px 10px; font-size: 11px; - color: #FFD580; - background: rgba(255, 213, 128, 0.06); - border: 1px solid rgba(255, 213, 128, 0.12); - border-radius: 10px; + font-weight: 500; + color: var(--caution); + background: var(--caution-bg); + border: 1px solid rgba(212, 160, 60, 0.15); + border-radius: 20px; white-space: nowrap; user-select: none; } @@ -388,7 +391,7 @@ html, body { width: 14px; height: 14px; flex-shrink: 0; - color: #FFD580; + color: var(--caution); } /* ═══ 模型选择栏 ═══ */ @@ -396,7 +399,7 @@ html, body { display: flex; align-items: center; gap: 10px; - padding: 8px 16px; + padding: 8px 20px; background: var(--bg-layer-alt); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; @@ -431,8 +434,8 @@ html, body { .model-select { width: 100%; - padding: 6px 32px 6px 12px; - background: var(--bg-layer); + padding: 7px 32px 7px 12px; + background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-control); color: var(--text-primary); @@ -447,7 +450,7 @@ html, body { .model-select:focus { border-color: var(--border-focus); - box-shadow: 0 0 0 1px var(--border-focus); + box-shadow: 0 0 0 3px rgba(232, 115, 74, 0.1); } .model-select:hover { @@ -481,29 +484,29 @@ html, body { .model-badge { font-size: 11px; - font-weight: 500; + font-weight: 600; white-space: nowrap; - padding: 3px 8px; - border-radius: var(--radius-control); + padding: 3px 10px; + border-radius: 20px; border: 1px solid; } .think-badge { - color: var(--accent); - background: var(--accent-subtle); - border-color: rgba(96, 205, 255, 0.15); + color: #9B7ED8; + background: rgba(155, 126, 216, 0.08); + border-color: rgba(155, 126, 216, 0.15); } .vision-badge { color: var(--success); background: var(--success-bg); - border-color: rgba(108, 203, 95, 0.15); + border-color: rgba(74, 174, 107, 0.15); } .tools-badge { - color: #FFB74D; - background: rgba(255, 183, 77, 0.06); - border-color: rgba(255, 183, 77, 0.15); + color: var(--caution); + background: var(--caution-bg); + border-color: rgba(212, 160, 60, 0.15); } /* ── 温度滑块 ── */ @@ -520,26 +523,27 @@ html, body { .temp-slider::-webkit-slider-thumb { -webkit-appearance: none; - width: 16px; - height: 16px; + width: 18px; + height: 18px; border-radius: 50%; background: var(--accent); cursor: pointer; - box-shadow: 0 0 0 4px transparent; + box-shadow: 0 2px 8px rgba(232, 115, 74, 0.3); transition: box-shadow var(--transition); } .temp-slider::-webkit-slider-thumb:hover { - box-shadow: 0 0 0 3px var(--accent-subtle); + box-shadow: 0 2px 12px rgba(232, 115, 74, 0.45); } .temp-slider::-moz-range-thumb { - width: 16px; - height: 16px; + width: 18px; + height: 18px; border-radius: 50%; background: var(--accent); cursor: pointer; border: none; + box-shadow: 0 2px 8px rgba(232, 115, 74, 0.3); } .modal-actions { @@ -566,7 +570,7 @@ html, body { width: 36px; height: 36px; border-radius: var(--radius-control); - background: var(--bg-layer); + background: var(--bg-card); border: 1px solid var(--border-default); display: flex; align-items: center; @@ -586,28 +590,28 @@ html, body { } .think-toggle input:checked + .think-btn { - background: var(--accent-subtle); - border-color: var(--accent); - color: var(--accent); - box-shadow: 0 0 12px rgba(96, 205, 255, 0.4), 0 0 4px rgba(96, 205, 255, 0.2); + background: rgba(155, 126, 216, 0.1); + border-color: #9B7ED8; + color: #9B7ED8; + box-shadow: 0 0 16px rgba(155, 126, 216, 0.2); } .think-toggle input:checked + .think-btn:hover { - background: var(--accent-subtle-hover); - box-shadow: 0 0 18px rgba(96, 205, 255, 0.55), 0 0 6px rgba(96, 205, 255, 0.3); + background: rgba(155, 126, 216, 0.15); + box-shadow: 0 0 20px rgba(155, 126, 216, 0.3); } .think-toggle.unavailable .think-btn { - opacity: 0.36; + opacity: 0.3; cursor: not-allowed; } .think-toggle.unavailable:hover .think-btn { - opacity: 0.3; - background: rgba(241, 112, 123, 0.08); + opacity: 0.25; + background: var(--critical-bg); } -/* ── 开关控件 (WinUI ToggleSwitch) ── */ +/* ── 开关控件 ── */ .toggle-label { display: flex; align-items: center; @@ -624,10 +628,10 @@ html, body { .toggle-slider { position: relative; width: 40px; - height: 20px; + height: 22px; background: var(--bg-layer); border: 1px solid var(--border-default); - border-radius: 10px; + border-radius: 11px; transition: var(--transition); } @@ -636,11 +640,12 @@ html, body { position: absolute; top: 2px; left: 2px; - width: 14px; - height: 14px; - background: var(--text-secondary); + width: 16px; + height: 16px; + background: white; border-radius: 50%; transition: var(--transition); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); } .toggle-label input:checked + .toggle-slider { @@ -649,8 +654,7 @@ html, body { } .toggle-label input:checked + .toggle-slider::after { - transform: translateX(20px); - background: var(--bg-solid); + transform: translateX(18px); } /* ═══ 聊天区域 ═══ */ @@ -658,12 +662,12 @@ html, body { flex: 1; overflow-y: auto; overflow-x: hidden; - padding: 16px; + padding: 20px; scroll-behavior: smooth; } .chat-area::-webkit-scrollbar { - width: 8px; + width: 6px; } .chat-area::-webkit-scrollbar-track { @@ -672,7 +676,7 @@ html, body { .chat-area::-webkit-scrollbar-thumb { background: var(--border-default); - border-radius: 4px; + border-radius: 3px; } .chat-area::-webkit-scrollbar-thumb:hover { @@ -688,29 +692,30 @@ html, body { display: flex; align-items: center; gap: 6px; - padding: 6px 14px; + padding: 6px 16px; border: 1px solid var(--border-default); background: var(--bg-card); - backdrop-filter: blur(20px); - border-radius: var(--radius-control); + backdrop-filter: blur(12px); + border-radius: var(--radius-lg); color: var(--text-secondary); font-size: 12px; font-family: var(--font); cursor: pointer; z-index: 5; - box-shadow: var(--shadow-flyout); + box-shadow: var(--shadow-card); transition: var(--transition); - animation: fadeSlideUp 167ms ease; + animation: fadeSlideUp 200ms ease; } .scroll-to-bottom:hover { background: var(--bg-card-hover); border-color: var(--border-strong); color: var(--text-primary); + box-shadow: var(--shadow-flyout); } .scroll-to-bottom:active { - transform: scale(0.98); + transform: scale(0.97); } .scroll-to-bottom svg { @@ -730,21 +735,22 @@ html, body { align-items: center; justify-content: center; height: 100%; - gap: 12px; + gap: 14px; color: var(--text-tertiary); } .empty-icon svg { width: 80px; height: 80px; - opacity: 0.3; - color: var(--text-tertiary); + opacity: 0.25; + color: var(--accent); } .empty-state h2 { - font-size: 20px; - font-weight: 600; + font-size: 22px; + font-weight: 700; color: var(--text-primary); + letter-spacing: -0.5px; } .empty-state p { @@ -756,7 +762,7 @@ html, body { .messages { display: flex; flex-direction: column; - gap: 12px; + gap: 16px; max-width: 780px; margin: 0 auto; } @@ -764,20 +770,21 @@ html, body { .message { display: flex; gap: 12px; - animation: fadeSlideUp 167ms ease; + animation: fadeSlideUp 200ms ease; } .msg-avatar { flex-shrink: 0; - width: 32px; - height: 32px; + width: 34px; + height: 34px; display: flex; align-items: center; justify-content: center; font-size: 16px; - border-radius: var(--radius-control); + border-radius: var(--radius-md); background: var(--bg-layer); border: 1px solid var(--border-subtle); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .msg-body { @@ -789,7 +796,7 @@ html, body { font-size: 12px; font-weight: 600; color: var(--text-tertiary); - margin-bottom: 4px; + margin-bottom: 6px; display: flex; align-items: center; gap: 8px; @@ -801,9 +808,9 @@ html, body { font-weight: 600; color: var(--accent); background: var(--accent-subtle); - border: 1px solid rgba(96, 205, 255, 0.15); - border-radius: var(--radius-control); - padding: 1px 8px; + border: 1px solid rgba(232, 115, 74, 0.15); + border-radius: 20px; + padding: 1px 10px; line-height: 1.5; white-space: nowrap; } @@ -811,55 +818,60 @@ html, body { .message.user .msg-body { background: var(--bg-layer); border: 1px solid var(--border-subtle); - border-radius: var(--radius-md); - padding: 10px 14px; + border-radius: var(--radius-lg); + padding: 12px 16px; } .message.assistant .msg-body { background: var(--bg-card); border: 1px solid var(--border-subtle); - border-radius: var(--radius-md); - padding: 10px 14px; + border-radius: var(--radius-lg); + padding: 12px 16px; + box-shadow: var(--shadow-card); } .msg-content { font-size: 14px; - line-height: 1.65; + line-height: 1.7; word-break: break-word; } .msg-content pre { - background: var(--bg-solid); - border: 1px solid var(--border-default); - border-radius: var(--radius-control); - padding: 12px 14px; + background: #2D2016; + border: none; + border-radius: var(--radius-md); + padding: 14px 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 13px; - margin: 8px 0; + margin: 10px 0; + color: #F5F0E8; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); } .msg-content code { - background: rgba(255, 255, 255, 0.06); - padding: 1px 5px; - border-radius: 3px; + background: var(--bg-layer); + padding: 2px 6px; + border-radius: 4px; font-family: var(--font-mono); - font-size: 0.9em; + font-size: 0.88em; + color: var(--accent); } .msg-content pre code { background: none; padding: 0; + color: inherit; } -.msg-content p { margin-bottom: 8px; } +.msg-content p { margin-bottom: 10px; } .msg-content p:last-child { margin-bottom: 0; } /* 思考块 */ .think-block { - margin-bottom: 8px; - border: 1px solid rgba(252, 225, 0, 0.12); - border-radius: var(--radius-control); + margin-bottom: 10px; + border: 1px solid rgba(155, 126, 216, 0.15); + border-radius: var(--radius-md); overflow: hidden; } @@ -867,10 +879,11 @@ html, body { display: flex; align-items: center; gap: 6px; - padding: 6px 10px; - background: var(--caution-bg); - color: var(--caution); + padding: 7px 12px; + background: rgba(155, 126, 216, 0.06); + color: #9B7ED8; font-size: 12px; + font-weight: 600; cursor: pointer; user-select: none; } @@ -885,8 +898,8 @@ html, body { } .think-content { - padding: 8px 12px; - background: rgba(252, 225, 0, 0.02); + padding: 10px 14px; + background: rgba(155, 126, 216, 0.02); } .think-content pre { @@ -898,6 +911,7 @@ html, body { background: none; border: none; padding: 0; + box-shadow: none; } /* 打字光标 */ @@ -909,6 +923,7 @@ html, body { animation: caretBlink 1s step-end infinite; vertical-align: text-bottom; margin-left: 1px; + border-radius: 1px; } @keyframes caretBlink { @@ -925,10 +940,10 @@ html, body { } .loading-dots span { - width: 6px; - height: 6px; + width: 7px; + height: 7px; border-radius: 50%; - background: var(--text-tertiary); + background: var(--accent); animation: dotPulse 1.4s ease-in-out infinite; } @@ -937,7 +952,7 @@ html, body { .loading-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes dotPulse { - 0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; } + 0%, 80%, 100% { transform: scale(0.5); opacity: 0.3; } 40% { transform: scale(1); opacity: 1; } } @@ -957,15 +972,16 @@ html, body { display: flex; flex-wrap: wrap; gap: 8px; - margin-top: 8px; + margin-top: 10px; } .msg-img { max-width: 200px; max-height: 200px; - border-radius: var(--radius-control); + border-radius: var(--radius-md); border: 1px solid var(--border-subtle); object-fit: cover; + box-shadow: var(--shadow-card); } .msg-img[data-lightbox] { @@ -975,6 +991,7 @@ html, body { .msg-img[data-lightbox]:hover { opacity: 0.85; + transform: scale(1.02); } /* 文件 chip */ @@ -987,20 +1004,20 @@ html, body { .msg-files .file-chip { background: var(--accent-subtle); - border-color: rgba(96, 205, 255, 0.12); + border-color: rgba(232, 115, 74, 0.12); } /* 统计信息 */ .msg-stats { display: flex; gap: 12px; - margin-top: 6px; + margin-top: 8px; font-size: 11px; color: var(--text-tertiary); } .msg-stats .stat-tokens { - color: #FFD580; + color: var(--caution); } .msg-stats .stat-duration { @@ -1010,10 +1027,10 @@ html, body { /* ═══ 输入区域 ═══ */ .input-area { flex-shrink: 0; - padding: 10px 16px 14px; + padding: 12px 20px 16px; background: var(--bg-mica); - backdrop-filter: saturate(180%) blur(20px); - -webkit-backdrop-filter: saturate(180%) blur(20px); + backdrop-filter: saturate(180%) blur(16px); + -webkit-backdrop-filter: saturate(180%) blur(16px); border-top: 1px solid var(--border-subtle); z-index: 30; position: relative; @@ -1031,9 +1048,10 @@ html, body { position: relative; width: 56px; height: 56px; - border-radius: var(--radius-control); + border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-default); + box-shadow: var(--shadow-card); } .preview-thumb img { @@ -1072,19 +1090,19 @@ html, body { display: flex; align-items: center; gap: 6px; - padding: 4px 10px; - border-radius: var(--radius-control); + padding: 4px 12px; + border-radius: 20px; background: var(--accent-subtle); - border: 1px solid rgba(96, 205, 255, 0.12); + border: 1px solid rgba(232, 115, 74, 0.12); font-size: 12px; line-height: 1; transition: var(--transition); - animation: fadeSlideUp 167ms ease; + animation: fadeSlideUp 200ms ease; } .file-chip:hover { background: var(--accent-subtle-hover); - border-color: rgba(96, 205, 255, 0.2); + border-color: rgba(232, 115, 74, 0.2); } .file-icon { @@ -1135,26 +1153,27 @@ html, body { .chat-input { flex: 1; - padding: 8px 12px; - background: var(--bg-layer); - border: 1px solid var(--border-default); - border-radius: var(--radius-control); + padding: 10px 14px; + background: var(--bg-card); + border: 1.5px solid var(--border-default); + border-radius: var(--radius-lg); color: var(--text-primary); font-family: var(--font); font-size: 14px; resize: none; outline: none; - min-height: 36px; + min-height: 40px; max-height: 120px; line-height: 1.5; transition: var(--transition); pointer-events: auto; user-select: text; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); } .chat-input:focus { border-color: var(--border-focus); - box-shadow: 0 0 0 1px var(--border-focus); + box-shadow: 0 0 0 3px rgba(232, 115, 74, 0.08), 0 1px 3px rgba(0, 0, 0, 0.03); } .chat-input::placeholder { @@ -1163,31 +1182,35 @@ html, body { .send-btn { flex-shrink: 0; - width: 36px; - height: 36px; + width: 40px; + height: 40px; border: none; - border-radius: var(--radius-control); + border-radius: var(--radius-lg); background: var(--accent); - color: #1a1a1a; + color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); + box-shadow: 0 2px 8px rgba(232, 115, 74, 0.3); } .send-btn:hover { background: var(--accent-hover); + box-shadow: 0 4px 16px rgba(232, 115, 74, 0.35); + transform: translateY(-1px); } .send-btn:active { - transform: scale(0.96); + transform: translateY(0) scale(0.97); } .send-btn.disabled { - opacity: 0.36; + opacity: 0.3; cursor: not-allowed; pointer-events: none; + box-shadow: none; } .send-btn svg { @@ -1197,7 +1220,7 @@ html, body { .send-btn.stop-btn { background: var(--critical); - color: white; + box-shadow: 0 2px 8px rgba(217, 79, 92, 0.3); } .send-btn.stop-btn:hover { @@ -1222,26 +1245,26 @@ html, body { display: flex; align-items: center; gap: 10px; - padding: 6px 16px; - background: rgba(96, 205, 255, 0.04); - border-top: 1px solid rgba(96, 205, 255, 0.1); + padding: 6px 20px; + background: rgba(232, 115, 74, 0.04); + border-top: 1px solid rgba(232, 115, 74, 0.1); font-size: 13px; color: var(--accent); flex-shrink: 0; } -/* ═══ 模态框 (WinUI ContentDialog 风格) ═══ */ +/* ═══ 模态框 ═══ */ .modal-overlay { position: fixed; inset: 0; - background: rgba(0, 0, 0, 0.5); - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); + background: rgba(45, 32, 22, 0.25); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 100; - animation: overlayIn 167ms ease; + animation: overlayIn 200ms ease; padding: 20px; } @@ -1252,20 +1275,20 @@ html, body { .modal { background: var(--bg-card); - border: 1px solid var(--border-default); - border-radius: var(--radius-lg); + border: 1px solid var(--border-subtle); + border-radius: var(--radius-xl); box-shadow: var(--shadow-dialog); width: 100%; max-width: 480px; max-height: 80vh; display: flex; flex-direction: column; - animation: dialogIn 200ms cubic-bezier(0, 0, 0, 1); + animation: dialogIn 250ms cubic-bezier(0.25, 0.1, 0.25, 1); overflow: hidden; } @keyframes dialogIn { - from { opacity: 0; transform: scale(0.96) translateY(8px); } + from { opacity: 0; transform: scale(0.95) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } @@ -1279,27 +1302,28 @@ html, body { display: flex; align-items: center; justify-content: space-between; - padding: 16px 20px; + padding: 18px 22px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; } .modal-header h3 { - font-size: 16px; - font-weight: 600; + font-size: 17px; + font-weight: 700; color: var(--text-primary); + letter-spacing: -0.3px; } .modal-body { - padding: 16px 20px; + padding: 18px 22px; overflow-y: auto; flex: 1; } /* ── 设置项 ── */ .setting-group { - margin-bottom: 16px; - padding-bottom: 16px; + margin-bottom: 18px; + padding-bottom: 18px; border-bottom: 1px solid var(--border-subtle); } @@ -1314,14 +1338,14 @@ html, body { font-size: 13px; font-weight: 600; color: var(--text-secondary); - margin-bottom: 6px; + margin-bottom: 8px; } .setting-input { width: 100%; - padding: 8px 10px; + padding: 9px 12px; background: var(--bg-layer); - border: 1px solid var(--border-default); + border: 1.5px solid var(--border-default); border-radius: var(--radius-control); color: var(--text-primary); font-size: 13px; @@ -1333,23 +1357,23 @@ html, body { .setting-input:focus { border-color: var(--border-focus); - box-shadow: 0 0 0 1px var(--border-focus); + box-shadow: 0 0 0 3px rgba(232, 115, 74, 0.08); } .setting-input::placeholder { color: var(--text-disabled); } -/* ── 按钮 (WinUI Button 风格) ── */ +/* ── 按钮 ── */ .btn { display: inline-flex; align-items: center; justify-content: center; - padding: 6px 16px; - border: 1px solid transparent; + padding: 7px 18px; + border: 1.5px solid transparent; border-radius: var(--radius-control); font-size: 13px; - font-weight: 400; + font-weight: 500; font-family: var(--font); cursor: pointer; transition: var(--transition); @@ -1358,58 +1382,46 @@ html, body { outline: none; } -.btn::before { - content: ''; - position: absolute; - inset: 0; - border-radius: inherit; - background: currentColor; - opacity: 0; - transition: var(--transition); -} - -.btn:hover::before { opacity: 0.06; } -.btn:active::before { opacity: 0.04; } - .btn:active { - transform: scale(0.98); + transform: scale(0.97); } .btn-primary { background: var(--accent); - color: #1a1a1a; + color: white; border-color: transparent; + box-shadow: 0 2px 8px rgba(232, 115, 74, 0.25); } .btn-primary:hover { background: var(--accent-hover); + box-shadow: 0 4px 12px rgba(232, 115, 74, 0.3); } -.btn-primary::before { display: none; } - .btn-outline { - background: var(--bg-layer); - border: 1px solid var(--border-default); + background: var(--bg-card); + border: 1.5px solid var(--border-default); color: var(--text-secondary); } .btn-outline:hover { border-color: var(--border-strong); color: var(--text-primary); + background: var(--bg-layer); } .btn-danger { background: var(--critical-bg); - border: 1px solid rgba(241, 112, 123, 0.15); + border: 1.5px solid rgba(217, 79, 92, 0.15); color: var(--critical); } .btn-danger:hover { - background: rgba(241, 112, 123, 0.1); + background: rgba(217, 79, 92, 0.12); } .btn-sm { - padding: 4px 10px; + padding: 4px 12px; font-size: 12px; } @@ -1422,28 +1434,28 @@ html, body { } .status-badge { - padding: 3px 10px; - border-radius: var(--radius-control); + padding: 3px 12px; + border-radius: 20px; font-size: 12px; - font-weight: 500; + font-weight: 600; } .status-badge.success { background: var(--success-bg); color: var(--success); - border: 1px solid rgba(108, 203, 95, 0.15); + border: 1px solid rgba(74, 174, 107, 0.15); } .status-badge.error { background: var(--critical-bg); color: var(--critical); - border: 1px solid rgba(241, 112, 123, 0.15); + border: 1px solid rgba(217, 79, 92, 0.15); } .status-badge.warning { background: var(--caution-bg); color: var(--caution); - border: 1px solid rgba(252, 225, 0, 0.15); + border: 1px solid rgba(212, 160, 60, 0.15); } .server-version { @@ -1453,11 +1465,11 @@ html, body { } .cors-hint { - padding: 10px; + padding: 12px; background: var(--caution-bg); - border: 1px solid rgba(252, 225, 0, 0.1); + border: 1px solid rgba(212, 160, 60, 0.12); border-radius: var(--radius-control); - margin-top: 8px; + margin-top: 10px; } .cors-hint p { @@ -1469,12 +1481,13 @@ html, body { .cors-hint code { display: block; padding: 8px; - background: var(--bg-solid); - border-radius: 3px; + background: var(--bg-card); + border-radius: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--accent); user-select: all; + box-shadow: var(--shadow-card); } /* ── 运行中的模型 ── */ @@ -1489,7 +1502,7 @@ html, body { display: flex; align-items: center; gap: 10px; - padding: 8px 10px; + padding: 8px 12px; background: var(--bg-layer); border-radius: var(--radius-control); border: 1px solid var(--border-subtle); @@ -1512,7 +1525,7 @@ html, body { font-size: 13px; } -/* ── 历史记录模态框加宽 ── */ +/* ── 历史记录模态框 ── */ #historyModal .modal { max-width: 800px; max-height: 88vh; @@ -1531,14 +1544,14 @@ html, body { .history-search-wrap { position: relative; - margin-bottom: 10px; + margin-bottom: 12px; } .history-search-input { width: 100%; - padding: 8px 32px 8px 12px; + padding: 9px 36px 9px 14px; background: var(--bg-layer); - border: 1px solid var(--border-default); + border: 1.5px solid var(--border-default); border-radius: var(--radius-control); color: var(--text-primary); font-size: 13px; @@ -1553,7 +1566,7 @@ html, body { .history-search-input:focus { border-color: var(--border-focus); - box-shadow: 0 0 0 1px var(--border-focus); + box-shadow: 0 0 0 3px rgba(232, 115, 74, 0.08); } .history-search-clear { @@ -1578,7 +1591,7 @@ html, body { display: flex; align-items: center; gap: 10px; - padding: 10px 10px; + padding: 10px 12px; border-radius: var(--radius-control); transition: var(--transition); } @@ -1640,7 +1653,7 @@ html, body { min-width: 30px; height: 30px; border: 1px solid var(--border-default); - background: var(--bg-layer); + background: var(--bg-card); color: var(--text-secondary); border-radius: var(--radius-control); font-size: 12px; @@ -1678,7 +1691,7 @@ html, body { .lightbox-overlay { position: fixed; inset: 0; - background: rgba(0, 0, 0, 0.75); + background: rgba(45, 32, 22, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; @@ -1686,13 +1699,13 @@ html, body { justify-content: center; z-index: 300; cursor: zoom-out; - animation: overlayIn 167ms ease; + animation: overlayIn 200ms ease; } .lightbox-img { max-width: 90vw; max-height: 90vh; - border-radius: var(--radius-md); + border-radius: var(--radius-lg); box-shadow: var(--shadow-dialog); object-fit: contain; cursor: default; @@ -1715,10 +1728,11 @@ html, body { justify-content: center; transition: var(--transition); z-index: 301; + box-shadow: var(--shadow-card); } .lightbox-close:hover { - background: var(--bg-card-hover); + background: var(--bg-layer); } /* ═══ 帮助弹框 ═══ */ @@ -1728,11 +1742,11 @@ html, body { } .help-section { - margin-bottom: 16px; - padding: 12px 14px; + margin-bottom: 14px; + padding: 14px 16px; background: var(--bg-layer); - border-radius: var(--radius-control); - border-left: 2px solid var(--border-strong); + border-radius: var(--radius-md); + border-left: 3px solid var(--border-default); transition: border-color var(--transition); } @@ -1746,7 +1760,7 @@ html, body { .help-section h4 { font-size: 14px; - font-weight: 600; + font-weight: 700; margin-bottom: 8px; color: var(--text-primary); } @@ -1764,18 +1778,18 @@ html, body { } .help-section code { - background: rgba(255, 255, 255, 0.06); + background: var(--accent-subtle); color: var(--accent); padding: 1px 6px; - border-radius: 3px; + border-radius: 4px; font-size: 12px; } .help-section kbd { - background: var(--bg-layer); + background: var(--bg-card); border: 1px solid var(--border-default); border-bottom-width: 2px; - border-radius: 3px; + border-radius: 4px; padding: 1px 6px; font-size: 12px; font-family: inherit; @@ -1792,7 +1806,7 @@ html, body { } .help-shortcuts td { - padding: 6px 10px; + padding: 7px 10px; border-bottom: 1px solid var(--border-subtle); } @@ -1818,7 +1832,7 @@ html, body { z-index: 200; display: flex; flex-direction: column; - gap: 6px; + gap: 8px; pointer-events: none; } @@ -1826,20 +1840,20 @@ html, body { display: flex; align-items: center; gap: 8px; - padding: 10px 14px; - border-radius: var(--radius-control); + padding: 10px 16px; + border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border-default); box-shadow: var(--shadow-flyout); font-size: 13px; color: var(--text-primary); pointer-events: auto; - animation: toastIn 167ms ease; + animation: toastIn 200ms ease; max-width: 320px; } .toast.removing { - animation: toastOut 167ms ease forwards; + animation: toastOut 200ms ease forwards; } .toast-icon { @@ -1864,11 +1878,11 @@ html, body { /* ═══ 响应式 ═══ */ @media (min-width: 768px) { - .app-header { padding: 8px 24px; } - .model-bar { padding: 8px 24px; } - .chat-area { padding: 20px 24px; } + .app-header { padding: 10px 28px; } + .model-bar { padding: 8px 28px; } + .chat-area { padding: 24px 28px; } .messages { max-width: 820px; } - .input-area { padding: 10px 24px 16px; } + .input-area { padding: 12px 28px 18px; } .modal { max-width: 500px; } } @@ -1878,13 +1892,14 @@ html, body { /* ── 选中文本 ── */ ::selection { - background: rgba(96, 205, 255, 0.3); + background: rgba(232, 115, 74, 0.2); } /* ── 链接 ── */ .msg-content a { color: var(--accent); text-decoration: none; + font-weight: 500; } .msg-content a:hover { @@ -1904,19 +1919,22 @@ html, body { margin: 8px 0; } -.msg-content li { margin-bottom: 3px; } +.msg-content li { margin-bottom: 4px; } /* ── 表格 ── */ .msg-content table { width: 100%; border-collapse: collapse; - margin: 8px 0; + margin: 10px 0; font-size: 13px; + border-radius: var(--radius-control); + overflow: hidden; + border: 1px solid var(--border-default); } .msg-content th, .msg-content td { - padding: 6px 10px; - border: 1px solid var(--border-default); + padding: 7px 12px; + border: 1px solid var(--border-subtle); text-align: left; } @@ -1927,10 +1945,11 @@ html, body { /* ── 引用块 ── */ .msg-content blockquote { - border-left: 2px solid var(--border-strong); - padding-left: 12px; - margin: 8px 0; + border-left: 3px solid var(--accent); + padding-left: 14px; + margin: 10px 0; color: var(--text-secondary); + font-style: italic; } /* ═══════════════════════════════════════════════════════════════ @@ -1938,15 +1957,15 @@ html, body { ═══════════════════════════════════════════════════════════════ */ .tool-calls-container { - margin-top: 8px; + margin-top: 10px; } .tool-call-card { - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 8px; + border: 1px solid var(--border-default); + border-radius: var(--radius-md); margin: 8px 0; overflow: hidden; - background: rgba(255, 255, 255, 0.03); + background: var(--bg-layer); font-size: 13px; } @@ -1954,8 +1973,9 @@ html, body { display: flex; align-items: center; gap: 8px; - padding: 8px 12px; - border-bottom: 1px solid rgba(255, 255, 255, 0.06); + padding: 8px 14px; + border-bottom: 1px solid var(--border-subtle); + background: var(--bg-layer-alt); } .tool-call-icon { @@ -1964,28 +1984,30 @@ html, body { .tool-call-name { font-weight: 600; - color: var(--accent-cyan, #00f5d4); + color: var(--accent); + font-family: var(--font-mono); + font-size: 12px; } .tool-call-status { margin-left: auto; font-size: 12px; - color: var(--text-secondary, rgba(255, 255, 255, 0.6)); + color: var(--text-tertiary); } .tool-call-params { - padding: 6px 12px; + padding: 6px 14px; font-size: 12px; - color: rgba(255, 255, 255, 0.6); + color: var(--text-secondary); } .tool-call-params code { - background: rgba(0, 0, 0, 0.3); - padding: 1px 6px; + background: var(--bg-card); + padding: 2px 6px; border-radius: 4px; - font-family: 'Cascadia Code', 'Consolas', monospace; + font-family: var(--font-mono); font-size: 12px; - color: var(--accent-cyan, #00f5d4); + color: var(--accent); } .tool-param { @@ -1993,75 +2015,76 @@ html, body { } .tool-call-result { - padding: 8px 12px; - border-top: 1px solid rgba(255, 255, 255, 0.06); + padding: 8px 14px; + border-top: 1px solid var(--border-subtle); max-height: 300px; overflow-y: auto; } .tool-result-content { - background: rgba(0, 0, 0, 0.3); - padding: 8px 10px; - border-radius: 6px; - font-family: 'Cascadia Code', 'Consolas', monospace; + background: var(--bg-card); + padding: 10px 12px; + border-radius: var(--radius-control); + font-family: var(--font-mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; margin: 0; - color: rgba(255, 255, 255, 0.85); + color: var(--text-primary); max-height: 200px; overflow-y: auto; + box-shadow: var(--shadow-card); } .tool-result-stderr { - color: #ff6b6b; - border-left: 3px solid #ff6b6b; + color: var(--critical); + border-left: 3px solid var(--critical); } .tool-result-entry { padding: 2px 0; font-size: 12px; - color: rgba(255, 255, 255, 0.75); + color: var(--text-secondary); } .tool-result-entry code { - background: rgba(0, 0, 0, 0.3); + background: var(--bg-card); padding: 1px 6px; border-radius: 4px; - font-family: 'Cascadia Code', 'Consolas', monospace; + font-family: var(--font-mono); font-size: 11px; } .tool-result-meta { margin-top: 6px; font-size: 11px; - color: rgba(255, 255, 255, 0.4); + color: var(--text-tertiary); } .tool-result-error { - color: #ff6b6b; + color: var(--critical); } /* 状态颜色 */ .tool-call-pending { - border-color: rgba(255, 165, 0, 0.4); + border-color: rgba(212, 160, 60, 0.3); } .tool-call-running { - border-color: rgba(0, 245, 212, 0.4); + border-color: rgba(232, 115, 74, 0.3); } .tool-call-success { - border-color: rgba(0, 200, 83, 0.3); + border-color: rgba(74, 174, 107, 0.25); } .tool-call-error { - border-color: rgba(255, 82, 82, 0.4); + border-color: rgba(217, 79, 92, 0.3); } .tool-call-cancelled { - border-color: rgba(150, 150, 150, 0.4); + border-color: var(--border-default); } /* 执行中 spinner */ @@ -2069,8 +2092,8 @@ html, body { content: ''; width: 14px; height: 14px; - border: 2px solid rgba(0, 245, 212, 0.3); - border-top-color: var(--accent-cyan, #00f5d4); + border: 2px solid rgba(232, 115, 74, 0.2); + border-top-color: var(--accent); border-radius: 50%; animation: tool-spin 0.8s linear infinite; margin-left: auto; @@ -2092,14 +2115,14 @@ html, body { display: flex; align-items: center; justify-content: space-between; - padding: 4px 8px; - border-radius: 6px; - background: rgba(255, 255, 255, 0.03); + padding: 5px 10px; + border-radius: var(--radius-control); + background: var(--bg-layer); font-size: 12px; } .tool-item span:first-child { - color: var(--text-primary, #fff); + color: var(--text-primary); } /* ── 工具确认对话框 ── */ @@ -2116,26 +2139,26 @@ html, body { } .tool-confirm-label { - color: var(--text-secondary, rgba(255, 255, 255, 0.6)); + color: var(--text-secondary); white-space: nowrap; min-width: 60px; } .tool-confirm-row code { - background: rgba(0, 0, 0, 0.3); + background: var(--bg-layer); padding: 2px 8px; border-radius: 4px; - font-family: 'Cascadia Code', 'Consolas', monospace; + font-family: var(--font-mono); font-size: 12px; - color: var(--accent-cyan, #00f5d4); + color: var(--accent); word-break: break-all; } .tool-confirm-preview { - background: rgba(0, 0, 0, 0.3); - padding: 8px 10px; - border-radius: 6px; - font-family: 'Cascadia Code', 'Consolas', monospace; + background: var(--bg-card); + padding: 10px 12px; + border-radius: var(--radius-control); + font-family: var(--font-mono); font-size: 11px; line-height: 1.5; white-space: pre-wrap; @@ -2143,38 +2166,42 @@ html, body { margin: 4px 0 0; max-height: 150px; overflow-y: auto; - color: rgba(255, 255, 255, 0.75); + color: var(--text-primary); + box-shadow: var(--shadow-card); } +/* ═══════════════════════════════════════════════════════════════ + 工作空间面板 + ═══════════════════════════════════════════════════════════════ */ .workspace-panel { width: 480px; min-width: 480px; display: flex; flex-direction: column; - background: var(--bg-solid, #202020); - border-left: 1px solid var(--border-default, rgba(255,255,255,0.08)); + background: var(--bg-card); + border-left: 1px solid var(--border-subtle); z-index: 10; flex-shrink: 0; - font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace; + font-family: var(--font-mono); } .ws-header { display: flex; align-items: center; - padding: 8px 12px; - border-bottom: 1px solid var(--border-default, rgba(255,255,255,0.08)); - background: var(--bg-layer-alt, #2a2a2a); - min-height: 44px; + padding: 10px 14px; + border-bottom: 1px solid var(--border-subtle); + background: var(--bg-layer-alt); + min-height: 46px; gap: 8px; } .ws-title { font-size: 13px; - font-weight: 600; - color: var(--text-primary, #fff); + font-weight: 700; + color: var(--text-primary); white-space: nowrap; - font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; + font-family: var(--font); } .ws-tabs { @@ -2186,24 +2213,26 @@ html, body { .ws-header-tab { background: transparent; border: 1px solid transparent; - color: var(--text-secondary, #999); - padding: 4px 10px; - border-radius: 4px; + color: var(--text-tertiary); + padding: 5px 12px; + border-radius: var(--radius-control); cursor: pointer; font-size: 12px; - font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - transition: all 0.15s; + font-family: var(--font); + font-weight: 500; + transition: var(--transition); } .ws-header-tab:hover { - background: var(--bg-card-hover, #323232); - color: var(--text-primary, #fff); + background: var(--bg-layer); + color: var(--text-primary); } .ws-header-tab.active { - background: var(--bg-layer, #383838); - color: var(--accent, #60CDFF); - border-color: var(--border-strong, rgba(255,255,255,0.12)); + background: var(--bg-card); + color: var(--accent); + border-color: var(--border-default); + box-shadow: var(--shadow-card); } /* ── 终端内容区 ── */ @@ -2219,8 +2248,8 @@ html, body { display: flex; gap: 1px; padding: 4px 8px 0; - background: var(--bg-layer-alt, #2a2a2a); - border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06)); + background: var(--bg-layer-alt); + border-bottom: 1px solid var(--border-subtle); overflow-x: auto; min-height: 30px; } @@ -2228,30 +2257,30 @@ html, body { .ws-term-tab-bar .ws-tab { background: transparent; border: 1px solid transparent; - color: var(--text-secondary, #999); + color: var(--text-tertiary); font-size: 11px; - padding: 3px 8px; - border-radius: 4px 4px 0 0; + padding: 3px 10px; + border-radius: var(--radius-control) var(--radius-control) 0 0; border-bottom: none; cursor: pointer; display: flex; align-items: center; gap: 4px; flex-shrink: 0; - transition: all 0.15s; - font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; + transition: var(--transition); + font-family: var(--font); } .ws-term-tab-bar .ws-tab:hover { - background: var(--bg-card-hover, #323232); - color: var(--text-primary, #fff); + background: var(--bg-layer); + color: var(--text-primary); } .ws-term-tab-bar .ws-tab.active { - background: var(--bg-solid, #202020); - color: var(--accent, #60CDFF); - border-color: var(--border-default, rgba(255,255,255,0.08)); - border-bottom: 1px solid var(--bg-solid, #202020); + background: var(--bg-card); + color: var(--accent); + border-color: var(--border-default); + border-bottom: 1px solid var(--bg-card); } .ws-tab-title { @@ -2264,7 +2293,7 @@ html, body { .ws-tab-close { background: none; border: none; - color: var(--text-tertiary, #666); + color: var(--text-tertiary); cursor: pointer; font-size: 10px; padding: 0 2px; @@ -2273,43 +2302,43 @@ html, body { } .ws-tab-close:hover { - background: rgba(255,255,255,0.1); - color: var(--text-primary, #fff); + background: var(--bg-layer); + color: var(--text-primary); } .ws-term-output { flex: 1; overflow-y: auto; - padding: 8px 12px; + padding: 10px 14px; font-size: 12px; - line-height: 1.5; - color: var(--text-primary, #fff); - background: var(--bg-solid, #202020); + line-height: 1.6; + color: var(--text-primary); + background: #2D2016; word-break: break-all; white-space: pre-wrap; } .ws-term-placeholder { - color: var(--text-tertiary, #666); + color: rgba(245, 240, 232, 0.4); text-align: center; padding: 40px 20px; - font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; + font-family: var(--font); } .ws-term-line { - min-height: 1.5em; + min-height: 1.6em; } .ws-term-stdout { - color: #ccc; + color: rgba(245, 240, 232, 0.85); } .ws-term-stderr { - color: #ff6b68; + color: #FF8A8A; } .ws-term-system { - color: var(--accent, #60CDFF); + color: #FFB88C; font-weight: 500; opacity: 0.9; } @@ -2319,16 +2348,16 @@ html, body { align-items: center; justify-content: space-between; gap: 4px; - padding: 6px 8px; - border-top: 1px solid var(--border-default, rgba(255,255,255,0.08)); - background: var(--bg-layer-alt, #2a2a2a); + padding: 6px 10px; + border-top: 1px solid var(--border-default); + background: var(--bg-layer-alt); } .ws-term-hint { flex: 1; font-size: 11px; - color: var(--text-tertiary, #666); - font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; + color: var(--text-tertiary); + font-family: var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -2336,7 +2365,7 @@ html, body { } .ws-term-hint.running { - color: var(--accent, #60CDFF); + color: var(--accent); animation: hint-pulse 1.5s ease-in-out infinite; } @@ -2355,14 +2384,14 @@ html, body { .ws-toolbar-btn { background: transparent; border: 1px solid transparent; - color: var(--text-secondary, #999); + color: var(--text-tertiary); cursor: pointer; padding: 5px 7px; - border-radius: 4px; + border-radius: 6px; display: flex; align-items: center; justify-content: center; - transition: all 0.15s; + transition: var(--transition); } .ws-toolbar-btn svg { @@ -2371,8 +2400,8 @@ html, body { } .ws-toolbar-btn:hover:not(:disabled) { - background: var(--bg-card-hover, #323232); - color: var(--text-primary, #fff); + background: var(--bg-layer); + color: var(--text-primary); } .ws-toolbar-btn:disabled { @@ -2381,11 +2410,11 @@ html, body { } .ws-stop-btn.active { - color: #ff6b68; + color: var(--critical); } .ws-stop-btn.active:hover { - background: rgba(255, 107, 104, 0.15); + background: var(--critical-bg); } /* ── 文件浏览器 ── */ @@ -2394,9 +2423,9 @@ html, body { display: flex; align-items: center; gap: 4px; - padding: 6px 8px; - border-bottom: 1px solid var(--border-default, rgba(255,255,255,0.08)); - background: var(--bg-layer-alt, #2a2a2a); + padding: 6px 10px; + border-bottom: 1px solid var(--border-default); + background: var(--bg-layer-alt); min-height: 36px; } @@ -2407,7 +2436,7 @@ html, body { .ws-file-path { flex: 1; font-size: 11px; - color: var(--text-secondary, #999); + color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -2420,24 +2449,24 @@ html, body { } .ws-file-empty { - color: var(--text-tertiary, #666); + color: var(--text-tertiary); text-align: center; padding: 40px 20px; font-size: 13px; - font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; + font-family: var(--font); } .ws-file-item { display: flex; align-items: center; - padding: 5px 12px; + padding: 5px 14px; cursor: pointer; - transition: background 0.1s; + transition: background var(--transition-fast); gap: 8px; } .ws-file-item:hover { - background: var(--bg-card-hover, #323232); + background: var(--bg-layer); } .ws-file-icon { @@ -2450,7 +2479,7 @@ html, body { .ws-file-name { flex: 1; font-size: 12px; - color: var(--text-primary, #fff); + color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -2458,14 +2487,14 @@ html, body { .ws-file-size { font-size: 11px; - color: var(--text-tertiary, #666); + color: var(--text-tertiary); flex-shrink: 0; } /* ── 文件预览 ── */ .ws-preview { - border-top: 1px solid var(--border-default, rgba(255,255,255,0.08)); + border-top: 1px solid var(--border-default); display: flex; flex-direction: column; max-height: 50%; @@ -2474,15 +2503,15 @@ html, body { .ws-preview-header { display: flex; align-items: center; - padding: 6px 12px; - background: var(--bg-layer-alt, #2a2a2a); + padding: 6px 14px; + background: var(--bg-layer-alt); gap: 8px; } .ws-preview-title { flex: 1; font-size: 12px; - color: var(--text-primary, #fff); + color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -2492,25 +2521,25 @@ html, body { flex: 1; overflow-y: auto; padding: 0; - background: var(--bg-solid, #202020); + background: #2D2016; } .ws-preview-pre { margin: 0; padding: 8px 0; font-size: 11px; - line-height: 1.5; - font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace; - color: var(--text-primary, #fff); + line-height: 1.6; + font-family: var(--font-mono); + color: rgba(245, 240, 232, 0.85); } .ws-preview-line { display: block; - padding: 0 12px; + padding: 0 14px; } .ws-preview-line:hover { - background: rgba(255,255,255,0.03); + background: rgba(245, 240, 232, 0.04); } .ws-line-num { @@ -2518,9 +2547,9 @@ html, body { width: 40px; text-align: right; padding-right: 12px; - color: var(--text-tertiary, #666); + color: rgba(245, 240, 232, 0.25); user-select: none; - border-right: 1px solid var(--border-subtle, rgba(255,255,255,0.06)); + border-right: 1px solid rgba(245, 240, 232, 0.08); margin-right: 8px; } @@ -2539,29 +2568,30 @@ html, body { background: transparent; } -.ws-term-output::-webkit-scrollbar-thumb, -.ws-file-list::-webkit-scrollbar-thumb, -.ws-preview-content::-webkit-scrollbar-thumb { - background: rgba(255,255,255,0.1); +.ws-term-output::-webkit-scrollbar-thumb { + background: rgba(245, 240, 232, 0.15); border-radius: 3px; } -.ws-term-output::-webkit-scrollbar-thumb:hover, -.ws-file-list::-webkit-scrollbar-thumb:hover { - background: rgba(255,255,255,0.2); +.ws-file-list::-webkit-scrollbar-thumb, +.ws-preview-content::-webkit-scrollbar-thumb { + background: var(--border-default); + border-radius: 3px; } -/* ── Header 按钮高亮 ── */ +.ws-term-output::-webkit-scrollbar-thumb:hover { + background: rgba(245, 240, 232, 0.25); +} -/* ── 主内容区自适应 ── */ - -/* main-wrap.with-workspace 不再需要 margin-right， +.ws-file-list::-webkit-scrollbar-thumb:hover, +.ws-preview-content::-webkit-scrollbar-thumb:hover { + background: var(--border-strong); +} /* ═══════════════════════════════════════════════════════════════ 记忆管理模态框 ═══════════════════════════════════════════════════════════════ */ -/* ═══ 记忆管理模态框 ═══ */ #memoryModal .modal { max-width: 95vw; width: 1000px; @@ -2569,7 +2599,7 @@ html, body { } #memoryModal .modal-body { - padding: 16px 20px; + padding: 18px 22px; overflow: hidden; display: flex; flex-direction: column; @@ -2577,7 +2607,7 @@ html, body { .memory-layout { display: flex; - gap: 16px; + gap: 18px; flex: 1; min-height: 0; overflow: hidden; @@ -2588,10 +2618,10 @@ html, body { flex-shrink: 0; display: flex; flex-direction: column; - gap: 8px; + gap: 10px; min-height: 0; overflow: hidden; - padding-right: 16px; + padding-right: 18px; border-right: 1px solid var(--border-subtle); } @@ -2612,7 +2642,7 @@ html, body { .memory-stats-count { color: var(--accent); - font-weight: 600; + font-weight: 700; } .memory-categories { @@ -2642,7 +2672,7 @@ html, body { .memory-category-item.active { background: var(--accent-subtle); color: var(--accent); - border-color: rgba(96, 205, 255, 0.12); + border-color: rgba(232, 115, 74, 0.12); } .memory-category-icon { @@ -2680,9 +2710,9 @@ html, body { .memory-search-input-lg { width: 100%; - padding: 8px 12px; + padding: 9px 14px; background: var(--bg-layer); - border: 1px solid var(--border-default); + border: 1.5px solid var(--border-default); border-radius: var(--radius-control); color: var(--text-primary); font-size: 13px; @@ -2693,20 +2723,21 @@ html, body { .memory-search-input-lg:focus { border-color: var(--border-focus); - box-shadow: 0 0 0 1px var(--border-focus); + box-shadow: 0 0 0 3px rgba(232, 115, 74, 0.08); } .memory-vector-badge { font-size: 11px; - padding: 3px 8px; - border-radius: var(--radius-control); + padding: 3px 10px; + border-radius: 20px; white-space: nowrap; + font-weight: 500; } .memory-vector-badge.enabled { color: var(--success); background: var(--success-bg); - border: 1px solid rgba(108, 203, 95, 0.15); + border: 1px solid rgba(74, 174, 107, 0.15); } .memory-vector-badge.disabled { @@ -2720,14 +2751,14 @@ html, body { overflow-y: auto; display: flex; flex-direction: column; - gap: 4px; + gap: 6px; min-height: 0; } .memory-item-lg { border: 1px solid var(--border-subtle); border-radius: var(--radius-control); - padding: 10px 14px; + padding: 12px 16px; background: var(--bg-layer); transition: var(--transition); } @@ -2735,6 +2766,7 @@ html, body { .memory-item-lg:hover { border-color: var(--border-strong); background: var(--bg-layer-alt); + box-shadow: var(--shadow-card); } .memory-item-lg-header { @@ -2783,7 +2815,7 @@ html, body { display: flex; align-items: center; gap: 6px; - margin-top: 6px; + margin-top: 8px; flex-wrap: wrap; } @@ -2794,11 +2826,12 @@ html, body { } .memory-tag-lg { - background: rgba(96, 205, 255, 0.08); + background: var(--accent-subtle); color: var(--accent); - padding: 1px 8px; - border-radius: 4px; + padding: 2px 8px; + border-radius: 20px; font-size: 11px; + font-weight: 500; } .memory-item-lg-time { @@ -2814,7 +2847,7 @@ html, body { font-size: 13px; } -/* 记忆面板 toggle 在模态框 header 内 */ +/* 记忆面板 toggle */ .memory-toggle { display: flex; align-items: center; @@ -2826,22 +2859,23 @@ html, body { display: none; } -/* btn-danger-outline (记忆用) */ +/* btn-danger-outline */ .btn-danger-outline { background: none; - border: 1px solid rgba(255, 82, 82, 0.3); - color: #ff6b6b; + border: 1.5px solid rgba(217, 79, 92, 0.2); + color: var(--critical); border-radius: var(--radius-control); - padding: 4px 10px; + padding: 5px 12px; cursor: pointer; font-size: 12px; font-family: var(--font); - transition: all 0.2s; + font-weight: 500; + transition: var(--transition); } .btn-danger-outline:hover { - background: rgba(255, 82, 82, 0.1); - border-color: rgba(255, 82, 82, 0.5); + background: var(--critical-bg); + border-color: rgba(217, 79, 92, 0.4); } /* 记忆注入状态 */ @@ -2872,8 +2906,6 @@ html, body { } } - 工作空间面板已改为 flex 子元素，自然占据宽度 */ - /* ═══════════════ 工具面板模态框 ═══════════════ */ #toolsModal .modal { @@ -2884,7 +2916,7 @@ html, body { .tools-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; } @@ -2899,6 +2931,7 @@ html, body { .tool-card:hover { border-color: var(--border-strong); background: var(--bg-layer-alt); + box-shadow: var(--shadow-card); } .tool-card-header { @@ -2915,7 +2948,7 @@ html, body { .tool-card-name { font-family: var(--font-mono); - font-size: 13px; + font-size: 12px; font-weight: 600; color: var(--accent); } @@ -2925,26 +2958,26 @@ html, body { font-size: 10px; font-weight: 600; padding: 2px 8px; - border-radius: 10px; + border-radius: 20px; white-space: nowrap; } .tool-card-badge.auto { color: var(--success); background: var(--success-bg); - border: 1px solid rgba(108, 203, 95, 0.15); + border: 1px solid rgba(74, 174, 107, 0.15); } .tool-card-badge.confirm { color: var(--caution); background: var(--caution-bg); - border: 1px solid rgba(252, 225, 0, 0.15); + border: 1px solid rgba(212, 160, 60, 0.15); } .tool-card-badge.disabled { color: var(--critical); background: var(--critical-bg); - border: 1px solid rgba(241, 112, 123, 0.15); + border: 1px solid rgba(217, 79, 92, 0.15); } .tool-card-desc { @@ -2959,33 +2992,34 @@ html, body { /* ReAct 思考过程卡片 */ .react-thought-card { - background: rgba(138, 109, 255, 0.06); - border: 1px solid rgba(138, 109, 255, 0.15); - border-radius: 8px; + background: rgba(155, 126, 216, 0.06); + border: 1px solid rgba(155, 126, 216, 0.12); + border-radius: var(--radius-md); margin: 8px 0; overflow: hidden; - transition: border-color 0.2s; + transition: border-color var(--transition); } .react-thought-card:hover { - border-color: rgba(138, 109, 255, 0.3); + border-color: rgba(155, 126, 216, 0.25); } .react-thought-header { display: flex; align-items: center; gap: 6px; - padding: 8px 12px; + padding: 8px 14px; cursor: pointer; font-size: 12px; - color: #a78bfa; + color: #9B7ED8; + font-weight: 600; user-select: none; } .react-thought-header:hover { - background: rgba(138, 109, 255, 0.08); + background: rgba(155, 126, 216, 0.06); } .react-thought-content { - padding: 0 12px 12px; + padding: 0 14px 12px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; @@ -2996,6 +3030,11 @@ html, body { margin: 0; font-family: inherit; white-space: pre-wrap; + background: none; + border: none; + padding: 0; + box-shadow: none; + color: inherit; } /* ReAct 步骤时间线 */ @@ -3011,7 +3050,7 @@ html, body { top: 0; bottom: 0; width: 2px; - background: rgba(138, 109, 255, 0.2); + background: rgba(155, 126, 216, 0.2); border-radius: 1px; } @@ -3027,8 +3066,8 @@ html, body { width: 8px; height: 8px; border-radius: 50%; - background: #a78bfa; - border: 2px solid var(--bg-primary); + background: #9B7ED8; + border: 2px solid var(--bg-card); } .react-step-label { @@ -3038,17 +3077,17 @@ html, body { letter-spacing: 0.5px; margin-bottom: 4px; } -.react-step-label.thought { color: #a78bfa; } -.react-step-label.action { color: #60cdff; } -.react-step-label.observation { color: #4ade80; } +.react-step-label.thought { color: #9B7ED8; } +.react-step-label.action { color: var(--accent); } +.react-step-label.observation { color: var(--success); } .react-step-content { font-size: 12px; color: var(--text-secondary); line-height: 1.5; - padding: 6px 10px; - background: rgba(0, 0, 0, 0.15); - border-radius: 6px; + padding: 8px 10px; + background: var(--bg-layer); + border-radius: var(--radius-control); white-space: pre-wrap; word-break: break-word; } @@ -3056,23 +3095,23 @@ html, body { /* 工具调用卡片增强（v4.0 耗时显示） */ .tool-call-duration { font-size: 11px; - color: var(--text-muted); + color: var(--text-tertiary); margin-left: auto; } /* ReAct 执行摘要 */ .react-summary { - background: rgba(74, 222, 128, 0.06); - border: 1px solid rgba(74, 222, 128, 0.15); - border-radius: 8px; - padding: 10px 14px; + background: rgba(74, 174, 107, 0.06); + border: 1px solid rgba(74, 174, 107, 0.12); + border-radius: var(--radius-md); + padding: 12px 16px; margin: 10px 0; font-size: 13px; line-height: 1.5; } .react-summary-title { - font-weight: 600; - color: #4ade80; + font-weight: 700; + color: var(--success); margin-bottom: 6px; font-size: 12px; }