From 85eb786e5954e2382fa6c83b97f53574a111ffc9 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Tue, 12 Aug 2025 23:36:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E7=A7=BB=E9=99=A4ElProgress=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/style.scss                |   8 +-
 src/pages/pc/article/ArticleHomePage.vue |   4 +-
 src/pages/pc/components/Book.vue         |   9 +-
 src/pages/pc/components/Progress.vue     | 103 +++++++++++++++++++++++
 src/pages/pc/word/WordHomePage.vue       |   5 +-
 src/pages/pc/word/components/Footer.vue  |  25 ++----
 src/vite-env.d.ts                        |   3 -
 7 files changed, 126 insertions(+), 31 deletions(-)
 create mode 100644 src/pages/pc/components/Progress.vue

diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index 5ab4b294..28e99401 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -61,12 +61,12 @@
 
 
   //修改element-ui的进度条底色
-  --el-border-color-lighter: #d1d5df !important;
+  --color-progress-bar: #d1d5df !important;
 }
 
 .footer {
   &.hide {
-    --el-border-color-lighter: #dbdbdb !important;
+    --color-progress-bar: #dbdbdb !important;
   }
 }
 
@@ -104,11 +104,11 @@ html.dark {
   --color-textarea-bg: rgb(43, 45, 48);
   --color-article: white;
 
-  --el-border-color-lighter: rgb(73, 77, 82) !important;
+  --color-progress-bar: rgb(73, 77, 82) !important;
 
   .footer {
     &.hide {
-      --el-border-color-lighter: var(--color-third) !important;
+      --color-progress-bar: var(--color-third) !important;
     }
   }
 }
diff --git a/src/pages/pc/article/ArticleHomePage.vue b/src/pages/pc/article/ArticleHomePage.vue
index 0aad0c70..34ebef38 100644
--- a/src/pages/pc/article/ArticleHomePage.vue
+++ b/src/pages/pc/article/ArticleHomePage.vue
@@ -8,7 +8,7 @@ import {DictResource, DictType} from "@/types/types.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
 import Book from "@/pages/pc/components/Book.vue";
-import {ElProgress} from 'element-plus';
+import Progress from '@/pages/pc/components/Progress.vue';
 import Toast from '@/pages/pc/components/Toast/Toast.ts'
 import BaseButton from "@/components/BaseButton.vue";
 import PopConfirm from "@/pages/pc/components/PopConfirm.vue";
