feat: 对接用户管理相关接口字段

2026-07-30 15:43:24 +08:00
parent 14f6af35d8
commit 7276425abf
18 changed files with 1225 additions and 821 deletions
@@ -6,28 +6,36 @@ import {
  Input,
  Select,
  DatePicker,
+  Cascader,
  InputNumber,
  Button,
  message,
  Spin,
 } from 'ant-design-vue';
-import { JUMP_TYPE_OPTIONS, EVENT_OPTIONS, REGION_OPTIONS } from '../model/useBannerModel';
+import { JUMP_TYPE_OPTIONS, EVENT_OPTIONS } from '../model/useBannerModel';
+import {
+  getProvinceCityCascaderOptions,
+  parseAreaToCascaderPath,
+  formatCascaderArea,
+} from '@/utils/areaData';
 import { ImageCropper } from '@yp-component/root';
 import { FileImageOutlined } from '@ant-design/icons-vue';
 import { uploadFile, OssUploadType } from '@/utils/oss';
 import dayjs from 'dayjs';
 import styles from './BannerFormModal.module.less';

+/** 省市两级 Cascader 选项 */
+const cascaderAreaOptions = getProvinceCityCascaderOptions();
+
 /** 默认表单数据 */
 const getDefaultForm = () => ({
  title: '',
  imageUrl: '',
  imageStatus: 'empty' as 'empty' | 'uploading' | 'success' | 'error',
-  jumpType: 'event_detail' as 'event_detail' | 'miniprogram_page' | 'custom_link' | 'none',
-  relatedEventId: '',
-  pagePath: '',
-  customUrl: '',
-  region: 'home',
+  type: '1' as '1' | '2' | '3',
+  linkUrl: '',
+  relatedEventId: undefined as string | undefined,
+  area: '',
  displayTimeRange: null as [string, string] | null,
  sort: 1,
 });
