Commit 9cfc7e01 authored by chenshouchao's avatar chenshouchao

feat: 完成项目数据静态页面

parent e26e9f13
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 6备份 5</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="项目数据-移动文件" transform="translate(-554.000000, -309.000000)">
<g id="编组-6备份-5" transform="translate(554.000000, 309.000000)">
<rect id="矩形" x="0" y="0" width="22" height="22"></rect>
<g id="编组-25" transform="translate(11.000000, 11.000000) scale(-1, 1) rotate(-90.000000) translate(-11.000000, -11.000000) translate(0.163690, 3.797619)">
<path d="M2.25848043,5.99517195 L2.25848043,1.1 C2.25848043,0.492486775 2.7509672,1.8140083e-13 3.35848043,1.81289231e-13 L9.5197711,1.81289231e-13 C9.81180738,1.8145763e-13 10.0918574,0.116128852 10.2981967,0.32279113 L11.1489864,1.17491279 C11.3553257,1.38157507 11.6353757,1.49770392 11.927412,1.49770392 L16.6934589,1.49770392 C17.3009722,1.49770392 17.7934589,1.99019069 17.7934589,2.59770392 L17.7934589,5.74540783 L17.7934589,5.74540783 L9.97591007,5.58202826 L2.25848043,5.99517195 Z" id="路径-7" fill="#F09C3C"></path>
<path d="M1.33057336,4.82874117 L20.3420457,4.82874117 C20.9495589,4.82874117 21.4420457,5.32122794 21.4420457,5.92874117 C21.4420457,5.99815212 21.4354759,6.06740728 21.4224242,6.1355801 L20.0102818,13.5116008 C19.9110449,14.0299435 19.45766,14.4047619 18.9299033,14.4047619 L2.74271574,14.4047619 C2.21495905,14.4047619 1.76157419,14.0299435 1.66233726,13.5116008 L0.250194881,6.1355801 C0.135960895,5.53890354 0.527057873,4.96259668 1.12373443,4.84836269 C1.19190725,4.83531097 1.2611624,4.82874117 1.33057336,4.82874117 Z" id="矩形" fill="#FFC133"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 4备份 3</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="项目数据-数据集" transform="translate(-300.000000, -730.000000)">
<g id="编组-5" transform="translate(244.000000, 250.000000)">
<g id="编组-4备份-3" transform="translate(56.000000, 480.000000)">
<g id="矩形-2">
<rect id="矩形" x="0" y="0" width="22" height="22"></rect>
</g>
<path d="M18.14,3 L3.86,3 C3.385,3 3,3.3852 3,3.86 L3,6.54 C3,7.015 3.385,7.4 3.86,7.4 L18.14,7.4 C18.615,7.4 19,7.015 19,6.54 L19,3.86 C19,3.3852 18.615,3 18.14,3 Z M17.28,5.68 L9.28,5.68 C9.298916,5.6446 9.30956773,5.6036 9.30956773,5.56 L9.30956773,4.84 C9.30956773,4.7964 9.298916,4.7554 9.28,4.72 L17.28,4.72 L17.28,5.68 Z M18.14,8.8 L3.86,8.8 C3.385,8.8 3,9.1852 3,9.66 L3,12.34 C3,12.815 3.385,13.2 3.86,13.2 L18.14,13.2 C18.615,13.2 19,12.815 19,12.34 L19,9.66 C19,9.1852 18.615,8.8 18.14,8.8 Z M17.28,11.48 L9.28,11.48 C9.298916,11.4446 9.30956773,11.4036 9.30956773,11.36 L9.30956773,10.64 C9.30956773,10.5964 9.298916,10.5554 9.28,10.52 L17.28,10.52 L17.28,11.48 Z M18.14,14.6 L3.86,14.6 C3.385,14.6 3,14.9852 3,15.46 L3,18.14 C3,18.615 3.385,19 3.86,19 L18.14,19 C18.615,19 19,18.615 19,18.14 L19,15.46 C19,14.9852 18.615,14.6 18.14,14.6 Z M17.28,17.28 L9.28,17.28 C9.298916,17.2446 9.30956773,17.2036 9.30956773,17.16 L9.30956773,16.44 C9.30956773,16.3964 9.298916,16.3554 9.28,16.32 L17.28,16.32 L17.28,17.28 Z" id="形状" fill="#D1D6DE" fill-rule="nonzero"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 7备份 10</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="项目数据-多选状态" transform="translate(-300.000000, -622.000000)">
<g id="编组-12" transform="translate(244.000000, 250.000000)">
<g id="编组-7" transform="translate(0.000000, 96.000000)">
<g id="编组-8" transform="translate(56.000000, 12.000000)">
<g id="编组-7备份-10" transform="translate(0.000000, 264.000000)">
<rect id="矩形" x="0" y="0" width="22" height="22"></rect>
<g id="编组-6" transform="translate(3.928571, 2.357143)">
<path d="M1.2,0 L9.49020093,0 L9.49020093,0 L14.1428571,4.65265622 L14.1428571,16.0857143 C14.1428571,16.748456 13.6055988,17.2857143 12.9428571,17.2857143 L1.2,17.2857143 C0.5372583,17.2857143 -1.40882155e-16,16.748456 0,16.0857143 L0,1.2 C-8.11624501e-17,0.5372583 0.5372583,1.21743675e-16 1.2,0 Z" id="矩形" fill="#D1D6DE"></path>
<g id="编组-4" transform="translate(3.535714, 7.142857)" stroke="#FFFFFF" stroke-width="1.2">
<line x1="7.85086282e-15" y1="6.39285714" x2="7.07142857" y2="6.39285714" id="路径-15备份-2"></line>
<line x1="7.85086282e-15" y1="3.39285714" x2="7.07142857" y2="3.39285714" id="路径-15备份-3"></line>
<line x1="7.85086282e-15" y1="0.392857143" x2="7.07142857" y2="0.392857143" id="路径-15备份-4"></line>
</g>
<path d="M9.49020093,0 L14.1428571,4.65265622 L10.6902009,4.65265622 C10.0274592,4.65265622 9.49020093,4.11539792 9.49020093,3.45265622 L9.49020093,0 L9.49020093,0 Z" id="路径-9" fill="#EBEDF0"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 6备份 4</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="项目数据—传输列表(切换线路)" transform="translate(-300.000000, -460.000000)">
<g id="编组-27" transform="translate(244.000000, 250.000000)">
<g id="编组-7" transform="translate(0.000000, 96.000000)">
<g id="编组-8" transform="translate(56.000000, 12.000000)">
<g id="编组-25" transform="translate(0.000000, 102.000000)">
<rect id="矩形" x="0" y="0" width="22" height="22"></rect>
<path d="M1.64236826,7.68304472 L1.64236826,4.34285714 C1.64236826,3.68011544 2.17962656,3.14285714 2.84236826,3.14285714 L9.56377626,3.14285714 C9.88236129,3.14285714 10.1878704,3.26954316 10.4129678,3.49499292 L11.3411021,4.42458018 C11.5661995,4.65002994 11.8717086,4.77671596 12.1902936,4.77671596 L17.3896175,4.77671596 C18.0523592,4.77671596 18.5896175,5.31397426 18.5896175,5.97671596 L18.5896175,6.41057478 L18.5896175,6.41057478 L10.0613824,9.23234252 L1.64236826,7.68304472 Z" id="路径-7" fill="#F09C3C"></path>
<rect id="矩形" fill="#FFC133" x="1.17857143" y="6.41057478" width="19.6428571" height="12.4465681" rx="1.2"></rect>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="67px" height="57px" viewBox="0 0 67 57" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>img_no data</title>
<defs>
<polygon id="path-1" points="0 0 65.7607024 0 65.7607024 46.987 0 46.987"></polygon>
<linearGradient x1="50%" y1="20.7300519%" x2="50%" y2="102.568465%" id="linearGradient-3">
<stop stop-color="#E3F0FF" offset="0%"></stop>
<stop stop-color="#8CBAFF" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
<stop stop-color="#CEE2F9" offset="0%"></stop>
<stop stop-color="#9FC0F0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
<stop stop-color="#DBEAFC" offset="0%"></stop>
<stop stop-color="#8AAFE6" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-6">
<stop stop-color="#DBEAFC" offset="0%"></stop>
<stop stop-color="#8AAFE6" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-7">
<stop stop-color="#F2F7FF" offset="0%"></stop>
<stop stop-color="#E1EDFF" offset="100%"></stop>
</linearGradient>
<path d="M17.9695,0 C18.1602024,0 18.3370714,0.101 18.435881,0.267 L18.435881,0.267 L22.5265952,7.169 C22.6254048,7.335 22.8022738,7.436 22.9929762,7.436 L22.9929762,7.436 L42.7677262,7.436 C42.9584286,7.436 43.1352976,7.335 43.233119,7.169 L43.233119,7.169 L47.3258095,0.267 C47.423631,0.101 47.6005,0 47.7912024,0 L47.7912024,0 L65.21725,0 C65.517631,0 65.7607024,0.246 65.7607024,0.55 L65.7607024,0.55 L65.7607024,18.864 C65.7607024,19.534 65.2231786,20.078 64.5611548,20.078 L64.5611548,20.078 L1.19855952,20.078 C0.536535714,20.078 0,19.534 0,18.864 L0,18.864 L0,0.55 C0,0.246 0.243071429,0 0.542464286,0 L0.542464286,0 Z M41.7340798,12.3811 L24.0274131,12.3811 C23.5254607,12.3811 23.1193536,12.7931 23.1193536,13.3001 C23.1193536,13.8081 23.5254607,14.2191 24.0274131,14.2191 L24.0274131,14.2191 L41.7340798,14.2191 C42.235044,14.2191 42.6421393,13.8081 42.6421393,13.3001 C42.6421393,12.7931 42.235044,12.3811 41.7340798,12.3811 L41.7340798,12.3811 Z" id="path-8"></path>
</defs>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="项目数据-无数据状态" transform="translate(-797.000000, -593.000000)">
<g id="编组-6" transform="translate(788.000000, 587.000000)">
<g id="编组" transform="translate(1.000000, 0.000000)">
<g id="img_no-data" transform="translate(8.645833, 6.999500)">
<g id="编组" transform="translate(0.000000, 8.970200)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-2"></g>
<path d="M49.3205762,0 L32.8806476,0 L16.440719,0 L0.257695238,26.488 C0.0897190476,26.764 -0.000197619048,27.081 -0.000197619048,27.405 L-0.000197619048,45.323 C-0.000197619048,45.689 1.28235,46.987 1.64498095,46.987 L32.8806476,46.987 L64.1173024,46.987 C64.4789452,46.987 65.7614929,45.689 65.7614929,45.323 L65.7614929,27.405 C65.7614929,27.081 65.6725643,26.764 65.5036,26.488 L49.3205762,0 Z" id="Fill-1" fill="url(#linearGradient-3)" mask="url(#mask-2)"></path>
</g>
<polygon id="Fill-3" fill="url(#linearGradient-4)" points="32.880944 8.5034 16.4400274 8.5034 16.4400274 18.3434 32.880944 18.3434 49.3208726 18.3434 49.3208726 8.5034"></polygon>
<path d="M1.25705476,53.0815 L16.4401262,18.3435 L16.4401262,8.5035 L0.250185714,35.4635 C0.0861619048,35.7355 0.000197619048,36.0495 0.000197619048,36.3675 L0.000197619048,52.8125 C0.000197619048,53.5315 0.969519048,53.7385 1.25705476,53.0815" id="Fill-5" fill="url(#linearGradient-5)"></path>
<path d="M64.5048333,53.0815 L49.3207738,18.3435 L49.3207738,8.5035 L65.5117024,35.4635 C65.6747381,35.7355 65.7607024,36.0495 65.7607024,36.3675 L65.7607024,52.8125 C65.7607024,53.5315 64.791381,53.7385 64.5048333,53.0815" id="Fill-7" fill="url(#linearGradient-6)"></path>
<g id="编组" transform="translate(0.000198, 35.880000)">
<mask id="mask-9" fill="white">
<use xlink:href="#path-8"></use>
</mask>
<use id="形状结合" fill="url(#linearGradient-7)" xlink:href="#path-8"></use>
</g>
<line x1="13.3284167" y1="4.812" x2="10.3582024" y2="0" id="Stroke-13" stroke="#C2DAFE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
<line x1="16.1112881" y1="4.5181" x2="17.7248476" y2="0.0531" id="Stroke-15" stroke="#C2DAFE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
<line x1="11.8462738" y1="7.2143" x2="7.17357143" y2="6.7233" id="Stroke-17" stroke="#C2DAFE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
...@@ -38,13 +38,15 @@ const demo = [ ...@@ -38,13 +38,15 @@ const demo = [
icon: "", icon: "",
element: "ProjectSetting", element: "ProjectSetting",
show: "true", show: "true",
// children: [ },
// { {
// id: "PROJECT_OVERIVEW_CREATE", id: "PROJECT_DATA",
// type: "operation", type: "page",
// name: "创建项目", name: "项目管理",
// }, path: "/data",
// ], icon: "",
element: "ProjectData",
show: "true",
}, },
{ {
id: "PROJECT_OVERIVEW", id: "PROJECT_OVERIVEW",
......
...@@ -14,7 +14,7 @@ import * as React from "react"; ...@@ -14,7 +14,7 @@ import * as React from "react";
import NotFound from "@/views/404"; import NotFound from "@/views/404";
import Demo from "@/views/demo"; import Demo from "@/views/demo";
import ProjectSetting from "@/views/Project/ProjectSetting"; import ProjectSetting from "@/views/Project/ProjectSetting";
import ProjectData from "@/views/Project/ProjectData";
export type route = { export type route = {
id?: string; id?: string;
type: "page"; type: "page";
...@@ -47,6 +47,7 @@ export const elements: { ...@@ -47,6 +47,7 @@ export const elements: {
} = { } = {
Demo: Demo, Demo: Demo,
ProjectSetting: ProjectSetting, ProjectSetting: ProjectSetting,
ProjectData: ProjectData,
}; };
export const routes: Array<route | navigate> = [ export const routes: Array<route | navigate> = [
......
.projectData {
position: relative;
}
.projectDataStickyTop {
padding: 28px 24px;
}
.projectDataTitle {
font-size: 18px;
color: #1e2633;
line-height: 26px;
font-weight: 600;
margin-bottom: 24px;
}
.projectDataButtonAndSearch {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.projectDataSearch {
padding-left: 12px;
padding-right: 8px;
border-radius: 4px;
border: 1px solid #ebedf0;
}
.projectDataPathAndTabs {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.projectDataPath {
font-size: 14px;
color: #1e2633;
line-height: 22px;
font-weight: 600;
}
.projectDataTabsAndBtton {
display: flex;
justify-content: flex-end;
align-items: center;
}
.projectDataTabs {
display: flex;
justify-content: space-between;
border: 1px solid #e6e8eb;
border-radius: 4px;
background-color: #e6e8eb;
cursor: pointer;
margin-right: 12px;
}
.projectDataTab {
height: 32px;
box-sizing: border-box;
font-size: 14px;
color: #565c66;
border-radius: 4px;
line-height: 20px;
padding: 3px 18px;
background-color: #e6e8eb;
display: flex;
align-items: center;
}
.projectDataTabActive {
color: #1370ff;
background-color: #fff;
border: 1px solid #e6e8eb;
}
.folderIconBox {
display: flex;
justify-content: flex-start;
align-items: center;
}
.folderIcon {
margin-right: 12px;
}
.projectDataStickyBox {
height: 64px;
position: sticky;
bottom: 0;
border-top: 1px solid #ebedf0;
z-index: 100;
background-color: #fff;
display: flex;
justify-content: flex-end;
align-items: center;
}
import React, { useState } from "react";
import style from "./index.module.css";
import classnames from "classnames";
import { Button, InputBase, IconButton } from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import SearchIcon from "@mui/icons-material/Search";
import RefreshIcon from "@mui/icons-material/Refresh";
import Table from "@/components/Material.Ui/Table";
import bigFolderIcon from "@/assets/project/bigFolderIcon.svg";
import dataSetIcon from "@/assets/project/dataSetIcon.svg";
import fileIcon from "@/assets/project/fileIcon.svg";
import folderIcon from "@/assets/project/folderIcon.svg";
import noFile from "@/assets/project/noFile.svg";
const theme = createTheme({
palette: {
neutral: {
main: "#1370FF",
contrastText: "#fff",
},
},
});
declare module "@mui/material/styles" {
interface Palette {
neutral: Palette["primary"];
}
// allow configuration using `createTheme`
interface PaletteOptions {
neutral?: PaletteOptions["primary"];
}
}
// Update the Button's color prop options
declare module "@mui/material/Button" {
interface ButtonPropsColorOverrides {
neutral: true;
}
}
const ProjectData = () => {
const [path, setPath] = useState("ProjectData");
const [activeTab, setActiveTab] = useState(1);
const [keyWord, setKeyWord] = useState("");
const handleKeyWordChange = (e: any) => {
setKeyWord(e.target.value);
};
const [selectIds, setSelectIds] = useState([]);
const list = [
{
id: 123,
name: "name",
type: "directory",
mtime: new Date().getTime(),
},
{
id: 9999,
name: "name2",
type: "file",
size: 6,
mtime: new Date().getTime(),
},
];
const versionsHeadCells = [
{ id: "checkbox" },
{ id: "name", numeric: false, label: "名称", width: "25%" },
{ id: "size", numeric: false, label: "大小", width: "25%" },
{ id: "mtime", numeric: false, label: "创建时间", width: "25%" },
{ id: "caozuo", numeric: false, label: "操作", width: "25%" },
];
const hanldeCheckbox = (e: any) => {
console.log(e);
setSelectIds(e);
};
const renderName = (item: any) => {
if (item.type === "directory") {
return (
<span className={style.folderIconBox}>
<img className={style.folderIcon} src={folderIcon} alt="" />
{item.name}
</span>
);
} else {
return (
<span className={style.folderIconBox}>
<img className={style.folderIcon} src={fileIcon} alt="" />
{item.name}
</span>
);
}
};
const renderSize = (item: any) => {
return <span>{item.size ? `${item.size}b` : "-"}</span>;
};
const renderMtime = (item: any) => {
return <span>{item.mtime}</span>;
};
const renderButtons = (item: any) => {
return (
<span>
<Button variant="text" size="small">
下载
</Button>
<Button variant="text" size="small">
移动至
</Button>
<Button variant="text" size="small" color="error">
删除
</Button>
</span>
);
};
return (
<ThemeProvider theme={theme}>
<div className={style.projectData}>
<div className={style.projectDataStickyTop}>
<div className={style.projectDataTitle}>项目数据</div>
<div className={style.projectDataHeader}>
<div className={style.projectDataButtonAndSearch}>
<div className={style.projectDataButtonBox}>
<Button
color="neutral"
variant="contained"
size="small"
style={{ marginRight: "12px" }}
>
上传文件
</Button>
<Button color="neutral" variant="outlined" size="small">
新建文件夹
</Button>
</div>
<div className={style.projectDataSearch}>
<InputBase
className={style.searchInput}
placeholder="输入关键词搜索"
inputProps={{ "aria-label": "输入关键词搜索" }}
value={keyWord}
onChange={handleKeyWordChange}
style={{ width: "280px", fontSize: "14px" }}
/>
<IconButton
type="submit"
className={style.searchButton}
aria-label="search"
size="small"
style={{ padding: "4px" }}
>
<SearchIcon
className={style.searchIcon}
style={{ color: "#999" }}
/>
</IconButton>
</div>
</div>
<div className={style.projectDataPathAndTabs}>
<div className={style.projectDataPath}>{path}</div>
<div className={style.projectDataTabsAndBtton}>
<div className={style.projectDataTabs}>
<div
className={classnames({
[style.projectDataTab]: true,
[style.projectDataTabActive]: activeTab === 1,
})}
onClick={() => setActiveTab(1)}
>
文件
</div>
<div
className={classnames({
[style.projectDataTab]: true,
[style.projectDataTabActive]: activeTab !== 1,
})}
onClick={() => setActiveTab(2)}
>
数据集
</div>
</div>
<IconButton aria-label="refreshIcon" size="small">
<RefreshIcon />
</IconButton>
</div>
{/* RefreshIcon */}
</div>
</div>
<Table
checkboxData={(e: any) => {
hanldeCheckbox(e);
}}
rowHover={true}
stickyheader={true}
rows={list.map((item) => ({
...item,
name: renderName(item),
size: renderSize(item),
mtime: renderMtime(item),
caozuo: renderButtons(item),
}))}
// load={loadding}
rowsPerPage={"99"}
headCells={versionsHeadCells}
nopadding={true}
footer={false}
// elevation1={classes.elevation1}
tableStyle={{ minWidth: "auto" }}
borderBottom={"none"}
renderExpandPanel={(e: any) => <div>111111</div>}
// headTableCellCheckbox={classes.HeadTableCell}
></Table>
</div>
{selectIds.length > 0 && (
<div className={style.projectDataStickyBox}>
<Button
color="error"
variant="outlined"
size="small"
style={{ marginRight: "12px" }}
>
批量删除({selectIds.length}
</Button>
<Button
color="neutral"
variant="contained"
size="small"
style={{ marginRight: "24px" }}
>
批量移动({selectIds.length}
</Button>
</div>
)}
</div>
</ThemeProvider>
);
};
export default ProjectData;
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