mirror of
https://gitcode.com/JianFeeeee/HomeAgent.git
synced 2026-10-12 02:31:01 +00:00
feat(webui): 视觉重做第一轮 —— 侧栏图标化、顶栏标题化、卡片/行/按钮收口
反馈是「丑死了」,没有具体项,所以按「哪儿在制造廉价感」逐条改: 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:
@ -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">
|
||||
|
||||
Reference in New Issue
Block a user