Skip to content

B
bkunyun
Commit 5d990cf9 authored by wuyongsheng's avatar wuyongsheng
Browse files
Options

feat: 资源中心入口页面优化

parent 99fe590c
Show whitespace changes
Inline Side-by-side
Showing with 30 additions and 241 deletions
src/api/api_prefix.ts
View file @ 5d990cf9
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:17:48
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-30 16:22:15
* @LastEditTime: 2022-10-17 11:51:35
* @FilePath: /bkunyun/src/api/api_prefix.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -36,7 +36,7 @@ switch (process.env.REACT_APP_ENV) {
BACKEND_API_URI_PREFIX = "https://www.cloudam.cn";
}
else {
BACKEND_API_URI_PREFIX = "http://47.75.104.171";
BACKEND_API_URI_PREFIX = "http://47.57.4.97";
}
break;
}
......
src/components/mui/Tabs.tsx deleted 100644 → 0
View file @ 99fe590c
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-09-01 19:34:35
* @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 } from "react";
import { isEqual } from "lodash";
import { useState } from "react";
import { Box } from "@mui/system";
import Tab from "@mui/material/Tab";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import { TabContext, TabList, TabPanel } from "@mui/lab";
import { Typography } from "@mui/material";
interface ITabList {
label: string;
value: string;
component: JSX.Element | React.ReactNode;
icon?: string;
iconed?: string;
iconHover?: string;
hide?: boolean;
disabled?: boolean;
}
interface IProps {
value?: string;
onChange?: (val: string) => void;
tabList: ITabList[];
defaultValue?: string;
tabPanelSx?: any;
allowNullValue?: boolean; // 是否允许空值
}
const theme = createTheme({
components: {
MuiTab: {
styleOverrides: {
root: {
paddingLeft: 0,
paddingRight: 0,
paddingTop: "8px",
paddingBottom: "8px",
minWidth: "20px",
marginRight: "32px",
color: "#8A9099",
":hover": {
color: "#1E2633",
},
selected: {
color: "#1976d2",
},
"&.Mui-disabled": {
color: "#C2C6CC",
},
},
},
},
// #C2C6CC
MuiTabs: {
styleOverrides: {
indicator: {
backgroundColor: "#1370FF",
},
},
},
},
});
const Tabs = (props: IProps) => {
const {
tabList,
value,
defaultValue,
onChange,
allowNullValue = false,
tabPanelSx = { padding: "24px 0 0 0" },
} = props;
const [tabValue, setTabValue] = useState(
defaultValue
? defaultValue
: allowNullValue
? ""
: tabList.filter((e) => !e.hide)[0].value
);
const [hoverValue, setHoverValue] = useState("");
const onTabChange = (val: string) => {
setTabValue(val);
onChange && onChange(val);
};
const getImgSrc = useCallback(
(item: ITabList) => {
let result = item.icon;
if (value === item.value || tabValue === item.value) {
result = item.iconed;
}
if (hoverValue === item.value) {
result = item.iconHover;
}
return result;
},
[hoverValue, value, tabValue]
);
const labelRender = (item: ITabList, key: number) => {
return (
<div
style={{ display: "flex", alignItems: "center" }}
onMouseOver={() => setHoverValue(item.value)}
onMouseOut={() => setHoverValue("")}
>
{item.icon ? (
<img
style={{ width: "16px", marginRight: "8px" }}
src={getImgSrc(item)}
alt=""
/>
) : (
""
)}
<Typography
sx={{
fontSize: "14px",
lineHeight: "22px",
height: "22px",
fontWeight: "400",
}}
>
{item.label}
</Typography>
</div>
);
};
return (
<ThemeProvider theme={theme}>
<TabContext value={value || tabValue}>
<Box sx={{ borderBottom: 1, borderColor: "#EDEFF2" }}>
<TabList
onChange={(e: any, val: string) => {
onTabChange(val);
}}
>
{tabList
?.filter((item) => !item.hide)
.map((item, key) => {
return (
<Tab
key={key}
label={labelRender(item, key)}
value={item.value || ""}
id={item.value}
disabled={item.disabled}
/>
);
})}
</TabList>
</Box>
{tabList
?.filter((item) => !item.hide)
.map((item) => {
return (
<TabPanel
sx={tabPanelSx}
value={item.value || ""}
key={item.value}
>
{item.component}
</TabPanel>
);
})}
</TabContext>
</ThemeProvider>
);
};
const handleEqual = (prvProps: IProps, nextProps: IProps) => {
if (isEqual(prvProps, nextProps)) {
return true;
}
return false;
};
export default memo(Tabs, handleEqual);
src/views/Project/ProjectSetting/index.tsx
View file @ 5d990cf9
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-13 16:51:56
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-17 15:36:29
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -15,7 +15,7 @@ import NoProject from "@/components/BusinessComponents/NoProject";
import { observer } from "mobx-react-lite";
import ProjectMembers from "./ProjectMembers";
import BaseInfo from "./BaseInfo";
import Tabs from "@/components/mui/Tabs";
import Tabs from "@/components/mui/MyTabs";
import usePass from "@/hooks/usePass";
const ProjectSetting = observer(() => {
......
src/views/Project/ProjectWorkbench/index.tsx
View file @ 5d990cf9
......@@ -2,7 +2,7 @@
* @Author: rocosen
* @Date: 2022-06-12 10:05:13
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-09-01 11:51:16
* @LastEditTime: 2022-10-17 15:36:38
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -14,7 +14,7 @@ import { useStores } from "@/store/index";
import WorkbenchTemplate from "./workbenchTemplate";
import WorkbenchList from "./workbenchList";
import Tabs from "@/components/mui/Tabs";
import Tabs from "@/components/mui/MyTabs";
import usePass from "@/hooks/usePass";
import NoProject from "@/components/BusinessComponents/NoProject";
import Template from "@/assets/project/workbenchTemplate.svg";
......
src/views/ResourceCenter/UserResources/index.tsx
View file @ 5d990cf9
......@@ -3,61 +3,40 @@ import usePass from "@/hooks/usePass";
import UserResourcesEnvironment from "./UserResourcesEnvironment";
import { useMemo, useState } from "react";
import classNames from "classnames";
import Tabs from "@/components/mui/MyTabs";
const tabs = [
const UserResources = () => {
const isPass = usePass();
const tabList = useMemo(() => {
return [
{
label: "工作流模板",
value: "template",
id: "USERRESOURCES_TEMPLATE",
label: "工作流模版",
value: "USERRESOURCES_TEMPLATE",
component: <div />,
hide: !isPass("USERRESOURCES_TEMPLATE"),
},
{
label: "工作流算子",
value: "floe",
id: "USERRESOURCES_FLOE",
value: "USERRESOURCES_FLOE",
component: <div />,
hide: !isPass("USERRESOURCES_FLOE"),
},
{
label: "应用环境",
value: "environment",
id: "USERRESOURCES_ENVIRONMENT",
value: "USERRESOURCES_ENVIRONMENT",
component: <UserResourcesEnvironment />,
hide: !isPass("USERRESOURCES_ENVIRONMENT"),
},
];
const UserResources = () => {
const isPass = usePass();
const [activeTab, setActiveTab] = useState("environment");
const renderTabs = useMemo(() => {
return tabs.filter((tab) => isPass(tab.id));
];
}, [isPass]);
console.log(renderTabs);
// () => {};
return (
<div className={style.userResources}>
<div className={style.top}>
<div className={style.title}>个人资源</div>
<div className={style.line}></div>
<div className={style.tabs}>
{renderTabs.map((tab) => {
return (
<div
className={classNames({
[style.tab]: true,
[style.activeTab]: activeTab === tab.value,
})}
onClick={() => setActiveTab(tab.value)}
key={tab.value}
>
{tab.label}
</div>
);
})}
</div>
</div>
<div className={style.content}>
{activeTab === "environment" && (
<UserResourcesEnvironment></UserResourcesEnvironment>
)}
</div>
<Tabs
title="个人资源"
tabList={tabList}
defaultValue={"USERRESOURCES_TEMPLATE"}
/>
</div>
);
};
......
src/views/WorkFlowEdit/components/ParameterSetting/index.tsx
View file @ 5d990cf9
......@@ -19,7 +19,7 @@ import MyRadio from "@/components/mui/MyRadio";
import questionMark from "@/assets/project/questionMark.svg";
import fileSelectIcon from "@/assets/project/fileSelect.svg";
import MySwitch from "@/components/mui/MySwitch";
import Tabs from "@/components/mui/Tabs";
import Tabs from "@/components/mui/MyTabs";
import { getCustomTemplateParameterCheckResult } from "../../util";
import MyTooltip from "@/components/mui/MyTooltip";
import { useSize } from "ahooks";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment