feat(components): 编写文字进度条组件

src/components/ProgressTextBar.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  text?: string | number;
+  percent: number;
+  height?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  text: '',
+  height: 20,
+});
+
+const barText = computed(() => {
+  if (props.percent === 0) {
+    return '""';
+  }
+
+  return `"${props.text}"`;
+});
+
+const isTextInProgress = computed(() => {
+  return props.percent > 50;
+});
+</script>
+
+<template>
+  <AProgress
+    :class="['progress-text-bar', { 'progress-inner-text': isTextInProgress }]"
+    :percent="percent"
+    :size="height"
+    :show-info="false"
+    :stroke-color="{
+      '0%': 'var(--antd-color-primary-border-hover)',
+      '100%': 'var(--antd-color-primary)',
+    }"
+  />
+</template>
+
+<style lang="scss" scoped>
+.progress-text-bar {
+  margin: 0;
+  line-height: unset;
+
+  :deep(.ant-progress-outer) {
+    .ant-progress-inner {
+      background-color: #f0f2f5;
+    }
+
+    .ant-progress-inner,
+    .ant-progress-success-bg,
+    .ant-progress-bg {
+      border-radius: 4px;
+    }
+
+    .ant-progress-bg {
+      display: flex;
+      align-items: center;
+    }
+
+    .ant-progress-bg::before {
+      position: absolute;
+      left: calc(100% + 8px);
+      font-family: DINAlternate;
+      font-size: 12px;
+      font-weight: bold;
+      line-height: 16px;
+      color: #000;
+      content: v-bind(barText);
+    }
+  }
+}
+
+.progress-inner-text {
+  :deep(.ant-progress-outer) {
+    .ant-progress-bg::before {
+      right: 8px;
+      left: unset;
+      color: #fff;
+    }
+  }
+}
+</style>