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" > + + 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]; } }