From 94a67ee93f6468aca6d30bd50e17b683bf265939 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 18 Apr 2026 06:42:29 +0000 Subject: [PATCH] Upgrade frontend to Vue 3, Vuetify 3, and Vite - Replace Vue CLI/webpack build with Vite 5 (`vite.config.ts`, root-level `index.html`, `vite-plugin-vuetify`, `vite-plugin-pwa`, `vite-plugin-monaco-editor`). - Bump core deps: Vue 2.6 -> 3.5, Vuetify 2.1 -> 3.7, Vue Router 3 -> 4, Vuex 3 -> Pinia 2, plus axios/socket.io-client/marked/highlight.js major upgrades. - Convert `main.ts`, `router`, `store.ts`, and the Vuetify plugin to Vue 3 APIs (`createApp`, `createRouter`/`createWebHistory`, `createVuetify`, Pinia `defineStore`). - Remove class-component ecosystem (`vue-class-component`, `vue-property-decorator`, `vuex-class`, `vue-tsx-support`). All `.vue`, `.vue.ts`, and `.tsx` components now use `defineComponent` and the Composition/Options API. - Replace `vue-progressbar` with an `nprogress`-based plugin and `vue-wechat-title` with a lightweight `v-page-title` directive; drop `materialize-css` (`BlogDigestNav`/`comments` now use plain DOM/Vuetify helpers). - Update templates for Vuetify 3 breaking changes: `v-content` -> `v-main`, list-item slots, `variant="text/outlined"` on buttons, `icon="mdi-..."` syntax, new `v-data-table`, `v-badge` `content`/`model-value`, `v-snackbar` `location`, etc. - Migrate lifecycle hooks (`beforeDestroy`/`destroyed` -> `beforeUnmount`/`unmounted`), `v-model` to `modelValue`/ `update:modelValue`, slot syntax to `#name`/`v-slot`, and remove `.native` modifiers. - Adapt `RoseliaScript` renderer to a local event bus so `postUnload`/`postLoaded`/`aPlayerLoaded` keep working without component `$on`/`$once`, and route theme/notification/goTo calls through Vuetify 3 composables + Pinia. - Refresh TypeScript config for Vite (`moduleResolution: bundler`, `jsxImportSource: vue`) and drop Vue-2 shim typings. https://claude.ai/code/session_01LXfFAboCUo34FtmLJiRado --- frontend/.eslintrc.cjs | 28 + frontend/.eslintrc.js | 20 - frontend/babel.config.js | 7 - frontend/{public => }/index.html | 18 +- frontend/package.json | 97 +- frontend/postcss.config.js | 5 - frontend/src/App.vue | 306 +- frontend/src/common/ajax-bar-axios.js | 8 +- frontend/src/common/fake-lodash.ts | 5 +- .../src/common/rich-editor/editor-loading.vue | 16 +- .../common/rich-editor/editor-switcher.tsx | 242 +- .../src/common/rich-editor/monaco-wrapper.tsx | 134 +- .../roselia-monaco-post-editor.tsx | 221 +- frontend/src/common/roselia-script/index.ts | 82 +- .../src/common/roselia-script/summonDialog.js | 22 +- frontend/src/components/BlogDigestNav.vue | 94 +- frontend/src/components/BlogError.vue | 11 +- frontend/src/components/BlogFooter.vue | 28 +- frontend/src/components/BlogIndex.vue | 418 +- frontend/src/components/BlogLogin.vue | 438 +- frontend/src/components/BlogPost.vue | 866 +- frontend/src/components/BlogTimeline.vue | 311 +- frontend/src/components/BlogToolbar.vue | 436 +- frontend/src/components/BlogUserSpace.vue | 212 +- frontend/src/components/CustomDialog.vue | 35 +- frontend/src/components/CustomDialog.vue.ts | 70 +- .../src/components/EditPluginExplorer.vue | 73 +- frontend/src/components/GotopButton.vue | 75 +- frontend/src/components/HelloWorld.vue | 62 +- frontend/src/components/NotificationHub.tsx | 298 +- frontend/src/components/PostEdit.vue | 856 +- frontend/src/components/RecursiveComments.tsx | 247 +- frontend/src/components/RelativeTime.tsx | 120 +- frontend/src/components/UploadedImages.vue | 85 +- frontend/src/components/chat-box.tsx | 407 +- frontend/src/components/comments.vue | 680 +- frontend/src/components/console/About.vue | 67 +- .../src/components/console/ChangePassword.vue | 100 +- .../src/components/console/ConsoleIndex.vue | 38 +- .../src/components/console/DraftManage.vue | 168 +- frontend/src/components/console/OauthBind.vue | 159 +- .../src/components/console/RemoteLogin.vue | 115 +- .../src/components/console/SetNickname.vue | 245 +- .../src/components/console/SystemMonitor.vue | 347 +- .../src/components/console/TokenRefresh.vue | 91 +- .../src/components/console/TwoStepAuth.vue | 82 +- .../console/UploadedImagesManagement.vue | 65 +- .../src/components/console/UserManagement.vue | 341 +- frontend/src/components/lazyComponent.vue | 19 +- frontend/src/components/toast.vue | 40 +- frontend/src/main.ts | 69 +- frontend/src/plugin/ThemeListener.ts | 53 +- frontend/src/plugins/RoseliaPlugin.ts | 20 +- frontend/src/plugins/page-title.ts | 25 + frontend/src/plugins/progress.ts | 47 + frontend/src/plugins/roselia-addins.d.ts | 18 +- frontend/src/plugins/vuetify.ts | 54 +- frontend/src/router/index.js | 235 - frontend/src/router/index.ts | 84 + frontend/src/store.ts | 101 +- frontend/tsconfig.json | 19 +- frontend/typings/shims-tsx.d.ts | 13 - frontend/typings/shims-vue.d.ts | 9 +- frontend/typings/shims-vuetify.d.ts | 12 - frontend/typings/vue-easymde.d.ts | 6 - frontend/vite.config.ts | 74 + frontend/vue.config.js | 30 - frontend/yarn.lock | 9323 ----------------- 68 files changed, 4297 insertions(+), 14805 deletions(-) create mode 100644 frontend/.eslintrc.cjs delete mode 100644 frontend/.eslintrc.js delete mode 100644 frontend/babel.config.js rename frontend/{public => }/index.html (75%) delete mode 100644 frontend/postcss.config.js create mode 100644 frontend/src/plugins/page-title.ts create mode 100644 frontend/src/plugins/progress.ts delete mode 100644 frontend/src/router/index.js create mode 100644 frontend/src/router/index.ts delete mode 100644 frontend/typings/shims-tsx.d.ts delete mode 100644 frontend/typings/shims-vuetify.d.ts delete mode 100644 frontend/typings/vue-easymde.d.ts create mode 100644 frontend/vite.config.ts delete mode 100644 frontend/vue.config.js delete mode 100644 frontend/yarn.lock diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs new file mode 100644 index 0000000..ce0ac90 --- /dev/null +++ b/frontend/.eslintrc.cjs @@ -0,0 +1,28 @@ +module.exports = { + root: true, + env: { + node: true, + browser: true, + es2022: true + }, + parser: 'vue-eslint-parser', + parserOptions: { + parser: '@typescript-eslint/parser', + ecmaVersion: 2022, + sourceType: 'module', + extraFileExtensions: ['.vue'] + }, + extends: [ + 'plugin:vue/vue3-essential', + 'eslint:recommended', + '@vue/eslint-config-typescript' + ], + rules: { + 'no-console': 'off', + 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', + 'no-unused-vars': 'off', + '@typescript-eslint/no-unused-vars': 'off', + 'no-prototype-builtins': 'off', + 'vue/multi-word-component-names': 'off' + } +} diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js deleted file mode 100644 index dda80a0..0000000 --- a/frontend/.eslintrc.js +++ /dev/null @@ -1,20 +0,0 @@ -module.exports = { - root: true, - env: { - node: true - }, - 'extends': [ - 'plugin:vue/essential', - 'eslint:recommended', - '@vue/typescript' - ], - rules: { - 'no-console': 'off', // process.env.NODE_ENV === 'production' ? 'error' : 'off', - 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', - 'no-unused-vars': 'off', - 'no-prototype-builtins': 'off', - }, - parserOptions: { - parser: '@typescript-eslint/parser' - } -} diff --git a/frontend/babel.config.js b/frontend/babel.config.js deleted file mode 100644 index 388838a..0000000 --- a/frontend/babel.config.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - presets: [ - '@vue/app' - ], - plugins: [ - ] -} diff --git a/frontend/public/index.html b/frontend/index.html similarity index 75% rename from frontend/public/index.html rename to frontend/index.html index d7993fd..5ab3e0a 100644 --- a/frontend/public/index.html +++ b/frontend/index.html @@ -5,7 +5,7 @@ - + Roselia-Blog
- -

