ai-read-over-pro 0.0.18 → 0.0.19

package/components/demo/api/index.js

@@ -77,6 +77,14 @@ export const loopPoll = (data) => {
     });
 }
 
+export const analysisSave = (data) => {
+    return request({
+        url: prefix + '/criticism/analysis/save',
+        method: 'post',
+        data,
+    });
+}
+
 // export const registerSse = (sseSessionId, fn, successFn) => {
 //     const source = new EventSourcePolyfill(baseURL + prefix + '/sse?id=' + sseSessionId, {
 //         headers: {

package/components/demo/src/RichInput.vue

@@ -0,0 +1,301 @@
+<template>
+  <div class="ri-wrap">
+    <!-- 公式弹窗 -->
+    <el-popover
+      v-model="formulaVisible"
+      popper-class="ri-formula-popover"
+      placement="top-start"
+      trigger="manual"
+    >
+      <div class="ri-formula-container">
+        <iframe
+          :src="`https://zjyw.icve.com.cn/kityformula-editor/kityFormula.html?c=${formulaValue}`"
+          ref="editorFrame"
+          class="ri-formula-iframe"
+        ></iframe>
+        <el-button type="primary" size="small" class="ri-formula-save" @click="saveFormula">保存</el-button>
+      </div>
+      <!-- 触发锚点（隐藏，通过 v-model 手动控制） -->
+      <span slot="reference"></span>
+    </el-popover>
+
+    <!-- 编辑器容器 -->
+    <div
+      class="ri-editor-wrap"
+      :style="{ minHeight: height + 'px' }"
+      :class="{ 'ri-editor-focus': isFocused }"
+    >
+      <Editor
+        class="ri-editor"
+        :style="{ minHeight: height + 'px' }"
+        :defaultConfig="editorConfig"
+        :mode="'simple'"
+        @onCreated="onCreated"
+        @onChange="onChange"
+        @onFocus="isFocused = true"
+        @onBlur="isFocused = false"
+        @customPaste="customPaste"
+      />
+    </div>
+
+    <!-- 插入公式按钮 -->
+    <div class="ri-toolbar">
+      <span class="ri-formula-btn" @click="openFormula">
+        <img src="../static/formula.png" class="ri-fx-img" alt="fx" />
+        插入公式
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Boot } from '@wangeditor/editor';
+import formulaModule from '@wangeditor/plugin-formula';
+import { Editor } from '@wangeditor/editor-for-vue';
+
+let _booted = false;
+function ensureBoot() {
+  if (!_booted) {
+    try {
+      Boot.registerModule(formulaModule);
+    } catch (e) {}
+    _booted = true;
+  }
+}
+ensureBoot();
+
+export default {
+  name: 'RichInput',
+  components: { Editor },
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '请输入内容，支持公式编辑',
+    },
+    height: {
+      type: Number,
+      default: 90,
+    },
+  },
+  data() {
+    return {
+      editor: null,
+      isFocused: false,
+      formulaVisible: false,
+      formulaValue: '',
+      editorConfig: {
+        placeholder: this.placeholder,
+        hoverbarKeys: {
+          formula: {
+            menuKeys: [],
+          },
+        },
+      },
+    };
+  },
+  watch: {
+    value(val) {
+      if (!this.editor) return;
+      try {
+        const current = this.editor.getHtml();
+        if (val !== current) {
+          // 直接 nextTick 就够，因为此时编辑器已经初始化完成
+          this.$nextTick(() => {
+            try {
+              this.editor.setHtml(val || '<p><br></p>');
+            } catch (e) {}
+          });
+        }
+      } catch (e) {}
+    },
+  },
+  mounted() {
+    window.addEventListener('message', this.latexMessage);
+  },
+  beforeDestroy() {
+    window.removeEventListener('message', this.latexMessage);
+    if (this.editor) {
+      this.editor.destroy();
+    }
+  },
+  methods: {
+    onCreated(editor) {
+      this.editor = Object.seal(editor);
+    },
+
+    onChange(editor) {
+      this.$emit('input', editor.getHtml());
+    },
+
+    openFormula() {
+      if (!this.editor) return;
+      this.editor.focus();
+      this.formulaValue = '';
+      this.formulaVisible = true;
+    },
+
+    saveFormula() {
+      if (this.$refs.editorFrame) {
+        this.$refs.editorFrame.contentWindow.postMessage('message', '*');
+      }
+      setTimeout(() => {
+        this.formulaVisible = false;
+      }, 100);
+    },
+
+    latexMessage(event) {
+      if (!this.formulaVisible) return;
+      const { mceAction, content } = event.data || {};
+      if (mceAction !== 'insertContent') return;
+      if (!content) return;
+
+      const match = content.match(/data-latex="([^"]+)"/);
+      if (!match) return;
+
+      let latex = match[1].replace(/\s/g, '');
+      if (latex === '\\placeholder') return;
+
+      if (!this.editor) return;
+
+      try {
+        this.editor.restoreSelection(); // 加 try-catch 兜底
+      } catch (e) {
+        // restoreSelection 失败时，把光标移到末尾
+        this.editor.focus(true);
+      }
+
+      const formulaNode = {
+        type: 'formula',
+        value: latex,
+        children: [{ text: '' }],
+      };
+      this.editor.insertNode(formulaNode);
+    },
+
+    customPaste(editor, event, callback) {
+      const text = event.clipboardData.getData('text/plain');
+      editor.insertText(text);
+      event.preventDefault();
+      callback(false);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.ri-wrap {
+  width: 100%;
+}
+
+.ri-editor-wrap {
+  border: 1px solid #e0d8ff;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: border-color 0.2s;
+  background: #fff;
+
+  &.ri-editor-focus {
+    border-color: #6040e0;
+  }
+}
+
+.ri-editor {
+  background: transparent;
+  font-size: 13px;
+  color: #333;
+}
+
+.ri-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 4px;
+}
+
+.ri-formula-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 12px;
+  color: #6040e0;
+  cursor: pointer;
+  user-select: none;
+  font-weight: bold;
+  padding: 2px 6px;
+  border-radius: 4px;
+  transition: background 0.2s;
+
+  &:hover {
+    background: rgba(96, 64, 224, 0.08);
+  }
+}
+
+.ri-fx-img {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+  vertical-align: middle;
+}
+
+.ri-formula-iframe {
+  width: 782px;
+  height: 420px;
+  border: none;
+  outline: none;
+}
+
+.ri-formula-save {
+  position: absolute;
+  right: 24px;
+  bottom: 10px;
+}
+
+.ri-formula-container {
+  position: relative;
+  padding: 24px;
+  border-radius: 16px;
+  background: linear-gradient(
+    103.5deg,
+    rgba(255, 238, 238, 1) 0%,
+    rgba(255, 255, 255, 1) 29%,
+    rgba(255, 255, 255, 1) 71%,
+    rgba(204, 238, 255, 1) 100%
+  );
+}
+</style>
+
+<style lang="scss">
+.ri-formula-popover {
+  padding: 2px;
+  border-radius: 16px;
+  z-index: 3000 !important;
+}
+
+/* 覆盖 wangeditor 默认样式，使其适配字段高度 */
+.ri-editor-wrap {
+  .w-e-text-container {
+    background: transparent !important;
+
+    p {
+      span {
+        background-color: transparent !important;
+      }
+    }
+  }
+
+  .w-e-text-placeholder {
+    font-size: 13px;
+    color: #bbb;
+  }
+
+  /* 隐藏工具栏（simple 模式无工具栏，仅保留悬浮栏） */
+  .w-e-toolbar {
+    display: none !important;
+  }
+}
+</style>
+
+<style src="@wangeditor/editor/dist/css/style.css"></style>

