{
chooseDatasetType(e, item);
@@ -230,7 +230,7 @@ const PublicData = (React.FC = () => {
{
chooseDatasetTag(e, item);
diff --git a/react-ui/src/pages/Dataset/publicData.jsx b/react-ui/src/pages/Dataset/publicData.jsx
index 19ae0323..1a33b8e5 100644
--- a/react-ui/src/pages/Dataset/publicData.jsx
+++ b/react-ui/src/pages/Dataset/publicData.jsx
@@ -76,14 +76,14 @@ const PublicData = () => {
};
const chooseDatasetType = (val, item) => {
console.log(val, item);
- if (item.path == queryFlow.data_type) {
+ if (item.id == queryFlow.data_type) {
setActiveType('');
setQueryFlow({ ...queryFlow, data_type: null });
getDatasetlist({ ...queryFlow, data_type: null });
} else {
- setActiveType(item.path);
- setQueryFlow({ ...queryFlow, data_type: item.path });
- getDatasetlist({ ...queryFlow, data_type: item.path });
+ setActiveType(item.id);
+ setQueryFlow({ ...queryFlow, data_type: item.id });
+ getDatasetlist({ ...queryFlow, data_type: item.id });
}
// setQueryFlow({...queryFlow,data_type:item.path},()=>{
// getDatasetlist()
@@ -91,14 +91,14 @@ const PublicData = () => {
};
const chooseDatasetTag = (val, item) => {
console.log(val, item);
- if (item.path == queryFlow.data_tag) {
+ if (item.id == queryFlow.data_tag) {
setActiveTag('');
setQueryFlow({ ...queryFlow, data_tag: null });
getDatasetlist({ ...queryFlow, data_tag: null });
} else {
- setActiveTag(item.path);
- setQueryFlow({ ...queryFlow, data_tag: item.path });
- getDatasetlist({ ...queryFlow, data_tag: item.path });
+ setActiveTag(item.id);
+ setQueryFlow({ ...queryFlow, data_tag: item.id });
+ getDatasetlist({ ...queryFlow, data_tag: item.id });
}
// setQueryFlow({...queryFlow,data_type:item.path},()=>{
// getDatasetlist()
@@ -146,7 +146,7 @@ const PublicData = () => {
{
chooseDatasetType(e, item);
@@ -180,7 +180,7 @@ const PublicData = () => {
{
chooseDatasetTag(e, item);
diff --git a/react-ui/src/pages/Docs/index.less b/react-ui/src/pages/Docs/index.less
new file mode 100644
index 00000000..e69de29b
diff --git a/react-ui/src/pages/Docs/index.tsx b/react-ui/src/pages/Docs/index.tsx
new file mode 100644
index 00000000..fcf4ed12
--- /dev/null
+++ b/react-ui/src/pages/Docs/index.tsx
@@ -0,0 +1,9 @@
+const Docs = () => {
+ return (
+
+ );
+};
+export default Docs;
diff --git a/react-ui/src/pages/Experiment/index.less b/react-ui/src/pages/Experiment/index.less
index 94264bdf..50ec2305 100644
--- a/react-ui/src/pages/Experiment/index.less
+++ b/react-ui/src/pages/Experiment/index.less
@@ -24,7 +24,7 @@
align-items: center;
width: 100%;
padding: 0 0 0 33px;
- color: #1d1d20;
+ color: @text-color;
font-size: 15px;
& > div {
@@ -76,16 +76,18 @@
.statusBox:hover .statusIcon {
visibility: visible;
}
-.experimentBox{
+.experimentBox {
height: calc(100% - 20px);
- .experimentTable{
+ .experimentTable {
height: calc(100% - 60px);
- :global{
- .ant-table-wrapper .ant-table{
+ :global {
+ .ant-table-wrapper .ant-table {
// overflow-y: auto;
height: calc(100% - 48px);
}
+ .ant-table-row-expand-icon-cell {
+ padding: 0 30px;
+ }
}
}
-
-}
\ No newline at end of file
+}
diff --git a/react-ui/src/pages/Experiment/status.ts b/react-ui/src/pages/Experiment/status.ts
index 2a075951..9f568795 100644
--- a/react-ui/src/pages/Experiment/status.ts
+++ b/react-ui/src/pages/Experiment/status.ts
@@ -16,7 +16,7 @@ export enum ExperimentStatus {
}
type ExperimentStatusKeys = keyof typeof ExperimentStatus;
-type ExperimentStatusValues = (typeof ExperimentStatus)[ExperimentStatusKeys];
+export type ExperimentStatusValues = (typeof ExperimentStatus)[ExperimentStatusKeys];
export const experimentStatusInfo: Record = {
Running: {
diff --git a/react-ui/src/pages/Model/personalData.jsx b/react-ui/src/pages/Model/personalData.jsx
index 34ff8f2a..58bd5645 100644
--- a/react-ui/src/pages/Model/personalData.jsx
+++ b/react-ui/src/pages/Model/personalData.jsx
@@ -121,14 +121,14 @@ const PublicData = () => {
const chooseModelType = (val, item) => {
console.log(val, item);
- if (item.path == queryFlow.model_type) {
+ if (item.id == queryFlow.model_type) {
setActiveType('');
setQueryFlow({ ...queryFlow, model_type: null });
getModelLists({ ...queryFlow, model_type: null });
} else {
- setActiveType(item.path);
- setQueryFlow({ ...queryFlow, model_type: item.path });
- getModelLists({ ...queryFlow, model_type: item.path });
+ setActiveType(item.id);
+ setQueryFlow({ ...queryFlow, model_type: item.id });
+ getModelLists({ ...queryFlow, model_type: item.id });
}
// setQueryFlow({...queryFlow,data_type:item.path},()=>{
@@ -136,14 +136,14 @@ const PublicData = () => {
// })
};
const chooseModelTag = (val, item) => {
- if (item.path == queryFlow.model_tag) {
+ if (item.id == queryFlow.model_tag) {
setActiveTag('');
setQueryFlow({ ...queryFlow, model_tag: null });
getModelLists({ ...queryFlow, model_tag: null });
} else {
- setActiveTag(item.path);
- setQueryFlow({ ...queryFlow, model_tag: item.path });
- getModelLists({ ...queryFlow, model_tag: item.path });
+ setActiveTag(item.id);
+ setQueryFlow({ ...queryFlow, model_tag: item.id });
+ getModelLists({ ...queryFlow, model_tag: item.id });
}
// setQueryFlow({...queryFlow,data_type:item.path},()=>{
// getDatasetlist()
@@ -190,7 +190,7 @@ const PublicData = () => {
{
chooseModelType(e, item);
@@ -231,7 +231,7 @@ const PublicData = () => {
{
chooseModelTag(e, item);
diff --git a/react-ui/src/pages/Model/publicData.jsx b/react-ui/src/pages/Model/publicData.jsx
index 36261368..d22775dd 100644
--- a/react-ui/src/pages/Model/publicData.jsx
+++ b/react-ui/src/pages/Model/publicData.jsx
@@ -77,14 +77,14 @@ const PublicData = () => {
};
const chooseModelType = (val, item) => {
console.log(val, item);
- if (item.path == queryFlow.model_type) {
+ if (item.id == queryFlow.model_type) {
setActiveType('');
setQueryFlow({ ...queryFlow, model_type: null });
getModelLists({ ...queryFlow, model_type: null });
} else {
- setActiveType(item.path);
- setQueryFlow({ ...queryFlow, model_type: item.path });
- getModelLists({ ...queryFlow, model_type: item.path });
+ setActiveType(item.id);
+ setQueryFlow({ ...queryFlow, model_type: item.id });
+ getModelLists({ ...queryFlow, model_type: item.id });
}
// setQueryFlow({...queryFlow,data_type:item.path},()=>{
@@ -92,14 +92,14 @@ const PublicData = () => {
// })
};
const chooseModelTag = (val, item) => {
- if (item.path == queryFlow.model_tag) {
+ if (item.id == queryFlow.model_tag) {
setActiveTag('');
setQueryFlow({ ...queryFlow, model_tag: null });
getModelLists({ ...queryFlow, model_tag: null });
} else {
- setActiveTag(item.path);
- setQueryFlow({ ...queryFlow, model_tag: item.path });
- getModelLists({ ...queryFlow, model_tag: item.path });
+ setActiveTag(item.id);
+ setQueryFlow({ ...queryFlow, model_tag: item.id });
+ getModelLists({ ...queryFlow, model_tag: item.id });
}
// setQueryFlow({...queryFlow,data_type:item.path},()=>{
// getDatasetlist()
@@ -147,7 +147,7 @@ const PublicData = () => {
{
chooseModelType(e, item);
@@ -181,7 +181,7 @@ const PublicData = () => {
{
chooseModelTag(e, item);
diff --git a/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.less b/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.less
index fddea2b7..bfff8100 100644
--- a/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.less
+++ b/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.less
@@ -22,7 +22,7 @@
height: 398px;
margin-right: 15px;
padding: 15px;
- background-color: @background-color-primay;
+ background-color: @background-color-primary;
border: 1px solid @border-color;
border-radius: 8px;
@@ -31,7 +31,7 @@
padding-left: 0;
background-color: transparent;
border-width: 0;
- border-bottom: 1px solid @border-color-second;
+ border-bottom: 1px solid @border-color-secondary;
border-radius: 0;
}
}
@@ -40,7 +40,7 @@
width: calc(100% - 488px - 15px);
height: 398px;
padding: 15px;
- background-color: @background-color-primay;
+ background-color: @background-color-primary;
border: 1px solid @border-color;
border-radius: 8px;
@@ -49,7 +49,7 @@
padding: 3px 0 6px;
color: @text-color;
font-size: @font-size;
- border-bottom: 1px solid @border-color-second;
+ border-bottom: 1px solid @border-color-secondary;
}
&__files {
height: calc(100% - 75px);
diff --git a/react-ui/src/pages/Workspace/components/AssetsManagement/index.less b/react-ui/src/pages/Workspace/components/AssetsManagement/index.less
new file mode 100644
index 00000000..122d3bf4
--- /dev/null
+++ b/react-ui/src/pages/Workspace/components/AssetsManagement/index.less
@@ -0,0 +1,54 @@
+.assets-management {
+ flex: 1;
+ width: 100%;
+ padding: 20px 20px 0;
+ background-color: white;
+ border-radius: 4px;
+
+ :global {
+ .ant-select-filled {
+ background-color: rgba(138, 138, 138, 0.12);
+ border-radius: 2px;
+
+ .ant-select-selection-item {
+ color: @text-color-secondary !important;
+ font-size: 13px;
+ }
+ }
+ }
+
+ &__title {
+ color: @text-color;
+ font-weight: 500;
+ font-size: @font-size-title;
+ }
+
+ &__increase {
+ display: inline-block;
+ margin-top: 12px;
+ margin-bottom: 30px;
+ padding: 2px 7px;
+ color: @primary-color-secondary;
+ font-size: 13px;
+ background-color: rgba(187, 210, 255, 0.29);
+ border-radius: 2px;
+ }
+
+ &__summary {
+ display: flex;
+ flex-direction: column;
+ width: 33.33%;
+
+ &__title {
+ margin-bottom: 12px;
+ color: @text-color-secondary;
+ font-size: @font-size;
+ }
+
+ &__value {
+ color: @text-color;
+ font-weight: 500;
+ font-size: 22px;
+ }
+ }
+}
diff --git a/react-ui/src/pages/Workspace/components/AssetsManagement/index.tsx b/react-ui/src/pages/Workspace/components/AssetsManagement/index.tsx
new file mode 100644
index 00000000..dc1af6c9
--- /dev/null
+++ b/react-ui/src/pages/Workspace/components/AssetsManagement/index.tsx
@@ -0,0 +1,81 @@
+import { CommonTabKeys } from '@/enums';
+import { getWorkspaceAssetCountReq } from '@/services/workspace';
+import { to } from '@/utils/promise';
+import { Flex, Select } from 'antd';
+import { useEffect, useState } from 'react';
+import styles from './index.less';
+function AssetsManagement() {
+ const [type, setType] = useState(CommonTabKeys.Public);
+ const [assetCounts, setAssetCounts] = useState<{ title: string; value: number }[]>([]);
+ useEffect(() => {
+ getWorkspacAssetCount();
+ }, [type]);
+ // 获取工作空间资产数量
+ const getWorkspacAssetCount = async () => {
+ const params = {
+ isPublic: type === CommonTabKeys.Public,
+ };
+ const [res] = await to(getWorkspaceAssetCountReq(params));
+ if (res && res.data) {
+ const { component, dataset, image, model, workflow } = res.data;
+ const items = [
+ {
+ title: '数据集',
+ value: dataset,
+ },
+ {
+ title: '模型',
+ value: model,
+ },
+ {
+ title: '镜像',
+ value: image,
+ },
+ {
+ title: '组件',
+ value: component,
+ },
+ {
+ title: '代码配置',
+ value: 0,
+ },
+ {
+ title: '流水线模版',
+ value: workflow,
+ },
+ ];
+ setAssetCounts(items);
+ }
+ };
+
+ return (
+ (null);
+ const total =
+ chartData.Failed +
+ chartData.Pending +
+ chartData.Running +
+ chartData.Succeeded +
+ chartData.Terminated;
+ const options: echarts.EChartsOption = {
+ title: {
+ show: true,
+ left: '29%',
+ top: 'center',
+ textAlign: 'center',
+ text: [`{a|${total}}`, '{b|实验状态}'].join('\n'),
+ textStyle: {
+ rich: {
+ a: {
+ color: themes['textColor'],
+ fontSize: 20,
+ fontWeight: 700,
+ lineHeight: 28,
+ },
+ b: {
+ color: themes['textColorSecondary'],
+ fontSize: 10,
+ fontWeight: 'normal',
+ },
+ },
+ },
+ },
+ tooltip: {
+ trigger: 'item',
+ },
+ legend: {
+ top: 'center',
+ right: '5%',
+ orient: 'vertical',
+ icon: 'circle',
+ itemWidth: 6,
+ itemGap: 20,
+ height: 100,
+ },
+ color: [color1, color2, color3, color4, color5],
+ series: [
+ {
+ type: 'pie',
+ radius: ['70%', '80%'],
+ center: ['30%', '50%'],
+ avoidLabelOverlap: false,
+ padAngle: 3,
+ itemStyle: {
+ borderRadius: 3,
+ },
+ label: {
+ show: false,
+ },
+ emphasis: {
+ label: {
+ show: false,
+ },
+ },
+ labelLine: {
+ show: false,
+ },
+ data: [
+ { value: chartData.Failed, name: '失败' },
+ { value: chartData.Succeeded, name: '成功' },
+ { value: chartData.Terminated, name: '中止' },
+ { value: chartData.Pending, name: '等待' },
+ { value: chartData.Running, name: '运行中' },
+ ],
+ },
+ {
+ type: 'pie',
+ radius: '60%',
+ center: ['30%', '50%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ },
+ tooltip: {
+ show: false,
+ },
+ emphasis: {
+ label: {
+ show: false,
+ },
+ disabled: true,
+ },
+ animation: false,
+ labelLine: {
+ show: false,
+ },
+ data: [
+ {
+ value: 100,
+ itemStyle: { color: color6, borderColor: 'rgba(22, 100, 255, 0.08)', borderWidth: 1 },
+ },
+ ],
+ },
+ ],
+ };
+
+ useEffect(() => {
+ // 创建一个echarts实例，返回echarts实例
+ const chart = echarts.init(chartRef.current);
+
+ // 设置图表实例的配置项和数据
+ chart.setOption(options);
+
+ // 组件卸载
+ return () => {
+ // myChart.dispose() 销毁实例
+ chart.dispose();
+ };
+ }, []);
+
+ return (
+ ();
+ const users: number[] = new Array(8).fill(0);
+ useEffect(() => {
+ getWorkspaceOverview();
+ }, []);
+
+ // 获取工作空间概况
+ const getWorkspaceOverview = async () => {
+ const [res] = await to(getWorkspaceOverviewReq());
+ if (res && res.data) {
+ setOverviewData(res.data);
+ }
+ };
+
+ return (
+
+
+
+
+
+ {assetCounts.map((item, index) => (
+
+
+ );
+}
+
+export default AssetsManagement;
diff --git a/react-ui/src/pages/Workspace/components/ExperimentChart/index.less b/react-ui/src/pages/Workspace/components/ExperimentChart/index.less
new file mode 100644
index 00000000..3891b3f4
--- /dev/null
+++ b/react-ui/src/pages/Workspace/components/ExperimentChart/index.less
@@ -0,0 +1,7 @@
+.experiment-chart {
+ width: 295px;
+ min-width: 295px;
+ height: 140px;
+ background-color: @workspace-background;
+ border-radius: 4px;
+}
diff --git a/react-ui/src/pages/Workspace/components/ExperimentChart/index.tsx b/react-ui/src/pages/Workspace/components/ExperimentChart/index.tsx
new file mode 100644
index 00000000..f4d30fe1
--- /dev/null
+++ b/react-ui/src/pages/Workspace/components/ExperimentChart/index.tsx
@@ -0,0 +1,214 @@
+import themes from '@/styles/theme.less';
+import * as echarts from 'echarts';
+import React, { useEffect, useRef } from 'react';
+import styles from './index.less';
+
+const color1 = new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ { offset: 0, color: '#c73131' },
+ { offset: 1, color: '#ff7e96' },
+ ],
+ false,
+);
+
+const color2 = new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ { offset: 0, color: '#6ac21d' },
+ { offset: 1, color: '#96e850' },
+ ],
+ false,
+);
+const color3 = new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ { offset: 0, color: '#8c8c8c' },
+ { offset: 1, color: '#c8c6c6' },
+ ],
+ false,
+);
+const color4 = new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ { offset: 0, color: '#ecb934' },
+ { offset: 1, color: '#f0864d' },
+ ],
+ false,
+);
+
+const color5 = new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ { offset: 0, color: '#7ea9fe' },
+ { offset: 1, color: '#1664ff' },
+ ],
+ false,
+);
+
+const color6 = new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ { offset: 0, color: 'rgba(255, 255, 255, 0.62)' },
+ { offset: 1, color: '#ebf2ff ' },
+ ],
+ false,
+);
+
+export type ExperimentStatistics = {
+ Failed: number;
+ Pending: number;
+ Running: number;
+ Succeeded: number;
+ Terminated: number;
+};
+
+type ExperimentChartProps = {
+ style?: React.CSSProperties;
+ chartData: ExperimentStatistics;
+};
+
+function ExperimentChart({ chartData, style }: ExperimentChartProps) {
+ const chartRef = useRefAI资产
+
+ 今日新增数量：5
+
+
+ ))}
+ {item.title}
+ {item.value}
+
+
+
+ );
+}
+
+export default ExperimentChart;
diff --git a/react-ui/src/pages/Workspace/components/ExperimentTable/index.less b/react-ui/src/pages/Workspace/components/ExperimentTable/index.less
new file mode 100644
index 00000000..85c5e42d
--- /dev/null
+++ b/react-ui/src/pages/Workspace/components/ExperimentTable/index.less
@@ -0,0 +1,58 @@
+.experiment-table {
+ flex: 1;
+ min-width: 500px;
+ height: 140px;
+ padding: 12px 24px;
+ background-color: @workspace-background;
+ border-radius: 4px;
+
+ &__header {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 4px;
+ color: @text-color;
+ font-size: @font-size;
+ line-height: 20px;
+ }
+
+ &__content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 6px 0;
+ color: .addAlpha(@text-color, 0.75) [];
+ font-size: 14px;
+ line-height: 20px;
+ border-bottom: 1px solid rgba(234, 234, 234, 0.8);
+
+ &:last-child {
+ border-bottom: 0;
+ }
+ }
+
+ &__status {
+ width: 20%;
+ }
+
+ &__duration {
+ width: 25%;
+ }
+
+ &__date {
+ width: 35%;
+ }
+
+ &__operation {
+ width: 20%;
+
+ :global {
+ .ant-btn-link {
+ height: 20px;
+ padding: 0;
+ line-height: 20px;
+ border: 0;
+ }
+ }
+ }
+}
diff --git a/react-ui/src/pages/Workspace/components/ExperimentTable/index.tsx b/react-ui/src/pages/Workspace/components/ExperimentTable/index.tsx
new file mode 100644
index 00000000..7a179a39
--- /dev/null
+++ b/react-ui/src/pages/Workspace/components/ExperimentTable/index.tsx
@@ -0,0 +1,59 @@
+import KFIcon from '@/components/KFIcon';
+import { ExperimentStatusValues, experimentStatusInfo } from '@/pages/Experiment/status';
+import { ExperimentInstance } from '@/types';
+import { elapsedTime, formatDate } from '@/utils/date';
+import { useNavigate } from '@umijs/max';
+import { Button } from 'antd';
+import styles from './index.less';
+type ExperimentTableProps = {
+ tableData: ExperimentInstance[];
+ style?: React.CSSProperties;
+};
+
+function ExperimentTable({ tableData = [], style }: ExperimentTableProps) {
+ const navgite = useNavigate();
+ const gotoExperiment = (record: ExperimentInstance) => {
+ navgite(`/pipeline/experimentPytorchtext/${record.workflow_id}/${record.id}`);
+ };
+
+ return (
+
+
+ );
+}
+
+export default ExperimentTable;
diff --git a/react-ui/src/pages/Workspace/components/QuickStart/WorkArrow.tsx b/react-ui/src/pages/Workspace/components/QuickStart/WorkArrow.tsx
new file mode 100644
index 00000000..76ca1ca7
--- /dev/null
+++ b/react-ui/src/pages/Workspace/components/QuickStart/WorkArrow.tsx
@@ -0,0 +1,60 @@
+import styles from './index.less';
+
+type WorkArrowProps = {
+ width?: number;
+ height?: number;
+ x: number;
+ y: number;
+ arrowLeft: number;
+ arrorwTop: number;
+ borderLeft?: number;
+ borderTop?: number;
+ borderRight?: number;
+ borderBottom?: number;
+ arrrowAngle?: number;
+};
+
+function WorkArrow({
+ width = 1,
+ height = 1,
+ x,
+ y,
+ arrowLeft,
+ arrorwTop,
+ borderLeft = 0,
+ borderTop = 0,
+ borderRight = 0,
+ borderBottom = 0,
+ arrrowAngle = 0,
+}: WorkArrowProps) {
+ return (
+
+
+ {tableData?.map((item) => (
+ 状态
+ 运行时长
+ 开始时间
+ 操作
+
+
+ ))}
+
+ 
+
+
+ {elapsedTime(
+ new Date(item.create_time),
+ item.finish_time ? new Date(item.finish_time) : new Date(),
+ )}
+
+ {formatDate(item.create_time)}
+
+ }
+ onClick={() => gotoExperiment(item)}
+ >
+ 详情
+
+
+
+ })
+
+ );
+}
+
+export default WorkArrow;
diff --git a/react-ui/src/pages/Workspace/components/QuickStart/WorkFlow.tsx b/react-ui/src/pages/Workspace/components/QuickStart/WorkFlow.tsx
new file mode 100644
index 00000000..9401bbe3
--- /dev/null
+++ b/react-ui/src/pages/Workspace/components/QuickStart/WorkFlow.tsx
@@ -0,0 +1,31 @@
+import { Button } from 'antd';
+import styles from './index.less';
+
+type WorkFlowProps = {
+ content: string;
+ buttonText: string;
+ tips?: string;
+ onClick?: () => void;
+ buttonTop?: number;
+ x: number;
+ y: number;
+};
+
+function WorkFlow({ content, buttonText, tips, buttonTop = 20, x, y, onClick }: WorkFlowProps) {
+ return (
+
+
+ {tips &&
+ );
+}
+
+export default WorkFlow;
diff --git a/react-ui/src/pages/Workspace/components/QuickStart/index.less b/react-ui/src/pages/Workspace/components/QuickStart/index.less
new file mode 100644
index 00000000..f5eb76f4
--- /dev/null
+++ b/react-ui/src/pages/Workspace/components/QuickStart/index.less
@@ -0,0 +1,96 @@
+.quick-start {
+ width: calc(100% - 326px);
+ padding: 20px 30px;
+ background-color: white;
+ border-radius: 4px;
+
+ &__title {
+ margin-bottom: 20px;
+ color: @text-color;
+ font-weight: 500;
+ font-size: @font-size-title;
+ }
+
+ &__content {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 610px;
+ background-image: url(@/assets/img/workspace-quick-start.png);
+ background-repeat: no-repeat;
+ background-position: top left;
+ background-size: 100% 100%;
+
+ &__canvas {
+ position: relative;
+ width: 1223px;
+ height: 610px;
+ transform-origin: center left;
+
+ &__model {
+ position: absolute;
+ top: 358px;
+ left: 920px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: @primary-color;
+ font-size: @font-size;
+ }
+
+ &__task {
+ position: absolute;
+ top: 110px;
+ left: 603px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 131px;
+ height: 41px;
+ color: @primary-color;
+ font-size: @font-size;
+ background-color: rgba(22, 100, 255, 0.05);
+ border: 1px dashed @primary-color;
+ border-radius: 4px;
+ box-shadow: 0px 0px 6px rgba(22, 100, 255, 0.07);
+ }
+ }
+ }
+}
+
+.work-flow {
+ position: absolute;
+ width: 192px;
+ padding: 15px;
+ background-color: white;
+ border: 1px solid;
+ border-color: rgba(22, 100, 255, 0.08);
+ border-radius: 0px 8px 0px 0px;
+ box-shadow: 0px 0px 10px rgba(22, 100, 255, 0.06);
+
+ &__content {
+ color: @text-color-secondary;
+ font-size: @font-size;
+ }
+
+ &__tips {
+ position: absolute;
+ top: -16px;
+ left: 0;
+ padding: 4px 10px;
+ color: white;
+ font-size: @font-size;
+ background-color: #333333;
+ }
+}
+
+.work-arrow {
+ position: absolute;
+ border: 0 dashed @primary-color;
+
+ &__img {
+ position: absolute;
+ }
+}
diff --git a/react-ui/src/pages/Workspace/components/QuickStart/index.tsx b/react-ui/src/pages/Workspace/components/QuickStart/index.tsx
new file mode 100644
index 00000000..d1995244
--- /dev/null
+++ b/react-ui/src/pages/Workspace/components/QuickStart/index.tsx
@@ -0,0 +1,149 @@
+import KFIcon from '@/components/KFIcon';
+import { useNavigate } from '@umijs/max';
+import { debounce } from 'lodash';
+import { useEffect, useState } from 'react';
+import WorkArrow from './WorkArrow';
+import WorkFlow from './WorkFlow';
+import styles from './index.less';
+
+function QuickStart() {
+ const navgite = useNavigate();
+ const [scale, setScale] = useState(1);
+
+ useEffect(() => {
+ const changeScale = () => {
+ const width = document.body.offsetWidth - 256 - 80 - 60 - 326 - 15 - 8;
+ const ratio = width >= 1223 ? 1 : width / 1223;
+ setScale(ratio);
+ };
+
+ const debounceFunc = debounce(changeScale, 16);
+ window.addEventListener('resize', debounceFunc);
+
+ return () => {
+ window.removeEventListener('resize', debounceFunc);
+ };
+ }, []);
+
+ return (
+ {tips}
}
+ {content}
+
+
+
+ );
+}
+
+export default QuickStart;
diff --git a/react-ui/src/pages/Workspace/components/TotalStatistics/index.less b/react-ui/src/pages/Workspace/components/TotalStatistics/index.less
new file mode 100644
index 00000000..aec9945b
--- /dev/null
+++ b/react-ui/src/pages/Workspace/components/TotalStatistics/index.less
@@ -0,0 +1,41 @@
+.total-statistics {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 400px;
+ height: 140px;
+ background-color: @workspace-background;
+ border-radius: 4px;
+
+ &__icon {
+ width: 85px;
+ height: 80px;
+ margin-right: 40px;
+ }
+
+ &__title {
+ position: relative;
+ margin-bottom: 6px;
+ color: @text-color-secondary;
+ font-size: @font-size-content;
+ }
+
+ &__title-shadow {
+ position: absolute;
+ bottom: 6px;
+ left: 0;
+ width: 79px;
+ height: 6px;
+ background-color: linear-gradient(
+ 87.07deg,
+ rgba(22, 100, 255, 0.6) 0%,
+ rgba(22, 100, 255, 0) 100%
+ );
+ }
+
+ &__count {
+ color: @text-color;
+ font-weight: 700;
+ font-size: 25px;
+ }
+}
diff --git a/react-ui/src/pages/Workspace/components/TotalStatistics/index.tsx b/react-ui/src/pages/Workspace/components/TotalStatistics/index.tsx
new file mode 100644
index 00000000..c1eba291
--- /dev/null
+++ b/react-ui/src/pages/Workspace/components/TotalStatistics/index.tsx
@@ -0,0 +1,25 @@
+import styles from './index.less';
+
+type TotalStatisticsProps = {
+ icon: string;
+ title: string;
+ count?: string | number;
+ style?: React.CSSProperties;
+};
+
+function TotalStatistics({ icon = '', title = '', count = 0, style }: TotalStatisticsProps) {
+ return (
+ 快速开始
+
+
+
+ navgite('/datasetPreparation/datasetAnnotation')}
+ />
+ navgite('/developmentEnvironment')}
+ />
+ navgite('/pipeline/pipelineText')}
+ />
+ navgite('/pipeline/experimentText')}
+ />
+ navgite('/modelDseployment')}
+ />
+
+
+
+
+
+
+ 
+
+ );
+}
+
+export default TotalStatistics;
diff --git a/react-ui/src/pages/Workspace/components/UserSpace/index.less b/react-ui/src/pages/Workspace/components/UserSpace/index.less
new file mode 100644
index 00000000..b95fdf6d
--- /dev/null
+++ b/react-ui/src/pages/Workspace/components/UserSpace/index.less
@@ -0,0 +1,65 @@
+.user-space {
+ margin-bottom: 16px;
+ padding-bottom: 20px;
+ background-color: white;
+ border-radius: 4px;
+ &__title {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 107px;
+ color: @text-color;
+ font-size: @font-size-title;
+ background-image: url(@/assets/img/workspace-user.png);
+ background-repeat: no-repeat;
+ background-position: top left;
+ background-size: 100% 100%;
+ }
+
+ &__avatar {
+ position: relative;
+ top: -28px;
+ width: 56px;
+ height: 56px;
+ }
+
+ &__name {
+ margin-top: -20px;
+ margin-bottom: 8px;
+ color: @text-color;
+ font-size: @font-size-content;
+ }
+
+ &__role {
+ display: inline-block;
+ padding: 1px 7px;
+ color: @primary-color-secondary;
+ font-size: 13px;
+ background-color: rgba(187, 210, 255, 0.29);
+ border-radius: 2px;
+ }
+
+ &__participant {
+ &__title {
+ color: @text-color-secondary;
+ font-size: @font-size-content;
+ }
+
+ &__count {
+ width: 24px;
+ height: 24px;
+ color: #8a8a8a;
+ font-size: 12px;
+ line-height: 24px;
+ text-align: center;
+ background-color: rgba(153, 153, 153, 0.13);
+ border-radius: 50%;
+ }
+
+ &__user {
+ width: 36px;
+ height: 36px;
+ }
+ }
+}
diff --git a/react-ui/src/pages/Workspace/components/UserSpace/index.tsx b/react-ui/src/pages/Workspace/components/UserSpace/index.tsx
new file mode 100644
index 00000000..503ea9fc
--- /dev/null
+++ b/react-ui/src/pages/Workspace/components/UserSpace/index.tsx
@@ -0,0 +1,47 @@
+import { useModel } from '@umijs/max';
+import { Divider, Flex, Space } from 'antd';
+import styles from './index.less';
+
+type UserSpaceProps = {
+ users: any[];
+};
+
+function UserSpace({ users = [] }: UserSpaceProps) {
+ const { initialState } = useModel('@@initialState');
+ const { currentUser } = initialState || {};
+
+ return (
+
+
+
+ {title}
+
+
+ {count ?? '--'}
+
+
+ );
+}
+
+export default UserSpace;
diff --git a/react-ui/src/pages/Workspace/components/WorkspaceIntro/index.less b/react-ui/src/pages/Workspace/components/WorkspaceIntro/index.less
new file mode 100644
index 00000000..0b9a0ddf
--- /dev/null
+++ b/react-ui/src/pages/Workspace/components/WorkspaceIntro/index.less
@@ -0,0 +1,43 @@
+.workspace-intro {
+ display: flex;
+ align-items: center;
+ margin-bottom: 16px;
+ padding: 0 30px;
+ background-image: url(@/assets/img/workspace-intro.png);
+ background-repeat: no-repeat;
+ background-position: top right;
+ background-size: 100% 100%;
+ border-radius: 4px;
+
+ &__left {
+ padding: 30px 0 34px;
+ }
+
+ &__right {
+ display: flex;
+ flex: 1;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &__title {
+ margin-bottom: 20px;
+ color: @text-color;
+ font-weight: 500;
+ font-size: 20px;
+ }
+
+ &__content {
+ max-width: 980px;
+ margin-bottom: 20px;
+ color: @text-color-secondary;
+ font-size: @font-size-title;
+ line-height: 1.8;
+ letter-spacing: 1px;
+ }
+
+ &__icon {
+ width: 363px;
+ height: 216px;
+ }
+}
diff --git a/react-ui/src/pages/Workspace/components/WorkspaceIntro/index.tsx b/react-ui/src/pages/Workspace/components/WorkspaceIntro/index.tsx
new file mode 100644
index 00000000..49c03711
--- /dev/null
+++ b/react-ui/src/pages/Workspace/components/WorkspaceIntro/index.tsx
@@ -0,0 +1,43 @@
+import { Button } from 'antd';
+import styles from './index.less';
+
+function WorkspaceIntro() {
+ return (
+ 工作空间管理
+
+ 
+
+ {currentUser?.nickName}
+ {currentUser?.roleNames?.[0]?.roleName}
+
+
+
+
+ {users?.map((item, index) => {
+ return (
+ 
+ );
+ })}
+
+
+ 参与者
+ 8
+
+ );
+ })}
+
+
+ );
+}
+
+export default WorkspaceIntro;
diff --git a/react-ui/src/pages/Workspace/index.less b/react-ui/src/pages/Workspace/index.less
new file mode 100644
index 00000000..1a454f38
--- /dev/null
+++ b/react-ui/src/pages/Workspace/index.less
@@ -0,0 +1,45 @@
+.workspace {
+ height: 100%;
+ padding: 20px 30px 10px;
+ overflow-y: auto;
+ background-color: linear-gradient(#ecf2fe, #f9fafb);
+
+ &__overview {
+ margin-bottom: 16px;
+ padding: 20px 30px;
+ background-color: white;
+ border-radius: 4px;
+
+ &__title {
+ margin-bottom: 20px;
+ color: @text-color;
+ font-weight: 500;
+ font-size: @font-size-title;
+ }
+
+ &__content {
+ display: flex;
+ gap: 15px;
+ align-items: center;
+
+ @media screen and (max-width: 1800px) {
+ flex-wrap: wrap;
+ }
+ }
+ }
+
+ &__quick-start {
+ display: flex;
+ gap: 15px;
+ align-items: flex-start;
+ width: 100%;
+ }
+
+ &__user {
+ display: flex;
+ flex-direction: column;
+ width: 326px;
+ min-width: 326px;
+ height: 700px;
+ }
+}
diff --git a/react-ui/src/pages/Workspace/index.tsx b/react-ui/src/pages/Workspace/index.tsx
new file mode 100644
index 00000000..55acd264
--- /dev/null
+++ b/react-ui/src/pages/Workspace/index.tsx
@@ -0,0 +1,71 @@
+import { getWorkspaceOverviewReq } from '@/services/workspace';
+import { ExperimentInstance } from '@/types';
+import { to } from '@/utils/promise';
+import { useEffect, useState } from 'react';
+import AssetsManagement from './components/AssetsManagement';
+import ExperimentChart, { type ExperimentStatistics } from './components/ExperimentChart';
+import ExperitableTable from './components/ExperimentTable';
+import QuickStart from './components/QuickStart';
+import TotalStatistics from './components/TotalStatistics';
+import UserSpace from './components/UserSpace';
+import WorkspaceIntro from './components/WorkspaceIntro';
+import styles from './index.less';
+
+type OverviewData = {
+ workflowCount: number;
+ runningExperimentInsCount: number;
+ experimentInsStatus: ExperimentStatistics;
+ latestExperimentInsList: ExperimentInstance[];
+};
+
+function Workspace() {
+ const [overviewData, setOverviewData] = useState
+
+ 自主实验平台
+
+ 材料领域的自主实验系统是一种用于材料研究和开发的技术平台，它旨在提供实验数据收集、分析和可视化等功能，
+ 以支持材料工程师、科学家和研究人员在材料设计、性能评估和工艺优化方面的工作
+
+
+
+ }
+ >
+ 功能材料自主实验系统
+
+
+ }
+ >
+ 分子材料自主实验系统
+
+
+
+ })
+
+
+
+
+ );
+}
+
+export default Workspace;
diff --git a/react-ui/src/requestConfig.ts b/react-ui/src/requestConfig.ts
index 501e78c5..2a9d6413 100644
--- a/react-ui/src/requestConfig.ts
+++ b/react-ui/src/requestConfig.ts
@@ -46,7 +46,8 @@ export const requestConfig: RequestConfig = {
],
responseInterceptors: [
(response: any) => {
- const { status, data } = response;
+ const { status, data } = response || {};
+ console.log('response2', response);
if (status >= 200 && status < 300) {
if (data && (data instanceof Blob || data.code === 200)) {
return response;
diff --git a/react-ui/src/services/ant-design-pro/typings.d.ts b/react-ui/src/services/ant-design-pro/typings.d.ts
index 0da99b38..e94832c6 100644
--- a/react-ui/src/services/ant-design-pro/typings.d.ts
+++ b/react-ui/src/services/ant-design-pro/typings.d.ts
@@ -14,6 +14,9 @@ declare namespace API {
};
address?: string;
phone?: string;
+ roleNames?: {
+ roleName?: string;
+ }[];
};
type ErrorResponse = {
diff --git a/react-ui/src/services/mirror/index.ts b/react-ui/src/services/mirror/index.ts
index 331408a2..5820f631 100644
--- a/react-ui/src/services/mirror/index.ts
+++ b/react-ui/src/services/mirror/index.ts
@@ -1,7 +1,7 @@
/*
* @Author: 赵伟
* @Date: 2024-04-16 14:29:44
- * @Description:
+ * @Description: 镜像管理接口
*/
import { request } from '@umijs/max';
diff --git a/react-ui/src/services/workspace/index.ts b/react-ui/src/services/workspace/index.ts
new file mode 100644
index 00000000..c6cd9696
--- /dev/null
+++ b/react-ui/src/services/workspace/index.ts
@@ -0,0 +1,21 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-16 14:29:44
+ * @Description: 工作空间接口
+ */
+import { request } from '@umijs/max';
+
+// 获取工作空间概况
+export function getWorkspaceOverviewReq() {
+ return request(`/api/mmp/workspace/overview`, {
+ method: 'GET',
+ });
+}
+
+// 获取工作空间概况
+export function getWorkspaceAssetCountReq(params: any) {
+ return request(`/api/mmp/workspace/assetCount`, {
+ method: 'GET',
+ params,
+ });
+}
diff --git a/react-ui/src/styles/theme.less b/react-ui/src/styles/theme.less
index 0f93891e..c6514915 100644
--- a/react-ui/src/styles/theme.less
+++ b/react-ui/src/styles/theme.less
@@ -6,6 +6,7 @@
// 颜色
@primary-color: #1664ff; // 主色调
+@primary-color-secondary: #4e89ff;
@primary-color-hover: #69b1ff;
@background-color: #f9fafb; // 页面背景颜色
@text-color: #1d1d20;
@@ -15,17 +16,35 @@
@warning-color: #f98e1b;
@border-color: rgba(22, 100, 255, 0.3);
-@border-color-second: rgba(22, 100, 255, 0.1);
-@background-color-primay: rgba(22, 100, 255, 0.03);
+@border-color-secondary: rgba(22, 100, 255, 0.1);
+@background-color-primary: rgba(22, 100, 255, 0.03);
@background-color-gray: rgba(4, 3, 3, 0.06);
@heading-color: rgba(0, 0, 0, 0.85);
@input-icon-hover-color: rgba(0, 0, 0, 0.85);
@border-color-base: #d9d9d9;
@link-hover-color: #69b1ff;
+@sider-background-color: #f2f5f7;
+
+@workspace-background: linear-gradient(
+ 179.03deg,
+ rgba(138, 138, 138, 0.06) 0%,
+ rgba(22, 100, 255, 0.02) 100%
+);
// 字体大小
@font-size: 15px;
+@font-size-title: 18px;
+@font-size-content: 16px;
+
+// 函数
+.addAlpha(@color, @alpha) {
+ @red: red(@color);
+ @green: green(@color);
+ @blue: blue(@color);
+
+ @result: rgba(@red, @green, @blue, @alpha);
+}
// 导出变量
:export {
@@ -34,5 +53,7 @@
errorColor: @error-color;
warningColor: @warning-color;
textColor: @text-color;
+ textColorSecondary: @text-color-secondary;
fontSize: @font-size;
+ siderBGColor: @sider-background-color;
}
diff --git a/react-ui/src/types.ts b/react-ui/src/types.ts
index 8e49075e..a0f53f2d 100644
--- a/react-ui/src/types.ts
+++ b/react-ui/src/types.ts
@@ -12,3 +12,19 @@ export type PipelineGlobalParam = {
param_value: number | string | boolean;
is_sensitive: number;
};
+
+// 实验实例
+export type ExperimentInstance = {
+ id: number;
+ experiment_id: number;
+ workflow_id: number;
+ create_time: string;
+ finish_time: string;
+ update_time: string;
+ status: string;
+ argo_ins_name: string;
+ argo_ins_ns: string;
+ nodes_result: string;
+ nodes_status: string;
+ global_param: PipelineGlobalParam[];
+};
diff --git a/react-ui/src/utils/date.ts b/react-ui/src/utils/date.ts
index be36af05..eaab9f3f 100644
--- a/react-ui/src/utils/date.ts
+++ b/react-ui/src/utils/date.ts
@@ -36,3 +36,15 @@ export const isValidDate = (date: Date): boolean => {
}
return false;
};
+
+// 格式化日期
+export const formatDate = (text: Date | string, format = 'YYYY-MM-DD HH:mm:ss'): string => {
+ if (text === undefined || text === null || text === '') {
+ return '--';
+ }
+ if (!dayjs(text).isValid()) {
+ return '--';
+ }
+
+ return dayjs(text).format(format);
+};
diff --git a/react-ui/src/utils/ui.tsx b/react-ui/src/utils/ui.tsx
index ddf83f6f..4088d703 100644
--- a/react-ui/src/utils/ui.tsx
+++ b/react-ui/src/utils/ui.tsx
@@ -51,7 +51,7 @@ export const gotoLoginPage = (toHome: boolean = true) => {
const { pathname, search } = window.location;
const urlParams = new URLSearchParams();
urlParams.append('redirect', pathname + search);
- const newSearch = toHome ? '' : urlParams.toString();
+ const newSearch = toHome && pathname && pathname !== PageEnum.LOGIN ? '' : urlParams.toString();
if (window.location.pathname !== PageEnum.LOGIN) {
history.replace({
pathname: PageEnum.LOGIN,
+
+ 运行概览
+
+
+
+
+
+
+