基础布局

package.json

@@ -1,10 +1,11 @@
 {
-  "name": "tauri-app",
+  "name": "system-tools",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "start": "tauri dev",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "tauri": "tauri"
@@ -12,6 +13,7 @@
   "dependencies": {
     "@tauri-apps/api": "^1.1.0",
     "antd": "^5.0.5",
+    "clsx": "^1.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.4.5",
@@ -25,6 +27,7 @@
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.0.0",
     "less": "^4.1.3",
+    "prettier": "^2.8.1",
     "typescript": "^4.6.4",
     "vite": "^3.0.2"
   }

pnpm-lock.yaml

@@ -9,7 +9,9 @@ specifiers:
   '@types/react-dom': ^18.0.6
   '@vitejs/plugin-react': ^2.0.0
   antd: ^5.0.5
+  clsx: ^1.2.1
   less: ^4.1.3
+  prettier: ^2.8.1
   react: ^18.2.0
   react-dom: ^18.2.0
   react-router: ^6.4.5
@@ -20,6 +22,7 @@ specifiers:
 dependencies:
   '@tauri-apps/api': 1.2.0
   antd: 5.0.5_biqbaboplfbrettd7655fr4n2y
+  clsx: 1.2.1
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
   react-router: 6.4.5_react@18.2.0
@@ -33,6 +36,7 @@ devDependencies:
   '@types/react-dom': 18.0.9
   '@vitejs/plugin-react': 2.2.0_vite@3.2.4
   less: 4.1.3
+  prettier: 2.8.1
   typescript: 4.9.3
   vite: 3.2.4_jli2cq6pksn2o7kwksfthnljyy
 
@@ -739,6 +743,11 @@ packages:
     resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
     dev: false
 
+  /clsx/1.2.1:
+    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
+    engines: {node: '>=6'}
+    dev: false
+
   /color-convert/1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -1236,6 +1245,12 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /prettier/2.8.1:
+    resolution: {integrity: sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dev: true
+
   /prr/1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
     dev: true

src-tauri/tauri.conf.json

@@ -6,18 +6,13 @@
     "distDir": "../dist"
   },
   "package": {
-    "productName": "tauri-app",
+    "productName": "System Tools",
     "version": "0.0.1"
   },
 
   "tauri": {
     "allowlist": {
-      "all": true,
-      "dialog": {
-        "all": true, 
-        "open": true,
-        "save": true
-      }
+      "all": true
     },
     "bundle": {
       "active": true,
@@ -61,10 +56,12 @@
     "windows": [
       {
         "fullscreen": false,
-        "height": 600,
+        "height": 735,
         "resizable": true,
         "title": "System Tools",
-        "width": 800
+        "width": 1150,
+        "hiddenTitle": true,
+        "titleBarStyle": "Overlay"
       }
     ]
   }

src/components/Layout/Layout.module.less

@@ -1,3 +1,11 @@
 .box {
-  background-color: transparent;
+  //background-color: transparent;
+  display: flex;
+  height: 100vh;
+  .menuBox {
+    width: 200px;
+  }
+  .content {
+    flex: 1;
+  }
 }

src/components/Layout/Layout.tsx

@@ -2,16 +2,20 @@ import * as React from "react";
 import {Routes, Route, Outlet, Link, useNavigate} from "react-router-dom";
 import styles from './Layout.module.less'
 // 监听 tauri 事件
-import { listen, Event as TauriEvent, UnlistenFn } from "@tauri-apps/api/event";
+import {listen, Event as TauriEvent, UnlistenFn} from "@tauri-apps/api/event";
+import Menu from '../Menu/Menu'
 
 export default function Layout() {
   let navigate = useNavigate();
+
   function handleErr(msg: string) {
     console.log(msg)
   }
+
   function handleSuc(msg: string) {
     console.log(msg)
   }
+
   React.useEffect(() => {
     const unListen: UnlistenFn[] = [];
     listen("routing", (e: TauriEvent<string>) => {
@@ -40,7 +44,8 @@ export default function Layout() {
       .then((ulf) => {
         unListen.push(ulf);
       })
-      .catch(() => {});
+      .catch(() => {
+      });
 
     return () => {
       for (const ulf of unListen) ulf();
@@ -49,7 +54,12 @@ export default function Layout() {
   }, [])
   return (
     <div className={styles.box}>
-      <Outlet />
+      <div className={styles.menuBox}>
+        <Menu></Menu>
+      </div>
+      <div className={styles.content}>
+        <Outlet/>
+      </div>
     </div>
   )
 }

src/components/Menu/Menu.module.less

@@ -0,0 +1,21 @@
+.box {
+  background-color: transparent;
+  .logoBox {
+    padding: 30px 0;
+    font-size: 20px;
+    text-align: center;
+    //height: 60px;
+  }
+  .menuBox {
+    .label {
+    }
+  }
+
+  &.parent {
+    display: block;
+
+    .label {
+      font-size: 12px;
+    }
+  }
+}

src/components/Menu/Menu.tsx

@@ -0,0 +1,46 @@
+import styles from "./Menu.module.less";
+// import type { ClassNameMap } from 'clsx';
+import clsx from "clsx";
+
+export default function Menu() {
+  const menuConfig = [
+    {
+      label: "常用",
+      child: [
+        {
+          label: "总类2",
+        },
+        {
+          label: "总类3",
+        },
+      ],
+    },
+    {
+      label: "总类",
+      child: [
+        {
+          label: "总类4",
+        },
+        {
+          label: "总类5",
+        },
+      ],
+    },
+  ];
+  return (
+    <div className={clsx(styles.box, styles.parent)}>
+      <div className={styles.logoBox}>占位符</div>
+      {menuConfig.map((item) => (
+        <div className={styles.menuBox} key={item.label}>
+          <div className={styles.label}>{item.label}</div>
+          <div className={styles.menuChildBox}>
+            {item?.child?.length > 0 &&
+              item?.child.map((childItem) => (
+                <div key={childItem.label}>{childItem.label}</div>
+              ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

src/global.d.ts

@@ -9,3 +9,22 @@ export declare interface InputHTMLAttributes<T> extends InputHTMLAttributes<T> {
   webkitdirectory?: boolean | undefined
   directory?: boolean | undefined
 }
+
+declare module 'clsx' {
+  type ClassValue = string | number | ClassDictionary | ClassArray | undefined | null | boolean;
+
+  interface ClassDictionary {
+    [ id: string ]: any;
+  }
+
+  interface ClassArray extends Array<ClassValue> {
+  }
+
+  type ClassNamesFn = (...classes: ClassValue[]) => string;
+
+  type ClassNamesExport = ClassNamesFn & { default: ClassNamesFn };
+
+  const classNames: ClassNamesExport;
+
+  export = classNames;
+}

src/types/clsx.d.ts

@@ -0,0 +1,6 @@
+export type ClassValue = ClassArray | ClassDictionary | string | number | null | boolean | undefined;
+export type ClassDictionary = Record<string, any>;
+export type ClassArray = ClassValue[];
+
+export declare function clsx(...inputs: ClassValue[]): string;
+export default clsx;

tsconfig.json

@@ -16,7 +16,10 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "clsx": [
+        "./src/types/clsx.d.ts"
+      ]
     }
   },
   "include": ["src"],