Merge branch 'develop' into feature/ui_upgrade_zy
This commit is contained in:
zhaoying
168
web/src/views/ApplicationManagement/MySharing.tsx
Normal file
168
web/src/views/ApplicationManagement/MySharing.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
/*
|
||||
* @Author: ZhaoYing
|
||||
* @Date: 2026-02-03 16:34:12
|
||||
* @Last Modified by: ZhaoYing
|
||||
* @Last Modified time: 2026-03-18 16:15:43
|
||||
*/
|
||||
import React, { useState, useEffect, useMemo, type MouseEvent } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button, App, Flex, Row, Col, Collapse } from 'antd';
|
||||
import clsx from 'clsx';
|
||||
|
||||
import type { MySharedOutItem } from './types';
|
||||
import { mySharedOutList, cancelShare, cancelSpaceShare } from '@/api/application'
|
||||
import BodyWrapper from '@/components/Empty/BodyWrapper'
|
||||
|
||||
const MySharing: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const { modal } = App.useApp();
|
||||
const [data, setData] = useState<MySharedOutItem[]>([])
|
||||
|
||||
useEffect(() => { getList() }, [])
|
||||
|
||||
const getList = () => {
|
||||
mySharedOutList()
|
||||
.then(res => setData(res as MySharedOutItem[]))
|
||||
}
|
||||
|
||||
/** Group items by target_workspace_id */
|
||||
const grouped = useMemo(() => {
|
||||
const map = new Map<string, { workspace: Pick<MySharedOutItem, 'target_workspace_id' | 'target_workspace_name' | 'target_workspace_icon'>, items: MySharedOutItem[] }>();
|
||||
data.forEach(item => {
|
||||
if (!map.has(item.target_workspace_id)) {
|
||||
map.set(item.target_workspace_id, {
|
||||
workspace: {
|
||||
target_workspace_id: item.target_workspace_id,
|
||||
target_workspace_name: item.target_workspace_name,
|
||||
target_workspace_icon: item.target_workspace_icon,
|
||||
},
|
||||
items: [],
|
||||
});
|
||||
}
|
||||
map.get(item.target_workspace_id)!.items.push(item);
|
||||
});
|
||||
return Array.from(map.values());
|
||||
}, [data]);
|
||||
|
||||
const handleAllCancel = (workspace: { target_workspace_name: string; target_workspace_id: string; }) => {
|
||||
modal.confirm({
|
||||
title: t('application.confirmWorkspaceCancelShareDesc', { workspace: workspace.target_workspace_name }),
|
||||
okText: t('common.confirm'),
|
||||
cancelText: t('common.cancel'),
|
||||
okType: 'danger',
|
||||
onOk: () => {
|
||||
cancelSpaceShare(workspace.target_workspace_id)
|
||||
.then(() => {
|
||||
getList();
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancelOne = (item: MySharedOutItem, e: MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
modal.confirm({
|
||||
title: t('application.confirmAppCancelShareDesc', { app: item.source_app_name, workspace: item.target_workspace_name }),
|
||||
okText: t('common.confirm'),
|
||||
cancelText: t('common.cancel'),
|
||||
okType: 'danger',
|
||||
onOk: () => {
|
||||
cancelShare(item.source_app_id, item.target_workspace_id)
|
||||
.then(() => {
|
||||
getList();
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
/** Navigate to application configuration page */
|
||||
const handleEdit = (item: MySharedOutItem) => {
|
||||
let url = `/#/application/config/${item.source_app_id}`
|
||||
window.open(url);
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex vertical gap={12} className="rb:h-[calc(100vh-148px)]! 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: (
|
||||
<Flex align="center" gap={12}>
|
||||
{workspace.target_workspace_icon
|
||||
? <img src={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>
|
||||
}
|
||||
<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>
|
||||
</div>
|
||||
</Flex>
|
||||
),
|
||||
extra: (
|
||||
<Button
|
||||
size="small"
|
||||
onClick={e => { e.stopPropagation(); handleAllCancel(workspace); }}
|
||||
>
|
||||
{t('application.allCancel')}
|
||||
</Button>
|
||||
),
|
||||
children: (
|
||||
<Row gutter={[12, 12]}>
|
||||
{items.map(item => (
|
||||
<Col key={item.id} span={6} 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>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
),
|
||||
}]}
|
||||
/>
|
||||
))}
|
||||
</BodyWrapper>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default MySharing;
|
||||
256
web/src/views/ApplicationManagement/components/UploadModal.tsx
Normal file
256
web/src/views/ApplicationManagement/components/UploadModal.tsx
Normal file
@@ -0,0 +1,256 @@
|
||||
/*
|
||||
* @Author: ZhaoYing
|
||||
* @Date: 2026-02-28 14:08:14
|
||||
* @Last Modified by: ZhaoYing
|
||||
* @Last Modified time: 2026-03-12 17:19:46
|
||||
*/
|
||||
/**
|
||||
* UploadModal Component
|
||||
*
|
||||
* This component provides a modal for uploading workflow files with a multi-step process:
|
||||
* 1. Upload - Select platform and file
|
||||
* 2. Complex - Show warnings and errors if any
|
||||
* 3. SureInfo - Confirm and edit workflow information
|
||||
* 4. Completed - Show success message and options
|
||||
*/
|
||||
import { forwardRef, useImperativeHandle, useState, useMemo } from 'react';
|
||||
import { Form, Steps, Flex, Alert, Button, Result, message } from 'antd';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import type { Application, UploadModalRef } from '../types'
|
||||
import RbModal from '@/components/RbModal'
|
||||
import UploadFiles from '@/components/Upload/UploadFiles'
|
||||
import { appImport } from '@/api/application'
|
||||
|
||||
/**
|
||||
* Props for UploadModal component
|
||||
*/
|
||||
interface UploadModalProps {
|
||||
/** Function to refresh the parent component after workflow import */
|
||||
refresh: () => void;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Steps definition for the upload process
|
||||
*/
|
||||
const steps = [
|
||||
'upload', // Step 1: File upload
|
||||
'complex', // Step 2: Error/warning display
|
||||
'completed' // Step 4: Success message
|
||||
]
|
||||
/**
|
||||
* UploadModal component
|
||||
*
|
||||
* @param {UploadModalProps} props - Component props
|
||||
* @param {React.Ref<UploadModalRef>} ref - Ref for imperative methods
|
||||
*/
|
||||
const UploadModal = forwardRef<UploadModalRef, UploadModalProps>(({
|
||||
refresh
|
||||
}, ref) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// State management
|
||||
const [visible, setVisible] = useState(false); // Modal visibility
|
||||
const [form] = Form.useForm<{ file: File[] }>(); // Form instance
|
||||
const [loading, setLoading] = useState(false); // Loading state
|
||||
const [current, setCurrent] = useState<number>(0); // Current step
|
||||
const [appId, setAppId] = useState<string | null>(null); // Imported application ID
|
||||
const [warnings, setWarnings] = useState<string[]>([])
|
||||
|
||||
/**
|
||||
* Handle modal close
|
||||
* Resets all states and form fields
|
||||
*/
|
||||
const handleClose = () => {
|
||||
refresh()
|
||||
setVisible(false);
|
||||
form.resetFields();
|
||||
setCurrent(0);
|
||||
setAppId(null);
|
||||
setLoading(false);
|
||||
setWarnings([])
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle modal open
|
||||
* Resets form fields and shows modal
|
||||
*/
|
||||
const handleOpen = () => {
|
||||
form.resetFields();
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle save/submit action
|
||||
* Processes different logic based on current step
|
||||
*/
|
||||
const handleSave = () => {
|
||||
const values = form.getFieldsValue();
|
||||
|
||||
switch(current) {
|
||||
case 0: // Step 1: Upload file
|
||||
if (!values.file || values.file.length === 0) {
|
||||
message.warning(t('application.pleaseUploadFile'));
|
||||
return;
|
||||
}
|
||||
const formData = new FormData();
|
||||
formData.append('file', values.file[0]);
|
||||
|
||||
setLoading(true)
|
||||
// Call import API
|
||||
appImport(formData)
|
||||
.then(res => {
|
||||
const { warnings, app } = res as { warnings: string[]; app: Application };
|
||||
|
||||
setAppId(app?.id)
|
||||
if (warnings.length) {
|
||||
setCurrent(1)
|
||||
setWarnings(warnings)
|
||||
} else {
|
||||
setCurrent(2)
|
||||
}
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
break;
|
||||
case 2:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// Expose methods to parent component via ref
|
||||
useImperativeHandle(ref, () => ({
|
||||
handleOpen,
|
||||
handleClose
|
||||
}));
|
||||
|
||||
/**
|
||||
* Handle navigation after successful import
|
||||
* @param {string} type - Navigation type ('detail' or 'list')
|
||||
*/
|
||||
const handleJump = (type: string) => {
|
||||
handleClose();
|
||||
refresh();
|
||||
setTimeout(() => {
|
||||
switch (type) {
|
||||
case 'detail':
|
||||
// Open application detail page in new tab
|
||||
window.open(`/#/application/config/${appId}`, '_blank');
|
||||
break;
|
||||
}
|
||||
}, 100)
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate modal footer based on current step
|
||||
*/
|
||||
const getFooter = useMemo(() => {
|
||||
switch (current) {
|
||||
case 0: // Step 1: Upload
|
||||
return [
|
||||
<Button key="back" onClick={handleClose}>
|
||||
{t('common.cancel')}
|
||||
</Button>,
|
||||
<Button
|
||||
key="confirm"
|
||||
type="primary"
|
||||
loading={loading}
|
||||
onClick={handleSave}
|
||||
>
|
||||
{t('common.confirm')}
|
||||
</Button>
|
||||
];
|
||||
case 1:
|
||||
return [
|
||||
<Button key="back" onClick={() => handleJump('list')}>
|
||||
{t('application.gotoList')}
|
||||
</Button>,
|
||||
<Button
|
||||
key="submit"
|
||||
type="primary"
|
||||
loading={loading}
|
||||
onClick={() => handleJump('detail')}
|
||||
>
|
||||
{t('application.gotoDetail')}
|
||||
</Button>
|
||||
]
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}, [current, loading]);
|
||||
return (
|
||||
<RbModal
|
||||
title={t('application.import')}
|
||||
open={visible}
|
||||
onCancel={handleClose}
|
||||
okText={t('common.confirm')}
|
||||
onOk={handleSave}
|
||||
footer={getFooter}
|
||||
>
|
||||
{/* Steps indicator */}
|
||||
<div className='rb:p-3 rb:bg-[#FBFDFF] rb:rounded-lg rb:border rb:border-[#DFE4ED] rb:mb-3'>
|
||||
<Steps
|
||||
labelPlacement="vertical"
|
||||
size="small"
|
||||
current={current}
|
||||
items={steps.map(key => ({ title: t(`application.${key}`) }))}
|
||||
/>
|
||||
</div>
|
||||
{current === 0 &&
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
>
|
||||
<Form.Item
|
||||
name="file"
|
||||
valuePropName="fileList"
|
||||
noStyle
|
||||
>
|
||||
<UploadFiles
|
||||
isAutoUpload={false}
|
||||
isCanDrag={true}
|
||||
fileSize={100}
|
||||
maxCount={1}
|
||||
fileType={['yml']}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
}
|
||||
{/* Step 2: Error/warning display */}
|
||||
{current === 1 &&
|
||||
<Flex vertical gap={12}>
|
||||
{warnings.map((vo, index) => (
|
||||
<Alert
|
||||
key={index}
|
||||
message={<div>{vo}</div>}
|
||||
type="warning"
|
||||
showIcon
|
||||
/>
|
||||
))}
|
||||
</Flex>
|
||||
}
|
||||
{current === 2 &&
|
||||
<Result
|
||||
status="success"
|
||||
title={t('application.importSuccess')}
|
||||
subTitle={t('application.importSuccessDesc')}
|
||||
extra={[
|
||||
<Button key="back" onClick={() => handleJump('list')}>
|
||||
{t('application.gotoList')}
|
||||
</Button>,
|
||||
<Button
|
||||
key="submit"
|
||||
type="primary"
|
||||
loading={loading}
|
||||
onClick={() => handleJump('detail')}
|
||||
>
|
||||
{t('application.gotoDetail')}
|
||||
</Button>
|
||||
]}
|
||||
/>
|
||||
}
|
||||
</RbModal>
|
||||
);
|
||||
});
|
||||
|
||||
export default UploadModal;
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: ZhaoYing
|
||||
* @Date: 2026-02-28 14:08:14
|
||||
* @Last Modified by: ZhaoYing
|
||||
* @Last Modified time: 2026-03-06 12:05:46
|
||||
* @Last Modified time: 2026-03-12 17:19:33
|
||||
*/
|
||||
/**
|
||||
* UploadWorkflowModal Component
|
||||
@@ -72,6 +72,7 @@ const UploadWorkflowModal = forwardRef<UploadWorkflowModalRef, UploadWorkflowMod
|
||||
setFirstFormData(null);
|
||||
setAppId(null);
|
||||
setLoading(false);
|
||||
refresh()
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: ZhaoYing
|
||||
* @Date: 2026-02-03 16:34:12
|
||||
* @Last Modified by: ZhaoYing
|
||||
* @Last Modified time: 2026-03-04 10:44:29
|
||||
* @Last Modified time: 2026-03-19 21:29:45
|
||||
*/
|
||||
/**
|
||||
* Application Management Page
|
||||
@@ -10,23 +10,28 @@
|
||||
* Supports creating, editing, and deleting applications
|
||||
*/
|
||||
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import React, { useState, useRef, useEffect, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { App, Select, Space, Form, Flex, Dropdown, Button } from 'antd';
|
||||
import { Button, App, Select, Space, Dropdown, type SegmentedProps, Flex, Form } from 'antd';
|
||||
import clsx from 'clsx';
|
||||
import { useSearchParams } from 'react-router-dom'
|
||||
|
||||
import ApplicationModal, { types } from './components/ApplicationModal';
|
||||
import type { Application, ApplicationModalRef, Query, UploadWorkflowModalRef } from './types';
|
||||
import SearchInput from '@/components/SearchInput'
|
||||
import { getApplicationListUrl, deleteApplication } from '@/api/application'
|
||||
import { getApplicationListUrl, deleteApplication, copyApplication } from '@/api/application'
|
||||
import PageScrollList, { type PageScrollListRef } from '@/components/PageScrollList'
|
||||
import { formatDateTime } from '@/utils/format';
|
||||
import UploadWorkflowModal from './components/UploadWorkflowModal'
|
||||
import UploadModal from './components/UploadModal'
|
||||
import PageTabs from '@/components/PageTabs'
|
||||
import MySharing from './MySharing'
|
||||
import RbCard from '@/components/RbCard'
|
||||
import RbButton from '@/components/RbButton'
|
||||
import RbDescriptions from '@/components/RbDescriptions'
|
||||
|
||||
|
||||
const tabKeys = ['apps', 'sharing', 'myShare']
|
||||
/**
|
||||
* Application management main component
|
||||
*/
|
||||
@@ -37,16 +42,16 @@ const ApplicationManagement: React.FC = () => {
|
||||
const applicationModalRef = useRef<ApplicationModalRef>(null);
|
||||
const scrollListRef = useRef<PageScrollListRef>(null)
|
||||
const uploadWorkflowModalRef = useRef<UploadWorkflowModalRef>(null);
|
||||
|
||||
const [form] = Form.useForm()
|
||||
const uploadModalRef = useRef<UploadWorkflowModalRef>(null);
|
||||
const [form] = Form.useForm<Query>()
|
||||
const query = Form.useWatch([], form)
|
||||
const [activeTab, setActiveTab] = useState('apps');
|
||||
|
||||
useEffect(() => {
|
||||
// Convert URLSearchParams to a plain object for easier access
|
||||
const data = Object.fromEntries(searchParams)
|
||||
const { type } = data
|
||||
|
||||
form.setFieldValue('type', type || null)
|
||||
form.setFieldValue('type', type || undefined)
|
||||
}, [searchParams])
|
||||
|
||||
/** Refresh application list */
|
||||
@@ -60,7 +65,11 @@ const ApplicationManagement: React.FC = () => {
|
||||
}
|
||||
/** Navigate to application configuration page */
|
||||
const handleEdit = (item: Application) => {
|
||||
window.open(`/#/application/config/${item.id}`);
|
||||
let url = `/#/application/config/${item.id}`
|
||||
if (item.is_shared) {
|
||||
url += `/${activeTab}`
|
||||
}
|
||||
window.open(url);
|
||||
}
|
||||
/** Delete application with confirmation */
|
||||
const handleDelete = (item: Application) => {
|
||||
@@ -89,92 +98,139 @@ const ApplicationManagement: React.FC = () => {
|
||||
case 'thirdParty':
|
||||
handleImport()
|
||||
break;
|
||||
case 'import':
|
||||
uploadModalRef.current?.handleOpen()
|
||||
}
|
||||
}
|
||||
const formatTabItems = useMemo(() => {
|
||||
return tabKeys.map(value => ({
|
||||
value,
|
||||
label: t(`application.${value}`),
|
||||
}))
|
||||
}, [tabKeys, t])
|
||||
/** Handle tab change */
|
||||
const handleChangeTab = (value: SegmentedProps['value']) => {
|
||||
setActiveTab(value as string);
|
||||
form.resetFields()
|
||||
}
|
||||
const handleCopy = (item: Application) => {
|
||||
modal.confirm({
|
||||
title: t('application.confirmCopyDesc', { app: item.name }),
|
||||
okText: t('common.copy'),
|
||||
cancelText: t('common.cancel'),
|
||||
onOk: () => {
|
||||
copyApplication(item.id)
|
||||
.then(() => {
|
||||
setActiveTab('apps')
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Form form={form} className="rb:mb-4!">
|
||||
<Flex justify="space-between">
|
||||
<Space size={10}>
|
||||
<Form.Item name="type" noStyle>
|
||||
<Select
|
||||
placeholder={t('application.applicationType')}
|
||||
options={[
|
||||
{ value: null, label: t('application.allType') },
|
||||
...types.map((type) => ({
|
||||
<Flex justify="space-between" className="rb:mb-4!">
|
||||
<PageTabs
|
||||
value={activeTab}
|
||||
options={formatTabItems}
|
||||
onChange={handleChangeTab}
|
||||
/>
|
||||
|
||||
<Form
|
||||
form={form}
|
||||
>
|
||||
{activeTab !== 'myShare' &&
|
||||
<Space size={8}>
|
||||
<Form.Item name="type" noStyle>
|
||||
<Select
|
||||
placeholder={t('application.applicationType')}
|
||||
options={(activeTab === 'sharing' ? types.filter(type => type !== 'multi_agent') : types).map((type) => ({
|
||||
value: type,
|
||||
label: t(`application.${type}`),
|
||||
}))
|
||||
]}
|
||||
className="rb:w-30!"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name="search" noStyle>
|
||||
<SearchInput
|
||||
placeholder={t('application.searchPlaceholder')}
|
||||
className="rb:w-75!"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Space>
|
||||
<Space size={10}>
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: [
|
||||
{ key: 'thirdParty', label: t('application.importWorkflow') },
|
||||
], onClick: handleClick
|
||||
}}
|
||||
placement="bottomRight"
|
||||
>
|
||||
<Button>
|
||||
{t('application.import')}
|
||||
</Button>
|
||||
</Dropdown>
|
||||
<RbButton type="primary" icon={<div className="rb:size-3 rb:bg-cover rb:bg-[url('@/assets/images/common/plus.svg')]"></div>} onClick={handleCreate}>
|
||||
{t('application.createApplication')}
|
||||
</RbButton>
|
||||
</Space>
|
||||
</Flex>
|
||||
</Form>
|
||||
}))}
|
||||
allowClear
|
||||
className="rb:w-30!"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name="search" noStyle>
|
||||
<SearchInput
|
||||
placeholder={t('application.searchPlaceholder')}
|
||||
className="rb:w-75!"
|
||||
/>
|
||||
</Form.Item>
|
||||
{activeTab === 'apps' && <Space size={10}>
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: [
|
||||
{ key: 'thirdParty', label: t('application.importWorkflow') },
|
||||
{ key: 'import', label: t('application.import') },
|
||||
], onClick: handleClick
|
||||
}}
|
||||
placement="bottomRight"
|
||||
>
|
||||
<Button>
|
||||
{t('application.import')}
|
||||
</Button>
|
||||
</Dropdown>
|
||||
<RbButton type="primary" icon={<div className="rb:size-3 rb:bg-cover rb:bg-[url('@/assets/images/common/plus.svg')]"></div>} onClick={handleCreate}>
|
||||
{t('application.createApplication')}
|
||||
</RbButton>
|
||||
</Space>}
|
||||
</Space>
|
||||
}
|
||||
</Form>
|
||||
</Flex>
|
||||
|
||||
<PageScrollList<Application, Query>
|
||||
ref={scrollListRef}
|
||||
url={getApplicationListUrl}
|
||||
query={query}
|
||||
renderItem={(item) => (
|
||||
<RbCard
|
||||
title={item.name}
|
||||
avatarText={item.name.trim()[0]}
|
||||
avatarClassName={clsx({
|
||||
'rb:bg-[#155EEF]': item.type === 'agent',
|
||||
'rb:bg-[#9C6FFF]!': item.type === 'multi_agent',
|
||||
'rb:bg-[#171719]': item.type === 'workflow',
|
||||
})}
|
||||
footer={<Flex justify="space-between" gap={12}>
|
||||
<RbButton danger className="rb:w-22.25" onClick={() => handleDelete(item)}>{t('common.delete')}</RbButton>
|
||||
<RbButton type="primary" ghost className="rb:flex-1" onClick={() => handleEdit(item)}>{t('application.configuration')}</RbButton>
|
||||
</Flex>}
|
||||
>
|
||||
<RbDescriptions
|
||||
items={['type', 'source', 'created_at'].map(key => ({
|
||||
key,
|
||||
label: t(`application.${key}`),
|
||||
children: <span className={clsx('rb:font-medium', {
|
||||
'rb:text-[#155EEF]': key === 'type',
|
||||
})}>
|
||||
{key === 'source' && item.is_shared
|
||||
? t('application.shared')
|
||||
: key === 'source' && !item.is_shared
|
||||
? t('application.configuration')
|
||||
: key === 'created_at'
|
||||
? formatDateTime(item.created_at, 'YYYY-MM-DD HH:mm:ss')
|
||||
: t(`application.${item[key as keyof Application]}`)
|
||||
}
|
||||
</span>
|
||||
}))}
|
||||
/>
|
||||
</RbCard>
|
||||
)}
|
||||
/>
|
||||
{(activeTab === 'apps' || activeTab === 'sharing') &&
|
||||
<PageScrollList<Application, Query>
|
||||
ref={scrollListRef}
|
||||
url={getApplicationListUrl}
|
||||
needLoading={false}
|
||||
query={{ ...query, shared_only: activeTab === 'sharing', include_shared: activeTab !== 'apps' }}
|
||||
renderItem={(item) => (
|
||||
<RbCard
|
||||
title={item.name}
|
||||
avatarText={item.name.trim()[0]}
|
||||
avatarClassName={clsx({
|
||||
'rb:bg-[#155EEF]': item.type === 'agent',
|
||||
'rb:bg-[#9C6FFF]!': item.type === 'multi_agent',
|
||||
'rb:bg-[#171719]': item.type === 'workflow',
|
||||
})}
|
||||
footer={
|
||||
item.is_shared
|
||||
? <Flex justify="space-between" gap={12}>
|
||||
<RbButton type="primary" ghost block onClick={() => handleEdit(item)}>{t('common.view')}</RbButton>
|
||||
{item.share_permission === 'editable' && <RbButton type="primary" className="rb:w-[calc(100%-46px)]" onClick={() => handleCopy(item)}>{t('common.copy')}</RbButton>}
|
||||
</Flex>
|
||||
: <Flex justify="space-between" gap={12}>
|
||||
<RbButton danger className="rb:w-22.25" onClick={() => handleDelete(item)}>{t('common.delete')}</RbButton>
|
||||
<RbButton type="primary" ghost className="rb:flex-1" onClick={() => handleEdit(item)}>{t('application.configuration')}</RbButton>
|
||||
</Flex>
|
||||
}
|
||||
>
|
||||
<RbDescriptions
|
||||
items={['type', 'source', 'created_at'].map(key => ({
|
||||
key,
|
||||
label: t(`application.${key}`),
|
||||
children: <span className={clsx('rb:font-medium', {
|
||||
'rb:text-[#155EEF]': key === 'type',
|
||||
})}>
|
||||
{key === 'source' && item.is_shared
|
||||
? t('application.shared')
|
||||
: key === 'source' && !item.is_shared
|
||||
? t('application.configuration')
|
||||
: key === 'created_at'
|
||||
? formatDateTime(item.created_at, 'YYYY-MM-DD HH:mm:ss')
|
||||
: t(`application.${item[key as keyof Application]}`)
|
||||
}
|
||||
</span>
|
||||
}))}
|
||||
/>
|
||||
</RbCard>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
{activeTab === 'myShare' && <MySharing />}
|
||||
|
||||
|
||||
<ApplicationModal
|
||||
ref={applicationModalRef}
|
||||
@@ -185,6 +241,10 @@ const ApplicationManagement: React.FC = () => {
|
||||
ref={uploadWorkflowModalRef}
|
||||
refresh={refresh}
|
||||
/>
|
||||
<UploadModal
|
||||
ref={uploadModalRef}
|
||||
refresh={refresh}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: ZhaoYing
|
||||
* @Date: 2026-02-03 16:34:15
|
||||
* @Last Modified by: ZhaoYing
|
||||
* @Last Modified time: 2026-02-28 16:16:03
|
||||
* @Last Modified time: 2026-03-18 10:50:27
|
||||
*/
|
||||
/**
|
||||
* Type definitions for Application Management
|
||||
@@ -15,6 +15,8 @@ export interface Query {
|
||||
/** Search keyword */
|
||||
search: string;
|
||||
type?: string;
|
||||
shared_only?: boolean;
|
||||
include_shared?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -53,6 +55,11 @@ export interface Application {
|
||||
created_at: number;
|
||||
/** Last update timestamp */
|
||||
updated_at: number;
|
||||
share_permission?: string;
|
||||
source_workspace_name?: string;
|
||||
source_workspace_icon?: string;
|
||||
source_app_version?: string;
|
||||
source_app_is_active?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -233,4 +240,28 @@ export interface UploadData extends WorkflowConfig {
|
||||
export interface UploadWorkflowModalRef {
|
||||
/** Open the upload workflow modal */
|
||||
handleOpen: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Upload app modal ref interface
|
||||
*/
|
||||
export interface UploadModalRef {
|
||||
/** Open the upload workflow modal */
|
||||
handleOpen: () => void;
|
||||
}
|
||||
export interface MySharedOutItem {
|
||||
id: string;
|
||||
source_app_id: string;
|
||||
source_workspace_id: string;
|
||||
target_workspace_id: string;
|
||||
shared_by: string;
|
||||
permission: 'readonly' | 'editable';
|
||||
created_at: number;
|
||||
updated_at: number;
|
||||
source_app_name: string;
|
||||
source_app_type: string;
|
||||
source_app_version: string;
|
||||
source_app_is_active: boolean;
|
||||
target_workspace_name: string;
|
||||
target_workspace_icon: string;
|
||||
}
|
||||
Reference in New Issue
Block a user