fix: 页面表格容器高度计算优化

package.json

@@ -5,7 +5,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "serve": "vite",
     "build:dev": "vue-tsc --noEmit && vite build --mode development",
     "build:test": "vue-tsc --noEmit && vite build --mode test",
     "build:prod": "vue-tsc --noEmit && vite build --mode production",
@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
+    "@yp-component/root": "^0.0.48",
     "ant-design-vue": "^4.0.0",
     "china-area-data": "^5.0.1",
     "dayjs": "^1.11.21",

pnpm-lock.yaml

@@ -11,12 +11,18 @@ importers:
       '@ant-design/icons-vue':
         specifier: ^7.0.1
         version: 7.0.1(vue@3.5.40(typescript@5.9.3))
+      '@yp-component/root':
+        specifier: ^0.0.48
+        version: 0.0.48(typescript@5.9.3)
       ant-design-vue:
         specifier: ^4.0.0
         version: 4.2.6(vue@3.5.40(typescript@5.9.3))
       china-area-data:
         specifier: ^5.0.1
         version: 5.0.1
+      cropperjs:
+        specifier: ^1.6.2
+        version: 1.6.2
       dayjs:
         specifier: ^1.11.21
         version: 1.11.21
@@ -839,6 +845,9 @@ packages:
   '@vue/shared@3.5.40':
     resolution: {integrity: sha512-WxnBtruIqOoV3rA4jeKDWzrYI5h7Cp4+pjwDi8kWGHz+IslhiN+wguLVVhtv2l8VoU02rzDCVfDjgCl1lNpZVg==}
 
+  '@yp-component/root@0.0.48':
+    resolution: {integrity: sha512-TOp8adAob3pMSfecQjEC4uVNCGqNWcShDjSQysd4pYY34i5ldFLRGSiJdpLsFG1xKkcSudiqEc/Si/ZfYoDSqA==}
+
   accepts@2.0.0:
     resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
     engines: {node: '>= 0.6'}
@@ -1063,6 +1072,9 @@ packages:
       typescript:
         optional: true
 
+  cropperjs@1.6.2:
+    resolution: {integrity: sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA==}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -3025,6 +3037,13 @@ snapshots:
 
   '@vue/shared@3.5.40': {}
 
+  '@yp-component/root@0.0.48(typescript@5.9.3)':
+    dependencies:
+      cropperjs: 1.6.2
+      vue: 3.5.40(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
+
   accepts@2.0.0:
     dependencies:
       mime-types: 3.0.2
@@ -3251,6 +3270,8 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
+  cropperjs@1.6.2: {}
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1

src/assets/img/icon/logout.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1784966818945" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1689" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M424.19 675.833l64.823 64.823 229.869-229.869-229.869-229.869-64.823 64.823 118.612 119.072H98.236v91.948h444.567L424.19 675.833zM833.817 97.022H190.183c-51.031 0-91.948 41.376-91.948 91.948v183.895h91.948V188.97h643.633v643.633H190.183V648.708H98.236v183.895c0 50.571 40.917 91.948 91.948 91.948h643.633c50.571 0 91.948-41.376 91.948-91.948V188.97c-0.001-50.571-41.377-91.948-91.948-91.948z" p-id="1690"></path></svg>

src/assets/styles/index.wxss

@@ -1,62 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-html,
-body,
-#app {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.88);
-  background-color: #f5f5f5;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-a {
-  color: #1677ff;
-  text-decoration: none;
-}
-a:hover {
-  opacity: 0.85;
-}
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 3px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-.page-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-.page-filter {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  column-gap: 16px;
-  row-gap: 12px;
-  flex-shrink: 0;
-}
-.page-filter-actions {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-left: 0;
-}
-.page-table {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  margin-top: 16px;
-}

src/components/ChangePasswordModal/controller.ts

@@ -0,0 +1,48 @@
+/**
+ * 修改密码弹窗 - 表单域控制器
+ *
+ * 集中管理弹窗内的所有规则与提示文案。
+ */
+import type { Rule } from 'ant-design-vue/es/form';
+import { isValidPassword } from '@/utils/form';
+
+// ============================================================
+// 文案
+// ============================================================
+
+/** 弹窗底部提示 */
+export const TIPS_TEXT = '修改后立即生效，请妥善保管新密码';
+
+// ============================================================
+// 表单规则
+// ============================================================
+
+/** 新密码规则：必填 + 至少 8 位 + 字母 + 数字 */
+export const newPasswordRules: Rule[] = [
+  { required: true, message: '请输入新密码' },
+  {
+    validator: (_rule: unknown, value: string) => {
+      if (!value) return Promise.resolve();
+      if (!isValidPassword(value)) {
+        return Promise.reject(new Error('密码至少8位，需包含字母与数字'));
+      }
+      return Promise.resolve();
+    },
+  },
+];
+
+/** 确认密码规则：必填 + 必须与新密码一致 */
+export function confirmNewPasswordRules(getPassword: () => string): Rule[] {
+  return [
+    { required: true, message: '请再次输入新密码' },
+    {
+      validator: (_rule: unknown, value: string) => {
+        if (!value) return Promise.resolve();
+        if (value !== getPassword()) {
+          return Promise.reject(new Error('两次输入的密码不一致'));
+        }
+        return Promise.resolve();
+      },
+    },
+  ];
+}

src/components/ChangePasswordModal/index.tsx

@@ -0,0 +1,100 @@
+import { defineComponent, ref, reactive } from 'vue';
+import { useEffect } from '@/hooks';
+import { Modal, Form, Input, Button, message } from 'ant-design-vue';
+import { TIPS_TEXT, newPasswordRules, confirmNewPasswordRules } from './controller';
+import styles from './style.module.less';
+
+interface ChangePasswordModalProps {
+  visible: boolean;
+  submitting?: boolean;
+  onClose: () => void;
+  /** 提交回调：父组件负责调用 API，loading 状态由 submitting 控制 */
+  onSave: (payload: { newPassword: string }) => void;
+}
+
+/** 默认表单数据 */
+const getDefaultForm = () => ({
+  newPassword: '',
+  confirmPassword: '',
+});
+
+export default defineComponent({
+  name: 'ChangePasswordModal',
+  props: {
+    visible: { type: Boolean, default: false },
+    submitting: { type: Boolean, default: false },
+    onClose: { type: Function, required: true },
+    onSave: { type: Function, required: true },
+  },
+  setup(props: ChangePasswordModalProps) {
+    const formRef = ref<any>();
+    const formData = reactive(getDefaultForm());
+
+    /** 监听 visible 重置表单 */
+    useEffect(() => {
+      if (props.visible) {
+        Object.assign(formData, getDefaultForm());
+        setTimeout(() => formRef.value?.clearValidate(), 0);
+      }
+    }, [() => props.visible]);
+
+    /** 提交 */
+    const handleSubmit = async () => {
+      try {
+        await formRef.value?.validate();
+      } catch {
+        return;
+      }
+      props.onSave({ newPassword: formData.newPassword });
+    };
+
+    const handleClose = () => {
+      props.onClose();
+    };
+
+    return () => (
+      <Modal
+        title="修改密码"
+        visible={props.visible}
+        onCancel={handleClose}
+        width={420}
+        destroyOnClose
+        footer={null}
+        centered
+        class={styles.modal}
+      >
+        <Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
+          <Form.Item label="新密码" name="newPassword" rules={newPasswordRules}>
+            <Input.Password
+              placeholder="至少8位，含字母+数字"
+              allowClear
+              v-model:value={formData.newPassword}
+            />
+          </Form.Item>
+
+          <Form.Item
+            label="确认新密码"
+            name="confirmPassword"
+            rules={confirmNewPasswordRules(() => formData.newPassword)}
+          >
+            <Input.Password
+              placeholder="再次输入新密码"
+              allowClear
+              v-model:value={formData.confirmPassword}
+            />
+          </Form.Item>
+
+          <div class={styles.tip}>{TIPS_TEXT}</div>
+        </Form>
+
+        {/* 底部按钮 */}
+        <div class={styles.footer}>
+          <Button onClick={handleClose}>取消</Button>
+          <Button type="primary" loading={props.submitting} onClick={handleSubmit}>
+            确认修改
+          </Button>
+        </div>
+      </Modal>
+    );
+  },
+});

src/components/ChangePasswordModal/style.module.less

@@ -0,0 +1,37 @@
+.form {
+  :global {
+    .ant-form-item {
+      margin-bottom: 16px;
+    }
+    .ant-form-item-explain-error {
+      font-size: 12px;
+    }
+  }
+}
+
+/* 底部提示文案 */
+.tip {
+  margin-top: -4px;
+  margin-bottom: 24px;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+/* 底部按钮 */
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
+}
+
+/* 微调 Modal 内部样式 */
+.modal {
+  :global {
+    .ant-modal-body {
+      padding: 16px 24px 0;
+    }
+  }
+}

src/components/index.ts

@@ -3,3 +3,4 @@
  * 在业务中可通过 `import { HelloWorld } from '@/components'` 使用
  */
 export { default as HelloWorld } from './HelloWorld';
+export { default as ChangePasswordModal } from './ChangePasswordModal';

src/hooks/useAuth.ts

@@ -1,6 +1,6 @@
 // src/hooks/useAuth.ts
 import { useState } from './useState';
-import { watch } from 'vue';
+import { useEffect } from './useEffect';
 import { useMenuStore } from '@/stores/menuStore';
 import { usePermissionStore } from '@/stores/permissionStore';
 import router from '@/router';
