察元 WPS AI插件：工程边界与阅读地图

摘要

本文从 package.json 与入口脚本出发，说明本仓库是 WPS 文字侧 Vue 3 单页应用，并给出从启动到路由挂载的阅读顺序。不涉及具体厂商推广，仅描述技术栈与模块职责。

关键词

WPS;Vue 3;Vite;加载项

扩展阅读与维护提示

本篇围绕「察元 WPS 加载项：工程边界与阅读地图」组织材料。仓库内与主题最直接相关的检索词包括：WPS、Vue 3、Vite、加载项。建议在阅读正文所列片段后，用 IDE 全局搜索这些符号，沿 import 与调用栈向上追问「谁在什么时机调用」，而不是只记住单文件路径。

摘要所概括的要点为：本文从 package.json 与入口脚本出发，说明本仓库是 WPS 文字侧 Vue 3 单页应用，并给出从启动到路由挂载的阅读顺序。不涉及具体厂商推广，仅描述技术栈与模块职责。落地到排障时，可把现象粗分为三类交叉验证：配置是否按预期写入持久化介质；WPS COM 上下文是否可用（例如是否缺少 ActiveDocument）；以及网络与证书策略是否拦截了 fetch。本篇涉及的模块通常只覆盖其中一两类，需要与相邻篇目拼成完整拼图。

教程文件名「01-chayuan-gailan-yu-dingwei.md」仅用于导航与排序，不等价于源码模块名。若正文中的行号与本地分支不一致，多半因合并导致行偏移，此时应以函数名、导出名为锚重新检索；团队若维护了生成脚本，可在变更大段源码后重新运行以保持摘录大致对齐。

本文刻意避免对产品能力做营销式承诺：所述行为均以当前仓库可见实现为准。若组织策略要求离线或内网模型，应在网关、证书与代理层收口，而不是假设加载项能绕过浏览器安全模型。

若你同时阅读 docs/chayuan-llm-chain-series，可先对照其中的总体链路图理解「请求从 UI 到 chatApi」的次序，再回到本教程看数据结构、默认值与修改风险面；两者互补，不重复堆砌功能列表。

正文

1. 交付物与脚本入口

addonType 标记为 wps，构建与打包脚本集中在 npm scripts 中。日常本地调试通常走 dev，产物集成走 build:wps 系列。

阅读源码摘录时，请把它当作「定位入口」而非完整实现：同一函数可能在其他分支还有早退条件或 try/catch。修改默认行为前，建议用最小文档手工走一遍相关助手或对话框，并观察任务清单与日志中的字段是否与预期一致，再决定是否做数据迁移或配置重置。

复制代码

// package.json 第1-11行
{
	"name": "chayuan",
	"addonType": "wps",
	"version": "1.0.1",
	"private": true,
	"type": "module",
	"scripts": {
		"dev": "vite --port 3889",
		"build": "vite build",
		"preview": "vite preview",
		"verify:task-scope": "node scripts/verify-task-scope.mjs",

2. 应用启动顺序

main.js 在挂载路由前注册拼写检查桥接与全局错误日志，再 createApp 并 use(router)。阅读源码时可据此判断副作用初始化位置。

复制代码

// src/main.js 第1-25行
import './assets/main.css'
import './utils/publicAssetUrl.js'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { registerSpellCheckTaskBridge } from './utils/spellCheckTaskBridge.js'
import { installGlobalErrorLogger } from './utils/globalErrorLogger.js'
import { prepareDialogDisplayText } from './utils/dialogTextDisplay.js'

const app = createApp(App)

app.config.globalProperties.$cdt = (value) => prepareDialogDisplayText(value == null ? '' : String(value))

registerSpellCheckTaskBridge()
installGlobalErrorLogger(app)

app.use(router)

router.isReady().then(() => {
  app.mount('#app')
}).catch((e) => {
  console.error('Router ready failed:', e)
  app.mount('#app')
})

3. 路由形态

使用 createWebHashHistory 与一组任务窗、弹窗路由。子路径与 WPS ShowDialog 打开的 URL 需要一致，否则会出现白屏或资源 404。

复制代码

// src/router/index.js 第1-22行
import { createRouter, createWebHashHistory } from 'vue-router'
//import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history:  createWebHashHistory(''),
  routes: [
    {
      path: '/',
      name: '默认页',
      component: () => import('../components/Root.vue')
    },
    {
      path: '/dialog',
      name: '对话框',
      component: () => import('../components/Dialog.vue')
    },
    {
      path: '/taskpane',
      name: '任务窗格',
      component: () => import('../components/TaskPane.vue')
    },
    {