Merge branch 'feat-20220608-projectdata' of…

Merge branch 'feat-20220608-projectdata' of http://120.77.149.83/sunyihao/bkunyun into feat-20220608-projectdata

src/components/mui/MyPopover.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-11 09:33:46
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-11 11:33:17
+ * @FilePath: /bkunyun/src/components/mui/MyPopover.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import * as React from "react";
+import Popover, { PopoverProps } from "@mui/material/Popover";
+import Typography from "@mui/material/Typography";
+
+interface IProps extends Omit<PopoverProps, "open"> {
+  /** 触发行为 */
+  trigger?: "hover" | "click";
+  /** 触发dom */
+  children: React.ReactNode;
+  /** 显示内容 */
+  content: React.ReactNode;
+}
+
+const MyPopover = (props: IProps) => {
+  const [anchorEl, setAnchorEl] = React.useState<any | null>(null);
+
+  const {
+    trigger = "click",
+    children,
+    content,
+    anchorOrigin,
+    transformOrigin,
+  } = props;
+
+  const handlePopoverOpen = (event: any) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handelClick = (event: any) => {
+    setAnchorEl(event?.currentTarget);
+  };
+
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? "simple-popover" : undefined;
+
+  return (
+    <div>
+      <Typography
+        aria-owns={id}
+        onClick={trigger === "click" ? handelClick : undefined}
+        onMouseEnter={trigger === "hover" ? handlePopoverOpen : undefined}
+        onMouseLeave={trigger === "hover" ? handlePopoverClose : undefined}
+      >
+        {children}
+      </Typography>
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handlePopoverClose}
+        sx={{
+          pointerEvents: trigger === "hover" ? "none" : undefined,
+        }}
+        anchorOrigin={
+          anchorOrigin || {
+            vertical: "bottom",
+            horizontal: "center",
+          }
+        }
+        transformOrigin={
+          transformOrigin || {
+            vertical: "top",
+            horizontal: "center",
+          }
+        }
+      >
+        <Typography sx={{ p: 1 }}>{content}</Typography>
+      </Popover>
+    </div>
+  );
+};
+
+export default MyPopover;

src/components/mui/Select.tsx → src/components/mui/MySelect.tsx

@@ -2,7 +2,7 @@
  * @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
+ * @LastEditTime: 2022-06-11 18:22:50
  * @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
  */
@@ -23,10 +23,15 @@ interface IProps
   value?: IOption;
   options: IOption[];
   onChange?: (val: IOption) => void;
+  /** 类型变种 */
+  variant?: "standard" | "outlined" | "filled";
+  /** title */
   title?: string;
+  /** 是否显示title */
+  isTitle?: boolean;
 }
-export default function BasicSelect(props: IProps) {
-  const { value, options, onChange, title, input } = props;
+export default function MySelect(props: IProps) {
+  const { value, options, onChange, title, isTitle = false, variant } = props;
 
   const handleChange = (event: any) => {
     const newValue = options?.filter((item) => {
@@ -39,12 +44,12 @@ export default function BasicSelect(props: IProps) {
 
   return (
     <Box sx={{ minWidth: 120 }}>
-      <FormControl fullWidth>
-        {input ? null : (
+      <FormControl fullWidth variant={variant}>
+        {isTitle ? (
           <InputLabel id="demo-simple-select-label">
             {title || "请选择"}
           </InputLabel>
-        )}
+        ) : null}
         <Select
           labelId="demo-simple-select-label"
           id="demo-simple-select"

src/components/mui/MyTitle.tsx

+import { Box } from "@mui/material";
+
+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-11 11:35:22
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-11 15:10:56
+ * @FilePath: /bkunyun/src/components/mui/MyTitle.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+interface IProps {
+  /** 标题 */
+  title: string;
+  /** 自定义类名 */
+  className?: string;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+}
+const MyTitle = (props: IProps) => {
+  const { title } = props;
+  return (
+    <Box
+      style={{
+        padding: 12,
+      }}
+      {...props}
+    >
+      <span
+        style={{
+          display: "inline-block",
+          color: "#1E2633",
+          fontSize: 16,
+          fontWeight: 600,
+          padding: "0px 2px 8px 2px",
+          borderBottom: "3px solid #1370FF",
+        }}
+      >
+        {title}
+      </span>
+    </Box>
+  );
+};
+
+export default MyTitle;

src/views/ConsoleLayout/components/FileItem/index.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-11 15:46:42
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-11 15:49:11
+ * @FilePath: /bkunyun/src/views/ConsoleLayout/components/FileItem/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+const FileItem = () => {
+  return <div>dd</div>;
+};
+
+export default FileItem;

src/views/ConsoleLayout/components/TransferList/index.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-10 18:05:21
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-11 18:08:27
+ * @FilePath: /bkunyun/src/views/ConsoleLayout/components/TransferList/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { Box, InputLabel, MenuItem, Select } from "@mui/material";
+import { memo } from "react";
+
+import MySelect from "@/components/mui/MySelect";
+import MyTitle from "@/components/mui/MyTitle";
+import FileItem from "../FileItem";
+
+const TranSferList = () => {
+  return (
+    <Box style={{ width: 520, padding: 20 }}>
+      <MyTitle title="传输列表" />
+      <Box
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <Box style={{ color: "#8A9099" }}>请勿在上传过程中刷新页面！</Box>
+        <MySelect
+          variant="standard"
+          value={{
+            label: "默认线路",
+            value: "default",
+          }}
+          onChange={() => console.log(11)}
+          options={[
+            {
+              label: "默认线路",
+              value: "default",
+            },
+          ]}
+          size="small"
+        />
+      </Box>
+      <Box>
+        <FileItem />
+      </Box>
+    </Box>
+  );
+};
+
+export default memo(TranSferList);

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";