docs: 更新视觉与权限设计走查记录

补充本期用户与权限、登录重构、看板优化等改动的视觉与交互走查记录。
refactor: Dashboard 看板布局与图表优化
2026-07-14 16:11:07 +08:00 · 2026-07-14 16:10:59 +08:00 · 2026-07-14 16:10:55 +08:00 · 2026-07-14 16:10:50 +08:00
15 changed files with 1080 additions and 245 deletions
--- a/design-qa.md
+++ b/design-qa.md
@@ -377,3 +377,53 @@ Fixes:
 No actionable P0/P1/P2 differences remain. The desktop capture API does not retain the transient popup layer in screenshots, so the open-menu labels were additionally verified through the accessibility tree; exact popup shadow rendering remains a non-blocking P3 capture gap.

 final result: passed
+
+---
+
+# Login Page Responsive Design QA
+
+## Evidence
+
+- Source visual truth: `/Users/caoxiaozhu/.codex/generated_images/019f5f3f-f7e1-7e41-9605-ea307d9f09e6/exec-d376c603-0c47-45ad-86fd-3e99c1a95ec7.png`
+- Implementation route: `http://localhost:6801/login`
+- Implementation screenshot: unavailable because the in-app browser runtime could not initialize in this session.
+- Intended desktop viewport: 1536 × 1024.
+- Intended laptop viewports: 1366 × 768 and 1280 × 720.
+- State: unauthenticated login page, default username and password populated.
+
+## Static and automated evidence
+
+- Added a 1440px width breakpoint that shifts the split from 58/42 to 55/45 and caps the form at 440px.
+- Added a short-screen breakpoint for heights up to 820px that reduces title, form, input, footer, and panel spacing without hiding the left visual.
+- Kept the single-column fallback at 900px and below.
+- `regression-login-layout.mjs`: passed.
+- `regression-default-dashboard.mjs`: passed.
+- `vue-tsc -b --noEmit`: passed.
+- Vite dev transform for `LoginView.vue`: HTTP 200.
+- Production build: blocked by the pre-existing missing route component `UserPermissionView.vue`, outside the login-page change.
+
+## Required fidelity surfaces
+
+- Fonts and typography: code uses the existing product font stack with laptop-specific display-size reductions; visual comparison remains unavailable.
+- Spacing and layout rhythm: dedicated width and height media queries are present; rendered measurements remain unavailable.
+- Colors and visual tokens: existing indigo tokens and the selected dark-purple visual asset are preserved.
+- Image quality and asset fidelity: the generated `login-hero-flow.png` is used directly; the official `logo.png` is reused for the brand lockup.
+- Copy and content: platform title, supporting copy, form labels, actions, and footer match the selected design.
+
+## Findings
+
+- [P2] Browser-rendered laptop comparison unavailable
+  Location: login page at 1366 × 768 and 1280 × 720.
+  Evidence: the in-app browser runtime failed during initialization, so no implementation screenshot or side-by-side comparison could be captured.
+  Impact: static checks cannot prove that all visible spacing and crop details match the selected design at laptop sizes.
+  Fix: capture both laptop viewports in a working in-app browser session, compare them with the source, and resolve any remaining P0/P1/P2 differences.
+
+## Comparison history
+
+### Iteration 1 — blocked
+
+- User reported that the initial implementation was optimized for large displays and did not compose well on laptop screens.
+- Added explicit laptop-width and short-screen layout rules and passed targeted regression/type checks.
+- Post-fix visual evidence remains unavailable because browser capture is blocked.
+
+final result: blocked
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,7 @@
    "preview": "vite preview",
    "type-check": "vue-tsc -b --noEmit",
    "test": "node scripts/run-regressions.mjs",
+    "test:login-layout": "node scripts/regression-login-layout.mjs",
    "test:default-dashboard": "node scripts/regression-default-dashboard.mjs",
    "test:dashboard": "node scripts/regression-dashboard.mjs",
    "test:data-process-list": "node scripts/regression-data-process-list.mjs",
@@ -21,6 +22,7 @@
    "test:eval-detail": "node scripts/regression-eval-detail.mjs",
    "test:model-manage": "node scripts/regression-model-manage.mjs",
    "test:hardware": "node scripts/regression-hardware-dashboard.mjs",
+    "test:user-settings": "node scripts/regression-user-settings.mjs",
    "test:training-log-layout": "node scripts/regression-training-log-layout.mjs",
    "test:fine-tune-create": "node scripts/regression-fine-tune-create-ui.mjs",
    "test:page-surface": "node scripts/regression-page-surface.mjs"
