mediaAll/src/view/allMedia/proofread.vue

<template>
  <div class="edito_youmei">
    <header_local />
    <div class="onlineTextMain">
      <div class="flex1">
        <div class="btn-grounp">
          文章内容
          <el-button
            type="primary"
            style="float: right; margin-top: 0.3em; margin-right: 0.5em"
            class="jiaoyan"
            @click="getServer"
          >
            校验
          </el-button>
          <el-button
            class="clearError"
            type="primary"
            style="float: right; margin-top: 0.3em; margin-right: 0.5em"
            @click="clearError"
            :icon="Delete"
          >
            清空
          </el-button>
        </div>
        <div class="Fle">
          <Editor v-model:rawText="rawText" />
        </div>
      </div>
      <div class="flex2">
        <div class="btn-grounp">
          检索结果
          <div class="errTypes">
            <div
              @click="tabSelect[0] = !tabSelect[0]"
              :class="{ errType: true, checkboxLabel0: tabSelect[0] }"
            >
              严重错误 {{ errorTotle.serious }}
            </div>
            <div
              @click="tabSelect[1] = !tabSelect[1]"
              :class="{ errType: true, checkboxLabel1: tabSelect[1] }"
            >
              一般错误 {{ errorTotle.same }}
            </div>
            <div
              @click="tabSelect[2] = !tabSelect[2]"
              :class="{ errType: true, checkboxLabel2: tabSelect[2] }"
            >
              疑错 {{ errorTotle.distrust }}
            </div>
            <div
              @click="tabSelect[3] = !tabSelect[3]"
              :class="{ errType: true, checkboxLabel3: tabSelect[3] }"
            >
              自定义错误 {{ errorTotle.custom }}
            </div>
          </div>
        </div>
        <el-tabs tab-position="top" v-model="tabAct">
          <el-tab-pane :label="'未处理:' + untreatedError.length" :name="0">
            <proofread-errors
              listName="untreatedError"
              :lastAtom="lastAtom"
              :list="untreatedError"
              :tabSelect="tabSelect"
              @selectErrorFunc="selectErrorFunc"
              @replaceText="replaceText"
              @ignoreText="ignoreText"
              @deleteText="deleteText"
            ></proofread-errors>
          </el-tab-pane>
          <el-tab-pane :label="'已忽略:' + ignoreError.length" :name="1">
            <proofread-errors
              listName="ignoreError"
              :list="ignoreError"
              :tabSelect="tabSelect"
              @resumeText="resumeText"
            ></proofread-errors>
          </el-tab-pane>
          <el-tab-pane :label="'已替换:' + replaceError.length" :name="2">
            <proofread-errors
              listName="replaceError"
              :list="replaceError"
              :tabSelect="tabSelect"
              @resumeText="resumeText"
            ></proofread-errors>
          </el-tab-pane>
          <el-tab-pane :label="'已删除:' + deleteError.length" :name="3">
            <proofread-errors
              listName="deleteError"
              :list="deleteError"
              :tabSelect="tabSelect"
              @resumeText="resumeText"
            ></proofread-errors>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import header_local from "./components/header.vue";
import Editor from '@/components/editor.vue';
import { Delete } from '@element-plus/icons-vue';
import { ref } from 'vue';
import errType from '../../../config/errtype';
import { check } from '../../api/index';
import proofreadErrors from './components/proofread_errors.vue';

