ホーム エクスプローラ ヘルプ
登録 サインイン
root
/
tauri-app
1
1
フォーク 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

第二版菜单

John-Hong 2 年 前
親
3a309b19cb
コミット
4216664ec8
9 ファイル変更、59 行追加、19 行削除
分割表示 差分情報を表示
  1. 1 1
      index.html
  2. 5 1
      src/Router.tsx
  3. 11 2
      src/components/Layout/Layout.module.less
  4. 15 14
      src/components/Layout/Layout.tsx
  5. 5 1
      src/components/Menu/Menu.tsx
  6. 2 0
      src/pages/FileClear/FileClear.module.less
  7. 9 0
      src/pages/FileClear/FileClear.tsx
  8. 2 0
      src/pages/FileSort/FileSort.module.less
  9. 9 0
      src/pages/FileSort/FileSort.tsx

+ 1 - 1
index.html
ファイルの表示 

@@ -4,7 +4,7 @@
 
     <meta charset="UTF-8" />
 
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>Tauri + React + TS</title>
 
+    <title>System Tools</title>
 
   </head>
 
 
   <body>

+ 5 - 1
src/Router.tsx
ファイルの表示 

@@ -5,15 +5,19 @@ import Home from "@/pages/Home/Home";
 
 import About from "@/pages/About/About";
 
 import Finder from "@/pages/Finder/Finder";
 
 import Setting from "@/pages/Setting/Setting";
 
+import FileSort from "@/pages/FileSort/FileSort";
 
+import FileClear from "@/pages/FileClear/FileClear";
 
 export default function Router() {
 
   return (
 
     <Routes>
 
       <Route path="/" element={<Layout />}>
 
-        <Route index element={<Finder />} />
 
+        <Route index element={<FileSort />} />
 
         <Route path={"about"} element={<About />} />
 
         <Route path={"finder"} element={<Finder />} />
 
         <Route path={"setting"} element={<Setting />} />
 
         <Route path={"home"} element={<Home />} />
 
+        <Route path={"file-sort"} element={<FileSort />} />
 
+        <Route path={"file-clear"} element={<FileClear />} />
 
         {/*<Route index element={<Home />} />*/}
 
       </Route>
 
     </Routes>

+ 11 - 2
src/components/Layout/Layout.module.less
ファイルの表示 

@@ -9,8 +9,17 @@
 
     background-color: white;
 
     border-top-left-radius: 10px;
 
     border-bottom-left-radius: 10px;
 
-    height: 100vh;
 
-    overflow-y: scroll;
 
     flex: 1;
 
+
 
+    .scrollY {
 
+      height: calc(100vh - 64px);
 
+      overflow-y: scroll;
 
+    }
 
+  }
 
+  .placeholder {
 
+    font-size: 30px;
 
+    padding: 20px;
 
+    background-color: white;
 
+    box-shadow: 3px 0 4px 0 #666666;
 
   }
 
 }

+ 15 - 14
src/components/Layout/Layout.tsx
ファイルの表示 

@@ -1,25 +1,26 @@
 
 import * as React from "react";
 
-import {Routes, Route, Outlet, Link, useNavigate} from "react-router-dom";
 
-import styles from './Layout.module.less'
 
+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 Menu from '../Menu/Menu'
 
+import { listen, Event as TauriEvent, UnlistenFn } from "@tauri-apps/api/event";
 
+import Menu from "../Menu/Menu";
 
+import { Affix } from "antd";
 
 
 export default function Layout() {
 
   let navigate = useNavigate();
 
 
   function handleErr(msg: string) {
 
-    console.log(msg)
 
+    console.log(msg);
 
   }
 
 
   function handleSuc(msg: string) {
 
-    console.log(msg)
 
+    console.log(msg);
 
   }
 
 
   React.useEffect(() => {
 
     const unListen: UnlistenFn[] = [];
 
     listen("routing", (e: TauriEvent<string>) => {
 
-      navigate(e.payload)
 
+      navigate(e.payload);
 
       // history.push({
 
       //   pathname: e.payload,
 
       // });
 
@@ -29,7 +30,6 @@ export default function Layout() {
 
       })
 
       .catch((err) => handleErr(err.message));
 
 
-
 
     listen("success", (e: TauriEvent<Response>) => {
 
       handleSuc((e.payload as any).message);
 
     })
 
@@ -44,22 +44,23 @@ export default function Layout() {
 
       .then((ulf) => {
 
         unListen.push(ulf);
 
       })
 
-      .catch(() => {
 
-      });
 
+      .catch(() => {});
 
 
     return () => {
 
       for (const ulf of unListen) ulf();
 
     };
 
-
 
-  }, [])
 
+  }, []);
 
   return (
 
     <div className={styles.box}>
 
       <div className={styles.menuBox}>
 
         <Menu></Menu>
 
       </div>
 
       <div className={styles.content}>
 
-        <Outlet/>
 
+        <div className={styles.placeholder}>留白</div>
 
+        <div className={styles.scrollY}>
 
+          <Outlet />
 
+        </div>
 
       </div>
 
     </div>
 
-  )
 
+  );
 
 }

+ 5 - 1
src/components/Menu/Menu.tsx
ファイルの表示 

@@ -9,7 +9,6 @@ export default function Menu() {
 
   useEffect(() => {
 
     initMenu();
 
   }, []);
 
-  const [height, setHeight] = useState<number | string>(0);
 
 
   async function initMenu() {
 
     // const config = LogicalSize;
 
@@ -21,8 +20,13 @@ export default function Menu() {
 
     {
 
       label: "常用",
 
       child: [
 
+        {
 
+          label: "文件整理",
 
+          path: "/file-sort",
 
+        },
 
         {
 
           label: "文件清理",
 
+          path: "/file-clear",
 
         },
 
         {
 
           label: "重复文件",

+ 2 - 0
src/pages/FileClear/FileClear.module.less
ファイルの表示 

@@ -0,0 +1,2 @@
 
+.FileSortBox {
 
+}

+ 9 - 0
src/pages/FileClear/FileClear.tsx
ファイルの表示 

@@ -0,0 +1,9 @@
 
+import styles from "./FileClear.module.less";
 
+export default function FileClear() {
 
+  return (
 
+    <div className={styles.FileClearBox}>
 
+      FileClear FileClear
 
+      <div style={{ backgroundColor: "green", height: "200vh" }}>55</div>
 
+    </div>
 
+  );
 
+}

+ 2 - 0
src/pages/FileSort/FileSort.module.less
ファイルの表示 

@@ -0,0 +1,2 @@
 
+.FileClearBox {
 
+}

+ 9 - 0
src/pages/FileSort/FileSort.tsx
ファイルの表示 

@@ -0,0 +1,9 @@
 
+import styles from "./FileSort.module.less";
 
+export default function FileSort() {
 
+  return (
 
+    <div className={styles.FileSortBox}>
 
+      FileClear FileClear
 
+      <div style={{ backgroundColor: "green", height: "200vh" }}>FileClear</div>
 
+    </div>
 
+  );
 
+}