feat(ui06): B1 theme tokens + layout shell + login redesign
- 主色 #1A73E8(systemMainColor 首位,运行时自动派生 Element 系列) - 状态色对齐示例(success #15966d / warning #c78a27 / danger #df5366) - 侧栏 216px、顶栏 64px(h-16)、内容 max-width 1660px(WIDE 枚举)、隐藏标签页条 - 菜单分组(工作空间/组织与治理):meta.menuGroup + 侧栏展平渲染 + i18n key;路由路径与权限不变 - ui06.scss 全局视觉层:字体栈 13px、卡片 12px 圆角+1px 边框、按钮/输入 38px、 表格浅底表头、对话框 16px、分段 #edf1f7、焦点可见 - 登录页重做:摄影底+深蓝叠层+品牌大标题(占位素材=概念图裁片,待正式品牌素材)、 右栏 350px 表单 29px 标题 - typecheck/lint/vitest 87 项全绿 Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
@@ -6,16 +6,16 @@
|
||||
'white': #ffffff,
|
||||
'black': #000000,
|
||||
'success': (
|
||||
'base': #13deb9
|
||||
'base': #15966d
|
||||
),
|
||||
'warning': (
|
||||
'base': #ffae1f
|
||||
'base': #c78a27
|
||||
),
|
||||
'danger': (
|
||||
'base': #ff4d4f
|
||||
'base': #df5366
|
||||
),
|
||||
'error': (
|
||||
'base': #fa896b
|
||||
'base': #df5366
|
||||
)
|
||||
),
|
||||
$button: (
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
/**
|
||||
* UI06 全局视觉对齐层(admin-preview-2026-09-22 示例基准)
|
||||
* 冲突时以示例为准(方案 §0);本文件只做浅色主题覆盖,深色主题保持可用不重设计。
|
||||
* 示例 token 对照:docs/designs/admin-preview-2026-09-22/styles.css `:root`
|
||||
*/
|
||||
|
||||
/* ── 浅色主题变量对齐 ── */
|
||||
:root {
|
||||
/* 工作区背景 #F5F7FA(示例 --bg) */
|
||||
--default-bg-color: #f5f7fa;
|
||||
/* 边框 #E5EAF1(示例 --line) */
|
||||
--art-card-border: #e5eaf1;
|
||||
--default-border: #e5eaf1;
|
||||
--default-border-dashed: #e5eaf1;
|
||||
/* Element 基准字号/圆角(示例正文 12–13px、控件 8px) */
|
||||
--el-font-size-base: 13px;
|
||||
--el-border-radius-base: 8px;
|
||||
}
|
||||
|
||||
/* ── 字体(示例:系统无衬线栈,Windows 中文优先 Microsoft YaHei) ── */
|
||||
body {
|
||||
font: 13px/1.55 system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei',
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
/* ── 卡片:白底 + 1px 边框 + 12px 圆角,无重阴影(示例 .card) ── */
|
||||
.el-card {
|
||||
--el-card-border-color: #e5eaf1;
|
||||
--el-card-border-radius: 12px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e5eaf1;
|
||||
box-shadow: none;
|
||||
|
||||
&.is-always-shadow,
|
||||
&.is-hover-shadow:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 按钮:38px 高、8px 圆角(示例 .btn) ── */
|
||||
.el-button {
|
||||
min-height: 38px;
|
||||
border-radius: 8px;
|
||||
font-weight: 550;
|
||||
|
||||
&--small {
|
||||
min-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 输入/选择器:38px 高(示例 .input) ── */
|
||||
.el-input__wrapper,
|
||||
.el-select__wrapper,
|
||||
.el-textarea__inner {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.el-input .el-input__inner {
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
/* ── 表格:浅底表头 + 轻分隔(示例 .data-table) ── */
|
||||
.el-table {
|
||||
--el-table-header-bg-color: #f7f9fc;
|
||||
--el-table-header-text-color: #8291a6;
|
||||
--el-table-row-hover-bg-color: #f5f8fd;
|
||||
--el-table-border-color: #eef1f5;
|
||||
|
||||
th.el-table__cell {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-table__cell {
|
||||
padding: 13px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 对话框:16px 圆角(示例 .dialog) ── */
|
||||
.el-dialog {
|
||||
--el-dialog-border-radius: 16px;
|
||||
}
|
||||
|
||||
/* ── 标签(状态 pill 基调:10–11px、6px 圆角) ── */
|
||||
.el-tag {
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* ── 分段(示例 .seg:#edf1f7 轨道、选中白底蓝字) ── */
|
||||
.el-segmented {
|
||||
--el-border-radius-base: 8px;
|
||||
background-color: #edf1f7;
|
||||
padding: 3px;
|
||||
|
||||
.el-segmented__item-selected {
|
||||
background-color: #ffffff;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 页面标题层级(示例:页面 27px / 卡片 17px) ── */
|
||||
.el-breadcrumb {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ── 焦点可见(示例 focus-visible 3px 蓝框) ── */
|
||||
.el-button:focus-visible,
|
||||
.el-input__inner:focus-visible,
|
||||
.el-select__wrapper:focus-visible {
|
||||
outline: 3px solid #9fc7ff;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@@ -21,3 +21,6 @@
|
||||
|
||||
// 主题切换圆形扩散动画
|
||||
@use './core/theme-animation.scss';
|
||||
|
||||
// UI06 全局视觉对齐层(admin-preview 示例基准,最后引入以覆盖默认)
|
||||
@use './custom/ui06.scss';
|
||||
|
||||
Reference in New Issue
Block a user