fgm
/
cankao-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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

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

feat(richedit): 根据用户类型动态显示不同标签页
This commit is contained in:
34701892@qq.com 2025-10-09 20:45:11 +08:00
parent 228a300193
commit c0ed17cc43
5 changed files with 609 additions and 440 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.env.development
View File

@ -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 = http://123.60.153.169:8040/admin
VITE_API_URL = https://cankao.cs.com.cn/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 = http://123.60.153.169:8040
VITE_API_URL_H5 = https://cankao.cs.com.cn
# VITE_API_URL_H5 = http://123.60.153.169:8040

1
src/components/translate/translate.vue
View File

@ -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: {

132
src/components/translate/translateMobile.vue Normal file
View File

@ -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>

7
src/views/pages/richedit/DetailDrawer/index.vue
View File

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

901
src/views/pages/richedit/indexMobile.vue
View File

File diff suppressed because it is too large Load Diff