diff --git a/apps/admin/src/assets/images/ui06-login-visual.jpg b/apps/admin/src/assets/images/ui06-login-visual.jpg
new file mode 100644
index 0000000..caf284b
Binary files /dev/null and b/apps/admin/src/assets/images/ui06-login-visual.jpg differ
diff --git a/apps/admin/src/assets/styles/core/el-light.scss b/apps/admin/src/assets/styles/core/el-light.scss
index ddf2bc5..5eeca4e 100644
--- a/apps/admin/src/assets/styles/core/el-light.scss
+++ b/apps/admin/src/assets/styles/core/el-light.scss
@@ -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: (
diff --git a/apps/admin/src/assets/styles/custom/ui06.scss b/apps/admin/src/assets/styles/custom/ui06.scss
new file mode 100644
index 0000000..ce96f14
--- /dev/null
+++ b/apps/admin/src/assets/styles/custom/ui06.scss
@@ -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;
+}
diff --git a/apps/admin/src/assets/styles/index.scss b/apps/admin/src/assets/styles/index.scss
index cdc2ddc..62302b8 100644
--- a/apps/admin/src/assets/styles/index.scss
+++ b/apps/admin/src/assets/styles/index.scss
@@ -21,3 +21,6 @@
// 主题切换圆形扩散动画
@use './core/theme-animation.scss';
+
+// UI06 全局视觉对齐层(admin-preview 示例基准,最后引入以覆盖默认)
+@use './custom/ui06.scss';
diff --git a/apps/admin/src/components/core/layouts/art-header-bar/index.vue b/apps/admin/src/components/core/layouts/art-header-bar/index.vue
index 4e3c8f9..ab68635 100644
--- a/apps/admin/src/components/core/layouts/art-header-bar/index.vue
+++ b/apps/admin/src/components/core/layouts/art-header-bar/index.vue
@@ -7,14 +7,14 @@
]"
>
-
+
diff --git a/apps/admin/src/components/core/layouts/art-menus/art-sidebar-menu/index.vue b/apps/admin/src/components/core/layouts/art-menus/art-sidebar-menu/index.vue
index 6bf46fe..f68115d 100644
--- a/apps/admin/src/components/core/layouts/art-menus/art-sidebar-menu/index.vue
+++ b/apps/admin/src/components/core/layouts/art-menus/art-sidebar-menu/index.vue
@@ -99,7 +99,34 @@
:show-timeout="50"
:hide-timeout="50"
>
+
+
+
+
+ {{ $t(item.meta.title) }}
+
+
+
+
+
+ {{ $t(item.meta.title) }}
+
+
+
menuType.value === MenuTypeEnum.DUAL_MENU)
+ // UI06:普通左侧菜单启用分组展平渲染(meta.menuGroup 驱动;双列/顶部菜单不受影响)
+ const isGroupedMode = computed(() => menuType.value === MenuTypeEnum.LEFT)
+ const MENU_GROUP_ORDER = ['menus.group.workspace', 'menus.group.governance'] as const
+
+ const flatMenuItems = computed(() => {
+ const groups: { label: string; items: AppRouteRecord[] }[] = []
+ const ungrouped: AppRouteRecord[] = []
+ const pushToGroup = (label: string, item: AppRouteRecord) => {
+ let bucket = groups.find((g) => g.label === label)
+ if (!bucket) {
+ bucket = { label, items: [] }
+ groups.push(bucket)
+ }
+ bucket.items.push(item)
+ }
+ for (const top of useMenuStore().menuList) {
+ if (top.meta?.isHide) continue
+ const visibleChildren = (top.children ?? []).filter((c) => !c.meta?.isHide)
+ if (visibleChildren.length > 0) {
+ for (const child of visibleChildren) {
+ const g = child.meta?.menuGroup
+ if (g) pushToGroup(`menus.group.${g}`, child)
+ else ungrouped.push(child)
+ }
+ } else {
+ const g = top.meta?.menuGroup
+ if (g) pushToGroup(`menus.group.${g}`, top)
+ else ungrouped.push(top)
+ }
+ }
+ groups.sort(
+ (a, b) => MENU_GROUP_ORDER.indexOf(a.label as any) - MENU_GROUP_ORDER.indexOf(b.label as any)
+ )
+ return { groups, ungrouped }
+ })
+
// 移动端屏幕判断(使用 computed 避免重复计算)
const isMobileScreen = computed(() => width.value < MOBILE_BREAKPOINT)
@@ -340,6 +404,21 @@
diff --git a/apps/admin/src/config/index.ts b/apps/admin/src/config/index.ts
index a0d6af8..71b4207 100644
--- a/apps/admin/src/config/index.ts
+++ b/apps/admin/src/config/index.ts
@@ -116,11 +116,11 @@ const appConfig: SystemConfig = {
textColor: 'rgba(#FFFFFF, 0.7)'
}
],
- // 系统主色
+ // 系统主色(UI06:首位 #1A73E8 对齐 admin-preview 示例)
systemMainColor: [
+ '#1A73E8',
'#5D87FF',
'#B48DF3',
- '#1D84FF',
'#60C041',
'#38C0FC',
'#F9901F',
diff --git a/apps/admin/src/config/setting.ts b/apps/admin/src/config/setting.ts
index 94f2d2c..916ec8e 100644
--- a/apps/admin/src/config/setting.ts
+++ b/apps/admin/src/config/setting.ts
@@ -29,8 +29,8 @@ import { SystemThemeEnum, MenuThemeEnum, MenuTypeEnum, ContainerWidthEnum } from
export const SETTING_DEFAULT_CONFIG = {
/** 菜单类型 */
menuType: MenuTypeEnum.LEFT,
- /** 菜单展开宽度 */
- menuOpenWidth: 230,
+ /** 菜单展开宽度(UI06:示例侧栏 216px) */
+ menuOpenWidth: 216,
/** 菜单是否展开 */
menuOpen: true,
/** 双菜单是否显示文本 */
@@ -52,7 +52,7 @@ export const SETTING_DEFAULT_CONFIG = {
/** 是否显示面包屑 */
showCrumbs: true,
/** 是否显示工作台标签 */
- showWorkTab: true,
+ showWorkTab: false,
/** 是否显示语言切换 */
showLanguage: true,
/** 是否显示进度条 */
@@ -82,7 +82,7 @@ export const SETTING_DEFAULT_CONFIG = {
/** 自定义圆角 */
customRadius: '0.75',
/** 容器宽度 */
- containerWidth: ContainerWidthEnum.FULL,
+ containerWidth: ContainerWidthEnum.WIDE,
/** 节日日期 */
festivalDate: ''
}
diff --git a/apps/admin/src/enums/appEnum.ts b/apps/admin/src/enums/appEnum.ts
index a39c278..c9520f8 100644
--- a/apps/admin/src/enums/appEnum.ts
+++ b/apps/admin/src/enums/appEnum.ts
@@ -77,5 +77,7 @@ export enum ContainerWidthEnum {
/** 全屏宽度 */
FULL = '100%',
/** 固定宽度 */
- BOXED = '1200px'
+ BOXED = '1200px',
+ /** 宽屏固定(UI06:示例内容最大宽 1660px) */
+ WIDE = '1660px'
}
diff --git a/apps/admin/src/locales/langs/en.json b/apps/admin/src/locales/langs/en.json
index 93fc847..68f84d5 100644
--- a/apps/admin/src/locales/langs/en.json
+++ b/apps/admin/src/locales/langs/en.json
@@ -241,6 +241,10 @@
"title": "Albums",
"manage": "Album Management",
"detail": "Album Detail"
+ },
+ "group": {
+ "workspace": "Workspace",
+ "governance": "Governance"
}
},
"table": {
@@ -837,4 +841,4 @@
"DOWNLOAD_DISABLED": "Downloads are not enabled for this album",
"SYNC_AUTH_FAILED": "Sync service authentication failed; check service configuration"
}
-}
+}
\ No newline at end of file
diff --git a/apps/admin/src/locales/langs/zh.json b/apps/admin/src/locales/langs/zh.json
index 68ca058..eae1b1e 100644
--- a/apps/admin/src/locales/langs/zh.json
+++ b/apps/admin/src/locales/langs/zh.json
@@ -241,6 +241,10 @@
"title": "相册管理",
"manage": "相册管理",
"detail": "相册详情"
+ },
+ "group": {
+ "workspace": "工作空间",
+ "governance": "组织与治理"
}
},
"table": {
@@ -837,4 +841,4 @@
"DOWNLOAD_DISABLED": "该相册未开放下载",
"SYNC_AUTH_FAILED": "同步服务鉴权失败,请检查服务配置"
}
-}
+}
\ No newline at end of file
diff --git a/apps/admin/src/router/modules/albums.ts b/apps/admin/src/router/modules/albums.ts
index 1370eb5..29211b2 100644
--- a/apps/admin/src/router/modules/albums.ts
+++ b/apps/admin/src/router/modules/albums.ts
@@ -21,7 +21,8 @@ export const albumsRoutes: AppRouteRecord = {
title: 'menus.albums.manage',
icon: 'ri:gallery-upload-line',
keepAlive: false,
- fixedTab: true
+ fixedTab: true,
+ menuGroup: 'workspace'
}
},
{
diff --git a/apps/admin/src/router/modules/system.ts b/apps/admin/src/router/modules/system.ts
index fee661d..9aad87d 100644
--- a/apps/admin/src/router/modules/system.ts
+++ b/apps/admin/src/router/modules/system.ts
@@ -20,7 +20,8 @@ export const systemRoutes: AppRouteRecord = {
meta: {
title: 'menus.system.users',
icon: 'ri:user-settings-line',
- keepAlive: false
+ keepAlive: false,
+ menuGroup: 'governance'
}
},
{
@@ -30,7 +31,8 @@ export const systemRoutes: AppRouteRecord = {
meta: {
title: 'menus.system.userSync',
icon: 'ri:refresh-line',
- keepAlive: false
+ keepAlive: false,
+ menuGroup: 'governance'
}
},
{
@@ -40,7 +42,8 @@ export const systemRoutes: AppRouteRecord = {
meta: {
title: 'menus.system.usage',
icon: 'ri:pie-chart-line',
- keepAlive: false
+ keepAlive: false,
+ menuGroup: 'governance'
}
},
{
@@ -50,7 +53,8 @@ export const systemRoutes: AppRouteRecord = {
meta: {
title: 'menus.system.embedSlots',
icon: 'ri:picture-carousel-line',
- keepAlive: false
+ keepAlive: false,
+ menuGroup: 'workspace'
}
}
]
diff --git a/apps/admin/src/types/router/index.ts b/apps/admin/src/types/router/index.ts
index d9ef012..4f0d848 100644
--- a/apps/admin/src/types/router/index.ts
+++ b/apps/admin/src/types/router/index.ts
@@ -66,6 +66,8 @@ export interface RouteMeta extends Record {
authMark?: string
/** 父级路径 */
parentPath?: string
+ /** 侧栏菜单分组(UI06:展示层分组,路由与权限不变) */
+ menuGroup?: 'workspace' | 'governance'
}
/**
diff --git a/apps/admin/src/views/auth/login/style.css b/apps/admin/src/views/auth/login/style.css
index bd8c3a9..d9c01bf 100644
--- a/apps/admin/src/views/auth/login/style.css
+++ b/apps/admin/src/views/auth/login/style.css
@@ -1,8 +1,8 @@
@reference '@styles/core/tailwind.css';
-/* 授权页右侧区域 */
+/* 授权页右侧区域(UI06:对齐示例 01——右栏居中 350px 表单,标题 29px) */
.auth-right-wrap {
- @apply absolute inset-0 w-[440px] h-[650px] py-[5px] m-auto overflow-hidden
+ @apply absolute inset-0 w-[350px] h-[560px] py-[5px] m-auto overflow-hidden
max-sm:px-7 max-sm:w-full
animate-[slideInRight_0.6s_cubic-bezier(0.25,0.46,0.45,0.94)_forwards]
max-md:animate-none;
@@ -12,15 +12,15 @@
}
.title {
- @apply text-g-900 text-4xl font-semibold max-md:text-3xl max-sm:pt-10;
+ @apply text-g-900 text-[29px] leading-[1.35] font-bold tracking-[-0.5px] max-md:text-[26px] max-sm:pt-10;
}
.sub-title {
- @apply mt-[10px] text-g-600 text-sm;
+ @apply mt-[10px] text-g-600 text-[12px];
}
.custom-height {
- @apply !h-[40px];
+ @apply !h-[38px];
}
}