feat(system): 完成前端系统管理（布局框架、三个管理页面、e2e）

- BasicLayout：侧边栏/顶栏/面包屑/移动端抽屉；菜单从路由表派生；
  路由守卫新增 requiresAdmin 层（菜单隐藏 + 直连 URL 弹回）
- 用户/角色/日志三个页面：分页请求序号防竞态、确认动作流抽 useConfirmAction、
  时间范围配 default-time、日志详情按需懒加载并缓存
- 空 catch 统一改 handledError 显式声明；词表/选项常量集中（与后端对齐），
  「停用」文案全站统一为「禁用」
- 品牌色提升为全局 token，Element Plus 主色指向赭金
- e2e：公共工具抽 common.py；系统管理 13 项（含详情懒加载脱敏断言），
  管理员密码改 E2E_ADMIN_PASSWORD 环境变量；login_flow 8 项回归通过

Co-Authored-By: Claude Code <noreply@anthropic.com>

frontend/src/composables/useAppMenu.ts

@@ -0,0 +1,65 @@
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { useUserStore } from '@/store/user'
+import { ROLE_ADMIN } from '@/utils/constants'
+
+/** 菜单节点：从路由表派生，避免菜单标题与页面标题两处维护漂移。 */
+export interface MenuNode {
+  path: string
+  title: string
+  order: number
+  group?: string
+}
+
+export interface MenuGroup {
+  name: string
+  items: MenuNode[]
+}
+
+/**
+ * 侧边菜单数据。
+ *
+ * 规则：
+ * - 取路由表中带 `meta.title` 且未被 `meta.menu === false` 排除的记录
+ * - `meta.requiresAdmin` 的项仅管理员可见（与路由守卫双保险，隐藏入口在前）
+ * - `meta.group` 相同的项聚合为一个子菜单；无 group 的为顶层菜单项
+ * - 按 `meta.order` 排序
+ */
+export function useAppMenu() {
+  const router = useRouter()
+  const userStore = useUserStore()
+
+  const isAdmin = computed(() => userStore.roles.includes(ROLE_ADMIN))
+
+  const menuNodes = computed<MenuNode[]>(() =>
+    router
+      .getRoutes()
+      .filter((record) => Boolean(record.meta.title) && record.meta.menu !== false)
+      .filter((record) => !record.meta.requiresAdmin || isAdmin.value)
+      .map((record) => ({
+        path: record.path,
+        title: record.meta.title ?? '',
+        order: record.meta.order ?? 99,
+        group: record.meta.group,
+      }))
+      .sort((a, b) => a.order - b.order),
+  )
+
+  /** 无分组的顶层菜单项 */
+  const topLevelMenus = computed(() => menuNodes.value.filter((node) => !node.group))
+
+  /** 分组菜单（按 group 名聚合，组内保持 order 顺序） */
+  const groupedMenus = computed<MenuGroup[]>(() => {
+    const groups = new Map<string, MenuNode[]>()
+    for (const node of menuNodes.value) {
+      if (!node.group) continue
+      const items = groups.get(node.group) ?? []
+      items.push(node)
+      groups.set(node.group, items)
+    }
+    return [...groups.entries()].map(([name, items]) => ({ name, items }))
+  })
+
+  return { topLevelMenus, groupedMenus }
+}

frontend/src/composables/useConfirmAction.ts

