修改了节点面板的样式。
This commit is contained in:
parent
d5a0c09857
commit
f7f3068baf
@ -0,0 +1,126 @@
|
|||||||
|
.node-panel {
|
||||||
|
height: 100%;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
&-loading {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-tabs {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.ant-tabs-nav {
|
||||||
|
margin: 0;
|
||||||
|
padding: 12px 12px 0;
|
||||||
|
background: #fafafa;
|
||||||
|
|
||||||
|
.ant-tabs-tab {
|
||||||
|
padding: 8px 16px !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
transition: all 0.3s;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ant-tabs-tab-active {
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.ant-tabs-tab-btn {
|
||||||
|
color: #1890ff;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-tabs-content {
|
||||||
|
height: calc(100% - 44px); // 减去tab导航的高度
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-panel-content {
|
||||||
|
height: 100%;
|
||||||
|
padding: 16px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: #ccc;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-card {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e6e6e6;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: move;
|
||||||
|
transition: all 0.2s;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #1890ff;
|
||||||
|
background: #e6f7ff;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
margin-right: 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #f0f5ff;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-name {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #262626;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: 16px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E") center/contain no-repeat;
|
||||||
|
opacity: 0.5;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover::after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { Tabs, Spin } from 'antd';
|
import { Tabs, Spin } from 'antd';
|
||||||
import { NodeType, getNodeTypes } from '../../service';
|
import { NodeType, getNodeTypes } from '../../service';
|
||||||
import './index.css';
|
import './index.less';
|
||||||
|
|
||||||
interface NodePanelProps {
|
interface NodePanelProps {
|
||||||
onNodeDragStart: (nodeType: NodeType) => void;
|
onNodeDragStart: (nodeType: NodeType) => void;
|
||||||
|
|||||||
@ -743,9 +743,11 @@ const FlowDesigner: React.FC = () => {
|
|||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
title={
|
title={
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
|
||||||
<Button icon={<ArrowLeftOutlined/>} onClick={() => navigate(-1)}>返回</Button>
|
<Space>
|
||||||
<Button type="primary" icon={<SaveOutlined/>} onClick={handleSave}>保存</Button>
|
<Button type="primary" icon={<SaveOutlined/>} onClick={handleSave}>保存</Button>
|
||||||
|
<Button icon={<ArrowLeftOutlined/>} onClick={() => navigate(-1)}>返回</Button>
|
||||||
|
</Space>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
className="workflow-designer"
|
className="workflow-designer"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user