feat(competition): 新增比赛活动管理功能模块
实现比赛活动的创建、编辑、详情查看功能，包括基础信息配置、分组管理、题库配置和硬件绑定 添加比赛列表页面的路由跳转逻辑，优化卡片点击交互 完善比赛详情页的编辑状态管理，支持基础信息和题包配置的修改 新增本地SVG图标资源，更新系统Logo组件样式
This commit is contained in:
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -10,7 +10,7 @@
|
||||
|
||||
// 3. 必须：强制所有相关文件使用 ESLint 插件作为格式化器
|
||||
"[vue]": {
|
||||
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
|
||||
"editor.defaultFormatter": "Vue.volar"
|
||||
},
|
||||
"[typescript]": {
|
||||
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
|
||||
|
||||
@ -8,12 +8,13 @@ import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
|
||||
|
||||
// 配置 unplugin 插件
|
||||
export function setupUnplugin(viteEnv: Env.ImportMeta) {
|
||||
const { VITE_ICON_PREFIX, VITE_ICON_LOCAL_PREFIX } = viteEnv
|
||||
|
||||
const localIconPath = path.join(process.cwd(), 'src/assets/svg-icon')
|
||||
|
||||
/** The name of the local icon collection */
|
||||
// 本地图标集合名称
|
||||
const collectionName = VITE_ICON_LOCAL_PREFIX.replace(`${VITE_ICON_PREFIX}-`, '')
|
||||
|
||||
const plugins: PluginOption[] = [
|
||||
|
||||
1
apps/admin/src/assets/svg-icon/back.svg
Normal file
1
apps/admin/src/assets/svg-icon/back.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1768804003906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9671" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M903.7503125 488.3609375h-742.153125l359.50125-359.50125c8.728125-8.728125 8.728125-22.8675 0-31.5946875-8.728125-8.728125-22.865625-8.728125-31.59375 0L114.4765625 472.28c-21.4265625 21.448125-21.4265625 56.3596875 0.01125 77.80875l374.960625 374.9503125c4.363125 4.363125 10.0809375 6.545625 15.7978125 6.545625s11.4328125-2.1825 15.7978125-6.545625c8.728125-8.728125 8.728125-22.8675 0-31.5946875L160.6475 533.046875h743.1028125c12.3496875 0 22.3434375-9.99375 22.3434375-22.3434375s-9.99375-22.3434375-22.3434375-22.3434375z" fill="#3A3A3A" p-id="9672"></path></svg>
|
||||
|
After Width: | Height: | Size: 903 B |
1
apps/admin/src/assets/svg-icon/read-logo.svg
Normal file
1
apps/admin/src/assets/svg-icon/read-logo.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1768792897611" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3691" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#33C7FC" p-id="3692"></path><path d="M324.408781 655.018925C505.290126 655.018925 651.918244 508.387706 651.918244 327.509463c0-152.138029-103.733293-280.047334-244.329811-316.853972C205.813923 52.463528 47.497011 213.017581 8.987325 415.981977 47.587706 553.880127 174.183098 655.018925 324.408781 655.018925z" fill="#FFFFFF" fill-opacity=".2" p-id="3693"></path><path d="M512 1024c282.766631 0 512-229.233369 512-512 0-31.765705-2.891385-62.853911-8.433853-93.018889C928.057169 336.0999 809.874701 285.26268 679.824375 285.26268c-269.711213 0-488.357305 218.645317-488.357305 488.357305 0 54.959576 9.084221 107.802937 25.822474 157.10377C300.626556 989.489417 402.283167 1024 512 1024z" fill="#FFFFFF" fill-opacity=".15" p-id="3694"></path><path d="M732.535958 756.566238c36.389596 0 65.889478-29.499882 65.889477-65.889478 0 36.389596 29.502983 65.889478 65.889478 65.889478-17.053747 0-65.889478 29.502983-65.889478 65.889477 0-36.386495-29.499882-65.889478-65.889477-65.889477zM159.685087 247.279334c25.686819 0 46.51022-20.8234 46.51022-46.51022 0 25.686819 20.8234 46.51022 46.510219 46.51022-12.03607 0-46.51022 20.8234-46.510219 46.510219 0-25.686819-20.8234-46.51022-46.51022-46.510219z" fill="#FFFFFF" fill-opacity=".5" p-id="3695"></path><path d="M206.195307 333.32324c8.562531 0 15.503407-6.940875 15.503406-15.503407 0 8.562531 6.940875 15.503407 15.503407 15.503407-4.012282 0-15.503407 6.940875-15.503407 15.503406 0-8.562531-6.940875-15.503407-15.503406-15.503406z" fill="#FFFFFF" fill-opacity=".3" p-id="3696"></path><path d="M685.453662 247.279334c5.526964 0 11.101989 0.240303 16.652984 0.768969a34.002071 34.002071 0 0 1 30.758759 34.026876v383.403119c0 18.407195-14.466229 33.402089-32.681181 34.074937-32.897453 1.225544-60.796609 5.647116-83.601344 13.312776-29.917699 10.092718-59.042398 28.355731-87.205887 54.765008V338.882762c20.810223-36.02139 49.934922-61.829911 87.205887-77.497654A178.026392 178.026392 0 0 1 685.453662 247.279334z m81.390559 426.273138v-349.880878c8.961744 0 17.6359 3.580512 23.96129 10.020627 6.317638 6.440115 9.945435 15.091016 9.945435 24.126401v347.117396c0 27.130186-16.867706 71.009478-67.83748 66.587906-35.901238-3.051846-38.232176-4.349481-68.534359-3.844845-29.653366 0.528666-71.17769-0.504636-108.328503 8.266417 20.810223-17.494044 51.232557-29.845608 71.369932-34.122998 20.113344-4.373511 45.224987-6.247873 74.734171-7.353266 37.487237-1.369726 64.689514-29.725456 64.689514-60.91676zM339.369569 247.279334c23.453553 0 46.378441 4.757995 68.870782 14.105774 37.246934 15.619682 66.395664 41.476263 87.205887 77.497654v428.796317c-28.163488-26.433308-57.312218-44.720351-87.229917-54.740978-22.780706-7.593569-50.6318-12.087231-83.577314-13.264714a33.930755 33.930755 0 0 1-32.60909-34.122998V282.075179c0-17.638226 13.288745-32.320727 30.758758-33.954785 5.478904-0.576727 11.053929-0.84106 16.580894-0.84106zM258.00304 673.552472c0 28.139458 20.666041 59.282701 65.362362 60.91676 29.605305 1.105393 48.06056 4.349481 74.109384 7.353266 26.024793 2.907664 51.088375 16.701045 71.898598 34.122998-37.150813-8.771052-75.575231-8.266416-108.92926-8.266417-26.217036 0-30.806819 3.844845-68.534359 3.844845-44.504079 0-67.885541-40.515052-67.885541-66.563876v-347.237547c0-18.86377 15.187137-34.122998 33.906725-34.122998v349.928939h0.072091v0.02403z" fill="#FFFFFF" p-id="3697"></path></svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
@ -1,150 +1,17 @@
|
||||
<template>
|
||||
<div class="app-logo">
|
||||
<div class="app-logo flex items-center justify-center rounded-xl bg-blue-600 shadow-lg">
|
||||
<svg
|
||||
width="100%"
|
||||
height="100%"
|
||||
version="1.1"
|
||||
viewBox="0 0 1000 1000"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
t="1768793407303" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="6646" width="36" height="40"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="M 200,866 C 100,866 50,779.4 100,692.8 L 200,519.6 C 220,485 240,490 265,499.6 S 360,542.68 360,542.68 C 480.5,601 498,642.5 500,720 C 498,811 462,856 420,866"
|
||||
fill="url(#LinearGradient)"
|
||||
fill-rule="nonzero"
|
||||
opacity="1"
|
||||
stroke="none"
|
||||
/>
|
||||
<path
|
||||
d="M 420,866 C 455,861 478,846 500,827 C 614,696 615,597 500,517 C 394,444 333,374 380,207.82 L 260,415.67 C 240.22,450 254.37,465.1 275.28,481.79 S 360,542.68 360,542.68 C 480.5,601 498,642.5 500,720 C 498,811 462,856 420,866"
|
||||
fill="url(#LinearGradient_2)"
|
||||
fill-rule="nonzero"
|
||||
opacity="1"
|
||||
stroke="none"
|
||||
/>
|
||||
<path
|
||||
d="M 500,517 C 394,444 333,374 380,207.82 L 400,173.2 C 367,295 421,350 603,428 C 572,440 524,474 500,517"
|
||||
fill="url(#LinearGradient_3)"
|
||||
fill-rule="nonzero"
|
||||
opacity="1"
|
||||
stroke="none"
|
||||
/>
|
||||
<path
|
||||
d="M 500,827 L 660,660 C 738,589 710,482 603,428 C 572,440 524,474 500,517 C 615,597 614,696 500,827"
|
||||
fill="url(#LinearGradient_4)"
|
||||
fill-rule="nonzero"
|
||||
opacity="1"
|
||||
stroke="none"
|
||||
/>
|
||||
<path
|
||||
d="M 400,173.2 C 367,295 421,350 603,428 C 690,389, 750,445 788,500 L 600,173.2 C 550,86.6 450,86.6 400,173.2"
|
||||
fill="url(#LinearGradient_5)"
|
||||
fill-rule="nonzero"
|
||||
opacity="1"
|
||||
stroke="none"
|
||||
/>
|
||||
<path
|
||||
d="M 500,827 L 660,660 C 738,589 710,482 603,428 C 690,389, 750,445 788,500 C 816,554 797,606 750,640 L 500,827"
|
||||
fill="url(#LinearGradient_6)"
|
||||
fill-rule="nonzero"
|
||||
opacity="1"
|
||||
stroke="none"
|
||||
/>
|
||||
<path
|
||||
d="M 788,500 C 816,554 797,606 750,640 L 500,827 C 497,851 513,862 540,866 L 800,866 C 900,866 950,779.4 900,692.8 L 788,500"
|
||||
fill="url(#LinearGradient_7)"
|
||||
fill-rule="nonzero"
|
||||
opacity="1"
|
||||
stroke="none"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="LinearGradient"
|
||||
gradientTransform="matrix(104.391 -73.3432 73.3432 104.391 277.441 710.122)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="0"
|
||||
x2="1"
|
||||
y1="0"
|
||||
y2="0"
|
||||
>
|
||||
<stop offset="0" stop-color="var(--logo-color-700)" />
|
||||
<stop offset="1" stop-color="var(--logo-color-600)" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="LinearGradient_2"
|
||||
gradientTransform="matrix(-173.747 557.324 -557.324 -173.747 508.829 258.172)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="0"
|
||||
x2="1"
|
||||
y1="0"
|
||||
y2="0"
|
||||
>
|
||||
<stop offset="0" stop-color="var(--logo-color-300)" />
|
||||
<stop offset="1" stop-color="var(--logo-color-500)" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="LinearGradient_3"
|
||||
gradientTransform="matrix(157.951 295.666 -295.666 157.951 382.944 193.642)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="0"
|
||||
x2="1"
|
||||
y1="0"
|
||||
y2="0"
|
||||
>
|
||||
<stop offset="0" stop-color="var(--logo-color-600)" />
|
||||
<stop offset="1" stop-color="var(--logo-color-700)" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="LinearGradient_4"
|
||||
gradientTransform="matrix(-44.3023 219.578 -219.578 -44.3023 619.69 469.652)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="0"
|
||||
x2="1"
|
||||
y1="0"
|
||||
y2="0"
|
||||
>
|
||||
<stop offset="0" stop-color="var(--logo-color-400)" />
|
||||
<stop offset="1" stop-color="var(--logo-color-600)" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="LinearGradient_5"
|
||||
gradientTransform="matrix(125.52 334.256 -334.256 125.52 539.723 235.139)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="0"
|
||||
x2="1"
|
||||
y1="0"
|
||||
y2="0"
|
||||
>
|
||||
<stop offset="0" stop-color="var(--logo-color-500)" />
|
||||
<stop offset="1" stop-color="var(--logo-color-300)" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="LinearGradient_6"
|
||||
gradientTransform="matrix(-241.23 357.206 -357.206 -241.23 754.054 449.312)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="0"
|
||||
x2="1"
|
||||
y1="0"
|
||||
y2="0"
|
||||
>
|
||||
<stop offset="0" stop-color="var(--logo-color-300)" />
|
||||
<stop offset="1" stop-color="var(--logo-color-500)" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="LinearGradient_7"
|
||||
gradientTransform="matrix(125.978 210.065 -210.065 125.978 596.433 613.665)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="0"
|
||||
x2="1"
|
||||
y1="0"
|
||||
y2="0"
|
||||
>
|
||||
<stop offset="0" stop-color="var(--logo-color-700)" />
|
||||
<stop offset="1" stop-color="var(--logo-color-600)" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
d="M1014.375424 70.0416a26.2144 26.2144 0 0 0-21.9136-4.7104L590.849024 159.744a352.256 352.256 0 0 1-160.768 0L31.540224 65.3312a26.2144 26.2144 0 0 0-21.9136 4.7104A25.6 25.6 0 0 0 0.001024 90.112v642.048a147.8656 147.8656 0 0 0 114.4832 144.5888l305.3568 72.0896a404.0704 404.0704 0 0 0 184.32 0l305.3568-72.0896A147.8656 147.8656 0 0 0 1024.001024 732.16V90.112a25.6 25.6 0 0 0-9.6256-20.0704z m-888.2176 757.76a96.8704 96.8704 0 0 1-74.9568-95.6416V122.88l367.0016 86.8352c5.7344 1.4336 11.264 2.4576 16.9984 3.4816v686.2848a17.6128 17.6128 0 0 1-3.4816 0z m360.2432 79.872V219.3408a427.008 427.008 0 0 0 51.2 0v687.5136a355.9424 355.9424 0 0 1-51.2 0z m486.4-175.5136a96.8704 96.8704 0 0 1-74.9568 94.8224l-305.5616 71.8848a17.6128 17.6128 0 0 1-3.4816 0V212.3776l13.7216-2.8672L972.801024 122.88z"
|
||||
fill="#ffffff" p-id="6647"
|
||||
/>
|
||||
<path
|
||||
d="M368.641024 292.2496L130.868224 236.3392A25.6 25.6 0 1 0 119.194624 286.72l236.7488 56.1152a27.8528 27.8528 0 0 0 5.9392 0 25.6 25.6 0 0 0 6.7584-50.5856zM368.641024 435.6096L130.868224 379.6992A25.6 25.6 0 1 0 119.194624 430.08l236.7488 56.1152a27.8528 27.8528 0 0 0 5.9392 0 25.6 25.6 0 0 0 6.7584-50.5856z"
|
||||
fill="#ffffff" p-id="6648"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -7,15 +7,15 @@ defineOptions({ name: 'SvgIcon', inheritAttrs: false })
|
||||
const props = defineProps<Props>()
|
||||
|
||||
/**
|
||||
* Props
|
||||
* 属性
|
||||
*
|
||||
* - Support iconify and local svg icon
|
||||
* - If icon and localIcon are passed at the same time, localIcon will be rendered first
|
||||
* - 支持 iconify 和本地 svg 图标
|
||||
* - 如果同时传递了 icon 和 localIcon，将优先渲染 localIcon
|
||||
*/
|
||||
interface Props {
|
||||
/** Iconify icon name */
|
||||
/** Iconify 图标名称 */
|
||||
icon?: string
|
||||
/** Local svg icon name */
|
||||
/** 本地 svg 图标名称 */
|
||||
localIcon?: string
|
||||
}
|
||||
|
||||
@ -26,8 +26,9 @@ const bindAttrs = computed<{ class: string, style: string }>(() => ({
|
||||
style: (attrs.style as string) || '',
|
||||
}))
|
||||
|
||||
// 本地 svg 图标 id 格式：#icon-local-{icon}
|
||||
const symbolId = computed(() => {
|
||||
const { VITE_ICON_LOCAL_PREFIX: prefix } = import.meta.env
|
||||
const { VITE_ICON_LOCAL_PREFIX: prefix } = import.meta.env // icon-local
|
||||
|
||||
const defaultLocalIcon = 'no-icon'
|
||||
|
||||
@ -36,17 +37,19 @@ const symbolId = computed(() => {
|
||||
return `#${prefix}-${icon}`
|
||||
})
|
||||
|
||||
/** If localIcon is passed, render localIcon first */
|
||||
/** 如果传递了 localIcon，则优先渲染 localIcon */
|
||||
const renderLocalIcon = computed(() => props.localIcon || !props.icon)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 渲染本地 svg 图标 -->
|
||||
<template v-if="renderLocalIcon">
|
||||
<svg aria-hidden="true" width="1em" height="1em" v-bind="bindAttrs">
|
||||
<use :xlink:href="symbolId" fill="currentColor" />
|
||||
</svg>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- 渲染 iconify 图标 -->
|
||||
<Icon v-if="icon" :icon="icon" v-bind="bindAttrs" />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -2,13 +2,14 @@ import type { RouteKey } from '@elegant-router/types'
|
||||
import type { RouteLocationRaw } from 'vue-router'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { router as globalRouter } from '@/router'
|
||||
import { useRouteStore } from '@/store/modules/route'
|
||||
|
||||
/**
|
||||
* Router push
|
||||
* 路由跳转
|
||||
*
|
||||
* Jump to the specified route, it can replace function router.push
|
||||
* 跳转到指定路由，可替换函数 router.push
|
||||
*
|
||||
* @param inSetup Whether is in vue script setup
|
||||
* @param inSetup 是否在 vue script setup 中
|
||||
*/
|
||||
export function useRouterPush(inSetup = true) {
|
||||
const router = inSetup ? useRouter() : globalRouter
|
||||
@ -36,10 +37,27 @@ export function useRouterPush(inSetup = true) {
|
||||
return routerPush(routeLocation)
|
||||
}
|
||||
|
||||
/**
|
||||
* 路由跳转并携带 meta 中的 query 参数
|
||||
*
|
||||
* @param key 路由名称
|
||||
*/
|
||||
function routerPushByKeyWithMetaQuery(key: RouteKey) {
|
||||
const routeStore = useRouteStore()
|
||||
const allRoutes = router.getRoutes()
|
||||
const meta = allRoutes.find(item => item.name === key)?.meta || null
|
||||
|
||||
const menu = routeStore.menus.find(item => item.key === key)
|
||||
if (menu?.children && menu.children.length > 0) {
|
||||
const visibleChildren = menu.children.filter((child) => {
|
||||
const childRoute = allRoutes.find(r => r.name === child.key)
|
||||
return childRoute && !childRoute.meta?.hideInMenu
|
||||
})
|
||||
if (visibleChildren.length === 1) {
|
||||
return routerPushByKey(visibleChildren[0].key as RouteKey)
|
||||
}
|
||||
}
|
||||
|
||||
const query: Record<string, string> = {}
|
||||
|
||||
meta?.query?.forEach((item) => {
|
||||
@ -54,10 +72,10 @@ export function useRouterPush(inSetup = true) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigate to login page
|
||||
* 跳转到登录页
|
||||
*
|
||||
* @param loginModule The login module
|
||||
* @param redirectUrl The redirect url, if not specified, it will be the current route fullPath
|
||||
* @param loginModule 登录模块
|
||||
* @param redirectUrl 重定向地址，若未指定，则为当前路由 fullPath
|
||||
*/
|
||||
async function toLogin(loginModule?: UnionKey.LoginModule, redirectUrl?: string) {
|
||||
const module = loginModule || 'pwd-login'
|
||||
@ -78,7 +96,7 @@ export function useRouterPush(inSetup = true) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle login module
|
||||
* 切换登录模块
|
||||
*
|
||||
* @param module
|
||||
*/
|
||||
@ -89,9 +107,9 @@ export function useRouterPush(inSetup = true) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Redirect from login
|
||||
* 从登录页重定向
|
||||
*
|
||||
* @param [needRedirect] Whether to redirect after login. Default is `true`
|
||||
* @param [needRedirect] 登录后是否需要重定向。默认为 `true`
|
||||
*/
|
||||
async function redirectFromLogin(needRedirect = true) {
|
||||
const redirect = route.value.query?.redirect as string
|
||||
|
||||
@ -55,8 +55,8 @@ export const generatedRoutes: GeneratedRoute[] = [
|
||||
meta: {
|
||||
title: 'competition_competition-add',
|
||||
i18nKey: 'route.competition_competition-add',
|
||||
multiTab: true,// 新增选项卡
|
||||
hideInMenu: true,// 隐藏在菜单中
|
||||
multiTab: true,
|
||||
hideInMenu: true
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -66,8 +66,8 @@ export const generatedRoutes: GeneratedRoute[] = [
|
||||
meta: {
|
||||
title: 'competition_competition-detail',
|
||||
i18nKey: 'route.competition_competition-detail',
|
||||
multiTab: true,// 新增选项卡
|
||||
hideInMenu: true,// 隐藏在菜单中
|
||||
multiTab: true,
|
||||
hideInMenu: true
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
12
apps/admin/src/typings/components.d.ts
vendored
12
apps/admin/src/typings/components.d.ts
vendored
@ -15,6 +15,7 @@ declare module 'vue' {
|
||||
AppProvider: typeof import('./../components/common/app-provider.vue')['default']
|
||||
BetterScroll: typeof import('./../components/custom/better-scroll.vue')['default']
|
||||
ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']
|
||||
copy: typeof import('./../components/custom/wave-bg copy.vue')['default']
|
||||
CountTo: typeof import('./../components/custom/count-to.vue')['default']
|
||||
DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
|
||||
ExceptionBase: typeof import('./../components/common/exception-base.vue')['default']
|
||||
@ -23,7 +24,11 @@ declare module 'vue' {
|
||||
IconAntDesignReloadOutlined: typeof import('~icons/ant-design/reload-outlined')['default']
|
||||
IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
|
||||
IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
|
||||
IconIcBaselineArrowBack: typeof import('~icons/ic/baseline-arrow-back')['default']
|
||||
IconIcRoundPlus: typeof import('~icons/ic/round-plus')['default']
|
||||
IconLocalActivity: typeof import('~icons/local/activity')['default']
|
||||
IconLocalBanner: typeof import('~icons/local/banner')['default']
|
||||
IconLocalReadLogo: typeof import('~icons/local/read-logo')['default']
|
||||
IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
|
||||
IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
|
||||
IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc')['default']
|
||||
@ -51,6 +56,7 @@ declare module 'vue' {
|
||||
NFormItem: typeof import('naive-ui')['NFormItem']
|
||||
NGi: typeof import('naive-ui')['NGi']
|
||||
NGrid: typeof import('naive-ui')['NGrid']
|
||||
NIcon: typeof import('naive-ui')['NIcon']
|
||||
NInput: typeof import('naive-ui')['NInput']
|
||||
NInputGroup: typeof import('naive-ui')['NInputGroup']
|
||||
NInputNumber: typeof import('naive-ui')['NInputNumber']
|
||||
@ -91,6 +97,7 @@ declare global {
|
||||
const AppProvider: typeof import('./../components/common/app-provider.vue')['default']
|
||||
const BetterScroll: typeof import('./../components/custom/better-scroll.vue')['default']
|
||||
const ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']
|
||||
const copy: typeof import('./../components/custom/wave-bg copy.vue')['default']
|
||||
const CountTo: typeof import('./../components/custom/count-to.vue')['default']
|
||||
const DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
|
||||
const ExceptionBase: typeof import('./../components/common/exception-base.vue')['default']
|
||||
@ -99,7 +106,11 @@ declare global {
|
||||
const IconAntDesignReloadOutlined: typeof import('~icons/ant-design/reload-outlined')['default']
|
||||
const IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
|
||||
const IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
|
||||
const IconIcBaselineArrowBack: typeof import('~icons/ic/baseline-arrow-back')['default']
|
||||
const IconIcRoundPlus: typeof import('~icons/ic/round-plus')['default']
|
||||
const IconLocalActivity: typeof import('~icons/local/activity')['default']
|
||||
const IconLocalBanner: typeof import('~icons/local/banner')['default']
|
||||
const IconLocalReadLogo: typeof import('~icons/local/read-logo')['default']
|
||||
const IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
|
||||
const IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
|
||||
const IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc')['default']
|
||||
@ -127,6 +138,7 @@ declare global {
|
||||
const NFormItem: typeof import('naive-ui')['NFormItem']
|
||||
const NGi: typeof import('naive-ui')['NGi']
|
||||
const NGrid: typeof import('naive-ui')['NGrid']
|
||||
const NIcon: typeof import('naive-ui')['NIcon']
|
||||
const NInput: typeof import('naive-ui')['NInput']
|
||||
const NInputGroup: typeof import('naive-ui')['NInputGroup']
|
||||
const NInputNumber: typeof import('naive-ui')['NInputNumber']
|
||||
|
||||
@ -56,6 +56,7 @@ const bgColor = computed(() => {
|
||||
<div class="w-400px lt-sm:w-300px">
|
||||
<header class="flex-y-center justify-between">
|
||||
<SystemLogo class="size-64px lt-sm:size-48px" />
|
||||
<!-- <icon-local-read-logo class="text-64px text-success" /> -->
|
||||
<h3 class="text-28px text-primary font-500 lt-sm:text-22px">
|
||||
{{ $t('system.title') }}
|
||||
</h3>
|
||||
|
||||
@ -1,19 +1,69 @@
|
||||
<script setup lang="ts">
|
||||
import { NButton, NSpace } from 'naive-ui'
|
||||
import { NButton, NCard, NTabPane, NTabs } from 'naive-ui'
|
||||
import { ref } from 'vue'
|
||||
import { useRouterPush } from '@/hooks/common/router'
|
||||
import BasicInfo from './modules/BasicInfo.vue'
|
||||
import GroupManagement from './modules/GroupManagement.vue'
|
||||
import HardwareBinding from './modules/HardwareBinding.vue'
|
||||
import QuestionConfig from './modules/QuestionConfig.vue'
|
||||
|
||||
const activeTab = ref('group')
|
||||
const { routerBack } = useRouterPush()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="competition-add">
|
||||
<NSpace vertical>
|
||||
<NButton type="primary">
|
||||
Add Competition
|
||||
</NButton>
|
||||
</NSpace>
|
||||
<div class="margin-[10px auto] h-full w-100% flex flex-col gap-4 overflow-y-auto p-4">
|
||||
<!-- 顶部 Header区域 -->
|
||||
<NCard :bordered="false" class="rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- 返回比赛列表 -->
|
||||
|
||||
<NButton circle secondary @click="routerBack">
|
||||
<template #icon>
|
||||
<icon-ic-baseline-arrow-back class="text-icon" />
|
||||
</template>
|
||||
</NButton>
|
||||
<div>
|
||||
<h2 class="m-0 text-xl font-bold">
|
||||
比赛配置编辑
|
||||
</h2>
|
||||
<p class="m-0 text-xs text-gray-400">
|
||||
正在编辑：阅读之星年度总决赛
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<NButton>存为草稿</NButton>
|
||||
<NButton type="primary">
|
||||
发布比赛
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</NCard>
|
||||
|
||||
<!-- 基础信息组件 -->
|
||||
<BasicInfo />
|
||||
|
||||
<!-- Tab 切换区域 -->
|
||||
<NCard :bordered="false" class="flex-1 rounded-xl shadow-sm">
|
||||
<NTabs v-model:value="activeTab" type="line" animated>
|
||||
<NTabPane name="group" tab="分组信息管理">
|
||||
<GroupManagement />
|
||||
</NTabPane>
|
||||
<NTabPane name="hardware" tab="智能笔硬件绑定">
|
||||
<HardwareBinding />
|
||||
</NTabPane>
|
||||
<NTabPane name="question" tab="题库与分值配置">
|
||||
<QuestionConfig />
|
||||
</NTabPane>
|
||||
</NTabs>
|
||||
</NCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.competition-add {
|
||||
padding: 20px;
|
||||
<style scoped>
|
||||
:deep(.n-tabs-nav) {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,57 @@
|
||||
<script setup lang="ts">
|
||||
import { NCard, NDatePicker, NForm, NFormItemGi, NGrid, NInput, NInputNumber } from 'naive-ui'
|
||||
import { reactive, useTemplateRef } from 'vue'
|
||||
|
||||
const formRef = useTemplateRef('formRef')
|
||||
|
||||
const formData = reactive({
|
||||
name: '阅读之星年度总决赛',
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
groupCount: 40,
|
||||
teamCount: 4,
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
formRef,
|
||||
formData,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard :bordered="false" class="rounded-xl shadow-sm">
|
||||
<div class="mb-4 flex items-center gap-2 border-l-4 border-blue-600 pl-3">
|
||||
<span class="text-base font-bold">基础活动信息</span>
|
||||
</div>
|
||||
|
||||
<NForm ref="formRef" label-placement="top" :show-feedback="false">
|
||||
<NGrid :x-gap="24" :y-gap="24" cols="1 s:2 m:4 l:5" responsive="screen">
|
||||
<NFormItemGi span="1" label="比赛名称">
|
||||
<NInput v-model:value="formData.name" placeholder="请输入比赛名称" />
|
||||
</NFormItemGi>
|
||||
|
||||
<NFormItemGi label="开始时间">
|
||||
<NDatePicker
|
||||
v-model:value="formData.startTime" type="datetime" clearable class="w-full"
|
||||
placeholder="年 / 月 / 日 --:--"
|
||||
/>
|
||||
</NFormItemGi>
|
||||
|
||||
<NFormItemGi label="结束时间">
|
||||
<NDatePicker
|
||||
v-model:value="formData.endTime" type="datetime" clearable class="w-full"
|
||||
placeholder="年 / 月 / 日 --:--"
|
||||
/>
|
||||
</NFormItemGi>
|
||||
|
||||
<NFormItemGi label="小组总数">
|
||||
<NInputNumber v-model:value="formData.groupCount" class="w-full" />
|
||||
</NFormItemGi>
|
||||
|
||||
<NFormItemGi label="单组队伍">
|
||||
<NInputNumber v-model:value="formData.teamCount" class="w-full" />
|
||||
</NFormItemGi>
|
||||
</NGrid>
|
||||
</NForm>
|
||||
</NCard>
|
||||
</template>
|
||||
@ -0,0 +1,60 @@
|
||||
<script setup lang="ts">
|
||||
import { NButton, NGrid, NGridItem, NInput, NTag } from 'naive-ui'
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 模拟数据
|
||||
const groups = ref([
|
||||
{ name: '第一组 (精英赛区)', id: 'G01' },
|
||||
{ name: '第二组 (新锐赛区)', id: 'G02' },
|
||||
{ name: '第三组', id: 'G03' },
|
||||
{ name: '第四组', id: 'G04' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="py-4">
|
||||
<!-- 操作栏 -->
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<div class="text-sm text-gray-400">
|
||||
提示：您可以通过Excel模版批量导入队伍名称
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<NButton secondary>
|
||||
<template #icon>
|
||||
<div class="i-carbon-document-import" />
|
||||
</template>
|
||||
Excel批量导入
|
||||
</NButton>
|
||||
<NButton type="primary" color="#1a202c">
|
||||
<template #icon>
|
||||
<div class="i-carbon-add" />
|
||||
</template>
|
||||
添加分组
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分组卡片列表 -->
|
||||
<NGrid :x-gap="24" :y-gap="24" cols="1 m:2" responsive="screen">
|
||||
<NGridItem v-for="(group, index) in groups" :key="index">
|
||||
<div class="border border-gray-100 rounded-xl bg-gray-50/50 p-5 transition-shadow hover:shadow-md">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<span class="text-blue-600 font-bold">{{ group.name }}</span>
|
||||
<NTag size="small" :bordered="false" class="bg-white text-gray-500">
|
||||
ID: {{ group.id }}
|
||||
</NTag>
|
||||
</div>
|
||||
|
||||
<NGrid :x-gap="16" :y-gap="16" :cols="2">
|
||||
<NGridItem v-for="i in 4" :key="i">
|
||||
<div class="mb-1 text-xs text-gray-400">
|
||||
NO.0{{ i }} 队名
|
||||
</div>
|
||||
<NInput placeholder="输入队伍名称" />
|
||||
</NGridItem>
|
||||
</NGrid>
|
||||
</div>
|
||||
</NGridItem>
|
||||
</NGrid>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,103 @@
|
||||
<script setup lang="ts">
|
||||
import { NGrid, NGridItem, NInput } from 'naive-ui'
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 模拟数据结构
|
||||
const hardwareGroups = ref([
|
||||
{
|
||||
groupId: '01',
|
||||
pens: [
|
||||
{ label: 'T1', sn: '', online: false },
|
||||
{ label: 'T2', sn: '', online: true },
|
||||
{ label: 'T3', sn: '', online: true },
|
||||
{ label: 'T4', sn: '', online: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
groupId: '02',
|
||||
pens: [
|
||||
{ label: 'T1', sn: '', online: true },
|
||||
{ label: 'T2', sn: '', online: false },
|
||||
{ label: 'T3', sn: '', online: false },
|
||||
{ label: 'T4', sn: '', online: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
groupId: '03',
|
||||
pens: [
|
||||
{ label: 'T1', sn: '', online: false },
|
||||
{ label: 'T2', sn: '', online: false },
|
||||
{ label: 'T3', sn: '', online: true },
|
||||
{ label: 'T4', sn: '', online: true },
|
||||
],
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="py-4">
|
||||
<!-- 状态提示栏 -->
|
||||
<div class="mb-6 flex items-start gap-3 border border-indigo-100 rounded-lg bg-indigo-50 p-4">
|
||||
<div class="i-carbon-radar mt-0.5 text-xl text-indigo-500" /> <!-- 图标占位 -->
|
||||
<div>
|
||||
<div class="text-sm text-indigo-900 font-bold">
|
||||
自动发现模式已开启
|
||||
</div>
|
||||
<div class="mt-1 text-xs text-indigo-400">
|
||||
系统将自动扫描正在书写的点阵笔并提示绑定。请确保基站已通电。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 硬件状态卡片 -->
|
||||
<NGrid :x-gap="24" :y-gap="24" cols="1 m:2 l:3" responsive="screen">
|
||||
<NGridItem v-for="(group, idx) in hardwareGroups" :key="idx">
|
||||
<div class="border border-gray-200 rounded-xl p-5">
|
||||
<div class="mb-4 text-gray-700 font-bold">
|
||||
分组 {{ group.groupId }} 硬件状态
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<div
|
||||
v-for="pen in group.pens"
|
||||
:key="pen.label"
|
||||
class="flex items-center gap-3 rounded bg-gray-50 p-2"
|
||||
>
|
||||
<div class="w-6 text-center text-gray-700 font-bold">
|
||||
{{ pen.label }}
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<NInput
|
||||
size="small"
|
||||
placeholder="笔SN编号"
|
||||
:value="pen.sn"
|
||||
readonly
|
||||
class="bg-transparent"
|
||||
>
|
||||
<template #prefix>
|
||||
<span class="mr-2 text-xs text-gray-400">笔SN编号 (如: SN88219)</span>
|
||||
</template>
|
||||
</NInput>
|
||||
</div>
|
||||
<!-- 状态点: 绿色在线，灰色离线 -->
|
||||
<div
|
||||
class="h-2.5 w-2.5 rounded-full"
|
||||
:class="pen.online ? 'bg-green-500' : 'bg-gray-300'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NGridItem>
|
||||
</NGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 针对 Input 进行样式微调以匹配设计稿 */
|
||||
:deep(.n-input) {
|
||||
background-color: transparent;
|
||||
}
|
||||
:deep(.n-input .n-input__input-el) {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,95 @@
|
||||
<script setup lang="ts">
|
||||
import { NGrid, NGridItem, NSelect } from 'naive-ui'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const questionOptions = [
|
||||
{ label: '汉字听写 - 根据提示书写汉字', value: 'hanzi' },
|
||||
{ label: '同音字辨析 - 根据拼音书写', value: 'tongyin' },
|
||||
{ label: '偏旁部首 - 按要求写字', value: 'pianpang' },
|
||||
{ label: '词语听写 - 综合练习', value: 'ciyu' },
|
||||
{ label: '成语填空 - 四字成语', value: 'chengyu' },
|
||||
{ label: '反义词挑战', value: 'fanyi' },
|
||||
{ label: '近义词挑战', value: 'jinyi' },
|
||||
]
|
||||
|
||||
const pkOptions = [
|
||||
{ label: '极速成语接龙 - 每题10秒', value: 'speed10' },
|
||||
{ label: '极速成语接龙 - 每题20秒', value: 'speed20' },
|
||||
]
|
||||
|
||||
const regularQuestions = ref([
|
||||
{ value: 'hanzi' },
|
||||
{ value: 'tongyin' },
|
||||
{ value: 'pianpang' },
|
||||
{ value: 'ciyu' },
|
||||
{ value: 'chengyu' },
|
||||
{ value: 'fanyi' },
|
||||
{ value: 'jinyi' },
|
||||
])
|
||||
|
||||
const pkQuestions = ref([
|
||||
{ value: 'speed10' },
|
||||
{ value: 'speed10' },
|
||||
{ value: 'speed10' },
|
||||
{ value: 'speed10' },
|
||||
{ value: 'speed10' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="py-4">
|
||||
<NGrid :x-gap="48" :y-gap="24" cols="1 l:2" responsive="screen">
|
||||
<!-- 左侧：常规赛题包 -->
|
||||
<NGridItem>
|
||||
<div class="h-full rounded-xl bg-gray-50/50 p-6">
|
||||
<div class="mb-6 flex items-center gap-2 text-gray-800 font-bold">
|
||||
<div class="i-carbon-notebook text-lg text-blue-500" />
|
||||
<span>常规赛题包</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div
|
||||
v-for="(item, idx) in regularQuestions"
|
||||
:key="idx"
|
||||
class="flex items-center gap-4"
|
||||
>
|
||||
<span class="w-12 text-xs text-gray-400 font-medium">第{{ idx + 1 }}题</span>
|
||||
<NSelect
|
||||
v-model:value="item.value"
|
||||
:options="questionOptions"
|
||||
placeholder="请选择题型"
|
||||
class="flex-1 bg-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NGridItem>
|
||||
|
||||
<!-- 右侧：加时赛 (PK环节) -->
|
||||
<NGridItem>
|
||||
<div class="h-full border border-orange-100/50 rounded-xl bg-orange-50/30 p-6">
|
||||
<div class="mb-6 flex items-center gap-2 text-gray-800 font-bold">
|
||||
<div class="i-carbon-timer text-lg text-orange-500" />
|
||||
<span>加时赛 (PK环节)</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div
|
||||
v-for="(item, idx) in pkQuestions"
|
||||
:key="idx"
|
||||
class="flex items-center gap-4"
|
||||
>
|
||||
<span class="w-8 text-xs text-orange-400 font-medium">PK{{ idx + 1 }}</span>
|
||||
<NSelect
|
||||
v-model:value="item.value"
|
||||
:options="pkOptions"
|
||||
placeholder="请选择PK规则"
|
||||
class="flex-1 bg-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NGridItem>
|
||||
</NGrid>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,70 @@
|
||||
// src/views/competition/modules/data.ts
|
||||
|
||||
export interface CompetitionItem {
|
||||
id: string
|
||||
title: string
|
||||
date: string
|
||||
teamCount: number
|
||||
status: 'ongoing' | 'pending' // ongoing: 进行中, pending: 未开始
|
||||
isHighlight?: boolean // 用于标记第一个卡片的特殊背景
|
||||
}
|
||||
|
||||
export const competitionList: CompetitionItem[] = [
|
||||
{
|
||||
id: '1',
|
||||
title: '阅读之星大赛\n辞海遨游环节', // 使用换行符或在组件中处理换行
|
||||
date: '2026.01.12',
|
||||
teamCount: 40,
|
||||
status: 'ongoing',
|
||||
isHighlight: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '诗词大会总决赛',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '趣味百科大作战',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: '经典文学研读周',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
title: '未来科学家阅读赛',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
title: '历史人文知识赛',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
title: '少儿绘本创意营',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
title: '唐诗三百首挑战',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
]
|
||||
@ -1,5 +1,98 @@
|
||||
<script setup lang="ts">
|
||||
import { NButton, NCard, NTag, useMessage } from 'naive-ui'
|
||||
import { ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import BasicInfoCard from './modules/BasicInfoCard.vue'
|
||||
import QuestionConfigCard from './modules/QuestionConfigCard.vue'
|
||||
import SideMenu from './modules/SideMenu.vue'
|
||||
|
||||
import TeamListCard from './modules/TeamListCard.vue'
|
||||
|
||||
const message = useMessage()
|
||||
const isEdit = ref(false)
|
||||
const route = useRoute()
|
||||
// eslint-disable-next-line unused-imports/no-unused-vars
|
||||
const competitionId = route.query.id
|
||||
|
||||
function handleSave() {
|
||||
// 模拟保存逻辑
|
||||
isEdit.value = false
|
||||
message.success('保存成功')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1>dashboard_detail</h1>
|
||||
<div class="h-full flex gap-4 overflow-hidden bg-gray-50/50 p-4">
|
||||
<!-- 左侧分组导航 -->
|
||||
<div class="h-full w-64 flex flex-col flex-shrink-0 overflow-hidden rounded-xl bg-white shadow-sm">
|
||||
<SideMenu />
|
||||
</div>
|
||||
|
||||
<!-- 右侧主要内容区 -->
|
||||
<div class="h-full flex flex-col flex-1 overflow-hidden">
|
||||
<!-- 新增：顶部全局操作栏 -->
|
||||
<NCard :bordered="false" class="mb-4 flex-shrink-0 rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">
|
||||
当前状态：
|
||||
<NTag :type="isEdit ? 'warning' : 'success'" size="small" :bordered="false">
|
||||
{{ isEdit ? '编辑中' : '预览中' }}
|
||||
</NTag>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<NButton type="error" secondary>
|
||||
<template #icon>
|
||||
<div class="i-carbon-trash-can" />
|
||||
</template>
|
||||
删除
|
||||
</NButton>
|
||||
|
||||
<NButton v-if="!isEdit" type="primary" secondary @click="isEdit = true">
|
||||
<template #icon>
|
||||
<div class="i-carbon-edit" />
|
||||
</template>
|
||||
编辑
|
||||
</NButton>
|
||||
|
||||
<template v-else>
|
||||
<NButton secondary @click="isEdit = false">
|
||||
取消
|
||||
</NButton>
|
||||
<NButton type="primary" @click="handleSave">
|
||||
<template #icon>
|
||||
<div class="i-carbon-save" />
|
||||
</template>
|
||||
保存提交
|
||||
</NButton>
|
||||
</template>
|
||||
|
||||
<NButton v-if="!isEdit" type="primary" color="#1a202c">
|
||||
<template #icon>
|
||||
<div class="i-carbon-rocket" />
|
||||
</template>
|
||||
发布
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</NCard>
|
||||
|
||||
<!-- 滚动内容区 -->
|
||||
<div class="no-scrollbar flex flex-col flex-1 gap-4 overflow-y-auto">
|
||||
<!-- 将 isEdit 状态传递给子组件 -->
|
||||
<BasicInfoCard :is-edit="isEdit" />
|
||||
<TeamListCard :is-edit="isEdit" />
|
||||
<QuestionConfigCard :is-edit="isEdit" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,80 @@
|
||||
<script setup lang="ts">
|
||||
import { NCard, NDatePicker, NGrid, NGridItem, NInput, NInputNumber } from 'naive-ui'
|
||||
import { reactive } from 'vue'
|
||||
|
||||
defineProps<{ isEdit: boolean }>()
|
||||
|
||||
const form = reactive({
|
||||
name: '第九届阅读之星大赛',
|
||||
dateRange: null,
|
||||
total: 40,
|
||||
teamPerGroup: 4,
|
||||
promoteCount: 4,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard :bordered="false" class="rounded-xl shadow-sm">
|
||||
<div class="mb-6 flex items-center gap-3 border-l-4 border-blue-600 pl-3">
|
||||
<span class="text-lg text-gray-800 font-bold">基础信息</span>
|
||||
</div>
|
||||
|
||||
<NGrid :x-gap="24" :cols="4" class="py-2">
|
||||
<!-- 赛事名称 -->
|
||||
<NGridItem>
|
||||
<div class="mb-2 text-xs text-gray-400 font-medium">
|
||||
赛事名称
|
||||
</div>
|
||||
<NInput v-if="isEdit" v-model:value="form.name" placeholder="输入名称" />
|
||||
<div v-else class="text-base text-gray-800 font-bold">
|
||||
{{ form.name }}
|
||||
</div>
|
||||
</NGridItem>
|
||||
|
||||
<!-- 起止时间 -->
|
||||
<NGridItem>
|
||||
<div class="mb-2 text-xs text-gray-400 font-medium">
|
||||
起止时间
|
||||
</div>
|
||||
<NDatePicker v-if="isEdit" v-model:value="form.dateRange" type="daterange" clearable />
|
||||
<div v-else class="flex items-center gap-2 text-sm text-gray-700 font-medium">
|
||||
<div class="i-carbon-calendar text-gray-400" />
|
||||
<span>2026-06-01</span>
|
||||
<span class="text-gray-300">/</span>
|
||||
<span>2026-06-05</span>
|
||||
</div>
|
||||
</NGridItem>
|
||||
|
||||
<!-- 参赛总人数 -->
|
||||
<NGridItem>
|
||||
<div class="mb-2 text-xs text-gray-400 font-medium">
|
||||
参赛总人数
|
||||
</div>
|
||||
<NInputNumber v-if="isEdit" v-model:value="form.total" :show-button="false">
|
||||
<template #suffix>
|
||||
人
|
||||
</template>
|
||||
</NInputNumber>
|
||||
<div v-else class="inline-flex items-center rounded bg-blue-100 px-2.5 py-0.5 text-sm text-blue-700 font-bold">
|
||||
{{ form.total }}人
|
||||
</div>
|
||||
</NGridItem>
|
||||
|
||||
<!-- 分组配额 -->
|
||||
<NGridItem>
|
||||
<div class="mb-2 text-xs text-gray-400 font-medium">
|
||||
分组配额
|
||||
</div>
|
||||
<div v-if="isEdit" class="flex gap-2">
|
||||
<NInputNumber v-model:value="form.teamPerGroup" size="small" placeholder="单组" :show-button="false" />
|
||||
<NInputNumber v-model:value="form.promoteCount" size="small" placeholder="晋级" :show-button="false" />
|
||||
</div>
|
||||
<div v-else class="flex items-center gap-3 text-sm text-gray-700">
|
||||
<span>单组: <strong>{{ form.teamPerGroup }}队</strong></span>
|
||||
<span class="h-3 w-[1px] bg-gray-300" />
|
||||
<span>晋级: <strong>{{ form.promoteCount }}队</strong></span>
|
||||
</div>
|
||||
</NGridItem>
|
||||
</NGrid>
|
||||
</NCard>
|
||||
</template>
|
||||
@ -0,0 +1,101 @@
|
||||
<script setup lang="ts">
|
||||
import { NButton, NCard, NGrid, NGridItem, NInputNumber, NSelect } from 'naive-ui'
|
||||
|
||||
defineProps<{ isEdit: boolean }>()
|
||||
|
||||
const scoreOptions = [
|
||||
{ label: '1分', value: '1' },
|
||||
{ label: '2分', value: '2' },
|
||||
{ label: '3分', value: '3' },
|
||||
{ label: '5分', value: '5' },
|
||||
{ label: '10分', value: '10' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard :bordered="false" class="rounded-xl shadow-sm">
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3 border-l-4 border-purple-500 pl-3">
|
||||
<span class="text-lg text-gray-800 font-bold">题包配置</span>
|
||||
</div>
|
||||
<!-- 编辑模式下显示批量操作按钮 -->
|
||||
<div v-if="isEdit" class="flex gap-3">
|
||||
<NButton size="small" secondary>
|
||||
批量重置
|
||||
</NButton>
|
||||
<NButton size="small" type="primary" secondary>
|
||||
快速配置
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NGrid :x-gap="24" :cols="2">
|
||||
<!-- 循环渲染两列：常规赛和加时赛 -->
|
||||
<NGridItem v-for="type in ['regular', 'pk']" :key="type">
|
||||
<!-- 头部样式处理 -->
|
||||
<div
|
||||
class="flex items-center justify-between border-b rounded-t-lg px-4 py-3"
|
||||
:class="type === 'regular'
|
||||
? 'bg-gray-50 border-gray-100'
|
||||
: 'bg-orange-50/50 border-orange-100'"
|
||||
>
|
||||
<div class="flex items-center gap-2 text-gray-700 font-bold">
|
||||
<div :class="type === 'regular' ? 'i-carbon-document-tasks text-blue-500' : 'i-carbon-timer text-orange-500'" />
|
||||
{{ type === 'regular' ? '常规赛题包' : '加时赛题包' }}
|
||||
</div>
|
||||
<div class="text-xs" :class="type === 'regular' ? 'text-gray-400' : 'text-orange-400'">
|
||||
配置详情
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表区域 -->
|
||||
<div
|
||||
class="flex flex-col gap-3 border border-t-0 rounded-b-lg p-4"
|
||||
:class="type === 'regular' ? 'border-gray-100' : 'border-orange-100 bg-orange-50/10'"
|
||||
>
|
||||
<div v-for="i in (type === 'regular' ? 10 : 5)" :key="`${type}-${i}`" class="flex items-center gap-2">
|
||||
<!-- 题号 -->
|
||||
<div class="w-16 flex-shrink-0 text-xs font-bold" :class="type === 'regular' ? 'text-gray-400' : 'text-orange-400'">
|
||||
{{ type === 'regular' ? `第${i}题` : `PK${i}` }}:
|
||||
</div>
|
||||
|
||||
<!-- 题型选择 -->
|
||||
<NSelect
|
||||
size="small"
|
||||
placeholder="题型"
|
||||
default-value="hanzi"
|
||||
:options="[{ label: '汉字书写', value: 'hanzi' }]"
|
||||
:disabled="!isEdit"
|
||||
class="min-w-[120px] flex-1"
|
||||
/>
|
||||
|
||||
<!-- 需求4：分数下拉选择 -->
|
||||
<div class="w-20 flex-shrink-0">
|
||||
<NSelect
|
||||
size="small"
|
||||
default-value="1"
|
||||
:options="scoreOptions"
|
||||
:disabled="!isEdit"
|
||||
placeholder="分值"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 需求4：倒计时输入 -->
|
||||
<div class="w-20 flex-shrink-0">
|
||||
<NInputNumber
|
||||
size="small"
|
||||
placeholder="秒"
|
||||
:show-button="false"
|
||||
:disabled="!isEdit"
|
||||
>
|
||||
<template #suffix>
|
||||
s
|
||||
</template>
|
||||
</NInputNumber>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NGridItem>
|
||||
</NGrid>
|
||||
</NCard>
|
||||
</template>
|
||||
@ -0,0 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
import { NButton } from 'naive-ui'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const activeId = ref(1)
|
||||
const groups = ref(Array.from({ length: 10 }, (_, i) => ({
|
||||
id: i + 1,
|
||||
code: String(i + 1).padStart(2, '0'),
|
||||
name: `第${['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'][i]}组`,
|
||||
})))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- 标题头 -->
|
||||
<div class="flex items-center justify-between border-b border-gray-100 p-4">
|
||||
<div class="flex items-center gap-2 text-gray-800 font-bold">
|
||||
<div class="i-carbon-tree-view-alt text-blue-600" />
|
||||
<span>分组情况</span>
|
||||
</div>
|
||||
<!-- 需求1：右侧改为添加按钮 -->
|
||||
<NButton text class="text-blue-600 hover:text-blue-700">
|
||||
<template #icon>
|
||||
<div class="i-carbon-add-filled text-lg" />
|
||||
</template>
|
||||
</NButton>
|
||||
</div>
|
||||
|
||||
<!-- 列表区域 -->
|
||||
<div class="max-h-[calc(100vh-120px)] overflow-y-auto p-2">
|
||||
<div
|
||||
v-for="item in groups"
|
||||
:key="item.id"
|
||||
class="group mb-1 flex cursor-pointer items-center gap-3 rounded-lg px-4 py-3 transition-colors"
|
||||
:class="activeId === item.id ? 'bg-blue-50 text-blue-600' : 'hover:bg-gray-50 text-gray-600'"
|
||||
@click="activeId = item.id"
|
||||
>
|
||||
<span
|
||||
class="text-xs font-mono"
|
||||
:class="activeId === item.id ? 'text-blue-400' : 'text-gray-300'"
|
||||
>
|
||||
#{{ item.code }}
|
||||
</span>
|
||||
<span class="font-medium">{{ item.name }}</span>
|
||||
|
||||
<div
|
||||
v-if="activeId === item.id"
|
||||
class="ml-auto h-4 w-1 rounded-full bg-blue-600"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import { NCard, NGrid, NGridItem, NInput } from 'naive-ui'
|
||||
|
||||
defineProps<{ isEdit: boolean }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard :bordered="false" class="rounded-xl shadow-sm">
|
||||
<div class="mb-5 flex items-center gap-3 border-l-4 border-green-500 pl-3">
|
||||
<span class="text-lg text-gray-800 font-bold">参与队伍</span>
|
||||
</div>
|
||||
|
||||
<NGrid :x-gap="16" :y-gap="16" cols="1 m:2 l:4" responsive="screen">
|
||||
<NGridItem v-for="i in 4" :key="i">
|
||||
<div
|
||||
class="relative border rounded-lg bg-gray-50 p-4 transition-all"
|
||||
:class="isEdit ? 'border-blue-200 bg-white' : 'border-transparent hover:shadow-md'"
|
||||
>
|
||||
<div class="mb-3 inline-block rounded bg-gray-200 px-2 py-0.5 text-xs text-gray-600 font-bold">
|
||||
TEAM 0{{ i }}
|
||||
</div>
|
||||
|
||||
<template v-if="isEdit">
|
||||
<NInput size="small" placeholder="输入队伍名称" class="mb-2 font-bold" default-value="重庆树人小学队伍" />
|
||||
<NInput size="tiny" placeholder="输入编号" class="font-mono" default-value="BPB-53H-1EN-RL" />
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<h4 class="m-0 mb-1 text-base text-gray-800 font-bold">
|
||||
重庆树人小学队伍
|
||||
</h4>
|
||||
<p class="m-0 text-xs text-gray-400 font-mono">
|
||||
BPB-53H-1EN-RL
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
</NGridItem>
|
||||
</NGrid>
|
||||
</NCard>
|
||||
</template>
|
||||
@ -0,0 +1,70 @@
|
||||
// src/views/competition/modules/data.ts
|
||||
|
||||
export interface CompetitionItem {
|
||||
id: string
|
||||
title: string
|
||||
date: string
|
||||
teamCount: number
|
||||
status: 'ongoing' | 'pending' // ongoing: 进行中, pending: 未开始
|
||||
isHighlight?: boolean // 用于标记第一个卡片的特殊背景
|
||||
}
|
||||
|
||||
export const competitionList: CompetitionItem[] = [
|
||||
{
|
||||
id: '1',
|
||||
title: '阅读之星大赛\n辞海遨游环节', // 使用换行符或在组件中处理换行
|
||||
date: '2026.01.12',
|
||||
teamCount: 40,
|
||||
status: 'ongoing',
|
||||
isHighlight: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '诗词大会总决赛',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '趣味百科大作战',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: '经典文学研读周',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
title: '未来科学家阅读赛',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
title: '历史人文知识赛',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
title: '少儿绘本创意营',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
title: '唐诗三百首挑战',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
]
|
||||
@ -1,17 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import { NButton, NGi, NGrid, NSpace } from 'naive-ui'
|
||||
import { computed } from 'vue'
|
||||
import { useRouterPush } from '@/hooks/common/router'
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
import CompetitionCard from './modules/competition-card.vue'
|
||||
import { competitionList } from './modules/data'
|
||||
|
||||
const { routerPushByKey } = useRouterPush()
|
||||
|
||||
// 引入 store 用于判断移动端布局 (与你提供的风格保持一致)
|
||||
const appStore = useAppStore()
|
||||
const gap = computed(() => (appStore.isMobile ? 12 : 16))
|
||||
|
||||
// 模拟新增操作
|
||||
function handleAdd() {
|
||||
window.$message?.success('点击了新增比赛活动')
|
||||
routerPushByKey('competition_competition-add')
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -39,11 +41,7 @@ function handleAdd() {
|
||||
<!-- 卡片列表区域 -->
|
||||
<!-- 响应式布局：手机1列，平板2列，中屏3列，大屏4列 -->
|
||||
<NGrid :x-gap="gap" :y-gap="gap" responsive="screen" item-responsive>
|
||||
<NGi
|
||||
v-for="item in competitionList"
|
||||
:key="item.id"
|
||||
span="24 s:12 m:8 l:6"
|
||||
>
|
||||
<NGi v-for="item in competitionList" :key="item.id" span="24 s:12 m:8 l:6">
|
||||
<CompetitionCard :item="item" />
|
||||
</NGi>
|
||||
</NGrid>
|
||||
|
||||
@ -2,13 +2,16 @@
|
||||
import type { CompetitionItem } from './data'
|
||||
import { NButton, NCard, NTag } from 'naive-ui'
|
||||
import { computed } from 'vue'
|
||||
import { useRouterPush } from '@/hooks/common/router'
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const { routerPushByKey } = useRouterPush()
|
||||
|
||||
interface Props {
|
||||
item: CompetitionItem
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
// 状态配置：颜色和文本
|
||||
const statusConfig = computed(() => {
|
||||
if (props.item.status === 'ongoing') {
|
||||
@ -19,13 +22,17 @@ const statusConfig = computed(() => {
|
||||
|
||||
// 处理标题换行
|
||||
const formattedTitle = computed(() => props.item.title.replace(/\n/g, '<br/>'))
|
||||
|
||||
function toDetail(item: CompetitionItem) {
|
||||
routerPushByKey('competition_competition-detail', { query: { id: item.id } })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard
|
||||
:bordered="false"
|
||||
class="group relative h-full overflow-hidden rounded-2xl transition-all duration-300 hover:shadow-lg"
|
||||
content-style="padding: 24px; display: flex; flex-direction: column; height: 100%;"
|
||||
content-style="padding: 24px; display: flex; flex-direction: column; height: 100%;" @click="toDetail(item)"
|
||||
>
|
||||
<!-- 特殊背景装饰 (仅高亮卡片显示) -->
|
||||
<div
|
||||
@ -38,12 +45,7 @@ const formattedTitle = computed(() => props.item.title.replace(/\n/g, '<br/>'))
|
||||
<div>
|
||||
<!-- 状态标签 -->
|
||||
<div class="mb-4">
|
||||
<NTag
|
||||
:bordered="false"
|
||||
size="small"
|
||||
round
|
||||
class="px-3 font-medium" :class="[statusConfig.bgClass]"
|
||||
>
|
||||
<NTag :bordered="false" size="small" round class="px-3 font-medium" :class="[statusConfig.bgClass]">
|
||||
{{ statusConfig.text }}
|
||||
</NTag>
|
||||
</div>
|
||||
@ -66,12 +68,7 @@ const formattedTitle = computed(() => props.item.title.replace(/\n/g, '<br/>'))
|
||||
<span class="text-xs text-gray-500 font-medium">
|
||||
{{ item.teamCount }} 支参赛队伍
|
||||
</span>
|
||||
<NButton
|
||||
text
|
||||
type="primary"
|
||||
size="small"
|
||||
class="font-bold hover:underline"
|
||||
>
|
||||
<NButton text type="primary" size="small" class="font-bold hover:underline">
|
||||
查看配置详情
|
||||
</NButton>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user