chore: improve the console project infrastructure (#4105)

#### What type of PR is this?

/area console
/kind improvement
/milestone 2.7.x

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

维护 Console 端的开发基础设施。

- 升级 TypeScript 以及 Vue 对于 TS 支持的相关包。
- 优化 packages 下所有包的配置，解决构建时生成 d.ts 文件的异常。
- 解决 TS 异常。

#### Special notes for your reviewer:

尝试执行：

1. pnpm build:packages
2. pnpm typecheck

观察是否正常即可。

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

```release-note
维护 Console 端的开发基础设施。
```

console/.eslintrc.cjs

@@ -23,4 +23,7 @@ module.exports = {
       extends: ["plugin:cypress/recommended"],
     },
   ],
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
 };

console/env.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="unplugin-icons/types/vue" />
 
 export {};
 

console/package.json

@@ -94,7 +94,7 @@
     "vue": "^3.2.45",
     "vue-demi": "^0.13.11",
     "vue-grid-layout": "3.0.0-beta1",
-    "vue-i18n": "^9.2.2",
+    "vue-i18n": "9.3.0-beta.19",
     "vue-router": "^4.1.6",
     "vuedraggable": "^4.1.0"
   },
@@ -103,9 +103,10 @@
     "@iconify-json/mdi": "^1.1.50",
     "@iconify-json/vscode-icons": "^1.1.22",
     "@intlify/unplugin-vue-i18n": "^0.9.3",
-    "@rushstack/eslint-patch": "^1.2.0",
+    "@rushstack/eslint-patch": "^1.3.2",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.0",
+    "@tsconfig/node18": "^2.0.1",
     "@types/jsdom": "^20.0.1",
     "@types/lodash.clonedeep": "4.5.7",
     "@types/lodash.debounce": "^4.0.7",
@@ -115,19 +116,19 @@
     "@types/qs": "^6.9.7",
     "@types/randomstring": "^1.1.8",
     "@vitejs/plugin-vue": "^4.0.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vitest/ui": "^0.25.3",
     "@vue/compiler-sfc": "^3.2.45",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.3",
-    "@vue/test-utils": "^2.2.4",
+    "@vue/test-utils": "^2.3.2",
-    "@vue/tsconfig": "^0.1.3",
+    "@vue/tsconfig": "^0.4.0",
     "autoprefixer": "^10.4.14",
     "c8": "^7.12.0",
     "cypress": "^10.11.0",
-    "eslint": "^8.41.0",
+    "eslint": "^8.43.0",
     "eslint-plugin-cypress": "^2.13.3",
-    "eslint-plugin-vue": "^9.13.0",
+    "eslint-plugin-vue": "^9.15.0",
     "husky": "^8.0.3",
     "jsdom": "^20.0.3",
     "lint-staged": "^13.2.2",
@@ -141,7 +142,7 @@
     "tailwindcss": "^3.2.7",
     "tailwindcss-safe-area": "^0.2.2",
     "tailwindcss-themer": "^2.0.3",
-    "typescript": "~4.7.4",
+    "typescript": "~5.0.4",
     "unplugin-icons": "^0.14.15",
     "vite": "^4.0.4",
     "vite-compression-plugin": "^0.0.4",
@@ -150,6 +151,6 @@
     "vite-plugin-pwa": "^0.13.3",
     "vite-plugin-static-copy": "^0.11.1",
     "vitest": "^0.25.3",
-    "vue-tsc": "^1.0.24"
+    "vue-tsc": "^1.8.1"
   }
 }

console/packages/components/env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="vite/client" />
 /// <reference types="histoire" />
