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({ ...@@ -47,6 +47,10 @@ const theme = createTheme({
"&.MuiButton-textError": { "&.MuiButton-textError": {
color: "rgba(255, 78, 78, 1)", color: "rgba(255, 78, 78, 1)",
}, },
"&.MuiButton-outlinedError": {
color: "rgba(255, 78, 78, 1)",
border: "1px solid rgba(255, 78, 78, 1)",
},
}, },
contained: { contained: {
backgroundColor: "#1370FF", backgroundColor: "#1370FF",
...@@ -60,6 +64,9 @@ const theme = createTheme({ ...@@ -60,6 +64,9 @@ const theme = createTheme({
boxShadow: "none !important", boxShadow: "none !important",
color: "#1370FF", color: "#1370FF",
"&:hover": { backgroundColor: "#ECF4FF " }, "&:hover": { backgroundColor: "#ECF4FF " },
"&.MuiButton-textError": {
color: "rgba(255, 78, 78, 1)",
},
}, },
text: { text: {
backgroundColor: "transparent", backgroundColor: "transparent",
......
src/components/mui/MyDialog.tsx
View file @ 3144251a
...@@ -8,7 +8,7 @@ import { ...@@ -8,7 +8,7 @@ import {
} from "@mui/material"; } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close"; import CloseIcon from "@mui/icons-material/Close";
import MyButton from './MyButton' import MyButton from "./MyButton";
export interface IDialogProps { export interface IDialogProps {
/** 自定义类名 */ /** 自定义类名 */
...@@ -84,7 +84,12 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => { ...@@ -84,7 +84,12 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
) : ( ) : (
<DialogActions style={{ padding: "0 24px 24px 24px" }}> <DialogActions style={{ padding: "0 24px 24px 24px" }}>
{showCancel ? ( {showCancel ? (
<MyButton text={cancelText || "取消"} onClick={onClose} variant="outlined" size="small" /> <MyButton
text={cancelText || "取消"}
onClick={onClose}
variant="outlined"
size="small"
/>
) : null} ) : null}
{showConfirm ? ( {showConfirm ? (
<MyButton <MyButton
...@@ -123,6 +128,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => { ...@@ -123,6 +128,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
fontWeight: 600,
}} }}
> >
<span>{title}</span> <span>{title}</span>
......
src/components/mui/MyInput.tsx
View file @ 3144251a
...@@ -20,7 +20,7 @@ interface MyInputProps extends Omit<TextFieldProps, "value"> { ...@@ -20,7 +20,7 @@ interface MyInputProps extends Omit<TextFieldProps, "value"> {
const MyInput = (props: MyInputProps) => { const MyInput = (props: MyInputProps) => {
const { const {
size = "small", size = "medium",
placeholder = "请输入", placeholder = "请输入",
fullWidth = true, fullWidth = true,
error = false, error = false,
......
src/components/mui/MySelect.tsx
View file @ 3144251a
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
import InputLabel from "@mui/material/InputLabel"; import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem"; import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl"; import FormControl from "@mui/material/FormControl";
import FormHelperText from "@mui/material/FormHelperText";
import Select, { SelectChangeEvent, SelectProps } from "@mui/material/Select"; import Select, { SelectChangeEvent, SelectProps } from "@mui/material/Select";
import { createTheme, ThemeProvider } from "@mui/material"; import { createTheme, ThemeProvider } from "@mui/material";
...@@ -44,6 +45,10 @@ interface IProps ...@@ -44,6 +45,10 @@ interface IProps
title?: string; title?: string;
/** 是否显示title */ /** 是否显示title */
isTitle?: boolean; isTitle?: boolean;
/** 是否显示提示文案 */
error?: boolean;
/** 提示文案 */
helpertext?: string;
} }
export default function MySelect(props: IProps) { export default function MySelect(props: IProps) {
const { const {
...@@ -55,6 +60,8 @@ export default function MySelect(props: IProps) { ...@@ -55,6 +60,8 @@ export default function MySelect(props: IProps) {
multiple = false, multiple = false,
onChange, onChange,
fullWidth, fullWidth,
error = false,
helpertext,
...other ...other
} = props; } = props;
...@@ -151,6 +158,7 @@ export default function MySelect(props: IProps) { ...@@ -151,6 +158,7 @@ export default function MySelect(props: IProps) {
}) })
: null} : null}
</Select> </Select>
{helpertext && error && <FormHelperText>{helpertext}</FormHelperText>}
</FormControl> </FormControl>
</ThemeProvider> </ThemeProvider>
); );
......
src/views/Project/ProjectData/AddFolder/index.tsx
View file @ 3144251a
...@@ -7,6 +7,7 @@ import { useMessage } from "@/components/MySnackbar"; ...@@ -7,6 +7,7 @@ import { useMessage } from "@/components/MySnackbar";
import CloudEController from "@/api/fileserver/CloudEController"; import CloudEController from "@/api/fileserver/CloudEController";
import usePass from "@/hooks/usePass"; import usePass from "@/hooks/usePass";
import InputAdornment from "@mui/material/InputAdornment"; import InputAdornment from "@mui/material/InputAdornment";
import MyInput from "@/components/mui/MyInput";
import MyButton from "@/components/mui/MyButton"; import MyButton from "@/components/mui/MyButton";
type IAddFolderProps = { type IAddFolderProps = {
...@@ -93,7 +94,7 @@ const AddFolder = (props: IAddFolderProps) => { ...@@ -93,7 +94,7 @@ const AddFolder = (props: IAddFolderProps) => {
return ( return (
<> <>
<MyButton <MyButton
text='新建文件夹' text="新建文件夹"
variant="outlined" variant="outlined"
size="small" size="small"
onClick={() => setDeleteDialogOpen(true)} onClick={() => setDeleteDialogOpen(true)}
...@@ -101,36 +102,36 @@ const AddFolder = (props: IAddFolderProps) => { ...@@ -101,36 +102,36 @@ const AddFolder = (props: IAddFolderProps) => {
selectIds.length !== 0 || !isPass("PROJECT_DATA_ADDDIR", "USER") selectIds.length !== 0 || !isPass("PROJECT_DATA_ADDDIR", "USER")
} }
/> />
<MyDialog <MyDialog
open={deleteDialogOpen} open={deleteDialogOpen}
onClose={() => setDeleteDialogOpen(false)} onClose={() => setDeleteDialogOpen(false)}
onConfirm={handleAddSubmit} onConfirm={handleAddSubmit}
title="新建文件夹" title="新建文件夹"
> >
<TextField <div style={{ padding: "12px 0" }}>
sx={{ <MyInput
width: "388px", sx={{
border: "1px solide #E6E8EB", width: "388px",
marginTop: "12px", }}
}} required
required error={fileNameCheck.error}
error={fileNameCheck.error} id="fileName"
id="fileName" label="名称"
label="名称" variant="outlined"
variant="outlined" value={fileName}
value={fileName} onChange={handleFileNameChange}
onChange={handleFileNameChange} helperText={fileNameCheck.help}
helperText={fileNameCheck.help} InputProps={{
InputProps={{ endAdornment: (
endAdornment: ( <InputAdornment position="end">
<InputAdornment position="end"> {fileName.length}/30
{fileName.length}/30 </InputAdornment>
</InputAdornment> ),
), }}
}} size="medium"
size="small" />
/> </div>
</MyDialog> </MyDialog>
</> </>
); );
......
src/views/Project/ProjectData/index.tsx
View file @ 3144251a
...@@ -370,9 +370,9 @@ const ProjectData = observer(() => { ...@@ -370,9 +370,9 @@ const ProjectData = observer(() => {
text="下载" text="下载"
style={{ style={{
position: "relative", position: "relative",
left: "-16px", left: "-10px",
minWidth: "10px", minWidth: "10px",
marginRight: "10px", padding: "0 10px",
visibility: visibility:
item.type !== "dataSet" && item.type !== "directory" item.type !== "dataSet" && item.type !== "directory"
? "visible" ? "visible"
...@@ -388,9 +388,9 @@ const ProjectData = observer(() => { ...@@ -388,9 +388,9 @@ const ProjectData = observer(() => {
text="移动至" text="移动至"
style={{ style={{
position: "relative", position: "relative",
left: "-16px", left: "-10px",
minWidth: "10px", minWidth: "10px",
marginRight: "10px", padding: "0 10px",
}} }}
variant="text" variant="text"
size="medium" size="medium"
...@@ -407,9 +407,9 @@ const ProjectData = observer(() => { ...@@ -407,9 +407,9 @@ const ProjectData = observer(() => {
text="删除" text="删除"
style={{ style={{
position: "relative", position: "relative",
left: "-16px", left: "-10px",
minWidth: "10px", minWidth: "10px",
marginRight: "10px", padding: "0 10px",
}} }}
variant="text" variant="text"
size="medium" size="medium"
...@@ -541,6 +541,7 @@ const ProjectData = observer(() => { ...@@ -541,6 +541,7 @@ const ProjectData = observer(() => {
value={keyWord} value={keyWord}
required required
size="small" size="small"
// size="medium"
placeholder="输入关键词搜索" placeholder="输入关键词搜索"
onChange={handleKeyWordChange} onChange={handleKeyWordChange}
onKeyUp={handleKeyWordChangeKeyUp} onKeyUp={handleKeyWordChangeKeyUp}
...@@ -549,13 +550,11 @@ const ProjectData = observer(() => { ...@@ -549,13 +550,11 @@ const ProjectData = observer(() => {
<SearchIcon <SearchIcon
className={style.searchIcon} className={style.searchIcon}
style={{ style={{
color: "#999", color: "rgba(153, 153, 153, 1)",
cursor: "pointer",
fontSize: "22px", fontSize: "22px",
position: "relative", position: "relative",
left: "4px", left: "4px",
}} }}
onClick={handleRefresh}
/> />
), ),
}} }}
......
src/views/Project/ProjectJobDetail/index.module.css
View file @ 3144251a
.swBox { .swBox {
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: RGBA(247, 248, 250, 1); background-color: RGBA(247, 248, 250, 1);
overflow-y: scroll; overflow-y: scroll;
} }
.swHeader { .swHeader {
z-index: 1001; z-index: 1001;
position: sticky; position: sticky;
top: 0; top: 0;
height: 56px; height: 56px;
background-color: #fff; background-color: #fff;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04); box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 24px; padding: 0 24px;
} }
.swHeaderLeft { .swHeaderLeft {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.swTemplateTitle { .swTemplateTitle {
margin: 0 19px 0 8px; margin: 0 19px 0 8px;
line-height: 22px; line-height: 22px;
font-size: 14px; font-size: 14px;
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
font-weight: 600; font-weight: 700;
} }
.swContent { .swContent {
display: flex; display: flex;
height: calc(100vh - 56px); height: calc(100vh - 56px);
} }
.swFormBox { .swFormBox {
background-color: #fff; background-color: #fff;
border-right: 1xp solid rgba(235, 237, 240, 1); border-right: 1xp solid rgba(235, 237, 240, 1);
width: 360px; width: 360px;
overflow-y: scroll; overflow-y: scroll;
box-sizing: border-box; box-sizing: border-box;
padding: 24px; padding: 24px;
} }
.swFlowBox { .swFlowBox {
flex: 1; flex: 1;
height: calc(100vh - 56px); height: calc(100vh - 56px);
} }
.title { .title {
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
font-weight: 600; font-weight: 600;
margin-bottom: 16px; margin-bottom: 16px;
} }
.taskResults { .taskResults {
padding: 24px; padding: 24px;
background-color: rgba(247, 248, 250, 1); background-color: rgba(247, 248, 250, 1);
margin-bottom: 24px; margin-bottom: 24px;
} }
.outputLi { .outputLi {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin: 6px 0; margin: 6px 0;
} }
.outputLiLeft { .outputLiLeft {
display: flex; display: flex;
align-items: center; align-items: center;
color: rgba(19, 112, 255, 1); color: rgba(19, 112, 255, 1);
font-size: 14px; font-size: 14px;
} }
.outputLiLeftImg { .outputLiLeftImg {
margin-right: 15px; margin-right: 12px;
} }
.outputLiRight { .outputLiRight {
color: rgba(138, 144, 153, 1); color: rgba(138, 144, 153, 1);
font-size: 12px; font-size: 12px;
} }
.notResults { .notResults {
background-color: rgba(247, 248, 250, 1); background-color: rgba(247, 248, 250, 1);
padding: 54px 0; padding: 54px 0;
text-align: center; text-align: center;
color: rgba(138, 144, 153, 1); color: rgba(138, 144, 153, 1);
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
margin-bottom: 24px; margin-bottom: 24px;
} }
.taskInfoLi { .taskInfoLi {
margin-bottom: 20px; margin-bottom: 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
} }
.taskInfoParams { .taskInfoParams {
color: rgba(138, 144, 153, 1); color: rgba(138, 144, 153, 1);
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
width: 72px; width: 72px;
margin-right: 44px; margin-right: 44px;
} }
.taskInfoValue { .taskInfoValue {
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
display: flex; display: flex;
position: relative; position: relative;
align-items: center; align-items: center;
text-align: left; text-align: left;
word-break: break-all; word-break: break-all;
flex: 1; flex: 1;
justify-content: flex-end; justify-content: flex-end;
} }
.taskInfoValueClick { .taskInfoValueClick {
cursor: pointer; cursor: pointer;
color: rgba(19, 112, 255, 1); color: rgba(19, 112, 255, 1);
} }
.taskInfoDownload { .taskInfoDownload {
color: rgba(19, 112, 255, 1); color: rgba(19, 112, 255, 1);
cursor: pointer; cursor: pointer;
} }
.taskInfoValueShowAll { .taskInfoValueShowAll {
white-space: normal; white-space: normal;
} }
.taskInfoValueIcon { .taskInfoValueIcon {
margin-right: 9px; margin-right: 9px;
} }
.tabs { .tabs {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
border-bottom: 1px solid rgba(240, 242, 245, 1); border-bottom: 1px solid rgba(240, 242, 245, 1);
} }
.tabLi { .tabLi {
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
padding-bottom: 8px; padding-bottom: 8px;
color: rgba(138, 144, 153, 1); color: rgba(138, 144, 153, 1);
margin-right: 32px; margin-right: 32px;
position: relative; position: relative;
} }
.tabLiAcitve { .tabLiAcitve {
color: rgba(19, 112, 255, 1); color: rgba(19, 112, 255, 1);
border-bottom: 2px solid rgba(19, 112, 255, 1); border-bottom: 2px solid rgba(19, 112, 255, 1);
} }
.overview { .overview {
padding-top: 19px; padding-top: 19px;
} }
.params { .params {
padding-top: 19px; padding-top: 19px;
} }
.options { .options {
position: absolute; position: absolute;
top: 33px; top: 33px;
max-height: 230px; max-height: 230px;
overflow-y: scroll; overflow-y: scroll;
padding: 8px 0px; padding: 8px 0px;
background: #ffffff; background: #ffffff;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14); box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
border-radius: 4px; border-radius: 4px;
z-index: 1002; z-index: 1002;
} }
.option { .option {
padding: 7px 16px; padding: 7px 16px;
font-size: 14px; font-size: 14px;
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
line-height: 22px; line-height: 22px;
cursor: pointer; cursor: pointer;
} }
.option:hover { .option:hover {
color: rgba(19, 112, 255, 1); color: rgba(19, 112, 255, 1);
} }
.optionActive { .optionActive {
color: rgba(19, 112, 255, 1); color: rgba(19, 112, 255, 1);
} }
.fullScreenBox { .fullScreenBox {
position: absolute; position: absolute;
background-color: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
z-index: 1000; z-index: 1000;
right: 24px; right: 24px;
bottom: 24px; bottom: 24px;
padding: 8px; padding: 8px;
} }
.fullScreenBox:hover { .fullScreenBox:hover {
opacity: 0.6; opacity: 0.6;
} }
src/views/Project/ProjectSubmitWork/interface.ts
View file @ 3144251a
...@@ -85,7 +85,7 @@ export type IValidator = { ...@@ -85,7 +85,7 @@ export type IValidator = {
export interface IChoice { export interface IChoice {
label: string; label: string;
value: boolean | string | number; value: string;
} }
export interface IEdge { export interface IEdge {
......
src/views/WorkFlowEdit/components/ParameterSetting/index.tsx
View file @ 3144251a
...@@ -9,9 +9,10 @@ import { ...@@ -9,9 +9,10 @@ import {
import noTemplate from "@/assets/project/noTemplate.svg"; import noTemplate from "@/assets/project/noTemplate.svg";
import MyInput from "@/components/mui/MyInput"; import MyInput from "@/components/mui/MyInput";
import MyCheckBox from "@/components/mui/MyCheckBox"; import MyCheckBox from "@/components/mui/MyCheckBox";
import MySelect, { // import MySelect, {
optionsTransform, // optionsTransform,
} from "../../../Project/ProjectSubmitWork/components/MySelect"; // } from "../../../Project/ProjectSubmitWork/components/MySelect";
import MySelect from "@/components/mui/MySelect";
import FileSelect, { import FileSelect, {
FileSelectType, FileSelectType,
} from "@/components/BusinessComponents/FileSelect"; } from "@/components/BusinessComponents/FileSelect";
...@@ -397,7 +398,7 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -397,7 +398,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
const renderInput = useCallback( const renderInput = useCallback(
(parameter: IParameter) => { (parameter: IParameter) => {
return ( return (
<MyTooltip title={parameter.description} placement="top"> <MyTooltip title={parameter.description} placement="right">
<div> <div>
{parameter.domType.toLowerCase() === "file" && ( {parameter.domType.toLowerCase() === "file" && (
<MyInput <MyInput
...@@ -494,7 +495,7 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -494,7 +495,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
} }
error={parameter.error || false} error={parameter.error || false}
helpertext={parameter.helperText} helpertext={parameter.helperText}
options={optionsTransform(parameter?.choices || [], "label")} options={parameter?.choices || []}
disabled={parameter.parameterGroup === "out"} disabled={parameter.parameterGroup === "out"}
></MySelect> ></MySelect>
)} )}
...@@ -507,7 +508,7 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -507,7 +508,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
multiple={true} multiple={true}
error={parameter.error || false} error={parameter.error || false}
helpertext={parameter.helperText} helpertext={parameter.helperText}
options={optionsTransform(parameter.choices, "label")} options={parameter?.choices || []}
disabled={parameter.parameterGroup === "out"} disabled={parameter.parameterGroup === "out"}
></MySelect> ></MySelect>
)} )}
...@@ -517,7 +518,7 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -517,7 +518,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
onChange={(e: any) => onChange={(e: any) =>
handleParameterChange(e, parameter.name || "") handleParameterChange(e, parameter.name || "")
} }
options={optionsTransform(parameter.choices, "label")} options={parameter?.choices || []}
error={parameter.error || false} error={parameter.error || false}
helperText={parameter.helperText} helperText={parameter.helperText}
></MyRadio> ></MyRadio>
...@@ -535,7 +536,7 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -535,7 +536,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
parameter.name || "" parameter.name || ""
) )
} }
options={optionsTransform(parameter.choices, "label")} options={parameter?.choices || []}
error={parameter.error || false} error={parameter.error || false}
helperText={parameter.helperText} helperText={parameter.helperText}
></MyCheckBox> ></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