Skip to content

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

ui: 数据管理中的项目数据表格页样式优化

parent 8fb30dd9
Hide whitespace changes
Inline Side-by-side
Showing with 213 additions and 217 deletions
src/components/mui/MyButton.tsx
View file @ e44927b1
...@@ -12,9 +12,10 @@ import { ...@@ -12,9 +12,10 @@ import {
} from "@mui/material"; } from "@mui/material";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
interface ButtonTagProps extends Omit<ExtendButtonBase<ButtonTypeMap<{}, "button">>, 'text'>{ interface ButtonTagProps
startIcon?: React.ReactNode; /** 开始Icon */ extends Omit<ExtendButtonBase<ButtonTypeMap<{}, "button">>, "text"> {
endIcon?: React.ReactNode; /** 结束Icon */ startIcon?: React.ReactNode /** 开始Icon */;
endIcon?: React.ReactNode /** 结束Icon */;
text: string; //文本内容 text: string; //文本内容
variant?: "text" | "contained" | "outlined"; //按钮样式 variant?: "text" | "contained" | "outlined"; //按钮样式
onClick?: any; //点击事件 onClick?: any; //点击事件
...@@ -22,13 +23,20 @@ interface ButtonTagProps extends Omit<ExtendButtonBase<ButtonTypeMap<{}, "butto ...@@ -22,13 +23,20 @@ interface ButtonTagProps extends Omit<ExtendButtonBase<ButtonTypeMap<{}, "butto
fontSize?: string; //按钮文字大小 fontSize?: string; //按钮文字大小
dropValue?: boolean; //选择的值 dropValue?: boolean; //选择的值
drop?: boolean; //是否开启选择 drop?: boolean; //是否开启选择
color?: "inherit" | "primary" | "secondary" | 'success' | 'error' | 'info' | 'warning'; //按钮颜色风格 color?:
| "inherit"
| "primary"
| "secondary"
| "success"
| "error"
| "info"
| "warning"; //按钮颜色风格
size?: "large" | "medium" | "small"; //按钮尺寸 size?: "large" | "medium" | "small"; //按钮尺寸
disabled?: boolean; //是否禁用 disabled?: boolean; //是否禁用
style?: any; //按钮自定义样式 style?: any; //按钮自定义样式
img?: JSX.Element; //图标按钮中的图标 img?: JSX.Element; //图标按钮中的图标
selectCallBack?: (item: any, key: number) => void; //选择按钮的回调 selectCallBack?: (item: any, key: number) => void; //选择按钮的回调
}; }
const theme = createTheme({ const theme = createTheme({
components: { components: {
...@@ -36,6 +44,9 @@ const theme = createTheme({ ...@@ -36,6 +44,9 @@ const theme = createTheme({
styleOverrides: { styleOverrides: {
root: { root: {
minWidth: "48px", minWidth: "48px",
"&.MuiButton-textError": {
color: "rgba(255, 78, 78, 1)",
},
}, },
contained: { contained: {
backgroundColor: "#1370FF", backgroundColor: "#1370FF",
...@@ -78,7 +89,6 @@ const theme = createTheme({ ...@@ -78,7 +89,6 @@ const theme = createTheme({
color: "#FF4E4E", color: "#FF4E4E",
"&:hover": { backgroundColor: "#FFEDED " }, "&:hover": { backgroundColor: "#FFEDED " },
}, },
sizeSmall: { sizeSmall: {
"& p": { fontSize: "12px" }, "& p": { fontSize: "12px" },
height: "28px", height: "28px",
...@@ -113,7 +123,16 @@ const theme = createTheme({ ...@@ -113,7 +123,16 @@ const theme = createTheme({
}); });
const ButtonComponent = (props: ButtonTagProps) => { const ButtonComponent = (props: ButtonTagProps) => {
const { size, disabled, variant, color, img, select, selectCallBack, ...other } = props; const {
size,
disabled,
variant,
color,
img,
select,
selectCallBack,
...other
} = props;
const { classes, cx } = useStyles({}); const { classes, cx } = useStyles({});
const [anchorEl, setAnchorEl] = React.useState(null); const [anchorEl, setAnchorEl] = React.useState(null);
......
src/components/mui/MyInput.tsx
View file @ e44927b1
...@@ -34,9 +34,13 @@ const MyInput = (props: MyInputProps) => { ...@@ -34,9 +34,13 @@ const MyInput = (props: MyInputProps) => {
styleOverrides: { styleOverrides: {
root: { root: {
height: "36px", height: "36px",
// width: "40px", fontSize: "14px",
// boxSizing: "border-box", "&.MuiInputBase-sizeSmall": {
// padding: "0", height: "32px",
"& .MuiOutlinedInput-notchedOutline": {
height: "34px",
},
},
}, },
}, },
}, },
...@@ -53,6 +57,7 @@ const MyInput = (props: MyInputProps) => { ...@@ -53,6 +57,7 @@ const MyInput = (props: MyInputProps) => {
root: { root: {
height: "36px", height: "36px",
lineHeight: "36px", lineHeight: "36px",
paddingRight: "12px",
":hover": { ":hover": {
"& .MuiOutlinedInput-notchedOutline": error "& .MuiOutlinedInput-notchedOutline": error
? {} ? {}
...@@ -62,7 +67,7 @@ const MyInput = (props: MyInputProps) => { ...@@ -62,7 +67,7 @@ const MyInput = (props: MyInputProps) => {
}, },
}, },
input: { input: {
padding: "6.5px 14px", padding: "6.5px 12px",
verticalAlign: "middle", verticalAlign: "middle",
}, },
notchedOutline: { notchedOutline: {
......
src/views/Project/ProjectData/index.tsx
View file @ e44927b1
import React, { useState, useCallback, useEffect, useMemo } from "react"; import React, { useState, useCallback, useEffect, useMemo } from "react";
import style from "./index.module.css"; import style from "./index.module.css";
import classnames from "classnames"; import classnames from "classnames";
import { InputBase, IconButton } from "@mui/material"; import { IconButton } from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import SearchIcon from "@mui/icons-material/Search"; import SearchIcon from "@mui/icons-material/Search";
import RefreshIcon from "@mui/icons-material/Refresh"; import RefreshIcon from "@mui/icons-material/Refresh";
import MyTable from "@/components/mui/MyTable"; import MyTable from "@/components/mui/MyTable";
...@@ -27,32 +26,9 @@ import { useLocation } from "react-router-dom"; ...@@ -27,32 +26,9 @@ import { useLocation } from "react-router-dom";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle"; import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import SeeDataset from "./SeeDataset"; import SeeDataset from "./SeeDataset";
import { getDataFind, getDataFileSearch } from "@/api/project_api"; import { getDataFind, getDataFileSearch } from "@/api/project_api";
import MyInput from "@/components/mui/MyInput";
import MyButton from "@/components/mui/MyButton"; import MyButton from "@/components/mui/MyButton";
const theme = createTheme({
palette: {
neutral: {
main: "#1370FF",
contrastText: "#fff",
},
},
});
declare module "@mui/material/styles" {
interface Palette {
neutral: Palette["primary"];
}
interface PaletteOptions {
neutral?: PaletteOptions["primary"];
}
}
declare module "@mui/material/Button" {
interface ButtonPropsColorOverrides {
neutral: true;
}
}
const ProjectData = observer(() => { const ProjectData = observer(() => {
const isPass = usePass(); const isPass = usePass();
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
...@@ -391,10 +367,10 @@ const ProjectData = observer(() => { ...@@ -391,10 +367,10 @@ const ProjectData = observer(() => {
<span style={{ whiteSpace: "nowrap" }}> <span style={{ whiteSpace: "nowrap" }}>
{!isAllDirectory && ( {!isAllDirectory && (
<MyButton <MyButton
text='下载' text="下载"
style={{ style={{
position: "relative", position: "relative",
left: "-4px", left: "-16px",
minWidth: "10px", minWidth: "10px",
marginRight: "10px", marginRight: "10px",
visibility: visibility:
...@@ -403,22 +379,21 @@ const ProjectData = observer(() => { ...@@ -403,22 +379,21 @@ const ProjectData = observer(() => {
: "hidden", : "hidden",
}} }}
variant="text" variant="text"
size="small" size="medium"
disabled={selectIds.length > 0 || !isPass("PROJECT_DATA_DOWNLOAD")} disabled={selectIds.length > 0 || !isPass("PROJECT_DATA_DOWNLOAD")}
onClick={() => hanleDownloadFile(item)} onClick={() => hanleDownloadFile(item)}
/> />
)} )}
<MyButton <MyButton
text='移动至' text="移动至"
style={{ style={{
position: "relative", position: "relative",
left: "-4px", left: "-16px",
minWidth: "10px", minWidth: "10px",
marginRight: "10px", marginRight: "10px",
}} }}
variant="text" variant="text"
size="small" size="medium"
onClick={() => { onClick={() => {
setCurrentOperateFile(item); setCurrentOperateFile(item);
setMoveDialogOpen(true); setMoveDialogOpen(true);
...@@ -427,17 +402,17 @@ const ProjectData = observer(() => { ...@@ -427,17 +402,17 @@ const ProjectData = observer(() => {
selectIds.length > 0 || !isPass("PROJECT_DATA_MOVE", "USER") selectIds.length > 0 || !isPass("PROJECT_DATA_MOVE", "USER")
} }
/> />
<MyButton <MyButton
text='删除' text="删除"
style={{ style={{
position: "relative", position: "relative",
left: "-4px", left: "-16px",
minWidth: "10px", minWidth: "10px",
marginRight: "10px", marginRight: "10px",
}} }}
variant="text" variant="text"
size="small" size="medium"
color="error" color="error"
onClick={() => { onClick={() => {
setCurrentOperateFile(item); setCurrentOperateFile(item);
...@@ -532,184 +507,181 @@ const ProjectData = observer(() => { ...@@ -532,184 +507,181 @@ const ProjectData = observer(() => {
if (currentProjectStore.currentProjectInfo.name) { if (currentProjectStore.currentProjectInfo.name) {
return ( return (
<ThemeProvider theme={theme}> <div className={style.projectData}>
<div className={style.projectData}> <div className={style.projectDataStickyTop}>
<div className={style.projectDataStickyTop}> <div className={style.projectDataTitle}>项目数据</div>
<div className={style.projectDataTitle}>项目数据</div> <div className={style.projectDataHeader}>
<div className={style.projectDataHeader}> <div className={style.projectDataButtonAndSearch}>
<div className={style.projectDataButtonAndSearch}> <div className={style.projectDataButtonBox}>
<div className={style.projectDataButtonBox}> <MyButton
<MyButton text="上传文件"
text='上传文件' variant="contained"
// color="neutral" size="small"
variant="contained" style={{ marginRight: "12px" }}
size="small" onClick={() => setUploaderDialogOpen(true)}
style={{ marginRight: "12px" }} disabled={
onClick={() => setUploaderDialogOpen(true)} selectIds.length !== 0 ||
disabled={ !isPass("PROJECT_DATA_UPLOAD", "USER")
selectIds.length !== 0 || }
!isPass("PROJECT_DATA_UPLOAD", "USER") />
}
/> <AddFolder
selectIds={selectIds}
<AddFolder list={allList}
selectIds={selectIds} path={path}
list={allList} refresh={handleRefresh}
path={path} fileToken={fileToken as string}
refresh={handleRefresh} projectId={projectId as string}
fileToken={fileToken as string} ></AddFolder>
projectId={projectId as string} </div>
></AddFolder> <MyInput
</div> sx={{
<div className={style.projectDataSearch}> width: "340px",
<InputBase }}
className={style.searchInput} value={keyWord}
placeholder="输入关键词搜索" required
inputProps={{ "aria-label": "输入关键词搜索" }} size="small"
value={keyWord} placeholder="输入关键词搜索"
onChange={handleKeyWordChange} onChange={handleKeyWordChange}
style={{ width: "280px", fontSize: "14px" }} onKeyUp={handleKeyWordChangeKeyUp}
onKeyUp={handleKeyWordChangeKeyUp} InputProps={{
/> endAdornment: (
<IconButton
type="submit"
className={style.searchButton}
aria-label="search"
size="small"
style={{ padding: "4px" }}
onClick={handleRefresh}
>
<SearchIcon <SearchIcon
className={style.searchIcon} className={style.searchIcon}
style={{ color: "#999" }} style={{
color: "#999",
cursor: "pointer",
fontSize: "22px",
position: "relative",
left: "4px",
}}
onClick={handleRefresh}
/> />
</IconButton> ),
</div> }}
</div> ></MyInput>
<div className={style.projectDataPathAndTabs}>
<div className={style.projectDataPath}>{showPath}</div>
<div className={style.projectDataTabsAndBtton}>
<RadioGroupOfButtonStyle
value={activeTab}
radioOptions={[
{ value: "file", label: "文件" },
{ value: "dataset", label: "数据集" },
]}
handleRadio={setActiveTab}
></RadioGroupOfButtonStyle>
<IconButton
aria-label="refreshIcon"
size="small"
onClick={handleRefresh}
disabled={!isPass("PROJECT_DATA_REFRESH", "USER")}
sx={{ marginLeft: "17px" }}
>
<RefreshIcon />
</IconButton>
</div>
</div>
</div> </div>
<MyTable <div className={style.projectDataPathAndTabs}>
footer={false} <div className={style.projectDataPath}>{showPath}</div>
rowHover={true} <div className={style.projectDataTabsAndBtton}>
onRef={tableRef} <RadioGroupOfButtonStyle
stickyHeader={true} value={activeTab}
initSelected={selectIds} radioOptions={[
headCells={versionsHeadCells} { value: "file", label: "文件" },
rowsPerPage={"99"} { value: "dataset", label: "数据集" },
checkboxData={(e: any) => { ]}
hanldeCheckbox(e); handleRadio={setActiveTab}
}} ></RadioGroupOfButtonStyle>
rows={showList.map((item: any, index: number) => ({ <IconButton
...item, aria-label="refreshIcon"
id: `name=${item.name}&index=${index}`, size="small"
name: renderName(item), onClick={handleRefresh}
size: renderSize(item), disabled={!isPass("PROJECT_DATA_REFRESH", "USER")}
mtime: renderMtime(item), sx={{ marginLeft: "17px" }}
caozuo: renderButtons(item), >
}))} <RefreshIcon sx={{ fontSize: "18px" }} />
/> </IconButton>
{showList.length === 0 && (
<div className={style.noDataBox}>
<img className={style.noDataImg} src={noFile} alt="" />
<span className={style.noDataText}>暂无数据</span>
</div> </div>
)} </div>
</div> </div>
{selectIds.length > 0 && ( <MyTable
<div className={style.projectDataStickyBox}> footer={false}
<MyButton rowHover={true}
text={`批量删除（${selectIds.length}）`} onRef={tableRef}
color="error" stickyHeader={true}
variant="outlined" initSelected={selectIds}
size="small" headCells={versionsHeadCells}
style={{ marginRight: "12px" }} rowsPerPage={"99"}
onClick={() => { checkboxData={(e: any) => {
setCurrentOperateFile(null); hanldeCheckbox(e);
setDeleteDialogOpen(true); }}
}} rows={showList.map((item: any, index: number) => ({
disabled={!isPass("PROJECT_DATA_DELETE", "USER")} ...item,
/> id: `name=${item.name}&index=${index}`,
<MyButton name: renderName(item),
text={`批量移动（${selectIds.length}）`} size: renderSize(item),
// color="neutral" mtime: renderMtime(item),
variant="contained" caozuo: renderButtons(item),
size="small" }))}
style={{ marginRight: "24px" }} />
onClick={() => { {showList.length === 0 && (
setCurrentOperateFile(null); <div className={style.noDataBox}>
setDeleteDialogOpen(true); <img className={style.noDataImg} src={noFile} alt="" />
}} <span className={style.noDataText}>暂无数据</span>
disabled={!isPass("PROJECT_DATA_MOVE", "USER")}
/>
</div> </div>
)} )}
{deleteDialogOpen && (
<DeleteDialog
deleteDialogOpen={deleteDialogOpen}
setDeleteDialogOpen={setDeleteDialogOpen}
path={path}
projectId={projectId as string}
currentOperateFile={currentOperateFile}
selectIds={selectIds}
refresh={handleRefresh}
showList={showList}
></DeleteDialog>
)}
{uploaderDialogOpen && (
<UpLoaderFile
uploaderDialogOpen={uploaderDialogOpen}
setUploaderDialogOpen={setUploaderDialogOpen}
path={path}
list={allList}
></UpLoaderFile>
)}
{moveDialogOpen && (
<MoveFile
moveDialogOpen={moveDialogOpen}
setMoveDialogOpen={setMoveDialogOpen}
path={path}
fileToken={fileToken as string}
projectId={projectId as string}
currentOperateFile={currentOperateFile}
selectIds={selectIds}
refresh={handleRefresh}
showList={showList}
></MoveFile>
)}
{showSeeDataset && (
<SeeDataset
handleClose={() => setShowSeeDataset(false)}
name={seeDatasetName}
path={path}
fileToken={fileToken as string}
projectId={projectId as string}
></SeeDataset>
)}
</div> </div>
</ThemeProvider> {selectIds.length > 0 && (
<div className={style.projectDataStickyBox}>
<MyButton
text={`批量删除（${selectIds.length}）`}
color="error"
variant="outlined"
size="small"
style={{ marginRight: "12px" }}
onClick={() => {
setCurrentOperateFile(null);
setDeleteDialogOpen(true);
}}
disabled={!isPass("PROJECT_DATA_DELETE", "USER")}
/>
<MyButton
text={`批量移动（${selectIds.length}）`}
// color="neutral"
variant="contained"
size="small"
style={{ marginRight: "24px" }}
onClick={() => {
setCurrentOperateFile(null);
setMoveDialogOpen(true);
}}
disabled={!isPass("PROJECT_DATA_MOVE", "USER")}
/>
</div>
)}
{deleteDialogOpen && (
<DeleteDialog
deleteDialogOpen={deleteDialogOpen}
setDeleteDialogOpen={setDeleteDialogOpen}
path={path}
projectId={projectId as string}
currentOperateFile={currentOperateFile}
selectIds={selectIds}
refresh={handleRefresh}
showList={showList}
></DeleteDialog>
)}
{uploaderDialogOpen && (
<UpLoaderFile
uploaderDialogOpen={uploaderDialogOpen}
setUploaderDialogOpen={setUploaderDialogOpen}
path={path}
list={allList}
></UpLoaderFile>
)}
{moveDialogOpen && (
<MoveFile
moveDialogOpen={moveDialogOpen}
setMoveDialogOpen={setMoveDialogOpen}
path={path}
fileToken={fileToken as string}
projectId={projectId as string}
currentOperateFile={currentOperateFile}
selectIds={selectIds}
refresh={handleRefresh}
showList={showList}
></MoveFile>
)}
{showSeeDataset && (
<SeeDataset
handleClose={() => setShowSeeDataset(false)}
name={seeDatasetName}
path={path}
fileToken={fileToken as string}
projectId={projectId as string}
></SeeDataset>
)}
</div>
); );
} else { } else {
return <NoProject />; return <NoProject />;
......
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