chore: bump vue version to 3.5 (#6696)

#### What type of PR is this? /area ui /kind improvement /milestone 2.20.x #### What this PR does / why we need it: 升级 UI 项目的 Vue 版本至 3.5.x。 #### Does this PR introduce a user-facing change? ```release-note 升级 UI 项目的 Vue 版本至 3.5.x。 ```
2024-09-26 16:11:31 +08:00 · 2024-09-26 16:11:31 +08:00 · fd40770ebc
parent f6409a0cb0
commit fd40770ebc
21 changed files with 390 additions and 315 deletions
--- a/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue
+++ b/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue
@ -27,7 +27,7 @@ const props = withDefaults(
  defineProps<{
    category?: Category;
    parentCategory?: Category;
-    isChildLevelCategory: boolean;
+    isChildLevelCategory?: boolean;
  }>(),
  {
    category: undefined,
--- a/ui/console-src/modules/interface/themes/components/preview/ThemePreviewModal.vue
+++ b/ui/console-src/modules/interface/themes/components/preview/ThemePreviewModal.vue
@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import StickyBlock from "@/components/sticky-block/StickyBlock.vue";
 import { useSettingFormConvert } from "@console/composables/use-setting-form";
 import { useThemeStore } from "@console/stores/theme";
 import type {
@ -28,7 +29,6 @@ import { storeToRefs } from "pinia";
 import { computed, markRaw, onMounted, ref, toRaw } from "vue";
 import { useI18n } from "vue-i18n";
 import ThemePreviewListItem from "./ThemePreviewListItem.vue";
-import StickyBlock from "@/components/sticky-block/StickyBlock.vue";

 const props = withDefaults(
  defineProps<{
@ -304,6 +304,7 @@ const iframeClasses = computed(() => {
            @after-leave="switching = false"
          >
            <div v-show="settingsVisible" class="mb-20">
+              <!-- @vue-skip -->
              <VTabbar
                v-model:active-id="activeSettingTab"
                :items="settingTabs"
--- a/ui/console-src/modules/system/users/components/UserPasswordChangeModal.vue
+++ b/ui/console-src/modules/system/users/components/UserPasswordChangeModal.vue
@ -66,6 +66,7 @@ const handleChangePassword = async () => {
    :title="$t('core.user.change_password_modal.title')"
    @close="emit('close')"
  >
+    <!-- @vue-ignore -->
    <FormKit
      id="password-form"
      v-model="formState"
--- a/ui/console-src/views/system/Setup.vue
+++ b/ui/console-src/views/system/Setup.vue
@ -50,6 +50,7 @@ const inputClasses = {
    <IconLogo class="mb-8 flex-none" />

    <div class="flex w-72 flex-col">
+      <!-- @vue-ignore -->
      <FormKit
        id="setup-form"
        v-model="formState"
--- a/ui/package.json
+++ b/ui/package.json
@ -100,7 +100,7 @@
    "short-unique-id": "^5.0.2",
    "transliteration": "^2.3.5",
    "ua-parser-js": "^1.0.38",
-    "vue": "^3.4.27",
+    "vue": "^3.5.8",
    "vue-demi": "^0.14.7",
    "vue-draggable-plus": "^0.4.1",
    "vue-grid-layout": "3.0.0-beta1",
@ -122,7 +122,7 @@
    "@types/qs": "^6.9.7",
    "@types/randomstring": "^1.1.8",
    "@types/ua-parser-js": "^0.7.39",
-    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitejs/plugin-vue": "^5.1.4",
    "@vitejs/plugin-vue-jsx": "^4.0.1",
    "@vitest/ui": "^0.34.1",
    "@vue/compiler-sfc": "^3.4.27",
@ -151,7 +151,7 @@
    "tailwindcss": "^3.2.7",
    "tailwindcss-safe-area": "^0.2.2",
    "tailwindcss-themer": "^2.0.3",
-    "typescript": "~5.5.4",
+    "typescript": "~5.6.2",
    "unplugin-icons": "^0.19.2",
    "vite": "^5.4.1",
    "vite-plugin-externals": "^0.6.2",
@ -160,6 +160,6 @@
    "vite-plugin-static-copy": "^1.0.6",
    "vite-plugin-vue-devtools": "^7.3.8",
    "vitest": "^0.34.1",
-    "vue-tsc": "^2.0.29"
+    "vue-tsc": "^2.1.6"
  }
 }
--- a/ui/packages/api-client/package.json
+++ b/ui/packages/api-client/package.json
@ -50,7 +50,7 @@
    "rimraf": "^5.0.7",
    "typescript": "~5.5.4",
    "unbuild": "^0.7.6",
-    "vite-plugin-dts": "^4.0.3"
+    "vite-plugin-dts": "^4.2.2"
  },
  "peerDependencies": {
    "axios": "^1.7.x"
--- a/ui/packages/components/package.json
+++ b/ui/packages/components/package.json
@ -58,10 +58,10 @@
    "react-dom": "^18.2.0",
    "storybook": "^7.6.3",
    "unplugin-icons": "^0.14.15",
-    "vite-plugin-dts": "^4.0.3"
+    "vite-plugin-dts": "^4.2.2"
  },
  "peerDependencies": {
-    "vue": "^3.4.27",
+    "vue": "^3.5.8",
    "vue-router": "^4.3.2"
  },
  "exports": {
--- a/ui/packages/components/src/components/dialog/Dialog.stories.ts
+++ b/ui/packages/components/src/components/dialog/Dialog.stories.ts
@ -12,6 +12,7 @@ const meta: Meta<typeof VDialog> = {
    height: 400,
    setup() {
      const showDialog = () => {
+        // @ts-ignore
        args.visible = true;
      };

--- a/ui/packages/components/src/components/dropdown/Draopdown.stories.ts
+++ b/ui/packages/components/src/components/dropdown/Draopdown.stories.ts
@ -18,9 +18,12 @@ const meta: Meta<typeof VDropdown> = {
    template: `
    <div style="height: 300px">
      <VDropdown>
-        ${args.default}
+        <VButton>Hello</VButton>
        <template #popper>
-          ${args.popper}
+          <VDropdownItem>删除</VDropdownItem>
+          <VDropdownDivider></VDropdownDivider>
+          <VDropdownItem>删除</VDropdownItem>
+          <VDropdownItem>编辑</VDropdownItem>
        </template>
      </VDropdown>
    </div>
@ -34,13 +37,5 @@ export default meta;
 type Story = StoryObj<typeof VDropdown>;

 export const Default: Story = {
-  args: {
-    default: `<VButton>Hello</VButton>`,
-    popper: `
-      <VDropdownItem>删除</VDropdownItem>
-      <VDropdownDivider></VDropdownDivider>
-      <VDropdownItem>删除</VDropdownItem>
-      <VDropdownItem>编辑</VDropdownItem>
-    `,
-  },
+  args: {},
 };
--- a/ui/packages/components/src/components/dropdown/Dropdown.vue
+++ b/ui/packages/components/src/components/dropdown/Dropdown.vue
@ -41,7 +41,7 @@ defineExpose({
 </script>

 <template>
-  <!-- @vue-ignore -->
+  <!-- @vue-skip -->
  <FloatingDropdown
    ref="dropdownRef"
    :placement="placement"
--- a/ui/packages/components/src/components/dropdown/DropdownItem.vue
+++ b/ui/packages/components/src/components/dropdown/DropdownItem.vue
@ -6,7 +6,7 @@ const props = withDefaults(
  defineProps<{
    selected?: boolean;
    disabled?: boolean;
-    type: "default" | "danger";
+    type?: "default" | "danger";
  }>(),
  {
    selected: false,
--- a/ui/packages/components/tsconfig.app.json
+++ b/ui/packages/components/tsconfig.app.json
@ -1,7 +1,7 @@
 {
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "exclude": ["src/**/__tests__/*"],
+  "exclude": ["src/**/__tests__/*", "node_modules"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
--- a/ui/packages/editor/package.json
+++ b/ui/packages/editor/package.json
@ -87,9 +87,9 @@
    "@iconify/json": "^2.2.117",
    "@types/linkifyjs": "^2.1.7",
    "release-it": "^16.1.5",
-    "vite-plugin-dts": "^4.0.3"
+    "vite-plugin-dts": "^4.2.2"
  },
  "peerDependencies": {
-    "vue": "^3.4.27"
+    "vue": "^3.5.8"
  }
 }
--- a/ui/packages/shared/package.json
+++ b/ui/packages/shared/package.json
@ -38,10 +38,10 @@
  "homepage": "https://github.com/halo-dev/halo/tree/main/ui/packages/shared#readme",
  "license": "MIT",
  "devDependencies": {
-    "vite-plugin-dts": "^4.0.3"
+    "vite-plugin-dts": "^4.2.2"
  },
  "peerDependencies": {
-    "vue": "^3.4.27",
+    "vue": "^3.5.8",
    "vue-router": "^4.3.2"
  },
  "dependencies": {
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
--- a/ui/src/components/image/LazyImage.vue
+++ b/ui/src/components/image/LazyImage.vue
@ -3,12 +3,12 @@ import { onMounted, ref } from "vue";

 const props = withDefaults(
  defineProps<{
-    src: string;
+    src?: string;
    alt?: string;
    classes?: string | string[];
  }>(),
  {
-    src: "",
+    src: undefined,
    alt: "",
    classes: "",
  }
@ -18,8 +18,12 @@ const isLoading = ref(false);
 const error = ref(false);

 const loadImage = async () => {
+  if (!props.src) {
+    throw new Error("src is required");
+  }
+
  const image = new Image();
-  image.src = props.src;
+  image.src = props.src || "";
  return new Promise((resolve, reject) => {
    image.onload = () => resolve(image);
    image.onerror = (err) => reject(err);
--- a/ui/src/components/video/LazyVideo.vue
+++ b/ui/src/components/video/LazyVideo.vue
@ -3,11 +3,11 @@ import { onMounted, ref } from "vue";

 const props = withDefaults(
  defineProps<{
-    src: string;
+    src?: string;
    classes?: string | string[];
  }>(),
  {
-    src: "",
+    src: undefined,
    classes: "",
  }
 );
@ -16,6 +16,10 @@ const isLoading = ref(false);
 const error = ref(false);

 const loadVideo = async () => {
+  if (!props.src) {
+    throw new Error("src is required");
+  }
+
  const video = document.createElement("video");
  video.src = props.src;
  return new Promise((resolve, reject) => {
--- a/ui/tsconfig.app.json
+++ b/ui/tsconfig.app.json
@ -17,7 +17,6 @@
      "@uc/*": ["./uc-src/*"],
      "@console/*": ["./console-src/*"]
    },
-    "noStrictGenericChecks": true,
    "ignoreDeprecations": "5.0",
    "types": ["unplugin-icons/types/vue"]
  }
--- a/ui/uc-src/modules/contents/posts/components/PostSettingForm.vue
+++ b/ui/uc-src/modules/contents/posts/components/PostSettingForm.vue
@ -78,6 +78,7 @@ const publishTimeHelp = computed(() => {
 </script>

 <template>
+  <!-- @vue-ignore -->
  <FormKit
    id="post-setting-form"
    v-model="internalFormState"
--- a/ui/uc-src/modules/profile/components/PasswordChangeModal.vue
+++ b/ui/uc-src/modules/profile/components/PasswordChangeModal.vue
@ -56,6 +56,7 @@ const handleChangePassword = async () => {
    :title="$t('core.uc_profile.change_password_modal.title')"
    @close="emit('close')"
  >
+    <!-- @vue-ignore -->
    <FormKit
      id="password-form"
      v-model="formState"
--- a/ui/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue
+++ b/ui/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue
@ -120,6 +120,7 @@ const { mutate, isLoading } = useMutation({
          </div>
        </div>
        <div class="mt-5 divide-y divide-gray-100 md:col-span-3 md:mt-0">
+          <!-- @vue-ignore -->
          <FormKit
            id="pat-creation-form"
            v-model="formState.spec"