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']);

src/views/pages/richedit/indexMobile.vue

@@ -1,13 +1,8 @@
 <template>
     <div class="all" ref="mescrollRef" v-infinite-scroll="getDataByScoll" style="overflow-y: auto">
         <div style="display: flex; align-items: center">
-			<el-input
+            <el-input v-model="form.keyword" placeholder="输入关键字进行搜索（以空格隔开）" class="input-with-select"
-				v-model="form.keyword"
+                @keyup.enter="handleSearch" style="width: 80%">
-				placeholder="输入关键字进行搜索（以空格隔开）"
-				class="input-with-select"
-				@keyup.enter="handleSearch"
-				style="width: 80%"
-			>
                 <template #append>
                     <el-button icon="Search" @click="handleSearch" />
                 </template>
@@ -16,32 +11,22 @@
             <el-button style="width: 20%" type="text" @click="restData">清空条件</el-button>
         </div>
 
-		<el-date-picker
+        <el-date-picker style="margin-top: 20px; width: 100%; max-height: 40px" v-model="daterange" type="daterange"
-			style="margin-top: 20px; width: 100%; max-height: 40px"
+            range-separator="至" value-format="YYYY-MM-DD" start-placeholder="选择报道时间" end-placeholder="选择报道时间"
-			v-model="daterange"
+            @change="handleSearch" />
-			type="daterange"
-			range-separator="至"
-			value-format="YYYY-MM-DD"
-			start-placeholder="选择报道时间"
-			end-placeholder="选择报道时间"
-			@change="handleSearch"
-		/>
 
         <div class="filter">
             <div class="r_tabs">
                 <div class="tabItem" v-for="(item, index) in tabsList" :key="index" @click="changeTab(index)">
-					<text
+                    <text :style="{
-						:style="{
                         color: tabIndex == index ? '#409eff' : '#333',
                         fontWeight: tabIndex == index ? 'bold' : 'normal',
-						}"
+                    }">{{ item.name }}</text>
-						>{{ item.name }}</text
-					>
                     <div class="tab_line" v-if="tabIndex == index"></div>
                 </div>
             </div>
 
-			<SortButton ref="sortRef" @changeSort="changeSort"></SortButton>
+            <!-- <SortButton ref="sortRef" @changeSort="changeSort"></SortButton> -->
         </div>
 
         <div class="r_list" v-loading="loading" ref="listRef">
@@ -50,7 +35,8 @@
                     <div class="card_header" @click.stop="goDetail(1, item, true)">
                         <text class="card_title" v-html="item.title"></text>
                         <div class="r_point" :style="{ color: '#000' }">
-							<div class="point" :style="{ backgroundColor: item.status == 2 ? '#52C41A' : '#D9D9D9' }"></div>
+                            <div class="point" :style="{ backgroundColor: item.status == 2 ? '#52C41A' : '#D9D9D9' }">
+                            </div>
                             <text v-if="item.status == 0" style="color: rgba(0, 0, 0, 0.65)">草稿</text>
                             <text v-if="item.status == 1" style="color: rgba(0, 0, 0, 0.65)">
                                 {{ item.deleted ? '已删除' : '未发布' }}
@@ -85,54 +71,59 @@
                         </div>
 
                         <div class="option">
-							<el-button v-if="item.deleted" type="text" style="margin-left: -10px" @click="doRecoverFn(item)">
+                            <el-button v-if="item.deleted" type="text" style="margin-left: -10px"
+                                @click="doRecoverFn(item)">
                                 <text>恢复</text>
                             </el-button>
-							<div v-else style="display: flex; gap: 3px; align-items: center; flex-wrap: nowrap; white-space: nowrap">
+                            <div v-else
+                                style="display: flex; gap: 3px; align-items: center; flex-wrap: nowrap; white-space: nowrap">
                                 <!-- 新闻状态 0-草稿 | 1-未发布 | 2-已发布 | 3-送审 | 4-已二审 | -1-退改中 -->
                                 <div v-if="Session.get('userInfoLocal').userType == '00'">
                                     <!-- 普通账号 -->
-									<el-button v-if="item.status == 0 || item.status == 1 || item.status == -1" type="text" @click="goDetail(1, item, false)"
+                                    <el-button v-if="item.status == 0 || item.status == 1 || item.status == -1"
-										>编辑</el-button
+                                        type="text" @click="goDetail(1, item, false)">编辑</el-button>
-									>
 
-									<el-button v-if="item.status == 0 || item.status == 1 || item.status == -1" type="text" @click="doApprovalFn(item, item.status)"
+                                    <el-button v-if="item.status == 0 || item.status == 1 || item.status == -1"
-										>送审</el-button
+                                        type="text" @click="doApprovalFn(item, item.status)">送审</el-button>
-									>
+                                    <el-button v-else-if="item.status == 3" type="text"
-									<el-button v-else-if="item.status == 3" type="text" @click="doApprovalFn(item, item.status)">撤审</el-button>
+                                        @click="doApprovalFn(item, item.status)">撤审</el-button>
 
-									<el-button
+                                    <el-button v-if="item.status == 0 || item.status == 1 || item.status == -1"
-										v-if="item.status == 0 || item.status == 1 || item.status == -1"
+                                        type="text" style="color: #ff1818" @click="doDeleteNewsFn(item)">删除</el-button>
-										type="text"
-										style="color: #ff1818"
-										@click="doDeleteNewsFn(item)"
-										>删除</el-button
-									>
                                 </div>
                                 <div v-if="Session.get('userInfoLocal').userType == '02'">