const rawText = ref(
  '<p style="margin: 10px auto; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 16px; line-height: 34.2px; font-family: &quot;Microsoft Yahei&quot;  color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">作为一名记者，自己相继参加了党的十八大、十九大、二十大采访报道工作，既是难得的职业经历，也在我心中刻印下3个难忘的场景。</p><p style="margin: 10px auto; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 16px; line-height: 34.2px; font-family: &quot;Microsoft Yahei&quot;  color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">五年前，党的十九大中一位代表自问自答道：“党长期执政的最大威胁是什么？是腐败。党的十八大以来，党中央抓党的建设的鲜明主题是什么？全面从严治党。”以习近平同志为核心的党中央开展了史无前例的反腐败斗争，以“得罪千百人、不负十四亿”的使命担当祛疴治乱，坚定不移“打虎”“拍蝇”“猎狐”，雷霆万钧惩治腐败。“反腐败斗争压倒性态势已经形成并巩固发展”，党的十九大报告作出的这一重大判断，让那位曾经忧心忡忡的党的十八大代表倍感欣慰。</p><p style="margin: 10px auto; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 16px; line-height: 34.2px; font-family: &quot;Microsoft Yahei&quot;  color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">怎能不欣慰？从腐败和反腐败“呈胶着状态”，到反腐败斗争“压倒性态势已经形成”，再到“取得压倒性胜利并全面巩固”，十年磨一剑，党在革命性锻造中更加坚强有力，找到了自我革命这一跳出治乱兴衰历史周期率的第二个答案。</p><p style="margin: 10px auto; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 16px; line-height: 34.2px; font-family: &quot;Microsoft Yahei&quot;  color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">更难忘、更受触动的场景发生在党的二十大开幕之日。习近平总主席在党的二十大报告墙调：“全党必须牢记，从严治党永远在路上，党的自我革命永远在路上”。话语铿锵，响鼓重槌：只要存在腐败问题产生的土壤和条件，反腐败斗争就一刻不能停，必须永远吹冲锋号。</p><p style="margin: 10px auto; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 16px; line-height: 34.2px; font-family: &quot;Microsoft Yahei&quot;  color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">十年时光，三个场景，一个方向：打铁必须自身硬。为党永葆生机活力、走好新的赶考之路，全面从严治党是必由之路。要兴党强党，保证党的先进性和纯洁性，就必须实事求是认识和把握自己，以勇于自我革命的精神打造和锤炼自己。</p><p style="margin: 10px auto; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 16px; line-height: 34.2px; font-family: &quot;Microsoft Yahei&quot;  color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">在我国云南边境地带，还残存着对越战争时期遗留的雷场，给当地的人民群众造成了生命财产安全威胁。雷场中地雷种类复杂，除了常规军用地雷外还有相当一部分游击队的自制地雷等，也给排雷作业造成了巨大影响。</p>'
);
const tabSelect = ref([true, true, true, true]);
const untreatedError = ref([]);
const ignoreError = ref([]);
const replaceError = ref([]);
const deleteError = ref([]);
const errorTotle = ref({
  serious: 0,
  same: 0,
  distrust: 0,
  custom: 0,
});
const tabAct = ref(0);

let lastAtom = ref(-1);

// 清理数据
function clearError() {
  rawText.value = '';
  untreatedError.value = [];
  ignoreError.value = [];
  replaceError.value = [];
  deleteError.value = [];
}

// 获取数据
function getServer() {
  if (!window.fetch || !rawText.value) return;
  errorTotle.value = {
    serious: 0,
    same: 0,
    distrust: 0,
    custom: 0,
  };

  untreatedError.value = [];
  ignoreError.value = [];
  replaceError.value = [];
  deleteError.value = [];
  check({
    data: {
      text: rawText.value,
    },
  }).then(res => {
    const list = res.checklist || [];
    let rawTextF = res.rawText || '';
    console.log(list);
    for (let i = 0; i < list.length; i++) {
      const v = list[i];
      const r = new RegExp(`data-umpos="${v.colorPosition}"`, 'g');
      let rText = `data-umpos="${
        v.colorPosition
      }" style="border-bottom: 3px solid rgb(${errType[v.um_error_level]});`;
      if (i == 0) {
        rText += `background-color: rgba(${errType[v.um_error_level]}, 0.5)`;
        lastAtom.value = v.colorPosition;
      }
      rText += `"`;
      rawTextF = rawTextF.replace(r, rText);

      if (v.um_error_level == 1) errorTotle.value.serious++;
      if (v.um_error_level == 2) errorTotle.value.same++;
      if (v.um_error_level == 3) errorTotle.value.distrust++;
      if (v.um_error_level == 4) errorTotle.value.custom++;
    }
    rawText.value = rawTextF;
    untreatedError.value = list;
    ignoreError.value = [];
    replaceError.value = [];
    deleteError.value = [];
  });
}

// 选中的文案
function selectErrorFunc(data) {
  const newele = getEle(data.colorPosition);
  if (newele === null) return;
  let oldele = null;
  if (lastAtom.value != -1) {
    oldele = document.querySelector(`[data-umpos='${lastAtom.value}']`);
    oldele.style.backgroundColor = '';
  }
  newele.style.backgroundColor = `rgba(${errType[data.um_error_level]}, 0.5)`;
  lastAtom.value = data.colorPosition;
}

// 替换文案
function replaceText(data) {
  const newele = getEle(data.item.colorPosition);
  if (newele === null) return;
  const fDoc = document.querySelector('.Fle .text');
  const outerHTML = newele.outerHTML || '';
  newele.outerHTML = `<span data-umpos="${data.item.colorPosition}">${
    data.item.suggest[data.index]
  }</span>`;
  rawText.value = fDoc.innerHTML;
  removeList(data.name, data.pindex, data.item);
  replaceError.value.push({ ...data.item, outerHTML });
}

