mirror of
https://gitcode.com/JianFeeeee/HomeAgent.git
synced 2026-10-03 15:53:56 +00:00
gui: 多主题外观(6色板/背景图缓存)/连接认证(总网关登录窗自动抓Cookie)/中英切换/插件禁用
This commit is contained in:
JianFeeeee
@ -66,6 +66,15 @@
|
||||
--save-btn-border: #d99a2b;
|
||||
--loading-border: rgba(255, 255, 255, 0.12);
|
||||
--loading-top: #ff7fac;
|
||||
--grad-a: rgba(255, 127, 172, 0.14);
|
||||
--grad-b: rgba(136, 192, 208, 0.12);
|
||||
--grad-c: rgba(243, 59, 124, 0.1);
|
||||
--c-sakura: #ff7fac;
|
||||
--c-cyan: #2dd4bf;
|
||||
--c-violet: #a78bfa;
|
||||
--c-emerald: #34d399;
|
||||
--c-amber: #fbbf24;
|
||||
--c-blue: #60a5fa;
|
||||
}
|
||||
[data-theme=light] {
|
||||
--glass-bg: rgba(255, 255, 255, 0.66);
|
||||
@ -76,7 +85,7 @@
|
||||
--shadow-md: 0 6px 20px rgba(153, 27, 75, 0.1);
|
||||
--shadow-lg: 0 16px 40px rgba(153, 27, 75, 0.14);
|
||||
--shadow-glow: 0 0 0 1px rgba(243, 59, 124, 0.3), 0 6px 22px rgba(243, 59, 124, 0.14);
|
||||
--bg-primary: #fdf3f7;
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: rgba(255, 255, 255, 0.78);
|
||||
--bg-card: rgba(255, 255, 255, 0.72);
|
||||
--bg-input: rgba(255, 224, 233, 0.55);
|
||||
@ -110,17 +119,149 @@
|
||||
--loading-border: rgba(201, 36, 98, 0.18);
|
||||
--loading-top: #c92462;
|
||||
}
|
||||
[data-color="sakura"][data-theme="light"] {
|
||||
--bg-primary: #ffffff;
|
||||
--bg-input: rgba(255, 224, 233, 0.55);
|
||||
--bg-hover: rgba(255, 127, 172, 0.08);
|
||||
--pre-bg: #fff0f5;
|
||||
--chat-bg: #fff0f5;
|
||||
--msg-bubble-border: rgba(201, 36, 98, 0.14);
|
||||
--btn-ghost-hover-bg: #ffe4e9;
|
||||
--grad-a: rgba(255, 127, 172, 0.14);
|
||||
--grad-c: rgba(243, 59, 124, 0.09);
|
||||
}
|
||||
[data-color="cyan"] {
|
||||
--accent: #2dd4bf;
|
||||
--accent-bg: rgba(45, 212, 191, 0.14);
|
||||
--msg-user-bg: rgba(45, 212, 191, 0.16);
|
||||
--msg-user-color: #99f6e4;
|
||||
--loading-top: #2dd4bf;
|
||||
--grad-a: rgba(45, 212, 191, 0.14);
|
||||
--grad-c: rgba(45, 212, 191, 0.1);
|
||||
}
|
||||
[data-color="cyan"][data-theme="light"] {
|
||||
--accent: #0f766e;
|
||||
--accent-bg: #ccfbf1;
|
||||
--msg-user-bg: #ccfbf1;
|
||||
--msg-user-color: #0f766e;
|
||||
--loading-top: #0f766e;
|
||||
--bg-primary: #f0fdfa;
|
||||
--bg-input: rgba(204, 251, 241, 0.6);
|
||||
--bg-hover: rgba(13, 148, 136, 0.08);
|
||||
--pre-bg: #e7f9f3;
|
||||
--chat-bg: #e7f9f3;
|
||||
--msg-bubble-border: rgba(13, 148, 136, 0.14);
|
||||
--btn-ghost-hover-bg: #ccfbf1;
|
||||
--grad-a: rgba(13, 148, 136, 0.14);
|
||||
--grad-c: rgba(13, 148, 136, 0.09);
|
||||
}
|
||||
[data-color="violet"] {
|
||||
--accent: #a78bfa;
|
||||
--accent-bg: rgba(167, 139, 250, 0.14);
|
||||
--msg-user-bg: rgba(167, 139, 250, 0.16);
|
||||
--msg-user-color: #ddd6fe;
|
||||
--loading-top: #a78bfa;
|
||||
--grad-a: rgba(167, 139, 250, 0.14);
|
||||
--grad-c: rgba(167, 139, 250, 0.1);
|
||||
}
|
||||
[data-color="violet"][data-theme="light"] {
|
||||
--accent: #7c3aed;
|
||||
--accent-bg: #ede9fe;
|
||||
--msg-user-bg: #ede9fe;
|
||||
--msg-user-color: #7c3aed;
|
||||
--loading-top: #7c3aed;
|
||||
--bg-primary: #f8f6ff;
|
||||
--bg-input: rgba(237, 233, 254, 0.6);
|
||||
--bg-hover: rgba(124, 58, 237, 0.08);
|
||||
--pre-bg: #f3f0ff;
|
||||
--chat-bg: #f3f0ff;
|
||||
--msg-bubble-border: rgba(124, 58, 237, 0.14);
|
||||
--btn-ghost-hover-bg: #ede9fe;
|
||||
--grad-a: rgba(124, 58, 237, 0.13);
|
||||
--grad-c: rgba(124, 58, 237, 0.08);
|
||||
}
|
||||
[data-color="emerald"] {
|
||||
--accent: #34d399;
|
||||
--accent-bg: rgba(52, 211, 153, 0.14);
|
||||
--msg-user-bg: rgba(52, 211, 153, 0.16);
|
||||
--msg-user-color: #a7f3d0;
|
||||
--loading-top: #34d399;
|
||||
--grad-a: rgba(52, 211, 153, 0.14);
|
||||
--grad-c: rgba(52, 211, 153, 0.1);
|
||||
}
|
||||
[data-color="emerald"][data-theme="light"] {
|
||||
--accent: #059669;
|
||||
--accent-bg: #d1fae5;
|
||||
--msg-user-bg: #d1fae5;
|
||||
--msg-user-color: #059669;
|
||||
--loading-top: #059669;
|
||||
--bg-primary: #f0fdf6;
|
||||
--bg-input: rgba(209, 250, 229, 0.6);
|
||||
--bg-hover: rgba(5, 150, 105, 0.08);
|
||||
--pre-bg: #e9f9f0;
|
||||
--chat-bg: #e9f9f0;
|
||||
--msg-bubble-border: rgba(5, 150, 105, 0.14);
|
||||
--btn-ghost-hover-bg: #d1fae5;
|
||||
--grad-a: rgba(5, 150, 105, 0.14);
|
||||
--grad-c: rgba(5, 150, 105, 0.09);
|
||||
}
|
||||
[data-color="amber"] {
|
||||
--accent: #fbbf24;
|
||||
--accent-bg: rgba(251, 191, 36, 0.14);
|
||||
--msg-user-bg: rgba(251, 191, 36, 0.16);
|
||||
--msg-user-color: #fde68a;
|
||||
--loading-top: #fbbf24;
|
||||
--grad-a: rgba(251, 191, 36, 0.14);
|
||||
--grad-c: rgba(251, 191, 36, 0.1);
|
||||
}
|
||||
[data-color="amber"][data-theme="light"] {
|
||||
--accent: #d97706;
|
||||
--accent-bg: #fef3c7;
|
||||
--msg-user-bg: #fef3c7;
|
||||
--msg-user-color: #b45309;
|
||||
--loading-top: #d97706;
|
||||
--bg-primary: #fffdf4;
|
||||
--bg-input: rgba(254, 243, 199, 0.6);
|
||||
--bg-hover: rgba(217, 119, 6, 0.08);
|
||||
--pre-bg: #fdf6e1;
|
||||
--chat-bg: #fdf6e1;
|
||||
--msg-bubble-border: rgba(217, 119, 6, 0.14);
|
||||
--btn-ghost-hover-bg: #fef3c7;
|
||||
--grad-a: rgba(217, 119, 6, 0.13);
|
||||
--grad-c: rgba(217, 119, 6, 0.08);
|
||||
}
|
||||
[data-color="blue"] {
|
||||
--accent: #60a5fa;
|
||||
--accent-bg: rgba(96, 165, 250, 0.14);
|
||||
--msg-user-bg: rgba(96, 165, 250, 0.16);
|
||||
--msg-user-color: #bfdbfe;
|
||||
--loading-top: #60a5fa;
|
||||
--grad-a: rgba(96, 165, 250, 0.14);
|
||||
--grad-c: rgba(96, 165, 250, 0.1);
|
||||
}
|
||||
[data-color="blue"][data-theme="light"] {
|
||||
--accent: #2563eb;
|
||||
--accent-bg: #dbeafe;
|
||||
--msg-user-bg: #dbeafe;
|
||||
--msg-user-color: #2563eb;
|
||||
--loading-top: #2563eb;
|
||||
--bg-primary: #f7faff;
|
||||
--bg-input: rgba(219, 234, 254, 0.6);
|
||||
--bg-hover: rgba(37, 99, 235, 0.08);
|
||||
--pre-bg: #eef4ff;
|
||||
--chat-bg: #eef4ff;
|
||||
--msg-bubble-border: rgba(37, 99, 235, 0.14);
|
||||
--btn-ghost-hover-bg: #dbeafe;
|
||||
--grad-a: rgba(37, 99, 235, 0.13);
|
||||
--grad-c: rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; font-family:var(--font-sans) }
|
||||
.selectable, .msg .text, .msg .tc-args, .msg .tc-result, .msg .reasoning-body, pre, input, textarea, .term-buf {
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
}
|
||||
body {
|
||||
background:
|
||||
radial-gradient(900px 700px at 85% -10%, rgba(255,127,172,0.14), transparent 60%),
|
||||
radial-gradient(800px 600px at -10% 20%, rgba(136,192,208,0.12), transparent 60%),
|
||||
radial-gradient(700px 500px at 50% 110%, rgba(243,59,124,0.1), transparent 60%),
|
||||
var(--bg-primary);
|
||||
background: var(--bg-primary);
|
||||
background-attachment: fixed;
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
@ -132,7 +273,7 @@ body {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
#app { display:flex; height:100vh; overflow:hidden }
|
||||
#app { display:flex; height:100vh; overflow:hidden; position:relative; z-index:1 }
|
||||
|
||||
/* ===== 沉浸式标题栏 ===== */
|
||||
.titlebar {
|
||||
@ -241,6 +382,45 @@ body.maximized .tb-max svg { transform: scale(.85) }
|
||||
transition: all .15s;
|
||||
}
|
||||
.theme-btn:hover { color: var(--accent); border-color: var(--accent) }
|
||||
#bg-layer {
|
||||
position: fixed; inset: 0; z-index: 0; pointer-events: none;
|
||||
background-image:
|
||||
radial-gradient(900px 700px at 85% -10%, var(--grad-a), transparent 60%),
|
||||
radial-gradient(800px 600px at -10% 20%, var(--grad-b), transparent 60%),
|
||||
radial-gradient(700px 500px at 50% 110%, var(--grad-c), transparent 60%),
|
||||
var(--bg-img, none);
|
||||
background-size: auto, auto, auto, cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
transform: scale(1.04);
|
||||
filter: blur(calc(var(--bg-blur, 0) * 1px));
|
||||
transition: filter .25s var(--ease-out);
|
||||
}
|
||||
.palette-pop {
|
||||
position: fixed; bottom: 56px; left: 6px; width: 210px;
|
||||
padding: 12px; background: var(--glass-bg-strong);
|
||||
backdrop-filter: blur(12px); border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
|
||||
display: none; z-index: 300;
|
||||
}
|
||||
.palette-pop.on { display: block; animation: viewIn .16s var(--ease-out) }
|
||||
.palette-pop h4 { font-size: 11px; font-weight: 600; color: var(--text-secondary); margin: 2px 0 6px }
|
||||
.palette-pop button.cdot {
|
||||
width: 22px; height: 22px; border-radius: 50%;
|
||||
border: 2px solid rgba(255,255,255,.18); cursor: pointer;
|
||||
margin: 3px; padding: 0; vertical-align: middle; transition: transform .15s;
|
||||
}
|
||||
.palette-pop button.cdot:hover { transform: scale(1.25) }
|
||||
.palette-pop button.cdot.on { border-color: var(--text-primary); box-shadow: var(--shadow-glow); transform: scale(1.15) }
|
||||
.palette-pop input[type="text"] {
|
||||
background: var(--bg-input); border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-sm); padding: 5px 8px; color: var(--text-primary);
|
||||
font-size: 11px; width: 100%; margin-bottom: 6px; outline: none;
|
||||
}
|
||||
.palette-pop input[type="range"] { width: 80px; margin: 0; accent-color: var(--accent); vertical-align: middle }
|
||||
.palette-pop .pp-row { display: flex; align-items: center; gap: 6px; margin-top: 4px }
|
||||
.palette-pop .pp-row .btn { padding: 3px 10px; font-size: 11px }
|
||||
.palette-pop .pp-val { font-size: 10px; color: var(--text-muted); min-width: 96px; text-align: right }
|
||||
.lang-btn { font-size: 13px; min-width: 28px; cursor: pointer; padding: 4px 8px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); text-align: center; background:none; color:var(--text-secondary) }
|
||||
.lang-btn:hover { color: var(--accent); border-color: var(--accent) }
|
||||
.container { padding: 16px 24px; flex: 1; min-width: 0; min-height: 0; overflow: hidden }
|
||||
@ -296,6 +476,8 @@ tr:hover td { background: var(--bg-hover) }
|
||||
.btn-primary:hover { background: var(--sakura-500) }
|
||||
.btn-danger { background: var(--error); color: #fff }
|
||||
.btn-danger:hover { background: var(--sakura-700) }
|
||||
.btn-warning { background: var(--save-btn-border); color: #fff }
|
||||
.btn-warning:hover { background: #b87e1f }
|
||||
.btn-sm { padding: 4px 10px; font-size: 11px }
|
||||
.btn-ghost { background: transparent; border: 1px solid var(--btn-ghost-border); color: var(--text-secondary) }
|
||||
.btn-ghost:hover { background: var(--btn-ghost-hover-bg); color: var(--text-primary) }
|
||||
@ -319,7 +501,7 @@ code { font-family: var(--font-mono); font-size: 12px; color: var(--pre-color) }
|
||||
.chat-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border-color); padding-bottom: 10px }
|
||||
.chat-tabs span { padding: 6px 14px; font-size: 13px; cursor: pointer; color: var(--text-muted); border-radius: var(--radius-pill); border: 1px solid transparent; transition: all .15s }
|
||||
.chat-tabs span:hover { color: var(--text-primary); background: var(--bg-hover) }
|
||||
.chat-tabs span.active { color: var(--accent); background: var(--accent-bg); border-color: rgba(255,127,172,.35) }
|
||||
.chat-tabs span.active { color: var(--accent); background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 35%, transparent) }
|
||||
.chat-panel { display: none; flex: 1; min-height: 0; flex-direction: column }
|
||||
.chat-panel.active { display: flex }
|
||||
.chat-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column }
|
||||
@ -397,7 +579,7 @@ code { font-family: var(--font-mono); font-size: 12px; color: var(--pre-color) }
|
||||
#sm-container-chat { height: 480px; background: var(--bg-input); border-radius: var(--radius-md); border: 1px solid var(--glass-border); overflow: hidden; position: relative }
|
||||
#sm-container-chat canvas { display: block }
|
||||
.loading { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--loading-border); border-radius: 50%; border-top-color: var(--loading-top); animation: spin .6s linear infinite }
|
||||
.loading-spinner { width: 32px; height: 32px; border: 3px solid rgba(255,127,172,.15); border-top: 3px solid var(--accent); border-radius: 50%; animation: spin .8s linear infinite }
|
||||
.loading-spinner { width: 32px; height: 32px; border: 3px solid color-mix(in srgb, var(--accent) 15%, transparent); border-top: 3px solid var(--accent); border-radius: 50%; animation: spin .8s linear infinite }
|
||||
@keyframes spin { to { transform: rotate(360deg) } }
|
||||
|
||||
/* ===== 未配置后端引导 ===== */
|
||||
@ -414,7 +596,7 @@ code { font-family: var(--font-mono); font-size: 12px; color: var(--pre-color) }
|
||||
.settings-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 16px }
|
||||
.settings-tabs span { padding: 6px 14px; font-size: 13px; cursor: pointer; color: var(--text-muted); border-radius: var(--radius-pill); border: 1px solid transparent; transition: all .15s }
|
||||
.settings-tabs span:hover { color: var(--text-primary); background: var(--bg-hover) }
|
||||
.settings-tabs span.active { color: var(--accent); background: var(--accent-bg); border-color: rgba(255,127,172,.35) }
|
||||
.settings-tabs span.active { color: var(--accent); background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 35%, transparent) }
|
||||
.settings-content { min-width: 0 }
|
||||
.settings-key { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-bottom: 2px }
|
||||
.kv-row { display: flex; padding: 6px 0; border-bottom: 1px solid var(--kv-border); font-size: 13px }
|
||||
|
||||
Reference in New Issue
Block a user