updates
This commit is contained in:
parent
796bb6b2f6
commit
b02d66cc2b
|
|
@ -40,3 +40,15 @@
|
|||
- Updated Panel B template to use real API data structure.
|
||||
|
||||
|
||||
|
||||
## 2026-01-24
|
||||
|
||||
### [Task 10] Optimize Dark Mode for simulate.vue
|
||||
- **Time**: 2026-01-24
|
||||
- **Goal**: Full support for dark theme using dark: classes for all components in the simulation page.
|
||||
- **Scope**: src/pages/simulate.vue
|
||||
- **Result**:
|
||||
- Applied detailed dark: classes to Sidebar, Panel A/B, and Data Tables.
|
||||
- Optimized color contrast for sticky columns and scrollable areas in dark mode.
|
||||
- Updated all modals (Major list, Switch plan) and Popconfirm UI for dark mode compatibility.
|
||||
|
||||
|
|
|
|||
|
|
@ -593,8 +593,8 @@ function deletePlan(planId: string) {
|
|||
1. 移动端提示层 (Phone View)
|
||||
逻辑:默认显示 (flex),在 lg (1024px) 及以上屏幕隐藏
|
||||
========================================================== -->
|
||||
<div class="w-full flex flex-col items-center justify-center bg-gray-50 p-8 text-center lg:hidden">
|
||||
<div class="max-w-sm w-full rounded-2xl bg-white p-8 shadow-lg">
|
||||
<div class="w-full flex flex-col items-center justify-center bg-gray-50 dark:bg-slate-950 p-8 text-center lg:hidden">
|
||||
<div class="max-w-sm w-full rounded-2xl bg-white dark:bg-slate-900 p-8 shadow-lg">
|
||||
<!-- 图标 (手机) -->
|
||||
<div class="mx-auto mb-4 h-16 w-16 flex items-center justify-center rounded-full bg-blue-50 text-blue-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
|
|
@ -605,10 +605,10 @@ function deletePlan(planId: string) {
|
|||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="mb-2 text-xl text-slate-800 font-bold">
|
||||
<h3 class="mb-2 text-xl text-slate-800 dark:text-slate-100 font-bold">
|
||||
请访问小程序
|
||||
</h3>
|
||||
<p class="mb-6 text-sm text-slate-500 leading-relaxed">
|
||||
<p class="mb-6 text-sm text-slate-500 dark:text-slate-400 leading-relaxed">
|
||||
当前页面包含大量数据表格,<br>为保证最佳体验,请在 PC 端浏览<br>或前往微信小程序查看。
|
||||
</p>
|
||||
|
||||
|
|
@ -625,7 +625,7 @@ function deletePlan(planId: string) {
|
|||
新增:左侧固定侧边栏
|
||||
========================================================== -->
|
||||
<div
|
||||
class="fixed left-0 top-24 z-50 hidden w-15 flex-col select-none items-center border-r border-slate-200 rounded-lg bg-white py-8 shadow-lg lg:flex"
|
||||
class="fixed left-0 top-24 z-50 hidden w-15 flex-col select-none items-center border-r border-slate-200 dark:border-slate-800 rounded-lg bg-white dark:bg-slate-900 py-8 shadow-lg lg:flex"
|
||||
>
|
||||
<!-- Logo 占位 -->
|
||||
<!-- <div class="mb-8">
|
||||
|
|
@ -635,12 +635,12 @@ function deletePlan(planId: string) {
|
|||
<div class="w-full flex flex-col gap-6 px-2">
|
||||
<button
|
||||
class="group flex flex-col items-center gap-1 rounded-lg p-2 transition-colors"
|
||||
:class="activePanel === 'market' ? 'bg-blue-50 text-blue-600' : 'text-slate-500 hover:bg-slate-50'"
|
||||
:class="activePanel === 'market' ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400' : 'text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800/50'"
|
||||
@click="activePanel = 'market'"
|
||||
>
|
||||
<div
|
||||
class="rounded-full p-2"
|
||||
:class="activePanel === 'market' ? 'bg-blue-100' : 'bg-slate-100 group-hover:bg-slate-200'"
|
||||
:class="activePanel === 'market' ? 'bg-blue-100 dark:bg-blue-900/40' : 'bg-slate-100 dark:bg-slate-800 group-hover:bg-slate-200 dark:group-hover:bg-slate-700'"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
|
||||
|
|
@ -657,12 +657,12 @@ function deletePlan(planId: string) {
|
|||
|
||||
<button
|
||||
class="group flex flex-col items-center gap-1 rounded-lg p-2 transition-colors"
|
||||
:class="activePanel === 'my-volunteers' ? 'bg-blue-50 text-blue-600' : 'text-slate-500 hover:bg-slate-50'"
|
||||
:class="activePanel === 'my-volunteers' ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400' : 'text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800/50'"
|
||||
@click="activePanel = 'my-volunteers'"
|
||||
>
|
||||
<div
|
||||
class="relative rounded-full p-2"
|
||||
:class="activePanel === 'my-volunteers' ? 'bg-blue-100' : 'bg-slate-100 group-hover:bg-slate-200'"
|
||||
:class="activePanel === 'my-volunteers' ? 'bg-blue-100 dark:bg-blue-900/40' : 'bg-slate-100 dark:bg-slate-800 group-hover:bg-slate-200 dark:group-hover:bg-slate-700'"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
|
||||
|
|
@ -688,7 +688,7 @@ function deletePlan(planId: string) {
|
|||
|
||||
<div
|
||||
id="bPanel"
|
||||
class="mx-auto hidden h-screen max-w-7xl flex-col select-none px-4 text-slate-700 font-sans lg:flex lg:px-8 sm:px-6"
|
||||
class="mx-auto hidden h-screen max-w-7xl flex-col select-none px-4 text-slate-700 dark:text-slate-200 font-sans lg:flex lg:px-8 sm:px-6"
|
||||
>
|
||||
<!-- =========================================================
|
||||
Panel A: 模拟填志愿 (原有的市场列表)
|
||||
|
|
@ -696,7 +696,7 @@ function deletePlan(planId: string) {
|
|||
========================================================== -->
|
||||
<div v-show="activePanel === 'market'" class="h-full flex flex-col">
|
||||
<!-- 顶部筛选栏 (保持不变) -->
|
||||
<div class="mt-8 rounded-t-lg bg-white p-6 border-b border-slate-200">
|
||||
<div class="mt-8 rounded-t-lg bg-white dark:bg-slate-900 p-6 border-b border-slate-200 dark:border-slate-800">
|
||||
<div class="grid grid-cols-1 select-none gap-6 lg:grid-cols-6">
|
||||
<!-- Top Toolbar -->
|
||||
<div class="lg:col-span-4">
|
||||
|
|
@ -712,7 +712,7 @@ function deletePlan(planId: string) {
|
|||
:class="[
|
||||
currentBatchTab === tab.key
|
||||
? 'bg-blue-500 text-white border-blue-500'
|
||||
: 'bg-white text-slate-600 hover:text-blue-500 border-slate-200',
|
||||
: 'bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-400 hover:text-blue-500 dark:hover:text-blue-400 border-slate-200 dark:border-slate-800',
|
||||
]" @click="currentBatchTab = tab.key"
|
||||
>
|
||||
{{ tab.label }}
|
||||
|
|
@ -726,7 +726,7 @@ function deletePlan(planId: string) {
|
|||
:class="[
|
||||
currentBatch2Tab === tab.key
|
||||
? 'bg-blue-500 text-white border-blue-500'
|
||||
: 'bg-white text-slate-600 hover:text-blue-500 border-slate-200',
|
||||
: 'bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-400 hover:text-blue-500 dark:hover:text-blue-400 border-slate-200 dark:border-slate-800',
|
||||
]" @click="currentBatch2Tab = tab.key"
|
||||
>
|
||||
{{ tab.label }}
|
||||
|
|
@ -742,7 +742,7 @@ function deletePlan(planId: string) {
|
|||
:class="[
|
||||
currentProbTab === tab.key
|
||||
? 'bg-blue-500 text-white border-blue-500'
|
||||
: 'bg-white text-slate-600 hover:text-blue-500 border-slate-200',
|
||||
: 'bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-400 hover:text-blue-500 dark:hover:text-blue-400 border-slate-200 dark:border-slate-800',
|
||||
]" @click="currentProbTab = tab.key"
|
||||
>
|
||||
{{ tab.label }} <span class="ml-1 opacity-90">{{ tab.count }}</span>
|
||||
|
|
@ -754,38 +754,38 @@ function deletePlan(planId: string) {
|
|||
<!-- 关键点:h-[calc(100vh-150px)] 用于限制高度,overflow-auto 用于滚动 -->
|
||||
<div
|
||||
ref="scrollContainer"
|
||||
class="relative flex-1 h-[calc(100vh-320px)] overflow-auto scroll-smooth border border-slate-200 rounded-b-md bg-white shadow-sm"
|
||||
class="relative flex-1 h-[calc(100vh-320px)] overflow-auto scroll-smooth border border-slate-200 dark:border-slate-800 rounded-b-md bg-white dark:bg-slate-900 shadow-sm"
|
||||
@scroll="handleScroll"
|
||||
>
|
||||
<table class="relative min-w-[1500px] w-full border-collapse text-sm">
|
||||
<!-- 表头 -->
|
||||
<thead class="sticky top-0 z-30 bg-slate-50 text-center text-slate-500 font-medium shadow-sm">
|
||||
<thead class="sticky top-0 z-30 bg-slate-50 dark:bg-slate-800 text-center text-slate-500 dark:text-slate-400 font-medium shadow-sm">
|
||||
<tr>
|
||||
<!-- 左侧冻结列:院校 -->
|
||||
<th
|
||||
class="sticky left-0 z-40 w-52 border-r border-slate-200 bg-slate-50 p-4 text-left shadow-[4px_0_8px_-4px_rgba(0,0,0,0.1)]"
|
||||
class="sticky left-0 z-40 w-52 border-r border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 p-4 text-left shadow-[4px_0_8px_-4px_rgba(0,0,0,0.1)]"
|
||||
>
|
||||
招生院校
|
||||
</th>
|
||||
<th class="w-auto border-r border-slate-200 p-4">
|
||||
<th class="w-auto border-r border-slate-200 dark:border-slate-700 p-4">
|
||||
招生专业
|
||||
</th>
|
||||
<th class="w-40 border-r border-slate-200 p-2">
|
||||
<th class="w-40 border-r border-slate-200 dark:border-slate-700 p-2">
|
||||
录取概率
|
||||
</th>
|
||||
<th class="w-32 border-r border-slate-200 p-2">
|
||||
<th class="w-32 border-r border-slate-200 dark:border-slate-700 p-2">
|
||||
26省内招生
|
||||
</th>
|
||||
<!-- 假设中间有很多历年数据列,撑开宽度 -->
|
||||
<th class="w-20 border-r border-slate-200 p-2">
|
||||
<th class="w-20 border-r border-slate-200 dark:border-slate-700 p-2">
|
||||
历年
|
||||
</th>
|
||||
<th class="w-32 border-r border-slate-200 p-2" v-for="(item) in oldYears" :key="item">
|
||||
<th class="w-32 border-r border-slate-200 dark:border-slate-700 p-2" v-for="(item) in oldYears" :key="item">
|
||||
{{item}}
|
||||
</th>
|
||||
<!-- 右侧冻结列:操作 -->
|
||||
<th
|
||||
class="sticky right-0 z-40 w-40 border-l border-slate-200 bg-slate-50 p-4 shadow-[-4px_0_8px_-4px_rgba(0,0,0,0.1)]"
|
||||
class="sticky right-0 z-40 w-40 border-l border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 p-4 shadow-[-4px_0_8px_-4px_rgba(0,0,0,0.1)]"
|
||||
>
|
||||
操作
|
||||
</th>
|
||||
|
|
@ -793,38 +793,38 @@ function deletePlan(planId: string) {
|
|||
</thead>
|
||||
|
||||
<!-- 表格内容 -->
|
||||
<tbody class="divide-y divide-slate-200">
|
||||
<tbody class="divide-y divide-slate-200 dark:divide-slate-800">
|
||||
<template v-for="school in schools" :key="school.schoolCode + school.majorCode">
|
||||
<!-- Row 1 -->
|
||||
<tr class="group transition-colors hover:bg-slate-50">
|
||||
<tr class="group transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/50">
|
||||
<!-- Sticky Left: 院校信息 -->
|
||||
<!-- 注意:bg-white 是为了遮挡滚动的文字,group-hover:bg-slate-50 是为了保持 hover 效果 -->
|
||||
<td
|
||||
rowspan="4"
|
||||
class="sticky left-0 z-20 border-r border-slate-200 bg-white p-4 align-top shadow-[4px_0_8px_-4px_rgba(0,0,0,0.1)] group-hover:bg-slate-50"
|
||||
class="sticky left-0 z-20 border-r border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4 align-top shadow-[4px_0_8px_-4px_rgba(0,0,0,0.1)] group-hover:bg-slate-50 dark:group-hover:bg-slate-800/50"
|
||||
>
|
||||
<div class="mb-1 w-52 truncate text-left text-base text-slate-900 font-bold" :title="school.schoolName">
|
||||
<div class="mb-1 w-52 truncate text-left text-base text-slate-900 dark:text-slate-100 font-bold" :title="school.schoolName">
|
||||
{{ school.schoolName }}
|
||||
</div>
|
||||
<div class="mb-2 flex flex-wrap gap-1 text-xs text-slate-500">
|
||||
<span v-for="tag in [school.province, school.schoolNature, school.institutionType].filter(Boolean)" :key="tag" class="rounded bg-slate-100 px-1 py-0.5">{{ tag
|
||||
<div class="mb-2 flex flex-wrap gap-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
<span v-for="tag in [school.province, school.schoolNature, school.institutionType].filter(Boolean)" :key="tag" class="rounded bg-slate-100 dark:bg-slate-800 px-1 py-0.5">{{ tag
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="text-left text-xs text-slate-400">
|
||||
<div class="text-left text-xs text-slate-400 dark:text-slate-500">
|
||||
代码 {{ school.schoolCode }}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- 中间普通滚动列 -->
|
||||
|
||||
<td rowspan="4" class="border-r border-slate-100 bg-white p-4 align-top group-hover:bg-slate-50">
|
||||
<div class="mb-1 text-slate-900 font-bold">
|
||||
<td rowspan="4" class="border-r border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 p-4 align-top group-hover:bg-slate-50 dark:group-hover:bg-slate-800/50">
|
||||
<div class="mb-1 text-slate-900 dark:text-slate-100 font-bold">
|
||||
{{ school.majorName }}
|
||||
</div>
|
||||
<div class="mb-1 text-xs text-slate-500">
|
||||
<div class="mb-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
{{ school.limitation }}
|
||||
</div>
|
||||
<div class="mt-2 text-xs text-slate-400">
|
||||
<div class="mt-2 text-xs text-slate-400 dark:text-slate-500">
|
||||
{{ `[${school.enrollmentCode}]` }} {{ school.tuition }}
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -833,7 +833,7 @@ function deletePlan(planId: string) {
|
|||
rowspan="4"
|
||||
class="border-r border-slate-100 bg-white p-2 text-center align-top group-hover:bg-slate-50"
|
||||
>
|
||||
<div class="mb-2 text-lg font-bold">
|
||||
<div class="mb-2 text-lg font-bold text-slate-900 dark:text-slate-100">
|
||||
{{ school.enrollProbability }}%
|
||||
</div>
|
||||
<div class="mb-2 flex justify-center">
|
||||
|
|
@ -844,7 +844,7 @@ function deletePlan(planId: string) {
|
|||
{{ getProbabilityLabel(school.enrollProbability) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2 flex justify-center">
|
||||
<div class="mb-2 flex justify-center text-slate-600 dark:text-slate-400">
|
||||
折合分:{{school.studentScore}}
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -853,27 +853,27 @@ function deletePlan(planId: string) {
|
|||
rowspan="4"
|
||||
class="border-r border-slate-100 bg-white p-2 text-center align-top group-hover:bg-slate-50"
|
||||
>
|
||||
<div class="text-lg font-medium">
|
||||
<div class="text-lg font-medium text-slate-900 dark:text-slate-100">
|
||||
{{ school.planNum }}人
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- 历年数据区域 (横向较宽) -->
|
||||
<td
|
||||
class="h-10 border-r border-slate-100 bg-slate-50/50 px-2 py-2 text-center text-xs text-slate-500"
|
||||
class="h-10 border-r border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 px-2 py-2 text-center text-xs text-slate-500 dark:text-slate-400"
|
||||
>
|
||||
招生人数
|
||||
</td>
|
||||
<td class="border-r border-slate-100 px-2 py-2 text-center text-sm" v-for="year in oldYears" :key="year">
|
||||
<td class="border-r border-slate-100 dark:border-slate-800 px-2 py-2 text-center text-sm text-slate-700 dark:text-slate-300" v-for="year in oldYears" :key="year">
|
||||
{{ school.historyMajorEnrollMap?.[year]?.enrollmentCount || "-" }}
|
||||
</td>
|
||||
<!-- Sticky Right: 操作 -->
|
||||
<td
|
||||
rowspan="4"
|
||||
class="sticky right-0 z-20 border-l border-slate-200 bg-white p-4 text-center align-middle shadow-[-4px_0_8px_-4px_rgba(0,0,0,0.1)] group-hover:bg-slate-50"
|
||||
class="sticky right-0 z-20 border-l border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4 text-center align-middle shadow-[-4px_0_8px_-4px_rgba(0,0,0,0.1)] group-hover:bg-slate-50 dark:group-hover:bg-slate-800/50"
|
||||
>
|
||||
<button
|
||||
class="whitespace-nowrap border border-blue-500 rounded-full bg-white px-3 py-1.5 text-xs text-blue-500 transition-colors hover:bg-blue-50"
|
||||
class="whitespace-nowrap border border-blue-500 rounded-full bg-white dark:bg-slate-900 px-3 py-1.5 text-xs text-blue-500 dark:text-blue-400 transition-colors hover:bg-blue-50 dark:hover:bg-blue-900/20"
|
||||
@click="openMajorModal(school)"
|
||||
>
|
||||
查看可选专业
|
||||
|
|
@ -882,25 +882,25 @@ function deletePlan(planId: string) {
|
|||
</tr>
|
||||
|
||||
<!-- Row 2: 最低分数 -->
|
||||
<tr class="group hover:bg-slate-50">
|
||||
<tr class="group hover:bg-slate-50 dark:hover:bg-slate-800/50">
|
||||
<td
|
||||
class="h-10 border-r border-slate-100 bg-slate-50/50 px-2 py-2 text-center text-xs text-slate-500"
|
||||
class="h-10 border-r border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 px-2 py-2 text-center text-xs text-slate-500 dark:text-slate-400"
|
||||
>
|
||||
最低分数
|
||||
</td>
|
||||
<td class="border-r border-slate-100 px-2 py-2 text-center text-sm font-medium" v-for="year in oldYears" :key="year">
|
||||
<td class="border-r border-slate-100 dark:border-slate-800 px-2 py-2 text-center text-sm font-medium text-slate-700 dark:text-slate-300" v-for="year in oldYears" :key="year">
|
||||
{{ school.historyMajorEnrollMap?.[year]?.admissionLine || "-" }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Row 3: 历年线差 -->
|
||||
<tr class="group hover:bg-slate-50">
|
||||
<tr class="group hover:bg-slate-50 dark:hover:bg-slate-800/50">
|
||||
<td
|
||||
class="h-10 border-r border-slate-100 bg-slate-50/50 px-2 py-2 text-center text-xs text-slate-500"
|
||||
class="h-10 border-r border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 px-2 py-2 text-center text-xs text-slate-500 dark:text-slate-400"
|
||||
>
|
||||
历年线差
|
||||
</td>
|
||||
<td class="border-r border-slate-100 px-2 py-2 text-center text-sm" v-for="year in oldYears" :key="year">
|
||||
<td class="border-r border-slate-100 dark:border-slate-800 px-2 py-2 text-center text-sm text-slate-700 dark:text-slate-300" v-for="year in oldYears" :key="year">
|
||||
{{ (school.historyMajorEnrollMap?.[year]?.admissionLine && school.historyMajorEnrollMap?.[year]?.controlLine)
|
||||
? (school.historyMajorEnrollMap[year].admissionLine - school.historyMajorEnrollMap[year].controlLine).toFixed(1)
|
||||
: "-" }}
|
||||
|
|
@ -908,13 +908,13 @@ function deletePlan(planId: string) {
|
|||
</tr>
|
||||
|
||||
<!-- Row 4: 录取方式 -->
|
||||
<tr class="group border-b border-slate-200 hover:bg-slate-50">
|
||||
<tr class="group border-b border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800/50">
|
||||
<td
|
||||
class="h-10 border-r border-slate-100 bg-slate-50/50 px-2 py-2 text-center text-xs text-slate-500"
|
||||
class="h-10 border-r border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 px-2 py-2 text-center text-xs text-slate-500 dark:text-slate-400"
|
||||
>
|
||||
录取方式
|
||||
</td>
|
||||
<td class="border-r border-slate-100 px-2 py-2 text-center text-xs text-slate-600" v-for="year in oldYears" :key="year">
|
||||
<td class="border-r border-slate-100 dark:border-slate-800 px-2 py-2 text-center text-xs text-slate-600 dark:text-slate-400" v-for="year in oldYears" :key="year">
|
||||
{{ school.historyMajorEnrollMap?.[year]?.rulesEnrollProbability || "-" }}
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -922,7 +922,7 @@ function deletePlan(planId: string) {
|
|||
|
||||
<!-- 加载状态条 -->
|
||||
<tr v-if="isLoading || isFinished">
|
||||
<td colspan="100%" class="sticky left-0 bg-slate-50 p-4 text-center text-sm text-slate-500">
|
||||
<td colspan="100%" class="sticky left-0 bg-slate-50 dark:bg-slate-800 p-4 text-center text-sm text-slate-500 dark:text-slate-400">
|
||||
<span v-if="isLoading" class="flex items-center justify-center gap-2">
|
||||
<svg
|
||||
class="h-5 w-5 animate-spin text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
|
|
@ -950,20 +950,20 @@ function deletePlan(planId: string) {
|
|||
========================================================== -->
|
||||
<div v-show="activePanel === 'my-volunteers'" class="h-full flex flex-col animate-fade-in-up">
|
||||
<div
|
||||
class="mb-6 mt-8 flex flex-col gap-4 rounded-lg bg-white p-6 shadow lg:flex-row lg:items-center lg:justify-between"
|
||||
class="mb-6 mt-8 flex flex-col gap-4 rounded-lg bg-white dark:bg-slate-900 p-6 shadow lg:flex-row lg:items-center lg:justify-between border border-transparent dark:border-slate-800"
|
||||
>
|
||||
<!-- 左侧:标题与统计 -->
|
||||
<div>
|
||||
<div class="flex items-center gap-3">
|
||||
<h2 class="text-2xl text-slate-800 font-bold">
|
||||
<h2 class="text-2xl text-slate-800 dark:text-slate-100 font-bold">
|
||||
{{ currentVolunteerInfo?.volunteerName || '未命名方案' }}
|
||||
</h2>
|
||||
<span class="border border-orange-100 rounded bg-orange-50 px-2 py-0.5 text-xs text-orange-500">
|
||||
<span class="border border-orange-100 dark:border-orange-900/30 rounded bg-orange-50 dark:bg-orange-900/20 px-2 py-0.5 text-xs text-orange-500 dark:text-orange-400">
|
||||
{{ volunteerPlans.find(p => p.id === activePlanId)?.tag || '手动' }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="mt-2 text-left text-sm text-slate-500">
|
||||
拖拽左侧手柄可调整顺序,共 <span class="text-blue-600 font-bold">{{ myVolunteers.length }}</span> 个志愿
|
||||
<p class="mt-2 text-left text-sm text-slate-500 dark:text-slate-400">
|
||||
拖拽左侧手柄可调整顺序,共 <span class="text-blue-600 dark:text-blue-400 font-bold">{{ myVolunteers.length }}</span> 个志愿
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -971,7 +971,7 @@ function deletePlan(planId: string) {
|
|||
<div class="flex flex-wrap items-center gap-3">
|
||||
<!-- 新建 -->
|
||||
<button
|
||||
class="flex items-center gap-1.5 border border-transparent rounded-md px-3 py-2 text-sm text-slate-600 transition-colors hover:border-slate-200 hover:bg-slate-50 hover:text-blue-600"
|
||||
class="flex items-center gap-1.5 border border-transparent rounded-md px-3 py-2 text-sm text-slate-600 dark:text-slate-400 transition-colors hover:border-slate-200 dark:hover:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
@click="handleCreatePlan"
|
||||
>
|
||||
<svg
|
||||
|
|
@ -985,7 +985,7 @@ function deletePlan(planId: string) {
|
|||
|
||||
<!-- 修改 -->
|
||||
<button
|
||||
class="flex items-center gap-1.5 border border-transparent rounded-md px-3 py-2 text-sm text-slate-600 transition-colors hover:border-slate-200 hover:bg-slate-50 hover:text-blue-600"
|
||||
class="flex items-center gap-1.5 border border-transparent rounded-md px-3 py-2 text-sm text-slate-600 dark:text-slate-400 transition-colors hover:border-slate-200 dark:hover:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
@click="handleEditPlan"
|
||||
>
|
||||
<svg
|
||||
|
|
@ -1002,7 +1002,7 @@ function deletePlan(planId: string) {
|
|||
|
||||
<!-- 切换 (点击触发弹窗) -->
|
||||
<button
|
||||
class="flex items-center gap-1.5 border border-transparent rounded-md px-3 py-2 text-sm text-slate-600 transition-colors hover:border-slate-200 hover:bg-slate-50 hover:text-blue-600"
|
||||
class="flex items-center gap-1.5 border border-transparent rounded-md px-3 py-2 text-sm text-slate-600 dark:text-slate-400 transition-colors hover:border-slate-200 dark:hover:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
@click="handleSwitchPlan"
|
||||
>
|
||||
<svg
|
||||
|
|
@ -1019,7 +1019,7 @@ function deletePlan(planId: string) {
|
|||
|
||||
<!-- 导出 -->
|
||||
<button
|
||||
class="flex items-center gap-1.5 border border-transparent rounded-md px-3 py-2 text-sm text-slate-600 transition-colors hover:border-slate-200 hover:bg-slate-50 hover:text-blue-600"
|
||||
class="flex items-center gap-1.5 border border-transparent rounded-md px-3 py-2 text-sm text-slate-600 dark:text-slate-400 transition-colors hover:border-slate-200 dark:hover:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
@click="handleExportPlan"
|
||||
>
|
||||
<svg
|
||||
|
|
@ -1035,7 +1035,7 @@ function deletePlan(planId: string) {
|
|||
</button>
|
||||
|
||||
<!-- 提交按钮 (突出显示) -->
|
||||
<div class="mx-1 h-6 w-px bg-slate-200" />
|
||||
<div class="mx-1 h-6 w-px bg-slate-200 dark:bg-slate-800" />
|
||||
<button
|
||||
:disabled="!isModified || isSaving"
|
||||
class="ml-1 rounded bg-blue-600 px-5 py-2 text-sm text-white font-medium shadow-md transition-all active:scale-95 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
|
|
@ -1054,34 +1054,34 @@ function deletePlan(planId: string) {
|
|||
:class="[
|
||||
volunteerCurrentTab === tab.key
|
||||
? 'bg-blue-500 text-white border-blue-500'
|
||||
: 'bg-white text-slate-600 hover:text-blue-500 border-slate-200',
|
||||
: 'bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-400 hover:text-blue-500 dark:hover:text-blue-400 border-slate-200 dark:border-slate-800',
|
||||
]" @click="switchVolunteerTab(tab.key)"
|
||||
>
|
||||
{{ tab.label }} <span class="ml-1 opacity-90">({{ `${tab.count}/${tab.max}` }})</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="relative flex-1 overflow-auto scroll-smooth border border-slate-200 rounded-b-md bg-white shadow-sm"
|
||||
class="relative flex-1 overflow-auto scroll-smooth border border-slate-200 dark:border-slate-800 rounded-b-md bg-white dark:bg-slate-900 shadow-sm"
|
||||
>
|
||||
<table class="w-full border-collapse text-sm">
|
||||
<thead class="sticky top-0 z-30 bg-slate-50 text-slate-500 font-medium shadow-sm">
|
||||
<thead class="sticky top-0 z-30 bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 font-medium shadow-sm">
|
||||
<tr>
|
||||
<th class="w-16 border-r border-slate-200 p-4 text-center">
|
||||
<th class="w-16 border-r border-slate-200 dark:border-slate-700 p-4 text-center">
|
||||
排序
|
||||
</th>
|
||||
<th class="w-20 border-r border-slate-200 p-4 text-center">
|
||||
<th class="w-20 border-r border-slate-200 dark:border-slate-700 p-4 text-center">
|
||||
序号
|
||||
</th>
|
||||
<th class="border-r border-slate-200 p-4 text-left">
|
||||
<th class="border-r border-slate-200 dark:border-slate-700 p-4 text-left">
|
||||
院校信息
|
||||
</th>
|
||||
<th class="border-r border-slate-200 p-4 text-left">
|
||||
<th class="border-r border-slate-200 dark:border-slate-700 p-4 text-left">
|
||||
专业信息
|
||||
</th>
|
||||
<th class="border-r border-slate-200 p-4 text-center">
|
||||
<th class="border-r border-slate-200 dark:border-slate-700 p-4 text-center">
|
||||
概率/分数
|
||||
</th>
|
||||
<th class="border-r border-slate-200 p-4 text-center">
|
||||
<th class="border-r border-slate-200 dark:border-slate-700 p-4 text-center">
|
||||
25省内招生
|
||||
</th>
|
||||
<th class="w-32 p-4 text-center">
|
||||
|
|
@ -1089,16 +1089,16 @@ function deletePlan(planId: string) {
|
|||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-200">
|
||||
<tbody class="divide-y divide-slate-200 dark:divide-slate-800">
|
||||
<tr
|
||||
v-for="(vol, index) in filteredVolunteers" :key="vol.id"
|
||||
class="group bg-white transition-colors hover:bg-slate-50" :draggable="dragEnabledIndex === index"
|
||||
class="group bg-white dark:bg-slate-900 transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/50" :draggable="dragEnabledIndex === index"
|
||||
@dragstart="handleDragStart($event, index)" @dragover="handleDragOver($event)"
|
||||
@drop="handleDrop(index)"
|
||||
>
|
||||
<!-- 拖拽手柄列 -->
|
||||
<td
|
||||
class="cursor-move cursor-move border-r border-slate-200 p-4 text-center text-slate-400 active:text-blue-700 hover:text-blue-500" @mouseenter="dragEnabledIndex = index"
|
||||
class="cursor-move border-r border-slate-200 dark:border-slate-700 p-4 text-center text-slate-400 dark:text-slate-500 active:text-blue-700 hover:text-blue-500 dark:hover:text-blue-400" @mouseenter="dragEnabledIndex = index"
|
||||
@mouseleave="dragEnabledIndex = null"
|
||||
>
|
||||
<svg
|
||||
|
|
@ -1110,42 +1110,42 @@ function deletePlan(planId: string) {
|
|||
</td>
|
||||
|
||||
<!-- 志愿序号 -->
|
||||
<td class="border-r border-slate-200 p-4 text-center text-lg text-slate-500 font-bold">
|
||||
<td class="border-r border-slate-200 dark:border-slate-700 p-4 text-center text-lg text-slate-500 dark:text-slate-400 font-bold">
|
||||
{{ index + 1 }}
|
||||
</td>
|
||||
|
||||
<!-- 院校信息 -->
|
||||
<td class="border-r border-slate-200 p-4 text-left">
|
||||
<div class="text-base text-slate-900 font-bold">
|
||||
<td class="border-r border-slate-200 dark:border-slate-700 p-4 text-left">
|
||||
<div class="text-base text-slate-900 dark:text-slate-100 font-bold">
|
||||
{{ vol.schoolName }}
|
||||
</div>
|
||||
<div class="mt-1 flex gap-2">
|
||||
<span
|
||||
v-for="tag in (vol.tags || [vol.province, vol.schoolNature].filter(Boolean))" :key="tag"
|
||||
class="rounded bg-slate-100 px-1.5 py-0.5 text-xs text-slate-500"
|
||||
class="rounded bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 text-xs text-slate-500 dark:text-slate-400"
|
||||
>{{ tag }}</span>
|
||||
</div>
|
||||
<div class="mt-1 text-xs text-slate-400">
|
||||
<div class="mt-1 text-xs text-slate-400 dark:text-slate-500">
|
||||
代码: {{ vol.schoolCode }}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- 专业信息 -->
|
||||
<td class="border-r border-slate-200 p-4">
|
||||
<div class="text-slate-800 font-bold">
|
||||
<td class="border-r border-slate-200 dark:border-slate-700 p-4">
|
||||
<div class="text-slate-800 dark:text-slate-100 font-bold">
|
||||
{{ vol.majorName }}
|
||||
</div>
|
||||
<div class="mt-1 text-xs text-slate-500">
|
||||
<div class="mt-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
{{ vol.tuition || '-' }}
|
||||
</div>
|
||||
<div class="text-xs text-slate-400">
|
||||
<div class="text-xs text-slate-400 dark:text-slate-500">
|
||||
代码: {{ vol.majorCode }}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- 分数/概率 -->
|
||||
<td class="border-r border-slate-200 p-4 text-center">
|
||||
<div class="text-lg font-bold">
|
||||
<td class="border-r border-slate-200 dark:border-slate-700 p-4 text-center">
|
||||
<div class="text-lg font-bold text-slate-900 dark:text-slate-100">
|
||||
{{ vol.enrollProbability }}%
|
||||
</div>
|
||||
<!-- <div class="mt-1 text-xs text-slate-500">
|
||||
|
|
@ -1160,8 +1160,8 @@ function deletePlan(planId: string) {
|
|||
</td>
|
||||
|
||||
<!-- 25省内招生 -->
|
||||
<td class="border-r border-slate-200 p-4 text-center">
|
||||
<div class="text-lg font-bold">
|
||||
<td class="border-r border-slate-200 dark:border-slate-700 p-4 text-center">
|
||||
<div class="text-lg font-bold text-slate-900 dark:text-slate-100">
|
||||
{{ vol.planNum }}人
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -1188,11 +1188,11 @@ function deletePlan(planId: string) {
|
|||
|
||||
<!-- 空状态 -->
|
||||
<tr v-if="myVolunteers.length === 0">
|
||||
<td colspan="7" class="items-center justify-center py-20 text-center text-slate-400">
|
||||
<td colspan="7" class="items-center justify-center py-20 text-center text-slate-400 dark:text-slate-500">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div class="mb-3 rounded-full bg-slate-100 p-4">
|
||||
<div class="mb-3 rounded-full bg-slate-100 dark:bg-slate-800 p-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-slate-300" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-slate-300 dark:text-slate-600" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
|
|
@ -1221,22 +1221,22 @@ function deletePlan(planId: string) {
|
|||
>
|
||||
<!-- 宽度加宽至 1100px 以容纳更多列 -->
|
||||
<div
|
||||
class="h-[85vh] w-[1100px] flex flex-col animate-fade-in-up overflow-hidden rounded-lg bg-white shadow-2xl"
|
||||
class="h-[85vh] w-[1100px] flex flex-col animate-fade-in-up overflow-hidden rounded-lg bg-white dark:bg-slate-900 shadow-2xl border border-transparent dark:border-slate-800"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between border-b border-slate-200 bg-slate-50 px-6 py-4">
|
||||
<div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/50 px-6 py-4">
|
||||
<div>
|
||||
<div class="flex items-end gap-3">
|
||||
<h3 class="text-xl text-slate-800 font-bold">
|
||||
<h3 class="text-xl text-slate-800 dark:text-slate-100 font-bold">
|
||||
{{ currentSchool?.schoolName }}
|
||||
</h3>
|
||||
<span class="text-sm text-slate-500">院校代码: {{ currentSchool?.schoolCode }}</span>
|
||||
<span class="text-sm text-slate-500 dark:text-slate-400">院校代码: {{ currentSchool?.schoolCode }}</span>
|
||||
</div>
|
||||
<p class="mt-1 text-xs text-slate-500">
|
||||
<p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
该院校下的其他专业列表
|
||||
</p>
|
||||
</div>
|
||||
<button class="rounded-full p-1 text-slate-400 hover:bg-slate-200 hover:text-slate-600" @click="closeModal">
|
||||
<button class="rounded-full p-1 text-slate-400 dark:text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 hover:text-slate-600 dark:hover:text-slate-300" @click="closeModal">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
|
|
@ -1247,10 +1247,10 @@ function deletePlan(planId: string) {
|
|||
</div>
|
||||
|
||||
<!-- Content: Table -->
|
||||
<div class="flex-1 overflow-auto bg-slate-50 p-0">
|
||||
<div class="flex-1 overflow-auto bg-slate-50 dark:bg-slate-900 p-0">
|
||||
<table class="w-full border-collapse text-left text-sm">
|
||||
<thead
|
||||
class="sticky top-0 z-10 bg-slate-100 text-xs text-slate-500 font-semibold tracking-wider uppercase shadow-sm"
|
||||
class="sticky top-0 z-10 bg-slate-100 dark:bg-slate-800 text-xs text-slate-500 dark:text-slate-400 font-semibold tracking-wider uppercase shadow-sm"
|
||||
>
|
||||
<tr>
|
||||
<th class="w-16 px-6 py-3">
|
||||
|
|
@ -1278,9 +1278,9 @@ function deletePlan(planId: string) {
|
|||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-slate-100">
|
||||
<tbody class="bg-white dark:bg-slate-900 divide-y divide-slate-100 dark:divide-slate-800">
|
||||
<tr v-if="modalLoading">
|
||||
<td colspan="7" class="p-12 text-center text-slate-400">
|
||||
<td colspan="7" class="p-12 text-center text-slate-400 dark:text-slate-500">
|
||||
<svg class="mx-auto mb-2 h-8 w-8 animate-spin text-blue-400" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Z" opacity="0.2" />
|
||||
<path fill="currentColor" d="M12 2A10 10 0 0 1 22 12h-2a8 8 0 0 0-8-8V2Z" />
|
||||
|
|
@ -1290,20 +1290,20 @@ function deletePlan(planId: string) {
|
|||
</tr>
|
||||
<tr
|
||||
v-for="major in modalMajors" v-else :key="major.code"
|
||||
class="group transition-colors hover:bg-blue-50/30"
|
||||
class="group transition-colors hover:bg-blue-50/30 dark:hover:bg-blue-900/10"
|
||||
>
|
||||
<td class="px-6 py-4 text-xs text-slate-400 font-mono">
|
||||
<td class="px-6 py-4 text-xs text-slate-400 dark:text-slate-500 font-mono">
|
||||
{{ major.enrollmentCode }}
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="text-base text-slate-800 font-bold">
|
||||
<div class="text-base text-slate-800 dark:text-slate-100 font-bold">
|
||||
{{ major.name }}
|
||||
</div>
|
||||
<div class="mt-1 flex gap-2 text-xs text-slate-500">
|
||||
<span class="rounded bg-slate-100 px-1.5 py-0.5">{{
|
||||
<div class="mt-1 flex gap-2 text-xs text-slate-500 dark:text-slate-400">
|
||||
<span class="rounded bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5">{{
|
||||
major.batch
|
||||
}}</span>
|
||||
<span class="rounded bg-slate-100 px-1.5 py-0.5">{{
|
||||
<span class="rounded bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5">{{
|
||||
major.tuition
|
||||
}}</span>
|
||||
</div>
|
||||
|
|
@ -1313,26 +1313,26 @@ function deletePlan(planId: string) {
|
|||
class="font-bold" :class="getStatusColor(getProbabilityLabel(major.prob))"
|
||||
>{{ major.prob }}%</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center font-medium">
|
||||
<td class="px-6 py-4 text-center font-medium text-slate-700 dark:text-slate-300">
|
||||
{{ major.score }}
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center text-slate-500">
|
||||
<td class="px-6 py-4 text-center text-slate-500 dark:text-slate-400">
|
||||
{{ major.rulesEnrollProbability }}
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center text-slate-500">
|
||||
<td class="px-6 py-4 text-center text-slate-500 dark:text-slate-400">
|
||||
{{ major.plan }}人
|
||||
</td>
|
||||
|
||||
<!-- 操作列:加入/移除 -->
|
||||
<td
|
||||
class="sticky right-0 bg-white px-6 py-4 text-center shadow-[-4px_0_8px_-4px_rgba(0,0,0,0.1)] group-hover:bg-blue-50/30"
|
||||
class="sticky right-0 bg-white dark:bg-slate-900 px-6 py-4 text-center shadow-[-4px_0_8px_-4px_rgba(0,0,0,0.1)] group-hover:bg-blue-50/30 dark:group-hover:bg-blue-900/10"
|
||||
>
|
||||
<button
|
||||
class="min-w-[90px] rounded-full px-3 py-1.5 text-xs font-medium transition-all duration-200"
|
||||
:class="[
|
||||
selectedMajorCodes.includes(`${currentSchool?.schoolCode}_${major.code}_${major.enrollmentCode || currentSchool?.enrollmentCode}`)
|
||||
? 'bg-red-50 text-red-500 border border-red-200 hover:bg-red-100' // 选中状态:红色,显示志愿序号
|
||||
: 'bg-white text-blue-600 border border-blue-500 hover:bg-blue-50', // 未选状态:蓝色
|
||||
? 'bg-red-50 dark:bg-red-900/20 text-red-500 dark:text-red-400 border border-red-200 dark:border-red-900/30 hover:bg-red-100 dark:hover:bg-red-900/30' // 选中状态:红色,显示志愿序号
|
||||
: 'bg-white dark:bg-slate-800 text-blue-600 dark:text-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20', // 未选状态:蓝色
|
||||
]" @click="toggleMajor(major)"
|
||||
>
|
||||
{{ getVolunteerBtnText(major) }}
|
||||
|
|
@ -1344,17 +1344,17 @@ function deletePlan(planId: string) {
|
|||
</div>
|
||||
|
||||
<!-- Footer: Confirm with Popover -->
|
||||
<div class="relative flex items-center justify-between border-t border-slate-200 bg-white p-4">
|
||||
<div class="text-sm text-slate-500">
|
||||
<div class="relative flex items-center justify-between border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
|
||||
<div class="text-sm text-slate-500 dark:text-slate-400">
|
||||
已选
|
||||
<span class="text-lg text-blue-600 font-bold">{{
|
||||
<span class="text-lg text-blue-600 dark:text-blue-400 font-bold">{{
|
||||
selectedMajorCodes.length
|
||||
}}</span>
|
||||
个志愿
|
||||
</div>
|
||||
|
||||
<div class="relative flex gap-3">
|
||||
<button class="px-5 py-2 text-sm text-slate-600 hover:text-slate-900" @click="closeModal">
|
||||
<button class="px-5 py-2 text-sm text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200" @click="closeModal">
|
||||
取消
|
||||
</button>
|
||||
|
||||
|
|
@ -1389,11 +1389,11 @@ function deletePlan(planId: string) {
|
|||
<!-- 气泡层 -->
|
||||
<div
|
||||
v-if="showSaveConfirm"
|
||||
class="absolute bottom-full right-0 z-50 mb-3 w-64 animate-fade-in-up border border-slate-200 rounded-lg bg-white p-4 shadow-xl"
|
||||
class="absolute bottom-full right-0 z-50 mb-3 w-64 animate-fade-in-up border border-slate-200 dark:border-slate-800 rounded-lg bg-white dark:bg-slate-900 p-4 shadow-xl"
|
||||
>
|
||||
<!-- 小三角 -->
|
||||
<div
|
||||
class="absolute right-6 h-3 w-3 rotate-45 border-b border-r border-slate-200 bg-white -bottom-1.5"
|
||||
class="absolute right-6 h-3 w-3 rotate-45 border-b border-r border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 -bottom-1.5"
|
||||
/>
|
||||
|
||||
<div class="mb-3 flex items-start gap-3">
|
||||
|
|
@ -1407,10 +1407,10 @@ function deletePlan(planId: string) {
|
|||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-slate-800 font-bold">
|
||||
<p class="text-sm text-slate-800 dark:text-slate-100 font-bold">
|
||||
确认提交志愿?
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-slate-500">
|
||||
<p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
提交后将更新您的志愿表,已选
|
||||
{{ selectedMajorCodes.length }} 个专业。
|
||||
</p>
|
||||
|
|
@ -1419,7 +1419,7 @@ function deletePlan(planId: string) {
|
|||
|
||||
<div class="flex justify-end gap-2">
|
||||
<button
|
||||
class="rounded px-2 py-1 text-xs text-slate-500 hover:bg-slate-100"
|
||||
class="rounded px-2 py-1 text-xs text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800"
|
||||
@click="showSaveConfirm = false"
|
||||
>
|
||||
再想想
|
||||
|
|
@ -1452,16 +1452,16 @@ function deletePlan(planId: string) {
|
|||
@click.self="showSwitchModal = false"
|
||||
>
|
||||
<div
|
||||
class="max-h-[80vh] w-[1000px] flex flex-col animate-fade-in-up overflow-hidden rounded-lg bg-white shadow-2xl"
|
||||
class="max-h-[80vh] w-[1000px] flex flex-col animate-fade-in-up overflow-hidden rounded-lg bg-white dark:bg-slate-900 shadow-2xl border border-transparent dark:border-slate-800"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between border-b border-slate-200 px-6 py-4">
|
||||
<h3 class="text-lg text-slate-800 font-bold">
|
||||
<div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-800 px-6 py-4">
|
||||
<h3 class="text-lg text-slate-800 dark:text-slate-100 font-bold">
|
||||
我的志愿方案
|
||||
</h3>
|
||||
|
||||
<!-- 简单的关闭按钮 -->
|
||||
<button class="text-slate-400 hover:text-slate-600" @click="showSwitchModal = false">
|
||||
<button class="text-slate-400 dark:text-slate-500 hover:text-slate-600 dark:hover:text-slate-300" @click="showSwitchModal = false">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
|
|
@ -1472,16 +1472,16 @@ function deletePlan(planId: string) {
|
|||
</div>
|
||||
|
||||
<!-- Toolbar / Filter -->
|
||||
<div class="flex justify-end border-b border-slate-100 bg-slate-50 px-6 py-3">
|
||||
<div class="flex justify-end border-b border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/50 px-6 py-3">
|
||||
<div class="relative">
|
||||
<select
|
||||
class="appearance-none border border-slate-300 rounded bg-white py-1.5 pl-3 pr-8 text-sm text-slate-700 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
class="appearance-none border border-slate-300 dark:border-slate-700 rounded bg-white dark:bg-slate-800 py-1.5 pl-3 pr-8 text-sm text-slate-700 dark:text-slate-300 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
>
|
||||
<option>请选择省份</option>
|
||||
<option>北京</option>
|
||||
<option>湖北</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-500">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-500 dark:text-slate-600">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
|
|
@ -1490,68 +1490,68 @@ function deletePlan(planId: string) {
|
|||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="flex-1 overflow-auto p-6">
|
||||
<table class="w-full border border-slate-200 text-left text-sm">
|
||||
<thead class="bg-slate-50 text-slate-500">
|
||||
<div class="flex-1 overflow-auto p-6 bg-white dark:bg-slate-900">
|
||||
<table class="w-full border border-slate-200 dark:border-slate-800 text-left text-sm">
|
||||
<thead class="bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400">
|
||||
<tr>
|
||||
<th class="border-b border-r border-slate-200 px-4 py-3 font-medium">
|
||||
<th class="border-b border-r border-slate-200 dark:border-slate-800 px-4 py-3 font-medium">
|
||||
名称
|
||||
</th>
|
||||
<th class="border-b border-r border-slate-200 px-4 py-3 text-center font-medium">
|
||||
<th class="border-b border-r border-slate-200 dark:border-slate-800 px-4 py-3 text-center font-medium">
|
||||
省份
|
||||
</th>
|
||||
<th class="border-b border-r border-slate-200 px-4 py-3 text-center font-medium">
|
||||
<th class="border-b border-r border-slate-200 dark:border-slate-800 px-4 py-3 text-center font-medium">
|
||||
艺术类别
|
||||
</th>
|
||||
<th class="border-b border-r border-slate-200 px-4 py-3 text-center font-medium">
|
||||
<th class="border-b border-r border-slate-200 dark:border-slate-800 px-4 py-3 text-center font-medium">
|
||||
文化分
|
||||
</th>
|
||||
<th class="border-b border-r border-slate-200 px-4 py-3 text-center font-medium">
|
||||
<th class="border-b border-r border-slate-200 dark:border-slate-800 px-4 py-3 text-center font-medium">
|
||||
统考分
|
||||
</th>
|
||||
<th class="border-b border-r border-slate-200 px-4 py-3 text-center font-medium">
|
||||
<th class="border-b border-r border-slate-200 dark:border-slate-800 px-4 py-3 text-center font-medium">
|
||||
最后更新时间
|
||||
</th>
|
||||
<th class="border-b border-r border-slate-200 px-4 py-3 text-center font-medium">
|
||||
<th class="border-b border-r border-slate-200 dark:border-slate-800 px-4 py-3 text-center font-medium">
|
||||
状态
|
||||
</th>
|
||||
<th class="border-b border-slate-200 px-4 py-3 text-center font-medium">
|
||||
<th class="border-b border-slate-200 dark:border-slate-800 px-4 py-3 text-center font-medium">
|
||||
操作
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<tr v-for="plan in volunteerPlans" :key="plan.id" class="transition-colors hover:bg-slate-50">
|
||||
<td class="border-r border-slate-100 px-4 py-3">
|
||||
<tbody class="divide-y divide-slate-100 dark:divide-slate-800">
|
||||
<tr v-for="plan in volunteerPlans" :key="plan.id" class="transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/50">
|
||||
<td class="border-r border-slate-100 dark:border-slate-800 px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-slate-700 font-medium">{{ plan.name }}</span>
|
||||
<span class="text-slate-700 dark:text-slate-300 font-medium">{{ plan.name }}</span>
|
||||
<span
|
||||
class="rounded px-1.5 py-0.5 text-[10px]"
|
||||
:class="plan.tag === '手动' ? 'bg-orange-50 text-orange-500' : 'bg-blue-50 text-blue-500'"
|
||||
:class="plan.tag === '手动' ? 'bg-orange-50 dark:bg-orange-900/20 text-orange-500 dark:text-orange-400' : 'bg-blue-50 dark:bg-blue-900/20 text-blue-500 dark:text-blue-400'"
|
||||
>
|
||||
{{ plan.tag }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border-r border-slate-100 px-4 py-3 text-center text-slate-600">
|
||||
<td class="border-r border-slate-100 dark:border-slate-800 px-4 py-3 text-center text-slate-600 dark:text-slate-400">
|
||||
{{ plan.province }}
|
||||
</td>
|
||||
<td class="border-r border-slate-100 px-4 py-3 text-center text-slate-600">
|
||||
<td class="border-r border-slate-100 dark:border-slate-800 px-4 py-3 text-center text-slate-600 dark:text-slate-400">
|
||||
{{ plan.artType }}
|
||||
</td>
|
||||
<td class="border-r border-slate-100 px-4 py-3 text-center">
|
||||
<span class="text-slate-800 font-medium">{{ plan.cultureScore }}</span>
|
||||
<span class="ml-1 text-xs text-slate-400">{{ plan.cultureSubjects }}</span>
|
||||
<td class="border-r border-slate-100 dark:border-slate-800 px-4 py-3 text-center">
|
||||
<span class="text-slate-800 dark:text-slate-200 font-medium">{{ plan.cultureScore }}</span>
|
||||
<span class="ml-1 text-xs text-slate-400 dark:text-slate-500">{{ plan.cultureSubjects }}</span>
|
||||
</td>
|
||||
<td class="border-r border-slate-100 px-4 py-3 text-center text-slate-800 font-medium">
|
||||
<td class="border-r border-slate-100 dark:border-slate-800 px-4 py-3 text-center text-slate-800 dark:text-slate-200 font-medium">
|
||||
{{
|
||||
plan.artScore }}
|
||||
</td>
|
||||
<td class="border-r border-slate-100 px-4 py-3 text-center text-xs text-slate-500 font-mono">
|
||||
<td class="border-r border-slate-100 dark:border-slate-800 px-4 py-3 text-center text-xs text-slate-500 dark:text-slate-500 font-mono">
|
||||
{{
|
||||
plan.updateTime }}
|
||||
</td>
|
||||
<td class="border-r border-slate-100 px-4 py-3 text-center text-slate-600">
|
||||
<td class="border-r border-slate-100 dark:border-slate-800 px-4 py-3 text-center text-slate-600 dark:text-slate-400">
|
||||
{{ plan.status }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
|
|
@ -1565,13 +1565,13 @@ function deletePlan(planId: string) {
|
|||
>
|
||||
切换
|
||||
</button>
|
||||
<span class="text-slate-300">|</span>
|
||||
<button class="text-xs text-slate-600 hover:text-slate-900 hover:underline">
|
||||
<span class="text-slate-300 dark:text-slate-700">|</span>
|
||||
<button class="text-xs text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 hover:underline">
|
||||
导出
|
||||
</button>
|
||||
<span class="text-slate-300">|</span>
|
||||
<span class="text-slate-300 dark:text-slate-700">|</span>
|
||||
<button
|
||||
class="text-xs text-slate-600 hover:text-red-600 hover:underline"
|
||||
class="text-xs text-slate-600 dark:text-slate-400 hover:text-red-600 dark:hover:text-red-400 hover:underline"
|
||||
@click="deletePlan(plan.id)"
|
||||
>
|
||||
删除
|
||||
|
|
|
|||
Loading…
Reference in New Issue