feature: Refactor the console using the Vue tech stack.#8088
Open
liuqiufeng wants to merge 4 commits into
Open
feature: Refactor the console using the Vue tech stack.#8088liuqiufeng wants to merge 4 commits into
liuqiufeng wants to merge 4 commits into
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors the Seata Console front-end from the legacy React/Webpack stack to a Vue 3 + Vite stack, modernizing routing/state management (Vue Router + Pinia), UI components (Element Plus), and i18n (vue-i18n), while removing legacy Redux/services/test harness code.
Changes:
- Replace the old React/Redux console implementation with a new Vue 3 application structure (layouts, views, router, store, i18n).
- Migrate frontend tooling to Vite + TypeScript project references, new ESLint/Prettier config, and updated build/copy scripts.
- Rebuild API access layer around Axios + Element Plus messaging and add new composables/components for common UI patterns.
Reviewed changes
Copilot reviewed 111 out of 143 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| console/src/main/resources/static/console-fe/vite.config.ts | Introduces Vite config + version.json generation plugin + global SCSS injection. |
| console/src/main/resources/static/console-fe/tsconfig.node.json | Adds TS config for Vite/node tooling. |
| console/src/main/resources/static/console-fe/tsconfig.json | Switches to TS project references. |
| console/src/main/resources/static/console-fe/tsconfig.app.json | Adds TS config for Vue app code. |
| console/src/main/resources/static/console-fe/test/uploadfiles/uploadfiles.md | Removes legacy UI test scaffolding file. |
| console/src/main/resources/static/console-fe/test/run.sh | Removes legacy UI test runner script. |
| console/src/main/resources/static/console-fe/test/run.bat | Removes legacy Windows UI test runner script. |
| console/src/main/resources/static/console-fe/test/README.md | Removes legacy UI test README. |
| console/src/main/resources/static/console-fe/test/package.json | Removes legacy UI test package manifest. |
| console/src/main/resources/static/console-fe/test/install.sh | Removes legacy UI test install script. |
| console/src/main/resources/static/console-fe/test/config.json | Removes legacy UI test config. |
| console/src/main/resources/static/console-fe/test/commons/commons.md | Removes legacy UI test placeholder. |
| console/src/main/resources/static/console-fe/test/.gitignore | Removes legacy UI test gitignore. |
| console/src/main/resources/static/console-fe/test/.editorconfig | Removes legacy UI test editorconfig. |
| console/src/main/resources/static/console-fe/src/views/SagaStateMachineDesignerView.vue | Replaces prior content with a Vue view embedding the Saga designer via iframe component. |
| console/src/main/resources/static/console-fe/src/views/NotFoundView.vue | Adds a Vue 404 page using Element Plus and i18n. |
| console/src/main/resources/static/console-fe/src/views/LoginView.vue | Adds new Vue login page using Element Plus form controls and Pinia auth storage. |
| console/src/main/resources/static/console-fe/src/utils/requestV2.ts | Updates API v2 request wrapper formatting and exports. |
| console/src/main/resources/static/console-fe/src/utils/request.ts | Replaces legacy request wrapper with Axios + Element Plus messages + vue-i18n integration. |
| console/src/main/resources/static/console-fe/src/utils/common.ts | Removes legacy utility helpers (throttle/link/query parsing). |
| console/src/main/resources/static/console-fe/src/styles/variables.scss | Adds shared SCSS variables for theming/layout. |
| console/src/main/resources/static/console-fe/src/styles/reset.scss | Replaces previous content with a real CSS reset. |
| console/src/main/resources/static/console-fe/src/styles/mixins.scss | Adds shared SCSS mixins. |
| console/src/main/resources/static/console-fe/src/styles/global.scss | Adds global styling and shared utility classes. |
| console/src/main/resources/static/console-fe/src/stores/app.ts | Adds Pinia store for locale/username/token management. |
| console/src/main/resources/static/console-fe/src/service/transactionInfo.ts | Removes legacy React service layer module. |
| console/src/main/resources/static/console-fe/src/service/overview.ts | Removes legacy overview service module. |
| console/src/main/resources/static/console-fe/src/service/login.ts | Removes legacy login service module. |
| console/src/main/resources/static/console-fe/src/service/globalLockInfo.ts | Removes legacy global lock service module. |
| console/src/main/resources/static/console-fe/src/service/clusterManager.ts | Removes legacy cluster manager service module. |
| console/src/main/resources/static/console-fe/src/service/base.ts | Removes legacy base service module. |
| console/src/main/resources/static/console-fe/src/router/routes.ts | Adds Vue Router route definitions + menu extraction utilities. |
| console/src/main/resources/static/console-fe/src/router/index.ts | Adds Vue Router instance (replacing prior exports). |
| console/src/main/resources/static/console-fe/src/router.tsx | Removes legacy React router config. |
| console/src/main/resources/static/console-fe/src/reducers/login.ts | Removes legacy Redux login reducer/thunk. |
| console/src/main/resources/static/console-fe/src/reducers/locale.ts | Removes legacy Redux locale management. |
| console/src/main/resources/static/console-fe/src/reducers/index.ts | Removes legacy reducer composition. |
| console/src/main/resources/static/console-fe/src/reducers/base.ts | Removes legacy base reducer/thunk. |
| console/src/main/resources/static/console-fe/src/pages/TransactionInfo/index.ts | Removes legacy React page module export. |
| console/src/main/resources/static/console-fe/src/pages/TransactionInfo/index.scss | Removes legacy React page styling stub. |
| console/src/main/resources/static/console-fe/src/pages/Overview/Overview.tsx | Removes legacy React overview page. |
| console/src/main/resources/static/console-fe/src/pages/Overview/index.ts | Removes legacy React overview index export. |
| console/src/main/resources/static/console-fe/src/pages/Overview/index.scss | Removes legacy React overview styling stub. |
| console/src/main/resources/static/console-fe/src/pages/Login/Login.tsx | Removes legacy React login page. |
| console/src/main/resources/static/console-fe/src/pages/Login/index.scss | Removes legacy React login styles. |
| console/src/main/resources/static/console-fe/src/pages/GlobalLockInfo/index.ts | Removes legacy React page module export. |
| console/src/main/resources/static/console-fe/src/pages/GlobalLockInfo/index.scss | Removes legacy React page styling stub. |
| console/src/main/resources/static/console-fe/src/pages/ClusterManager/index.ts | Removes legacy React page module export. |
| console/src/main/resources/static/console-fe/src/pages/ClusterManager/index.scss | Removes legacy React page styling stub. |
| console/src/main/resources/static/console-fe/src/main.ts | Replaces React entry logic with Vue app bootstrap (Pinia/Router/i18n). |
| console/src/main/resources/static/console-fe/src/locales/zh-cn.ts | Removes legacy locale file (replaced by vue-i18n messages). |
| console/src/main/resources/static/console-fe/src/locales/index.ts | Removes legacy locale aggregator. |
| console/src/main/resources/static/console-fe/src/locales/index.d.ts | Removes legacy locale typings. |
| console/src/main/resources/static/console-fe/src/locales/en-us.ts | Removes legacy locale file (replaced by vue-i18n messages). |
| console/src/main/resources/static/console-fe/src/layouts/PublicLayout.vue | Replaces legacy layout code with a Vue public layout (header/footer/router-view). |
| console/src/main/resources/static/console-fe/src/layouts/DefaultLayout.vue | Adds Vue default authenticated layout with sidebar + transitions. |
| console/src/main/resources/static/console-fe/src/layout/index.scss | Removes legacy layout SCSS for old UI. |
| console/src/main/resources/static/console-fe/src/index.tsx | Removes legacy React entrypoint. |
| console/src/main/resources/static/console-fe/src/i18n/locales/zh-CN.ts | Adds new zh-CN vue-i18n messages. |
| console/src/main/resources/static/console-fe/src/i18n/locales/en-US.ts | Adds new en-US vue-i18n messages. |
| console/src/main/resources/static/console-fe/src/i18n/index.ts | Adds vue-i18n initialization and locale selection. |
| console/src/main/resources/static/console-fe/src/env.d.ts | Replaces unrelated exports with Vite/Vue module typing. |
| console/src/main/resources/static/console-fe/src/contants/index.ts | Removes legacy constants used by Redux app. |
| console/src/main/resources/static/console-fe/src/config.ts | Removes legacy frontend config object. |
| console/src/main/resources/static/console-fe/src/composables/useNamespace.ts | Adds composable for namespace/cluster/vgroup option loading + cascading state. |
| console/src/main/resources/static/console-fe/src/components/TableActionColumn.vue | Adds reusable action-column component with dropdown folding and dynamic width. |
| console/src/main/resources/static/console-fe/src/components/Page/PageHeader.tsx | Removes legacy React page header component. |
| console/src/main/resources/static/console-fe/src/components/IframePage.vue | Converts iframe wrapper to Vue component. |
| console/src/main/resources/static/console-fe/src/components/Iframe/index.ts | Removes legacy React iframe barrel export. |
| console/src/main/resources/static/console-fe/src/components/Iframe/index.scss | Removes legacy iframe styles. |
| console/src/main/resources/static/console-fe/src/components/Iframe/Iframe.tsx | Removes legacy React iframe component. |
| console/src/main/resources/static/console-fe/src/components/Header/index.ts | Removes legacy React header barrel export. |
| console/src/main/resources/static/console-fe/src/components/Header/Header.tsx | Removes legacy React header component. |
| console/src/main/resources/static/console-fe/src/components/branch/BranchSessionDialog.vue | Adds Vue dialog for branch sessions with actions wired to APIs. |
| console/src/main/resources/static/console-fe/src/components/AppSidebarMenu.vue | Adds Vue sidebar menu powered by Element Plus and router. |
| console/src/main/resources/static/console-fe/src/components/AppHeader.vue | Adds Vue header with language switcher + user/logout dropdown. |
| console/src/main/resources/static/console-fe/src/components/AppFooter.vue | Converts footer to Vue and loads version.json at runtime. |
| console/src/main/resources/static/console-fe/src/components.d.ts | Adds generated global component typings for auto-registered components. |
| console/src/main/resources/static/console-fe/src/auto-imports.d.ts | Adds generated typings for auto-imported APIs (Vue/Pinia/router/i18n/Element Plus). |
| console/src/main/resources/static/console-fe/src/assets/typescript.svg | Adds asset file for new frontend. |
| console/src/main/resources/static/console-fe/src/assets/seata.jpeg | Adds asset image for new frontend. |
| console/src/main/resources/static/console-fe/src/assets/seata_logo_small.jpeg | Adds asset image for new frontend. |
| console/src/main/resources/static/console-fe/src/assets/black_dot.png | Adds background asset used by login page. |
| console/src/main/resources/static/console-fe/src/App.vue | Adds Vue root component with Element Plus locale wiring. |
| console/src/main/resources/static/console-fe/src/app.tsx | Removes legacy React App container/router shell. |
| console/src/main/resources/static/console-fe/src/api/groupManager.ts | Replaces legacy content with API functions for group operations. |
| console/src/main/resources/static/console-fe/src/api/globalSession.ts | Adds typed API layer for global session queries and operations. |
| console/src/main/resources/static/console-fe/src/api/globalLock.ts | Adds typed API layer for global lock queries and operations. |
| console/src/main/resources/static/console-fe/src/api/clusterManager.ts | Replaces legacy content with API functions for cluster operations + namespace fetch. |
| console/src/main/resources/static/console-fe/src/api/branchSession.ts | Adds typed API layer for branch session operations. |
| console/src/main/resources/static/console-fe/src/api/auth.ts | Replaces legacy content with login API function + types. |
| console/src/main/resources/static/console-fe/public/index.html | Removes legacy public index.html (Vite now uses root index.html). |
| console/src/main/resources/static/console-fe/public/css/icon.css | Removes legacy icon font CSS. |
| console/src/main/resources/static/console-fe/package.json | Replaces legacy deps/tooling with Vue/Vite/Element Plus/Pinia and updated scripts. |
| console/src/main/resources/static/console-fe/index.html | Adds Vite HTML entrypoint. |
| console/src/main/resources/static/console-fe/eslint.config.mjs | Adds ESLint flat config for Vue + TS + Prettier integration. |
| console/src/main/resources/static/console-fe/build/webpack.prod.conf.js | Removes legacy Webpack production config. |
| console/src/main/resources/static/console-fe/build/webpack.dev.conf.js | Removes legacy Webpack dev config. |
| console/src/main/resources/static/console-fe/build/webpack.base.conf.js | Removes legacy Webpack base config. |
| console/src/main/resources/static/console-fe/build/copyFile.js | Removes legacy post-build copy script. |
| console/src/main/resources/static/console-fe/build/copyDesigner.cjs | Adds script to build/copy Saga designer into public assets. |
| console/src/main/resources/static/console-fe/build/copy-dist.cjs | Adds script to copy Vite dist output into console static resources tree. |
| console/src/main/resources/static/console-fe/.prettierrc.json | Adds Prettier config aligned with new code style. |
| console/src/main/resources/static/console-fe/.prettierignore | Updates ignore patterns for dist/generated typings. |
| console/src/main/resources/static/console-fe/.eslintrc | Removes legacy ESLint config for React stack. |
| console/src/main/resources/static/console-fe/.eslintignore | Removes legacy ESLint ignore file. |
| console/src/main/resources/static/console-fe/.babelrc | Removes legacy Babel config. |
| console/pom.xml | Updates frontend-maven-plugin Node version used for building console-fe. |
| .gitignore | Ignores generated static asset directory in console resources. |
Comments suppressed due to low confidence (2)
console/src/main/resources/static/console-fe/src/components/IframePage.vue:25
- This iframe is embedded without any
sandboxrestrictions. The previous implementation used a sandbox to limit iframe capabilities; consider reintroducing a sandbox (and only enabling the minimal required allowances) to reduce the impact of XSS or compromised embedded content.
console/src/main/resources/static/console-fe/src/components/AppFooter.vue:37 fetch('/version.json')is an absolute-path request, which will break if the console is deployed under a non-root context path or behind a reverse proxy with a path prefix. Use a relative URL (e.g.version.json) or prefix withimport.meta.env.BASE_URLso it works regardless of the base path.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+25
to
+27
| import i18n from '@/i18n' | ||
| import router from '@/router' | ||
| import { useAppStore } from '@/stores/app' |
Comment on lines
+93
to
+101
| (error: AxiosError<ResponseBody>) => { | ||
| if (error.response) { | ||
| const { status } = error.response; | ||
| const { status } = error.response | ||
|
|
||
| if (status === 403 || status === 401) { | ||
| (window as any).globalHistory.replace('/login'); | ||
| return; | ||
| window.location.replace('/login') | ||
| return Promise.reject(error) | ||
| } | ||
| Message.error(`HTTP ERROR: ${status}`); | ||
| ElMessage.error(`HTTP ERROR: ${status}`) |
Comment on lines
+46
to
+52
| <el-form | ||
| ref="formRef" | ||
| :model="form" | ||
| :rules="rules" | ||
| :label-col="{ span: 8 }" | ||
| :wrapper-col="{ span: 16 }" | ||
| class="login-form" |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## 2.x #8088 +/- ##
============================================
+ Coverage 72.04% 72.13% +0.08%
Complexity 916 916
============================================
Files 1320 1320
Lines 50710 50710
Branches 6066 6066
============================================
+ Hits 36535 36579 +44
+ Misses 11158 11116 -42
+ Partials 3017 3015 -2 see 16 files with indirect coverage changes 🚀 New features to boost your workflow:
|
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 111 out of 143 changed files in this pull request and generated 2 comments.
Comments suppressed due to low confidence (2)
console/src/main/resources/static/console-fe/src/components/IframePage.vue:25
- The iframe is rendered without a
sandboxattribute. This removes the isolation that helps mitigate script execution / navigation risks inside embedded content. Consider restoring a restrictive sandbox (and only allow the minimal capabilities needed by the designer page) and optionally addreferrerpolicyif appropriate.
console/src/main/resources/static/console-fe/src/router/index.ts:23 - The router is configured with
createWebHistory, but there is no server-side SPA fallback (noforward:/index.html/WebMvcConfigurer routing) in this module. Direct navigation/refresh on nested routes like/transaction/listwill likely return a 404 from Spring Boot static handling. Either switch tocreateWebHashHistory(as the previous implementation effectively did) or add backend rewrites to always serveindex.htmlfor non-API routes.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+23
to
+27
| import { ElMessage } from 'element-plus' | ||
| import 'element-plus/theme-chalk/el-message.css'; | ||
| import i18n from '@/i18n' | ||
| import router from '@/router' | ||
| import { useAppStore } from '@/stores/app' |
Comment on lines
+30
to
+35
| <el-table-column :label="t('branch.table.status')" min-width="140"> | ||
| <template #default="{ row }"> | ||
| <el-button :type="getStatusButtonType(row.status)" size="small" plain> | ||
| {{ GlobalStatusMap[row.status] ?? row.status }} | ||
| </el-button> | ||
| </template> |
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.
Ⅰ. Describe what this PR did
Ⅱ. Does this pull request fix one issue?
Ⅲ. Why don't you add test cases (unit test/integration test)?
Ⅳ. Describe how to verify it
Ⅴ. Special notes for reviews