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>

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: (

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

apps/admin/src/assets/styles/index.scss

@@ -21,3 +21,6 @@
 
 // 主题切换圆形扩散动画
 @use './core/theme-animation.scss';
+
+// UI06 全局视觉对齐层（admin-preview 示例基准，最后引入以覆盖默认）
+@use './custom/ui06.scss';

apps/admin/src/components/core/layouts/art-header-bar/index.vue

@@ -7,14 +7,14 @@
     ]"
   >
     <div
-      class="relative box-border flex-b h-15 leading-15 select-none"
+      class="relative box-border flex-b h-16 leading-16 select-none"
       :class="[
         tabStyle === 'tab-card' || tabStyle === 'tab-google'
           ? 'border-b border-[var(--art-card-border)]'
           : ''
       ]"
     >
-      <div class="flex-c flex-1 min-w-0 leading-15" style="display: flex">
+      <div class="flex-c flex-1 min-w-0 leading-16" style="display: flex">
         <!-- 系统信息  -->
         <div class="flex-c c-p" @click="toHome" v-if="isTopMenu">
           <ArtLogo class="pl-4.5" />

apps/admin/src/components/core/layouts/art-menus/art-sidebar-menu/index.vue

@@ -99,7 +99,34 @@
           :show-timeout="50"
           :hide-timeout="50"
         >
+          <!-- UI06：普通左侧菜单按 meta.menuGroup 展平分组（示例侧栏结构） -->
+          <template v-if="isGroupedMode">
+            <ElMenuItem v-for="item in flatMenuItems.ungrouped" :key="item.path" :index="item.path">
+              <div class="menu-icon flex-cc">
+                <ArtSvgIcon
+                  :icon="item.meta.icon"
+                  :color="getMenuTheme.iconColor"
+                  :style="{ color: getMenuTheme.iconColor }"
+                />
+              </div>
+              <template #title>{{ $t(item.meta.title) }}</template>
+            </ElMenuItem>
+            <template v-for="group in flatMenuItems.groups" :key="group.label">
+              <li v-if="menuOpen" class="ui06-menu-group-label">{{ $t(group.label) }}</li>
+              <ElMenuItem v-for="item in group.items" :key="item.path" :index="item.path">
+                <div class="menu-icon flex-cc">
+                  <ArtSvgIcon
+                    :icon="item.meta.icon"
+                    :color="getMenuTheme.iconColor"
+                    :style="{ color: getMenuTheme.iconColor }"
+                  />
+                </div>
+                <template #title>{{ $t(item.meta.title) }}</template>
+              </ElMenuItem>
+            </template>
+          </template>
           <SidebarSubmenu
+            v-else
             :list="menuList"
             :isMobile="isMobileMode"
             :theme="getMenuTheme"
@@ -133,6 +160,7 @@
   import { useSettingStore } from '@/store/modules/setting'
   import { MenuTypeEnum, MenuWidth } from '@/enums/appEnum'
   import { useMenuStore } from '@/store/modules/menu'
+  import type { AppRouteRecord } from '@/types/router'
   import { isIframe } from '@/utils/navigation'
   import { handleMenuJump } from '@/utils/navigation'
   import SidebarSubmenu from './widget/SidebarSubmenu.vue'
