From 9b5745a9a12119d3b3d924cb2c33055a976fdf1d Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Fri, 19 Jan 2024 20:58:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=BF=9B=E5=BA=A6?=
 =?UTF-8?q?=E6=9D=A1=E7=BB=84=E4=BB=B6=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/en.yaml                   |   1 +
 locales/zh-CN.yaml                |   1 +
 src/router/modules/components.ts  |   8 ++
 src/views/components/progress.vue | 140 ++++++++++++++++++++++++++++++
 4 files changed, 150 insertions(+)
 create mode 100644 src/views/components/progress.vue

diff --git a/locales/en.yaml b/locales/en.yaml
index b529aa5da..06a870bbb 100644
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -63,6 +63,7 @@ menus:
   hsTag: Tag
   hsStatistic: Statistic
   hsCollapse: Collapse
+  hsProgress: Progress
   hsmenus: MultiLevel Menu
   hsmenu1: Menu1
   hsmenu1-1: Menu1-1
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index b7cf8a7ee..7ce35ee84 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -63,6 +63,7 @@ menus:
   hsTag: 标签
   hsStatistic: 统计组件
   hsCollapse: 折叠面板
+  hsProgress: 进度条
   hsmenus: 多级菜单
   hsmenu1: 菜单1
   hsmenu1-1: 菜单1-1
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
index f238abdb4..8376e0b62 100644
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -107,6 +107,14 @@ export default {
         title: $t("menus.hsbutton")
       }
     },
+    {
+      path: "/components/progress",
+      name: "PureProgress",
+      component: () => import("@/views/components/progress.vue"),
+      meta: {
+        title: $t("menus.hsProgress")
+      }
+    },
     {
       path: "/components/tag",
       name: "PureTag",
diff --git a/src/views/components/progress.vue b/src/views/components/progress.vue
new file mode 100644
index 000000000..d818651b9
--- /dev/null
+++ b/src/views/components/progress.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+defineOptions({
+  name: "PureProgress"
+});
+
+const format = percentage => (percentage === 100 ? "Full" : `${percentage}%`);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-link
+          v-tippy="{
+            content: '点击查看详细文档'
+          }"
+          href="https://element-plus.org/zh-CN/component/progress.html"
+          target="_blank"
+          style="font-size: 16px; font-weight: 800"
+        >
+          进度条
+        </el-link>
+      </div>
+    </template>
+
+    <p class="mb-4">直线进度条动画</p>
+    <div class="w-1/4">
+      <el-progress indeterminate :percentage="50" class="mb-4" />
+      <el-progress
+        indeterminate
+        :percentage="100"
+        :format="format"
+        class="mb-4"
+      />
+      <el-progress
+        indeterminate
+        :percentage="100"
+        status="success"
+        class="mb-4"
+      />
+      <el-progress
+        indeterminate
+        :percentage="100"
+        status="warning"
+        class="mb-4"
+      />
+      <el-progress
+        indeterminate
+        :percentage="50"
+        status="exception"
+        class="mb-4"
+      />
+    </div>
+
+    <p class="mb-4">进度条内显示百分比标识</p>
+    <div class="w-1/4">
+      <el-progress
+        :text-inside="true"
+        :stroke-width="26"
+        :percentage="70"
+        class="mb-4"
+      />
+      <el-progress
+        :text-inside="true"
+        :stroke-width="24"
+        :percentage="100"
+        status="success"
+        striped
+        striped-flow
+        :duration="70"
+        class="mb-4"
+      />
+      <el-progress
+        :text-inside="true"
+        :stroke-width="22"
+        :percentage="80"
+        status="warning"
+        class="mb-4"
+      />
+      <el-progress
+        :text-inside="true"
+        :stroke-width="20"
+        :percentage="50"
+        status="exception"
+        striped
+        striped-flow
+        class="mb-4"
+      />
+    </div>
+
+    <p class="mb-4">自定义内容</p>
+    <div class="w-1/4 demo-progress">
+      <el-progress :percentage="50">
+        <el-button text>自定义内容</el-button>
+      </el-progress>
+      <el-progress
+        :text-inside="true"
+        :stroke-width="20"
+        :percentage="50"
+        status="exception"
+      >
+        <span>自定义内容</span>
+      </el-progress>
+      <el-progress type="circle" :percentage="100" status="success">
+        <el-button type="success" :icon="useRenderIcon('ep:check')" circle />
+      </el-progress>
+      <el-progress type="dashboard" :percentage="80">
+        <template #default="{ percentage }">
+          <span class="percentage-value">{{ percentage }}%</span>
+          <span class="percentage-label">上升率</span>
+        </template>
+      </el-progress>
+    </div>
+  </el-card>
+</template>
+
+<style scoped>
+.percentage-value {
+  display: block;
+  margin-top: 10px;
+  font-size: 28px;
+}
+
+.percentage-label {
+  display: block;
+  margin-top: 10px;
+  font-size: 12px;
+}
+
+.demo-progress .el-progress--line {
+  width: 350px;
+  margin-bottom: 15px;
+}
+
+.demo-progress .el-progress--circle {
+  margin-right: 15px;
+}
+</style>