角色编辑接口完成

src/views/home/modules/FlowRing.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps<{ status: any }>();
+const BIG_STAGES = ["申请审批", "实施与关闭", "变更关闭"];
+const bigStageOf = (s: any) => (s === "审批中" ? 0 : s === "已关闭" ? 2 : 1);
+const cur = bigStageOf(props.status);
+const pct = ((cur + 1) / BIG_STAGES.length) * 100;
+const size = 34, stroke = 4, r = (size - stroke) / 2, c = 2 * Math.PI * r;
+const title = `阶段进度 ${cur + 1}/${BIG_STAGES.length}：${BIG_STAGES.slice(0, cur + 1).join(" → ")}${cur < BIG_STAGES.length - 1 ? " → …" : ""}`;
+</script>
+<template>
+  <span class="relative inline-flex shrink-0 items-center justify-center" :style="{ width: size + 'px', height: size + 'px' }" :title="title">
+    <svg :width="size" :height="size" class="-rotate-90">
+      <circle :cx="size / 2" :cy="size / 2" :r="r" stroke="#E2E8F0" :stroke-width="stroke" fill="none" />
+      <circle :cx="size / 2" :cy="size / 2" :r="r" stroke="#2080f0" :stroke-width="stroke" fill="none"
+        :stroke-dasharray="c" :stroke-dashoffset="c * (1 - pct / 100)" stroke-linecap="round" />
+    </svg>
+    <span class="absolute inset-0 flex items-center justify-center text-[9px] font-bold text-[#2080f0] dark:text-white">{{ cur + 1 }}/3</span>
+  </span>
+</template>