feat(header&home&setting)标签页切换&设置界面

little-starts · Aug 22, 2024 · bd25424 · bd25424
2 parents ac4c2dd + 5fe6f31
commit bd25424
Show file tree

Hide file tree

Showing 6 changed files with 525 additions and 140 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,36 +1,101 @@
-import React, { useEffect } from 'react';
-import { Layout } from 'antd';
-import Navbar from './components/header/header';
-import styles from './App.module.scss';
-import Home from './components/body/home';
-import { listen } from '@tauri-apps/api/event';
+import React, { useEffect } from "react";
+import { Layout } from "antd";
+import Navbar from "./components/header/header";
+import styles from "./App.module.scss";
+import Home from "./components/body/home";
+import Setting from "./components/body/set";
+import { listen } from "@tauri-apps/api/event";
 
 interface CustomEventPayload {
   payload: string;
 }
 
 const App: React.FC = () => {
-
   useEffect(() => {
-    console.log('App is mounted');
-    listen('ccw', (event: CustomEventPayload) => {
+    console.log("App is mounted");
+    listen("ccw", (event: CustomEventPayload) => {
       console.log(event, event.payload, event.payload);
-      if (event.payload === 'reload') {
+      if (event.payload === "reload") {
         setTimeout(() => {
           location.reload();
         }, 1000);
       }
     });
-  }, [])
+  }, []);
+  const settingList = [
+    {
+      type: "input",
+      label: "输入框",
+      name: "username",
+    },
 
+    {
+      type: "switch",
+      label: "开关",
+      name: "enabled",
+    },
+    {
+      type: "cascader",
+      label: "联级选择框",
+      name: "region",
+      options: [
+        {
+          value: "zhejiang",
+          label: "Zhejiang",
+          children: [
+            {
+              value: "hangzhou",
+              label: "Hangzhou",
+              children: [
+                {
+                  value: "xihu",
+                  label: "West Lake",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: "checkbox",
+      label: "多选框",
+      name: "hobbies",
+      options: [
+        { label: "游泳", value: "swimming" },
+        { label: "跑步", value: "running" },
+        // ... 其他选项
+      ],
+      // 注意：对于Checkbox.Group，我们通常不会在settingItem中直接处理options，
+      // 而是会在renderSettingItems函数中根据options动态渲染Checkbox组件
+    },
+    {
+      type: "colorPicker",
+      label: "颜色选择器",
+      name: "color",
+      // ColorPicker组件通常不需要options属性，但你可以根据需要在settingItem中添加其他属性
+    },
+    {
+      type: "select",
+      label: "下拉选择框（单选）",
+      name: "gender",
+      options: [
+        { label: "男", value: "male" },
+        { label: "女", value: "female" },
+        // ... 其他选项
+      ],
+      // 注意：对于Radio.Group，处理方式与Checkbox.Group类似
+    },
+  ];
   return (
     <Layout>
       <Navbar />
       <Layout className={styles.content}>
         <Home></Home>
+        <Setting settingList={settingList}></Setting>
       </Layout>
     </Layout>
   );
 };
 
-export default App;
+export default App;
diff --git a/src/components/body/home/index.tsx b/src/components/body/home/index.tsx
@@ -1,3 +1,4 @@
+import { listen } from "@tauri-apps/api/event";
 import React, { useEffect, useState } from 'react';
 import ProjectCard from './ProjectCard';
 import { Button, Empty, Flex, FloatButton, Menu, Tooltip, Typography } from 'antd'
@@ -10,54 +11,72 @@ import Plus from '../../../assets/plus.svg';
 import Install from '../../../assets/install.svg';
 import { Window } from '../../../globals';
 
+
 // 作为 React 组件使用
 const items2: Array<any> = [
-    {
-        key: `ccw`,
-        icon: <img src={ccw} alt="" style={{ width: '20px' }} />,
-        label: `共创世界`,
-        children: new Array(4).fill(null).map((_, j) => {
-            const subKey = 1 * 4 + j + 1;
-            return {
-                key: subKey,
-                label: `option${subKey}`,
-            };
-        }),
-    }, {
-        key: `cocrea`,
-        icon: <img src={cocrea} alt="" style={{ width: '20px' }} />,
-        label: `cocrea`,
-        children: new Array(4).fill(null).map((_, j) => {
-            const subKey = 1 * 4 + j + 1;
-            return {
-                key: subKey,
-                label: `option${subKey}`,
-            };
-        }),
-    },
+  {
+    key: `ccw`,
+    icon: <img src={ccw} alt="" style={{ width: "20px" }} />,
+    label: `共创世界`,
+    children: new Array(4).fill(null).map((_, j) => {
+      const subKey = 1 * 4 + j + 1;
+      return {
+        key: subKey,
+        label: `option${subKey}`,
+      };
+    }),
+  },
+  {
+    key: `cocrea`,
+    icon: <img src={cocrea} alt="" style={{ width: "20px" }} />,
+    label: `cocrea`,
+    children: new Array(4).fill(null).map((_, j) => {
+      const subKey = 1 * 4 + j + 1;
+      return {
+        key: subKey,
+        label: `option${subKey}`,
+      };
+    }),
+  },
 ];
 
 const handleInstallClick = () => {
-    Window.createWindow('install', 'https://www.ccw.site', "../src/null.js", '安装');
+  Window.createWindow(
+    "install",
+    "https://www.ccw.site",
+    "../src/null.js",
+    "安装"
+  );
 };
 
 const Home: React.FC = () => {
-    const [collapsed, setCollapsed] = useState(false);
-    const [collapsedImpotant, setCollapsedImpotant] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
+  const [collapsedImpotant, setCollapsedImpotant] = useState(false);
+  const [show, setShow] = useState(true);
+  listen("goOtherPage", (e) => {
+    if (e.payload === "home") {
+      setShow(true);
+    } else {
+      setShow(false);
+    }
+  });
 
-    useEffect(() => {
-        window.addEventListener('resize', () => {
-            if (window.innerWidth < 600) {
-                setCollapsedImpotant(true);
-            } else {
-                setCollapsedImpotant(false);
-            }
-        });
-    }, []);
+  useEffect(() => {
+    window.addEventListener("resize", () => {
+      if (window.innerWidth < 600) {
+        setCollapsedImpotant(true);
+      } else {
+        setCollapsedImpotant(false);
+      }
+    });
+  }, []);
 
-    const description = '感谢大家的试玩\n如有bug、建议可以发到评论区\n核心共振讨论区：993746347😘\n个人主页还没做完，目前发出来测试下头像大小有没有问题√';
+  const description =
+    "感谢大家的试玩\n如有bug、建议可以发到评论区\n核心共振讨论区：993746347😘\n个人主页还没做完，目前发出来测试下头像大小有没有问题√";
 
+  if (show) {
     return (
+
         <Content className={styles.content}>
             <Sider collapsible collapsed={collapsedImpotant ? true : collapsed} onCollapse={(value) => setCollapsed(value)} theme={'light'} className={styles.sider}>
                 <Menu theme="light" defaultSelectedKeys={['1']} mode="inline" items={items2} className={styles.menu} />
@@ -97,7 +116,11 @@ const Home: React.FC = () => {
                 </Tooltip>
             </FloatButton.Group>
         </Content >
+
     );
+  } else {
+    return null;
+  }
 };
 
 export default Home;
diff --git a/src/components/body/set/Setting.module.scss b/src/components/body/set/Setting.module.scss
@@ -0,0 +1,42 @@
+.home {
+    position: sticky;
+    top: 0px;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    padding: 20px;
+    overflow: hidden;
+}
+
+.content {
+    width: 100vw;
+    padding: '0 48px';
+    height: calc(100vh - 64px);
+    display: flex;
+}
+
+.div {
+    padding: 20px;
+    width: 100%;
+    overflow: scroll;
+    overflow-x: hidden;
+}
+
+.sider {
+    height: calc(100vh - 64px);
+    overflow: auto;
+}
+
+.sider::-webkit-scrollbar {
+    display: none;
+    width: 0px;
+}
+
+.menu {
+    padding-bottom: 48px;
+
+}
+.card {
+    width: 100%;
+}