ITADN

Upgrade to Vue 3 and enhance motrix-webextension features

#1802Pull Requestcrazyrob425 创建于 2026-03-19
C
crazyrob425commented
<!-- You can erase any parts of this template not applicable to your Pull Request. --> This pull request introduces a major upgrade of the project from Vue 2 and Element UI to Vue 3 and Element Plus, along with related ecosystem and codebase changes. The migration includes updating dependencies, refactoring component usage for compatibility, and replacing deprecated APIs and patterns. In addition, it introduces a new agent configuration file and improves code maintainability and modernizes the codebase. **Framework and Dependency Upgrades:** * Migrated from `vue` 2.x to `vue` 3.x, replaced `element-ui` with `element-plus`, updated `vue-router` and `vuex` to their Vue 3-compatible versions, and replaced `@panter/vue-i18next` with `i18next-vue` in `package.json`. Also added `@vue/compiler-sfc` and `@element-plus/icons-vue` dependencies. (`[[1]](diffhunk://#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L54-R54)`, `[[2]](diffhunk://#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L77-R78)`, `[[3]](diffhunk://#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L98-R104)`) * Updated Webpack config to use `vue/dist/vue.esm-bundler.js` for Vue 3 compatibility. (`[.electron-vue/webpack.renderer.config.jsL173-R173](diffhunk://#diff-e3c024c18b5bbe023f4c602182643999506354213ac3170d0039f42ecc127442L173-R173)`) **Component Refactoring for Vue 3/Element Plus:** * Refactored all usage of Element UI slot syntax to the Vue 3/Element Plus `#` syntax in components such as `AboutPanel.vue`, `Preference/Advanced.vue`, `Preference/Basic.vue`, and `Preference/HistoryDirectory.vue`. Also updated icon usage to remove reliance on Element UI icon classes. (`[[1]](diffhunk://#diff-e584f98b3b9bf7771e26ecca6547386f61c235bb0a3fcef0ff00cc31be8f7317L5-R12)`, `[[2]](diffhunk://#diff-a272ff4e256bc63003f2442e5561a05d1383993e8a452360a8a83667a56b1972L232-R232)`, `[[3]](diffhunk://#diff-676da74c2d6103a63cbd8bda891c2734bd0e062dcf8d2812c323b5f948e14820R114-R123)`, `[[4]](diffhunk://#diff-ae65444cc636b1735062da0e1b997682bcf7ebab78d872801c47ecc8fe4748c2L19-R25)`, `[[5]](diffhunk://#diff-ae65444cc636b1735062da0e1b997682bcf7ebab78d872801c47ecc8fe4748c2L40-R54)`) * Replaced deprecated Vue 2 lifecycle hooks (`destroyed`) with Vue 3 equivalents (`unmounted`) in several components. (`[[1]](diffhunk://#diff-568d190626e6975717971374428c88d6478a27c671563009aa404759a37fe2f2L43-R43)`, `[[2]](diffhunk://#diff-d4335a84f7e4cc1874b1f4315cb7b16c06cdef052533416a0e4d0818bb4790d8L253-R254)`, `[[3]](diffhunk://#diff-a70ee5d664f5786d5b6982c3f6854202be168fb905d29ca6f863b305d2218ce1R6-R24)`) **Code Modernization and API Changes:** * Updated all usage of Element UI components and APIs to their Element Plus equivalents, such as replacing `Loading` with `ElLoading` and `Message` with `ElMessage`. Updated the message proxy plugin for Vue 3's global properties API. (`[[1]](diffhunk://#diff-1bc19a9224e7f64bc0a3b2679bb4b4a0603f587a94c2c1a5ec2b2ef9584fe1e3R13-R15)`, `[[2]](diffhunk://#diff-1bc19a9224e7f64bc0a3b2679bb4b4a0603f587a94c2c1a5ec2b2ef9584fe1e3L44-R45)`, `[[3]](diffhunk://#diff-b6cfd2628d9eb217a8c7501f398dd085a0b73502d2f99f7bb57d5a50c7710d74R1-R12)`, `[[4]](diffhunk://#diff-b6cfd2628d9eb217a8c7501f398dd085a0b73502d2f99f7bb57d5a50c7710d74R45-R51)`) * Replaced usage of `this.$electron.ipcRenderer` with direct imports of `ipcRenderer` from `electron` for better clarity and compatibility. (`[[1]](diffhunk://#diff-1bc19a9224e7f64bc0a3b2679bb4b4a0603f587a94c2c1a5ec2b2ef9584fe1e3L59-R60)`, `[[2]](diffhunk://#diff-d4335a84f7e4cc1874b1f4315cb7b16c06cdef052533416a0e4d0818bb4790d8R7)`, `[[3]](diffhunk://#diff-d4335a84f7e4cc1874b1f4315cb7b16c06cdef052533416a0e4d0818bb4790d8L45-R57)`, `[[4]](diffhunk://#diff-d4335a84f7e4cc1874b1f4315cb7b16c06cdef052533416a0e4d0818bb4790d8L156-R157)`, `[[5]](diffhunk://#diff-a70ee5d664f5786d5b6982c3f6854202be168fb905d29ca6f863b305d2218ce1R6-R24)`) * Removed deprecated or unnecessary logic in components, such as outdated icon child logic in `Icons/Icon.vue`. (`[src/renderer/components/Icons/Icon.vueL142-L164](diffhunk://#diff-fd5140bbff3503f1a2673fbdacc717e824cad2dbb1657f5145c19e83588fc2bdL142-L164)`) **New Features and Configurations:** * Added a new agent configuration file `.github/agents/my-agent.agent.md` describing the "Pisces Swarm Commander" with detailed runtime configuration, operational protocol, and learning loop for task automation and self-healing. (`[.github/agents/my-agent.agent.mdR1-R59](diffhunk://#diff-c257fad646f0f7cf190f5323c0039f51aaaf654dbf4d63ce3f92d41c93ac2e39R1-R59)`) These changes collectively modernize the codebase, improve maintainability, and set the foundation for leveraging Vue 3 and Element Plus features. ## Description <!-- This pull request introduces a major upgrade of the project from Vue 2 and Element UI to Vue 3 and Element Plus, along with related dependency updates and code refactoring for compatibility. It also includes significant improvements to component structure, slot usage, and inter-process communication. Additionally, a new agent configuration file is introduced. Below are the most important changes: **Framework and Dependency Upgrades:** * Migrated from `vue` 2.x and `element-ui` to `vue` 3.x and `element-plus`, updating associated dependencies such as `vue-loader`, `vue-router`, and `vuex` for Vue 3 compatibility. Added `@element-plus/icons-vue` and replaced `@panter/vue-i18next` with `i18next-vue`. [[1]](diffhunk://#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L54-R54) [[2]](diffhunk://#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L77-R78) [[3]](diffhunk://#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L98-R104) * Updated Webpack alias to use `vue/dist/vue.esm-bundler.js` for Vue 3 support. **Component Refactoring for Vue 3 and Element Plus:** * Replaced deprecated slot syntax with the new `<template #name>` syntax throughout multiple components (e.g., `AboutPanel.vue`, `Preference/Advanced.vue`, `Preference/Basic.vue`). [[1]](diffhunk://#diff-e584f98b3b9bf7771e26ecca6547386f61c235bb0a3fcef0ff00cc31be8f7317L5-R12) [[2]](diffhunk://#diff-a272ff4e256bc63003f2442e5561a05d1383993e8a452360a8a83667a56b1972L232-R232) [[3]](diffhunk://#diff-a272ff4e256bc63003f2442e5561a05d1383993e8a452360a8a83667a56b1972L253-R251) [[4]](diffhunk://#diff-a272ff4e256bc63003f2442e5561a05d1383993e8a452360a8a83667a56b1972L298-R294) [[5]](diffhunk://#diff-a272ff4e256bc63003f2442e5561a05d1383993e8a452360a8a83667a56b1972L318-R312) [[6]](diffhunk://#diff-a272ff4e256bc63003f2442e5561a05d1383993e8a452360a8a83667a56b1972L375-R387) [[7]](diffhunk://#diff-676da74c2d6103a63cbd8bda891c2734bd0e062dcf8d2812c323b5f948e14820R114-R123) * Updated lifecycle hooks from `destroyed` to `unmounted` in several components for Vue 3 compliance. [[1]](diffhunk://#diff-568d190626e6975717971374428c88d6478a27c671563009aa404759a37fe2f2L43-R43) [[2]](diffhunk://#diff-d4335a84f7e4cc1874b1f4315cb7b16c06cdef052533416a0e4d0818bb4790d8L253-R254) [[3]](diffhunk://#diff-a70ee5d664f5786d5b6982c3f6854202be168fb905d29ca6f863b305d2218ce1R6-R24) * Refactored usage of Element UI components and methods to their Element Plus equivalents, such as replacing `Loading` with `ElLoading` and `Message` with `ElMessage`. [[1]](diffhunk://#diff-1bc19a9224e7f64bc0a3b2679bb4b4a0603f587a94c2c1a5ec2b2ef9584fe1e3R13-R15) [[2]](diffhunk://#diff-1bc19a9224e7f64bc0a3b2679bb4b4a0603f587a94c2c1a5ec2b2ef9584fe1e3L44-R45) [[3]](diffhunk://#diff-b6cfd2628d9eb217a8c7501f398dd085a0b73502d2f99f7bb57d5a50c7710d74R1-R12) [[4]](diffhunk://#diff-b6cfd2628d9eb217a8c7501f398dd085a0b73502d2f99f7bb57d5a50c7710d74R45-R51) **Inter-Process Communication and API Updates:** * Replaced usage of `this.$electron.ipcRenderer` with direct imports of `ipcRenderer` from `electron` for improved clarity and compatibility. This affects components handling events and communication with the main process. [[1]](diffhunk://#diff-1bc19a9224e7f64bc0a3b2679bb4b4a0603f587a94c2c1a5ec2b2ef9584fe1e3L59-R60) [[2]](diffhunk://#diff-d4335a84f7e4cc1874b1f4315cb7b16c06cdef052533416a0e4d0818bb4790d8R7) [[3]](diffhunk://#diff-d4335a84f7e4cc1874b1f4315cb7b16c06cdef052533416a0e4d0818bb4790d8L45-R57) [[4]](diffhunk://#diff-d4335a84f7e4cc1874b1f4315cb7b16c06cdef052533416a0e4d0818bb4790d8L156-R157) [[5]](diffhunk://#diff-a70ee5d664f5786d5b6982c3f6854202be168fb905d29ca6f863b305d2218ce1R6-R24) **UI/UX and Icon Updates:** * Updated icon usage in `Preference/HistoryDirectory.vue` to use Unicode characters instead of Element UI icon classes, reflecting the move away from Element UI. Also updated popover reference usage to the new slot syntax. [[1]](diffhunk://#diff-ae65444cc636b1735062da0e1b997682bcf7ebab78d872801c47ecc8fe4748c2L19-R25) [[2]](diffhunk://#diff-ae65444cc636b1735062da0e1b997682bcf7ebab78d872801c47ecc8fe4748c2L40-R54) **New Agent Configuration:** * Added `.github/agents/my-agent.agent.md`, defining the "Pisces Swarm Commander" agent with detailed runtime configuration, operational mandate, protocol, and learning loop. These changes collectively modernize the codebase, improve maintainability, and set the foundation for further enhancements using Vue 3 and Element Plus. --> ## Related Issues <!-- Link to the issue that is fixed by this PR (if there is one) e.g. Fixes #1234, Addresses #1234, Related to #1234, etc. This pull request introduces a major upgrade of the project from Vue 2 and Element UI to Vue 3 and Element Plus, along with related dependency and codebase updates to support the new versions. It also includes refactoring of Vue component patterns to align with Vue 3 best practices, migration of UI library usage, and improvements to agent configuration documentation. **Framework and Dependency Upgrades:** - Migrated from Vue 2 to Vue 3, updating related dependencies such as `vue`, `vue-router`, `vuex`, and `vue-loader`, and removed deprecated packages like `vue-template-compiler` and `vue-electron`. - Replaced `element-ui` with `element-plus` and added `@element-plus/icons-vue`, updating all relevant imports and usage in the codebase. - Switched from `@panter/vue-i18next` to `i18next-vue` for internationalization support. - Updated Webpack alias to use the Vue 3 ESM bundler build. **Codebase Refactoring for Vue 3:** - Updated lifecycle hooks from `destroyed` to `unmounted` across components and replaced deprecated slot syntax with the new `v-slot` / `#` syntax for better compatibility with Vue 3. [[1]](diffhunk://#diff-568d190626e6975717971374428c88d6478a27c671563009aa404759a37fe2f2L43-R43) [[2]](diffhunk://#diff-d4335a84f7e4cc1874b1f4315cb7b16c06cdef052533416a0e4d0818bb4790d8L253-R254) [[3]](diffhunk://#diff-a70ee5d664f5786d5b6982c3f6854202be168fb905d29ca6f863b305d2218ce1R6-R24) [[4]](diffhunk://#diff-a272ff4e256bc63003f2442e5561a05d1383993e8a452360a8a83667a56b1972L232-R232) [[5]](diffhunk://#diff-a272ff4e256bc63003f2442e5561a05d1383993e8a452360a8a83667a56b1972L253-R251) [[6]](diffhunk://#diff-a272ff4e256bc63003f2442e5561a05d1383993e8a452360a8a83667a56b1972L298-R294) [[7]](diffhunk://#diff-a272ff4e256bc63003f2442e5561a05d1383993e8a452360a8a83667a56b1972L318-R312) [[8]](diffhunk://#diff-a272ff4e256bc63003f2442e5561a05d1383993e8a452360a8a83667a56b1972L375-R387) [[9]](diffhunk://#diff-676da74c2d6103a63cbd8bda891c2734bd0e062dcf8d2812c323b5f948e14820R114-R123) [[10]](diffhunk://#diff-e584f98b3b9bf7771e26ecca6547386f61c235bb0a3fcef0ff00cc31be8f7317L5-R12) [[11]](diffhunk://#diff-e584f98b3b9bf7771e26ecca6547386f61c235bb0a3fcef0ff00cc31be8f7317R41-R48) - Refactored component event and state handling to use Vue 3 patterns, such as computed property setters and `v-model` updates. [[1]](diffhunk://#diff-e584f98b3b9bf7771e26ecca6547386f61c235bb0a3fcef0ff00cc31be8f7317R41-R48) [[2]](diffhunk://#diff-e584f98b3b9bf7771e26ecca6547386f61c235bb0a3fcef0ff00cc31be8f7317L5-R12) **Element Plus Migration:** - Replaced all usages of Element UI components and services (e.g., `Loading`, `Message`) with their Element Plus equivalents (`ElLoading`, `ElMessage`), including updates to import statements and usage patterns. [[1]](diffhunk://#diff-1bc19a9224e7f64bc0a3b2679bb4b4a0603f587a94c2c1a5ec2b2ef9584fe1e3R13-R15) [[2]](diffhunk://#diff-1bc19a9224e7f64bc0a3b2679bb4b4a0603f587a94c2c1a5ec2b2ef9584fe1e3L44-R45) [[3]](diffhunk://#diff-b6cfd2628d9eb217a8c7501f398dd085a0b73502d2f99f7bb57d5a50c7710d74R1-R12) [[4]](diffhunk://#diff-b6cfd2628d9eb217a8c7501f398dd085a0b73502d2f99f7bb57d5a50c7710d74R45-R51) **Electron IPC Refactoring:** - Standardized Electron IPC usage by importing `ipcRenderer` directly from `electron` instead of accessing it via `this.$electron`, improving code clarity and compatibility. [[1]](diffhunk://#diff-1bc19a9224e7f64bc0a3b2679bb4b4a0603f587a94c2c1a5ec2b2ef9584fe1e3L59-R60) [[2]](diffhunk://#diff-d4335a84f7e4cc1874b1f4315cb7b16c06cdef052533416a0e4d0818bb4790d8R7) [[3]](diffhunk://#diff-d4335a84f7e4cc1874b1f4315cb7b16c06cdef052533416a0e4d0818bb4790d8L45-R57) [[4]](diffhunk://#diff-d4335a84f7e4cc1874b1f4315cb7b16c06cdef052533416a0e4d0818bb4790d8L156-R157) [[5]](diffhunk://#diff-a70ee5d664f5786d5b6982c3f6854202be168fb905d29ca6f863b305d2218ce1R6-R24) **Other Improvements:** - Updated agent configuration documentation with detailed operational protocols and tool mappings for the "Pisces Swarm Commander" agent. - Simplified and modernized UI elements, such as replacing deprecated icon classes with Unicode characters and updating popover/button slot usage. [[1]](diffhunk://#diff-ae65444cc636b1735062da0e1b997682bcf7ebab78d872801c47ecc8fe4748c2L19-R25) [[2]](diffhunk://#diff-ae65444cc636b1735062da0e1b997682bcf7ebab78d872801c47ecc8fe4748c2L40-R54) These changes collectively modernize the codebase, improve maintainability, and prepare the project for future enhancements using the Vue 3 and Element Plus ecosystems. --> ### Checklist: * [x ] Have you checked to ensure there aren't other open [Pull Requests](../../../pulls) for the same update/change? * [ x] Have you linted your code locally prior to submission? * [x ] Have you successfully ran app with your changes locally?
合并状态:未合并 关闭于 2026-03-19 1 条评论