@@ -80,6 +88,10 @@ export default defineComponent({
    const formRef = ref<any>();
    const fileInputRef = ref<HTMLInputElement | null>(null);
    const formData = reactive(getDefaultForm());
+    /** Cascader 区域的路径数组（与 formData.area 字符串双向同步） */
+    const areaPath = ref<string[]>([]);
+    /** 是否由用户主动切换了跳转类型（跳过初始加载的 type 联动校验） */
+    const typeChanged = ref(false);

    /** 裁剪弹窗状态 */
    const [cropperVisible, setCropperVisible] = useState(false);
@@ -91,38 +103,38 @@ export default defineComponent({
      const fresh = getDefaultForm();
      if (!record) {
        Object.assign(formData, fresh);
+        areaPath.value = [];
        return;
      }

-      let pagePath = '';
-      let customUrl = '';
-      if (record.jumpType === 'miniprogram_page') {
-        pagePath = record.jumpUrl || '';
-      } else if (record.jumpType === 'custom_link') {
-        customUrl = record.jumpUrl || '';
-      }
-
+      const area = record.area || record.region || '';
+      areaPath.value = parseAreaToCascaderPath(area);
      Object.assign(formData, {
        ...fresh,
        title: record.title || '',
-        imageUrl: record.imageUrl || '',
-        imageStatus: record.imageUrl ? ('success' as const) : ('empty' as const),
-        jumpType: record.jumpType || 'event_detail',
-        relatedEventId: record.relatedEventId || '',
-        pagePath,
-        customUrl,
-        region: record.region && record.region !== record.city ? record.region : 'home',
+        imageUrl: record.img || record.imageUrl || '',
+        imageStatus: record.img || record.imageUrl ? ('success' as const) : ('empty' as const),
+        type: String(record.type || record.jumpType || '1'),
+        linkUrl: record.linkUrl || record.jumpUrl || '',
+        relatedEventId: record.relatedEventId || undefined,
+        area,
        displayTimeRange:
-          record.displayStartTime && record.displayEndTime
-            ? ([record.displayStartTime, record.displayEndTime] as [string, string])
+          (record.showTimeBegin || record.displayStartTime) &&
+          (record.showTimeEnd || record.displayEndTime)
+            ? ([
+                record.showTimeBegin || record.displayStartTime,
+                record.showTimeEnd || record.displayEndTime,
+              ] as [string, string])
            : null,
-        sort: record.sort ?? 1,
+        sort: Number(record.sort ?? 1),
      });
    };

    /** 监听 visible 变化重置表单 */
    useEffect(() => {
      if (props.visible) {
+        // 标记首次渲染，跳过 type 联动校验
+        typeChanged.value = false;
        initFormFromRecord(props.record);
        setCropperVisible(false);
        setUploadImageUrl('');
@@ -130,18 +142,33 @@ export default defineComponent({
      }
    }, [() => props.visible]);

-    /** 监听 jumpType 变化时清理联动字段 */
+    /** 监听 type 变化时清理联动字段值和校验 */
    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]);
+      // 首次加载跳过校验
+      if (!typeChanged.value) {
+        if (formData.type !== '1') formData.relatedEventId = undefined;
+        if (formData.type !== '2' && formData.type !== '3') formData.linkUrl = '';
+        typeChanged.value = true;
+        return;
+      }
+
+      if (formData.type !== '1') {
+        formData.relatedEventId = undefined;
+        formRef.value?.clearValidate('relatedEventId');
+      }
+      if (formData.type !== '2' && formData.type !== '3') {
+        formData.linkUrl = '';
+      }
+      const activeNames: string[] = [];
+      if (formData.type === '1') activeNames.push('relatedEventId');
+      if (formData.type === '2' || formData.type === '3') activeNames.push('linkUrl');
+      // 清除所有联动字段的校验状态
+      formRef.value?.clearValidate(['relatedEventId', 'linkUrl']);
+      // 如果有已填值，重新校验当前字段
+      if (activeNames.length) {
+        setTimeout(() => formRef.value?.validateFields(activeNames).catch(() => {}), 0);
+      }
+    }, [() => formData.type]);

    /** 触发隐藏的文件选择器 */
    const triggerFilePicker = () => {
@@ -235,25 +262,28 @@ export default defineComponent({
        return;
      }

-      // 防御：上传中时禁止提交
      if (formData.imageStatus === 'uploading') {
        message.warning('图片仍在上传中，请稍候');
        return;
      }

-      // 构造提交数据：根据 jumpType 整理 jumpUrl
-      const payload: any = { ...formData };
-      if (payload.jumpType === 'event_detail') {
-        payload.jumpUrl = payload.relatedEventId;
-      } else if (payload.jumpType === 'miniprogram_page') {
-        payload.jumpUrl = payload.pagePath;
-      } else if (payload.jumpType === 'custom_link') {
-        payload.jumpUrl = payload.customUrl;
-      } else {
-        payload.jumpUrl = '';
-      }
-      payload.displayStartTime = payload.displayTimeRange?.[0] || '';
-      payload.displayEndTime = payload.displayTimeRange?.[1] || '';
+      const payload = {
+        img: formData.imageUrl || '',
+        title: formData.title || '',
+        type: formData.type,
+        linkUrl:
+          formData.type === '1'
+            ? formData.relatedEventId || ''
+            : formData.type === '2'
+              ? formData.linkUrl || ''
+              : formData.type === '3'
+                ? formData.linkUrl || ''
+                : '',
+        area: formData.area || formatCascaderArea(areaPath.value),
+        showTimeBegin: formData.displayTimeRange?.[0] || '',
+        showTimeEnd: formData.displayTimeRange?.[1] || '',
+        sort: String(formData.sort ?? 1),
+      };
      props.onSave(payload);
    };

@@ -344,18 +374,18 @@ export default defineComponent({
            {/* ===== 跳转类型 ===== */}
            <Form.Item
              label="跳转类型"
-              name="jumpType"
+              name="type"
              rules={[{ required: true, message: '请选择跳转类型' }]}
            >
              <Select
                options={JUMP_TYPE_OPTIONS as any}
                placeholder="请选择"
-                v-model:value={formData.jumpType}
+                v-model:value={formData.type}
              />
            </Form.Item>

-            {/* ===== 联动字段：根据跳转类型动态展示 ===== */}
-            {formData.jumpType === 'event_detail' && (
+            {/* ===== 联动字段 ===== */}
+            {formData.type === '1' && (
              <Form.Item
                label="关联赛事"
                name="relatedEventId"
@@ -363,45 +393,19 @@ export default defineComponent({
              >
                <Select
                  options={EVENT_OPTIONS as any}
-                  placeholder="不关联"
+                  placeholder="请选择关联赛事"
                  allowClear
                  v-model:value={formData.relatedEventId}
                />
              </Form.Item>
            )}

-            {formData.jumpType === 'miniprogram_page' && (
+            {formData.type === '2' && (
              <Form.Item
-                label="页面路径"
-                name="pagePath"
+                label="跳转地址"
+                name="linkUrl"
                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 开头的链接',
-                  },
+                  { required: true, message: '请输入跳转地址' },
                  { max: URL_MAX, message: `链接最多 ${URL_MAX} 个字符` },
                ]}
              >
@@ -409,25 +413,44 @@ export default defineComponent({
                  placeholder="https://xxx"
                  maxlength={URL_MAX}
                  allowClear
-                  v-model:value={formData.customUrl}
+                  v-model:value={formData.linkUrl}
                />
              </Form.Item>
            )}

-            {formData.jumpType === 'none' && (
-              <div class={styles.tip}>选择"无链接"时，点击 Banner 不会跳转。</div>
+            {formData.type === '3' && (
+              <Form.Item
+                label="小程序路径"
+                name="linkUrl"
+                rules={[
+                  { required: true, message: '请输入小程序页面路径' },
+                  { max: PATH_MAX, message: `路径最多 ${PATH_MAX} 个字符` },
+                ]}
+              >
+                <Input
+                  placeholder="/pages/index/index"
+                  maxlength={PATH_MAX}
+                  allowClear
+                  v-model:value={formData.linkUrl}
+                />
+              </Form.Item>
            )}

            {/* ===== 所属区域 ===== */}
            <Form.Item
              label="所属区域"
-              name="region"
+              name="area"
              rules={[{ required: true, message: '请选择所属区域' }]}
            >
-              <Select
-                options={REGION_OPTIONS as any}
-                placeholder="首页"
-                v-model:value={formData.region}
+              <Cascader
+                v-model:value={areaPath.value}
+                options={cascaderAreaOptions}
+                placeholder="请选择省/市"
+                changeOnSelect={false}
+                allowClear
+                onChange={(val: any) => {
+                  formData.area = formatCascaderArea(val || []);
+                }}
              />
            </Form.Item>

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted } from 'vue';
 import {
  Button,
  Input,
@@ -38,11 +38,11 @@ function renderBodyCell({
  onToggleStatus: (record: any) => void;
  onDelete: (record: any) => void;
 }) {
-  // 图片列：80 * 44
+  // 图片列
  if (column.key === 'image') {
    return (
      <Image
-        src={record.imageUrl}
+        src={record.img}
        width={80}
        height={44}
        style={{ objectFit: 'cover', borderRadius: '4px' }}
@@ -51,7 +51,7 @@ function renderBodyCell({
    );
  }

-  // 标题列：超长截断 + Tooltip
+  // 标题列
  if (column.dataIndex === 'title') {
    const maxLen = 18;
    const raw = text || '';
@@ -65,43 +65,33 @@ function renderBodyCell({
    );
  }

-  // 跳转类型列：StatusTag
-  if (column.dataIndex === 'jumpType') {
+  // 跳转类型列
+  if (column.dataIndex === 'type') {
    return renderJumpType(text);
  }

-  // 关联赛事列：为空显示 "-"
-  if (column.dataIndex === 'relatedEvent') {
+  // 跳转地址列
+  if (column.dataIndex === 'linkUrl') {
    return <span>{text || '-'}</span>;
  }

-  // 所属区域列：省 + 市 拼接
-  if (column.key === 'region') {
-    return (
-      <span>
-        {record.province}
-        {record.city}
-      </span>
-    );
-  }
-
-  // 展示时间列：日期时间段
+  // 展示时间列
  if (column.key === 'displayTime') {
    return (
      <span>
-        {record.displayStartTime} 至 {record.displayEndTime}
+        {record.showTimeBegin} 至 {record.showTimeEnd}
      </span>
    );
  }

-  // 状态列：启用中(绿色) / 已禁用(灰色半透明)
+  // 状态列
  if (column.dataIndex === 'status') {
    return renderStatus(text);
  }

  // 操作列
  if (column.key === 'action') {
-    const isEnabled = record.status === 'enabled';
+    const isEnabled = record.status === '1';
    return (
      <Space>
        <Button type="link" size="small" onClick={() => onEdit(record)}>
@@ -120,9 +110,6 @@ function renderBodyCell({
  return;
 }

-/**
- * Banner 配置
- */
 export default defineComponent({
  name: 'EventBanner',
  setup() {
@@ -150,7 +137,6 @@ export default defineComponent({

    const { containerRef, height } = useContainerSize();

-    /** 删除二次确认 */
    const confirmDelete = (record: any) => {
      Modal.confirm({
        title: '删除确认',
@@ -162,9 +148,8 @@ export default defineComponent({
      });
    };

-    /** 启用/禁用二次确认 */
    const confirmToggleStatus = (record: any) => {
-      const isEnabled = record.status === 'enabled';
+      const isEnabled = record.status === '1';
      const actionText = isEnabled ? '禁用' : '启用';
      Modal.confirm({
        title: `${actionText}确认`,
@@ -175,7 +160,6 @@ export default defineComponent({
      });
    };

-    /** 最终表格列：模型列 + 操作 */
    const tableColumns = [
      ...columns,
      {
@@ -187,16 +171,21 @@ export default defineComponent({
      },
    ];

+    onMounted(() => {
+      handleSearch();
+    });
+
    return () => (
      <div class={pageStyles.containerMain}>
-        {/* ===== 筛选区 ===== */}
        <div class={pageStyles.filter}>
          <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
-            <Form.Item label="标题" name="searchTitle">
+            <Form.Item label="标题" name="title">
              <Input
+                value={filterForm.title}
                placeholder="请输入"
                style={{ width: '200px' }}
                allowClear
+                onUpdate:value={(val: any) => (filterForm.title = val.target?.value ?? val ?? '')}
                onPressEnter={handleSearch}
              />
            </Form.Item>
@@ -223,7 +212,6 @@ export default defineComponent({
          </Form>
        </div>

-        {/* ===== 表格区 ===== */}
        <div class={pageStyles.table}>
          <div ref={containerRef} class={pageStyles.tableBody}>
            <Table
@@ -247,7 +235,6 @@ export default defineComponent({
            </Table>
          </div>

-          {/* 独立分页，右下方 */}
          <div class={pageStyles.pagination}>
            <Pagination
              current={pagination.value.current}
@@ -261,7 +248,6 @@ export default defineComponent({
          </div>
        </div>

-        {/* ===== 新增/编辑弹窗 ===== */}
        {modalVisible.value && (
          <BannerFormModal
            visible={modalVisible.value}
@@ -1,45 +1,51 @@
 import { computed, reactive, toRef, Ref, h } from 'vue';
 import { message } from 'ant-design-vue';
-import dayjs from 'dayjs';
 import { StatusTag, type StatusTagTone } from '@/components';
 import { useState, useDebounce, useThrottleFn } from '@/hooks';
+import {
+  getBannerList,
+  delBanner,
+  saveBanner,
+  updateBanner,
+  toggleBannerActive,
+  type TournamentAdminBannerListVO,
+  type BannerListQueryParams,
+} from '@/api/banner';
+import { getProvinceCityOptions } from '@/utils/areaData';

 // ============================================================
 // 常量
 // ============================================================

-/** Banner 状态选项（筛选） */
+/** Banner 状态选项（value 对应 API status: 不传=全部、0=禁用；1=启用） */
 export const BANNER_STATUS_OPTIONS = [
  { value: '', label: '全部' },
-  { value: 'enabled', label: '启用' },
-  { value: 'disabled', label: '禁用' },
+  { value: '1', label: '启用' },
+  { value: '0', label: '禁用' },
 ] as const;

-/** 跳转类型选项（表单下拉） */
+/** 跳转类型选项（value 对应 API type: 1=赛事详情，2=自定义连接，3=小程序页面） */
 export const JUMP_TYPE_OPTIONS = [
-  { value: 'event_detail', label: '赛事详情页' },
-  { value: 'miniprogram_page', label: '小程序页面' },
-  { value: 'custom_link', label: '自定义链接' },
-  { value: 'none', label: '无链接' },
+  { value: '1', label: '赛事详情页' },
+  { value: '2', label: '自定义链接' },
+  { value: '3', label: '小程序页面' },
 ] as const;

-/** 跳转类型映射（用于表格 StatusTag 渲染） */
+/** 跳转类型映射 */
 const JUMP_TYPE_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
-  event_detail: { label: '赛事详情页', tone: 'primary' },
-  miniprogram_page: { label: '小程序页面', tone: 'cyan' },
-  custom_link: { label: '自定义链接', tone: 'purple' },
-  none: { label: '无链接', tone: 'default' },
+  '1': { label: '赛事详情页', tone: 'primary' },
+  '2': { label: '自定义链接', tone: 'purple' },
+  '3': { label: '小程序页面', tone: 'cyan' },
 };

 /** Banner 状态映射 */
 const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone; dimmed?: boolean }> = {
-  enabled: { label: '启用中', tone: 'success' },
-  disabled: { label: '已禁用', tone: 'default', dimmed: true },
+  '1': { label: '启用中', tone: 'success' },
+  '0': { label: '已禁用', tone: 'default', dimmed: true },
 };

-/** 关联赛事选项（mock） */
+/** 关联赛事选项（mock，TODO: 替换为真实 API） */
 export const EVENT_OPTIONS = [
-  { value: '', label: '不关联' },
  { value: 'EV20260701001', label: '2026全国青少年羽毛球锦标赛暨体育文化交流大会' },
  { value: 'EV20260701002', label: '国际马拉松城市联赛' },
  { value: 'EV20260701003', label: '全民健身运动会' },
@@ -47,131 +53,74 @@ export const EVENT_OPTIONS = [
  { value: 'EV20260701005', label: '北京城市定向越野挑战赛' },
 ];

-/** 所属区域选项（mock） */
-export const REGION_OPTIONS = [
-  { value: 'home', label: '首页' },
-  { value: 'guangdong_shenzhen', label: '广东省深圳市' },
-  { value: 'zhejiang_hangzhou', label: '浙江省杭州市' },
-  { value: 'beijing', label: '北京市' },
-  { value: 'shanghai', label: '上海市' },
-];
-
-// ============================================================
-// 假数据（表格）
-// ============================================================
-
-const MOCK_DATA = Array.from({ length: 12 }, (_, i) => {
-  const jumpType = (['event_detail', 'miniprogram_page', 'custom_link', 'none'] as const)[i % 4];
-  const provinces = ['广东省', '浙江省', '北京市', '上海市'];
-  const cities = ['深圳市', '杭州市', '北京市', '上海市'];
-
-  return {
-    key: `${i + 1}`,
-    id: `BANNER${String(i + 1).padStart(4, '0')}`,
-    sort: i + 1,
-    imageUrl: `https://picsum.photos/seed/banner${i + 1}/80/44`,
-    title:
-      i % 4 === 0
-        ? '2026全国青少年羽毛球锦标赛火热报名中'
-        : i % 4 === 1
-          ? '马拉松城市联赛限时优惠'
-          : i % 4 === 2
-            ? '健身运动会专属福利'
-            : '平台品牌宣传活动',
-    jumpType,
-    jumpUrl:
-      jumpType === 'custom_link'
-        ? 'https://example.com/activity'
-        : jumpType === 'miniprogram_page'
-          ? '/pages/activity/detail'
-          : '',
-    relatedEventId:
-      jumpType === 'event_detail'
-        ? (['EV20260701001', 'EV20260701002', 'EV20260701003'] as const)[i % 3]
-        : '',
-    relatedEvent:
-      jumpType === 'event_detail'
-        ? (() => {
-            const map: Record<string, string> = {
-              EV20260701001: '2026全国青少年羽毛球锦标赛暨体育文化交流大会',
-              EV20260701002: '国际马拉松城市联赛',
-              EV20260701003: '全民健身运动会',
-            };
-            return map[(['EV20260701001', 'EV20260701002', 'EV20260701003'] as const)[i % 3]] || '';
-          })()
-        : '',
-    region: provinces[i % 4],
-    city: cities[i % 4],
-    displayStartTime: '2026-08-01 00:00',
-    displayEndTime: '2026-08-31 23:59',
-    createTime: `2026-07-${String((i % 28) + 1).padStart(2, '0')} ${String((i * 2 + 8) % 24).padStart(2, '0')}:${String((i * 7) % 60).padStart(2, '0')}`,
-    status: (i % 4 === 0 ? 'disabled' : 'enabled') as 'enabled' | 'disabled',
-  };
-});
-
-/**
- * 临时排序：对假数据按创建时间倒序排列。
- * 【注意】实际项目中排序由后端接口负责，对接后端后请删除此函数及相关调用。
- */
-const sortByTimeDesc = (list: any[], field: string) =>
-  [...list].sort((a, b) => dayjs(b[field]).valueOf() - dayjs(a[field]).valueOf());
-
-const SORTED_MOCK_DATA = sortByTimeDesc(MOCK_DATA, 'createTime');
+/** 所属区域选项（动态生成，直辖市仅市名，其他省市） */
+export const REGION_OPTIONS = getProvinceCityOptions();

 // ============================================================
 // Model
 // ============================================================

-/**
- * Banner 配置页数据模型
- */
 export function useBannerModel() {
-  // ===== 筛选条件 =====
+  // ===== 筛选条件（key 名对齐 API 查询参数） =====
  const filterForm = reactive({
-    searchTitle: '',
-    status: '' as '' | 'enabled' | 'disabled',
+    title: '',
+    status: '' as '' | '0' | '1',
  });

-  // 防抖 300ms
  const { debouncedValue: debouncedTitle } = useDebounce(
-    toRef(filterForm, 'searchTitle') as Ref<string>,
+    toRef(filterForm, 'title') as Ref<string>,
    { delay: 300 },
  );

-  // ===== 表格状态 =====
+  // ===== 表格状态（API 返回全量，前端分页） =====
  const [loading, setLoading] = useState<boolean>(false);
-  const [dataSource, setDataSource] = useState<any[]>(SORTED_MOCK_DATA);
+  const [allData, setAllData] = useState<TournamentAdminBannerListVO[]>([]);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
-    total: SORTED_MOCK_DATA.length,
+    total: 0,
+  });
+
+  /** 当前页数据（客户端切片） */
+  const dataSource = computed(() => {
+    const start = (pagination.value.current - 1) * pagination.value.pageSize;
+    return allData.value.slice(start, start + pagination.value.pageSize);
  });

  // ===== 弹窗状态 =====
  const [modalVisible, setModalVisible] = useState<boolean>(false);
  const [editingRecord, setEditingRecord] = useState<any>(null);
-
-  // ===== 提交态（用于表单弹窗的确认按钮 loading）=====
  const [formSubmitting, setFormSubmitting] = useState<boolean>(false);

-  // ===== 表格列配置（纯数据列，复杂渲染在页面 bodyCell 中处理）=====
+  // ===== 表格列配置（dataIndex 对齐 TournamentAdminBannerListVO） =====
  const columns = [
-    { title: '排序', dataIndex: 'sort', key: 'sort', width: 70, align: 'center' as const },
    { title: '图片', key: 'image', width: 100, align: 'center' as const },
    { title: '标题', dataIndex: 'title', key: 'title', width: 220 },
    {
      title: '跳转类型',
-      dataIndex: 'jumpType',
-      key: 'jumpType',
+      dataIndex: 'type',
+      key: 'type',
      width: 120,
    },
-    { title: '关联赛事', dataIndex: 'relatedEvent', key: 'relatedEvent', width: 200 },
-    { title: '所属区域', key: 'region', width: 140 },
+    { title: '跳转地址', dataIndex: 'linkUrl', key: 'linkUrl', width: 200 },
+    { title: '所属区域', dataIndex: 'area', key: 'area', width: 140 },
    { title: '展示时间', key: 'displayTime', width: 260 },
    { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 160 },
    { title: '状态', dataIndex: 'status', key: 'status', width: 100, align: 'center' as const },
  ];

+  // ===== 构建 API 查询参数 =====
+  const buildQueryParams = (): BannerListQueryParams => {
+    const params: BannerListQueryParams = {};
+    if (filterForm.title.trim()) {
+      params.title = filterForm.title.trim();
+    }
+    if (filterForm.status) {
+      params.status = filterForm.status;
+    }
+    return params;
+  };
+
  // ===== 计算属性 =====
  const hasFilter = computed(() => {
    return debouncedTitle.value.trim() !== '' || filterForm.status !== '';
@@ -181,18 +130,20 @@ export function useBannerModel() {

  // ===== 方法 =====

-  /** 查询（节流 500ms） */
+  /** 查询 */
  const handleSearch = useThrottleFn(async () => {
    setLoading(true);
    try {
-      console.log('搜索条件:', {
-        title: debouncedTitle.value,
-        status: filterForm.status,
-      });
-      // TODO: 替换为真实 API 调用
-      setDataSource(SORTED_MOCK_DATA);
-      setPagination({ ...pagination.value, total: SORTED_MOCK_DATA.length });
-      message.success('查询成功');
+      const queryParams = buildQueryParams();
+      console.log('Banner列表查询参数:', queryParams);
+      const res = await getBannerList(queryParams);
+
+      if (res.code === 200) {
+        setAllData(res.data);
+        setPagination({ current: 1, pageSize: 10, total: res.data.length });
+      } else {
+        message.error(res.msg || '查询失败');
+      }
    } catch (error: any) {
      console.error('Banner查询失败:', error);
    } finally {
@@ -200,17 +151,17 @@ export function useBannerModel() {
    }
  }, 500);

-  /** 重置（节流 500ms） */
+  /** 重置 */
  const handleReset = useThrottleFn(() => {
-    filterForm.searchTitle = '';
+    filterForm.title = '';
    filterForm.status = '';
-    setPagination({ current: 1, pageSize: 10, total: SORTED_MOCK_DATA.length });
-    setDataSource(SORTED_MOCK_DATA);
+    setPagination({ current: 1, pageSize: 10, total: 0 });
+    setAllData([]);
+    setTimeout(() => handleSearch(), 350);
  }, 500);

  const handlePageChange = (page: number, pageSize: number) => {
    setPagination({ ...pagination.value, current: page, pageSize });
-    handleSearch();
  };

  /** 打开新增弹窗 */
@@ -218,14 +169,10 @@ export function useBannerModel() {
    setEditingRecord(null);
    setModalVisible(true);
  };
-
-  /** 打开编辑弹窗 */
  const handleEdit = (record: any) => {
    setEditingRecord(record);
    setModalVisible(true);
  };
-
-  /** 关闭弹窗 */
  const handleCloseModal = () => {
    setModalVisible(false);
    setEditingRecord(null);
@@ -236,61 +183,81 @@ export function useBannerModel() {
    if (formSubmitting.value) return;
    setFormSubmitting(true);
    try {
-      const payload = {
-        ...formPayload,
-        displayStartTime: formPayload.displayTimeRange?.[0] || '',
-        displayEndTime: formPayload.displayTimeRange?.[1] || '',
+      const params = {
+        img: formPayload.img || formPayload.imageUrl || '',
+        title: formPayload.title || '',
+        type: String(formPayload.type || formPayload.jumpType || '1'),
+        linkUrl: formPayload.linkUrl || formPayload.jumpUrl || '',
+        area: formPayload.area || formPayload.region || '',
+        showTimeBegin:
+          formPayload.showTimeBegin ||
+          formPayload.displayTimeRange?.[0] ||
+          formPayload.displayStartTime ||
+          '',
+        showTimeEnd:
+          formPayload.showTimeEnd ||
+          formPayload.displayTimeRange?.[1] ||
+          formPayload.displayEndTime ||
+          '',
+        sort: String(formPayload.sort ?? 1),
      };
-      console.log(isEdit.value ? '编辑 Banner' : '新增 Banner', payload);
-      // TODO: 替换为真实 API 调用
-      message.success(isEdit.value ? '编辑成功' : '新增成功');
-      handleCloseModal();
-      handleSearch();
-    } catch (error: any) {
-      console.error('Banner提交失败:', error);
+      const isEdit = editingRecord.value !== null;
+      const res = isEdit
+        ? await updateBanner({ ...params, id: editingRecord.value.id })
+        : await saveBanner(params);
+      if (res.code === 200) {
+        message.success(isEdit ? '编辑成功' : '新增成功');
+        handleCloseModal();
+        handleSearch();
+      } else {
+        message.error(res.msg || '操作失败');
+      }
+    } catch (e: any) {
+      console.error('Banner提交失败:', e);
    } finally {
      setFormSubmitting(false);
    }
  }, 500);

-  /** 删除（节流 500ms） */
+  /** 删除 */
  const handleDelete = useThrottleFn(async (record: any) => {
    setLoading(true);
    try {
-      console.log('删除 Banner:', record.id);
-      // TODO: 替换为真实 API 调用
-      message.success('删除成功');
-      handleSearch();
-    } catch (error: any) {
-      console.error('Banner删除失败:', error);
+      const res = await delBanner(record.id);
+      if (res.code === 200) {
+        message.success('删除成功');
+        handleSearch();
+      } else {
+        message.error(res.msg || '删除失败');
+      }
+    } catch (e: any) {
+      console.error('Banner删除失败:', e);
    } finally {
      setLoading(false);
    }
  }, 500);

-  /** 启用/禁用切换（节流 500ms） */
+  /** 启用/禁用切换 */
  const handleToggleStatus = useThrottleFn(async (record: any) => {
    setLoading(true);
    try {
-      const newStatus = record.status === 'enabled' ? 'disabled' : 'enabled';
-      const actionText = newStatus === 'enabled' ? '启用' : '禁用';
-      console.log(`${actionText} Banner:`, record.id);
-      // TODO: 替换为真实 API 调用
-      // 更新本地数据
-      setDataSource(
-        dataSource.value.map((item: any) =>
-          item.key === record.key ? { ...item, status: newStatus } : item,
-        ),
-      );
-      message.success(`${actionText}成功`);
-    } catch (error: any) {
-      console.error('Banner状态切换失败:', error);
+      const newStatus = record.status === '1' ? '0' : '1';
+      const actionText = newStatus === '1' ? '启用' : '禁用';
+      const res = await toggleBannerActive({ id: record.id, status: newStatus });
+      if (res.code === 200) {
+        message.success(`${actionText}成功`);
+        handleSearch();
+      } else {
+        message.error(res.msg || '操作失败');
+      }
+    } catch (e: any) {
+      console.error('Banner状态切换失败:', e);
    } finally {
      setLoading(false);
    }
  }, 500);

-  // ===== 供页面 bodyCell 使用的渲染工具 =====
+  // ===== 渲染工具 =====
  const renderJumpType = (type: string) => {
    const info = JUMP_TYPE_MAP[type] || { label: type || '-', tone: 'default' as const };
    return h(StatusTag, { label: info.label, tone: info.tone });
@@ -298,11 +265,7 @@ export function useBannerModel() {

  const renderStatus = (status: string) => {
    const info = STATUS_MAP[status] || { label: status || '-', tone: 'default' as const };
-    return h(StatusTag, {
-      label: info.label,
-      tone: info.tone,
-      dimmed: info.dimmed,
-    });
+    return h(StatusTag, { label: info.label, tone: info.tone, dimmed: info.dimmed });
  };

  return {
@@ -6,69 +6,15 @@ import {
  Form,
  Space,
  Select,
-  Image,
  Pagination,
  Modal,
  message,
 } from 'ant-design-vue';
-import { EyeOutlined } from '@ant-design/icons-vue';
-import { useUserModel, USER_STATUS_OPTIONS } from './model/useUserModel';
+import { useUserModel, USER_STATUS_OPTIONS, ROLE_OPTIONS } from './model/useUserModel';
 import { toggleUserActive } from '@/api/users';
 import { useContainerSize } from '@/hooks';
 import pageStyles from '@/assets/styles/pageLayout.module.less';

-/**
- * bodyCell 渲染函数
- */
-function renderBodyCell({
-  column,
-  text,
-  record,
-  onToggleStatus,
-}: {
-  column: any;
-  text: any;
-  record: any;
-  onToggleStatus: (record: any) => void;
-}) {
-  // 证件图片：优先 idCardImgList，回退 idCardImg
-  if (column.dataIndex === 'idCardImg') {
-    const urls = record.idCardImgList?.length
-      ? record.idCardImgList
-      : record.idCardImg
-        ? [record.idCardImg]
-        : [];
-    if (urls.length === 0) return <span>-</span>;
-    return (
-      <Space>
-        {urls.map((src: string) => (
-          <Image
-            key={src}
-            width={48}
-            height={32}
-            src={src}
-            v-slots={{ previewMask: () => <EyeOutlined /> }}
-          />
-        ))}
-      </Space>
-    );
-  }
-
-  if (column.key === 'action') {
-    const isActive = record.status === '1';
-    return (
-      <Button type="link" size="small" onClick={() => onToggleStatus(record)}>
-        {isActive ? '禁用' : '启用'}
-      </Button>
-    );
-  }
-
-  return;
-}
-
-/**
- * 用户列表
- */
 export default defineComponent({
  name: 'EventUsers',
  setup() {
@@ -82,30 +28,23 @@ export default defineComponent({
      handleReset,
      handlePageChange,
    } = useUserModel();
-
    const { containerRef, height } = useContainerSize();

    const handleToggleStatus = (record: any) => {
      const isActive = record.status === '1';
-      const actionText = isActive ? '禁用' : '启用';
-      const targetStatus = isActive ? '0' : '1';
+      const actionText = isActive ? '停用' : '启用';
      Modal.confirm({
        title: `${actionText}确认`,
-        content: `确认${actionText}用户"${record.nickname}"吗？`,
+        content: `确认${actionText}用户"${record.realName}"吗？`,
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
          try {
-            const res = await toggleUserActive({
-              userId: record.id,
-              status: targetStatus,
-            });
+            const res = await toggleUserActive({ userId: record.id, status: isActive ? '0' : '1' });
            if (res.code === 200) {
-              message.success(`${actionText}成功`);
+              message.success(`${actionText}成���`);
              handleSearch();
-            } else {
-              message.error(res.msg || '操作失败');
-            }
+            } else message.error(res.msg || '操作失败');
          } catch (e: any) {
            console.error(`用户${actionText}失败:`, e);
          }
@@ -113,7 +52,6 @@ export default defineComponent({
      });
    };

-    /** 最终表格列：模型列 + 操作 */
    const tableColumns = [
      ...columns,
      {
@@ -131,29 +69,26 @@ export default defineComponent({

    return () => (
      <div class={pageStyles.containerMain}>
-        {/* ===== 筛选区 ===== */}
        <div class={pageStyles.filter}>
          <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
-            <Form.Item label="用户昵称" name="nickname">
+            <Form.Item label="用户姓名/手机号" name="text">
              <Input
-                value={filterForm.nickname}
-                placeholder="请输入用户昵称"
+                value={filterForm.text}
+                placeholder="请输入"
                style={{ width: '200px' }}
                allowClear
-                onUpdate:value={(val: any) =>
-                  (filterForm.nickname = val.target?.value ?? val ?? '')
-                }
+                onUpdate:value={(val: any) => (filterForm.text = val.target?.value ?? val ?? '')}
                onPressEnter={handleSearch}
              />
            </Form.Item>
-            <Form.Item label="手机号" name="phone">
-              <Input
-                value={filterForm.phone}
-                placeholder="请输入手机号"
-                style={{ width: '200px' }}
+            <Form.Item label="角色" name="roleId">
+              <Select
+                value={filterForm.roleId}
+                options={ROLE_OPTIONS as any}
+                style={{ width: '140px' }}
                allowClear
-                onUpdate:value={(val: any) => (filterForm.phone = val.target?.value ?? val ?? '')}
-                onPressEnter={handleSearch}
+                placeholder="全部"
+                onUpdate:value={(val: any) => (filterForm.roleId = val || '')}
              />
            </Form.Item>
            <Form.Item label="状态" name="status">
@@ -175,8 +110,6 @@ export default defineComponent({
            </Form.Item>
          </Form>
        </div>
-
-        {/* ===== 表格区 ===== */}
        <div class={pageStyles.table}>
          <div ref={containerRef} class={pageStyles.tableBody}>
            <Table
@@ -187,16 +120,23 @@ export default defineComponent({
              pagination={false}
            >
              {{
-                bodyCell: (args: any) =>
-                  renderBodyCell({
-                    ...args,
-                    onToggleStatus: handleToggleStatus,
-                  }),
+                bodyCell: (args: any) => {
+                  if (args.column.key === 'action') {
+                    const isActive = args.record.status === '1';
+                    return (
+                      <Button
+                        type="link"
+                        size="small"
+                        onClick={() => handleToggleStatus(args.record)}
+                      >
+                        {isActive ? '停用' : '启用'}
+                      </Button>
+                    );
+                  }
+                },
              }}
            </Table>
          </div>
-
-          {/* 独立分页，右下方 */}
          <div class={pageStyles.pagination}>
            <Pagination
              current={pagination.value.current}
@@ -2,71 +2,56 @@ import { computed, reactive, toRef, Ref, h } from 'vue';
 import { message } from 'ant-design-vue';
 import { StatusTag, type StatusTagTone } from '@/components';
 import { useState, useDebounce, useThrottleFn } from '@/hooks';
-import { getUserList, type TournamentAdminUserPageVO, type UserListQueryParams } from '@/api/users';
+import { getUserList, type TournamentAdminUserVO, type UserListQueryParams } from '@/api/users';

 // ============================================================
 // 常量
 // ============================================================

-/** 用户状态选项（value 对应 API status: 不传=全部、0=禁用、1=正常） */
 export const USER_STATUS_OPTIONS = [
  { value: '', label: '全部' },
+  { value: '0', label: '停用' },
  { value: '1', label: '正常' },
-  { value: '0', label: '禁用' },
 ] as const;

-/** 用户状态 StatusTag 映射 */
-const USER_STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
+/** 角色选项（TODO: 对接角色 API） */
+export const ROLE_OPTIONS = [
+  { value: '', label: '全部' },
+  { value: '1', label: '超级管理员' },
+  { value: '2', label: '赛事管理员' },
+  { value: '3', label: '裁判' },
+  { value: '4', label: '财务' },
+] as const;
+
+const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
  '1': { label: '正常', tone: 'success' },
-  '0': { label: '禁用', tone: 'danger' },
+  '0': { label: '停用', tone: 'danger' },
 };

 // ============================================================
 // Model
 // ============================================================

-/**
- * 用户列表页数据模型
- */
 export function useUserModel() {
-  // ===== 筛选条件（key 名对齐 API 查询参数） =====
  const filterForm = reactive({
-    nickname: '',
-    phone: '',
+    text: '',
+    roleId: '',
    status: '',
  });

-  // 可搜索字段防抖
-  const { debouncedValue: debouncedNickname } = useDebounce(
-    toRef(filterForm, 'nickname') as Ref<string>,
-    { delay: 300 },
-  );
-  const { debouncedValue: debouncedPhone } = useDebounce(
-    toRef(filterForm, 'phone') as Ref<string>,
-    { delay: 300 },
-  );
-
-  // ===== 表格状态 =====
-  const [loading, setLoading] = useState<boolean>(false);
-  const [dataSource, setDataSource] = useState<TournamentAdminUserPageVO[]>([]);
-  const [pagination, setPagination] = useState({
-    current: 1,
-    pageSize: 10,
-    total: 0,
+  const { debouncedValue: debouncedText } = useDebounce(toRef(filterForm, 'text') as Ref<string>, {
+    delay: 300,
  });

-  // ===== 表格列配置（dataIndex 对齐 TournamentAdminUserPageVO） =====
+  const [loading, setLoading] = useState<boolean>(false);
+  const [dataSource, setDataSource] = useState<TournamentAdminUserVO[]>([]);
+  const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
+
  const columns = [
-    { title: '昵称', dataIndex: 'nickname', key: 'nickname', width: 120 },
+    { title: '用户姓名', dataIndex: 'realName', key: 'realName', width: 120 },
    { title: '手机号', dataIndex: 'phone', key: 'phone', width: 140 },
-    { title: '真实姓名', dataIndex: 'realName', key: 'realName', width: 100 },
-    { title: '证件号', dataIndex: 'idCard', key: 'idCard', width: 180 },
-    {
-      title: '证件图片',
-      dataIndex: 'idCardImg',
-      key: 'idCardImg',
-      width: 140,
-    },
+    { title: '角色', dataIndex: 'roleName', key: 'roleName', width: 120 },
+    { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 170 },
    {
      title: '状态',
      dataIndex: 'status',
@@ -74,69 +59,47 @@ export function useUserModel() {
      width: 90,
      align: 'center' as const,
      customRender: ({ text }: { text: string }) => {
-        const info = USER_STATUS_MAP[text] || { label: text, tone: 'default' as const };
+        const info = STATUS_MAP[text] || { label: text, tone: 'default' as const };
        return h(StatusTag, { label: info.label, tone: info.tone });
      },
    },
-    { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 170 },
  ];

-  // ===== 构建 API 查询参数 =====
  const buildQueryParams = (): UserListQueryParams => {
    const params: UserListQueryParams = {
      page: String(pagination.value.current),
      limit: String(pagination.value.pageSize),
    };
-
-    if (filterForm.nickname.trim()) {
-      params.nickname = filterForm.nickname.trim();
-    }
-    if (filterForm.phone.trim()) {
-      params.phone = filterForm.phone.trim();
-    }
-    if (filterForm.status) {
-      params.status = filterForm.status;
-    }
-
+    if (filterForm.text.trim()) params.text = filterForm.text.trim();
+    if (filterForm.roleId) params.roleId = filterForm.roleId;
+    if (filterForm.status) params.status = filterForm.status;
    return params;
  };

-  // ===== 计算属性 =====
-  const hasFilter = computed(() => {
-    return (
-      debouncedNickname.value.trim() !== '' ||
-      debouncedPhone.value.trim() !== '' ||
-      filterForm.status !== ''
-    );
-  });
+  const hasFilter = computed(
+    () => debouncedText.value.trim() !== '' || filterForm.roleId !== '' || filterForm.status !== '',
+  );

-  // ===== 方法 =====
-
-  /** 查询 */
  const handleSearch = useThrottleFn(async () => {
    setLoading(true);
    try {
-      const queryParams = buildQueryParams();
-      console.log('用户列表查询参数:', queryParams);
-      const res = await getUserList(queryParams);
-
+      const params = buildQueryParams();
+      console.log('用户列表查询参数:', params);
+      const res = await getUserList(params);
      if (res.code === 200) {
        setDataSource(res.data.list);
        setPagination({ ...pagination.value, total: res.data.total });
-      } else {
-        message.error(res.msg || '查询失败');
-      }
-    } catch (error: any) {
-      console.error('用户列表查询失败:', error);
+      } else message.error(res.msg || '查询失败');
+    } catch (e: any) {
+      console.error('用户列表查询失败:', e);
    } finally {
      setLoading(false);
    }
  }, 500);

-  /** 重置 */
  const handleReset = useThrottleFn(() => {
-    filterForm.nickname = '';
-    filterForm.phone = '';
+    filterForm.text = '';
+    filterForm.roleId = '';
    filterForm.status = '';
    setPagination({ current: 1, pageSize: 10, total: 0 });
    setDataSource([]);
@@ -26,7 +26,17 @@ const getDefaultForm = () => ({
  phone: '',
  password: '',
  confirmPassword: '',
-  role: '',
+  roleId: undefined,
+});
+
+/** 新增用户默认密码 */
+const DEFAULT_USER_PASSWORD = 'A8888888';
+
+/** 获取新增时的表单初始值（预填默认密码） */
+const getAddForm = () => ({
+  ...getDefaultForm(),
+  password: DEFAULT_USER_PASSWORD,
+  confirmPassword: DEFAULT_USER_PASSWORD,
 });

 export default defineComponent({
@@ -47,17 +57,18 @@ export default defineComponent({

    /** 根据 record 初始化表单 */
    const initFormFromRecord = (record: any) => {
-      const fresh = getDefaultForm();
      if (!record) {
-        Object.assign(formData, fresh);
+        // 新增：预填默认密码 + 确认密码
+        Object.assign(formData, getAddForm());
        setIsResetting(false);
        return;
      }
+      const fresh = getDefaultForm();
      Object.assign(formData, {
        ...fresh,
        realName: record.realName || '',
        phone: record.phone || '',
-        role: record.role || '',
+        roleId: record.roleId || undefined,
      });
      setIsResetting(false);
    };
@@ -90,7 +101,7 @@ export default defineComponent({
      const payload: any = {
        realName: formData.realName,
        phone: formData.phone,
-        role: formData.role,
+        roleId: formData.roleId,
      };
      if (props.record) {
        if (isResetting.value) {
@@ -159,11 +170,11 @@ export default defineComponent({
                    }
                  />
                </Form.Item>
-                <Form.Item label="角色" name="role" rules={roleRules} class={styles.col}>
+                <Form.Item label="角色" name="roleId" rules={roleRules} class={styles.col}>
                  <Select
                    options={ROLE_FORM_OPTIONS as any}
                    placeholder="请选择角色"
-                    v-model:value={formData.role}
+                    v-model:value={formData.roleId}
                  />
                </Form.Item>
              </div>
@@ -197,11 +208,11 @@ export default defineComponent({
                  </Form.Item>
                </div>
                {/* 角色：单独一行 */}
-                <Form.Item label="角色" name="role" rules={roleRules}>
+                <Form.Item label="角色" name="roleId" rules={roleRules}>
                  <Select
                    options={ROLE_FORM_OPTIONS as any}
                    placeholder="请选择角色"
-                    v-model:value={formData.role}
+                    v-model:value={formData.roleId}
                    style={{ width: '200px' }}
                  />
                </Form.Item>
@@ -14,11 +14,12 @@ import { isChinaPhone, isValidPassword, isValidRealName } from '@/utils/form';
 /** 密码占位符（写死长度，避免暴露真实密码长度） */
 export const PASSWORD_PLACEHOLDER = '********';

-/** 角色下拉选项（表单使用） */
+/** 角色下拉选项（表单使用，value 对应 API roleId） */
 export const ROLE_FORM_OPTIONS = [
-  { value: 'admin', label: '超级管理员' },
-  { value: 'operator', label: '运营人员' },
-  { value: 'auditor', label: '审核人员' },
+  { value: '1', label: '超级管理员' },
+  { value: '2', label: '赛事管理员' },
+  { value: '3', label: '裁判' },
+  { value: '4', label: '财务' },
 ] as const;

 // ============================================================
@@ -1,7 +1,18 @@
-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 { defineComponent, onMounted } from 'vue';
+import {
+  Button,
+  Input,
+  Table,
+  Form,
+  Space,
+  Select,
+  Modal,
+  Pagination,
+  message,
+} from 'ant-design-vue';
+import { useUserModel, ROLE_OPTIONS, USER_STATUS_OPTIONS } from './model/useUserModel';
+import { toggleUserActive, saveUser, updateUser } from '@/api/users';
+import { useState, useThrottleFn, useContainerSize } from '@/hooks';
 import UserFormModal from './components/UserFormModal';
 import pageStyles from '@/assets/styles/pageLayout.module.less';

@@ -22,14 +33,14 @@ function renderBodyCell({
 }) {
  // 操作列
  if (column.key === 'action') {
-    const isActive = record.status === 'active';
+    const isActive = record.status === '1';
    return (
      <Space>
        <Button type="link" size="small" onClick={() => onEdit(record)}>
          编辑
        </Button>
        <Button type="link" size="small" onClick={() => onToggleStatus(record)}>
-          {isActive ? '禁用' : '启用'}
+          {isActive ? '停用' : '启用'}
        </Button>
      </Space>
    );
@@ -37,29 +48,6 @@ function renderBodyCell({
  return;
 }

-/**
- * 禁用/启用 二次确认弹窗
- */
-function confirmToggleStatus({ record, onOk }: { record: any; onOk: (record: any) => void }) {
-  const isActive = record.status === 'active';
-  const actionText = isActive ? '禁用' : '启用';
-  Modal.confirm({
-    title: `确认${actionText}`,
-    class: 'toggleConfirmModal',
-    content: (
-      <div class={pageStyles.confirmContent}>
-        <span>确定要{actionText}用户</span>
-        <strong>{record.realName}</strong>
-        <span>吗？</span>
-      </div>
-    ),
-    okText: '确认',
-    cancelText: '取消',
-    okButtonProps: { danger: isActive },
-    onOk: () => onOk(record),
-  });
-}
-
 /**
 * 系统管理 - 用户管理
 */
@@ -72,33 +60,110 @@ export default defineComponent({
      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 [modalVisible, setModalVisible] = useState<boolean>(false);
+    const [editingRecord, setEditingRecord] = useState<any>(null);
+    const [formSubmitting, setFormSubmitting] = useState<boolean>(false);
+
+    // ===== 启用/禁用（使用真实 API） =====
+    const handleToggleStatus = useThrottleFn(async (record: any) => {
+      const isActive = record.status === '1';
+      const actionText = isActive ? '停用' : '启用';
+      Modal.confirm({
+        title: `${actionText}确认`,
+        content: (
+          <div class={pageStyles.confirmContent}>
+            <span>确定要{actionText}用户</span>
+            <strong>{record.realName}</strong>
+            <span>吗？</span>
+          </div>
+        ),
+        okText: '确认',
+        cancelText: '取消',
+        okButtonProps: { danger: isActive },
+        onOk: async () => {
+          try {
+            const res = await toggleUserActive({
+              userId: record.id,
+              status: isActive ? '0' : '1',
+            });
+            if (res.code === 200) {
+              message.success(`${actionText}成功`);
+              handleSearch();
+            } else {
+              message.error(res.msg || '操作失败');
+            }
+          } catch (e: any) {
+            console.error(`用户${actionText}失败:`, e);
+          }
+        },
+      });
+    }, 500);
+
+    // ===== 新增/编辑（组件级） =====
+    const handleAdd = () => {
+      setEditingRecord(null);
+      setModalVisible(true);
    };

-    /** 触发编辑 */
-    const triggerEdit = (record: any) => {
-      handleEdit(record);
+    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 {
+        let res: any;
+        if (editingRecord.value) {
+          // 编辑：调用更新接口
+          res = await updateUser({
+            id: editingRecord.value.id,
+            realName: formPayload.realName,
+            phone: formPayload.phone,
+            roleId: formPayload.roleId,
+            ...(formPayload.password
+              ? { password: formPayload.password, confirmPassword: formPayload.password }
+              : {}),
+          });
+        } else {
+          // 新增：调用保存接口
+          res = await saveUser({
+            realName: formPayload.realName,
+            phone: formPayload.phone,
+            roleId: formPayload.roleId,
+            password: formPayload.password,
+            confirmPassword: formPayload.password,
+          });
+        }
+        if (res.code === 200) {
+          message.success(editingRecord.value ? '编辑成功' : '新增成功');
+          handleCloseModal();
+          handleSearch();
+        } else {
+          message.error(res.msg || '操作失败');
+        }
+      } catch (error: any) {
+        console.error('保存用户失败:', error);
+      } finally {
+        setFormSubmitting(false);
+      }
+    }, 500);
+
+    // ===== 表格最终列 =====
    const tableColumns = [
      ...columns,
      {
@@ -110,26 +175,34 @@ export default defineComponent({
      },
    ];

+    // ===== 初始化 =====
+    onMounted(() => {
+      handleSearch();
+    });
+
    return () => (
      <div class={pageStyles.containerMain}>
        {/* ===== 筛选区 ===== */}
        <div class={pageStyles.filter}>
          <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
-            <Form.Item label="用户" name="searchKeyword">
+            <Form.Item label="用户姓名/手机号" name="text">
              <Input
-                placeholder="请输入姓名/手机号"
+                value={filterForm.text}
+                placeholder="请输入"
                style={{ width: '200px' }}
                allowClear
+                onUpdate:value={(val: any) => (filterForm.text = val?.target?.value ?? val ?? '')}
                onPressEnter={handleSearch}
              />
            </Form.Item>
-            <Form.Item label="角色" name="role">
+            <Form.Item label="角色" name="roleId">
              <Select
-                value={filterForm.role}
-                options={USER_ROLE_OPTIONS as any}
+                value={filterForm.roleId}
+                options={ROLE_OPTIONS as any}
                style={{ width: '140px' }}
                allowClear
-                onUpdate:value={(val: any) => (filterForm.role = val || '')}
+                placeholder="全部"
+                onUpdate:value={(val: any) => (filterForm.roleId = val || '')}
              />
            </Form.Item>
            <Form.Item label="状态" name="status">
@@ -169,8 +242,8 @@ export default defineComponent({
                bodyCell: (args: any) =>
                  renderBodyCell({
                    ...args,
-                    onEdit: triggerEdit,
-                    onToggleStatus: triggerToggle,
+                    onEdit: handleEdit,
+                    onToggleStatus: handleToggleStatus,
                  }),
              }}
            </Table>
@@ -1,73 +1,35 @@
 import { computed, reactive, toRef, Ref, h } from 'vue';
 import { message } from 'ant-design-vue';
-import dayjs from 'dayjs';
 import { StatusTag, type StatusTagTone } from '@/components';
 import { useState, useDebounce, useThrottleFn } from '@/hooks';
+import { getUserList, type TournamentAdminUserVO, type UserListQueryParams } from '@/api/users';

 // ============================================================
 // 常量
 // ============================================================

 /** 角色选项（筛选） */
-export const USER_ROLE_OPTIONS = [
+export const ROLE_OPTIONS = [
  { value: '', label: '全部' },
-  { value: 'admin', label: '管理员' },
+  { value: '1', label: '超级管理员' },
+  { value: '2', label: '赛事管理员' },
+  { value: '3', label: '裁判' },
+  { value: '4', label: '财务' },
 ] as const;

 /** 状态选项（筛选） */
 export const USER_STATUS_OPTIONS = [
  { value: '', label: '全部' },
-  { value: 'active', label: '正常' },
-  { value: 'disabled', label: '禁用' },
+  { value: '0', label: '停用' },
+  { value: '1', label: '正常' },
 ] as const;

-/** 角色文本/色调映射（表格渲染） */
-const ROLE_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
-  admin: { label: '管理员', tone: 'primary' },
-  operator: { label: '运营人员', tone: 'cyan' },
-  auditor: { label: '审核人员', tone: 'purple' },
-};
-
-/** 状态文本/色调映射 */
+/** 状态文本/色调映射（表格渲染），对应 API status 字段：0=停用、1=正常 */
 const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
-  active: { label: '正常', tone: 'success' },
-  disabled: { label: '禁用', tone: 'danger' },
+  '1': { label: '正常', tone: 'success' },
+  '0': { label: '停用', tone: 'danger' },
 };

-// ============================================================
-// 假数据
-// ============================================================
-
-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',
-  },
-];
-
-/**
- * 临时排序：对假数据按创建时间倒序排列。
- * 【注意】实际项目中排序由后端接口负责，对接后端后请删除此函数及相关调用。
- */
-const sortByTimeDesc = (list: any[], field: string) =>
-  [...list].sort((a, b) => dayjs(b[field]).valueOf() - dayjs(a[field]).valueOf());
-
-const SORTED_MOCK_DATA = sortByTimeDesc(MOCK_DATA, 'createTime');
-
 // ============================================================
 // Model
 // ============================================================
@@ -78,47 +40,30 @@ const SORTED_MOCK_DATA = sortByTimeDesc(MOCK_DATA, 'createTime');
 export function useUserModel() {
  // ===== 筛选条件 =====
  const filterForm = reactive({
-    searchKeyword: '', // 用户名/手机号
-    role: '' as '' | 'admin',
-    status: '' as '' | 'active' | 'disabled',
+    text: '', // 用户姓名/手机号
+    roleId: '', // 角色ID
+    status: '' as '' | '0' | '1',
  });

-  // 防抖 300ms
-  const { debouncedValue: debouncedKeyword } = useDebounce(
-    toRef(filterForm, 'searchKeyword') as Ref<string>,
-    { delay: 300 },
-  );
+  // 文本筛选防抖 300ms
+  const { debouncedValue: debouncedText } = useDebounce(toRef(filterForm, 'text') as Ref<string>, {
+    delay: 300,
+  });

  // ===== 表格状态 =====
  const [loading, setLoading] = useState<boolean>(false);
-  const [dataSource, setDataSource] = useState<any[]>(SORTED_MOCK_DATA);
+  const [dataSource, setDataSource] = useState<TournamentAdminUserVO[]>([]);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
-    total: SORTED_MOCK_DATA.length,
+    total: 0,
  });

-  // ===== 弹窗状态 =====
-  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,
-      customRender: ({ text }: { text: string }) => {
-        const info = ROLE_MAP[text] || { label: text || '-', tone: 'default' as const };
-        return h(StatusTag, { label: info.label, tone: info.tone });
-      },
-    },
+    { title: '角色', dataIndex: 'roleName', key: 'roleName', width: 120 },
    {
      title: '状态',
      dataIndex: 'status',
@@ -133,107 +78,64 @@ export function useUserModel() {
    { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 180 },
  ];

+  // ===== 构建 API 查询参数 =====
+  const buildQueryParams = (): UserListQueryParams => {
+    const params: UserListQueryParams = {
+      page: String(pagination.value.current),
+      limit: String(pagination.value.pageSize),
+    };
+    if (filterForm.text.trim()) params.text = filterForm.text.trim();
+    if (filterForm.roleId) params.roleId = filterForm.roleId;
+    if (filterForm.status) params.status = filterForm.status;
+    return params;
+  };
+
  // ===== 计算属性 =====
  const hasFilter = computed(() => {
    return (
-      debouncedKeyword.value.trim() !== '' || filterForm.role !== '' || filterForm.status !== ''
+      debouncedText.value.trim() !== '' || filterForm.roleId !== '' || 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(SORTED_MOCK_DATA);
-      setPagination({ ...pagination.value, total: SORTED_MOCK_DATA.length });
-      message.success('查询成功');
+      const queryParams = buildQueryParams();
+      console.log('用户列表查询参数:', queryParams);
+      const res = await getUserList(queryParams);
+      if (res.code === 200) {
+        setDataSource(res.data.list);
+        setPagination({ ...pagination.value, total: res.data.total });
+      } else {
+        message.error(res.msg || '查询失败');
+      }
    } catch (error: any) {
-      message.error(error.msg || '查询失败');
+      console.error('用户列表查询失败:', error);
    } finally {
      setLoading(false);
    }
  }, 500);

-  /** 重置（节流 500ms） */
+  /** 重置（节流 500ms，重置后自动查询） */
  const handleReset = useThrottleFn(() => {
-    filterForm.searchKeyword = '';
-    filterForm.role = '';
+    filterForm.text = '';
+    filterForm.roleId = '';
    filterForm.status = '';
-    setPagination({ current: 1, pageSize: 10, total: SORTED_MOCK_DATA.length });
-    setDataSource(SORTED_MOCK_DATA);
+    setPagination({ current: 1, pageSize: 10, total: 0 });
+    setDataSource([]);
+    // 等待 debounce(300ms) 生效后自动查询
+    setTimeout(() => handleSearch(), 350);
  }, 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,
@@ -241,18 +143,8 @@ export function useUserModel() {
    columns,
    pagination,
    hasFilter,
-    modalVisible,
-    setModalVisible,
-    editingRecord,
-    isEdit,
-    formSubmitting,
    handleSearch,
    handleReset,
    handlePageChange,
-    handleAdd,
-    handleEdit,
-    handleCloseModal,
-    handleSave,
-    handleToggleStatus,
  };
 }