<script lang="ts" setup>
|
import { computed } from 'vue';
|
|
import { Steps } from 'ant-design-vue';
|
|
const STEPS = ['待发布', '待上传', '待审核', '待归档', '已归档'] as const;
|
|
const props = defineProps<{
|
/** 项目当前状态 (0-4) */
|
status: number;
|
}>();
|
|
const current = computed(() => {
|
// 状态值即当前已完成到第几步：0=第一步进行中，4=全部完成
|
return props.status;
|
});
|
|
const nodes = computed(() =>
|
STEPS.map((name, index) => ({
|
title: name,
|
status: index < props.status ? 'finish' : index === props.status ? 'process' : 'wait',
|
})),
|
);
|
</script>
|
|
<template>
|
<Steps :current="current" direction="vertical" size="small">
|
<Steps.Step
|
v-for="(node, index) in nodes"
|
:key="index"
|
:status="node.status as any"
|
:title="node.title"
|
/>
|
</Steps>
|
</template>
|
