chore: bump vue related packages version (#4427)

#### What type of PR is this?

/area console
/kind improvement
/milestone 2.9.x

#### What this PR does / why we need it:

升级 Vue 至 3.3 以及相关的依赖。

see https://blog.vuejs.org/posts/vue-3-3

#### Which issue(s) this PR fixes:

Fixes #4425 

#### Does this PR introduce a user-facing change?

```release-note
升级 Vue 至 3.3 以及相关的依赖。
```

console/index.html

@@ -14,7 +14,6 @@
     <link rel="icon" href="/favicon.ico" type="image/svg+xml" />
     <meta name="msapplication-TileColor" content="#da532c" />
     <meta name="theme-color" content="#ffffff" />
-    <%- injectScript %>
     <style>
       body {
         height: 100%;

console/package.json

@@ -67,10 +67,10 @@
     "@uppy/status-bar": "^3.1.2",
     "@uppy/vue": "^1.0.2",
     "@uppy/xhr-upload": "^3.2.0",
-    "@vueuse/components": "^10.2.0",
+    "@vueuse/components": "^10.3.0",
-    "@vueuse/core": "^10.2.0",
+    "@vueuse/core": "^10.3.0",
-    "@vueuse/router": "^10.2.0",
+    "@vueuse/router": "^10.3.0",
-    "@vueuse/shared": "^10.2.0",
+    "@vueuse/shared": "^10.3.0",
     "axios": "^0.27.2",
     "codemirror": "^6.0.1",
     "colorjs.io": "^0.4.3",
@@ -89,22 +89,22 @@
     "overlayscrollbars": "^2.1.1",
     "overlayscrollbars-vue": "^0.5.1",
     "path-browserify": "^1.0.1",
-    "pinia": "^2.0.33",
+    "pinia": "^2.1.6",
     "pretty-bytes": "^6.0.0",
     "qs": "^6.11.1",
     "transliteration": "^2.3.5",
-    "vue": "^3.2.45",
+    "vue": "^3.3.4",
-    "vue-demi": "^0.13.11",
+    "vue-demi": "^0.14.5",
     "vue-grid-layout": "3.0.0-beta1",
-    "vue-i18n": "9.3.0-beta.19",
+    "vue-i18n": "9.3.0-beta.25",
-    "vue-router": "^4.1.6",
+    "vue-router": "^4.2.4",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.25.2",
     "@iconify-json/mdi": "^1.1.50",
     "@iconify-json/vscode-icons": "^1.1.22",
-    "@intlify/unplugin-vue-i18n": "^0.9.3",
+    "@intlify/unplugin-vue-i18n": "^0.12.2",
     "@rushstack/eslint-patch": "^1.3.2",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.0",
@@ -117,20 +117,20 @@
     "@types/node": "^18.11.19",
     "@types/qs": "^6.9.7",
     "@types/randomstring": "^1.1.8",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "@vitest/ui": "^0.25.3",
+    "@vitest/ui": "^0.34.1",
-    "@vue/compiler-sfc": "^3.2.45",
+    "@vue/compiler-sfc": "^3.3.4",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.3",
-    "@vue/test-utils": "^2.3.2",
+    "@vue/test-utils": "^2.4.1",
     "@vue/tsconfig": "^0.4.0",
     "autoprefixer": "^10.4.14",
     "c8": "^7.12.0",
     "cypress": "^10.11.0",
     "eslint": "^8.43.0",
     "eslint-plugin-cypress": "^2.13.3",
-    "eslint-plugin-vue": "^9.15.0",
+    "eslint-plugin-vue": "^9.17.0",
     "husky": "^8.0.3",
     "jsdom": "^20.0.3",
     "lint-staged": "^13.2.2",
@@ -147,12 +147,12 @@
     "tailwindcss-themer": "^2.0.3",
     "typescript": "~5.0.4",
     "unplugin-icons": "^0.14.15",
-    "vite": "^4.0.5",
+    "vite": "^4.2.3",
     "vite-plugin-externals": "^0.6.2",
     "vite-plugin-html": "^3.2.0",
-    "vite-plugin-pwa": "^0.13.3",
+    "vite-plugin-pwa": "^0.16.4",
-    "vite-plugin-static-copy": "^0.11.1",
+    "vite-plugin-static-copy": "^0.17.0",
-    "vitest": "^0.25.3",
+    "vitest": "^0.34.1",
-    "vue-tsc": "^1.8.1"
+    "vue-tsc": "^1.8.8"
   }
 }

