kevin/aichat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
kevin
2026-06-09 12:14:10 +08:00
parent 239c9493f8
commit 4dcf8c351a
1 changed files with 36 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/chat.html
+36 -22
View File
@@ -8,17 +8,24 @@
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { :root {
--bg: #0f1117; --bg: #f6f8fc;
--surface: #1a1d27; --surface: #ffffff;
--surface2: #252836; --surface2: #eef2f8;
--border: #2e3148; --border: #d8deea;
--accent: #6c63ff; --accent: #5b5ce2;
--accent-h: #7c74ff; --accent-h: #4b4dcc;
--text: #e8eaf6; --text: #172033;
--text-dim: #8892b0; --text-dim: #667085;
--user-bg: #2a2d3e; --user-bg: #eef2ff;
--ai-bg: #1e2132; --ai-bg: #ffffff;
--danger: #ff6b6b; --danger: #dc2626;
--on-accent: #ffffff;
--accent-soft: rgba(91,92,226,.10);
--accent-border: rgba(91,92,226,.24);
--code-bg: #f3f5fa;
--overlay: rgba(15,23,42,.25);
--shadow: 0 18px 60px rgba(15,23,42,.16);
--scrollbar-thumb: #c8d2e3;
--radius: 12px; --radius: 12px;
--font: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif; --font: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
} }
@@ -52,7 +59,7 @@
width: 100%; width: 100%;
background: var(--accent); background: var(--accent);
border: none; border: none;
color: #fff; color: var(--on-accent);
border-radius: 9px; border-radius: 9px;
padding: 10px 14px; padding: 10px 14px;
font-size: 0.88rem; font-size: 0.88rem;
@@ -67,7 +74,7 @@
} }
#convList::-webkit-scrollbar { width: 5px; } #convList::-webkit-scrollbar { width: 5px; }
#convList::-webkit-scrollbar-track { background: transparent; } #convList::-webkit-scrollbar-track { background: transparent; }
#convList::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } #convList::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
.conv-empty { .conv-empty {
padding: 14px 10px; padding: 14px 10px;
color: var(--text-dim); color: var(--text-dim);
@@ -155,7 +162,7 @@
#btnClear:hover { border-color: var(--danger); color: var(--danger); } #btnClear:hover { border-color: var(--danger); color: var(--danger); }
#btnPreset:hover, #btnSearch:hover { border-color: var(--accent); color: var(--accent); } #btnPreset:hover, #btnSearch:hover { border-color: var(--accent); color: var(--accent); }
#btnSearch.active { #btnSearch.active {
background: rgba(108,99,255,.14); background: var(--accent-soft);
border-color: var(--accent); border-color: var(--accent);
color: var(--accent); color: var(--accent);
} }
@@ -169,7 +176,7 @@
} }
#messages::-webkit-scrollbar { width: 5px; } #messages::-webkit-scrollbar { width: 5px; }
#messages::-webkit-scrollbar-track { background: transparent; } #messages::-webkit-scrollbar-track { background: transparent; }
#messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } #messages::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
.msg-row { .msg-row {
display: flex; display: flex;
@@ -204,7 +211,7 @@
} }
.msg-row.user .bubble { .msg-row.user .bubble {
background: var(--user-bg); background: var(--user-bg);
border-color: rgba(108,99,255,.35); border-color: var(--accent-border);
} }
/* 气泡内图片预览 */ /* 气泡内图片预览 */
@@ -218,7 +225,7 @@
/* 代码块 */ /* 代码块 */
.bubble pre { .bubble pre {
background: #12141f; background: var(--code-bg);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
padding: 12px 14px; padding: 12px 14px;
@@ -227,6 +234,13 @@
margin: 8px 0; margin: 8px 0;
} }
.bubble code { font-family: 'Fira Code', Consolas, monospace; } .bubble code { font-family: 'Fira Code', Consolas, monospace; }
.bubble :not(pre) > code {
background: var(--code-bg);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1px 4px;
font-size: .88em;
}
/* 打字光标 */ /* 打字光标 */
.typing-cursor::after { .typing-cursor::after {
@@ -317,14 +331,14 @@
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all .15s; flex-shrink: 0; cursor: pointer; transition: all .15s; flex-shrink: 0;
} }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(108,99,255,.08); } .icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
#btnSend { #btnSend {
width: 42px; height: 42px; width: 42px; height: 42px;
border-radius: 10px; border-radius: 10px;
border: none; border: none;
background: var(--accent); background: var(--accent);
color: #fff; color: var(--on-accent);
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
cursor: pointer; flex-shrink: 0; cursor: pointer; flex-shrink: 0;
transition: background .15s, transform .1s; transition: background .15s, transform .1s;
@@ -350,7 +364,7 @@
z-index: 10; z-index: 10;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: rgba(0,0,0,.45); background: var(--overlay);
padding: 20px; padding: 20px;
} }
#presetModal.show { display: flex; } #presetModal.show { display: flex; }
@@ -360,7 +374,7 @@
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: var(--radius);
padding: 18px; padding: 18px;
box-shadow: 0 18px 60px rgba(0,0,0,.35); box-shadow: var(--shadow);
} }
.preset-dialog h2 { .preset-dialog h2 {
font-size: 1rem; font-size: 1rem;
@@ -404,7 +418,7 @@
#btnSavePreset { #btnSavePreset {
background: var(--accent); background: var(--accent);
border-color: var(--accent); border-color: var(--accent);
color: #fff; color: var(--on-accent);
} }
#btnClearPreset:hover { border-color: var(--danger); color: var(--danger); } #btnClearPreset:hover { border-color: var(--danger); color: var(--danger); }