feat(translate): 添加移动端翻译组件并优化列表页

refactor(env): 更新开发环境API地址配置

style(richedit): 调整移动端列表页样式和布局

feat(richedit): 根据用户类型动态显示不同标签页

.env.development

@@ -4,11 +4,11 @@ ENV = development
 # 本地环境接口地址
 # VITE_API_URL = https://4155gf93ll13.vicp.fun/admin
 # VITE_API_URL = http://localhost:13579/admin
-# VITE_API_URL = https://cankao.cs.com.cn/admin
+VITE_API_URL = https://cankao.cs.com.cn/admin
-VITE_API_URL =  http://123.60.153.169:8040/admin
+# VITE_API_URL =  http://123.60.153.169:8040/admin
 
 # VITE_API_URL = /api
 
 #H5的域名，目前是给列表里的复制用
-# VITE_API_URL_H5 = https://cankao.cs.com.cn
+VITE_API_URL_H5 = https://cankao.cs.com.cn
-VITE_API_URL_H5 = http://123.60.153.169:8040
+# VITE_API_URL_H5 = http://123.60.153.169:8040

src/components/translate/translate.vue

@@ -41,6 +41,7 @@
 <script setup lang="ts">
 import { onBeforeMount, onMounted, reactive, ref, watch } from 'vue';
 import { getTranslator } from '/@/api/api';
+import { isMobileByWidth } from '/@/utils/Utils'
 
 const props = defineProps({
 	infoData: {

src/components/translate/translateMobile.vue

@@ -0,0 +1,132 @@
+<template>
+	<el-collapse accordion expand-icon-position="left" style="margin-top: 30px" v-if="dataTranslator.titleEN &&
+		dataTranslator.titleCN &&
+		dataTranslator.contentEN &&
+		dataTranslator.contentCN
+	">
+		<el-collapse-item name="1">
+			<template #title="{ isActive }">
+				<div :class="['title-wrapper', { 'is-active': isActive }]">
+					<text style="font-size: 16px; font-weight: bold">翻译</text>
+					<img src="/@/assets/icon_translate.png" class="icon_translate" />
+				</div>
+			</template>
+			<div style="display: flex;flex-direction: column;">
+				<div class="translate_wrapper">
+					<div class="translate_item">
+						<text>资讯原文</text>
+						<el-input v-model="dataTranslator.titleEN" placeholder-class="input-placeholder" disabled />
+					</div>
+
+					<div class="demo-panel">
+						<div v-html="dataTranslator.contentEN"></div>
+					</div>
+				</div>
+
+				<div class="translate_wrapper" style="margin-top: 20px;">
+					<div class="translate_item">
+						<text>参考消息译文</text>
+						<el-input v-model="dataTranslator.titleCN" placeholder-class="input-placeholder" disabled />
+					</div>
+
+					<div class="demo-panel">
+						<div class="demo-panel" v-html="dataTranslator.contentCN"></div>
+					</div>
+				</div>
+
+
+				<!-- <div class="translate_wrapper">
+					<div class="translate_item">
+						<text>资讯原文</text>
+						<el-input v-model="dataTranslator.titleEN" placeholder-class="input-placeholder" disabled />
+					</div>
+
+					<div class="translate_item">
+						<text>参考消息译文</text>
+						<el-input v-model="dataTranslator.titleCN" placeholder-class="input-placeholder" disabled />
+					</div>
+				</div>
+				<el-splitter layout="horizontal">
+					<el-splitter-panel collapsible>
+						<div class="demo-panel">
+							<div v-html="dataTranslator.contentEN"></div>
+						</div>
+					</el-splitter-panel>
+					<el-splitter-panel collapsible>
+						<div class="demo-panel" v-html="dataTranslator.contentCN"></div>
+					</el-splitter-panel>
+				</el-splitter> -->
+			</div>
+		</el-collapse-item>
+	</el-collapse>
+</template>
+
+<script setup lang="ts">
+import { onBeforeMount, onMounted, reactive, ref, watch } from 'vue';
+import { getTranslator } from '/@/api/api';
+import { isMobileByWidth } from '/@/utils/Utils'
+
+const props = defineProps({
+	infoData: {
+		type: Object,
+		default: () => { },
+	},
+});
+
+watch(
+	() => props.infoData,
+	(newValue) => {
+		console.log('🚀 ~ newValue:', newValue);
+		getData();
+	},
+	{ deep: true }
+);
+
+const dataTranslator = ref({});
+async function getData() {
+	let { code, data } = await getTranslator(props.infoData);
+	if (code == 200) {
+		dataTranslator.value = data;
+	}
+}
+
+onBeforeMount(() => { });
+</script>
+
+<style scoped lang="scss">
+.icon_translate {
+	width: 18px;
+	height: 18px;
+	margin-left: 5px;
+}
+
+.title-wrapper {
+	display: flex;
+	align-items: center;
+}
+
+.demo-panel {
+	// display: flex;
+	// align-items: center;
+	// justify-content: center;
+	//border: 1px solid #ccc;
+	// height: 300px;
+}
+
+.translate_wrapper {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+
+	.translate_item {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+
+		text {
+			font-size: 14px;
+			font-weight: bold;
+		}
+	}
+}
+</style>

src/views/pages/richedit/DetailDrawer/index.vue

@@ -123,9 +123,12 @@
 							style="position: absolute; right: 50px; top: 20px; z-index: 9999">
 						</icon_ai>
 						<editorBox :ueditorData="form.content" @changeMsg="changeMsg" :readOnly="readOnly"></editorBox>
-
 						<translate v-if="form.newsInfoId && !isMobileByWidth()" :infoData="form" :key="form.id">
 						</translate>
+						<translateMobile v-else-if="form.newsInfoId && isMobileByWidth()" :infoData="form"
+							:key="form.id">
+						</translateMobile>
+
 					</div>
 
 					<el-collapse accordion expand-icon-position="left"
@@ -205,6 +208,8 @@ import translate from '/@/components/translate/translate.vue';
 import { Session } from '/@/utils/storage';
 import { isMobileByWidth } from '/@/utils/Utils'
 import { doNewReturn, doNewCheck } from '/@/api/api';
+import translateMobile from '/@/components/translate/translateMobile.vue';
+
 
 
 const emit = defineEmits(['doNewsPublishFn', 'handleEditStatus', 'doDeleteNewsFn', 'getData']);