首次提交：初始化项目代码

2026-07-31 14:42:05 +08:00
commit ecca407485
84 changed files with 24158 additions and 0 deletions
@@ -0,0 +1,114 @@
+<template>
+	<view class="progress-bar">
+		<view
+			class="progress-track"
+			:style="trackStyle"
+		>
+			<view
+				class="progress-fill"
+				:style="fillStyle"
+			></view>
+		</view>
+		<text
+			v-if="showText"
+			class="progress-text"
+			:style="textStyle"
+		>{{ clampedPercent }}%</text>
+	</view>
+</template>
+
+<script>
+import themeMixin from '@/mixins/themeMixin.js'
+
+export default {
+	name: 'ProgressBar',
+	mixins: [themeMixin],
+	props: {
+		percent: {
+			type: Number,
+			default: 0
+		},
+		height: {
+			type: Number,
+			default: 12
+		},
+		showText: {
+			type: Boolean,
+			default: false
+		},
+		color: {
+			type: String,
+			default: ''
+		},
+		trackColor: {
+			type: String,
+			default: ''
+		},
+		animated: {
+			type: Boolean,
+			default: true
+		},
+		type: {
+			type: String,
+			default: 'gradient'
+		}
+	},
+	computed: {
+		clampedPercent() {
+			return Math.max(0, Math.min(100, this.percent))
+		},
+		statusColor() {
+			if (this.color) return this.color
+			if (this.clampedPercent >= 100) return this.themeConfig.dangerColor
+			if (this.clampedPercent > 80) return this.themeConfig.warningColor
+			return this.themeConfig.primaryColor
+		},
+		trackStyle() {
+			return {
+				height: this.height + 'rpx',
+				backgroundColor: this.trackColor || this.themeConfig.borderLight
+			}
+		},
+		fillStyle() {
+			const style = {
+				width: this.clampedPercent + '%',
+				transition: this.animated ? 'width 0.4s ease' : 'none'
+			}
+			if (this.type === 'gradient') {
+				style.background = `linear-gradient(90deg, ${this.statusColor}, ${this.themeConfig.gradientEnd})`
+			} else {
+				style.backgroundColor = this.statusColor
+			}
+			return style
+		},
+		textStyle() {
+			return {
+				color: this.themeConfig.textSecondary
+			}
+		}
+	}
+}
+</script>
+
+<style scoped>
+.progress-bar {
+	display: flex;
+	align-items: center;
+}
+
+.progress-track {
+	flex: 1;
+	border-radius: 100rpx;
+	overflow: hidden;
+}
+
+.progress-fill {
+	height: 100%;
+	border-radius: 100rpx;
+}
+
+.progress-text {
+	font-size: 22rpx;
+	margin-left: 16rpx;
+}
+</style>