Vue Newszu Proofreading

一个基于 Vue.js 的智能文本校对组件，提供中文文本的错误检测和修正建议功能。

功能特性

• 🔍 智能文本校对和错误检测
• 🎯 精确的错误位置定位和高亮显示
• 📝 便捷的错误修正建议
• 🎨 现代化的用户界面设计
• 📱 响应式布局支持
• 🔧 可自定义的 API 配置
• 📦 支持多种引入方式

安装

npm install vue-newszu-proofreading

使用方法

全局注册

import Vue from "vue";
import VueNewszuProofreading from "vue-newszu-proofreading";

Vue.use(VueNewszuProofreading);

按需引入

import { NewszuProofreading } from "vue-newszu-proofreading";

export default {
  components: {
    "text-recognition": NewszuProofreading,
  },
};

基本用法

<template>
  <div>
    <!-- 触发校对的按钮 -->
    <button @click="openProofreading">开始文本校对</button>

    <!-- 文本校对组件 -->
    <text-recognition
      :visible="textProofingDialogVisible"
      :api-config="apiConfig"
      :message-handler="messageHandler"
      @close="closeTextProofingDialog"
      @apply-changes="applyTextProofingChanges"
      @dialog-opened="onTextProofingDialogOpened"
      ref="textRecognition"
    >
    </text-recognition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textProofingDialogVisible: false,
      // API配置
      apiConfig: {
        baseUrl: "https://your-api-domain.com",
        checkUrl: "/api/text/check",
        progressUrl: "/api/text/progress",
        resultUrl: "/api/text/result",
      },
      // 消息处理器（可选，用于兼容不同的UI框架）
      messageHandler: {
        warning: (msg) => this.$message.warning(msg),
        error: (msg) => this.$message.error(msg),
        success: (msg) => this.$message.success(msg),
      },
    };
  },
  methods: {
    // 打开文本校对对话框
    openProofreading() {
      const content = "这里是要校对的文本内容";
      this.textProofingDialogVisible = true;
      this.$nextTick(() => {
        this.$refs.textRecognition.openTextProofingDialog(content);
      });
    },

    // 关闭对话框
    closeTextProofingDialog() {
      this.textProofingDialogVisible = false;
    },

    // 应用校对修改
    applyTextProofingChanges(correctedContent) {
      console.log("修正后的内容:", correctedContent);
      // 在这里处理修正后的内容
    },

    // 对话框打开后的回调
    onTextProofingDialogOpened() {
      console.log("文本校对对话框已打开");
    },
  },
};
</script>

API 参数

Props

| 参数 | 类型 | 必填 | 默认值 | 说明 | | -------------- | ------- | ---- | ---------- | --------------------- | | visible | Boolean | 是 | false | 控制对话框的显示/隐藏 | | apiConfig | Object | 是 | - | API 配置对象 | | messageHandler | Object | 否 | 控制台输出 | 消息提示处理器 |

apiConfig 配置

| 参数 | 类型 | 必填 | 说明 | | ----------- | ------ | ---- | ----------------------- | | baseUrl | String | 是 | API 基础 URL | | checkUrl | String | 是 | 启动校对的 API 路径 | | progressUrl | String | 是 | 获取校对进度的 API 路径 | | resultUrl | String | 是 | 获取校对结果的 API 路径 |

messageHandler 配置

| 参数 | 类型 | 必填 | 说明 | | ------- | -------- | ---- | ---------------- | | warning | Function | 否 | 警告消息处理函数 | | error | Function | 否 | 错误消息处理函数 | | success | Function | 否 | 成功消息处理函数 |

Events

| 事件名 | 参数 | 说明 | | ------------- | ---------------- | ---------------------------------- | | close | - | 对话框关闭时触发 | | apply-changes | correctedContent | 应用修改时触发，参数为修正后的内容 | | dialog-opened | - | 对话框打开后触发 |

Methods

| 方法名 | 参数 | 说明 | | ----------------------- | ------- | -------------------------------- | | openTextProofingDialog | content | 打开校对对话框并开始校对指定内容 | | closeTextProofingDialog | - | 关闭校对对话框 |

API 接口规范

启动校对接口 (checkUrl)

请求:

{
  "content": "要校对的文本内容"
}

响应:

{
  "message": "提交成功",
  "data": "校对任务ID"
}

获取进度接口 (progressUrl)

请求:

{
  "requestId": "校对任务ID"
}

响应:

{
  "data": {
    "progress": 50
  }
}

获取结果接口 (resultUrl)

请求:

{
  "requestId": "校对任务ID"
}

响应:

{
  "message": "获取成功",
  "data": {
    "items": [
      {
        "errMsg": "错误类型",
        "errPos": 10,
        "errWord": "错误的词",
        "cordWord": ["建议的词"]
      }
    ]
  }
}

样式自定义

组件提供了完整的 CSS 类名，您可以通过覆盖这些类名来自定义样式：

/* 主对话框 */
.text-proofing-dialog {
}

/* 工具栏 */
.text-proofing-toolbar {
}

/* 文本编辑区域 */
.text-editor {
}

/* 错误列表 */
.error-list {
}

/* 错误项 */
.error-items {
}

/* 错误高亮 */
.error-highlight {
}

构建和发布

# 安装依赖
npm install

# 开发构建
npm run build:dev

# 生产构建
npm run build

# 发布到npm
npm publish

浏览器兼容性

• Vue.js 2.6+
• 现代浏览器 (Chrome, Firefox, Safari, Edge)
• IE11+ (需要 polyfill)

License

MIT License

更新日志

v2.0.3

• 完善组件封装，支持标准 npm 包安装
• 优化 API 配置方式
• 改进 TypeScript 类型定义
• 增强样式自定义能力