adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): ui update

Browse Source
This commit is contained in:
zhaoying
2026-04-17 11:11:54 +08:00
parent 5a2fe738dc
commit e87529876c
24 changed files with 227 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/assets/images/common/close_grey.svg Normal file
View File

@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>关闭</title>
<g id="空间里层页面优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="应用管理-My-Shares" transform="translate(-1396, -127)" fill="#5B6167" fill-rule="nonzero">
<g id="卡片1备份-2" transform="translate(1044, 108)">
<g id="编组-12" transform="translate(349, 16)">
<g id="关闭" transform="translate(3, 3)">
<polygon id="路径" points="9.00000098 8 13.3333333 12.3333324 12.3333324 13.3333333 8 9.00000098 3.66666764 13.3333333 2.66666667 12.3333324 6.99999902 8 2.66666667 3.66666764 3.66666764 2.66666667 8 6.99999902 12.3333324 2.66666667 13.3333333 3.66666764"></polygon>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1005 B

17
web/src/assets/images/logout.svg
View File

@@ -1,17 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>退出</title>
<g id="V1.0版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="应用管理-编排-默认状态" transform="translate(-1262, -24)" stroke="#5B6167">
<g id="返回空间" transform="translate(1262, 24)">
<g id="退出" transform="translate(8, 8) scale(-1, 1) translate(-8, -8)">
<g id="编组-7" transform="translate(2.5, 2)">
<path d="M6,12 L1,12 C0.44771525,12 0,11.5522847 0,11 L0,1 C0,0.44771525 0.44771525,1.11022302e-16 1,0 L6,0 L6,0" id="路径"></path>
<line x1="11" y1="6" x2="3" y2="6" id="路径-6"></line>
<polyline id="路径" points="8 3 11 6 8 9"></polyline>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

19
web/src/assets/images/logout_grey.svg Normal file
View File

@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>退出</title>
<g id="空间里层页面优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="空间配置" transform="translate(-22, -763)" stroke="#5B6167" stroke-width="1.2">
<g id="退出" transform="translate(0, 742)">
<g id="返回空间" transform="translate(12, 10)">
<g id="退出" transform="translate(10, 11)">
<g id="编组-7" transform="translate(2.5, 2)">
<path d="M6,12 L1,12 C0.44771525,12 0,11.5522847 0,11 L0,1 C0,0.44771525 0.44771525,1.11022302e-16 1,0 L6,0 L6,0" id="路径"></path>
<line x1="11" y1="6" x2="3" y2="6" id="路径-6"></line>
<polyline id="路径" points="8 3 11 6 8 9"></polyline>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

17
web/src/assets/images/logout_hover.svg
View File

@@ -1,17 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>退出</title>
<g id="V1.0版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="应用管理-编排-默认状态" transform="translate(-1262, -24)" stroke="#155EEF">
<g id="返回空间" transform="translate(1262, 24)">
<g id="退出" transform="translate(8, 8) scale(-1, 1) translate(-8, -8)">
<g id="编组-7" transform="translate(2.5, 2)">
<path d="M6,12 L1,12 C0.44771525,12 0,11.5522847 0,11 L0,1 C0,0.44771525 0.44771525,1.11022302e-16 1,0 L6,0 L6,0" id="路径"></path>
<line x1="11" y1="6" x2="3" y2="6" id="路径-6"></line>
<polyline id="路径" points="8 3 11 6 8 9"></polyline>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

8
web/src/components/CodeMirrorEditor/index.tsx
View File

