Administrator 94dbd0d34c refactor: 将记分板功能模块化为可复用组件
- 创建 app/modules/scoreboard 模块目录
- 添加配置常量 (EVENT_CATEGORIES, TEAM_GROUPS, EVENT_TYPES)
- 添加 API 工具函数 (fetchEvents, fetchTeams, fetchResults 等)
- 添加可复用组件 (ModuleLayout, StatCard, DataTable)
- 添加模块导出文件 (mod.ts)
- 添加模块使用文档 (README.md)
- 更新首页使用模块 API 函数

后续可通过 import { xxx } from '~/modules/scoreboard' 导入使用
2026-03-17 22:33:01 +08:00

2.9 KiB
Raw Blame History

运动会记分板模块

可复用的运动会管理模块,提供完整的比赛项目、队伍、成绩管理功能。

目录结构

modules/scoreboard/
├── index.ts          # 模块配置和常量
├── api.ts            # API 工具函数
├── mod.ts            # 模块导出
├── ModuleLayout.vue  # 模块布局组件
├── StatCard.vue      # 统计卡片组件
└── DataTable.vue     # 数据表格组件

使用方式

1. 导入配置常量

import { 
  EVENT_CATEGORIES, 
  TEAM_GROUPS, 
  EVENT_TYPES,
  SCORING_RULES 
} from '~/modules/scoreboard'

// 使用示例
const categories = Object.values(EVENT_CATEGORIES)
// ['田赛', '径赛', '团体赛']

2. 使用 API 函数

import { 
  fetchEvents, 
  fetchTeams, 
  fetchResults,
  fetchScoreboard,
  createResult 
} from '~/modules/scoreboard'

// 获取所有比赛项目
const events = await fetchEvents()

// 按类别筛选
const trackEvents = await fetchEvents({ category: '径赛' })

// 获取队伍
const teams = await fetchTeams({ group: '文化班甲组' })

// 录入成绩
await createResult({
  event_id: 1,
  team_id: 1,
  score: '10.5',
  rank: 1
})

// 获取记分板
const scoreboard = await fetchScoreboard()

3. 使用 UI 组件

<template>
  <ModuleLayout title="运动会" description="管理系统">
    <el-row :gutter="20">
      <el-col :span="6">
        <StatCard 
          icon="Trophy" 
          label="比赛项目" 
          :value="12" 
          color="#409eff" 
        />
      </el-col>
    </el-row>

    <DataTable :data="scoreboard" :columns="columns" />
  </ModuleLayout>
</template>

<script setup>
import { ModuleLayout, StatCard, DataTable } from '~/modules/scoreboard'

const columns = [
  { prop: 'name', label: '队伍名称' },
  { prop: 'total_score', label: '总分', sortable: true }
]
</script>

积分规则

名次 积分 奖牌
第 1 名 7 分 金牌
第 2 名 5 分 银牌
第 3 名 3 分 铜牌

比赛项目

田赛

  • 跳高(米)
  • 跳远(米)
  • 掷铅球(米)

径赛

  • 100m
  • 200m
  • 400m
  • 4×100m
  • 4×400m
  • 20×50m

团体赛

  • 旱地龙舟(秒)
  • 跳长绳(次)
  • 折返跑(秒)

组别

  • 教师组
  • 航空班组
  • 体育班组
  • 文化班甲组
  • 文化班乙组

API 接口

接口 方法 描述
/api/config GET 获取系统配置
/api/events GET/POST 比赛项目管理
/api/teams GET/POST 队伍管理
/api/results GET/POST 成绩管理
/api/scoreboard GET 记分板数据
/api/seed POST 初始化数据

扩展模块

可以通过以下方式扩展模块功能:

  1. 添加新的比赛项目类型
  2. 自定义积分规则
  3. 添加数据导出功能
  4. 集成图表展示
  5. 添加实时通知

License

MIT