Skip to content

B
bkunyun
Commit 3144251a authored by chenshouchao's avatar chenshouchao
Browse files
Options

UI: 样式优化

parent e44927b1
Show whitespace changes
Inline Side-by-side
Showing with 63 additions and 43 deletions
src/components/mui/MyButton.tsx
View file @ 3144251a
......@@ -47,6 +47,10 @@ const theme = createTheme({
"&.MuiButton-textError": {
color: "rgba(255, 78, 78, 1)",
},
"&.MuiButton-outlinedError": {
color: "rgba(255, 78, 78, 1)",
border: "1px solid rgba(255, 78, 78, 1)",
},
},
contained: {
backgroundColor: "#1370FF",
......@@ -60,6 +64,9 @@ const theme = createTheme({
boxShadow: "none !important",
color: "#1370FF",
"&:hover": { backgroundColor: "#ECF4FF " },
"&.MuiButton-textError": {
color: "rgba(255, 78, 78, 1)",
},
},
text: {
backgroundColor: "transparent",
......
src/components/mui/MyDialog.tsx
View file @ 3144251a
......@@ -8,7 +8,7 @@ import {
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import MyButton from './MyButton'
import MyButton from "./MyButton";
export interface IDialogProps {
/** 自定义类名 */
......@@ -84,7 +84,12 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
) : (
<DialogActions style={{ padding: "0 24px 24px 24px" }}>
{showCancel ? (
<MyButton text={cancelText || "取消"} onClick={onClose} variant="outlined" size="small" />
<MyButton
text={cancelText || "取消"}
onClick={onClose}
variant="outlined"
size="small"
/>
) : null}
{showConfirm ? (
<MyButton
......@@ -123,6 +128,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
fontWeight: 600,
}}
>
<span>{title}</span>
......
src/components/mui/MyInput.tsx
View file @ 3144251a
......@@ -20,7 +20,7 @@ interface MyInputProps extends Omit<TextFieldProps, "value"> {
const MyInput = (props: MyInputProps) => {
const {
size = "small",
size = "medium",
placeholder = "请输入",
fullWidth = true,
error = false,
......
src/components/mui/MySelect.tsx
View file @ 3144251a
......@@ -9,6 +9,7 @@
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import FormHelperText from "@mui/material/FormHelperText";
import Select, { SelectChangeEvent, SelectProps } from "@mui/material/Select";
import { createTheme, ThemeProvider } from "@mui/material";
......@@ -44,6 +45,10 @@ interface IProps
title?: string;
/** 是否显示title */
isTitle?: boolean;
/** 是否显示提示文案 */
error?: boolean;
/** 提示文案 */
helpertext?: string;
}
export default function MySelect(props: IProps) {
const {
......@@ -55,6 +60,8 @@ export default function MySelect(props: IProps) {
multiple = false,
onChange,
fullWidth,
error = false,
helpertext,
...other
} = props;
......@@ -151,6 +158,7 @@ export default function MySelect(props: IProps) {
})
: null}
</Select>
{helpertext && error && <FormHelperText>{helpertext}</FormHelperText>}
</FormControl>
</ThemeProvider>
);
......
src/views/Project/ProjectData/AddFolder/index.tsx
View file @ 3144251a
......@@ -7,6 +7,7 @@ import { useMessage } from "@/components/MySnackbar";
import CloudEController from "@/api/fileserver/CloudEController";
import usePass from "@/hooks/usePass";
import InputAdornment from "@mui/material/InputAdornment";
import MyInput from "@/components/mui/MyInput";
import MyButton from "@/components/mui/MyButton";
type IAddFolderProps = {
......@@ -93,7 +94,7 @@ const AddFolder = (props: IAddFolderProps) => {
return (
<>
<MyButton
text='新建文件夹'
text="新建文件夹"
variant="outlined"
size="small"
onClick={() => setDeleteDialogOpen(true)}
......@@ -108,11 +109,10 @@ const AddFolder = (props: IAddFolderProps) => {
onConfirm={handleAddSubmit}
title="新建文件夹"
>
<TextField
<div style={{ padding: "12px 0" }}>
<MyInput
sx={{
width: "388px",
border: "1px solide #E6E8EB",
marginTop: "12px",
}}
required
error={fileNameCheck.error}
......@@ -129,8 +129,9 @@ const AddFolder = (props: IAddFolderProps) => {
</InputAdornment>
),
}}
size="small"
size="medium"
/>
</div>
</MyDialog>
</>
);
......
src/views/Project/ProjectData/index.tsx
View file @ 3144251a
......@@ -370,9 +370,9 @@ const ProjectData = observer(() => {
text="下载"
style={{
position: "relative",
left: "-16px",
left: "-10px",
minWidth: "10px",
marginRight: "10px",
padding: "0 10px",
visibility:
item.type !== "dataSet" && item.type !== "directory"
? "visible"
......@@ -388,9 +388,9 @@ const ProjectData = observer(() => {
text="移动至"
style={{
position: "relative",
left: "-16px",
left: "-10px",
minWidth: "10px",
marginRight: "10px",
padding: "0 10px",
}}
variant="text"
size="medium"
......@@ -407,9 +407,9 @@ const ProjectData = observer(() => {
text="删除"
style={{
position: "relative",
left: "-16px",
left: "-10px",
minWidth: "10px",
marginRight: "10px",
padding: "0 10px",
}}
variant="text"
size="medium"
......@@ -541,6 +541,7 @@ const ProjectData = observer(() => {
value={keyWord}
required
size="small"
// size="medium"
placeholder="输入关键词搜索"
onChange={handleKeyWordChange}
onKeyUp={handleKeyWordChangeKeyUp}
......@@ -549,13 +550,11 @@ const ProjectData = observer(() => {
<SearchIcon
className={style.searchIcon}
style={{
color: "#999",
cursor: "pointer",
color: "rgba(153, 153, 153, 1)",
fontSize: "22px",
position: "relative",
left: "4px",
}}
onClick={handleRefresh}
/>
),
}}
......
src/views/Project/ProjectJobDetail/index.module.css
View file @ 3144251a
......@@ -30,7 +30,7 @@
line-height: 22px;
font-size: 14px;
color: rgba(30, 38, 51, 1);
font-weight: 600;
font-weight: 700;
}
.swContent {
......@@ -74,7 +74,7 @@
font-size: 14px;
}
.outputLiLeftImg {
margin-right: 15px;
margin-right: 12px;
}
.outputLiRight {
color: rgba(138, 144, 153, 1);
......
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ 3144251a
......@@ -7,12 +7,11 @@ import MyInput from "@/components/mui/MyInput";
import FileSelect, {
FileSelectType,
} from "@/components/BusinessComponents/FileSelect";
import MySelect, { optionsTransform } from "../components/MySelect";
import MySelect from "@/components/mui/MySelect";
import MyCheckBox from "@/components/mui/MyCheckBox";
import MyRadio from "@/components/mui/MyRadio";
import { getCheckResult } from "../util";
import fileSelectIcon from "@/assets/project/fileSelect.svg";
import questionMark from "@/assets/project/questionMark.svg";
import tipsIcon from "@/assets/project/tipsIcon.svg";
import jobSueIcon from "@/assets/project/jobSue.svg";
import { IParameter } from "../interface";
......@@ -214,6 +213,7 @@ const ConfigForm = (props: ConfigFormProps) => {
{parameter.classTypeName}
</span>
</div>
<MyTooltip title={parameter.description} placement="right">
<div className={styles.parameterContent}>
{parameter.domType.toLowerCase() === "file" && (
<MyInput
......@@ -236,6 +236,7 @@ const ConfigForm = (props: ConfigFormProps) => {
placeholder="请选择"
error={parameter.error || false}
helperText={parameter.helperText}
size="medium"
></MyInput>
)}
{parameter.domType.toLowerCase() === "path" && (
......@@ -259,6 +260,7 @@ const ConfigForm = (props: ConfigFormProps) => {
placeholder="请选择"
error={parameter.error || false}
helperText={parameter.helperText}
size="medium"
></MyInput>
)}
{parameter.domType.toLowerCase() === "dataset" && (
......@@ -282,6 +284,7 @@ const ConfigForm = (props: ConfigFormProps) => {
placeholder="请选择"
error={parameter.error || false}
helperText={parameter.helperText}
size="medium"
></MyInput>
)}
{parameter.domType.toLowerCase() === "input" && (
......@@ -298,6 +301,7 @@ const ConfigForm = (props: ConfigFormProps) => {
placeholder="请输入"
error={parameter.error || false}
helperText={parameter.helperText}
size="medium"
></MyInput>
)}
{parameter.domType.toLowerCase() === "select" && (
......@@ -310,7 +314,8 @@ const ConfigForm = (props: ConfigFormProps) => {
}
error={parameter.error || false}
helpertext={parameter.helperText}
options={optionsTransform(parameter?.choices || [], "label")}
options={parameter?.choices || []}
fullWidth
></MySelect>
)}
{parameter.domType.toLowerCase() === "multipleselect" && (
......@@ -324,7 +329,8 @@ const ConfigForm = (props: ConfigFormProps) => {
multiple={true}
error={parameter.error || false}
helpertext={parameter.helperText}
options={optionsTransform(parameter.choices, "label")}
options={parameter?.choices || []}
fullWidth
></MySelect>
)}
{parameter.domType.toLowerCase() === "radio" && (
......@@ -335,7 +341,7 @@ const ConfigForm = (props: ConfigFormProps) => {
}
onFocus={() => setSelectedBatchNodeId(batchId || "")}
onBlur={() => setSelectedBatchNodeId("")}
options={optionsTransform(parameter.choices, "label")}
options={parameter?.choices || []}
error={parameter.error || false}
helperText={parameter.helperText}
></MyRadio>
......@@ -354,23 +360,15 @@ const ConfigForm = (props: ConfigFormProps) => {
parameter.name || ""
)
}
options={optionsTransform(parameter.choices, "label")}
options={parameter?.choices || []}
onFocus={() => setSelectedBatchNodeId(batchId || "")}
onBlur={() => setSelectedBatchNodeId("")}
error={parameter.error || false}
helperText={parameter.helperText}
/>
)}
{parameter.description && (
<MyTooltip title={parameter.description} placement="top">
<img
className={styles.parameterDesc}
src={questionMark}
alt=""
/>
</MyTooltip>
)}
</div>
</MyTooltip>
</div>
);
});
......
src/views/Project/ProjectSubmitWork/interface.ts
View file @ 3144251a
......@@ -85,7 +85,7 @@ export type IValidator = {
export interface IChoice {
label: string;
value: boolean | string | number;
value: string;
}
export interface IEdge {
......
src/views/WorkFlowEdit/components/ParameterSetting/index.tsx
View file @ 3144251a
......@@ -9,9 +9,10 @@ import {
import noTemplate from "@/assets/project/noTemplate.svg";
import MyInput from "@/components/mui/MyInput";
import MyCheckBox from "@/components/mui/MyCheckBox";
import MySelect, {
optionsTransform,
} from "../../../Project/ProjectSubmitWork/components/MySelect";
// import MySelect, {
// optionsTransform,
// } from "../../../Project/ProjectSubmitWork/components/MySelect";
import MySelect from "@/components/mui/MySelect";
import FileSelect, {
FileSelectType,
} from "@/components/BusinessComponents/FileSelect";
......@@ -397,7 +398,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
const renderInput = useCallback(
(parameter: IParameter) => {
return (
<MyTooltip title={parameter.description} placement="top">
<MyTooltip title={parameter.description} placement="right">
<div>
{parameter.domType.toLowerCase() === "file" && (
<MyInput
......@@ -494,7 +495,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
}
error={parameter.error || false}
helpertext={parameter.helperText}
options={optionsTransform(parameter?.choices || [], "label")}
options={parameter?.choices || []}
disabled={parameter.parameterGroup === "out"}
></MySelect>
)}
......@@ -507,7 +508,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
multiple={true}
error={parameter.error || false}
helpertext={parameter.helperText}
options={optionsTransform(parameter.choices, "label")}
options={parameter?.choices || []}
disabled={parameter.parameterGroup === "out"}
></MySelect>
)}
......@@ -517,7 +518,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
onChange={(e: any) =>
handleParameterChange(e, parameter.name || "")
}
options={optionsTransform(parameter.choices, "label")}
options={parameter?.choices || []}
error={parameter.error || false}
helperText={parameter.helperText}
></MyRadio>
......@@ -535,7 +536,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
parameter.name || ""
)
}
options={optionsTransform(parameter.choices, "label")}
options={parameter?.choices || []}
error={parameter.error || false}
helperText={parameter.helperText}
></MyCheckBox>
......
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