jianf/HomeAgent
1
0
Fork 0
mirror of https://gitcode.com/JianFeeeee/HomeAgent.git synced 2026-10-04 00:03:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(webui): 视觉重做第一轮 —— 侧栏图标化、顶栏标题化、卡片/行/按钮收口

Browse Source 
反馈是「丑死了」，没有具体项，所以按「哪儿在制造廉价感」逐条改：

1. **侧栏只有文字**：6 个导航项各加 24×24 stroke 图标（currentColor，随选中/hover 变色），
   10px 间距、13.5px/500 字重、圆角 10px 的药丸命中区；品牌字改 sakura→frost 渐变。
   → 空荡荡的 16rem 栏终于有了骨架。

2. **选中态把文字整体右推 + 发光文字**：原来用 `border-left: 3px` 画选中条，
   hover 时整行抖 3px；还加了 text-shadow 光晕。改成 `box-shadow: inset 2px 0 0`
   （不占布局）+ 取消光晕 + 选中加粗。这类「一像素级不稳」是廉价感的主要来源。

3. **顶栏只有一行灰字面包屑**：把当前页做成 15px/650 的标题色，面包屑碎片
   压到 12.5px 且降透明度；顶栏 48→56px。页面总算有「入口」。

4. **卡片 hover 整页上下浮**：`.card:hover` 去掉 `translateY(-1px)`（十几张卡一起
   浮，视线扫过像在抖），只提亮阴影与描边；padding 20→22、卡片间距 16→18。

5. **卡片标题没有章节信号**：`h2` 前加 3×14px 的 sakura→frost 渐变短竖。

6. **kv-row 是文字墙**：flex + 固定 180px 键列 → grid `minmax(110px,180px) 1fr`，
   行高 8px、负外边距 hover 高亮、末行去分隔线、数值 `tabular-nums`（端口/计数上下对齐）。

7. **满屏药丸按钮**：`.btn` 圆角从 999px 收到 10px（与卡片同一套圆角），
   padding/font 微调；`.btn-sm` 11→11.5px 提升可读性。

8. **内容区靠左铺满**：`.container` 居中 + `max-width: 1240px`（超宽屏摊满整个
   屏幕是「后台模板」的典型观感）。

i18n 有个坑：切语言那段是 `el.textContent = …`，所以 `data-i18n` 必须从 `<a>` 挪到
内层 `<span>`，否则切一次语言图标就被抹掉。实测 ZH→EN→ZH 图标都在。

验证：go build/测试绿（webui + sdk + agent + plugin）；真机 1440×900 六页截图对比
（侧栏图标、渐变品牌、标题竖条、grid 行、居中内容区均生效）。
This commit is contained in:
JianFeeeee
2026-09-14 14:29:17 +08:00
parent cdb2ea2207
commit 0fda210e8b
2 changed files with 149 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
internal/plugins/webui/dashboard.css
View File

