feat: 文件传输布局开发

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/MySelect.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2021-12-04 15:46:25
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @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
+ */
+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;
+  /** 类型变种 */
+  variant?: "standard" | "outlined" | "filled";
+  /** title */
+  title?: string;
+  /** 是否显示title */
+  isTitle?: boolean;
+}
+export default function MySelect(props: IProps) {
+  const { value, options, onChange, title, isTitle = false, variant } = 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 variant={variant}>
+        {isTitle ? (
+          <InputLabel id="demo-simple-select-label">
+            {title || "请选择"}
+          </InputLabel>
+        ) : null}
+        <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/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);