init
This commit is contained in:
commit
8163233f6e
30
.gitignore
vendored
Normal file
30
.gitignore
vendored
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
*.tsbuildinfo
|
||||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
||||||
33
README.md
Normal file
33
README.md
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
# gdut-acm-board
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||||
|
|
||||||
|
## Type Support for `.vue` Imports in TS
|
||||||
|
|
||||||
|
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
||||||
|
|
||||||
|
## Customize configuration
|
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||||
|
|
||||||
|
## Project Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Hot-Reload for Development
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Type-Check, Compile and Minify for Production
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="icon" href="/favicon.ico">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Vite App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
4087
package-lock.json
generated
Normal file
4087
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
31
package.json
Normal file
31
package.json
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"name": "gdut-acm-board",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"engines": {
|
||||||
|
"node": "^20.19.0 || >=22.12.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "run-p type-check \"build-only {@}\" --",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"build-only": "vite build",
|
||||||
|
"type-check": "vue-tsc --build"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^3.5.18"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tsconfig/node22": "^22.0.2",
|
||||||
|
"@types/node": "^22.16.5",
|
||||||
|
"@vitejs/plugin-vue": "^6.0.1",
|
||||||
|
"@vue/tsconfig": "^0.7.0",
|
||||||
|
"npm-run-all2": "^8.0.4",
|
||||||
|
"sass-embedded": "^1.93.2",
|
||||||
|
"typescript": "~5.8.0",
|
||||||
|
"vite": "^7.0.6",
|
||||||
|
"vite-plugin-vue-devtools": "^8.0.0",
|
||||||
|
"vue-tsc": "^3.0.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
194
public/contest-data.json
Normal file
194
public/contest-data.json
Normal file
@ -0,0 +1,194 @@
|
|||||||
|
{
|
||||||
|
"contest": {
|
||||||
|
"name": "ACM 模拟比赛",
|
||||||
|
"startTime": "2025-09-29T19:00:00+08:00",
|
||||||
|
"endTime": "2025-09-29T22:00:00+08:00",
|
||||||
|
"frozenTime": "2025-09-29T21:30:00+08:00"
|
||||||
|
},
|
||||||
|
"users": [
|
||||||
|
{
|
||||||
|
"id": "0",
|
||||||
|
"name": "纪润钿"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "1",
|
||||||
|
"name": "陈羽轩"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "2",
|
||||||
|
"name": "张祖豪"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "3",
|
||||||
|
"name": "韩亮"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "4",
|
||||||
|
"name": "张皓郡"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "5",
|
||||||
|
"name": "陈泓希"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "6",
|
||||||
|
"name": "钟复源"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "7",
|
||||||
|
"name": "臧传睿"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "8",
|
||||||
|
"name": "李冠翀"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "9",
|
||||||
|
"name": "林梓盛"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "10",
|
||||||
|
"name": "陈宇乐"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "11",
|
||||||
|
"name": "沈瑞涵"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "12",
|
||||||
|
"name": "梁宇辉"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "13",
|
||||||
|
"name": "王海锋"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "14",
|
||||||
|
"name": "黄思齐"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "15",
|
||||||
|
"name": "全航霖"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "16",
|
||||||
|
"name": "刘荣锐"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "17",
|
||||||
|
"name": "凡正晖"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "18",
|
||||||
|
"name": "杨博铭"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "19",
|
||||||
|
"name": "李佳霖"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "20",
|
||||||
|
"name": "黄思涵"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "21",
|
||||||
|
"name": "蒋前进"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "22",
|
||||||
|
"name": "王浩辰"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "23",
|
||||||
|
"name": "刘鑫泰"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "24",
|
||||||
|
"name": "冯胤元"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "25",
|
||||||
|
"name": "劳帅钧"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "26",
|
||||||
|
"name": "白克益"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "27",
|
||||||
|
"name": "张天睿"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "28",
|
||||||
|
"name": "倪润东"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"problems": [
|
||||||
|
{
|
||||||
|
"id": "A",
|
||||||
|
"title": "合成小西瓜"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "B",
|
||||||
|
"title": "我贡献了 12 次罚时！"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "C",
|
||||||
|
"title": "颜色段不均摊"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "D",
|
||||||
|
"title": "鼠鼠大冒险"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "E",
|
||||||
|
"title": "未命名"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "F",
|
||||||
|
"title": "巴巴博弈"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "G",
|
||||||
|
"title": "小偷偷偷偷东西"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "H",
|
||||||
|
"title": "树的重量"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "I",
|
||||||
|
"title": "应该会是一个比较轻松的拿下"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "J",
|
||||||
|
"title": "死线是活的，活人是死的"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "K",
|
||||||
|
"title": "泰拉世界的小动物们 A"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "L",
|
||||||
|
"title": "泰拉世界的小动物们 B"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"submissions": [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"userId": "1",
|
||||||
|
"problemId": "A",
|
||||||
|
"result": "AC",
|
||||||
|
"submitTime": "2025-09-29T19:10:00+08:00",
|
||||||
|
"contestTime": 30
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 1759146192739,
|
||||||
|
"userId": "1",
|
||||||
|
"problemId": "C",
|
||||||
|
"result": "AC",
|
||||||
|
"submitTime": "2025-09-29T11:43:00.000Z",
|
||||||
|
"contestTime": 100
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
35
src/App.vue
Normal file
35
src/App.vue
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<!-- <script setup>
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
import Board from './components/Board.vue';
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
document.documentElement.lang = 'zh';
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Board id="board-table"></Board>
|
||||||
|
</template> -->
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import Board from './components/Board.vue';
|
||||||
|
import New from './components/New.vue'
|
||||||
|
const routes = {
|
||||||
|
'/': Board,
|
||||||
|
'/new': New,
|
||||||
|
}
|
||||||
|
const currentPath = ref(window.location.hash)
|
||||||
|
window.addEventListener('hashchange', () => {
|
||||||
|
currentPath.value = window.location.hash
|
||||||
|
})
|
||||||
|
const currentView = computed(() => {
|
||||||
|
return routes[currentPath.value.slice(1) || '/'] || NotFound
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<a href="#/">排行榜</a> |
|
||||||
|
<a href="#/new">创建提交记录</a>
|
||||||
|
<component :is="currentView" />
|
||||||
|
</template>
|
||||||
86
src/assets/base.css
Normal file
86
src/assets/base.css
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
/* color palette from <https://github.com/vuejs/theme> */
|
||||||
|
:root {
|
||||||
|
--vt-c-white: #ffffff;
|
||||||
|
--vt-c-white-soft: #f8f8f8;
|
||||||
|
--vt-c-white-mute: #f2f2f2;
|
||||||
|
|
||||||
|
--vt-c-black: #181818;
|
||||||
|
--vt-c-black-soft: #222222;
|
||||||
|
--vt-c-black-mute: #282828;
|
||||||
|
|
||||||
|
--vt-c-indigo: #2c3e50;
|
||||||
|
|
||||||
|
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||||
|
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||||
|
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||||
|
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||||
|
|
||||||
|
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||||
|
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||||
|
--vt-c-text-dark-1: var(--vt-c-white);
|
||||||
|
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* semantic color variables for this project */
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-white);
|
||||||
|
--color-background-soft: var(--vt-c-white-soft);
|
||||||
|
--color-background-mute: var(--vt-c-white-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-light-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-light-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-light-1);
|
||||||
|
--color-text: var(--vt-c-text-light-1);
|
||||||
|
|
||||||
|
--section-gap: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-black);
|
||||||
|
--color-background-soft: var(--vt-c-black-soft);
|
||||||
|
--color-background-mute: var(--vt-c-black-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-dark-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-dark-1);
|
||||||
|
--color-text: var(--vt-c-text-dark-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-background);
|
||||||
|
transition:
|
||||||
|
color 0.5s,
|
||||||
|
background-color 0.5s;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-family:
|
||||||
|
Inter,
|
||||||
|
-apple-system,
|
||||||
|
BlinkMacSystemFont,
|
||||||
|
'Segoe UI',
|
||||||
|
Roboto,
|
||||||
|
Oxygen,
|
||||||
|
Ubuntu,
|
||||||
|
Cantarell,
|
||||||
|
'Fira Sans',
|
||||||
|
'Droid Sans',
|
||||||
|
'Helvetica Neue',
|
||||||
|
sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||||
|
After Width: | Height: | Size: 276 B |
35
src/assets/main.css
Normal file
35
src/assets/main.css
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
@import './base.css';
|
||||||
|
|
||||||
|
#app {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
.green {
|
||||||
|
text-decoration: none;
|
||||||
|
color: hsla(160, 100%, 37%, 1);
|
||||||
|
transition: 0.4s;
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
a:hover {
|
||||||
|
background-color: hsla(160, 100%, 37%, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
823
src/components/Board.vue
Normal file
823
src/components/Board.vue
Normal file
@ -0,0 +1,823 @@
|
|||||||
|
<template>
|
||||||
|
<div class="scoreboard-container">
|
||||||
|
<div class="controls">
|
||||||
|
<div class="left-controls">
|
||||||
|
<button @click="refreshScoreboard" :disabled="loading">
|
||||||
|
{{ loading ? '刷新中...' : '刷新排行榜' }}
|
||||||
|
</button>
|
||||||
|
<span class="contest-time" v-if="contestStatus">{{ contestStatus }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="right-controls">
|
||||||
|
<span class="last-update">最后更新: {{ lastUpdate }}</span>
|
||||||
|
<span class="file-info">数据文件: {{ dataFileName }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>排名</th>
|
||||||
|
<th>参赛者</th>
|
||||||
|
<th>通过数</th>
|
||||||
|
<th>罚时</th>
|
||||||
|
<th v-for="problem in problems">{{ alphabet[problem] || problem }}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr
|
||||||
|
v-for="(record, index) in (scoreboardData?.slice(pageIndex * config.eachPage, (pageIndex + 1) * config.eachPage) ?? [])"
|
||||||
|
:key="record.userId"
|
||||||
|
@click="showUserDetails(record.userId)"
|
||||||
|
class="clickable-row"
|
||||||
|
>
|
||||||
|
<td class="rank">{{ pageIndex * config.eachPage + index + 1 }}</td>
|
||||||
|
<td class="user-name">{{ record.userName }}</td>
|
||||||
|
<td class="solved-info">
|
||||||
|
<div class="solved-count">{{ record.solved }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="penalty-info">
|
||||||
|
<div class="penalty-time">{{ record.penalty }}</div>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
v-for="problem in problems"
|
||||||
|
:style="genStyle(record.problems?.[problem])"
|
||||||
|
class="problem-cell"
|
||||||
|
>
|
||||||
|
<div class="problem-result">
|
||||||
|
<div class="time-display">{{ genTime(record.problems?.[problem]) }}</div>
|
||||||
|
<div class="attempts-display">{{ genAttempts(record.problems?.[problem]) }}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<!-- 分页控件 -->
|
||||||
|
<div class="pagination" v-if="scoreboardData">
|
||||||
|
<button @click="prevPage" :disabled="pageIndex === 0">上一页</button>
|
||||||
|
<span>第 {{ pageIndex + 1 }} 页 / 共 {{ totalPages }} 页</span>
|
||||||
|
<button @click="nextPage" :disabled="pageIndex >= totalPages - 1">下一页</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户提交详情模态框 -->
|
||||||
|
<div v-if="showDetails" class="modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<h2>{{ selectedUser?.userName }} 的提交记录</h2>
|
||||||
|
<div class="submissions-list">
|
||||||
|
<div
|
||||||
|
v-for="sub in userSubmissions"
|
||||||
|
:key="sub.id"
|
||||||
|
class="submission-item"
|
||||||
|
:class="`result-${sub.result.toLowerCase()}`"
|
||||||
|
>
|
||||||
|
<span class="problem-id">题目 {{ sub.problemId }}</span>
|
||||||
|
<span class="result">{{ getResultText(sub.result) }}</span>
|
||||||
|
<span class="time">{{ formatTime(sub.submitTime) }}</span>
|
||||||
|
<span class="contest-time">{{ sub.contestTime }}min</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button @click="showDetails = false" class="close-btn">关闭</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||||
|
|
||||||
|
// 类型定义
|
||||||
|
interface ProblemStatus {
|
||||||
|
solved: boolean;
|
||||||
|
penalty: number;
|
||||||
|
submitCount: number;
|
||||||
|
acTime: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ScoreboardRecord {
|
||||||
|
userId: string;
|
||||||
|
userName: string;
|
||||||
|
solved: number;
|
||||||
|
penalty: number;
|
||||||
|
problems: { [key: string]: ProblemStatus };
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Submission {
|
||||||
|
id: number;
|
||||||
|
userId: string;
|
||||||
|
problemId: string;
|
||||||
|
submitTime: string;
|
||||||
|
result: string;
|
||||||
|
contestTime: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface User {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Problem {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ContestInfo {
|
||||||
|
name: string;
|
||||||
|
startTime: string;
|
||||||
|
endTime: string;
|
||||||
|
frozenTime?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ContestData {
|
||||||
|
contest: ContestInfo;
|
||||||
|
users: User[];
|
||||||
|
problems: Problem[];
|
||||||
|
submissions: Submission[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式数据
|
||||||
|
const scoreboardData = ref<ScoreboardRecord[]>([]);
|
||||||
|
const loading = ref(false);
|
||||||
|
const lastUpdate = ref('');
|
||||||
|
const showDetails = ref(false);
|
||||||
|
const selectedUser = ref<ScoreboardRecord | null>(null);
|
||||||
|
const userSubmissions = ref<Submission[]>([]);
|
||||||
|
const pageIndex = ref(0);
|
||||||
|
const contestData = ref<ContestData>({
|
||||||
|
contest: {
|
||||||
|
name: '',
|
||||||
|
startTime: '',
|
||||||
|
endTime: ''
|
||||||
|
},
|
||||||
|
users: [],
|
||||||
|
problems: [],
|
||||||
|
submissions: []
|
||||||
|
});
|
||||||
|
|
||||||
|
// 配置
|
||||||
|
const config = ref({
|
||||||
|
eachPage: 20
|
||||||
|
});
|
||||||
|
|
||||||
|
const dataFileName = ref('contest-data.json');
|
||||||
|
|
||||||
|
// 字母映射
|
||||||
|
const alphabet = ref<{ [key: string]: string }>({
|
||||||
|
'A': 'A', 'B': 'B', 'C': 'C', 'D': 'D', 'E': 'E',
|
||||||
|
'F': 'F', 'G': 'G', 'H': 'H', 'I': 'I', 'J': 'J'
|
||||||
|
});
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const problems = computed(() => {
|
||||||
|
if (contestData.value.problems.length > 0) {
|
||||||
|
return contestData.value.problems.map(p => p.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果没有定义problems，从提交记录中推断
|
||||||
|
if (!scoreboardData.value.length) return [];
|
||||||
|
const problemSet = new Set<string>();
|
||||||
|
scoreboardData.value.forEach(record => {
|
||||||
|
Object.keys(record.problems || {}).forEach(problemId => {
|
||||||
|
problemSet.add(problemId);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return Array.from(problemSet).sort();
|
||||||
|
});
|
||||||
|
|
||||||
|
const totalPages = computed(() => {
|
||||||
|
return Math.ceil((scoreboardData.value?.length || 0) / config.value.eachPage);
|
||||||
|
});
|
||||||
|
|
||||||
|
const contestStatus = computed(() => {
|
||||||
|
const contest = contestData.value.contest;
|
||||||
|
if (!contest.startTime) return '';
|
||||||
|
|
||||||
|
const now = new Date();
|
||||||
|
const start = new Date(contest.startTime);
|
||||||
|
const end = new Date(contest.endTime);
|
||||||
|
|
||||||
|
if (now < start) {
|
||||||
|
// 比赛未开始
|
||||||
|
const diff = start.getTime() - now.getTime();
|
||||||
|
const hours = Math.floor(diff / (1000 * 60 * 60));
|
||||||
|
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||||||
|
return `距离比赛开始: ${hours}小时${minutes}分钟`;
|
||||||
|
} else if (now > end) {
|
||||||
|
// 比赛已结束
|
||||||
|
return '比赛已结束';
|
||||||
|
} else {
|
||||||
|
// 比赛进行中
|
||||||
|
const elapsed = now.getTime() - start.getTime();
|
||||||
|
const remaining = end.getTime() - now.getTime();
|
||||||
|
|
||||||
|
const elapsedHours = Math.floor(elapsed / (1000 * 60 * 60));
|
||||||
|
const elapsedMinutes = Math.floor((elapsed % (1000 * 60 * 60)) / (1000 * 60));
|
||||||
|
|
||||||
|
const remainingHours = Math.floor(remaining / (1000 * 60 * 60));
|
||||||
|
const remainingMinutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
|
||||||
|
|
||||||
|
return `已进行: ${elapsedHours}:${elapsedMinutes.toString().padStart(2, '0')} | 剩余: ${remainingHours}:${remainingMinutes.toString().padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 方法
|
||||||
|
const loadContestData = async () => {
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
const response = await fetch(`/${dataFileName.value}?t=${Date.now()}`);
|
||||||
|
const data = await response.json();
|
||||||
|
contestData.value = data;
|
||||||
|
calculateScoreboard();
|
||||||
|
lastUpdate.value = new Date().toLocaleTimeString();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载比赛数据失败:', error);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const calculateScoreboard = () => {
|
||||||
|
const { users, submissions } = contestData.value;
|
||||||
|
|
||||||
|
// 计算每个用户的过题和罚时
|
||||||
|
const userStats = new Map<string, ScoreboardRecord & { problems: Map<string, ProblemStatus> }>();
|
||||||
|
|
||||||
|
users.forEach((user: User) => {
|
||||||
|
userStats.set(user.id, {
|
||||||
|
userId: user.id,
|
||||||
|
userName: user.name,
|
||||||
|
solved: 0,
|
||||||
|
penalty: 0,
|
||||||
|
problems: new Map()
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 按提交时间排序
|
||||||
|
const sortedSubmissions = [...submissions].sort((a: Submission, b: Submission) =>
|
||||||
|
new Date(a.submitTime).getTime() - new Date(b.submitTime).getTime()
|
||||||
|
);
|
||||||
|
|
||||||
|
// 计算AC和罚时
|
||||||
|
sortedSubmissions.forEach((submission: Submission) => {
|
||||||
|
const user = userStats.get(submission.userId);
|
||||||
|
if (!user) return;
|
||||||
|
|
||||||
|
const problemKey = submission.problemId;
|
||||||
|
if (!user.problems.has(problemKey)) {
|
||||||
|
user.problems.set(problemKey, {
|
||||||
|
solved: false,
|
||||||
|
penalty: 0,
|
||||||
|
submitCount: 0,
|
||||||
|
acTime: 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const problem = user.problems.get(problemKey)!;
|
||||||
|
|
||||||
|
if (!problem.solved) {
|
||||||
|
if (submission.result === 'AC') {
|
||||||
|
problem.solved = true;
|
||||||
|
problem.acTime = submission.contestTime;
|
||||||
|
problem.penalty += submission.contestTime;
|
||||||
|
user.solved++;
|
||||||
|
user.penalty += problem.penalty;
|
||||||
|
} else {
|
||||||
|
problem.penalty += 20; // 每次错误提交加20分钟罚时
|
||||||
|
problem.submitCount++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 转换为数组并排序
|
||||||
|
const scoreboard = Array.from(userStats.values()).map(user => ({
|
||||||
|
userId: user.userId,
|
||||||
|
userName: user.userName,
|
||||||
|
solved: user.solved,
|
||||||
|
penalty: user.penalty,
|
||||||
|
problems: Object.fromEntries(user.problems)
|
||||||
|
})).sort((a, b) => {
|
||||||
|
if (a.solved !== b.solved) return b.solved - a.solved;
|
||||||
|
return a.penalty - b.penalty;
|
||||||
|
});
|
||||||
|
|
||||||
|
scoreboardData.value = scoreboard;
|
||||||
|
};
|
||||||
|
|
||||||
|
const refreshScoreboard = () => {
|
||||||
|
loadContestData();
|
||||||
|
};
|
||||||
|
|
||||||
|
const calculateTotalAttempts = (record: ScoreboardRecord) => {
|
||||||
|
if (!record.problems) return 0;
|
||||||
|
return Object.values(record.problems).reduce((total, problem) => {
|
||||||
|
return total + (problem.submitCount || 0);
|
||||||
|
}, 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
const genStyle = (problem: ProblemStatus | undefined) => {
|
||||||
|
if (!problem) return { backgroundColor: 'transparent' };
|
||||||
|
|
||||||
|
if (problem.solved) {
|
||||||
|
return {
|
||||||
|
backgroundColor: '#e8f5e9',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#2e7d32',
|
||||||
|
border: '1px solid #c8e6c9'
|
||||||
|
};
|
||||||
|
} else if (problem.submitCount > 0) {
|
||||||
|
return {
|
||||||
|
backgroundColor: '#ffebee',
|
||||||
|
color: '#c62828',
|
||||||
|
border: '1px solid #ffcdd2'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
backgroundColor: '#fafafa',
|
||||||
|
border: '1px solid #e0e0e0'
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const genTime = (problem: ProblemStatus | undefined) => {
|
||||||
|
if (!problem) return '';
|
||||||
|
|
||||||
|
if (problem.solved) {
|
||||||
|
return problem.acTime.toString();
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
};
|
||||||
|
|
||||||
|
const genAttempts = (problem: ProblemStatus | undefined) => {
|
||||||
|
if (!problem) return '';
|
||||||
|
|
||||||
|
if (problem.solved && problem.submitCount > 0) {
|
||||||
|
return `+${problem.submitCount}`;
|
||||||
|
} else if (!problem.solved && problem.submitCount > 0) {
|
||||||
|
return `-${problem.submitCount}`;
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
};
|
||||||
|
|
||||||
|
const showUserDetails = (userId: string) => {
|
||||||
|
userSubmissions.value = contestData.value.submissions
|
||||||
|
.filter(sub => sub.userId === userId)
|
||||||
|
.sort((a, b) => new Date(b.submitTime).getTime() - new Date(a.submitTime).getTime());
|
||||||
|
|
||||||
|
selectedUser.value = scoreboardData.value.find(user => user.userId === userId) || null;
|
||||||
|
showDetails.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getResultText = (result: string) => {
|
||||||
|
const resultMap: { [key: string]: string } = {
|
||||||
|
'AC': 'Accepted',
|
||||||
|
'WA': 'Wrong Answer',
|
||||||
|
'TLE': 'Time Limit Exceeded',
|
||||||
|
'MLE': 'Memory Limit Exceeded',
|
||||||
|
'CE': 'Compilation Error',
|
||||||
|
'PE': 'Presentation Error'
|
||||||
|
};
|
||||||
|
return resultMap[result] || result;
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatTime = (timeString: string) => {
|
||||||
|
return new Date(timeString).toLocaleString();
|
||||||
|
};
|
||||||
|
|
||||||
|
const prevPage = () => {
|
||||||
|
if (pageIndex.value > 0) {
|
||||||
|
pageIndex.value--;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const nextPage = () => {
|
||||||
|
if (pageIndex.value < totalPages.value - 1) {
|
||||||
|
pageIndex.value++;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生命周期
|
||||||
|
let refreshInterval: number;
|
||||||
|
let timeUpdateInterval: number;
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadContestData();
|
||||||
|
refreshInterval = setInterval(loadContestData, 5000);
|
||||||
|
// 每秒更新一次比赛时间状态
|
||||||
|
timeUpdateInterval = setInterval(() => {
|
||||||
|
// 强制重新计算比赛状态
|
||||||
|
contestStatus.value;
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (refreshInterval) {
|
||||||
|
clearInterval(refreshInterval);
|
||||||
|
}
|
||||||
|
if (timeUpdateInterval) {
|
||||||
|
clearInterval(timeUpdateInterval);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.scoreboard-container {
|
||||||
|
padding: 20px;
|
||||||
|
background: #f5f7fa;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 15px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
.left-controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 8px 16px;
|
||||||
|
background: #3498db;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
background: #2980b9;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
background: #bdc3c7;
|
||||||
|
cursor: not-allowed;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contest-time {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #e74c3c;
|
||||||
|
font-size: 1em;
|
||||||
|
padding: 4px 8px;
|
||||||
|
background: #fff5f5;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #ffebee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.last-update, .file-info {
|
||||||
|
color: #7f8c8d;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr {
|
||||||
|
td, th {
|
||||||
|
text-align: center;
|
||||||
|
padding: 12px 8px;
|
||||||
|
border-bottom: 1px solid #ecf0f1;
|
||||||
|
color: #2c3e50;
|
||||||
|
|
||||||
|
// &:nth-child(1) {
|
||||||
|
// text-align: right;
|
||||||
|
// padding-right: 16px;
|
||||||
|
// font-weight: 600;
|
||||||
|
// color: #34495e;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// &:nth-child(2) {
|
||||||
|
// text-align: left;
|
||||||
|
// padding-left: 16px;
|
||||||
|
// font-weight: 500;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
text-align: left;
|
||||||
|
background-color: #cee7ff !important;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
color: white;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
th {
|
||||||
|
background-color: #34495e;
|
||||||
|
|
||||||
|
// &:nth-child(1) {
|
||||||
|
// text-align: right;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// &:nth-child(2) {
|
||||||
|
// text-align: left;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
tr {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&.clickable-row {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #f8f9fa !important;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(even) {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&.problem-cell {
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
font-size: 0.95em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.rank {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.user-name {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.solved-info {
|
||||||
|
.solved-count {
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #27ae60;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.penalty-info {
|
||||||
|
.penalty-time {
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #e74c3c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penalty-count {
|
||||||
|
font-size: 0.8em;
|
||||||
|
color: #7f8c8d;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #ecf0f1 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.problem-cell .problem-result {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.problem-cell .time-display {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.problem-cell .attempts-display {
|
||||||
|
font-size: 0.8em;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 15px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 8px 16px;
|
||||||
|
background: #3498db;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
background: #2980b9;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
background: #bdc3c7;
|
||||||
|
cursor: not-allowed;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #2c3e50;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1000;
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background: white;
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 12px;
|
||||||
|
max-width: 800px;
|
||||||
|
width: 90%;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #2c3e50;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
border-bottom: 2px solid #ecf0f1;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.submissions-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submission-item {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1.5fr 2fr 1fr;
|
||||||
|
gap: 15px;
|
||||||
|
padding: 12px 15px;
|
||||||
|
border-radius: 6px;
|
||||||
|
align-items: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid #ecf0f1;
|
||||||
|
|
||||||
|
&.result-ac {
|
||||||
|
background: #e8f5e9;
|
||||||
|
border-left: 4px solid #4caf50;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.result-wa, &.result-tle, &.result-mle, &.result-pe {
|
||||||
|
background: #ffebee;
|
||||||
|
border-left: 4px solid #f44336;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.result-ce {
|
||||||
|
background: #fff3e0;
|
||||||
|
border-left: 4px solid #ff9800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.problem-id {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-ac .result {
|
||||||
|
color: #4caf50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-wa .result, .result-tle .result, .result-mle .result, .result-pe .result {
|
||||||
|
color: #f44336;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-ce .result {
|
||||||
|
color: #ff9800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-size: 0.9em;
|
||||||
|
color: #7f8c8d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contest-time {
|
||||||
|
text-align: right;
|
||||||
|
font-weight: 600;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
color: #34495e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
background: #34495e;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1em;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #2c3e50;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式设计
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.controls {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.left-controls, .right-controls {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
font-size: 0.85em;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
padding: 8px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
th:nth-child(1), td:nth-child(1) {
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
th:nth-child(2), td:nth-child(2) {
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submission-item {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
41
src/components/HelloWorld.vue
Normal file
41
src/components/HelloWorld.vue
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
msg: string
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="greetings">
|
||||||
|
<h1 class="green">{{ msg }}</h1>
|
||||||
|
<h3>
|
||||||
|
You’ve successfully created a project with
|
||||||
|
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
|
||||||
|
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
h1 {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 2.6rem;
|
||||||
|
position: relative;
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.greetings h1,
|
||||||
|
.greetings h3 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.greetings h1,
|
||||||
|
.greetings h3 {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
472
src/components/New.vue
Normal file
472
src/components/New.vue
Normal file
@ -0,0 +1,472 @@
|
|||||||
|
<template>
|
||||||
|
<div class="submission-form-container">
|
||||||
|
<h1>人肉测评机 - 提交记录生成器</h1>
|
||||||
|
|
||||||
|
<div class="form-section">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="userId">参赛者:</label>
|
||||||
|
<select id="userId" v-model="formData.userId" @change="updateUserName">
|
||||||
|
<option value="">请选择参赛者</option>
|
||||||
|
<option v-for="user in users" :key="user.id" :value="user.id">
|
||||||
|
{{ user.name }} ({{ user.id }})
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<span v-if="selectedUserName" class="selected-user">当前选择: {{ selectedUserName }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="problemId">题目:</label>
|
||||||
|
<select id="problemId" v-model="formData.problemId">
|
||||||
|
<option value="">请选择题目</option>
|
||||||
|
<option v-for="problem in problems" :key="problem.id" :value="problem.id">
|
||||||
|
{{ problem.id }} - {{ problem.title }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="result">判题结果:</label>
|
||||||
|
<select id="result" v-model="formData.result">
|
||||||
|
<option value="">请选择结果</option>
|
||||||
|
<option value="AC">AC - Accepted</option>
|
||||||
|
<option value="WA">WA - Wrong Answer</option>
|
||||||
|
<option value="TLE">TLE - Time Limit Exceeded</option>
|
||||||
|
<option value="MLE">MLE - Memory Limit Exceeded</option>
|
||||||
|
<option value="CE">CE - Compilation Error</option>
|
||||||
|
<option value="PE">PE - Presentation Error</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="submitTime">提交时间:</label>
|
||||||
|
<input
|
||||||
|
id="submitTime"
|
||||||
|
type="datetime-local"
|
||||||
|
v-model="formData.submitTime"
|
||||||
|
/>
|
||||||
|
<button type="button" @click="setCurrentTime" class="small-btn">
|
||||||
|
设为当前时间
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="contestTime">比赛时间 (分钟):</label>
|
||||||
|
<input
|
||||||
|
id="contestTime"
|
||||||
|
type="number"
|
||||||
|
v-model.number="formData.contestTime"
|
||||||
|
min="0"
|
||||||
|
placeholder="从比赛开始计算的分钟数"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-actions">
|
||||||
|
<button @click="generateSubmission" :disabled="!isFormValid" class="generate-btn">
|
||||||
|
生成提交记录
|
||||||
|
</button>
|
||||||
|
<button @click="resetForm" class="reset-btn">重置表单</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="generatedJson" class="result-section">
|
||||||
|
<h2>生成的提交记录</h2>
|
||||||
|
<div class="json-display">
|
||||||
|
<pre>{{ generatedJson }}</pre>
|
||||||
|
</div>
|
||||||
|
<div class="copy-actions">
|
||||||
|
<button @click="copyToClipboard" class="copy-btn">复制到剪贴板</button>
|
||||||
|
<span v-if="copySuccess" class="copy-success">✓ 已复制!</span>
|
||||||
|
</div>
|
||||||
|
<div class="instructions">
|
||||||
|
<p>请将上面的 JSON 内容复制给管理员，管理员会手动更新数据文件。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="placeholder">
|
||||||
|
<p>填写表单并点击"生成提交记录"按钮</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-section">
|
||||||
|
<h3>使用说明</h3>
|
||||||
|
<ul>
|
||||||
|
<li>选择参赛者和题目</li>
|
||||||
|
<li>选择判题结果</li>
|
||||||
|
<li>设置提交时间和比赛时间（从比赛开始计算的分钟数）</li>
|
||||||
|
<li>点击"生成提交记录"按钮</li>
|
||||||
|
<li>复制生成的 JSON 字符串给管理员</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed, onMounted } from 'vue';
|
||||||
|
|
||||||
|
interface User {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Problem {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SubmissionForm {
|
||||||
|
userId: string;
|
||||||
|
problemId: string;
|
||||||
|
result: string;
|
||||||
|
submitTime: string;
|
||||||
|
contestTime: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式数据
|
||||||
|
const users = ref<User[]>([]);
|
||||||
|
const problems = ref<Problem[]>([]);
|
||||||
|
const formData = ref<SubmissionForm>({
|
||||||
|
userId: '',
|
||||||
|
problemId: '',
|
||||||
|
result: '',
|
||||||
|
submitTime: '',
|
||||||
|
contestTime: null
|
||||||
|
});
|
||||||
|
const generatedJson = ref('');
|
||||||
|
const copySuccess = ref(false);
|
||||||
|
const selectedUserName = ref('');
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const isFormValid = computed(() => {
|
||||||
|
return (
|
||||||
|
formData.value.userId &&
|
||||||
|
formData.value.problemId &&
|
||||||
|
formData.value.result &&
|
||||||
|
formData.value.submitTime &&
|
||||||
|
formData.value.contestTime !== null
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 方法
|
||||||
|
const loadContestData = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/contest-data.json');
|
||||||
|
const data = await response.json();
|
||||||
|
users.value = data.users || [];
|
||||||
|
problems.value = data.problems || [];
|
||||||
|
|
||||||
|
// 设置默认时间为当前时间
|
||||||
|
setCurrentTime();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载比赛数据失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const setCurrentTime = () => {
|
||||||
|
const now = new Date();
|
||||||
|
// 转换为本地日期时间字符串，格式为 YYYY-MM-DDTHH:mm
|
||||||
|
const year = now.getFullYear();
|
||||||
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(now.getDate()).padStart(2, '0');
|
||||||
|
const hours = String(now.getHours()).padStart(2, '0');
|
||||||
|
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||||
|
|
||||||
|
formData.value.submitTime = `${year}-${month}-${day}T${hours}:${minutes}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateUserName = () => {
|
||||||
|
const user = users.value.find(u => u.id === formData.value.userId);
|
||||||
|
selectedUserName.value = user ? user.name : '';
|
||||||
|
};
|
||||||
|
|
||||||
|
const generateSubmission = () => {
|
||||||
|
// 生成唯一的 ID（简单的时间戳方式）
|
||||||
|
const id = Date.now();
|
||||||
|
|
||||||
|
// 格式化提交时间（添加时区信息）
|
||||||
|
const submitTime = new Date(formData.value.submitTime).toISOString();
|
||||||
|
|
||||||
|
const submission = {
|
||||||
|
id,
|
||||||
|
userId: formData.value.userId,
|
||||||
|
problemId: formData.value.problemId,
|
||||||
|
result: formData.value.result,
|
||||||
|
submitTime,
|
||||||
|
contestTime: formData.value.contestTime
|
||||||
|
};
|
||||||
|
|
||||||
|
generatedJson.value = JSON.stringify(submission, null, 2);
|
||||||
|
copySuccess.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
formData.value = {
|
||||||
|
userId: '',
|
||||||
|
problemId: '',
|
||||||
|
result: '',
|
||||||
|
submitTime: '',
|
||||||
|
contestTime: null
|
||||||
|
};
|
||||||
|
generatedJson.value = '';
|
||||||
|
selectedUserName.value = '';
|
||||||
|
setCurrentTime();
|
||||||
|
};
|
||||||
|
|
||||||
|
const copyToClipboard = async () => {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(generatedJson.value);
|
||||||
|
copySuccess.value = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
copySuccess.value = false;
|
||||||
|
}, 2000);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('复制失败:', err);
|
||||||
|
// 降级方案
|
||||||
|
const textArea = document.createElement('textarea');
|
||||||
|
textArea.value = generatedJson.value;
|
||||||
|
document.body.appendChild(textArea);
|
||||||
|
textArea.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
document.body.removeChild(textArea);
|
||||||
|
copySuccess.value = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
copySuccess.value = false;
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生命周期
|
||||||
|
onMounted(() => {
|
||||||
|
loadContestData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.submission-form-container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
background: #f8f9fa;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-section {
|
||||||
|
background: white;
|
||||||
|
padding: 25px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #34495e;
|
||||||
|
}
|
||||||
|
|
||||||
|
select, input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border: 2px solid #e0e0e0;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 16px;
|
||||||
|
transition: border-color 0.3s ease;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #3498db;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 20px;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-user {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 10px;
|
||||||
|
color: #27ae60;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-btn {
|
||||||
|
padding: 6px 12px;
|
||||||
|
margin-top: 8px;
|
||||||
|
background: #95a5a6;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.9em;
|
||||||
|
transition: background 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #7f8c8d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
margin-top: 25px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 12px 24px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.generate-btn {
|
||||||
|
background: #3498db;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
background: #2980b9;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
background: #bdc3c7;
|
||||||
|
cursor: not-allowed;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-btn {
|
||||||
|
background: #e74c3c;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #c0392b;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-section {
|
||||||
|
background: white;
|
||||||
|
padding: 25px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #2c3e50;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.json-display {
|
||||||
|
background: #2c3e50;
|
||||||
|
color: #ecf0f1;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 6px;
|
||||||
|
overflow-x: auto;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
|
||||||
|
pre {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
|
||||||
|
.copy-btn {
|
||||||
|
padding: 10px 20px;
|
||||||
|
background: #27ae60;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: background 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #219653;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-success {
|
||||||
|
color: #27ae60;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.instructions {
|
||||||
|
background: #e8f4fd;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 6px;
|
||||||
|
border-left: 4px solid #3498db;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
color: #2c3e50;
|
||||||
|
font-size: 0.95em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
background: white;
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
text-align: center;
|
||||||
|
color: #7f8c8d;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-section {
|
||||||
|
background: white;
|
||||||
|
padding: 25px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: #2c3e50;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-left: 20px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #34495e;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
94
src/components/TheWelcome.vue
Normal file
94
src/components/TheWelcome.vue
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import WelcomeItem from './WelcomeItem.vue'
|
||||||
|
import DocumentationIcon from './icons/IconDocumentation.vue'
|
||||||
|
import ToolingIcon from './icons/IconTooling.vue'
|
||||||
|
import EcosystemIcon from './icons/IconEcosystem.vue'
|
||||||
|
import CommunityIcon from './icons/IconCommunity.vue'
|
||||||
|
import SupportIcon from './icons/IconSupport.vue'
|
||||||
|
|
||||||
|
const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<DocumentationIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Documentation</template>
|
||||||
|
|
||||||
|
Vue’s
|
||||||
|
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
||||||
|
provides you with all information you need to get started.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<ToolingIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Tooling</template>
|
||||||
|
|
||||||
|
This project is served and bundled with
|
||||||
|
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
|
||||||
|
recommended IDE setup is
|
||||||
|
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
|
||||||
|
+
|
||||||
|
<a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener">Vue - Official</a>. If
|
||||||
|
you need to test your components and web pages, check out
|
||||||
|
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
|
||||||
|
and
|
||||||
|
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
|
||||||
|
/
|
||||||
|
<a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
More instructions are available in
|
||||||
|
<a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
|
||||||
|
>.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<EcosystemIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Ecosystem</template>
|
||||||
|
|
||||||
|
Get official tools and libraries for your project:
|
||||||
|
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
|
||||||
|
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
||||||
|
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
||||||
|
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
||||||
|
you need more resources, we suggest paying
|
||||||
|
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
|
||||||
|
a visit.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<CommunityIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Community</template>
|
||||||
|
|
||||||
|
Got stuck? Ask your question on
|
||||||
|
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
|
||||||
|
(our official Discord server), or
|
||||||
|
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
||||||
|
>StackOverflow</a
|
||||||
|
>. You should also follow the official
|
||||||
|
<a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
|
||||||
|
Bluesky account or the
|
||||||
|
<a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
||||||
|
X account for latest news in the Vue world.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<SupportIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Support Vue</template>
|
||||||
|
|
||||||
|
As an independent project, Vue relies on community backing for its sustainability. You can help
|
||||||
|
us by
|
||||||
|
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
|
||||||
|
</WelcomeItem>
|
||||||
|
</template>
|
||||||
87
src/components/WelcomeItem.vue
Normal file
87
src/components/WelcomeItem.vue
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
<template>
|
||||||
|
<div class="item">
|
||||||
|
<i>
|
||||||
|
<slot name="icon"></slot>
|
||||||
|
</i>
|
||||||
|
<div class="details">
|
||||||
|
<h3>
|
||||||
|
<slot name="heading"></slot>
|
||||||
|
</h3>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.item {
|
||||||
|
margin-top: 2rem;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
place-content: center;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
color: var(--color-heading);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.item {
|
||||||
|
margin-top: 0;
|
||||||
|
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
top: calc(50% - 25px);
|
||||||
|
left: -26px;
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
background: var(--color-background);
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:before {
|
||||||
|
content: ' ';
|
||||||
|
border-left: 1px solid var(--color-border);
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: calc(50% + 25px);
|
||||||
|
height: calc(50% - 25px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:after {
|
||||||
|
content: ' ';
|
||||||
|
border-left: 1px solid var(--color-border);
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: calc(50% + 25px);
|
||||||
|
height: calc(50% - 25px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:first-of-type:before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:last-of-type:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
7
src/components/icons/IconCommunity.vue
Normal file
7
src/components/icons/IconCommunity.vue
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
7
src/components/icons/IconDocumentation.vue
Normal file
7
src/components/icons/IconDocumentation.vue
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
7
src/components/icons/IconEcosystem.vue
Normal file
7
src/components/icons/IconEcosystem.vue
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
7
src/components/icons/IconSupport.vue
Normal file
7
src/components/icons/IconSupport.vue
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
19
src/components/icons/IconTooling.vue
Normal file
19
src/components/icons/IconTooling.vue
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
aria-hidden="true"
|
||||||
|
role="img"
|
||||||
|
class="iconify iconify--mdi"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
preserveAspectRatio="xMidYMid meet"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
||||||
|
fill="currentColor"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
6
src/main.ts
Normal file
6
src/main.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import './assets/main.css'
|
||||||
|
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
||||||
12
tsconfig.app.json
Normal file
12
tsconfig.app.json
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
|
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||||
|
"exclude": ["src/**/__tests__/*"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
11
tsconfig.json
Normal file
11
tsconfig.json
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.node.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.app.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
19
tsconfig.node.json
Normal file
19
tsconfig.node.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"extends": "@tsconfig/node22/tsconfig.json",
|
||||||
|
"include": [
|
||||||
|
"vite.config.*",
|
||||||
|
"vitest.config.*",
|
||||||
|
"cypress.config.*",
|
||||||
|
"nightwatch.conf.*",
|
||||||
|
"playwright.config.*",
|
||||||
|
"eslint.config.*"
|
||||||
|
],
|
||||||
|
"compilerOptions": {
|
||||||
|
"noEmit": true,
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"types": ["node"]
|
||||||
|
}
|
||||||
|
}
|
||||||
18
vite.config.ts
Normal file
18
vite.config.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
vueDevTools(),
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user