diff --git a/frontend/public/guide/screenshots/data-process-create.jpg b/frontend/public/guide/screenshots/data-process-create.jpg
new file mode 100644
index 0000000..7d7eef2
Binary files /dev/null and b/frontend/public/guide/screenshots/data-process-create.jpg differ
diff --git a/frontend/public/guide/screenshots/data-process-preview.jpg b/frontend/public/guide/screenshots/data-process-preview.jpg
new file mode 100644
index 0000000..243c939
Binary files /dev/null and b/frontend/public/guide/screenshots/data-process-preview.jpg differ
diff --git a/frontend/public/guide/screenshots/fine-tune-create.jpg b/frontend/public/guide/screenshots/fine-tune-create.jpg
new file mode 100644
index 0000000..02be3ff
Binary files /dev/null and b/frontend/public/guide/screenshots/fine-tune-create.jpg differ
diff --git a/frontend/public/guide/screenshots/model-edit.jpg b/frontend/public/guide/screenshots/model-edit.jpg
new file mode 100644
index 0000000..ea7f899
Binary files /dev/null and b/frontend/public/guide/screenshots/model-edit.jpg differ
diff --git a/frontend/public/guide/screenshots/service-dashboard.png b/frontend/public/guide/screenshots/service-dashboard.png
new file mode 100644
index 0000000..f896c3e
Binary files /dev/null and b/frontend/public/guide/screenshots/service-dashboard.png differ
diff --git a/frontend/public/guide/screenshots/training-detail.jpg b/frontend/public/guide/screenshots/training-detail.jpg
new file mode 100644
index 0000000..d0d7975
Binary files /dev/null and b/frontend/public/guide/screenshots/training-detail.jpg differ
diff --git a/frontend/scripts/regression-login-layout.mjs b/frontend/scripts/regression-login-layout.mjs
new file mode 100644
index 0000000..85842ec
--- /dev/null
+++ b/frontend/scripts/regression-login-layout.mjs
@@ -0,0 +1,26 @@
+import { existsSync, readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const root = resolve(fileURLToPath(new URL('..', import.meta.url)))
+const loginPath = resolve(root, 'src/views/login/LoginView.vue')
+const heroAssetPath = resolve(root, 'src/assets/login-hero-flow.jpg')
+const login = readFileSync(loginPath, 'utf8')
+
+function assert(condition, message) {
+  if (!condition) throw new Error(message)
+}
+
+assert(login.includes('class="login-visual"'), '登录页缺少左侧品牌视觉区域')
+assert(login.includes('class="login-panel"'), '登录页缺少右侧登录区域')
+assert(login.includes('远光软件微调平台'), '登录页缺少平台标题')
+assert(login.includes('大模型微调、评测与推理的一体化工作台'), '登录页缺少平台定位文案')
+assert(login.includes('login-hero-flow.jpg'), '登录页未使用压缩后的流线主视觉资源')
+assert(login.includes('@media (max-width: 1440px)'), '登录页缺少笔记本宽度适配规则')
+assert(login.includes('@media (max-height: 820px) and (min-width: 901px)'), '登录页缺少笔记本短屏适配规则')
+assert(login.includes('@media (max-width: 900px)'), '登录页缺少窄屏响应式规则')
+assert(/\.login-page\s*\{[^}]*height:\s*100dvh;[^}]*overflow:\s*hidden;/.test(login), '桌面端登录页不应产生页面滚动')
+assert(/@media \(max-width: 900px\)[\s\S]*?\.login-page\s*\{[^}]*height:\s*auto;[^}]*overflow:\s*auto;/.test(login), '窄屏登录页应保留内容滚动能力')
+assert(existsSync(heroAssetPath), '登录页流线主视觉资源不存在')
+
+console.log('login-layout regression checks passed')
diff --git a/frontend/scripts/regression-page-surface.mjs b/frontend/scripts/regression-page-surface.mjs
index 25fc074..ca350fc 100644
--- 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',
+  'compute',
   'user-settings',
 ]
 for (const routePath of selfSurfaceRoutes) {
diff --git a/frontend/scripts/regression-user-guide.mjs b/frontend/scripts/regression-user-guide.mjs
new file mode 100644
index 0000000..75d6769
--- /dev/null
+++ b/frontend/scripts/regression-user-guide.mjs
@@ -0,0 +1,87 @@
+import assert from 'node:assert/strict'
+import { readFile } from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
+
+const scriptDir = path.dirname(fileURLToPath(import.meta.url))
+const sourceRoot = path.resolve(scriptDir, '../src')
+const publicRoot = path.resolve(scriptDir, '../public')
+const [headerSource, routerSource, guideSource, guideContentSource] = await Promise.all([
+  readFile(path.join(sourceRoot, 'components/AppHeader.vue'), 'utf8'),
+  readFile(path.join(sourceRoot, 'router/index.ts'), 'utf8'),
+  readFile(path.join(sourceRoot, 'views/guide/GuideView.vue'), 'utf8'),
+  readFile(path.join(sourceRoot, 'views/guide/guideContent.ts'), 'utf8'),
+])
+
+assert.match(headerSource, /fa-book/, '顶部栏缺少书状使用文档图标')
+assert.match(headerSource, /window\.open\([\s\S]*?['"]_blank['"]/, '使用文档应在浏览器新标签页打开')
+assert.match(headerSource, /aria-label=["']打开使用文档["']/, '使用文档图标缺少无障碍名称')
+assert.match(routerSource, /path:\s*['"]\/guide['"][\s\S]*?GuideView\.vue/, '缺少独立使用文档路由')
+assert.match(routerSource, /name:\s*['"]guide['"][\s\S]*?skipPermission:\s*true/, '使用文档应允许所有已登录用户访问')
+assert.ok(routerSource.indexOf("path: '/guide'") < routerSource.indexOf("path: '/'"), '使用文档不应嵌入主应用布局')
+assert.match(guideSource, /class="docs-shell"/, '使用文档缺少独立文档站布局')
+assert.match(guideSource, /class="docs-sidebar"/, '使用文档缺少左侧分级导航')
+assert.match(guideSource, /class="article-toc"/, '使用文档缺少右侧页内目录')
+assert.match(guideSource, /v-model="searchQuery"/, '使用文档缺少全局搜索能力')
+assert.match(guideSource, /scrollIntoView/, '使用文档目录缺少锚点导航能力')
+assert.match(guideSource, /class="architecture-flow"/, '使用文档缺少架构或流程图')
+assert.match(guideSource, /articlePresentation\.stepsTitle/, '文档步骤标题应根据页面类型动态展示')
+assert.match(guideSource, /查看型页面/, '文档缺少查看型页面说明')
+assert.match(guideSource, /排查型页面/, '文档缺少排查型页面说明')
+assert.match(guideSource, /class="step-screenshot"/, '使用文档缺少步骤内联页面截图')
+assert.match(guideSource, /loading="lazy"/, '页面截图应使用懒加载')
+assert.match(guideSource, /class="image-preview-overlay"/, '页面截图缺少大图预览')
+assert.match(guideSource, /aria-modal="true"/, '截图预览缺少无障碍对话框语义')
+assert.match(guideSource, /:inert="previewImage \? true : undefined"/, '截图预览打开时应禁用背景交互')
+assert.match(guideSource, /event\.key === 'Tab'/, '截图预览缺少键盘焦点循环')
+assert.match(guideSource, /:width="step\.screenshot\.width"/, '页面截图应使用真实固有尺寸')
+
+for (const moduleName of [
+  '服务看板',
+  '模型训练',
+  '模型评测',
+  '模型推理',
+  '模型管理',
+  '数据集管理',
+  '数据处理',
+  '数据类型转换',
+  '用户设置',
+  '平台性能',
+  '查看日志',
+]) {
+  assert.ok(guideContentSource.includes(moduleName), `使用文档缺少模块：${moduleName}`)
+}
+
+assert.match(guideSource, /操作步骤/, '使用文档缺少分步骤教程')
+assert.match(guideContentSource, /title:\s*'快速开始'/, '使用文档缺少完整快速开始教程')
+assert.match(guideContentSource, /architecture:/, '使用文档内容缺少架构流程数据')
+assert.match(guideContentSource, /steps:/, '使用文档内容缺少模块操作步骤')
+assert.match(guideContentSource, /id:\s*'dashboard'[\s\S]*?mode:\s*'overview'/, '服务看板应标记为查看型页面')
+assert.match(guideContentSource, /id:\s*'hardware'[\s\S]*?mode:\s*'overview'/, '平台性能应标记为查看型页面')
+assert.match(guideContentSource, /id:\s*'logs'[\s\S]*?mode:\s*'troubleshooting'/, '查看日志应标记为排查型页面')
+assert.match(guideContentSource, /screenshot:/, '使用文档步骤缺少真实页面截图引用')
+assert.match(guideContentSource, /status:\s*'建设中'/, '使用文档应如实标记未开放功能')
+assert.match(guideSource, /@media \(max-width: 900px\)/, '使用文档缺少窄屏响应式布局')
+
+for (const screenshotName of [
+  'service-dashboard.png',
+  'fine-tune-create.jpg',
+  'training-detail.jpg',
+  'model-edit.jpg',
+  'data-process-create.jpg',
+  'data-process-preview.jpg',
+]) {
+  const screenshotPath = path.join(publicRoot, 'guide/screenshots', screenshotName)
+  const screenshot = await readFile(screenshotPath)
+  assert.ok(screenshot.length > 10_000, `页面截图不存在或内容异常：${screenshotName}`)
+  const isValidSignature = screenshotName.endsWith('.png')
+    ? screenshot.subarray(1, 4).toString() === 'PNG'
+    : screenshot[0] === 0xff && screenshot[1] === 0xd8 && screenshot[2] === 0xff
+  assert.ok(isValidSignature, `页面截图扩展名与文件格式不一致：${screenshotName}`)
+  assert.ok(
+    guideContentSource.includes(`/guide/screenshots/${screenshotName}`),
+    `使用文档未引用页面截图：${screenshotName}`,
+  )
+}
+
+console.log('使用文档回归检查通过')
diff --git a/frontend/scripts/regression-user-settings.mjs b/frontend/scripts/regression-user-settings.mjs
new file mode 100644
index 0000000..593b551
--- /dev/null
+++ b/frontend/scripts/regression-user-settings.mjs
@@ -0,0 +1,116 @@
+import assert from 'node:assert/strict'
+import { readFile } from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
+import ts from 'typescript'
+import { parse as parseSfc } from '@vue/compiler-sfc'
+
+const scriptDir = path.dirname(fileURLToPath(import.meta.url))
+const sourceRoot = path.resolve(scriptDir, '../src')
+const [viewSource, createSource, permissionSource, sidebarSource, routerSource, apiSource, adapterSource, authSource, usersSource] = await Promise.all([
+  readFile(path.join(sourceRoot, 'views/system/UserSettingsView.vue'), 'utf8'),
+  readFile(path.join(sourceRoot, 'views/system/UserCreateView.vue'), 'utf8'),
+  readFile(path.join(sourceRoot, 'views/system/UserPermissionView.vue'), 'utf8'),
+  readFile(path.join(sourceRoot, 'components/AppSidebar.vue'), 'utf8'),
+  readFile(path.join(sourceRoot, 'router/index.ts'), 'utf8'),
+  readFile(path.join(sourceRoot, 'api/modules/system.ts'), 'utf8'),
+  readFile(path.join(sourceRoot, 'mock/adapter.ts'), 'utf8'),
+  readFile(path.join(sourceRoot, 'stores/auth.ts'), 'utf8'),
+  readFile(path.join(sourceRoot, 'mock/users.ts'), 'utf8'),
+])
+const userFeatureSource = [viewSource, createSource, permissionSource].join('\n')
+
+const descriptor = parseSfc(viewSource).descriptor
+assert.ok(descriptor.template?.content, '用户设置页面缺少模板')
+assert.ok(descriptor.scriptSetup?.content, '用户设置页面缺少 script setup')
+
+assert.match(sidebarSource, /label:\s*'用户设置'/, '系统设置菜单缺少用户设置入口')
+assert.match(sidebarSource, /to:\s*'\/user-settings'/, '用户设置菜单路由不正确')
+assert.match(sidebarSource, /visibleMenuGroups/, '侧边栏没有根据权限过滤菜单')
+assert.match(routerSource, /path:\s*'user-settings'/, '缺少用户设置路由')
+assert.match(routerSource, /permission:\s*'user-settings'/, '用户设置路由缺少权限声明')
+assert.match(routerSource, /permission-denied/, '缺少无权限访问反馈页面')
+assert.match(authSource, /hasPermission/, '认证状态缺少权限检查能力')
+
+for (const marker of [
+  '创建用户',
+  '用户权限设置',
+  '功能权限',
+  '权限设置',
+  '删除',
+  'AppConfirmDialog',
+  "tone: 'danger'",
+]) {
+  assert.match(userFeatureSource, new RegExp(marker), `用户设置页面缺少关键交互：${marker}`)
+}
+assert.match(createSource, /createRules/, '创建用户缺少表单校验')
+assert.match(viewSource, /deleteDisabledReason/, '删除操作缺少当前用户和内置用户保护')
+assert.match(viewSource, /prefers-reduced-motion/, '页面未适配减少动态效果偏好')
+
+for (const apiName of ['getUsers', 'createUser', 'deleteUser', 'updateUserAccess']) {
+  assert.match(apiSource, new RegExp(`export const ${apiName}`), `用户 API 缺少 ${apiName}`)
+}
+assert.match(adapterSource, /url === '\/users' && method === 'get'/, 'Mock 缺少用户列表路由')
+assert.match(adapterSource, /url === '\/users' && method === 'post'/, 'Mock 缺少创建用户路由')
+assert.match(adapterSource, /userMatch && method === 'put'/, 'Mock 缺少权限更新路由')
+assert.match(adapterSource, /userMatch && method === 'delete'/, 'Mock 缺少删除用户路由')
+assert.match(usersSource, /mock:system-users:v1/, 'Mock 用户没有持久化存储')
+
+const usersModuleCode = ts.transpileModule(usersSource, {
+  compilerOptions: { module: ts.ModuleKind.ESNext, target: ts.ScriptTarget.ES2022 },
+}).outputText
+const usersModule = await import(
+  `data:text/javascript;base64,${Buffer.from(usersModuleCode).toString('base64')}`
+)
+
+const initialUsers = usersModule.listMockUsers()
+assert.equal(initialUsers.length, 2, '初始状态应包含内置管理员和操作员')
+assert.equal(initialUsers[0].username, 'admin', '默认管理员账号应为 admin')
+assert.equal(initialUsers[0].permissions.length, 12, '默认管理员应拥有全部模块权限')
+assert.equal(initialUsers[1].username, 'operator', '默认操作员账号应为 operator')
+assert.ok(initialUsers[1].permissions.includes('compute'), '默认操作员应拥有算力节点权限')
+assert.ok(!initialUsers[1].permissions.includes('user-settings'), '默认操作员不应拥有用户管理权限')
+assert.ok(!('password' in initialUsers[0]), '用户列表不能向页面返回密码')
+
+const operator = usersModule.createMockUser({
+  username: 'operator01',
+  display_name: '测试操作员',
+  password: '123456',
+  role: 'operator',
+  status: 'active',
+})
+assert.equal(usersModule.listMockUsers().length, 3, '创建用户后列表数量应增加')
+assert.ok(!operator.permissions.includes('user-settings'), '操作员默认不应拥有用户管理权限')
+
+assert.throws(
+  () => usersModule.createMockUser({ username: 'OPERATOR01', display_name: '重复账号', password: '123456', role: 'viewer' }),
+  /用户名已存在/,
+  '用户名唯一校验应忽略大小写',
+)
+
+const updated = usersModule.updateMockUserAccess(operator.id, {
+  role: 'viewer',
+  permissions: ['dashboard', 'dataset'],
+})
+assert.deepEqual(updated.permissions, ['dashboard', 'dataset'], '权限更新应准确保存勾选结果')
+assert.equal(updated.role, 'viewer', '权限设置应同步保存用户角色')
+
+const loginResult = usersModule.authenticateMockUser('operator01', '123456')
+assert.equal(loginResult.user.id, operator.id, '新建用户应可使用初始密码登录')
+assert.ok(loginResult.user.last_login, '登录后应记录最近登录时间')
+
+assert.throws(
+  () => usersModule.deleteMockUser(operator.id, 'operator01'),
+  /不能删除当前登录用户/,
+  '不能删除当前登录账号',
+)
+assert.throws(
+  () => usersModule.deleteMockUser(initialUsers[0].id, 'other-user'),
+  /系统内置管理员不能删除/,
+  '不能删除系统内置管理员',
+)
+
+usersModule.deleteMockUser(operator.id, 'admin')
+assert.equal(usersModule.listMockUsers().length, 2, '确认删除后用户应从列表移除')
+
+console.log('用户设置页回归检查通过')
diff --git a/frontend/src/assets/login-hero-flow.jpg b/frontend/src/assets/login-hero-flow.jpg
index 5c139c4..75b5f48 100644
Binary files a/frontend/src/assets/login-hero-flow.jpg and b/frontend/src/assets/login-hero-flow.jpg differ
diff --git a/frontend/src/mock/users.ts b/frontend/src/mock/users.ts
index ff340b3..ef0d9ef 100644
--- a/frontend/src/mock/users.ts
+++ b/frontend/src/mock/users.ts
@@ -4,11 +4,13 @@ import type {
   PermissionCode,
   SystemUser,
   UpdateUserAccessPayload,
+  UserRole,
 } from '@/types'
 
 const STORAGE_KEY = 'mock:system-users'
+const LEGACY_STORAGE_KEY = 'mock:system-users:v1'
 
-const allPermissions: PermissionCode[] = [
+export const ALL_PERMISSION_CODES: PermissionCode[] = [
   'dashboard',
   'fine-tune',
   'model-eval',
@@ -23,30 +25,43 @@ const allPermissions: PermissionCode[] = [
   'user-settings',
 ]
 
-const defaultPasswords: Record<string, string> = {
+const ROLE_DEFAULT_PERMISSIONS: Record<UserRole, PermissionCode[]> = {
+  admin: ALL_PERMISSION_CODES,
+  operator: ALL_PERMISSION_CODES.filter((permission) => permission !== 'user-settings'),
+  viewer: ['dashboard', 'dataset', 'hardware', 'logs'],
+}
+
+const DEFAULT_PASSWORDS: Record<string, string> = {
   admin: 'admin123',
   operator: 'operator123',
 }
 
-export class UserMutationError extends Error {
-  status: number
+interface StoredSystemUser extends SystemUser {
+  password: string
+}
 
-  constructor(message: string, status = 400) {
+export class UserMutationError extends Error {
+  constructor(
+    message: string,
+    public readonly status = 400,
+  ) {
     super(message)
     this.name = 'UserMutationError'
-    this.status = status
   }
 }
 
-function defaultUsers(): SystemUser[] {
+let memoryUsers: StoredSystemUser[] | null = null
+
+function createDefaultUsers(): StoredSystemUser[] {
   return [
     {
       id: 'u_admin',
       username: 'admin',
       display_name: 'Platform Admin',
+      password: DEFAULT_PASSWORDS.admin,
       role: 'admin',
       status: 'active',
-      permissions: allPermissions,
+      permissions: [...ALL_PERMISSION_CODES],
       create_time: '2026-01-01T00:00:00Z',
       protected: true,
     },
@@ -54,91 +69,206 @@ function defaultUsers(): SystemUser[] {
       id: 'u_operator',
       username: 'operator',
       display_name: 'Platform Operator',
+      password: DEFAULT_PASSWORDS.operator,
       role: 'operator',
       status: 'active',
-      permissions: allPermissions.filter((item) => item !== 'user-settings'),
+      permissions: [...ROLE_DEFAULT_PERMISSIONS.operator],
       create_time: '2026-01-01T00:00:00Z',
       protected: false,
     },
   ]
 }
 
-function readUsers(): SystemUser[] {
-  const raw = localStorage.getItem(STORAGE_KEY)
-  if (!raw) return defaultUsers()
-  try {
-    const users = JSON.parse(raw) as SystemUser[]
-    return users.length ? users : defaultUsers()
-  } catch {
-    return defaultUsers()
+function canUseLocalStorage() {
+  return typeof localStorage !== 'undefined'
+}
+
+function persistUsers(users: StoredSystemUser[]) {
+  memoryUsers = users
+  if (canUseLocalStorage()) {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(users))
   }
 }
 
-function writeUsers(users: SystemUser[]) {
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(users))
+function normalizePermissions(role: UserRole, permissions?: PermissionCode[]) {
+  if (role === 'admin') return [...ALL_PERMISSION_CODES]
+  const candidates = Array.isArray(permissions) ? permissions : ROLE_DEFAULT_PERMISSIONS[role]
+  return ALL_PERMISSION_CODES.filter((permission) => candidates.includes(permission))
+}
+
+function normalizeStoredUser(user: Partial<StoredSystemUser>): StoredSystemUser | null {
+  if (!user.id || !user.username || !user.role) return null
+  if (!['admin', 'operator', 'viewer'].includes(user.role)) return null
+  const role = user.role as UserRole
+  const username = String(user.username).trim()
+  if (!username) return null
+  return {
+    id: String(user.id),
+    username,
+    display_name: String(user.display_name || username).trim(),
+    password: String(user.password || DEFAULT_PASSWORDS[username] || 'platform123'),
+    role,
+    status: user.status === 'disabled' ? 'disabled' : 'active',
+    permissions: normalizePermissions(role, user.permissions),
+    create_time: user.create_time || new Date().toISOString(),
+    last_login: user.last_login,
+    protected: Boolean(user.protected),
+  }
+}
+
+function loadUsers(): StoredSystemUser[] {
+  if (canUseLocalStorage()) {
+    for (const storageKey of [STORAGE_KEY, LEGACY_STORAGE_KEY]) {
+      const persisted = localStorage.getItem(storageKey)
+      if (!persisted) continue
+      try {
+        const parsed = JSON.parse(persisted) as Partial<StoredSystemUser>[]
+        const normalized = Array.isArray(parsed)
+          ? parsed.map(normalizeStoredUser).filter((user): user is StoredSystemUser => Boolean(user))
+          : []
+        if (normalized.length > 0) {
+          persistUsers(normalized)
+          return normalized
+        }
+      } catch {
+        // 当前存储损坏时继续尝试旧版数据，全部不可用才恢复内置账号。
+      }
+    }
+  } else if (memoryUsers) {
+    return memoryUsers
+  }
+
+  const users = createDefaultUsers()
+  persistUsers(users)
+  return users
+}
+
+function publicUser(user: StoredSystemUser): SystemUser {
+  const { password: _password, ...result } = user
+  return {
+    ...result,
+    permissions: [...result.permissions],
+  }
+}
+
+function nextUserId() {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return `user-${crypto.randomUUID()}`
+  }
+  return `user-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
+}
+
+function findUserOrThrow(users: StoredSystemUser[], id: string) {
+  const user = users.find((item) => item.id === id)
+  if (!user) throw new UserMutationError('用户不存在', 404)
+  return user
+}
+
+function isLastActiveAdmin(users: StoredSystemUser[], target: StoredSystemUser) {
+  if (target.role !== 'admin' || target.status !== 'active') return false
+  return users.filter((user) => user.role === 'admin' && user.status === 'active').length === 1
+}
+
+function isLastAdmin(users: StoredSystemUser[], target: StoredSystemUser) {
+  return target.role === 'admin' && users.filter((user) => user.role === 'admin').length === 1
 }
 
 export function listMockUsers(): SystemUser[] {
-  return readUsers()
+  return loadUsers().map(publicUser)
 }
 
 export function authenticateMockUser(username: string, password: string): LoginResponse {
-  const users = readUsers()
-  const user = users.find((item) => item.username === username)
-  if (!user || user.status !== 'active') {
-    throw new UserMutationError('Invalid username or disabled account', 401)
+  const users = loadUsers()
+  const normalizedUsername = username.trim().toLocaleLowerCase()
+  const user = users.find((item) => item.username.toLocaleLowerCase() === normalizedUsername)
+  if (!user || user.password !== password) {
+    throw new UserMutationError('账号或密码错误', 401)
   }
-  const expected = defaultPasswords[username] || 'platform123'
-  if (password !== expected) {
-    throw new UserMutationError('Invalid username or password', 401)
+  if (user.status === 'disabled') {
+    throw new UserMutationError('该账号已被禁用，请联系管理员', 403)
   }
+
   user.last_login = new Date().toISOString()
-  writeUsers(users)
+  persistUsers(users)
   return {
-    token: `mock-token-${user.id}`,
-    user,
+    token: `mock-token-${user.id}-${Date.now()}`,
+    user: publicUser(user),
   }
 }
 
 export function createMockUser(payload: CreateUserPayload): SystemUser {
-  const users = readUsers()
-  if (users.some((item) => item.username === payload.username)) {
-    throw new UserMutationError('Username already exists', 409)
+  const users = loadUsers()
+  const username = String(payload.username || '').trim()
+  const displayName = String(payload.display_name || '').trim()
+  if (!username) throw new UserMutationError('用户名不能为空')
+  if (!displayName) throw new UserMutationError('用户名称不能为空')
+  if (!payload.password) throw new UserMutationError('密码不能为空')
+  if (!['admin', 'operator', 'viewer'].includes(payload.role)) {
+    throw new UserMutationError('用户角色不正确')
   }
-  const user: SystemUser = {
-    id: `u_${Date.now()}`,
-    username: payload.username,
-    display_name: payload.display_name || payload.username,
+  if (payload.status && !['active', 'disabled'].includes(payload.status)) {
+    throw new UserMutationError('用户状态不正确')
+  }
+  if (users.some((user) => user.username.toLocaleLowerCase() === username.toLocaleLowerCase())) {
+    throw new UserMutationError('用户名已存在', 409)
+  }
+
+  const user: StoredSystemUser = {
+    id: nextUserId(),
+    username,
+    display_name: displayName,
+    password: payload.password,
     role: payload.role,
-    status: payload.status || 'active',
-    permissions: payload.permissions || [],
+    status: payload.status ?? 'active',
+    permissions: normalizePermissions(payload.role, payload.permissions),
     create_time: new Date().toISOString(),
     protected: false,
   }
-  defaultPasswords[user.username] = payload.password || 'platform123'
-  users.push(user)
-  writeUsers(users)
-  return user
+  persistUsers([...users, user])
+  return publicUser(user)
 }
 
 export function updateMockUserAccess(id: string, payload: UpdateUserAccessPayload): SystemUser {
-  const users = readUsers()
-  const user = users.find((item) => item.id === id)
-  if (!user) throw new UserMutationError('User not found', 404)
-  if (payload.role) user.role = payload.role
-  if (payload.status) user.status = payload.status
-  if (payload.permissions) user.permissions = payload.permissions
-  writeUsers(users)
-  return user
+  const users = loadUsers()
+  const user = findUserOrThrow(users, id)
+  if (user.protected) {
+    throw new UserMutationError('系统内置管理员的状态和权限不可修改', 409)
+  }
+  if (payload.role && !['admin', 'operator', 'viewer'].includes(payload.role)) {
+    throw new UserMutationError('用户角色不正确')
+  }
+  if (payload.status && !['active', 'disabled'].includes(payload.status)) {
+    throw new UserMutationError('用户状态不正确')
+  }
+  const nextRole = payload.role ?? user.role
+  const nextStatus = payload.status ?? user.status
+
+  if (isLastActiveAdmin(users, user) && (nextRole !== 'admin' || nextStatus !== 'active')) {
+    throw new UserMutationError('不能停用或降级最后一个管理员', 409)
+  }
+
+  const nextPermissions = payload.permissions
+    ?? (payload.role && payload.role !== user.role ? undefined : user.permissions)
+  user.role = nextRole
+  user.status = nextStatus
+  user.permissions = normalizePermissions(nextRole, nextPermissions)
+  persistUsers(users)
+  return publicUser(user)
 }
 
 export function deleteMockUser(id: string, currentUsername: string): { deleted: string } {
-  const users = readUsers()
-  const user = users.find((item) => item.id === id)
-  if (!user) throw new UserMutationError('User not found', 404)
-  if (user.protected || user.username === currentUsername) {
-    throw new UserMutationError('Protected or current user cannot be deleted', 400)
+  const users = loadUsers()
+  const user = findUserOrThrow(users, id)
+  if (user.protected) {
+    throw new UserMutationError('系统内置管理员不能删除', 409)
   }
-  writeUsers(users.filter((item) => item.id !== id))
+  if (user.username.toLocaleLowerCase() === currentUsername.trim().toLocaleLowerCase()) {
+    throw new UserMutationError('不能删除当前登录用户', 409)
+  }
+  if (isLastAdmin(users, user)) {
+    throw new UserMutationError('不能删除最后一个管理员', 409)
+  }
+
+  persistUsers(users.filter((item) => item.id !== id))
   return { deleted: id }
 }
diff --git a/frontend/src/plugins/echarts-hardware.ts b/frontend/src/plugins/echarts-hardware.ts
index f7c1f9f..3259755 100644
--- a/frontend/src/plugins/echarts-hardware.ts
+++ b/frontend/src/plugins/echarts-hardware.ts
@@ -1,3 +1,4 @@
+/** 平台性能页图表按需注册。 */
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { GaugeChart, LineChart } from 'echarts/charts'
diff --git a/frontend/src/plugins/echarts-training-log.ts b/frontend/src/plugins/echarts-training-log.ts
index 4ce6041..9da5bef 100644
--- a/frontend/src/plugins/echarts-training-log.ts
+++ b/frontend/src/plugins/echarts-training-log.ts
@@ -1,3 +1,4 @@
+/** 训练日志曲线按需注册。 */
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
diff --git a/frontend/src/views/eval/create/BasicMetricSetupStep.vue b/frontend/src/views/eval/create/BasicMetricSetupStep.vue
index 962a96d..245a232 100644
--- a/frontend/src/views/eval/create/BasicMetricSetupStep.vue
+++ b/frontend/src/views/eval/create/BasicMetricSetupStep.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 
 export interface BasicMetricSetupDraft {
@@ -19,10 +19,31 @@ const form = defineModel<BasicMetricSetupDraft>({ required: true })
 const formRef = ref<FormInstance>()
 
 const rules: FormRules<BasicMetricSetupDraft> = {
-  bleu_n: [{ required: true, type: 'number', min: 1, max: 8, message: 'BLEU ngram must be between 1 and 8', trigger: 'change' }],
-  output_precision: [{ required: true, type: 'number', min: 0, max: 8, message: 'Precision must be between 0 and 8', trigger: 'change' }],
+  bleu_n: [
+    { required: true, type: 'number', min: 1, max: 8, message: 'BLEU n-gram 必须在 1 到 8 之间', trigger: 'change' },
+  ],
+  rouge_methods: [
+    {
+      validator: (_rule, value, callback) => {
+        if (form.value.rouge_enabled && (!Array.isArray(value) || value.length === 0)) {
+          callback(new Error('请至少选择一个 ROUGE 指标'))
+          return
+        }
+        callback()
+      },
+      trigger: 'change',
+    },
+  ],
+  output_precision: [
+    { required: true, type: 'number', min: 0, max: 8, message: '输出精度必须在 0 到 8 之间', trigger: 'change' },
+  ],
 }
 
+watch(
+  () => form.value.rouge_enabled,
+  () => formRef.value?.validateField('rouge_methods').catch(() => undefined),
+)
+
 async function validate() {
   if (!formRef.value) return false
   try {
@@ -40,39 +61,132 @@ defineExpose({ validate })
     ref="formRef"
     :model="form"
     :rules="rules"
-    label-width="140px"
     class="basic-metric-form"
     :disabled="disabled"
+    label-position="top"
   >
-    <el-form-item label="BLEU">
-      <el-switch v-model="form.bleu_enabled" />
-    </el-form-item>
-    <el-form-item v-if="form.bleu_enabled" label="BLEU ngram" prop="bleu_n">
-      <el-input-number v-model="form.bleu_n" :min="1" :max="8" />
-    </el-form-item>
+    <el-alert
+      title="基础指标为可选参考项"
+      description="可按需启用 BLEU、ROUGE 或余弦相似度；未启用时仅执行大模型评测指标。"
+      type="info"
+      :closable="false"
+      show-icon
+      class="metric-alert"
+    />
 
-    <el-form-item label="ROUGE">
-      <el-switch v-model="form.rouge_enabled" />
-    </el-form-item>
-    <el-form-item v-if="form.rouge_enabled" label="ROUGE methods">
-      <el-checkbox-group v-model="form.rouge_methods">
-        <el-checkbox value="rouge_1">ROUGE-1</el-checkbox>
-        <el-checkbox value="rouge_2">ROUGE-2</el-checkbox>
-        <el-checkbox value="rouge_l">ROUGE-L</el-checkbox>
-      </el-checkbox-group>
-    </el-form-item>
+    <section class="metric-card" :class="{ 'is-enabled': form.bleu_enabled }">
+      <div class="metric-card-header">
+        <div>
+          <h3>BLEU</h3>
+          <p>基于 n-gram 精确率衡量生成内容与参考答案的重合程度。</p>
+        </div>
+        <el-switch v-model="form.bleu_enabled" aria-label="是否启用 BLEU" />
+      </div>
+      <div v-if="form.bleu_enabled" class="metric-options">
+        <el-form-item label="n-gram" prop="bleu_n">
+          <el-input-number v-model="form.bleu_n" :min="1" :max="8" />
+        </el-form-item>
+      </div>
+    </section>
 
-    <el-form-item label="Cosine">
-      <el-switch v-model="form.cosine_enabled" />
-    </el-form-item>
-    <el-form-item label="Output precision" prop="output_precision">
+    <section class="metric-card" :class="{ 'is-enabled': form.rouge_enabled }">
+      <div class="metric-card-header">
+        <div>
+          <h3>ROUGE</h3>
+          <p>基于召回率衡量参考答案中的关键信息是否被生成内容覆盖。</p>
+        </div>
+        <el-switch v-model="form.rouge_enabled" aria-label="是否启用 ROUGE" />
+      </div>
+      <div v-if="form.rouge_enabled" class="metric-options">
+        <el-form-item label="指标项" prop="rouge_methods">
+          <el-checkbox-group v-model="form.rouge_methods">
+            <el-checkbox value="rouge_1">ROUGE-1</el-checkbox>
+            <el-checkbox value="rouge_2">ROUGE-2</el-checkbox>
+            <el-checkbox value="rouge_l">ROUGE-L</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+      </div>
+    </section>
+
+    <section class="metric-card" :class="{ 'is-enabled': form.cosine_enabled }">
+      <div class="metric-card-header">
+        <div>
+          <h3>Cosine 余弦相似度</h3>
+          <p>比较生成内容与参考答案的向量方向，作为语义接近程度的参考。</p>
+        </div>
+        <el-switch v-model="form.cosine_enabled" aria-label="是否启用余弦相似度" />
+      </div>
+    </section>
+
+    <el-form-item label="结果输出精度" prop="output_precision" class="precision-field">
       <el-input-number v-model="form.output_precision" :min="0" :max="8" />
+      <div class="field-tip">用于统一已启用基础指标的结果展示精度，支持 0 到 8 位小数。</div>
     </el-form-item>
   </el-form>
 </template>
 
 <style scoped>
 .basic-metric-form {
-  max-width: 760px;
+  max-width: 920px;
+}
+
+.metric-alert {
+  margin-bottom: 16px;
+}
+
+.metric-card {
+  padding: 18px 20px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  margin-bottom: 14px;
+  background: #fff;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.metric-card.is-enabled {
+  border-color: #a5b4fc;
+  background: #fafaff;
+}
+
+.metric-card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.metric-card h3 {
+  margin: 0;
+  color: #1e293b;
+  font-size: 15px;
+  font-weight: 650;
+}
+
+.metric-card p {
+  margin: 6px 0 0;
+  color: #64748b;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.metric-options {
+  padding-top: 16px;
+  border-top: 1px dashed #e2e8f0;
+  margin-top: 16px;
+}
+
+.metric-options :deep(.el-form-item) {
+  margin-bottom: 0;
+}
+
+.precision-field {
+  margin-top: 20px;
+}
+
+.field-tip {
+  margin-top: 6px;
+  color: #64748b;
+  font-size: 12px;
+  line-height: 20px;
 }
 </style>
diff --git a/frontend/src/views/eval/create/StartEvalStep.vue b/frontend/src/views/eval/create/StartEvalStep.vue
index 8c48e6d..5b3ebed 100644
--- a/frontend/src/views/eval/create/StartEvalStep.vue
+++ b/frontend/src/views/eval/create/StartEvalStep.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { DIMENSION_TYPE_MAP } from '@/constants'
+import { EVAL_METHODS } from '@/constants/dimension'
 import type { DatasetItem, GpuInfo, ModelItem, TrainedModel } from '@/types'
 import type { BasicMetricSetupDraft } from './BasicMetricSetupStep.vue'
 import type { EvalRuleSetupDraft } from './EvalRuleSetupStep.vue'
@@ -14,31 +17,86 @@ const props = defineProps<{
   gpus: GpuInfo[]
 }>()
 
-function nameOf<T extends { id: string | number; name?: string }>(items: T[], id: string | number) {
-  return items.find((item) => item.id === id)?.name || String(id || '-')
-}
+const taskModelName = computed(
+  () => props.trainedModels.find((model) => String(model.id) === String(props.task.model_id))?.name || '未选择',
+)
+const datasetName = computed(() => {
+  if (props.task.data_source === 'inference') return '最近一次可用的推理结果集'
+  return props.evalDatasets.find((dataset) => String(dataset.id) === String(props.task.dataset_id))?.name || '未选择'
+})
+const gpuName = computed(() => {
+  const matched = props.gpus.find((gpu) => String(gpu.id) === String(props.task.gpu_id))
+    || props.gpus[Number(props.task.gpu_id)]
+  return matched ? `${matched.name}（GPU ${props.task.gpu_id}）` : `GPU ${props.task.gpu_id}`
+})
+const llmMetricType = computed(() => DIMENSION_TYPE_MAP[props.llmMetric.type] || '未选择')
+const llmMetricMethod = computed(() => {
+  const method = Array.isArray(props.llmMetric.eval_method)
+    ? props.llmMetric.eval_method[0]
+    : props.llmMetric.eval_method
+  return EVAL_METHODS[props.llmMetric.type]?.find((item) => item.value === method)?.name || method || '未选择'
+})
+const evaluatorName = computed(() => {
+  const selected = props.evalModels.find(
+    (model) => model.name === props.llmMetric.eval_model || String(model.id) === String(props.llmMetric.eval_model),
+  )
+  return selected?.name || props.llmMetric.eval_model || '未选择'
+})
+const enabledBasicMetrics = computed(() => {
+  const labels: string[] = []
+  if (props.basicMetrics.bleu_enabled) labels.push(`BLEU-${props.basicMetrics.bleu_n}`)
+  if (props.basicMetrics.rouge_enabled) {
+    labels.push(...props.basicMetrics.rouge_methods.map((method) => method.replace('_', '-').toUpperCase()))
+  }
+  if (props.basicMetrics.cosine_enabled) labels.push('Cosine')
+  return labels
+})
 </script>
 
 <template>
   <div class="start-eval-step">
-    <el-descriptions :column="2" border>
-      <el-descriptions-item label="Task">{{ props.task.eval_task_name || '-' }}</el-descriptions-item>
-      <el-descriptions-item label="Model">{{ nameOf(props.trainedModels, props.task.model_id) }}</el-descriptions-item>
-      <el-descriptions-item label="GPU">GPU {{ props.task.gpu_id || 0 }}</el-descriptions-item>
-      <el-descriptions-item label="Dataset">
-        {{ props.task.data_source === 'dataset' ? nameOf(props.evalDatasets, props.task.dataset_id) : 'Inference results' }}
-      </el-descriptions-item>
-      <el-descriptions-item label="Eval model">{{ nameOf(props.evalModels, props.llmMetric.eval_model || '') }}</el-descriptions-item>
-      <el-descriptions-item label="Eval method">{{ props.llmMetric.eval_method || '-' }}</el-descriptions-item>
-      <el-descriptions-item label="Basic metrics" :span="2">
-        <el-space wrap>
-          <el-tag v-if="props.basicMetrics.bleu_enabled">BLEU-{{ props.basicMetrics.bleu_n }}</el-tag>
-          <el-tag v-if="props.basicMetrics.rouge_enabled">{{ props.basicMetrics.rouge_methods.join(', ') }}</el-tag>
-          <el-tag v-if="props.basicMetrics.cosine_enabled">Cosine</el-tag>
-          <el-tag effect="plain">Precision {{ props.basicMetrics.output_precision }}</el-tag>
-        </el-space>
-      </el-descriptions-item>
-    </el-descriptions>
+    <el-alert
+      title="配置已完成"
+      description="请确认以下信息，点击底部“开始评测”后将立即创建并启动评测任务。"
+      type="success"
+      :closable="false"
+      show-icon
+      class="ready-alert"
+    />
+
+    <section class="summary-section">
+      <h3>任务信息</h3>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="任务名称">{{ task.eval_task_name }}</el-descriptions-item>
+        <el-descriptions-item label="评测模型">{{ taskModelName }}</el-descriptions-item>
+        <el-descriptions-item label="数据来源">{{ datasetName }}</el-descriptions-item>
+        <el-descriptions-item label="计算资源">{{ gpuName }}</el-descriptions-item>
+        <el-descriptions-item label="加入排行榜">{{ task.leaderboard ? '是' : '否' }}</el-descriptions-item>
+      </el-descriptions>
+    </section>
+
+    <section class="summary-section">
+      <h3>大模型评测指标</h3>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="指标类型">{{ llmMetricType }}</el-descriptions-item>
+        <el-descriptions-item label="评测大模型">{{ evaluatorName }}</el-descriptions-item>
+        <el-descriptions-item label="评估方式">{{ llmMetricMethod }}</el-descriptions-item>
+        <el-descriptions-item v-if="llmMetric.type === 'metric'" label="通过阈值">
+          {{ llmMetric.pass_threshold }}（{{ llmMetric.score_min }}–{{ llmMetric.score_max }}）
+        </el-descriptions-item>
+      </el-descriptions>
+    </section>
+
+    <section class="summary-section">
+      <h3>基础评测指标</h3>
+      <div v-if="enabledBasicMetrics.length" class="metric-tags">
+        <el-tag v-for="metric in enabledBasicMetrics" :key="metric" type="info" effect="plain">
+          {{ metric }}
+        </el-tag>
+        <span class="precision-copy">输出精度：{{ basicMetrics.output_precision }} 位小数</span>
+      </div>
+      <el-empty v-else description="未启用基础评测指标，将仅执行大模型评测" :image-size="56" />
+    </section>
   </div>
 </template>
 
@@ -46,4 +104,53 @@ function nameOf<T extends { id: string | number; name?: string }>(items: T[], id
 .start-eval-step {
   max-width: 920px;
 }
+
+.ready-alert {
+  margin-bottom: 24px;
+}
+
+.summary-section + .summary-section {
+  margin-top: 24px;
+}
+
+.summary-section h3 {
+  padding-left: 10px;
+  border-left: 3px solid #5146e5;
+  margin: 0 0 12px;
+  color: #1e293b;
+  font-size: 15px;
+  font-weight: 650;
+}
+
+.metric-tags {
+  display: flex;
+  min-height: 56px;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.precision-copy {
+  margin-left: auto;
+  color: #64748b;
+  font-size: 13px;
+}
+
+@media (max-width: 760px) {
+  .summary-section :deep(.el-descriptions__body .el-descriptions__table) {
+    table-layout: auto;
+  }
+
+  .metric-tags {
+    flex-wrap: wrap;
+  }
+
+  .precision-copy {
+    width: 100%;
+    margin-left: 0;
+  }
+}
 </style>
diff --git a/frontend/src/views/guide/GuideView.vue b/frontend/src/views/guide/GuideView.vue
index 4e7a078..ec6f111 100644
--- a/frontend/src/views/guide/GuideView.vue
+++ b/frontend/src/views/guide/GuideView.vue
@@ -1,12 +1,1681 @@
+<script setup lang="ts">
+import '@/assets/font-awesome/css/font-awesome.min.css'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import {
+  guideArticleMap,
+  guideArticles,
+  guideNavigation,
+  type GuideArticle,
+  type GuideArticleMode,
+  type GuideScreenshot,
+} from './guideContent'
+
+const route = useRoute()
+const router = useRouter()
+const searchQuery = ref('')
+const mobileNavigationOpen = ref(false)
+const articleScroller = ref<HTMLElement>()
+const searchInput = ref<HTMLInputElement>()
+const previewImage = ref<GuideScreenshot | null>(null)
+const previewCloseButton = ref<HTMLButtonElement>()
+const previewDialog = ref<HTMLElement>()
+const previewTrigger = ref<HTMLElement | null>(null)
+
+const currentArticleId = computed(() => {
+  const hashId = route.hash.replace(/^#/, '')
+  return guideArticleMap.has(hashId) ? hashId : 'getting-started'
+})
+
+const selectedArticle = computed(() =>
+  guideArticleMap.get(currentArticleId.value) ?? guideArticles[0],
+)
+
+interface ArticlePresentation {
+  label: string
+  shortLabel: string
+  className: string
+  icon: string
+  capabilityLabel: string
+  overviewIntro: string
+  architectureTitle: string
+  architectureIntro: string
+  prerequisitesTitle: string
+  prerequisitesIntro: string
+  stepsTitle: string
+  stepsIntro: string
+  validationTitle: string
+  validationIntro: string
+}
+
+const articlePresentationMap: Record<GuideArticleMode, ArticlePresentation> = {
+  workflow: {
+    label: '操作型页面',
+    shortLabel: '操作',
+    className: 'is-workflow',
+    icon: 'fa-hand-pointer-o',
+    capabilityLabel: '能力',
+    overviewIntro: '完成本页后，你将能够：',
+    architectureTitle: '架构与流程',
+    architectureIntro: '该模块在平台中的主要数据流和操作链路如下。',
+    prerequisitesTitle: '开始前准备',
+    prerequisitesIntro: '开始操作前，请逐项确认以下条件。',
+    stepsTitle: '操作步骤',
+    stepsIntro: '建议按照顺序完成，每一步确认无误后再进入下一步。',
+    validationTitle: '完成后验证',
+    validationIntro: '出现以下结果，说明本模块操作已经完成。',
+  },
+  overview: {
+    label: '查看型页面',
+    shortLabel: '查看',
+    className: 'is-overview',
+    icon: 'fa-eye',
+    capabilityLabel: '关注点',
+    overviewIntro: '阅读本页后，你将知道需要重点关注哪些信息。',
+    architectureTitle: '数据来源与展示',
+    architectureIntro: '页面数据从指标采集、汇总展示到辅助判断的关系如下。',
+    prerequisitesTitle: '查看前说明',
+    prerequisitesIntro: '为正确理解页面数据，请先确认以下条件。',
+    stepsTitle: '查看方法',
+    stepsIntro: '建议先看整体状态，再看趋势和异常项，最后按需进入详情。',
+    validationTitle: '结果判断',
+    validationIntro: '完成查看后，应能够得到以下判断。',
+  },
+  troubleshooting: {
+    label: '排查型页面',
+    shortLabel: '排查',
+    className: 'is-troubleshooting',
+    icon: 'fa-search',
+    capabilityLabel: '排查能力',
+    overviewIntro: '使用本页后，你将能够按范围和时间快速定位异常。',
+    architectureTitle: '日志与排查链路',
+    architectureIntro: '日志从业务产生、文件归集到筛选和异常定位的链路如下。',
+    prerequisitesTitle: '排查前准备',
+    prerequisitesIntro: '开始排查前，请先缩小问题范围并准备以下信息。',
+    stepsTitle: '排查方法',
+    stepsIntro: '建议从日志范围开始逐步收窄，保留异常前后的完整上下文。',
+    validationTitle: '排查确认',
+    validationIntro: '满足以下条件，说明本次日志排查已获得有效结论。',
+  },
+}
+
+const articlePresentation = computed(
+  () => articlePresentationMap[selectedArticle.value.mode],
+)
+
+const currentArticleIndex = computed(() =>
+  guideArticles.findIndex((article) => article.id === selectedArticle.value.id),
+)
+
+const previousArticle = computed(() =>
+  currentArticleIndex.value > 0 ? guideArticles[currentArticleIndex.value - 1] : null,
+)
+
+const nextArticle = computed(() =>
+  currentArticleIndex.value < guideArticles.length - 1
+    ? guideArticles[currentArticleIndex.value + 1]
+    : null,
+)
+
+const normalizedSearch = computed(() => searchQuery.value.trim().toLowerCase())
+
+function articleMatches(article: GuideArticle) {
+  if (!normalizedSearch.value) return true
+  const searchableContent = [
+    article.title,
+    article.group,
+    article.summary,
+    ...article.capabilities,
+    ...article.prerequisites,
+    ...article.steps.flatMap((step) => [step.title, step.description]),
+  ].join(' ').toLowerCase()
+  return searchableContent.includes(normalizedSearch.value)
+}
+
+const visibleNavigation = computed(() =>
+  guideNavigation
+    .map((group) => ({
+      ...group,
+      articles: group.articleIds
+        .map((articleId) => guideArticleMap.get(articleId))
+        .filter((article): article is GuideArticle => Boolean(article && articleMatches(article))),
+    }))
+    .filter((group) => group.articles.length > 0),
+)
+
+const searchResults = computed(() =>
+  normalizedSearch.value
+    ? guideArticles.filter(articleMatches).slice(0, 8)
+    : [],
+)
+
+const articleToc = computed(() => [
+  { id: 'overview', label: '功能概览' },
+  { id: 'architecture', label: articlePresentation.value.architectureTitle },
+  { id: 'prerequisites', label: articlePresentation.value.prerequisitesTitle },
+  { id: 'steps', label: articlePresentation.value.stepsTitle },
+  { id: 'validation', label: articlePresentation.value.validationTitle },
+])
+
+function prefersReducedMotion() {
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
+
+async function selectArticle(articleId: string) {
+  await router.push({ path: '/guide', hash: `#${articleId}` })
+  searchQuery.value = ''
+  mobileNavigationOpen.value = false
+  previewImage.value = null
+  await nextTick()
+  articleScroller.value?.scrollTo({ top: 0, behavior: 'auto' })
+}
+
+async function openImagePreview(screenshot: GuideScreenshot, event: MouseEvent) {
+  previewTrigger.value = event.currentTarget as HTMLElement
+  previewImage.value = screenshot
+  await nextTick()
+  previewCloseButton.value?.focus()
+}
+
+async function closeImagePreview() {
+  previewImage.value = null
+  await nextTick()
+  previewTrigger.value?.focus()
+  previewTrigger.value = null
+}
+
+function handleGlobalKeydown(event: KeyboardEvent) {
+  if (previewImage.value) {
+    if (event.key === 'Escape') {
+      void closeImagePreview()
+      return
+    }
+
+    if (event.key === 'Tab') {
+      const focusableElements = Array.from(
+        previewDialog.value?.querySelectorAll<HTMLElement>('a[href], button:not([disabled])') ?? [],
+      )
+      if (focusableElements.length === 0) return
+
+      const currentIndex = focusableElements.indexOf(document.activeElement as HTMLElement)
+      const nextIndex = event.shiftKey
+        ? (currentIndex <= 0 ? focusableElements.length - 1 : currentIndex - 1)
+        : (currentIndex + 1) % focusableElements.length
+      event.preventDefault()
+      focusableElements[nextIndex]?.focus()
+    }
+    return
+  }
+
+  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+    event.preventDefault()
+    searchInput.value?.focus()
+  }
+}
+
+onMounted(() => window.addEventListener('keydown', handleGlobalKeydown))
+onUnmounted(() => window.removeEventListener('keydown', handleGlobalKeydown))
+
+function scrollToSection(sectionId: string) {
+  document.getElementById(sectionId)?.scrollIntoView({
+    behavior: prefersReducedMotion() ? 'auto' : 'smooth',
+    block: 'start',
+  })
+}
+
+watch(
+  () => selectedArticle.value.title,
+  (title) => {
+    document.title = `${title} - 使用文档 - 远光软件微调平台`
+  },
+  { immediate: true },
+)
+</script>
+
 <template>
-  <section class="simple-page">
-    <h1>使用文档</h1>
-    <p>第一版系统已接入后端、数据集、模型、微调任务、算力节点和训练日志主链路。</p>
-  </section>
+  <div class="docs-shell" :inert="previewImage ? true : undefined">
+    <a class="skip-link" href="#article-main">跳到文档正文</a>
+
+    <header class="docs-topbar">
+      <button
+        type="button"
+        class="mobile-nav-button"
+        :aria-expanded="mobileNavigationOpen"
+        aria-label="打开文档目录"
+        @click="mobileNavigationOpen = !mobileNavigationOpen"
+      >
+        <i class="fa fa-bars" aria-hidden="true" />
+      </button>
+
+      <button type="button" class="docs-brand" @click="selectArticle('getting-started')">
+        <span class="brand-mark"><i class="fa fa-book" aria-hidden="true" /></span>
+        <span>
+          <strong>微调平台文档</strong>
+          <small>使用指南</small>
+        </span>
+      </button>
+
+      <div class="docs-search-wrap">
+        <label class="docs-search" for="docs-search-input">
+          <i class="fa fa-search" aria-hidden="true" />
+          <input
+            id="docs-search-input"
+            ref="searchInput"
+            v-model="searchQuery"
+            type="search"
+            placeholder="搜索功能、查看方法与操作流程"
+            autocomplete="off"
+            @keyup.esc="searchQuery = ''"
+          />
+          <kbd>⌘ K</kbd>
+        </label>
+
+        <div v-if="normalizedSearch" class="search-results" role="listbox">
+          <button
+            v-for="article in searchResults"
+            :key="article.id"
+            type="button"
+            role="option"
+            @click="selectArticle(article.id)"
+          >
+            <span>{{ article.group }}</span>
+            <strong>{{ article.title }}</strong>
+            <small>{{ article.summary }}</small>
+          </button>
+          <div v-if="searchResults.length === 0" class="search-empty">
+            没有找到相关文档，请尝试“训练”“数据集”或“日志”。
+          </div>
+        </div>
+      </div>
+
+      <a class="back-platform" href="/dashboard">
+        <span>返回平台</span>
+        <i class="fa fa-external-link" aria-hidden="true" />
+      </a>
+    </header>
+
+    <div class="docs-workspace">
+      <button
+        v-if="mobileNavigationOpen"
+        type="button"
+        class="mobile-nav-mask"
+        aria-label="关闭文档目录"
+        @click="mobileNavigationOpen = false"
+      />
+
+      <aside class="docs-sidebar" :class="{ 'is-open': mobileNavigationOpen }">
+        <div class="sidebar-label">使用指南</div>
+        <nav aria-label="文档主目录">
+          <section v-for="group in visibleNavigation" :key="group.title" class="nav-group">
+            <h2>{{ group.title }}</h2>
+            <button
+              v-for="article in group.articles"
+              :key="article.id"
+              type="button"
+              :class="{ 'is-active': selectedArticle.id === article.id }"
+              @click="selectArticle(article.id)"
+            >
+              <span>{{ article.title }}</span>
+              <span class="nav-item-meta">
+                <small
+                  class="nav-mode-badge"
+                  :class="articlePresentationMap[article.mode].className"
+                >
+                  {{ articlePresentationMap[article.mode].shortLabel }}
+                </small>
+                <small v-if="article.status" class="nav-status-badge">{{ article.status }}</small>
+              </span>
+            </button>
+          </section>
+        </nav>
+      </aside>
+
+      <main id="article-main" ref="articleScroller" class="article-scroller" tabindex="-1">
+        <article class="docs-article">
+          <header class="article-header">
+            <div class="article-breadcrumb">
+              <span>使用指南</span>
+              <i class="fa fa-angle-right" aria-hidden="true" />
+              <span>{{ selectedArticle.group }}</span>
+            </div>
+            <div class="article-title-row">
+              <h1>{{ selectedArticle.title }}</h1>
+              <span class="article-mode-badge" :class="articlePresentation.className">
+                <i class="fa" :class="articlePresentation.icon" aria-hidden="true" />
+                {{ articlePresentation.label }}
+              </span>
+              <span v-if="selectedArticle.status" class="building-badge">{{ selectedArticle.status }}</span>
+            </div>
+            <p>{{ selectedArticle.summary }}</p>
+          </header>
+
+          <section id="overview" class="article-section">
+            <h2>功能概览</h2>
+            <p class="section-intro">{{ articlePresentation.overviewIntro }}</p>
+            <div class="capability-grid">
+              <div v-for="(capability, index) in selectedArticle.capabilities" :key="capability">
+                <span><i class="fa fa-check" aria-hidden="true" /></span>
+                <div>
+                  <strong>{{ articlePresentation.capabilityLabel }} {{ index + 1 }}</strong>
+                  <p>{{ capability }}</p>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section id="architecture" class="article-section">
+            <h2>{{ articlePresentation.architectureTitle }}</h2>
+            <p class="section-intro">{{ articlePresentation.architectureIntro }}</p>
+            <div
+              class="architecture-panel"
+              role="img"
+              :aria-label="`${selectedArticle.title}${articlePresentation.architectureTitle}`"
+            >
+              <div class="architecture-flow">
+                <template v-for="(node, index) in selectedArticle.architecture" :key="node">
+                  <div class="architecture-node">
+                    <span>{{ String(index + 1).padStart(2, '0') }}</span>
+                    <strong>{{ node }}</strong>
+                  </div>
+                  <i
+                    v-if="index < selectedArticle.architecture.length - 1"
+                    class="fa fa-long-arrow-right architecture-arrow"
+                    aria-hidden="true"
+                  />
+                </template>
+              </div>
+              <div v-if="selectedArticle.id === 'getting-started'" class="architecture-foundation">
+                <i class="fa fa-shield" aria-hidden="true" />
+                <span>用户权限、GPU 资源与运行日志贯穿整个模型生命周期</span>
+              </div>
+            </div>
+          </section>
+
+          <section id="prerequisites" class="article-section">
+            <h2>{{ articlePresentation.prerequisitesTitle }}</h2>
+            <p class="section-intro">{{ articlePresentation.prerequisitesIntro }}</p>
+            <ul class="check-list">
+              <li v-for="item in selectedArticle.prerequisites" :key="item">
+                <i class="fa fa-square-o" aria-hidden="true" />
+                <span>{{ item }}</span>
+              </li>
+            </ul>
+          </section>
+
+          <section id="steps" class="article-section">
+            <h2>{{ articlePresentation.stepsTitle }}</h2>
+            <p class="section-intro">{{ articlePresentation.stepsIntro }}</p>
+            <ol class="step-list">
+              <li v-for="(step, index) in selectedArticle.steps" :key="step.title" class="step-item">
+                <div class="step-index">{{ index + 1 }}</div>
+                <div class="step-content">
+                  <h3>{{ step.title }}</h3>
+                  <p>{{ step.description }}</p>
+                  <figure v-if="step.screenshot" class="step-screenshot">
+                    <button
+                      type="button"
+                      class="screenshot-button"
+                      :aria-label="`放大查看：${step.screenshot.caption}`"
+                      @click="openImagePreview(step.screenshot, $event)"
+                    >
+                      <img
+                        :src="step.screenshot.src"
+                        :alt="step.screenshot.alt"
+                        :width="step.screenshot.width"
+                        :height="step.screenshot.height"
+                        loading="lazy"
+                        decoding="async"
+                      />
+                      <span class="screenshot-zoom">
+                        <i class="fa fa-search-plus" aria-hidden="true" />
+                        查看大图
+                      </span>
+                    </button>
+                    <figcaption>
+                      <i class="fa fa-picture-o" aria-hidden="true" />
+                      {{ step.screenshot.caption }}
+                    </figcaption>
+                  </figure>
+                </div>
+              </li>
+            </ol>
+          </section>
+
+          <section id="validation" class="article-section">
+            <h2>{{ articlePresentation.validationTitle }}</h2>
+            <p class="section-intro">{{ articlePresentation.validationIntro }}</p>
+            <div class="validation-box">
+              <div v-for="item in selectedArticle.validation" :key="item">
+                <i class="fa fa-check-circle" aria-hidden="true" />
+                <span>{{ item }}</span>
+              </div>
+            </div>
+          </section>
+
+          <aside v-if="selectedArticle.notice" class="article-notice" :class="{ 'is-building': selectedArticle.status }">
+            <i class="fa" :class="selectedArticle.status ? 'fa-wrench' : 'fa-lightbulb-o'" aria-hidden="true" />
+            <div>
+              <strong>{{ selectedArticle.status ? '功能状态' : '使用建议' }}</strong>
+              <p>{{ selectedArticle.notice }}</p>
+            </div>
+          </aside>
+
+          <nav class="article-pagination" aria-label="文档翻页">
+            <button v-if="previousArticle" type="button" @click="selectArticle(previousArticle.id)">
+              <i class="fa fa-arrow-left" aria-hidden="true" />
+              <span><small>上一篇</small><strong>{{ previousArticle.title }}</strong></span>
+            </button>
+            <span v-else />
+            <button v-if="nextArticle" type="button" class="is-next" @click="selectArticle(nextArticle.id)">
+              <span><small>下一篇</small><strong>{{ nextArticle.title }}</strong></span>
+              <i class="fa fa-arrow-right" aria-hidden="true" />
+            </button>
+          </nav>
+        </article>
+      </main>
+
+      <aside class="article-toc" aria-label="本页导航">
+        <h2>本页导航</h2>
+        <button
+          v-for="item in articleToc"
+          :key="item.id"
+          type="button"
+          @click="scrollToSection(item.id)"
+        >
+          {{ item.label }}
+        </button>
+      </aside>
+    </div>
+
+    <Teleport to="body">
+      <div
+        v-if="previewImage"
+        class="image-preview-overlay"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="image-preview-title"
+        @click.self="closeImagePreview"
+      >
+        <div ref="previewDialog" class="image-preview-dialog">
+          <div class="image-preview-toolbar">
+            <p id="image-preview-title">{{ previewImage.caption }}</p>
+            <div class="image-preview-actions">
+              <a :href="previewImage.src" target="_blank" rel="noopener noreferrer">
+                <i class="fa fa-external-link" aria-hidden="true" />
+                打开原图
+              </a>
+              <button
+                ref="previewCloseButton"
+                type="button"
+                aria-label="关闭图片预览"
+                @click="closeImagePreview"
+              >
+                <i class="fa fa-times" aria-hidden="true" />
+              </button>
+            </div>
+          </div>
+          <div class="image-preview-canvas">
+            <img :src="previewImage.src" :alt="previewImage.alt" />
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
 </template>
 
-<style scoped>
-.simple-page {
+<style scoped lang="scss">
+.docs-shell {
+  --docs-primary: #4f46e5;
+  --docs-primary-soft: #eef2ff;
+  --docs-border: #e5e7eb;
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+  background: #fff;
+  color: #1f2937;
+}
+
+.skip-link {
+  position: fixed;
+  left: 16px;
+  top: 8px;
+  z-index: 200;
+  padding: 9px 14px;
+  border-radius: 8px;
+  background: #fff;
+  color: var(--docs-primary);
+  font-size: 13px;
+  font-weight: 600;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
+  transform: translateY(-160%);
+
+  &:focus {
+    transform: translateY(0);
+  }
+}
+
+.docs-topbar {
+  height: 64px;
+  padding: 0 24px;
+  border-bottom: 1px solid var(--docs-border);
+  display: grid;
+  grid-template-columns: 260px minmax(300px, 560px) 1fr;
+  align-items: center;
+  gap: 28px;
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.docs-brand {
+  width: fit-content;
+  padding: 0;
+  border: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: transparent;
+  color: #111827;
+  cursor: pointer;
+  text-align: left;
+
+  > span:last-child {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  strong {
+    font-size: 14px;
+  }
+
+  small {
+    color: #9ca3af;
+    font-size: 11px;
+  }
+}
+
+.brand-mark {
+  width: 36px;
+  height: 36px;
+  border-radius: 9px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--docs-primary);
+  color: #fff;
+  font-size: 16px;
+}
+
+.docs-search-wrap {
+  position: relative;
+  width: 100%;
+}
+
+.docs-search {
+  height: 40px;
+  padding: 0 10px 0 13px;
+  border: 1px solid #d8dce5;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  background: #f9fafb;
+  color: #9ca3af;
+
+  &:focus-within {
+    border-color: #a5b4fc;
+    background: #fff;
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+  }
+
+  input {
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    flex: 1;
+    background: transparent;
+    color: #1f2937;
+    font: inherit;
+    font-size: 13px;
+
+    &::placeholder {
+      color: #9ca3af;
+    }
+  }
+
+  kbd {
+    padding: 2px 6px;
+    border: 1px solid #e5e7eb;
+    border-radius: 5px;
+    background: #fff;
+    color: #9ca3af;
+    font-family: inherit;
+    font-size: 10px;
+  }
+}
+
+.search-results {
+  position: absolute;
+  z-index: 150;
+  left: 0;
+  right: 0;
+  top: 48px;
+  max-height: 420px;
+  padding: 7px;
+  border: 1px solid var(--docs-border);
+  border-radius: 12px;
+  overflow-y: auto;
+  background: #fff;
+  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.18);
+
+  button {
+    width: 100%;
+    padding: 10px 12px;
+    border: 0;
+    border-radius: 8px;
+    display: grid;
+    grid-template-columns: 74px 1fr;
+    gap: 4px 10px;
+    background: transparent;
+    color: #374151;
+    cursor: pointer;
+    text-align: left;
+
+    &:hover,
+    &:focus-visible {
+      outline: 0;
+      background: var(--docs-primary-soft);
+    }
+
+    > span {
+      grid-row: 1 / 3;
+      color: #9ca3af;
+      font-size: 11px;
+    }
+
+    strong {
+      font-size: 13px;
+    }
+
+    small {
+      overflow: hidden;
+      color: #6b7280;
+      font-size: 11px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
+.search-empty {
+  padding: 22px 16px;
+  color: #6b7280;
+  font-size: 12px;
+  line-height: 1.6;
+  text-align: center;
+}
+
+.back-platform {
+  min-height: 38px;
+  padding: 0 13px;
+  border: 1px solid #d8dce5;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: end;
+  gap: 8px;
+  color: #4b5563;
+  font-size: 12px;
+  font-weight: 600;
+  text-decoration: none;
+
+  &:hover {
+    border-color: #a5b4fc;
+    background: var(--docs-primary-soft);
+    color: var(--docs-primary);
+  }
+}
+
+.mobile-nav-button {
+  display: none;
+}
+
+.docs-workspace {
+  height: calc(100% - 64px);
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr) 220px;
+  overflow: hidden;
+}
+
+.docs-sidebar {
+  padding: 24px 18px 36px;
+  border-right: 1px solid var(--docs-border);
+  overflow-y: auto;
+  background: #fbfbfc;
+}
+
+.sidebar-label {
+  margin: 0 10px 20px;
+  color: #111827;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.nav-group {
+  + .nav-group {
+    margin-top: 22px;
+  }
+
+  h2 {
+    margin: 0 10px 7px;
+    color: #9ca3af;
+    font-size: 11px;
+    font-weight: 600;
+  }
+
+  button {
+    width: 100%;
+    min-height: 36px;
+    padding: 8px 10px;
+    border: 0;
+    border-radius: 7px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    background: transparent;
+    color: #4b5563;
+    cursor: pointer;
+    font: inherit;
+    font-size: 13px;
+    text-align: left;
+
+    &:hover {
+      background: #f1f3f7;
+      color: #111827;
+    }
+
+    &.is-active {
+      background: var(--docs-primary-soft);
+      color: var(--docs-primary);
+      font-weight: 600;
+    }
+
+    &:focus-visible {
+      outline: 2px solid rgba(79, 70, 229, 0.28);
+      outline-offset: 1px;
+    }
+  }
+}
+
+.nav-item-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: 0 0 auto;
+}
+
+.nav-mode-badge,
+.nav-status-badge {
+  padding: 2px 5px;
+  border-radius: 999px;
+  font-size: 9px;
+  font-weight: 600;
+}
+
+.nav-mode-badge {
+  &.is-workflow {
+    background: #eef2ff;
+    color: #4f46e5;
+  }
+
+  &.is-overview {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+
+  &.is-troubleshooting {
+    background: #fff7ed;
+    color: #c2410c;
+  }
+}
+
+.nav-status-badge {
+  background: #fff7ed;
+  color: #c2410c;
+}
+
+.article-scroller {
+  min-width: 0;
+  overflow-y: auto;
+  background: #fff;
+}
+
+.docs-article {
+  width: min(100%, 900px);
+  margin: 0 auto;
+  padding: 52px 54px 72px;
+}
+
+.article-header {
+  padding-bottom: 30px;
+  border-bottom: 1px solid var(--docs-border);
+
+  > p {
+    max-width: 760px;
+    margin: 16px 0 0;
+    color: #5f6877;
+    font-size: 16px;
+    line-height: 1.8;
+  }
+}
+
+.article-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #9ca3af;
+  font-size: 12px;
+
+  i {
+    font-size: 11px;
+  }
+}
+
+.article-title-row {
+  margin-top: 16px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+
+  h1 {
+    margin: 0;
+    color: #111827;
+    font-size: clamp(30px, 4vw, 42px);
+    line-height: 1.18;
+    letter-spacing: -0.03em;
+  }
+}
+
+.article-mode-badge {
+  min-height: 25px;
+  padding: 4px 9px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 600;
+
+  &.is-workflow {
+    background: #eef2ff;
+    color: #4f46e5;
+  }
+
+  &.is-overview {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+
+  &.is-troubleshooting {
+    background: #fff7ed;
+    color: #c2410c;
+  }
+}
+
+.building-badge {
+  padding: 4px 9px;
+  border-radius: 999px;
+  background: #fff7ed;
+  color: #c2410c;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.article-section {
+  scroll-margin-top: 24px;
+  padding-top: 42px;
+
+  h2 {
+    margin: 0;
+    color: #111827;
+    font-size: 24px;
+    line-height: 1.3;
+    letter-spacing: -0.015em;
+  }
+}
+
+.section-intro {
+  margin: 10px 0 0;
+  color: #6b7280;
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.capability-grid {
+  margin-top: 18px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+
+  > div {
+    padding: 16px;
+    border: 1px solid #e6e9ef;
+    border-radius: 10px;
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    background: #fbfcfe;
+
+    > span {
+      width: 24px;
+      height: 24px;
+      border-radius: 7px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 auto;
+      background: var(--docs-primary-soft);
+      color: var(--docs-primary);
+      font-size: 11px;
+    }
+
+    strong {
+      color: #374151;
+      font-size: 12px;
+    }
+
+    p {
+      margin: 5px 0 0;
+      color: #6b7280;
+      font-size: 12px;
+      line-height: 1.55;
+    }
+  }
+}
+
+.architecture-panel {
+  margin-top: 18px;
   padding: 24px;
+  border: 1px solid #dfe4f1;
+  border-radius: 12px;
+  background: #f8f9ff;
+}
+
+.architecture-flow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.architecture-node {
+  min-width: 92px;
+  min-height: 72px;
+  padding: 12px 10px;
+  border: 1px solid #d8ddf2;
+  border-radius: 9px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  background: #fff;
+  text-align: center;
+  box-shadow: 0 4px 12px rgba(49, 46, 129, 0.05);
+
+  span {
+    color: #a5b4fc;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+  }
+
+  strong {
+    color: #374151;
+    font-size: 11px;
+    line-height: 1.4;
+  }
+}
+
+.architecture-arrow {
+  color: #a5b4fc;
+  flex: 0 0 auto;
+}
+
+.architecture-foundation {
+  margin-top: 18px;
+  padding: 10px 14px;
+  border: 1px dashed #c7d2fe;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: #5b5f78;
+  font-size: 11px;
+
+  i {
+    color: var(--docs-primary);
+  }
+}
+
+.check-list {
+  margin: 18px 0 0;
+  padding: 0;
+  display: grid;
+  gap: 10px;
+  list-style: none;
+
+  li {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    color: #4b5563;
+    font-size: 14px;
+    line-height: 1.65;
+
+    i {
+      margin-top: 5px;
+      color: #9ca3af;
+    }
+  }
+}
+
+.step-list {
+  margin: 22px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.step-item {
+  position: relative;
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  gap: 16px;
+
+  &:not(:last-child) {
+    padding-bottom: 26px;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 16px;
+      top: 34px;
+      bottom: 0;
+      width: 1px;
+      background: #dfe3ea;
+    }
+  }
+}
+
+.step-index {
+  position: relative;
+  z-index: 1;
+  width: 34px;
+  height: 34px;
+  border: 1px solid #c7d2fe;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  color: var(--docs-primary);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.step-content {
+  padding: 5px 0 0;
+
+  h3 {
+    margin: 0;
+    color: #1f2937;
+    font-size: 15px;
+  }
+
+  p {
+    margin: 7px 0 0;
+    color: #606a79;
+    font-size: 14px;
+    line-height: 1.75;
+  }
+}
+
+.step-screenshot {
+  margin: 18px 0 3px;
+  border: 1px solid #dfe3ec;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(30, 41, 59, 0.07);
+}
+
+.screenshot-button {
+  position: relative;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  display: block;
+  overflow: hidden;
+  background: #f5f6fa;
+  cursor: zoom-in;
+
+  img {
+    width: 100%;
+    height: auto;
+    display: block;
+    transition: transform 180ms ease;
+  }
+
+  &:hover img {
+    transform: scale(1.006);
+  }
+
+  &:focus-visible {
+    outline: 3px solid rgba(79, 70, 229, 0.34);
+    outline-offset: -3px;
+  }
+}
+
+.screenshot-zoom {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  padding: 7px 10px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 7px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(17, 24, 39, 0.78);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  backdrop-filter: blur(8px);
+}
+
+.step-screenshot figcaption {
+  padding: 11px 13px;
+  border-top: 1px solid #e8ebf1;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  background: #fbfcfe;
+  color: #687386;
+  font-size: 12px;
+  line-height: 1.6;
+
+  i {
+    margin-top: 3px;
+    color: var(--docs-primary);
+  }
+}
+
+.image-preview-overlay {
+  --docs-primary: #4f46e5;
+  --docs-primary-soft: #eef2ff;
+  position: fixed;
+  z-index: 1000;
+  inset: 0;
+  padding: 32px;
+  display: grid;
+  place-items: center;
+  background: rgba(15, 23, 42, 0.82);
+  backdrop-filter: blur(8px);
+}
+
+.image-preview-dialog {
+  width: min(1440px, 100%);
+  max-height: calc(100vh - 64px);
+  max-height: calc(100dvh - 64px);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 14px;
+  overflow: hidden;
+  background: #111827;
+  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
+}
+
+.image-preview-toolbar {
+  min-height: 52px;
+  padding: 8px 10px 8px 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  background: #fff;
+
+  p {
+    margin: 0;
+    color: #4b5563;
+    font-size: 13px;
+    line-height: 1.5;
+  }
+
+  a {
+    min-height: 36px;
+    padding: 0 11px;
+    border-radius: 8px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: #4b5563;
+    font-size: 12px;
+    font-weight: 600;
+    text-decoration: none;
+
+    &:hover,
+    &:focus-visible {
+      outline: 0;
+      background: var(--docs-primary-soft);
+      color: var(--docs-primary);
+    }
+  }
+
+  button {
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border: 0;
+    border-radius: 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    background: #f3f4f6;
+    color: #4b5563;
+    cursor: pointer;
+
+    &:hover,
+    &:focus-visible {
+      outline: 0;
+      background: var(--docs-primary-soft);
+      color: var(--docs-primary);
+    }
+  }
+}
+
+.image-preview-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 0 0 auto;
+}
+
+.image-preview-canvas {
+  max-height: calc(100vh - 116px);
+  max-height: calc(100dvh - 116px);
+  padding: 12px;
+  overflow: auto;
+  background: #111827;
+
+  img {
+    width: auto;
+    max-width: 100%;
+    max-height: calc(100vh - 140px);
+    max-height: calc(100dvh - 140px);
+    margin: 0 auto;
+    display: block;
+  }
+}
+
+.validation-box {
+  margin-top: 18px;
+  padding: 18px 20px;
+  border: 1px solid #bbf7d0;
+  border-radius: 10px;
+  display: grid;
+  gap: 11px;
+  background: #f0fdf4;
+
+  > div {
+    display: flex;
+    align-items: flex-start;
+    gap: 9px;
+    color: #3f5f4b;
+    font-size: 13px;
+    line-height: 1.6;
+
+    i {
+      margin-top: 3px;
+      color: #16a34a;
+    }
+  }
+}
+
+.article-notice {
+  margin-top: 36px;
+  padding: 16px 18px;
+  border-left: 4px solid #818cf8;
+  border-radius: 8px;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  background: #f5f7ff;
+  color: #4b5563;
+
+  > i {
+    margin-top: 3px;
+    color: var(--docs-primary);
+  }
+
+  strong {
+    color: #374151;
+    font-size: 13px;
+  }
+
+  p {
+    margin: 5px 0 0;
+    font-size: 13px;
+    line-height: 1.65;
+  }
+
+  &.is-building {
+    border-left-color: #f59e0b;
+    background: #fffbeb;
+
+    > i {
+      color: #d97706;
+    }
+  }
+}
+
+.article-pagination {
+  margin-top: 54px;
+  padding-top: 22px;
+  border-top: 1px solid var(--docs-border);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+
+  button {
+    min-height: 66px;
+    padding: 12px 16px;
+    border: 1px solid #e1e5ec;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background: #fff;
+    color: #6b7280;
+    cursor: pointer;
+    font: inherit;
+    text-align: left;
+
+    &:hover {
+      border-color: #a5b4fc;
+      color: var(--docs-primary);
+    }
+
+    &.is-next {
+      justify-content: flex-end;
+      text-align: right;
+    }
+
+    span {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    small {
+      color: #9ca3af;
+      font-size: 10px;
+    }
+
+    strong {
+      color: inherit;
+      font-size: 13px;
+    }
+  }
+}
+
+.article-toc {
+  padding: 46px 24px;
+  border-left: 1px solid var(--docs-border);
+  overflow-y: auto;
+  background: #fff;
+
+  h2 {
+    margin: 0 0 12px;
+    color: #9ca3af;
+    font-size: 11px;
+    font-weight: 600;
+  }
+
+  button {
+    width: 100%;
+    min-height: 32px;
+    padding: 6px 0;
+    border: 0;
+    display: block;
+    background: transparent;
+    color: #6b7280;
+    cursor: pointer;
+    font: inherit;
+    font-size: 12px;
+    text-align: left;
+
+    &:hover {
+      color: var(--docs-primary);
+    }
+  }
+}
+
+.mobile-nav-mask {
+  display: none;
+}
+
+@media (max-width: 1200px) {
+  .docs-workspace {
+    grid-template-columns: 240px minmax(0, 1fr);
+  }
+
+  .article-toc {
+    display: none;
+  }
+
+  .docs-topbar {
+    grid-template-columns: 220px minmax(280px, 520px) 1fr;
+  }
+}
+
+@media (max-width: 900px) {
+  .docs-topbar {
+    height: 58px;
+    padding: 0 14px;
+    grid-template-columns: 40px minmax(0, 1fr) auto;
+    gap: 10px;
+  }
+
+  .mobile-nav-button {
+    width: 38px;
+    height: 38px;
+    padding: 0;
+    border: 1px solid #e1e5ec;
+    border-radius: 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: #fff;
+    color: #4b5563;
+  }
+
+  .docs-brand {
+    display: none;
+  }
+
+  .docs-search-wrap {
+    grid-column: 2;
+  }
+
+  .docs-search kbd,
+  .back-platform span {
+    display: none;
+  }
+
+  .back-platform {
+    width: 38px;
+    min-height: 38px;
+    padding: 0;
+  }
+
+  .docs-workspace {
+    height: calc(100% - 58px);
+    grid-template-columns: 1fr;
+  }
+
+  .docs-sidebar {
+    position: fixed;
+    z-index: 120;
+    left: 0;
+    top: 58px;
+    bottom: 0;
+    width: min(300px, 84vw);
+    transform: translateX(-104%);
+    transition: transform 200ms ease;
+    box-shadow: 16px 0 40px rgba(15, 23, 42, 0.16);
+
+    &.is-open {
+      transform: translateX(0);
+    }
+  }
+
+  .mobile-nav-mask {
+    position: fixed;
+    z-index: 110;
+    inset: 58px 0 0;
+    border: 0;
+    display: block;
+    background: rgba(15, 23, 42, 0.38);
+  }
+
+  .docs-article {
+    padding: 42px 32px 64px;
+  }
+}
+
+@media (max-width: 640px) {
+  .docs-article {
+    padding: 32px 20px 52px;
+  }
+
+  .article-header > p {
+    font-size: 15px;
+  }
+
+  .article-section {
+    padding-top: 34px;
+
+    h2 {
+      font-size: 21px;
+    }
+  }
+
+  .capability-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .architecture-flow {
+    flex-direction: column;
+  }
+
+  .architecture-node {
+    width: 100%;
+    min-height: 62px;
+  }
+
+  .architecture-arrow {
+    transform: rotate(90deg);
+  }
+
+  .architecture-panel {
+    padding: 18px;
+  }
+
+  .step-item {
+    grid-template-columns: 30px minmax(0, 1fr);
+    gap: 12px;
+
+    &:not(:last-child)::before {
+      left: 14px;
+      top: 30px;
+    }
+  }
+
+  .step-index {
+    width: 30px;
+    height: 30px;
+  }
+
+  .step-screenshot {
+    margin-top: 15px;
+    border-radius: 9px;
+  }
+
+  .screenshot-zoom {
+    right: 8px;
+    bottom: 8px;
+    padding: 6px 8px;
+  }
+
+  .image-preview-overlay {
+    padding: 10px;
+  }
+
+  .image-preview-dialog {
+    max-height: calc(100vh - 20px);
+    max-height: calc(100dvh - 20px);
+    border-radius: 10px;
+  }
+
+  .image-preview-toolbar {
+    padding-left: 12px;
+
+    p {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    a {
+      width: 36px;
+      padding: 0;
+      justify-content: center;
+
+      i {
+        margin: 0;
+        font-size: 12px;
+      }
+
+      /* 小屏保留图标，避免工具栏文字挤压标题。 */
+      font-size: 0;
+    }
+  }
+
+  .image-preview-canvas {
+    max-height: calc(100vh - 72px);
+    max-height: calc(100dvh - 72px);
+    padding: 6px;
+  }
+
+  .article-pagination {
+    grid-template-columns: 1fr;
+
+    > span {
+      display: none;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .docs-sidebar {
+    transition: none;
+  }
+
+  .screenshot-button img {
+    transition: none;
+  }
 }
 </style>
diff --git a/frontend/src/views/guide/guideContent.ts b/frontend/src/views/guide/guideContent.ts
new file mode 100644
index 0000000..1385b6d
--- /dev/null
+++ b/frontend/src/views/guide/guideContent.ts
@@ -0,0 +1,381 @@
+export interface GuideScreenshot {
+  src: string
+  alt: string
+  caption: string
+  width: number
+  height: number
+}
+
+export interface GuideStep {
+  title: string
+  description: string
+  screenshot?: GuideScreenshot
+}
+
+export type GuideArticleMode = 'workflow' | 'overview' | 'troubleshooting'
+
+export interface GuideArticle {
+  id: string
+  group: string
+  mode: GuideArticleMode
+  title: string
+  summary: string
+  capabilities: string[]
+  architecture: string[]
+  prerequisites: string[]
+  steps: GuideStep[]
+  validation: string[]
+  notice?: string
+  status?: '建设中'
+}
+
+export interface GuideNavigationGroup {
+  title: string
+  articleIds: string[]
+}
+
+const guideScreenshots = {
+  serviceDashboard: {
+    src: '/guide/screenshots/service-dashboard.png',
+    alt: '远光软件微调平台服务看板主内容，展示运行指标、服务状态和训练任务列表',
+    caption: '服务看板：集中查看平台指标、服务状态和最近训练任务。',
+    width: 1243,
+    height: 1058,
+  },
+  fineTuneCreate: {
+    src: '/guide/screenshots/fine-tune-create.jpg',
+    alt: '远光软件微调平台创建训练任务主内容',
+    caption: '创建训练任务：在同一页面配置模型、数据集、GPU 和训练参数。',
+    width: 1040,
+    height: 720,
+  },
+  trainingDetail: {
+    src: '/guide/screenshots/training-detail.jpg',
+    alt: '远光软件微调平台训练任务详情主内容，展示任务信息和训练指标',
+    caption: '训练任务详情：先核对任务信息与训练参数，再继续向下查看指标和日志。',
+    width: 1200,
+    height: 900,
+  },
+  modelEdit: {
+    src: '/guide/screenshots/model-edit.jpg',
+    alt: '远光软件微调平台编辑模型配置主内容',
+    caption: '模型编辑页：配置模型用途、来源、本地路径和说明。',
+    width: 1200,
+    height: 1024,
+  },
+  dataProcessCreate: {
+    src: '/guide/screenshots/data-process-create.jpg',
+    alt: '远光软件微调平台新建数据处理任务主内容',
+    caption: '新建数据处理任务：通过四步向导选择处理类型并上传源数据。',
+    width: 1200,
+    height: 1024,
+  },
+  dataProcessPreview: {
+    src: '/guide/screenshots/data-process-preview.jpg',
+    alt: '远光软件微调平台数据处理切分预览主内容',
+    caption: '数据预览：定位切片并检查、编辑切分后的样本内容。',
+    width: 1200,
+    height: 1024,
+  },
+}
+
+export const guideArticles: GuideArticle[] = [
+  {
+    id: 'getting-started',
+    group: '入门',
+    mode: 'workflow',
+    title: '快速开始',
+    summary: '通过一次完整的“模型准备 → 数据准备 → 模型训练 → 评测与推理”流程，快速理解微调平台的核心使用方式。',
+    capabilities: [
+      '理解平台各模块在模型微调生命周期中的位置',
+      '完成一个最小可用的训练任务并查看运行状态',
+      '使用评测与推理验证训练后的模型效果',
+    ],
+    architecture: ['模型管理', '数据集管理', '模型训练', '模型评测', '模型推理', '性能与日志'],
+    prerequisites: [
+      '已获得平台账号，并拥有模型管理、数据集管理、模型训练相关权限。',
+      '已准备可访问的基座模型，以及符合训练模板的 JSON 或 JSONL 数据。',
+      '平台至少有一张空闲 GPU，显存能够满足所选模型和训练方法。',
+    ],
+    steps: [
+      {
+        title: '登记或确认基座模型',
+        description: '进入“模型管理”，确认目标基座模型已存在且路径可访问；若不存在，先添加模型并设置模型类型、用途和来源。',
+        screenshot: guideScreenshots.modelEdit,
+      },
+      {
+        title: '上传并检查训练数据',
+        description: '进入“数据集管理”上传 JSON/JSONL 文件，在预览页检查字段、编码和样本内容，确保数据格式与训练模板一致。',
+      },
+      {
+        title: '创建训练任务',
+        description: '进入“模型训练”，选择基座模型、数据集、训练类型、训练方法和 GPU，再配置学习率、批次大小与训练轮次。',
+        screenshot: guideScreenshots.fineTuneCreate,
+      },
+      {
+        title: '启动并观察训练',
+        description: '核对配置后启动任务，通过任务详情观察 Loss、学习率、进度、GPU 使用情况和原始日志；异常时先停止任务再调整参数。',
+        screenshot: guideScreenshots.trainingDetail,
+      },
+      {
+        title: '评测训练结果',
+        description: '训练完成并合并权重后创建评测任务，选择评测数据集与指标，查看综合评分、维度表现和逐条样本结果。',
+      },
+      {
+        title: '启动推理验证',
+        description: '创建推理服务并加载训练模型，在对话页用真实问题测试回答质量，按需调整 Temperature、Top P 和系统提示词。',
+      },
+    ],
+    validation: [
+      '训练任务状态为“已完成”，训练日志中没有未处理的错误。',
+      '模型权重已完成合并，可被评测和推理模块选择。',
+      '评测结果达到预期，推理对话能够稳定回答目标场景问题。',
+    ],
+    notice: '首次验证建议使用小规模数据集和 LoRA 训练，先跑通完整流程，再逐步扩大数据量和训练规模。',
+  },
+  {
+    id: 'dashboard',
+    group: '工作台',
+    mode: 'overview',
+    title: '服务看板',
+    summary: '集中查看平台运行状态、训练趋势、模型服务、用户活跃情况和最近训练任务。',
+    capabilities: ['平台健康与关键指标概览', '近 7 天训练趋势和服务状态', '最近任务、用户操作和登录情况'],
+    architecture: ['资源与任务数据', '指标聚合', '服务看板', '任务详情 / 平台性能'],
+    prerequisites: ['拥有服务看板访问权限。', '需要查看真实运行数据时，确认相关监控和任务服务已经正常连接。'],
+    steps: [
+      {
+        title: '先看总体状态',
+        description: '先查看在线服务、运行中任务和待处理告警，快速判断平台是否处于健康状态。',
+        screenshot: guideScreenshots.serviceDashboard,
+      },
+      { title: '再看训练趋势', description: '结合近 7 天训练次数、GPU 使用数和平均准确率，判断资源负载和训练质量变化。' },
+      { title: '对照服务状态', description: '查看模型推理、模型训练、模型评测和数据处理服务的状态与实例数量，确认异常来自哪个服务。' },
+      { title: '需要时下钻详情', description: '看板只负责发现问题；需要进一步处理时，再从训练任务进入详情或模型训练列表。' },
+    ],
+    validation: [
+      '能够判断平台整体是否健康，以及是否存在待处理告警。',
+      '能够定位需要关注的训练趋势、异常服务或失败任务。',
+      '需要处理时，能够从看板进入对应业务详情继续排查。',
+    ],
+  },
+  {
+    id: 'fine-tune',
+    group: '模型服务',
+    mode: 'workflow',
+    title: '模型训练',
+    summary: '创建和管理 SFT、DPO、CPT 训练任务，支持 LoRA 或全参数微调、权重合并与训练后量化。',
+    capabilities: ['基座模型、模板、数据集和 GPU 选择', '训练方法与超参数配置', '训练进度、指标、GPU 状态和日志跟踪'],
+    architecture: ['任务配置', '资源校验', 'GPU 调度', '模型训练', '权重保存', '合并 / 量化'],
+    prerequisites: ['模型管理中已配置可用的基座模型。', '数据集已通过格式检查。', '已确认所需 GPU 空闲且显存充足。'],
+    steps: [
+      {
+        title: '创建任务并填写基本信息',
+        description: '点击“创建训练任务”，填写名称，选择 SFT、DPO 或 CPT，并选择 LoRA 或全参数训练。',
+        screenshot: guideScreenshots.fineTuneCreate,
+      },
+      { title: '选择模型和数据', description: '选择基座模型、训练模板、训练数据集和目标 GPU；确认数据字段与模板要求一致。' },
+      { title: '配置训练参数', description: '设置学习率、批次大小、梯度累积、训练轮次、保存频率等参数；首次运行优先采用保守配置。' },
+      { title: '配置训练后处理', description: '按使用场景决定是否自动合并 LoRA 权重，以及是否在训练完成后执行量化。' },
+      {
+        title: '核对并启动任务',
+        description: '检查生成的训练命令和资源配置，确认无误后启动训练；返回列表确认任务已创建并进入正确状态。',
+      },
+      {
+        title: '跟踪与处理异常',
+        description: '在列表查看进度，在详情页观察 Loss、梯度、学习率和 GPU 状态；出现 OOM 或数据错误时停止任务并修正配置。',
+        screenshot: guideScreenshots.trainingDetail,
+      },
+    ],
+    validation: ['任务状态变为“已完成”。', '最终权重目录存在且文件完整。', 'Loss 变化合理，日志中没有 OOM、NaN 或数据解析错误。'],
+    notice: '全参数训练资源开销较大。首次训练建议优先使用 LoRA，并通过小数据集验证参数和模板。',
+  },
+  {
+    id: 'model-eval',
+    group: '模型服务',
+    mode: 'workflow',
+    title: '模型评测',
+    summary: '使用大模型裁判和基础指标评估训练模型，并查看综合评分、维度表现和样本级结果。',
+    capabilities: ['评测模型、数据集和 GPU 配置', '大模型裁判与基础指标组合', '综合评价、维度分析和样本判定'],
+    architecture: ['待评模型', '评测数据集', '裁判与指标', '评测执行', '结果聚合', '报告分析'],
+    prerequisites: ['待评模型已经完成训练和权重合并。', '评测数据集包含可用于输入和参考答案的字段。', '大模型裁判模式下已配置可用的裁判模型。'],
+    steps: [
+      { title: '创建评测任务', description: '点击“创建评测任务”，选择待评模型、评测数据集和运行 GPU。' },
+      { title: '配置裁判方式', description: '选择评测大模型，设置 Prompt、评分区间、评估规则和需要关注的业务维度。' },
+      { title: '选择基础指标', description: '根据任务类型启用 BLEU、ROUGE、余弦相似度等指标，避免使用与任务目标无关的指标。' },
+      { title: '启动并等待完成', description: '核对配置后启动评测，通过列表观察任务状态和执行进度。' },
+      { title: '分析评测结果', description: '在详情页查看综合评分、改进建议、维度表现和逐条样本判定，定位模型薄弱场景。' },
+    ],
+    validation: ['评测任务正常完成且样本覆盖数量符合预期。', '综合评分与维度评分均有结果。', '抽查样本判定，确认裁判 Prompt 与业务标准一致。'],
+  },
+  {
+    id: 'model-inference',
+    group: '模型服务',
+    mode: 'workflow',
+    title: '模型推理',
+    summary: '启动本地模型或训练模型的推理服务，通过多轮对话验证回答效果并进行模型对比。',
+    capabilities: ['推理服务创建、加载与停止', '系统提示词和多轮对话', 'Temperature、Top P 与生成长度配置'],
+    architecture: ['选择模型', '分配 GPU', '加载推理服务', '发送请求', '生成回答', '效果验证'],
+    prerequisites: ['目标模型已在模型管理中配置，或训练模型已完成权重合并。', '至少有一张满足模型显存需求的 GPU。'],
+    steps: [
+      { title: '新建推理任务', description: '填写推理任务名称，选择本地模型或已合并的训练模型，并指定运行 GPU。' },
+      { title: '加载模型服务', description: '创建后点击“加载”，等待模型完成初始化并进入“已就绪”状态。' },
+      { title: '配置推理参数', description: '在对话设置中填写系统提示词，并根据任务调整 Temperature、Top P 和最大生成长度。' },
+      { title: '进行多轮验证', description: '输入真实业务问题，观察回答准确性、格式稳定性、上下文保持能力和边界行为。' },
+      { title: '结束并释放资源', description: '验证完成后返回列表停止服务，避免持续占用 GPU。' },
+    ],
+    validation: ['服务状态为“已就绪”且请求能够正常返回。', '模型回答符合系统提示词和目标格式。', '停止服务后对应 GPU 资源得到释放。'],
+  },
+  {
+    id: 'model-manage',
+    group: '模型服务',
+    mode: 'workflow',
+    title: '模型管理',
+    summary: '统一维护基座模型、推理模型、评测模型，以及训练产生的 LoRA 权重和合并模型。',
+    capabilities: ['本地模型与在线 API 模型配置', '模型用途、来源和路径管理', 'LoRA 权重合并、导出与删除'],
+    architecture: ['模型来源', '模型登记', '用途配置', '训练 / 评测 / 推理', '权重合并', '导出归档'],
+    prerequisites: ['本地模型路径对平台服务可访问。', '在线模型已准备正确的 API 地址、模型名称和鉴权信息。'],
+    steps: [
+      { title: '选择模型类型', description: '进入“配置模型”，根据来源选择本地模型或在线 API 模型。' },
+      {
+        title: '填写模型配置',
+        description: '设置名称、模型类型、使用场景、来源和路径；在线模型还需配置接口信息。',
+        screenshot: guideScreenshots.modelEdit,
+      },
+      { title: '验证模型可用性', description: '保存后确认模型出现在列表，并能够被对应的训练、评测或推理页面选择。' },
+      { title: '管理训练权重', description: '在“训练模型”中查看训练方法、基座模型和权重状态。' },
+      { title: '合并或导出模型', description: '对 LoRA 权重执行合并，完成后用于评测和推理；不再使用的权重可按需导出或删除。' },
+    ],
+    validation: ['模型配置保存成功且路径或接口可访问。', '模型用途与可选择的业务模块一致。', '权重合并完成后生成独立可加载模型。'],
+  },
+  {
+    id: 'dataset',
+    group: '数据治理',
+    mode: 'workflow',
+    title: '数据集管理',
+    summary: '管理训练集与评测集，支持格式校验、样本编辑、存储配置和版本控制。',
+    capabilities: ['JSON / JSONL 数据上传与预览', '样本搜索、编辑和错误修复', '版本创建、切换、删除与下载'],
+    architecture: ['源文件', '格式校验', '样本预览', '内容编辑', '版本保存', '训练 / 评测引用'],
+    prerequisites: ['文件使用 UTF-8 编码。', 'JSON/JSONL 结构合法，字段与目标训练或评测模板一致。'],
+    steps: [
+      { title: '创建数据集', description: '点击“上传数据集”，填写名称，选择训练集或评测集，并选择本地或 MinIO 存储。' },
+      { title: '上传源文件', description: '上传 JSON 或 JSONL 文件，等待平台完成格式和基础字段校验。' },
+      { title: '预览与搜索样本', description: '进入详情页查看原始内容和表格预览，通过搜索快速定位目标样本。' },
+      { title: '修正数据内容', description: '逐条编辑异常样本，重点检查缺失字段、转义字符、空内容和格式不一致。' },
+      { title: '创建并启用版本', description: '暂存修改后创建新版本，复查无误后将目标版本设为当前版本。' },
+    ],
+    validation: ['数据集状态正常且样本数量符合预期。', '预览页面没有格式错误提示。', '训练或评测任务能够正确选择当前版本。'],
+  },
+  {
+    id: 'data-process',
+    group: '数据治理',
+    mode: 'workflow',
+    title: '数据处理',
+    summary: '将结构化数据、非结构化文档或外部数据源加工为可训练、可评测的数据。',
+    capabilities: ['清洗、切分和数据集划分', '大模型生成与质量筛选', '结果预览、编辑和校验'],
+    architecture: ['数据源', '清洗与切分', '模型生成', '质量筛选', '人工校验', '保存为数据集'],
+    prerequisites: ['已准备本地文件，或可访问的数据库/API 数据源。', '需要模型生成时，已配置可用的生成模型。'],
+    steps: [
+      {
+        title: '创建任务并选择数据源',
+        description: '选择结构化、非结构化或外部数据源，并填写任务基本信息。',
+        screenshot: guideScreenshots.dataProcessCreate,
+      },
+      { title: '配置预处理规则', description: '设置清洗、切分、字段映射和训练集/验证集/测试集划分方式。' },
+      { title: '选择生成模型', description: '需要扩写、问答生成或内容转换时，选择生成模型并配置 Prompt 与生成参数。' },
+      {
+        title: '检查数据预览',
+        description: '上传文件或连接数据源后检查预览，确认字段、切分结果和样本数量符合预期。',
+        screenshot: guideScreenshots.dataProcessPreview,
+      },
+      { title: '启动生成与筛选', description: '执行任务，观察生成进度和质量筛选结果，及时处理失败样本。' },
+      { title: '编辑并保存结果', description: '修正校验问题和低质量样本，确认结果后保存任务并生成可复用数据集。' },
+    ],
+    validation: ['任务生成过程没有未处理失败项。', '结果样本通过字段和内容校验。', '生成数据集可在数据集管理和训练任务中正常使用。'],
+  },
+  {
+    id: 'data-convert',
+    group: '其他工具',
+    mode: 'workflow',
+    title: '数据类型转换',
+    summary: '将 JSON 数组转换为逐行记录的 JSONL 文件，使数据能够被训练和评测模块直接使用。',
+    capabilities: ['JSON 转 JSONL', '输出文件名和编码配置', '训练数据格式标准化'],
+    architecture: ['JSON 源文件', '结构检查', '逐条展开', 'JSONL 输出', '数据集上传'],
+    prerequisites: ['源文件为合法 JSON 数组。', '文件使用 UTF-8 编码，每个数组元素代表一条数据记录。'],
+    steps: [
+      { title: '确认转换类型', description: '进入页面后确认转换方向为 JSON → JSONL。' },
+      { title: '配置输出信息', description: '设置输出文件名和 UTF-8 编码，避免中文内容或特殊字符出现乱码。' },
+      { title: '上传并执行转换', description: '功能开放后上传 JSON 文件，执行转换并下载 JSONL 结果。' },
+      { title: '校验并上传数据集', description: '抽查输出文件的首尾记录，确认每行都是完整 JSON 对象后再上传到数据集管理。' },
+    ],
+    validation: ['输出文件每一行均可独立解析为 JSON。', '转换前后记录数量一致。'],
+    notice: '当前页面为功能原型，文件上传和实际转换能力尚未开放。',
+    status: '建设中',
+  },
+  {
+    id: 'user-settings',
+    group: '系统设置',
+    mode: 'workflow',
+    title: '用户设置',
+    summary: '创建和维护平台账号，配置角色、启用状态以及各业务模块的访问权限。',
+    capabilities: ['用户创建、状态维护和删除', '角色预设与模块权限分配', '内置账号和当前账号安全保护'],
+    architecture: ['创建账号', '分配角色', '勾选模块权限', '保存生效', '路由访问校验'],
+    prerequisites: ['当前账号拥有用户设置权限。', '已明确新用户的角色职责和最小权限范围。'],
+    steps: [
+      { title: '创建用户', description: '填写登录账号、用户姓名、初始密码、角色和账号状态。' },
+      { title: '检查角色预设', description: '根据管理员、操作员或观察员角色加载默认权限，并确认是否符合岗位需求。' },
+      { title: '调整模块权限', description: '在“权限设置”中逐项勾选用户可访问的业务模块，遵循最小权限原则。' },
+      { title: '保存并验证', description: '保存后让目标用户重新进入平台，确认菜单显示和页面访问范围正确。' },
+    ],
+    validation: ['新用户可以使用初始密码登录。', '侧边栏仅显示已授权模块。', '访问未授权地址时会进入无权访问页面。'],
+    notice: '内置超级管理员和当前登录账号受到保护，不能在当前会话中删除或修改自身关键权限。',
+  },
+  {
+    id: 'hardware',
+    group: '系统设置',
+    mode: 'overview',
+    title: '平台性能',
+    summary: '实时监控 CPU、内存、磁盘、网络和 GPU 资源，辅助判断平台负载并定位设备异常。',
+    capabilities: ['主机与资源池健康概览', 'CPU、内存、磁盘和网络趋势', 'GPU 温度、功耗、显存与占用进程'],
+    architecture: ['主机 / GPU 指标', '周期采样', '趋势聚合', '性能看板', '单卡与进程详情'],
+    prerequisites: ['拥有平台性能访问权限。', '监控服务能够读取主机和 GPU 指标。'],
+    steps: [
+      { title: '先看健康概览', description: '查看 CPU、内存、磁盘、网络和 GPU 资源池是否存在告警，先判断整体负载。' },
+      { title: '选择观察频率', description: '日常观察使用较长刷新周期；临时排障时再选择 1、3 或 5 秒短周期，避免被瞬时波动误导。' },
+      { title: '再看资源趋势', description: '结合最近 60 次采样判断资源是否持续高位、突增或出现异常波动。' },
+      { title: '需要时查看单卡', description: '发现 GPU 异常后再进入单卡详情，对照温度、功耗、显存、利用率和占用进程。' },
+    ],
+    validation: [
+      '能够判断 CPU、内存、磁盘、网络和 GPU 是否处于健康范围。',
+      '能够区分瞬时波动与持续高负载。',
+      '发现异常时，能够定位到具体 GPU 或占用进程。',
+    ],
+  },
+  {
+    id: 'logs',
+    group: '系统设置',
+    mode: 'troubleshooting',
+    title: '查看日志',
+    summary: '集中查看系统日志和训练日志，通过刷新、筛选和关键词搜索定位异常。',
+    capabilities: ['系统日志与训练日志分类', '按日期、任务和进程选择日志', '自动刷新、手动刷新和关键词过滤'],
+    architecture: ['系统 / 训练进程', '日志文件', '类型与日期筛选', '关键词过滤', '异常定位'],
+    prerequisites: ['拥有查看日志权限。', '已确认需要排查的时间范围、任务名称或进程 PID。'],
+    steps: [
+      { title: '选择日志类型', description: '切换“系统日志”或“训练日志”页签，确定排查范围。' },
+      { title: '定位日志来源', description: '系统日志按日期选择文件；训练日志按任务名称和 PID 选择具体进程。' },
+      { title: '设置刷新方式', description: '持续观察时开启自动刷新；复盘历史问题时关闭自动刷新并手动定位。' },
+      { title: '搜索关键内容', description: '输入 error、warning、OOM、任务 ID 或业务关键词，结合上下文判断异常原因。' },
+    ],
+    validation: ['日志时间与目标问题发生时间一致。', '异常前后的上下文信息完整。', '能够将错误关联到具体服务、任务或进程。'],
+  },
+]
+
+export const guideNavigation: GuideNavigationGroup[] = [
+  { title: '入门', articleIds: ['getting-started'] },
+  { title: '工作台', articleIds: ['dashboard'] },
+  { title: '模型服务', articleIds: ['fine-tune', 'model-eval', 'model-inference', 'model-manage'] },
+  { title: '数据治理', articleIds: ['dataset', 'data-process'] },
+  { title: '其他工具', articleIds: ['data-convert'] },
+  { title: '系统设置', articleIds: ['user-settings', 'hardware', 'logs'] },
+]
+
+export const guideArticleMap = new Map(guideArticles.map((article) => [article.id, article]))
diff --git a/frontend/src/views/system/PermissionDeniedView.vue b/frontend/src/views/system/PermissionDeniedView.vue
index c00917b..5f6800b 100644
--- a/frontend/src/views/system/PermissionDeniedView.vue
+++ b/frontend/src/views/system/PermissionDeniedView.vue
@@ -1,12 +1,28 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+function goBack() {
+  if (window.history.length > 1) router.back()
+  else router.push('/dashboard')
+}
+</script>
+
 <template>
-  <section class="simple-page">
-    <h1>无权访问</h1>
-    <p>当前账号没有访问该页面的权限，请联系管理员调整角色或页面权限。</p>
-  </section>
+  <div class="permission-denied-view">
+    <el-result icon="warning" title="无权访问" sub-title="当前账号没有访问此功能的权限，请联系管理员调整权限。">
+      <template #extra>
+        <el-button type="primary" @click="goBack">返回上一页</el-button>
+      </template>
+    </el-result>
+  </div>
 </template>
 
 <style scoped>
-.simple-page {
-  padding: 24px;
+.permission-denied-view {
+  display: grid;
+  min-height: 440px;
+  place-items: center;
 }
 </style>
diff --git a/frontend/src/views/system/UserCreateView.vue b/frontend/src/views/system/UserCreateView.vue
index b6cfb4f..e787ef5 100644
--- a/frontend/src/views/system/UserCreateView.vue
+++ b/frontend/src/views/system/UserCreateView.vue
@@ -2,93 +2,104 @@
 import { reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import PageCard from '@/components/PageCard.vue'
 import { createUser } from '@/api/modules/system'
-import type { CreateUserPayload, PermissionCode } from '@/types'
+import type { CreateUserPayload, PermissionCode, UserRole } from '@/types'
 
 const router = useRouter()
-const submitting = ref(false)
+const saving = ref(false)
+const createFormRef = ref<FormInstance>()
 
-const form = reactive<CreateUserPayload>({
+const rolePermissionPresets: Record<UserRole, PermissionCode[]> = {
+  admin: ['dashboard', 'fine-tune', 'model-eval', 'model-inference', 'model-manage', 'dataset', 'data-process', 'data-convert', 'compute', 'hardware', 'logs', 'user-settings'],
+  operator: ['dashboard', 'fine-tune', 'model-eval', 'model-inference', 'model-manage', 'dataset', 'data-process', 'data-convert', 'compute', 'hardware', 'logs'],
+  viewer: ['dashboard', 'hardware', 'logs'],
+}
+
+const createForm = reactive<CreateUserPayload>({
   username: '',
   display_name: '',
-  password: 'platform123',
-  role: 'viewer',
+  password: '',
+  role: 'operator',
   status: 'active',
-  permissions: ['dashboard'],
+  permissions: [...rolePermissionPresets.operator],
 })
 
-const permissionOptions: PermissionCode[] = [
-  'dashboard',
-  'fine-tune',
-  'model-eval',
-  'model-inference',
-  'model-manage',
-  'dataset',
-  'data-process',
-  'data-convert',
-  'compute',
-  'hardware',
-  'logs',
-  'user-settings',
-]
+const createRules: FormRules = {
+  username: [
+    { required: true, message: '请输入登录账号', trigger: 'blur' },
+    { pattern: /^[A-Za-z][A-Za-z0-9_]{2,31}$/, message: '账号需以字母开头，由 3-32 位字母、数字或下划线组成', trigger: 'blur' },
+  ],
+  display_name: [{ required: true, message: '请输入用户姓名', trigger: 'blur' }],
+  password: [
+    { required: true, message: '请输入初始密码', trigger: 'blur' },
+    { min: 6, message: '初始密码至少 6 位', trigger: 'blur' },
+  ],
+  role: [{ required: true, message: '请选择用户角色', trigger: 'change' }],
+}
 
-async function submit() {
-  submitting.value = true
+function applyCreateRolePreset(role: UserRole) {
+  createForm.permissions = [...rolePermissionPresets[role]]
+}
+
+async function submitCreate() {
+  const valid = await createFormRef.value?.validate().catch(() => false)
+  if (!valid) return
+  saving.value = true
   try {
-    await createUser(form)
-    ElMessage.success('用户已创建')
+    await createUser({ ...createForm, permissions: [...(createForm.permissions ?? [])] })
+    ElMessage.success('用户创建成功')
     router.push('/user-settings')
   } finally {
-    submitting.value = false
+    saving.value = false
   }
 }
+
+function handleCancel() {
+  router.back()
+}
 </script>
 
 <template>
-  <section class="user-create">
-    <h1>创建用户</h1>
-    <el-form :model="form" label-width="110px" class="user-form">
-      <el-form-item label="账号">
-        <el-input v-model="form.username" />
+  <PageCard title="创建用户">
+    <el-form
+      ref="createFormRef"
+      :model="createForm"
+      :rules="createRules"
+      label-width="100px"
+      style="max-width: 600px"
+    >
+      <el-form-item label="登录账号" prop="username">
+        <el-input v-model.trim="createForm.username" maxlength="32" placeholder="例如：zhangsan" autocomplete="off" />
       </el-form-item>
-      <el-form-item label="显示名称">
-        <el-input v-model="form.display_name" />
+      <el-form-item label="用户姓名" prop="display_name">
+        <el-input v-model.trim="createForm.display_name" maxlength="40" placeholder="请输入姓名" autocomplete="off" />
       </el-form-item>
-      <el-form-item label="初始密码">
-        <el-input v-model="form.password" type="password" show-password />
+      <el-form-item label="初始密码" prop="password">
+        <el-input v-model="createForm.password" type="password" show-password placeholder="至少 6 位" autocomplete="new-password" />
       </el-form-item>
-      <el-form-item label="角色">
-        <el-select v-model="form.role">
-          <el-option label="管理员" value="admin" />
+      <el-form-item label="用户角色" prop="role">
+        <el-select v-model="createForm.role" style="width: 100%" @change="applyCreateRolePreset">
+          <el-option label="超级管理员" value="admin" />
           <el-option label="操作员" value="operator" />
           <el-option label="观察员" value="viewer" />
         </el-select>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px; line-height: 1.4;">角色会预设一组权限，创建后仍可单独调整。</div>
       </el-form-item>
-      <el-form-item label="状态">
-        <el-radio-group v-model="form.status">
-          <el-radio value="active">启用</el-radio>
-          <el-radio value="disabled">禁用</el-radio>
+      <el-form-item label="账号状态">
+        <el-radio-group v-model="createForm.status">
+          <el-radio value="active">立即启用</el-radio>
+          <el-radio value="disabled">暂不启用</el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="页面权限">
-        <el-checkbox-group v-model="form.permissions">
-          <el-checkbox v-for="item in permissionOptions" :key="item" :value="item">{{ item }}</el-checkbox>
-        </el-checkbox-group>
-      </el-form-item>
       <el-form-item>
-        <el-button @click="router.back()">返回</el-button>
-        <el-button type="primary" :loading="submitting" @click="submit">保存</el-button>
+        <el-button type="primary" :loading="saving" @click="submitCreate">创建用户</el-button>
+        <el-button @click="handleCancel">取消</el-button>
       </el-form-item>
     </el-form>
-  </section>
+  </PageCard>
 </template>
 
 <style scoped>
-.user-create {
-  padding: 24px;
-}
-
-.user-form {
-  max-width: 760px;
-}
 </style>
diff --git a/frontend/src/views/system/UserPermissionView.vue b/frontend/src/views/system/UserPermissionView.vue
index a79c2b8..3a1d19f 100644
--- a/frontend/src/views/system/UserPermissionView.vue
+++ b/frontend/src/views/system/UserPermissionView.vue
@@ -1,12 +1,206 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import PageCard from '@/components/PageCard.vue'
+import { getUsers, updateUserAccess } from '@/api/modules/system'
+import { useAuthStore } from '@/stores/auth'
+import type {
+  PermissionCode,
+  SystemUser,
+  UpdateUserAccessPayload,
+  UserRole,
+} from '@/types'
+
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+
+const loading = ref(false)
+const saving = ref(false)
+const selectedUser = ref<SystemUser | null>(null)
+
+const accessForm = reactive<UpdateUserAccessPayload>({
+  role: 'operator',
+  status: 'active',
+  permissions: [],
+})
+
+const permissionGroups: Array<{
+  title: string
+  description: string
+  items: Array<{ value: PermissionCode; label: string; description: string }>
+}> = [
+  {
+    title: '工作台',
+    description: '平台入口及整体运行概览',
+    items: [
+      { value: 'dashboard', label: '服务看板', description: '查看平台关键指标和任务概览' },
+    ],
+  },
+  {
+    title: '模型服务',
+    description: '训练、评测、推理与模型资产管理',
+    items: [
+      { value: 'fine-tune', label: '模型训练', description: '创建和管理模型训练任务' },
+      { value: 'model-eval', label: '模型评测', description: '创建评测任务并查看评测结果' },
+      { value: 'model-inference', label: '模型推理', description: '使用模型推理和模型对比功能' },
+      { value: 'model-manage', label: '模型管理', description: '维护模型配置和训练模型' },
+    ],
+  },
+  {
+    title: '数据治理',
+    description: '数据集、数据加工及格式转换',
+    items: [
+      { value: 'dataset', label: '数据集管理', description: '上传、编辑和管理数据集版本' },
+      { value: 'data-process', label: '数据处理', description: '创建和管理数据处理任务' },
+      { value: 'data-convert', label: '数据类型转换', description: '使用数据格式转换工具' },
+    ],
+  },
+  {
+    title: '算力资源',
+    description: '算力节点、GPU 与任务队列',
+    items: [
+      { value: 'compute', label: '算力节点', description: '查看算力节点、GPU 资源和调度队列' },
+    ],
+  },
+  {
+    title: '系统设置',
+    description: '平台运行信息及管理功能',
+    items: [
+      { value: 'hardware', label: '平台性能', description: '查看服务器和 GPU 运行状态' },
+      { value: 'logs', label: '查看日志', description: '查看系统日志和训练日志' },
+      { value: 'user-settings', label: '用户设置', description: '创建、删除用户并管理权限' },
+    ],
+  },
+]
+
+const allPermissions = permissionGroups.flatMap((group) => group.items.map((item) => item.value))
+const rolePermissionPresets: Record<UserRole, PermissionCode[]> = {
+  admin: [...allPermissions],
+  operator: allPermissions.filter((permission) => permission !== 'user-settings'),
+  viewer: ['dashboard', 'hardware', 'logs'],
+}
+
+const accessLocked = computed(() =>
+  Boolean(selectedUser.value?.protected || selectedUser.value?.username === auth.username),
+)
+
+const accessLockMessage = computed(() =>
+  selectedUser.value?.protected
+    ? '内置超级管理员的状态和权限不可修改。'
+    : '不能在当前会话中修改自己的状态和权限。',
+)
+
+async function loadData() {
+  const id = route.params.id as string
+  if (!id) return
+
+  loading.value = true
+  try {
+    const users = await getUsers()
+    const user = users.find((u) => u.id === id)
+    if (user) {
+      selectedUser.value = user
+      Object.assign(accessForm, {
+        role: user.role,
+        status: user.status,
+        permissions: [...user.permissions],
+      })
+    } else {
+      ElMessage.error('找不到用户信息')
+      router.back()
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+function applyAccessRolePreset(role: UserRole) {
+  accessForm.permissions = [...rolePermissionPresets[role]]
+}
+
+async function saveAccess() {
+  if (!selectedUser.value || accessLocked.value) return
+  if (!accessForm.permissions?.length) {
+    ElMessage.warning('请至少保留一项功能权限')
+    return
+  }
+  saving.value = true
+  try {
+    await updateUserAccess(selectedUser.value.id, {
+      role: accessForm.role,
+      status: accessForm.status,
+      permissions: [...accessForm.permissions],
+    })
+    ElMessage.success('用户权限已更新')
+    router.push('/user-settings')
+  } finally {
+    saving.value = false
+  }
+}
+
+function handleCancel() {
+  router.back()
+}
+
+onMounted(loadData)
+</script>
+
 <template>
-  <section class="simple-page">
-    <h1>权限设置</h1>
-    <p>第一版已支持账号页面权限读取与保存，精细化项目/模型/数据集权限将在后续版本补齐。</p>
-  </section>
+  <PageCard title="权限设置" v-loading="loading">
+    <el-form :model="accessForm" label-width="100px" v-if="selectedUser" style="max-width: 600px;">
+      <el-form-item label="当前用户">
+        <span style="font-weight: 500; margin-right: 8px; color: #303133;">{{ selectedUser.display_name }}</span>
+        <span style="color: #909399;">@{{ selectedUser.username }}</span>
+        <el-tag v-if="accessLocked" type="warning" size="small" style="margin-left: 12px;">
+          {{ selectedUser.protected ? '系统内置账号' : '当前账号' }}
+        </el-tag>
+      </el-form-item>
+
+      <el-form-item v-if="accessLocked">
+        <el-alert :title="accessLockMessage" type="warning" :closable="false" show-icon style="line-height: 1.4; padding: 8px 16px; width: 100%;" />
+      </el-form-item>
+
+      <el-form-item label="用户角色">
+        <el-select v-model="accessForm.role" :disabled="accessLocked" @change="applyAccessRolePreset" style="width: 100%">
+          <el-option label="超级管理员" value="admin" />
+          <el-option label="操作员" value="operator" />
+          <el-option label="观察员" value="viewer" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="账号状态">
+        <el-radio-group v-model="accessForm.status" :disabled="accessLocked">
+          <el-radio value="active">已启用</el-radio>
+          <el-radio value="disabled">已禁用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="功能权限">
+        <el-checkbox-group v-model="accessForm.permissions" :disabled="accessLocked" style="width: 100%;">
+          <div v-for="group in permissionGroups" :key="group.title" style="margin-bottom: 16px; background: #f8fafc; padding: 12px 16px; border-radius: 4px; border: 1px solid #e4e7ed;">
+            <div style="font-weight: 600; font-size: 13px; color: #303133; margin-bottom: 8px; display: flex; justify-content: space-between;">
+              <span>{{ group.title }}</span>
+              <span style="font-weight: normal; font-size: 12px; color: #909399;">{{ group.description }}</span>
+            </div>
+            <div style="display: flex; flex-direction: column; gap: 4px;">
+              <el-checkbox v-for="item in group.items" :key="item.value" :value="item.value">
+                {{ item.label }}
+                <span style="color: #909399; font-size: 12px; margin-left: 8px;">{{ item.description }}</span>
+              </el-checkbox>
+            </div>
+          </div>
+        </el-checkbox-group>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" :loading="saving" :disabled="accessLocked" @click="saveAccess">保存设置</el-button>
+        <el-button @click="handleCancel">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </PageCard>
 </template>
 
 <style scoped>
-.simple-page {
-  padding: 24px;
-}
 </style>
diff --git a/frontend/src/views/system/UserSettingsView.vue b/frontend/src/views/system/UserSettingsView.vue
index ccf4534..f92434c 100644
--- a/frontend/src/views/system/UserSettingsView.vue
+++ b/frontend/src/views/system/UserSettingsView.vue
@@ -1,10 +1,59 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { getUsers } from '@/api/modules/system'
-import type { SystemUser } from '@/types'
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import AppConfirmDialog from '@/components/AppConfirmDialog.vue'
+import DataTablePage from '@/components/DataTablePage.vue'
+import { deleteUser, getUsers } from '@/api/modules/system'
+import { useAuthStore } from '@/stores/auth'
+import type {
+  PermissionCode,
+  SystemUser,
+  UserRole,
+} from '@/types'
 
+const router = useRouter()
+const auth = useAuthStore()
 const loading = ref(false)
 const users = ref<SystemUser[]>([])
+const confirmDialogRef = ref<InstanceType<typeof AppConfirmDialog>>()
+
+const activeCount = computed(() => users.value.filter((user) => user.status === 'active').length)
+const adminCount = computed(() => users.value.filter((user) => user.role === 'admin').length)
+
+function roleLabel(role: UserRole) {
+  if (role === 'admin') return '超级管理员'
+  if (role === 'operator') return '操作员'
+  return '观察员'
+}
+
+function roleTagType(role: UserRole) {
+  if (role === 'admin') return 'danger'
+  if (role === 'operator') return 'primary'
+  return 'info'
+}
+
+function permissionLabel(permission: PermissionCode) {
+  const map: Record<string, string> = {
+    'dashboard': '服务看板',
+    'fine-tune': '模型训练',
+    'model-eval': '模型评测',
+    'model-inference': '模型推理',
+    'model-manage': '模型管理',
+    'dataset': '数据集管理',
+    'data-process': '数据处理',
+    'data-convert': '数据类型转换',
+    'compute': '算力节点',
+    'hardware': '平台性能',
+    'logs': '查看日志',
+    'user-settings': '用户设置'
+  }
+  return map[permission] || permission
+}
+
+function formatDate(value?: string) {
+  return value ? new Date(value).toLocaleString('zh-CN', { hour12: false }) : '-'
+}
 
 async function loadUsers() {
   loading.value = true
@@ -15,51 +64,166 @@ async function loadUsers() {
   }
 }
 
+function openCreateDialog() {
+  router.push('/user-settings/create')
+}
+
+function openPermissionDrawer(user: SystemUser | Record<string, any>) {
+  const systemUser = user as SystemUser
+  router.push(`/user-settings/${systemUser.id}/permission`)
+}
+
+function deleteDisabledReason(user: SystemUser | Record<string, any>) {
+  if (user.protected) return '系统内置管理员不能删除'
+  if (user.username === auth.username) return '不能删除当前登录用户'
+  return ''
+}
+
+async function handleDelete(user: SystemUser | Record<string, any>) {
+  const systemUser = user as SystemUser
+  const disabledReason = deleteDisabledReason(systemUser)
+  if (disabledReason) {
+    ElMessage.warning(disabledReason)
+    return
+  }
+  const confirmed = await confirmDialogRef.value?.open({
+    title: `删除用户“${systemUser.display_name}”？`,
+    message: `删除后，账号 ${systemUser.username} 将无法登录，已有任务和历史记录不会被删除。此操作无法撤销。`,
+    confirmText: '确认删除',
+    tone: 'danger',
+  })
+  if (!confirmed) return
+  await deleteUser(systemUser.id, auth.username)
+  ElMessage.success('用户已删除')
+  await loadUsers()
+}
+
 onMounted(loadUsers)
 </script>
 
 <template>
-  <section class="user-settings" v-loading="loading">
-    <header class="page-header">
-      <div>
-        <h1>用户设置</h1>
-        <p>管理平台账号、角色状态和页面权限。</p>
-      </div>
-      <el-button type="primary" @click="$router.push('/user-settings/create')">创建用户</el-button>
-    </header>
+  <div class="user-settings-page">
 
-    <el-table :data="users">
-      <el-table-column prop="username" label="账号" min-width="140" />
-      <el-table-column prop="display_name" label="显示名称" min-width="160" />
-      <el-table-column prop="role" label="角色" width="120" />
-      <el-table-column prop="status" label="状态" width="120" />
-      <el-table-column label="权限数" width="120">
-        <template #default="{ row }">{{ row.permissions?.length || 0 }}</template>
-      </el-table-column>
-      <el-table-column prop="create_time" label="创建时间" min-width="180" />
-    </el-table>
-  </section>
+
+    <DataTablePage
+      class="user-table"
+      title="用户"
+      :data="users"
+      :loading="loading"
+      searchable
+      :search-fields="['username', 'display_name', 'role', 'status']"
+      create-text="创建用户"
+      row-key="id"
+      empty-text="暂无用户，点击右上角创建用户"
+      @create="openCreateDialog"
+      @refresh="loadUsers"
+    >
+      <template #title>
+        <div class="table-heading">
+          <h2>用户设置</h2>
+          <div class="table-stats">
+            <el-tag size="small" type="info">全部: {{ users.length }}</el-tag>
+            <el-tag size="small" type="success">已启用: {{ activeCount }}</el-tag>
+            <el-tag size="small" type="danger">管理员: {{ adminCount }}</el-tag>
+          </div>
+        </div>
+      </template>
+
+      <template #columns>
+        <el-table-column label="登录账号" prop="username" align="center" min-width="120" />
+        <el-table-column label="用户姓名" prop="display_name" align="center" min-width="120" />
+        <el-table-column label="角色" align="center" width="110">
+          <template #default="{ row }">
+            <el-tag :type="roleTagType(row.role)" size="small">{{ roleLabel(row.role) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" align="center" width="100">
+          <template #default="{ row }">
+            <el-tag :type="row.status === 'active' ? 'success' : 'info'" size="small">
+              {{ row.status === 'active' ? '已启用' : '已禁用' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="功能权限" min-width="230">
+          <template #default="{ row }">
+            <el-tag v-for="permission in row.permissions.slice(0, 3)" :key="permission" type="info" size="small" style="margin-right: 4px;">
+              {{ permissionLabel(permission) }}
+            </el-tag>
+            <span v-if="row.permissions.length > 3" style="color: #909399; font-size: 12px; margin-left: 4px;">
+              +{{ row.permissions.length - 3 }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="最近登录" align="center" width="160">
+          <template #default="{ row }">{{ formatDate(row.last_login) }}</template>
+        </el-table-column>
+      </template>
+
+      <template #actions="{ row }">
+        <div class="action-buttons">
+          <el-button type="primary" link size="small" @click="openPermissionDrawer(row)">
+            <i class="fa fa-shield" style="margin-right: 4px;" aria-hidden="true" />用户权限设置
+          </el-button>
+          <el-tooltip :disabled="!deleteDisabledReason(row)" :content="deleteDisabledReason(row)" placement="top">
+            <span>
+              <el-button type="danger" link size="small" :disabled="Boolean(deleteDisabledReason(row))" @click="handleDelete(row)">
+                <i class="fa fa-trash-o" style="margin-right: 4px;" aria-hidden="true" />删除
+              </el-button>
+            </span>
+          </el-tooltip>
+        </div>
+      </template>
+    </DataTablePage>
+
+    <AppConfirmDialog ref="confirmDialogRef" />
+  </div>
 </template>
 
-<style scoped>
-.user-settings {
-  padding: 24px;
-}
-
-.page-header {
+<style scoped lang="scss">
+.user-settings-page {
   display: flex;
-  justify-content: space-between;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
   gap: 16px;
-  margin-bottom: 18px;
 }
 
-.page-header h1 {
-  margin: 0;
-  font-size: 24px;
+
+
+.user-table {
+  min-height: 0;
+  flex: 1 1 auto;
 }
 
-.page-header p {
-  margin: 8px 0 0;
-  color: #64748b;
+.table-heading {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  h2 {
+    margin: 0;
+    color: #1e293b;
+    font-size: 16px;
+    font-weight: 600;
+  }
+}
+
+.table-stats {
+  display: flex;
+  gap: 8px;
+}
+
+
+
+
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+  }
 }
 </style>