- 创建 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' 导入使用
52 lines
1014 B
Vue
52 lines
1014 B
Vue
<template>
|
|
<el-table :data="data" border stripe class="scoreboard-table">
|
|
<el-table-column
|
|
v-for="column in columns"
|
|
:key="column.prop"
|
|
:prop="column.prop"
|
|
:label="column.label"
|
|
:width="column.width"
|
|
:class-name="column.className"
|
|
:sortable="column.sortable"
|
|
>
|
|
<template v-if="column.slot" #default="{ row }">
|
|
<slot :name="column.slot" :row="row">
|
|
{{ row[column.prop] }}
|
|
</slot>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Column {
|
|
prop: string
|
|
label: string
|
|
width?: number | string
|
|
className?: string
|
|
sortable?: boolean
|
|
slot?: string
|
|
}
|
|
|
|
interface Props {
|
|
data: any[]
|
|
columns: Column[]
|
|
}
|
|
|
|
defineProps<Props>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.scoreboard-table {
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.scoreboard-table :deep(.col-group),
|
|
.scoreboard-table :deep(.col-medal),
|
|
.scoreboard-table :deep(.col-time) {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|