添加圆形进度条

pages/demo/status/progress-circle.uvue

@@ -0,0 +1,70 @@
+<template>
+	<cl-page>
+		<view class="p-3">
+			<demo-item :label="t('自定义')">
+				<cl-progress-circle
+					:value="value"
+					:color="isColor ? 'red' : null"
+					:un-color="isColor ? '#f7bfbf' : null"
+					:size="isSize ? 80 : 120"
+					:show-text="isText"
+					:duration="isDuration ? 200 : 500"
+				></cl-progress-circle>
+
+				<cl-list
+					border
+					:pt="{
+						className: 'mt-5'
+					}"
+				>
+					<cl-list-item label="改个颜色">
+						<cl-switch v-model="isColor"></cl-switch>
+					</cl-list-item>
+
+					<cl-list-item label="显示文本">
+						<cl-switch v-model="isText"></cl-switch>
+					</cl-list-item>
+
+					<cl-list-item label="快一些">
+						<cl-switch v-model="isDuration"></cl-switch>
+					</cl-list-item>
+
+					<cl-list-item label="显示文本">
+						<cl-button type="light" size="small" icon="add-line" @tap="add"></cl-button>
+						<cl-button
+							type="light"
+							size="small"
+							icon="subtract-line"
+							@tap="sub"
+						></cl-button>
+					</cl-list-item>
+				</cl-list>
+			</demo-item>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { t } from "@/locale";
+import DemoItem from "../components/item.uvue";
+import { ctx } from "@/cool";
+
+const isSize = ref(false);
+const isText = ref(true);
+const isColor = ref(false);
+const isDuration = ref(false);
+const value = ref(70);
+
+function add() {
+	if (value.value < 100) {
+		value.value += 10;
+	}
+}
+
+function sub() {
+	if (value.value > 0) {
+		value.value -= 10;
+	}
+}
+</script>

pages/demo/status/progress.uvue

@@ -13,8 +13,8 @@
 				<cl-progress :value="30" :stroke-width="20"></cl-progress>
 			</demo-item>
 
-			<demo-item :label="t('显示文本')">
-				<cl-progress :value="75" show-text></cl-progress>
+			<demo-item :label="t('不显示文本')">
+				<cl-progress :value="75" :show-text="false"></cl-progress>
 			</demo-item>
 		</view>
 	</cl-page>

pages/index/home.uvue

@@ -292,11 +292,21 @@ const data = computed<Item[]>(() => {
 					icon: "timer-line",
 					path: "/pages/demo/status/countdown"
 				},
+				{
+					label: t("数字滚动"),
+					icon: "arrow-up-box-line",
+					path: "/pages/demo/status/rolling-number"
+				},
 				{
 					label: t("进度条"),
-					icon: "percent-line",
+					icon: "subtract-line",
 					path: "/pages/demo/status/progress"
 				},
+				{
+					label: t("圆形进度条"),
+					icon: "circle-line",
+					path: "/pages/demo/status/progress-circle"
+				},
 				{
 					label: t("骨架图"),
 					icon: "shadow-line",
@@ -306,11 +316,6 @@ const data = computed<Item[]>(() => {
 					label: t("加载更多"),
 					icon: "loader-4-line",
 					path: "/pages/demo/status/loadmore"
-				},
-				{
-					label: t("数字滚动"),
-					icon: "arrow-up-box-line",
-					path: "/pages/demo/status/rolling-number"
 				}
 			]
 		},