@didaoktv/didaoui-uniapp 1.0.0 → 1.2.0

package/components/dd-signature/dd-signature.vue

@@ -0,0 +1,513 @@
+<template>
+	<view class="dd-signature">
+		<view class="dd-signature__canvas-wrap" :style="{background: resolvedBgColor}">
+			<dd-canvas 
+				ref="signatureCanvas"
+				:canvas-id="canvasId"
+				:width="canvasWidth"
+				:height="canvasHeight"
+				:bg-color="resolvedBgColor"
+				@touchstart="touchStart" 
+				@touchmove="touchMove" 
+				@touchend="touchEnd"
+				:disable-scroll="true"
+				class="dd-signature__canvas"
+				:style="{
+					width: canvasWidth + 'px',
+					height: canvasHeight + 'px',
+				}">
+			</dd-canvas>
+		</view>
+		
+		<view v-if="showToolbar" class="dd-signature__toolbar">
+			<view class="dd-signature__toolbar-icons">
+				<view class="dd-signature__toolbar-icon" @click="undo">
+					<dd-icon name="arrow-left" size="22" :color="pathStack.length === 0 ? iconDisabledColor : iconDefaultColor"></dd-icon>
+				</view>
+				<view class="dd-signature__toolbar-icon" @click="clear">
+					<dd-icon name="delete" size="25" :color="iconDefaultColor"></dd-icon>
+				</view>
+				<view class="dd-signature__toolbar-icon" @click="toggleBrushSettings">
+					<dd-icon name="brush-o" size="25" :color="iconDefaultColor"></dd-icon>
+				</view>
+				<view class="dd-signature__toolbar-icon" @click="toggleColorSettings">
+					<dd-icon name="flower-o" size="24" :color="iconDefaultColor"></dd-icon>
+				</view>
+				<view class="dd-signature__toolbar-icon" @click="exportSignature">
+					<dd-icon name="checked" size="25" :color="isEmpty ? iconDisabledColor : iconDefaultColor"></dd-icon>
+				</view>
+			</view>
+			
+			<!-- 笔画设置 -->
+			<view v-if="showBrushSettings" class="dd-signature__brush-settings">
+				<view class="dd-signature__progress">
+					<text class="dd-signature__progress-label">{{ t("dd.signature.penSize") }}:</text>
+					<dd-slider
+						v-model="lineWidth"
+						:min="1"
+						:max="20"
+						:step="1"
+					></dd-slider>
+				</view>
+			</view>
+			
+			<!-- 颜色设置 -->
+			<view v-if="showColorSettings" class="dd-signature__color-settings">
+				<view class="dd-signature__color-picker">
+                    <text class="dd-signature__color-label">{{ t("dd.signature.penColor") }}:</text>
+					<view class="dd-signature__colors">
+						<view 
+							v-for="(color, index) in presetColors" 
+							:key="index"
+							class="dd-signature__color-item"
+							:class="{'dd-signature__color-item--active': lineColor === color}"
+							:style="{ backgroundColor: color }"
+							@click="selectColor(color)"
+						></view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { t } from '../../libs/i18n'
+	export default {
+		name: 'dd-signature',
+		props: {
+			// 画布宽度
+			width: {
+				type: [String, Number],
+				default: 300
+			},
+			// 画布高度
+			height: {
+				type: [String, Number],
+				default: 200
+			},
+			// 背景颜色
+			bgColor: {
+				type: String,
+				default: '#ffffff'
+			},
+			// 默认笔画颜色
+			color: {
+				type: String,
+				default: '#000000'
+			},
+			// 默认笔画粗细
+			thickness: {
+				type: [String, Number],
+				default: 3
+			},
+			// 是否显示工具栏
+			showToolbar: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				canvasId: 'dd-signature-' + Math.random().toString(36).substr(2, 9),
+				canvasWidth: 300,
+				canvasHeight: 200,
+				lineColor: '',
+				lineWidth: 3,
+				isDrawing: false,
+				pathStack: [], // 存储绘制路径用于回退
+				currentPath: [], // 当前绘制路径
+				isEmpty: true,
+				presetColors: [
+					'#000000', // 黑色
+					'#ff0000', // 红色
+					'#00ff00', // 绿色
+					'#0000ff', // 蓝色
+					'#ffff00', // 黄色
+					'#00ffff', // 青色
+					'#ff00ff', // 紫色
+					'#ffffff'  // 白色
+				],
+				showBrushSettings: false,
+				showColorSettings: false,
+				lastPoint: null, // 保存上一个点的坐标
+				canvasInstance: null // 缓存canvas实例
+			}
+		},
+		computed: {
+			// ponytail: 剥离运行时主题；签名画布默认保持白底（导出图片需白底）
+			resolvedBgColor() {
+				return this.bgColor
+			},
+			iconDefaultColor() {
+				return '#999999'
+			},
+			iconDisabledColor() {
+				return '#5c5c5c'
+			}
+		},
+		mounted() {
+			// 初始化时获取canvas实例
+			this.$nextTick(() => {
+				this.getCanvasInstance();
+				this.clearCanvas();
+			});
+		},
+		watch: {
+			width: {
+				handler(newVal) {
+					this.canvasWidth = Number(newVal)
+				},
+				immediate: true
+			},
+			height: {
+				handler(newVal) {
+					this.canvasHeight = Number(newVal)
+				},
+				immediate: true
+			},
+			color: {
+				handler(newVal) {
+					this.lineColor = this.resolveStrokeColor(newVal)
+				},
+				immediate: true
+			},
+			thickness: {
+				handler(newVal) {
+					this.lineWidth = Number(newVal)
+				},
+				immediate: true
+			}
+		},
+		methods: {
+			t,
+			resolveStrokeColor(color) {
+				return color
+			},
+			
+			// 获取签名画布实例
+			getCanvasInstance() {
+				if (this.canvasInstance) {
+					return this.canvasInstance;
+				}
+				
+				const canvasRef = this.$refs.signatureCanvas;
+				if (canvasRef) {
+					this.canvasInstance = canvasRef;
+					return canvasRef;
+				}
+				return null;
+			},
+			
+			touchStart(e) {
+				if (!this.canvasInstance || !this.canvasInstance.ctx) {
+					this.getCanvasInstance();
+				}
+				
+				if (!this.canvasInstance || !this.canvasInstance.ctx) return;
+				
+				this.isDrawing = true;
+				this.isEmpty = false;
+				this.currentPath = [];
+				
+				const { x, y } = this.getCanvasPoint(e);
+				
+				// 设置线条样式
+				this.canvasInstance.setLineStyle(this.lineColor, this.lineWidth);
+				
+				// 开始路径
+				this.canvasInstance.beginPath();
+				this.canvasInstance.moveTo(x, y);
+				
+				// 记录起始点
+				this.currentPath.push({
+					x,
+					y,
+					type: 'start',
+					color: this.lineColor,
+					width: this.lineWidth
+				});
+				
+				// 保存上一个点
+				this.lastPoint = { x, y };
+				
+				// 阻止默认事件以提高性能
+				e.preventDefault();
+			},
+			
+			touchMove(e) {
+				if (!this.isDrawing || !this.canvasInstance || !this.canvasInstance.ctx) return;
+				
+				// 阻止默认事件以提高性能
+				e.preventDefault();
+				
+				const { x, y } = this.getCanvasPoint(e);
+				
+				// 从上一个点画线到当前点
+				this.canvasInstance.lineTo(x, y);
+				this.canvasInstance.stroke(); // 实时绘制当前线段
+				this.currentPath.push({
+					x,
+					y,
+					type: 'move'
+				});
+				this.canvasInstance.draw(false);
+				
+				// 更新上一个点
+				this.lastPoint = { x, y };
+			},
+			
+			touchEnd(e) {
+				if (!this.isDrawing || !this.canvasInstance || !this.canvasInstance.ctx) return;
+				
+				this.isDrawing = false;
+				this.canvasInstance.closePath();
+				this.lastPoint = null;
+				
+				// 将当前路径加入栈中用于回退
+				if (this.currentPath.length > 0) {
+					this.pathStack.push([...this.currentPath]);
+				}
+				
+				// 最后统一执行一次绘制
+				this.canvasInstance.draw(true);
+			},
+			
+			// 同步获取canvas坐标点（兼容处理）
+			getCanvasPoint(e) {
+				let touch;
+				// #ifdef MP-WEIXIN
+				touch = e.touches && e.touches[0] ? e.touches[0] : e.mp.touches[0];
+				// #endif
+				// #ifndef MP-WEIXIN
+				touch = e.touches[0];
+				// #endif
+				
+				// 计算相对于canvas的坐标
+				// 由于无法直接获取canvas位置，这里简化处理
+				// 实际应用中可能需要通过uni.createSelectorQuery获取canvas位置
+				return {
+					x: touch.x,
+					y: touch.y
+				};
+			},
+			
+			// 选择颜色
+			selectColor(color) {
+				this.lineColor = color
+			},
+			
+			// 回退操作
+			undo() {
+				if (this.pathStack.length === 0) return
+				
+				// 弹出最后一个路径
+				this.pathStack.pop()
+				
+				// 重新绘制
+				this.redraw()
+			},
+			
+			// 重新绘制所有路径
+			redraw() {
+				if (!this.canvasInstance) {
+					this.getCanvasInstance();
+				}
+				
+				if (!this.canvasInstance) return;
+				
+				// 先清空画布
+				this.canvasInstance.clearCanvas();
+				
+				if (this.pathStack.length === 0) {
+					this.isEmpty = true;
+					return;
+				}
+				
+				this.isEmpty = false;
+				
+				// 逐个绘制路径
+				this.pathStack.forEach(path => {
+					if (path.length === 0) return;
+					
+					this.canvasInstance.beginPath();
+					
+					let lastPoint = null;
+					path.forEach((point, index) => {
+						if (index === 0 && point.type === 'start') {
+							// 设置线条样式
+							this.canvasInstance.setLineStyle(point.color, point.width);
+							this.canvasInstance.moveTo(point.x, point.y);
+							lastPoint = { x: point.x, y: point.y };
+						} else if (point.type === 'move') {
+							this.canvasInstance.lineTo(point.x, point.y);
+							lastPoint = { x: point.x, y: point.y };
+						}
+					});
+					this.canvasInstance.stroke();
+					this.canvasInstance.draw(true);
+				});
+			},
+			
+			// 清空画布内容
+			clearCanvas() {
+				if (!this.canvasInstance) {
+					this.getCanvasInstance();
+				}
+				
+				if (!this.canvasInstance) return;
+				
+				this.canvasInstance.clearCanvas();
+			},
+
+			// 对外暴露的清空方法（供工具栏与ref调用）
+			clear() {
+				this.pathStack = []
+				this.currentPath = []
+				this.lastPoint = null
+				this.isDrawing = false
+				this.isEmpty = true
+				this.clearCanvas()
+				this.$emit('clear')
+			},
+			
+			// 导出签名图片
+			async exportSignature() {
+				if (this.isEmpty) {
+					console.warn('签名为空，无法导出');
+					return;
+				}
+				
+				if (!this.canvasInstance) {
+					this.getCanvasInstance();
+				}
+				
+				if (!this.canvasInstance) {
+					console.error('无法获取画布实例');
+					return;
+				}
+				
+				try {
+					// 先重绘整个签名内容
+					this.redraw();
+					
+					// 导出图片
+					const imagePath = await this.canvasInstance.exportImage('png', 1);
+					this.$emit('confirm', imagePath);
+				} catch (error) {
+					console.error('导出签名图片失败:', error);
+					this.$emit('error', error);
+				}
+			},
+			
+			// 切换笔画设置显示
+			toggleBrushSettings() {
+				this.showBrushSettings = !this.showBrushSettings;
+				if (this.showBrushSettings) {
+					this.showColorSettings = false;
+				}
+			},
+			
+			// 切换颜色设置显示
+			toggleColorSettings() {
+				this.showColorSettings = !this.showColorSettings;
+				if (this.showColorSettings) {
+					this.showBrushSettings = false;
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../scss/variables';
+	@import '../../scss/mixins';
+	.dd-signature {
+		display: flex;
+		flex-direction: column;
+		
+		&__canvas-wrap {
+			border: 1px solid $dd-border-default;
+			border-radius: 4px;
+			overflow: hidden;
+		}
+		
+		&__canvas {
+			width: 100%;
+			height: 100%;
+		}
+		
+		&__toolbar {
+			margin-top: 5px;
+            background-color: $dd-bg-elevated;
+		}
+		
+		&__toolbar-icons {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 1px 0;
+			// border: 1px solid #e0e0e0;
+			border-radius: 4px;
+		}
+		
+		&__toolbar-icon {
+			padding: 5px;
+		}
+		
+		&__brush-settings,
+		&__color-settings {
+			margin-top: 15px;
+			padding: 1px;
+			// border: 1px solid #e0e0e0;
+			border-radius: 4px;
+		}
+		
+		&__progress {
+			&-label {
+				display: block;
+				margin-bottom: 10px;
+				font-size: 14px;
+				color: $dd-text-tertiary;
+			}
+		}
+		
+		&__color-picker {
+			margin-bottom: 10px;
+		}
+		
+		&__color-label {
+			display: block;
+			margin-bottom: 10px;
+			font-size: 14px;
+			color: $dd-text-tertiary;
+		}
+		
+		&__colors {
+			display: flex;
+            flex-direction: row;
+			flex-wrap: wrap;
+			gap: 10px;
+		}
+		
+		&__color-item {
+			width: 30px;
+			height: 30px;
+			border-radius: 50%;
+			border: 2px solid $dd-border-default;
+			cursor: pointer;
+			
+			&--active {
+				border-color: $dd-primary-400;
+				transform: scale(1.1);
+			}
+		}
+		
+		&__actions {
+			display: flex;
+            flex-direction: row;
+			gap: 10px;
+			justify-content: center;
+		}
+	}
+</style>

package/components/dd-skeleton/dd-skeleton.vue

@@ -119,7 +119,7 @@ const lineWidths = computed(() => {
     &--title {
       height: 36rpx;
       width: 50%;
-      margin-bottom: 24rpx;
+      margin-bottom: $dd-space-3;
     }
   }
 

package/components/dd-slider/dd-slider.vue

@@ -178,7 +178,7 @@ function onMouseDown(e: any) {
     top: 50%;
     width: 32rpx;
     height: 32rpx;
-    background: #ffffff;
+    background: $dd-color-white;
     border: 4rpx solid $dd-primary-400;
     border-radius: 50%;
     box-shadow: $dd-shadow-glow-gold-lg;
@@ -192,10 +192,10 @@ function onMouseDown(e: any) {
 
   &__tooltip {
     position: absolute;
-    bottom: calc(100% + 16rpx);
+    bottom: calc(100% + $dd-space-2);
     left: 50%;
     transform: translateX(-50%);
-    padding: 6rpx 16rpx;
+    padding: 6rpx $dd-space-2;
     @include dd-glass;
     border-radius: $dd-radius-sm;
     white-space: nowrap;
@@ -213,7 +213,7 @@ function onMouseDown(e: any) {
   }
 
   &__tooltip-text {
-    font-size: 24rpx;
+    font-size: $dd-font-size-caption;
     font-weight: 600;
     color: $dd-primary-300;
     line-height: 1.2;

package/components/dd-stat-card/dd-stat-card.vue

@@ -88,27 +88,27 @@ function onClick(e: Event) {
   &__value-row {
     display: flex;
     align-items: baseline;
-    gap: 8rpx;
+    gap: $dd-space-1;
     margin-top: $dd-space-1;
   }
 
   &__prefix {
     font-size: $dd-font-size-h3;
     font-weight: 700;
-    color: #ffffff;
+    color: $dd-color-white;
   }
 
   &__value {
     font-size: $dd-font-size-h1;
     font-weight: 800;
-    color: #ffffff;
+    color: $dd-color-white;
     line-height: 1.2;
   }
 
   &__trend {
     display: inline-flex;
     align-items: baseline;
-    gap: 4rpx;
+    gap: $dd-space-1;
     font-size: $dd-font-size-caption;
     font-weight: 600;
     margin-left: $dd-space-1;
@@ -119,7 +119,7 @@ function onClick(e: Event) {
     }
 
     &--up {
-      color: #ffffff;
+      color: $dd-color-white;
     }
 
     &--down {

package/components/dd-step/dd-step.vue

@@ -105,13 +105,13 @@ const lineStyle = computed(() => ({
   &__head {
     position: relative;
     width: 100%;
-    height: 40rpx;
+    height: $dd-size-icon-md;
     display: flex;
     align-items: center;
     justify-content: center;
 
     &--vertical {
-      width: 40rpx;
+      width: $dd-size-icon-md;
       height: auto;
       flex-direction: column;
       align-self: stretch;
@@ -137,15 +137,15 @@ const lineStyle = computed(() => ({
       width: 1px;
       flex: 1;
       min-height: 32rpx;
-      margin: 8rpx 0;
+      margin: $dd-space-1 0;
     }
   }
 
   &__circle {
     position: relative;
     z-index: 1;
-    width: 40rpx;
-    height: 40rpx;
+    width: $dd-size-icon-md;
+    height: $dd-size-icon-md;
     border-radius: $dd-radius-full;
     @include dd-flex-center;
     flex-shrink: 0;
@@ -153,20 +153,20 @@ const lineStyle = computed(() => ({
   }
 
   &__circle-text {
-    font-size: 20rpx; // font-size-xs
+    font-size: $dd-font-size-caption;
     font-weight: 700;
     line-height: 1;
   }
 
   &__content {
     text-align: center;
-    margin-top: 8rpx;
+    margin-top: $dd-space-1;
 
     &--vertical {
       text-align: left;
       flex: 1;
-      padding-bottom: 32rpx;
-      padding-left: 8rpx;
+      padding-bottom: $dd-space-4;
+      padding-left: $dd-space-1;
       margin-top: 0;
     }
   }
@@ -179,8 +179,8 @@ const lineStyle = computed(() => ({
 
   &__desc {
     display: block;
-    margin-top: 4rpx;
-    font-size: 20rpx;
+    margin-top: $dd-space-1;
+    font-size: $dd-font-size-caption;
     color: $dd-text-tertiary;
     line-height: 1.4;
   }

package/components/dd-stepper/dd-stepper.vue

@@ -91,8 +91,8 @@ function onPlus() {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 8rpx;
-  padding: 4rpx;
+  gap: $dd-space-1;
+  padding: $dd-space-1;
   background: $dd-neutral-800;
   border: 1px solid $dd-neutral-700;
   border-radius: $dd-radius-full;
@@ -146,11 +146,11 @@ function onPlus() {
     height: 56rpx;
   }
   .dd-stepper__icon {
-    font-size: 32rpx;
+    font-size: $dd-font-size-h4;
   }
   .dd-stepper__value {
     min-width: 80rpx;
-    font-size: 32rpx;
+    font-size: $dd-font-size-h4;
   }
 }
 
@@ -164,8 +164,8 @@ function onPlus() {
     font-size: 26rpx;
   }
   .dd-stepper__value {
-    min-width: 64rpx;
-    font-size: 28rpx;
+    min-width: $dd-space-6;
+    font-size: $dd-font-size-body;
   }
 }
 </style>

package/components/dd-swipe-action/dd-swipe-action.vue

@@ -213,7 +213,7 @@ defineExpose({ close })
     color: $dd-color-white;
     @include dd-flex-center;
     flex-direction: column;
-    gap: 8rpx;
+    gap: $dd-space-1;
     overflow: hidden;
   }