feat: 项目设置页面架子搭建

package.json

@@ -8,6 +8,7 @@
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
+    "@mui/lab": "^5.0.0-alpha.83",
     "@mui/material": "^5.6.4",
     "@mui/styles": "^5.8.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",

src/react-app-env.d.ts

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-05-31 10:17:23
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-05-31 16:39:05
+ * @FilePath: /bkunyun/src/react-app-env.d.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 /// <reference types="node" />
 /// <reference types="react" />
 /// <reference types="react-dom" />
@@ -69,3 +77,5 @@ declare module '*.module.sass' {
   const classes: { readonly [key: string]: string };
   export default classes;
 }
+
+declare module '@mui/lab';
\ No newline at end of file

src/router/index.ts

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-05-31 10:18:13
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-05-31 15:15:59
+ * @FilePath: /bkunyun/src/router/index.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+import { AnyMap } from "immer/dist/internal";
+ */
 import ConsoleLayout from "@/views/ConsoleLayout";
 import Home from "@/views/Home";
 import MenuLayout from "@/views/MenuLayout";
@@ -34,7 +43,7 @@ export const elements: {
     childrenRoutes,
   }: {
     childrenRoutes?: Array<route | operation>;
-  }) => JSX.Element;
+  }) => JSX.Element | any;
 } = {
   Demo: Demo,
   ProjectSetting: ProjectSetting,

src/views/Project/ProjectSetting/BaseInfo/index.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-05-31 10:18:13
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-01 09:15:10
+ * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { memo } from "react";
+
+import { Box } from "@mui/system";
+
+const BaseInfo = () => {
+  return <Box>基础信息</Box>;
+};
+
+export default memo(BaseInfo);

src/views/Project/ProjectSetting/ProjectMembers/index.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-05-31 10:18:13
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-01 09:14:02
+ * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { memo } from "react";
+
+import { Box } from "@mui/system";
+
+const ProjectMembers = () => {
+  return <Box>项目成员</Box>;
+};
+
+export default memo(ProjectMembers);

src/views/Project/ProjectSetting/index.tsx

-import { useMessage } from "@/components/MySnackbar";
-import usePass from "@/hooks/usePass";
-import { operation, route } from "@/router";
-import { Button } from "@mui/material";
+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-05-31 10:18:13
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-01 09:23:16
+ * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { memo, useState } from "react";
+
 import { Box } from "@mui/system";
-import { useEffect } from "react";
-import { useStores } from "@/store/index";
-import NoProject from "@/components/NoProject";
+import projectImg from "@/assets/project/projectIconSmall.svg";
+import Tab from "@mui/material/Tab";
+import { TabContext, TabList, TabPanel } from "@mui/lab";
+import ProjectMembers from "./ProjectMembers";
+import BaseInfo from "./BaseInfo";
+
+const ProjectSetting = () => {
+  const [value, setValue] = useState("projectMember");
+
+  console.log(setValue, 111);
+  const changeTabs = (a: any, val: any) => {
+    setValue(val);
+  };
 
-const ProjectSetting = ({
-  childrenRoutes,
-}: {
-  childrenRoutes?: Array<route | operation>;
-}) => {
-  const { currentProjectStore } = useStores();
-  const message = useMessage();
-  const isPass = usePass();
+  return (
+    <Box style={{ padding: 24 }}>
+      <div>
+        <img src={projectImg} alt="项目logo" />
+        <span>项目名称A</span>
+      </div>
 
-  useEffect(() => {
-    console.log(isPass("PROJECT_OVERIVEW_CREATE"), "11111111111");
-    console.log(isPass("PROJECT_SUMMARY_MEMBER"), "2222222");
-    console.log(isPass("test"), "33333");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  if (currentProjectStore.currentProjectInfo.name) {
-    return (
-      <Box>
-        <Box>ProjectSetting123</Box>
-        <Box>{JSON.stringify(childrenRoutes)}</Box>
-        <Box>{JSON.stringify(process.env.NODE_ENV)}</Box>
-        <Button onClick={() => message.success("测试测试")}>message测试</Button>
+      <Box sx={{ width: "100%", typography: "body1" }}>
+        <TabContext value={value}>
+          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+            <TabList onChange={changeTabs} aria-label="lab API tabs example">
+              <Tab label="项目成员" value="projectMember" />
+              <Tab label="基础信息" value="baseInfo" />
+            </TabList>
+          </Box>
+          <TabPanel value="projectMember">
+            <ProjectMembers />
+          </TabPanel>
+          <TabPanel value="baseInfo">
+            <BaseInfo />
+          </TabPanel>
+        </TabContext>
       </Box>
-    );
-  } else {
-    return <NoProject />;
-  }
+    </Box>
+  );
 };
 
-export default ProjectSetting;
+export default memo(ProjectSetting);