tijiao
This commit is contained in:
@@ -1,3 +1,9 @@
|
||||
:root {
|
||||
--primary-comment-deep: #00BFFF; /* 深天蓝：用于边框、标题、重要按钮 */
|
||||
--primary-comment-main: #87CEEB; /* 天蓝色：主色调，用于普通高亮 */
|
||||
--primary-comment-light: #B0E2FF; /* 浅天蓝：用于鼠标悬停 (hover) 效果 */
|
||||
--primary-comment-bg: #F0F8FF; /* 爱丽丝蓝：最浅底色，用于批注框背景 */
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -24,9 +30,179 @@ a {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.w-auto {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 动态宽度类 */
|
||||
.dynamic-width {
|
||||
|
||||
width: calc(100% - var(--minus-w, 300px)) !important;
|
||||
}
|
||||
|
||||
|
||||
.base-flex {
|
||||
display: flex !important;
|
||||
|
||||
/* 垂直对齐：如果不传 --ai，则不设置（或保持默认） */
|
||||
align-items: var(--fl-ai, initial) !important;
|
||||
|
||||
/* 水平对齐：如果不传 --jc，则不设置 */
|
||||
justify-content: var(--fl-jc, initial) !important;
|
||||
|
||||
/* 换行：如果不传 --wrap，则不设置 */
|
||||
flex-wrap: var(--fl-wrap, initial) !important;
|
||||
|
||||
/* 方向：如果不传 --direction，则不设置 */
|
||||
flex-direction: var(--fl-direction, initial) !important;
|
||||
|
||||
/* 间隙：这是 Flex 布局中非常好用的属性，建议加上 */
|
||||
gap: var(--gap, initial) !important;
|
||||
}
|
||||
|
||||
/* 2. 快捷全居中类（最常用，默认就是全居中） */
|
||||
.base-flex-center {
|
||||
display: flex ;
|
||||
align-items: var(--fl-ai, center);
|
||||
justify-content: var(--fl-jc, center);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.base-pos {
|
||||
/* 定位类型：默认 absolute，可选 relative, fixed, sticky */
|
||||
position: var(--pos, absolute);
|
||||
|
||||
/* 默认 initial：只有在 style 里传了参，对应的方位才会生效 */
|
||||
top: var(--p-t, initial);
|
||||
right: var(--p-r, initial);
|
||||
bottom: var(--p-b, initial);
|
||||
left: var(--p-l, initial);
|
||||
|
||||
|
||||
}
|
||||
.abs-left {
|
||||
|
||||
left: var(--left-dist, 10px);
|
||||
}
|
||||
|
||||
.base-font-size {
|
||||
font-size: var(--f-s, 14px) !important;
|
||||
color: var(--f-c, #333) !important;
|
||||
}
|
||||
|
||||
/* common.css */
|
||||
.b-box {
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.base-border {
|
||||
|
||||
--b-w: 1px;
|
||||
--b-s: solid;
|
||||
--b-c: #d8d8d8;
|
||||
|
||||
|
||||
border-top: var(--bt, 0) var(--b-s) var(--b-c);
|
||||
border-right: var(--br, 0) var(--b-s) var(--b-c);
|
||||
border-bottom: var(--bb, 0) var(--b-s) var(--b-c);
|
||||
border-left: var(--bl, 0) var(--b-s) var(--b-c);
|
||||
}
|
||||
|
||||
|
||||
.base-border-all {
|
||||
--b-w: 1px;
|
||||
/* 宽度 */
|
||||
--b-s: solid;
|
||||
/* 样式 */
|
||||
--b-c: #d8d8d8;
|
||||
/* 颜色 */
|
||||
|
||||
|
||||
border: var(--b-w) var(--b-s) var(--b-c);
|
||||
}
|
||||
|
||||
/* common.css */
|
||||
.base-padding {
|
||||
/* 定义默认值（如果没传参，默认是 0） */
|
||||
--p-t: 0px;
|
||||
--p-r: 0px;
|
||||
--p-b: 0px;
|
||||
--p-l: 0px;
|
||||
|
||||
padding-top: var(--p-t);
|
||||
padding-right: var(--p-r);
|
||||
padding-bottom: var(--p-b);
|
||||
padding-left: var(--p-l);
|
||||
}
|
||||
|
||||
|
||||
.base-padding-all {
|
||||
padding: var(--p);
|
||||
/* 默认四周 10px，也可以通过 --p 传参 */
|
||||
}
|
||||
|
||||
.base-bg {
|
||||
background-color: var(--bg, #fff);
|
||||
}
|
||||
|
||||
/* 专门用于“必须生效”场景的类 */
|
||||
.base-bg-imp {
|
||||
background-color: var(--bg, #fff) !important;
|
||||
}
|
||||
|
||||
.base-margin {
|
||||
|
||||
--m-t: 0px;
|
||||
--m-r: 0px;
|
||||
--m-b: 0px;
|
||||
--m-l: 0px;
|
||||
|
||||
margin-top: var(--m-t);
|
||||
margin-right: var(--m-r);
|
||||
margin-bottom: var(--m-b);
|
||||
margin-left: var(--m-l);
|
||||
}
|
||||
|
||||
|
||||
.base-margin-all {
|
||||
margin: var(--m);
|
||||
}
|
||||
|
||||
.float-var {
|
||||
float: var(--f, none) var(--f-imp, );
|
||||
}
|
||||
|
||||
|
||||
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.page-container {
|
||||
min-width: 1200px;
|
||||
}
|
||||
|
||||
.content-box {
|
||||
position: absolute;
|
||||
left: 260px;
|
||||
@@ -1330,12 +1506,7 @@ a {
|
||||
mos-line-height: 20px !important;
|
||||
}
|
||||
|
||||
.word-container table tr:first-child td {
|
||||
/* border-top: 1pt solid #000 !important;
|
||||
mso-border-top-alt: 0.5pt solid #000 !important;
|
||||
border-bottom: 1pt solid #000 !important;
|
||||
mso-border-bottom-alt: 0.5pt solid #000 !important; */
|
||||
}
|
||||
.word-container table tr:first-child td {}
|
||||
|
||||
.word-container table tr:last-of-type {
|
||||
border-bottom: 1pt solid #000 !important;
|
||||
@@ -1408,18 +1579,13 @@ a {
|
||||
color: #fff !important;
|
||||
/* 设置字体颜色 */
|
||||
fill: #fff !important;
|
||||
/* font-size:16px!important; */
|
||||
/* 设置字体颜色 */
|
||||
|
||||
}
|
||||
|
||||
.tinymce-custom-button-addrow {
|
||||
font-weight: bold !important;
|
||||
background-color: #cbccd1 !important;
|
||||
/* color: #fff !important; */
|
||||
/* 设置字体颜色 */
|
||||
/* fill: #fff !important; */
|
||||
/* font-size:16px!important; */
|
||||
/* 设置字体颜色 */
|
||||
|
||||
}
|
||||
|
||||
.tinymce-custom-button-save svg {
|
||||
@@ -1452,11 +1618,13 @@ wmath {
|
||||
z-index: 99999 !important;
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
.sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000; /* 保证在上层 */
|
||||
background-color: transparent;
|
||||
z-index: 1000;
|
||||
/* 保证在上层 */
|
||||
background-color: transparent;
|
||||
/* padding: 10px; */
|
||||
box-shadow: 0 2px 2px rgba(221, 221, 221, 0.2);
|
||||
}
|
||||
}
|
||||
@@ -136,7 +136,7 @@
|
||||
<div style="" class="commentList annotations"></div>
|
||||
</template>
|
||||
<template slot="refrences">
|
||||
<div style="" class="" main-id="References">222</div>
|
||||
<reference ref="commonRef" :articleId="articleId" :p_article_id="p_article_id"></reference>
|
||||
</template>
|
||||
</common-word>
|
||||
</div>
|
||||
@@ -430,9 +430,12 @@ import { mediaUrl } from '@/common/js/commonJS.js'; // 引入通用逻辑
|
||||
import Tinymce from '@/components/page/components/Tinymce';
|
||||
import bottomTinymce from '@/components/page/components/Tinymce';
|
||||
import catalogue from '@/components/page/components/OnlineProofreading/catalogue.vue';
|
||||
import reference from '@/components/page/components/OnlineProofreading/reference.vue';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
p_article_id:3452,
|
||||
|
||||
zoomNum: (window.innerWidth * 0.38) / 850,
|
||||
uploadWordTables: [],
|
||||
tablesHtmlVisible: false,
|
||||
@@ -556,7 +559,8 @@ export default {
|
||||
components: {
|
||||
Tinymce,
|
||||
bottomTinymce,
|
||||
catalogue
|
||||
catalogue,
|
||||
reference,
|
||||
},
|
||||
computed: {
|
||||
combinedValue() {
|
||||
@@ -586,27 +590,43 @@ export default {
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
// await this.$api.post('api/Proofread/proofRead', {
|
||||
// article_id: this.$route.query.id
|
||||
// });
|
||||
|
||||
localStorage.removeItem('scrollPosition');
|
||||
this.isShowEditComment();
|
||||
this.getDate();
|
||||
this.getCommentList();
|
||||
// this.loadDictionary().catch(console.error);
|
||||
this.getReferenceList();
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
async activated() {
|
||||
// await this.$api.post('api/Proofread/proofRead', {
|
||||
// article_id: this.$route.query.id
|
||||
// });
|
||||
|
||||
this.isShowEditComment();
|
||||
this.getDate();
|
||||
this.getCommentList();
|
||||
this.getReferenceList();
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
getReferenceList() {
|
||||
this.$api
|
||||
.post('api/Production/getReferList', {
|
||||
p_article_id: this.p_article_id
|
||||
})
|
||||
.then((res) => {
|
||||
this.referenceList = res.data.refers;
|
||||
|
||||
|
||||
this.$nextTick(() => {
|
||||
// 更新引用列表
|
||||
// this.$refs.commonRef.init(this.referenceList);
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
},
|
||||
async copyArray(data) {
|
||||
try {
|
||||
// 将数组内容转换为字符串，使用换行符分隔
|
||||
|
||||
@@ -85,7 +85,7 @@ this.catalogueList = this.content.filter(item => {
|
||||
// 增加一个 level 字段进行标记
|
||||
let level = 1;
|
||||
if (item.is_h2 == 1) level = 2;
|
||||
if (item.is_h3 == 1) level = 3;
|
||||
|
||||
return {
|
||||
...item,
|
||||
level: level // 1, 2, 或 3
|
||||
@@ -94,10 +94,10 @@ this.catalogueList = this.content.filter(item => {
|
||||
this.catalogueList=[...this.catalogueList,{
|
||||
am_id:'References',
|
||||
content:'References',
|
||||
|
||||
|
||||
level:1,
|
||||
}]
|
||||
console.log(this.catalogueList,'catalogueList')
|
||||
|
||||
|
||||
|
||||
// this.catalogueList = res.data;
|
||||
@@ -536,7 +536,7 @@ console.log(this.catalogueList,'catalogueList')
|
||||
.catalogue-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 6px 16px;
|
||||
/* padding: 6px 16px; */
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@@ -568,13 +568,14 @@ console.log(this.catalogueList,'catalogueList')
|
||||
.title-content {
|
||||
font-weight: bold !important;
|
||||
font-style: normal !important;
|
||||
font-size: 15px;
|
||||
font-size: 13px !important;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
padding: 4px 0px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
/* Times New Roman 增加学术感 */
|
||||
font-family: "Times New Roman", "Charis SIL", "serif";
|
||||
font-family: "Charis SIL" !important;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@@ -587,7 +588,11 @@ console.log(this.catalogueList,'catalogueList')
|
||||
/* 1级标题 */
|
||||
.level-1 {
|
||||
padding-left: 16px;
|
||||
/* font-style: italic; */
|
||||
|
||||
}
|
||||
.level-1 .title-content{
|
||||
|
||||
font-style: italic !important;
|
||||
}
|
||||
|
||||
/* 2级标题 */
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
1
src/components/page/components/table/111.css
Normal file
1
src/components/page/components/table/111.css
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
@@ -11,105 +11,91 @@
|
||||
>
|
||||
<div class="word-menu">
|
||||
<div
|
||||
class="word-tool"
|
||||
v-if="!isPreview"
|
||||
:style="rightW ? `right:${rightW + 20}px; width: calc(100% - 285px - ${rightW + 20}px);` : ''"
|
||||
style="
|
||||
border-bottom: 2px solid #c7cdcf;
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
left: 285px;
|
||||
z-index: 10;
|
||||
right: 330px;
|
||||
height: 46px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: calc(100% - 285px - 330px);
|
||||
z-index: 12;
|
||||
"
|
||||
>
|
||||
<div style="width: auto; display: flex; align-items: center">
|
||||
<li style="list-style: none; height: 26px; display: flex; align-items: center; position: absolute; left: 10px">
|
||||
<el-button @click="handleUncheck" v-if="!isPreview" style="" plain type="info">{{
|
||||
$t('commonTable.Uncheck')
|
||||
}}</el-button>
|
||||
<div class="w-auto base-flex" :style="{ '--fl-ai': 'center' }">
|
||||
<li
|
||||
class="base-flex base-pos"
|
||||
style="list-style: none"
|
||||
:style="{ '--p-l': '10px', '--p-l': '10px', '--fl-ai': 'center' }"
|
||||
>
|
||||
<el-button @click="handleUncheck" v-if="!isPreview" plain type="info">{{ $t('commonTable.Uncheck') }}</el-button>
|
||||
<div
|
||||
@click="handleClickAI()"
|
||||
v-if="isEditComment && !isPreview && activeName == 'proofreading'"
|
||||
style="
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
margin-left: 10px;
|
||||
line-height: 26px;
|
||||
padding: 2px 10px;
|
||||
background-color: #6740fb !important;
|
||||
color: #fff;
|
||||
border: 1px solid #6740fb;
|
||||
"
|
||||
class="base-tag base-font-size"
|
||||
:style="{ '--f-s': '12px', '--f-c': '#fff' }"
|
||||
>
|
||||
<i class="el-icon-magic-stick" style="margin-right: 2px"></i> {{ $t('commonTable.ManuscirptAIProofreading') }}
|
||||
<i class="el-icon-magic-stick base-margin" :style="{ '--m-r': '2px' }"></i>
|
||||
{{ $t('commonTable.ManuscirptAIProofreading') }}
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<div style="padding: 0 0px; float: right">
|
||||
<div class="base-padding-all float-var" :style="{ '--f': 'right' }">
|
||||
<ul class="operateBox">
|
||||
<div style="border-right: 1px solid #d8d8d8; padding: 0 20px">
|
||||
<div class="base-border base-padding-all" :style="{ '--br': '1px', '--p': '0 20px' }">
|
||||
<ul class="HTitleBox" style="border: none">
|
||||
<li @click="addContent" style="font-size: 12px; padding: 0; background-color: #fff !important; color: #333">
|
||||
<i class="el-icon-document" style="margin-right: 2px"> </i>
|
||||
<li
|
||||
@click="addContent"
|
||||
class="base-font-size base-bg-imp base-padding-all"
|
||||
:style="{ '--f-s': '12px', '--f-c': '#333' }"
|
||||
>
|
||||
<i class="el-icon-document base-margin" :style="{ '--m-r': '2px' }"> </i>
|
||||
{{ $t('commonTable.BatchAddcontent') }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<li
|
||||
style="background-color: #cbccd1 !important; font-size: 12px; color: #333; border: 1px solid #cbccd1"
|
||||
class="base-font-size base-border-all"
|
||||
:style="{ '--f-s': '12px', '--b-c': '#cbccd1' }"
|
||||
style="background-color: #cbccd1 !important"
|
||||
@click="onAddRow"
|
||||
>
|
||||
<i class="el-icon-document-add" style="margin-top: 2px"></i>
|
||||
<i class="el-icon-document-add base-margin" :style="{ '--m-r': '2px' }"></i>
|
||||
|
||||
{{ $t('commonTable.Row') }}
|
||||
</li>
|
||||
|
||||
<li style="background-color: #fc625d !important; font-size: 12px" @click="onDelete">
|
||||
<i class="el-icon-delete" style="margin-top: 2px"></i>
|
||||
<li
|
||||
class="base-font-size base-bg-imp"
|
||||
:style="{ '--f-s': '12px', '--bg': '#fc625d', '--f-c': '#fff' }"
|
||||
@click="onDelete"
|
||||
>
|
||||
<i class="el-icon-delete base-margin" :style="{ '--m-t': '2px' }"></i>
|
||||
{{ $t('commonTable.delete') }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref="scroll"
|
||||
class="word-container-box scroll"
|
||||
:style="
|
||||
isPreview
|
||||
? 'width: 100%;padding: 20px;'
|
||||
: rightW
|
||||
? `width: calc(100% - ${rightW - 10}px);padding: 60px 20px 20px 34px;`
|
||||
: 'width: calc(100% - 300px);padding: 60px 20px 20px 34px;'
|
||||
"
|
||||
style="
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - 300px);
|
||||
float: left;
|
||||
background-color: #fff;
|
||||
border-right: 1px solid #cecfd3;
|
||||
position: relative;
|
||||
"
|
||||
class="word-container-box scroll b-box float-var base-bg-imp base-border float-var base-pos"
|
||||
:class="{
|
||||
'w-full': isPreview,
|
||||
'dynamic-width': !isPreview
|
||||
}"
|
||||
:style="{
|
||||
'--f': 'left',
|
||||
'--br': isPreview ? '0' : '1px',
|
||||
'--bc': '#cecfd3',
|
||||
'--pos': 'relative',
|
||||
'--minus-w': !isPreview && rightW ? rightW - 10 + 'px' : '300px',
|
||||
padding: isPreview ? '20px !important' : '45px 20px 20px 34px !important'
|
||||
}"
|
||||
>
|
||||
<!-- <common-late-x></common-late-x> -->
|
||||
<template v-for="(item, index) in wordList">
|
||||
<el-checkbox
|
||||
class="select-main-id base-pos base-margin"
|
||||
:style="{ '--p-l': '-20px', '--m-t': '8px' }"
|
||||
@change="(e) => updateUniqueIds(e, item.am_id)"
|
||||
v-if="!isPreview"
|
||||
:value="isChecked(item.am_id)"
|
||||
style="position: absolute; left: -20px; width: 8px; height: 8px; margin-top: 8px; z-index: 10"
|
||||
style="width: 8px; height: 8px; z-index: 10"
|
||||
></el-checkbox>
|
||||
|
||||
<span
|
||||
@@ -136,17 +122,8 @@
|
||||
item.type == 0 &&
|
||||
item.content != ''
|
||||
"
|
||||
style="
|
||||
z-index: 2;
|
||||
background-color: #fff;
|
||||
color: rgb(19, 188, 32);
|
||||
border-radius: 22px;
|
||||
font-size: 22px;
|
||||
margin-left: 20px;
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
cursor: pointer;
|
||||
"
|
||||
class="Proofreadingstatus"
|
||||
style="color: rgb(19, 188, 32)"
|
||||
><i class="el-icon-success"></i
|
||||
></span>
|
||||
<span
|
||||
@@ -159,34 +136,15 @@
|
||||
item.type == 0 &&
|
||||
item.content != ''
|
||||
"
|
||||
style="
|
||||
z-index: 2;
|
||||
background-color: #fff;
|
||||
color: #006699e0;
|
||||
|
||||
border-radius: 22px;
|
||||
font-size: 22px;
|
||||
margin-left: 20px;
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
cursor: pointer;
|
||||
"
|
||||
class="Proofreadingstatus"
|
||||
style="color: #006699e0"
|
||||
><i class="el-icon-success"></i
|
||||
></span>
|
||||
<span
|
||||
@click="handleClickProofreadingList([item.am_id])"
|
||||
v-if="!isPreview && isEditComment && item.is_proofread == 2 && item.type == 0 && item.content != ''"
|
||||
style="
|
||||
z-index: 2;
|
||||
background-color: #fff;
|
||||
color: #e6a23c;
|
||||
border-radius: 22px;
|
||||
font-size: 22px;
|
||||
margin-left: 20px;
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
cursor: pointer;
|
||||
"
|
||||
class="Proofreadingstatus"
|
||||
style="color: #e6a23c"
|
||||
><i class="el-icon-warning"></i
|
||||
></span>
|
||||
|
||||
@@ -196,25 +154,27 @@
|
||||
:remark-main-id="item.am_id"
|
||||
v-if="(item.proof_read_num > 0 || item.proof_read_num == 0) && !isPreview && !isShowPiZhu"
|
||||
>
|
||||
><img
|
||||
class="isRemark"
|
||||
<img
|
||||
class="isRemark base-margin"
|
||||
:style="{ '--m-l': '-14px', '--m-r': '6px' }"
|
||||
src="@/assets/img/isRemark.png"
|
||||
alt=""
|
||||
style="width: 15px; height: 15px; margin-right: 6px; margin-left: -14px"
|
||||
style="width: 15px; height: 15px"
|
||||
/>
|
||||
|
||||
<span>{{ item.am_id }}</span>
|
||||
</span>
|
||||
<span
|
||||
class="isRemark"
|
||||
class="isRemark base-margin"
|
||||
:remark-main-id="item.am_id"
|
||||
v-if="item.checks && item.checks.length > 0 && !isPreview && isShowPiZhu"
|
||||
>
|
||||
><img
|
||||
<img
|
||||
class="isRemark"
|
||||
:style="{ '--m-l': '-14px', '--m-r': '6px' }"
|
||||
src="@/assets/img/isRemark.png"
|
||||
alt=""
|
||||
style="width: 15px; height: 15px; margin-right: 6px; margin-left: -14px"
|
||||
style="width: 15px; height: 15px"
|
||||
/>
|
||||
|
||||
<span>{{ item.am_id }}</span>
|
||||
@@ -243,8 +203,10 @@
|
||||
|
||||
<div :class="currentId == item.am_id ? 'glowing-border' : ''" style="position: relative">
|
||||
<div
|
||||
class="base-bg base-pos"
|
||||
:style="{ '--p-r': '0px', '--p-t': '-40px' }"
|
||||
v-if="currentId == item.am_id"
|
||||
style="background-color: #fff; z-index: 100; position: absolute; right: 0px; top: -40px"
|
||||
style="z-index: 100"
|
||||
></div>
|
||||
<!-- @dblclick="dblclickEdit(item.am_id, 'img', item, index)" -->
|
||||
<div
|
||||
@@ -405,23 +367,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<slot name="refrences"></slot>
|
||||
<slot name="refrences"></slot>
|
||||
</div>
|
||||
<div class="pagination-box" style="" v-if="isEditComment && activeName == 'proofreading'">
|
||||
<el-tooltip
|
||||
v-if="totalItems > 0 && totalNumbers > 0"
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="`There are ${totalItems} paragraphs with unresolved errors in the Manuscript`"
|
||||
placement="top-start"
|
||||
>
|
||||
<span class="info-text"
|
||||
><span v-if="showcurrentItemIndex()"
|
||||
>Current <span style="color: rgb(230, 26, 18)">{{ showcurrentItemIndex() }}</span> ,</span
|
||||
>
|
||||
Total {{ totalItems }} paragraphs
|
||||
</span>
|
||||
</el-tooltip>
|
||||
|
||||
|
||||
<div class="arrow-group" v-if="totalItems > 0">
|
||||
<i
|
||||
@@ -442,10 +391,15 @@
|
||||
v-model="activeName"
|
||||
@tab-click="handleClick"
|
||||
v-if="!isPreview"
|
||||
class="rightTabs"
|
||||
type="border-card"
|
||||
:style="rightW ? `width:${rightW + 1}px` : ''"
|
||||
style="width: 310px; position: fixed; top: 40px; box-sizing: border-box; right: 14px"
|
||||
class="rightTabs base-pos el-tabs--border-card"
|
||||
type="border-card b-box"
|
||||
:style="{
|
||||
'--pos': 'fixed',
|
||||
'--p-t': '40px',
|
||||
'--p-r': '14px',
|
||||
width: rightW ? `${rightW}px` : '310px'
|
||||
}"
|
||||
style=""
|
||||
>
|
||||
<el-tab-pane :label="`AI Proofreading`" name="proofreading" v-if="isEditComment">
|
||||
<span slot="label">
|
||||
@@ -458,28 +412,51 @@
|
||||
>
|
||||
<span style="color: #888">( Total {{ totalNumbers }} ) </span>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip
|
||||
v-if="totalItems > 0 && totalNumbers > 0"
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="`There are ${totalItems} paragraphs with unresolved errors in the Manuscript`"
|
||||
placement="top-start"
|
||||
>
|
||||
<span class="info-text"
|
||||
><span v-if="showcurrentItemIndex()"
|
||||
>Current <span style="color: rgb(230, 26, 18)">{{ showcurrentItemIndex() }}</span> ,</span
|
||||
>
|
||||
Total {{ totalItems }} paragraphs
|
||||
</span>
|
||||
</el-tooltip>
|
||||
|
||||
|
||||
</span>
|
||||
|
||||
<div
|
||||
v-loading="proofreadingLoading"
|
||||
v-if="!isPreview"
|
||||
:style="rightW ? `width:${rightW}px` : ''"
|
||||
style="width: 310px; position: fixed; top: 90px; box-sizing: border-box; right: 14px; bottom: 0"
|
||||
class="commentList"
|
||||
:style="{
|
||||
'--pos': 'fixed',
|
||||
'--p-t': '90px',
|
||||
'--p-r': '14px',
|
||||
'--p-b': '0',
|
||||
width: rightW ? `${rightW}px` : '310px'
|
||||
}"
|
||||
style=""
|
||||
class="commentList base-pos"
|
||||
>
|
||||
<li
|
||||
v-if="proofreadingList.length > 0"
|
||||
v-for="(item, index) in sortedProofreadingList"
|
||||
class="comment-item annotation"
|
||||
class="comment-item annotation b-box base-bg base-margin w-full"
|
||||
:data-target="`main-${item.am_id}`"
|
||||
style="width: 100%; margin: 0 0 10px; background: #fafafa; box-sizing: border-box; height: 100%"
|
||||
style="height: 100%"
|
||||
:style="{ '--bg': '#fafafa', '--m': '0 0 10px' }"
|
||||
>
|
||||
<div style="height: 100%">
|
||||
<div
|
||||
style="display: flex; align-items: center; justify-content: space-between; background-color: #f3d5d5c2"
|
||||
>
|
||||
<div class="base-flex-center base-bg" :style="{ '--jc': 'space-between', '--bg': '#f3d5d5c2' }">
|
||||
<el-link
|
||||
class="pizhu"
|
||||
style="display: flex; align-items: center; justify-content: space-between"
|
||||
class="pizhu base-flex-center"
|
||||
:style="{ '--jc': 'space-between' }"
|
||||
@click="handleClickProofreading(item, index)"
|
||||
>
|
||||
<div
|
||||
@@ -617,54 +594,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div
|
||||
style="display: flex; align-items: center; justify-content: center; line-height: 20px"
|
||||
v-if="isEditComment && commont.state != 3"
|
||||
>
|
||||
<el-dropdown style="cursor: pointer" class="commentOperate" v-if="isEditComment">
|
||||
<span
|
||||
class="el-dropdown-link"
|
||||
style="display: flex; align-items: center; justify-content: center"
|
||||
>
|
||||
<img
|
||||
src="@/assets/img/selectComment.png"
|
||||
alt=""
|
||||
style="width: 18px; height: 18px; margin-top: 2px"
|
||||
/>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
|
||||
<el-dropdown-item>
|
||||
<p
|
||||
class="commentOperateItem"
|
||||
v-if="isEditComment && commont.state == 2"
|
||||
@click="executeProofreading(commont)"
|
||||
>
|
||||
<i class="el-icon-check" style="font-size: 20px; color: #34c749"></i>
|
||||
<span style="color: #34c749">{{ $t('commonTable.execute') }}</span>
|
||||
</p>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="isEditComment && commont.state == 1">
|
||||
<p class="commentOperateItem" @click="revokeProofreading(commont)">
|
||||
<i class="el-icon-close" style="font-size: 20px; color: #333"></i>
|
||||
<span style="color: #333">{{ $t('commonTable.revoke') }}</span>
|
||||
</p>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="isEditComment && commont.state == 2">
|
||||
<p class="commentOperateItem" @click="editProofreading(commont)">
|
||||
<i class="el-icon-edit" style="font-size: 20px; color: #006699"></i>
|
||||
<span style="color: #006699">{{ $t('commonTable.edit') }}</span>
|
||||
</p>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="isEditComment && commont.state == 2">
|
||||
<p class="commentOperateItem" @click="deleteProofreading(commont)">
|
||||
<i class="el-icon-delete" style="font-size: 20px; color: #ed382d"></i>
|
||||
<span style="color: #ed382d"> {{ $t('commonTable.delete') }}</span>
|
||||
</p>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div> -->
|
||||
</div>
|
||||
<div
|
||||
:style="commont.state == 1 ? 'opacity:0.6' : ''"
|
||||
@@ -795,15 +724,23 @@
|
||||
style="width: 100%; margin: 0 0 10px; background: #fafafa; box-sizing: border-box"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="display: flex; align-items: center; justify-content: space-between; background-color: #f3d5d5c2"
|
||||
<div class="base-flex-center"
|
||||
:style="{
|
||||
'--fl-jc': 'space-between',
|
||||
}"
|
||||
style="background-color: var(--primary-comment-bg)"
|
||||
>
|
||||
<el-link
|
||||
class="pizhu"
|
||||
style="display: flex; align-items: center"
|
||||
|
||||
class="pizhu base-flex" :style="{
|
||||
'--fl-ai':'center'
|
||||
}"
|
||||
|
||||
@click="highlightLeftComment(commont.amc_id, item.am_id)"
|
||||
>
|
||||
<span style="color: #fc625d; display: flex; align-items: center; font-weight: bold">
|
||||
<span class="base-flex" :style="{
|
||||
'--fl-ai':'center'
|
||||
}" style="color: var(--primary-comment-deep); font-weight: bold">
|
||||
<img
|
||||
class="isRemark"
|
||||
src="@/assets/img/isRemark.png"
|
||||
@@ -823,20 +760,14 @@
|
||||
<div style="display: flex; align-items: center; line-height: 20px">
|
||||
<span
|
||||
:style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''"
|
||||
style="color: #e61a12; font-weight: bold; font-size: 12px"
|
||||
style="color: var(--primary-comment-deep); font-weight: bold; font-size: 12px"
|
||||
>{{ commentIndex + 1 }}、</span
|
||||
>
|
||||
<span
|
||||
style="color: rgb(230, 26, 18); font-size: 12px"
|
||||
style="color: var(--primary-comment-deep); font-size: 12px"
|
||||
:style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''"
|
||||
>Comment</span
|
||||
>
|
||||
<!-- <img
|
||||
:style="commont.estate == 1 ? 'opacity:0.4' : ''"
|
||||
src="@/assets/img/bit_bug.png"
|
||||
alt=""
|
||||
style="width: 30px; height: 14px"
|
||||
/> -->
|
||||
|
||||
<span
|
||||
v-if="commont.estate == 1"
|
||||
@@ -2075,7 +2006,7 @@ export default {
|
||||
remarkElements.forEach((remarkElement) => {
|
||||
// 随机生成颜色或使用自定义颜色
|
||||
// const randomColor = this.getRandomLightColor();
|
||||
remarkElement.style.backgroundColor = '#f77b7b'; // 设置背景色
|
||||
remarkElement.style.backgroundColor = 'var(--primary-comment-deep)'; // 设置背景色
|
||||
remarkElement.classList.add('highlighted'); // 添加高亮样式类
|
||||
});
|
||||
}
|
||||
@@ -2085,7 +2016,7 @@ export default {
|
||||
clearHighlight() {
|
||||
const allRemarks = document.querySelectorAll('.remarkbg');
|
||||
allRemarks.forEach((element) => {
|
||||
element.style.backgroundColor = '#f3d5d5c2'; // 重置背景色
|
||||
element.style.backgroundColor = 'var(--primary-comment-bg)'; // 重置背景色
|
||||
element.classList.remove('highlighted'); // 移除高亮类
|
||||
});
|
||||
},
|
||||
@@ -2703,7 +2634,7 @@ export default {
|
||||
const b = Math.floor(Math.random() * 128) + 127; // 使蓝色值偏浅
|
||||
const a = (Math.random() * 0.4 + 0.4).toFixed(2); // 设置透明度范围为 0.4 到 0.7 之间
|
||||
|
||||
return `#f3d5d5c2`; // 返回 RGBA 颜色
|
||||
return `var(--primary-comment-bg)`; // 返回 RGBA 颜色
|
||||
},
|
||||
|
||||
highlightImg(imgId, annotations) {
|
||||
@@ -2916,12 +2847,12 @@ export default {
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
overflow-wrap:anywhere;
|
||||
border-left:2px solid #cd5454;
|
||||
border-right:2px solid #cd5454;"
|
||||
border-left:2px solid var(--primary-comment-deep);
|
||||
border-right:2px solid var(--primary-comment-deep);"
|
||||
comment-Id="${ann.raw && ann.raw.amc_id != null ? ann.raw.amc_id : ''}"
|
||||
>${rawHit}
|
||||
<span class="positionRemarkIndex"
|
||||
style="position:absolute;top:-14px;right:-10px;font-size:.8em;color:red;">
|
||||
style="position:absolute;top:-14px;right:-10px;font-size:.8em;color:var(--primary-comment-deep);">
|
||||
${badge}
|
||||
</span>
|
||||
</span>`;
|
||||
@@ -2999,12 +2930,12 @@ export default {
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
overflow-wrap:anywhere;
|
||||
border-left:2px solid #cd5454;
|
||||
border-right:2px solid #cd5454;"
|
||||
border-left:2px solid var(--primary-comment-deep);
|
||||
border-right:2px solid var(--primary-comment-deep);"
|
||||
comment-Id="${ann.raw && ann.raw.amc_id != null ? ann.raw.amc_id : ''}"
|
||||
>${rawHit}
|
||||
<span class="positionRemarkIndex"
|
||||
style="position:absolute;top:-14px;right:-10px;font-size:.8em;color:red;">
|
||||
style="position:absolute;top:-14px;right:-10px;font-size:.8em;color:var(--primary-comment-deep);">
|
||||
${badge}
|
||||
</span>
|
||||
</span>`;
|
||||
@@ -3106,28 +3037,29 @@ export default {
|
||||
isShowEditComment() {
|
||||
if (localStorage.getItem('U_role')) {
|
||||
var identity = localStorage.getItem('U_role');
|
||||
|
||||
const screenWidth = window.innerWidth;
|
||||
const dynamicWidth = screenWidth > 1600 ? 500 : 310; // 大屏给 400，小屏给 310
|
||||
if (identity.includes('editor')) {
|
||||
this.isEditComment = true;
|
||||
this.isShowPiZhu = false;
|
||||
this.activeName = 'proofreading';
|
||||
this.rightW = 510;
|
||||
this.rightW = dynamicWidth;
|
||||
} else {
|
||||
this.isEditComment = false;
|
||||
this.isShowPiZhu = true;
|
||||
this.activeName = 'Comment';
|
||||
this.rightW = 310;
|
||||
this.rightW = dynamicWidth;
|
||||
}
|
||||
if (identity.includes('author')) {
|
||||
this.isUserEditComment = true;
|
||||
this.isShowPiZhu = true;
|
||||
this.activeName = 'Comment';
|
||||
this.rightW = 310;
|
||||
this.rightW = dynamicWidth;
|
||||
} else {
|
||||
this.isUserEditComment = false;
|
||||
this.isShowPiZhu = false;
|
||||
this.activeName = 'proofreading';
|
||||
this.rightW = 510;
|
||||
this.rightW = dynamicWidth;
|
||||
}
|
||||
if (this.isEditComment) {
|
||||
this.$nextTick(() => requestAnimationFrame(this.initMarkersList));
|
||||
@@ -3483,8 +3415,8 @@ export default {
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
.remarkbg {
|
||||
background-color: #f3d5d5c2 !important;
|
||||
border-right: 2px solid #cd5454 !important;
|
||||
background-color: var(--primary-comment-bg) !important;
|
||||
border-right: 2px solid var(--primary-comment-deep) !important;
|
||||
}
|
||||
.isRemark {
|
||||
display: flex;
|
||||
@@ -3519,21 +3451,12 @@ export default {
|
||||
list-style: none;
|
||||
}
|
||||
.comment-item::before {
|
||||
/* content: '';
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: -32px;
|
||||
width: 34px;
|
||||
height: 0;
|
||||
border-top: 2px dashed #cd5454;
|
||||
|
||||
background-color: #cd5454;
|
||||
transform: rotate(-15deg); */
|
||||
}
|
||||
.commentOperateItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.commentOperateItem img {
|
||||
@@ -3587,12 +3510,12 @@ export default {
|
||||
background: #555; /* 滑块悬停时的颜色 */
|
||||
}
|
||||
.highlighted {
|
||||
border: 2px solid #cd5454; /* 高亮边框 */
|
||||
box-shadow: 0 0 10px #f77b7b; /* 高亮阴影 */
|
||||
border: 2px solid var(--primary-comment-deep); /* 高亮边框 */
|
||||
box-shadow: 0 0 10px var(--primary-comment-light); /* 高亮阴影 */
|
||||
}
|
||||
.highlighted1 {
|
||||
border: 2px solid #cd5454; /* 高亮边框 */
|
||||
box-shadow: 0 0 10px #f77b7b; /* 高亮阴影 */
|
||||
border: 2px solid var(--primary-comment-deep); /* 高亮边框 */
|
||||
box-shadow: 0 0 10px var(--primary-comment-light); /* 高亮阴影 */
|
||||
}
|
||||
.isTitleH1 {
|
||||
position: relative;
|
||||
@@ -3690,7 +3613,7 @@ export default {
|
||||
color: #8a8a8b;
|
||||
/* font-weight: bold; */
|
||||
font-size: 16px;
|
||||
background-color: rgb(43, 129, 239) !important;
|
||||
background-color: rgb(43, 129, 239);
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
height: 26px;
|
||||
@@ -3820,7 +3743,7 @@ export default {
|
||||
}
|
||||
/* 闪烁高亮边框样式：2秒内逐渐淡出 */
|
||||
.flash-border {
|
||||
outline: 2px solid #ff4d4f !important;
|
||||
outline: 2px solid var(--primary-comment-deep) !important;
|
||||
box-shadow: 0 0 0 4px rgba(255, 77, 79, 0.25);
|
||||
background: rgba(243, 213, 213, 0.26) !important;
|
||||
animation: flashFade 1s infinite alternate;
|
||||
@@ -3897,8 +3820,9 @@ export default {
|
||||
.info-text {
|
||||
margin-right: 10px;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
display: inline-block;height: 20px;line-height: 20px;font-size: 11px;
|
||||
}
|
||||
|
||||
.arrow-group {
|
||||
@@ -3939,16 +3863,17 @@ export default {
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
margin-top: 15px !important;
|
||||
margin-bottom: 10px !important;
|
||||
box-shadow: rgba(222, 234, 247, 0.6) 0px 4px 4px;
|
||||
}
|
||||
.pMainH1 .pMain {
|
||||
::v-deep .pMainH1 .pMain {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
line-height: 30px !important;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
::v-deep.pMainH1 .pMain i {
|
||||
font-style: normal !important;
|
||||
@@ -4000,4 +3925,51 @@ export default {
|
||||
wmath {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.word-tool {
|
||||
border-bottom: 2px solid #c7cdcf;
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
left: 285px;
|
||||
z-index: 10;
|
||||
right: 330px;
|
||||
height: 46px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: calc(100% - 285px - 330px);
|
||||
z-index: 12;
|
||||
}
|
||||
.Proofreadingstatus {
|
||||
z-index: 2;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
font-size: 16px;
|
||||
margin-left: 20px;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* common.css */
|
||||
.base-tag {
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
line-height: 26px;
|
||||
padding: 2px 10px;
|
||||
color: #fff;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
/* 变量：未传参时使用默认值 */
|
||||
margin-left: var(--ml, 10px);
|
||||
background-color: var(--bg, #6740fb) !important;
|
||||
border: 1px solid var(--bg, #6740fb);
|
||||
}
|
||||
::v-deep .select-main-id,
|
||||
.select-main-id .el-checkbox__input {
|
||||
position: absolute !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user