feat: 将代码迁移至TS严格模式 (#684)

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

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

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

* feat: 将代码迁移至TS严格模式 - 启用严格函数类型检查

Author: timi137137

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

src/hooks/event/useWindowSizeFn.ts

@@ -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),

src/layouts/components/FrameContent.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);
 };
 

src/layouts/components/Header.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"
     >

src/layouts/components/LayoutContent.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: {

src/layouts/components/SideNav.vue

@@ -14,7 +14,7 @@
               theme="primary"
               mode="date"
               :default-value="LAST_7_DAYS"
-              @change="onCurrencyChange"
+              @change="(value) => onCurrencyChange(value as string[])"
             />
           </div>
         </template>

src/pages/dashboard/base/components/MiddleChart.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>

src/pages/dashboard/base/components/OutputOverview.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" />

src/pages/dashboard/detail/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">