From 0f7096a167408a8ad09f1fa7f3537749b8e2ff70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=82=A0=E9=9D=99=E8=90=9D=E8=8E=89?= <i@mikuhl.cn>
Date: Sun, 18 Feb 2024 11:10:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=86=E4=BB=A3=E7=A0=81=E8=BF=81?=
 =?UTF-8?q?=E7=A7=BB=E8=87=B3TS=E4=B8=A5=E6=A0=BC=E6=A8=A1=E5=BC=8F=20(#68?=
 =?UTF-8?q?4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 将现有代码迁移至TS严格模式 - 禁止隐匿Any的This

* feat: 将代码迁移至TS严格模式 - 启用JS严格模式 和 绑定类型检查

* feat: 移除无用钩子，修改为工具API

* feat: 将代码迁移至TS严格模式 - 启用严格函数类型检查
---
 package.json                                  |  1 +
 src/hooks/event/useWindowSizeFn.ts            | 34 -------------------
 src/layouts/components/FrameContent.vue       |  8 +++--
 src/layouts/components/Header.vue             | 16 +++++----
 src/layouts/components/LayoutContent.vue      |  2 +-
 src/layouts/components/SideNav.vue            |  4 +--
 .../dashboard/base/components/MiddleChart.vue |  2 +-
 .../base/components/OutputOverview.vue        |  2 +-
 src/pages/dashboard/detail/index.vue          |  2 +-
 src/pages/list/base/index.vue                 |  2 +-
 src/pages/list/card/components/DialogForm.vue |  2 +-
 src/store/modules/setting.ts                  | 29 ++++++++--------
 src/types/interface.d.ts                      | 10 ------
 src/utils/color.ts                            | 12 +++----
 tsconfig.json                                 |  6 +++-
 15 files changed, 48 insertions(+), 84 deletions(-)
 delete mode 100644 src/hooks/event/useWindowSizeFn.ts

diff --git a/package.json b/package.json
index f75be49..3673697 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "dev:linux": "vite --mode development",
     "build:test": "vite build --mode test",
     "build": "vue-tsc --noEmit && vite build --mode release",
+    "build:type": "vue-tsc --noEmit",
     "build:site": "vue-tsc --noEmit && vite build --mode site",
     "preview": "vite preview",
     "lint": "eslint --ext .vue,.js,.jsx,.ts,.tsx ./ --max-warnings 0",
diff --git a/src/hooks/event/useWindowSizeFn.ts b/src/hooks/event/useWindowSizeFn.ts
deleted file mode 100644
index 74e92fe..0000000
--- a/src/hooks/event/useWindowSizeFn.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import debounce from 'lodash/debounce';
-import { onMounted, onUnmounted } from 'vue';
-
-interface WindowSizeOptions {
-  immediate?: boolean;
-}
-
-interface Fn<T = any, R = T> {
-  (...arg: T[]): R;
-}
-
-export function useWindowSizeFn<T>(fn: Fn<T>, options?: WindowSizeOptions, wait = 150) {
-  const handleSize: () => void = debounce(fn, wait);
-
-  const start = () => {
-    if (options && options.immediate) {
-      fn();
-    }
-    window.addEventListener('resize', handleSize);
-  };
-
-  const stop = () => {
-    window.removeEventListener('resize', handleSize);
-  };
-
-  onMounted(() => {
-    start();
-  });
-
-  onUnmounted(() => {
-    stop();
-  });
-  return [start, stop];
-}
diff --git a/src/layouts/components/FrameContent.vue b/src/layouts/components/FrameContent.vue
index 5c88928..413f0e6 100644
--- a/src/layouts/components/FrameContent.vue
+++ b/src/layouts/components/FrameContent.vue
@@ -6,17 +6,19 @@
   </div>
 </template>
 <script lang="ts" setup>
+import { useWindowSize } from '@vueuse/core';
 import debounce from 'lodash/debounce';
 import { computed, CSSProperties, ref, unref, watch } from 'vue';
 
 import { prefix } from '@/config/global';
-import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn';
 import { useSettingStore } from '@/store';
 
 defineProps({
   frameSrc: String,
 });
 
+const { width, height } = useWindowSize();
+
 const loading = ref(true);
 const heightRef = ref(window.innerHeight);
 const frameRef = ref<HTMLFrameElement>();
@@ -69,8 +71,8 @@ function hideLoading() {
   calcHeight();
 }
 
-useWindowSizeFn(calcHeight, { immediate: true });
-
+// 如果窗口大小发生变化
+watch([width, height], debounce(calcHeight, 250));
 watch(
   [() => settingStore.showFooter, () => settingStore.isUseTabsRouter, () => settingStore.showBreadcrumb],
   debounce(calcHeight, 250),
diff --git a/src/layouts/components/Header.vue b/src/layouts/components/Header.vue
index 37be801..ad36bf3 100644
--- a/src/layouts/components/Header.vue
+++ b/src/layouts/components/Header.vue
@@ -38,9 +38,13 @@
               <translate-icon />
             </t-button>
             <t-dropdown-menu>
-              <t-dropdown-item v-for="(lang, index) in langList" :key="index" :value="lang.value" @click="changeLang">{{
-                lang.content
-              }}</t-dropdown-item></t-dropdown-menu
+              <t-dropdown-item
+                v-for="(lang, index) in langList"
+                :key="index"
+                :value="lang.value"
+                @click="(options) => changeLang(options.value as string)"
+                >{{ lang.content }}</t-dropdown-item
+              ></t-dropdown-menu
             >
           </t-dropdown>
           <t-dropdown :min-column-width="120" trigger="click">
@@ -85,7 +89,7 @@ import { langList } from '@/locales/index';
 import { useLocale } from '@/locales/useLocale';
 import { getActive } from '@/router';
 import { useSettingStore, useUserStore } from '@/store';
-import type { MenuRoute } from '@/types/interface';
+import type { MenuRoute, ModeType } from '@/types/interface';
 
 import MenuContent from './MenuContent.vue';
 import Notice from './Notice.vue';
@@ -147,11 +151,11 @@ const menuCls = computed(() => {
     },
   ];
 });