+/// <reference types="unplugin-icons/types/vue" />
 
 declare module "*.vue" {
   import type { DefineComponent } from "vue";

console/packages/components/package.json

@@ -48,7 +48,7 @@
     "@iconify-json/ri": "^1.1.4",
     "histoire": "^0.11.7",
     "unplugin-icons": "^0.14.14",
-    "vite-plugin-dts": "^1.7.3"
+    "vite-plugin-dts": "^2.3.0"
   },
   "peerDependencies": {
     "vue": "^3.2.37",

console/packages/components/src/components/dialog/interface.ts

@@ -1,6 +1,6 @@
 export type Type = "success" | "info" | "warning" | "error";
 export const DialogProviderProvideKey = "DIALOG_PROVIDER_PROVIDE_KEY";
-import type { Type as ButtonType } from "@/components/button/interface";
+import type { Type as ButtonType } from "../button/interface";
 
 export interface useDialogOptions {
   type?: Type;

console/packages/components/tsconfig.app.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {

console/packages/components/tsconfig.json

@@ -2,7 +2,7 @@
   "files": [],
   "references": [
     {
-      "path": "./tsconfig.vite-config.json"
+      "path": "./tsconfig.node.json"
     },
     {
       "path": "./tsconfig.app.json"

console/packages/components/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "types": ["node"]
+  }
+}

console/packages/components/tsconfig.vite-config.json

@@ -1,8 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*"],
-  "compilerOptions": {
-    "composite": true,
-    "types": ["node", "vitest"]
-  }
-}

console/packages/components/vite.config.ts

@@ -1,6 +1,6 @@
 import { fileURLToPath, URL } from "url";
 
-import { defineConfig } from "vite";
+import { defineConfig, type Plugin } from "vite";
 import Vue from "@vitejs/plugin-vue";
 import VueJsx from "@vitejs/plugin-vue-jsx";
 import Icons from "unplugin-icons/vite";
@@ -13,10 +13,11 @@ export default defineConfig({
     VueJsx(),
     Icons({ compiler: "vue3" }),
     Dts({
+      tsConfigFilePath: "./tsconfig.app.json",
       entryRoot: "./src",
       outputDir: "./dist",
       insertTypesEntry: true,
-    }),
+    }) as Plugin,
   ],
   define: {
     "process.env": process.env,

console/packages/shared/env.d.ts

@@ -2,9 +2,9 @@
 
 export {};
 
+import type { Component } from "vue";
 import type { CoreMenuGroupId } from "./src/types/menus";
 
-
 declare module "*.vue" {
   import type { DefineComponent } from "vue";
   // eslint-disable-next-line

console/packages/shared/package.json

@@ -38,10 +38,13 @@
   "homepage": "https://github.com/halo-dev/console/tree/main/packages/shared#readme",
   "license": "MIT",
   "devDependencies": {
-    "vite-plugin-dts": "^1.7.3"
+    "vite-plugin-dts": "^2.3.0"
   },
   "peerDependencies": {
     "vue": "^3.2.37",
     "vue-router": "^4.0.16"
+  },
+  "dependencies": {
+    "@halo-dev/api-client": "workspace:*"
   }
 }

console/packages/shared/tsconfig.app.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {

console/packages/shared/tsconfig.json

@@ -2,7 +2,7 @@
   "files": [],
   "references": [
     {
-      "path": "./tsconfig.vite-config.json"
+      "path": "./tsconfig.node.json"
     },
     {
       "path": "./tsconfig.app.json"

console/packages/shared/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "types": ["node"]
+  }
+}

console/packages/shared/tsconfig.vite-config.json

@@ -1,8 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*"],
-  "compilerOptions": {
-    "composite": true,
-    "types": ["node", "vitest"]
-  }
-}

console/packages/shared/vite.config.ts

@@ -11,6 +11,7 @@ export default defineConfig({
     Vue(),
     VueJsx(),
     Dts({
+      tsConfigFilePath: "./tsconfig.app.json",
       entryRoot: "./src",
       outputDir: "./dist",
       insertTypesEntry: true,

console/src/components/menu/RoutesMenu.tsx

@@ -69,6 +69,7 @@ const RoutesMenu = defineComponent({
     }
 
     return () => (
+      // @ts-ignore
       <VMenu openIds={openIds.value}>
         {props.menus?.map((menu: MenuGroupType) => {
           return (

console/src/modules/contents/attachments/components/AttachmentSelectorModal.vue

@@ -117,7 +117,12 @@ const confirmCountMessage = computed(() => {
   >
     <VTabbar
       v-model:active-id="activeId"
-      :items="attachmentSelectProviders"
+      :items="
+        attachmentSelectProviders.map((provider) => ({
+          id: provider.id,
+          label: provider.label,
+        }))
+      "
       class="w-full"
       type="outline"
     ></VTabbar>

console/src/modules/contents/posts/widgets/PostStatsWidget.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { VCard, IconBookRead } from "@halo-dev/components";
 import { inject, type Ref } from "vue";
-import type { DashboardStats } from "@halo-dev/api-client/index";
+import type { DashboardStats } from "@halo-dev/api-client";
 
 const dashboardStats = inject<Ref<DashboardStats>>("dashboardStats");
 </script>

console/src/modules/dashboard/Dashboard.vue

@@ -123,7 +123,7 @@ import { onMounted, provide, ref, type Ref } from "vue";
 import { useStorage } from "@vueuse/core";
 import cloneDeep from "lodash.clonedeep";
 import { apiClient } from "@/utils/api-client";
-import type { DashboardStats } from "@halo-dev/api-client/index";
+import type { DashboardStats } from "@halo-dev/api-client";
 import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();

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

@@ -301,9 +301,6 @@ exports[`sortMenuItemsTree > will match snapshot 1`] = `
       "version": 12,
     },
     "spec": {
-      "categoryRef": {
-        "name": "",
-      },
       "children": [
         {
           "apiVersion": "v1alpha1",
@@ -314,22 +311,10 @@ exports[`sortMenuItemsTree > will match snapshot 1`] = `
             "version": 0,
           },
           "spec": {
-            "categoryRef": {
-              "name": "",
-            },
             "children": [],
             "displayName": "Java",
             "href": "https://ryanc.cc/categories/java",
-            "pageRef": {
-              "name": "",
-            },
-            "postRef": {
-              "name": "",
-            },
             "priority": 0,
-            "tagRef": {
-              "name": "",
-            },
           },
         },
         {
@@ -341,37 +326,16 @@ exports[`sortMenuItemsTree > will match snapshot 1`] = `
             "version": 4,
           },
           "spec": {
-            "categoryRef": {
-              "name": "",
-            },
             "children": [],
             "displayName": "Halo",
             "href": "https://ryanc.cc/categories/halo",
-            "pageRef": {
-              "name": "",
-            },
-            "postRef": {
-              "name": "",
-            },
             "priority": 1,
-            "tagRef": {
-              "name": "",
-            },
           },
         },
       ],
       "displayName": "文章分类",
       "href": "https://ryanc.cc/categories",
-      "pageRef": {
-        "name": "",
-      },
-      "postRef": {
-        "name": "",
-      },
       "priority": 0,
-      "tagRef": {
-        "name": "",
-      },
     },
   },
 ]

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

@@ -137,9 +137,6 @@ describe("sortMenuItemsTree", () => {
           version: 12,
         },
         spec: {
-          categoryRef: {
-            name: "",
-          },
           children: [
             {
               apiVersion: "v1alpha1",
@@ -150,22 +147,10 @@ describe("sortMenuItemsTree", () => {
                 version: 4,
               },
               spec: {
-                categoryRef: {
-                  name: "",
-                },
                 children: [],
                 priority: 1,
                 displayName: "Halo",
                 href: "https://ryanc.cc/categories/halo",
-                pageRef: {
-                  name: "",
-                },
-                postRef: {
-                  name: "",
-                },
-                tagRef: {
-                  name: "",
-                },
               },
             },
             {
@@ -177,37 +162,16 @@ describe("sortMenuItemsTree", () => {
                 version: 0,
               },
               spec: {
-                categoryRef: {
-                  name: "",
-                },
                 children: [],
                 priority: 0,
                 displayName: "Java",
                 href: "https://ryanc.cc/categories/java",
-                pageRef: {
-                  name: "",
-                },
-                postRef: {
-                  name: "",
-                },
-                tagRef: {
-                  name: "",
-                },
               },
             },
           ],
           priority: 0,
           displayName: "文章分类",
           href: "https://ryanc.cc/categories",
-          pageRef: {
-            name: "",
-          },
-          postRef: {
-            name: "",
-          },
-          tagRef: {
-            name: "",
-          },
         },
       },
     ];

console/src/modules/interface/themes/components/ThemeUploadModal.vue

@@ -16,8 +16,7 @@ import { useThemeStore } from "@/stores/theme";
 import { apiClient } from "@/utils/api-client";
 import { useRouteQuery } from "@vueuse/router";
 import { submitForm } from "@formkit/core";
-import type { ErrorResponse } from "@uppy/core";
+import type { ErrorResponse, UppyFile } from "@uppy/core";
-import type { UppyFile } from "@uppy/utils";
 
 const { t } = useI18n();
 const queryClient = useQueryClient();

console/src/modules/interface/themes/components/preview/ThemePreviewModal.vue

@@ -248,9 +248,10 @@ const iframeClasses = computed(() => {
     @update:visible="onVisibleChange"
   >
     <template #center>
+      <!-- TODO: Reactor VTabbar component to support icon prop -->
       <VTabbar
         v-model:active-id="deviceActiveId"
-        :items="mockDevices"
+        :items="mockDevices as any"
         type="outline"
       ></VTabbar>
     </template>

console/src/modules/interface/themes/layouts/ThemeLayout.vue

@@ -245,7 +245,7 @@ onMounted(() => {
           <template #header>
             <VTabbar
               v-model:active-id="activeTab"
-              :items="tabs"
+              :items="tabs.map((item) => ({ id: item.id, label: item.label }))"
               class="w-full !rounded-none"
               type="outline"
               @change="handleTabChange"

console/src/modules/system/plugins/components/PluginUploadModal.vue

@@ -11,8 +11,7 @@ import UppyUpload from "@/components/upload/UppyUpload.vue";
 import { apiClient } from "@/utils/api-client";
 import type { Plugin } from "@halo-dev/api-client";
 import { computed, ref, watch, nextTick } from "vue";
-import type { SuccessResponse, ErrorResponse } from "@uppy/core";
+import type { SuccessResponse, ErrorResponse, UppyFile } from "@uppy/core";
-import type { UppyFile } from "@uppy/utils";
 import { useI18n } from "vue-i18n";
 import { useQueryClient } from "@tanstack/vue-query";
 import { useRouteQuery } from "@vueuse/router";

console/src/modules/system/plugins/layouts/PluginLayout.vue

@@ -160,7 +160,7 @@ watch([() => route.name, () => route.params], () => {
         <template #header>
           <VTabbar
             v-model:active-id="activeTab"
-            :items="tabs"
+            :items="tabs.map((item) => ({ id: item.id, label: item.label }))"
             class="w-full !rounded-none"
             type="outline"
             @change="handleTabChange"

console/src/modules/system/settings/layouts/SystemSettingsLayout.vue

@@ -116,7 +116,7 @@ watch([() => route.name, () => route.params], async () => {
         <template #header>
           <VTabbar
             v-model:active-id="activeTab"
-            :items="tabs"
+            :items="tabs.map((item) => ({ id: item.id, label: item.label }))"
             class="w-full !rounded-none"
             type="outline"
             @change="handleTabChange"

console/tsconfig.app.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/*", "packages/**/*"],
   "compilerOptions": {
@@ -10,6 +10,7 @@
       "@/*": ["./src/*"]
     },
     "noStrictGenericChecks": true,
+    "ignoreDeprecations": "5.0",
     "types": ["unplugin-icons/types/vue"]
   }
 }

console/tsconfig.json

@@ -2,7 +2,7 @@
   "files": [],
   "references": [
     {
-      "path": "./tsconfig.vite-config.json"
+      "path": "./tsconfig.node.json"
     },
     {
       "path": "./tsconfig.app.json"

console/tsconfig.node.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "./src/build/library-external.ts"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "types": ["node"]
+  }
+}

console/tsconfig.vite-config.json

@@ -1,8 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*","./src/build/*.ts"],
-  "compilerOptions": {
-    "composite": true,
-    "types": ["node", "vitest"]
-  }
-}