From 1e6fb97e9c1be2fce3b2bc4f8d1a0ad58120a77e Mon Sep 17 00:00:00 2001
From: devilangelia <devilangelia@devide>
Date: Wed, 5 Feb 2025 17:11:58 +0800
Subject: [PATCH] Auto Commit

---
 src/App.vue                    |  10 +---
 src/components/ProgressBar.vue | 102 ++++++++++++++++++++++++---------
 2 files changed, 77 insertions(+), 35 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c8fdf65..1346afb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue';
+import { reactive, ref } from 'vue';
 import ProgressBar from './components/ProgressBar.vue'
 import { watch } from 'vue';
 
@@ -18,10 +18,6 @@ const options = reactive({
   text: {
     size: 50,        // 自定义字体大小
     color: '#666',   // 自定义字体颜色
-    font: 'Arial',    // 自定义字体
-    showPercentage: true, // 是否显示百分比
-    animation: true, // 是否开启动画
-    // content: '自定义文本'
   }
 })
 
@@ -42,10 +38,6 @@ function minus() {
     options.data -= step;
   }
 }
-
-onMounted(() => {
-  progressBarRef.value?.init()
-})
 </script>
 
 <template>
diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
index 5057c80..a0d3d76 100644
--- a/src/components/ProgressBar.vue
+++ b/src/components/ProgressBar.vue
@@ -1,5 +1,57 @@
 <script lang="ts" setup>
