zm/tougao_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tijiao

Browse Source
This commit is contained in:
始于初见
2025-12-26 11:30:31 +08:00
parent a0d1402e19
commit e1d0ed6561
6 changed files with 2133 additions and 1050 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
src/assets/css/main.css
View File

@@ -1,3 +1,9 @@
:root {
--primary-comment-deep: #00BFFF; /* 深天蓝：用于边框、标题、重要按钮 */
--primary-comment-main: #87CEEB; /* 天蓝色：主色调，用于普通高亮 */
--primary-comment-light: #B0E2FF; /* 浅天蓝：用于鼠标悬停 (hover) 效果 */
--primary-comment-bg: #F0F8FF; /* 爱丽丝蓝：最浅底色，用于批注框背景 */
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -24,9 +30,179 @@ a {
text-decoration: none 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 { .page-container {
min-width: 1200px; min-width: 1200px;
} }
.content-box { .content-box {
position: absolute; position: absolute;
left: 260px; left: 260px;
@@ -1330,12 +1506,7 @@ a {
mos-line-height: 20px !important; mos-line-height: 20px !important;
} }
.word-container table tr:first-child td { .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:last-of-type { .word-container table tr:last-of-type {
border-bottom: 1pt solid #000 !important; border-bottom: 1pt solid #000 !important;
@@ -1408,18 +1579,13 @@ a {
color: #fff !important; color: #fff !important;
/* 设置字体颜色 */ /* 设置字体颜色 */
fill: #fff !important; fill: #fff !important;
/* font-size:16px!important; */
/* 设置字体颜色 */
} }
.tinymce-custom-button-addrow { .tinymce-custom-button-addrow {
font-weight: bold !important; font-weight: bold !important;
background-color: #cbccd1 !important; background-color: #cbccd1 !important;
/* color: #fff !important; */
/* 设置字体颜色 */
/* fill: #fff !important; */
/* font-size:16px!important; */
/* 设置字体颜色 */
} }
.tinymce-custom-button-save svg { .tinymce-custom-button-save svg {
@@ -1452,11 +1618,13 @@ wmath {
z-index: 99999 !important; z-index: 99999 !important;
position: fixed !important; position: fixed !important;
} }
.sticky-header { .sticky-header {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1000; /* 保证在上层 */ z-index: 1000;
background-color: transparent; /* 保证在上层 */
background-color: transparent;
/* padding: 10px; */ /* padding: 10px; */
box-shadow: 0 2px 2px rgba(221, 221, 221, 0.2); box-shadow: 0 2px 2px rgba(221, 221, 221, 0.2);
} }

40
src/components/page/OnlineProofreading.vue
View File

@@ -136,7 +136,7 @@
<div style="" class="commentList annotations"></div> <div style="" class="commentList annotations"></div>
</template> </template>
<template slot="refrences"> <template slot="refrences">
<div style="" class="" main-id="References">222</div> <reference ref="commonRef" :articleId="articleId" :p_article_id="p_article_id"></reference>
</template> </template>
</common-word> </common-word>
</div> </div>
@@ -430,9 +430,12 @@ import { mediaUrl } from '@/common/js/commonJS.js'; // 引入通用逻辑
import Tinymce from '@/components/page/components/Tinymce'; import Tinymce from '@/components/page/components/Tinymce';
import bottomTinymce from '@/components/page/components/Tinymce'; import bottomTinymce from '@/components/page/components/Tinymce';
import catalogue from '@/components/page/components/OnlineProofreading/catalogue.vue'; import catalogue from '@/components/page/components/OnlineProofreading/catalogue.vue';
import reference from '@/components/page/components/OnlineProofreading/reference.vue';
export default { export default {
data() { data() {
return { return {
p_article_id:3452,
zoomNum: (window.innerWidth * 0.38) / 850, zoomNum: (window.innerWidth * 0.38) / 850,
uploadWordTables: [], uploadWordTables: [],
tablesHtmlVisible: false, tablesHtmlVisible: false,
@@ -556,7 +559,8 @@ export default {
components: { components: {
Tinymce, Tinymce,
bottomTinymce, bottomTinymce,
catalogue catalogue,
reference,
}, },
computed: { computed: {
combinedValue() { combinedValue() {
@@ -586,27 +590,43 @@ export default {
} }
}, },
async created() { async created() {
// await this.$api.post('api/Proofread/proofRead', {
// article_id: this.$route.query.id
// });
localStorage.removeItem('scrollPosition'); localStorage.removeItem('scrollPosition');
this.isShowEditComment(); this.isShowEditComment();
this.getDate(); this.getDate();
this.getCommentList(); this.getCommentList();
// this.loadDictionary().catch(console.error); this.getReferenceList();
}, },
mounted() {}, mounted() {},
async activated() { async activated() {
// await this.$api.post('api/Proofread/proofRead', {
// article_id: this.$route.query.id
// });
this.isShowEditComment(); this.isShowEditComment();
this.getDate(); this.getDate();
this.getCommentList(); this.getCommentList();
this.getReferenceList();
}, },
methods: { 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) { async copyArray(data) {
try { try {
// 将数组内容转换为字符串，使用换行符分隔 // 将数组内容转换为字符串，使用换行符分隔

19
src/components/page/components/OnlineProofreading/catalogue.vue
View File

@@ -85,7 +85,7 @@ this.catalogueList = this.content.filter(item => {
// 增加一个 level 字段进行标记 // 增加一个 level 字段进行标记
let level = 1; let level = 1;
if (item.is_h2 == 1) level = 2; if (item.is_h2 == 1) level = 2;
if (item.is_h3 == 1) level = 3;
return { return {
...item, ...item,
level: level // 1, 2, 或 3 level: level // 1, 2, 或 3
@@ -94,10 +94,10 @@ this.catalogueList = this.content.filter(item => {
this.catalogueList=[...this.catalogueList,{ this.catalogueList=[...this.catalogueList,{
am_id:'References', am_id:'References',
content:'References', content:'References',
level:1, level:1,
}] }]
console.log(this.catalogueList,'catalogueList')
// this.catalogueList = res.data; // this.catalogueList = res.data;
@@ -536,7 +536,7 @@ console.log(this.catalogueList,'catalogueList')
.catalogue-item { .catalogue-item {
position: relative; position: relative;
width: 100%; width: 100%;
padding: 6px 16px; /* padding: 6px 16px; */
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@@ -568,13 +568,14 @@ console.log(this.catalogueList,'catalogueList')
.title-content { .title-content {
font-weight: bold !important; font-weight: bold !important;
font-style: normal !important; font-style: normal !important;
font-size: 15px; font-size: 13px !important;
line-height: 1.3; line-height: 1.3;
white-space: nowrap; white-space: nowrap;
padding: 4px 0px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
/* Times New Roman 增加学术感 */ /* Times New Roman 增加学术感 */
font-family: "Times New Roman", "Charis SIL", "serif"; font-family: "Charis SIL" !important;
color: #333; color: #333;
} }
@@ -587,7 +588,11 @@ console.log(this.catalogueList,'catalogueList')
/* 1级标题 */ /* 1级标题 */
.level-1 { .level-1 {
padding-left: 16px; padding-left: 16px;
/* font-style: italic; */
}
.level-1 .title-content{
font-style: italic !important;
} }
/* 2级标题 */ /* 2级标题 */

2495
src/components/page/components/OnlineProofreading/reference.vue
View File

File diff suppressed because it is too large Load Diff

1
src/components/page/components/table/111.css Normal file
View File

@@ -0,0 +1 @@

428
src/components/page/components/table/word.vue
View File

@@ -11,105 +11,91 @@
> >
<div class="word-menu"> <div class="word-menu">
<div <div
class="word-tool"
v-if="!isPreview" v-if="!isPreview"
:style="rightW ? `right:${rightW + 20}px; width: calc(100% - 285px - ${rightW + 20}px);` : ''" :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"> <div class="w-auto base-flex" :style="{ '--fl-ai': 'center' }">
<li style="list-style: none; height: 26px; display: flex; align-items: center; position: absolute; left: 10px"> <li
<el-button @click="handleUncheck" v-if="!isPreview" style="" plain type="info">{{ class="base-flex base-pos"
$t('commonTable.Uncheck') style="list-style: none"
}}</el-button> :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 <div
@click="handleClickAI()" @click="handleClickAI()"
v-if="isEditComment && !isPreview && activeName == 'proofreading'" v-if="isEditComment && !isPreview && activeName == 'proofreading'"
style=" class="base-tag base-font-size"
font-size: 12px; :style="{ '--f-s': '12px', '--f-c': '#fff' }"
border-radius: 4px;
cursor: pointer;
margin-left: 10px;
line-height: 26px;
padding: 2px 10px;
background-color: #6740fb !important;
color: #fff;
border: 1px solid #6740fb;
"
> >
<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> </div>
</li> </li>
</div> </div>
<div style="padding: 0 0px; float: right"> <div class="base-padding-all float-var" :style="{ '--f': 'right' }">
<ul class="operateBox"> <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"> <ul class="HTitleBox" style="border: none">
<li @click="addContent" style="font-size: 12px; padding: 0; background-color: #fff !important; color: #333"> <li
<i class="el-icon-document" style="margin-right: 2px"> </i> @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') }} {{ $t('commonTable.BatchAddcontent') }}
</li> </li>
</ul> </ul>
</div> </div>
<li <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" @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') }} {{ $t('commonTable.Row') }}
</li> </li>
<li style="background-color: #fc625d !important; font-size: 12px" @click="onDelete"> <li
<i class="el-icon-delete" style="margin-top: 2px"></i> 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') }} {{ $t('commonTable.delete') }}
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div <div
ref="scroll" ref="scroll"
class="word-container-box scroll" class="word-container-box scroll b-box float-var base-bg-imp base-border float-var base-pos"
:style=" :class="{
isPreview 'w-full': isPreview,
? 'width: 100%;padding: 20px;' 'dynamic-width': !isPreview
: rightW }"
? `width: calc(100% - ${rightW - 10}px);padding: 60px 20px 20px 34px;` :style="{
: 'width: calc(100% - 300px);padding: 60px 20px 20px 34px;' '--f': 'left',
" '--br': isPreview ? '0' : '1px',
style=" '--bc': '#cecfd3',
box-sizing: border-box; '--pos': 'relative',
width: calc(100% - 300px); '--minus-w': !isPreview && rightW ? rightW - 10 + 'px' : '300px',
float: left; padding: isPreview ? '20px !important' : '45px 20px 20px 34px !important'
background-color: #fff; }"
border-right: 1px solid #cecfd3;
position: relative;
"
> >
<!-- <common-late-x></common-late-x> --> <!-- <common-late-x></common-late-x> -->
<template v-for="(item, index) in wordList"> <template v-for="(item, index) in wordList">
<el-checkbox <el-checkbox
class="select-main-id base-pos base-margin"
:style="{ '--p-l': '-20px', '--m-t': '8px' }"
@change="(e) => updateUniqueIds(e, item.am_id)" @change="(e) => updateUniqueIds(e, item.am_id)"
v-if="!isPreview" v-if="!isPreview"
:value="isChecked(item.am_id)" :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> ></el-checkbox>
<span <span
@@ -136,17 +122,8 @@
item.type == 0 && item.type == 0 &&
item.content != '' item.content != ''
" "
style=" class="Proofreadingstatus"
z-index: 2; style="color: rgb(19, 188, 32)"
background-color: #fff;
color: rgb(19, 188, 32);
border-radius: 22px;
font-size: 22px;
margin-left: 20px;
position: absolute;
right: 6px;
cursor: pointer;
"
><i class="el-icon-success"></i ><i class="el-icon-success"></i
></span> ></span>
<span <span
@@ -159,34 +136,15 @@
item.type == 0 && item.type == 0 &&
item.content != '' item.content != ''
" "
style=" class="Proofreadingstatus"
z-index: 2; style="color: #006699e0"
background-color: #fff;
color: #006699e0;
border-radius: 22px;
font-size: 22px;
margin-left: 20px;
position: absolute;
right: 6px;
cursor: pointer;
"
><i class="el-icon-success"></i ><i class="el-icon-success"></i
></span> ></span>
<span <span
@click="handleClickProofreadingList([item.am_id])" @click="handleClickProofreadingList([item.am_id])"
v-if="!isPreview && isEditComment && item.is_proofread == 2 && item.type == 0 && item.content != ''" v-if="!isPreview && isEditComment && item.is_proofread == 2 && item.type == 0 && item.content != ''"
style=" class="Proofreadingstatus"
z-index: 2; style="color: #e6a23c"
background-color: #fff;
color: #e6a23c;
border-radius: 22px;
font-size: 22px;
margin-left: 20px;
position: absolute;
right: 6px;
cursor: pointer;
"
><i class="el-icon-warning"></i ><i class="el-icon-warning"></i
></span> ></span>
@@ -196,25 +154,27 @@
:remark-main-id="item.am_id" :remark-main-id="item.am_id"
v-if="(item.proof_read_num > 0 || item.proof_read_num == 0) && !isPreview && !isShowPiZhu" v-if="(item.proof_read_num > 0 || item.proof_read_num == 0) && !isPreview && !isShowPiZhu"
> >
><img <img
class="isRemark" class="isRemark base-margin"
:style="{ '--m-l': '-14px', '--m-r': '6px' }"
src="@/assets/img/isRemark.png" src="@/assets/img/isRemark.png"
alt="" alt=""
style="width: 15px; height: 15px; margin-right: 6px; margin-left: -14px" style="width: 15px; height: 15px"
/> />
<span>{{ item.am_id }}</span> <span>{{ item.am_id }}</span>
</span> </span>
<span <span
class="isRemark" class="isRemark base-margin"
:remark-main-id="item.am_id" :remark-main-id="item.am_id"
v-if="item.checks && item.checks.length > 0 && !isPreview && isShowPiZhu" v-if="item.checks && item.checks.length > 0 && !isPreview && isShowPiZhu"
> >
><img <img
class="isRemark" class="isRemark"
:style="{ '--m-l': '-14px', '--m-r': '6px' }"
src="@/assets/img/isRemark.png" src="@/assets/img/isRemark.png"
alt="" alt=""
style="width: 15px; height: 15px; margin-right: 6px; margin-left: -14px" style="width: 15px; height: 15px"
/> />
<span>{{ item.am_id }}</span> <span>{{ item.am_id }}</span>
@@ -243,8 +203,10 @@
<div :class="currentId == item.am_id ? 'glowing-border' : ''" style="position: relative"> <div :class="currentId == item.am_id ? 'glowing-border' : ''" style="position: relative">
<div <div
class="base-bg base-pos"
:style="{ '--p-r': '0px', '--p-t': '-40px' }"
v-if="currentId == item.am_id" v-if="currentId == item.am_id"
style="background-color: #fff; z-index: 100; position: absolute; right: 0px; top: -40px" style="z-index: 100"
></div> ></div>
<!-- @dblclick="dblclickEdit(item.am_id, 'img', item, index)" --> <!-- @dblclick="dblclickEdit(item.am_id, 'img', item, index)" -->
<div <div
@@ -405,23 +367,10 @@
</div> </div>
</div> </div>
</template> </template>
<slot name="refrences"></slot> <slot name="refrences"></slot>
</div> </div>
<div class="pagination-box" style="" v-if="isEditComment && activeName == 'proofreading'"> <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"> <div class="arrow-group" v-if="totalItems > 0">
<i <i
@@ -442,10 +391,15 @@
v-model="activeName" v-model="activeName"
@tab-click="handleClick" @tab-click="handleClick"
v-if="!isPreview" v-if="!isPreview"
class="rightTabs" class="rightTabs base-pos el-tabs--border-card"
type="border-card" type="border-card b-box"
:style="rightW ? `width:${rightW + 1}px` : ''" :style="{
style="width: 310px; position: fixed; top: 40px; box-sizing: border-box; right: 14px" '--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"> <el-tab-pane :label="`AI Proofreading`" name="proofreading" v-if="isEditComment">
<span slot="label"> <span slot="label">
@@ -458,28 +412,51 @@
> >
<span style="color: #888">( Total {{ totalNumbers }} ) </span> <span style="color: #888">( Total {{ totalNumbers }} ) </span>
</el-tooltip> </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> </span>
</el-tooltip>
</span>
<div <div
v-loading="proofreadingLoading" v-loading="proofreadingLoading"
v-if="!isPreview" v-if="!isPreview"
:style="rightW ? `width:${rightW}px` : ''" :style="{
style="width: 310px; position: fixed; top: 90px; box-sizing: border-box; right: 14px; bottom: 0" '--pos': 'fixed',
class="commentList" '--p-t': '90px',
'--p-r': '14px',
'--p-b': '0',
width: rightW ? `${rightW}px` : '310px'
}"
style=""
class="commentList base-pos"
> >
<li <li
v-if="proofreadingList.length > 0" v-if="proofreadingList.length > 0"
v-for="(item, index) in sortedProofreadingList" 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}`" :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="height: 100%">
<div <div class="base-flex-center base-bg" :style="{ '--jc': 'space-between', '--bg': '#f3d5d5c2' }">
style="display: flex; align-items: center; justify-content: space-between; background-color: #f3d5d5c2"
>
<el-link <el-link
class="pizhu" class="pizhu base-flex-center"
style="display: flex; align-items: center; justify-content: space-between" :style="{ '--jc': 'space-between' }"
@click="handleClickProofreading(item, index)" @click="handleClickProofreading(item, index)"
> >
<div <div
@@ -617,54 +594,6 @@
</div> </div>
</div> </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>
<div <div
:style="commont.state == 1 ? 'opacity:0.6' : ''" :style="commont.state == 1 ? 'opacity:0.6' : ''"
@@ -795,15 +724,23 @@
style="width: 100%; margin: 0 0 10px; background: #fafafa; box-sizing: border-box" style="width: 100%; margin: 0 0 10px; background: #fafafa; box-sizing: border-box"
> >
<div> <div>
<div <div class="base-flex-center"
style="display: flex; align-items: center; justify-content: space-between; background-color: #f3d5d5c2" :style="{
'--fl-jc': 'space-between',
}"
style="background-color: var(--primary-comment-bg)"
> >
<el-link <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)" @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 <img
class="isRemark" class="isRemark"
src="@/assets/img/isRemark.png" src="@/assets/img/isRemark.png"
@@ -823,20 +760,14 @@
<div style="display: flex; align-items: center; line-height: 20px"> <div style="display: flex; align-items: center; line-height: 20px">
<span <span
:style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''" :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 >{{ commentIndex + 1 }}、</span
> >
<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);' : ''" :style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''"
>Comment</span >Comment</span
> >
<!-- <img
:style="commont.estate == 1 ? 'opacity:0.4' : ''"
src="@/assets/img/bit_bug.png"
alt=""
style="width: 30px; height: 14px"
/> -->
<span <span
v-if="commont.estate == 1" v-if="commont.estate == 1"
@@ -2075,7 +2006,7 @@ export default {
remarkElements.forEach((remarkElement) => { remarkElements.forEach((remarkElement) => {
// 随机生成颜色或使用自定义颜色 // 随机生成颜色或使用自定义颜色
// const randomColor = this.getRandomLightColor(); // const randomColor = this.getRandomLightColor();
remarkElement.style.backgroundColor = '#f77b7b'; // 设置背景色 remarkElement.style.backgroundColor = 'var(--primary-comment-deep)'; // 设置背景色
remarkElement.classList.add('highlighted'); // 添加高亮样式类 remarkElement.classList.add('highlighted'); // 添加高亮样式类
}); });
} }
@@ -2085,7 +2016,7 @@ export default {
clearHighlight() { clearHighlight() {
const allRemarks = document.querySelectorAll('.remarkbg'); const allRemarks = document.querySelectorAll('.remarkbg');
allRemarks.forEach((element) => { allRemarks.forEach((element) => {
element.style.backgroundColor = '#f3d5d5c2'; // 重置背景色 element.style.backgroundColor = 'var(--primary-comment-bg)'; // 重置背景色
element.classList.remove('highlighted'); // 移除高亮类 element.classList.remove('highlighted'); // 移除高亮类
}); });
}, },
@@ -2703,7 +2634,7 @@ export default {
const b = Math.floor(Math.random() * 128) + 127; // 使蓝色值偏浅 const b = Math.floor(Math.random() * 128) + 127; // 使蓝色值偏浅
const a = (Math.random() * 0.4 + 0.4).toFixed(2); // 设置透明度范围为 0.4 到 0.7 之间 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) { highlightImg(imgId, annotations) {
@@ -2916,12 +2847,12 @@ export default {
position:relative; position:relative;
display:inline-block; display:inline-block;
overflow-wrap:anywhere; overflow-wrap:anywhere;
border-left:2px solid #cd5454; border-left:2px solid var(--primary-comment-deep);
border-right:2px solid #cd5454;" border-right:2px solid var(--primary-comment-deep);"
comment-Id="${ann.raw && ann.raw.amc_id != null ? ann.raw.amc_id : ''}" comment-Id="${ann.raw && ann.raw.amc_id != null ? ann.raw.amc_id : ''}"
>${rawHit} >${rawHit}
<span class="positionRemarkIndex" <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} ${badge}
</span> </span>
</span>`; </span>`;
@@ -2999,12 +2930,12 @@ export default {
position:relative; position:relative;
display:inline-block; display:inline-block;
overflow-wrap:anywhere; overflow-wrap:anywhere;
border-left:2px solid #cd5454; border-left:2px solid var(--primary-comment-deep);
border-right:2px solid #cd5454;" border-right:2px solid var(--primary-comment-deep);"
comment-Id="${ann.raw && ann.raw.amc_id != null ? ann.raw.amc_id : ''}" comment-Id="${ann.raw && ann.raw.amc_id != null ? ann.raw.amc_id : ''}"
>${rawHit} >${rawHit}
<span class="positionRemarkIndex" <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} ${badge}
</span> </span>
</span>`; </span>`;
@@ -3106,28 +3037,29 @@ export default {
isShowEditComment() { isShowEditComment() {
if (localStorage.getItem('U_role')) { if (localStorage.getItem('U_role')) {
var identity = 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')) { if (identity.includes('editor')) {
this.isEditComment = true; this.isEditComment = true;
this.isShowPiZhu = false; this.isShowPiZhu = false;
this.activeName = 'proofreading'; this.activeName = 'proofreading';
this.rightW = 510; this.rightW = dynamicWidth;
} else { } else {
this.isEditComment = false; this.isEditComment = false;
this.isShowPiZhu = true; this.isShowPiZhu = true;
this.activeName = 'Comment'; this.activeName = 'Comment';
this.rightW = 310; this.rightW = dynamicWidth;
} }
if (identity.includes('author')) { if (identity.includes('author')) {
this.isUserEditComment = true; this.isUserEditComment = true;
this.isShowPiZhu = true; this.isShowPiZhu = true;
this.activeName = 'Comment'; this.activeName = 'Comment';
this.rightW = 310; this.rightW = dynamicWidth;
} else { } else {
this.isUserEditComment = false; this.isUserEditComment = false;
this.isShowPiZhu = false; this.isShowPiZhu = false;
this.activeName = 'proofreading'; this.activeName = 'proofreading';
this.rightW = 510; this.rightW = dynamicWidth;
} }
if (this.isEditComment) { if (this.isEditComment) {
this.$nextTick(() => requestAnimationFrame(this.initMarkersList)); this.$nextTick(() => requestAnimationFrame(this.initMarkersList));
@@ -3483,8 +3415,8 @@ export default {
z-index: 9999 !important; z-index: 9999 !important;
} }
.remarkbg { .remarkbg {
background-color: #f3d5d5c2 !important; background-color: var(--primary-comment-bg) !important;
border-right: 2px solid #cd5454 !important; border-right: 2px solid var(--primary-comment-deep) !important;
} }
.isRemark { .isRemark {
display: flex; display: flex;
@@ -3519,21 +3451,12 @@ export default {
list-style: none; list-style: none;
} }
.comment-item::before { .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 { .commentOperateItem {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: 13px;
font-weight: bold; font-weight: bold;
} }
.commentOperateItem img { .commentOperateItem img {
@@ -3587,12 +3510,12 @@ export default {
background: #555; /* 滑块悬停时的颜色 */ background: #555; /* 滑块悬停时的颜色 */
} }
.highlighted { .highlighted {
border: 2px solid #cd5454; /* 高亮边框 */ border: 2px solid var(--primary-comment-deep); /* 高亮边框 */
box-shadow: 0 0 10px #f77b7b; /* 高亮阴影 */ box-shadow: 0 0 10px var(--primary-comment-light); /* 高亮阴影 */
} }
.highlighted1 { .highlighted1 {
border: 2px solid #cd5454; /* 高亮边框 */ border: 2px solid var(--primary-comment-deep); /* 高亮边框 */
box-shadow: 0 0 10px #f77b7b; /* 高亮阴影 */ box-shadow: 0 0 10px var(--primary-comment-light); /* 高亮阴影 */
} }
.isTitleH1 { .isTitleH1 {
position: relative; position: relative;
@@ -3690,7 +3613,7 @@ export default {
color: #8a8a8b; color: #8a8a8b;
/* font-weight: bold; */ /* font-weight: bold; */
font-size: 16px; font-size: 16px;
background-color: rgb(43, 129, 239) !important; background-color: rgb(43, 129, 239);
color: #fff; color: #fff;
border-radius: 4px; border-radius: 4px;
height: 26px; height: 26px;
@@ -3820,7 +3743,7 @@ export default {
} }
/* 闪烁高亮边框样式：2秒内逐渐淡出 */ /* 闪烁高亮边框样式：2秒内逐渐淡出 */
.flash-border { .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); box-shadow: 0 0 0 4px rgba(255, 77, 79, 0.25);
background: rgba(243, 213, 213, 0.26) !important; background: rgba(243, 213, 213, 0.26) !important;
animation: flashFade 1s infinite alternate; animation: flashFade 1s infinite alternate;
@@ -3897,8 +3820,9 @@ export default {
.info-text { .info-text {
margin-right: 10px; margin-right: 10px;
color: #606266; color: #606266;
font-size: 14px; width: 100%;
cursor: pointer; cursor: pointer;
display: inline-block;height: 20px;line-height: 20px;font-size: 11px;
} }
.arrow-group { .arrow-group {
@@ -3939,16 +3863,17 @@ export default {
border-radius: 10px; border-radius: 10px;
font-size: 16px; font-size: 16px;
margin-top: 0 !important; margin-top: 15px !important;
margin-bottom: 0 !important; margin-bottom: 10px !important;
box-shadow: rgba(222, 234, 247, 0.6) 0px 4px 4px; box-shadow: rgba(222, 234, 247, 0.6) 0px 4px 4px;
} }
.pMainH1 .pMain { ::v-deep .pMainH1 .pMain {
margin-top: 0 !important; margin-top: 0 !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
line-height: 30px !important; line-height: 30px !important;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
font-weight: bold !important;
} }
::v-deep.pMainH1 .pMain i { ::v-deep.pMainH1 .pMain i {
font-style: normal !important; font-style: normal !important;
@@ -4000,4 +3925,51 @@ export default {
wmath { wmath {
font-size: 14px !important; 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> </style>