feat: 文件传输布局开发

src/components/mui/Select.tsx

-/*
- * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
- * @Date: 2021-12-04 15:46:25
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-07 21:13:38
- * @FilePath: /lionet-slb-pc/src/components/SearchView/components/Collapse.tsx
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
-import * as React from "react";
-import Box from "@mui/material/Box";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select, { SelectProps } from "@mui/material/Select";
-
-export interface IOption {
-  label: string;
-  value: string;
-  disabled?: boolean;
-}
-interface IProps
-  extends Omit<SelectProps, "value" | "options" | "onChange" | "title"> {
-  value?: IOption;
-  options: IOption[];
-  onChange?: (val: IOption) => void;
-  title?: string;
-}
-export default function BasicSelect(props: IProps) {
-  const { value, options, onChange, title, input } = props;
-
-  const handleChange = (event: any) => {
-    const newValue = options?.filter((item) => {
-      return item.value === event.target.value;
-    });
-    if (onChange) {
-      onChange(newValue[0] || { label: "", value: "" });
-    }
-  };
-
-  return (
-    <Box sx={{ minWidth: 120 }}>
-      <FormControl fullWidth>
-        {input ? null : (
-          <InputLabel id="demo-simple-select-label">
-            {title || "请选择"}
-          </InputLabel>
-        )}
-        <Select
-          labelId="demo-simple-select-label"
-          id="demo-simple-select"
-          label={title || "请选择"}
-          size="small"
-          {...props}
-          value={value?.value}
-          onChange={handleChange}
-        >
-          {options.length
-            ? options?.map((item: IOption) => {
-                return (
-                  <MenuItem value={item.value} disabled={item?.disabled}>
-                    {item.label}
-                  </MenuItem>
-                );
-              })
-            : null}
-        </Select>
-      </FormControl>
-    </Box>
-  );
-}

src/views/ConsoleLayout/index.module.css

 .topApp {
   height: 56px;
   background-color: white;
-  border-bottom: #E6E8EB 1px solid;
+  border-bottom: #e6e8eb 1px solid;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -18,23 +18,29 @@
 }
 
 .topRightBox {
-  padding-right: 30px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.topRightItem {
+  margin-right: 20px;
 }
 
 .ArrowDropDownIconRoot {
-  color: #8A9099;
+  color: #8a9099;
   transition: all 0.2s !important;
-  transform: rotate(0)
+  transform: rotate(0);
 }
 
 .ArrowDropDownIconRootOpen {
-  color: #8A9099;
-  transform: rotate(180deg)
+  color: #8a9099;
+  transform: rotate(180deg);
 }
 
 .menuPaper {
-  border: 1px solid #F0F2F5;
-  background: #FFFFFF;
+  border: 1px solid #f0f2f5;
+  background: #ffffff;
   border-radius: 4px;
   box-shadow: 4px 4px 20px 0px rgba(0, 24, 57, 0.06) !important;
 }
@@ -42,4 +48,4 @@
 .menuItemRoot {
   width: 143px;
   font-size: 14px !important;
-}
+}
\ No newline at end of file

src/views/ConsoleLayout/index.tsx

-import { Box, Menu, MenuItem } from "@mui/material";
 import React, { useEffect } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
-import style from "./index.module.css";
+import cx from "classnames";
+import { observer } from "mobx-react-lite";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import Add from "@mui/icons-material/Add";
+import Avatar from "@mui/material/Avatar";
+import { Box, Menu, MenuItem } from "@mui/material";
+
 import globalText from "@/utils/globalText_CN";
 import useIndex from "./useIndex";
 import { useStores } from "@/store/index";
-import { observer } from "mobx-react-lite";
 import Button from "@/components/mui/Button";
 import logo from "@/assets/img/logo.svg";
-import Avatar from "@mui/material/Avatar";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import cx from "classnames";
+import MyPopover from "@/components/mui/MyPopover";
+import TranSferList from "./components/TransferList";
+
+import style from "./index.module.css";
 
 const ConsoleLayout = observer(() => {
   const {
@@ -92,54 +97,67 @@ const ConsoleLayout = observer(() => {
         </Box>
 
         <Box className={style.topRightBox}>
-          <Box
-            sx={{ display: "flex", alignItems: "center" }}
-            onClick={handleUtilityClick}
+          <MyPopover
+            content={<TranSferList />}
+            transformOrigin={{
+              vertical: "top",
+              horizontal: "right",
+            }}
           >
-            <Avatar
-              sx={{
-                bgcolor: "#1370FF",
-                width: 28,
-                height: 28,
-                fontSize: "14px",
-                cursor: "pointer",
-              }}
+            <Box className={style.topRightItem}>
+              <Add />
+            </Box>
+          </MyPopover>
+          <Box className={style.topRightItem}>
+            <Box
+              sx={{ display: "flex", alignItems: "center" }}
+              onClick={handleUtilityClick}
             >
-              H
-            </Avatar>
-            <ArrowDropDownIcon
-              classes={{
-                root: cx({
-                  [style.ArrowDropDownIconRoot]: true,
-                  [style.ArrowDropDownIconRootOpen]: Boolean(utilityOpen),
-                }),
+              <Avatar
+                sx={{
+                  bgcolor: "#1370FF",
+                  width: 28,
+                  height: 28,
+                  fontSize: "14px",
+                  cursor: "pointer",
+                }}
+              >
+                H
+              </Avatar>
+              <ArrowDropDownIcon
+                classes={{
+                  root: cx({
+                    [style.ArrowDropDownIconRoot]: true,
+                    [style.ArrowDropDownIconRootOpen]: Boolean(utilityOpen),
+                  }),
+                }}
+              />
+            </Box>
+
+            <Menu
+              id="utility-menu"
+              anchorEl={utilityAnchorEl}
+              open={utilityOpen}
+              onClose={handleClose}
+              MenuListProps={{
+                "aria-labelledby": "utility-button",
               }}
-            />
+            >
+              {menuStore.utilityList.map((item) => {
+                return (
+                  <MenuItem
+                    key={item.path}
+                    onClick={() => {
+                      navigate(item.path);
+                      handleClose();
+                    }}
+                  >
+                    {item.name}
+                  </MenuItem>
+                );
+              })}
+            </Menu>
           </Box>
-
-          <Menu
-            id="utility-menu"
-            anchorEl={utilityAnchorEl}
-            open={utilityOpen}
-            onClose={handleClose}
-            MenuListProps={{
-              "aria-labelledby": "utility-button",
-            }}
-          >
-            {menuStore.utilityList.map((item) => {
-              return (
-                <MenuItem
-                  key={item.path}
-                  onClick={() => {
-                    navigate(item.path);
-                    handleClose();
-                  }}
-                >
-                  {item.name}
-                </MenuItem>
-              );
-            })}
-          </Menu>
         </Box>
       </Box>
       <Box>

src/views/Project/ProjectSetting/ProjectMembers/components/AddMember.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-07 21:50:55
+ * @LastEditTime: 2022-06-11 15:24:15
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -18,7 +18,7 @@ import SearchIcon from "@mui/icons-material/Search";
 import { IResponse, useHttp } from "@/api/http";
 import { useStores } from "@/store";
 import { useMessage } from "@/components/MySnackbar";
-import Select, { IOption } from "@/components/mui/Select";
+import MySelect, { IOption } from "@/components/mui/MySelect";
 interface IProps {
   setAddMemberDialog: (val: boolean) => void;
   addMemberDialog: boolean;
@@ -68,7 +68,7 @@ const AddMember = observer((props: IProps) => {
           (every) => every.value === item
         );
         return (
-          <Select
+          <MySelect
             input={<OutlinedInput />}
             value={
               defaultValue?.length

src/views/Project/ProjectSetting/ProjectMembers/components/ChangePermission.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-07 21:45:49
+ * @LastEditTime: 2022-06-11 15:25:23
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -11,7 +11,7 @@ import { memo, useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { toJS } from "mobx";
 
-import Select, { IOption } from "@/components/mui/Select";
+import MySelect, { IOption } from "@/components/mui/MySelect";
 import Dialog from "@/components/mui/Dialog";
 import { IResponse, useHttp } from "@/api/http";
 import { useStores } from "@/store/index";
@@ -93,7 +93,7 @@ const ChangePermission = observer((props: IProps) => {
         title="更改权限"
       >
         <div style={{ marginTop: 12 }}>
-          <Select
+          <MySelect
             title="项目权限"
             value={selectValue}
             onChange={changePermission}

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

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-07 21:39:30
+ * @LastEditTime: 2022-06-10 18:08:00
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -16,7 +16,6 @@ import SearchIcon from "@mui/icons-material/Search";
 import Add from "@mui/icons-material/Add";
 import Table from "@/components/Material.Ui/Table";
 import { IResponse, useHttp } from "@/api/http";
-import Input from "@/components/Material.Ui/Input";
 import RemoveItem from "./components/RemoveItem";
 import ChangePermission from "./components/ChangePermission";
 import AddMember from "./components/AddMember";