Skip to content

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

UI: 样式优化

parent e44927b1
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 193 additions and 171 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)}
......@@ -101,36 +102,36 @@ const AddFolder = (props: IAddFolderProps) => {
selectIds.length !== 0 || !isPass("PROJECT_DATA_ADDDIR", "USER")
}
/>
<MyDialog
open={deleteDialogOpen}
onClose={() => setDeleteDialogOpen(false)}
onConfirm={handleAddSubmit}
title="新建文件夹"
>
<TextField
sx={{
width: "388px",
border: "1px solide #E6E8EB",
marginTop: "12px",
}}
required
error={fileNameCheck.error}
id="fileName"
label="名称"
variant="outlined"
value={fileName}
onChange={handleFileNameChange}
helperText={fileNameCheck.help}
InputProps={{
endAdornment: (
<InputAdornment position="end">
{fileName.length}/30
</InputAdornment>
),
}}
size="small"
/>
<div style={{ padding: "12px 0" }}>
<MyInput
sx={{
width: "388px",
}}
required
error={fileNameCheck.error}
id="fileName"
label="名称"
variant="outlined"
value={fileName}
onChange={handleFileNameChange}
helperText={fileNameCheck.help}
InputProps={{
endAdornment: (
<InputAdornment position="end">
{fileName.length}/30
</InputAdornment>
),
}}
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
.swBox {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: RGBA(247, 248, 250, 1);
overflow-y: scroll;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: RGBA(247, 248, 250, 1);
overflow-y: scroll;
}
.swHeader {
z-index: 1001;
position: sticky;
top: 0;
height: 56px;
background-color: #fff;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
z-index: 1001;
position: sticky;
top: 0;
height: 56px;
background-color: #fff;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.swHeaderLeft {
display: flex;
justify-content: flex-start;
align-items: center;
display: flex;
justify-content: flex-start;
align-items: center;
}
.swTemplateTitle {
margin: 0 19px 0 8px;
line-height: 22px;
font-size: 14px;
color: rgba(30, 38, 51, 1);
font-weight: 600;
margin: 0 19px 0 8px;
line-height: 22px;
font-size: 14px;
color: rgba(30, 38, 51, 1);
font-weight: 700;
}
.swContent {
display: flex;
height: calc(100vh - 56px);
display: flex;
height: calc(100vh - 56px);
}
.swFormBox {
background-color: #fff;
border-right: 1xp solid rgba(235, 237, 240, 1);
width: 360px;
overflow-y: scroll;
box-sizing: border-box;
padding: 24px;
background-color: #fff;
border-right: 1xp solid rgba(235, 237, 240, 1);
width: 360px;
overflow-y: scroll;
box-sizing: border-box;
padding: 24px;
}
.swFlowBox {
flex: 1;
height: calc(100vh - 56px);
flex: 1;
height: calc(100vh - 56px);
}
.title {
color: rgba(30, 38, 51, 1);
font-size: 16px;
line-height: 24px;
font-weight: 600;
margin-bottom: 16px;
color: rgba(30, 38, 51, 1);
font-size: 16px;
line-height: 24px;
font-weight: 600;
margin-bottom: 16px;
}
.taskResults {
padding: 24px;
background-color: rgba(247, 248, 250, 1);
margin-bottom: 24px;
padding: 24px;
background-color: rgba(247, 248, 250, 1);
margin-bottom: 24px;
}
.outputLi {
display: flex;
justify-content: space-between;
align-items: center;
margin: 6px 0;
display: flex;
justify-content: space-between;
align-items: center;
margin: 6px 0;
}
.outputLiLeft {
display: flex;
align-items: center;
color: rgba(19, 112, 255, 1);
font-size: 14px;
display: flex;
align-items: center;
color: rgba(19, 112, 255, 1);
font-size: 14px;
}
.outputLiLeftImg {
margin-right: 15px;
margin-right: 12px;
}
.outputLiRight {
color: rgba(138, 144, 153, 1);
font-size: 12px;
color: rgba(138, 144, 153, 1);
font-size: 12px;
}
.notResults {
background-color: rgba(247, 248, 250, 1);
padding: 54px 0;
text-align: center;
color: rgba(138, 144, 153, 1);
font-size: 14px;
line-height: 22px;
margin-bottom: 24px;
background-color: rgba(247, 248, 250, 1);
padding: 54px 0;
text-align: center;
color: rgba(138, 144, 153, 1);
font-size: 14px;
line-height: 22px;
margin-bottom: 24px;
}
.taskInfoLi {
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.taskInfoParams {
color: rgba(138, 144, 153, 1);
font-size: 14px;
line-height: 22px;
width: 72px;
margin-right: 44px;
color: rgba(138, 144, 153, 1);
font-size: 14px;
line-height: 22px;
width: 72px;
margin-right: 44px;
}
.taskInfoValue {
color: rgba(30, 38, 51, 1);
font-size: 14px;
line-height: 22px;
display: flex;
position: relative;
align-items: center;
text-align: left;
word-break: break-all;
flex: 1;
justify-content: flex-end;
color: rgba(30, 38, 51, 1);
font-size: 14px;
line-height: 22px;
display: flex;
position: relative;
align-items: center;
text-align: left;
word-break: break-all;
flex: 1;
justify-content: flex-end;
}
.taskInfoValueClick {
cursor: pointer;
color: rgba(19, 112, 255, 1);
cursor: pointer;
color: rgba(19, 112, 255, 1);
}
.taskInfoDownload {
color: rgba(19, 112, 255, 1);
cursor: pointer;
color: rgba(19, 112, 255, 1);
cursor: pointer;
}
.taskInfoValueShowAll {
white-space: normal;
white-space: normal;
}
.taskInfoValueIcon {
margin-right: 9px;
margin-right: 9px;
}
.tabs {
display: flex;
justify-content: flex-start;
border-bottom: 1px solid rgba(240, 242, 245, 1);
display: flex;
justify-content: flex-start;
border-bottom: 1px solid rgba(240, 242, 245, 1);
}
.tabLi {
cursor: pointer;
font-size: 14px;
line-height: 22px;
padding-bottom: 8px;
color: rgba(138, 144, 153, 1);
margin-right: 32px;
position: relative;
cursor: pointer;
font-size: 14px;
line-height: 22px;
padding-bottom: 8px;
color: rgba(138, 144, 153, 1);
margin-right: 32px;
position: relative;
}
.tabLiAcitve {
color: rgba(19, 112, 255, 1);
border-bottom: 2px solid rgba(19, 112, 255, 1);
color: rgba(19, 112, 255, 1);
border-bottom: 2px solid rgba(19, 112, 255, 1);
}
.overview {
padding-top: 19px;
padding-top: 19px;
}
.params {
padding-top: 19px;
padding-top: 19px;
}
.options {
position: absolute;
top: 33px;
max-height: 230px;
overflow-y: scroll;
padding: 8px 0px;
background: #ffffff;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
border-radius: 4px;
z-index: 1002;
position: absolute;
top: 33px;
max-height: 230px;
overflow-y: scroll;
padding: 8px 0px;
background: #ffffff;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
border-radius: 4px;
z-index: 1002;
}
.option {
padding: 7px 16px;
font-size: 14px;
color: rgba(30, 38, 51, 1);
line-height: 22px;
cursor: pointer;
padding: 7px 16px;
font-size: 14px;
color: rgba(30, 38, 51, 1);
line-height: 22px;
cursor: pointer;
}
.option:hover {
color: rgba(19, 112, 255, 1);
color: rgba(19, 112, 255, 1);
}
.optionActive {
color: rgba(19, 112, 255, 1);
color: rgba(19, 112, 255, 1);
}
.fullScreenBox {
position: absolute;
background-color: #fff;
cursor: pointer;
z-index: 1000;
right: 24px;
bottom: 24px;
padding: 8px;
position: absolute;
background-color: #fff;
cursor: pointer;
z-index: 1000;
right: 24px;
bottom: 24px;
padding: 8px;
}
.fullScreenBox:hover {
opacity: 0.6;
opacity: 0.6;
}
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