94dbd0d34c
- 创建 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' 导入使用
79 lines
1.3 KiB
Vue
79 lines
1.3 KiB
Vue
<template>
|
|
<div class="scoreboard-module">
|
|
<slot name="header">
|
|
<header class="module-header">
|
|
<h1>{{ title }}</h1>
|
|
<p>{{ description }}</p>
|
|
</header>
|
|
</slot>
|
|
|
|
<div class="module-content">
|
|
<slot />
|
|
</div>
|
|
|
|
<footer class="module-footer">
|
|
<slot name="footer">
|
|
<p>© {{ currentYear }} 运动会记分板系统 - 版权所有</p>
|
|
</slot>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
title?: string
|
|
description?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
title: '运动会记分板',
|
|
description: '运动会管理系统'
|
|
})
|
|
|
|
const currentYear = new Date().getFullYear()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.scoreboard-module {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.module-header {
|
|
background-color: #304156;
|
|
color: #fff;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.module-header h1 {
|
|
margin: 0 0 8px 0;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.module-header p {
|
|
margin: 0;
|
|
opacity: 0.8;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.module-content {
|
|
flex: 1;
|
|
background-color: #f0f2f5;
|
|
}
|
|
|
|
.module-footer {
|
|
background-color: #fff;
|
|
border-top: 1px solid #e6e6e6;
|
|
padding: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.module-footer p {
|
|
margin: 0;
|
|
color: #909399;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|