From e1d0ed6561ff0d457fd353f3f086af97c1901931 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A7=8B=E4=BA=8E=E5=88=9D=E8=A7=81?= <752204717@qq.com> Date: Fri, 26 Dec 2025 11:30:31 +0800 Subject: [PATCH] tijiao --- src/assets/css/main.css | 200 +- src/components/page/OnlineProofreading.vue | 40 +- .../OnlineProofreading/catalogue.vue | 19 +- .../OnlineProofreading/reference.vue | 2495 +++++++++++------ src/components/page/components/table/111.css | 1 + src/components/page/components/table/word.vue | 428 ++- 6 files changed, 2133 insertions(+), 1050 deletions(-) create mode 100644 src/components/page/components/table/111.css diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 444bb88..28d651c 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -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); - } \ No newline at end of file +} \ No newline at end of file diff --git a/src/components/page/OnlineProofreading.vue b/src/components/page/OnlineProofreading.vue index b985d9e..b52706c 100644 --- a/src/components/page/OnlineProofreading.vue +++ b/src/components/page/OnlineProofreading.vue @@ -136,7 +136,7 @@
@@ -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 { // 将数组内容转换为字符串，使用换行符分隔 diff --git a/src/components/page/components/OnlineProofreading/catalogue.vue b/src/components/page/components/OnlineProofreading/catalogue.vue index 8750c42..e8dc02c 100644 --- a/src/components/page/components/OnlineProofreading/catalogue.vue +++ b/src/components/page/components/OnlineProofreading/catalogue.vue @@ -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级标题 */ diff --git a/src/components/page/components/OnlineProofreading/reference.vue b/src/components/page/components/OnlineProofreading/reference.vue index 9fa0421..9be8a7a 100644 --- a/src/components/page/components/OnlineProofreading/reference.vue +++ b/src/components/page/components/OnlineProofreading/reference.vue @@ -1,313 +1,365 @@ diff --git a/src/components/page/components/table/111.css b/src/components/page/components/table/111.css new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/src/components/page/components/table/111.css @@ -0,0 +1 @@ + diff --git a/src/components/page/components/table/word.vue b/src/components/page/components/table/word.vue index 4c2e6b6..30b87aa 100644 --- a/src/components/page/components/table/word.vue +++ b/src/components/page/components/table/word.vue @@ -11,105 +11,91 @@ >
-
-
  • - {{ - $t('commonTable.Uncheck') - }} +
    +
  • + {{ $t('commonTable.Uncheck') }}
    - {{ $t('commonTable.ManuscirptAIProofreading') }} + + {{ $t('commonTable.ManuscirptAIProofreading') }}
    • -
    +
      -
      +
        -
      • - +
      • + {{ $t('commonTable.BatchAddcontent') }}
    • - + {{ $t('commonTable.Row') }}
      • -
    • - +
    • + {{ $t('commonTable.delete') }}
    +
    - +
    - - Current {{ showcurrentItemIndex() }} , - Total {{ totalItems }} paragraphs - - +
    @@ -458,28 +412,51 @@ > ( Total {{ totalNumbers }} ) + + + Current {{ showcurrentItemIndex() }} , + Total {{ totalItems }} paragraphs + + + + +
  • -
    +
    -
    -
    - + {{ commentIndex + 1 }}、 Comment - { // 随机生成颜色或使用自定义颜色 // 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} + style="position:absolute;top:-14px;right:-10px;font-size:.8em;color:var(--primary-comment-deep);"> ${badge} `; @@ -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} + style="position:absolute;top:-14px;right:-10px;font-size:.8em;color:var(--primary-comment-deep);"> ${badge} `; @@ -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; +}