feat(cultivate): 添加花朵阶段中文标题并优化编辑页展示
新增阶段中文名映射及转换函数,用于显示更友好的阶段名称 在编辑页中应用阶段标题,同时调整下一阶段输入框为只读展示 优化弹窗宽度样式,适配不同屏幕尺寸
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user