mirror of
https://gitcode.com/JianFeeeee/HomeAgent.git
synced 2026-09-22 18:08:04 +00:00
0fda210e8b
反馈是「丑死了」，没有具体项，所以按「哪儿在制造廉价感」逐条改： 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 行、居中内容区均生效）。
188 lines
6.6 KiB
HTML
188 lines
6.6 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>HomeAgent Dashboard</title>
|
||
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
|
||
<script
|
||
src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"
|
||
onerror="window._THREE_FAILED = true"
|
||
></script>
|
||
<script
|
||
src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"
|
||
onerror="window._THREE_FAILED = true"
|
||
></script>
|
||
<script
|
||
src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"
|
||
onerror="console.warn('marked CDN failed')"
|
||
></script>
|
||
<script
|
||
src="https://cdn.jsdelivr.net/npm/dompurify@3.2.4/dist/purify.min.js"
|
||
onerror="console.warn('DOMPurify CDN failed')"
|
||
></script>
|
||
<script>
|
||
setTimeout(function () {
|
||
if (!window.THREE) window._THREE_FAILED = true;
|
||
}, 8000);
|
||
</script>
|
||
<style>
|
||
{{DASHBOARD_CSS}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="bg-layer"></div>
|
||
<div class="palette-pop" id="palette-pop"></div>
|
||
<nav id="sidebar">
|
||
<h1>
|
||
<img
|
||
src="/logo.svg"
|
||
alt="HomeAgent"
|
||
style="
|
||
height: 22px;
|
||
width: 22px;
|
||
vertical-align: middle;
|
||
margin-right: 6px;
|
||
flex-shrink: 0;
|
||
border-radius: 6px;
|
||
"
|
||
/>HomeAgent
|
||
</h1>
|
||
<div class="nav-links">
|
||
<!--
|
||
导航项：图标 + 标签。
|
||
为什么把 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">
|
||
<button
|
||
class="theme-btn"
|
||
onclick="toggleTheme()"
|
||
id="theme-btn"
|
||
title="切换亮色/暗色模式"
|
||
>
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
width="15"
|
||
height="15"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
>
|
||
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" />
|
||
</svg>
|
||
</button>
|
||
<button
|
||
class="theme-btn"
|
||
onclick="toggleAppearance()"
|
||
id="palette-btn"
|
||
title="外观：主题色 / 背景图"
|
||
>
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
width="15"
|
||
height="15"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M12 22a10 10 0 1 1 10-10c0 2.2-1.8 4-4 4h-2a3 3 0 0 0-3 3c0 1.1.9 2 2 2 1.4 0 2.5-1.1 3.6-2.1C19.3 18.5 20 20 21.5 20.5A1 1 0 0 0 22 19c0-4-3.6-7-10-7-5.5 0-9 3.8-9 9z"
|
||
/>
|
||
<circle cx="7.5" cy="10.5" r="1" />
|
||
<circle cx="12" cy="7.5" r="1" />
|
||
<circle cx="16.5" cy="10.5" r="1" />
|
||
</svg>
|
||
</button>
|
||
<button
|
||
class="btn btn-ghost btn-sm"
|
||
onclick="toggleLang()"
|
||
id="lang-btn"
|
||
title="切换语言/Language"
|
||
style="font-size: 13px; min-width: 28px"
|
||
>
|
||
EN
|
||
</button>
|
||
<button
|
||
class="btn btn-ghost btn-sm"
|
||
onclick="logout()"
|
||
data-i18n="navLogout"
|
||
>
|
||
退出登录
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<div class="main-wrap">
|
||
<header class="topbar">
|
||
<button
|
||
class="sidebar-toggle"
|
||
onclick="toggleSidebar()"
|
||
id="sidebar-toggle"
|
||
title="切换侧边栏"
|
||
aria-label="切换侧边栏"
|
||
>
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
width="15"
|
||
height="15"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
>
|
||
<path d="M4 6h16M4 12h16M4 18h16" />
|
||
</svg>
|
||
</button>
|
||
<div class="breadcrumb" id="breadcrumb">
|
||
<span class="crumb-home">HomeAgent</span>
|
||
<span class="crumb-sep">/</span>
|
||
<span class="crumb-current" data-i18n="navOverview">概览</span>
|
||
</div>
|
||
</header>
|
||
<div class="container" id="app">
|
||
<div id="tab-overview" class="tab-content active"></div>
|
||
<div id="tab-chat" class="tab-content"></div>
|
||
<div id="tab-plugins" class="tab-content"></div>
|
||
<div id="tab-settings" class="tab-content"></div>
|
||
<div id="tab-adapters" class="tab-content"></div>
|
||
<div id="tab-kernel" class="tab-content"></div>
|
||
</div>
|
||
</div>
|
||
<div id="toast" class="toast"></div>
|
||
<script>
|
||
{{DASHBOARD_JS}}
|
||
</script>
|
||
</body>
|
||
</html>
|