Merge branch 'feat-permissions' into 'release'

Feat permissions

See merge request !52

package.json

@@ -6,7 +6,7 @@
   "homepage": "/v3/",
   "dependencies": {
     "@babel/core": "^7.16.0",
-    "@emotion/react": "^11.9.0",
+    "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
     "@mui/lab": "^5.0.0-alpha.84",
@@ -77,14 +77,15 @@
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.0.2",
     "terser-webpack-plugin": "^5.2.5",
+    "tss-react": "^3.7.0",
+    "tus-js-client": "2.1.1",
     "typescript": "^4.6.4",
     "use-immer": "^0.7.0",
     "web-vitals": "^2.1.4",
     "webpack": "^5.64.4",
     "webpack-dev-server": "^4.6.0",
     "webpack-manifest-plugin": "^4.0.2",
-    "workbox-webpack-plugin": "^6.4.1",
-    "tus-js-client": "2.1.1"
+    "workbox-webpack-plugin": "^6.4.1"
   },
   "scripts": {
     "start:master": "set \"REACT_APP_ENV=master\" && npm start",

src/assets/project/workbenchList.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1.Base基础/Icon图标/任务列表</title>
+    <defs>
+        <filter color-interpolation-filters="auto" id="filter-1">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.760000 0 0 0 0 0.776000 0 0 0 0 0.800000 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="工作台（管理员）空" transform="translate(-370.000000, -245.000000)">
+            <g id="编组-5" transform="translate(370.000000, 242.000000)">
+                <g id="1.Base基础/Icon图标/任务列表" transform="translate(0.000000, 3.000000)">
+                    <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+                    <g filter="url(#filter-1)" id="编组-4">
+                        <g transform="translate(0.500000, 0.000000)">
+                            <path d="M7.38809691,0.889939751 C7.45764437,0.855744844 7.53911808,0.85573765 7.60867158,0.889920274 L7.60867158,0.889920274 L14.1102244,4.08516037 C14.1529938,4.10617975 14.187927,4.13844408 14.2121677,4.17736742 C14.2364085,4.21629077 14.2499569,4.26187312 14.2499569,4.30952854 L14.2499569,4.30952854 L14.2499569,11.9840447 C14.2499569,12.0332683 14.2355127,12.0802004 14.2098426,12.119868 C14.1841726,12.1595356 14.1472766,12.1919385 14.1023731,12.2121037 L14.1023731,12.2121037 L7.60081331,15.1318104 C7.53565621,15.161071 7.46109499,15.1610648 7.39594277,15.1317934 L7.39594277,15.1317934 L0.897545722,12.2122049 C0.852652465,12.1920353 0.815766035,12.1596329 0.790102919,12.1199688 C0.764439802,12.0803047 0.75,12.033379 0.75,11.984163 L0.75,11.984163 L0.75,4.30940599 C0.75,4.26175853 0.763543923,4.21618307 0.78777749,4.17726362 L0.78777749,4.17726362 Z" id="路径-15" stroke="#979797" stroke-width="1.5"></path>
+                            <polyline id="路径-20" stroke="#979797" stroke-width="1.5" points="1.29720478 4.56847209 7.47016174 7.45 13.6431187 4.56847209"></polyline>
+                            <line x1="7.47016174" y1="7.39513959" x2="7.47016174" y2="14.8580198" id="路径-21" stroke="#979797" stroke-width="1.5"></line>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/project/workbenchList_select.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1.Base基础/Icon图标/任务列表</title>
+    <defs>
+        <filter color-interpolation-filters="auto" id="filter-1">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.076000 0 0 0 0 0.440000 0 0 0 0 1.000000 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="任务列表" transform="translate(-370.000000, -245.000000)">
+            <g id="编组-5" transform="translate(370.000000, 242.000000)">
+                <g id="1.Base基础/Icon图标/任务列表" transform="translate(0.000000, 3.000000)">
+                    <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+                    <g filter="url(#filter-1)" id="编组-4">
+                        <g transform="translate(0.500000, 0.000000)">
+                            <path d="M7.38809691,0.889939751 C7.45764437,0.855744844 7.53911808,0.85573765 7.60867158,0.889920274 L7.60867158,0.889920274 L14.1102244,4.08516037 C14.1529938,4.10617975 14.187927,4.13844408 14.2121677,4.17736742 C14.2364085,4.21629077 14.2499569,4.26187312 14.2499569,4.30952854 L14.2499569,4.30952854 L14.2499569,11.9840447 C14.2499569,12.0332683 14.2355127,12.0802004 14.2098426,12.119868 C14.1841726,12.1595356 14.1472766,12.1919385 14.1023731,12.2121037 L14.1023731,12.2121037 L7.60081331,15.1318104 C7.53565621,15.161071 7.46109499,15.1610648 7.39594277,15.1317934 L7.39594277,15.1317934 L0.897545722,12.2122049 C0.852652465,12.1920353 0.815766035,12.1596329 0.790102919,12.1199688 C0.764439802,12.0803047 0.75,12.033379 0.75,11.984163 L0.75,11.984163 L0.75,4.30940599 C0.75,4.26175853 0.763543923,4.21618307 0.78777749,4.17726362 L0.78777749,4.17726362 Z" id="路径-15" stroke="#979797" stroke-width="1.5"></path>
+                            <polyline id="路径-20" stroke="#979797" stroke-width="1.5" points="1.29720478 4.56847209 7.47016174 7.45 13.6431187 4.56847209"></polyline>
+                            <line x1="7.47016174" y1="7.39513959" x2="7.47016174" y2="14.8580198" id="路径-21" stroke="#979797" stroke-width="1.5"></line>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/project/workbenchTemplate.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1.Base基础/Icon图标/工作流模版</title>
+    <defs>
+        <filter color-interpolation-filters="auto" id="filter-1">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.760000 0 0 0 0 0.776000 0 0 0 0 0.800000 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="任务列表" transform="translate(-245.000000, -246.000000)">
+            <g id="编组-4" transform="translate(244.000000, 242.000000)">
+                <g id="编组-5" transform="translate(0.000000, 3.000000)" filter="url(#filter-1)">
+                    <g>
+                        <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+                        <g id="编组-4" transform="translate(1.000000, 1.000000)" stroke="#979797" stroke-width="1.5">
+                            <rect id="矩形" x="0.75" y="0.75" width="4.75" height="4.75" rx="1"></rect>
+                            <rect id="矩形备份-2" x="0.75" y="8.5" width="4.75" height="4.75" rx="1"></rect>
+                            <rect id="矩形备份" x="8.5" y="0.75" width="4.75" height="4.75" rx="1"></rect>
+                            <rect id="矩形备份-3" x="8.5" y="8.5" width="4.75" height="4.75" rx="1"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/project/workbenchTemplate_select.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1.Base基础/Icon图标/工作流模版</title>
+    <defs>
+        <filter color-interpolation-filters="auto" id="filter-1">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.076000 0 0 0 0 0.440000 0 0 0 0 1.000000 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="工作台（管理员）空" transform="translate(-245.000000, -246.000000)">
+            <g id="编组-4" transform="translate(244.000000, 242.000000)">
+                <g id="编组-5" transform="translate(0.000000, 3.000000)" filter="url(#filter-1)">
+                    <g>
+                        <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+                        <g id="编组-4" transform="translate(1.000000, 1.000000)" stroke="#979797" stroke-width="1.5">
+                            <rect id="矩形" x="0.75" y="0.75" width="4.75" height="4.75" rx="1"></rect>
+                            <rect id="矩形备份-2" x="0.75" y="8.5" width="4.75" height="4.75" rx="1"></rect>
+                            <rect id="矩形备份" x="8.5" y="0.75" width="4.75" height="4.75" rx="1"></rect>
+                            <rect id="矩形备份-3" x="8.5" y="8.5" width="4.75" height="4.75" rx="1"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/components/mui/Button.tsx

 import React, { FC } from "react";
 
+import { Props } from "ahooks/lib/useControllableValue";
+import { makeStyles } from "tss-react/mui";
 import { Typography, Menu, MenuItem, IconButton, Button } from "@mui/material";
-import { makeStyles } from "@mui/styles";
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import cx from "classnames"
 
 type ButtonTagProps = {
     text: string;
     variant?: "text" | 'contained' | 'outlined';
-    click: any;
+    click?: any;
     select?: any[];
     fontSize?: string;
     dropValue?: boolean;
     drop?: boolean;
-    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined,
-
+    color?: "inherit" | "primary" | "secondary" | undefined,
+    btnStyle?: any,
+    size?: "large" | "medium" | "small",
+    disabled?: boolean,
+    style?: any,
+    img?: JSX.Element;
+    selectCallBack?: (item: any, key: number) => void
 }
 
-const useStyles = makeStyles({
-    root: { backgroundColor: "#136EFA", boxShadow: "none !important", color: "#ffffff", "&:hover": { backgroundColor: "#ffffff  !important" } },
-    ArrowDropDownIconRoot: { color: "#8A9099", transition: "all 0.2s !important", transform: "rotate(0)" },
-    ArrowDropDownIconRootOpen: { color: "#8A9099", transform: "rotate(180deg)" },
-
-})
-
 const ButtonComponent = (props: ButtonTagProps) => {
-    const classes = useStyles();
+    const { size, disabled, variant, color, img, btnStyle = {},select, selectCallBack } = props;
+    const { classes, cx } = useStyles({});
     const [anchorEl, setAnchorEl] = React.useState(null);
 
     const handleClick = (event: { currentTarget: React.SetStateAction<null>; }) => setAnchorEl(event.currentTarget);
     const defultClick = (event: { stoppropagation: () => any; }) => event && event.stoppropagation && event.stoppropagation()
+    const handleCloseOption = (item: any, key: number) => {
+        setAnchorEl(null);
+        selectCallBack && selectCallBack(item, key)
+    }
     const handleClose = () => setAnchorEl(null);
 
+
     return (
         <>
             <Button
-                variant={props.variant || 'contained'}
-                color={props.color || "primary"}
+                size={size || "medium"}
+                variant={variant || 'contained'}
+                color={color || "primary"}
                 disableRipple={true}
                 disableFocusRipple={true}
+                disabled={disabled || false}
                 classes={{
-                    root: classes.root,
-                }}
-
-                sx={{ color: "#565C66" }}//暂定
+                    root: btnStyle.root || classes.root,
+                    // disabled: btnStyle.disabled || classes.disabled,
+                    containedSecondary: btnStyle.containedSecondary || classes.containedSecondary,
+                    outlined: btnStyle.outlined || classes.outlined,
+                    outlinedSecondary: btnStyle.outlinedSecondary || classes.outlinedSecondary,
+                    text: btnStyle.text || classes.text,
+                    textPrimary: btnStyle.textPrimary || classes.textPrimary,
+                    textSecondary: btnStyle.textSecondary || classes.textSecondary,
+                    sizeSmall: btnStyle.sizeSmall || classes.sizeSmall,
+                    sizeLarge: btnStyle.sizeLarge || classes.sizeLarge,
 
+                }}
+                style={{ ...props.style }}
                 onClick={props.select ? handleClick : (props.click || defultClick)}
             >
+                {img || ''}
                 <Typography style={{ fontSize: props.fontSize || "14px" }}>{props.text}</Typography>
                 {
                     (props.select && props.select.length > 0 || props.drop) && <ArrowDropDownIcon classes={{
@@ -58,38 +73,46 @@ const ButtonComponent = (props: ButtonTagProps) => {
                 }
             </Button>
             <Menu
-                id="product-menu"
-                keepMounted
+                id="simple-menu"
                 anchorEl={anchorEl}
+                keepMounted
                 open={Boolean(anchorEl)}
                 onClose={handleClose}
-                MenuListProps={{
-                    "aria-labelledby": "product-button",
-                }}
             >
                 {
-                    props.select && props.select.length > 0 && props.select.map((item, key) => {
+                    select && select.length > 0 && select.map((item, key) => {
                         return (
                             <MenuItem
-                                key={item.path}
-
-
-                                onClick={() => {
-                                    // navigate(item.path);
-                                    handleClose();
-                                }}
-                            >
-                                {item.name}
+                                key={key}
+                                classes={{ root: classes.menuItemRoot }}
+                                onClick={() => handleCloseOption(item, key)}>
+                                {item.name || ""}
                             </MenuItem>
-                        );
-                    })}
+                        )
+                    })
+                }
             </Menu>
         </>
-
-
     )
+}
 