@@ -10,13 +10,14 @@ const TOKEN_KEY = 'MY_APP_AUTH_TOKEN';
 function createAuth() {
   const [token, setToken] = useState<string | null>(window.localStorage.getItem(TOKEN_KEY));
 
-  watch(token, (newToken) => {
+  useEffect(() => {
+    const newToken = token.value;
     if (newToken) {
       window.localStorage.setItem(TOKEN_KEY, newToken);
     } else {
       window.localStorage.removeItem(TOKEN_KEY);
     }
-  });
+  }, [token]);
 
   const isLoggedIn = () => !!token.value;
 

src/hooks/useContainerSize.ts

@@ -14,10 +14,10 @@ import { ref, onMounted, onUnmounted, type Ref } from 'vue';
  * // </div>
  * ```
  *
- * @param headerOffset 从容器高度中扣除的表头偏移量，默认 45
+ * @param headerOffset 从容器高度中扣除的表头偏移量，默认 55
  */
 export function useContainerSize(options?: { headerOffset?: number }) {
-  const { headerOffset = 45 } = options ?? {};
+  const { headerOffset = 55 } = options ?? {};
 
   const containerRef = ref<HTMLElement | null>(null) as Ref<HTMLElement | null>;
   const width = ref(0);

src/hooks/useDebounce.ts

@@ -1,6 +1,7 @@
 // src/hooks/useDebounce.ts
-import { watch, onUnmounted, Ref } from 'vue';
+import { onUnmounted, Ref } from 'vue';
 import { useState } from './useState';
+import { useEffect } from './useEffect';
 
 export interface UseDebounceOptions {
   delay?: number;
@@ -40,7 +41,7 @@ export function useDebounce<T>(source: Ref<T>, options: number | UseDebounceOpti
     isFirstCall = true;
   };
 
-  watch(source, () => {
+  useEffect(() => {
     setIsPending(true);
 
     // 处理 maxWait
@@ -61,7 +62,9 @@ export function useDebounce<T>(source: Ref<T>, options: number | UseDebounceOpti
         updateValue();
       }, delay);
     }
-  });
+
+    return clearTimers;
+  }, [source]);
 
   // 卸载
   onUnmounted(() => {

src/hooks/usePagination.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // src/hooks/usePagination.ts
-import { computed, ref, watch, Ref, triggerRef } from 'vue';
+import { computed, ref, Ref, triggerRef } from 'vue';
+import { useEffect } from './useEffect';
 
 /**
  * 分页配置项
@@ -77,24 +78,20 @@ export function usePagination(options: UsePaginationOptions = {}): UsePagination
   const pageSizeRef = ref(options.pageSize ?? defaultPageSize);
   const totalRef = ref(options.total ?? 0);
 
-  watch(
-    () => options.current,
-    (val) => {
-      if (val !== undefined) currentRef.value = val;
-    },
-  );
-  watch(
-    () => options.pageSize,
-    (val) => {
-      if (val !== undefined) pageSizeRef.value = val;
-    },
-  );
-  watch(
-    () => options.total,
-    (val) => {
-      if (val !== undefined) totalRef.value = val;
-    },
-  );
+  useEffect(() => {
+    const val = options.current;
+    if (val !== undefined) currentRef.value = val;
+  }, [() => options.current]);
+
+  useEffect(() => {
+    const val = options.pageSize;
+    if (val !== undefined) pageSizeRef.value = val;
+  }, [() => options.pageSize]);
+
+  useEffect(() => {
+    const val = options.total;
+    if (val !== undefined) totalRef.value = val;
+  }, [() => options.total]);
 
   const totalPages = computed(() => {
     const total = totalRef.value;

src/hooks/useRequest.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { ref, Ref, watch, WatchSource, onUnmounted, computed } from 'vue';
+import { ref, Ref, WatchSource, onUnmounted, computed } from 'vue';
+import { useEffect } from './useEffect';
 
 export interface UseRequestReturn<T> {
   /** 纯净的数据，不包含后端外层壳 */
@@ -128,31 +129,29 @@ export function useRequest<T>(
   const shouldAutoRun = computed(() => !manual && ready.value);
   let hasAutoRun = false; // 标记是否已自动执行过，防止重复触发
 
-  watch(
-    shouldAutoRun,
-    (val) => {
-      if (val && !hasAutoRun) {
-        hasAutoRun = true;
-        run();
-      } else if (!val) {
-        // 当条件不满足时重置 hasAutoRun，使下次满足条件时能再次自动执行
-        hasAutoRun = false;
-      }
-    },
-    { immediate: true },
-  );
+  useEffect(() => {
+    const val = shouldAutoRun.value;
+    if (val && !hasAutoRun) {
+      hasAutoRun = true;
+      run();
+    } else if (!val) {
+      // 当条件不满足时重置 hasAutoRun，使下次满足条件时能再次自动执行
+      hasAutoRun = false;
+    }
+  }, [shouldAutoRun]);
 
   // refreshDeps 变化时重新请求（初始化时不再重复触发）
   if (refreshDeps && refreshDeps.length > 0) {
-    watch(
-      refreshDeps,
-      () => {
-        if (shouldAutoRun.value) {
-          run();
-        }
-      },
-      { deep: true },
-    );
+    let skipInitialRefresh = true;
+    useEffect(() => {
+      if (skipInitialRefresh) {
+        skipInitialRefresh = false;
+        return;
+      }
+      if (shouldAutoRun.value) {
+        run();
+      }
+    }, refreshDeps);
   }
 
   const getSignal = () => abortController?.signal;

src/hooks/useWebSocket.ts

@@ -1,5 +1,6 @@
-import { ref, watch, onBeforeUnmount, toValue } from 'vue';
+import { ref, onBeforeUnmount, toValue } from 'vue';
 import type { Ref, MaybeRefOrGetter } from 'vue';
+import { useEffect } from './useEffect';
 
 // --- 类型定义 ---
 export type WebSocketStatus = 'connecting' | 'open' | 'closed' | 'error';
@@ -216,14 +217,16 @@ export function useWebSocket(
   // --- 监听与副作用 ---
 
   // 监听 URL 变化，如果变了则重新连接
-  watch(
-    () => toValue(url),
-    () => {
-      if (status.value !== 'closed') {
-        connect();
-      }
-    },
-  );
+  let skipInitialUrlWatch = true;
+  useEffect(() => {
+    if (skipInitialUrlWatch) {
+      skipInitialUrlWatch = false;
+      return;
+    }
+    if (status.value !== 'closed') {
+      connect();
+    }
+  }, [() => toValue(url)]);
 
   // 组件卸载时清理资源
   onBeforeUnmount(() => {

src/layouts/BasicLayout.module.less

@@ -32,6 +32,71 @@
   }
 }
 
+// 面包屑
+.breadcrumb {
+  flex: 1;
+  margin-left: 8px;
+  font-size: 14px;
+
+  :global {
+    .ant-breadcrumb-link,
+    .ant-breadcrumb-separator,
+    .ant-breadcrumb-item a {
+      color: rgba(0, 0, 0, 0.65);
+    }
+
+    .ant-breadcrumb-item:last-child {
+      .ant-breadcrumb-link,
+      .ant-breadcrumb-separator,
+      a {
+        color: rgba(0, 0, 0, 0.88);
+        font-weight: 500;
+        cursor: default;
+      }
+    }
+  }
+}
+
+// Header 右侧：账号信息 + 退出图标
+.headerRight {
+  margin-left: auto;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.userPhone {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.logoutIcon {
+  width: 18px;
+  height: 18px;
+  opacity: 0.45;
+  cursor: pointer;
+  transition: opacity 0.3s;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+// 下拉菜单项：图标 + 文字
+.menuItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+
+  :global(.anticon) {
+    font-size: 14px;
+  }
+}
+
+.menuItemDanger {
+  color: #ff4d4f;
+}
+
 .content {
   margin: 16px;
   border-radius: 8px;

src/layouts/BasicLayout.module.wxss

@@ -1,46 +0,0 @@
-.container {
-  min-height: 100vh;
-  height: 100vh;
-}
-.logo {
-  height: 56px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  color: #1a1a1a;
-  background: #fff;
-}
-.logoText {
-  font-size: 16px;
-  font-weight: 600;
-  white-space: nowrap;
-}
-.trigger {
-  font-size: 18px;
-  cursor: pointer;
-  transition: color 0.3s;
-  padding: 0 12px;
-  display: inline-flex;
-  align-items: center;
-}
-.trigger:hover {
-  color: #1677ff;
-}
-.content {
-  margin: 16px;
-  padding: 24px;
-  background: #fff;
-  border-radius: 8px;
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.main {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}

src/layouts/BasicLayout.tsx

@@ -1,11 +1,13 @@
 import { computed, defineComponent, h, ref } from 'vue';
 import type { CSSProperties } from 'vue';
 import { useRouter, useRoute, RouterView } from 'vue-router';
-import { Layout, Menu } from 'ant-design-vue';
+import { Layout, Menu, Modal, Breadcrumb, Dropdown, message } from 'ant-design-vue';
 import type { MenuProps } from 'ant-design-vue';
 import {
   DashboardOutlined,
+  EditOutlined,
   InfoCircleOutlined,
+  LogoutOutlined,
   MenuFoldOutlined,
   MenuUnfoldOutlined,
   SettingOutlined,
@@ -13,6 +15,10 @@ import {
   TrophyOutlined,
 } from '@ant-design/icons-vue';
 import { useMenuStore } from '@/stores/menuStore';
+import { useUserStore } from '@/stores/userStore';
+import { useState, useBreadcrumb, auth } from '@/hooks';
+import { ChangePasswordModal } from '@/components';
+import logoutSvg from '@/assets/img/icon/logout.svg';
 import styles from './BasicLayout.module.less';
 
 const { Header, Sider, Content, Footer } = Layout;
@@ -86,6 +92,8 @@ export default defineComponent({
     const collapsed = ref(false);
 
     const { menuItems } = useMenuStore();
+    const { phone } = useUserStore();
+    const { breadcrumbs } = useBreadcrumb();
 
     const selectedKeys = computed<string[]>(() => [route.path]);
 
@@ -99,6 +107,53 @@ export default defineComponent({
       collapsed.value = !collapsed.value;
     };
 
+    /** ===== 退出登录 ===== */
+    const handleLogout = () => {
+      Modal.confirm({
+        title: '提示',
+        content: '是否退出登录？',
+        okText: '确认',
+        cancelText: '取消',
+        onOk: () => {
+          const { clearUser } = useUserStore();
+          clearUser();
+          auth.logout();
+        },
+      });
+    };
+
+    /** ===== 修改密码弹窗 ===== */
+    const [changePwdVisible, setChangePwdVisible] = useState<boolean>(false);
+    const [changePwdSubmitting, setChangePwdSubmitting] = useState<boolean>(false);
+
+    const handleChangePassword = () => {
+      setChangePwdVisible(true);
+    };
+
+    const handleChangePwdSave = async (payload: { newPassword: string }) => {
+      if (changePwdSubmitting.value) return;
+      setChangePwdSubmitting(true);
+      try {
+        // TODO: 替换为真实 API 调用
+        console.log('修改密码:', payload);
+        message.success('修改成功');
+        setChangePwdVisible(false);
+      } catch (err: any) {
+        message.error(err?.msg || '修改失败');
+      } finally {
+        setChangePwdSubmitting(false);
+      }
+    };
+
+    /** ===== 头像下拉菜单：修改密码 / 退出登录 ===== */
+    const handleUserMenuClick: MenuProps['onClick'] = ({ key }) => {
+      if (key === 'changePassword') {
+        handleChangePassword();
+      } else if (key === 'logout') {
+        handleLogout();
+      }
+    };
+
     return () => (
       <Layout class={styles.container}>
         <Sider style={siderStyle} collapsed={collapsed.value} trigger={null} collapsible>
@@ -119,6 +174,49 @@ export default defineComponent({
             <span class={styles.trigger} onClick={toggleCollapsed}>
               {collapsed.value ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
             </span>
+
+            {/* 面包屑：紧跟在折叠按钮之后 */}
+            <Breadcrumb separator=">" class={styles.breadcrumb}>
+              {breadcrumbs.value.map((item, index) => {
+                const isLast = index === breadcrumbs.value.length - 1;
+                return (
+                  <Breadcrumb.Item key={item.path || index}>
+                    {isLast || !item.path ? (
+                      <span>{item.title}</span>
+                    ) : (
+                      <a onClick={() => router.push(item.path as string)}>{item.title}</a>
+                    )}
+                  </Breadcrumb.Item>
+                );
+              })}
+            </Breadcrumb>
+
+            {/* 右侧: 账号信息 + 退出 */}
+            <div class={styles.headerRight}>
+              <span class={styles.userPhone}>{phone.value}</span>
+              <Dropdown trigger={['hover']} placement="bottomLeft">
+                {{
+                  default: () => <img src={logoutSvg} class={styles.logoutIcon} />,
+                  overlay: () => (
+                    <Menu onClick={handleUserMenuClick}>
+                      <Menu.Item key="changePassword">
+                        <span class={styles.menuItem}>
+                          <EditOutlined />
+                          修改密码
+                        </span>
+                      </Menu.Item>
+                      <Menu.Divider />
+                      <Menu.Item key="logout">
+                        <span class={`${styles.menuItem} ${styles.menuItemDanger}`}>
+                          <LogoutOutlined />
+                          退出登录
+                        </span>
+                      </Menu.Item>
+                    </Menu>
+                  ),
+                }}
+              </Dropdown>
+            </div>
           </Header>
 
           <Content class={styles.content}>
@@ -127,6 +225,16 @@ export default defineComponent({
 
           <Footer style={footerStyle}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</Footer>
         </Layout>
+
+        {/* 修改密码弹窗 */}
+        {changePwdVisible.value && (
+          <ChangePasswordModal
+            visible={changePwdVisible.value}
+            submitting={changePwdSubmitting.value}
+            onClose={() => setChangePwdVisible(false)}
+            onSave={handleChangePwdSave}
+          />
+        )}
       </Layout>
     );
   },

src/main.ts

@@ -6,10 +6,13 @@ import App from './App';
 import router from './router';
 import './router/guard'; // 路由守卫:登录鉴权 + 动态菜单加载
 import './assets/styles/index.less';
+import ypComponent from '@yp-component/root';
+import '@yp-component/root/style.css';
 
 const app = createApp(App);
 
 app.use(router);
 app.use(Antd);
+app.use(ypComponent);
 
 app.mount('#app');

src/pages/events/banner/components/BannerFormModal.module.less

@@ -58,27 +58,47 @@
 
 /* ===== 预览 ===== */
 .previewWrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  border: 1px solid #e8e8e8;
+  position: relative;
+  width: 100%;
+  height: 140px;
+  border: 1px solid #d9d9d9;
   border-radius: 6px;
-  background-color: #fff;
-  padding: 12px;
+  overflow: hidden;
+  background-color: #f5f5f5;
+
+  :global {
+    .ant-spin-nested-loading,
+    .ant-spin-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 
 .previewImg {
   width: 100%;
-  max-width: 420px;
-  max-height: 160px;
-  object-fit: contain;
-  border-radius: 4px;
+  height: 100%;
+  object-fit: cover;
+  display: block;
 }
 
-.previewActions {
-  display: flex;
-  gap: 8px;
+.uploadAgainBtn {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  text-align: center;
+  padding: 4px 0;
+  cursor: pointer;
+  font-size: 12px;
+  user-select: none;
+  transition: background 0.2s;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.65);
+  }
 }
 
 /* ===== 提示 ===== */

src/pages/events/banner/components/BannerFormModal.tsx

@@ -1,4 +1,5 @@
-import { defineComponent, ref, reactive, watch } from 'vue';
+import { defineComponent, ref, reactive } from 'vue';
+import { useEffect } from '@/hooks';
 import {
   Modal,
   Form,
@@ -11,7 +12,8 @@ import {
   Spin,
 } from 'ant-design-vue';
 import { JUMP_TYPE_OPTIONS, EVENT_OPTIONS, REGION_OPTIONS } from '../model/useBannerModel';
-import { uploadFilesOneByOne, OssUploadType } from '@/utils/oss';
+import { ImageCropper } from '@yp-component/root';
+import { uploadFile, OssUploadType } from '@/utils/oss';
 import dayjs from 'dayjs';
 import styles from './BannerFormModal.module.less';
 
@@ -34,6 +36,11 @@ const TITLE_MAX = 50;
 const PATH_MAX = 200;
 const URL_MAX = 500;
 
+/** 图片上传限制：最大 10MB */
+const IMAGE_MAX_SIZE = 10 * 1024 * 1024;
+/** 裁剪比例：1053:351 = 3:1 */
+const CROP_ASPECT_RATIO = 1053 / 351;
+
 interface BannerFormModalProps {
   visible: boolean;
   record: any;
@@ -42,6 +49,20 @@ interface BannerFormModalProps {
   onSave: (formData: any) => void;
 }
 
+/**
+ * 将 base64 字符串转换为 File 对象
+ */
+function base64ToFile(dataUrl: string, fileName: string): File {
+  const arr = dataUrl.split(',');
+  const mime = arr[0].match(/:(.*?);/)?.[1] || 'image/png';
+  const bstr = atob(arr[1]);
+  const u8arr = new Uint8Array(bstr.length);
+  for (let i = 0; i < bstr.length; i++) {
+    u8arr[i] = bstr.charCodeAt(i);
+  }
+  return new File([u8arr], fileName, { type: mime });
+}
+
 /**
  * Banner 新增/编辑表单弹窗
  */
@@ -59,6 +80,11 @@ export default defineComponent({
     const fileInputRef = ref<HTMLInputElement | null>(null);
     const formData = reactive(getDefaultForm());
 
+    /** 裁剪弹窗状态 */
+    const cropperVisible = ref(false);
+    /** 待裁剪图片的本地预览 URL */
+    const uploadImageUrl = ref('');
+
     /** 根据 record 初始化表单 */
     const initFormFromRecord = (record: any) => {
       const fresh = getDefaultForm();
@@ -94,31 +120,27 @@ export default defineComponent({
     };
 
     /** 监听 visible 变化重置表单 */
-    watch(
-      () => props.visible,
-      (val) => {
-        if (val) {
-          initFormFromRecord(props.record);
-          setTimeout(() => formRef.value?.clearValidate(), 0);
-        }
-      },
-      { immediate: true },
-    );
+    useEffect(() => {
+      if (props.visible) {
+        initFormFromRecord(props.record);
+        cropperVisible.value = false;
+        uploadImageUrl.value = '';
+        setTimeout(() => formRef.value?.clearValidate(), 0);
+      }
+    }, [() => props.visible]);
 
     /** 监听 jumpType 变化时清理联动字段 */
-    watch(
-      () => formData.jumpType,
-      (newType) => {
-        if (newType !== 'event_detail') formData.relatedEventId = '';
-        if (newType !== 'miniprogram_page') formData.pagePath = '';
-        if (newType !== 'custom_link') formData.customUrl = '';
-        const fieldsToValidate: string[] = [];
-        if (newType === 'event_detail') fieldsToValidate.push('relatedEventId');
-        if (newType === 'miniprogram_page') fieldsToValidate.push('pagePath');
-        if (newType === 'custom_link') fieldsToValidate.push('customUrl');
-        if (fieldsToValidate.length) formRef.value?.clearValidate(fieldsToValidate);
-      },
-    );
+    useEffect(() => {
+      const newType = formData.jumpType;
+      if (newType !== 'event_detail') formData.relatedEventId = '';
+      if (newType !== 'miniprogram_page') formData.pagePath = '';
+      if (newType !== 'custom_link') formData.customUrl = '';
+      const fieldsToValidate: string[] = [];
+      if (newType === 'event_detail') fieldsToValidate.push('relatedEventId');
+      if (newType === 'miniprogram_page') fieldsToValidate.push('pagePath');
+      if (newType === 'custom_link') fieldsToValidate.push('customUrl');
+      if (fieldsToValidate.length) formRef.value?.clearValidate(fieldsToValidate);
+    }, [() => formData.jumpType]);
 
     /** 触发隐藏的文件选择器 */
     const triggerFilePicker = () => {
@@ -126,8 +148,8 @@ export default defineComponent({
       fileInputRef.value?.click();
     };
 
-    /** 处理文件选择 */
-    const handleFileChange = async (e: Event) => {
+    /** 处理文件选择 → 打开裁剪弹窗 */
+    const handleFileChange = (e: Event) => {
       const target = e.target as HTMLInputElement;
       const file = target.files?.[0];
       // 重置 input 以便同一文件可再次选择
@@ -138,40 +160,61 @@ export default defineComponent({
         message.error('请选择图片文件');
         return;
       }
-      const MAX_SIZE = 5 * 1024 * 1024;
-      if (file.size > MAX_SIZE) {
-        message.error('图片大小不能超过 5MB');
+      if (file.size > IMAGE_MAX_SIZE) {
+        message.error(`图片大小不能超过 ${IMAGE_MAX_SIZE / 1024 / 1024}MB`);
         return;
       }
 
-      // 本地预览
-      const localUrl = URL.createObjectURL(file);
+      // 生成本地预览 URL，打开裁剪弹窗
+      uploadImageUrl.value = URL.createObjectURL(file);
+      cropperVisible.value = true;
+    };
+
+    /** 裁剪确认回调：将裁剪后的图片上传到 OSS */
+    const handleCropConfirm = async (dataUrl: string) => {
+      cropperVisible.value = false;
+
+      // 释放旧的本地预览
+      if (formData.imageUrl && formData.imageUrl.startsWith('blob:')) {
+        URL.revokeObjectURL(formData.imageUrl);
+      }
+
+      // 先用 base64 做本地预览
+      const localUrl = dataUrl;
       formData.imageUrl = localUrl;
       formData.imageStatus = 'uploading';
 
       try {
-        await uploadFilesOneByOne([file], OssUploadType.Banner, {
-          onSuccess: (url) => {
-            URL.revokeObjectURL(localUrl);
-            formData.imageUrl = url;
-            formData.imageStatus = 'success';
-            message.success('图片上传成功');
-          },
-          onError: (err, idx) => {
-            console.error(`[Banner] 上传失败 (${idx}):`, err);
-            URL.revokeObjectURL(localUrl);
-            formData.imageUrl = '';
-            formData.imageStatus = 'error';
-            message.error('图片上传失败');
-          },
-        });
+        const file = base64ToFile(dataUrl, `banner_${Date.now()}.jpg`);
+        const result = await uploadFile(file, OssUploadType.Banner as any);
+
+        // 释放本地预览
+        URL.revokeObjectURL(localUrl);
+        formData.imageUrl = result.url;
+        formData.imageStatus = 'success';
+        message.success('图片上传成功');
       } catch (err: any) {
-        console.error('[Banner] 获取上传凭证失败:', err);
+        console.error('[Banner] 上传失败:', err);
         URL.revokeObjectURL(localUrl);
         formData.imageUrl = '';
         formData.imageStatus = 'error';
         message.error(err?.message || '图片上传失败');
       }
+
+      // 清理裁剪资源
+      if (uploadImageUrl.value) {
+        URL.revokeObjectURL(uploadImageUrl.value);
+      }
+      uploadImageUrl.value = '';
+    };
+
+    /** 裁剪弹窗取消 */
+    const onCropperCancel = () => {
+      cropperVisible.value = false;
+      if (uploadImageUrl.value) {
+        URL.revokeObjectURL(uploadImageUrl.value);
+      }
+      uploadImageUrl.value = '';
     };
 
     /** 删除已上传图片 */
@@ -214,266 +257,293 @@ export default defineComponent({
     };
 
     return () => (
-      <Modal
-        title={props.record ? '编辑 Banner' : '新增 Banner'}
-        visible={props.visible}
-        onCancel={props.onClose}
-        width={640}
-        destroyOnClose
-        footer={null}
-        centered
-      >
-        <Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
-          {/* ===== Banner 标题 ===== */}
-          <Form.Item
-            label="Banner标题"
-            name="title"
-            rules={[
-              { required: true, message: '请输入 Banner 标题' },
-              { max: TITLE_MAX, message: `标题最多 ${TITLE_MAX} 个字符` },
-            ]}
-          >
-            <Input
-              placeholder="请输入标题"
-              maxlength={TITLE_MAX}
-              allowClear
-              v-model:value={formData.title}
-            />
-          </Form.Item>
-
-          {/* ===== 上传图片 ===== */}
-          <Form.Item
-            label="上传图片"
-            name="imageUrl"
-            rules={[
-              {
-                validator: async () => {
-                  if (!formData.imageUrl || formData.imageUrl.startsWith('blob:')) {
-                    return Promise.reject(new Error('请上传 Banner 图片'));
-                  }
-                  return Promise.resolve();
-                },
-              },
-            ]}
-          >
-            <div class={styles.uploader}>
-              <input
-                ref={fileInputRef}
-                type="file"
-                accept="image/*"
-                style={{ display: 'none' }}
-                onChange={handleFileChange}
-              />
-              {formData.imageStatus === 'empty' || formData.imageStatus === 'error' ? (
-                <div
-                  class={`${styles.uploadCard} ${
-                    formData.imageStatus === 'error' ? styles.uploadCardError : ''
-                  }`}
-                  onClick={triggerFilePicker}
-                >
-                  <span class={styles.uploadIcon}>+</span>
-                  <span class={styles.uploadHint}>点击上传</span>
-                  <span class={styles.uploadTip}>
-                    建议尺寸 1053*351 像素
-                    <br />
-                    最多上传 1 张
-                  </span>
-                </div>
-              ) : (
-                <div class={styles.previewWrapper}>
-                  <Spin spinning={formData.imageStatus === 'uploading'} tip="上传中...">
-                    <img class={styles.previewImg} src={formData.imageUrl} alt="banner preview" />
-                  </Spin>
-                  <div class={styles.previewActions}>
-                    <Button size="small" onClick={triggerFilePicker}>
-                      替换
-                    </Button>
-                    <Button size="small" danger onClick={handleRemoveImage}>
-                      删除
-                    </Button>
-                  </div>
-                </div>
-              )}
-            </div>
-          </Form.Item>
-
-          {/* ===== 跳转类型 ===== */}
-          <Form.Item
-            label="跳转类型"
-            name="jumpType"
-            rules={[{ required: true, message: '请选择跳转类型' }]}
-          >
-            <Select
-              options={JUMP_TYPE_OPTIONS as any}
-              placeholder="请选择"
-              v-model:value={formData.jumpType}
-            />
-          </Form.Item>
-
-          {/* ===== 联动字段：根据跳转类型动态展示 ===== */}
-          {formData.jumpType === 'event_detail' && (
+      <>
+        <Modal
+          title={props.record ? '编辑 Banner' : '新增 Banner'}
+          visible={props.visible}
+          onCancel={props.onClose}
+          width={640}
+          destroyOnClose
+          footer={null}
+          centered
+        >
+          <Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
+            {/* ===== Banner 标题 ===== */}
             <Form.Item
-              label="关联赛事"
-              name="relatedEventId"
-              rules={[{ required: true, message: '请选择关联赛事' }]}
-            >
-              <Select
-                options={EVENT_OPTIONS as any}
-                placeholder="不关联"
-                allowClear
-                v-model:value={formData.relatedEventId}
-              />
-            </Form.Item>
-          )}
-
-          {formData.jumpType === 'miniprogram_page' && (
-            <Form.Item
-              label="页面路径"
-              name="pagePath"
+              label="Banner标题"
+              name="title"
               rules={[
-                { required: true, message: '请输入页面路径' },
-                {
-                  pattern: /^\//,
-                  message: '页面路径需以 / 开头',
-                },
-                { max: PATH_MAX, message: `路径最多 ${PATH_MAX} 个字符` },
+                { required: true, message: '请输入' },
+                { max: TITLE_MAX, message: `标题最多 ${TITLE_MAX} 个字符` },
               ]}
             >
               <Input
-                placeholder="/pages/index/index"
-                maxlength={PATH_MAX}
+                placeholder="请输入标题"
+                maxlength={TITLE_MAX}
                 allowClear
-                v-model:value={formData.pagePath}
+                v-model:value={formData.title}
               />
             </Form.Item>
-          )}
 
-          {formData.jumpType === 'custom_link' && (
+            {/* ===== 上传图片（必填，带裁剪） ===== */}
             <Form.Item
-              label="自定义链接"
-              name="customUrl"
+              label="上传图片"
+              name="imageUrl"
               rules={[
-                { required: true, message: '请输入自定义链接' },
-                {
-                  pattern: /^https?:\/\//i,
-                  message: '请输入以 http/https 开头的链接',
-                },
-                { max: URL_MAX, message: `链接最多 ${URL_MAX} 个字符` },
-              ]}
-            >
-              <Input
-                placeholder="https://xxx"
-                maxlength={URL_MAX}
-                allowClear
-                v-model:value={formData.customUrl}
-              />
-            </Form.Item>
-          )}
-
-          {formData.jumpType === 'none' && (
-            <div class={styles.tip}>选择"无链接"时，点击 Banner 不会跳转。</div>
-          )}
-
-          {/* ===== 所属区域 ===== */}
-          <Form.Item
-            label="所属区域"
-            name="region"
-            rules={[{ required: true, message: '请选择所属区域' }]}
-          >
-            <Select
-              options={REGION_OPTIONS as any}
-              placeholder="首页"
-              v-model:value={formData.region}
-            />
-          </Form.Item>
-
-          {/* ===== 展示时间（开始/结束） ===== */}
-          <div class={styles.timeRow}>
-            <Form.Item
-              label="开始时间"
-              name="displayStartTime"
-              class={styles.timeItem}
-              rules={[{ required: true, message: '请选择开始时间' }]}
-            >
-              <DatePicker
-                placeholder="年-月-日"
-                format="YYYY-MM-DD"
-                value={
-                  formData.displayTimeRange?.[0] ? dayjs(formData.displayTimeRange[0]) : undefined
-                }
-                onUpdate:value={(v: any) => {
-                  formData.displayTimeRange = [
-                    v ? v.format('YYYY-MM-DD') : '',
-                    formData.displayTimeRange?.[1] || '',
-                  ];
-                }}
-                style={{ width: '100%' }}
-              />
-            </Form.Item>
-
-            <Form.Item
-              label="结束时间"
-              name="displayEndTime"
-              class={styles.timeItem}
-              rules={[
-                { required: true, message: '请选择结束时间' },
+                { required: true, message: '请上传 Banner 图片' },
                 {
                   validator: async () => {
-                    const [s, e] = formData.displayTimeRange || [];
-                    if (s && e && new Date(e) < new Date(s)) {
-                      return Promise.reject(new Error('结束时间不能早于开始时间'));
+                    if (!formData.imageUrl || formData.imageUrl.startsWith('blob:')) {
+                      return Promise.reject(new Error('请上传 Banner 图片'));
                     }
                     return Promise.resolve();
                   },
                 },
               ]}
             >
-              <DatePicker
-                placeholder="年-月-日"
-                format="YYYY-MM-DD"
-                value={
-                  formData.displayTimeRange?.[1] ? dayjs(formData.displayTimeRange[1]) : undefined
-                }
-                onUpdate:value={(v: any) => {
-                  formData.displayTimeRange = [
-                    formData.displayTimeRange?.[0] || '',
-                    v ? v.format('YYYY-MM-DD') : '',
-                  ];
-                }}
-                style={{ width: '100%' }}
+              <div class={styles.uploader}>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/*"
+                  style={{ display: 'none' }}
+                  onChange={handleFileChange}
+                />
+                {formData.imageStatus === 'empty' || formData.imageStatus === 'error' ? (
+                  <div
+                    class={`${styles.uploadCard} ${
+                      formData.imageStatus === 'error' ? styles.uploadCardError : ''
+                    }`}
+                    onClick={triggerFilePicker}
+                  >
+                    <span class={styles.uploadIcon}>+</span>
+                    <span class={styles.uploadHint}>点击上传</span>
+                    <span class={styles.uploadTip}>
+                      建议尺寸 1053*351 像素
+                      <br />
+                      支持 JPG/PNG，最大 10MB
+                    </span>
+                  </div>
+                ) : (
+                  <div class={styles.previewWrapper}>
+                    <Spin spinning={formData.imageStatus === 'uploading'} tip="上传中...">
+                      <img class={styles.previewImg} src={formData.imageUrl} alt="banner preview" />
+                    </Spin>
+                    <div class={styles.uploadAgainBtn} onClick={handleRemoveImage}>
+                      重新上传
+                    </div>
+                  </div>
+                )}
+              </div>
+            </Form.Item>
+
+            {/* ===== 跳转类型 ===== */}
+            <Form.Item
+              label="跳转类型"
+              name="jumpType"
+              rules={[{ required: true, message: '请选择跳转类型' }]}
+            >
+              <Select
+                options={JUMP_TYPE_OPTIONS as any}
+                placeholder="请选择"
+                v-model:value={formData.jumpType}
               />
             </Form.Item>
+
+            {/* ===== 联动字段：根据跳转类型动态展示 ===== */}
+            {formData.jumpType === 'event_detail' && (
+              <Form.Item
+                label="关联赛事"
+                name="relatedEventId"
+                rules={[{ required: true, message: '请选择关联赛事' }]}
+              >
+                <Select
+                  options={EVENT_OPTIONS as any}
+                  placeholder="不关联"
+                  allowClear
+                  v-model:value={formData.relatedEventId}
+                />
+              </Form.Item>
+            )}
+
+            {formData.jumpType === 'miniprogram_page' && (
+              <Form.Item
+                label="页面路径"
+                name="pagePath"
+                rules={[
+                  { required: true, message: '请输入页面路径' },
+                  {
+                    pattern: /^\//,
+                    message: '页面路径需以 / 开头',
+                  },
+                  { max: PATH_MAX, message: `路径最多 ${PATH_MAX} 个字符` },
+                ]}
+              >
+                <Input
+                  placeholder="/pages/index/index"
+                  maxlength={PATH_MAX}
+                  allowClear
+                  v-model:value={formData.pagePath}
+                />
+              </Form.Item>
+            )}
+
+            {formData.jumpType === 'custom_link' && (
+              <Form.Item
+                label="自定义链接"
+                name="customUrl"
+                rules={[
+                  { required: true, message: '请输入自定义链接' },
+                  {
+                    pattern: /^https?:\/\//i,
+                    message: '请输入以 http/https 开头的链接',
+                  },
+                  { max: URL_MAX, message: `链接最多 ${URL_MAX} 个字符` },
+                ]}
+              >
+                <Input
+                  placeholder="https://xxx"
+                  maxlength={URL_MAX}
+                  allowClear
+                  v-model:value={formData.customUrl}
+                />
+              </Form.Item>
+            )}
+
+            {formData.jumpType === 'none' && (
+              <div class={styles.tip}>选择"无链接"时，点击 Banner 不会跳转。</div>
+            )}
+
+            {/* ===== 所属区域 ===== */}
+            <Form.Item
+              label="所属区域"
+              name="region"
+              rules={[{ required: true, message: '请选择所属区域' }]}
+            >
+              <Select
+                options={REGION_OPTIONS as any}
+                placeholder="首页"
+                v-model:value={formData.region}
+              />
+            </Form.Item>
+
+            {/* ===== 展示时间（开始/结束） ===== */}
+            <div class={styles.timeRow}>
+              <Form.Item
+                label="开始时间"
+                name="displayStartTime"
+                class={styles.timeItem}
+                rules={[{ required: true, message: '请选择开始时间' }]}
+              >
+                <DatePicker
+                  placeholder="年-月-日"
+                  format="YYYY-MM-DD"
+                  value={
+                    formData.displayTimeRange?.[0] ? dayjs(formData.displayTimeRange[0]) : undefined
+                  }
+                  onUpdate:value={(v: any) => {
+                    formData.displayTimeRange = [
+                      v ? v.format('YYYY-MM-DD') : '',
+                      formData.displayTimeRange?.[1] || '',
+                    ];
+                  }}
+                  style={{ width: '100%' }}
+                />
+              </Form.Item>
+
+              <Form.Item
+                label="结束时间"
+                name="displayEndTime"
+                class={styles.timeItem}
+                rules={[
+                  { required: true, message: '请选择结束时间' },
+                  {
+                    validator: async () => {
+                      const [s, e] = formData.displayTimeRange || [];
+                      if (s && e && new Date(e) < new Date(s)) {
+                        return Promise.reject(new Error('结束时间不能早于开始时间'));
+                      }
+                      return Promise.resolve();
+                    },
+                  },
+                ]}
+              >
+                <DatePicker
+                  placeholder="年-月-日"
+                  format="YYYY-MM-DD"
+                  value={
+                    formData.displayTimeRange?.[1] ? dayjs(formData.displayTimeRange[1]) : undefined
+                  }
+                  onUpdate:value={(v: any) => {
+                    formData.displayTimeRange = [
+                      formData.displayTimeRange?.[0] || '',
+                      v ? v.format('YYYY-MM-DD') : '',
+                    ];
+                  }}
+                  style={{ width: '100%' }}
+                />
+              </Form.Item>
+            </div>
+
+            {/* ===== 排序 ===== */}
+            <Form.Item
+              label="排序"
+              name="sort"
+              rules={[
+                { required: true, message: '请输入排序' },
+                { type: 'number', min: 1, max: 999, message: '排序范围 1-999' },
+              ]}
+            >
+              <InputNumber
+                placeholder="数字越小越靠前"
+                min={1}
+                max={999}
+                precision={0}
+                style={{ width: '200px' }}
+                v-model:value={formData.sort}
+              />
+            </Form.Item>
+          </Form>
+
+          {/* ===== 底部按钮 ===== */}
+          <div class={styles.footer}>
+            <Button onClick={props.onClose}>取消</Button>
+            <Button type="primary" loading={props.submitting} onClick={handleSubmit}>
+              确认保存
+            </Button>
           </div>
+        </Modal>
 
-          {/* ===== 排序 ===== */}
-          <Form.Item
-            label="排序"
-            name="sort"
-            rules={[
-              { required: true, message: '请输入排序' },
-              { type: 'number', min: 1, max: 999, message: '排序范围 1-999' },
-            ]}
-            extra="数字越小越靠前"
+        {/* ===== 图片裁剪弹窗 ===== */}
+        {cropperVisible.value && (
+          <Modal
+            visible={cropperVisible.value}
+            title="裁剪图片"
+            width={800}
+            footer={null}
+            onCancel={onCropperCancel}
+            centered
+            destroyOnClose
           >
-            <InputNumber
-              placeholder="数字越小越靠前"
-              min={1}
-              max={999}
-              precision={0}
-              style={{ width: '200px' }}
-              v-model:value={formData.sort}
-            />
-          </Form.Item>
-        </Form>
-
-        {/* ===== 底部按钮 ===== */}
-        <div class={styles.footer}>
-          <Button onClick={props.onClose}>取消</Button>
-          <Button type="primary" loading={props.submitting} onClick={handleSubmit}>
-            确认保存
-          </Button>
-        </div>
-      </Modal>
+            <div style={{ height: '500px' }}>
+              <ImageCropper
+                src={uploadImageUrl.value}
+                aspectRatio={CROP_ASPECT_RATIO}
+                autoCrop={true}
+                autoCropArea={0.8}
+                viewMode={1}
+                dragMode="move"
+                movable={true}
+                scalable={true}
+                zoomable={true}
+                cropBoxMovable={true}
+                cropBoxResizable={true}
+                onCrop={handleCropConfirm}
+              />
+            </div>
+          </Modal>
+        )}
+      </>
     );
   },
 });

src/pages/events/banner/index.tsx

@@ -153,7 +153,7 @@ export default defineComponent({
       handleToggleStatus,
     } = useBannerModel();
 
-    const { containerRef, height } = useContainerSize({ headerOffset: 55 });
+    const { containerRef, height } = useContainerSize();
 
     /** 删除二次确认 */
     const confirmDelete = (record: any) => {
@@ -199,7 +199,7 @@ export default defineComponent({
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="标题" name="searchTitle">
               <Input
-                placeholder="请输入 Banner 标题"
+                placeholder="请输入"
                 style={{ width: '200px' }}
                 allowClear
                 onPressEnter={handleSearch}
@@ -267,13 +267,15 @@ export default defineComponent({
         </div>
 
         {/* ===== 新增/编辑弹窗 ===== */}
-        <BannerFormModal
-          visible={modalVisible.value}
-          record={editingRecord.value}
-          submitting={formSubmitting.value}
-          onClose={handleCloseModal}
-          onSave={handleSave}
-        />
+        {modalVisible.value && (
+          <BannerFormModal
+            visible={modalVisible.value}
+            record={editingRecord.value}
+            submitting={formSubmitting.value}
+            onClose={handleCloseModal}
+            onSave={handleSave}
+          />
+        )}
       </div>
     );
   },

src/pages/events/list/components/EventRegulationModal.module.wxss

@@ -1,45 +0,0 @@
-.section {
-  margin-bottom: 20px;
-}
-.section:last-child {
-  margin-bottom: 0;
-}
-.sectionTitle {
-  font-size: 14px;
-  font-weight: 600;
-  color: rgba(0, 0, 0, 0.85);
-  margin-bottom: 10px;
-  padding-left: 8px;
-  border-left: 3px solid #1677ff;
-}
-.textBlock {
-  font-size: 13px;
-  line-height: 1.5;
-  color: rgba(0, 0, 0, 0.65);
-  white-space: pre-wrap;
-  background: #fafafa;
-  padding: 12px 16px;
-  border-radius: 4px;
-  border: 1px solid #f0f0f0;
-}
-.imageGrid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 12px;
-}
-.imageCell {
-  width: 100%;
-  aspect-ratio: 3 / 2;
-  background: #f5f5f5;
-  border-radius: 4px;
-  overflow: hidden;
-  border: 1px solid #f0f0f0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.imageCell :global(.ant-image) {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}

src/pages/events/list/index.tsx

@@ -106,7 +106,7 @@ export default defineComponent({
       handlePageChange,
     } = useEventListModel();
 
-    const { containerRef, height } = useContainerSize({ headerOffset: 55 });
+    const { containerRef, height } = useContainerSize();
 
     // 弹窗状态
     const [regulationModalVisible, setRegulationModalVisible] = useState<boolean>(false);
@@ -285,15 +285,19 @@ export default defineComponent({
         </div>
 
         {/* ===== 弹窗区 ===== */}
-        <EventRegulationModal
-          visible={regulationModalVisible.value}
-          onClose={() => setRegulationModalVisible(false)}
-        />
-        <EventDetailModal
-          visible={detailModalVisible.value}
-          record={currentRecord.value}
-          onClose={() => setDetailModalVisible(false)}
-        />
+        {regulationModalVisible.value && (
+          <EventRegulationModal
+            visible={regulationModalVisible.value}
+            onClose={() => setRegulationModalVisible(false)}
+          />
+        )}
+        {detailModalVisible.value && (
+          <EventDetailModal
+            visible={detailModalVisible.value}
+            record={currentRecord.value}
+            onClose={() => setDetailModalVisible(false)}
+          />
+        )}
       </div>
     );
   },

src/pages/events/orders/index.module.less

@@ -22,7 +22,7 @@
   display: flex;
   align-items: center;
   gap: 20px;
-  padding: 8px 0;
+  padding: 12px 16px;
   font-size: 14px;
   color: #1a1a1a;
 

src/pages/events/orders/index.tsx

@@ -107,7 +107,7 @@ export default defineComponent({
       handlePageChange,
     } = useOrderModel();
 
-    const { containerRef, height } = useContainerSize({ headerOffset: 55 });
+    const { containerRef, height } = useContainerSize();
 
     // 详情弹窗状态
     const [detailVisible, setDetailVisible] = useState<boolean>(false);
@@ -252,16 +252,18 @@ export default defineComponent({
         </div>
 
         {/* ===== 详情弹窗 ===== */}
-        <OrderDetailModal
-          visible={detailVisible.value}
-          record={currentRecord.value}
-          onClose={() => setDetailVisible(false)}
-          onReRefund={(record) => {
-            // 关闭详情弹窗，再弹出二次确认
-            setDetailVisible(false);
-            promptReRefund(record);
-          }}
-        />
+        {detailVisible.value && (
+          <OrderDetailModal
+            visible={detailVisible.value}
+            record={currentRecord.value}
+            onClose={() => setDetailVisible(false)}
+            onReRefund={(record) => {
+              // 关闭详情弹窗，再弹出二次确认
+              setDetailVisible(false);
+              promptReRefund(record);
+            }}
+          />
+        )}
       </div>
     );
   },

src/pages/events/users/index.tsx

@@ -72,7 +72,7 @@ export default defineComponent({
       handlePageChange,
     } = useUserModel();
 
-    const { containerRef, height } = useContainerSize({ headerOffset: 55 });
+    const { containerRef, height } = useContainerSize();
 
     const handleToggleStatus = (record: any) => {
       const isActive = record.status === 'active';

src/pages/login/index.tsx

@@ -3,6 +3,7 @@ import { Button, Checkbox, Form, FormItem, Input, message } from 'ant-design-vue
 import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
 import { auth } from '@/hooks/useAuth';
 import { useEffect } from '@/hooks/useEffect';
+import { useUserStore } from '@/stores/userStore';
 import styles from './index.module.less';
 
 interface LoginForm {
@@ -50,7 +51,13 @@ export default defineComponent({
 
       try {
         await new Promise((r) => setTimeout(r, 600));
-        await auth.login('mock_token_' + Date.now());
+        const token = 'mock_token_' + Date.now();
+
+        // 写入账号信息到 userStore
+        const { setUser } = useUserStore();
+        setUser({ phone: form.username, nickname: form.username, token });
+
+        await auth.login(token);
         message.success('登录成功');
 
         if (rememberMe.value) {

src/pages/system/roles/components/RoleFormModal.module.less

@@ -0,0 +1,33 @@
+.form {
+  :global {
+    .ant-form-item {
+      margin-bottom: 16px;
+    }
+  }
+}
+
+.treeWrapper {
+  max-height: 380px;
+  overflow: auto;
+  padding: 8px 12px;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+  background: #fafafa;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
+  margin-top: 8px;
+}
+
+.modal {
+  :global {
+    .ant-modal-body {
+      padding: 16px 24px 0;
+    }
+  }
+}

src/pages/system/roles/components/RoleFormModal.tsx

@@ -0,0 +1,141 @@
+import { defineComponent, ref, reactive } from 'vue';
+import { useEffect } from '@/hooks';
+import { Modal, Form, Input, Tree, Button } from 'ant-design-vue';
+import type { TreeProps } from 'ant-design-vue';
+import { roleNameRules, PERMISSION_TREE } from '../controller';
+import styles from './RoleFormModal.module.less';
+
+interface RoleFormModalProps {
+  visible: boolean;
+  record: any;
+  submitting?: boolean;
+  onClose: () => void;
+  onSave: (formData: any) => void;
+}
+
+/** 默认表单数据 */
+const getDefaultForm = () => ({
+  roleName: '',
+  checkedKeys: [] as string[],
+});
+
+/** 编辑模式默认勾选：所有权限（演示用） */
+const ALL_KEYS = (() => {
+  const keys: string[] = [];
+  const walk = (nodes: any[]) => {
+    for (const n of nodes) {
+      keys.push(n.key);
+      if (n.children?.length) walk(n.children);
+    }
+  };
+  walk(PERMISSION_TREE);
+  return keys;
+})();
+
+export default defineComponent({
+  name: 'RoleFormModal',
+  props: {
+    visible: { type: Boolean, default: false },
+    record: { type: Object, default: null },
+    submitting: { type: Boolean, default: false },
+    onClose: { type: Function, required: true },
+    onSave: { type: Function, required: true },
+  },
+  setup(props: RoleFormModalProps) {
+    const formRef = ref<any>();
+    const formData = reactive(getDefaultForm());
+
+    /** 根据 record 初始化表单 */
+    const initFormFromRecord = (record: any) => {
+      const fresh = getDefaultForm();
+      if (!record) {
+        Object.assign(formData, fresh);
+        return;
+      }
+      Object.assign(formData, {
+        ...fresh,
+        roleName: record.roleName || '',
+        // 编辑时默认全选（演示用，后续应按 record.permissions 回填）
+        checkedKeys: [...ALL_KEYS],
+      });
+    };
+
+    /** 监听 visible 重置 */
+    useEffect(() => {
+      if (props.visible) {
+        initFormFromRecord(props.record);
+        setTimeout(() => formRef.value?.clearValidate(), 0);
+      }
+    }, [() => props.visible]);
+
+    /** Tree 勾选回调（受控） */
+    const handleCheck: TreeProps['onCheck'] = (checked) => {
+      // checked 可能是 { checked: string[], halfChecked: string[] } 或 string[]
+      const keys = Array.isArray(checked) ? checked : (checked as any).checked;
+      formData.checkedKeys = keys as string[];
+    };
+
+    /** 提交 */
+    const handleSubmit = async () => {
+      try {
+        await formRef.value?.validate();
+      } catch {
+        return;
+      }
+      props.onSave({
+        roleName: formData.roleName,
+        permissions: formData.checkedKeys,
+      });
+    };
+
+    return () => {
+      const isEdit = !!props.record;
+
+      return (
+        <Modal
+          title={isEdit ? '编辑角色' : '新增角色'}
+          visible={props.visible}
+          onCancel={props.onClose}
+          width={520}
+          destroyOnClose
+          footer={null}
+          centered
+          class={styles.modal}
+        >
+          <Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
+            {/* 角色名称 */}
+            <Form.Item label="角色名称" name="roleName" rules={roleNameRules}>
+              <Input
+                placeholder="请输入"
+                maxlength={20}
+                allowClear
+                v-model:value={formData.roleName}
+              />
+            </Form.Item>
+
+            {/* 菜单权限配置 */}
+            <Form.Item label="菜单权限配置" name="permissions">
+              <div class={styles.treeWrapper}>
+                <Tree
+                  checkable
+                  defaultExpandAll
+                  treeData={PERMISSION_TREE as any}
+                  checkedKeys={formData.checkedKeys}
+                  onCheck={handleCheck as any}
+                />
+              </div>
+            </Form.Item>
+          </Form>
+
+          {/* 底部按钮 */}
+          <div class={styles.footer}>
+            <Button onClick={props.onClose}>取消</Button>
+            <Button type="primary" loading={props.submitting} onClick={handleSubmit}>
+              保存
+            </Button>
+          </div>
+        </Modal>
+      );
+    };
+  },
+});

src/pages/system/roles/components/UserListModal.module.less

@@ -0,0 +1,23 @@
+.filter {
+  margin-bottom: 16px;
+}
+
+.bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.total {
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 13px;
+}
+
+.paginationRow {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 12px;
+}

src/pages/system/roles/components/UserListModal.tsx

@@ -0,0 +1,136 @@
+import { defineComponent, ref, reactive, computed } from 'vue';
+import { Modal, Form, Input, Table, Button, Space, Pagination } from 'ant-design-vue';
+import { useEffect, useState } from '@/hooks';
+import styles from './UserListModal.module.less';
+
+interface UserListModalProps {
+  visible: boolean;
+  role: any;
+  users: any[];
+  renderStatus: (status: string) => any;
+  onClose: () => void;
+}
+
+export default defineComponent({
+  name: 'RoleUserListModal',
+  props: {
+    visible: { type: Boolean, default: false },
+    role: { type: Object, default: null },
+    users: { type: Array, default: () => [] },
+    renderStatus: { type: Function, required: true },
+    onClose: { type: Function, required: true },
+  },
+  setup(props: UserListModalProps) {
+    const filterForm = reactive({ searchKeyword: '' });
+
+    const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
+
+    /** 过滤后的用户列表 */
+    const filteredUsers = computed(() => {
+      const kw = filterForm.searchKeyword.trim();
+      if (!kw) return props.users;
+      return props.users.filter(
+        (u: any) => u.realName.includes(kw) || (u.phone && u.phone.includes(kw)),
+      );
+    });
+
+    /** 监听 visible/users 变化重置分页 */
+    useEffect(() => {
+      setPagination({ current: 1, pageSize: 10, total: filteredUsers.value.length });
+    }, [() => props.visible, () => props.users.length]);
+
+    const handleSearch = () => {
+      setPagination({ ...pagination.value, total: filteredUsers.value.length, current: 1 });
+    };
+
+    const handleReset = () => {
+      filterForm.searchKeyword = '';
+      setPagination({ current: 1, pageSize: 10, total: props.users.length });
+    };
+
+    const handlePageChange = (page: number, pageSize: number) => {
+      setPagination({ ...pagination.value, current: page, pageSize });
+    };
+
+    return () => {
+      const roleName = props.role?.roleName || '';
+
+      const columns = [
+        { title: '姓名', dataIndex: 'realName', key: 'realName', width: 120 },
+        { title: '手机号', dataIndex: 'phone', key: 'phone', width: 160 },
+        { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 200 },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          key: 'status',
+          width: 100,
+          align: 'center' as const,
+          customRender: ({ text }: { text: string }) => props.renderStatus(text),
+        },
+      ];
+
+      return (
+        <Modal
+          title={`${roleName} · 用户列表`}
+          visible={props.visible}
+          onCancel={props.onClose}
+          width={640}
+          footer={null}
+          centered
+          destroyOnClose
+        >
+          {/* 筛选 */}
+          <div class={styles.filter}>
+            <Form layout="inline" model={filterForm}>
+              <Form.Item label="姓名/手机号" name="searchKeyword">
+                <Input
+                  placeholder="姓名/手机号..."
+                  style={{ width: '200px' }}
+                  allowClear
+                  onPressEnter={handleSearch}
+                />
+              </Form.Item>
+              <Form.Item>
+                <Space>
+                  <Button type="primary" onClick={handleSearch}>
+                    查询
+                  </Button>
+                  <Button onClick={handleReset}>重置</Button>
+                </Space>
+              </Form.Item>
+            </Form>
+          </div>
+
+          {/* 表格 */}
+          <Table
+            columns={columns}
+            dataSource={filteredUsers.value}
+            size="small"
+            pagination={false}
+            bordered
+            rowKey="key"
+          />
+
+          {/* 底部：共 X 人 + 关闭按钮 */}
+          <div class={styles.bottom}>
+            <div class={styles.total}>共 {filteredUsers.value.length} 人</div>
+            <Button onClick={props.onClose}>关闭</Button>
+          </div>
+
+          {/* 分页（右侧） */}
+          {filteredUsers.value.length > pagination.value.pageSize && (
+            <div class={styles.paginationRow}>
+              <Pagination
+                current={pagination.value.current}
+                pageSize={pagination.value.pageSize}
+                total={filteredUsers.value.length}
+                size="small"
+                onChange={handlePageChange}
+              />
+            </div>
+          )}
+        </Modal>
+      );
+    };
+  },
+});

src/pages/system/roles/controller.ts

@@ -0,0 +1,65 @@
+/**
+ * 角色权限 - 表单域控制器
+ *
+ * 集中管理角色表单的规则、菜单权限树 mock 数据与提示文案。
+ */
+import type { Rule } from 'ant-design-vue/es/form';
+
+// ============================================================
+// 规则
+// ============================================================
+
+/** 角色名称规则：必填 + 长度限制 */
+export const roleNameRules: Rule[] = [
+  { required: true, message: '请输入角色名称' },
+  { max: 20, message: '角色名称最多 20 个字符' },
+];
+
+// ============================================================
+// 菜单权限树（mock）
+// ============================================================
+
+export interface MenuPermNode {
+  /** 唯一 key，作为 Tree 节点的 key */
+  key: string;
+  /** 显示标题 */
+  title: string;
+  /** 子节点 */
+  children?: MenuPermNode[];
+}
+
+/**
+ * 完整菜单权限树。
+ * 后续可改为从后端接口拉取（接口应返回该结构）。
+ */
+export const PERMISSION_TREE: MenuPermNode[] = [
+  {
+    key: 'events',
+    title: '赛事管理',
+    children: [
+      {
+        key: 'events.list',
+        title: '赛事列表',
+        children: [
+          { key: 'events.list.view', title: '赛事列表-查看' },
+          { key: 'events.list.on', title: '赛事列表-上架' },
+          { key: 'events.list.off', title: '赛事列表-下架' },
+          { key: 'events.rules.view', title: '赛事规程-查看' },
+        ],
+      },
+      {
+        key: 'orders',
+        title: '订单管理',
+        children: [
+          { key: 'orders.view', title: '订单管理-查看' },
+          { key: 'orders.refund', title: '订单管理-重新退款' },
+        ],
+      },
+      { key: 'users', title: '用户列表' },
+    ],
+  },
+  {
+    key: 'events_logs',
+    title: '赛事操作日志',
+  },
+];

src/pages/system/roles/index.module.less

@@ -0,0 +1,47 @@
+/**
+ * 表格 body 容器：占满 flex 剩余空间
+ */
+.tableBody {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+
+  :global {
+    .ant-spin-nested-loading,
+    .ant-spin-container,
+    .ant-table,
+    .ant-table-container {
+      height: 100%;
+    }
+  }
+}
+
+/* 用户数链接 */
+.userCountLink {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ===== 删除确认弹窗 ===== */
+.confirmContent {
+  padding: 4px 24px;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.85);
+
+  strong {
+    margin: 0 4px;
+    font-weight: 600;
+  }
+}
+
+.confirmTip {
+  margin-top: 8px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  line-height: 1.5;
+}
+
+:global(.deleteConfirmModal) {
+  .ant-modal-confirm-body {
+    padding: 24px !important;
+  }
+}

src/pages/system/roles/index.tsx

@@ -1,4 +1,76 @@
 import { defineComponent } from 'vue';
+import { Button, Input, Table, Form, Space, Select, Modal, Pagination } from 'ant-design-vue';
+import type { ModalProps } from 'ant-design-vue';
+import { useRoleModel } from './model/useRoleModel';
+import { useContainerSize } from '@/hooks';
+import RoleFormModal from './components/RoleFormModal';
+import UserListModal from './components/UserListModal';
+import styles from './index.module.less';
+
+/**
+ * bodyCell 渲染
+ */
+function renderBodyCell({
+  column,
+  record,
+  onViewUsers,
+  onEdit,
+  onDelete,
+}: {
+  column: any;
+  text: any;
+  record: any;
+  onViewUsers: (record: any) => void;
+  onEdit: (record: any) => void;
+  onDelete: (record: any) => void;
+}) {
+  if (column.dataIndex === 'userCount') {
+    return (
+      <a class={styles.userCountLink} onClick={() => onViewUsers(record)}>
+        {record.userCount}人
+      </a>
+    );
+  }
+
+  if (column.key === 'action') {
+    return (
+      <Space>
+        <Button type="link" size="small" onClick={() => onEdit(record)}>
+          编辑
+        </Button>
+        <Button type="link" size="small" danger onClick={() => onDelete(record)}>
+          删除
+        </Button>
+      </Space>
+    );
+  }
+  return;
+}
+
+/**
+ * 删除角色二次确认
+ */
+function confirmDelete({ record, onOk }: { record: any; onOk: (record: any) => void }) {
+  Modal.confirm({
+    title: '确认删除',
+    icon: null,
+    class: styles.deleteConfirmModal,
+    content: (
+      <div class={styles.confirmContent}>
+        <div>
+          <span>确定要删除角色</span>
+          <strong>{record.roleName}</strong>
+          <span>吗？</span>
+        </div>
+        <div class={styles.confirmTip}>删除后该角色下的用户将失去对应的权限，请谨慎操作。</div>
+      </div>
+    ),
+    okText: '确认',
+    cancelText: '取消',
+    okButtonProps: { danger: true } as ModalProps['okButtonProps'],
+    onOk: () => onOk(record),
+  });
+}
 
 /**
  * 角色权限
@@ -6,9 +78,130 @@ import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'SystemRoles',
   setup() {
+    const {
+      filterForm,
+      loading,
+      dataSource,
+      columns,
+      pagination,
+      formVisible,
+      editingRecord,
+      formSubmitting,
+      userListVisible,
+      currentRole,
+      handleSearch,
+      handleReset,
+      handlePageChange,
+      handleAdd,
+      handleEdit,
+      handleCloseForm,
+      handleSave,
+      handleDelete,
+      handleViewUsers,
+      handleCloseUserList,
+      getRoleUsers,
+      renderStatus,
+    } = useRoleModel();
+
+    const { containerRef, height } = useContainerSize();
+
+    const triggerDelete = (record: any) => confirmDelete({ record, onOk: handleDelete });
+
+    const tableColumns = [
+      ...columns,
+      {
+        title: '操作',
+        key: 'action',
+        width: 140,
+        fixed: 'right' as const,
+        align: 'center' as const,
+      },
+    ];
+
     return () => (
       <div class="page-container">
-        <div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>角色权限 - 开发中</div>
+        {/* ===== 筛选区 ===== */}
+        <div class="page-filter">
+          <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
+            <Form.Item label="角色" name="searchKeyword">
+              <Input
+                placeholder="请输入"
+                style={{ width: '200px' }}
+                allowClear
+                onPressEnter={handleSearch}
+              />
+            </Form.Item>
+            <Form.Item>
+              <Space>
+                <Button onClick={handleReset}>重置</Button>
+                <Button type="primary" onClick={handleSearch} loading={loading.value}>
+                  查询
+                </Button>
+                <Button type="primary" onClick={handleAdd}>
+                  新增角色
+                </Button>
+              </Space>
+            </Form.Item>
+          </Form>
+        </div>
+
+        {/* ===== 表格区 ===== */}
+        <div class="page-table">
+          <div ref={containerRef} class={styles.tableBody}>
+            <Table
+              columns={tableColumns}
+              dataSource={dataSource.value}
+              loading={loading.value}
+              scroll={{ x: 'max-content', y: height.value }}
+              pagination={false}
+            >
+              {{
+                bodyCell: (args: any) =>
+                  renderBodyCell({
+                    ...args,
+                    onViewUsers: handleViewUsers,
+                    onEdit: handleEdit,
+                    onDelete: triggerDelete,
+                  }),
+              }}
+            </Table>
+          </div>
+
+          {/* 分页 */}
+          <div class="page-pagination">
+            <Pagination
+              current={pagination.value.current}
+              pageSize={pagination.value.pageSize}
+              total={pagination.value.total}
+              showSizeChanger
+              showTotal={(total: number) => `共 ${total} 条`}
+              onChange={handlePageChange}
+              onShowSizeChange={handlePageChange}
+            />
+          </div>
+        </div>
+
+        {/* ===== 角色表单弹窗 ===== */}
+        {formVisible.value && (
+          <RoleFormModal
+            visible={formVisible.value}
+            record={editingRecord.value}
+            submitting={formSubmitting.value}
+            onClose={handleCloseForm}
+            onSave={handleSave}
+          />
+        )}
+
+        {/* ===== 角色用户列表弹窗 ===== */}
+        {userListVisible.value && (
+          <UserListModal
+            visible={userListVisible.value}
+            role={currentRole.value}
+            users={getRoleUsers(currentRole.value?.roleId || '')}
+            renderStatus={renderStatus}
+            onClose={handleCloseUserList}
+          />
+        )}
       </div>
     );
   },

src/pages/system/roles/model/useRoleModel.ts

@@ -0,0 +1,323 @@
+import { computed, reactive, toRef, Ref, h } from 'vue';
+import { message, Tag } from 'ant-design-vue';
+import { useState, useDebounce, useThrottleFn } from '@/hooks';
+
+// ============================================================
+// 假数据
+// ============================================================
+
+const MOCK_DATA = [
+  {
+    key: '1',
+    roleId: 'R20250601001',
+    roleName: '超级管理员',
+    userCount: 1,
+    createTime: '2025-06-01 09:00:00',
+  },
+  {
+    key: '2',
+    roleId: 'R20250815001',
+    roleName: '运营管理员',
+    userCount: 3,
+    createTime: '2025-08-15 14:30:00',
+  },
+  {
+    key: '3',
+    roleId: 'R20251010001',
+    roleName: '财务',
+    userCount: 2,
+    createTime: '2025-10-10 10:15:00',
+  },
+  {
+    key: '4',
+    roleId: 'R20260120001',
+    roleName: '客服',
+    userCount: 4,
+    createTime: '2026-01-20 16:00:00',
+  },
+];
+
+/** 角色下用户列表 mock */
+const MOCK_USERS: Record<string, any[]> = {
+  R20250601001: [
+    {
+      key: '1',
+      userId: 'U001',
+      realName: '张超管',
+      phone: '13900000001',
+      createTime: '2025-06-01 09:00:00',
+      status: 'active',
+    },
+  ],
+  R20250815001: [
+    {
+      key: '1',
+      userId: 'U002',
+      realName: '李运营',
+      phone: '15900000002',
+      createTime: '2026-01-10 16:00:00',
+      status: 'disabled',
+    },
+    {
+      key: '2',
+      userId: 'U003',
+      realName: '王运营',
+      phone: '15900000001',
+      createTime: '2025-10-20 10:00:00',
+      status: 'active',
+    },
+    {
+      key: '3',
+      userId: 'U004',
+      realName: '张运营',
+      phone: '13900000002',
+      createTime: '2025-08-15 14:30:00',
+      status: 'active',
+    },
+  ],
+  R20251010001: [
+    {
+      key: '1',
+      userId: 'U005',
+      realName: '赵财务',
+      phone: '13800000005',
+      createTime: '2025-10-10 10:15:00',
+      status: 'active',
+    },
+    {
+      key: '2',
+      userId: 'U006',
+      realName: '钱财务',
+      phone: '13800000006',
+      createTime: '2025-10-12 11:00:00',
+      status: 'active',
+    },
+  ],
+  R20260120001: [
+    {
+      key: '1',
+      userId: 'U007',
+      realName: '孙客服',
+      phone: '13700000007',
+      createTime: '2026-01-20 16:00:00',
+      status: 'active',
+    },
+    {
+      key: '2',
+      userId: 'U008',
+      realName: '周客服',
+      phone: '13700000008',
+      createTime: '2026-01-21 09:30:00',
+      status: 'active',
+    },
+    {
+      key: '3',
+      userId: 'U009',
+      realName: '吴客服',
+      phone: '13700000009',
+      createTime: '2026-01-22 10:00:00',
+      status: 'active',
+    },
+    {
+      key: '4',
+      userId: 'U010',
+      realName: '郑客服',
+      phone: '13700000010',
+      createTime: '2026-01-23 14:00:00',
+      status: 'active',
+    },
+  ],
+};
+
+// ============================================================
+// 状态文本/颜色映射
+// ============================================================
+const STATUS_MAP: Record<string, { label: string; color: string }> = {
+  active: { label: '正常', color: 'green' },
+  disabled: { label: '禁用', color: 'red' },
+};
+
+// ============================================================
+// Model
+// ============================================================
+
+/**
+ * 角色权限页数据模型
+ */
+export function useRoleModel() {
+  // ===== 筛选条件 =====
+  const filterForm = reactive({
+    searchKeyword: '',
+  });
+
+  // 防抖 300ms
+  const { debouncedValue: debouncedKeyword } = useDebounce(
+    toRef(filterForm, 'searchKeyword') as Ref<string>,
+    { delay: 300 },
+  );
+
+  // ===== 表格状态 =====
+  const [loading, setLoading] = useState<boolean>(false);
+  const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 10,
+    total: MOCK_DATA.length,
+  });
+
+  // ===== 弹窗状态 =====
+  const [formVisible, setFormVisible] = useState<boolean>(false);
+  const [editingRecord, setEditingRecord] = useState<any>(null);
+  const [userListVisible, setUserListVisible] = useState<boolean>(false);
+  const [currentRole, setCurrentRole] = useState<any>(null);
+
+  // ===== 提交态 =====
+  const [formSubmitting, setFormSubmitting] = useState<boolean>(false);
+
+  // ===== 表格列配置 =====
+  const columns = [
+    { title: '角色名称', dataIndex: 'roleName', key: 'roleName', width: 200 },
+    {
+      title: '用户数',
+      dataIndex: 'userCount',
+      key: 'userCount',
+      width: 120,
+      align: 'center' as const,
+      customRender: ({ text }: { text: number }) => `${text}人`,
+    },
+    { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 200 },
+  ];
+
+  // ===== 计算属性 =====
+  const hasFilter = computed(() => debouncedKeyword.value.trim() !== '');
+
+  const isEdit = computed(() => editingRecord.value !== null);
+
+  // ===== 方法 =====
+
+  /** 查询 */
+  const handleSearch = useThrottleFn(async () => {
+    setLoading(true);
+    try {
+      console.log('搜索条件:', { keyword: debouncedKeyword.value });
+      // TODO: 替换为真实 API 调用
+      setDataSource(MOCK_DATA);
+      setPagination({ ...pagination.value, total: MOCK_DATA.length });
+      message.success('查询成功');
+    } catch (error: any) {
+      message.error(error.msg || '查询失败');
+    } finally {
+      setLoading(false);
+    }
+  }, 500);
+
+  /** 重置 */
+  const handleReset = useThrottleFn(() => {
+    filterForm.searchKeyword = '';
+    setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
+    setDataSource(MOCK_DATA);
+  }, 500);
+
+  const handlePageChange = (page: number, pageSize: number) => {
+    setPagination({ ...pagination.value, current: page, pageSize });
+    handleSearch();
+  };
+
+  /** 新增 */
+  const handleAdd = () => {
+    setEditingRecord(null);
+    setFormVisible(true);
+  };
+
+  /** 编辑 */
+  const handleEdit = (record: any) => {
+    setEditingRecord(record);
+    setFormVisible(true);
+  };
+
+  /** 关闭表单弹窗 */
+  const handleCloseForm = () => {
+    setFormVisible(false);
+    setEditingRecord(null);
+  };
+
+  /** 提交（新增/编辑） */
+  const handleSave = useThrottleFn(async (formPayload: any) => {
+    if (formSubmitting.value) return;
+    setFormSubmitting(true);
+    try {
+      console.log(isEdit.value ? '编辑角色' : '新增角色', formPayload);
+      // TODO: 替换为真实 API 调用
+      message.success(isEdit.value ? '编辑成功' : '新增成功');
+      handleCloseForm();
+      handleSearch();
+    } catch (error: any) {
+      message.error(error.msg || '操作失败');
+    } finally {
+      setFormSubmitting(false);
+    }
+  }, 500);
+
+  /** 删除 */
+  const handleDelete = useThrottleFn(async (record: any) => {
+    setLoading(true);
+    try {
+      console.log('删除角色:', record.roleId);
+      // TODO: 替换为真实 API 调用
+      setDataSource(dataSource.value.filter((item: any) => item.key !== record.key));
+      message.success('删除成功');
+    } catch (error: any) {
+      message.error(error.msg || '删除失败');
+    } finally {
+      setLoading(false);
+    }
+  }, 500);
+
+  /** 打开用户列表弹窗 */
+  const handleViewUsers = (record: any) => {
+    setCurrentRole(record);
+    setUserListVisible(true);
+  };
+
+  /** 关闭用户列表弹窗 */
+  const handleCloseUserList = () => {
+    setUserListVisible(false);
+    setCurrentRole(null);
+  };
+
+  /** 根据 roleId 获取该角色下的用户列表 */
+  const getRoleUsers = (roleId: string) => MOCK_USERS[roleId] || [];
+
+  /** 状态 Tag 渲染 */
+  const renderStatus = (status: string) => {
+    const info = STATUS_MAP[status] || { label: status || '-', color: 'default' };
+    return h(Tag, { color: info.color }, () => info.label);
+  };
+
+  return {
+    filterForm,
+    loading,
+    dataSource,
+    columns,
+    pagination,
+    hasFilter,
+    formVisible,
+    editingRecord,
+    isEdit,
+    formSubmitting,
+    userListVisible,
+    currentRole,
+    handleSearch,
+    handleReset,
+    handlePageChange,
+    handleAdd,
+    handleEdit,
+    handleCloseForm,
+    handleSave,
+    handleDelete,
+    handleViewUsers,
+    handleCloseUserList,
+    getRoleUsers,
+    renderStatus,
+  };
+}

src/pages/system/users/components/UserFormModal.module.less

@@ -0,0 +1,52 @@
+/* ===== 表单行/列布局 ===== */
+.row {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.col {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 让 antd Form.Item 在 col 里能正确控制宽度 */
+.form {
+  :global {
+    .ant-form-item {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+}
+
+/* ===== 密码区重置链接 ===== */
+.resetLink {
+  font-size: 14px;
+  color: #1677ff;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    color: #4096ff;
+  }
+}
+
+/* ===== 取消重置行 ===== */
+.cancelRow {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: -8px;
+  margin-bottom: 16px;
+  font-size: 12px;
+}
+
+/* ===== 底部按钮 ===== */
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
+  margin-top: 8px;
+}

src/pages/system/users/components/UserFormModal.tsx

@@ -0,0 +1,222 @@
+import { defineComponent, ref, reactive } from 'vue';
+import { useEffect } from '@/hooks';
+import { Modal, Form, Input, Select, Button } from 'ant-design-vue';
+import {
+  ROLE_FORM_OPTIONS,
+  PASSWORD_PLACEHOLDER,
+  realNameRules,
+  phoneRules,
+  passwordRules,
+  confirmPasswordRules,
+  roleRules,
+} from '../controller';
+import styles from './UserFormModal.module.less';
+
+interface UserFormModalProps {
+  visible: boolean;
+  record: any;
+  submitting?: boolean;
+  onClose: () => void;
+  onSave: (formData: any) => void;
+}
+
+/** 默认表单数据 */
+const getDefaultForm = () => ({
+  realName: '',
+  phone: '',
+  password: '',
+  confirmPassword: '',
+  role: '',
+});
+
+export default defineComponent({
+  name: 'UserFormModal',
+  props: {
+    visible: { type: Boolean, default: false },
+    record: { type: Object, default: null },
+    submitting: { type: Boolean, default: false },
+    onClose: { type: Function, required: true },
+    onSave: { type: Function, required: true },
+  },
+  setup(props: UserFormModalProps) {
+    const formRef = ref<any>();
+    const formData = reactive(getDefaultForm());
+
+    /** 编辑模式下是否处于"重置密码"状态 */
+    const isResetting = ref(false);
+
+    /** 根据 record 初始化表单 */
+    const initFormFromRecord = (record: any) => {
+      const fresh = getDefaultForm();
+      if (!record) {
+        Object.assign(formData, fresh);
+        isResetting.value = false;
+        return;
+      }
+      Object.assign(formData, {
+        ...fresh,
+        realName: record.realName || '',
+        phone: record.phone || '',
+        role: record.role || '',
+      });
+      isResetting.value = false;
+    };
+
+    /** 监听 visible 变化重置表单 */
+    useEffect(() => {
+      if (props.visible) {
+        initFormFromRecord(props.record);
+        isResetting.value = false;
+        setTimeout(() => formRef.value?.clearValidate(), 0);
+      }
+    }, [() => props.visible]);
+
+    /** 点击"重置密码" */
+    const handleResetPassword = () => {
+      isResetting.value = true;
+      formData.password = '';
+      formData.confirmPassword = '';
+    };
+
+    /** 提交 */
+    const handleSubmit = async () => {
+      try {
+        await formRef.value?.validate();
+      } catch {
+        return;
+      }
+
+      // 编辑模式下，未触发重置密码时，不提交密码字段
+      const payload: any = {
+        realName: formData.realName,
+        phone: formData.phone,
+        role: formData.role,
+      };
+      if (props.record) {
+        if (isResetting.value) {
+          payload.password = formData.password;
+        }
+      } else {
+        // 新增：密码必传
+        payload.password = formData.password;
+      }
+
+      props.onSave(payload);
+    };
+
+    /** 关闭 */
+    const handleClose = () => {
+      props.onClose();
+    };
+
+    return () => {
+      const isEdit = !!props.record;
+
+      return (
+        <Modal
+          title={isEdit ? '编辑用户' : '新增用户'}
+          visible={props.visible}
+          onCancel={handleClose}
+          width={580}
+          destroyOnClose
+          footer={null}
+          centered
+        >
+          <Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
+            {/* 姓名 / 手机号：同一行 */}
+            <div class={styles.row}>
+              <Form.Item label="姓名" name="realName" rules={realNameRules} class={styles.col}>
+                <Input
+                  placeholder="真实姓名"
+                  maxlength={8}
+                  allowClear
+                  v-model:value={formData.realName}
+                />
+              </Form.Item>
+              <Form.Item label="手机号" name="phone" rules={phoneRules} class={styles.col}>
+                <Input
+                  placeholder="11位手机号"
+                  maxlength={11}
+                  allowClear
+                  v-model:value={formData.phone}
+                />
+              </Form.Item>
+            </div>
+
+            {/* ====== 密码区 + 角色 ====== */}
+            {isEdit && !isResetting.value ? (
+              /* 编辑模式未重置：密码占位 + 角色 同一行 */
+              <div class={styles.row}>
+                <Form.Item label="密码" class={styles.col}>
+                  <Input
+                    value={PASSWORD_PLACEHOLDER}
+                    readonly
+                    suffix={
+                      <a class={styles.resetLink} onClick={handleResetPassword}>
+                        重置密码
+                      </a>
+                    }
+                  />
+                </Form.Item>
+                <Form.Item label="角色" name="role" rules={roleRules} class={styles.col}>
+                  <Select
+                    options={ROLE_FORM_OPTIONS as any}
+                    placeholder="请选择角色"
+                    v-model:value={formData.role}
+                  />
+                </Form.Item>
+              </div>
+            ) : (
+              <>
+                {/* 新密码 / 确认密码：同一行 */}
+                <div class={styles.row}>
+                  <Form.Item
+                    label={isEdit ? '新密码' : '初始密码'}
+                    name="password"
+                    rules={passwordRules}
+                    class={styles.col}
+                  >
+                    <Input.Password
+                      placeholder={isEdit ? '请输入新密码' : '至少8位，含字母+数字'}
+                      allowClear
+                      v-model:value={formData.password}
+                    />
+                  </Form.Item>
+                  <Form.Item
+                    label="确认密码"
+                    name="confirmPassword"
+                    class={styles.col}
+                    rules={confirmPasswordRules(() => formData.password)}
+                  >
+                    <Input.Password
+                      placeholder="再次输入密码"
+                      allowClear
+                      v-model:value={formData.confirmPassword}
+                    />
+                  </Form.Item>
+                </div>
+                {/* 角色：单独一行 */}
+                <Form.Item label="角色" name="role" rules={roleRules}>
+                  <Select
+                    options={ROLE_FORM_OPTIONS as any}
+                    placeholder="请选择角色"
+                    v-model:value={formData.role}
+                    style={{ width: '200px' }}
+                  />
+                </Form.Item>
+              </>
+            )}
+          </Form>
+
+          {/* 底部按钮 */}
+          <div class={styles.footer}>
+            <Button onClick={handleClose}>取消</Button>
+            <Button type="primary" loading={props.submitting} onClick={handleSubmit}>
+              确认保存
+            </Button>
+          </div>
+        </Modal>
+      );
+    };
+  },
+});

src/pages/system/users/controller.ts

@@ -0,0 +1,96 @@
+/**
+ * 用户管理 - 表单域控制器
+ *
+ * 集中管理用户新增/编辑弹窗的所有规则校验、下拉选项与常量。
+ * 各规则数组可直接传给 antd Form.Item 的 rules prop。
+ */
+import type { Rule } from 'ant-design-vue/es/form';
+import { isChinaPhone, isValidPassword, isValidRealName } from '@/utils/form';
+
+// ============================================================
+// 常量
+// ============================================================
+
+/** 密码占位符（写死长度，避免暴露真实密码长度） */
+export const PASSWORD_PLACEHOLDER = '********';
+
+/** 角色下拉选项（表单使用） */
+export const ROLE_FORM_OPTIONS = [
+  { value: 'admin', label: '超级管理员' },
+  { value: 'operator', label: '运营人员' },
+  { value: 'auditor', label: '审核人员' },
+] as const;
+
+// ============================================================
+// 真实姓名规则
+// ============================================================
+
+export const realNameRules: Rule[] = [
+  { required: true, message: '请输入姓名' },
+  { max: 8, message: '姓名最多 8 个字符' },
+  {
+    validator: (_rule: unknown, value: string) => {
+      if (!value) return Promise.resolve();
+      if (!isValidRealName(value)) {
+        return Promise.reject(new Error('姓名仅支持中英文或数字，1-8 个字符'));
+      }
+      return Promise.resolve();
+    },
+  },
+];
+
+// ============================================================
+// 手机号规则
+// ============================================================
+
+export const phoneRules: Rule[] = [
+  { required: true, message: '请输入手机号' },
+  {
+    validator: (_rule: unknown, value: string) => {
+      if (!value) return Promise.resolve();
+      if (!isChinaPhone(value)) {
+        return Promise.reject(new Error('请输入正确的11位中国大陆手机号'));
+      }
+      return Promise.resolve();
+    },
+  },
+];
+
+// ============================================================
+// 密码规则
+// ============================================================
+
+export const passwordRules: Rule[] = [
+  { required: true, message: '请输入密码' },
+  {
+    validator: (_rule: unknown, value: string) => {
+      if (!value) return Promise.resolve();
+      if (!isValidPassword(value)) {
+        return Promise.reject(new Error('密码至少8位，需包含字母与数字'));
+      }
+      return Promise.resolve();
+    },
+  },
+];
+
+/** 确认密码规则：必须与 password 字段一致 */
+export function confirmPasswordRules(getPassword: () => string): Rule[] {
+  return [
+    { required: true, message: '请再次输入密码' },
+    {
+      validator: (_rule: unknown, value: string) => {
+        if (!value) return Promise.resolve();
+        if (value !== getPassword()) {
+          return Promise.reject(new Error('两次输入的密码不一致'));
+        }
+        return Promise.resolve();
+      },
+    },
+  ];
+}
+
+// ============================================================
+// 角色规则
+// ============================================================
+
+export const roleRules: Rule[] = [{ required: true, message: '请选择角色' }];

src/pages/system/users/index.module.less

@@ -0,0 +1,43 @@
+/**
+ * 表格 body 容器：占满 flex 剩余空间，
+ * 确保 antd 嵌套 div 逐层传递 height: 100%，
+ * 使得 Table scroll.y 能正确解析。
+ */
+.tableBody {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+
+  :global {
+    .ant-spin-nested-loading,
+    .ant-spin-container,
+    .ant-table,
+    .ant-table-container {
+      height: 100%;
+    }
+  }
+}
+
+/* ===== 禁用/启用 二次确认弹窗 ===== */
+
+/* 内容块：左右加 padding，按用户要求 */
+.confirmContent {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 4px 0;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.85);
+
+  strong {
+    margin: 0 4px;
+    font-weight: 600;
+  }
+}
+
+/* antd Modal.confirm 默认 body 已经有 padding，这里额外覆盖一下确保一致 */
+:global(.toggleConfirmModal) {
+  .ant-modal-confirm-body {
+    padding: 24px !important;
+  }
+}

src/pages/system/users/index.tsx

@@ -1,14 +1,211 @@
 import { defineComponent } from 'vue';
+import { Button, Input, Table, Form, Space, Select, Modal, Pagination } from 'ant-design-vue';
+import { useUserModel, USER_ROLE_OPTIONS, USER_STATUS_OPTIONS } from './model/useUserModel';
+import { useContainerSize } from '@/hooks';
+import UserFormModal from './components/UserFormModal';
+import styles from './index.module.less';
 
 /**
- * 用户管理
+ * bodyCell 渲染函数
+ */
+function renderBodyCell({
+  column,
+  record,
+  onEdit,
+  onToggleStatus,
+}: {
+  column: any;
+  text: any;
+  record: any;
+  onEdit: (record: any) => void;
+  onToggleStatus: (record: any) => void;
+}) {
+  // 操作列
+  if (column.key === 'action') {
+    const isActive = record.status === 'active';
+    return (
+      <Space>
+        <Button type="link" size="small" onClick={() => onEdit(record)}>
+          编辑
+        </Button>
+        <Button
+          type="link"
+          size="small"
+          danger={isActive}
+          style={isActive ? {} : { color: '#52c41a' }}
+          onClick={() => onToggleStatus(record)}
+        >
+          {isActive ? '禁用' : '启用'}
+        </Button>
+      </Space>
+    );
+  }
+  return;
+}
+
+/**
+ * 禁用/启用 二次确认弹窗
+ */
+function confirmToggleStatus({ record, onOk }: { record: any; onOk: (record: any) => void }) {
+  const isActive = record.status === 'active';
+  const actionText = isActive ? '禁用' : '启用';
+  Modal.confirm({
+    title: `确认${actionText}`,
+    class: styles.toggleConfirmModal,
+    content: (
+      <div class={styles.confirmContent}>
+        <span>确定要{actionText}用户</span>
+        <strong>{record.realName}</strong>
+        <span>吗？</span>
+      </div>
+    ),
+    okText: '确认',
+    cancelText: '取消',
+    okButtonProps: { danger: isActive },
+    onOk: () => onOk(record),
+  });
+}
+
+/**
+ * 系统管理 - 用户管理
  */
 export default defineComponent({
   name: 'SystemUsers',
   setup() {
+    const {
+      filterForm,
+      loading,
+      dataSource,
+      columns,
+      pagination,
+      modalVisible,
+      editingRecord,
+      isEdit,
+      formSubmitting,
+      handleSearch,
+      handleReset,
+      handlePageChange,
+      handleAdd,
+      handleEdit,
+      handleCloseModal,
+      handleSave,
+      handleToggleStatus,
+    } = useUserModel();
+
+    const { containerRef, height } = useContainerSize();
+
+    /** 触发禁用/启用的二次确认 */
+    const triggerToggle = (record: any) => {
+      confirmToggleStatus({ record, onOk: handleToggleStatus });
+    };
+
+    /** 触发编辑 */
+    const triggerEdit = (record: any) => {
+      handleEdit(record);
+    };
+
+    /** 表格最终列：模型列 + 操作 */
+    const tableColumns = [
+      ...columns,
+      {
+        title: '操作',
+        key: 'action',
+        width: 140,
+        fixed: 'right' as const,
+        align: 'center' as const,
+      },
+    ];
+
     return () => (
       <div class="page-container">
-        <div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>用户管理 - 开发中</div>
+        {/* ===== 筛选区 ===== */}
+        <div class="page-filter">
+          <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
+            <Form.Item label="用户" name="searchKeyword">
+              <Input
+                placeholder="请输入姓名/手机号"
+                style={{ width: '200px' }}
+                allowClear
+                onPressEnter={handleSearch}
+              />
+            </Form.Item>
+            <Form.Item label="角色" name="role">
+              <Select
+                value={filterForm.role}
+                options={USER_ROLE_OPTIONS as any}
+                style={{ width: '120px' }}
+                allowClear
+                onUpdate:value={(val: any) => (filterForm.role = val || '')}
+              />
+            </Form.Item>
+            <Form.Item label="状态" name="status">
+              <Select
+                value={filterForm.status}
+                options={USER_STATUS_OPTIONS as any}
+                style={{ width: '120px' }}
+                allowClear
+                onUpdate:value={(val: any) => (filterForm.status = val || '')}
+              />
+            </Form.Item>
+            <Form.Item>
+              <Space>
+                <Button onClick={handleReset}>重置</Button>
+                <Button type="primary" onClick={handleSearch} loading={loading.value}>
+                  查询
+                </Button>
+                <Button type="primary" onClick={handleAdd}>
+                  新增
+                </Button>
+              </Space>
+            </Form.Item>
+          </Form>
+        </div>
+
+        {/* ===== 表格区 ===== */}
+        <div class="page-table">
+          <div ref={containerRef} class={styles.tableBody}>
+            <Table
+              columns={tableColumns}
+              dataSource={dataSource.value}
+              loading={loading.value}
+              scroll={{ x: 'max-content', y: height.value }}
+              pagination={false}
+            >
+              {{
+                bodyCell: (args: any) =>
+                  renderBodyCell({
+                    ...args,
+                    onEdit: triggerEdit,
+                    onToggleStatus: triggerToggle,
+                  }),
+              }}
+            </Table>
+          </div>
+
+          {/* 独立分页 */}
+          <div class="page-pagination">
+            <Pagination
+              current={pagination.value.current}
+              pageSize={pagination.value.pageSize}
+              total={pagination.value.total}
+              showSizeChanger
+              showTotal={(total: number) => `共 ${total} 条`}
+              onChange={handlePageChange}
+              onShowSizeChange={handlePageChange}
+            />
+          </div>
+        </div>
+
+        {/* ===== 新增/编辑弹窗 ===== */}
+        {modalVisible.value && (
+          <UserFormModal
+            visible={modalVisible.value}
+            record={editingRecord.value}
+            submitting={formSubmitting.value}
+            onClose={handleCloseModal}
+            onSave={handleSave}
+          />
+        )}
       </div>
     );
   },

src/pages/system/users/model/useUserModel.ts

@@ -0,0 +1,248 @@
+import { computed, reactive, toRef, Ref, h } from 'vue';
+import { message, Tag } from 'ant-design-vue';
+import { useState, useDebounce, useThrottleFn } from '@/hooks';
+
+// ============================================================
+// 常量
+// ============================================================
+
+/** 角色选项（筛选） */
+export const USER_ROLE_OPTIONS = [
+  { value: '', label: '全部' },
+  { value: 'admin', label: '管理员' },
+] as const;
+
+/** 状态选项（筛选） */
+export const USER_STATUS_OPTIONS = [
+  { value: '', label: '全部' },
+  { value: 'active', label: '正常' },
+  { value: 'disabled', label: '禁用' },
+] as const;
+
+/** 角色文本/颜色映射（表格渲染） */
+const ROLE_MAP: Record<string, { label: string; color: string }> = {
+  admin: { label: '管理员', color: 'blue' },
+  operator: { label: '运营人员', color: 'cyan' },
+  auditor: { label: '审核人员', color: 'purple' },
+};
+
+/** 状态文本/颜色映射 */
+const STATUS_MAP: Record<string, { label: string; color: string }> = {
+  active: { label: '正常', color: 'green' },
+  disabled: { label: '禁用', color: 'red' },
+};
+
+// ============================================================
+// 假数据
+// ============================================================
+
+const MOCK_DATA = [
+  {
+    key: '1',
+    userId: 'U20260526001',
+    realName: '张三',
+    phone: '15585658975',
+    role: 'admin',
+    status: 'active' as 'active' | 'disabled',
+    createTime: '2026.05.26 08:00:00',
+  },
+  {
+    key: '2',
+    userId: 'U20260526002',
+    realName: '王五',
+    phone: '13800138000',
+    role: 'admin',
+    status: 'disabled' as 'active' | 'disabled',
+    createTime: '2026.05.26 14:00:00',
+  },
+];
+
+// ============================================================
+// Model
+// ============================================================
+
+/**
+ * 系统管理 - 用户列表页数据模型
+ */
+export function useUserModel() {
+  // ===== 筛选条件 =====
+  const filterForm = reactive({
+    searchKeyword: '', // 用户名/手机号
+    role: '' as '' | 'admin',
+    status: '' as '' | 'active' | 'disabled',
+  });
+
+  // 防抖 300ms
+  const { debouncedValue: debouncedKeyword } = useDebounce(
+    toRef(filterForm, 'searchKeyword') as Ref<string>,
+    { delay: 300 },
+  );
+
+  // ===== 表格状态 =====
+  const [loading, setLoading] = useState<boolean>(false);
+  const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 10,
+    total: MOCK_DATA.length,
+  });
+
+  // ===== 弹窗状态 =====
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+  const [editingRecord, setEditingRecord] = useState<any>(null);
+
+  // ===== 提交态 =====
+  const [formSubmitting, setFormSubmitting] = useState<boolean>(false);
+
+  // ===== 表格列配置 =====
+  const columns = [
+    { title: '姓名', dataIndex: 'realName', key: 'realName', width: 120 },
+    { title: '手机号', dataIndex: 'phone', key: 'phone', width: 140 },
+    {
+      title: '角色',
+      dataIndex: 'role',
+      key: 'role',
+      width: 120,
+      align: 'center' as const,
+      customRender: ({ text }: { text: string }) => {
+        const info = ROLE_MAP[text] || { label: text || '-', color: 'default' };
+        return h(Tag, { color: info.color }, () => info.label);
+      },
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: 100,
+      align: 'center' as const,
+      customRender: ({ text }: { text: string }) => {
+        const info = STATUS_MAP[text] || { label: text || '-', color: 'default' };
+        return h(Tag, { color: info.color }, () => info.label);
+      },
+    },
+    { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 180 },
+  ];
+
+  // ===== 计算属性 =====
+  const hasFilter = computed(() => {
+    return (
+      debouncedKeyword.value.trim() !== '' || filterForm.role !== '' || filterForm.status !== ''
+    );
+  });
+
+  const isEdit = computed(() => editingRecord.value !== null);
+
+  // ===== 方法 =====
+
+  /** 查询（节流 500ms） */
+  const handleSearch = useThrottleFn(async () => {
+    setLoading(true);
+    try {
+      console.log('搜索条件:', {
+        keyword: debouncedKeyword.value,
+        role: filterForm.role,
+        status: filterForm.status,
+      });
+      // TODO: 替换为真实 API 调用
+      setDataSource(MOCK_DATA);
+      setPagination({ ...pagination.value, total: MOCK_DATA.length });
+      message.success('查询成功');
+    } catch (error: any) {
+      message.error(error.msg || '查询失败');
+    } finally {
+      setLoading(false);
+    }
+  }, 500);
+
+  /** 重置（节流 500ms） */
+  const handleReset = useThrottleFn(() => {
+    filterForm.searchKeyword = '';
+    filterForm.role = '';
+    filterForm.status = '';
+    setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
+    setDataSource(MOCK_DATA);
+  }, 500);
+
+  const handlePageChange = (page: number, pageSize: number) => {
+    setPagination({ ...pagination.value, current: page, pageSize });
+    handleSearch();
+  };
+
+  /** 打开新增弹窗 */
+  const handleAdd = () => {
+    setEditingRecord(null);
+    setModalVisible(true);
+  };
+
+  /** 打开编辑弹窗 */
+  const handleEdit = (record: any) => {
+    setEditingRecord(record);
+    setModalVisible(true);
+  };
+
+  /** 关闭弹窗 */
+  const handleCloseModal = () => {
+    setModalVisible(false);
+    setEditingRecord(null);
+  };
+
+  /** 提交表单（新增/编辑） */
+  const handleSave = useThrottleFn(async (formPayload: any) => {
+    if (formSubmitting.value) return;
+    setFormSubmitting(true);
+    try {
+      console.log(isEdit.value ? '编辑用户' : '新增用户', formPayload);
+      // TODO: 替换为真实 API 调用
+      message.success(isEdit.value ? '编辑成功' : '新增成功');
+      handleCloseModal();
+      handleSearch();
+    } catch (error: any) {
+      message.error(error.msg || '操作失败');
+    } finally {
+      setFormSubmitting(false);
+    }
+  }, 500);
+
+  /** 启用/禁用切换（节流 500ms） */
+  const handleToggleStatus = useThrottleFn(async (record: any) => {
+    setLoading(true);
+    try {
+      const newStatus = record.status === 'active' ? 'disabled' : 'active';
+      const actionText = newStatus === 'active' ? '启用' : '禁用';
+      console.log(`${actionText}用户:`, record.userId);
+      // TODO: 替换为真实 API 调用
+      setDataSource(
+        dataSource.value.map((item: any) =>
+          item.key === record.key ? { ...item, status: newStatus } : item,
+        ),
+      );
+      message.success(`${actionText}成功`);
+    } catch (error: any) {
+      message.error(error.msg || '操作失败');
+    } finally {
+      setLoading(false);
+    }
+  }, 500);
+
+  return {
+    filterForm,
+    loading,
+    dataSource,
+    columns,
+    pagination,
+    hasFilter,
+    modalVisible,
+    setModalVisible,
+    editingRecord,
+    isEdit,
+    formSubmitting,
+    handleSearch,
+    handleReset,
+    handlePageChange,
+    handleAdd,
+    handleEdit,
+    handleCloseModal,
+    handleSave,
+    handleToggleStatus,
+  };
+}

src/router/guard.ts

@@ -1,6 +1,13 @@
 import router from '@/router';
 import { auth } from '@/hooks/useAuth';
 
+const appTitle = import.meta.env.VITE_APP_TITLE || 'CPMS 运营平台';
+
+/** 导航完成后设置页面标题，避免动态路由加载前误匹配 404 导致 title 闪烁 */
+function updateDocumentTitle(title?: string) {
+  document.title = title ? `${title} - ${appTitle}` : appTitle;
+}
+
 /**
  * 全局路由守卫
  * 核心流程:
@@ -15,10 +22,6 @@ import { auth } from '@/hooks/useAuth';
  * matched 信息带过去,导致仍然匹配到 /:pathMatch(.*)*。
  */
 router.beforeEach(async (to, _from, next) => {
-  // 设置页面标题
-  const appTitle = import.meta.env.VITE_APP_TITLE || 'CPMS 运营平台';
-  document.title = to.meta.title ? `${to.meta.title} - ${appTitle}` : appTitle;
-
   // ── /login 特殊处理 ──
   if (to.path === '/login') {
     if (auth.isLoggedIn()) {
@@ -51,3 +54,7 @@ router.beforeEach(async (to, _from, next) => {
 
   next();
 });
+
+router.afterEach((to) => {
+  updateDocumentTitle(to.meta.title as string | undefined);
+});

src/stores/userStore.ts

@@ -0,0 +1,39 @@
+import { reactive, computed, toRefs } from 'vue';
+
+interface UserState {
+  /** 手机号 */
+  phone: string;
+  /** 昵称 */
+  nickname: string;
+  /** 登录 token */
+  token: string;
+}
+
+const state = reactive<UserState>({
+  phone: '13377981125',
+  nickname: '',
+  token: '',
+});
+
+export function useUserStore() {
+  const setUser = (user: Partial<UserState>) => {
+    if (user.phone !== undefined) state.phone = user.phone;
+    if (user.nickname !== undefined) state.nickname = user.nickname;
+    if (user.token !== undefined) state.token = user.token;
+  };
+
+  const clearUser = () => {
+    state.phone = '';
+    state.nickname = '';
+    state.token = '';
+  };
+
+  return {
+    ...toRefs(state),
+    phone: computed(() => state.phone),
+    nickname: computed(() => state.nickname),
+    token: computed(() => state.token),
+    setUser,
+    clearUser,
+  };
+}

src/utils/form.ts

@@ -0,0 +1,47 @@
+/**
+ * 表单正则校验工具
+ *
+ * 只导出纯正则常量与独立的校验函数，不做任何 antd/framework 耦合。
+ * 各页面的 Form.Item rules 应在对应页面目录的 controller.ts 中组装。
+ */
+
+// ============================================================
+// 正则常量
+// ============================================================
+
+/**
+ * 中国大陆手机号
+ * - 11 位数字，第二位 3-9
+ */
+export const CHINA_PHONE_REGEX = /^1[3-9]\d{9}$/;
+
+/**
+ * 登录密码
+ * - 至少 8 位，同时包含字母与数字
+ * - 允许特殊字符 !@#$%^&*()_+-=
+ */
+export const LOGIN_PASSWORD_REGEX = /^(?=.*[A-Za-z])(?=.*\d)[\w!@#$%^&*()_+\-=]{8,}$/;
+
+/**
+ * 真实姓名（中文/英文/数字，1-8 位）
+ */
+export const REAL_NAME_REGEX = /^[\u4e00-\u9fa5A-Za-z0-9·]{1,8}$/;
+
+// ============================================================
+// 校验函数
+// ============================================================
+
+/** 校验中国大陆手机号 */
+export function isChinaPhone(value: unknown): boolean {
+  return typeof value === 'string' && CHINA_PHONE_REGEX.test(value);
+}
+
+/** 校验密码：至少 8 位 + 同时含字母与数字 */
+export function isValidPassword(value: unknown): boolean {
+  return typeof value === 'string' && LOGIN_PASSWORD_REGEX.test(value);
+}
+
+/** 校验真实姓名：1-8 个字符 */
+export function isValidRealName(value: unknown): boolean {
+  return typeof value === 'string' && value.length > 0 && REAL_NAME_REGEX.test(value);
+}