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:
+16
-64
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user