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。
```

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,

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"

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"

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"

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"
   }
 }

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"

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": {

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;
       };
 

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: {
+  args: {},
-    default: `<VButton>Hello</VButton>`,
-    popper: `
-      <VDropdownItem>删除</VDropdownItem>
-      <VDropdownDivider></VDropdownDivider>
-      <VDropdownItem>删除</VDropdownItem>
-      <VDropdownItem>编辑</VDropdownItem>
-    `,
-  },
 };

ui/packages/components/src/components/dropdown/Dropdown.vue

@@ -41,7 +41,7 @@ defineExpose({
 </script>
 
 <template>
-  <!-- @vue-ignore -->
+  <!-- @vue-skip -->
   <FloatingDropdown
     ref="dropdownRef"
     :placement="placement"

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,

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": ".",

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"
   }
 }

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": {

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);

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) => {

ui/tsconfig.app.json

@@ -17,7 +17,6 @@
       "@uc/*": ["./uc-src/*"],
       "@console/*": ["./console-src/*"]
     },
-    "noStrictGenericChecks": true,
     "ignoreDeprecations": "5.0",
     "types": ["unplugin-icons/types/vue"]
   }

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"

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"

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"