@@ -110,7 +110,7 @@ async function goBookDetail(val: DictResource) {
         </BaseButton>
       </div>
       <div class="mt-5 text-sm">已学习{{ base.currentBook.lastLearnIndex }}篇文章</div>
-      <ElProgress class="mt-1" :percentage="base.currentBookProgress" :show-text="false"></ElProgress>
+      <Progress class="mt-1" :percentage="base.currentBookProgress" :show-text="false"></Progress>
     </div>
 
     <div class="card  flex flex-col">
diff --git a/src/pages/pc/components/Book.vue b/src/pages/pc/components/Book.vue
index 90172091..cff57a14 100644
--- a/src/pages/pc/components/Book.vue
+++ b/src/pages/pc/components/Book.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import {Dict, DictResource} from "@/types/types.ts";
+import {Dict} from "@/types/types.ts";
 import {Icon} from "@iconify/vue";
-import {ElProgress, ElCheckbox} from 'element-plus';
+import {ElCheckbox} from 'element-plus';
+import Progress from '@/pages/pc/components/Progress.vue'
 
 const props = defineProps<{
   item?: Partial<Dict>;
@@ -37,9 +38,9 @@ const studyProgress = $computed(() => {
         <div>{{ studyProgress }}{{ item?.length }}{{ quantifier }}</div>
       </div>
       <div class="absolute bottom-2 left-4 right-4">
-        <ElProgress v-if="item?.lastLearnIndex || item.complete" class="mt-1"
+        <Progress v-if="item?.lastLearnIndex || item.complete" class="mt-1"
                     :percentage="progress"
-                    :show-text="false"></ElProgress>
+                    :show-text="false"></Progress>
       </div>
       <ElCheckbox v-if="showCheckbox"
                   :model-value="checked"
diff --git a/src/pages/pc/components/Progress.vue b/src/pages/pc/components/Progress.vue
new file mode 100644
index 00000000..c65e8ac9
--- /dev/null
+++ b/src/pages/pc/components/Progress.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import {computed} from 'vue';
+
+interface IProps {
+  percentage: number;
+  showText?: boolean;
+  textInside?: boolean;
+  strokeWidth?: number;
+  color?: string;
+  format?: (percentage: number) => string;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  showText: true,
+  textInside: false,
+  strokeWidth: 6,
+  color: '#409eff',
+  format: (percentage) => `${percentage}%`,
+});
+
+const barStyle = computed(() => {
+  return {
+    width: `${props.percentage}%`,
+    backgroundColor: props.color,
+  };
+});
+
+const trackStyle = computed(() => {
+  return {
+    height: `${props.strokeWidth}px`,
+  };
+});
+
+const progressTextSize = computed(() => {
+  return props.strokeWidth * 0.83 + 6;
+});
+
+const content = computed(() => {
+  if (typeof props.format === 'function') {
+    return props.format(props.percentage) || '';
+  } else {
+    return `${props.percentage}%`;
+  }
+});
+</script>
+
+<template>
+  <div class="progress" role="progressbar" :aria-valuenow="percentage" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar" :style="trackStyle">
+      <div class="progress-bar-inner" :style="barStyle">
+        <div v-if="showText && textInside" class="progress-bar-text" :style="{ fontSize: progressTextSize + 'px' }">
+          {{ content }}
+        </div>
+      </div>
+    </div>
+    <div v-if="showText && !textInside" class="progress-bar-text" :style="{ fontSize: progressTextSize + 'px' }">
+      {{ content }}
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.progress {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+
+  .progress-bar {
+    width: 100%;
+    border-radius: 100px;
+    background-color: var(--color-progress-bar);
+    overflow: hidden;
+    position: relative;
+    vertical-align: middle;
+
+    .progress-bar-inner {
+      position: relative;
+      height: 100%;
+      border-radius: 100px;
+      transition: width 0.6s ease;
+      text-align: right;
+
+      .progress-bar-text {
+        display: inline-block;
+        vertical-align: middle;
+        color: #fff;
+        font-size: 12px;
+        margin: 0 5px;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .progress-bar-text {
+    margin-left: 5px;
+    min-width: 50px;
+    color: var(--el-text-color-regular);
+    font-size: 14px;
+    text-align: center;
+  }
+}
+</style>
diff --git a/src/pages/pc/word/WordHomePage.vue b/src/pages/pc/word/WordHomePage.vue
index 279412f3..c0dd4379 100644
--- a/src/pages/pc/word/WordHomePage.vue
+++ b/src/pages/pc/word/WordHomePage.vue
@@ -12,7 +12,8 @@ import {getCurrentStudyWord} from "@/hooks/dict.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import Book from "@/pages/pc/components/Book.vue";
 import PopConfirm from "@/pages/pc/components/PopConfirm.vue";
-import {ElProgress, ElSlider} from 'element-plus';
+import {ElSlider} from 'element-plus';
+import Progress from '@/pages/pc/components/Progress.vue';
 import Toast from '@/pages/pc/components/Toast/Toast.ts';
 import BaseButton from "@/components/BaseButton.vue";
 import {getDefaultDict} from "@/types/func.ts";
@@ -146,7 +147,7 @@ const progressTextRight = $computed(() => {
             <span>{{ progressTextLeft }}</span>
             <span>{{ progressTextRight }} / {{ store.sdict.words.length }}</span>
           </div>
-          <ElProgress class="mt-1" :percentage="store.currentStudyProgress" :show-text="false"></ElProgress>
+          <Progress class="mt-1" :percentage="store.currentStudyProgress" :show-text="false"></Progress>
         </div>
         <div class="text-sm text-align-end">
           预计完成日期：{{ _getAccomplishDate(store.sdict.words.length, store.sdict.perDayStudyNumber) }}
diff --git a/src/pages/pc/word/components/Footer.vue b/src/pages/pc/word/components/Footer.vue
index d7e93e32..f2a43be3 100644
--- a/src/pages/pc/word/components/Footer.vue
+++ b/src/pages/pc/word/components/Footer.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 
-import {inject, onMounted, onUnmounted} from "vue"
+import {inject} from "vue"
 import {usePracticeStore} from "@/stores/practice.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import {ShortcutKey, StudyData} from "@/types/types.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
 import {Icon} from "@iconify/vue";
 import Tooltip from "@/pages/pc/components/Tooltip.vue";
-import {ElProgress} from 'element-plus';
+import Progress from '@/pages/pc/components/Progress.vue'
 
 const statisticsStore = usePracticeStore()
 const settingStore = useSettingStore()
@@ -72,7 +72,7 @@ const progress = $computed(() => {
     </Tooltip>
 
     <div class="bottom">
-      <ElProgress
+      <Progress
           :percentage="progress"
           :stroke-width="8"
           :show-text="false"/>
@@ -146,15 +146,12 @@ const progress = $computed(() => {
         </div>
       </div>
     </div>
-    <div class="progress">
-      <ElProgress :percentage="progress"
-                  :stroke-width="8"
-                  :show-text="false"/>
+    <div class="progress-wrap">
+      <Progress :percentage="progress"
+                :stroke-width="8"
+                :show-text="false"/>
     </div>
   </div>
-  <!--
-   @click="emitter.emit(EventKey.openStatModal, {})"
-              @click="settingStore.showPanel = !settingStore.showPanel"-->
 </template>
 
 <style scoped lang="scss">
@@ -172,7 +169,7 @@ const progress = $computed(() => {
     margin-bottom: -6rem;
     margin-top: 3rem;
 
-    .progress {
+    .progress-wrap {
       bottom: calc(100% + 1.8rem);
     }
   }
@@ -210,7 +207,7 @@ const progress = $computed(() => {
     }
   }
 
-  .progress {
+  .progress-wrap {
     width: 100%;
     transition: all .3s;
     padding: 0 .6rem;
@@ -219,10 +216,6 @@ const progress = $computed(() => {
     bottom: 0;
   }
 
-  :deep(.el-progress-bar__inner) {
-    background: var(--color-scrollbar);
-  }
-
   .arrow {
     position: absolute;
     top: -50%;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index c936ebfc..560dfb91 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,8 +1,6 @@
 /// <reference types="vite/client" />
 /// <reference types="unplugin-vue-macros/macros-global" />
 
-import {ElMessageBox} from "element-plus";
-
 // declare module '*.json' {
 //   const src: string
 //   export default src
@@ -49,4 +47,3 @@ declare module "*.vue" {
 //   }
 // }
 
-declare var ElMessageBox: ElMessageBox;