console/packages/components/package.json

@@ -51,8 +51,8 @@
     "vite-plugin-dts": "^2.3.0"
   },
   "peerDependencies": {
-    "vue": "^3.2.37",
+    "vue": "^3.3.4",
-    "vue-router": "^4.0.16"
+    "vue-router": "^4.2.4"
   },
   "exports": {
     ".": {

console/packages/components/src/components/button/__tests__/__snapshots__/Button.spec.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Button > should render 1`] = `
 "<button class=\\"btn-md btn-default btn\\" type=\\"button\\">

console/packages/components/src/components/empty/__tests__/__snapshots__/Empty.spec.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Empty > should match snapshot 1`] = `
 "<div class=\\"empty-wrapper\\">

console/packages/components/src/components/menu/__tests__/__snapshots__/Menu.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Menu > should render 1`] = `
 "<div class=\\"menu-container w-full p-3\\">

console/packages/components/src/components/menu/__tests__/__snapshots__/MenuLabel.spec.ts.snap

@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`MenuLabel > should render 1`] = `"<li class=\\"menu-label flex flex-col\\">Hello Halo</li>"`;

console/packages/components/src/components/status/__tests__/__snapshots__/StatusDot.spec.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`StatusDot > should match snapshot 1`] = `
 "<div class=\\"status-dot-wrapper status-dot-success\\">

console/packages/shared/package.json

@@ -41,8 +41,8 @@
     "vite-plugin-dts": "^2.3.0"
   },
   "peerDependencies": {
-    "vue": "^3.2.37",
+    "vue": "^3.3.4",
-    "vue-router": "^4.0.16"
+    "vue-router": "^4.2.4"
   },
   "dependencies": {
     "@halo-dev/api-client": "workspace:*"

console/src/build/library-external.ts

@@ -5,6 +5,7 @@ import {
 } from "vite-plugin-static-copy";
 import { createHtmlPlugin as VitePluginHtml } from "vite-plugin-html";
 import randomstring from "randomstring";
+import type { HtmlTagDescriptor } from "vite";
 
 /**
  * It copies the external libraries to the `assets` folder, and injects the script tags into the HTML
@@ -74,15 +75,18 @@ export const setupLibraryExternal = (
     },
   ];
 
-  const injectScript = staticTargets
+  const injectTags = staticTargets
     .map((target) => {
-      return `<script src="${isProduction ? baseUrl : "/"}${target.dest}/${
+      return {
-        target.rename
+        injectTo: "head",
-      }"></script>`;
+        tag: "script",
+        attrs: {
+          src: `${isProduction ? baseUrl : "/"}${target.dest}/${target.rename}`,
+          type: "text/javascript",
+        },
+      };
     })
-    .join("\n");
+    .filter(Boolean) as HtmlTagDescriptor[];
-
-  console.log(injectScript);
 
   return [
     ViteExternals({
@@ -101,9 +105,7 @@ export const setupLibraryExternal = (
     VitePluginHtml({
       minify: false,
       inject: {
-        data: {
+        tags: injectTags,
-          injectScript,
-        },
       },
     }),
   ];

console/src/modules/interface/menus/utils/__tests__/__snapshots__/index.spec.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`buildMenuItemsTree > should match snapshot 1`] = `
 [