This commit is contained in:
zhouwentao 2026-01-24 20:22:36 +08:00
parent 796bb6b2f6
commit b02d66cc2b
2 changed files with 167 additions and 155 deletions

View File

@ -40,3 +40,15 @@
- Updated Panel B template to use real API data structure. - 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.

View File

@ -593,8 +593,8 @@ function deletePlan(planId: string) {
1. 移动端提示层 (Phone View) 1. 移动端提示层 (Phone View)
逻辑默认显示 (flex) lg (1024px) 及以上屏幕隐藏 逻辑默认显示 (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="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 p-8 shadow-lg"> <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"> <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"> <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> </svg>
</div> </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> </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>或前往微信小程序查看 当前页面包含大量数据表格<br>为保证最佳体验请在 PC 端浏览<br>或前往微信小程序查看
</p> </p>
@ -625,7 +625,7 @@ function deletePlan(planId: string) {
新增左侧固定侧边栏 新增左侧固定侧边栏
========================================================== --> ========================================================== -->
<div <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 占位 --> <!-- Logo 占位 -->
<!-- <div class="mb-8"> <!-- <div class="mb-8">
@ -635,12 +635,12 @@ function deletePlan(planId: string) {
<div class="w-full flex flex-col gap-6 px-2"> <div class="w-full flex flex-col gap-6 px-2">
<button <button
class="group flex flex-col items-center gap-1 rounded-lg p-2 transition-colors" 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'" @click="activePanel = 'market'"
> >
<div <div
class="rounded-full p-2" 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 <svg
xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" 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 <button
class="group flex flex-col items-center gap-1 rounded-lg p-2 transition-colors" 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'" @click="activePanel = 'my-volunteers'"
> >
<div <div
class="relative rounded-full p-2" 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 <svg
xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" 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 <div
id="bPanel" 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: 模拟填志愿 (原有的市场列表) Panel A: 模拟填志愿 (原有的市场列表)
@ -696,7 +696,7 @@ function deletePlan(planId: string) {
========================================================== --> ========================================================== -->
<div v-show="activePanel === 'market'" class="h-full flex flex-col"> <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"> <div class="grid grid-cols-1 select-none gap-6 lg:grid-cols-6">
<!-- Top Toolbar --> <!-- Top Toolbar -->
<div class="lg:col-span-4"> <div class="lg:col-span-4">
@ -712,7 +712,7 @@ function deletePlan(planId: string) {
:class="[ :class="[
currentBatchTab === tab.key currentBatchTab === tab.key
? 'bg-blue-500 text-white border-blue-500' ? '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" ]" @click="currentBatchTab = tab.key"
> >
{{ tab.label }} {{ tab.label }}
@ -726,7 +726,7 @@ function deletePlan(planId: string) {
:class="[ :class="[
currentBatch2Tab === tab.key currentBatch2Tab === tab.key
? 'bg-blue-500 text-white border-blue-500' ? '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" ]" @click="currentBatch2Tab = tab.key"
> >
{{ tab.label }} {{ tab.label }}
@ -742,7 +742,7 @@ function deletePlan(planId: string) {
:class="[ :class="[
currentProbTab === tab.key currentProbTab === tab.key
? 'bg-blue-500 text-white border-blue-500' ? '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" ]" @click="currentProbTab = tab.key"
> >
{{ tab.label }} <span class="ml-1 opacity-90">{{ tab.count }}</span> {{ 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 用于滚动 --> <!-- 关键点h-[calc(100vh-150px)] 用于限制高度overflow-auto 用于滚动 -->
<div <div
ref="scrollContainer" 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" @scroll="handleScroll"
> >
<table class="relative min-w-[1500px] w-full border-collapse text-sm"> <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> <tr>
<!-- 左侧冻结列院校 --> <!-- 左侧冻结列院校 -->
<th <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>
<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>
<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>
<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省内招生 26省内招生
</th> </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>
<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}} {{item}}
</th> </th>
<!-- 右侧冻结列操作 --> <!-- 右侧冻结列操作 -->
<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> </th>
@ -793,38 +793,38 @@ function deletePlan(planId: string) {
</thead> </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"> <template v-for="school in schools" :key="school.schoolCode + school.majorCode">
<!-- Row 1 --> <!-- 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: 院校信息 --> <!-- Sticky Left: 院校信息 -->
<!-- 注意bg-white 是为了遮挡滚动的文字group-hover:bg-slate-50 是为了保持 hover 效果 --> <!-- 注意bg-white 是为了遮挡滚动的文字group-hover:bg-slate-50 是为了保持 hover 效果 -->
<td <td
rowspan="4" 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 }} {{ school.schoolName }}
</div> </div>
<div class="mb-2 flex flex-wrap gap-1 text-xs text-slate-500"> <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 px-1 py-0.5">{{ tag <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> }}</span>
</div> </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 }} 代码 {{ school.schoolCode }}
</div> </div>
</td> </td>
<!-- 中间普通滚动列 --> <!-- 中间普通滚动列 -->
<td rowspan="4" class="border-r border-slate-100 bg-white p-4 align-top group-hover:bg-slate-50"> <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 font-bold"> <div class="mb-1 text-slate-900 dark:text-slate-100 font-bold">
{{ school.majorName }} {{ school.majorName }}
</div> </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 }} {{ school.limitation }}
</div> </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 }} {{ `[${school.enrollmentCode}]` }} {{ school.tuition }}
</div> </div>
</td> </td>
@ -833,7 +833,7 @@ function deletePlan(planId: string) {
rowspan="4" rowspan="4"
class="border-r border-slate-100 bg-white p-2 text-center align-top group-hover:bg-slate-50" 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 }}% {{ school.enrollProbability }}%
</div> </div>
<div class="mb-2 flex justify-center"> <div class="mb-2 flex justify-center">
@ -844,7 +844,7 @@ function deletePlan(planId: string) {
{{ getProbabilityLabel(school.enrollProbability) }} {{ getProbabilityLabel(school.enrollProbability) }}
</div> </div>
</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}} 折合分{{school.studentScore}}
</div> </div>
</td> </td>
@ -853,27 +853,27 @@ function deletePlan(planId: string) {
rowspan="4" rowspan="4"
class="border-r border-slate-100 bg-white p-2 text-center align-top group-hover:bg-slate-50" 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 }} {{ school.planNum }}
</div> </div>
</td> </td>
<!-- 历年数据区域 (横向较宽) --> <!-- 历年数据区域 (横向较宽) -->
<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>
<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 || "-" }} {{ school.historyMajorEnrollMap?.[year]?.enrollmentCount || "-" }}
</td> </td>
<!-- Sticky Right: 操作 --> <!-- Sticky Right: 操作 -->
<td <td
rowspan="4" 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 <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)" @click="openMajorModal(school)"
> >
查看可选专业 查看可选专业
@ -882,25 +882,25 @@ function deletePlan(planId: string) {
</tr> </tr>
<!-- Row 2: 最低分数 --> <!-- Row 2: 最低分数 -->
<tr class="group hover:bg-slate-50"> <tr class="group hover:bg-slate-50 dark:hover:bg-slate-800/50">
<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>
<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 || "-" }} {{ school.historyMajorEnrollMap?.[year]?.admissionLine || "-" }}
</td> </td>
</tr> </tr>
<!-- Row 3: 历年线差 --> <!-- Row 3: 历年线差 -->
<tr class="group hover:bg-slate-50"> <tr class="group hover:bg-slate-50 dark:hover:bg-slate-800/50">
<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>
<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)
? (school.historyMajorEnrollMap[year].admissionLine - school.historyMajorEnrollMap[year].controlLine).toFixed(1) ? (school.historyMajorEnrollMap[year].admissionLine - school.historyMajorEnrollMap[year].controlLine).toFixed(1)
: "-" }} : "-" }}
@ -908,13 +908,13 @@ function deletePlan(planId: string) {
</tr> </tr>
<!-- Row 4: 录取方式 --> <!-- 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 <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>
<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 || "-" }} {{ school.historyMajorEnrollMap?.[year]?.rulesEnrollProbability || "-" }}
</td> </td>
</tr> </tr>
@ -922,7 +922,7 @@ function deletePlan(planId: string) {
<!-- 加载状态条 --> <!-- 加载状态条 -->
<tr v-if="isLoading || isFinished"> <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"> <span v-if="isLoading" class="flex items-center justify-center gap-2">
<svg <svg
class="h-5 w-5 animate-spin text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" 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 v-show="activePanel === 'my-volunteers'" class="h-full flex flex-col animate-fade-in-up">
<div <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>
<div class="flex items-center gap-3"> <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 || '未命名方案' }} {{ currentVolunteerInfo?.volunteerName || '未命名方案' }}
</h2> </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 || '手动' }} {{ volunteerPlans.find(p => p.id === activePlanId)?.tag || '手动' }}
</span> </span>
</div> </div>
<p class="mt-2 text-left text-sm text-slate-500"> <p class="mt-2 text-left text-sm text-slate-500 dark:text-slate-400">
拖拽左侧手柄可调整顺序 <span class="text-blue-600 font-bold">{{ myVolunteers.length }}</span> 个志愿 拖拽左侧手柄可调整顺序 <span class="text-blue-600 dark:text-blue-400 font-bold">{{ myVolunteers.length }}</span> 个志愿
</p> </p>
</div> </div>
@ -971,7 +971,7 @@ function deletePlan(planId: string) {
<div class="flex flex-wrap items-center gap-3"> <div class="flex flex-wrap items-center gap-3">
<!-- 新建 --> <!-- 新建 -->
<button <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" @click="handleCreatePlan"
> >
<svg <svg
@ -985,7 +985,7 @@ function deletePlan(planId: string) {
<!-- 修改 --> <!-- 修改 -->
<button <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" @click="handleEditPlan"
> >
<svg <svg
@ -1002,7 +1002,7 @@ function deletePlan(planId: string) {
<!-- 切换 (点击触发弹窗) --> <!-- 切换 (点击触发弹窗) -->
<button <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" @click="handleSwitchPlan"
> >
<svg <svg
@ -1019,7 +1019,7 @@ function deletePlan(planId: string) {
<!-- 导出 --> <!-- 导出 -->
<button <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" @click="handleExportPlan"
> >
<svg <svg
@ -1035,7 +1035,7 @@ function deletePlan(planId: string) {
</button> </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 <button
:disabled="!isModified || isSaving" :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" 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="[ :class="[
volunteerCurrentTab === tab.key volunteerCurrentTab === tab.key
? 'bg-blue-500 text-white border-blue-500' ? '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)" ]" @click="switchVolunteerTab(tab.key)"
> >
{{ tab.label }} <span class="ml-1 opacity-90">({{ `${tab.count}/${tab.max}` }})</span> {{ tab.label }} <span class="ml-1 opacity-90">({{ `${tab.count}/${tab.max}` }})</span>
</button> </button>
</div> </div>
<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"> <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> <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>
<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>
<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>
<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>
<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>
<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省内招生 25省内招生
</th> </th>
<th class="w-32 p-4 text-center"> <th class="w-32 p-4 text-center">
@ -1089,16 +1089,16 @@ function deletePlan(planId: string) {
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-slate-200"> <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
<tr <tr
v-for="(vol, index) in filteredVolunteers" :key="vol.id" 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)" @dragstart="handleDragStart($event, index)" @dragover="handleDragOver($event)"
@drop="handleDrop(index)" @drop="handleDrop(index)"
> >
<!-- 拖拽手柄列 --> <!-- 拖拽手柄列 -->
<td <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" @mouseleave="dragEnabledIndex = null"
> >
<svg <svg
@ -1110,42 +1110,42 @@ function deletePlan(planId: string) {
</td> </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 }} {{ index + 1 }}
</td> </td>
<!-- 院校信息 --> <!-- 院校信息 -->
<td class="border-r border-slate-200 p-4 text-left"> <td class="border-r border-slate-200 dark:border-slate-700 p-4 text-left">
<div class="text-base text-slate-900 font-bold"> <div class="text-base text-slate-900 dark:text-slate-100 font-bold">
{{ vol.schoolName }} {{ vol.schoolName }}
</div> </div>
<div class="mt-1 flex gap-2"> <div class="mt-1 flex gap-2">
<span <span
v-for="tag in (vol.tags || [vol.province, vol.schoolNature].filter(Boolean))" :key="tag" 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> >{{ tag }}</span>
</div> </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 }} 代码: {{ vol.schoolCode }}
</div> </div>
</td> </td>
<!-- 专业信息 --> <!-- 专业信息 -->
<td class="border-r border-slate-200 p-4"> <td class="border-r border-slate-200 dark:border-slate-700 p-4">
<div class="text-slate-800 font-bold"> <div class="text-slate-800 dark:text-slate-100 font-bold">
{{ vol.majorName }} {{ vol.majorName }}
</div> </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 || '-' }} {{ vol.tuition || '-' }}
</div> </div>
<div class="text-xs text-slate-400"> <div class="text-xs text-slate-400 dark:text-slate-500">
代码: {{ vol.majorCode }} 代码: {{ vol.majorCode }}
</div> </div>
</td> </td>
<!-- 分数/概率 --> <!-- 分数/概率 -->
<td class="border-r border-slate-200 p-4 text-center"> <td class="border-r border-slate-200 dark:border-slate-700 p-4 text-center">
<div class="text-lg font-bold"> <div class="text-lg font-bold text-slate-900 dark:text-slate-100">
{{ vol.enrollProbability }}% {{ vol.enrollProbability }}%
</div> </div>
<!-- <div class="mt-1 text-xs text-slate-500"> <!-- <div class="mt-1 text-xs text-slate-500">
@ -1160,8 +1160,8 @@ function deletePlan(planId: string) {
</td> </td>
<!-- 25省内招生 --> <!-- 25省内招生 -->
<td class="border-r border-slate-200 p-4 text-center"> <td class="border-r border-slate-200 dark:border-slate-700 p-4 text-center">
<div class="text-lg font-bold"> <div class="text-lg font-bold text-slate-900 dark:text-slate-100">
{{ vol.planNum }} {{ vol.planNum }}
</div> </div>
</td> </td>
@ -1188,11 +1188,11 @@ function deletePlan(planId: string) {
<!-- 空状态 --> <!-- 空状态 -->
<tr v-if="myVolunteers.length === 0"> <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="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 <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" viewBox="0 0 24 24" stroke="currentColor"
> >
<path <path
@ -1221,22 +1221,22 @@ function deletePlan(planId: string) {
> >
<!-- 宽度加宽至 1100px 以容纳更多列 --> <!-- 宽度加宽至 1100px 以容纳更多列 -->
<div <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 --> <!-- 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>
<div class="flex items-end gap-3"> <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 }} {{ currentSchool?.schoolName }}
</h3> </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> </div>
<p class="mt-1 text-xs text-slate-500"> <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
该院校下的其他专业列表 该院校下的其他专业列表
</p> </p>
</div> </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 <svg
xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@ -1247,10 +1247,10 @@ function deletePlan(planId: string) {
</div> </div>
<!-- Content: Table --> <!-- 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"> <table class="w-full border-collapse text-left text-sm">
<thead <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> <tr>
<th class="w-16 px-6 py-3"> <th class="w-16 px-6 py-3">
@ -1278,9 +1278,9 @@ function deletePlan(planId: string) {
</th> </th>
</tr> </tr>
</thead> </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"> <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"> <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 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" /> <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>
<tr <tr
v-for="major in modalMajors" v-else :key="major.code" 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 }} {{ major.enrollmentCode }}
</td> </td>
<td class="px-6 py-4"> <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 }} {{ major.name }}
</div> </div>
<div class="mt-1 flex gap-2 text-xs text-slate-500"> <div class="mt-1 flex gap-2 text-xs text-slate-500 dark:text-slate-400">
<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.batch major.batch
}}</span> }}</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 major.tuition
}}</span> }}</span>
</div> </div>
@ -1313,26 +1313,26 @@ function deletePlan(planId: string) {
class="font-bold" :class="getStatusColor(getProbabilityLabel(major.prob))" class="font-bold" :class="getStatusColor(getProbabilityLabel(major.prob))"
>{{ major.prob }}%</span> >{{ major.prob }}%</span>
</td> </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 }} {{ major.score }}
</td> </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 }} {{ major.rulesEnrollProbability }}
</td> </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 }} {{ major.plan }}
</td> </td>
<!-- 操作列加入/移除 --> <!-- 操作列加入/移除 -->
<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 <button
class="min-w-[90px] rounded-full px-3 py-1.5 text-xs font-medium transition-all duration-200" class="min-w-[90px] rounded-full px-3 py-1.5 text-xs font-medium transition-all duration-200"
:class="[ :class="[
selectedMajorCodes.includes(`${currentSchool?.schoolCode}_${major.code}_${major.enrollmentCode || currentSchool?.enrollmentCode}`) 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-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 text-blue-600 border border-blue-500 hover:bg-blue-50', // : '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)" ]" @click="toggleMajor(major)"
> >
{{ getVolunteerBtnText(major) }} {{ getVolunteerBtnText(major) }}
@ -1344,17 +1344,17 @@ function deletePlan(planId: string) {
</div> </div>
<!-- Footer: Confirm with Popover --> <!-- Footer: Confirm with Popover -->
<div class="relative flex items-center justify-between border-t border-slate-200 bg-white p-4"> <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"> <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 selectedMajorCodes.length
}}</span> }}</span>
个志愿 个志愿
</div> </div>
<div class="relative flex gap-3"> <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> </button>
@ -1389,11 +1389,11 @@ function deletePlan(planId: string) {
<!-- 气泡层 --> <!-- 气泡层 -->
<div <div
v-if="showSaveConfirm" 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 <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"> <div class="mb-3 flex items-start gap-3">
@ -1407,10 +1407,10 @@ function deletePlan(planId: string) {
</svg> </svg>
</div> </div>
<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>
<p class="mt-1 text-xs text-slate-500"> <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
提交后将更新您的志愿表已选 提交后将更新您的志愿表已选
{{ selectedMajorCodes.length }} 个专业 {{ selectedMajorCodes.length }} 个专业
</p> </p>
@ -1419,7 +1419,7 @@ function deletePlan(planId: string) {
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
<button <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" @click="showSaveConfirm = false"
> >
再想想 再想想
@ -1452,16 +1452,16 @@ function deletePlan(planId: string) {
@click.self="showSwitchModal = false" @click.self="showSwitchModal = false"
> >
<div <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 --> <!-- Header -->
<div class="flex items-center justify-between border-b border-slate-200 px-6 py-4"> <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 font-bold"> <h3 class="text-lg text-slate-800 dark:text-slate-100 font-bold">
我的志愿方案 我的志愿方案
</h3> </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 <svg
xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@ -1472,16 +1472,16 @@ function deletePlan(planId: string) {
</div> </div>
<!-- Toolbar / Filter --> <!-- 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"> <div class="relative">
<select <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> <option>北京</option>
<option>湖北</option> <option>湖北</option>
</select> </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"> <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" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg> </svg>
@ -1490,68 +1490,68 @@ function deletePlan(planId: string) {
</div> </div>
<!-- Table --> <!-- Table -->
<div class="flex-1 overflow-auto p-6"> <div class="flex-1 overflow-auto p-6 bg-white dark:bg-slate-900">
<table class="w-full border border-slate-200 text-left text-sm"> <table class="w-full border border-slate-200 dark:border-slate-800 text-left text-sm">
<thead class="bg-slate-50 text-slate-500"> <thead class="bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400">
<tr> <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>
<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>
<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>
<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>
<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>
<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>
<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>
<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> </th>
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-slate-100"> <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"> <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 px-4 py-3"> <td class="border-r border-slate-100 dark:border-slate-800 px-4 py-3">
<div class="flex items-center gap-2"> <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 <span
class="rounded px-1.5 py-0.5 text-[10px]" 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 }} {{ plan.tag }}
</span> </span>
</div> </div>
</td> </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 }} {{ plan.province }}
</td> </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 }} {{ plan.artType }}
</td> </td>
<td class="border-r border-slate-100 px-4 py-3 text-center"> <td class="border-r border-slate-100 dark:border-slate-800 px-4 py-3 text-center">
<span class="text-slate-800 font-medium">{{ plan.cultureScore }}</span> <span class="text-slate-800 dark:text-slate-200 font-medium">{{ plan.cultureScore }}</span>
<span class="ml-1 text-xs text-slate-400">{{ plan.cultureSubjects }}</span> <span class="ml-1 text-xs text-slate-400 dark:text-slate-500">{{ plan.cultureSubjects }}</span>
</td> </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 }} plan.artScore }}
</td> </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 }} plan.updateTime }}
</td> </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 }} {{ plan.status }}
</td> </td>
<td class="px-4 py-3 text-center"> <td class="px-4 py-3 text-center">
@ -1565,13 +1565,13 @@ function deletePlan(planId: string) {
> >
切换 切换
</button> </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-slate-900 hover:underline"> <button class="text-xs text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 hover:underline">
导出 导出
</button> </button>
<span class="text-slate-300">|</span> <span class="text-slate-300 dark:text-slate-700">|</span>
<button <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)" @click="deletePlan(plan.id)"
> >
删除 删除