package/components/demo/src/main.vue

@@ -52,7 +52,8 @@
                     <read-over :exercises-data="activeItem"
                                :analyze-data="analyzeData"
                                @on-reanswer="onReanswer"
-                               @on-noty-apply="notyApply"/>
+                               @on-noty-apply="notyApply"
+                               @on-edit="onEditAnalyze"/>
                     <div class="member-table" v-if="stretch">
                         <member-table :check-data="showTableList"
                                       :show-data="tabList"
@@ -68,7 +69,7 @@
 import ReadOver from './read-over.vue';
 import { getUserInfo } from '../utils/config';
 // import {generateReview, registerSse, criticismApply, reanswerReview} from '../api/index';
-import { generateReview, loopPoll, criticismApply, reanswerReview } from '../api/index';
+import { generateReview, loopPoll, criticismApply, reanswerReview, analysisSave } from '../api/index';
 import Cookies from "js-cookie";
 import TabFilter from './tab-filter.vue';
 import MemberTable from './member-table.vue';
@@ -307,6 +308,20 @@ export default {
             if (!this.listData || this.listData.length < 1) {
                 throw new Error('list-data 不能为空或者长度不能为0');
             }
+        },
+        async onEditAnalyze(data) {
+            this.$set(this.replyCache, this.activeItem.id, data);
+            this.analyzeData = data;
+            try {
+                await analysisSave({
+                    id: data.id,
+                    analysis: JSON.stringify(data.jsonContent),
+                    score: data.score,
+                });
+                this.$message.success('保存成功');
+            } catch (e) {
+                this.$message.error('保存失败，请重试');
+            }
         }
     }
 }