Roselia-Blog

+ diff --git a/frontend/package.json b/frontend/package.json index 956ad08..52ebecf 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,68 +1,51 @@ { "name": "roselia-blog", - "version": "3.8.5", + "version": "3.9.0", "private": true, + "type": "module", "scripts": { - "serve": "vue-cli-service serve", - "build": "vue-cli-service build", - "lint": "vue-cli-service lint" + "dev": "vite", + "serve": "vite", + "build": "vue-tsc --noEmit && vite build", + "preview": "vite preview", + "lint": "eslint --ext .js,.ts,.tsx,.vue src" }, "dependencies": { - "@chenfengyuan/vue-qrcode": "^1.0.0", - "axios": "^0.19.0", - "core-js": "^3.1.2", - "easymde": "^2.10.1", - "github-markdown-css": "^3.0.1", - "highlight.js": "^9.13.1", - "marked": "^1.1.0", - "material-design-icons-iconfont": "^5.0.1", - "materialize-css": "^1.0.0", - "monaco-editor": "^0.21.2", - "register-service-worker": "^1.6.2", + "@chenfengyuan/vue-qrcode": "^2.0.0", + "@fortawesome/fontawesome-free": "^6.5.2", + "@mdi/font": "^7.4.47", + "axios": "^1.7.7", + "core-js": "^3.37.1", + "easymde": "^2.18.0", + "github-markdown-css": "^5.6.1", + "highlight.js": "^11.10.0", + "marked": "^13.0.3", + "material-design-icons-iconfont": "^6.7.0", + "monaco-editor": "^0.50.0", + "nprogress": "^0.2.0", + "pinia": "^2.2.2", "roboto-fontface": "*", - "socket.io-client": "^2.3.0", - "vue": "^2.6.10", - "vue-class-component": "^7.0.2", - "vue-easymde": "^1.2.0", - "vue-global-events": "^1.1.2", - "vue-observe-visibility": "^0.4.3", - "vue-progressbar": "^0.7.5", - "vue-property-decorator": "^8.1.0", - "vue-router": "^3.0.6", - "vue-tsx-support": "^2.2.2", - "vue-wechat-title": "^2.0.5", - "vuetify": "^2.1.7", - "vuex": "^3.0.1", - "vuex-class": "^0.3.2" + "socket.io-client": "^4.7.5", + "vue": "^3.5.11", + "vue-router": "^4.4.5", + "vuetify": "^3.7.2" }, "devDependencies": { - "@fortawesome/fontawesome-free": "^5.6.3", - "@types/codemirror": "^0.0.93", - "@types/marked": "^0.7.4", - "@types/simplemde": "^1.11.7", - "@types/socket.io-client": "^1.4.32", - "@typescript-eslint/eslint-plugin": "^2.11.0", - "@typescript-eslint/parser": "^2.11.0", - "@vue/cli-plugin-babel": "^4.0.0", - "@vue/cli-plugin-eslint": "^4.0.0", - "@vue/cli-plugin-pwa": "^4.0.0", - "@vue/cli-plugin-router": "^4.0.0", - "@vue/cli-plugin-typescript": "^4.0.0", - "@vue/cli-plugin-vuex": "^4.0.0", - "@vue/cli-service": "^4.0.0", - "@vue/eslint-config-typescript": "^5.0.1", - "babel-eslint": "^10.0.1", - "eslint": "^6.7.2", - "eslint-plugin-vue": "^6.0.1", - "monaco-editor-webpack-plugin": "^1.9.0", - "sass": "^1.19.0", - "sass-loader": "^8.0.0", - "stylus": "^0.54.5", - "stylus-loader": "^3.0.2", - "typescript": "^3.9.6", - "vue-cli-plugin-vuetify": "^2.0.2", - "vue-template-compiler": "^2.6.10", - "vuetify-loader": "^1.3.0", - "webpack-bundle-analyzer": "^3.6.0" + "@types/marked": "^6.0.0", + "@types/nprogress": "^0.2.3", + "@typescript-eslint/eslint-plugin": "^8.8.0", + "@typescript-eslint/parser": "^8.8.0", + "@vitejs/plugin-vue": "^5.1.4", + "@vitejs/plugin-vue-jsx": "^4.0.1", + "@vue/eslint-config-typescript": "^13.0.0", + "eslint": "^8.57.0", + "eslint-plugin-vue": "^9.28.0", + "sass": "^1.79.4", + "typescript": "~5.5.4", + "vite": "^5.4.8", + "vite-plugin-monaco-editor": "^1.1.0", + "vite-plugin-pwa": "^0.20.5", + "vite-plugin-vuetify": "^2.0.4", + "vue-tsc": "^2.1.6" } } diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js deleted file mode 100644 index 961986e..0000000 --- a/frontend/postcss.config.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - plugins: { - autoprefixer: {} - } -} diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 11d5ec4..68dcc33 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,131 +1,118 @@ - + diff --git a/frontend/src/components/BlogError.vue b/frontend/src/components/BlogError.vue index 5a4354c..777d601 100644 --- a/frontend/src/components/BlogError.vue +++ b/frontend/src/components/BlogError.vue @@ -113,22 +113,23 @@ - diff --git a/frontend/src/components/BlogFooter.vue b/frontend/src/components/BlogFooter.vue index d4c1a7d..d24625b 100644 --- a/frontend/src/components/BlogFooter.vue +++ b/frontend/src/components/BlogFooter.vue @@ -1,36 +1,28 @@ - - diff --git a/frontend/src/components/BlogTimeline.vue b/frontend/src/components/BlogTimeline.vue index 3dec35d..91b8d78 100644 --- a/frontend/src/components/BlogTimeline.vue +++ b/frontend/src/components/BlogTimeline.vue @@ -1,113 +1,93 @@ - + diff --git a/frontend/src/components/BlogToolbar.vue b/frontend/src/components/BlogToolbar.vue index 4625308..412fc10 100644 --- a/frontend/src/components/BlogToolbar.vue +++ b/frontend/src/components/BlogToolbar.vue @@ -1,156 +1,116 @@ - - - diff --git a/frontend/src/components/BlogUserSpace.vue b/frontend/src/components/BlogUserSpace.vue index 3faed1c..11e5341 100644 --- a/frontend/src/components/BlogUserSpace.vue +++ b/frontend/src/components/BlogUserSpace.vue @@ -1,197 +1,147 @@ - diff --git a/frontend/src/components/console/About.vue b/frontend/src/components/console/About.vue index 4f73c1d..2335b86 100644 --- a/frontend/src/components/console/About.vue +++ b/frontend/src/components/console/About.vue @@ -1,37 +1,36 @@