diff --git a/src/App.tsx b/src/App.tsx
index 5048381..564c2cf 100644
--- 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;
\ No newline at end of file
+export default App;
diff --git a/src/components/body/home/index.tsx b/src/components/body/home/index.tsx
index 4ab2022..72fa7d8 100644
--- 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
new file mode 100644
index 0000000..ec1c904
--- /dev/null
+++ 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%;
+}
diff --git a/src/components/body/set/index.tsx b/src/components/body/set/index.tsx
new file mode 100644
index 0000000..e872d15
--- /dev/null
+++ b/src/components/body/set/index.tsx
@@ -0,0 +1,235 @@
+import React, { useEffect, useState } from "react";
+import ccw from "../../../assets/ccw.svg";
+import cocrea from "../../../assets/cocrea.svg";
+import { Content } from "antd/es/layout/layout";
+import {
+  Form,
+  Input,
+  Button,
+  Switch,
+  Cascader,
+  Checkbox,
+  ColorPicker,
+  Radio,
+  Card,
+  Menu,
+  Flex,
+  Select,
+} from "antd";
+import Sider from "antd/es/layout/Sider";
+import { FormInstance } from "antd/es/form";
+import { listen } from "@tauri-apps/api/event";
+import styles from "./setting.module.scss";
+
+interface SettingItem {
+  type: string; // 组件类型，如'input'
+  label: string; // 设置项的标签
+  name: string; // 表单项的name，用于表单提交和校验
+  // 可以根据需求添加其他属性，如value, onChange等（但通常这些由Form.Item和Form管理）
+  options?: any; // Cascader组件的选项
+  //width默认值为100%
+  width?: string;
+}
+const items2: Array<any> = [
+  { key: "1", label: "Option 1" },
+  { key: "2", label: "Option 2" },
+  { key: "3", label: "Option 3" },
+  {
+    key: "sub1",
+    label: "Navigation One",
+
+    children: [
+      { key: "5", label: "Option 5" },
+      { key: "6", label: "Option 6" },
+      { key: "7", label: "Option 7" },
+      { key: "8", label: "Option 8" },
+    ],
+  },
+  {
+    key: "sub2",
+    label: "Navigation Two",
+
+    children: [
+      { key: "9", label: "Option 9" },
+      { key: "10", label: "Option 10" },
+      {
+        key: "sub3",
+        label: "Submenu",
+        children: [
+          { key: "11", label: "Option 11" },
+          { key: "12", label: "Option 12" },
+        ],
+      },
+    ],
+  },
+];
+
+const Setting: React.FC<{ settingList: SettingItem[] }> = ({ settingList }) => {
+  const [collapsed, setCollapsed] = useState(false);
+  const [collapsedImpotant, setCollapsedImpotant] = useState(false);
+  const [form] = Form.useForm(); // 创建表单实例
+  const [show, setShow] = useState(false);
+  listen("goOtherPage", (e) => {
+    if (e.payload === "setting") {
+      setShow(true);
+    } else {
+      setShow(false);
+    }
+  });
+  // 假设这里有一些事件监听逻辑或其他状态管理逻辑
+
+  // 渲染设置项的函数
+  const renderSettingItems = () => {
+    return settingList.map((item, index) => {
+      // 根据item.type来决定使用哪个组件，这里只处理'input'类型
+      if (item.type === "input") {
+        return (
+          <Form.Item
+            key={item.name}
+            label={item.label}
+            name={item.name}
+            // 示例校验规则
+          >
+            <Input style={{ width: item.width || "100%" }} />
+          </Form.Item>
+        );
+      }
+      if (item.type === "switch") {
+        return (
+          <Form.Item
+            key={item.name}
+            label={item.label}
+            name={item.name}
+            // 示例校验规则
+          >
+            <Switch />
+          </Form.Item>
+        );
+      }
+      //Cascader处理
+
+      if (item.type === "cascader") {
+        return (
+          <Form.Item
+            key={item.name}
+            label={item.label}
+            name={item.name}
+            // 示例校验规则
+          >
+            <Cascader
+              options={item.options}
+              style={{ width: item.width || "20%" }}
+            />
+          </Form.Item>
+        );
+      }
+
+      //Checkbox
+
+      if (item.type === "checkbox") {
+        return (
+          <Form.Item
+            key={item.name}
+            label={item.label}
+            name={item.name}
+            // 示例校验规则
+          >
+            <Checkbox.Group options={item.options} />
+          </Form.Item>
+        );
+      }
+      //ColorPicker
+
+      if (item.type === "colorPicker") {
+        return (
+          <Form.Item
+            key={item.name}
+            label={item.label}
+            name={item.name}
+            // 示例校验规则
+          >
+            <ColorPicker />
+          </Form.Item>
+        );
+      }
+      //Radio
+
+      if (item.type === "radio") {
+        return (
+          <Form.Item
+            key={item.name}
+            label={item.label}
+            name={item.name}
+            // 示例校验规则
+          >
+            <Radio.Group options={item.options} />
+          </Form.Item>
+        );
+      }
+      //Select
+
+      if (item.type === "select") {
+        return (
+          <Form.Item
+            key={item.name}
+            label={item.label}
+            name={item.name}
+            // 示例校验规则
+          >
+            <Select options={item.options} />
+          </Form.Item>
+        );
+      }
+      // 如果需要支持更多类型，可以在这里添加更多的条件分支
+      return null; // 如果类型不匹配，则返回null
+    });
+  };
+
+  if (!show) {
+    return null;
+  }
+  // 优化布局
+  const layout = {
+    labelCol: { span: 6 },
+    wrapperCol: { span: 18 },
+  };
+  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}
+        />
+      </Sider>
+      <Flex
+        wrap
+        justify="start"
+        align="flex-start"
+        gap="middle"
+        className={styles.div}
+      >
+        <Card className={styles.card}>
+          <Form form={form} layout="vertical">
+            {renderSettingItems()}
+            <Form.Item>
+              <Button type="primary" htmlType="submit">
+                提交
+              </Button>
+            </Form.Item>
+          </Form>
+        </Card>
+      </Flex>
+    </Content>
+  );
+};
+
+export default Setting;
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index fbf539a..58fce58 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -1,40 +1,40 @@
-import React, { useEffect, useState } from 'react';
-import { Layout, Menu, Button, Avatar, Tooltip } from 'antd';
-import styles from './Navbar.module.scss';
-import Logo from '../../assets/logo-ccw.png';
-import { appDataDir } from '@tauri-apps/api/path';
-import { BaseDirectory, readBinaryFile } from '@tauri-apps/api/fs';
-import AvatarIcon from './avatar/index';
-import { UserOutlined } from '@ant-design/icons';
-import { Window } from '../../globals';
+import React, { useEffect, useState } from "react";
+import { Layout, Menu, Button, Avatar, Tooltip } from "antd";
+import styles from "./Navbar.module.scss";
+import Logo from "../../assets/logo-ccw.png";
+import { appDataDir } from "@tauri-apps/api/path";
+import { BaseDirectory, readBinaryFile } from "@tauri-apps/api/fs";
+import AvatarIcon from "./avatar/index";
+import { UserOutlined } from "@ant-design/icons";
+import { Window } from "../../globals";
 
 const items = [
-    {
-        key: 'home',
-        label: `主页`,
-    },
-    {
-        key: 'sitting',
-        label: `设置`,
-    },
-    {
-        key: 'about',
-        label: `关于`,
-        children: [
-            { key: 'witcat', label: '白猫' },
-            { key: 'kuke', label: 'kuke工作室' },
-        ],
-    },
-    {
-        key: 'sponsor',
-        label: `赞助`,
-    },
+  {
+    key: "home",
+    label: `主页`,
+  },
+  {
+    key: "setting",
+    label: `设置`,
+  },
+  {
+    key: "about",
+    label: `关于`,
+    children: [
+      { key: "witcat", label: "白猫" },
+      { key: "kuke", label: "kuke工作室" },
+    ],
+  },
+  {
+    key: "sponsor",
+    label: `赞助`,
+  },
 ];
 const { Header } = Layout;
 
 const itemSelect = ({ key }: any) => {
-    console.log('Selected key:', key);
-    // 处理其他逻辑
+  console.log("Selected key:", key);
+  // 处理其他逻辑
 };
 
 const js_code = {
@@ -77,70 +77,90 @@ const login = `
     }
 
     console.log('Hello from Tauri!');
-`
+`;
 
 const Navbar: React.FC = () => {
-    const [imgSrc, setImgSrc] = useState<boolean | string>(false);
-
-    const log = () => {
-        if (!imgSrc) {
-
-            Window.createWindow('login', 'https://www.ccw.site/login?redirect=https://www.ccw.site/profile/personal', login, '登录');
-        } else {
-            Window.createWindow('ManagementLogin', 'https://www.ccw.site/profile/personal', "../src/null.js", '管理登录');
-        }
+  const [imgSrc, setImgSrc] = useState<boolean | string>(false);
+
+  const log = () => {
+    if (!imgSrc) {
+      Window.createWindow(
+        "login",
+        "https://www.ccw.site/login?redirect=https://www.ccw.site/profile/personal",
+        login,
+        "登录"
+      );
+    } else {
+      Window.createWindow(
+        "ManagementLogin",
+        "https://www.ccw.site/profile/personal",
+        "../src/null.js",
+        "管理登录"
+      );
     }
-
-    useEffect(() => {
-        const loadImage = async () => {
-            try {
-                const appDataDirPath = await appDataDir();
-                const imgPath = `${appDataDirPath}/headImg.png`;
-
-                // 读取文件内容
-                const imageData = await readBinaryFile(imgPath, { dir: BaseDirectory.AppData });
-                const imageBlob = new Blob([imageData], { type: 'image/png' });
-                const imageUrl = URL.createObjectURL(imageBlob);
-
-                setImgSrc(imageUrl);
-            } catch (error) {
-                console.error('Error loading image:', error);
-                setImgSrc(false);
-            }
-        };
-
-        loadImage();
-    }, []);
-
-
-
-    return (
-        <Header
-            style={{
-                position: 'sticky',
-                top: 0,
-                zIndex: 999,
-                width: '100%',
-                display: 'flex',
-                alignItems: 'center',
-            }}
+  };
+
+  useEffect(() => {
+    const loadImage = async () => {
+      try {
+        const appDataDirPath = await appDataDir();
+        const imgPath = `${appDataDirPath}/headImg.png`;
+
+        // 读取文件内容
+        const imageData = await readBinaryFile(imgPath, {
+          dir: BaseDirectory.AppData,
+        });
+        const imageBlob = new Blob([imageData], { type: "image/png" });
+        const imageUrl = URL.createObjectURL(imageBlob);
+
+        setImgSrc(imageUrl);
+      } catch (error) {
+        console.error("Error loading image:", error);
+        setImgSrc(false);
+      }
+    };
+
+    loadImage();
+  }, []);
+
+  return (
+    <Header
+      style={{
+        position: "sticky",
+        top: 0,
+        zIndex: 999,
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
+      }}
+    >
+      <img className={styles.logo} src={Logo} />
+      <h1 className={styles.title}>共创世界启动器</h1>
+      <Menu
+        theme="dark"
+        mode="horizontal"
+        defaultSelectedKeys={["home"]}
+        items={items}
+        style={{ flex: 1, minWidth: 0 }}
+        onSelect={itemSelect}
+        onClick={(e) => {
+          Window.postMessage("main", "goOtherPage", e.key);
+        }}
+      />
+      <Button type="primary" style={{ marginRight: "20px" }}>
+        去创作
+      </Button>
+      <Tooltip title={imgSrc ? "管理账号" : "点击登录"}>
+        <Avatar
+          icon={imgSrc ? <AvatarIcon /> : <UserOutlined />}
+          className={styles.avatar}
+          onClick={log}
         >
-            <img className={styles.logo} src={Logo} />
-            <h1 className={styles.title}>共创世界启动器</h1>
-            <Menu
-                theme="dark"
-                mode="horizontal"
-                defaultSelectedKeys={['home']}
-                items={items}
-                style={{ flex: 1, minWidth: 0 }}
-                onSelect={itemSelect}
-            />
-            <Button type="primary" style={{ marginRight: '20px' }}>去创作</Button>
-            <Tooltip title={imgSrc ? '管理账号' : '点击登录'}>
-                <Avatar icon={imgSrc ? <AvatarIcon /> : <UserOutlined />} className={styles.avatar} onClick={log}>USER</Avatar>
-            </Tooltip>
-        </Header>
-    );
+          USER
+        </Avatar>
+      </Tooltip>
+    </Header>
+  );
 };
 
 export default Navbar;
diff --git a/src/globals.ts b/src/globals.ts
index 2d2b781..00c6c59 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -76,7 +76,7 @@ const Window = {
         invoke('post_message', {
             title: title,
             id: id,
-            message: message
+            content: message
         }).catch((error) => console.error('Failed to post message:', error));
     },
     focusWindow: async (id: string) => {