+const useStyles = makeStyles<{}>()(
+    (theme, { }) => ({
+        root: { backgroundColor: "#136EFA", boxShadow: "none !important", color: "#ffffff", "&:hover": { backgroundColor: "#0055D9" } },
+        containedSecondary: { backgroundColor: "#D62C1F", boxShadow: "none !important", "&:hover": { backgroundColor: "#D82C1F" } },
+        outlined: { backgroundColor: '#FFFFFF', border: "1px solid #136EFA", boxShadow: "none !important", color: "#136EFA", "&:hover": { backgroundColor: "rgba(19, 110, 250, 0.1)" } },
+        outlinedSecondary: { border: "1px solid #D62C1F", color: "#D62C1F", "&:hover": { border: "1px solid #D62C1F", backgroundColor: "rgba(214, 44, 31, 0.1)" } },
+        label: { "& p": { fontSize: "13px" } },
+        text: { backgroundColor: 'transparent', boxShadow: "none !important" },
+        textPrimary: { color: "#136EFA", "&:hover": { backgroundColor: "#E8F1FF" } },
+        textSecondary: { color: "#F44335", "&:hover": { backgroundColor: "rgba(244, 67, 53, 0.1)" } },
+        sizeSmall: { "& p": { fontSize: "12px" } },
+        sizeLarge: { "& p": { fontSize: "14px" } },
+        menuItemRoot: {},
+        ArrowDropDownIconRoot: { color: "#8A9099", transition: "all 0.2s !important", transform: "rotate(0)" },
+        ArrowDropDownIconRootOpen: { color: "#8A9099", transform: "rotate(180deg)" },
+    })
+);
 