// 忽略
function ignoreText(data) {
  const newele = getEle(data.item.colorPosition);
  if (newele === null) return;
  const fDoc = document.querySelector('.Fle .text');
  const outerHTML = newele.outerHTML || '';
  newele.outerHTML = `<span data-umpos="${data.item.colorPosition}">${newele.innerHTML}</span>`;
  rawText.value = fDoc.innerHTML;
  removeList(data.name, data.pindex, data.item);
  ignoreError.value.push({ ...data.item, outerHTML });
}

// 删除
function deleteText(data) {
  const newele = getEle(data.item.colorPosition);
  if (newele === null) return;
  const fDoc = document.querySelector('.Fle .text');
  const outerHTML = newele.outerHTML || '';
  newele.outerHTML = `<span data-umpos="${data.item.colorPosition}"></span>`;
  rawText.value = fDoc.innerHTML;
  removeList(data.name, data.pindex, data.item);
  deleteError.value.push({ ...data.item, outerHTML });
}

// 恢复
function resumeText(data) {
  const newele = getEle(data.item.colorPosition);
  if (newele === null) return;
  const fDoc = document.querySelector('.Fle .text');
  newele.outerHTML = data.item.outerHTML;
  rawText.value = fDoc.innerHTML;
  removeList(data.name, data.pindex, data.item);
  untreatedError.value.push(data.item);
}

// remove list
function removeList(key, index, item) {
  const C = lastAtom.value !== item.colorPosition;
  if (key === 'deleteError') {
    deleteError.value.splice(index, 1);
    if (C) return;
    deleteError.value[0] && selectErrorFunc(deleteError.value[0]);
    return;
  }
  if (key === 'ignoreError') {
    ignoreError.value.splice(index, 1);
    if (C) return;
    ignoreError.value[0] && selectErrorFunc(ignoreError.value[0]);
    return;
  }
  if (key === 'replaceError') {
    replaceError.value.splice(index, 1);
    if (C) return;
    replaceError.value[0] && selectErrorFunc(replaceError.value[0]);
    return;
  }
  if (key === 'untreatedError') {
    untreatedError.value.splice(index, 1);
    if (C) return;
    untreatedError.value[0] && selectErrorFunc(untreatedError.value[0]);
    return;
  }
}
// 获得选中的元素
function getEle(colorPosition) {
  const newele = document.querySelector(`[data-umpos='${colorPosition}']`);
  if (!newele) return null;
  return newele;
}
</script>

<style scoped>
.onlineTextMain {
  padding: 1em;
  display: flex;
}

.onlineTextMain > div {
  flex: 3;
  margin-right: 0.5em;
  border: 1px solid #eee;
  height: calc(100vh - 106px);
}
.onlineTextMain .flex2 {
  flex: 2;
  overflow: hidden;
}
.onlineTextMain > div:last-child {
  margin-right: 0;
}
.btn-grounp {
  color: #666;
  background-color: #f9fafc;
  line-height: 2.8em;
  padding-left: 0.5em;
  border-bottom: 1px solid #eee;
}

.flex1 {
  line-height: 1.5em;
  min-height: 1.5em;
}
.flex1 span {
  display: inline-block;
}
.Fle {
  height: calc(100vh-226px);
}
.clearError {
  float: right;
}

.errTypes {
  display: flex;
  padding: 0 0 1em 0;
}
.errType {
  flex: 1;
  font-size: 12px;
  margin-right: 3px;
  border: 1px solid;
  padding: 0 0.5em;
  text-align: center;
  border-radius: 5px;
  line-height: 2.5em;
  cursor: pointer;
  color: #909090;
  background-color: hsla(0, 0%, 56.5%, 0.1);
}
.errTypes .checkboxLabel0 {
  color: rgb(255, 68, 99);
  border-color: rgb(255, 68, 99);
  background-color: rgba(255, 68, 99, 0.1);
}
.errTypes .checkboxLabel1 {
  color: rgb(145, 155, 218);
  border-color: rgb(145, 155, 218);
  background-color: rgba(145, 155, 218, 0.1);
}
.errTypes .checkboxLabel2 {
  color: rgb(255, 152, 0);
  border-color: rgb(255, 152, 0);
  background-color: rgba(255, 152, 0, 0.1);
}
.errTypes .checkboxLabel3 {
  color: rgb(156, 133, 255);
  border-color: rgb(156, 133, 255);
  background-color: rgba(156, 133, 255, 0.1);
}
</style>

<style>
.edito_youmei .el-popper.is-light,
.edito_youmei .el-popper .el-popper__arrow::before {
  background-color: #2974ff !important;
  color: #fff;
  border-color: #2974ff !important;
}

.el-poper .selectSpan {
  border-bottom: 3px solid #fff;
}
</style>