WPS JS 加载项插件

这是一个基于 WPS JS SDK (wpsjs) 和 Vue 3 开发的 WPS Excel 加载项插件。

项目结构

sync-data-plugin/
├── public/                      # 静态资源目录
│   ├── favicon.ico             # 网站图标
│   ├── images/                 # 图标资源
│   └── ribbon.xml              # 功能区按钮配置（Ribbon UI）
│
├── src/                         # 源代码目录
│   ├── main.js                 # 应用入口
│   ├── App.vue                 # 根组件
│   ├── router/
│   │   └── index.js            # 路由配置
│   ├── assets/                 # 静态资源（CSS等）
│   ├── api/                    # API接口目录
│   │   ├── index.js            # API统一入口
│   │   ├── request.js          # 请求配置
│   │   ├── auth.js             # 认证相关API
│   │   └── sync.js             # 数据同步API
│   ├── components/             # Vue组件目录
│   │   ├── Root.vue            # 默认页组件
│   │   ├── Dialog.vue          # 对话框组件
│   │   ├── LoginPrompt.vue     # 登录提示组件
│   │   └── TaskPane.vue        # 任务窗格组件
│   └── js/                     # JavaScript业务逻辑
│       ├── ribbon.js           # Ribbon 按钮事件处理
│       ├── functions.js        # 自定义函数
│       ├── dialog.js           # 对话框逻辑
│       ├── taskpane.js         # 任务窗格逻辑
│       ├── systemdemo.js       # 系统演示
│       └── util.js             # 工具函数
│
├── manifest.xml                # WPS 加载项清单文件
├── index.html                  # HTML 入口
├── vite.config.js             # Vite 构建配置
├── package.json               # 项目依赖配置
├── jsconfig.json              # JS 配置
├── .eslintrc.cjs              # ESLint 配置
└── .prettierrc.json           # Prettier 配置

核心文件说明

文件	说明
manifest.xml	WPS 加载项配置，定义插件名称、API版本、函数命名空间
public/ribbon.xml	定义 WPS 功能区（Ribbon）按钮布局
src/js/ribbon.js	Ribbon 按钮的事件回调处理
src/js/functions.js	自定义函数（类似 Excel 自定义函数）
vite.config.js	使用 wpsjs 插件自动扫描 functions.js 生成 functions.json

技术栈

• 框架: Vue 3 + Vue Router
• 构建工具: Vite 5
• SDK: wpsjs (WPS JS SDK)、et-jsapi-declare (WPS Excel API)
• HTTP: axios
• 代码规范: ESLint + Prettier

主要功能

根据 ribbon.xml 和 ribbon.js，插件包含以下功能：

1. 同步提报 - 将Excel数据同步提报到天玑系统

   • 自动登录验证
   • 智能表头识别
   • 高性能数据提取
   • 详见 同步提报功能说明

2. 登录管理 - 天玑系统登录验证

   • 登录提示对话框
   • 登录状态持久化
   • 退出登录功能
   • 详见 登录功能说明

3. 弹出消息框 - 显示当前文档名称

4. 按钮启用/禁用控制 - 演示按钮状态管理

5. 弹对话框网页 - 打开 Dialog.vue

6. 弹任务窗格网页 - 打开 TaskPane.vue

7. 注册/清除新建文件事件 - API 事件监听演示

8. 给业务系统发通知 - 使用 WebNotify 与外部系统通信

与外部系统集成

ribbon.js 中导出了两个供外部业务系统调用的函数：

• openOfficeFileFromSystemDemo - 打开 Office 文件
• InvokeFromSystemDemo - 从业务系统调用

项目安装

npm install

开发模式（热重载）

npm run dev

生产构建

npm run build

代码检查

npm run lint

推荐的 IDE 设置

VSCode + Volar (并禁用 Vetur)

文档说明

• README.md - 项目总体说明（本文件）
• API_REFACTOR.md - API封装重构说明
• API_RESPONSE_FIX.md - API响应处理优化说明
• CORS_FIX.md - CORS跨域问题解决方案
• BACKEND_CORS_REQUIRED.md - 后端CORS配置必须指南 ⚠️
• PROJECT_STRUCTURE_REFACTOR.md - 项目结构重构说明
• LOGIN_FEATURE.md - 登录功能详细说明
• LOGIN_TEST_GUIDE.md - 登录功能测试指南
• LOGOUT_API_INTEGRATION.md - 退出登录API集成说明
• LOGOUT_ICON_UPDATE.md - 退出登录按钮图标优化说明
• LOGOUT_DEBUG_GUIDE.md - 退出登录调试指南
• LOGOUT_DEBUG_ENHANCEMENT.md - 退出登录调试增强说明
• SYNC_SUBMIT_IMPLEMENTATION.md - 同步提报功能实现说明
• QUICK_START.md - 快速开始指南

参考文档

• Vite 配置文档
• WPS JS SDK 文档