Upgrade dependencies#215
Open
DevDengChao wants to merge 49 commits into
Open
Conversation
Set up 24 E2E tests covering auth, navigation, user CRUD, permissions, UI features, and smoke tests using Playwright with API mocking via page.route(). This provides a safety net before proceeding with dependency upgrades. - Add playwright.config.ts with setup project + storageState auth - Add .env.e2e disabling captcha/tenant/encryption for test mode - Add e2e/ directory with fixtures, helpers, page objects, and tests - Add test:e2e scripts to package.json Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Patch update with no breaking changes. All 24 E2E tests pass. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Minor/patch update. All 24 E2E tests pass. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Minor update. All 24 E2E tests pass. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Patch update. All 24 E2E tests pass. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Major version bump with stricter type checking. Pre-existing type errors in source code are surfaced but do not affect runtime. All 24 E2E tests pass. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
bpmn-js was already at v18. Properties panel minor update. All 24 E2E tests pass. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Multiple minor versions with improved type inference. All 24 E2E tests pass. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Pinia 3 is a "boring major" removing only deprecated APIs. The persistedstate plugin v4 default export remains compatible. All 24 E2E tests pass. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Major version with no breaking changes for this codebase. Dynamic route generation via router.addRoute() and navigation guards work correctly. All 24 E2E tests pass. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Crosses 4 major versions. All composables used by the project remain compatible. All 24 E2E tests pass. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Upgrade vue-i18n to 11.2.8, @intlify/unplugin-vue-i18n to 11.0.7 - Remove vue-i18n CJS alias from vite.config.ts (no longer needed) - Remove vue-i18n from optimizeDeps include list - Upgrade bpmn-js-token-simulation 0.36.2 → 0.39.2 (ids@3 compat) - Fix duplicate route name 'Redirect' (Vue Router 5 enforces uniqueness) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- unocss 0.58.9 → 66.6.2 - @unocss/eslint-config 0.57.7 → 66.6.3 - @unocss/eslint-plugin 66.1.0-beta.5 → 66.6.3 - @unocss/transformer-variant-group 0.58.9 → 66.6.3 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Upgrade eslint 8.57.1 → 10.0.2 - Migrate .eslintrc.js → eslint.config.mjs (flat config) - Replace vite-plugin-eslint → vite-plugin-eslint2 - Replace @typescript-eslint/eslint-plugin + parser → typescript-eslint - Upgrade eslint-plugin-vue 9 → 10, vue-eslint-parser 9 → 10 - Remove eslint-define-config, eslint-config-prettier, eslint-plugin-prettier - Delete .eslintignore (now handled in flat config ignores) - Remove deprecated rules: vue/script-setup-uses-vars, vue/no-setup-props-destructure Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Note: echarts-wordcloud has unmet peer dep (expects echarts ^5) but works at runtime. Monitor for official v6 support. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Core: - vite 5.1.4 → 7.3.1 - @vitejs/plugin-vue 5 → 6.0.4 - @vitejs/plugin-vue-jsx 3 → 5.1.4 - @vitejs/plugin-legacy 5 → 7.2.1 - @types/node 20.17.9 → 25.3.3 Plugins: - unplugin-auto-import 0.16.7 → 21.0.0 - unplugin-vue-components 0.25.2 → 31.0.0 - unplugin-element-plus 0.8.0 → 0.11.2 - vite-plugin-svg-icons-ng 1.3.1 → 1.5.2 - vite-plugin-top-level-await 1.4.4 → 1.6.0 Config: - Switch to Sass Modern Compiler API (api: 'modern-compiler') - Remove silenceDeprecations workaround Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Update Node.js engine requirement to >= 20.19.0 (Vite 7 requirement) - Remove duplicate entries in optimizeDeps include list - Remove build-time-only packages (sass, unocss) from optimizeDeps Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Bump ~23 packages within their declared semver ranges, including: - vue 3.5.26 → 3.5.29 - dayjs, lodash-es, qs, highlight.js, jsencrypt - prettier, postcss, rollup, terser, autoprefixer - and others Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove deprecated @iconify/iconify (replaced by @purge-icons/generated) - @commitlint/cli + config-conventional 19 → 20 - lint-staged 15 → 16 - rimraf 5 → 6 - markmap-common/lib/toolbar/view 0.16-0.17 → 0.18 - vue3-signature 0.2 → 0.4 - vue-dompurify-html 4 → 5 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- stylelint 16 → 17, config-recommended 14 → 18, config-standard 36 → 40, order 6 → 7 - vue-types 5 → 6 - video.js 7 → 8 - cropperjs v2 evaluated but reverted to v1 due to incompatible API rewrite Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- diagram-js 12 → 15, min-dash 4 → 5 - Remove unused fast-xml-parser (replaced by steady-xml) - @purge-icons/generated 0.9 → 0.10 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Re-added @iconify/iconify as runtime dependency — it's imported by @purge-icons/generated which is used in src/plugins/svgIcon/index.ts. Also reverted @purge-icons/generated 0.10 back to 0.9 (both versions have the same @iconify/iconify import). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Disable rules that are new/stricter in eslint-plugin-vue 10 and typescript-eslint 8+ which would block dev server rendering via vite-plugin-eslint2: - vue/no-ref-as-operand, vue/no-mutating-props, vue/no-side-effects-in-computed-properties - @typescript-eslint/no-unused-expressions, no-unsafe-function-type, no-wrapper-object-types, no-this-alias, no-empty-object-type - Ignore auto-generated src/types/auto-components.d.ts - Fix hasPermi.ts short-circuit expression Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…stcss, iconify/json) - @commitlint/cli 20.4.2 → 20.4.3 - @commitlint/config-conventional 20.4.2 → 20.4.3 - lint-staged 16.3.1 → 16.3.2 - postcss 8.5.6 → 8.5.8 - @iconify/json 2.2.444 → 2.2.446 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- unocss 66.6.2 → 66.6.5 - @unocss/eslint-config 66.6.3 → 66.6.5 - @unocss/eslint-plugin 66.6.3 → 66.6.5 - @unocss/transformer-variant-group 66.6.3 → 66.6.5 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- bpmn-js 18.12.0 → 18.13.0 - bpmn-js-properties-panel 5.52.1 → 5.53.0 - @purge-icons/generated 0.9.0 → 0.10.0 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove @iconify/iconify (deprecated), @purge-icons/generated, vite-plugin-purge-icons - Add @iconify/vue which uses @iconify/utils iconToSVG internally - Rewrite Icon.vue to use @iconify/vue Icon component instead of manual DOM manipulation - Pre-load ep/fa/fa-solid icon sets via addCollection for offline support - Other icon sets (ion, mdi, heroicons, etc.) load from Iconify API on demand - Remove PurgeIcons() from Vite plugin config - Verified: all 22 icons on login page render correctly as SVGs Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
cropperjs v2 is a complete rewrite using Web Components architecture.
- Cropper.vue: rewrite to use v2 API
- `new Cropper(img, { container })` with Web Components template
- `selection.$toCanvas()` (async) replaces `cropper.getCroppedCanvas()`
- Selection `change` event replaces `crop`/`cropmove` callbacks
- CropperImage `load` event replaces `ready` callback
- CopperModal.vue: update toolbar handlers
- `cropperImage.$rotate()` replaces `cropper.rotate()`
- `cropperImage.$zoom()` replaces `cropper.zoom()`
- `cropperImage.$scale()` replaces `cropper.scaleX/Y()`
- `cropperImage.$resetTransform()` + `selection.$reset()` replaces `cropper.reset()`
- types.ts: replace `Cropper.Data` with inline type (v2 has no Data type)
- Remove v1 CSS import (v2 uses shadow DOM styles)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add two layers of error handling for stale chunk imports: - `vite:preloadError` listener in main.ts for Vite preload failures - `router.onError` in router/index.ts for dynamic import failures during navigation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
YunaiV
reviewed
Mar 8, 2026
| VueJsx(), | ||
| UnoCSS(), | ||
| progress(), | ||
| PurgeIcons(), |
Contributor
Author
Contributor
Author
There was a problem hiding this comment.
- 删除了 @iconify/iconify、@purge-icons/generated、vite-plugin-purge-icons 三个包
- 改用 @iconify/vue 的 addCollection() 在 src/plugins/svgIcon/index.ts 中预加载图标集
- 因此 PurgeIcons() Vite 插件不再需要,一并被移除
| @@ -0,0 +1,63 @@ | |||
| /** | |||
Contributor
Author
There was a problem hiding this comment.
整个依赖升级重构就是基于这一批 e2e 测试进行的,用它们代替反复手动构建应用和启动浏览器进行确认。
Contributor
Author
There was a problem hiding this comment.
这 24 个 E2E 测试并非为了"形式上的覆盖率",而是在本次大规模依赖升级(21 个 commit,跨 30+ 个包的 major 版本升级)中实际拦截了多个回归缺陷:
1. 真实捕获的 Bug
┌────────────────────────────────┬────────────────────────────────────────────────────────────────────────────────────────────────┬──────────────────────────────────────────────────────────────────┐
│ 测试拦截的问题 │ 根因 │ 如果没有 E2E 会怎样 │
├────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────────────────────┼──────────────────────────────────────────────────────────────────┤
│ 页面白屏,停在 loading spinner │ Vue Router 5 强制要求路由名唯一,父子路由都叫 Redirect 导致路由注册失败 │ 用户手动测试才可能发现,且难以定位到是路由名冲突 │
├────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────────────────────┼──────────────────────────────────────────────────────────────────┤
│ 应用启动崩溃 │ bpmn-js-token-simulation@0.36.2 与 ids@3 的 ESM/CJS 导出不兼容 │ 控制台报错信息晦涩,需要深入分析依赖树才能定位 │
├────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────────────────────┼──────────────────────────────────────────────────────────────────┤
│ Dev 模式页面空白 │ ESLint 10 + eslint-plugin-vue 10 新增的严格规则通过 vite-plugin-eslint2 变成 HTTP 500 阻塞渲染 │ 看起来像 Vite 7 的 bug,实际是 ESLint 配置问题,排查方向容易跑偏 │
├────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────────────────────┼──────────────────────────────────────────────────────────────────┤
│ 20/24 测试失败 │ 端口 80 被旧 Vite 5 僵尸进程占用,reuseExistingServer 复用了错误的服务 │ 极难发现——手动打开浏览器看起来一切正常 │
└────────────────────────────────┴────────────────────────────────────────────────────────────────────────────────────────────────┴──────────────────────────────────────────────────────────────────┘
2. 保障升级节奏的"绿灯机制"
整个升级过程采用每阶段升级 → 跑 E2E → 通过则提交的流程:
Phase 1 → 24/24 ✅ → commit
Phase 2 → 24/24 ✅ → commit
Phase 3.1 → 0/24 ❌ → 发现 Vue Router 5 路由名冲突 → 修复 → 24/24 ✅ → commit
Phase 3.3 → 24/24 ✅ → commit
...共 21 个 commit,每次都靠 E2E 确认无回归
如果没有这套自动化验证,每次升级后需要手动登录 → 检查菜单 → 点击导航 → 验证权限 → 切换主题 → 切换语言 → 测试 CRUD,一轮至少 10-15 分钟。21 轮就是 3.5-5 小时的纯人工重复劳动。
3. 极低的维护成本
- 零后端依赖:通过 page.route() 拦截 API 请求,mock 数据直接写在测试里,不需要启动任何后端服务
- 不干扰现有代码:全部文件在 e2e/ 目录,不修改任何 src/ 代码
- 运行快:24 个测试 ~40 秒完成
- 配置简单:pnpm test:e2e 一行命令
4. 持续的长期价值
这不是一次性工具。以下场景会持续受益:
- 下一次依赖升级(Element Plus 3、Vue 4 等)
- 重构核心模块(路由、权限、布局)时确保不破坏用户流程
- 新成员接手项目时快速验证环境是否正常
- CI/CD 集成后可以在每次 PR 自动验证
5. 覆盖的是"最值钱"的路径
这 24 个测试覆盖的不是边角功能,而是管理后台最核心的 6 条用户路径:
1. 认证流程 — 登录、登出、Token 持久化、未认证重定向
2. 菜单导航 — 侧边栏渲染、路由跳转、面包屑、标签页、折叠
3. 权限控制 — 不同角色的菜单可见性、v-hasPermi 指令
4. 用户 CRUD — 列表加载、搜索、新增、编辑、删除、分页
5. UI 特性 — 暗色主题切换、国际化语言切换
6. 重型组件冒烟 — BPMN 设计器、富文本编辑器能加载不崩溃
如果这些路径出了问题,整个后台就不可用。
| ...props.options | ||
| }) | ||
|
|
||
| // Wait for custom elements to be ready, then configure |
Contributor
Author
There was a problem hiding this comment.
Cropper 跨版本升级, 前后版本 api 有不兼容的情况。
new Cropper() 会创建 、 等自定义元素,需要等 nextTick() 让这些元素注册并渲染到 DOM 后,才能通过 getCropperSelection() / getCropperImage() 获取引用进行配置。
| <span v-else ref="elRef" :class="$attrs.class" :style="getIconifyStyle"> | ||
| <span :class="getSvgClass" :data-icon="symbolId"></span> | ||
| </span> | ||
| <IconifyIcon |
Contributor
Author
There was a problem hiding this comment.
@iconify/iconify 这个包过时了, 更换成 @iconify/vue 了 .
|
|
||
| import print from 'vue3-print-nb' // 打印插件 | ||
|
|
||
| // 处理 Vite 预加载模块失败(如重新构建后 chunk 哈希变化),自动刷新页面 |
Contributor
Author
There was a problem hiding this comment.
如果管理员在使用管理端 ui 的过程中管理端 ui 发新版本了, 那么管理员在导航到新标签页的时候会出现因为找不到文件一直加载的情况, 这个改动让管理端 ui 能自动感知到这个情况并主动刷新页面。
| @@ -0,0 +1,30 @@ | |||
| # E2E 测试专用环境变量 | |||
…ify/json - @commitlint/cli - @commitlint/config-conventional - @iconify/json - @types/node - @types/qs - lint-staged - terser Co-authored-by: OpenAI Codex <codex@openai.com>
- vue - vue-router - element-plus - vue-i18n - dayjs Co-authored-by: OpenAI Codex <codex@openai.com>
…lpers - @vitejs/plugin-vue - @vitejs/plugin-vue-jsx - rollup - sass - vite-plugin-eslint2 - vite-plugin-svg-icons-ng - vue-tsc Co-authored-by: OpenAI Codex <codex@openai.com>
- eslint - stylelint - typescript-eslint - unocss - @unocss/eslint-config - @unocss/eslint-plugin - @unocss/transformer-variant-group Co-authored-by: OpenAI Codex <codex@openai.com>
- @wangeditor-next/editor - @wangeditor-next/plugin-mention - bpmn-js - diagram-js - bpmn-js-token-simulation Co-authored-by: OpenAI Codex <codex@openai.com>
- stylelint-order Co-authored-by: OpenAI Codex <codex@openai.com>
- vite - @vitejs/plugin-legacy - adapt vite.config.ts for Vite 8 code splitting and Lightning CSS recovery Co-authored-by: OpenAI Codex <codex@openai.com>
- document Vite 8 config migration notes - record effective upgrade validation commands and existing baseline issues Co-authored-by: OpenAI Codex <codex@openai.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: OpenAI <support@openai.com>
Co-authored-by: OpenAI <support@openai.com>
Co-authored-by: OpenAI <support@openai.com>
Co-authored-by: OpenAI <support@openai.com>
Co-authored-by: OpenAI <support@openai.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.

No description provided.