修改了节点面板的样式。

This commit is contained in:
dengqichen 2024-12-06 15:17:10 +08:00
parent d5a0c09857
commit f7f3068baf
3 changed files with 132 additions and 4 deletions

View File

@ -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;
}
}
}

View File

@ -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;

View File

@ -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"