Merge branch 'develop' into feature/ui_upgrade_zy

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-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}
+      />
     </>
   );
 };