-const menuTheme = computed(() => props.theme as 'light' | 'dark');
+const menuTheme = computed(() => props.theme as ModeType);
 
 // 切换语言
 const { changeLocale } = useLocale();
-const changeLang = ({ value: lang }: { value: string }) => {
+const changeLang = (lang: string) => {
   changeLocale(lang);
 };
 
diff --git a/src/layouts/components/LayoutContent.vue b/src/layouts/components/LayoutContent.vue
index ba8b034..f6d1db3 100644
--- a/src/layouts/components/LayoutContent.vue
+++ b/src/layouts/components/LayoutContent.vue
@@ -7,7 +7,7 @@
       :class="`${prefix}-layout-tabs-nav`"
       :value="$route.path"
       :style="{ position: 'sticky', top: 0, width: '100%' }"
-      @change="handleChangeCurrentTab"
+      @change="(value) => handleChangeCurrentTab(value as string)"
       @remove="handleRemove"
       @drag-sort="handleDragend"
     >
diff --git a/src/layouts/components/SideNav.vue b/src/layouts/components/SideNav.vue
index 3025037..fadfa69 100644
--- a/src/layouts/components/SideNav.vue
+++ b/src/layouts/components/SideNav.vue
@@ -26,7 +26,7 @@ import AssetLogo from '@/assets/assets-t-logo.svg?component';
 import { prefix } from '@/config/global';
 import { getActive, getRoutesExpanded } from '@/router';
 import { useSettingStore } from '@/store';
-import type { MenuRoute } from '@/types/interface';
+import type { MenuRoute, ModeType } from '@/types/interface';
 
 import pgk from '../../../package.json';
 import MenuContent from './MenuContent.vue';
@@ -55,7 +55,7 @@ const props = defineProps({
     default: '64px',
   },
   theme: {
-    type: String as PropType<'light' | 'dark'>,
+    type: String as PropType<ModeType>,
     default: 'light',
   },
   isCompact: {
diff --git a/src/pages/dashboard/base/components/MiddleChart.vue b/src/pages/dashboard/base/components/MiddleChart.vue
index d39772c..d6fb970 100644
--- a/src/pages/dashboard/base/components/MiddleChart.vue
+++ b/src/pages/dashboard/base/components/MiddleChart.vue
@@ -14,7 +14,7 @@
               theme="primary"
               mode="date"
               :default-value="LAST_7_DAYS"
-              @change="onCurrencyChange"
+              @change="(value) => onCurrencyChange(value as string[])"
             />
           </div>
         </template>
diff --git a/src/pages/dashboard/base/components/OutputOverview.vue b/src/pages/dashboard/base/components/OutputOverview.vue
index 764feee..51f12be 100644
--- a/src/pages/dashboard/base/components/OutputOverview.vue
+++ b/src/pages/dashboard/base/components/OutputOverview.vue
@@ -14,7 +14,7 @@
               theme="primary"
               mode="date"
               :default-value="LAST_7_DAYS"
-              @change="onStokeDataChange"
+              @change="(value) => onStokeDataChange(value as string[])"
             />
           </template>
           <div id="stokeContainer" style="width: 100%; height: 351px" class="dashboard-chart-container"></div>
diff --git a/src/pages/dashboard/detail/index.vue b/src/pages/dashboard/detail/index.vue
index fd245cd..ec3f11c 100644
--- a/src/pages/dashboard/detail/index.vue
+++ b/src/pages/dashboard/detail/index.vue
@@ -26,7 +26,7 @@
               theme="primary"
               mode="date"
               style="width: 248px"
-              @change="onMaterialChange"
+              @change="(value) => onMaterialChange(value as string[])"
             />
           </template>
           <div id="lineContainer" style="width: 100%; height: 416px" />
diff --git a/src/pages/list/base/index.vue b/src/pages/list/base/index.vue
index 84eeb74..92d2d7a 100644
--- a/src/pages/list/base/index.vue
+++ b/src/pages/list/base/index.vue
@@ -31,7 +31,7 @@
         :header-affixed-top="headerAffixedTop"
         @page-change="rehandlePageChange"
         @change="rehandleChange"
-        @select-change="rehandleSelectChange"
+        @select-change="(value) => rehandleSelectChange(value as number[])"
       >
         <template #status="{ row }">
           <t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light">
diff --git a/src/pages/list/card/components/DialogForm.vue b/src/pages/list/card/components/DialogForm.vue
index 9e63d98..25ed61a 100644
--- a/src/pages/list/card/components/DialogForm.vue
+++ b/src/pages/list/card/components/DialogForm.vue
@@ -74,7 +74,7 @@ const formVisible = ref(false);
 const formData = ref({ ...INITIAL_DATA });
 const textareaValue = ref('');
 
-const onSubmit = ({ validateResult, firstError }: SubmitContext<FormData>) => {
+const onSubmit = ({ validateResult, firstError }: SubmitContext) => {
   if (!firstError) {
     MessagePlugin.success('提交成功');
     formVisible.value = false;
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
index aa781e8..c7bf25e 100644
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@@ -2,15 +2,16 @@ import keys from 'lodash/keys';
 import { defineStore } from 'pinia';
 import { Color } from 'tvision-color';
 
-import { DARK_CHART_COLORS, LIGHT_CHART_COLORS } from '@/config/color';
+import { DARK_CHART_COLORS, LIGHT_CHART_COLORS, TColorSeries } from '@/config/color';
 import STYLE_CONFIG from '@/config/style';
 import { store } from '@/store';
+import { ModeType } from '@/types/interface';
 import { generateColorMap, insertThemeStylesheet } from '@/utils/color';
 
-const state = {
+const state: Record<string, any> = {
   ...STYLE_CONFIG,
   showSettingPanel: false,
-  colorList: {},
+  colorList: {} as TColorSeries,
   chartColors: LIGHT_CHART_COLORS,
 };
 
@@ -23,7 +24,7 @@ export const useSettingStore = defineStore('setting', {
     showSidebar: (state) => state.layout !== 'top',
     showSidebarLogo: (state) => state.layout === 'side',
     showHeaderLogo: (state) => state.layout !== 'side',
-    displayMode: (state): 'dark' | 'light' => {
+    displayMode: (state): ModeType => {
       if (state.mode === 'auto') {
         const media = window.matchMedia('(prefers-color-scheme:dark)');
         if (media.matches) {
@@ -31,14 +32,14 @@ export const useSettingStore = defineStore('setting', {
         }
         return 'light';
       }
-      return state.mode as 'dark' | 'light';
+      return state.mode as ModeType;
     },
-    displaySideMode: (state): 'dark' | 'light' => {
-      return state.sideMode as 'dark' | 'light';
+    displaySideMode: (state): ModeType => {
+      return state.sideMode as ModeType;
     },
   },
   actions: {
-    async changeMode(mode: 'dark' | 'light' | 'auto') {
+    async changeMode(mode: ModeType | 'auto') {
       let theme = mode;
 
       if (mode === 'auto') {
@@ -50,7 +51,7 @@ export const useSettingStore = defineStore('setting', {
 
       this.chartColors = isDarkMode ? DARK_CHART_COLORS : LIGHT_CHART_COLORS;
     },
-    async changeSideMode(mode: 'dark' | 'light') {
+    async changeSideMode(mode: ModeType) {
       const isDarkMode = mode === 'dark';
 
       document.documentElement.setAttribute('side-mode', isDarkMode ? 'dark' : '');
@@ -75,23 +76,23 @@ export const useSettingStore = defineStore('setting', {
           step: 10,
           remainInput: false, // 是否保留输入 不保留会矫正不合适的主题色
         });
-        colorMap = generateColorMap(brandTheme, newPalette, mode as 'light' | 'dark', brandColorIndex);
+        colorMap = generateColorMap(brandTheme, newPalette, mode, brandColorIndex);
         this.colorList[colorKey] = colorMap;
       }
       // TODO 需要解决不停切换时有反复插入 style 的问题
-      insertThemeStylesheet(brandTheme, colorMap, mode as 'light' | 'dark');
+      insertThemeStylesheet(brandTheme, colorMap, mode);
       document.documentElement.setAttribute('theme-color', brandTheme);
     },
     updateConfig(payload: Partial<TState>) {
       for (const key in payload) {
         if (payload[key as TStateKey] !== undefined) {
-          this[key] = payload[key as TStateKey];
+          this[key as TStateKey] = payload[key as TStateKey];
         }
         if (key === 'mode') {
-          this.changeMode(payload[key]);
+          this.changeMode(payload[key] as ModeType);
         }
         if (key === 'sideMode') {
-          this.changeSideMode(payload[key]);
+          this.changeSideMode(payload[key] as ModeType);
         }
         if (key === 'brandTheme') {
           this.changeBrandTheme(payload[key]);
diff --git a/src/types/interface.d.ts b/src/types/interface.d.ts
index ef782ff..b7dad43 100644
--- a/src/types/interface.d.ts
+++ b/src/types/interface.d.ts
@@ -1,8 +1,6 @@
 import type { TabValue } from 'tdesign-vue-next';
 import { LocationQueryRaw, RouteRecordName } from 'vue-router';
 
-import STYLE_CONFIG from '@/config/style';
-
 export interface RouteMeta {
   title?: string | Record<string, string>;
   icon?: string;
@@ -32,14 +30,6 @@ export interface MenuRoute {
 
 export type ModeType = 'dark' | 'light';
 
-export type SettingType = typeof STYLE_CONFIG;
-
-export type ClassName = { [className: string]: any } | ClassName[] | string;
-
-export type CommonObjType = {
-  [key: string]: string | number;
-};
-
 export interface UserInfo {
   name: string;
   roles: string[];
diff --git a/src/utils/color.ts b/src/utils/color.ts
index eaae69d..8843d78 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -3,6 +3,7 @@ import trim from 'lodash/trim';
 import { Color } from 'tvision-color';
 
 import { TColorToken } from '@/config/color';
+import { ModeType } from '@/types/interface';
 
 /**
  * 依据主题类型获取颜色
@@ -58,12 +59,7 @@ export function changeChartsTheme(chartsList: echarts.EChartsType[]): void {
 /**
  * 根据当前主题色、模式等情景 计算最后生成的色阶
  */
-export function generateColorMap(
-  theme: string,
-  colorPalette: Array<string>,
-  mode: 'light' | 'dark',
-  brandColorIdx: number,
-) {
+export function generateColorMap(theme: string, colorPalette: Array<string>, mode: ModeType, brandColorIdx: number) {
   const isDarkMode = mode === 'dark';
 
   if (isDarkMode) {
@@ -76,7 +72,7 @@ export function generateColorMap(
     colorPalette[0] = `${colorPalette[brandColorIdx]}20`;
   }
 
-  const colorMap = {
+  const colorMap: TColorToken = {
     '--td-brand-color': colorPalette[brandColorIdx], // 主题色
     '--td-brand-color-1': colorPalette[0], // light
     '--td-brand-color-2': colorPalette[1], // focus
@@ -95,7 +91,7 @@ export function generateColorMap(
 /**
  * 将生成的样式嵌入头部
  */
-export function insertThemeStylesheet(theme: string, colorMap: TColorToken, mode: 'light' | 'dark') {
+export function insertThemeStylesheet(theme: string, colorMap: TColorToken, mode: ModeType) {
   const isDarkMode = mode === 'dark';
   const root = !isDarkMode ? `:root[theme-color='${theme}']` : `:root[theme-color='${theme}'][theme-mode='dark']`;
 
diff --git a/tsconfig.json b/tsconfig.json
index 1703a2d..efb7481 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,11 @@
     "paths": {
       "@/*": ["src/*"]
     },
-    "noImplicitAny": true
+    "noImplicitAny": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
   },
   "include": [
     "**/*.ts",