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

fix: fixed the issue of incorrect background color of canvas node in dark mode (#1830)

Browse Source
This commit is contained in:
Dreammy23
2024-08-15 00:33:44 +08:00
committed by GitHub
parent a07676ef87 9796bf9a9d
commit 145b25559f
4 changed files with 23 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/components/flow/canvas-node.tsx
View File

@@ -26,7 +26,7 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
const { inputs, outputs, parameters, flow_type: flowType } = node;
const [isHovered, setIsHovered] = useState(false);
const reactFlow = useReactFlow();
function onHover() {
setIsHovered(true);
}
@@ -74,9 +74,9 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
function renderOutput(data: IFlowNode) {
if (flowType === 'operator' && outputs?.length > 0) {
return (
<div className="bg-zinc-100 rounded p-2">
<div className="bg-zinc-100 dark:bg-zinc-700 rounded p-2">
<TypeLabel label="Outputs" />
<div className="text-sm flex flex-col space-y-3">
<div className="flex flex-col space-y-3">
{outputs?.map((output, index) => (
<NodeHandler key={`${data.id}_input_${index}`} node={data} data={output} type="source" label="outputs" index={index} />
))}
@@ -86,11 +86,9 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
} else if (flowType === 'resource') {
// resource nodes show output default
return (
<div className="bg-zinc-100 rounded p-2">
<div className="bg-zinc-100 dark:bg-zinc-700 rounded p-2">
<TypeLabel label="Outputs" />
<div className="text-sm">
<NodeHandler key={`${data.id}_input_0`} node={data} data={data} type="source" label="outputs" index={0} />
</div>
<NodeHandler key={`${data.id}_input_0`} node={data} data={data} type="source" label="outputs" index={0} />
</div>
);
}
@@ -126,7 +124,7 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
>
<div
className={classNames(
'w-72 h-auto rounded-xl shadow-md px-2 py-4 border bg-white dark:bg-zinc-800 cursor-grab flex flex-col space-y-2 text-sm',
'w-80 h-auto rounded-xl shadow-md px-2 py-4 border bg-white dark:bg-zinc-800 cursor-grab flex flex-col space-y-2 text-sm',
{
'border-blue-500': node.selected || isHovered,
'border-stone-400 dark:border-white': !node.selected && !isHovered,
@@ -144,9 +142,9 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
</div>
{inputs?.length > 0 && (
<div className="bg-zinc-100 rounded p-2">
<div className="bg-zinc-100 dark:bg-zinc-700 rounded p-2">
<TypeLabel label="Inputs" />
<div className="text-sm flex flex-col space-y-2">
<div className="flex flex-col space-y-2">
{inputs?.map((input, index) => (
<NodeHandler key={`${node.id}_input_${index}`} node={node} data={input} type="target" label="inputs" index={index} />
))}
@@ -155,9 +153,9 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
)}
{parameters?.length > 0 && (
<div className="bg-zinc-100 rounded p-2">
<div className="bg-zinc-100 dark:bg-zinc-700 rounded p-2">
<TypeLabel label="Parameters" />
<div className="text-sm flex flex-col space-y-3 text-neutral-500">
<div className="flex flex-col space-y-3 text-neutral-500">
{parameters?.map((parameter, index) => (
<NodeParamHandler key={`${node.id}_param_${index}`} node={node} data={parameter} label="parameters" index={index} />
))}

2
web/components/flow/node-handler.tsx
View File

@@ -101,7 +101,7 @@ const NodeHandler: React.FC<NodeHandlerProps> = ({ node, data, type, label, inde
isValidConnection={(connection) => isValidConnection(connection)}
/>
<Typography
className={classNames('bg-white w-full px-2 py-1 rounded text-neutral-500',{
className={classNames('bg-white dark:bg-[#232734] w-full px-2 py-1 rounded text-neutral-500',{
'text-right': label === 'outputs',
})}
>

12
web/components/flow/node-renderer/date-picker.tsx
View File

@@ -11,11 +11,21 @@ type Props = {
export const RenderDatePicker = (params: Props) => {
const { data, defaultValue, onChange } = params;
console.log('data', data);
const attr = convertKeysToCamelCase(data.ui?.attr || {});
const onChangeDate: DatePickerProps['onChange'] = (date, dateString) => {
onChange(dateString);
};
return <DatePicker {...attr} className="w-full" defaultValue={dayjs(defaultValue)} onChange={onChangeDate} />;
return (
<DatePicker
{...attr}
className="w-full"
placeholder="please select a date"
defaultValue={defaultValue ? dayjs(defaultValue) : null}
onChange={onChangeDate}
/>
);
};

2
web/components/flow/node-renderer/time-picker.tsx
View File

@@ -17,5 +17,5 @@ export const RenderTimePicker = (params: TextAreaProps) => {
onChange(timeString);
};
return <TimePicker {...attr} className="w-full" defaultValue={defaultValue} onChange={onChangeTime} />;
return <TimePicker {...attr} className="w-full" defaultValue={defaultValue} onChange={onChangeTime} placeholder="please select a moment" />;
};