Merge branch 'master' of http://150.158.33.144:3000/lalalashen/MoeNovaClient

pages/makedetail/makeDetail.scss

@@ -383,6 +383,65 @@ page {
 	  }
 	}
 	
+	/* 像素颜色显示区域样式 */
+	.pixel-color {
+		display: flex;
+		align-items: center;
+		margin: 15rpx 0;
+		padding: 12rpx 16rpx;
+		background: #f9f9f9;
+		border-radius: 12rpx;
+		
+		.color-box {
+			width: 40rpx;
+			height: 40rpx;
+			border-radius: 8rpx;
+			margin-right: 16rpx;
+			border: 1px solid #eee;
+			box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+			
+			&.loading {
+				background: linear-gradient(45deg, #f0f0f0 25%, #e0e0e0 25%, #e0e0e0 50%, #f0f0f0 50%, #f0f0f0 75%, #e0e0e0 75%);
+				background-size: 10rpx 10rpx;
+				animation: loading 1s linear infinite;
+			}
+		}
+		
+		.color-info {
+			display: flex;
+			flex-direction: column;
+		}
+		
+		.color-text {
+			font-size: 24rpx;
+			color: #666;
+			margin-bottom: 4rpx;
+		}
+		
+		.color-value {
+			font-size: 24rpx;
+			color: #333;
+			font-family: monospace;
+			margin-bottom: 4rpx;
+		}
+		
+		.color-hex {
+			font-size: 24rpx;
+			color: #444;
+			font-family: monospace;
+			font-weight: bold;
+		}
+		
+		&.loading {
+			background: #f5f5f5;
+		}
+	}
+	
+	@keyframes loading {
+		from { background-position: 0 0; }
+		to { background-position: 20rpx 0; }
+	}
+	
 	.popup-footer {
 	  display: flex;
 	  border-top: 1rpx solid #f0f0f0;

pages/makedetail/makeDetail.vue

@@ -50,6 +50,25 @@
 		<view class="body">
 			<view class="article-header">
 				<text class="title">{{ queueDetail.title }}</text>
+
+				<!-- 显示第一个像素的颜色 -->
+				<view class="pixel-color" v-if="pixelColor">
+					<view class="color-box"
+						:style="{backgroundColor: `rgb(${pixelColor.r}, ${pixelColor.g}, ${pixelColor.b})`}"></view>
+					<view class="color-info">
+						<text class="color-text">左上角像素RGB值:</text>
+						<text class="color-value">R:{{pixelColor.r}} G:{{pixelColor.g}} B:{{pixelColor.b}}</text>
+						<text class="color-hex">HEX: {{rgbToHex(pixelColor.r, pixelColor.g, pixelColor.b)}}</text>
+					</view>
+				</view>
+
+				<!-- 颜色加载中状态 -->
+				<view class="pixel-color loading"
+					v-else-if="home_image && home_image !== '../../static/home/avator.png'">
+					<view class="color-box loading"></view>
+					<!-- <text class="color-text">正在获取像素颜色...</text> -->
+				</view>
+
 				<view class="meta-info">
 					<view class="meta-item">
 						<text class="fa fa-clock-o"></text>
@@ -130,6 +149,10 @@
 		<!-- 音频元素 -->
 		<audio id="audioPlayer" :src="queueDetail.result_audio" style="display:none;"></audio>
 
+		<!-- 用于处理图片像素的隐藏canvas -->
+		<canvas canvas-id="pixelCanvas"
+			style="width: 10px; height: 10px; position: absolute; left: -100px; top: -100px;"></canvas>
+
 		<!-- 底部漂浮栏 -->
 		<view class="floating-bar" v-if="queueDetail.status == 9">
 			<view class="floating-bar-content">
@@ -187,6 +210,7 @@
 				audioPlayer: null,
 				showNotePopup: false,
 				noteContent: '',
+				pixelColor: null, // 存储像素颜色值
 
 				// 队列详情数据
 				queueDetail: {
@@ -222,7 +246,7 @@
 		},
 		onLoad(parms) {
 			let self = this;
-			this.arcID = parms.id || 3;
+			this.arcID = parms.id || 9;
 			this.getMyInfo();
 		},
 		onShow() {
@@ -243,6 +267,77 @@
 			}
 		},
 		methods: {
+			// 获取图片第一个像素的RGB值
+			getImagePixelColor() {
+				console.log("图片加载完成，准备获取像素颜色");
+
+				// 清空之前的颜色值，进入加载状态
+				this.pixelColor = null;
+
+				// 如果是默认图片或空图片，则直接返回
+				if (!this.home_image || this.home_image === '../../static/home/avator.png') {
+					console.log("无有效图片，不获取像素颜色");
+					return;
+				}
+
+				// 使用uni.getImageInfo获取图片信息
+				uni.getImageInfo({
+					src: this.home_image,
+					success: (res) => {
+						console.log("图片信息:", res);
+
+						// 创建临时canvas绘制上下文
+						const ctx = uni.createCanvasContext('pixelCanvas', this);
+
+						// 修改绘制参数，确保只绘制图片左上角的一小块区域
+						// drawImage(图片路径, 源图片裁剪x, 源图片裁剪y, 源图片裁剪宽度, 源图片裁剪高度, canvas目标x, canvas目标y, canvas目标宽度, canvas目标高度)
+						// 这里我们只从源图片左上角裁剪10x10的区域，绘制到canvas的左上角
+						ctx.drawImage(res.path, 0, 0, 10, 10, 0, 0, 10, 10);
+
+						ctx.draw(false, () => {
+							// 绘制完成后，获取像素数据
+							setTimeout(() => { // 添加短暂延迟确保绘制完成
+								uni.canvasGetImageData({
+									canvasId: 'pixelCanvas',
+									x: 0, // 获取(0,0)位置的像素
+									y: 0,
+									width: 1,
+									height: 1,
+									success: (res) => {
+										// 获取像素RGB值
+										this.pixelColor = {
+											r: res.data[0],
+											g: res.data[1],
+											b: res.data[2],
+											a: res.data[3]
+										};
+										console.log("第一个像素的RGB值:", this
+											.pixelColor);
+									},
+									fail: (err) => {
+										console.error("获取像素数据失败:", err);
+										// 显示错误提示
+										uni.showToast({
+											title: '获取颜色失败',
+											icon: 'none',
+											duration: 2000
+										});
+									}
+								});
+							}, 100);
+						});
+					},
+					fail: (err) => {
+						console.error("获取图片信息失败:", err);
+						// 显示错误提示
+						uni.showToast({
+							title: '图片加载失败',
+							icon: 'none',
+							duration: 2000
+						});
+					}
+				});
+			},
 			// 返回上一页
 			goBack() {
 				uni.navigateBack({
@@ -327,7 +422,7 @@
 				uni.showLoading({
 					title: '加载中...'
 				});
-
+				let that = this;
 				uni.request({
 					url: this.$apiHost + '/WorkAI/getQueueDetail',
 					data: {
@@ -349,6 +444,11 @@
 							if (this.queueDetail.result_images && this.queueDetail.result_images !== "") {
 								this.image_list = this.queueDetail.result_images.split(",");
 								this.home_image = this.image_list[0];
+
+								// 当图片更新后，手动触发获取像素颜色（因为图片可能从缓存加载，不会触发@load事件）
+								// setTimeout(() => {
+								// 	that.getImagePixelColor();
+								// }, 500);
 							} else {
 								this.home_image = "../../static/home/avator.png";
 							}
@@ -671,6 +771,9 @@
 					console.log('Lyrics Text Height:', lyricsTextHeight);
 					console.log('Current Offset Y:', this.offsetY);
 				}
+			},
+			rgbToHex(r, g, b) {
+				return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 			}
 		}
 	}

pages/my/my.vue

@@ -74,7 +74,7 @@
 					</view>
 				</view>
 				<view class="numlist2" style="margin-top: 60rpx;">
-					<view class="item" v-for="(item,index) in worksList" :key="index">
+					<view class="item" v-for="(item,index) in worksList" :key="index" v-if="index < 2">
 						<view class="num" @click="goWork(item)">
 							<!-- 当activeTab为0时显示图片 -->
 							<image v-if="activeTab === 0" class="icon"
@@ -109,11 +109,12 @@
 				</view>
 
 				<!-- 加载更多提示 -->
-				<view class="loading-more" v-if="isLoading">加载中...</view>
+				<!-- <view class="loading-more" v-if="isLoading">加载中...</view>
 				<view class="no-more" v-if="!hasMore && worksList.length > 0">没有更多作品了</view>
-				<view class="no-more" v-if="!hasMore && worksList.length === 0">暂无作品</view>
+				<view class="no-more" v-if="!hasMore && worksList.length === 0">暂无作品</view> -->
 
 			</view>
+			<view style="width:100%;text-align: center;">杭州智潮创意科技有限公司</view>
 
 			<view class="blankHeight"></view>
 			<view class="blankHeight"></view>