github/DB-GPT
1
0
Fork 0
mirror of https://github.com/csunny/DB-GPT.git synced 2025-09-07 03:50:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): Unified frontend code style (#1923)

Browse Source 
Co-authored-by: Fangyin Cheng <staneyffer@gmail.com>
Co-authored-by: 谨欣 <echo.cmy@antgroup.com>
Co-authored-by: 严志勇 <yanzhiyong@tiansuixiansheng.com>
Co-authored-by: yanzhiyong <932374019@qq.com>
This commit is contained in:
Dreammy23
2024-08-30 14:03:06 +08:00
committed by GitHub
parent f866580703
commit 471689ba20
247 changed files with 4960 additions and 4546 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
web/components/flow/add-nodes.tsx
View File

@@ -1,10 +1,10 @@
import { apiInterceptors, getFlowNodes } from '@/client/api';
import { IFlowNode } from '@/types/flow';
import { FLOW_NODES_KEY } from '@/utils';
import { PlusOutlined } from '@ant-design/icons';
import { Badge, Button, Collapse, CollapseProps, Input, Popover } from 'antd';
import React, { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FLOW_NODES_KEY } from '@/utils';
import StaticNodes from './static-nodes';
const { Search } = Input;
@@ -27,8 +27,8 @@ const AddNodes: React.FC = () => {
const [_, data] = await apiInterceptors(getFlowNodes());
if (data && data.length > 0) {
localStorage.setItem(FLOW_NODES_KEY, JSON.stringify(data));
const operatorNodes = data.filter((node) => node.flow_type === 'operator');
const resourceNodes = data.filter((node) => node.flow_type === 'resource');
const operatorNodes = data.filter(node => node.flow_type === 'operator');
const resourceNodes = data.filter(node => node.flow_type === 'resource');
setOperators(operatorNodes);
setResources(resourceNodes);
setOperatorsGroup(groupNodes(operatorNodes));
@@ -39,7 +39,7 @@ const AddNodes: React.FC = () => {
function groupNodes(data: IFlowNode[]) {
const groups: GroupType[] = [];
const categoryMap: Record<string, { category: string; categoryLabel: string; nodes: IFlowNode[] }> = {};
data.forEach((item) => {
data.forEach(item => {
const { category, category_label } = item;
if (!categoryMap[category]) {
categoryMap[category] = { category, categoryLabel: category_label, nodes: [] };
@@ -56,15 +56,27 @@ const AddNodes: React.FC = () => {
key: category,
label: categoryLabel,
children: <StaticNodes nodes={nodes} />,
extra: <Badge showZero count={nodes.length || 0} style={{ backgroundColor: nodes.length > 0 ? '#52c41a' : '#7f9474' }} />,
extra: (
<Badge
showZero
count={nodes.length || 0}
style={{ backgroundColor: nodes.length > 0 ? '#52c41a' : '#7f9474' }}
/>
),
}));
} else {
const searchedNodes = operators.filter((node) => node.label.toLowerCase().includes(searchValue.toLowerCase()));
const searchedNodes = operators.filter(node => node.label.toLowerCase().includes(searchValue.toLowerCase()));
return groupNodes(searchedNodes).map(({ category, categoryLabel, nodes }) => ({
key: category,
label: categoryLabel,
children: <StaticNodes nodes={nodes} />,
extra: <Badge showZero count={nodes.length || 0} style={{ backgroundColor: nodes.length > 0 ? '#52c41a' : '#7f9474' }} />,
extra: (
<Badge
showZero
count={nodes.length || 0}
style={{ backgroundColor: nodes.length > 0 ? '#52c41a' : '#7f9474' }}
/>
),
}));
}
}, [operatorsGroup, searchValue]);
@@ -75,15 +87,27 @@ const AddNodes: React.FC = () => {
key: category,
label: categoryLabel,
children: <StaticNodes nodes={nodes} />,
extra: <Badge showZero count={nodes.length || 0} style={{ backgroundColor: nodes.length > 0 ? '#52c41a' : '#7f9474' }} />,
extra: (
<Badge
showZero
count={nodes.length || 0}
style={{ backgroundColor: nodes.length > 0 ? '#52c41a' : '#7f9474' }}
/>
),
}));
} else {
const searchedNodes = resources.filter((node) => node.label.toLowerCase().includes(searchValue.toLowerCase()));
const searchedNodes = resources.filter(node => node.label.toLowerCase().includes(searchValue.toLowerCase()));
return groupNodes(searchedNodes).map(({ category, categoryLabel, nodes }) => ({
key: category,
label: categoryLabel,
children: <StaticNodes nodes={nodes} />,
extra: <Badge showZero count={nodes.length || 0} style={{ backgroundColor: nodes.length > 0 ? '#52c41a' : '#7f9474' }} />,
extra: (
<Badge
showZero
count={nodes.length || 0}
style={{ backgroundColor: nodes.length > 0 ? '#52c41a' : '#7f9474' }}
/>
),
}));
}
}, [resourcesGroup, searchValue]);
@@ -94,25 +118,25 @@ const AddNodes: React.FC = () => {
return (
<Popover
placement="bottom"
placement='bottom'
trigger={['click']}
content={
<div className="w-[320px] overflow-hidden overflow-y-auto scrollbar-default">
<p className="my-2 font-bold">{t('add_node')}</p>
<Search placeholder="Search node" onSearch={searchNode} />
<div className='w-[320px] overflow-hidden overflow-y-auto scrollbar-default'>
<p className='my-2 font-bold'>{t('add_node')}</p>
<Search placeholder='Search node' onSearch={searchNode} />
<h2 className="my-2 ml-2 font-semibold">{t('operators')}</h2>
<h2 className='my-2 ml-2 font-semibold'>{t('operators')}</h2>
<Collapse
className="max-h-[300px] overflow-hidden overflow-y-auto scrollbar-default"
size="small"
className='max-h-[300px] overflow-hidden overflow-y-auto scrollbar-default'
size='small'
defaultActiveKey={['']}
items={operatorItems}
/>
<h2 className="my-2 ml-2 font-semibold">{t('resource')}</h2>
<h2 className='my-2 ml-2 font-semibold'>{t('resource')}</h2>
<Collapse
className="max-h-[300px] overflow-hidden overflow-y-auto scrollbar-default"
size="small"
className='max-h-[300px] overflow-hidden overflow-y-auto scrollbar-default'
size='small'
defaultActiveKey={['']}
items={resourceItems}
/>
@@ -120,8 +144,8 @@ const AddNodes: React.FC = () => {
}
>
<Button
type="primary"
className="flex items-center justify-center rounded-full left-4 top-4"
type='primary'
className='flex items-center justify-center rounded-full left-4 top-4'
style={{ zIndex: 1050 }}
icon={<PlusOutlined />}
/>