@ -339,14 +339,19 @@
border 0.2s; border 0.2s;
} }
nav h1 { nav h1 {
font-size: 16px; font-size: 16.5px;
font-weight: 700; font-weight: 700;
color: var(--accent); /* 品牌字用 sakura→frost 渐变：比纯色更像「产品」，也不跟导航选中态抢颜色 */
margin: 4px 12px 16px; background: linear-gradient(100deg, var(--sakura-300), var(--frost-300));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin: 2px 10px 18px;
white-space: nowrap; white-space: nowrap;
letter-spacing: -0.01em; letter-spacing: -0.015em;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px;
} }
.nav-links { .nav-links {
display: flex; display: flex;
@ -355,27 +360,47 @@
flex: 1; flex: 1;
} }
nav a { nav a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px; padding: 10px 12px;
color: var(--text-secondary); color: var(--text-secondary);
text-decoration: none; text-decoration: none;
font-size: 13px; font-size: 13.5px;
font-weight: 500;
cursor: pointer; cursor: pointer;
border-radius: var(--radius-md); border-radius: var(--radius-md);
border-left: 3px solid transparent; /* 选中条用 inset 阴影而不是 border-left：border 会把整行文字右推 3px，
hover 时图标跟着跳一下 —— 这种「一像素级不稳」正是廉价感的来源。 */
box-shadow: inset 2px 0 0 transparent;
transition: transition:
all var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out),
transform var(--dur-micro) var(--ease-out); color var(--dur-micro) var(--ease-out),
box-shadow var(--dur-micro) var(--ease-out);
}
.nav-ico {
width: 17px;
height: 17px;
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.8;
} }
nav a:hover { nav a:hover {
color: var(--text-primary); color: var(--text-primary);
background: var(--glass-hover); background: var(--glass-hover);
transform: translateX(2px);
} }
nav a.active { nav a.active {
color: var(--accent); color: var(--accent);
background: var(--accent-bg); background: var(--accent-bg);
border-left-color: var(--accent); box-shadow: inset 2px 0 0 var(--accent);
text-shadow: 0 0 14px rgba(255, 127, 172, 0.45); font-weight: 600;
}
nav a.active .nav-ico {
opacity: 1;
} }
.nav-footer { .nav-footer {
border-top: 1px solid var(--glass-border); border-top: 1px solid var(--glass-border);
@ -400,11 +425,11 @@
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 90; z-index: 90;
height: 48px; height: 56px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 12px;
padding: 0 20px; padding: 0 24px;
background: var(--bg-secondary); background: var(--bg-secondary);
backdrop-filter: blur(var(--glass-blur)) saturate(1.4); backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
@ -432,10 +457,23 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
font-size: 13px; font-size: 12.5px;
color: var(--text-muted); color: var(--text-muted);
animation: breadcrumbIn var(--dur-normal) var(--ease-out); animation: breadcrumbIn var(--dur-normal) var(--ease-out);
} }
/* 当前页在顶栏里当标题用：字号/字重/颜色都要跟「面包屑碎片」拉开，
否则整条顶栏就是一行灰字，页面没有入口感。 */
.breadcrumb .crumb-current {
font-size: 15px;
font-weight: 650;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.breadcrumb .crumb-home,
.breadcrumb .crumb-sep {
font-size: 12.5px;
opacity: 0.7;
}
@keyframes breadcrumbIn { @keyframes breadcrumbIn {
from { from {
opacity: 0; opacity: 0;
@ -580,8 +618,12 @@
vertical-align: middle; vertical-align: middle;
} }
.container { .container {
padding: 24px; /* 1240px 是「卡片网格 + 图表」都能读的最宽值；再宽就变成一片空旷的留白。
max-width: none; 居中而不是靠左铺满 —— 超宽屏上摊满整个屏幕是「后台模板」的典型观感。 */
padding: 22px 24px 56px;
max-width: 1240px;
margin: 0 auto;
width: 100%;
} }
.card { .card {
position: relative; position: relative;
@ -590,19 +632,19 @@
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 20px; padding: 22px;
margin-bottom: 16px; margin-bottom: 18px;
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: transition:
background 0.2s, background 0.2s,
border 0.2s, border 0.2s,
box-shadow var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
transform var(--dur-normal) var(--ease-out);
} }
/* hover 只提亮阴影与描边，**不再 translateY**：
整页十几张卡一起「上下浮」，视线扫过时像在抖，是廉价感最明显的一处。 */
.card:hover { .card:hover {
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
transform: translateY(-1px); border-color: rgba(255, 127, 172, 0.22);
border-color: rgba(255, 127, 172, 0.25);
} }
.card.tilt { .card.tilt {
transform-style: preserve-3d; transform-style: preserve-3d;
@ -636,11 +678,28 @@
} }
} }
.card h2 { .card h2 {
font-size: 15px; /* 标题左侧加一道 accent 短竖：卡片之间就有了同一套「章节起点」信号，
font-weight: 600; 不必靠加粗/变大去抢，长页面翻起来也不迷路。 */
margin-bottom: 12px; display: flex;
align-items: center;
gap: 9px;
font-size: 15.5px;
font-weight: 650;
margin-bottom: 14px;
color: var(--text-primary); color: var(--text-primary);
letter-spacing: -0.01em; letter-spacing: -0.012em;
}
.card h2::before {
content: "";
width: 3px;
height: 14px;
border-radius: 2px;
background: linear-gradient(
180deg,
var(--sakura-300),
var(--frost-300)
);
flex-shrink: 0;
} }
.card h3 { .card h3 {
font-size: 13px; font-size: 13px;
@ -761,15 +820,20 @@
color: var(--text-secondary); color: var(--text-secondary);
} }
.btn { .btn {
padding: 6px 16px; /* 药丸形换成与卡片同一套圆角：满屏药丸按钮是「玩具感」的主要来源之一 */
border-radius: var(--radius-pill); padding: 7px 14px;
border-radius: var(--radius-md);
border: none; border: none;
font-size: 12px; font-size: 12.5px;
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
letter-spacing: 0.01em; letter-spacing: 0.005em;
line-height: 1.35;
transition: transition:
all var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out),
color var(--dur-micro) var(--ease-out),
border-color var(--dur-micro) var(--ease-out),
box-shadow var(--dur-micro) var(--ease-out),
transform var(--dur-micro) var(--ease-out); transform var(--dur-micro) var(--ease-out);
} }
.btn:active { .btn:active {
@ -796,8 +860,8 @@
filter: brightness(1.1); filter: brightness(1.1);
} }
.btn-sm { .btn-sm {
padding: 4px 12px; padding: 4px 10px;
font-size: 11px; font-size: 11.5px;
} }
.btn-ghost { .btn-ghost {
background: transparent; background: transparent;
@ -1785,19 +1849,37 @@
border-radius: 6px; border-radius: 6px;
} }
.kv-row { .kv-row {
display: flex; display: grid;
padding: 6px 0; grid-template-columns: minmax(110px, 180px) 1fr;
gap: 12px;
align-items: baseline;
padding: 8px;
/* 负外边距让 hover 高亮能满宽，而不把内容挤窄 */
margin: 0 -8px;
border-bottom: 1px solid var(--kv-border); border-bottom: 1px solid var(--kv-border);
font-size: 13px; font-size: 13px;
border-radius: var(--radius-sm);
transition: background var(--dur-micro) var(--ease-out);
}
.kv-row:hover {
background: var(--glass-hover);
}
.kv-row:last-child {
border-bottom: none;
} }
.kv-row .key { .kv-row .key {
color: var(--text-muted); color: var(--text-muted);
width: 180px; /* 键列不再硬编码 180px 宽度：窄屏/长键名时能自己收，避免把值挤成竖排 */
width: auto;
flex-shrink: 0; flex-shrink: 0;
font-size: 12.5px;
} }
.kv-row .val { .kv-row .val {
color: var(--text-primary); color: var(--text-primary);
word-break: break-all; word-break: break-all;
/* 数字等宽：端口/计数/内存这类值上下对齐才好扫 */
font-variant-numeric: tabular-nums;
min-width: 0;
} }
.tool-badge { .tool-badge {
display: inline-block; display: inline-block;

41
internal/plugins/webui/dashboard.html
View File

@ -49,17 +49,36 @@
/>HomeAgent />HomeAgent
</h1> </h1>
<div class="nav-links"> <div class="nav-links">
<a <!--
class="active" 导航项：图标 + 标签。
onclick="switchTab('overview')" 为什么把 data-i18n 挪到内层 span：切语言时那段代码是 `el.textContent = …`，
data-i18n="navOverview" 挂在 <a> 上会把图标一起抹掉 —— 只有把标签单独包起来才两全。
>概览</a 图标一律 24×24 stroke（currentColor），跟随 active/hover 变色，不额外加一套资源。
> -->
<a onclick="switchTab('chat')" data-i18n="navChat">对话</a> <a class="active" onclick="switchTab('overview')">
<a onclick="switchTab('plugins')" data-i18n="navPlugins">插件</a> <svg class="nav-ico" viewBox="0 0 24 24"><path d="M3 3h7v7H3zM14 3h7v5h-7zM14 12h7v9h-7zM3 14h7v7H3z"/></svg>
<a onclick="switchTab('settings')" data-i18n="navSettings">设置</a> <span data-i18n="navOverview">概览</span>
<a onclick="switchTab('adapters')" data-i18n="navAdapters">适配器</a> </a>
<a onclick="switchTab('kernel')" data-i18n="navKernel">内核</a> <a onclick="switchTab('chat')">
<svg class="nav-ico" viewBox="0 0 24 24"><path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 9.4 9.4 0 0 1-3.3-.6L3 21l1.7-5A8.4 8.4 0 0 1 4 12.5 8.4 8.4 0 0 1 12.5 4h.5a8.4 8.4 0 0 1 8 7.5z"/></svg>
<span data-i18n="navChat">对话</span>
</a>
<a onclick="switchTab('plugins')">
<svg class="nav-ico" viewBox="0 0 24 24"><path d="M21 8l-9-5-9 5 9 5 9-5zM3 8v8l9 5 9-5V8"/></svg>
<span data-i18n="navPlugins">插件</span>
</a>
<a onclick="switchTab('settings')">
<svg class="nav-ico" viewBox="0 0 24 24"><path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6"/></svg>
<span data-i18n="navSettings">设置</span>
</a>
<a onclick="switchTab('adapters')">
<svg class="nav-ico" viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7"/></svg>
<span data-i18n="navAdapters">适配器</span>
</a>
<a onclick="switchTab('kernel')">
<svg class="nav-ico" viewBox="0 0 24 24"><path d="M5 5h14v14H5zM9.5 9.5h5v5h-5zM9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/></svg>
<span data-i18n="navKernel">内核</span>
</a>
</div> </div>
<div class="nav-footer"> <div class="nav-footer">
<div style="display: flex; align-items: center; gap: 4px"> <div style="display: flex; align-items: center; gap: 4px">