package/components/demo/src/read-over.vue

@@ -27,8 +27,12 @@
                     <span class="score-number">{{ analyzeData.score }}</span>分
                 </div>
                 <div class="type" :class="{ 'type-active': analyzeData.accepted }" @click="notyApply">应用</div>
+                <div class="edit-btn" v-if="!analyzeData.accepted" @click="openEdit">
+                    <i class="el-icon-edit"></i>
+                    编辑
+                </div>
                 <div class="exercises-read-over-content">
-                    <div class="list" v-for="item in analyzeData.jsonContent">
+                    <div class="list" v-for="(item, index) in analyzeData.jsonContent" :key="index">
                         <p class="title" v-if="item.title">{{ item.title }}</p>
                         <p class="content" v-html="renderFormulas(item.analysis)"></p>
                     </div>
@@ -39,17 +43,58 @@
                 </div>
             </template>
         </div>
+
+      <el-dialog :visible.sync="editVisible" width="600px" append-to-body custom-class="read-over-edit-dialog"
+                 :close-on-click-modal="false" @opened="onDialogOpened">
+            <div slot="title" class="edit-dialog-header">
+                <div class="edit-dialog-title">
+                    <i class="el-icon-edit-outline"></i>
+                    编辑批阅解析
+                </div>
+            </div>
+            <div class="edit-dialog-body">
+                <div class="edit-score-field">
+                    <span class="edit-score-label">得分</span>
+                    <el-input-number
+                        v-model="editScore"
+                        :min="0"
+                        :max="exercisesData.score"
+                        :precision="1"
+                        :step="0.5"
+                        size="small"
+                    />
+                    <span class="edit-score-max">/ {{ exercisesData.score }} 分</span>
+                </div>
+                <span class="edit-label">批阅解析</span>
+                <div class="edit-item" v-for="(item, index) in editList" :key="index">
+                    <rich-input
+                        :value="item.analysisHtml"
+                        placeholder="请输入解析内容，支持公式编辑"
+                        :height="120"
+                        @input="(v) => $set(editList[index], 'analysisHtml', v)"
+                    />
+                </div>
+            </div>
+            <div slot="footer" class="edit-dialog-footer">
+                <el-button class="edit-btn-cancel" @click="editVisible = false">取消</el-button>
+                <el-button class="edit-btn-save" @click="saveEdit">
+                    保存
+                </el-button>
+            </div>
+        </el-dialog>
     </div>
 </template>
 <script>
 import ChatTools from "./chat-tools.vue";