--- a/frontend/scripts/regression-dashboard.mjs
+++ b/frontend/scripts/regression-dashboard.mjs
@@ -19,6 +19,8 @@ assert.match(

 assert.match(echartsSource, /import\s*\{[^}]*BarChart[^}]*\}\s*from\s*['"]echarts\/charts['"]/, 'ECharts 未注册 BarChart')
 assert.match(echartsSource, /use\(\[[\s\S]*?BarChart[\s\S]*?\]\)/, 'BarChart 未加入 ECharts 按需注册列表')
+assert.match(echartsSource, /import\s*\{[^}]*PieChart[^}]*\}\s*from\s*['"]echarts\/charts['"]/, 'ECharts 未注册 PieChart')
+assert.match(echartsSource, /use\(\[[\s\S]*?PieChart[\s\S]*?\]\)/, 'PieChart 未加入 ECharts 按需注册列表')

 for (const copy of [
  '平台运行状态',
@@ -39,16 +41,24 @@ assert.match(dashboardSource, /router\.push\(['"]\/fine-tune['"]\)/, '查看全
 assert.match(dashboardSource, /router\.push\(`\/training-log\/\$\{task\.id\}`\)/, '训练任务详情应进入训练日志页')
 assert.doesNotMatch(dashboardSource, /class=["']dashboard-heading["']/, '服务看板不应重复展示页面标题栏')
 assert.doesNotMatch(dashboardSource, /查看告警/, '服务看板不应保留冗余的顶部告警按钮')
-assert.match(dashboardSource, /\.dashboard-view\s*\{[\s\S]*?gap:\s*10px;/, '服务看板应使用紧凑的区块间距')
-assert.match(dashboardSource, /\.dashboard-middle\s*\{[\s\S]*?flex:\s*1 1 auto;[\s\S]*?min-height:\s*0;/, '中间区域应弹性占满剩余高度')
+assert.match(dashboardSource, /\.dashboard-view\s*\{[\s\S]*?gap:\s*16px;/, '服务看板区块间距应保持舒展')
+assert.match(dashboardSource, /\.dashboard-view\s*\{[\s\S]*?min-height:\s*100%;/, '服务看板应至少填满页面可用高度')
+assert.match(dashboardSource, /\.dashboard-middle\s*\{[\s\S]*?flex:\s*0 0 auto;[\s\S]*?min-height:\s*0;/, '中间区域不应因新增统计卡片被压缩')
 assert.match(dashboardSource, /grid-template-columns:\s*minmax\(0,\s*1\.9fr\)\s*minmax\(300px,\s*0\.82fr\);/, '服务状态列应收窄，为训练图表释放更多宽度')
-assert.match(dashboardSource, /\.training-chart\s*\{[\s\S]*?flex:\s*1 1 auto;[\s\S]*?height:\s*auto;[\s\S]*?min-height:\s*230px;/, '训练统计图应随可用空间自动拉伸')
-assert.match(dashboardSource, /@media\s*\(max-height:\s*900px\)[\s\S]*?\.training-chart\s*\{[\s\S]*?min-height:\s*200px;/, '较矮桌面视口应保留图表最小可读高度')
+assert.match(dashboardSource, /\.training-chart\s*\{[\s\S]*?height:\s*300px;[\s\S]*?min-height:\s*300px;/, '训练统计图应保持舒展、稳定的展示高度')
 assert.match(dashboardSource, /\.service-table\s*\{[\s\S]*?grid-template-rows:[^;]*repeat\(4,\s*minmax\(48px,\s*1fr\)\)/, '服务状态行应随中间区域同步拉伸')
 assert.match(dashboardSource, /\.tasks-heading\s*\{[\s\S]*?min-height:\s*32px;[\s\S]*?padding:\s*0 14px 10px;/, '训练任务标题区应适当加高')
 assert.match(dashboardSource, /\.tasks-table\s*\{[\s\S]*?th,\s*td\s*\{[\s\S]*?height:\s*42px;[\s\S]*?th\s*\{[\s\S]*?height:\s*36px;/, '训练任务表格行应适当加高')
 assert.match(dashboardSource, /@media\s*\(max-height:\s*900px\)[\s\S]*?\.tasks-heading\s*\{[\s\S]*?min-height:\s*28px;[\s\S]*?padding:\s*0 12px 8px;[\s\S]*?\.tasks-table\s*\{[\s\S]*?height:\s*36px;[\s\S]*?th\s*\{[\s\S]*?height:\s*32px;/, '低高度桌面视口也应提高训练任务占比')
-assert.match(mainLayoutSource, /\.layout-content:has\(\.dashboard-view\)[\s\S]*?overflow-y:\s*hidden;/, '服务看板容器应避免产生页面纵向滚动条')
-assert.match(mainLayoutSource, /\.page-canvas\s*\{[\s\S]*?flex:\s*1 1 auto;[\s\S]*?overflow:\s*hidden;/, '服务看板页面画布应约束在可用视口内')
+assert.match(dashboardSource, /class=["']user-stats-row["'][\s\S]*?用户操作分布[\s\S]*?登录时长排行[\s\S]*?最近登录用户/, '服务看板应展示三块用户统计卡片')
+assert.match(dashboardSource, /class=["']duration-chart["'][\s\S]*?loginDurationChartOption/, '登录时长应使用 ECharts 图表展示')
+assert.match(dashboardSource, /const loginDurationChartOption[\s\S]*?type:\s*['"]bar['"][\s\S]*?formatter:\s*['"]\{c\} 小时['"]/, '登录时长应以横向柱状图展示具体小时数')
+assert.match(dashboardSource, /const operationChartOption[\s\S]*?position:\s*['"]outside['"][\s\S]*?labelLine:\s*\{[\s\S]*?show:\s*true/, '饼图应以外侧引导线标注操作名称')
+assert.match(dashboardSource, /const loginDurationChartOption[\s\S]*?grid:\s*\{\s*top:\s*8,\s*right:\s*12,\s*bottom:\s*6,\s*left:\s*8,[\s\S]*?max:\s*Math\.ceil\(Math\.max[\s\S]*?position:\s*['"]insideRight['"]/, '登录时长图应收紧左右边距、按数据范围拉伸，并将数值置于柱内')
+assert.match(dashboardSource, /\.user-stats-row\s*\{[\s\S]*?repeat\(3,\s*minmax\(0,\s*1fr\)\)/, '宽屏用户统计卡片应保持三列')
+assert.match(dashboardSource, /@media\s*\(max-width:\s*1180px\)[\s\S]*?\.user-stats-row\s*\{[\s\S]*?repeat\(2,\s*minmax\(0,\s*1fr\)\)/, '中等宽度应将用户统计卡片降为两列')
+assert.match(dashboardSource, /@media\s*\(max-width:\s*720px\)[\s\S]*?\.user-stats-row\s*\{[\s\S]*?grid-template-columns:\s*1fr;/, '窄屏应将用户统计卡片降为单列')
+assert.match(mainLayoutSource, /\.layout-content:has\(\.dashboard-view\)[\s\S]*?overflow-y:\s*auto;/, '服务看板应允许在内容超出视口时纵向滚动')
+assert.match(mainLayoutSource, /\.page-canvas\s*\{[\s\S]*?flex:\s*1 0 auto;[\s\S]*?overflow:\s*visible;/, '服务看板画布应允许新增卡片完整显示')

 console.log('服务看板回归检查通过')
--- a/frontend/scripts/regression-page-surface.mjs
+++ b/frontend/scripts/regression-page-surface.mjs
@@ -76,6 +76,7 @@ const selfSurfaceRoutes = [
  'data-process',
  'data-process/create',
  'dataset',
+  'user-settings',
 ]
 for (const routePath of selfSurfaceRoutes) {
  const routeBlock = extractRouteBlock(routerSource, routePath)
--- a/frontend/src/api/modules/system.ts
+++ b/frontend/src/api/modules/system.ts
@@ -1,5 +1,12 @@
-import { get, post } from '../request'
-import type { SystemInfo, HealthMetrics } from '@/types'
+import { del, get, post, put } from '../request'
+import type {
+  CreateUserPayload,
+  HealthMetrics,
+  LoginResponse,
+  SystemInfo,
+  SystemUser,
+  UpdateUserAccessPayload,
+} from '@/types'

 /** 系统信息（CPU/内存/磁盘/GPU/网络/系统） */
 export const getSystemInfo = () => get<SystemInfo>('/system-info')
@@ -9,4 +16,21 @@ export const getHealth = () => get<HealthMetrics>('/health')

 /** 登录 */
 export const login = (username: string, password: string) =>
-  post('/login', { username, password })
+  post<LoginResponse>('/login', { username, password })
+
+/** 用户列表 */
+export const getUsers = () => get<SystemUser[]>('/users')
+
+/** 创建用户 */
+export const createUser = (payload: CreateUserPayload) =>
+  post<SystemUser>('/users', payload)
+
+/** 删除用户，currentUsername 用于防止删除当前登录账号 */
+export const deleteUser = (id: string, currentUsername: string) =>
+  del<{ deleted: string }>(`/users/${encodeURIComponent(id)}`, {
+    current_username: currentUsername,
+  })
+
+/** 更新用户角色、状态及页面权限 */
+export const updateUserAccess = (id: string, payload: UpdateUserAccessPayload) =>
+  put<SystemUser>(`/users/${encodeURIComponent(id)}`, payload)
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -2,6 +2,7 @@
 import { computed, nextTick, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
+import type { PermissionCode } from '@/types'

 const route = useRoute()
 const router = useRouter()
@@ -27,41 +28,65 @@ const activeMenu = computed(() => {
  return seg
 })

-const menuGroups = [
+interface MenuItem {
+  key: string
+  label: string
+  icon: string
+  to: string
+  permission: PermissionCode
+}
+
+interface MenuGroup {
+  title?: string
+  showTitle?: boolean
+  items: MenuItem[]
+}
+
+const menuGroups: MenuGroup[] = [
  {
    // 服务看板：独立入口，不显示分类小标题
    showTitle: false,
-    items: [{ key: 'dashboard', label: '服务看板', icon: 'fa-tachometer', to: '/dashboard' }],
+    items: [{ key: 'dashboard', label: '服务看板', icon: 'fa-tachometer', to: '/dashboard', permission: 'dashboard' }],
  },
  {
    title: '模型服务',
    items: [
-      { key: 'fine-tune', label: '模型训练', icon: 'fa-cogs', to: '/fine-tune' },
-      { key: 'model-eval', label: '模型评测', icon: 'fa-line-chart', to: '/model-eval' },
-      { key: 'model-inference', label: '模型推理', icon: 'fa-server', to: '/model-inference' },
-      { key: 'model-manage', label: '模型管理', icon: 'fa-cube', to: '/model-manage' },
+      { key: 'fine-tune', label: '模型训练', icon: 'fa-cogs', to: '/fine-tune', permission: 'fine-tune' },
+      { key: 'model-eval', label: '模型评测', icon: 'fa-line-chart', to: '/model-eval', permission: 'model-eval' },
+      { key: 'model-inference', label: '模型推理', icon: 'fa-server', to: '/model-inference', permission: 'model-inference' },
+      { key: 'model-manage', label: '模型管理', icon: 'fa-cube', to: '/model-manage', permission: 'model-manage' },
    ],
  },
  {
    title: '数据治理',
    items: [
-      { key: 'dataset', label: '数据集管理', icon: 'fa-file-text', to: '/dataset' },
-      { key: 'data-process', label: '数据处理', icon: 'fa-filter', to: '/data-process' },
+      { key: 'dataset', label: '数据集管理', icon: 'fa-file-text', to: '/dataset', permission: 'dataset' },
+      { key: 'data-process', label: '数据处理', icon: 'fa-filter', to: '/data-process', permission: 'data-process' },
    ],
  },
  {
    title: '其他工具',
-    items: [{ key: 'data-convert', label: '数据类型转换', icon: 'fa-exchange', to: '/data-convert' }],
+    items: [{ key: 'data-convert', label: '数据类型转换', icon: 'fa-exchange', to: '/data-convert', permission: 'data-convert' }],
  },
  {
    title: '系统设置',
    items: [
-      { key: 'hardware', label: '平台性能', icon: 'fa-bar-chart', to: '/hardware' },
-      { key: 'logs', label: '查看日志', icon: 'fa-file-text', to: '/logs' },
+      { key: 'user-settings', label: '用户设置', icon: 'fa-users', to: '/user-settings', permission: 'user-settings' },
+      { key: 'hardware', label: '平台性能', icon: 'fa-bar-chart', to: '/hardware', permission: 'hardware' },
+      { key: 'logs', label: '查看日志', icon: 'fa-file-text', to: '/logs', permission: 'logs' },
    ],
  },
 ]

+const visibleMenuGroups = computed(() =>
+  menuGroups
+    .map((group) => ({
+      ...group,
+      items: group.items.filter((item) => auth.hasPermission(item.permission)),
+    }))
+    .filter((group) => group.items.length > 0),
+)
+
 /**
 * 传给 el-menu 的激活值。
 *
@@ -78,7 +103,7 @@ watch(activeMenu, (value) => {
 })

 async function handleSelect(key: string) {
-  const all = menuGroups.flatMap((g) => g.items)
+  const all = visibleMenuGroups.value.flatMap((g) => g.items)
  const target = all.find((i) => i.key === key)
  if (!target) return

@@ -115,7 +140,7 @@ function handleLogout() {
        active-text-color="var(--sidebar-active-text)"
        @select="handleSelect"
      >
-        <template v-for="group in menuGroups" :key="group.title || group.items[0].key">
+        <template v-for="group in visibleMenuGroups" :key="group.title || group.items[0].key">
          <div v-if="group.title" class="sidebar-section-title">{{ group.title }}</div>
          <el-menu-item
            v-for="item in group.items"
@@ -134,8 +159,8 @@ function handleLogout() {
      <div class="footer-user" v-if="auth.username">
        <el-avatar :size="36" src="https://picsum.photos/id/1005/36/36" class="user-avatar" />
        <div class="user-info">
-          <span class="user-name">{{ auth.username }}</span>
-          <span class="user-role">Administrator</span>
+          <span class="user-name">{{ auth.displayName }}</span>
+          <span class="user-role">{{ auth.roleLabel }}</span>
        </div>
        <el-tooltip content="退出登录" placement="top">
          <div class="logout-btn" @click="handleLogout">
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -84,13 +84,13 @@ onUnmounted(() => {

@media (min-width: 1181px) {
  .layout-content:has(.dashboard-view) {
-    overflow-y: hidden;
+    overflow-y: auto;

    .page-canvas {
-      flex: 1 1 auto;
+      flex: 1 0 auto;
      min-height: 0;
      padding: 16px;
-      overflow: hidden;
+      overflow: visible;
    }
  }
 }
--- a/frontend/src/mock/adapter.ts
+++ b/frontend/src/mock/adapter.ts
@@ -5,7 +5,6 @@
 */
 import type { AxiosAdapter, AxiosInstance, AxiosRequestConfig } from 'axios'
 import {
-  mockLoginOk,
  mockHealth,
  mockSystemInfo,
  mockModels,
@@ -33,6 +32,14 @@ import {
  normalizeDatasetVersionState,
 } from './datasetVersions'
 import type { StoredDatasetVersion, StoredDatasetVersionState } from './datasetVersions'
+import {
+  authenticateMockUser,
+  createMockUser,
+  deleteMockUser,
+  listMockUsers,
+  updateMockUserAccess,
+  UserMutationError,
+} from './users'

 /** 模拟网络延迟 */
 function delay(ms = 200): Promise<void> {
@@ -128,10 +135,12 @@ async function handleMock(config: AxiosRequestConfig) {

  // ==================== 认证 ====================
  if (url === '/login' && method === 'post') {
-    if (body.username === 'admin' && body.password === 'admin') {
-      return ok(mockLoginOk.data)
+    try {
+      return ok(authenticateMockUser(String(body.username || ''), String(body.password || '')))
+    } catch (error) {
+      if (error instanceof UserMutationError) return fail(error.message, error.status)
+      return fail('登录失败', 500)
    }
-    return fail('账号或密码错误', 401)
  }
  if (url === '/web-log' && method === 'post') {
    return ok({ received: true })
@@ -141,6 +150,37 @@ async function handleMock(config: AxiosRequestConfig) {
  if (url === '/health' && method === 'get') return ok(mockHealth)
  if (url === '/system-info' && method === 'get') return ok(mockSystemInfo)

+  // ==================== 用户设置 ====================
+  if (url === '/users' && method === 'get') return ok(listMockUsers())
+  if (url === '/users' && method === 'post') {
+    try {
+      return ok(createMockUser(body))
+    } catch (error) {
+      if (error instanceof UserMutationError) return fail(error.message, error.status)
+      return fail('创建用户失败', 500)
+    }
+  }
+  let userMatch = url.match(/^\/users\/([^/]+)$/)
+  if (userMatch && method === 'put') {
+    try {
+      return ok(updateMockUserAccess(decodeURIComponent(userMatch[1]), body))
+    } catch (error) {
+      if (error instanceof UserMutationError) return fail(error.message, error.status)
+      return fail('更新用户失败', 500)
+    }
+  }
+  if (userMatch && method === 'delete') {
+    try {
+      return ok(deleteMockUser(
+        decodeURIComponent(userMatch[1]),
+        String(params.current_username || ''),
+      ))
+    } catch (error) {
+      if (error instanceof UserMutationError) return fail(error.message, error.status)
+      return fail('删除用户失败', 500)
+    }
+  }
+
  // ==================== 模型管理 ====================
  if (url === '/model-manage' && method === 'get') return ok(mockModels)
  if (url === '/model-manage/local-models' && method === 'get') return ok(mockLocalModels)
--- a/frontend/src/plugins/echarts.ts
+++ b/frontend/src/plugins/echarts.ts
@@ -4,7 +4,7 @@
 */
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
-import { BarChart, LineChart } from 'echarts/charts'
+import { BarChart, LineChart, PieChart } from 'echarts/charts'
 import {
  GridComponent,
  TooltipComponent,
@@ -17,6 +17,7 @@ use([
  CanvasRenderer,
  BarChart,
  LineChart,
+  PieChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
+import type { PermissionCode } from '@/types'

 const routes: RouteRecordRaw[] = [
  {
@@ -191,6 +192,12 @@ const routes: RouteRecordRaw[] = [
        meta: { title: '数据类型转换' },
      },
      // 系统设置
+      {
+        path: 'permission-denied',
+        name: 'permission-denied',
+        component: () => import('@/views/system/PermissionDeniedView.vue'),
+        meta: { title: '无权访问', skipPermission: true },
+      },
      {
        path: 'hardware',
        name: 'hardware',
@@ -203,6 +210,24 @@ const routes: RouteRecordRaw[] = [
        component: () => import('@/views/system/LogsView.vue'),
        meta: { title: '查看日志' },
      },
+      {
+        path: 'user-settings',
+        name: 'user-settings',
+        component: () => import('@/views/system/UserSettingsView.vue'),
+        meta: { title: '用户设置', pageSurface: 'self', permission: 'user-settings' },
+      },
+      {
+        path: 'user-settings/create',
+        name: 'user-create',
+        component: () => import('@/views/system/UserCreateView.vue'),
+        meta: { title: '创建用户', permission: 'user-settings' },
+      },
+      {
+        path: 'user-settings/:id/permission',
+        name: 'user-permission',
+        component: () => import('@/views/system/UserPermissionView.vue'),
+        meta: { title: '权限设置', permission: 'user-settings' },
+      },
      {
        path: 'training-log/:id',
        name: 'training-log',
@@ -222,6 +247,29 @@ const router = createRouter({
  routes,
 })

+const permissionBySegment: Record<string, PermissionCode> = {
+  dashboard: 'dashboard',
+  'fine-tune': 'fine-tune',
+  'training-log': 'fine-tune',
+  'model-eval': 'model-eval',
+  'model-inference': 'model-inference',
+  'model-compare': 'model-inference',
+  'model-manage': 'model-manage',
+  dataset: 'dataset',
+  'data-process': 'data-process',
+  'data-convert': 'data-convert',
+  tools: 'data-convert',
+  hardware: 'hardware',
+  logs: 'logs',
+  'user-settings': 'user-settings',
+}
+
+function requiredPermission(path: string, explicit?: unknown) {
+  if (explicit) return explicit as PermissionCode
+  const segment = path.split('/')[1]
+  return permissionBySegment[segment]
+}
+
 // 全局守卫：登录校验 + 会话超时
 router.beforeEach((to, _from, next) => {
  const auth = useAuthStore()
@@ -242,6 +290,14 @@ router.beforeEach((to, _from, next) => {
    return
  }

+  if (!to.meta.skipPermission) {
+    const permission = requiredPermission(to.path, to.meta.permission)
+    if (permission && !auth.hasPermission(permission)) {
+      next({ name: 'permission-denied', replace: true })
+      return
+    }
+  }
+
  // 续期会话
  auth.refresh()
  next()
--- a/frontend/src/stores/auth.ts
+++ b/frontend/src/stores/auth.ts
@@ -2,13 +2,63 @@ import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import { login as loginApi } from '@/api/modules/system'
 import { SESSION_TIMEOUT } from '@/constants'
+import type { PermissionCode, SystemUser } from '@/types'
+
+const USER_STORAGE_KEY = 'currentUser'
+
+const allPermissions: PermissionCode[] = [
+  'dashboard',
+  'fine-tune',
+  'model-eval',
+  'model-inference',
+  'model-manage',
+  'dataset',
+  'data-process',
+  'data-convert',
+  'hardware',
+  'logs',
+  'user-settings',
+]
+
+function restoreUser(): SystemUser | null {
+  const persisted = localStorage.getItem(USER_STORAGE_KEY)
+  if (persisted) {
+    try {
+      return JSON.parse(persisted) as SystemUser
+    } catch {
+      localStorage.removeItem(USER_STORAGE_KEY)
+    }
+  }
+
+  // 兼容改造前已经登录的 admin 会话。
+  if (localStorage.getItem('username') === 'admin') {
+    return {
+      id: 'USR-0001',
+      username: 'admin',
+      display_name: '系统管理员',
+      role: 'admin',
+      status: 'active',
+      permissions: allPermissions,
+      create_time: '2026-01-01T08:00:00+08:00',
+      protected: true,
+    }
+  }
+  return null
+}

 /**
 * 认证 store
 * 沿用原项目 localStorage 的登录时间戳 + 5 分钟会话超时机制
 */
 export const useAuthStore = defineStore('auth', () => {
-  const username = ref<string>(localStorage.getItem('username') || '')
+  const currentUser = ref<SystemUser | null>(restoreUser())
+  const username = computed(() => currentUser.value?.username || '')
+  const displayName = computed(() => currentUser.value?.display_name || username.value)
+  const roleLabel = computed(() => {
+    if (currentUser.value?.role === 'admin') return '超级管理员'
+    if (currentUser.value?.role === 'operator') return '操作员'
+    return '观察员'
+  })
  const loginTime = ref<number>(parseInt(localStorage.getItem('loginTime') || '0', 10) || 0)

  const isLoggedIn = computed(() => {
@@ -18,13 +68,20 @@ export const useAuthStore = defineStore('auth', () => {

  /** 登录 */
  async function login(user: string, password: string) {
-    await loginApi(user, password)
-    username.value = user
+    const response = await loginApi(user, password)
+    currentUser.value = response.user
    loginTime.value = Date.now()
-    localStorage.setItem('username', user)
+    localStorage.setItem('username', response.user.username)
+    localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(response.user))
    localStorage.setItem('loginTime', String(loginTime.value))
  }

+  /** 检查当前账号是否拥有指定模块权限。 */
+  function hasPermission(permission?: PermissionCode) {
+    if (!permission) return true
+    return currentUser.value?.permissions.includes(permission) ?? false
+  }
+
  /** 续期会话（活跃时刷新） */
  function refresh() {
    if (isLoggedIn.value) {
@@ -35,11 +92,23 @@ export const useAuthStore = defineStore('auth', () => {

  /** 退出 */
  function logout() {
-    username.value = ''
+    currentUser.value = null
    loginTime.value = 0
    localStorage.removeItem('username')
+    localStorage.removeItem(USER_STORAGE_KEY)
    localStorage.removeItem('loginTime')
  }

-  return { username, loginTime, isLoggedIn, login, refresh, logout }
+  return {
+    currentUser,
+    username,
+    displayName,
+    roleLabel,
+    loginTime,
+    isLoggedIn,
+    hasPermission,
+    login,
+    refresh,
+    logout,
+  }
 })
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -124,10 +124,18 @@ body {
 .el-button:active {
  transform: translateY(0);
 }
-.el-button.is-link:hover {
+.el-button.is-link:hover,
+.el-button.is-text:hover {
  transform: none;
  box-shadow: none;
 }
+.el-button.is-link:focus,
+.el-button.is-text:focus {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  outline: none !important;
+}

 /* 4. 标签 (el-tag) 圆润化 */
 .el-tag {
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -383,6 +383,57 @@ export interface HealthMetrics {
  disk_percent?: number
 }

+// ============ 用户与权限 ============
+/** 页面级权限编码，与路由模块保持一一对应 */
+export type PermissionCode =
+  | 'dashboard'
+  | 'fine-tune'
+  | 'model-eval'
+  | 'model-inference'
+  | 'model-manage'
+  | 'dataset'
+  | 'data-process'
+  | 'data-convert'
+  | 'hardware'
+  | 'logs'
+  | 'user-settings'
+
+export type UserRole = 'admin' | 'operator' | 'viewer'
+
+export type UserStatus = 'active' | 'disabled'
+
+export interface SystemUser {
+  id: string
+  username: string
+  display_name: string
+  role: UserRole
+  status: UserStatus
+  permissions: PermissionCode[]
+  create_time: string
+  last_login?: string
+  protected?: boolean
+}
+
+export interface LoginResponse {
+  token: string
+  user: SystemUser
+}
+
+export interface CreateUserPayload {
+  username: string
+  display_name: string
+  password: string
+  role: UserRole
+  status?: UserStatus
+  permissions?: PermissionCode[]
+}
+
+export interface UpdateUserAccessPayload {
+  role?: UserRole
+  status?: UserStatus
+  permissions?: PermissionCode[]
+}
+
 // ============ 日志 ============
 export interface LogFile {
  file: string
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -25,6 +25,19 @@ interface DashboardTask {
  startedAt: string
 }

+interface LoginDurationStat {
+  id: number
+  username: string
+  duration: number
+}
+
+interface RecentLoginUser {
+  id: number
+  username: string
+  role: string
+  lastLogin: string
+}
+
 const router = useRouter()
 const period = ref('7d')

@@ -185,6 +198,110 @@ const chartOption = computed<EChartsOption>(() => ({
  ],
 }))

+const operationChartOption = computed<EChartsOption>(() => ({
+  animationDuration: 500,
+  tooltip: { trigger: 'item' },
+  color: ['#4f46e5', '#10b981', '#f59e0b', '#3b82f6', '#ec4899'],
+  series: [
+    {
+      name: '操作分类',
+      type: 'pie',
+      radius: ['40%', '64%'],
+      center: ['50%', '50%'],
+      avoidLabelOverlap: true,
+      itemStyle: {
+        borderRadius: 6,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: true,
+        position: 'outside',
+        formatter: '{b}',
+        color: '#475569',
+        fontSize: 11,
+        lineHeight: 16,
+        width: 70,
+        overflow: 'truncate',
+      },
+      emphasis: {
+        label: { show: true, fontSize: 12, fontWeight: 'bold', color: '#1e293b' }
+      },
+      labelLine: {
+        show: true,
+        length: 10,
+        length2: 8,
+        lineStyle: { color: '#94a3b8', width: 1 },
+      },
+      data: [
+        { value: 1048, name: '模型训练' },
+        { value: 735, name: '数据处理' },
+        { value: 580, name: '模型评测' },
+        { value: 484, name: '模型推理' },
+        { value: 300, name: '系统设置' }
+      ]
+    }
+  ]
+}))
+
+const loginDurationStats: LoginDurationStat[] = [
+  { id: 1, username: 'admin', duration: 124 },
+  { id: 2, username: 'zhangsan', duration: 86 },
+  { id: 3, username: 'lisi', duration: 42 },
+  { id: 4, username: 'wangwu', duration: 18 },
+]
+
+const loginDurationChartOption = computed<EChartsOption>(() => ({
+  animationDuration: 500,
+  grid: { top: 8, right: 40, bottom: 6, left: 8, containLabel: true },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: { type: 'shadow' },
+    valueFormatter: (value) => `${value} 小时`,
+  },
+  xAxis: {
+    type: 'value',
+    max: Math.ceil(Math.max(...loginDurationStats.map((user) => user.duration)) / 10) * 10,
+    splitNumber: 4,
+    axisLabel: { color: '#94a3b8', fontSize: 11, formatter: '{value}h' },
+    axisLine: { show: false },
+    axisTick: { show: false },
+    splitLine: { lineStyle: { color: '#eef2f7' } },
+  },
+  yAxis: {
+    type: 'category',
+    inverse: true,
+    data: loginDurationStats.map((user) => user.username),
+    axisLabel: { color: '#475569', fontSize: 12 },
+    axisLine: { show: false },
+    axisTick: { show: false },
+  },
+  series: [
+    {
+      name: '登录时长',
+      type: 'bar',
+      data: loginDurationStats.map((user) => user.duration),
+      barMaxWidth: 18,
+      barCategoryGap: '34%',
+      itemStyle: { color: '#4f46e5', borderRadius: [0, 4, 4, 0] },
+      label: { show: true, position: 'right', distance: 8, color: '#64748b', fontSize: 11, formatter: '{c} 小时' },
+    },
+  ],
+}))
+
+const recentLoginUsers: RecentLoginUser[] = [
+  { id: 1, username: 'admin', role: '超级管理员', lastLogin: '10 分钟前' },
+  { id: 2, username: 'zhangsan', role: '操作员', lastLogin: '2 小时前' },
+  { id: 5, username: 'zhaoliu', role: '观察员', lastLogin: '5 小时前' },
+  { id: 3, username: 'lisi', role: '操作员', lastLogin: '昨天 15:30' },
+]
+
+const roleTagType: Record<string, 'danger' | 'primary' | 'info'> = {
+  '超级管理员': 'danger',
+  '操作员': 'primary',
+  '观察员': 'info',
+}
+
 function viewAllTasks() {
  router.push('/fine-tune')
 }
@@ -262,6 +379,38 @@ function viewTask(task: DashboardTask) {
      </section>
    </div>

+    <div class="user-stats-row">
+      <section class="stat-card" aria-labelledby="op-dist-title">
+        <h2 id="op-dist-title" class="section-title">用户操作分布</h2>
+        <div class="chart-container">
+          <VChart class="pie-chart" :option="operationChartOption" autoresize />
+        </div>
+      </section>
+
+      <section class="stat-card" aria-labelledby="login-dur-title">
+        <h2 id="login-dur-title" class="section-title">登录时长排行 (本月)</h2>
+        <VChart class="duration-chart" :option="loginDurationChartOption" autoresize />
+      </section>
+
+      <section class="stat-card" aria-labelledby="recent-login-title">
+        <h2 id="recent-login-title" class="section-title">最近登录用户</h2>
+        <div class="list-container">
+          <div v-for="user in recentLoginUsers" :key="user.id" class="list-item recent-user-item">
+            <div class="user-info">
+              <el-avatar :size="32" class="user-avatar" :style="{ backgroundColor: '#e2e8f0', color: '#475569' }">
+                {{ user.username.slice(0, 1).toUpperCase() }}
+              </el-avatar>
+              <div class="user-meta">
+                <span class="username">{{ user.username }}</span>
+                <span class="login-time">{{ user.lastLogin }}</span>
+              </div>
+            </div>
+            <el-tag :type="roleTagType[user.role]" size="small">{{ user.role }}</el-tag>
+          </div>
+        </div>
+      </section>
+    </div>
+
    <section class="tasks-section" aria-labelledby="tasks-title">
      <div class="section-heading-row tasks-heading">
        <h2 id="tasks-title" class="section-title">训练任务</h2>
@@ -319,22 +468,102 @@ function viewTask(task: DashboardTask) {
 .dashboard-view {
  display: flex;
  flex-direction: column;
-  height: 100%;
-  gap: 10px;
+  min-height: 100%;
+  gap: 16px;
  min-width: 0;
-  min-height: 0;
  color: #1e293b;
 }

 .overview-section,
 .chart-section,
 .service-section,
+.stat-card,
 .tasks-section {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
 }

+.user-stats-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.stat-card {
+  display: flex;
+  flex-direction: column;
+  padding: 16px 18px;
+  min-height: 284px;
+  min-width: 0;
+}
+
+.chart-container {
+  flex: 1 1 auto;
+  min-height: 224px;
+  margin-top: 10px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pie-chart {
+  width: 100%;
+  height: 224px;
+}
+
+.duration-chart {
+  width: 100%;
+  height: 224px;
+  margin-top: 10px;
+}
+
+.list-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.user-avatar {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.username {
+  font-size: 13px;
+  font-weight: 500;
+  color: #334155;
+}
+
+.user-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.login-time {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.recent-user-item {
+  padding: 2px 0;
+}
+
 .section-title {
  margin: 0;
  font-size: 15px;
@@ -429,8 +658,8 @@ function viewTask(task: DashboardTask) {
 .dashboard-middle {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(300px, 0.82fr);
-  flex: 1 1 auto;
-  gap: 10px;
+  flex: 0 0 auto;
+  gap: 16px;
  min-height: 0;
 }

@@ -438,8 +667,8 @@ function viewTask(task: DashboardTask) {
 .service-section {
  display: flex;
  flex-direction: column;
-  min-height: 280px;
-  padding: 12px 14px;
+  min-height: 360px;
+  padding: 16px 18px;
 }

 .section-heading-row {
@@ -460,8 +689,8 @@ function viewTask(task: DashboardTask) {
 .training-chart {
  flex: 1 1 auto;
  width: 100%;
-  height: auto;
-  min-height: 230px;
+  height: 300px;
+  min-height: 300px;
 }

 .service-table {
@@ -614,10 +843,6 @@ function viewTask(task: DashboardTask) {
 }

@media (max-height: 900px) and (min-width: 1181px) {
-  .dashboard-view {
-    gap: 8px;
-  }
-
  .section-title {
    font-size: 14px;
  }
@@ -666,20 +891,6 @@ function viewTask(task: DashboardTask) {
    }
  }

-  .dashboard-middle {
-    gap: 8px;
-  }
-
-  .chart-section,
-  .service-section {
-    min-height: 240px;
-    padding: 10px 12px;
-  }
-
-  .training-chart {
-    min-height: 200px;
-  }
-
  .service-table {
    grid-template-rows: 32px repeat(4, minmax(40px, 1fr));
    margin-top: 8px;
@@ -741,6 +952,17 @@ function viewTask(task: DashboardTask) {
  .dashboard-middle {
    grid-template-columns: 1fr;
  }
+
+  .user-stats-row {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .user-stats-row {
+    grid-template-columns: 1fr;
+  }
+
 }

@media (prefers-reduced-motion: reduce) {
--- a/frontend/src/views/login/LoginView.vue
+++ b/frontend/src/views/login/LoginView.vue
@@ -40,225 +40,308 @@ async function handleLogin() {

 <template>
  <div class="login-page">
-    <div class="login-card">
-      <!-- LOGO 和标题 -->
-      <div class="login-header">
-        <img src="/logo.png" alt="Logo" class="login-logo" />
-        <h1 class="login-title">远光软件微调平台</h1>
-        <p class="login-subtitle">模型管理平台</p>
-      </div>
-
-      <!-- 登录表单 -->
-      <el-form
-        ref="loginFormRef"
-        :model="loginForm"
-        :rules="rules"
-        size="large"
-        @keyup.enter="handleLogin"
-      >
-        <el-form-item prop="username">
-          <el-input
-            v-model="loginForm.username"
-            placeholder="请输入账号/手机号/邮箱"
-            clearable
-          >
-            <template #prefix><i class="fa fa-user-o" /></template>
-          </el-input>
-        </el-form-item>
-
-        <el-form-item prop="password">
-          <el-input
-            v-model="loginForm.password"
-            type="password"
-            placeholder="请输入密码"
-            show-password
-          >
-            <template #prefix><i class="fa fa-lock-o" /></template>
-          </el-input>
-        </el-form-item>
-
-        <div class="login-options">
-          <el-checkbox>记住密码</el-checkbox>
-          <el-link type="primary" :underline="false">忘记密码？</el-link>
+    <section class="login-visual" aria-labelledby="platform-title">
+      <div class="login-visual-content">
+        <div class="login-visual-copy">
+          <h1 id="platform-title">远光软件微调平台</h1>
+          <p>大模型微调、评测与推理的一体化工作台</p>
        </div>

-        <el-button
-          type="primary"
-          class="login-btn"
-          :loading="loading"
-          @click="handleLogin"
+        <div class="login-visual-footer" aria-label="平台核心能力">
+          <span>数据准备</span>
+          <span aria-hidden="true">·</span>
+          <span>模型训练</span>
+          <span aria-hidden="true">·</span>
+          <span>效果评测</span>
+        </div>
+      </div>
+    </section>
+
+    <main class="login-panel">
+      <div class="brand-lockup" role="img" aria-label="远光软件">
+        <span class="brand-logo-crop brand-logo-crop-mark" aria-hidden="true">
+          <img src="/logo.png" alt="" />
+        </span>
+        <span class="brand-logo-crop brand-logo-crop-wordmark" aria-hidden="true">
+          <img src="/logo.png" alt="" />
+        </span>
+      </div>
+
+      <div class="login-form-wrap">
+        <div class="login-heading">
+          <span>账号登录</span>
+          <h2>欢迎回来</h2>
+          <p>登录后继续使用微调平台</p>
+        </div>
+
+        <el-form
+          ref="loginFormRef"
+          :model="loginForm"
+          :rules="rules"
+          label-position="top"
+          size="large"
+          @keyup.enter="handleLogin"
        >
-          <i class="fa fa-sign-in login-btn-icon" />
-          登 录
-        </el-button>
-      </el-form>
-    </div>
+          <el-form-item label="账号" prop="username">
+            <el-input
+              v-model="loginForm.username"
+              placeholder="请输入账号"
+              clearable
+            />
+          </el-form-item>
+
+          <el-form-item label="密码" prop="password">
+            <el-input
+              v-model="loginForm.password"
+              type="password"
+              placeholder="请输入密码"
+              show-password
+            />
+          </el-form-item>
+
+          <div class="login-options">
+            <el-checkbox>记住密码</el-checkbox>
+            <el-link type="primary" :underline="false">忘记密码？</el-link>
+          </div>
+
+          <el-button
+            type="primary"
+            class="login-btn"
+            :loading="loading"
+            @click="handleLogin"
+          >
+            登录
+          </el-button>
+        </el-form>
+      </div>
+
+      <footer>© 2026 远光软件</footer>
+    </main>
  </div>
 </template>

 <style scoped lang="scss">
 .login-page {
  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-  background-color: #f8fafc;
-  /* Beautiful light mesh gradient for AI platform */
-  background-image: 
-    radial-gradient(at 10% 20%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
-    radial-gradient(at 80% 0%, rgba(236, 72, 153, 0.15) 0px, transparent 50%),
-    radial-gradient(at 40% 60%, rgba(56, 189, 248, 0.15) 0px, transparent 50%),
-    radial-gradient(at 90% 80%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
-  background-size: 100% 100%;
+  min-height: 100dvh;
+  display: grid;
+  grid-template-columns: minmax(0, 58fr) minmax(500px, 42fr);
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #fcfcfe;
+}
+
+.login-visual {
+  min-height: 100vh;
+  min-height: 100dvh;
  position: relative;
+  color: #fff;
+  background-color: #121127;
+  background-image: url('@/assets/login-hero-flow.png');
+  background-size: cover;
+  background-position: center;
  overflow: hidden;
 }

-/* Add some dynamic floating orbs for extra premium feel */
-.login-page::before,
-.login-page::after {
+.login-visual::after {
  content: '';
  position: absolute;
-  border-radius: 50%;
-  filter: blur(60px);
-  z-index: 0;
-  animation: float 20s infinite ease-in-out alternate;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(12, 12, 35, 0.2), transparent 36%, rgba(12, 12, 35, 0.2));
+  pointer-events: none;
 }

-.login-page::before {
-  width: 400px;
-  height: 400px;
-  background: rgba(99, 102, 241, 0.1);
-  top: -100px;
-  left: -100px;
-}
-
-.login-page::after {
-  width: 500px;
-  height: 500px;
-  background: rgba(236, 72, 153, 0.08);
-  bottom: -150px;
-  right: -150px;
-  animation-delay: -10s;
-}
-
-@keyframes float {
-  0% { transform: translate(0, 0) rotate(0deg); }
-  100% { transform: translate(50px, 50px) rotate(10deg); }
-}
-
-.login-card {
+.login-visual-content {
+  min-height: inherit;
  position: relative;
  z-index: 1;
-  width: 100%;
-  max-width: 440px;
-  /* Glassmorphism */
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  border: 1px solid rgba(255, 255, 255, 0.8);
-  border-radius: 24px;
-  padding: 48px 40px;
-  box-shadow: 
-    0 20px 40px -10px rgba(0, 0, 0, 0.05),
-    0 1px 3px rgba(0, 0, 0, 0.02),
-    inset 0 1px 0 rgba(255, 255, 255, 1);
-  /* Entrance animation */
-  transform: translateY(30px);
-  opacity: 0;
-  animation: slideUpFade 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  display: flex;
+  flex-direction: column;
+  padding: clamp(80px, 10vh, 132px) clamp(56px, 6vw, 112px) clamp(56px, 7vh, 84px);
 }

-@keyframes slideUpFade {
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
+.login-visual-copy {
+  max-width: 680px;
+  margin-top: clamp(80px, 11vh, 136px);

-.login-header {
-  text-align: center;
-  margin-bottom: 40px;
-
-  .login-logo {
-    width: 56px;
-    height: 56px;
-    object-fit: contain;
-    margin-bottom: 20px;
-    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));
-  }
-
-  .login-title {
-    font-size: 28px;
-    font-weight: 700;
-    letter-spacing: -0.5px;
-    margin: 0 0 8px;
-    /* Gradient text */
-    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-
-  .login-subtitle {
-    font-size: 15px;
-    color: #64748b;
-    font-weight: 500;
+  h1 {
    margin: 0;
+    font-size: clamp(38px, 3.8vw, 62px);
+    line-height: 1.2;
+    letter-spacing: -0.035em;
+    font-weight: 700;
+    text-wrap: balance;
+  }
+
+  p {
+    margin: 22px 0 0;
+    color: rgba(226, 232, 240, 0.76);
+    font-size: clamp(17px, 1.5vw, 24px);
+    line-height: 1.6;
+    letter-spacing: 0.01em;
+  }
+}
+
+.login-visual-footer {
+  width: min(100%, 640px);
+  margin-top: auto;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr auto 1fr;
+  align-items: center;
+  gap: 24px;
+  color: rgba(226, 232, 240, 0.72);
+  font-size: 16px;
+  letter-spacing: 0.04em;
+
+  span:nth-child(3),
+  span:nth-child(5) {
+    text-align: center;
+  }
+
+  span:nth-child(even) {
+    color: rgba(199, 210, 254, 0.8);
+  }
+}
+
+.login-panel {
+  min-height: 100vh;
+  min-height: 100dvh;
+  position: relative;
+  display: grid;
+  place-items: center;
+  padding: 120px clamp(48px, 5vw, 88px) 96px;
+  border-left: 1px solid #e8eaf1;
+  background: #fcfcfe;
+}
+
+.brand-lockup {
+  position: absolute;
+  top: 42px;
+  right: clamp(36px, 4vw, 64px);
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.brand-logo-crop {
+  position: relative;
+  display: block;
+  overflow: hidden;
+
+  img {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    max-width: none;
+  }
+}
+
+.brand-logo-crop-mark {
+  width: 40px;
+  height: 38px;
+
+  img {
+    top: 0;
+  }
+}
+
+.brand-logo-crop-wordmark {
+  width: 96px;
+  height: 25px;
+
+  img {
+    bottom: 0;
+  }
+}
+
+.login-form-wrap {
+  width: min(100%, 480px);
+}
+
+.login-heading {
+  margin-bottom: 42px;
+
+  > span {
+    display: block;
+    margin-bottom: 24px;
+    color: #4f46e5;
+    font-size: 16px;
+    line-height: 1;
+    font-weight: 600;
+  }
+
+  h2 {
+    margin: 0;
+    color: #17182c;
+    font-size: clamp(38px, 3vw, 48px);
+    line-height: 1.15;
+    letter-spacing: -0.035em;
+    font-weight: 700;
+  }
+
+  p {
+    margin: 14px 0 0;
+    color: #8a93a6;
+    font-size: 16px;
+    line-height: 1.6;
  }
 }

-/* Custom Input Styling */
 :deep(.el-form-item) {
-  margin-bottom: 24px;
+  margin-bottom: 26px;
+}
+
+:deep(.el-form-item__label) {
+  height: auto;
+  margin-bottom: 10px;
+  padding: 0;
+  color: #272a3a;
+  font-size: 15px;
+  line-height: 1.4;
+  font-weight: 600;
 }

 :deep(.el-input__wrapper) {
-  background-color: rgba(255, 255, 255, 0.6) !important;
-  border-radius: 12px !important;
-  box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.5) inset !important;
-  padding: 0 16px;
-  transition: all 0.3s ease;
+  min-height: 54px;
+  padding: 0 18px;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 0 0 1px #cfd4df inset;
+  transition: box-shadow 160ms ease, background-color 160ms ease;

  &:hover {
-    background-color: rgba(255, 255, 255, 0.9) !important;
-    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.6) inset !important;
+    box-shadow: 0 0 0 1px #aeb6c6 inset;
  }

  &.is-focus {
-    background-color: #ffffff !important;
-    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2) inset, 0 0 0 1px #4f46e5 inset !important;
+    box-shadow: 0 0 0 1px #4f46e5 inset, 0 0 0 3px rgba(79, 70, 229, 0.12);
  }
 }

 :deep(.el-input__inner) {
-  height: 48px;
  font-size: 15px;
  color: #1e293b;
-  &::placeholder {
-    color: #94a3b8;
-  }
-}

-:deep(.el-input__prefix) {
-  color: #94a3b8;
-  font-size: 16px;
-  margin-right: 8px;
+  &::placeholder {
+    color: #a4acba;
+  }
 }

 .login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
-  margin-bottom: 28px;
-  margin-top: -8px;
+  margin: -2px 0 30px;

  :deep(.el-checkbox__label) {
-    color: #64748b;
+    color: #556070;
+    font-size: 14px;
  }
+
  :deep(.el-link) {
    font-weight: 500;
    color: #4f46e5;
+
    &:hover {
      color: #4338ca;
    }
@@ -267,30 +350,223 @@ async function handleLogin() {

 .login-btn {
  width: 100%;
-  height: 48px;
+  height: 54px;
  font-size: 16px;
  font-weight: 600;
-  border-radius: 12px;
+  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #fff;
-  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
-  transition: all 0.3s ease;
-
-  .login-btn-icon {
-    margin-right: 8px;
-    font-size: 18px;
-  }
+  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.18);
+  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;

  &:hover {
    transform: translateY(-1px);
-    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
+    box-shadow: 0 14px 26px rgba(79, 70, 229, 0.24);
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
  }

  &:active {
-    transform: translateY(1px);
-    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
+    transform: translateY(0);
+    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.2);
+  }
+}
+
+.login-panel footer {
+  position: absolute;
+  right: clamp(36px, 4vw, 64px);
+  bottom: 34px;
+  color: #9aa2b2;
+  font-size: 13px;
+}
+
+@media (max-width: 1440px) {
+  .login-page {
+    grid-template-columns: minmax(0, 55fr) minmax(500px, 45fr);
+  }
+
+  .login-visual-content {
+    padding-inline: clamp(52px, 5vw, 72px);
+  }
+
+  .login-visual-copy {
+    max-width: 580px;
+
+    h1 {
+      font-size: clamp(42px, 3.6vw, 52px);
+    }
+
+    p {
+      font-size: clamp(16px, 1.45vw, 20px);
+    }
+  }
+
+  .login-panel {
+    padding-inline: clamp(44px, 4.2vw, 64px);
+  }
+
+  .login-form-wrap {
+    max-width: 440px;
+  }
+}
+
+@media (max-width: 1180px) {
+  .login-page {
+    grid-template-columns: minmax(0, 52fr) minmax(470px, 48fr);
+  }
+
+  .login-visual-content {
+    padding-inline: 48px;
+  }
+
+  .login-visual-copy h1 {
+    font-size: 42px;
+  }
+
+  .login-visual-footer {
+    gap: 14px;
+    font-size: 14px;
+  }
+}
+
+@media (max-height: 820px) and (min-width: 901px) {
+  .login-visual {
+    background-position: center 54%;
+  }
+
+  .login-visual-content {
+    padding-top: 48px;
+    padding-bottom: 38px;
+  }
+
+  .login-visual-copy {
+    max-width: 560px;
+    margin-top: clamp(52px, 9vh, 72px);
+
+    h1 {
+      font-size: clamp(38px, 3.4vw, 46px);
+    }
+
+    p {
+      margin-top: 14px;
+      font-size: clamp(15px, 1.35vw, 18px);
+    }
+  }
+
+  .login-visual-footer {
+    gap: 14px;
+    font-size: 14px;
+  }
+
+  .login-panel {
+    padding-top: 78px;
+    padding-bottom: 56px;
+  }
+
+  .brand-lockup {
+    top: 24px;
+  }
+
+  .login-heading {
+    margin-bottom: 26px;
+
+    > span {
+      margin-bottom: 16px;
+      font-size: 15px;
+    }
+
+    h2 {
+      font-size: 38px;
+    }
+
+    p {
+      margin-top: 8px;
+      font-size: 15px;
+    }
+  }
+
+  :deep(.el-form-item) {
+    margin-bottom: 18px;
+  }
+
+  :deep(.el-form-item__label) {
+    margin-bottom: 7px;
+    font-size: 14px;
+  }
+
+  :deep(.el-input__wrapper) {
+    min-height: 48px;
+  }
+
+  .login-options {
+    margin-bottom: 20px;
+  }
+
+  .login-btn {
+    height: 50px;
+  }
+
+  .login-panel footer {
+    bottom: 18px;
+  }
+}
+
+@media (max-width: 900px) {
+  .login-page {
+    display: block;
+    overflow: auto;
+  }
+
+  .login-visual {
+    display: none;
+  }
+
+  .login-panel {
+    min-height: 100vh;
+    min-height: 100dvh;
+    padding: 116px 32px 84px;
+    border-left: 0;
+  }
+
+  .login-panel footer {
+    right: 50%;
+    transform: translateX(50%);
+    white-space: nowrap;
+  }
+}
+
+@media (max-width: 560px) {
+  .login-panel {
+    display: flex;
+    align-items: center;
+    padding: 100px 24px 72px;
+  }
+
+  .brand-lockup {
+    top: 28px;
+    right: 24px;
+    transform: scale(0.88);
+    transform-origin: top right;
+  }
+
+  .login-heading {
+    margin-bottom: 32px;
+
+    > span {
+      margin-bottom: 18px;
+    }
+
+    h2 {
+      font-size: 36px;
+    }
+  }
+
+  :deep(.el-form-item) {
+    margin-bottom: 22px;
+  }
+
+  .login-options {
+    margin-bottom: 26px;
  }
 }
 </style>
Author	SHA1	Message	Date
caoxiaozhu	6e1197d321	docs: 更新视觉与权限设计走查记录补充本期用户与权限、登录重构、看板优化等改动的视觉与交互走查记录。	2026-07-14 16:11:07 +08:00
caoxiaozhu	a70cf6addd	refactor: Dashboard 看板布局与图表优化 DashboardView 调整看板卡片与栅格展示，ECharts 补充图表类型，主布局 dashboard 区域由内嵌滚动改为自适应可滚动以避免内容被裁剪，回归脚本适配。	2026-07-14 16:10:59 +08:00
caoxiaozhu	8b83b8facf	refactor: 登录页重构为双栏视觉布局左侧新增品牌展示区与平台能力介绍，右侧保留登录表单并优化可访问性属性，Element Plus 链接/文本按钮统一样式与焦点表现。	2026-07-14 16:10:55 +08:00
caoxiaozhu	e09c6e81df	feat: 用户与权限管理新增 PermissionCode 权限类型与用户/权限 API，路由注册用户设置/创建/权限页与无权访问页并接入权限守卫，AppSidebar 按权限过滤菜单并新增用户设置入口，auth store 与 mock 适配器同步支持用户管理与新登录认证，回归脚本与 npm 脚本注册。	2026-07-14 16:10:50 +08:00