工作记录（六）——竞赛模块前端管理员部分实现

工作记录（六）：竞赛模块前端逻辑实现以及页面实现，包括竞赛创建和竞赛管理页

本阶段主要聚焦于竞赛模块的后台管理与创建编辑功能。目标是让管理员能够高效地管理比赛、配置题目、设置时间，并确保所有交互体验流畅、数据准确。开发过程中，重点解决了复杂表单状态管理、时间处理、题目选择等难点，充分利用Vue 3组合式API和现代前端技术提升了系统的可维护性和用户体验。

一、ManageContestView.vue 比赛管理页面

1. 页面布局与样式设计

比赛管理页面采用三层嵌套结构。最外层负责整体布局和自适应，保证内容不会贴边且在不同屏幕下都能良好展示。中间层渲染半透明背景图片，通过伪元素和z-index让背景既有装饰性又不影响内容。最内层是主要内容区，设置了最大宽度、圆角和阴影，提升聚焦感和层次感。所有布局和样式都围绕“信息清晰、操作聚焦、视觉舒适”展开。

.page-background::before { /* 背景图片与渐变 */ }
#manageContestView { /* 内容区样式 */ }

2. 数据管理与状态同步

数据加载分为两步：先获取所有题目信息（便于将比赛中的题目ID转为题目名称），再根据分页参数加载比赛列表。所有数据都用ref响应式变量存储，保证数据变化时视图自动刷新。分页、筛选等参数变化时，watchEffect会自动触发数据重新加载，确保用户看到的始终是最新内容。

async function loadData() {
  // 第一步：从后端获取所有题目信息，并存入本地题目列表
  题目列表 = 获取所有题目();

  // 第二步：根据当前分页和筛选参数，从后端获取比赛列表
  比赛数据 = 获取比赛列表(分页参数);

  // 将获取到的比赛数据和总数更新到本地状态
  datalist = 比赛数据.记录列表;
  total = 比赛数据.总数;
}

 3. 表格交互优化

表格的时间列采用分层设计，日期和时间分别用不同图标和格式展示，提升可读性。所有时间都用统一格式化工具处理，保证风格一致。鼠标悬停时，表格行会有轻微的背景色变化和位移动画，突出当前行，提升操作反馈感。

.arco-table-tr:hover { background: #f0f7ff; transform: translateX(3px); }

4.界面展示

二、AddContestView.vue 比赛创建/编辑页面

 1. 响应式表单设计

表单采用响应式数据结构，所有输入项都和数据模型实时绑定。布局上，表单容器有最大宽度限制，保证在大屏下不会拉伸变形。每个表单项左对齐，输入框有圆角和聚焦高亮。比赛描述部分集成了Markdown编辑器，支持富文本输入，方便管理员详细描述比赛规则和背景。

<a-form :model="form" label-align="left">
  <a-form-item field="contestName" label="比赛名称">
    <a-input v-model="form.contestName" />
  </a-form-item>
  <a-form-item field="contestDescription" label="比赛描述">
    <MdEditor :value="form.contestDescription" :变化处理部分/>
  </a-form-item>
</a-form>

2. 时间选择功能

时间选择器支持范围选择和多种快捷选项（如“持续3天”、“一周”等），这些选项会根据当前时间动态生成。持续时间的输入采用小时和分钟分开填写，用户可以用按钮或键盘调整，系统会自动把它们转换成秒数用于后端存储。所有时间相关的输入和转换对用户都是透明的，既保证了灵活性，也避免了出错。

  { label: '持续3天', value: () => [now(), now().add(3, 'day')] },
  { label: '持续一周', value: () => [now(), now().add(1, 'week')] }

3. 智能题目选择器

题目选择器支持多选、模糊搜索和实时预览。管理员可以通过题目名称或ID快速查找题目，选中的题目会以标签形式展示在选择框顶部，方便随时查看和删除。每个题目标签都可以悬浮显示详细信息，避免信息丢失。

4. 表单验证与提交逻辑

表单提交前会进行多层校验：首先检查必填项（如比赛名称、时间），再校验时间的合理性（结束时间必须晚于开始时间），持续时间会自动转换为秒数。所有API调用都用异常捕获包裹，任何错误都会友好提示。根据是新建还是编辑，系统会自动选择不同的接口。添加和更新问题使用的是同一个界面，通过判断路径中是否含有update来区分，显示不同标题和内容面板，如果是更新操作，会在页面加载时加载获取原有题目数据，提交时根据是否为更新页面调用不同的接口。根据题目id加载已有数据，从路由查询参数中获取题目ID，没有id说明是新建题目，将后端返回的JSON字符串转换为前端可用的JavaScript对象，处理三类主要数据：判题用例、判题配置、题目标签，没有就初始化为空着。

async function doSubmit() {
  // 校验比赛名称
  if (!没有值) {
    message.warning("请输入比赛名称");
    return;
  }
  // 校验比赛时间
  if (!没有值) {
    message.warning("请选择比赛时间");
    return;
  }
  // 整理表单数据
  try {
    // 判断是更新还是新建
    //根据update字段判断
    // 操作成功提示
    if (res.code === 0) {
      message.success(updatePage ? "更新成功" : "创建成功");
    }
  } catch {
    // 操作失败提示
    message.error("操作失败，请稍后重试");
  }
}

5.界面展示

 三、主要难点及解决办法

1. 时间处理与转换难点

比赛涉及开始、结束和持续时间，既要保证格式统一，还要避免用户输入不合理的时间。系统采用dayjs库统一处理所有时间转换和格式化，小时和分钟分开输入，所有时间相关的逻辑都集中处理，避免了重复和混乱。时间校验逻辑确保结束时间晚于开始时间，持续时间始终有效。

2. 表单状态管理

创建和编辑共用同一套表单结构，数据模型较复杂，还要支持草稿保存。系统用组合式API集中管理所有表单状态，设计了统一的数据转换层，负责题目ID、比赛时长、时间格式等转换。草稿保存机制会在用户编辑时自动存储到本地，管理员再次打开页面时可自动恢复，极大提升了容错性和用户体验。

function useContestForm() {
  // 返回form、数据转换、草稿保存等方法
}

 四、总结

本次开发不仅实现了比赛管理和创建/编辑页面的全部前端逻辑和页面效果，还攻克了时间处理精度、表单状态复用、复杂交互组件等难点。通过dayjs实现了时间的统一转换和验证，利用组合式API构建了高复用的数据转换层和草稿保存机制。整个过程中，我深入理解了Vue 3组合式API在复杂表单状态管理中的优势，也掌握了时间选择器定制、动态快捷选项和智能选择器的设计思路，为后续复杂业务的开发打下了坚实基础。