第一版菜单

src/App.css

@@ -1,7 +0,0 @@
-.logo.vite:hover {
-  filter: drop-shadow(0 0 2em #747bff);
-}
-
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafb);
-}

src/App.tsx

@@ -1,87 +0,0 @@
-import {useState, useCallback} from "react";
-import reactLogo from "./assets/react.svg";
-import {invoke} from "@tauri-apps/api/tauri";
-// import {createDir, BaseDirectory} from '@tauri-apps/api/fs';
-// Create the `$APPDATA/users` directory
-import {  homeDir } from '@tauri-apps/api/path';
-import "./App.css";
-
-function App() {
-  const [greetMsg, setGreetMsg] = useState("");
-  const [name, setName] = useState("");
-  const [filePath, setFilePath] = useState("");
-
-  // const inputOther:InputHTMLAttributes
-
-  async function greet() {
-    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-    setGreetMsg(await invoke("greet", {name}));
-  }
-
-  async function importFilePath() {
-    const homeDirPath = await homeDir();
-    // console.log('filePath', BaseDirectory);
-    setGreetMsg(await invoke("file_path", {name: `homeDirPath: ${homeDirPath}`   }));
-    // await createDir('users', { dir: BaseDirectory.AppData, recursive: true });
-    // debugger
-    // // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-    // setGreetMsg(await invoke("greet", { name }));
-  }
-
-  const uploader = useCallback((node: HTMLInputElement) => {
-    node?.setAttribute('webkitdirectory', '');
-    node?.setAttribute('directory', '');
-    node?.setAttribute('multiple', '');
-  }, []);
-
-  function showRealPath(e: any) {
-    console.log(3131, e.target.value);
-  }
-
-  // @ts-ignore
-  return (
-    <div className="container">
-      <h1>Welcome to Tauri!</h1>
-
-      <div className="row">
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo vite" alt="Vite logo"/>
-        </a>
-        <a href="https://tauri.app" target="_blank">
-          <img src="/tauri.svg" className="logo tauri" alt="Tauri logo"/>
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo"/>
-        </a>
-      </div>
-
-      <p>Click on the Tauri, Vite, and React logos to learn more.</p>
-
-      <div className="row">
-        <div>
-          <input
-            id="greet-input"
-            onChange={(e) => setName(e.currentTarget.value)}
-            placeholder="Enter a name..."
-          />
-          <button type="button" onClick={() => greet()}>
-            Greet
-          </button>
-        </div>
-        <div>
-          <div>import file path</div>
-          <input type="file" ref={uploader} onFocus={showRealPath} onChange={(e) => {
-            console.log('6262626262file', e);
-            console.log('6262626262file', uploader);
-          }}/>
-          <button type="button" onClick={() => importFilePath()}>
-            importFilePath
-          </button>
-        </div>
-      </div>
-      <p>{greetMsg}</p>
-    </div>
-  );
-}
-
-export default App;

src/Router.tsx

@@ -1,17 +1,21 @@
 import * as React from "react";
-import {Routes, Route, Outlet, Link} from "react-router-dom";
-import Layout from '@/components/Layout/Layout'
-import Home from '@/pages/Home/Home';
+import { Routes, Route, Outlet, Link } from "react-router-dom";
+import Layout from "@/components/Layout/Layout";
+import Home from "@/pages/Home/Home";
 import About from "@/pages/About/About";
 import Finder from "@/pages/Finder/Finder";
+import Setting from "@/pages/Setting/Setting";
 export default function Router() {
-  return <Routes>
-    <Route path="/" element={<Layout/>}>
-      <Route index element={<Finder />} />
-      <Route path={"about"} element={<About />} />
-      <Route path={"finder"} element={<Finder />} />
-      <Route path={"home"} element={<Home />} />
-      {/*<Route index element={<Home />} />*/}
-    </Route>
-  </Routes>
+  return (
+    <Routes>
+      <Route path="/" element={<Layout />}>
+        <Route index element={<Finder />} />
+        <Route path={"about"} element={<About />} />
+        <Route path={"finder"} element={<Finder />} />
+        <Route path={"setting"} element={<Setting />} />
+        <Route path={"home"} element={<Home />} />
+        {/*<Route index element={<Home />} />*/}
+      </Route>
+    </Routes>
+  );
 }

src/about.tsx

@@ -1,4 +0,0 @@
-function About() {
-  return <div>About</div>
-}
-export default About;

src/components/Layout/Layout.module.less

@@ -6,6 +6,11 @@
     width: 200px;
   }
   .content {
+    background-color: white;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    height: 100vh;
+    overflow-y: scroll;
     flex: 1;
   }
 }

src/components/Menu/Menu.module.less

@@ -4,10 +4,25 @@
     padding: 30px 0;
     font-size: 20px;
     text-align: center;
-    //height: 60px;
   }
   .menuBox {
     .label {
+      padding: 5px 10px 5px 10px;
+      //margin-bottom: 5px;
+    }
+    .childItemLabel {
+      padding: 5px 10px 5px 10px;
+      margin-bottom: 5px;
+      transition: background-color ease-in-out 150ms;
+      border-radius: 3px;
+      &:hover {
+        background-color: #f0f0f0;
+        cursor: pointer;
+        //box-shadow: -1px 0 2px 1px #efbe61 inset;
+      }
+      &.active {
+        background-color: #c1dffc;
+      }
     }
   }
 

src/components/Menu/Menu.tsx

@@ -1,42 +1,76 @@
 import styles from "./Menu.module.less";