@@ -1,8 +1,8 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-04 17:20:52
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-04 17:20:52
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-04-16 11:46:39
*/
import { useEffect, useRef, useMemo } from 'react';
import { EditorView, basicSetup } from 'codemirror';
@@ -35,7 +35,7 @@ interface CodeMirrorEditorProps {
height?: string;
size?: 'default' | 'small';
placeholder?: string;
variant?: 'outlined' | 'borderless';
variant?: 'outlined' | 'borderless' | 'filled';
}
/**
@@ -156,7 +156,7 @@ const CodeMirrorEditor = ({
<div
ref={editorRef}
style={{ minHeight, fontSize, lineHeight }}
className={variant === 'borderless' ? '' : 'rb-border rb:rounded-[8px]'}
className={variant === 'outlined' ? 'rb-border rb:rounded-lg' : variant === 'filled' ? 'cm-editor-filled rb:rounded-lg' : ''}
/>
);
};

1
web/src/components/PageTabs/index.module.css
View File

@@ -1,5 +1,6 @@
.page-tabs:global(.ant-segmented) {
padding: 4px;
margin-left: 4px;
}
.page-tabs:global(.ant-segmented .ant-segmented-item-label) {
line-height: 24px;

3
web/src/components/RbSlider/index.tsx
View File

@@ -44,6 +44,7 @@ const RbSlider: FC<RbSliderProps> = ({
className = '',
prefix,
inputClassName,
disabled,
...rest
}) => {
const [curValue, setCurValue] = useState<SliderSingleProps['value']>(0)
@@ -83,6 +84,7 @@ const RbSlider: FC<RbSliderProps> = ({
max={max}
step={step}
value={curValue}
disabled={disabled}
onChange={handleSliderChange}
classNames={size === 'small' ? {
rail: 'rb:w-[calc(100%-6px)]!'
@@ -96,6 +98,7 @@ const RbSlider: FC<RbSliderProps> = ({
max={max}
step={step as number}
value={curValue}
disabled={disabled}
onChange={handleInputChange}
prefix={prefix}
className={`${inputClassName || '' } rb:w-20!`}

2
web/src/components/SiderMenu/index.tsx
View File

@@ -337,7 +337,7 @@ const Menu: FC<{
onClick={goToSpace}
className="rb-border-t rb:pt-5! rb:pb-2.5! rb:absolute rb:bottom-2.5 rb:right-5 rb:left-5 rb:text-[13px] rb:text-[#5B6167] rb:hover:text-[#212332] rb:leading-4.5 rb:font-regular rb:text-center rb:mt-2.25 rb:cursor-pointer"
>
<div className="rb:cursor-pointer rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/logout.svg')]"></div>
<div className="rb:cursor-pointer rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/logout_grey.svg')]"></div>
{collapsed ? null : t('common.returnToSpace')}
</Flex>
}

4
web/src/components/Tag/index.tsx
View File

@@ -18,7 +18,7 @@ import { type FC, type ReactNode } from 'react'
/** Props interface for Tag component */
export interface TagProps {
/** Color theme for the tag */
color?: 'processing' | 'error' | 'success' | 'warning' | 'default',
color?: 'processing' | 'error' | 'success' | 'warning' | 'default' | 'purple' | 'dark',
/** Tag content */
children: ReactNode;
/** Additional CSS classes */
@@ -32,6 +32,8 @@ const colors = {
success: 'rb:text-[#369F21] rb:border-[rgba(54,159,33,0.25)] rb:bg-[rgba(54,159,33,0.06)]',
warning: 'rb:text-[#FF5D34] rb:border-[rgba(255,93,52,0.30)] rb:bg-[rgba(255,93,52,0.08)]',
default: 'rb:text-[#5B6167] rb:border-[rgba(91,97,103,0.30)] rb:bg-[rgba(91,97,103,0.08)]',
purple: 'rb:text-[#9C6FFF] rb:border-[rgba(156,111,255,0.25)] rb:bg-[rgba(156,111,255,0.06)]',
dark: 'rb:text-[#171719] rb:border-[rgba(23,23,25,0.25)] rb:border-[rgba(23,23,25,0.06)]'
}
/** Custom tag component with color themes */

20
web/src/styles/index.css
View File

@@ -353,6 +353,26 @@ body {
background-color: transparent;
border: none;
}
.cm-editor-filled {
background: #F6F6F6;
border-radius: 8px;
}
.cm-editor-filled .ͼ1 .cm-lineNumbers .cm-gutterElement {
border-radius: 8px 0 0 8px;
}
.cm-editor-filled .ͼ4 .cm-line {
border-radius: 0 8px 8px 0;
}
.cm-editor-filled .ͼ2 .cm-activeLineGutter,
.cm-editor-filled .ͼ2 .cm-activeLine {
background: transparent;
}
.cm-editor-filled .ͼ1 .cm-placeholder {
color: rgba(23, 23, 25, 0.25);
}
.cm-editor-filled .ͼ1 .cm-lineNumbers .cm-gutterElement {
color: #212332;
}
::-webkit-scrollbar {
width: 6px;
height: 8px;

2
web/src/views/ApplicationConfig/components/ConfigHeader.tsx
View File

@@ -253,7 +253,7 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({
: <Flex justify="flex-end">
<Flex align="center" gap={8} className="rb:leading-5 rb:text-[14px] rb:text-[#5B6167] rb:font-regular rb:cursor-pointer" onClick={goToApplication}>
<div
className="rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/logout.svg')]"
className="rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/logout_grey.svg')]"
></div>
{t('common.return')}
</Flex>

185
web/src/views/ApplicationManagement/MySharing.tsx
View File

@@ -2,27 +2,33 @@
* @Author: ZhaoYing
* @Date: 2026-02-03 16:34:12
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-26 14:39:18
* @Last Modified time: 2026-04-16 11:19:20
*/
import React, { useState, useEffect, useMemo, type MouseEvent } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, App, Flex, Collapse } from 'antd';
import { App, Flex, Row, Col, Space } from 'antd';
import clsx from 'clsx';
import type { MySharedOutItem } from './types';
import { mySharedOutList, cancelShare, cancelSpaceShare } from '@/api/application'
import BodyWrapper from '@/components/Empty/BodyWrapper'
import RbCard from '@/components/RbCard/Card'
import RbDescriptions from '@/components/RbDescriptions'
import Tag from '@/components/Tag'
const MySharing: React.FC = () => {
const { t } = useTranslation();
const { modal } = App.useApp();
const [loading, setLoading] = useState(false)
const [data, setData] = useState<MySharedOutItem[]>([])
useEffect(() => { getList() }, [])
const getList = () => {
setLoading(true)
mySharedOutList()
.then(res => setData(res as MySharedOutItem[]))
.finally(() => setLoading(false))
}
/** Group items by target_workspace_id */
@@ -80,89 +86,114 @@ const MySharing: React.FC = () => {
window.open(url);
}
const [selectedWorkspace, setSelectedWorkspace] = useState<string | null>(null)
const [appList, setAppList] = useState<MySharedOutItem[]>([])
useEffect(() => {
if (grouped.length === 0) {
setSelectedWorkspace(null)
setAppList([])
return
}
const current = grouped.find(g => g.workspace.target_workspace_id === selectedWorkspace)
if (current) {
setAppList(current.items)
} else {
setSelectedWorkspace(grouped[0].workspace.target_workspace_id)
setAppList(grouped[0].items)
}
}, [grouped])
const handleSelectWorkspace = async (target_workspace_id: string) => {
if (target_workspace_id === selectedWorkspace) return
setSelectedWorkspace(target_workspace_id);
const filterWorkspace = grouped.find(item => item.workspace.target_workspace_id === target_workspace_id);
setAppList(filterWorkspace?.items || [])
};
return (
<Flex vertical gap={12} className="rb:max-h-[calc(100%-48px)]! rb:overflow-y-auto!">
<BodyWrapper loading={false} empty={data.length === 0}>
{grouped.map(({ workspace, items }) => (
<Collapse
key={workspace.target_workspace_id}
defaultActiveKey={[workspace.target_workspace_id]}
items={[{
key: workspace.target_workspace_id,
label: (
<BodyWrapper loading={loading} empty={data.length === 0}>
<Row gutter={12}>
<Col flex="384px">
<Flex vertical gap={12}>
{grouped.map(({ workspace, items }) => (
<Flex
key={workspace.target_workspace_id}
gap={8}
justify="space-between"
align="center"
className={clsx("rb:cursor-pointer rb:bg-white rb:py-3! rb:px-4! rb:rounded-2xl rb:border rb:border-white rb:group", {
'rb:border-[#171719]!': selectedWorkspace === workspace.target_workspace_id
})}
onClick={() => handleSelectWorkspace(workspace.target_workspace_id)}
>
<Flex align="center" gap={12}>
{workspace.target_workspace_icon
? <img src={workspace.target_workspace_icon} alt={workspace.target_workspace_icon} className="rb:w-8 rb:h-8 rb:rounded-lg rb:object-cover" />
: <div className="rb:w-8 rb:h-8 rb:rounded-lg rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[14px] rb:text-white">
{workspace.target_workspace_name[0]}
</div>
? <img src={workspace.target_workspace_icon} alt={workspace.target_workspace_icon} className="rb:size-8.5 rb:rounded-lg rb:object-cover" />
: <div className="rb:size-8.5 rb:rounded-lg rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[14px] rb:text-white">
{workspace.target_workspace_name[0]}
</div>
}
<div>
<span className="rb:font-medium">{workspace.target_workspace_name}</span>
<div className="rb:text-[#5B6167] rb:text-[12px]">{t('application.appCount', { count: items.length })}</div>
<span className="rb:font-medium rb:text-[16px] rb:leading-5.5">{workspace.target_workspace_name}</span>
<div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:mt-0.5">{t('application.appCount', { count: items.length })}</div>
</div>
</Flex>
),
extra: (
<Button
size="small"
<div
className="rb:hidden rb:group-hover:block rb:size-7 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/common/delete.svg')] rb:hover:bg-[url('@/assets/images/common/delete_hover.svg')]"
onClick={e => { e.stopPropagation(); handleAllCancel(workspace); }}
>
{t('application.allCancel')}
</Button>
),
children: (
<div className="rb:grid rb:grid-cols-4 rb:gap-3">
{items.map(item => (
<div key={item.id} className="rb:bg-[#F6F6F6] rb:rounded-lg rb:py-3! rb:px-4! rb:relative rb:cursor-pointer" onClick={() => handleEdit(item)}>
<div
className="rb:absolute rb:top-3 rb:right-3 rb:cursor-pointer rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/close.svg')]"
onClick={(e) => handleCancelOne(item, e)}
/>
<Flex gap={8} align="center">
<div className="rb:size-7 rb:rounded-lg rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[14px] rb:text-white">
{item.source_app_name[0]}
</div>
<div className="rb:font-medium">{item.source_app_name}</div>
</Flex>
<Flex vertical gap={4} className="rb:mt-3! rb:text-[12px]!">
<Flex gap={5} justify="space-between">
<span className="rb:text-[#5B6167]">{t('application.type')}</span>
<span className={clsx({
'rb:text-[#155EEF] rb:font-medium': item.source_app_type === 'agent',
'rb:text-[#369F21] rb:font-medium': item.source_app_type === 'multi_agent',
})}>
{t(`application.${item.source_app_type}`)}
</span>
</Flex>
<Flex gap={5} justify="space-between">
<span className="rb:text-[#5B6167]">{t('application.version')}</span>
<span>{item.source_app_version}</span>
</Flex>
<Flex gap={5} justify="space-between">
<span className="rb:text-[#5B6167]">{t('application.permission')}</span>
<span className={clsx({
'rb:text-[#369F21] rb:font-medium': item.permission === 'editable',
'rb:text-[#5B6167] rb:font-medium': item.permission === 'readonly',
})}>
{t(`application.${item.permission}`)}
</span>
</Flex>
<Flex gap={5} justify="space-between">
<span className="rb:text-[#5B6167]">{t('application.souceStatus')}</span>
<span>{item.source_app_is_active ? t('application.sourceActive') : t('application.sourceInactive')}</span>
</Flex>
</Flex>
</div>
))}
</div>
),
}]}
/>
))}
</BodyWrapper>
</Flex>
);
></div>
</Flex>
))}
</Flex>
</Col>
<Col flex="1">
<div className="rb:grid rb:grid-cols-2 rb:gap-3">
{appList.map(item => (
<RbCard
key={item.source_app_id}
title={item.source_app_name}
avatar={<Flex align="center" justify="center" className={clsx("rb:size-12 rb:rounded-lg rb:text-[24px] rb:text-[#ffffff] rb:bg-[#155EEF]", {
'rb:bg-[#155EEF]': item.source_app_type === 'agent',
'rb:bg-[#9C6FFF]!': item.source_app_type === 'multi_agent',
'rb:bg-[#171719]': item.source_app_type === 'workflow',
})}>{item.source_app_name.trim()[0]}</Flex>}
subTitle={<Space size={6}>
<Tag color={item.source_app_type === 'agent' ? 'processing' : item.source_app_type === 'multi_agent' ? 'dark' : 'purple'}>{t(`application.${item.source_app_type}`)}</Tag>
<Tag color={item.source_app_is_active ? 'success' : 'error'}>{item.source_app_is_active ? t('application.sourceActive') : t('application.sourceInactive')}</Tag>
</Space>}
extra={<div
className="rb:-mt-6 rb:cursor-pointer rb:size-5.5 rb:rounded-lg rb:hover:bg-[#F6F6F6] rb:bg-[url('@/assets/images/common/close_grey.svg')] rb:bg-size-[16px_16px] rb:bg-center rb:bg-no-repeat"
onClick={(e) => handleCancelOne(item, e)}
></div>}
bodyClassName="rb:py-6! rb:px-4!"
className="rb:cursor-pointer"
onClick={() => handleEdit(item)}
>
<RbDescriptions
items={[
{
key: 'version',
label: t(`application.version`),
children: item.source_app_version
},
{
key: 'permission',
label: t(`application.permission`),
children: <span className={clsx('rb:font-medium', {
'rb:text-[#369F21]': item.permission === 'editable',
})}>{t(`application.${item.permission}`)}</span>
},
]}
/>
</RbCard>
))}
</div>
</Col>
</Row>
</BodyWrapper>
)
};
export default MySharing;

1
web/src/views/Home/components/TopCardList.tsx
View File

@@ -61,6 +61,7 @@ const TopCardList: FC<{data?: DashboardData}> = ({ data }) => {
<Flex align="center" className={clsx('rb:font-medium rb:mt-7.5!', {
'rb:text-[#FF5D34]': data?.[`${item.key}_change` as keyof DashboardData] && data?.[`${item.key}_change` as keyof DashboardData] < 0,
'rb:text-[#369F21]': !data?.[`${item.key}_change` as keyof DashboardData] || data?.[`${item.key}_change` as keyof DashboardData] >= 0,
'rb:text-[#FFFFFF]': item.key === 'total_memory'
})}>
{data?.[`${item.key}_change` as keyof DashboardData] && typeof data?.[item.key as keyof DashboardData] === 'number'
? (100 * data?.[`${item.key}_change` as keyof DashboardData]).toFixed(2)

66
web/src/views/Ontology/components/PageHeader.tsx
View File

@@ -1,66 +0,0 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 14:10:24
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-06 11:25:59
*/
import { type FC, type ReactNode } from 'react';
import { useNavigate } from 'react-router-dom';
import { Layout, Button } from 'antd';
import { useTranslation } from 'react-i18next';
import logoutIcon from '@/assets/images/logout_hover.svg'
const { Header } = Layout;
/**
* Props for PageHeader component
*/
interface ConfigHeaderProps {
/** Page title/name */
name?: string | ReactNode;
/** Subtitle content displayed below the title */
subTitle?: ReactNode | string;
/** Extra content displayed on the right side */
extra?: ReactNode;
}
/**
* Page header component for ontology pages
* Displays title, subtitle, back button and extra actions
* @param props - Component props
*/
const PageHeader: FC<ConfigHeaderProps> = ({
name,
subTitle,
extra
}) => {
const { t } = useTranslation();
const navigate = useNavigate();
/**
* Navigate back to previous page
*/
const goBack = () => {
navigate(-1)
}
return (
<Header className="rb:w-full rb:h-16 rb:flex rb:justify-between rb:p-[0_16px_0_24px]! rb:border-b rb:border-[#EAECEE] rb:leading-8">
<div className="rb:flex rb:flex-col rb:justify-center rb:gap-1 rb:mr-4 rb:max-w-[calc(100%-300px)]">
<div className="rb:text-[16px] rb:leading-6 rb:font-medium">
{name}
</div>
<div className="rb:text-[12px] rb:text-[#5B6167] rb:leading-4">{subTitle}</div>
</div>
<div className="rb:flex rb:items-center rb:gap-3">
<Button type="primary" ghost className="rb:h-6! rb:px-2! rb:leading-5.5!" onClick={goBack}>
<div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/logout_hover.svg')]" />
{t('common.return')}
</Button>
{extra}
</div>
</Header>
);
};
export default PageHeader;

2
web/src/views/Ontology/pages/Detail.tsx
View File

@@ -122,7 +122,7 @@ const Detail: FC = () => {
</Space>)}
<Flex align="center" className="rb:leading-5 rb:text-[14px] rb:text-[#5B6167] rb:font-regular rb:cursor-pointer" onClick={() => navigate(-1)}>
<div
className="rb:mr-2 rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/logout.svg')]"
className="rb:mr-2 rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/logout_grey.svg')]"
></div>
{t('common.return')}
</Flex>

4
web/src/views/Workflow/components/Editor/Jinja2Editor.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-04-02 15:15:36
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-04-07 14:48:00
* @Last Modified time: 2026-04-16 11:34:41
*/
import { type FC, useEffect, useMemo } from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
@@ -81,7 +81,7 @@ export interface Jinja2EditorProps {
value?: string;
onChange?: (value: string) => void;
options?: Suggestion[];
variant?: 'outlined' | 'borderless';
variant?: 'outlined' | 'borderless' | 'filled';
height?: number;
size?: 'default' | 'small';
className?: string;

26
web/src/views/Workflow/components/Editor/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2025-12-23 16:22:51
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-04-07 16:29:36
* @Last Modified time: 2026-04-16 12:04:37
*/
import { type FC, useState, useMemo } from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
@@ -25,7 +25,7 @@ export interface LexicalEditorProps {
value?: string;
onChange?: (value: string) => void;
options?: Suggestion[];
variant?: 'outlined' | 'borderless';
variant?: 'outlined' | 'borderless' | 'filled';
height?: number;
fontSize?: number;
lineHeight?: number;
@@ -60,6 +60,7 @@ const Editor: FC<LexicalEditorProps> =({
}) => {
console.log('Editor value', value)
const [_count, setCount] = useState(0);
const [focused, setFocused] = useState(false);
if (language === 'jinja2') {
return (
@@ -90,7 +91,7 @@ const Editor: FC<LexicalEditorProps> =({
// Calculate minimum height based on type and size
const minheight = useMemo(() => {
if (type === 'input') {
return `${height ? height : size === 'small' && variant === 'borderless' ? 18 : size === 'small' ? 26 : 30}px`
return `${height ? height : size === 'small' && ['borderless', 'filled'].includes(variant) ? 18 : size === 'small' ? 26 : 30}px`
}
return `${height ? height : size === 'small' ? 60 : 120}px`
}, [type, size, height, variant])
@@ -102,7 +103,7 @@ const Editor: FC<LexicalEditorProps> =({
// Calculate line height based on size prop
const lineHeight = useMemo(() => {
return `${height ? height - 10 : size === 'small' && variant === 'borderless' ? 18 : size === 'small' ? 16 : 20}px`
return `${height ? height - 10 : size === 'small' && ['borderless', 'filled'].includes(variant) ? 18 : size === 'small' ? 16 : 20}px`
}, [size])
// Calculate placeholder minimum height
@@ -112,20 +113,24 @@ const Editor: FC<LexicalEditorProps> =({
return (
<LexicalComposer initialConfig={initialConfig}>
<div style={{ position: 'relative' }} className={className}>
<div style={{ position: 'relative', borderRadius: '8px', background: variant === 'filled' ? '#F6F6F6': 'transparent' }} className={className}>
<RichTextPlugin
contentEditable={
<ContentEditable
style={{
minHeight: minheight,
padding: height ? '4px 6px' : variant === 'borderless' ? '0' : '6px 8px',
border: variant === 'borderless' ? 'none' : '1px solid #EBEBEB',
padding: height ? '4px 6px' : variant === 'outlined' ? '6px 8px': '0',
border: type === 'input' && focused
? '1px solid #171719'
: variant === 'outlined' ? '1px solid #EBEBEB' : 'none',
borderRadius: '8px',
outline: 'none',
resize: 'none',
fontSize: fontSize,
lineHeight: lineHeight,
}}
onFocus={() => type === 'input' && setFocused(true)}
onBlur={() => type === 'input' && setFocused(false)}
/>
}
placeholder={
@@ -133,12 +138,13 @@ const Editor: FC<LexicalEditorProps> =({
style={{
minHeight: placeHolderMinheight,
position: 'absolute',
top: variant === 'borderless' ? '2px' : '6px',
left: variant === 'borderless' ? '0' : '11px',
color: '#A8A9AA',
top: variant === 'outlined' ? '6px' : type === 'input' ? '6px' : '2px',
left: variant === 'outlined' ? '11px' : type === 'input' ? '8px' : '0',
color: 'rgba(23,23,25,0.25)',
fontSize: fontSize,
lineHeight: placeHolderMinheight,
pointerEvents: 'none',
borderRadius: '8px',
}}
>
{placeholder}

8
web/src/views/Workflow/components/Properties/CaseList/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-09 18:24:53
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-25 15:23:45
* @Last Modified time: 2026-04-16 12:06:16
*/
import { useMemo, type FC } from 'react'
import clsx from 'clsx'
@@ -343,7 +343,7 @@ const CaseList: FC<CaseListProps> = ({
return (
<Flex key={conditionField.key} gap={4} align="start" className="rb:mb-2!">
<div className="rb:flex-1 rb:bg-[#F6F6F6] rb:rounded-lg">
<Row className={clsx("rb:p-1!", {
<Row className={clsx("rb:px-1!", {
'rb-border-b': !hideRightField
})}>
<Col flex="144px">
@@ -377,7 +377,7 @@ const CaseList: FC<CaseListProps> = ({
</Row>
{!hideRightField && (
<div className="rb:py-1 rb:px-1.5">
<div className={['boolean', 'array[boolean]'].includes(leftFieldType as string) ? "rb:py-1 rb:px-1.5" : ''}>
{leftFieldType === 'array[file]'
? <>TODO</>
: leftFieldType === 'number'
@@ -415,7 +415,7 @@ const CaseList: FC<CaseListProps> = ({
<Form.Item name={[conditionField.name, 'right']} noStyle>
{['boolean', 'array[boolean]'].includes(leftFieldType as string)
? <RadioGroupBtn options={[{ value: true, label: 'True' }, { value: false, label: 'False' }]} type="inner" />
: <Editor options={options} size="small" type="input" />
: <Editor options={options} size="small" type="input" variant='borderless' height={28} />
}
</Form.Item>
)

2
web/src/views/Workflow/components/Properties/CodeExecution/index.tsx
View File

@@ -94,7 +94,7 @@ const CodeExecution: FC<CodeExecutionProps> = ({ options }) => {
{ label: 'JAVASCRIPT', value: 'javascript' }
]}
popupMatchSelectWidth={false}
className={`rb:font-medium! rb:w-25! rb:h-4! rb:p-0! ${styles.editor}`}
className={`rb:font-medium! rb:w-25! rb:h-4! rb:py-0! rb:px-2! ${styles.editor}`}
onChange={handleChangeLanguage}
variant="borderless"
/>

4
web/src/views/Workflow/components/Properties/ConditionList/index.tsx
View File

@@ -178,7 +178,7 @@ const ConditionList: FC<CaseListProps> = ({
className="rb:mb-2!"
>
<div className="rb:flex-1 rb:bg-[#F6F6F6] rb:rounded-lg">
<Row className={clsx("rb:p-1!", {
<Row className={clsx("rb:px-1!", {
'rb-border-b': !hideRightField
})}>
<Col flex="1">
@@ -218,7 +218,7 @@ const ConditionList: FC<CaseListProps> = ({
</Row>
{!hideRightField && (
<div className="rb:py-1 rb:px-1.5">
<div className={leftFieldType === 'boolean' ? "rb:py-1 rb:px-1.5" : ''}>
{leftFieldType === 'number'
? (
<Flex align="center">

2
web/src/views/Workflow/components/Properties/CycleVarsList/index.tsx
View File

@@ -155,7 +155,7 @@ const CycleVarsList: FC<CycleVarsListProps> = ({
? <CodeMirrorEditor
language="json"
placeholder={object_placeholder}
variant="outlined"
variant="filled"
size="small"
/>
: (

41
web/src/views/Workflow/components/Properties/ListOperator/FilterConditions/index.tsx
View File

@@ -101,24 +101,20 @@ const FilterConditions: FC<FilterConditionsProps> = ({
align="start"
className="rb:mb-2!"
>
<div className="rb:flex-1 rb:bg-[#F6F6F6] rb:rounded-lg">
<div className="rb:flex-1">
{variableType === 'array[file]' &&
<Row className="rb:p-1! rb-border-b">
<Col span={24}>
<Form.Item name={[field.name, 'key']} noStyle>
<Select
placeholder={t('common.pleaseSelect')}
options={fileSubVariable}
fieldNames={{ value: 'filed', label: 'label' }}
onChange={(value) => handleKeyFieldChange(index, value)}
variant="borderless"
className="rb:w-full! rb:h-7!"
/>
</Form.Item>
</Col>
</Row>
<Form.Item name={[field.name, 'key']} noStyle>
<Select
placeholder={t('common.pleaseSelect')}
options={fileSubVariable}
fieldNames={{ value: 'filed', label: 'label' }}
onChange={(value) => handleKeyFieldChange(index, value)}
className="rb:w-full! select rb:mb-1!"
variant="borderless"
/>
</Form.Item>
}
<Row>
<Row gutter={8}>
<Col flex={hideValueField ? '1' : "96px"}>
<Form.Item name={[field.name, 'comparison_operator']} noStyle>
<Select
@@ -129,28 +125,27 @@ const FilterConditions: FC<FilterConditionsProps> = ({
size="small"
popupMatchSelectWidth={false}
placeholder={t('common.pleaseSelect')}
className="rb:w-full! select"
variant="borderless"
className="rb:w-full! rb:h-7!"
/>
</Form.Item>
</Col>
{!hideValueField && (
<Col flex="1">
<Form.Item name={[field.name, 'value']} className="rb:pt-0.5! rb:mb-0! rb:pl-2!">
<Form.Item name={[field.name, 'value']} noStyle>
{innerType === 'boolean'
? <RadioGroupBtn options={[{ value: true, label: 'True' }, { value: false, label: 'False' }]} type="inner" />
: keyFieldValue === 'type'
? <Select
placeholder={t('common.pleaseSelect')}
options={typeOptions.map(vo => ({ value: vo, label: t(`application.${vo}`) } ))}
variant="borderless"
className="rb:w-full!"
variant="filled"
/>
: <Editor
variant="borderless"
variant="filled"
type="input"
size="small"
height={24}
height={28}
options={keyFieldType ? options.flatMap(vo => {
if (vo.dataType === keyFieldType) return [vo];
const filteredChildren = vo.children?.filter(sub => sub.dataType === keyFieldType);
@@ -167,7 +162,7 @@ const FilterConditions: FC<FilterConditionsProps> = ({
</Row>
</div>
<div
className="rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/workflow/deleteBg.svg')] rb:hover:bg-[url('@/assets/images/workflow/deleteBg_hover.svg')]"
className="rb:size-4 rb:mt-1.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/workflow/deleteBg.svg')] rb:hover:bg-[url('@/assets/images/workflow/deleteBg_hover.svg')]"
onClick={() => remove(field.name)}
></div>
</Flex>

2
web/src/views/Workflow/components/Properties/MappingList/index.tsx
View File

@@ -58,7 +58,7 @@ const MappingList: FC<MappingListProps> = ({ label, name, options, extra, valueK
placeholder={t('common.pleaseSelect')}
options={options}
size="small"
className="rb:w-51!"
className="rb:flex-1!"
/>
</Form.Item>
<div

5
web/src/views/Workflow/components/Properties/properties.module.css
View File

@@ -23,6 +23,11 @@
}
.properties :global(.select.ant-select-single.ant-select-sm.ant-select-borderless) {
height: 28px;
border: 1px solid #F6F6F6;
border-radius: 8px;
}
.properties :global(.select.ant-select-single.ant-select-sm.ant-select-borderless.ant-select-focused) {
border: 1px solid #171719;
}
.properties :global(.ant-table-wrapper .ant-table-thead>tr>th),
.properties :global(.ant-table-wrapper .ant-table-thead>tr>td),