-									<el-button v-if="item.status == 4" type="text" @click="doApprovalFn(item, item.status)">撤审</el-button>
+                                    <el-button v-if="item.status == 4" type="text"
+                                        @click="doApprovalFn(item, item.status)">撤审</el-button>
 
                                     <!-- 二审账号 -->
-									<el-button v-if="item.status == 3" type="text" style="color: #ff1818" @click="doNewReturnFn(item)">退改</el-button>
+                                    <el-button v-if="item.status == 3" type="text" style="color: #ff1818"
+                                        @click="doNewReturnFn(item)">退改</el-button>
 
-									<el-button v-if="item.status == 3" type="text" @click="goDetail(1, item, false)">编辑</el-button>
+                                    <el-button v-if="item.status == 3" type="text"
+                                        @click="goDetail(1, item, false)">编辑</el-button>
 
-									<el-button v-if="item.status == 3" type="text" @click="doNewCheckFn(item)">复审</el-button>
+                                    <el-button v-if="item.status == 3" type="text"
+                                        @click="doNewCheckFn(item)">复审</el-button>
 
-									<el-button type="text" v-if="item.status == 4" @click="doNewsPublishFn(item, 2)">发布</el-button>
+                                    <el-button type="text" v-if="item.status == 4"
+                                        @click="doNewsPublishFn(item, 2)">发布</el-button>
                                 </div>
                                 <div v-if="Session.get('userInfoLocal').userType == '01'">
                                     <!-- 终审账号 -->
-									<el-button v-if="item.status == 3 || item.status == 4" type="text" @click="goDetail(1, item, false)">编辑</el-button>
+                                    <el-button v-if="item.status == 3 || item.status == 4" type="text"
+                                        @click="goDetail(1, item, false)">编辑</el-button>
 
-									<el-button v-if="item.status == 4" type="text" style="color: #ff1818" @click="doNewReturnFn(item)">退改</el-button>
+                                    <el-button v-if="item.status == 4" type="text" style="color: #ff1818"
+                                        @click="doNewReturnFn(item)">退改</el-button>
 
-									<el-button type="text" v-if="item.status == 2" @click="doNewsPublishFn(item, 1)">撤稿</el-button>
+                                    <el-button type="text" v-if="item.status == 2"
-									<el-button type="text" v-else-if="item.status != -1 && item.status == 4" @click="doNewsPublishFn(item, 2)">发布</el-button>
+                                        @click="doNewsPublishFn(item, 1)">撤稿</el-button>
+                                    <el-button type="text" v-else-if="item.status != -1 && item.status == 4"
+                                        @click="doNewsPublishFn(item, 2)">发布</el-button>
 
-									<el-button v-if="item.status == 3" type="text" style="color: #ff1818; margin-left: 5px" @click="doNewReturnFn(item)"
+                                    <el-button v-if="item.status == 3" type="text"
-										>退改</el-button
+                                        style="color: #ff1818; margin-left: 5px"
-									>
+                                        @click="doNewReturnFn(item)">退改</el-button>
                                 </div>
 
                                 <!-- <el-icon size="16" @click="goRecord(scope.row)">
@@ -154,16 +145,9 @@
             </el-icon>
         </div>
         <keep-alive>
-			<DetailDrawer
+            <DetailDrawer v-model="drawer" :data="newsData" :readOnly="readOnly" :type="newstype"
-				v-model="drawer"
+                @handleEditStatus="handleEditStatus" @doNewsPublishFn="doNewsPublishFn" @doDeleteNewsFn="doDeleteNewsFn"
-				:data="newsData"
+                @getData="getData" />
-				:readOnly="readOnly"
-				:type="newstype"
-				@handleEditStatus="handleEditStatus"
-				@doNewsPublishFn="doNewsPublishFn"
-				@doDeleteNewsFn="doDeleteNewsFn"
-				@getData="getData"
-			/>
         </keep-alive>
     </div>
 </template>
@@ -335,7 +319,7 @@ async function doNewsPublishFn(item, status) {
                 getData();
             }
         })
-		.catch(() => {});
+        .catch(() => { });
 }
 
 /**  管理后台需求文件0519（V1.1） start */
@@ -461,13 +445,60 @@ async function doApprovalFn(item, status) {
                 getData();
             }
         })
-		.catch(() => {});
+        .catch(() => { });
 }
 
 onMounted(() => {
+
+    if (Session.get('userInfoLocal').userType == '02') {
+        tabsList.value = [
+            {
+                name: '审核中',
+                status: 3,
+            },
+            {
+                name: '已二审',
+                status: 4,
+            },
+            {
+                name: '已发布',
+                status: 2,
+            },
+            {
+                name: '退改中',
+                status: -1,
+            },
+            {
+                name: '全部',
+                status: null,
+            },
+        ]
+    } else if (Session.get('userInfoLocal').userType == '01') {
+        tabsList.value = [
+            {
+                name: '已二审',
+                status: 4,
+            },
+            {
+                name: '已发布',
+                status: 2,
+            },
+            {
+                name: '退改中',
+                status: -1,
+            },
+            {
+                name: '全部',
+                status: null,
+            },
+        ]
+    }
+
     changeTab(0);
     mescrollRef.value.addEventListener('scroll', handleScroll);
     // getData();
+
+
 });
 
 onUnmounted(() => {