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 端的开发基础设施。 ```
2023-06-26 11:54:17 +08:00 · 2023-06-26 11:54:17 +08:00 · 96225e4040
parent d28f6075c1
commit 96225e4040
35 changed files with 737 additions and 841 deletions
--- a/console/.eslintrc.cjs
+++ b/console/.eslintrc.cjs
@ -23,4 +23,7 @@ module.exports = {
      extends: ["plugin:cypress/recommended"],
    },
  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
 };
--- a/console/env.d.ts
+++ b/console/env.d.ts
@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="unplugin-icons/types/vue" />

 export {};

--- a/console/package.json
+++ b/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/tsconfig": "^0.1.3",
+    "@vue/test-utils": "^2.3.2",
+    "@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"
  }
 }
--- a/console/packages/components/env.d.ts
+++ b/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";
--- a/console/packages/components/package.json
+++ b/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",
--- a/console/packages/components/src/components/dialog/interface.ts
+++ b/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;
--- a/console/packages/components/tsconfig.app.json
+++ b/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": {
--- a/console/packages/components/tsconfig.json
+++ b/console/packages/components/tsconfig.json
@ -2,7 +2,7 @@
  "files": [],
  "references": [
    {
-      "path": "./tsconfig.vite-config.json"
+      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
--- a/console/packages/components/tsconfig.node.json
+++ b/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"]
+  }
+}
--- a/console/packages/components/tsconfig.vite-config.json
+++ b/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"]
-  }
-}
--- a/console/packages/components/vite.config.ts
+++ b/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,
--- a/console/packages/shared/env.d.ts
+++ b/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
--- a/console/packages/shared/package.json
+++ b/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:*"
  }
 }
--- a/console/packages/shared/tsconfig.app.json
+++ b/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": {
--- a/console/packages/shared/tsconfig.json
+++ b/console/packages/shared/tsconfig.json
@ -2,7 +2,7 @@
  "files": [],
  "references": [
    {
-      "path": "./tsconfig.vite-config.json"
+      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
--- a/console/packages/shared/tsconfig.node.json
+++ b/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"]
+  }
+}
--- a/console/packages/shared/tsconfig.vite-config.json
+++ b/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"]
-  }
-}
--- a/console/packages/shared/vite.config.ts
+++ b/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,
--- a/console/pnpm-lock.yaml
+++ b/console/pnpm-lock.yaml
--- a/console/src/components/menu/RoutesMenu.tsx
+++ b/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 (
--- a/console/src/modules/contents/attachments/components/AttachmentSelectorModal.vue
+++ b/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>
--- a/console/src/modules/contents/posts/widgets/PostStatsWidget.vue
+++ b/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>
--- a/console/src/modules/dashboard/Dashboard.vue
+++ b/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();
--- a/console/src/modules/interface/menus/utils/tests/snapshots/index.spec.ts.snap
+++ b/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": "",
-      },
    },
  },
 ]
--- a/console/src/modules/interface/menus/utils/tests/index.spec.ts
+++ b/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: "",
-          },
        },
      },
    ];
--- a/console/src/modules/interface/themes/components/ThemeUploadModal.vue
+++ b/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 { UppyFile } from "@uppy/utils";
+import type { ErrorResponse, UppyFile } from "@uppy/core";

 const { t } = useI18n();
 const queryClient = useQueryClient();
--- a/console/src/modules/interface/themes/components/preview/ThemePreviewModal.vue
+++ b/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>
--- a/console/src/modules/interface/themes/layouts/ThemeLayout.vue
+++ b/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"
--- a/console/src/modules/system/plugins/components/PluginUploadModal.vue
+++ b/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 { UppyFile } from "@uppy/utils";
+import type { SuccessResponse, ErrorResponse, UppyFile } from "@uppy/core";
 import { useI18n } from "vue-i18n";
 import { useQueryClient } from "@tanstack/vue-query";
 import { useRouteQuery } from "@vueuse/router";
--- a/console/src/modules/system/plugins/layouts/PluginLayout.vue
+++ b/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"
--- a/console/src/modules/system/settings/layouts/SystemSettingsLayout.vue
+++ b/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"
--- a/console/tsconfig.app.json
+++ b/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"]
  }
 }
--- a/console/tsconfig.json
+++ b/console/tsconfig.json
@ -2,7 +2,7 @@
  "files": [],
  "references": [
    {
-      "path": "./tsconfig.vite-config.json"
+      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
--- a/console/tsconfig.node.json
+++ b/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"]
+  }
+}
--- a/console/tsconfig.vite-config.json
+++ b/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"]
-  }
-}