Feature: Added status progress bar

src/components/MigrateDialog.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 
-import {Origin} from "@/config/env.ts";
-import BaseButton from "@/components/BaseButton.vue";
-import {set} from 'idb-keyval'
-import {defineAsyncComponent} from "vue";
 import Toast from "@/components/base/toast/Toast.ts";
+import { Origin } from "@/config/env.ts";
+import { set } from 'idb-keyval';
+import { defineAsyncComponent } from "vue";
 
 const Dialog = defineAsyncComponent(() => import('@/components/dialog/Dialog.vue'))
 
@@ -111,4 +110,4 @@ async function transfer() {
 
 <style scoped lang="scss">
 
-</style>
+</style>

src/components/StageProgress.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="flex gap-5 w-full h-4">
+    <template v-for="i of props.stages">
+      <template v-if="i?.children?.length && i.active">
+        <div class="flex gap-1 h-4" :style="{ width: i.ratio + '%' }">
+          <template v-for="j of i.children">
+            <Tooltip :title="j.name">
+              <Progress
+                :style="{ width: j.ratio + '%' }"
+                :percentage="j.percentage"
+                :stroke-width="8"
+                :color="j.active ? '#72c240' : '#69b1ff'"
+                :active="j.active"
+                :show-text="false"
+              />
+            </Tooltip>
+          </template>
+        </div>
+      </template>
+      <template v-else>
+        <Tooltip :title="i.name">
+          <Progress
+            :style="{ width: i.ratio + '%' }"
+            :percentage="i.percentage"
+            :stroke-width="8"
+            :color="i.active && props.stages.length > 1 ? '#72c240' : '#69b1ff'"
+            :active="i.active"
+            :show-text="false"
+          />
+        </Tooltip>
+      </template>
+    </template>
+  </div>
+</template>
+<script setup lang="ts">
+import Tooltip from '@/components/base/Tooltip.vue'
+import Progress from '@/components/base/Progress.vue'
+
+const props = defineProps<{
+  stages: {
+    name: string
+    active?: boolean
+    percentage: number
+    ratio: number
+    children: {
+      active: boolean
+      name: string
+      percentage: number
+      ratio: number
+    }[]
+  }[]
+}>()
+</script>
+<style scoped lang="scss"></style>

src/components/base/Progress.vue

@@ -7,6 +7,7 @@ interface IProps {
   textInside?: boolean;
   strokeWidth?: number;
   color?: string;
+  active?: boolean;
   format?: (percentage: number) => string;
   size?: 'normal' | 'large';
 }
@@ -16,6 +17,7 @@ const props = withDefaults(defineProps<IProps>(), {
   textInside: false,
   strokeWidth: 6,
   color: '#409eff',
+  active: true,
   format: (percentage) => `${percentage}%`,
   size: 'normal',
 });
@@ -31,6 +33,7 @@ const trackStyle = computed(() => {
   const height = props.size === 'large' ? props.strokeWidth * 2.5 : props.strokeWidth;
   return {
     height: `${height}px`,
+    opacity: props.active ? 1 : 0.4,
   };
 });
 

src/components/list/BaseList.vue

@@ -29,7 +29,7 @@ const emit = defineEmits<{
 }>()
 
 //虚拟列表长度限制
-const limit = 101
+const limit = 200
 const settingStore = useSettingStore()
 const listRef: any = $ref()