+import RichInput from "./RichInput.vue";
 import katex from 'katex';
 import 'katex/dist/katex.min.css';
 import 'katex/contrib/mhchem/mhchem.js';
 export default {
     name: 'ReadOver',
     components: {
-        ChatTools
+        ChatTools,
+        RichInput,
     },
     props: {
         exercisesData: {
@@ -63,7 +108,9 @@ export default {
     },
     data() {
         return {
-
+            editVisible: false,
+            editList: [],
+            editScore: 0,
         }
     },
     methods: {
@@ -73,6 +120,62 @@ export default {
         notyApply() {
             this.$emit('on-noty-apply', this.analyzeData, this.exercisesData);
         },
+        openEdit() {
+          this.editScore = this.analyzeData.score ?? 0;
+          this.editList = (this.analyzeData.jsonContent || []).map((item) => ({
+            ...item,
+            analysisHtml: this.plainToHtml(item.analysis),
+          }));
+          this.editVisible = true;
+        },
+        onDialogOpened() {
+          this.editList = this.editList.map((item, index) => {
+            const origin = this.analyzeData.jsonContent[index];
+            return {
+              ...item,
+              analysisHtml: this.plainToHtml(origin.analysis),
+            };
+          });
+        },
+        saveEdit() {
+            const jsonContent = this.editList.map((item) => ({
+                ...item,
+                analysis: this.htmlToPlain(item.analysisHtml),
+                analysisHtml: undefined,
+            }));
+            this.$emit('on-edit', { ...this.analyzeData, score: this.editScore, jsonContent });
+            this.editVisible = false;
+        },
+        plainToHtml(text) {
+            if (!text) return '';
+            const escaped = text
+                .replace(/\$\$([^$]+)\$\$/g, (_, latex) =>
+                    `<span data-w-e-type="formula" data-w-e-is-void data-w-e-is-inline data-value="${this.escAttr(latex)}"></span>`
+                )
+                .replace(/\$([^$]+)\$/g, (_, latex) =>
+                    `<span data-w-e-type="formula" data-w-e-is-void data-w-e-is-inline data-value="${this.escAttr(latex)}"></span>`
+                );
+            return escaped.split('\n').map((line) => `<p>${line || '<br>'}</p>`).join('');
+        },
+        htmlToPlain(html) {
+            if (!html) return '';
+            let result = html.replace(
+                /<span[^>]+data-w-e-type="formula"[^>]+data-value="([^"]*)"[^>]*>[\s\S]*?<\/span>/g,
+                (_, latex) => `$${this.unescAttr(latex)}$`
+            );
+            result = result.replace(/<\/p>\s*<p>/gi, '\n');
+            result = result.replace(/<[^>]+>/g, '');
+            return result
+                .replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>')
+                .replace(/&nbsp;/g, ' ').replace(/&#39;/g, "'").replace(/&quot;/g, '"')
+                .trim();
+        },
+        escAttr(str) {
+            return str.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+        },
+        unescAttr(str) {
+            return str.replace(/&quot;/g, '"').replace(/&#39;/g, "'");
+        },
         renderFormulas(text) {
         if (!text) return '';
         text = text.replace(/&gt;/g, '>')
@@ -300,5 +403,205 @@ export default {
     .type-active {
         background: linear-gradient(90deg, rgb(48, 144, 240) 0%, rgb(48, 192, 144) 100%);
     }
+    .edit-btn {
+        position: absolute;
+        right: 32px;
+        top: 70px;
+        width: 64px;
+        height: 32px;
+        color: rgba(96, 96, 224, 1);
+        text-align: center;
+        line-height: 32px;
+        border-radius: 20px;
+        font-size: 12px;
+        border: 1px solid rgba(96, 96, 224, 0.5);
+        cursor: pointer;
+        i {
+            font-size: 13px;
+        }
+        &:hover {
+            background-color: rgba(96, 96, 224, 0.08);
+            border-color: rgba(96, 96, 224, 0.8);
+        }
+    }
+}
+:deep(.read-over-edit-dialog) {
+    border-radius: 16px;
+    overflow: hidden;
+
+    .el-dialog__header {
+        padding: 24px 24px 16px;
+        border-bottom: 1px solid rgba(96, 96, 224, 0.12);
+        background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(238, 238, 255, 0.6) 100%);
+    }
+
+    .el-dialog__body {
+        padding: 0;
+    }
+
+    .el-dialog__footer {
+        padding: 0;
+        border-top: 1px solid rgba(96, 96, 224, 0.12);
+    }
+}
+
+.edit-dialog-header {
+    .edit-dialog-title {
+        font-size: 18px;
+        font-weight: 700;
+        color: rgb(32, 40, 64);
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        i {
+            font-size: 20px;
+            background: linear-gradient(90deg, rgb(0, 144, 240), rgb(144, 48, 240));
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+    }
+    .edit-dialog-subtitle {
+        font-size: 12px;
+        color: rgba(32, 40, 64, 0.45);
+        margin-top: 4px;
+        padding-left: 28px;
+    }
+}
+
+.edit-dialog-body {
+    max-height: 480px;
+    overflow-y: auto;
+    padding: 20px 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    .edit-score-field {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 12px 16px;
+        background: rgba(248, 248, 255, 1);
+        border: 1px solid rgba(96, 96, 224, 0.15);
+        border-radius: 10px;
+
+        .edit-score-label {
+            font-size: 13px;
+            font-weight: 600;
+            color: rgb(32, 40, 64);
+            flex-shrink: 0;
+        }
+
+        .edit-score-max {
+            font-size: 13px;
+            color: rgba(32, 40, 64, 0.5);
+            flex-shrink: 0;
+        }
+
+        :deep(.el-input-number) {
+            width: 120px;
+            .el-input__inner {
+                border-color: rgba(96, 96, 224, 0.3);
+                border-radius: 8px;
+                text-align: center;
+                &:focus {
+                    border-color: rgba(96, 96, 224, 0.7);
+                }
+            }
+        }
+    }
+
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background: rgba(96, 96, 224, 0.3);
+        border-radius: 4px;
+    }
+
+    .edit-label {
+      color: #000000;
+      font-weight: bold;
+    }
+
+    .edit-item {
+        .edit-item-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 8px;
+        }
+        .edit-item-index {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, rgb(0, 144, 240), rgb(96, 96, 224));
+            color: #fff;
+            font-size: 11px;
+            font-weight: 600;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+        }
+        .edit-item-title {
+            font-size: 13px;
+            font-weight: 600;
+            color: rgb(96, 96, 224);
+        }
+        .edit-item-title--default {
+            color: rgba(32, 40, 64, 0.4);
+            font-weight: 400;
+        }
+    }
+}
+
+.edit-dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 5px;
+    padding: 16px 24px;
+
+    .edit-btn-cancel {
+        height: 36px;
+        padding: 0 20px;
+        border-radius: 18px;
+        border: 1px solid rgba(96, 96, 224, 0.4);
+        color: rgba(96, 96, 224, 1);
+        background: transparent;
+        font-size: 13px;
+        transition: all 0.2s;
+
+        &:hover {
+            background: rgba(96, 96, 224, 0.06);
+            border-color: rgba(96, 96, 224, 0.7);
+        }
+    }
+
+    .edit-btn-save {
+        height: 36px;
+        padding: 0 24px;
+        border-radius: 18px;
+        border: none;
+        color: #fff;
+        background: linear-gradient(90deg, rgb(0, 144, 240) 0%, rgb(144, 48, 240) 100%);
+        font-size: 13px;
+        font-weight: 600;
+        transition: all 0.2s;
+
+        i {
+            margin-right: 4px;
+        }
+
+        &:hover {
+            opacity: 0.88;
+            box-shadow: 0 4px 12px rgba(96, 96, 224, 0.35);
+        }
+    }
 }
 </style>