fix(web): ui upgrade

This commit is contained in:
zhaoying
2026-03-25 13:58:25 +08:00
parent 9df41456f6
commit 2b9fd33bc8
42 changed files with 223 additions and 191 deletions

View File

@@ -1,10 +1,14 @@
import type { FC } from 'react';
import { Select, Divider } from 'antd';
// import { Node } from '@antv/x6';
import type { GraphRef } from '../types'
import { PlusOutlined, MinusOutlined, FileAddOutlined } from '@ant-design/icons'
import clsx from 'clsx'
import { Node } from '@antv/x6';
import type { GraphRef } from '../types'
interface CanvasToolbarProps {
/** Currently selected node */
selectedNode: Node | null;
miniMapRef: React.RefObject<HTMLDivElement>;
graphRef: GraphRef;
isHandMode: boolean;
@@ -14,6 +18,7 @@ interface CanvasToolbarProps {
}
const CanvasToolbar: FC<CanvasToolbarProps> = ({
selectedNode,
miniMapRef,
graphRef,
zoomLevel,
@@ -26,9 +31,15 @@ const CanvasToolbar: FC<CanvasToolbarProps> = ({
return (
<>
{/* 小地图 */}
<div ref={miniMapRef} className="rb:absolute rb:bottom-15 rb:right-8 rb:z-1000 rb:rounded-lg rb:overflow-hidden"></div>
<div ref={miniMapRef} className={clsx("rb:absolute rb:bottom-15 rb:z-1000 rb:rounded-lg rb:overflow-hidden", {
'rb:right-8': !selectedNode,
'rb:right-95.5': selectedNode,
})}></div>
{/* 缩放控制按钮 */}
<div className="rb:h-8.5 rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.15)] rb:px-3 rb:py-2 rb:absolute rb:bottom-5 rb:right-8 rb:flex rb:flex-row rb:items-center rb:gap-4 rb:z-1000">
<div className={clsx("rb:h-8.5 rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.15)] rb:px-3 rb:py-2 rb:absolute rb:bottom-5 rb:flex rb:flex-row rb:items-center rb:gap-4 rb:z-1000", {
'rb:right-8': !selectedNode,
'rb:right-95.5': selectedNode,
})}>
<MinusOutlined className="rb:text-[16px] rb:cursor-pointer" onClick={() => graphRef.current?.zoom(-0.1)} />
<Select
value={Math.round(zoomLevel * 100)}

View File

@@ -13,6 +13,9 @@
border-color: rgba(91, 97, 103, 0.30);
border-radius: 8px;
}
.default:global(.ant-collapse .ant-collapse-content) {
padding-top: 12px;
}
.collapse-item {
font-size: 12px;
line-height: 16px;

View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2025-12-23 16:22:51
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-03 10:11:48
* @Last Modified time: 2026-03-25 10:58:47
*/
import { type FC, useState, useEffect, useMemo } from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
@@ -185,7 +185,7 @@ const Editor: FC<LexicalEditorProps> =({
// Calculate line height based on size prop
const lineHeight = useMemo(() => {
return `${height ? 16 : size === 'small' && variant === 'borderless' ? 18 : size === 'small' ? 16 : 20}px`
return `${height ? height - 10 : size === 'small' && variant === 'borderless' ? 18 : size === 'small' ? 16 : 20}px`
}, [size])
// Calculate placeholder minimum height
@@ -228,7 +228,7 @@ const Editor: FC<LexicalEditorProps> =({
<ContentEditable
style={{
minHeight: minheight,
padding: height || variant === 'borderless' ? '0' : '6px 8px',
padding: height ? '4px 6px' : variant === 'borderless' ? '0' : '6px 8px',
border: variant === 'borderless' ? 'none' : '1px solid #EBEBEB',
borderRadius: '8px',
outline: 'none',

View File

@@ -79,7 +79,7 @@ const ConditionNode: ReactShapeConfig['component'] = ({ node }) => {
{item.expressions.length > 0 && <Flex vertical gap={2}>
{item.expressions.map((expression: any, eIndex: number) => (
<div key={eIndex} className="rb:relative">
{item.expressions.length > 1 && eIndex > 0 && <div className="rb:absolute rb:-top-2 rb:right-2 rb:text-[10px] rb:text-[#155EEF] rb:font-medium rb:leading-3.5 rb:text-right rb:pr-0.5">{item.logical_operator.toLocaleUpperCase()}</div>}
{item.expressions.length > 1 && eIndex > 0 && <div className="rb:absolute rb:-top-2 rb:right-2 rb:text-[10px] rb:text-[#155EEF] rb:font-medium rb:leading-3.5 rb:text-right rb:pr-0.5">{item.logical_operator?.toLocaleUpperCase()}</div>}
<Flex align="center" className="rb:bg-[#F0F3F8] rb:shadow-[0px_2px_4px_0px_rgba(23,23,25,0.03)] rb:rounded-md rb:py-1! rb:px-1.5! rb:text-[10px] rb:text-[#5B6167] rb:font-medium rb:leading-3.5">
{caculateIsSet(expression, 'cases')
? <>

View File

@@ -29,7 +29,7 @@ const ModelConfig: FC = () => {
{model_id && (
<RbCard
title={t('workflow.config.llm.parameterSettings')}
headerClassName="rb:min-h-8! rb:mx-2!"
headerClassName="rb:min-h-8! rb:mx-2! rb:text-[12px]!"
bodyClassName="rb:pt-[14px]! rb:px-2! rb:pb-2!"
className="rb-border! rb:mb-4!"
variant="outlined"

View File

@@ -212,10 +212,11 @@ const ToolConfig: FC<{ options: Suggestion[]; }> = ({
onChange={(value) => form.setFieldValue(['tool_parameters', parameter.name], value)}
/>
: <Editor
height={32}
variant="outlined"
options={options}
type="input"
size="small"
height={28}
options={options}
placeholder={t('common.pleaseEnter')}
/>
}

View File

@@ -73,6 +73,7 @@ const Workflow = forwardRef<WorkflowRef, { onFeaturesLoad?: (features: FeaturesC
<div ref={containerRef} className="rb:w-full rb:h-full" />
{/* 地图工具栏 */}
<CanvasToolbar
selectedNode={selectedNode}
miniMapRef={miniMapRef}
graphRef={graphRef}
isHandMode={isHandMode}