Merge branch 'develop' into release/v0.2.7

2026-03-16 15:47:00 +08:00
parent e7e136036c b1a7b58f97
commit f7c2e82dc0
155 changed files with 13164 additions and 1796 deletions
--- a/web/src/views/ApplicationManagement/MySharing.tsx
+++ b/web/src/views/ApplicationManagement/MySharing.tsx
@@ -0,0 +1,158 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 16:34:12 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-13 17:36:16
+ */
+import React, { useState, useEffect, useMemo } 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'
+
+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) => {
+    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();
+          })
+      }
+    });
+  };
+
+  return (
+    <Flex vertical gap={12}>
+      {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">
+                    <div
+                      className="rb:absolute rb:top-3 rb:right-3 rb:cursor-pointer rb:size-4 rb:bg-cover rb:bg-[url('src/assets/images/close.svg')]"
+                      onClick={() => handleCancelOne(item)}
+                    />
+                    <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>
+            ),
+          }]}
+        />
+      ))}
+    </Flex>
+  );
+};
+
+export default MySharing;
--- a/web/src/views/ApplicationManagement/index.tsx
+++ b/web/src/views/ApplicationManagement/index.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:34:12 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-02 17:48:51
+ * @Last Modified time: 2026-03-16 09:56:02
 */
 /**
 * Application Management Page
@@ -10,9 +10,9 @@
 * Supports creating, editing, and deleting applications
 */

-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Row, Col, App, Select, Space, Dropdown } from 'antd';
+import { Button, App, Select, Space, Dropdown, type SegmentedProps, Flex, Form } from 'antd';
 import clsx from 'clsx';
 import { DeleteOutlined } from '@ant-design/icons';
 import { useSearchParams } from 'react-router-dom'
@@ -21,12 +21,16 @@ import ApplicationModal, { types } from './components/ApplicationModal';
 import type { Application, ApplicationModalRef, Query, UploadWorkflowModalRef } from './types';
 import SearchInput from '@/components/SearchInput'
 import RbCard from '@/components/RbCard/Card'
-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'

+
+const tabKeys = ['apps', 'sharing', 'myShare']
 /**
 * Application management main component
 */
@@ -34,20 +38,19 @@ const ApplicationManagement: React.FC = () => {
  const { t } = useTranslation();
  const { modal } = App.useApp();
  const [searchParams] = useSearchParams()
-  const [query, setQuery] = useState<Query>({} as Query);
  const applicationModalRef = useRef<ApplicationModalRef>(null);
  const scrollListRef = useRef<PageScrollListRef>(null)
  const uploadWorkflowModalRef = useRef<UploadWorkflowModalRef>(null);
  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
-    setQuery(prev => ({
-      ...prev,
-      type: type || undefined
-    }))
+    form.setFieldValue('type', type || undefined)
  }, [searchParams])

  /** Refresh application list */
@@ -61,7 +64,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) => {
@@ -81,9 +88,6 @@ const ApplicationManagement: React.FC = () => {
      }
    })
  }
