fix(plan): 优化计划表格样式与交互

This commit is contained in:
MoeSnowyFox
2025-09-21 23:37:27 +08:00
parent db0ac79e44
commit 4f1e49ce85

View File

@@ -25,6 +25,7 @@
:placeholder="getPlaceholder(record.taskName)" :placeholder="getPlaceholder(record.taskName)"
class="config-input-number" class="config-input-number"
:controls="false" :controls="false"
:bordered="false"
:disabled="isColumnDisabled(column.key as string)" :disabled="isColumnDisabled(column.key as string)"
/> />
</template> </template>
@@ -50,10 +51,11 @@
}, },
]" ]"
allow-clear allow-clear
:bordered="false"
:disabled="isColumnDisabled(column.key as string)" :disabled="isColumnDisabled(column.key as string)"
> >
<template #dropdownRender="{ menuNode: menu }"> <template #dropdownRender="{ menuNode: menu }">
<v-nodes :vnodes="menu" /> <component :is="VNodeRenderer" :vnodes="menu" />
<a-divider style="margin: 4px 0" /> <a-divider style="margin: 4px 0" />
<a-space style="padding: 4px 8px" size="small"> <a-space style="padding: 4px 8px" size="small">
<a-input <a-input
@@ -61,6 +63,8 @@
placeholder="自定义" placeholder="自定义"
style="flex: 1" style="flex: 1"
size="small" size="small"
:bordered="false"
class="config-text-input"
@keyup.enter="addCustomStage(record.key, column.key as string)" @keyup.enter="addCustomStage(record.key, column.key as string)"
/> />
<a-button <a-button
@@ -119,6 +123,7 @@
:placeholder="getPlaceholder(record.taskName)" :placeholder="getPlaceholder(record.taskName)"
class="config-select" class="config-select"
allow-clear allow-clear
:bordered="false"
:disabled="isColumnDisabled(column.key as string)" :disabled="isColumnDisabled(column.key as string)"
/> />
</template> </template>
@@ -141,8 +146,8 @@
<a-space> <a-space>
<a-tooltip title="/关所有可用关卡" placement="left"> <a-tooltip title="/关所有可用关卡" placement="left">
<a-button ghost size="small" type="primary" @click="enableAllStages(record.key)" <a-button ghost size="small" type="primary" @click="enableAllStages(record.key)"
>开</a-button >开
> </a-button>
</a-tooltip> </a-tooltip>
<a-button size="small" danger @click="disableAllStages(record.key)">关</a-button> <a-button size="small" danger @click="disableAllStages(record.key)">关</a-button>
</a-space> </a-space>
@@ -150,9 +155,9 @@
<template v-else-if="column.key === 'taskName'"> <template v-else-if="column.key === 'taskName'">
<div class="task-name-cell"> <div class="task-name-cell">
<a-tag :color="getSimpleTaskTagColor(record.taskName)" class="task-tag">{{ <a-tag :color="getSimpleTaskTagColor(record.taskName)" class="task-tag"
record.taskName >{{ record.taskName }}
}}</a-tag> </a-tag>
</div> </div>
</template> </template>
@@ -206,7 +211,8 @@ const props = defineProps<Props>()
const emit = defineEmits<Emits>() const emit = defineEmits<Emits>()
// 渲染VNode的辅助组件 // 渲染VNode的辅助组件
const VNodes = defineComponent({ const VNodeRenderer = defineComponent({
name: 'VNodeRenderer',
props: { vnodes: { type: Object, required: true } }, props: { vnodes: { type: Object, required: true } },
setup(p) { setup(p) {
return () => p.vnodes as any return () => p.vnodes as any
@@ -422,7 +428,7 @@ const stageOptions = computed(() => {
const isCustomStage = (value: string, columnKey: string) => { const isCustomStage = (value: string, columnKey: string) => {
if (!value || value === '-') return false if (!value || value === '-') return false
const dayNumber = getDayNumber(columnKey) const dayNumber = getDayNumber(columnKey)
let availableStages: string[] = [] let availableStages: string[]
if (dayNumber === 0) { if (dayNumber === 0) {
availableStages = STAGE_DAILY_INFO.map(stage => stage.value) availableStages = STAGE_DAILY_INFO.map(stage => stage.value)
} else { } else {
@@ -698,12 +704,7 @@ onMounted(() => {
</script> </script>
<style scoped> <style scoped>
.config-table-wrapper { /* Inputs/selects: borderless + centered */
}
.simple-table-wrapper {
}
.config-select { .config-select {
width: 100%; width: 100%;
min-width: 100px; min-width: 100px;
@@ -712,10 +713,84 @@ onMounted(() => {
.config-input-number { .config-input-number {
width: 100%; width: 100%;
min-width: 100px; 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 { .task-name-cell {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
/* Ensure table body cell content stays centered visually */
:deep(.config-table .ant-table-tbody > tr > td) {
text-align: center;
}
</style> </style>