将文本翻译成日语

src/pages/post.vue

@@ -11,10 +11,11 @@
 					<image v-if="post.user && post.user.userImg" :src="post.user.userImg" mode="aspectFill" class="userimg"
 						alt="用户头像" />
 					<image v-else src="/static/imgs/default-avatar.png" mode="aspectFill" class="userimg" alt="默认头像" />
-					<text class="username">{{ post.user ? post.user.nickName : '未知用户' }}</text>
+					<!-- 用户名翻译 -->
+					<text class="username">{{ post.translatedUserName || post.user.nickName }}</text>
 					<button class="follow" @tap="common.openapp">
 						<uni-icons v-if="post.isfollow" type="checkmarkempty" size="20" color="#333"></uni-icons>
-						<text v-else>关注</text>
+						<text v-else>フォロー</text>
 					</button>
 				</view>
 
@@ -27,20 +28,10 @@
 								@load="onImageLoad(i)" @error="onImageError(i)" />
 							<video v-else-if="item.type === 'video'" id="videoid" :src="item.src" class="swiper-item"
 								:controls="false" @tap="pausevideo" object-fit="contain" alt="动态视频内容" />
-							<!-- 播放按钮 - 使用浏览器复制的样式 -->
+							<!-- 播放按钮 -->
 							<view v-if="!isPlaying" class="uni-video-cover" @tap="pausevideo">
 								<view class="uni-video-cover-play-button uni-video-icon"></view>
 							</view>
-
-							<!-- <cover-view class="swiper-mask" @tap="common.openapp">
-							</cover-view> -->
-							<!-- 图片加载状态 -->
-							<!-- <view v-if="item.loading" class="image-loading">
-								<text>图片加载中...</text>
-							</view>
-							<view v-if="item.error" class="image-error">
-								<text>图片加载失败</text>
-							</view> -->
 						</view>
 					</swiper-item>
 				</swiper>
@@ -51,8 +42,9 @@
 				</view>
 
 				<!-- 底部文案 -->
-				<view v-if="post.copywriting && post.date" class="momentbottom">
-					<text class="copywriting">{{ post.copywriting }}</text>
+				<view v-if="(post.copywriting || post.translatedContent) && post.date" class="momentbottom">
+					<!-- 内容翻译 -->
+					<text class="copywriting">{{ post.translatedContent || post.copywriting }}</text>
 					<uni-dateformat :date="Date.parse(post.date.replace(/-/g, '/'))" :threshold="[0, 0]" format="yyyy-MM-dd"
 						class="date-text" />
 				</view>
@@ -64,16 +56,13 @@
 		<!-- 评论区域 + 互动区域 -->
 		<Comments :postid="post.id" />
 
-		<!-- 互动区域 -->
-		<!-- <Intereact :collectsum="post.collectsum" :likesum="post.likesum" /> -->
-
 		<!-- Findmore -->
 		<Findmore />
 
 	</view>
 
 	<view v-else class="loading-container">
-		<text>页面加载中...</text>
+		<text>ページ読み込み中...</text>
 	</view>
 
 </template>
@@ -86,20 +75,27 @@ import Head from '@/pages/head/head.vue'
 import Comments from '@/pages/comments/comments.vue'
 import Findmore from '@/pages/findmore/findmore.vue'
 import { getPostList, getPostLImage, getPostVideo, getUserImg } from '../api/api.js'
+// 引入翻译工具
+import { translateZhToJa } from '@/utils/translate.js';
+
 const common = useCommonStore()
 
-// 当前 dot
+// 当前轮播图索引
 const current = ref(0)
 const onChange = e => current.value = e.detail.current
 
-// 动态数据
-const post = ref({})
+// 动态数据 - 初始化翻译相关字段
+const post = ref({
+  translatedContent: '', // 内容翻译结果
+  translatedUserName: '' // 用户名翻译结果
+});
+
 // 播放状态
-const isPlaying = ref(true) // 默认播放状态
-// 资源加载状态
+const isPlaying = ref(true)
+// 页面加载状态
 const finishloading = ref(false)
 
