fix(web): ui upgrade
This commit is contained in:
@@ -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)}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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')
|
||||
? <>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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')}
|
||||
/>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user