Auto Commit

src/App.vue

 <script setup lang="ts">
-import { reactive, ref } from 'vue';
-import ProgressBar from './components/ProgressBar.vue'
-import { watch } from 'vue';
+import { reactive, ref, watch } from 'vue';
+import ProgressBar from './components/ProgressBar.vue';
 
-const progressBarRef = ref<InstanceType<typeof ProgressBar>>()
+const progressBarRef = ref<InstanceType<typeof ProgressBar>>();
 // 每次增加或减少的值
-const step = 100
+const step = 100;
 // 最大值
-const max = 1000
+const max = 1000;
+
+// 优化配置对象的结构和注释
 const options = reactive({
   data: 362,
   maxValue: max,
   lineWidth: 10,
   radius: 50,
-  // 颜色紫色蓝色绿色红色
-  color: ['	#66DD00', '#0066FF ', '#A500CC '],
+  // 渐变色配置
+  color: ['#66DD00', '#0066FF', '#A500CC'],
+  // 线条末端样式
+  // CanvasLineCap:
+  // - 'butt': 线段末端以方形结束，不超出端点
+  // - 'round': 线段末端以圆形结束，超出端点一个半圆
+  // - 'square': 线段末端以方形结束，超出端点一个矩形（宽度为线宽）
+  lineCap: 'butt' as CanvasLineCap,
+  // 文本配置
   text: {
-    size: 50,        // 自定义字体大小
-    color: '#666',   // 自定义字体颜色
+    size: 50,
+    color: '#666',
   }
-})
+});
 
+// 优化数值范围监听
 watch(() => options.data, (val) => {
   if (val > max) {
-    options.data = max
+    options.data = max;
+  } else if (val < 0) {  // 添加最小值限制
+    options.data = 0;
   }
-})
+});
 
+// 优化按钮点击处理函数
 function add() {
-  if (options.data < max) {
-    options.data += step;
-  }
+  options.data = Math.min(options.data + step, max);
 }
 
 function minus() {
-  if (options.data > 0) {
-    options.data -= step;
-  }
+  options.data = Math.max(options.data - step, 0);
 }
 </script>
 
 <template>
   <div class="canvas-container">
-    <ProgressBar ref="progressBarRef" :options="options" />
+    <ProgressBar 
+      ref="progressBarRef" 
+      :options="options" 
+    />
   </div>
   <div class="button-group">
-    <div class="button" @click="add">+{{ step }}</div>
-    <div class="button" @click="minus">-{{ step }}</div>
+    <div 
+      class="button" 
+      @click="add"
+      :class="{ 'disabled': options.data >= max }"
+    >
+      +{{ step }}
+    </div>
+    <div 
+      class="button" 
+      @click="minus"
+      :class="{ 'disabled': options.data <= 0 }"
+    >
+      -{{ step }}
+    </div>
   </div>
 </template>
 
@@ -85,14 +108,20 @@ function minus() {
   border: 1px solid #eee;
 }
 
-.button:hover {
+.button:hover:not(.disabled) {
   background: #f5f5f5;
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
-.button:active {
+.button:active:not(.disabled) {
   transform: translateY(0);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }
+
+.button.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: #f5f5f5;
+}
 </style>

src/components/ProgressBar.vue

@@ -31,6 +31,8 @@
  *   width?: number;                // 画布宽度，默认自适应
  *   height?: number;               // 画布高度，默认自适应
  *   background?: string;           // 画布背景色，默认 #fff
+ *   lineCap?: CanvasLineCap;       // 线条末端样式：'butt' | 'round' | 'square'，默认 'round'
+ *   fillStyle?: string;           // 圆环中心填充样式，默认 'transparent'
  *   text?: {
  *     size?: number | null;        // 字体大小，null 时自动计算
  *     color?: string;              // 字体颜色，默认 #333
@@ -70,6 +72,10 @@ interface ChartOptions {
     height?: number;
     // 画布背景色，默认 #fff
     background?: string;
+    // 线条末端样式：'butt' | 'round' | 'square'，默认 'round'
+    lineCap?: CanvasLineCap;
+    // 圆环中心填充样式，默认 'transparent'
+    fillStyle?: string;
     // 文字相关配置
     text?: {
         // 字体大小，默认自适应（为 null 时自动计算）
@@ -101,12 +107,14 @@ const props = withDefaults(defineProps<{
         width: 500,
         height: 500,
         background: '#fff',
+        lineCap: 'round',
+        fillStyle: 'transparent',
         text: {
             size: null,
             color: '#333',
             font: 'Arial',
             showPercentage: true,
-            show: true  // 默认显示文本
+            show: true
         }
     })
 })
@@ -246,21 +254,17 @@ function startDraw(end: number, start?: number, dontClear?: boolean) {
 
     // 绘制外圆
     ctx.beginPath();
-    // 设置线条宽度
-    ctx.lineWidth = lineWidth || 10; // 设置默认值避免 undefined
-    // 设置线条末端样式为圆角
-    ctx.lineCap = 'round';
+    ctx.lineWidth = lineWidth || 10;
+    ctx.lineCap = props.options.lineCap || 'round';
     ctx.strokeStyle = strokeStyle;
-    ctx.arc(centerX, centerY, radius, start || Math.PI * 1.5, end || Math.PI * 2); // 设置默认值避免 undefined
-    // 使用 stroke 代替 fill
+    ctx.arc(centerX, centerY, radius, start || Math.PI * 1.5, end || Math.PI * 2);
     ctx.stroke();
     ctx.closePath();
 
-    // 绘制内圆（可选，如果不需要内圆可以移除这部分）
+    // 绘制内圆
     ctx.beginPath();
     ctx.arc(centerX, centerY, (radius) - (lineWidth || 10), 0, Math.PI * 2);
-    // 使用透明填充
-    ctx.fillStyle = 'transparent';
+    ctx.fillStyle = props.options.fillStyle || 'transparent';
     ctx.fill();
     ctx.closePath();