feat: 优化路由搭建赛事管理页面基础处理部分样式问题完成赛事列表页面搭建

2026-07-24 15:57:20 +08:00
parent 5523695518
commit 03f1b6c220
35 changed files with 6599 additions and 117 deletions
@@ -0,0 +1,10 @@
+.container {
+  // 容器
+}
+
+.title {
+  margin-top: 0;
+  margin-bottom: 24px;
+  font-size: 20px;
+  font-weight: 600;
+}
@@ -0,0 +1,105 @@
+import { defineComponent } from 'vue';
+import { Button, Input, Table, Modal, Space, Popconfirm, Form } from 'ant-design-vue';
+import { useBannerModel } from './model/useBannerModel';
+
+/**
+ * Banner 配置
+ */
+export default defineComponent({
+  name: 'EventBanner',
+  setup() {
+    const {
+      filterForm,
+      loading,
+      dataSource,
+      columns,
+      pagination,
+      modalVisible,
+      editingRecord,
+      handleSearch,
+      handleReset,
+      handlePageChange,
+      handleAdd,
+      handleEdit,
+      handleCloseModal,
+      handleDelete,
+    } = useBannerModel();
+
+    return () => (
+      <div class="page-container">
+        <div class="page-filter">
+          <Form layout="inline" model={filterForm}>
+            <Form.Item label="Banner 标题" name="searchTitle">
+              <Input
+                placeholder="请输入 Banner 标题"
+                style={{ width: '200px' }}
+                allowClear
+                onPressEnter={handleSearch}
+              />
+            </Form.Item>
+            <Form.Item>
+              <Space>
+                <Button type="primary" onClick={handleSearch} loading={loading.value}>
+                  查询
+                </Button>
+                <Button onClick={handleReset}>重置</Button>
+              </Space>
+            </Form.Item>
+          </Form>
+        </div>
+
+        <div class="page-table">
+          <div style={{ marginBottom: '16px' }}>
+            <Button type="primary" onClick={handleAdd}>
+              新增 Banner
+            </Button>
+          </div>
+          <Table
+            columns={[
+              ...columns,
+              {
+                title: '操作',
+                key: 'action',
+                customRender: ({ record }: { record: any }) => (
+                  <Space>
+                    <Button type="link" size="small" onClick={() => handleEdit(record)}>
+                      编辑
+                    </Button>
+                    <Popconfirm title="确定删除该 Banner？" onConfirm={() => handleDelete(record)}>
+                      <Button type="link" size="small" danger>
+                        删除
+                      </Button>
+                    </Popconfirm>
+                  </Space>
+                ),
+              },
+            ]}
+            dataSource={dataSource.value}
+            loading={loading.value}
+            pagination={{
+              current: pagination.value.current,
+              pageSize: pagination.value.pageSize,
+              total: pagination.value.total,
+              showSizeChanger: true,
+              showTotal: (total: number) => `共 ${total} 条`,
+              onChange: handlePageChange,
+            }}
+          />
+        </div>
+
+        <Modal
+          title={editingRecord.value ? '编辑 Banner' : '新增 Banner'}
+          visible={modalVisible.value}
+          onCancel={handleCloseModal}
+          footer={null}
+        >
+          <p>
+            {editingRecord.value
+              ? `正在编辑: ${editingRecord.value.title}`
+              : '在此新增 Banner 配置'}
+          </p>
+        </Modal>
+      </div>
+    );
+  },
+});
@@ -0,0 +1,125 @@
+import { computed, reactive, toRef, Ref } from 'vue';
+import { message } from 'ant-design-vue';
+import { useState, useDebounce, useThrottleFn } from '@/hooks';
+
+/**
+ * Banner 配置页数据模型
+ */
+export function useBannerModel() {
+  // ===== 筛选条件（合并在一个 reactive 对象中）=====
+  const filterForm = reactive({
+    searchTitle: '',
+  });
+
+  // 防抖 300ms
+  const { debouncedValue: debouncedTitle } = useDebounce(
+    toRef(filterForm, 'searchTitle') as Ref<string>,
+    { delay: 300 },
+  );
+
+  // ===== 表格状态 =====
+  const [loading, setLoading] = useState<boolean>(false);
+  const [dataSource, setDataSource] = useState<any[]>([]);
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  });
+
+  // ===== 弹窗状态 =====
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+  const [editingRecord, setEditingRecord] = useState<any>(null);
+
+  // ===== 表格列配置 =====
+  const columns = [
+    { title: 'Banner 标题', dataIndex: 'title', key: 'title' },
+    { title: '排序值', dataIndex: 'sort', key: 'sort' },
+    { title: '状态', dataIndex: 'status', key: 'status' },
+    { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
+    { title: '更新时间', dataIndex: 'updateTime', key: 'updateTime' },
+  ];
+
+  // ===== 计算属性 =====
+  const hasFilter = computed(() => {
+    return debouncedTitle.value.trim() !== '';
+  });
+
+  // ===== 方法 =====
+
+  /** 查询（节流 500ms） */
+  const handleSearch = useThrottleFn(async () => {
+    setLoading(true);
+    try {
+      // TODO: 替换为真实 API 调用
+      console.log('搜索条件:', { title: debouncedTitle.value });
+      message.success('查询成功');
+    } catch (error: any) {
+      message.error(error.msg || '查询失败');
+    } finally {
+      setLoading(false);
+    }
+  }, 500);
+
+  /** 重置（节流 500ms） */
+  const handleReset = useThrottleFn(() => {
+    filterForm.searchTitle = '';
+    setPagination({ current: 1, pageSize: 10, total: 0 });
+    setDataSource([]);
+  }, 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);
+  };
+
+  /** 删除（节流 500ms） */
+  const handleDelete = useThrottleFn(async (record: any) => {
+    setLoading(true);
+    try {
+      // TODO: 替换为真实 API 调用
+      message.success('删除成功');
+      handleSearch();
+    } catch (error: any) {
+      message.error(error.msg || '删除失败');
+    } finally {
+      setLoading(false);
+    }
+  }, 500);
+
+  return {
+    filterForm,
+    loading,
+    dataSource,
+    columns,
+    pagination,
+    hasFilter,
+    modalVisible,
+    setModalVisible,
+    editingRecord,
+    handleSearch,
+    handleReset,
+    handlePageChange,
+    handleAdd,
+    handleEdit,
+    handleCloseModal,
+    handleDelete,
+  };
+}
@@ -0,0 +1,67 @@
+.section {
+  margin-bottom: 24px;
+}
+
+.section:last-child {
+  margin-bottom: 0;
+}
+
+.sectionTitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.85);
+  margin-bottom: 12px;
+  padding-left: 8px;
+  border-left: 3px solid #1677ff;
+}
+
+.textBlock {
+  font-size: 13px;
+  line-height: 1.8;
+  color: rgba(0, 0, 0, 0.65);
+  white-space: pre-wrap;
+  background: #fafafa;
+  padding: 12px 16px;
+  border-radius: 4px;
+  border: 1px solid #f0f0f0;
+}
+
+// Descriptions 列宽稍微压缩一些，避免单标签被挤
+.desc :global(.ant-descriptions-item-label) {
+  width: 110px;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+// 组别信息下的子表格
+.group {
+  margin-bottom: 16px;
+}
+
+.group:last-child {
+  margin-bottom: 0;
+}
+
+.groupTitle {
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.85);
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.paginationRow {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+// 分组信息列表
+.divisionList {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.divisionItem {
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.65);
+}
@@ -0,0 +1,208 @@
+import { defineComponent } from 'vue';
+import { Modal, Descriptions, Image, Table, Pagination, Space } from 'ant-design-vue';
+import styles from './EventDetailModal.module.less';
+
+interface EventDetailModalProps {
+  visible: boolean;
+  record: any;
+  onClose: () => void;
+}
+
+// ===== Mock 数据 =====
+const MOCK_DETAIL = {
+  name: '第二届全国地学羽毛球邀请赛',
+  eventTime: '2026.05.26 08:00 ~ 2026.05.31 22:00',
+  descr:
+    '赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍。',
+  registerTime: '2026.05.24 08:00 ~ 2026.05.26 22:00',
+  cancelDeadline: '2026.05.25 22:00',
+  region: '北京市 北京市 东城区',
+  address: '李宁体育馆',
+  venueNo: '李宁体育馆',
+  publicEvent: '在首页展示赛事',
+  needIdCard: '无需提供',
+  needIdCardImage: '无需提供',
+  createTime: '2026.05.26 08:00',
+  creator: '张三',
+  status: '报名中',
+  enrolledCount: 100,
+  cancelledCount: 1,
+  maxCount: 1000,
+  crossedCount: 50,
+  completedCount: 50,
+  cover: 'https://picsum.photos/seed/eventcover/600/300',
+  announcement:
+    '赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告。',
+};
+
+// 假组别数据
+const MOCK_GROUPS = [
+  {
+    key: 'group1',
+    title: '组别1:男子单打（单打）',
+    players: [
+      {
+        key: '1',
+        name: '张三',
+        gender: '男',
+        phone: '12345678995',
+        idNo: 'xxxxxxxxxxxxxxxx',
+        idImg: '',
+      },
+      { key: '2', name: '李四', gender: '男', phone: '', idNo: '', idImg: '' },
+    ],
+  },
+  {
+    key: 'group2',
+    title: '组别2:女子双打（双打）',
+    players: [
+      {
+        key: '1',
+        name: '张三',
+        gender: '女',
+        phone: '12345678995',
+        idNo: 'xxxxxxxxxxxxxxxx',
+        idImg: '',
+      },
+      { key: '2', name: '李四', gender: '女', phone: '', idNo: '', idImg: '' },
+    ],
+  },
+];
+
+// 假分组数据
+const MOCK_DIVISIONS = ['分组1:男子小组1（循环赛）', '分组2:女子小组1（淘汰赛）'];
+
+const PLAYER_COLUMNS = [
+  { title: '选手', dataIndex: 'name', key: 'name', width: 100 },
+  { title: '性别', dataIndex: 'gender', key: 'gender', width: 80 },
+  { title: '手机号', dataIndex: 'phone', key: 'phone', width: 150 },
+  { title: '证件号', dataIndex: 'idNo', key: 'idNo', width: 180 },
+  {
+    title: '证件图片',
+    dataIndex: 'idImg',
+    key: 'idImg',
+    width: 180,
+    customRender: () => (
+      <Space>
+        <Image width={48} height={32} src="https://picsum.photos/seed/idimg1/96/64" />
+        <Image width={48} height={32} src="https://picsum.photos/seed/idimg2/96/64" />
+      </Space>
+    ),
+  },
+];
+
+export default defineComponent({
+  name: 'EventDetailModal',
+  props: {
+    visible: { type: Boolean, default: false },
+    record: { type: Object, default: () => ({}) },
+    onClose: { type: Function, required: true },
+  },
+  setup(props: EventDetailModalProps) {
+    const detail = MOCK_DETAIL;
+
+    return () => (
+      <Modal
+        visible={props.visible}
+        title="查看详情"
+        width={900}
+        onCancel={props.onClose}
+        footer={null}
+        centered
+        destroyOnClose
+      >
+        {/* ===== 基础信息 ===== */}
+        <div class={styles.section}>
+          <div class={styles.sectionTitle}>基础信息</div>
+          <Descriptions size="small" bordered column={3} class={styles.desc}>
+            {/* 第一行：赛事名称（1 列） + 赛事时间（占 2 列） */}
+            <Descriptions.Item label="赛事名称">{detail.name}</Descriptions.Item>
+            <Descriptions.Item label="赛事时间" span={2}>
+              {detail.eventTime}
+            </Descriptions.Item>
+
+            {/* 第二行：赛事说明（占 3 列，独占整行） */}
+            <Descriptions.Item label="赛事说明" span={3}>
+              {detail.descr}
+            </Descriptions.Item>
+
+            <Descriptions.Item label="报名起止时间">{detail.registerTime}</Descriptions.Item>
+            <Descriptions.Item label="取消报名截止时间" span={2}>
+              {detail.cancelDeadline}
+            </Descriptions.Item>
+
+            <Descriptions.Item label="省市区">{detail.region}</Descriptions.Item>
+            <Descriptions.Item label="地点">{detail.address}</Descriptions.Item>
+            <Descriptions.Item label="场地编号">{detail.venueNo}</Descriptions.Item>
+
+            <Descriptions.Item label="公开活动">{detail.publicEvent}</Descriptions.Item>
+            <Descriptions.Item label="证件号">{detail.needIdCard}</Descriptions.Item>
+            <Descriptions.Item label="证件图片">{detail.needIdCardImage}</Descriptions.Item>
+
+            <Descriptions.Item label="创建时间">{detail.createTime}</Descriptions.Item>
+            <Descriptions.Item label="创建人">{detail.creator}</Descriptions.Item>
+            <Descriptions.Item label="状态">{detail.status}</Descriptions.Item>
+            <Descriptions.Item label="报名人数">{detail.enrolledCount}</Descriptions.Item>
+            <Descriptions.Item label="取消报名人数" span={1}>
+              {detail.cancelledCount}
+            </Descriptions.Item>
+
+            <Descriptions.Item label="最大人数">{detail.maxCount}</Descriptions.Item>
+            <Descriptions.Item label="对岸数量">{detail.crossedCount}</Descriptions.Item>
+            <Descriptions.Item label="已完成对岸数量">{detail.completedCount}</Descriptions.Item>
+          </Descriptions>
+        </div>
+
+        {/* ===== 封面 ===== */}
+        <div class={styles.section}>
+          <div class={styles.sectionTitle}>封面</div>
+          <Image src={detail.cover} />
+        </div>
+
+        {/* ===== 赛事公告 ===== */}
+        <div class={styles.section}>
+          <div class={styles.sectionTitle}>赛事公告</div>
+          <div class={styles.textBlock}>{detail.announcement}</div>
+        </div>
+
+        {/* ===== 组别信息 ===== */}
+        <div class={styles.section}>
+          <div class={styles.sectionTitle}>组别信息</div>
+          {MOCK_GROUPS.map((group) => (
+            <div key={group.key} class={styles.group}>
+              <div class={styles.groupTitle}>{group.title}</div>
+              <Table
+                columns={PLAYER_COLUMNS}
+                dataSource={group.players}
+                size="small"
+                pagination={false}
+                bordered
+              />
+              <div class={styles.paginationRow}>
+                <Pagination
+                  current={1}
+                  pageSize={10}
+                  total={5}
+                  showSizeChanger={false}
+                  size="small"
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* ===== 分组信息 ===== */}
+        <div class={styles.section}>
+          <div class={styles.sectionTitle}>分组信息</div>
+          <div class={styles.divisionList}>
+            {MOCK_DIVISIONS.map((d) => (
+              <div key={d} class={styles.divisionItem}>
+                {d}
+              </div>
+            ))}
+          </div>
+        </div>
+      </Modal>
+    );
+  },
+});
@@ -0,0 +1,51 @@
+.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;
+}
@@ -0,0 +1,45 @@
+.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;
+}
@@ -0,0 +1,66 @@
+import { defineComponent } from 'vue';
+import { Modal, Image } from 'ant-design-vue';
+import styles from './EventRegulationModal.module.less';
+
+interface EventRegulationModalProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+/** 规程文字 */
+const REGULATION_TEXT = [
+  '一、赛事目的：推动羽毛球运动发展，提高运动员技术水平，增进体育文化交流。',
+  '二、参赛资格：凡身体健康、年龄符合要求的羽毛球爱好者均可报名参加。',
+  '三、比赛规则：采用中国羽毛球协会审定的最新《羽毛球竞赛规则》。',
+  '四、赛制安排：比赛分小组赛和淘汰赛两个阶段，小组赛采用单循环，淘汰赛采用单败淘汰。',
+  '五、器材要求：参赛运动员自备球拍，比赛用球由组委会统一提供。',
+  '六、裁判设置：每场比赛设主裁判1名、副裁判2名，确保比赛公平公正。',
+].join('\n\n');
+
+/** 规程图片（mock：8 张示例图，4 列 grid） */
+const REGULATION_IMAGES = Array.from({ length: 8 }, (_, i) => ({
+  id: i + 1,
+  src: `https://picsum.photos/seed/reg${i + 1}/300/200`,
+  alt: `规程图片 ${i + 1}`,
+}));
+
+export default defineComponent({
+  name: 'EventRegulationModal',
+  props: {
+    visible: { type: Boolean, default: false },
+    onClose: { type: Function, required: true },
+  },
+  setup(props: EventRegulationModalProps) {
+    return () => (
+      <Modal
+        visible={props.visible}
+        title="赛事规程"
+        width={760}
+        onCancel={props.onClose}
+        footer={null}
+        centered
+        destroyOnClose
+      >
+        {/* 规程文字 */}
+        <div class={styles.section}>
+          <div class={styles.sectionTitle}>规程文字</div>
+          <div class={styles.textBlock}>{REGULATION_TEXT}</div>
+        </div>
+
+        {/* 规程图片：4 列 grid，点击可浏览 */}
+        <div class={styles.section}>
+          <div class={styles.sectionTitle}>规程图片</div>
+          <Image.PreviewGroup>
+            <div class={styles.imageGrid}>
+              {REGULATION_IMAGES.map((img) => (
+                <div key={img.id} class={styles.imageCell}>
+                  <Image src={img.src} />
+                </div>
+              ))}
+            </div>
+          </Image.PreviewGroup>
+        </div>
+      </Modal>
+    );
+  },
+});
@@ -0,0 +1,18 @@
+/**
+ * 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100%，
+ * 使得 Table scroll.y = 'calc(100% - 55px)' 中的 100% 能正确解析。
+ */
+.tableBody {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+
+  :global {
+    .ant-spin-nested-loading,
+    .ant-spin-container,
+    .ant-table,
+    .ant-table-container {
+      height: 100%;
+    }
+  }
+}
@@ -0,0 +1,307 @@
+import { defineComponent } from 'vue';
+import {
+  Button,
+  Input,
+  Table,
+  Form,
+  Space,
+  Select,
+  DatePicker,
+  Cascader,
+  Tooltip,
+  Pagination,
+  Modal,
+} from 'ant-design-vue';
+import {
+  useEventListModel,
+  EVENT_STATUS_OPTIONS,
+  PUBLIC_EVENT_OPTIONS,
+  ID_CARD_OPTIONS,
+  ID_CARD_IMAGE_OPTIONS,
+} from './model/useEventListModel';
+import { regionOptions } from '@/utils/areaData';
+import { useContainerSize, useState } from '@/hooks';
+import EventRegulationModal from './components/EventRegulationModal';
+import EventDetailModal from './components/EventDetailModal';
+import styles from './index.module.less';
+
+const { RangePicker } = DatePicker;
+
+/**
+ * bodyCell 渲染函数
+ */
+function renderBodyCell({
+  column,
+  text,
+  record,
+  onView,
+  onRemove,
+  onViewRegulation,
+}: {
+  column: any;
+  text: any;
+  record: any;
+  onView: (record: any) => void;
+  onRemove: (record: any) => void;
+  onViewRegulation: (record: any) => void;
+}) {
+  if (column.dataIndex === 'eventName') {
+    const maxLen = 15;
+    const raw = text || '';
+    const display = raw.length > maxLen ? raw.slice(0, maxLen) + '...' : raw;
+    return raw.length > maxLen ? (
+      <Tooltip title={raw}>
+        <span>{display}</span>
+      </Tooltip>
+    ) : (
+      <span>{display}</span>
+    );
+  }
+
+  if (column.key === 'regulation') {
+    return (
+      <a style={{ cursor: 'pointer' }} onClick={() => onViewRegulation(record)}>
+        查看
+      </a>
+    );
+  }
+
+  if (column.key === 'action') {
+    const isRemoved = record.status === 'removed';
+    return (
+      <Space>
+        <Button type="link" size="small" onClick={() => onView(record)}>
+          查看
+        </Button>
+        <Button
+          type="link"
+          size="small"
+          danger={!isRemoved}
+          style={isRemoved ? { color: '#52c41a' } : {}}
+          onClick={() => onRemove(record)}
+        >
+          {isRemoved ? '上架' : '下架'}
+        </Button>
+      </Space>
+    );
+  }
+
+  return;
+}
+
+/**
+ * 赛事列表
+ */
+export default defineComponent({
+  name: 'EventList',
+  setup() {
+    const {
+      filterForm,
+      loading,
+      dataSource,
+      columns,
+      pagination,
+      handleSearch,
+      handleReset,
+      handlePageChange,
+    } = useEventListModel();
+
+    const { containerRef, height } = useContainerSize({ headerOffset: 55 });
+
+    // 弹窗状态
+    const [regulationModalVisible, setRegulationModalVisible] = useState<boolean>(false);
+    const [detailModalVisible, setDetailModalVisible] = useState<boolean>(false);
+    const [currentRecord, setCurrentRecord] = useState<any>({});
+
+    const handleView = (record: any) => {
+      console.log('查看赛事:', record.eventId);
+      setCurrentRecord(record);
+      setDetailModalVisible(true);
+    };
+
+    const handleRemove = (record: any) => {
+      const isRemoved = record.status === 'removed';
+      const actionText = isRemoved ? '上架' : '下架';
+      Modal.confirm({
+        title: `${actionText}确认`,
+        content: `确认${actionText}"${record.eventName}"该赛事吗，下架后用户将无法搜索和报名该赛事，已有报名和订单不受影响。`,
+        okText: '确认',
+        cancelText: '取消',
+        onOk: () => {
+          console.log(`${actionText}赛事:`, record.eventId);
+          // TODO: 替换为真实 API 调用
+        },
+      });
+    };
+
+    const handleViewRegulation = (record: any) => {
+      console.log('查看规程:', record.eventId);
+      setCurrentRecord(record);
+      setRegulationModalVisible(true);
+    };
+
+    /** 最终表格列：模型列 + 赛事规程 + 操作 */
+    const tableColumns = [
+      ...columns,
+      { title: '赛事规程', key: 'regulation', width: 100, align: 'center' as const },
+      {
+        title: '操作',
+        key: 'action',
+        width: 160,
+        fixed: 'right' as const,
+        align: 'center' as const,
+      },
+    ];
+
+    return () => (
+      <div class="page-container">
+        {/* ===== 筛选区 ===== */}
+        <div class="page-filter">
+          <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
+            <Form.Item label="创建时间" name="createTimeRange">
+              <RangePicker
+                value={filterForm.createTimeRange as any}
+                style={{ width: '260px' }}
+                allowClear
+                onUpdate:value={(val: any) => (filterForm.createTimeRange = val)}
+              />
+            </Form.Item>
+            <Form.Item label="赛事时间" name="eventTimeRange">
+              <RangePicker
+                value={filterForm.eventTimeRange as any}
+                style={{ width: '260px' }}
+                allowClear
+                onUpdate:value={(val: any) => (filterForm.eventTimeRange = val)}
+              />
+            </Form.Item>
+            <Form.Item label="赛事名称" name="searchName">
+              <Input
+                placeholder="请输入赛事名称"
+                style={{ width: '180px' }}
+                allowClear
+                onPressEnter={handleSearch}
+              />
+            </Form.Item>
+            <Form.Item label="创建人" name="searchCreator">
+              <Input
+                placeholder="请输入创建人"
+                style={{ width: '150px' }}
+                allowClear
+                onPressEnter={handleSearch}
+              />
+            </Form.Item>
+            <Form.Item label="状态" name="status">
+              <Select
+                value={filterForm.status}
+                options={EVENT_STATUS_OPTIONS as any}
+                style={{ width: '110px' }}
+                allowClear
+                onUpdate:value={(val: any) => (filterForm.status = val || '')}
+              />
+            </Form.Item>
+            <Form.Item label="公开活动" name="publicEvent">
+              <Select
+                value={filterForm.publicEvent}
+                options={PUBLIC_EVENT_OPTIONS as any}
+                style={{ width: '170px' }}
+                allowClear
+                onUpdate:value={(val: any) => (filterForm.publicEvent = val || '')}
+              />
+            </Form.Item>
+            <Form.Item label="证件号" name="needIdCard">
+              <Select
+                value={filterForm.needIdCard}
+                options={ID_CARD_OPTIONS as any}
+                style={{ width: '120px' }}
+                allowClear
+                onUpdate:value={(val: any) => (filterForm.needIdCard = val || '')}
+              />
+            </Form.Item>
+            <Form.Item label="证件图片" name="needIdCardImage">
+              <Select
+                value={filterForm.needIdCardImage}
+                options={ID_CARD_IMAGE_OPTIONS as any}
+                style={{ width: '120px' }}
+                allowClear
+                onUpdate:value={(val: any) => (filterForm.needIdCardImage = val || '')}
+              />
+            </Form.Item>
+            <Form.Item label="省市区" name="region">
+              <Cascader
+                value={filterForm.region as any}
+                options={regionOptions}
+                style={{ width: '220px' }}
+                placeholder="请选择省市区"
+                allowClear
+                changeOnSelect
+                onUpdate:value={(val: any) => (filterForm.region = val || [])}
+              />
+            </Form.Item>
+            <Form.Item>
+              <Space>
+                <Button type="primary" onClick={handleSearch} loading={loading.value}>
+                  查询
+                </Button>
+                <Button onClick={handleReset}>重置</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,
+                    onView: handleView,
+                    onRemove: handleRemove,
+                    onViewRegulation: handleViewRegulation,
+                  }),
+              }}
+            </Table>
+          </div>
+
+          {/* 独立分页，右下方 */}
+          <div
+            style={{
+              flexShrink: 0,
+              display: 'flex',
+              justifyContent: 'flex-end',
+              padding: '10px 0 0',
+            }}
+          >
+            <Pagination
+              current={pagination.value.current}
+              pageSize={pagination.value.pageSize}
+              total={pagination.value.total}
+              showSizeChanger
+              showTotal={(total: number) => `共 ${total} 条`}
+              onChange={handlePageChange}
+              onShowSizeChange={handlePageChange}
+            />
+          </div>
+        </div>
+
+        {/* ===== 弹窗区 ===== */}
+        <EventRegulationModal
+          visible={regulationModalVisible.value}
+          onClose={() => setRegulationModalVisible(false)}
+        />
+        <EventDetailModal
+          visible={detailModalVisible.value}
+          record={currentRecord.value}
+          onClose={() => setDetailModalVisible(false)}
+        />
+      </div>
+    );
+  },
+});
@@ -0,0 +1,255 @@
+import { computed, reactive, toRef, Ref, h } from 'vue';
+import { message, Tag } from 'ant-design-vue';
+import { useState, useDebounce, useThrottleFn } from '@/hooks';
+
+// ============================================================
+// 常量
+// ============================================================
+
+/** 赛事状态选项 */
+export const EVENT_STATUS_OPTIONS = [
+  { value: '', label: '全部' },
+  { value: 'enrolling', label: '报名中' },
+  { value: 'ongoing', label: '进行中' },
+  { value: 'finished', label: '已结束' },
+  { value: 'deleted', label: '已删除' },
+  { value: 'removed', label: '已下架' },
+] as const;
+
+/** 公开活动选项 */
+export const PUBLIC_EVENT_OPTIONS = [
+  { value: '', label: '全部' },
+  { value: 'show', label: '在首页展示赛事' },
+  { value: 'hide', label: '不在首页展示赛事' },
+] as const;
+
+/** 证件号选项 */
+export const ID_CARD_OPTIONS = [
+  { value: '', label: '全部' },
+  { value: 'no', label: '无需提供' },
+  { value: 'yes', label: '需提供' },
+] as const;
+
+/** 证件图片选项 */
+export const ID_CARD_IMAGE_OPTIONS = [
+  { value: '', label: '全部' },
+  { value: 'no', label: '无需提供' },
+  { value: 'yes', label: '需提供' },
+] as const;
+
+// ============================================================
+// 假数据
+// ============================================================
+
+const MOCK_DATA = Array.from({ length: 12 }, (_, i) => ({
+  key: `${i + 1}`,
+  eventId: `EV2026070100${String(i + 1).padStart(2, '0')}`,
+  eventName:
+    i % 3 === 0
+      ? '2026全国青少年羽毛球锦标赛暨体育文化交流大会'
+      : i % 3 === 1
+        ? '国际马拉松城市联赛'
+        : '全民健身运动会',
+  eventTimeStart: '2026-08-12 09:00',
+  eventTimeEnd: '2026-08-15 18:00',
+  province: '广东省',
+  city: '深圳市',
+  district: '南山区',
+  address: '深圳湾体育中心',
+  needIdCard: i % 2 === 0 ? '是' : '否',
+  needIdCardImage: i % 2 === 0 ? '是' : '否',
+  creatorNickname: ['张运营', '李管理', '王策划', '赵赛事'][i % 4],
+  creatorPhone: ['13800138001', '13900139002', '13700137003', '13600136004'][i % 4],
+  createTime: '2026-07-01 14:30:00',
+  status: (['enrolling', 'ongoing', 'finished', 'deleted', 'removed'] as const)[i % 5],
+  enrolledCount: [128, 256, 512, 64, 0][i % 5],
+  cancelledCount: [5, 12, 8, 3, 0][i % 5],
+}));
+
+/** 状态标签映射 */
+const STATUS_MAP: Record<string, { label: string; color: string }> = {
+  enrolling: { label: '报名中', color: 'blue' },
+  ongoing: { label: '进行中', color: 'green' },
+  finished: { label: '已结束', color: 'default' },
+  deleted: { label: '已删除', color: 'red' },
+  removed: { label: '已下架', color: 'orange' },
+};
+
+// ============================================================
+// Model
+// ============================================================
+
+/**
+ * 赛事列表页数据模型
+ */
+export function useEventListModel() {
+  // ===== 筛选条件 =====
+  const filterForm = reactive({
+    createTimeRange: null as [string, string] | null,
+    eventTimeRange: null as [string, string] | null,
+    searchName: '',
+    searchCreator: '',
+    status: '',
+    region: [] as string[],
+    publicEvent: '',
+    needIdCard: '',
+    needIdCardImage: '',
+  });
+
+  // 可搜索字段防抖
+  const { debouncedValue: debouncedName } = useDebounce(
+    toRef(filterForm, 'searchName') as Ref<string>,
+    { delay: 300 },
+  );
+  const { debouncedValue: debouncedCreator } = useDebounce(
+    toRef(filterForm, 'searchCreator') 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 columns = [
+    { title: '赛事ID', dataIndex: 'eventId', key: 'eventId', width: 180 },
+    {
+      title: '赛事名称',
+      dataIndex: 'eventName',
+      key: 'eventName',
+      width: 160,
+    },
+    {
+      title: '赛事时间',
+      key: 'eventTime',
+      width: 260,
+      customRender: ({ record }: { record: any }) =>
+        `${record.eventTimeStart} 至 ${record.eventTimeEnd}`,
+    },
+    {
+      title: '省市区',
+      key: 'region',
+      width: 200,
+      customRender: ({ record }: { record: any }) =>
+        `${record.province} ${record.city} ${record.district}`,
+    },
+    { title: '地点', dataIndex: 'address', key: 'address', width: 180 },
+    {
+      title: '是否提供证件号',
+      dataIndex: 'needIdCard',
+      key: 'needIdCard',
+      width: 160,
+    },
+    {
+      title: '是否提供证件图片',
+      dataIndex: 'needIdCardImage',
+      key: 'needIdCardImage',
+      width: 160,
+    },
+    {
+      title: '创建人昵称',
+      dataIndex: 'creatorNickname',
+      key: 'creatorNickname',
+      width: 110,
+    },
+    {
+      title: '创建人手机号',
+      dataIndex: 'creatorPhone',
+      key: 'creatorPhone',
+      width: 130,
+    },
+    { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 170 },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: 90,
+      customRender: ({ text }: { text: string }) => {
+        const info = STATUS_MAP[text] || { label: text, color: 'default' };
+        return h(Tag, { color: info.color }, () => info.label);
+      },
+    },
+    { title: '报名人数', dataIndex: 'enrolledCount', key: 'enrolledCount', width: 90 },
+    { title: '取消报名人数', dataIndex: 'cancelledCount', key: 'cancelledCount', width: 140 },
+  ];
+
+  // ===== 计算属性 =====
+  const hasFilter = computed(() => {
+    return (
+      filterForm.createTimeRange !== null ||
+      filterForm.eventTimeRange !== null ||
+      debouncedName.value.trim() !== '' ||
+      debouncedCreator.value.trim() !== '' ||
+      filterForm.status !== '' ||
+      filterForm.region.length > 0 ||
+      filterForm.publicEvent !== '' ||
+      filterForm.needIdCard !== '' ||
+      filterForm.needIdCardImage !== ''
+    );
+  });
+
+  // ===== 方法 =====
+
+  /** 查询 */
+  const handleSearch = useThrottleFn(async () => {
+    setLoading(true);
+    try {
+      console.log('搜索条件:', {
+        createTimeRange: filterForm.createTimeRange,
+        eventTimeRange: filterForm.eventTimeRange,
+        name: debouncedName.value,
+        creator: debouncedCreator.value,
+        status: filterForm.status,
+        region: filterForm.region,
+        publicEvent: filterForm.publicEvent,
+        needIdCard: filterForm.needIdCard,
+        needIdCardImage: filterForm.needIdCardImage,
+      });
+      // 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.createTimeRange = null;
+    filterForm.eventTimeRange = null;
+    filterForm.searchName = '';
+    filterForm.searchCreator = '';
+    filterForm.status = '';
+    filterForm.region = [];
+    filterForm.publicEvent = '';
+    filterForm.needIdCard = '';
+    filterForm.needIdCardImage = '';
+    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();
+  };
+
+  return {
+    filterForm,
+    loading,
+    dataSource,
+    columns,
+    pagination,
+    hasFilter,
+    handleSearch,
+    handleReset,
+    handlePageChange,
+  };
+}
@@ -0,0 +1,10 @@
+.container {
+  // 容器
+}
+
+.title {
+  margin-top: 0;
+  margin-bottom: 24px;
+  font-size: 20px;
+  font-weight: 600;
+}
@@ -0,0 +1,79 @@
+import { defineComponent } from 'vue';
+import { Button, Input, Table, Form, Space } from 'ant-design-vue';
+import { useOrderModel } from './model/useOrderModel';
+
+/**
+ * 订单管理
+ */
+export default defineComponent({
+  name: 'EventOrders',
+  setup() {
+    const {
+      filterForm,
+      loading,
+      dataSource,
+      columns,
+      pagination,
+      handleSearch,
+      handleReset,
+      handlePageChange,
+    } = useOrderModel();
+
+    return () => (
+      <div class="page-container">
+        <div class="page-filter">
+          <Form layout="inline" model={filterForm}>
+            <Form.Item label="订单编号" name="searchOrderId">
+              <Input
+                placeholder="请输入订单编号"
+                style={{ width: '200px' }}
+                allowClear
+                onPressEnter={handleSearch}
+              />
+            </Form.Item>
+            <Form.Item label="赛事名称" name="searchEventName">
+              <Input
+                placeholder="请输入赛事名称"
+                style={{ width: '200px' }}
+                allowClear
+                onPressEnter={handleSearch}
+              />
+            </Form.Item>
+            <Form.Item label="用户名" name="searchUserName">
+              <Input
+                placeholder="请输入用户名"
+                style={{ width: '200px' }}
+                allowClear
+                onPressEnter={handleSearch}
+              />
+            </Form.Item>
+            <Form.Item>
+              <Space>
+                <Button type="primary" onClick={handleSearch} loading={loading.value}>
+                  查询
+                </Button>
+                <Button onClick={handleReset}>重置</Button>
+              </Space>
+            </Form.Item>
+          </Form>
+        </div>
+
+        <div class="page-table">
+          <Table
+            columns={columns}
+            dataSource={dataSource.value}
+            loading={loading.value}
+            pagination={{
+              current: pagination.value.current,
+              pageSize: pagination.value.pageSize,
+              total: pagination.value.total,
+              showSizeChanger: true,
+              showTotal: (total: number) => `共 ${total} 条`,
+              onChange: handlePageChange,
+            }}
+          />
+        </div>
+      </div>
+    );
+  },
+});
@@ -0,0 +1,103 @@
+import { computed, reactive, toRef, Ref } from 'vue';
+import { message } from 'ant-design-vue';
+import { useState, useDebounce, useThrottleFn } from '@/hooks';
+
+/**
+ * 订单管理页数据模型
+ */
+export function useOrderModel() {
+  // ===== 筛选条件（合并在一个 reactive 对象中）=====
+  const filterForm = reactive({
+    searchOrderId: '',
+    searchEventName: '',
+    searchUserName: '',
+  });
+
+  // 各字段防抖 300ms
+  const { debouncedValue: debouncedOrderId } = useDebounce(
+    toRef(filterForm, 'searchOrderId') as Ref<string>,
+    { delay: 300 },
+  );
+  const { debouncedValue: debouncedEventName } = useDebounce(
+    toRef(filterForm, 'searchEventName') as Ref<string>,
+    { delay: 300 },
+  );
+  const { debouncedValue: debouncedUserName } = useDebounce(
+    toRef(filterForm, 'searchUserName') as Ref<string>,
+    { delay: 300 },
+  );
+
+  // ===== 表格状态 =====
+  const [loading, setLoading] = useState<boolean>(false);
+  const [dataSource, setDataSource] = useState<any[]>([]);
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  });
+
+  // ===== 表格列配置 =====
+  const columns = [
+    { title: '订单编号', dataIndex: 'orderId', key: 'orderId' },
+    { title: '赛事名称', dataIndex: 'eventName', key: 'eventName' },
+    { title: '用户名', dataIndex: 'userName', key: 'userName' },
+    { title: '订单金额', dataIndex: 'amount', key: 'amount' },
+    { title: '支付状态', dataIndex: 'payStatus', key: 'payStatus' },
+    { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
+  ];
+
+  // ===== 计算属性 =====
+  const hasFilter = computed(() => {
+    return (
+      debouncedOrderId.value.trim() !== '' ||
+      debouncedEventName.value.trim() !== '' ||
+      debouncedUserName.value.trim() !== ''
+    );
+  });
+
+  // ===== 方法 =====
+
+  /** 查询（节流 500ms） */
+  const handleSearch = useThrottleFn(async () => {
+    setLoading(true);
+    try {
+      // TODO: 替换为真实 API 调用
+      console.log('搜索条件:', {
+        orderId: debouncedOrderId.value,
+        eventName: debouncedEventName.value,
+        userName: debouncedUserName.value,
+      });
+      message.success('查询成功');
+    } catch (error: any) {
+      message.error(error.msg || '查询失败');
+    } finally {
+      setLoading(false);
+    }
+  }, 500);
+
+  /** 重置（节流 500ms） */
+  const handleReset = useThrottleFn(() => {
+    filterForm.searchOrderId = '';
+    filterForm.searchEventName = '';
+    filterForm.searchUserName = '';
+    setPagination({ current: 1, pageSize: 10, total: 0 });
+    setDataSource([]);
+  }, 500);
+
+  const handlePageChange = (page: number, pageSize: number) => {
+    setPagination({ ...pagination.value, current: page, pageSize });
+    handleSearch();
+  };
+
+  return {
+    filterForm,
+    loading,
+    dataSource,
+    columns,
+    pagination,
+    hasFilter,
+    handleSearch,
+    handleReset,
+    handlePageChange,
+  };
+}
@@ -0,0 +1,10 @@
+.container {
+  // 容器
+}
+
+.title {
+  margin-top: 0;
+  margin-bottom: 24px;
+  font-size: 20px;
+  font-weight: 600;
+}
@@ -0,0 +1,71 @@
+import { defineComponent } from 'vue';
+import { Button, Input, Table, Form, Space } from 'ant-design-vue';
+import { useUserModel } from './model/useUserModel';
+
+/**
+ * 用户列表
+ */
+export default defineComponent({
+  name: 'EventUsers',
+  setup() {
+    const {
+      filterForm,
+      loading,
+      dataSource,
+      columns,
+      pagination,
+      handleSearch,
+      handleReset,
+      handlePageChange,
+    } = useUserModel();
+
+    return () => (
+      <div class="page-container">
+        <div class="page-filter">
+          <Form layout="inline" model={filterForm}>
+            <Form.Item label="用户昵称" name="searchUserName">
+              <Input
+                placeholder="请输入用户昵称"
+                style={{ width: '200px' }}
+                allowClear
+                onPressEnter={handleSearch}
+              />
+            </Form.Item>
+            <Form.Item label="手机号" name="searchPhone">
+              <Input
+                placeholder="请输入手机号"
+                style={{ width: '200px' }}
+                allowClear
+                onPressEnter={handleSearch}
+              />
+            </Form.Item>
+            <Form.Item>
+              <Space>
+                <Button type="primary" onClick={handleSearch} loading={loading.value}>
+                  查询
+                </Button>
+                <Button onClick={handleReset}>重置</Button>
+              </Space>
+            </Form.Item>
+          </Form>
+        </div>
+
+        <div class="page-table">
+          <Table
+            columns={columns}
+            dataSource={dataSource.value}
+            loading={loading.value}
+            pagination={{
+              current: pagination.value.current,
+              pageSize: pagination.value.pageSize,
+              total: pagination.value.total,
+              showSizeChanger: true,
+              showTotal: (total: number) => `共 ${total} 条`,
+              onChange: handlePageChange,
+            }}
+          />
+        </div>
+      </div>
+    );
+  },
+});
@@ -0,0 +1,91 @@
+import { computed, reactive, toRef, Ref } from 'vue';
+import { message } from 'ant-design-vue';
+import { useState, useDebounce, useThrottleFn } from '@/hooks';
+
+/**
+ * 用户列表页数据模型
+ */
+export function useUserModel() {
+  // ===== 筛选条件（合并在一个 reactive 对象中）=====
+  const filterForm = reactive({
+    searchUserName: '',
+    searchPhone: '',
+  });
+
+  // 各字段防抖 300ms
+  const { debouncedValue: debouncedUserName } = useDebounce(
+    toRef(filterForm, 'searchUserName') as Ref<string>,
+    { delay: 300 },
+  );
+  const { debouncedValue: debouncedPhone } = useDebounce(
+    toRef(filterForm, 'searchPhone') as Ref<string>,
+    { delay: 300 },
+  );
+
+  // ===== 表格状态 =====
+  const [loading, setLoading] = useState<boolean>(false);
+  const [dataSource, setDataSource] = useState<any[]>([]);
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  });
+
+  // ===== 表格列配置 =====
+  const columns = [
+    { title: '用户昵称', dataIndex: 'nickName', key: 'nickName' },
+    { title: '手机号', dataIndex: 'phone', key: 'phone' },
+    { title: '报名赛事', dataIndex: 'eventName', key: 'eventName' },
+    { title: '报名时间', dataIndex: 'registerTime', key: 'registerTime' },
+    { title: '状态', dataIndex: 'status', key: 'status' },
+  ];
+
+  // ===== 计算属性 =====
+  const hasFilter = computed(() => {
+    return debouncedUserName.value.trim() !== '' || debouncedPhone.value.trim() !== '';
+  });
+
+  // ===== 方法 =====
+
+  /** 查询（节流 500ms） */
+  const handleSearch = useThrottleFn(async () => {
+    setLoading(true);
+    try {
+      // TODO: 替换为真实 API 调用
+      console.log('搜索条件:', {
+        userName: debouncedUserName.value,
+        phone: debouncedPhone.value,
+      });
+      message.success('查询成功');
+    } catch (error: any) {
+      message.error(error.msg || '查询失败');
+    } finally {
+      setLoading(false);
+    }
+  }, 500);
+
+  /** 重置（节流 500ms） */
+  const handleReset = useThrottleFn(() => {
+    filterForm.searchUserName = '';
+    filterForm.searchPhone = '';
+    setPagination({ current: 1, pageSize: 10, total: 0 });
+    setDataSource([]);
+  }, 500);
+
+  const handlePageChange = (page: number, pageSize: number) => {
+    setPagination({ ...pagination.value, current: page, pageSize });
+    handleSearch();
+  };
+
+  return {
+    filterForm,
+    loading,
+    dataSource,
+    columns,
+    pagination,
+    hasFilter,
+    handleSearch,
+    handleReset,
+    handlePageChange,
+  };
+}