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

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

@ -49,17 +49,36 @@
/>HomeAgent
</h1>
<div class="nav-links">
<a
class="active"
onclick="switchTab('overview')"
data-i18n="navOverview"
>概览</a
>
<a onclick="switchTab('chat')" data-i18n="navChat">对话</a>
<a onclick="switchTab('plugins')" data-i18n="navPlugins">插件</a>
<a onclick="switchTab('settings')" data-i18n="navSettings">设置</a>
<a onclick="switchTab('adapters')" data-i18n="navAdapters">适配器</a>
<a onclick="switchTab('kernel')" data-i18n="navKernel">内核</a>
<!--
导航项：图标 + 标签。
为什么把 data-i18n 挪到内层 span：切语言时那段代码是 `el.textContent = …`，
挂在 <a> 上会把图标一起抹掉 —— 只有把标签单独包起来才两全。
图标一律 24×24 stroke（currentColor），跟随 active/hover 变色，不额外加一套资源。
-->
<a class="active" onclick="switchTab('overview')">
<svg class="nav-ico" viewBox="0 0 24 24"><path d="M3 3h7v7H3zM14 3h7v5h-7zM14 12h7v9h-7zM3 14h7v7H3z"/></svg>
<span data-i18n="navOverview">概览</span>
</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 class="nav-footer">
<div style="display: flex; align-items: center; gap: 4px">