VSCode Vue3 Extension - 财经数据管理系统
基于 Vite + Vue3 + TypeScript 构建的 VSCode 扩展，集成了完整的后台管理系统，提供财经数据管理功能。
功能特性
系统管理
- 完整的后台管理系统：集成Vue3管理系统，包含用户管理、角色权限、菜单管理等
- 参数配置：系统参数配置管理
- 权限控制：基于RBAC的权限管理系统，支持菜单级和数据级权限控制
- 响应式设计：支持深色/浅色主题切换，自适应不同屏幕尺寸
业务管理模块
第一阶段：数据录入与审核
- 任务管理 (taskManage)：数据录入任务的创建、分配、跟踪
- 数据作业 (workManage)：
- 任务列表：查看和处理待处理任务
- 手工录入：单条数据手动录入
- 文件导入：Excel/CSV批量导入
- 脚本导入：Python/Shell脚本自动化导入
- 数据复核 (reviewManage)：
- 复核任务管理：待复核、复核中、已复核任务
- 复核详情：查看作业详情、复核意见、批量复核
- 复核操作：通过、驳回、转办
第二阶段：质量控制
- 数据预审 (preReview)：
- 预审核规则配置：规则的新建、编辑、删除、导出
- 规则管理：规则名称、表编码、关联字段、数据类型、错误类型、状态管理
- 规则详情：查看规则完整信息和 SQL
- 规则查询：支持按规则 ID、名称、表编码、数据类型、错误类型、状态筛选
- 数据质检 (checkManage)：
- 质检任务管理：任务创建、执行、暂停、恢复
- 质检规则配置：支持4类规则（完整性、准确性、一致性、时效性）
- 质检报告：问题数据清单、错误分布、改进建议
- 进度跟踪：实时显示质检任务执行进度
- 问题整改：问题数据认领、整改、复查
第三阶段：数据分析与通知
- 数据统计 (statisticManage)：
- 多角色统计：作业员、复核员、质检员独立统计
- 工作量统计：任务数量、数据量、完成率
- 质量分析：数据合格率、错误率、问题分布
- 效率分析：平均处理时长、任务完成速度
- 趋势分析：工作量趋势、质量趋势、效率趋势（折线图）
- 排行榜：TOP 10作业员/复核员/质检员（柱状图）
- 图表展示：基于ECharts 5.5的可视化图表
- 通知管理 (notifyManage)：
- 通知类型：系统通知、任务通知、告警通知、数据通知
- 发送方式：全部用户、指定部门、指定用户、指定角色
- 定时发送：支持定时任务自动发送通知
- 通知模板：内置4种类型通知模板
- 已读/未读：通知状态管理和批量操作
- 发送记录：通知发送历史和回执
第四阶段：辅助功能
- 数据库管理 (dbManage)：
- 数据库管理：数据库的增删改查
- 业务库管理：业务库的增删改查
- 表管理：数据表的增删改查
- 表名自动生成：主数据库_业务库_意义名1_意义名2_意义名3
- 两步式创建：基本信息 + 数据与配置
- 字段映射：完整显示后端实体所有字段
- 主键保护：新增时隐藏主键字段，编辑时必填
- 字段管理：字段的增删改查
- 字段列表显示：表、表中文名、字段ID、字段名、字段简称、字段顺序、字段类型、长度
- 属性配置：是否主键、是否业务键、是否枚举、是否导出
- 枚举管理：枚举ID
- 其他信息：字段描述、修改人、修改时间
- 树形结构展示：数据库-业务库-表三级树形展示
- 统计卡片：显示数据库、业务库、表、字段的总数
- 组件化设计：
- 表结构管理 (tableManage)：
- 表CRUD：创建、编辑、删除、查看数据库表
- 字段管理：字段列表、添加、编辑、删除字段
- ER图可视化：SVG绘制实体关系图
- 支持表节点拖拽定位
- 关系线显示（1:1、1:N、N:N）
- 缩放控制（放大、缩小、重置）
- 关系类型图例
- 结构同步：从数据库同步表结构
- 导入导出：表结构导入导出功能
- 表信息：表名、注释、引擎、字符集、字段数、记录数
VSCode集成
- VSCode集成：在VSCode中以WebviewPanel形式展示管理界面
- 开发模式：支持热更新，开发体验流畅
- 独立运行：可独立部署为Web应用
项目结构
vscode-vue3-extension/
├── src/
│ ├── extension/ # VSCode扩展源代码
│ │ ├── extension.ts # 扩展入口文件
│ │ └── utils/ # 扩展工具函数
│ │ ├── webview.ts # Webview配置工具
│ │ └── nonce.ts # Nonce生成工具
│ │
│ └── webview/ # Vue3 Webview应用(财经数据管理系统)
│ ├── index.html # HTML入口
│ ├── main.js # Vue应用入口
│ ├── App.vue # 根组件
│ ├── settings.js # 全局配置
│ │
│ ├── api/ # API接口模块
│ │ ├── login.js # 登录接口
│ │ ├── menu.js # 菜单接口
│ │ ├── system/ # 系统管理接口
│ │ │ ├── config.js # 参数配置
│ │ │ ├── dept.js # 部门管理
│ │ │ ├── dict/ # 字典管理
│ │ │ ├── menu.js # 菜单管理
│ │ │ ├── notice.js # 通知公告
│ │ │ ├── post.js # 岗位管理
│ │ │ ├── role.js # 角色管理
│ │ │ └── user.js # 用户管理
│ │ ├── tool/ # 系统工具接口
│ │ │ └── gen.js # 代码生成
│ │ ├── task.js # 任务管理接口
│ │ ├── workTable.js # 数据作业接口
│ │ ├── review.js # 数据复核接口
│ │ ├── preReview.js # 数据预审（预审核规则）接口
│ │ ├── check.js # 数据质检接口
│ │ ├── statistic.js # 数据统计接口
│ │ ├── notify.js # 通知管理接口
│ │ ├── table.js # 表结构管理接口
│ │ ├── common.js # 通用接口
│ │ ├── dataQuery.js # 数据查询接口
│ │ └── script.js # 脚本执行接口
│ │
│ ├── assets/ # 静态资源
│ │ ├── icons/svg/ # SVG图标
│ │ ├── images/ # 图片资源
│ │ └── styles/ # 全局样式
│ │
│ ├── components/ # 全局组件
│ │ ├── Breadcrumb/ # 面包屑导航
│ │ ├── Crontab/ # Cron表达式编辑器
│ │ ├── DictTag/ # 字典标签
│ │ ├── Editor/ # 富文本编辑器
│ │ ├── FileUpload/ # 文件上传
│ │ ├── ImageUpload/ # 图片上传
│ │ ├── ImagePreview/ # 图片预览
│ │ ├── Pagination/ # 分页组件
│ │ ├── RightToolbar/ # 表格工具栏
│ │ ├── SvgIcon/ # SVG图标
│ │ └── ...
│ │
│ ├── directive/ # 自定义指令
│ │ ├── common/ # 通用指令
│ │ │ └── copyText.js # 复制文本
│ │ ├── permission/ # 权限指令
│ │ │ ├── hasPermi.js # 权限控制
│ │ │ └── hasRole.js # 角色控制
│ │ └── index.js # 指令入口
│ │
│ ├── layout/ # 布局组件
│ │ ├── components/ # 布局子组件
│ │ │ ├── AppMain.vue # 主内容区
│ │ │ ├── Navbar.vue # 顶部导航
│ │ │ ├── Sidebar/ # 侧边栏
│ │ │ ├── TagsView/ # 标签页
│ │ │ └── Settings/ # 设置面板
│ │ └── index.vue # 布局入口
│ │
│ ├── plugins/ # 插件模块
│ │ ├── auth.js # 权限插件
│ │ ├── cache.js # 缓存插件
│ │ ├── download.js # 下载插件
│ │ ├── modal.js # 模态框插件
│ │ ├── tab.js # 标签页插件
│ │ └── index.js # 插件入口
│ │
│ ├── router/ # 路由配置
│ │ └── index.js # 路由入口(定义静态路由和动态路由)
│ │
│ ├── store/ # Vuex状态管理
│ │ ├── modules/ # 状态模块
│ │ │ ├── app.js # 应用状态
│ │ │ ├── dict.js # 字典状态
│ │ │ ├── permission.js # 权限状态
│ │ │ ├── settings.js # 设置状态
│ │ │ ├── tagsView.js # 标签页状态
│ │ │ └── user.js # 用户状态
│ │ ├── getter.js # Getter
│ │ └── index.js # Store入口
│ │
│ ├── utils/ # 工具函数
│ │ ├── request.js # Axios封装(请求/响应拦截器)
│ │ ├── auth.js # 认证工具(Token管理)
│ │ ├── dict.js # 字典工具
│ │ ├── permission.js # 权限工具
│ │ ├── validate.js # 验证工具
│ │ ├── jsencrypt.js # 加密工具
│ │ ├── theme.js # 主题工具
│ │ └── generator/ # 代码生成工具
│ │
│ ├── views/ # 页面视图
│ │ ├── index.vue # 首页Dashboard
│ │ ├── login.vue # 登录页
│ │ ├── register.vue # 注册页
│ │ ├── error/ # 错误页面
│ │ ├── system/ # 系统管理
│ │ │ ├── config/ # 参数配置
│ │ │ ├── dept/ # 部门管理
│ │ │ ├── dict/ # 字典管理
│ │ │ ├── menu/ # 菜单管理
│ │ │ ├── notice/ # 通知公告
│ │ │ ├── post/ # 岗位管理
│ │ │ ├── role/ # 角色管理
│ │ │ └── user/ # 用户管理
│ │ ├── taskManage/ # 任务管理模块
│ │ │ ├── components/ # 任务管理组件
│ │ │ │ └── taskForm.vue # 任务表单
│ │ │ └── index.vue # 任务管理页面
│ │ ├── workManage/ # 数据作业模块
│ │ │ ├── components/ # 数据作业组件
│ │ │ │ ├── taskRequirement.vue # 任务需求展示
│ │ │ │ └── workTableForm.vue # 作业表单
│ │ │ ├── list.vue # 任务列表
│ │ │ ├── human.vue # 手工录入
│ │ │ ├── file.vue # 文件导入
│ │ │ └── script.vue # 脚本导入
│ │ ├── reviewManage/ # 数据复核模块
│ │ │ ├── components/ # 复核组件
│ │ │ │ ├── taskDetail.vue # 任务详情
│ │ │ │ ├── workDetail.vue # 作业详情
│ │ │ │ ├── reviewAction.vue # 复核操作
│ │ │ │ └── reviewDetail.vue # 复核详情
│ │ │ └── index.vue # 复核页面
│ │ ├── preReview/ # 数据预审（预审核规则）模块
│ │ │ ├── components/ # 预审核组件
│ │ │ │ ├── ruleForm.vue # 规则表单（4个标签页）
│ │ │ │ └── preAuditDetail.vue # 规则详情
│ │ │ └── index.vue # 预审核规则页面
│ │ ├── checkManage/ # 数据质检模块
│ │ │ ├── components/ # 质检组件
│ │ │ │ ├── checkTaskDetail.vue # 质检任务详情
│ │ │ │ └── ruleForm.vue # 质检规则表单
│ │ │ ├── rules.vue # 质检规则
│ │ │ └── index.vue # 质检页面
│ │ ├── statisticManage/ # 数据统计模块
│ │ │ ├── components/ # 统计组件
│ │ │ │ ├── roleSelector.vue # 角色选择器
│ │ │ │ ├── statisticChart.vue # 统计图表
│ │ │ │ └── rankingList.vue # 排行榜
│ │ │ └── index.vue # 统计页面
│ │ ├── notifyManage/ # 通知管理模块
│ │ │ ├── components/ # 通知组件
│ │ │ │ ├── notifyForm.vue # 通知表单
│ │ │ │ └── notifyDetail.vue # 通知详情
│ │ │ └── index.vue # 通知页面
│ │ └── tableManage/ # 表结构管理模块
│ │ ├── components/ # 表结构组件
│ │ │ ├── tableForm.vue # 表结构表单
│ │ │ ├── fieldDetail.vue # 字段详情
│ │ │ └── erDiagram.vue # ER图可视化
│ │ └── index.vue # 表结构页面
│ │
│ ├── permission.js # 路由权限控制
│ └── directive.js # 指令注册
│
├── scripts/ # 构建脚本
│ ├── build.mts # 扩展构建脚本(esbuild)
│ └── dev.mjs # 开发模式脚本
│
├── out/ # 构建输出目录
│ ├── extension/ # 扩展编译输出
│ └── webview/ # Webview编译输出
│
├── .vscode/ # VSCode配置
├── vite.config.ts # Vite配置
├── tsconfig.json # TypeScript配置
└── package.json # 项目清单
核心逻辑说明
1. VSCode扩展架构
启动VSCode
↓
激活扩展 activate()
↓
创建TreeView(活动栏图标)
↓
监听TreeView可见性
↓
创建DashboardPanel Webview
关键代码位置：
DashboardPanel类负责管理主面板的生命周期：
- 单例模式：确保只打开一个面板实例
- HTML处理：读取构建后的HTML并转换资源路径为webview URI
- 消息通信：监听webview发来的消息并处理
// HTML资源路径转换逻辑
private _getHtmlForWebview(webview: vscode.Webview) {
// 读取构建后的index.html
// 移除crossorigin属性
// 转换相对路径为webview.asWebviewUri()
}
消息类型：
openQuery：打开查询分析openReport：打开数据报告openSettings：打开设置
2. Vue3应用架构(财经数据管理系统)
创建Vue应用实例
↓
注册全局组件(Pagination, FileUpload等)
↓
挂载全局方法(useDict, download等)
↓
注册指令(权限、复制等)
↓
使用插件(ElementPlus, Pinia等)
↓
注册路由
↓
权限控制初始化
↓
挂载应用
静态路由 (constantRoutes)：
- 公共页面：登录、注册、404、401
- 默认布局：首页Dashboard、个人中心
动态路由 (dynamicRoutes)：
- 基于用户权限动态加载
- 包含系统管理、监控、工具等模块
路由守卫流程：
路由跳转
↓
检查Token
↓
有Token ─→ 已获取用户信息 ─→ 放行
│ │
│ └→ 未获取 ─→ 获取用户信息
│ ↓
│ 生成动态路由
│ ↓
│ 添加到路由器
│ ↓
│ 放行
│
└→ 无Token ─→ 白名单 ─→ 放行
│
└→ 非白名单 ─→ 重定向到登录
关键配置：
2.4 状态管理 (Vuex Store)
Store模块结构：
关键操作：
// 用户登录
useUserStore().login(userInfo)
.then(() => {
// 获取用户信息和权限
return useUserStore().getInfo()
})
.then(() => {
// 生成动态路由
return usePermissionStore().generateRoutes()
})
请求拦截器：
- 自动添加Token到请求头
- 防重复提交控制(基于请求URL、数据、时间间隔)
- GET请求参数序列化
响应拦截器：
- 统一处理响应状态码
- 401自动重新登录提示
- 500服务器错误提示
- 601警告提示
- Blob/Arraybuffer类型直接返回
错误码映射： utils/errorCode.js
v-hasPermi指令：按钮级权限控制
<el-button v-hasPermi="['system:user:add']">新增</el-button>
v-hasRole指令：角色级权限控制
<el-button v-hasRole="['admin']">管理员操作</el-button>
3. 布局系统
Layout
├── Sidebar (侧边栏)
│ ├── Logo
│ └── SidebarItem (递归渲染菜单)
├── Navbar (顶部导航)
│ ├── 用户信息
│ ├── 全屏/设置
│ └── 退出登录
├── TagsView (标签页)
│ ├── 标签列表
│ └── 操作按钮(关闭/刷新)
├── AppMain (主内容区)
│ └── <router-view> (keep-alive缓存)
└── Settings (设置面板)
菜单渲染逻辑：
- 基于权限路由动态生成
- 支持多级嵌套
- 图标、标题、徽章显示
- 活动路由高亮
主题配置：
theme-dark：深色主题theme-light：浅色主题
4. 构建系统
Webview构建配置：
{
root: 'src/webview',
outDir: 'out/webview',
base: './', // 使用相对路径
build: {
rollupOptions: {
output: {
format: 'iife',
inlineDynamicImports: true // 单文件打包
}
}
}
}
自定义插件：
- removeModuleType：移除HTML中的
type="module"和crossorigin属性
- SVG图标处理：
vite-plugin-svg-icons
- 组件自动导入：
unplugin-vue-components
- Gzip压缩：
vite-plugin-compression
esbuild配置：
{
entryPoints: ['src/extension/extension.ts'],
bundle: true,
external: ['vscode'], // 不打包vscode模块
format: 'cjs',
platform: 'node',
target: 'ES2022'
}
并行运行：
- Vite开发服务器 (端口8739)
- esbuild监听模式
开发指南
安装依赖
# 使用pnpm安装
pnpm install
开发模式
# 同时监听扩展和webview的改动
pnpm run dev
构建
# 构建webview
pnpm run build:web
# 构建扩展
pnpm run build:ext
# 完整构建
pnpm run build
打包
# 生成.vsix文件
pnpm run package
调试
- 在VSCode中打开项目
- 按
F5 启动扩展开发主机
- 点击活动栏的"财经数据管理"图标自动打开面板
配置说明
# 应用标题
VITE_APP_TITLE=财经数据管理系统
# API基础路径
VITE_APP_BASE_API=/dev-api
# 端口配置
VITE_PORT=8739
VSCode配置 (package.json)
活动栏配置：
{
"contributes": {
"viewsContainers": {
"activitybar": [{
"id": "vue3-extension-container",
"title": "财经数据管理",
"icon": "resources/database.svg"
}]
}
}
}
命令注册：
{
"commands": [{
"command": "openEditorView",
"title": "打开面板"
}]
}
API接口规范
请求格式
// GET请求
service.get('/api/user/list', { params: { pageNum: 1, pageSize: 10 } })
// POST请求
service.post('/api/user/add', { userName: 'admin', password: '123456' })
响应格式
{
"code": 200,
"msg": "操作成功",
"data": {...}
}
错误码
| 错误码 |
说明 |
| 200 |
成功 |
| 401 |
未授权/Token过期 |
| 500 |
服务器错误 |
| 601 |
警告 |
常见问题
Q1: Webview资源无法加载
问题：扩展加载后webview显示空白或资源404
解决方案：
- 确认已执行
pnpm run build:web 构建webview
- 检查
out/webview 目录是否存在
- 查看 extension.ts:89 的路径转换逻辑
Q2: 开发模式热更新不生效
问题：修改代码后webview没有自动刷新
解决方案：
- 确认Vite HMR端口8739未被占用
- 检查 vite.config.ts:82 的HMR配置
- 使用
pnpm run dev 启动开发模式
Q3: 登录后页面显示404
问题：登录成功后跳转到404页面
解决方案：
- 检查动态路由是否正确生成 (permission.js:36)
- 确认后端返回的菜单数据格式正确
- 检查路由的
component 路径是否正确
Q4: 权限控制不生效
问题：没有权限的按钮仍然显示
解决方案：
- 确认用户权限已正确获取 (store/modules/user.js:48)
- 检查权限标识格式是否正确
- 确认指令已正确注册 (directive/index.js)
技术栈
VSCode扩展
- VSCode API：扩展开发API
- TypeScript：类型安全
- esbuild：快速打包
Webview应用
- Vue 3：渐进式框架
- Vite：下一代前端构建工具
- Element Plus：UI组件库
- Pinia：状态管理
- Vue Router：路由管理
- Axios：HTTP客户端
- ECharts 5.5：数据可视化图表库
开发工具
- ESLint：代码检查
- TypeScript：类型检查
- Sass：CSS预处理器
参考资源
许可证
MIT