-}
 
 export default ButtonComponent;
\ No newline at end of file

src/components/mui/Tabs.tsx

@@ -8,25 +8,45 @@
  */
 import { memo } from "react";
 import { isEqual } from "lodash";
-
+import { useState, useMemo, useEffect } from "react";
 import { Box } from "@mui/system";
 import Tab from "@mui/material/Tab";
 import { TabContext, TabList, TabPanel } from "@mui/lab";
+import { Typography } from '@mui/material';
 
 interface ITabList {
   label: string;
   value: string;
   component: JSX.Element;
+  icon?: string;
+  iconed?: string;
+  hide?: boolean
 }
 
 interface IProps {
-  value: string;
-  onChange: (val: string) => void;
   tabList: ITabList[];
 }
 
 const Tabs = (props: IProps) => {
-  const { value, onChange, tabList } = props;
+  const { tabList } = props;
+  const [value, setValue] = useState(tabList.filter(e => !e.hide)[0].value);
+
+  const onChange = (val: string) => {
+    setValue(val);
+  };
+
+  const labelRender = (item: ITabList, key: number) => {
+    return (
+      <Box style={{ display: "flex", alignItems: "center" }}>
+        {
+          item.icon ? <img style={{ width: "14px", marginRight: "10px" }} src={value === item.value ? item.iconed : item.icon} alt="" />
+            : ""
+        }
+        <Typography sx={{ fontSize: "14px", fontWeight: '400' }}  >{item.label}</Typography>
+      </Box>
+    )
+  }
+
   return (
     <TabContext value={value}>
       <Box sx={{ borderBottom: 1, borderColor: "#F0F2F5" }}>
@@ -36,9 +56,15 @@ const Tabs = (props: IProps) => {
           }}
           aria-label="lab API tabs example"
         >
-          {tabList?.map((item) => {
+          {tabList?.map((item, key) => {
+            if (item.hide) return ""
             return (
-              <Tab label={item.label} value={item.value} key={item.value} />
+              <Tab
+                key={key}
+                label={labelRender(item, key)}
+                value={item.value}
+                id={item.value}
+              />
             );
           })}
         </TabList>

src/index.tsx

@@ -20,7 +20,7 @@ const theme = createTheme({
   },
   palette: {
     primary: { main: '#136EFA' },
-    secondary: { main: '#4EB9FB' }
+    secondary: { main: '#F44335' }
   }
 });
 

src/views/ConsoleLayout/index.tsx

@@ -45,6 +45,7 @@ const ConsoleLayout = observer(() => {
           <Button
             text={globalText.console}
             variant={"text"}
+            style={{ color: "#565C66" }}
             click={() => navigate("/home")}
           />
 
@@ -52,6 +53,7 @@ const ConsoleLayout = observer(() => {
             <Button
               text={globalText.product}
               variant={"text"}
+              style={{ color: "#565C66" }}
               click={handleProductClick}
               dropValue={productOpen}
               drop={true}

src/views/Project/ProjectSetting/index.tsx

@@ -19,8 +19,6 @@ import Tabs from "@/components/mui/Tabs";
 
 const ProjectSetting = observer(() => {
   const { currentProjectStore } = useStores();
-  const [value, setValue] = useState("projectMember");
-
   const tabList = useMemo(() => {
     return [
       {
@@ -36,10 +34,6 @@ const ProjectSetting = observer(() => {
     ];
   }, []);
 
-  const changeTabs = (val: string) => {
-    setValue(val);
-  };
-
   if (currentProjectStore.currentProjectInfo.name) {
     return (
       <div style={{ padding: 24 }}>
@@ -50,7 +44,7 @@ const ProjectSetting = observer(() => {
           </span>
         </div>
         <Box sx={{ width: "100%", typography: "body1" }}>
-          <Tabs value={value} onChange={changeTabs} tabList={tabList} />
+          <Tabs  tabList={tabList} />
         </Box>
       </div>
     );

src/views/Project/ProjectWorkbench/index.tsx

@@ -18,14 +18,24 @@ import WorkbenchList from "./workbenchList";
 import Tabs from "@/components/mui/Tabs";
 import usePass from "@/hooks/usePass";
 
+import Template from "@/assets/project/workbenchTemplate.svg"
+import Template_select from "@/assets/project/workbenchTemplate_select.svg"
+import List from "@/assets/project/workbenchList.svg"
+import List_select from "@/assets/project/workbenchList_select.svg"
+
+
+
+//ui
+import ButtonDemo from  "@/views/mui_demo/button"
+import InputDemo from "@/views/mui_demo/input"
+
 const ProjectWorkbench = observer(() => {
     const { currentProjectStore } = useStores();
     const isPass = usePass();
-    const [value, setValue] = useState("workbenchTemplate");
-
 
     useEffect(() => {
-        console.log(isPass("PROJECT_WORKBENCH_FLOES_USE",'USER'), "11111111111");
+        console.log(isPass("PROJECT_WORKBENCH_FLOES_USE", 'USER'), "11111111111");
+        console.log(isPass("PROJECT_WORKBENCH_FLOES"),'wwwwwwwwwww')
     }, [])
 
     const tabList = useMemo(() => {
@@ -34,18 +44,34 @@ const ProjectWorkbench = observer(() => {
                 label: "工作流模版",
                 value: "workbenchTemplate",
                 component: <WorkbenchTemplate />,
+                hide: !isPass("PROJECT_WORKBENCH_FLOES"),
+                icon: Template,
+                iconed: Template_select
             },
             {
                 label: "任务列表",
                 value: "workbenchList",
                 component: <WorkbenchList />,
+                icon: List,
+                iconed: List_select
+            },
+            {
+                label: "按钮组件",
+                value: "MUI_BUTTON",
+                component: <ButtonDemo />,
+                icon: List,
+                iconed: List_select
+            },
+            {
+                label: "输入框组件",
+                value: "MUI_INPUT",
+                component: <InputDemo />,
+                icon: List,
+                iconed: List_select
             },
         ];
     }, []);
 
-    const changeTabs = (val: string) => {
-        setValue(val);
-    };
 
     return (
         <div style={{ padding: 24 }}>
@@ -56,7 +82,7 @@ const ProjectWorkbench = observer(() => {
                 </span>
             </div>
             <Box sx={{ width: "100%", typography: "body1" }}>
-                <Tabs value={value} onChange={changeTabs} tabList={tabList} />
+                <Tabs tabList={tabList} />
             </Box>
         </div>
     );

src/views/Project/ProjectWorkbench/workbenchTemplate/components/addTemplate.tsx

@@ -8,6 +8,7 @@ import OutlinedInput from "@mui/material/OutlinedInput";
 import SearchIcon from "@mui/icons-material/Search";
 import Checkbox from '@mui/material/Checkbox';
 import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
+import noData from '../../../../../assets/project/noTemplate.svg'
 import _ from "lodash";
 
 const AddTemplate = (props: any) => {
@@ -45,6 +46,16 @@ const AddTemplate = (props: any) => {
                         </Button>
                     </Box>
 
+                    {
+                        addTemplateList.length === 0 && <Box sx={{
+                            display: 'flex', alignItems: 'center', flexDirection: 'column', minHeight: 'calc(100vh - 376px)',
+                            justifyContent: 'center'
+                        }}>
+                            <img alt="" src={noData} />
+                            <Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#8A9099' }}>暂未相关模版</Typography>
+                        </Box>
+                    }
+
                     <Box sx={{ display: "flex", flexWrap: 'wrap', overflowX: 'hidden', overflowY: 'overlay', marginLeft: '-8px' }} >
                         {
                             addTemplateList.map((item: any, key: any) => {

src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx

@@ -6,7 +6,7 @@
  * @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, useCallback, useEffect, useMemo, useState } from "react";
+import { memo, SetStateAction, useCallback, useEffect, useMemo, useState } from "react";
 import { Box, Typography } from "@mui/material";
 import styles from "./index.module.css";
 import OutlinedInput from "@mui/material/OutlinedInput";
@@ -29,9 +29,13 @@ import _ from "lodash";
 import { IResponse, useHttp } from "@/api/http";
 import { useStores } from "@/store";
 import usePass from "@/hooks/usePass";
+import { toJS } from "mobx";
+import { observer } from "mobx-react-lite";
 
-const ProjectMembers = () => {
+const ProjectMembers = observer(() => {
     const { currentProjectStore } = useStores();
+    const projectIdData = toJS(currentProjectStore.currentProjectInfo.id);
+
     const isPass = usePass();
 
     /** 搜索模板名称 */
@@ -92,6 +96,12 @@ const ProjectMembers = () => {
         });
     }, [currentProjectStore.currentProjectInfo.id, getTemplateInfo]);
 
+
+    useEffect(() => {
+        console.log('projectIdData: ', projectIdData);
+    }, [projectIdData])
+
+
     /** 点击添加工作流模版 */
     const onAddMember = () => {
         // setAddMemberDialog(true);
@@ -159,11 +169,17 @@ const ProjectMembers = () => {
 
     }
 
+    const searchChange = (data: any) => {
+        setTemplateName(data.length > 30 ? data.slice(0, 30) : data);
+    }
+
     useEffect(() => {
+        setTimeout(() => {
             getTemplateInfo({
                 projectId: currentProjectStore.currentProjectInfo.id as string,
                 title: templateName
             });
+        }, 300)
     }, [templateName]);
 
     return (
@@ -172,10 +188,9 @@ const ProjectMembers = () => {
             <Box className={styles.tabBox} >
                 <OutlinedInput
                     onChange={(e: any) => {
-                        _.debounce(() => {
-                            setTemplateName(e.target.value);
-                        }, 200)();
+                        searchChange(e.target.value)
                     }}
+                    value={templateName}
                     placeholder="输入关键词搜索"
                     size="small"
                     sx={{ width: 340, height: 32 }}
@@ -197,7 +212,7 @@ const ProjectMembers = () => {
             </Box>
 
             {
-                templateList.length === 0 && !isPass("PROJECT_WORKBENCH_FLOES_ADD", 'MANAGER') &&
+                templateList.length === 0 && templateName.length > 0 &&
                 <Box sx={{
                     display: 'flex', alignItems: 'center', flexDirection: 'column', minHeight: 'calc(100vh - 376px)',
                     justifyContent: 'center'
@@ -216,7 +231,7 @@ const ProjectMembers = () => {
                 </Box>
             }
             {
-                templateList.length === 0 && isPass("PROJECT_WORKBENCH_FLOES_ADD", 'MANAGER') && <Box className={styles.addNewTemplate}
+                templateList.length === 0 && templateName.length === 0 && isPass("PROJECT_WORKBENCH_FLOES_ADD", 'MANAGER') && <Box className={styles.addNewTemplate}
                     onClick={addTemplateBlock}
                 >
                     <Add sx={{ color: "#565C66", fontSize: "20px", width: "30px", height: '30px' }} />
@@ -244,6 +259,6 @@ const ProjectMembers = () => {
 
         </Box>
     );
-};
+});
 
 export default memo(ProjectMembers);

src/views/mui_demo/button.tsx

+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import _ from "lodash";
+import { IResponse, useHttp } from "@/api/http";
+import { useStores } from "@/store";
+import DeleteIcon from '@mui/icons-material/Delete';
+
+
+import Button from "@/components/mui/Button";
+
+const ProjectMembers = () => {
+    const http = useHttp();
+
+    const { currentProjectStore } = useStores();
+
+    useEffect(() => {
+
+    }, []);
+
+
+    return (
+        <>
+            <Button size={"large"} text={'确定'} />
+            &nbsp;&nbsp;
+            <Button text={'确定'} />
+            &nbsp;&nbsp;
+            <Button size={"small"} text={'确定'} />
+            <br /><br />
+            <Button size={"large"} text={'确定'} disabled />
+            &nbsp;&nbsp;
+            <Button text={'确定'} disabled />
+            &nbsp;&nbsp;
+            <Button size={"small"} text={'确定'} disabled />
+            <br /><br />
+            <Button size={"large"} color={"secondary"} text={'确定'} />
+            &nbsp;&nbsp;
+            <Button color={"secondary"} text={'确定'} />
+            &nbsp;&nbsp;
+            <Button size={"small"} color={"secondary"} text={'确定'} />
+            <br /> <br />
+            <Button text={'确定'} size={"large"} style={{ color: "aqua", background: "burlywood" }} />
+            &nbsp;&nbsp;
+            <Button text={'确定'} style={{ color: "aqua", background: "burlywood" }} />
+            &nbsp;&nbsp;
+            <Button text={'确定'} size={"small"} style={{ color: "aqua", background: "burlywood" }} />
+            <br /> <br />
+            outlined
+            <br />
+            <Button size={"large"} variant={"outlined"} text={'确定'} />
+            &nbsp;&nbsp;
+            <Button variant={"outlined"} text={'确定'} />
+            &nbsp;&nbsp;
+            <Button size={"small"} variant={"outlined"} text={'确定'} />
+            <br /> <br />
+            <Button size={"large"} variant={"outlined"} disabled text={'确定'} />
+            &nbsp;&nbsp;
+            <Button variant={"outlined"} disabled text={'确定'} />
+            &nbsp;&nbsp;
+            <Button size={"small"} variant={"outlined"} disabled text={'确定'} />
+            <br /> <br />
+            <Button size={"large"} variant={"outlined"} color={"secondary"} text={'确定'} />
+            &nbsp;&nbsp;
+            <Button variant={"outlined"} color={"secondary"} text={'确定'} />
+            &nbsp;&nbsp;
+            <Button size={"small"} variant={"outlined"} color={"secondary"} text={'确定'} />
+            <br /> <br />
+            <Button text={'确定'} size={"large"} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} />
+            &nbsp;&nbsp;
+            <Button text={'确定'} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} />
+            &nbsp;&nbsp;
+            <Button text={'确定'} size={"small"} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} />
+            <br /> <br />
+            text
+            <br />
+            <Button size={"large"} variant={"text"} text={'确定确定确定确定确定确定'} />
+            &nbsp;&nbsp;
+            <Button variant={"text"} text={'确定确定确定确定确定确定'} />
+            &nbsp;&nbsp;
+            <Button size={"small"} variant={"text"} text={'确定确定确定确定确定确定'} />
+            <br />
+            <Button size={"large"} disabled variant={"text"} text={'确定确定确定确定确定确定'} />
+            &nbsp;&nbsp;
+            <Button variant={"text"} disabled text={'确定确定确定确定确定确定'} />
+            &nbsp;&nbsp;
+            <Button size={"small"} disabled variant={"text"} text={'确定确定确定确定确定确定'} />
+            <br />
+            <Button size={"large"} color={"secondary"} variant={"text"} text={'确定确定确定确定确定确定'} />
+            &nbsp;&nbsp;
+            <Button variant={"text"} color={"secondary"} text={'确定确定确定确定确定确定'} />
+            &nbsp;&nbsp;
+            <Button size={"small"} color={"secondary"} variant={"text"} text={'确定确定确定确定确定确定'} />
+            <br /> <br />
+            img
+            <br />
+            <Button text={'确定确定确定确定确定确定'} img={<DeleteIcon />} />
+            <br /> <br />
+            select
+            <br />
+            <Button
+                text={'更多'}
+                select={
+                    [
+                        { name: "1111111" },
+                        { name: "1111111" },
+                        { name: "1111111" },
+                        { name: "1111111", color: "red" },
+                    ]
+                } />
+            <Button
+                text={'更多'}
+                color={"secondary"} variant={"text"}
+                select={
+                    [
+                        { name: "1111111" },
+                        { name: "1111111" },
+                        { name: "1111111" },
+                        { name: "1111111", color: "red" },
+                    ]
+                } />
+
+
+        </>
+    );
+};
+
+export default memo(ProjectMembers);

src/views/mui_demo/input.tsx

+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import _ from "lodash";
+import { IResponse, useHttp } from "@/api/http";
+import { useStores } from "@/store";
+import DeleteIcon from '@mui/icons-material/Delete';
+import { InputAdornment } from '@mui/material';
+import InputComponent from "@/components/mui/Input";
+
+const ProjectMembers = () => {
+    const http = useHttp();
+
+    const { currentProjectStore } = useStores();
+
+    useEffect(() => {
+
+    }, []);
+
+
+    return (
+        <>
+
+            <InputComponent
+                fullWidth={false}
+                label={"test"}
+                defaultValue={"sssssssss"}
+                size={'large'}
+            />
+            &nbsp;&nbsp;&nbsp;&nbsp;
+            <InputComponent
+                fullWidth={false}
+                label={"test"}
+                error={true}
+                helperText={"你还急急急靠靠靠靠靠靠靠靠靠靠靠靠靠靠"}
+            />&nbsp;&nbsp;&nbsp;&nbsp;
+            <InputComponent
+                fullWidth={false}
+                label={"test"}
+                size={'small'}
+                disabled
+            />&nbsp;&nbsp;&nbsp;&nbsp;
+            <InputComponent
+                fullWidth={false}
+                label={"xsmall"}
+                size={'xsmall'}
+            />&nbsp;&nbsp;&nbsp;&nbsp;
+            <InputComponent
+                fullWidth={false}
+                placeholder={"测试机哦"}
+                endAdornment={<InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>}
+            />&nbsp;&nbsp;&nbsp;&nbsp;
+            <InputComponent fullWidth={false} size={"small"} placeholder={"xxxxxx"} endAdornment={<InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>} />
+            <br /> <br />
+            <InputComponent
+                fullWidth={true}
+                select={
+                    {
+                        json: [{value:'1',label:"2"},{value:'3',label:"4"}]
+                    }
+                }
+            />
+            <br /><br />
+            {/* <SelectComponent
+                option={json}
+            />
+            <br /><br />
+            <SelectComponent
+                option={json}
+                size={"large"}
+            />
+            <br /><br />
+            <SelectComponent
+                option={json}
+                size={"small"}
+            /> */}
+            <br /><br />
+
+        </>
+    );
+};
+
+export default memo(ProjectMembers);