-// 图片加载成功处理
+// 图片加载处理
 const onImageLoad = (index) => {
 	if (post.value.imgs && post.value.imgs[index]) {
 		post.value.imgs[index].loading = false
@@ -107,7 +103,6 @@ const onImageLoad = (index) => {
 	}
 }
 
-// 图片加载失败处理
 const onImageError = (index) => {
 	if (post.value.imgs && post.value.imgs[index]) {
 		post.value.imgs[index].loading = false
@@ -116,13 +111,10 @@ const onImageError = (index) => {
 	}
 }
 
-//暂停/播放
+// 视频播放/暂停控制
 const pausevideo = () => {
-	// 获取VideoContext实例
 	const videoCtx = uni.createVideoContext('videoid', getCurrentInstance());
-	// 检查视频状态并切换播放/暂停
 	if (videoCtx) {
-		// 使用一个状态变量来跟踪播放状态
 		if (isPlaying.value) {
 			videoCtx.pause()
 			isPlaying.value = false
@@ -133,16 +125,14 @@ const pausevideo = () => {
 	}
 }
 
-
-// 组件挂载时获取数据
+// 组件挂载时获取数据并翻译
 onLoad(() => {
 	const params = ''
-	getPostList(params).then(res => {
+	getPostList(params).then(async (res) => {
 		try {
-			// console.log(res.data.data)
 			const data = res.data.data
 
-			// 处理帖子相关字段 - 根据实际API返回字段优化
+			// 处理帖子相关字段
 			data.id = data.id || ''
 			data.title = data.newsTitle || data.title || ''
 			data.source = data.newsSource || data.source || ''
@@ -150,9 +140,17 @@ onLoad(() => {
 			data.date = data.time || data.date || ''
 			data.countLike = data.likeCount || data.countLike || 0
 			data.collectsum = data.collectsum || 0
-			// data.user.nickName = data.user.nickName || ''
-			// data.user.userImg = data.user.avatar || data.userImg || ''
-			// data.comments = data.comments || []
+
+			// 仅翻译后端返回的特定内容
+			// 1. 翻译用户名
+			if (data.user && data.user.nickName) {
+				data.translatedUserName = await translateZhToJa(data.user.nickName);
+			}
+			
+			// 2. 翻译内容
+			if (data.copywriting) {
+				data.translatedContent = await translateZhToJa(data.copywriting);
+			}
 
 			const mediaPromises = []
 
@@ -161,15 +159,14 @@ onLoad(() => {
 				data.imgs.forEach(image => {
 					mediaPromises.push(getPostLImage(image.original_url).then(imageRes => {
 						if (imageRes.statusCode === 200 && imageRes.data) {
-							// 将arraybuffer转换为base64
 							const base64 = uni.arrayBufferToBase64(imageRes.data)
 							const imageUrl = 'data:image/webp;base64,' + base64
 							return {
 								type: 'img',
 								src: imageUrl,
 								original_url: image.original_url,
-								loading: true, // 初始加载状态
-								error: false   // 错误状态
+								loading: true,
+								error: false
 							}
 						}
 						return null
@@ -183,20 +180,19 @@ onLoad(() => {
 				})
 			}
 
-			//处理视频资源
+			// 处理视频资源
 			if (data.videos && Array.isArray(data.videos)) {
 				data.videos.forEach(video => {
 					mediaPromises.push(getPostVideo(video.original_url).then(videoRes => {
 						if (videoRes.statusCode === 200 && videoRes.data) {
-							// 将arraybuffer转换为base64
 							const base64 = uni.arrayBufferToBase64(videoRes.data)
 							const videoUrl = 'data:video/mp4;base64,' + base64
 							return {
 								type: 'video',
 								src: videoUrl,
 								original_url: video.original_url,
-								loading: true, // 初始加载状态
-								error: false   // 错误状态
+								loading: true,
+								error: false
 							}
 						}
 						return null
@@ -210,14 +206,12 @@ onLoad(() => {
 				})
 			}
 
-			//处理用户信息
+			// 处理用户信息
 			if (data.user && data.user.constructor === Object) {
-				// 如果有头像路径，则获取头像资源
 				const avatarPath = data.user.avatar || data.userImg
 				if (avatarPath) {
 					mediaPromises.push(getUserImg(avatarPath).then(userImgRes => {
 						if (userImgRes.statusCode === 200 && userImgRes.data) {
-							// 将arraybuffer转换为base64
 							const base64 = uni.arrayBufferToBase64(userImgRes.data)
 							const userImgUrl = 'data:image/webp;base64,' + base64
 							return {
@@ -235,60 +229,51 @@ onLoad(() => {
 
 				data.user = {
 					nickName: data.user.nickName || '',
-					userImg: avatarPath || '' // 先使用原始路径，后续会替换为base64
+					userImg: avatarPath || ''
 				}
 
 			}
 
-			// 统一等待所有媒体资源加载完成
+			// 等待所有媒体资源加载完成
 			if (mediaPromises.length > 0) {
 				Promise.all(mediaPromises).then(mediaItems => {
-					// 过滤掉null值，将有效的媒体资源合并到imgs数组中
 					const validMediaItems = mediaItems.filter(item => item !== null)
-
-					// 分离用户头像和其他媒体资源
 					const userImgItem = validMediaItems.find(item => item.type === 'userImg')
 					const otherMediaItems = validMediaItems.filter(item => item.type !== 'userImg')
 
-					// 如果有用户头像资源，更新用户头像
 					if (userImgItem) {
 						data.user.userImg = userImgItem.src
 					}
 
-					// 设置其他媒体资源
 					data.imgs = otherMediaItems
-
-					// post.value = data
-					console.log(data)
 					Object.assign(post.value, data)
 					finishloading.value = true
 				})
 			} else {
-				// 如果没有媒体资源，设置空数组
 				data.imgs = []
 				post.value = data
+				finishloading.value = true
 			}
 
 		} catch (error) {
-			handleError('数据处理错误:', error, '数据加载失败', '抱歉，新闻内容加载失败，请稍后重试')
+			handleError(error)
 		}
 	}).catch(error => {
-		handleError('网络请求错误:', error, '网络错误', '网络连接异常，请检查网络设置')
+		handleError(error)
 	})
 
-	// 统一的错误处理函数
-	const handleError = (errorType, error, title, message) => {
-		console.error(errorType, error)
+	// 错误处理函数
+	const handleError = (error) => {
+		console.error('数据处理错误:', error)
 		post.value = {
-			title: title,
-			source: '系统',
-			copywriting: message,
+			user: { nickName: '不明ユーザー', userImg: '' },
+			translatedUserName: '不明ユーザー',
+			copywriting: 'コンテンツを読み込めませんでした',
+			translatedContent: 'コンテンツを読み込めませんでした',
 			date: new Date().toISOString(),
-			countLike: 0,
-			collectsum: 0,
-			comments: [],
 			imgs: []
 		}
+		finishloading.value = true
 	}
 
 })
@@ -296,6 +281,7 @@ onLoad(() => {
 </script>
 
 <style scoped>
+/* 保持原有样式不变 */
 page,
 .page {
 	width: 100%;
@@ -304,19 +290,16 @@ page,
 	display: flex;
 	flex-direction: column;
 	margin: 0 auto;
-	/* position: relative; */
 }
 
 .content {
 	flex-shrink: 0;
-	/* overflow: hidden; */
 	display: flex;
 	flex-direction: column;
 }
 
 .moment {
 	width: 100%;
-	/* flex-shrink: 0; */
 	display: flex;
 	flex-direction: column;
 	box-sizing: border-box;
@@ -345,7 +328,7 @@ page,
 }
 
 .follow {
-	width: 60px;
+	width: 84px;
 	height: 32px;
 	flex-shrink: 0;
 	font-size: 14px;
@@ -433,19 +416,6 @@ swiper-item {
 	content: '\ea24';
 }
 
-.uni-video-cover {
-	position: absolute;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	z-index: 1;
-}
-
 .dots-bar {
 	display: flex;
 	justify-content: center;
@@ -498,4 +468,4 @@ swiper-item {
 	align-items: center;
 	height: 100vh;
 }
-</style>
+</style>