From 7f622de85722084e6eaf3359945ddfb69af80f43 Mon Sep 17 00:00:00 2001
From: AoXuan <aoxuan233@gmail.com>
Date: Tue, 2 Sep 2025 14:50:24 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E9=94=99=E8=AF=AF=EF=BC=8C=E9=87=8D=E6=96=B0?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E5=8C=96=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/LogViewer.vue         |   4 +-
 frontend/src/components/NoticeModal.vue       |   3 +-
 frontend/src/components/ScriptTable.vue       |  27 +-
 .../components/initialization/BackendStep.vue |   4 +-
 .../initialization/DependenciesStep.vue       |  41 +-
 .../src/components/initialization/GitStep.vue |  13 -
 .../components/initialization/ManualMode.vue  |   4 -
 .../components/initialization/PythonStep.vue  |   4 +-
 .../src/components/queue/QueueItemManager.vue |  15 +-
 .../src/components/queue/TimeSetManager.vue   |  18 +-
 frontend/src/router/index.ts                  |  68 ++--
 frontend/src/views/Home.vue                   |   2 +-
 frontend/src/views/Plans.vue                  | 384 +++++++++---------
 frontend/src/views/Queue.vue                  |   2 +-
 frontend/src/views/Scripts.vue                |  11 +-
 frontend/tsconfig.electron.json               |  16 +-
 16 files changed, 268 insertions(+), 348 deletions(-)