-// import type { ClassNameMap } from 'clsx';
 import clsx from "clsx";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 export default function Menu() {
+  let navigate = useNavigate();
+  const [active, setActive] = useState<string>("");
+  useEffect(() => {
+    initMenu();
+  }, []);
+  const [height, setHeight] = useState<number | string>(0);
+
+  async function initMenu() {
+    // const config = LogicalSize;
+    // console.log({ LogicalSize: new LogicalSize() });
+    // console.log(window);
+    // setHeight(await window);
+  }
   const menuConfig = [
     {
       label: "常用",
       child: [
         {
-          label: "总类2",
+          label: "文件清理",
         },
         {
-          label: "总类3",
+          label: "重复文件",
         },
       ],
     },
     {
-      label: "总类",
+      label: "系统",
       child: [
         {
-          label: "总类4",
+          label: "字符查询",
+        },
+        {
+          label: "设置",
+          path: "/setting",
         },
         {
-          label: "总类5",
+          label: "关于我们",
+          path: "/about",
         },
       ],
     },
   ];
+  function menuHandle(path: string, label: string) {
+    setActive(label);
+    navigate(path);
+  }
   return (
     <div className={clsx(styles.box, styles.parent)}>
-      <div className={styles.logoBox}>占位符</div>
+      <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
+                  key={childItem.label}
+                  className={clsx(
+                    styles.childItemLabel,
+                    active === childItem.label && styles.active
+                  )}
+                  onClick={() =>
+                    menuHandle(childItem.path || "", childItem.label)
+                  }
+                >
+                  {childItem.label}
+                </div>
               ))}
           </div>
         </div>

src/pages/About/About.tsx

@@ -1,3 +1,3 @@
 export default function About() {
-  return <div>About</div>
+  return <div>About1</div>;
 }

src/pages/Finder/Finder.tsx

@@ -1,60 +1,63 @@
-import {useEffect, useState} from "react";
-import {invoke} from "@tauri-apps/api/tauri";
+import { useEffect, useState } from "react";
+import { invoke } from "@tauri-apps/api/tauri";
 // import {file} from "@tauri-apps/api/tauri";
-import { Button, Space } from 'antd';
-import { open, message } from '@tauri-apps/api/dialog';
+import { Button, Space } from "antd";
+import { open, message } from "@tauri-apps/api/dialog";
 import { tauri } from "@tauri-apps/api";
 // import { appDataDir } from '@tauri-apps/api/path';
 
 export default function Finder() {
-	const [selectPath, setSelectPath] = useState<string>('')
-	useEffect(() => {
-	if(selectPath) {
+  const [selectPath, setSelectPath] = useState<string>("");
+  useEffect(() => {
+    if (selectPath) {
+    }
+  }, [selectPath]);
+  async function selectDirectory() {
+    const selected = await open({
+      directory: true,
+      //   multiple: true,
+      //   defaultPath: await appDataDir(),
+    });
 
-	}
-	}, [selectPath])
-	async function selectDirectory() {
+    if (Array.isArray(selected)) {
+      setSelectPath(selected.toString());
+      // user selected multiple directories
+    } else if (selected === null) {
+      // user cancelled the selection
+    } else {
+      // user selected a single directory
+      setSelectPath(selected);
 
-		const selected = await open({
-		  directory: true,
-		//   multiple: true,
-		//   defaultPath: await appDataDir(),
-		});
+      //   const result = await tauri.execute({
+      // 	cmd: 'myCommand',
+      // 	args: ['arg1 value', 123]
+      //   })
+      await invoke("file_path", { name: selected, parentid: "" });
+      //   file_path
+    }
+  }
 
-		if (Array.isArray(selected)) {
-			setSelectPath(selected.toString());
-		  // user selected multiple directories
-		} else if (selected === null) {
-		  // user cancelled the selection
-		} else {
-		  // user selected a single directory
-		  setSelectPath(selected);
+  return (
+    <div>
+      <Space wrap>
+        <Button type="primary">Primary Button</Button>
+        <Button>Default Button</Button>
+        <Button type="dashed">Dashed Button</Button>
+        <Button type="text">Text Button</Button>
+        <Button type="link">Link Button</Button>
+      </Space>
 
-		//   const result = await tauri.execute({
-		// 	cmd: 'myCommand',
-		// 	args: ['arg1 value', 123]
-		//   })
-		   await invoke('file_path', {name: selected, parentid: ''})
-		//   file_path
-		}
-	}
-
-	return (
-		<div>
-			<Space wrap>
-				<Button type="primary">Primary Button</Button>
-				<Button>Default Button</Button>
-				<Button type="dashed">Dashed Button</Button>
-				<Button type="text">Text Button</Button>
-				<Button type="link">Link Button</Button>
-			</Space>
-
-			<div>finder</div>
-			<button onClick={() => selectDirectory()}>run</button>
-			<div>selectPath:</div>
-			<div>
-				{selectPath}
-			</div>
-		</div>
-	)
+      <div>finder</div>
+      <button onClick={() => selectDirectory()}>run</button>
+      <div>selectPath:</div>
+      <div>{selectPath}</div>
+      <div
+        style={{
+          height: "200vh",
+          background: "#999",
+          borderRadius: "10px",
+        }}
+      ></div>
+    </div>
+  );
 }

src/pages/Setting/Setting.tsx

@@ -0,0 +1,3 @@
+export default function Setting() {
+  return <div>Setting2</div>;
+}

src/style.css

@@ -5,7 +5,7 @@
   font-weight: 400;
 
   color: #0f0f0f;
-  background-color: #f6f6f6;
+  background-color: #fafafa;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -100,3 +100,8 @@ button {
     background-color: #0f0f0f98;
   }
 }
+
+body {
+  padding: 0;
+  margin: 0;
+}