Commit 23558f9e authored by chenshouchao's avatar chenshouchao

feat: 切换项目逻辑修改, switch组件样式修改

parent e768552c
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* @FilePath: /bkunyun/src/components/mui/MySwitch.tsx * @FilePath: /bkunyun/src/components/mui/MySwitch.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
import * as React from "react"; import React, { useMemo } from "react";
import Switch, { SwitchProps } from "@mui/material/Switch"; import Switch, { SwitchProps } from "@mui/material/Switch";
import { ThemeProvider, createTheme } from "@mui/material/styles"; import { ThemeProvider, createTheme } from "@mui/material/styles";
...@@ -17,43 +17,67 @@ interface IMySwitchProps extends SwitchProps { ...@@ -17,43 +17,67 @@ interface IMySwitchProps extends SwitchProps {
disabled?: boolean; disabled?: boolean;
} }
const theme = createTheme({ const MySwitch = (props: IMySwitchProps) => {
components: { const {
MuiSwitch: { value,
styleOverrides: { defaultChecked,
root: { onChange,
boxSizing: "border-box", disabled = false,
padding: "0", size,
}, ...other
switchBase: { } = props;
top: "4px",
left: "4px", const bgColor = useMemo(() => {
padding: 0, if (disabled) {
"&.Mui-checked": { if (value) {
left: "2px", return "rgba(166, 211, 255, 1)";
"& + .MuiSwitch-track": { } else {
backgroundColor: "#1370ff", return "rgba(221, 225, 230, 1)";
opacity: 1, }
} else {
if (value) {
return "rgba(19, 112, 255, 1)";
} else {
return "rgba(221, 225, 230, 1)";
}
}
}, [disabled, value]);
const theme = createTheme({
components: {
MuiSwitch: {
styleOverrides: {
root: {
boxSizing: "border-box",
padding: "0",
},
switchBase: {
top: "4px",
left: "4px",
padding: 0,
"&.Mui-checked": {
left: "2px",
"& + .MuiSwitch-track": {
backgroundColor: bgColor,
opacity: 1,
},
}, },
}, },
}, thumb: {
thumb: { width: "14px",
width: "14px", height: "14px",
height: "14px", color: "#fff",
color: "#fff", },
}, track: {
track: { borderRadius: "11px",
borderRadius: "11px", backgroundColor: "rgba(221, 225, 230, 1)",
backgroundColor: "#E6E8EB", opacity: 1,
opacity: 1, },
}, },
}, },
}, },
}, });
});
const MySwitch = (props: IMySwitchProps) => {
const { value, defaultChecked, onChange, disabled = false, size, ...other } = props;
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Switch <Switch
...@@ -64,13 +88,13 @@ const MySwitch = (props: IMySwitchProps) => { ...@@ -64,13 +88,13 @@ const MySwitch = (props: IMySwitchProps) => {
sx={ sx={
size === "medium" size === "medium"
? { ? {
width: 44, width: 44,
height: 24, height: 24,
} }
: { : {
width: 40, width: 40,
height: 22, height: 22,
} }
} }
{...other} {...other}
/> />
......
...@@ -48,6 +48,10 @@ ...@@ -48,6 +48,10 @@
font-weight: 600; font-weight: 600;
color: #1e2633; color: #1e2633;
margin-bottom: 8px; margin-bottom: 8px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding-right: 20px;
} }
.tabBoxDesc { .tabBoxDesc {
......
...@@ -70,7 +70,6 @@ const AddProject = (props: IAddProjectProps) => { ...@@ -70,7 +70,6 @@ const AddProject = (props: IAddProjectProps) => {
project = { ...item }; project = { ...item };
} }
}); });
currentProjectStore.changeProject(project);
setFileServerEndPointLocalStorage(project.zoneId); setFileServerEndPointLocalStorage(project.zoneId);
getFiletokenAccordingToId(project.id).then((res) => { getFiletokenAccordingToId(project.id).then((res) => {
project.filetoken = res; project.filetoken = res;
......
...@@ -33,7 +33,6 @@ const CurrentProject = observer(() => { ...@@ -33,7 +33,6 @@ const CurrentProject = observer(() => {
const canBeOpen = projectListOpen && Boolean(anchorEl); const canBeOpen = projectListOpen && Boolean(anchorEl);
const id = canBeOpen ? "spring-popper" : undefined; const id = canBeOpen ? "spring-popper" : undefined;
const handleChangeCurrentProject = (project: any) => { const handleChangeCurrentProject = (project: any) => {
currentProjectStore.changeProject(project);
setFileServerEndPointLocalStorage(project.zoneId); setFileServerEndPointLocalStorage(project.zoneId);
getFiletokenAccordingToId(project.id).then((res) => { getFiletokenAccordingToId(project.id).then((res) => {
project.filetoken = res; project.filetoken = res;
......
...@@ -71,7 +71,6 @@ ...@@ -71,7 +71,6 @@
overflow-y: overlay; overflow-y: overlay;
height: calc(100% - 48px); height: calc(100% - 48px);
position: relative; position: relative;
overflow: visible;
} }
.noData { .noData {
display: flex; display: flex;
......
...@@ -47,7 +47,6 @@ ...@@ -47,7 +47,6 @@
border-right: 1px solid rgba(235, 237, 240, 1); border-right: 1px solid rgba(235, 237, 240, 1);
width: 360px; width: 360px;
height: 100%; height: 100%;
overflow-y: auto;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
} }
......
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