From 4f1e49ce8508eb1c7d35ec98e8c9dbe18a7bca87 Mon Sep 17 00:00:00 2001
From: MoeSnowyFox <SnowyFox_@outlook.com>
Date: Sun, 21 Sep 2025 23:37:27 +0800
Subject: [PATCH] =?UTF-8?q?fix(plan):=20=E4=BC=98=E5=8C=96=E8=AE=A1?=
 =?UTF-8?q?=E5=88=92=E8=A1=A8=E6=A0=BC=E6=A0=B7=E5=BC=8F=E4=B8=8E=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/plan/tables/MaaPlanTable.vue    | 103 +++++++++++++++---
 1 file changed, 89 insertions(+), 14 deletions(-)

diff --git a/frontend/src/views/plan/tables/MaaPlanTable.vue b/frontend/src/views/plan/tables/MaaPlanTable.vue
index 99d3216..9779a8b 100644
--- a/frontend/src/views/plan/tables/MaaPlanTable.vue
+++ b/frontend/src/views/plan/tables/MaaPlanTable.vue
@@ -25,6 +25,7 @@
               :placeholder="getPlaceholder(record.taskName)"
               class="config-input-number"
               :controls="false"
+              :bordered="false"
               :disabled="isColumnDisabled(column.key as string)"
             />
           </template>
@@ -50,10 +51,11 @@
                 },
               ]"
               allow-clear
+              :bordered="false"
               :disabled="isColumnDisabled(column.key as string)"
             >
               <template #dropdownRender="{ menuNode: menu }">
-                <v-nodes :vnodes="menu" />
+                <component :is="VNodeRenderer" :vnodes="menu" />
                 <a-divider style="margin: 4px 0" />
                 <a-space style="padding: 4px 8px" size="small">
                   <a-input
@@ -61,6 +63,8 @@
                     placeholder="自定义"
                     style="flex: 1"
                     size="small"
+                    :bordered="false"
+                    class="config-text-input"
                     @keyup.enter="addCustomStage(record.key, column.key as string)"
                   />
                   <a-button
@@ -119,6 +123,7 @@
               :placeholder="getPlaceholder(record.taskName)"
               class="config-select"
               allow-clear
+              :bordered="false"
               :disabled="isColumnDisabled(column.key as string)"
             />
           </template>
@@ -141,8 +146,8 @@
             <a-space>
               <a-tooltip title="开/关所有可用关卡" placement="left">
                 <a-button ghost size="small" type="primary" @click="enableAllStages(record.key)"
-                  >开</a-button
-                >
+                  >开
+                </a-button>
               </a-tooltip>
               <a-button size="small" danger @click="disableAllStages(record.key)">关</a-button>
             </a-space>
@@ -150,9 +155,9 @@
 
           <template v-else-if="column.key === 'taskName'">
             <div class="task-name-cell">
-              <a-tag :color="getSimpleTaskTagColor(record.taskName)" class="task-tag">{{
-                record.taskName
-              }}</a-tag>
+              <a-tag :color="getSimpleTaskTagColor(record.taskName)" class="task-tag"
+                >{{ record.taskName }}
+              </a-tag>
             </div>
           </template>
 
@@ -206,7 +211,8 @@ const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
 // 渲染VNode的辅助组件
-const VNodes = defineComponent({
+const VNodeRenderer = defineComponent({
+  name: 'VNodeRenderer',
   props: { vnodes: { type: Object, required: true } },
   setup(p) {
     return () => p.vnodes as any
@@ -422,7 +428,7 @@ const stageOptions = computed(() => {
 const isCustomStage = (value: string, columnKey: string) => {
   if (!value || value === '-') return false
   const dayNumber = getDayNumber(columnKey)
-  let availableStages: string[] = []
+  let availableStages: string[]
   if (dayNumber === 0) {
     availableStages = STAGE_DAILY_INFO.map(stage => stage.value)
   } else {
@@ -698,12 +704,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.config-table-wrapper {
-}
-
-.simple-table-wrapper {
-}
-
+/* Inputs/selects: borderless + centered */
 .config-select {
   width: 100%;
   min-width: 100px;
@@ -712,10 +713,84 @@ onMounted(() => {
 .config-input-number {
   width: 100%;
   min-width: 100px;
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+.config-input-number:hover,
+.config-input-number:focus,
+.config-input-number:active {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.config-input-number input {
+  text-align: center;
+}
+
+/* Ensure centered text in all states for Ant Design Vue InputNumber */
+.config-input-number :deep(.ant-input-number-input) {
+  text-align: center;
+}
+
+/* Remove number input handlers spacing (already controls=false) */
+.config-input-number :deep(.ant-input-number-handler-wrap) {
+  display: none;
+}
+
+/* Select: borderless */
+.config-select :deep(.ant-select-selector) {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+}
+
+.config-select :deep(.ant-select-focused .ant-select-selector),
+.config-select :deep(.ant-select:hover .ant-select-selector) {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* Center selected text and placeholder */
+.config-select :deep(.ant-select-selection-item),
+.config-select :deep(.ant-select-selection-placeholder) {
+  width: 100%;
+  text-align: center;
+  margin-inline-start: 0 !important;
+}
+
+/* Clear icon alignment without shifting text */
+.config-select :deep(.ant-select-clear) {
+  right: 4px;
+}
+
+/* Disabled states keep borderless look */
+.config-select :deep(.ant-select-disabled .ant-select-selector) {
+  background: transparent !important;
+}
+
+/* Borderless text input in dropdown */
+.config-text-input {
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  text-align: center;
+}
+
+.config-text-input:hover,
+.config-text-input:focus {
+  border: none !important;
+  box-shadow: none !important;
 }
 
 .task-name-cell {
   display: flex;
   justify-content: center;
 }
+
+/* Ensure table body cell content stays centered visually */
+:deep(.config-table .ant-table-tbody > tr > td) {
+  text-align: center;
+}
 </style>