feat(cultivate): 添加花朵阶段中文标题并优化编辑页展示

新增阶段中文名映射及转换函数,用于显示更友好的阶段名称
在编辑页中应用阶段标题,同时调整下一阶段输入框为只读展示
优化弹窗宽度样式,适配不同屏幕尺寸
This commit is contained in:
Austin
2026-10-10 10:08:22 +08:00
parent 55ae8b2acd
commit 667e62e97e
2 changed files with 21 additions and 6 deletions
+13 -5
View File
@@ -13,9 +13,9 @@
<n-gi><n-form-item label="默认分享标签"><n-input v-model:value="formValue.shareConfig.default_tag" /></n-form-item></n-gi>
</n-grid>
<n-divider title-placement="left">成长阶段</n-divider>
<n-card v-for="rule in formValue.stageRules" :key="rule.stage" size="small" class="stage-card" :title="rule.stage">
<n-grid cols="1 s:1 m:3" responsive="screen" :x-gap="12">
<n-gi><n-form-item label="下一阶段"><n-input v-model:value="rule.nextStage" disabled /></n-form-item></n-gi>
<n-card v-for="rule in formValue.stageRules" :key="rule.stage" size="small" class="stage-card" :title="stageTitle(rule.stage)">
<n-grid cols="1 s:2 m:3" responsive="screen" :x-gap="12">
<n-gi><n-form-item label="下一阶段"><n-input :value="stageTitle(rule.nextStage)" disabled /></n-form-item></n-gi>
<n-gi><n-form-item label="升级成长值"><n-input-number v-model:value="rule.requiredPoints" :min="0" /></n-form-item></n-gi>
<n-gi><n-form-item label="等待时长(小时)" :show-feedback="false"><n-input-number v-model:value="rule.waitHours" :min="0" :disabled="rule.stage === 'bloom'" placeholder="0 表示不等待" /></n-form-item></n-gi>
<n-gi><n-form-item label="允许动作"><n-select v-model:value="rule.allowedActions" multiple :options="actionOptions" /></n-form-item></n-gi>
@@ -36,15 +36,23 @@
import { ref } from 'vue';
import { useMessage } from 'naive-ui';
import { Edit, View } from '@/api/cultivate/flowers';
import { actionOptions, newState, rules, State, statusOptions, validateStageRules } from './model';
import { actionOptions, newState, rules, stageTitle, State, statusOptions, validateStageRules } from './model';
const emit=defineEmits(['reloadTable']);const message=useMessage();const showModal=ref(false);const loading=ref(false);const submitting=ref(false);const formRef=ref();const formValue=ref<State>(newState(null));
function openModal(state:State|null){showModal.value=true;formValue.value=newState(null);if(!state?.id)return;loading.value=true;View({id:state.id}).then((res)=>formValue.value=newState(res)).finally(()=>loading.value=false)}
function submit(){formRef.value?.validate((errors)=>{if(errors){message.error('请检查配置内容');return}const stageError=validateStageRules(formValue.value.stageRules);if(stageError){message.error(stageError);return}submitting.value=true;Edit(formValue.value).then(()=>{message.success('配置已保存');showModal.value=false;emit('reloadTable')}).finally(()=>submitting.value=false)})}
defineExpose({openModal});
</script>
<style lang="less">
/* 弹窗被 Teleport 到 body,scoped 样式无法命中;宽度走全局类(约 2/3 屏宽,小屏自适应收缩) */
.flower-modal {
width: min(66vw, 1280px);
max-width: 92vw;
}
.flower-modal .n-dialog__content { padding-top: 0; }
</style>
<style lang="less" scoped>
.flower-modal { width: min(1080px, 92vw); }
.flower-scroll { max-height: 78vh; padding-right: 16px; }
.stage-card { margin-bottom: 12px; }
</style>
+8 -1
View File
@@ -52,11 +52,18 @@ function stageRule(stage: string, nextStage: string, requiredPoints: number, wat
return { stage, nextStage, requiredPoints, waterPoints, fertilizePoints, waitHours, allowedActions, imageFileId: '', animationFileId: '', progressTextTemplate: '', completionText: '', sortNo };
}
// 阶段枚举中文名(口径:cultivate_server 对接文档 0.4.1 花朵状态)
export const stageLabels: Record<string, string> = { seed: '种子期', sprout: '发芽期', bud: '花苞期', bloom: '盛花期', removed: '已移除' };
export function stageTitle(stage: string): string {
if (!stage) return '';
return stageLabels[stage] ? `${stageLabels[stage]}(${stage})` : stage;
}
// 非 bloom 阶段升级阈值与等待时长不能同时为 0(与 cultivate_server 校验一致)
export function validateStageRules(stageRules: StageRule[]): string | null {
for (const rule of stageRules) {
if (rule.stage !== 'bloom' && rule.requiredPoints === 0 && rule.waitHours === 0) {
return `阶段 ${rule.stage} 的升级成长值与等待时长不能同时为 0`;
return `阶段 ${stageTitle(rule.stage)} 的升级成长值与等待时长不能同时为 0`;
}
}
return null;