refactor(web): 前端改用 @stash/ui 组件库

- 新增本地依赖 @stash/ui(file:../../stash-ui),引入其 style.css 与设计令牌
- 页面骨架改用 Layout(contained + header/sider),搜索框改为吸顶
- 卡片/菜单/按钮/标签/头像/分页/空态/提示全部换成组件库组件
- 删除本地 iconfont 与 1400 行手写组件样式,App.css 只保留页面级样式
- 数据层、路由、过滤逻辑未改动;33 个 Rust 测试通过
This commit is contained in:
stash
2026-10-28 12:44:50 +08:00
parent 19ead7b716
commit 64f1fbf906
35 changed files with 735 additions and 2154 deletions
+16 -64
View File
@@ -1,44 +1,11 @@
/* 页面级基础:字号 / 字体 / 重置。颜色与间距全部来自 @stash/ui 的令牌。 */
:root {
/* ---------- 颜色:取自 Alright 主题的设计变量 ---------- */
--bg-color: #f7f8fa;
--card-bg: #ffffff;
--primary-color: #3858f6;
--primary-soft: rgba(56, 88, 246, 0.1);
--text-main: #1d2129;
--text-sub: #4e5969;
--text-muted: #86909c;
--border-color: #f6f6f6;
--border-strong: #eeeeee;
--danger: #ff3e3e;
--orange: #ffba3a;
--green: #4abd86;
--radius-sm: 6px;
--radius-main: 12px;
--radius-lg: 24px;
/* 主题的阴影很轻:0 6px 16px rgba(27,26,49,2%) */
--shadow-card: 0 6px 16px rgba(27, 26, 49, 0.02);
--shadow-hover: 0 6px 16px rgba(27, 26, 49, 0.06);
--sidebar-width: 240px;
--top-nav-height: 60px;
/* 内容区最大宽度,宽屏时整体居中 */
--layout-max-width: 1380px;
/* 内容列顶部让位高度(给悬浮搜索框),侧栏首卡与内容首卡都按它对齐 */
--content-top-offset: 52px;
/* 主题正文用霞鹜文楷(与演示站同一份 webfont),缺失时回退系统字体 */
--font-sans:
'LXGW WenKai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans CN', sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.5;
color: var(--text-main);
background-color: var(--bg-color);
font-family: var(--su-font-sans);
font-size: var(--su-font-size-md);
line-height: var(--su-line-height-md);
color: var(--su-text-main);
background-color: var(--su-bg-page);
color-scheme: light;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -53,15 +20,7 @@
html,
body,
#root {
height: 100%;
}
/* 桌面端锁死视口,滚动交给右侧内容区 */
body {
height: 100vh;
overflow: hidden;
background-color: var(--bg-color);
color: var(--text-main);
min-height: 100%;
}
a {
@@ -76,20 +35,13 @@ button {
background: none;
}
ul,
ol {
list-style: none;
}
/* 键盘焦点环由组件库统一提供;页面只补“可聚焦容器”的兜底 */
:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
@media (max-width: 900px) {
html,
body,
#root {
height: auto;
}
body {
height: auto;
overflow: auto;
}
outline: var(--su-focus-ring);
outline-offset: var(--su-focus-ring-offset);
}