修改了节点面板的样式。
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 { Tabs, Spin } from 'antd';
|
||||
import { NodeType, getNodeTypes } from '../../service';
|
||||
import './index.css';
|
||||
import './index.less';
|
||||
|
||||
interface NodePanelProps {
|
||||
onNodeDragStart: (nodeType: NodeType) => void;
|
||||
|
||||
@ -743,9 +743,11 @@ const FlowDesigner: React.FC = () => {
|
||||
return (
|
||||
<Card
|
||||
title={
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Button icon={<ArrowLeftOutlined/>} onClick={() => navigate(-1)}>返回</Button>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
|
||||
<Space>
|
||||
<Button type="primary" icon={<SaveOutlined/>} onClick={handleSave}>保存</Button>
|
||||
<Button icon={<ArrowLeftOutlined/>} onClick={() => navigate(-1)}>返回</Button>
|
||||
</Space>
|
||||
</div>
|
||||
}
|
||||
className="workflow-designer"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user