一、项目结构全景图
├── public/ # 静态资源目录
│ └── ribbon.xml # WPS功能区定义文件
├── src/ # 源代码目录
│ ├── assets/ # 静态资源文件
│ │ ├── base.css # 基础样式文件
│ │ └── main.css # 主样式文件
│ ├── components/ # Vue组件目录
│ │ ├── js/ # JavaScript逻辑文件
│ │ │ ├── dialog.js # 对话框交互逻辑
│ │ │ ├── systemdemo.js # 系统演示功能
│ │ │ ├── taskpane.js # 任务窗格控制逻辑
│ │ │ └── util.js # 工具函数库
│ │ ├── Dialog.vue # 对话框界面组件
│ │ ├── Root.vue # 根页面组件
│ │ ├── TaskPane.vue # 任务窗格界面组件
│ │ └── ribbon.js # 功能区交互逻辑
│ ├── router/ # 路由配置目录
│ │ └── index.js # Vue Router配置文件
│ ├── App.vue # Vue根组件
│ └── main.js # Vue应用入口文件
├── .eslintrc.cjs # ESLint 配置文件
├── .prettierrc.json # Prettier 代码格式化配置文件
├── README.md # 项目说明文档
├── index.html # HTML入口文件
├── jsconfig.json # JavaScript配置文件
├── manifest.xml # WPS插件清单文件
├── package-lock.json # npm依赖锁定文件
├── package.json # 项目配置和依赖声明
└── vite.config.js # Vite构建配置文件
二、项目交互关系图
A[manifest.xml] --> B[WPS Office]
B --> C[ribbon.xml]
C --> D[功能区按钮]
D --> E[ribbon.js]
E --> F{操作类型}
F -->|对话框| G[Dialog.vue]
F -->|任务窗格| H[TaskPane.vue]
F -->|其他| I[其他功能]
G --> J[dialog.js]
H --> K[taskpane.js]
J --> L[WPS JSAPI]
K --> L
E --> L
M[index.html] --> N[main.js]
N --> O[Vue应用]
O --> P[App.vue]
P --> Q[Vue Router]
Q --> G
Q --> H
Q --> R[Root.vue]
S[public/静态资源] --> B
T[src/源码] --> O
三、核心模块功能总结
1. WPS 集成层
- manifest.xml: 插件入口配置，定义功能区文件
- ribbon.xml: 功能区界面定义，配置按钮和事件
- ribbon.js: 功能区事件处理，协调WPS API调用
2. Vue 应用层
- main.js: 应用入口，初始化Vue实例和路由
- App.vue: 根组件，提供路由视图容器
- router/index.js: 路由配置，管理页面跳转
3. 界面组件层
- Dialog.vue: 对话框界面，提供模态窗口功能
- TaskPane.vue: 任务窗格界面，提供侧边栏功能
- Root.vue: 默认首页界面
4. 业务逻辑层
- dialog.js: 对话框业务逻辑，处理文档操作
- taskpane.js: 任务窗格业务逻辑，控制窗格行为
- systemdemo.js: 系统集成功能演示
- util.js: 工具函数库
四、数据流与控制流
1. 用户操作流程
用户点击功能区按钮
↓
ribbon.js 接收事件
↓
根据按钮类型执行不同操作
↓
调用 WPS JSAPI 或创建界面
↓
Vue 组件渲染界面
↓
用户与界面交互
↓
Vue 组件调用 JS 逻辑
↓
JS 逻辑调用 WPS API
↓
WPS 执行操作并返回结果
↓
Vue 响应式更新界面
2. WPS API 调用链
Vue组件方法调用
↓
JS逻辑模块处理
↓
window.Application 对象调用
↓
WPS 应用程序执行
↓
结果返回给 JS 模块
↓
Vue 组件状态更新
↓
界面自动刷新