diff --git a/frontend/src/components/LogViewer.vue b/frontend/src/components/LogViewer.vue
index 51f554c..c890ad5 100644
--- a/frontend/src/components/LogViewer.vue
+++ b/frontend/src/components/LogViewer.vue
@@ -252,7 +252,7 @@ onUnmounted(() => {
 }
 
 .log-entry:hover {
-  background: var(--ant-color-fill-quaternary);
+
 }
 
 .log-highlight {
@@ -311,7 +311,7 @@ onUnmounted(() => {
 }
 
 .log-data-content {
-  background: var(--ant-color-fill-quaternary);
+
   padding: 8px;
   border-radius: 4px;
   margin-top: 4px;
diff --git a/frontend/src/components/NoticeModal.vue b/frontend/src/components/NoticeModal.vue
index 360010d..1db6594 100644
--- a/frontend/src/components/NoticeModal.vue
+++ b/frontend/src/components/NoticeModal.vue
@@ -92,10 +92,9 @@ const md = new MarkdownIt({
 const notices = computed(() => Object.keys(props.noticeData))
 
 // 当前公告索引
-const currentNoticeIndex = computed(() => {
+computed(() => {
   return notices.value.findIndex(title => title === activeNoticeKey.value)
 })
-
 // 渲染 markdown
 const renderMarkdown = (content: string) => {
   return md.render(content)
diff --git a/frontend/src/components/ScriptTable.vue b/frontend/src/components/ScriptTable.vue
index 9c1cefb..d3ea0ff 100644
--- a/frontend/src/components/ScriptTable.vue
+++ b/frontend/src/components/ScriptTable.vue
@@ -211,10 +211,7 @@
                         剩余关卡: {{ user.Info.Stage_Remain }}
                       </a-tag>
 
-                      <a-tag
-                        class="info-tag"
-                        color="magenta"
-                      >
+                      <a-tag class="info-tag" color="magenta">
                         备注: {{ truncateText(user.Info.Notes) }}
                       </a-tag>
                     </div>
@@ -270,10 +267,7 @@
 
           <!-- 空状态 -->
           <div v-else class="empty-users">
-            <a-empty
-              description="暂无用户"
-              class="compact-empty"
-            >
+            <a-empty description="暂无用户" class="compact-empty">
               <a-button type="primary" size="small" @click="handleAddUser(script)">
                 <template #icon>
                   <PlusOutlined />
@@ -365,23 +359,6 @@ const handleDisconnectMAA = (script: Script) => {
 const handleToggleUserStatus = (user: User) => {
   emit('toggleUserStatus', user)
 }
-
-function get_annihilation_name(annihilation_name) {
-  if (annihilation_name == 'Annihilation') {
-    return '当期剿灭'
-  }
-  if (annihilation_name == 'Chernobog@Annihilation') {
-    return '切尔诺伯格'
-  }
-  if (annihilation_name == 'LungmenOutskirts@Annihilation') {
-    return '龙门外环'
-  }
-  if (annihilation_name == 'LungmenDowntown@Annihilation') {
-    return '龙门市区'
-  }
-  return '未开启'
-}
-
 const truncateText = (text: string, maxLength: number = 10): string => {
   if (!text) return ''
   return text.length > maxLength ? text.substring(0, maxLength) + '...' : text
diff --git a/frontend/src/components/initialization/BackendStep.vue b/frontend/src/components/initialization/BackendStep.vue
index 4223803..f14f910 100644
--- a/frontend/src/components/initialization/BackendStep.vue
+++ b/frontend/src/components/initialization/BackendStep.vue
@@ -23,7 +23,7 @@
                 <h4>{{ mirror.name }}</h4>
                 <a-tag v-if="mirror.recommended" color="gold" size="small">推荐</a-tag>
               </div>
-              <div class="speed-badge" :class="getSpeedClass(mirror.speed)">
+              <div class="speed-badge" :class="getSpeedClass(mirror.speed ?? null)">
                 <span v-if="mirror.speed === null && !testingGitSpeed">未测试</span>
                 <span v-else-if="testingGitSpeed">测试中...</span>
                 <span v-else-if="mirror.speed === 9999">超时</span>
@@ -54,7 +54,7 @@
               <div class="mirror-title">
                 <h4>{{ mirror.name }}</h4>
               </div>
-              <div class="speed-badge" :class="getSpeedClass(mirror.speed)">
+              <div class="speed-badge" :class="getSpeedClass(mirror.speed ?? null)">
                 <span v-if="mirror.speed === null && !testingGitSpeed">未测试</span>
                 <span v-else-if="testingGitSpeed">测试中...</span>
                 <span v-else-if="mirror.speed === 9999">超时</span>
diff --git a/frontend/src/components/initialization/DependenciesStep.vue b/frontend/src/components/initialization/DependenciesStep.vue
index b1c9fb8..65bf215 100644
--- a/frontend/src/components/initialization/DependenciesStep.vue
+++ b/frontend/src/components/initialization/DependenciesStep.vue
@@ -23,7 +23,7 @@
                 <h4>{{ mirror.name }}</h4>
                 <a-tag v-if="mirror.recommended" color="gold" size="small">推荐</a-tag>
               </div>
-              <div class="speed-badge" :class="getSpeedClass(mirror.speed)">
+              <div class="speed-badge" :class="getSpeedClass(mirror.speed ?? null)">
                 <span v-if="mirror.speed === null && !testingPipSpeed">未测试</span>
                 <span v-else-if="testingPipSpeed">测试中...</span>
                 <span v-else-if="mirror.speed === 9999">超时</span>
@@ -54,7 +54,7 @@
               <div class="mirror-title">
                 <h4>{{ mirror.name }}</h4>
               </div>
-              <div class="speed-badge" :class="getSpeedClass(mirror.speed)">
+              <div class="speed-badge" :class="getSpeedClass(mirror.speed ?? null)">
                 <span v-if="mirror.speed === null && !testingPipSpeed">未测试</span>
                 <span v-else-if="testingPipSpeed">测试中...</span>
                 <span v-else-if="mirror.speed === 9999">超时</span>
@@ -80,12 +80,12 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { getConfig, saveConfig } from '@/utils/config'
-import { 
-  PIP_MIRRORS, 
-  getOfficialMirrors, 
+import {
+  PIP_MIRRORS,
+  getOfficialMirrors,
   getMirrorMirrors,
   sortMirrorsBySpeedAndRecommendation,
-  type MirrorConfig 
+  type MirrorConfig,
 } from '@/config/mirrors'
 
 const pipMirrors = ref<MirrorConfig[]>(PIP_MIRRORS)
@@ -95,7 +95,9 @@ const officialMirrors = computed(() => getOfficialMirrors('pip'))
 const mirrorMirrors = computed(() => getMirrorMirrors('pip'))
 
 // 按速度和推荐排序的镜像源
-const sortedOfficialMirrors = computed(() => sortMirrorsBySpeedAndRecommendation(officialMirrors.value))
+const sortedOfficialMirrors = computed(() =>
+  sortMirrorsBySpeedAndRecommendation(officialMirrors.value)
+)
 const sortedMirrorMirrors = computed(() => sortMirrorsBySpeedAndRecommendation(mirrorMirrors.value))
 
 const selectedPipMirror = ref('aliyun')
@@ -259,8 +261,6 @@ onMounted(async () => {
   color: var(--ant-color-text);
 }
 
-
-
 .speed-badge {
   padding: 4px 8px;
   border-radius: 4px;
@@ -268,26 +268,6 @@ onMounted(async () => {
   font-weight: 500;
 }
 
-.speed-badge.speed-unknown {
-  color: var(--ant-color-text-tertiary);
-}
-
-.speed-badge.speed-fast {
-  color: var(--ant-color-success);
-}
-
-.speed-badge.speed-medium {
-  color: var(--ant-color-warning);
-}
-
-.speed-badge.speed-slow {
-  color: var(--ant-color-error);
-}
-
-.speed-badge.speed-timeout {
-  color: var(--ant-color-error);
-}
-
 .mirror-description {
   font-size: 13px;
   color: var(--ant-color-text-secondary);
@@ -301,7 +281,6 @@ onMounted(async () => {
   word-break: break-all;
 }
 
-
 .section-header {
   display: flex;
   align-items: center;
@@ -327,4 +306,4 @@ onMounted(async () => {
   font-size: 12px;
   color: var(--ant-color-text-tertiary);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/initialization/GitStep.vue b/frontend/src/components/initialization/GitStep.vue
index 42fbdf9..356fe5a 100644
--- a/frontend/src/components/initialization/GitStep.vue
+++ b/frontend/src/components/initialization/GitStep.vue
@@ -105,17 +105,4 @@ defineExpose({
   gap: 20px;
 }
 
-.reinstall-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-}
-
-.reinstall-note {
-  font-size: 12px;
-  color: var(--ant-color-text-tertiary);
-  text-align: center;
-  margin: 0;
-}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/initialization/ManualMode.vue b/frontend/src/components/initialization/ManualMode.vue
index b61b72c..14460d1 100644
--- a/frontend/src/components/initialization/ManualMode.vue
+++ b/frontend/src/components/initialization/ManualMode.vue
@@ -160,10 +160,6 @@ const dependenciesStepRef = ref()
 const serviceStepRef = ref()
 
 // 事件处理
-function handleSkipToHome() {
-  props.onSkipToHome()
-}
-
 function handleJumpToStep(step: number) {
   currentStep.value = step
 }
diff --git a/frontend/src/components/initialization/PythonStep.vue b/frontend/src/components/initialization/PythonStep.vue
index 917871e..fa8a8f6 100644
--- a/frontend/src/components/initialization/PythonStep.vue
+++ b/frontend/src/components/initialization/PythonStep.vue
@@ -23,7 +23,7 @@
                 <h4>{{ mirror.name }}</h4>
                 <a-tag v-if="mirror.recommended" color="gold" size="small">推荐</a-tag>
               </div>
-              <div class="speed-badge" :class="getSpeedClass(mirror.speed)">
+              <div class="speed-badge" :class="getSpeedClass(mirror.speed ?? null)">
                 <span v-if="mirror.speed === null && !testingSpeed">未测试</span>
                 <span v-else-if="testingSpeed">测试中...</span>
                 <span v-else-if="mirror.speed === 9999">超时</span>
@@ -54,7 +54,7 @@
               <div class="mirror-title">
                 <h4>{{ mirror.name }}</h4>
               </div>
-              <div class="speed-badge" :class="getSpeedClass(mirror.speed)">
+              <div class="speed-badge" :class="getSpeedClass(mirror.speed ?? null)">
                 <span v-if="mirror.speed === null && !testingSpeed">未测试</span>
                 <span v-else-if="testingSpeed">测试中...</span>
                 <span v-else-if="mirror.speed === 9999">超时</span>
diff --git a/frontend/src/components/queue/QueueItemManager.vue b/frontend/src/components/queue/QueueItemManager.vue
index 6b314f3..638e441 100644
--- a/frontend/src/components/queue/QueueItemManager.vue
+++ b/frontend/src/components/queue/QueueItemManager.vue
@@ -48,7 +48,6 @@
       </template>
     </a-table>
 
-
     <!-- 队列项编辑弹窗 -->
     <a-modal
       v-model:open="modalVisible"
@@ -73,17 +72,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch, onMounted, h } from 'vue'
-import { message } from 'ant-design-vue'
-import {
-  PlusOutlined,
-  ReloadOutlined,
-  EditOutlined,
-  DeleteOutlined,
-  MoreOutlined,
-} from '@ant-design/icons-vue'
-import { Service } from '@/api'
+import { onMounted, reactive, ref, watch } from 'vue'
 import type { FormInstance } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
+import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons-vue'
+import { Service } from '@/api'
 
 // Props
 interface Props {
diff --git a/frontend/src/components/queue/TimeSetManager.vue b/frontend/src/components/queue/TimeSetManager.vue
index bed290e..6112100 100644
--- a/frontend/src/components/queue/TimeSetManager.vue
+++ b/frontend/src/components/queue/TimeSetManager.vue
@@ -89,11 +89,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch } from 'vue'
-import { message } from 'ant-design-vue'
-import { PlusOutlined, ReloadOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
-import { Service } from '@/api'
+import { reactive, ref, watch } from 'vue'
 import type { FormInstance } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
+import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons-vue'
+import { Service } from '@/api'
 import dayjs from 'dayjs'
 
 // 时间处理工具函数
@@ -192,11 +192,6 @@ watch(
   { deep: true, immediate: true }
 )
 
-// 刷新数据
-const refreshData = () => {
-  emit('refresh')
-}
-
 // 添加定时项
 const addTimeSet = () => {
   editingTimeSet.value = null
@@ -372,14 +367,12 @@ const deleteTimeSet = async (timeSetId: string) => {
   font-weight: 600;
 }
 
-
 /* 表格样式优化 */
 :deep(.ant-table-tbody > tr > td) {
   padding: 12px 16px;
 }
 
 :deep(.ant-table-thead > tr > th) {
-  background: var(--ant-color-fill-quaternary);
   font-weight: 600;
 }
 
@@ -398,10 +391,9 @@ const deleteTimeSet = async (timeSetId: string) => {
   font-weight: 600;
   color: var(--ant-color-text);
   padding: 4px 8px;
-  background: var(--ant-color-fill-quaternary);
   border-radius: 4px;
   display: inline-block;
   min-width: 60px;
   text-align: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 816ba97..462b35a 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -89,40 +89,40 @@ const router = createRouter({
   routes,
 })
 
-// // 添加路由守卫，确保在生产环境中也能正确进入初始化页面
-// router.beforeEach(async (to, from, next) => {
-//   console.log('路由守卫：', { to: to.path, from: from.path })
-//
-//   // 如果目标就是初始化页，放行并清除一次性标记，避免反复跳转
-//   if (to.path === '/initialization') {
-//     needInitLanding = false
-//     next()
-//     return
-//   }
-//
-//   // （可选）开发环境跳过检查，可按需恢复
-//   const isDev = import.meta.env.VITE_APP_ENV === 'dev'
-//   if (isDev) return next()
-//
-//   // 先按原逻辑：未初始化 => 强制进入初始化
-//   const initialized = await isAppInitialized()
-//   console.log('检查初始化状态：', initialized)
-//   if (!initialized) {
-//     needInitLanding = false // 以免重复重定向
-//     next('/initialization')
-//     return
-//   }
-//
-//   // 已初始化：如果是“本次启动的第一次进入”，也先去初始化页一次
-//   if (needInitLanding) {
-//     needInitLanding = false
-//     next({ path: '/initialization', query: { redirect: to.fullPath } })
-//     return
-//   }
-//
-//   // 其他情况正常放行
-//   next()
-// })
+// 添加路由守卫，确保在生产环境中也能正确进入初始化页面
+router.beforeEach(async (to, from, next) => {
+  console.log('路由守卫：', { to: to.path, from: from.path })
+
+  // 如果目标就是初始化页，放行并清除一次性标记，避免反复跳转
+  if (to.path === '/initialization') {
+    needInitLanding = false
+    next()
+    return
+  }
+
+  // （可选）开发环境跳过检查，可按需恢复
+  const isDev = import.meta.env.VITE_APP_ENV === 'dev'
+  if (isDev) return next()
+
+  // 先按原逻辑：未初始化 => 强制进入初始化
+  const initialized = await isAppInitialized()
+  console.log('检查初始化状态：', initialized)
+  if (!initialized) {
+    needInitLanding = false // 以免重复重定向
+    next('/initialization')
+    return
+  }
+
+  // 已初始化：如果是“本次启动的第一次进入”，也先去初始化页一次
+  if (needInitLanding) {
+    needInitLanding = false
+    next({ path: '/initialization', query: { redirect: to.fullPath } })
+    return
+  }
+
+  // 其他情况正常放行
+  next()
+})
 
 
 export default router
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index d925c27..38baeef 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -724,7 +724,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--ant-color-fill-quaternary);
+
   border-radius: 6px;
   overflow: hidden;
 }
diff --git a/frontend/src/views/Plans.vue b/frontend/src/views/Plans.vue
index 9f4f1e1..5bae8d8 100644
--- a/frontend/src/views/Plans.vue
+++ b/frontend/src/views/Plans.vue
@@ -1,208 +1,196 @@
 <template>
-    <!-- 加载状态 -->
-    <div v-if="loading" class="loading-container">
-      <a-spin size="large" tip="加载中，请稍候..." />
-    </div>
+  <!-- 加载状态 -->
+  <div v-if="loading" class="loading-container">
+    <a-spin size="large" tip="加载中，请稍候..." />
+  </div>
 
-    <!-- 主要内容 -->
-    <div v-else class="plans-main">
-      <!-- 页面头部 -->
-      <div class="plans-header">
-        <div class="header-left">
-          <h1 class="page-title">计划管理</h1>
-        </div>
-        <div class="header-actions">
-          <a-space size="middle">
-            <a-button
-              type="primary"
-              size="large"
-              @click="handleAddPlan"
-              v-if="planList.length > 0 || currentPlanData"
-            >
-              <template #icon>
-                <PlusOutlined />
-              </template>
-              新建计划
-            </a-button>
-
-            <a-popconfirm
-              v-if="planList.length > 0"
-              title="确定要删除这个计划吗？"
-              ok-text="确定"
-              cancel-text="取消"
-              @confirm="handleRemovePlan(activePlanId)"
-            >
-              <a-button
-                danger
-                size="large"
-                :disabled="!activePlanId"
-              >
-                <template #icon>
-                  <DeleteOutlined />
-                </template>
-                删除当前计划
-              </a-button>
-            </a-popconfirm>
-
-            <a-button size="large" @click="handleRefresh">
-              <template #icon>
-                <ReloadOutlined />
-              </template>
-              刷新
-            </a-button>
-          </a-space>
-        </div>
+  <!-- 主要内容 -->
+  <div v-else class="plans-main">
+    <!-- 页面头部 -->
+    <div class="plans-header">
+      <div class="header-left">
+        <h1 class="page-title">计划管理</h1>
       </div>
-
-      <!-- 空状态 -->
-      <div v-if="!planList.length || !currentPlanData" class="empty-state">
-        <a-empty
-          image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
-          :image-style="{ height: '120px' }"
-          description="当前没有计划"
-        >
-          <template #description>
-            <span class="empty-description">
-              您还没有创建任何计划，点击下方按钮来创建您的第一个计划
-            </span>
-          </template>
-          <a-button type="primary" size="large" @click="handleAddPlan">
+      <div class="header-actions">
+        <a-space size="middle">
+          <a-button
+            type="primary"
+            size="large"
+            @click="handleAddPlan"
+            v-if="planList.length > 0 || currentPlanData"
+          >
             <template #icon>
               <PlusOutlined />
             </template>
             新建计划
           </a-button>
-        </a-empty>
-      </div>
 
-      <!-- 计划内容 -->
-      <div v-else class="plans-content">
-        <!-- 计划选择卡片 -->
-        <a-card class="plan-selector-card" :bordered="false">
-          <template #title>
-            <div class="card-title">
-              <span>计划选择</span>
-              <a-tag :color="planList.length > 0 ? 'success' : 'default'">
-                {{ planList.length }} 个计划
-              </a-tag>
-            </div>
-          </template>
-
-          <div class="plan-selection-container">
-            <!-- 计划按钮组 -->
-            <div class="plan-buttons-container">
-              <a-space wrap size="middle">
-                <a-button
-                  v-for="plan in planList"
-                  :key="plan.id"
-                  :type="activePlanId === plan.id ? 'primary' : 'default'"
-                  size="large"
-                  @click="onPlanChange(plan.id)"
-                  class="plan-button"
-                >
-                  {{ plan.name }}
-                </a-button>
-              </a-space>
-            </div>
-          </div>
-        </a-card>
-
-        <!-- 计划配置卡片 -->
-        <a-card class="plan-config-card" :bordered="false">
-          <template #title>
-            <div class="plan-title-container">
-              <div v-if="!isEditingPlanName" class="plan-title-display">
-                <span class="plan-title-text">{{ currentPlanName || '计划配置' }}</span>
-                <a-button
-                  type="text"
-                  size="small"
-                  @click="startEditPlanName"
-                  class="plan-edit-btn"
-                >
-                  <template #icon>
-                    <EditOutlined />
-                  </template>
-                </a-button>
-              </div>
-              <div v-else class="plan-title-edit">
-                <a-input
-                  v-model:value="currentPlanName"
-                  placeholder="请输入计划名称"
-                  size="small"
-                  class="plan-title-input"
-                  @blur="finishEditPlanName"
-                  @pressEnter="finishEditPlanName"
-                  :maxlength="50"
-                  ref="planNameInputRef"
-                />
-              </div>
-            </div>
-          </template>
-          <template #extra>
-            <a-space>
-              <span class="mode-label">执行模式：</span>
-              <a-segmented
-                v-model:value="currentMode"
-                @change="onModeChange"
-                :options="[
-                  { label: '全局模式', value: 'ALL' },
-                  { label: '周计划模式', value: 'Weekly' }
-                ]"
-              />
-            </a-space>
-          </template>
-
-          <!-- 配置表格 -->
-          <div class="config-table-container">
-            <a-table
-              :columns="dynamicTableColumns"
-              :data-source="tableData"
-              :pagination="false"
-              class="config-table"
-              size="middle"
-              :bordered="true"
-              :scroll="{ x: false }"
-            >
-              <template #bodyCell="{ column, record, index }">
-                <template v-if="column.key === 'taskName'">
-                  <div class="task-name-cell">
-                    <a-tag
-                      :color="getTaskTagColor(record.taskName)"
-                      class="task-tag"
-                    >
-                      {{ record.taskName }}
-                    </a-tag>
-                  </div>
-                </template>
-                <template v-else-if="record.taskName === '吃理智药'">
-                  <a-input-number
-                    v-model:value="record[column.key]"
-                    size="small"
-                    :min="0"
-                    :max="999"
-                    :placeholder="getPlaceholder(column.key, record.taskName)"
-                    class="config-input-number"
-                    :controls="false"
-                  />
-                </template>
-                <template v-else>
-                  <a-select
-                    v-model:value="record[column.key]"
-                    size="small"
-                    :options="getSelectOptions(column.key, record.taskName)"
-                    :placeholder="getPlaceholder(column.key, record.taskName)"
-                    class="config-select"
-                    allow-clear
-                    :show-search="true"
-                    :filter-option="filterOption"
-                  />
-                </template>
+          <a-popconfirm
+            v-if="planList.length > 0"
+            title="确定要删除这个计划吗？"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleRemovePlan(activePlanId)"
+          >
+            <a-button danger size="large" :disabled="!activePlanId">
+              <template #icon>
+                <DeleteOutlined />
               </template>
-            </a-table>
-          </div>
-        </a-card>
+              删除当前计划
+            </a-button>
+          </a-popconfirm>
+
+          <a-button size="large" @click="handleRefresh">
+            <template #icon>
+              <ReloadOutlined />
+            </template>
+            刷新
+          </a-button>
+        </a-space>
       </div>
     </div>
+
+    <!-- 空状态 -->
+    <div v-if="!planList.length || !currentPlanData" class="empty-state">
+      <a-empty
+        image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
+        :image-style="{ height: '120px' }"
+        description="当前没有计划"
+      >
+        <template #description>
+          <span class="empty-description">
+            您还没有创建任何计划，点击下方按钮来创建您的第一个计划
+          </span>
+        </template>
+        <a-button type="primary" size="large" @click="handleAddPlan">
+          <template #icon>
+            <PlusOutlined />
+          </template>
+          新建计划
+        </a-button>
+      </a-empty>
+    </div>
+
+    <!-- 计划内容 -->
+    <div v-else class="plans-content">
+      <!-- 计划选择卡片 -->
+      <a-card class="plan-selector-card" :bordered="false">
+        <template #title>
+          <div class="card-title">
+            <span>计划选择</span>
+            <a-tag :color="planList.length > 0 ? 'success' : 'default'">
+              {{ planList.length }} 个计划
+            </a-tag>
+          </div>
+        </template>
+
+        <div class="plan-selection-container">
+          <!-- 计划按钮组 -->
+          <div class="plan-buttons-container">
+            <a-space wrap size="middle">
+              <a-button
+                v-for="plan in planList"
+                :key="plan.id"
+                :type="activePlanId === plan.id ? 'primary' : 'default'"
+                size="large"
+                @click="onPlanChange(plan.id)"
+                class="plan-button"
+              >
+                {{ plan.name }}
+              </a-button>
+            </a-space>
+          </div>
+        </div>
+      </a-card>
+
+      <!-- 计划配置卡片 -->
+      <a-card class="plan-config-card" :bordered="false">
+        <template #title>
+          <div class="plan-title-container">
+            <div v-if="!isEditingPlanName" class="plan-title-display">
+              <span class="plan-title-text">{{ currentPlanName || '计划配置' }}</span>
+              <a-button type="text" size="small" @click="startEditPlanName" class="plan-edit-btn">
+                <template #icon>
+                  <EditOutlined />
+                </template>
+              </a-button>
+            </div>
+            <div v-else class="plan-title-edit">
+              <a-input
+                v-model:value="currentPlanName"
+                placeholder="请输入计划名称"
+                size="small"
+                class="plan-title-input"
+                @blur="finishEditPlanName"
+                @pressEnter="finishEditPlanName"
+                :maxlength="50"
+                ref="planNameInputRef"
+              />
+            </div>
+          </div>
+        </template>
+        <template #extra>
+          <a-space>
+            <span class="mode-label">执行模式：</span>
+            <a-segmented
+              v-model:value="currentMode"
+              @change="onModeChange"
+              :options="[
+                { label: '全局模式', value: 'ALL' },
+                { label: '周计划模式', value: 'Weekly' },
+              ]"
+            />
+          </a-space>
+        </template>
+
+        <!-- 配置表格 -->
+        <div class="config-table-container">
+          <a-table
+            :columns="dynamicTableColumns"
+            :data-source="tableData"
+            :pagination="false"
+            class="config-table"
+            size="middle"
+            :bordered="true"
+            :scroll="{ x: false }"
+          >
+            <template #bodyCell="{ column, record, index }">
+              <template v-if="column.key === 'taskName'">
+                <div class="task-name-cell">
+                  <a-tag :color="getTaskTagColor(record.taskName)" class="task-tag">
+                    {{ record.taskName }}
+                  </a-tag>
+                </div>
+              </template>
+              <template v-else-if="record.taskName === '吃理智药'">
+                <a-input-number
+                  v-model:value="record[column.key]"
+                  size="small"
+                  :min="0"
+                  :max="999"
+                  :placeholder="getPlaceholder(column.key, record.taskName)"
+                  class="config-input-number"
+                  :controls="false"
+                />
+              </template>
+              <template v-else>
+                <a-select
+                  v-model:value="record[column.key]"
+                  size="small"
+                  :options="getSelectOptions(column.key, record.taskName)"
+                  :placeholder="getPlaceholder(column.key, record.taskName)"
+                  class="config-select"
+                  allow-clear
+                  :show-search="true"
+                  :filter-option="filterOption"
+                />
+              </template>
+            </template>
+          </a-table>
+        </div>
+      </a-card>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -539,7 +527,7 @@ const handleSave = async () => {
 const handleAddPlan = async () => {
   try {
     const response = await createPlan('MaaPlan')
-    const defaultName = '新MAA计划表'
+    const defaultName = '新 MAA 计划表'
     const newPlan = {
       id: response.planId,
       name: defaultName,
@@ -741,13 +729,13 @@ onMounted(() => {
 // 新增方法：获取任务标签颜色
 const getTaskTagColor = (taskName: string) => {
   const colorMap: Record<string, string> = {
-    '吃理智药': 'blue',
-    '连战次数': 'green',
-    '关卡选择': 'orange',
+    吃理智药: 'blue',
+    连战次数: 'green',
+    关卡选择: 'orange',
     '备选-1': 'purple',
     '备选-2': 'purple',
     '备选-3': 'purple',
-    '剩余理智': 'cyan'
+    剩余理智: 'cyan',
   }
   return colorMap[taskName] || 'default'
 }
diff --git a/frontend/src/views/Queue.vue b/frontend/src/views/Queue.vue
index 5566603..f93ffa7 100644
--- a/frontend/src/views/Queue.vue
+++ b/frontend/src/views/Queue.vue
@@ -520,7 +520,7 @@ const handleAddQueue = async () => {
     const response = await Service.addQueueApiQueueAddPost()
 
     if (response.code === 200 && response.queueId) {
-      const defaultName = '新调度队列'
+      const defaultName = '新队列'
       const newQueue = {
         id: response.queueId,
         name: defaultName,
diff --git a/frontend/src/views/Scripts.vue b/frontend/src/views/Scripts.vue
index 5a0a4f0..eca0c05 100644
--- a/frontend/src/views/Scripts.vue
+++ b/frontend/src/views/Scripts.vue
@@ -242,18 +242,17 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, onUnmounted, computed } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { message } from 'ant-design-vue'
 import {
-  PlusOutlined,
-  ReloadOutlined,
-  FileTextOutlined,
-  SettingOutlined,
   ClockCircleOutlined,
   FileSearchOutlined,
+  FileTextOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+  SettingOutlined,
   UserOutlined,
-  CheckCircleFilled,
 } from '@ant-design/icons-vue'
 import ScriptTable from '@/components/ScriptTable.vue'
 import type { Script, ScriptType, User } from '@/types/script'
diff --git a/frontend/tsconfig.electron.json b/frontend/tsconfig.electron.json
index ca8e186..a38e5b3 100644
--- a/frontend/tsconfig.electron.json
+++ b/frontend/tsconfig.electron.json
@@ -1,13 +1,23 @@
 {
-  "extends": "./tsconfig.base.json",
   "compilerOptions": {
     "target": "ES2020",
     "module": "CommonJS",
+    "moduleResolution": "Node",
     "strict": true,
-    "outDir": "dist-electron",
+
     "rootDir": "electron",
+    "outDir": "dist-electron",
+
     "esModuleInterop": true,
-    "types": ["node", "electron"]
+    "allowSyntheticDefaultImports": true,
+    "types": ["node", "electron"],
+
+    // 仅供 IDE 跳转可选加入（不影响运行）
+    "baseUrl": ".",
+    "paths": { "@/*": ["./src/*"] },
+
+    // 关键：不要把 ESM import 原样保留，交给 TS 转成 require
+    "verbatimModuleSyntax": false
   },
   "include": ["electron"]
 }