-  const handleChangeType = (value?: string) => {
-    setQuery(prev => ({...prev, type: value}))
-  }

  const handleImport = () => {
    uploadWorkflowModalRef.current?.handleOpen()
@@ -97,90 +101,137 @@ const ApplicationManagement: React.FC = () => {
        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 (
    <>
-      <Row gutter={16} className="rb:mb-4">
-        <Col span={4}>
-          <Select
-            value={query.type}
-            placeholder={t('application.applicationType')}
-            options={types.map((type) => ({
-              value: type,
-              label: t(`application.${type}`),
-            }))}
-            allowClear
-            className="rb:w-full"
-            onChange={handleChangeType}
-          />
-        </Col>
-        <Col span={8}>
-          <SearchInput
-            placeholder={t('application.searchPlaceholder')}
-            onSearch={(value) => setQuery({ search: value })}
-            style={{width: '100%'}}
-          />
-        </Col>
-        <Col span={12} className="rb:text-right">
-          <Space size={12}>
-            <Dropdown
-              menu={{ items: [
-                { key: 'thirdParty', label: t('application.importWorkflow') },
-                { key: 'import', label: t('application.import') },
-              ], onClick: handleClick }}
-              placement="bottomRight"
+      <Flex justify="space-between" className="rb:mb-3!">
+        <PageTabs
+          value={activeTab}
+          options={formatTabItems}
+          onChange={handleChangeTab}
+        />
+
+        <Form
+          form={form}
+          initialValues={{}}
+        >
+          {activeTab !== 'myShare' &&
+            <Space size={8}>
+              <Form.Item name="type" noStyle>
+                <Select
+                  placeholder={t('application.applicationType')}
+                  options={types.map((type) => ({
+                    value: type,
+                    label: t(`application.${type}`),
+                  }))}
+                  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' && <>
+                <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>
+                <Button type="primary" onClick={handleCreate}>
+                  {t('application.createApplication')}
+                </Button>
+              </>}
+            </Space>
+          }
+        </Form>
+      </Flex>
+
+      {(activeTab === 'apps' || activeTab === 'sharing') &&
+        <PageScrollList<Application, Query>
+          ref={scrollListRef}
+          url={getApplicationListUrl}
+          query={{ ...query, shared_only: activeTab === 'sharing' }}
+          renderItem={(item) => (
+            <RbCard
+              title={item.name}
+              avatar={
+                <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
+                  {item.name[0]}
+                </div>
+              }
            >
-              <Button>
-                {t('application.import')}
-              </Button>
-            </Dropdown>
-            <Button type="primary" onClick={handleCreate}>
-              {t('application.createApplication')}
-            </Button>
-          </Space>
-        </Col>
-      </Row>
-
-      <PageScrollList<Application, Query>
-        ref={scrollListRef}
-        url={getApplicationListUrl}
-        query={query}
-        renderItem={(item) => (
-          <RbCard 
-            title={item.name}
-            avatar={
-              <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
-                {item.name[0]}
-              </div>
-            }
-          >
-            {['type', 'source', 'created_at'].map((key, index) => (
-              <div key={key} className={clsx("rb:flex rb:justify-between rb:gap-5 rb:font-regular rb:text-[14px]", {
-                'rb:mt-3': index !== 0
-              })}>
-                <span className="rb:text-[#5B6167]">{t(`application.${key}`)}</span>
-                <span className={clsx({
-                  'rb:text-[#155EEF] rb:font-medium': key === 'type' && item[key] === 'agent',
-                  'rb:text-[#369F21] rb:font-medium': key === 'type' && item[key] === 'multi_agent',
+              {['type', 'source', 'created_at'].map((key, index) => (
+                <div key={key} className={clsx("rb:flex rb:justify-between rb:gap-5 rb:font-regular rb:text-[14px]", {
+                  'rb:mt-3': index !== 0
                })}>
-                  {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>
-              </div>
-            ))}
+                  <span className="rb:text-[#5B6167]">{t(`application.${key}`)}</span>
+                  <span className={clsx({
+                    'rb:text-[#155EEF] rb:font-medium': key === 'type' && item[key] === 'agent',
+                    'rb:text-[#369F21] rb:font-medium': key === 'type' && item[key] === 'multi_agent',
+                  })}>
+                    {key === 'source' && item.is_shared
+                      ? item.source_workspace_name
+                      : 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>
+                </div>
+              ))}

-            <div className="rb:mt-5 rb:flex rb:justify-between rb:gap-2.5">
-              <Button type="primary" ghost className="rb:w-[calc(100%-46px)]" onClick={() => handleEdit(item)}>{t('application.configuration')}</Button>
-              <Button icon={<DeleteOutlined />} onClick={() => handleDelete(item)}></Button>
-            </div>
-          </RbCard>
-        )}
-      />
+              {item.is_shared
+                ? <div className="rb:mt-5 rb:flex rb:justify-between rb:gap-2.5">
+                  <Button type="primary" ghost block onClick={() => handleEdit(item)}>{t('common.view')}</Button>
+                  {item.share_permission === 'editable' && <Button type="primary" className="rb:w-[calc(100%-46px)]" onClick={() => handleCopy(item)}>{t('common.copy')}</Button>}
+                </div>
+                : <div className="rb:mt-5 rb:flex rb:justify-between rb:gap-2.5">
+                  <Button type="primary" ghost className="rb:w-[calc(100%-46px)]" onClick={() => handleEdit(item)}>{t('application.configuration')}</Button>
+                  <Button icon={<DeleteOutlined />} onClick={() => handleDelete(item)}></Button>
+                </div>
+              }
+            </RbCard>
+          )}
+        />
+      }
+      {activeTab === 'myShare' && <MySharing />}
+      

      <ApplicationModal
        ref={applicationModalRef}
--- a/web/src/views/ApplicationManagement/types.ts
+++ b/web/src/views/ApplicationManagement/types.ts
@@ -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-16 09:55:52
 */
 /**
 * Type definitions for Application Management
@@ -15,6 +15,7 @@ export interface Query {
  /** Search keyword */
  search: string;
  type?: string;
+  shared_only?: boolean;
 }

 /**
@@ -53,6 +54,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;
 }

 /**
@@ -241,4 +247,20 @@ export interface UploadWorkflowModalRef {
 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;
 }