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.
## 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)
逻辑默认显示 (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)"
>
删除