@@ -171,6 +199,42 @@
   )
   const isDualMenu = computed(() => 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 @@
 <style lang="scss">
   @use './theme';
 
+  /* UI06：菜单分组标签（示例 .group-label） */
+  .el-menu .ui06-menu-group-label {
+    padding: 0;
+    margin: 26px 13px 10px;
+    font-size: 10px;
+    letter-spacing: 1.5px;
+    color: #9ba8ba;
+    list-style: none;
+    user-select: none;
+
+    &:first-child {
+      margin-top: 14px;
+    }
+  }
+
   .layout-sidebar {
     // 展开的宽度
     .el-menu:not(.el-menu--collapse) {

apps/admin/src/components/core/views/login/LoginLeftView.vue

@@ -1,602 +1,122 @@
-<!-- 登录、注册、忘记密码左侧背景 -->
+<!-- 登录、注册、忘记密码左侧视觉（UI06：对齐 admin-preview 示例 01——摄影底 + 深蓝叠层 + 品牌与大标题） -->
 <template>
   <div class="login-left-view">
-    <div class="logo">
+    <!-- 摄影底层（占位素材：概念图裁片，待正式品牌素材替换） -->
-      <ArtLogo class="icon" size="46" />
+    <img class="visual-photo" :src="loginVisual" alt="" draggable="false" />
-      <h1 class="title">{{ AppConfig.systemInfo.name }}</h1>
+    <div class="visual-shade" />
+
+    <!-- 顶部品牌 -->
+    <div class="brand">
+      <ArtLogo class="icon" size="29" />
+      <span class="name">{{ AppConfig.systemInfo.name }}</span>
     </div>
 
-    <div class="left-img">
+    <!-- 底部大标题文案 -->
-      <ThemeSvg :src="loginIcon" size="100%" />
+    <div class="copy">
-    </div>
+      <h1>{{ $t('login.leftView.title') }}</h1>
-
+      <p>{{ $t('login.leftView.subTitle') }}</p>
-    <div class="text-wrap">
-      <h1> {{ $t('login.leftView.title') }} </h1>
-      <p> {{ $t('login.leftView.subTitle') }} </p>
-    </div>
-
-    <!-- 几何装饰元素 -->
-    <div class="geometric-decorations">
-      <!-- 基础几何形状 -->
-      <div class="geo-element circle-outline animate-fade-in-up" style="animation-delay: 0s"></div>
-      <div
-        class="geo-element square-rotated animate-fade-in-left"
-        style="animation-delay: 0s"
-      ></div>
-      <div class="geo-element circle-small animate-fade-in-up" style="animation-delay: 0.3s"></div>
-
-      <div
-        class="geo-element square-bottom-right animate-fade-in-right"
-        style="animation-delay: 0s"
-      ></div>
-
-      <!-- 背景泡泡 -->
-      <div class="geo-element bg-bubble animate-scale-in" style="animation-delay: 0.5"></div>
-
-      <!-- 太阳/月亮 -->
-      <div
-        class="geo-element circle-top-right animate-fade-in-down"
-        style="animation-delay: 0.5"
-        @click="themeAnimation"
-      ></div>
-
-      <!-- 装饰点 -->
-      <div class="geo-element dot dot-top-left animate-bounce-in" style="animation-delay: 0s"></div>
-      <div
-        class="geo-element dot dot-top-right animate-bounce-in"
-        style="animation-delay: 0s"
-      ></div>
-      <div
-        class="geo-element dot dot-center-right animate-bounce-in"
-        style="animation-delay: 0s"
-      ></div>
-
-      <!-- 叠加方块组 -->
-      <div class="squares-group">
-        <i
-          class="geo-element square square-blue animate-fade-in-left-rotated-blue"
-          style="animation-delay: 0.2s"
-        ></i>
-        <i
-          class="geo-element square square-pink animate-fade-in-left-rotated-pink"
-          style="animation-delay: 0.4s"
-        ></i>
-        <i
-          class="geo-element square square-purple animate-fade-in-left-no-rotation"
-          style="animation-delay: 0.6s"
-        ></i>
-      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
   import AppConfig from '@/config'
-  import loginIcon from '@imgs/svg/login_icon.svg'
+  import loginVisual from '@imgs/ui06-login-visual.jpg'
-  import { themeAnimation } from '@/utils/ui/animation'
 
   // 定义 props
   defineProps<{
-    hideContent?: boolean // 是否隐藏内容，只显示 logo
+    hideContent?: boolean // 是否隐藏内容，只显示 logo（沿用原组件契约）
   }>()
 </script>
 
 <style lang="scss" scoped>
-  // 颜色变量定义
-  $primary-light-7: var(--el-color-primary-light-7);
-  $primary-light-8: var(--el-color-primary-light-8);
-  $primary-light-9: var(--el-color-primary-light-9);
-  $primary-base: var(--el-color-primary);
-  $main-bg: var(--default-box-color);
-
-  // 混合颜色函数
-  $bg-mix-light-9: color-mix(in srgb, $primary-light-9 100%, $main-bg);
-  $bg-mix-light-8: color-mix(in srgb, $primary-light-8 80%, $main-bg);
-  $bg-mix-light-7: color-mix(in srgb, $primary-light-7 80%, $main-bg);
-
   .login-left-view {
     position: relative;
     box-sizing: border-box;
-    width: 65vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 55vw;
     height: 100%;
-    padding: 15px;
+    padding: 50px;
     overflow: hidden;
-    background-color: $bg-mix-light-9;
+    background: #12233e; /* 示例 login-visual 底色 */
 
-    .logo {
+    /* 摄影层：cover 铺满 + 40% 不透明度（示例 .art opacity .4） */
+    .visual-photo {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      opacity: 0.4;
+      pointer-events: none;
+    }
+
+    /* 底部渐变（示例 :after linear-gradient(#13264110, #0d1c35e8)） */
+    .visual-shade {
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(#13264110, #0d1c35e8);
+      pointer-events: none;
+    }
+
+    /* 品牌（白字，位于摄影层之上） */
+    .brand {
       position: relative;
-      z-index: 100;
+      z-index: 2;
       display: flex;
+      gap: 9px;
       align-items: center;
+      color: #ffffff;
 
-      .title {
+      .name {
-        margin-left: 10px;
+        font-size: 22px;
-        font-size: 20px;
+        font-weight: 750;
-        font-weight: 400;
+        letter-spacing: -0.8px;
       }
     }
 
-    .left-img {
+    /* 大标题文案（46px 白字 + 13px 副文，示例 login-copy） */
-      position: absolute;
+    .copy {
-      inset: 0 0 10.5%;
+      position: relative;
-      z-index: 10;
+      z-index: 2;
-      width: 40%;
+      max-width: 480px;
-      margin: auto;
-      animation: slideInLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
-    }
-
-    .text-wrap {
-      position: absolute;
-      bottom: 80px;
-      width: 100%;
-      text-align: center;
-      animation: slideInLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
 
       h1 {
-        font-size: 24px;
+        font-size: 46px;
-        font-weight: 400;
+        font-weight: 700;
-        color: var(--art-gray-900) !important;
+        line-height: 1.2;
+        color: #ffffff;
       }
 
       p {
-        margin-top: 10px;
+        max-width: 400px;
-        font-size: 14px;
+        margin-top: 20px;
-        color: var(--art-gray-600) !important;
+        font-size: 13px;
+        color: #bfd0e5;
       }
     }
 
-    .geometric-decorations {
+    /* 暗色主题：底色一致，无需额外处理 */
-      .geo-element {
+    &.dark {
-        position: absolute;
+      background: #0d1c35;
-        opacity: 0;
-        animation-fill-mode: forwards;
-        animation-duration: 0.8s;
-        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-      }
-
-      // 动画 mixin
-      @mixin fadeAnimation($direction: '', $rotation: 0deg) {
-        from {
-          opacity: 0;
-
-          @if $direction == 'up' {
-            transform: translateY(30px) rotate($rotation);
-          } @else if $direction == 'down' {
-            transform: translateY(-30px) rotate($rotation);
-          } @else if $direction == 'left' {
-            transform: translateX(-30px) rotate($rotation);
-          } @else if $direction == 'right' {
-            transform: translateX(30px) rotate($rotation);
-          }
-        }
-
-        to {
-          opacity: 1;
-
-          @if $direction == 'up' or $direction == 'down' {
-            transform: translateY(0) rotate($rotation);
-          } @else {
-            transform: translateX(0) rotate($rotation);
-          }
-        }
-      }
-
-      // 动画定义
-      @keyframes fadeInUp {
-        @include fadeAnimation('up');
-      }
-
-      @keyframes fadeInDown {
-        @include fadeAnimation('down');
-      }
-
-      @keyframes fadeInLeft {
-        @include fadeAnimation('left');
-      }
-
-      @keyframes fadeInLeftRotated {
-        @include fadeAnimation('left', -25deg);
-      }
-
-      @keyframes fadeInRight {
-        @include fadeAnimation('right');
-      }
-
-      @keyframes fadeInRightRotated {
-        @include fadeAnimation('right', 45deg);
-      }
-
-      @keyframes fadeInLeftRotatedBlue {
-        @include fadeAnimation('left', -10deg);
-      }
-
-      @keyframes fadeInLeftRotatedPink {
-        @include fadeAnimation('left', 10deg);
-      }
-
-      @keyframes fadeInLeftNoRotation {
-        @include fadeAnimation('left');
-      }
-
-      @keyframes scaleIn {
-        from {
-          opacity: 0;
-          transform: scale(0.8);
-        }
-
-        to {
-          opacity: 1;
-          transform: scale(1);
-        }
-      }
-
-      @keyframes bounceIn {
-        0% {
-          opacity: 0;
-          transform: scale(0.3);
-        }
-
-        50% {
-          opacity: 1;
-          transform: scale(1.05);
-        }
-
-        70% {
-          transform: scale(0.9);
-        }
-
-        100% {
-          opacity: 1;
-          transform: scale(1);
-        }
-      }
-
-      @keyframes lineGrow {
-        from {
-          opacity: 0;
-        }
-
-        to {
-          opacity: 1;
-        }
-      }
-
-      @keyframes slideInLeft {
-        from {
-          opacity: 0;
-          transform: translateX(-30px);
-        }
-
-        to {
-          opacity: 1;
-          transform: translateX(0);
-        }
-      }
-
-      // 动画类
-      .animate-fade-in-up {
-        animation-name: fadeInUp;
-      }
-
-      .animate-fade-in-down {
-        animation-name: fadeInDown;
-      }
-
-      .animate-fade-in-left {
-        animation-name: fadeInLeft;
-      }
-
-      .animate-fade-in-right {
-        animation-name: fadeInRight;
-      }
-
-      .animate-scale-in {
-        animation-name: scaleIn;
-        animation-duration: 1.2s;
-      }
-
-      .animate-bounce-in {
-        animation-name: bounceIn;
-        animation-duration: 0.6s;
-      }
-
-      .animate-fade-in-left-rotated-blue {
-        animation-name: fadeInLeftRotatedBlue;
-      }
-
-      .animate-fade-in-left-rotated-pink {
-        animation-name: fadeInLeftRotatedPink;
-      }
-
-      .animate-fade-in-left-no-rotation {
-        animation-name: fadeInLeftNoRotation;
-      }
-
-      // 基础几何形状
-      .circle-outline {
-        top: 10%;
-        left: 25%;
-        width: 42px;
-        height: 42px;
-        border: 2px solid $primary-light-8;
-        border-radius: 50%;
-      }
-
-      .square-rotated {
-        top: 50%;
-        left: 16%;
-        width: 60px;
-        height: 60px;
-        background-color: $bg-mix-light-8;
-
-        &.animate-fade-in-left {
-          animation-name: fadeInLeftRotated;
-        }
-      }
-
-      .circle-small {
-        bottom: 26%;
-        left: 30%;
-        width: 18px;
-        height: 18px;
-        background-color: $primary-light-8;
-        border-radius: 50%;
-      }
-
-      // 太阳/月亮效果
-      .circle-top-right {
-        top: 3%;
-        right: 3%;
-        z-index: 100;
-        width: 50px;
-        height: 50px;
-        cursor: pointer;
-        background: $bg-mix-light-7;
-        border-radius: 50%;
-        transition: all 0.3s;
-
-        &::after {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          width: 100%;
-          height: 100%;
-          content: '';
-          background: linear-gradient(to right, #fcbb04, #fffc00);
-          border-radius: 50%;
-          opacity: 0;
-          transition: all 0.5s;
-          transform: translate(-50%, -50%);
-        }
-
-        &:hover {
-          box-shadow: 0 0 36px #fffc00;
-
-          &::after {
-            opacity: 1;
-          }
-        }
-      }
-
-      .square-bottom-right {
-        right: 10%;
-        bottom: 10%;
-        width: 50px;
-        height: 50px;
-        background-color: $primary-light-8;
-
-        &.animate-fade-in-right {
-          animation-name: fadeInRightRotated;
-        }
-      }
-
-      // 背景泡泡
-      .bg-bubble {
-        top: -120px;
-        right: -120px;
-        width: 360px;
-        height: 360px;
-        background-color: $bg-mix-light-8;
-        border-radius: 50%;
-      }
-
-      // 装饰点
-      .dot {
-        width: 14px;
-        height: 14px;
-        background-color: $primary-light-7;
-        border-radius: 50%;
-
-        &.dot-top-left {
-          top: 140px;
-          left: 100px;
-        }
-
-        &.dot-top-right {
-          top: 140px;
-          right: 120px;
-        }
-
-        &.dot-center-right {
-          top: 46%;
-          right: 22%;
-          background-color: $primary-light-8;
-        }
-      }
-
-      // 叠加方块组
-      .squares-group {
-        position: absolute;
-        bottom: 18px;
-        left: 20px;
-        width: 140px;
-        height: 140px;
-        pointer-events: none;
-
-        .square {
-          position: absolute;
-          display: block;
-          border-radius: 8px;
-          box-shadow: 0 8px 24px rgb(64 87 167 / 12%);
-
-          &.square-blue {
-            top: 12px;
-            left: 30px;
-            z-index: 2;
-            width: 50px;
-            height: 50px;
-            background-color: rgb(from $primary-base r g b / 30%);
-          }
-
-          &.square-pink {
-            top: 30px;
-            left: 48px;
-            z-index: 1;
-            width: 70px;
-            height: 70px;
-            background-color: rgb(from $primary-base r g b / 15%);
-          }
-
-          &.square-purple {
-            top: 66px;
-            left: 86px;
-            z-index: 3;
-            width: 32px;
-            height: 32px;
-            background-color: rgb(from $primary-base r g b / 45%);
-          }
-        }
-
-        // 装饰线条
-        &::after {
-          position: absolute;
-          top: 86px;
-          left: 72px;
-          width: 80px;
-          height: 1px;
-          content: '';
-          background: linear-gradient(90deg, var(--el-color-primary-light-6), transparent);
-          opacity: 0;
-          transform: rotate(50deg);
-          animation: lineGrow 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
-          animation-delay: 1.2s;
-        }
-      }
-    }
-
-    @media only screen and (width <= 1600px) {
-      width: 60vw;
-
-      .text-wrap {
-        bottom: 40px;
-      }
     }
 
     @media only screen and (width <= 1180px) {
       width: auto;
       height: auto;
       padding: 0;
-      // 隐藏背景和其他内容，只保留 logo
-      background: transparent;
 
-      .left-img,
+      .visual-photo,
-      .text-wrap,
+      .visual-shade,
-      .geometric-decorations {
+      .copy {
         display: none;
       }
 
-      .logo {
+      .brand {
         display: none;
       }
     }
   }
-
-  // 暗色主题
-  .dark .login-left-view {
-    background-color: color-mix(in srgb, $primary-light-9 60%, #070707);
-
-    @media only screen and (width <= 1180px) {
-      background: transparent;
-    }
-
-    .geometric-decorations {
-      // 月亮效果
-      .circle-top-right {
-        background-color: $bg-mix-light-8;
-        box-shadow: 0 0 25px #333 inset;
-        transition: all 0.3s ease-in-out 0.1s;
-        rotate: -48deg;
-
-        &::before {
-          position: absolute;
-          top: 0;
-          left: 15px;
-          width: 50px;
-          height: 50px;
-          content: '';
-          background-color: $bg-mix-light-9;
-          border-radius: 50%;
-          transition: all 0.3s ease-in-out;
-        }
-
-        &:hover {
-          background-color: transparent;
-          box-shadow: 0 40px 25px #ddd inset;
-
-          &::before {
-            left: 18px;
-          }
-
-          &::after {
-            opacity: 0;
-          }
-        }
-      }
-
-      .bg-bubble {
-        background-color: $bg-mix-light-9;
-      }
-
-      // 其他元素颜色调整
-      .square-rotated {
-        background-color: $bg-mix-light-9;
-      }
-
-      .circle-small,
-      .dot {
-        background-color: $primary-light-8;
-      }
-
-      .square-bottom-right {
-        background-color: $primary-light-9;
-      }
-
-      .dot.dot-top-right {
-        background-color: $primary-light-8;
-      }
-    }
-
-    // 方块组暗色调整
-    .squares-group {
-      .square {
-        box-shadow: none;
-
-        &.square-blue {
-          background-color: rgb(from $primary-base r g b / 18%);
-        }
-
-        &.square-pink {
-          background-color: rgb(from $primary-base r g b / 10%);
-        }
-
-        &.square-purple {
-          background-color: rgb(from $primary-base r g b / 20%);
-        }
-      }
-
-      &::after {
-        background: linear-gradient(90deg, $primary-light-8, transparent);
-      }
-    }
-  }
 </style>

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',

apps/admin/src/config/setting.ts

@@ -29,8 +29,8 @@ import { SystemThemeEnum, MenuThemeEnum, MenuTypeEnum, ContainerWidthEnum } from
 export const SETTING_DEFAULT_CONFIG = {
   /** 菜单类型 */
   menuType: MenuTypeEnum.LEFT,
-  /** 菜单展开宽度 */
+  /** 菜单展开宽度（UI06：示例侧栏 216px） */
-  menuOpenWidth: 230,
+  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: ''
 }

apps/admin/src/enums/appEnum.ts

@@ -77,5 +77,7 @@ export enum ContainerWidthEnum {
   /** 全屏宽度 */
   FULL = '100%',
   /** 固定宽度 */
-  BOXED = '1200px'
+  BOXED = '1200px',
+  /** 宽屏固定（UI06：示例内容最大宽 1660px） */
+  WIDE = '1660px'
 }

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

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": "同步服务鉴权失败，请检查服务配置"
   }
-}
+}

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'
       }
     },
     {

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'
       }
     }
   ]

apps/admin/src/types/router/index.ts

@@ -66,6 +66,8 @@ export interface RouteMeta extends Record<string | number | symbol, unknown> {
   authMark?: string
   /** 父级路径 */
   parentPath?: string
+  /** 侧栏菜单分组（UI06：展示层分组，路由与权限不变） */
+  menuGroup?: 'workspace' | 'governance'
 }
 
 /**

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