ui: add types

frontend/package.json

@@ -29,7 +29,7 @@
     "postcss-pxtorem": "^6.0.0",
     "terser": "^5.19.1",
     "typescript": "^5.4.2",
-    "vite": "^4.4.4",
+    "vite": "^6.0.7",
     "vite-plugin-compression": "^0.5.1"
   }
 }

frontend/src/App.vue

@@ -1,13 +1,13 @@
 <template>
     <router-view/>
 </template>
-<script setup>
+<script setup lang="ts">
 import { onMounted } from 'vue';
 
 onMounted(() => {
   const loadingElement = document.getElementById('loadingPage');
   if (loadingElement) {
-    loadingElement.remove();
+    (loadingElement as HTMLElement).remove();
   }
 });
 </script>

frontend/src/components/global/iconFont.ts

@@ -1,5 +1,5 @@
 import { createFromIconfontCN } from '@ant-design/icons-vue'
-import { h } from 'vue'
+import { h, VNode } from 'vue'
 
 const IconFont = createFromIconfontCN({
   scriptUrl: 'https://at.alicdn.com/t/font_2456157_4ovzopz659q.js',
@@ -11,7 +11,11 @@ const IconFont = createFromIconfontCN({
   },
 })
 
-const DynamicIconFont = props => {
+interface Props {
+  type?: string;
+}
+
+const DynamicIconFont = (props: Props): VNode => {
   return h(IconFont, { type: props.type || 'icon-fengche' })
 }
 

frontend/src/components/global/index.ts

@@ -1,7 +1,7 @@
 import iconFont from './iconFont';
 
 // Use import.meta.globEager to dynamically import all .vue files in the directory
-const modules = import.meta.globEager('./*.vue');
+const modules: { [key: string]: { default: any } } = import.meta.glob('./*.vue', { eager: true });
 
 // Create a map of component names to their default exports
 const map: { [key: string]: any } = {};

frontend/src/layouts/AppSider.vue

@@ -29,15 +29,28 @@
     </a-layout>
   </a-layout>
 </template>
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 
+// 定义菜单项的类型
+interface MenuItem {
+  icon: string;
+  title: string;
+  pageName: string;
+  params: Record<string, any>;
+}
+
+// 定义菜单的类型
+interface Menu {
+  [key: string]: MenuItem;
+}
+
 const router = useRouter();
 
-const collapsed = ref(true);
-const current = ref('menu_1');
-const menu = ref({
+const collapsed = ref<boolean>(true);
+const current = ref<string>('menu_1');
+const menu = ref<Menu>({
   'menu_1': {
     icon: 'icon-fengche',
     title: '框架',
@@ -65,10 +78,10 @@ const menu = ref({
 });
 
 onMounted(() => {
-  menuHandle();
+  menuHandle(null);
 });
 
-function menuHandle(e) {
+function menuHandle(e: any): void {
   console.log('sider menu e:', e);
   if (e) {
     current.value = e.key;

frontend/src/layouts/Menu.vue

@@ -23,10 +23,10 @@
     </a-layout>
   </a-layout>
 </template>
-<script setup>
+<script setup lang="ts">
 import { ref, watch, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
-import subMenu from '@/router/subMenu';
+import { MenuCategory, MenuStructure, subMenu } from '@/router/subMenu';
 
 const props = defineProps({
   id: {
@@ -36,10 +36,10 @@ const props = defineProps({
 });
 
 const router = useRouter();
-const current = ref('menu_100');
-const menu = ref({});
+const current = ref<string>('menu_100');
+const menu = ref<MenuCategory>();
 
-watch(() => props.id, (newValue) => {
+watch(() => props.id, (newValue: string) => {
   console.log('watch menu id ', newValue);
   // 切换 appSider 时，重置 current
   current.value = "menu_100"
@@ -52,12 +52,13 @@ onMounted(() => {
 
 function menuHandle() {
   console.log('handle menu id:', props.id);
-  menu.value = subMenu[props.id];
+  const key: keyof MenuStructure = props.id as keyof MenuStructure;
+  menu.value = subMenu[key];
   const linkInfo = menu.value[current.value];
   router.push({ name: linkInfo.pageName, params: linkInfo.params });
 }
 
-function changeMenu(e) {
+function changeMenu(e: any) {
   current.value = e.key;
 }
 </script>

frontend/src/main.ts

@@ -9,16 +9,21 @@ import Router from './router/index';
 
 const app = createApp(App)
 
-// Register global components
-Object.keys(components).forEach((key) => {
-  app.component(key, components[key]);
-});
+// components
+type ComponentsType = typeof components;
+for (const componentName in components) {
+  if (Object.prototype.hasOwnProperty.call(components, componentName)) {
+    const component = components[componentName as keyof ComponentsType];
+    app.component(componentName, component);
+  }
+}
 
-// Register Ant Design Vue icons
-Object.keys(AntIcon).forEach((key) => {
-  const whiteList = ['createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor', 'default'];
-  if (!whiteList.includes(key)) {
-    app.component(key, AntIcon[key]);
+// icon
+const whiteList = ['createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor', 'default']
+const iconKeys = Object.keys(AntIcon) as Array<keyof typeof AntIcon>;
+iconKeys.forEach(key => {
+  if (!whiteList.includes(key as typeof whiteList[number])) {
+    app.component(key.toString(), AntIcon[key]);
   }
 });
 

frontend/src/router/index.ts

@@ -1,9 +1,9 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import routerMap from './routerMap'
 
 const Router = createRouter({
   history: createWebHashHistory(),
-  routes: routerMap,
+  routes: routerMap as RouteRecordRaw[],
 })
 
 export default Router

frontend/src/router/subMenu.ts

@@ -1,5 +1,24 @@
 // 子菜单
-export default {
+
+export interface MenuItem {
+  icon: string;
+  title: string;
+  pageName: string;
+  params: Record<string, any>;
+}
+
+export interface MenuCategory {
+  [key: string]: MenuItem;
+}
+
+export interface MenuStructure {
+  framework: MenuCategory;
+  os: MenuCategory;
+  effect: MenuCategory;
+  cross: MenuCategory;
+}
+
+export const subMenu: MenuStructure = {
 	framework: {
 		'menu_100' : {
 			icon: 'profile',
@@ -98,4 +117,4 @@ export default {
       params: {}
     },                                            
   },
-}
+}

frontend/src/types/env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+declare module '*.vue' {
+	import type { DefineComponent } from 'vue';
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}
+
+// declare global {
+// 	interface Window {
+// 	  electron?: any;
+// 	}
+// }

frontend/src/types/source.d.ts

@@ -0,0 +1,7 @@
+// 声明一个模块，防止引入文件时报错
+declare module '*.json';
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.scss';
+declare module '*.ts';
+declare module '*.js';

frontend/src/utils/ipcRenderer.ts

@@ -1,3 +1,9 @@
+declare global {
+	interface Window {
+	  electron?: any;
+	}
+}
+
 const Renderer = (window.require && window.require('electron')) || window.electron || {};
 
 /**

frontend/tsconfig.json

@@ -12,6 +12,8 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "importHelpers": true,
+    "resolveJsonModule": true,
+    
     // 定义一个变量就必须给它一个初始值
 		"strictPropertyInitialization": false,
 		// 允许使用obj[key]访问对象属性

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "ee-bin dev",
     "build": "npm run build-frontend && ee-bin encrypt",
-    "start": "ee-bin start",
+    "start": "ee-bin encrypt && ee-bin start",
     "dev-frontend": "ee-bin dev --serve=frontend",
     "dev-electron": "ee-bin dev --serve=electron",
     "dev-go": "ee-bin exec --cmds=go",
@@ -17,14 +17,14 @@
     "build-go-m": "ee-bin move --flag=go_static,go_config,go_package,go_images && ee-bin build --cmds=go_m",
     "build-go-l": "ee-bin move --flag=go_static,go_config,go_package,go_images && ee-bin build --cmds=go_l",
     "build-python": "ee-bin build --cmds=python && ee-bin move --flag=python_dist",
-    "clean": "ee-bin clean",
-    "icon": "ee-bin icon",
-    "re-sqlite": "electron-rebuild -f -w better-sqlite3",
     "build-w": "ee-bin build --cmds=win64",
     "build-we": "ee-bin build --cmds=win_e",
     "build-m": "ee-bin build --cmds=mac",
     "build-m-arm64": "ee-bin build --cmds=mac_arm64",
     "build-l": "ee-bin build --cmds=linux",
+    "clean": "ee-bin clean",
+    "icon": "ee-bin icon",
+    "re-sqlite": "electron-rebuild -f -w better-sqlite3",
     "debug-dev": "cross-env DEBUG=ee-* ee-bin dev",
     "debug-encrypt": "ee-bin encrypt",
     "debug-electron": "cross-env DEBUG=ee-* ee-bin dev --serve=electron",