From 155b2bb399c56fb75ae261b0cdc88ecc0bbbcb17 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Sat, 30 Aug 2025 17:44:43 +0800
Subject: [PATCH] =?UTF-8?q?circle-progress=E7=BB=84=E4=BB=B6=E5=B0=81?=
 =?UTF-8?q?=E8=A3=85=E5=AE=8C=E6=AF=95=EF=BC=8C=E5=9C=86=E5=9E=8B=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/CircleProgress/CircleProgress.vue  |  97 -------------
 .../circle-progress/circle-progress.vue       | 136 ++++++++++++++++++
 pages/pieChart/pieChart.vue                   | 117 +++------------
 3 files changed, 157 insertions(+), 193 deletions(-)
 delete mode 100644 components/CircleProgress/CircleProgress.vue
 create mode 100644 components/circle-progress/circle-progress.vue

diff --git a/components/CircleProgress/CircleProgress.vue b/components/CircleProgress/CircleProgress.vue
deleted file mode 100644
index b63176d..0000000
--- a/components/CircleProgress/CircleProgress.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-  <view class="circle-progress">
-    <view class="circle-progress__content">
-      <text class="circle-progress__text">{{ percentage }}%</text>
-    </view>
-  </view>
-</template>
-
-<script>
-export default {
-  name: "CircleProgress",
-  props: {
-    // 圆环进度百分比值，0-100
-    percentage: {
-      type: Number,
-      default: 0,
-      validator: (value) => value >= 0 && value <= 100,
-    },
-    // 进度条颜色
-    color: {
-      type: String,
-      default: "#42b983", // 绿色主题色
-    },
-    // 背景颜色
-    backgroundColor: {
-      type: String,
-      default: "#c8c8c8", // 灰色
-    },
-    // 尺寸
-    size: {
-      type: Number,
-      default: 100,
-    },
-    // 边框宽度
-    borderWidth: {
-      type: Number,
-      default: 5,
-    },
-  },
-  computed: {
-    progressStyle() {
-      const degrees = this.percentage * 3.6; // 将百分比转换为角度
-      const style = {
-        width: `${this.size}px`,
-        height: `${this.size}px`,
-        borderWidth: `${this.borderWidth}px`,
-        borderColor: this.backgroundColor,
-      };
-
-      // 根据进度设置不同的样式
-      if (this.percentage <= 50) {
-        style.background = `conic-gradient(
-          ${this.color} 0deg ${degrees}deg,
-          ${this.backgroundColor} ${degrees}deg 360deg
-        )`;
-      } else {
-        style.background = `conic-gradient(
-          ${this.color} 0deg 180deg,
-          ${this.backgroundColor} 180deg 360deg
-        )`;
-      }
-
-      return style;
-    },
-    textStyle() {
-      return {
-        fontSize: `${this.size * 0.2}px`,
-      };
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.circle-progress {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  &__content {
-    position: relative;
-    border-radius: 50%;
-    mask: radial-gradient(transparent 60%, black 61%);
-  }
-
-  &__text {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-weight: bold;
-    color: #333;
-    z-index: 2;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/components/circle-progress/circle-progress.vue b/components/circle-progress/circle-progress.vue
new file mode 100644
index 0000000..3fbff21
--- /dev/null
+++ b/components/circle-progress/circle-progress.vue
@@ -0,0 +1,136 @@
+<!--@example-->
+<!--<circle-progress-->
+<!--    :canvas-size="120"-->
+<!--    :progress="80"-->
+<!--    content="学习进度"-->
+<!--    progress-color="#42b983"-->
+<!--&gt;</circle-progress>-->
+<template>
+  <!-- 圆形进度条 -->
+  <view
+    :style="{ width: canvasSize + 'px', height: canvasSize + 'px' }"
+    class="progress-container"
+  >
+    <canvas
+      :style="{ width: canvasSize + 'px', height: canvasSize + 'px' }"
+      canvas-id="progressCanvas"
+      class="progress-canvas"
+    ></canvas>
+    <view class="progress-text">
+      <text class="percent">{{ progress }}%</text>
+      <text class="label">{{ content }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "circle-progress",
+  props: {
+    progress: {
+      type: Number,
+      default: 80,
+    },
+    canvasSize: {
+      type: Number,
+      default: 80,
+    },
+    strokeWidth: {
+      type: Number,
+      default: 12,
+    },
+    bgColor: {
+      type: String,
+      default: "#f0f0f0",
+    },
+    progressColor: {
+      type: String,
+      default: "#007AFF",
+    },
+    textColor: {
+      type: String,
+      default: "#333",
+    },
+    content: {
+      type: String,
+      default: "进度",
+    },
+  },
+  mounted() {
+    this.drawProgress();
+  },
+  watch: {
+    progress() {
+      this.drawProgress();
+    },
+    progressColor() {
+      this.drawProgress();
+    },
+  },
+  methods: {
+    // 绘制进度条
+    drawProgress() {
+      const { progress, canvasSize, strokeWidth, bgColor, progressColor } =
+        this;
+      const ctx = uni.createCanvasContext("progressCanvas", this);
+      const center = canvasSize / 2;
+      const radius = center - strokeWidth / 2;
+
+      // 清除画布
+      ctx.clearRect(0, 0, canvasSize, canvasSize);
+
+      // 绘制背景圆
+      ctx.beginPath();
+      ctx.arc(center, center, radius, 0, 2 * Math.PI);
+      ctx.setStrokeStyle(bgColor);
+      ctx.setLineWidth(strokeWidth);
+      ctx.stroke();
+
+      // 绘制进度圆
+      const startAngle = -Math.PI / 2; // 从顶部开始
+      const endAngle = startAngle + (progress / 100) * 2 * Math.PI;
+
+      ctx.beginPath();
+      ctx.arc(center, center, radius, startAngle, endAngle);
+      ctx.setStrokeStyle(progressColor);
+      ctx.setLineWidth(strokeWidth);
+      ctx.setLineCap("round");
+      ctx.stroke();
+      ctx.draw();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.progress-container {
+  position: relative;
+}
+
+.progress-canvas {
+  border-radius: 50%;
+  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
+}
+
+.progress-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.percent {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  display: block;
+}
+
+.label {
+  font-size: 24rpx;
+  color: #666;
+  display: block;
+  margin-top: 10rpx;
+}
+</style>
diff --git a/pages/pieChart/pieChart.vue b/pages/pieChart/pieChart.vue
index 02f620c..26722a1 100644
--- a/pages/pieChart/pieChart.vue
+++ b/pages/pieChart/pieChart.vue
@@ -1,118 +1,43 @@
 <template>
   <view class="page">
-    <!-- 圆形进度条 -->
-    <view class="progress-container">
-      <canvas
-        :style="{ width: canvasSize + 'px', height: canvasSize + 'px' }"
-        canvas-id="progressCanvas"
-        class="progress-canvas"
-      ></canvas>
-      <view class="progress-text">
-        <text class="percent">{{ progress }}%</text>
-        <text class="label">{{ content }}</text>
-      </view>
-    </view>
+    <circle-progress
+      :canvas-size="120"
+      :progress="80"
+      content="学习进度"
+      progress-color="#42b983"
+    ></circle-progress>
   </view>
 </template>
 
 <script>
+import CommonEnum from "../../enum/common";
+
 export default {
   data() {
     return {
-      progress: 80, // 当前进度值（0-100）
-      canvasSize: 80, // 画布大小
-      strokeWidth: 12, // 线条宽度
-      bgColor: "#f0f0f0", // 背景颜色
-      progressColor: "#007AFF", // 进度条颜色
-      textColor: "#333", // 文字颜色
-      content: "", //文字内容,
+      CommonEnum,
     };
   },
-  mounted() {
-    this.drawProgress();
-  },
-  watch: {
-    progress() {
-      this.drawProgress();
-    },
-    progressColor() {
-      this.drawProgress();
-    },
+  onLoad() {
+    // 页面加载时获取数据
   },
   methods: {
-    // 绘制进度条
-    drawProgress() {
-      const { progress, canvasSize, strokeWidth, bgColor, progressColor } =
-        this;
-      const ctx = uni.createCanvasContext("progressCanvas", this);
-      const center = canvasSize / 2;
-      const radius = center - strokeWidth / 2;
-
-      // 清除画布
-      ctx.clearRect(0, 0, canvasSize, canvasSize);
-
-      // 绘制背景圆
-      ctx.beginPath();
-      ctx.arc(center, center, radius, 0, 2 * Math.PI);
-      ctx.setStrokeStyle(bgColor);
-      ctx.setLineWidth(strokeWidth);
-      ctx.stroke();
-
-      // 绘制进度圆
-      const startAngle = -Math.PI / 2; // 从顶部开始
-      const endAngle = startAngle + (progress / 100) * 2 * Math.PI;
-
-      ctx.beginPath();
-      ctx.arc(center, center, radius, startAngle, endAngle);
-      ctx.setStrokeStyle(progressColor);
-      ctx.setLineWidth(strokeWidth);
-      ctx.setLineCap("round");
-      ctx.stroke();
-      ctx.draw();
-    },
+    // 加载页面数据
   },
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .page {
+  background: #ffffff;
+}
+
+.header {
+  width: 100%;
+  //min-height: 100vh;//可能导致页面留白
   display: flex;
+  align-items: flex-start;
   flex-direction: column;
-  align-items: center;
-  padding: 40rpx;
-  min-height: 100vh;
-  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-}
-
-.progress-container {
-  position: relative;
-  margin: 40rpx 0;
-}
-
-.progress-canvas {
-  border-radius: 50%;
-  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
-}
-
-.progress-text {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
-}
-
-.percent {
-  font-size: 36rpx;
-  font-weight: bold;
-  color: #333;
-  display: block;
-}
-
-.label {
-  font-size: 24rpx;
-  color: #666;
-  display: block;
-  margin-top: 10rpx;
+  padding: 0 15rpx 40rpx;
 }
 </style>