-import { ref, watch, computed } from 'vue';
+/**
+ * 环形进度条组件
+ * @description 一个可自定义的环形进度条组件，支持渐变色、动画效果和文本显示
+ * 
+ * @example
+ * ```vue
+ * <template>
+ *   <ProgressBar 
+ *     :options="{
+ *       data: 75,                    // 当前值
+ *       maxValue: 200,               // 最大值
+ *       lineWidth: 10,               // 圆环宽度
+ *       radius: 50,                  // 圆环半径
+ *       color: ['#66DD00', '#0066FF'], // 渐变色
+ *       text: {
+ *         showPercentage: false      // 显示原始值
+ *       }
+ *     }" 
+ *   />
+ * </template>
+ * ```
+ * 
+ * @props
+ * options: {
+ *   data: number;                  // 当前值
+ *   maxValue?: number;             // 最大值，默认 100
+ *   lineWidth?: number;            // 圆环宽度，默认 40
+ *   radius?: number;               // 圆环半径，默认 100
+ *   color?: string | string[];     // 圆环颜色，支持单色或渐变色数组
+ *   width?: number;                // 画布宽度，默认自适应
+ *   height?: number;               // 画布高度，默认自适应
+ *   background?: string;           // 画布背景色，默认 #fff
+ *   text?: {
+ *     size?: number | null;        // 字体大小，null 时自动计算
+ *     color?: string;              // 字体颜色，默认 #333
+ *     font?: string;               // 字体样式，默认 Arial
+ *     content?: string | number;   // 自定义显示文本
+ *     animation?: boolean;         // 是否启用数字动画，默认 true
+ *     showPercentage?: boolean;    // true显示百分比，false显示原始值，默认 true
+ *   }
+ * }
+ * 
+ * @features
+ * - 自适应画布大小：根据圆环大小自动计算画布尺寸
+ * - 渐变色支持：可使用数组配置多个颜色实现渐变
+ * - 文本显示：支持自定义文本、百分比/原始值切换
+ * - 动画效果：数值变化时平滑过渡
+ * - 自适应字体：根据圆环大小自动计算合适的字体大小
+ * - 圆角样式：圆环端点为圆角
+ * - 透明中心：圆环中心区域透明
+ */
+
+import { ref, watch, computed, onMounted } from 'vue';
 
 interface ChartOptions {
     data: number;
@@ -56,6 +108,7 @@ const props = withDefaults(defineProps<{
 })
 
 const myCanvas = ref<HTMLCanvasElement | null>(null);
+const chartOptions = ref<ChartOptions | null>(null);
 
 // 添加动画执行标志
 const isAnimating = ref(false);
@@ -73,12 +126,10 @@ const minCanvasSize = computed(() => {
 
 // 修改画布尺寸的计算属性
 const canvasWidth = computed(() => {
-    // 如果设置了宽度，使用设置的宽度，否则使用计算的最小尺寸
     return props.options.width ?? minCanvasSize.value;
 });
 
 const canvasHeight = computed(() => {
-    // 如果设置了高度，使用设置的高度，否则使用计算的最小尺寸
     return props.options.height ?? minCanvasSize.value;
 });
 
@@ -139,30 +190,40 @@ const fontSize = computed(() => {
     );
 });
 
+// 监听 props.options 的变化，更新 chartOptions
+watch(() => props.options, (newVal) => {
+    // 只在没有通过 init 设置配置时更新
+    if (!chartOptions.value || Object.keys(chartOptions.value).length === 0) {
+        chartOptions.value = { ...newVal };
+    }
+}, { deep: true });
+
+// 监听 data 的变化
+watch(() => props.options.data, (_, oldVal) => {
+    update(oldVal);
+});
+
 function startDraw(end: number, start?: number, dontClear?: boolean) {
     const ctx = myCanvas.value?.getContext("2d");
     if (!ctx) return;
     if (!dontClear) {
-        // 使用计算属性获取画布尺寸
         ctx.clearRect(0, 0, canvasWidth.value, canvasHeight.value);
     }
 
-    // 根据画布尺寸计算中心点
     const centerX = canvasWidth.value / 2;
     const centerY = canvasHeight.value / 2;
-    // 使用计算出的最大半径
     const radius = Math.min(props.options.radius || 100, maxRadius.value);
     const lineWidth = props.options.lineWidth;
-    // 创建渐变色
+    
     let strokeStyle: string | CanvasGradient = 'red';
     if (props.options.color) {
         if (Array.isArray(props.options.color)) {
             if (props.options.color.length) {
                 const gradient = ctx.createLinearGradient(
-                    centerX - (radius || 100),
-                    centerY - (radius || 100),
-                    centerX + (radius || 100),
-                    centerY + (radius || 100)
+                    centerX - radius,
+                    centerY - radius,
+                    centerX + radius,
+                    centerY + radius
                 );
                 const colors = props.options.color;
                 if (colors?.length === 1) {
@@ -175,7 +236,6 @@ function startDraw(end: number, start?: number, dontClear?: boolean) {
                 }
             }
         } else {
-            // 如果是单个颜色字符串
             strokeStyle = props.options.color;
         }
     }
@@ -210,18 +270,15 @@ function startDraw(end: number, start?: number, dontClear?: boolean) {
     // 处理显示文本
     let displayText: string;
     if (props.options.text?.content !== undefined) {
-        // 使用自定义文本
         displayText = String(props.options.text.content);
     } else {
         const maxValue = props.options.maxValue || 100;
         const currentValue = currentDisplayNumber.value;
         
         if (props.options.text?.showPercentage !== false) {
-            // 显示百分比
             const percentage = Math.round((currentValue / maxValue) * 100);
             displayText = `${percentage}%`;
         } else {
-            // 显示原始数值
             displayText = String(Math.round(currentValue));
         }
     }
@@ -279,14 +336,12 @@ function update(oldData: number) {
         draw: (progress) => {
             progress = Math.max(0, progress);
             const maxValue = props.options.maxValue || 100;
-            // 使用最大值参数计算当前值的比例
             const maxData = Math.min(props.options.data, maxValue);
             const currentData = oldData + (maxData - oldData) * progress;
-            // 根据最大值计算角度
             const end = Math.PI * (1.5 + (currentData / maxValue) * 2);
 
-            if (props.options.text?.animation !== false && props.options.text?.content === undefined) {
-                // 更新显示的数值为实际值，而不是百分比
+            if (props.options.text?.animation !== false && 
+                props.options.text?.content === undefined) {
                 currentDisplayNumber.value = currentData;
             }
 
@@ -326,15 +381,10 @@ function init() {
     });
 }
 
-watch(() => props.options.data, (_, oldVal) => {
-    // 直接监听 data 的变化，而不是整个 options 对象
-    update(oldVal);
+onMounted(() => {
+    init();
 });
 
-defineExpose({
-    init,
-    update
-});
 
 </script>
 
-- 
GitLab