@@ -0,0 +1,52 @@
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+import { handledError } from '@/utils/error'
+
+/**
+ * 「确认框 → 执行 → 成功提示 → 收尾刷新」动作流。
+ *
+ * 用户/角色两页的启用禁用、删除共四处结构逐行相同，收敛到这里：
+ * 取消确认静默返回 false；接口失败由请求拦截器统一提示，此处仅兜底
+ * 阻止 Promise 继续传播（handledError 显式标注，不写空 catch）。
+ */
+export function useConfirmAction() {
+  /**
+   * 弹出确认框并执行；返回是否真正执行成功（用户取消或执行失败均为 false）。
+   */
+  async function confirmAndRun(options: {
+    /** 确认框正文 */
+    confirmText: string
+    /** 确认框标题 */
+    title?: string
+    /** 确认按钮文案 */
+    confirmButtonText?: string
+    /** 执行成功后的全局提示 */
+    successText: string
+    /** 真正的业务动作 */
+    run: () => Promise<unknown>
+    /** 成功后的收尾（如刷新列表） */
+    after?: () => Promise<void> | void
+  }): Promise<boolean> {
+    try {
+      await ElMessageBox.confirm(options.confirmText, options.title ?? '操作确认', {
+        type: 'warning',
+        confirmButtonText: options.confirmButtonText ?? '确定',
+        cancelButtonText: '取消',
+      })
+    } catch {
+      return false // 用户取消，静默返回
+    }
+
+    try {
+      await options.run()
+      ElMessage.success(options.successText)
+      await options.after?.()
+      return true
+    } catch (error) {
+      handledError(error) // 失败提示由请求拦截器统一完成
+      return false
+    }
+  }
+
+  return { confirmAndRun }
+}

frontend/src/composables/usePagedList.ts

@@ -0,0 +1,86 @@
+import { ref, type Ref } from 'vue'
+
+import type { PageData } from '@/api/types'
+import { handledError } from '@/utils/error'
+
+/**
+ * 分页列表状态管理。
+ *
+ * 四个列表页（用户/角色/操作日志/登录日志）共用同一套分页交互，要点：
+ *
+ * - 「删除当前页最后一条后页码回退」是高频踩坑点：不回退就会停在空页
+ * - **请求序号防竞态**：快速翻页/改条件时并发请求乱序返回，只有最新
+ *   请求的响应允许写入状态，否则旧数据会覆盖新数据、与分页器错位
+ * - 请求失败不外抛（提示由拦截器统一完成），loading 仅由最新请求复位
+ */
+export function usePagedList<T, F extends object>(
+  fetcher: (params: F & { pageNum: number; pageSize: number }) => Promise<PageData<T>>,
+  getFilters: () => F,
+) {
+  const records = ref([]) as Ref<T[]>
+  const total = ref(0)
+  const pageNum = ref(1)
+  const pageSize = ref(10)
+  const loading = ref(false)
+
+  /** 自增请求序号：仅最新请求的响应可写入状态 */
+  let requestSeq = 0
+
+  /** 按当前页码与筛选条件加载 */
+  async function load(): Promise<void> {
+    const seq = ++requestSeq
+    loading.value = true
+    try {
+      const data = await fetcher({
+        ...getFilters(),
+        pageNum: pageNum.value,
+        pageSize: pageSize.value,
+      })
+      if (seq !== requestSeq) return // 已有更新的请求发出，丢弃过期响应
+      records.value = data.list
+      total.value = data.total
+    } catch (error) {
+      handledError(error) // 失败提示由请求拦截器统一完成
+    } finally {
+      if (seq === requestSeq) loading.value = false
+    }
+  }
+
+  /** 条件查询：回到第一页再加载（停留旧页码会查到空页） */
+  function search(): void {
+    pageNum.value = 1
+    void load()
+  }
+
+  function onPageChange(page: number): void {
+    pageNum.value = page
+    void load()
+  }
+
+  function onSizeChange(size: number): void {
+    pageSize.value = size
+    pageNum.value = 1
+    void load()
+  }
+
+  /** 删除后刷新：当前页已被删空且不在第一页时，先回退页码再加载 */
+  async function reloadAfterDelete(removedCount = 1): Promise<void> {
+    if (records.value.length - removedCount <= 0 && pageNum.value > 1) {
+      pageNum.value -= 1
+    }
+    await load()
+  }
+
+  return {
+    records,
+    total,
+    pageNum,
+    pageSize,
+    loading,
+    load,
+    search,
+    onPageChange,
+    onSizeChange,
+    reloadAfterDelete,
+  }
+}