Merge pull request #717 from SuanmoSuanyangTechnology/feature/ui_upgrade_zy

Feature/UI upgrade zy
2026-03-27 18:16:37 +08:00
parent f878846364 c3e5c8b8bb
commit c43d258455
17 changed files with 93 additions and 46 deletions
--- a/web/src/components/Chat/ChatToolbar.tsx
+++ b/web/src/components/Chat/ChatToolbar.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-03-17 14:22:25 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-23 17:42:38
+ * @Last Modified time: 2026-03-27 17:54:47
 */
 // Toolbar component for chat input area, supporting file upload, audio recording, and variable configuration
 import { useRef, forwardRef, useImperativeHandle, type ReactNode, useEffect } from 'react'
@@ -19,6 +19,7 @@ import type { UploadFileListModalRef } from '@/views/Conversation/types'
 import type { VariableConfigModalRef } from '@/views/Workflow/types'
 import type { Variable } from '@/views/Workflow/components/Properties/VariableList/types'
 import { getFileInfoByUrl } from '@/api/fileStorage';
+import { transform_file_type } from '@/views/Conversation/components/FileUpload'

 // Exposed methods via ref for parent components to access/set form state
 export interface ChatToolbarRef {
@@ -126,7 +127,7 @@ const ChatToolbar = forwardRef<ChatToolbarRef, ChatToolbarProps>(({
            status: 'done',
            name: file_name,
            size: file_size,
-            type: content_type,
+            type: transform_file_type[content_type] || content_type,
           } : f)
          form.setFieldValue('files', updated)
          onFilesChange?.(updated)
--- a/web/src/components/SiderMenu/index.tsx
+++ b/web/src/components/SiderMenu/index.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-02 15:25:31 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-25 12:32:58
+ * @Last Modified time: 2026-03-27 16:38:57
 */
 /**
 * SiderMenu Component
@@ -128,11 +128,35 @@ const Menu: FC<{

  /** Filter menus based on user role and source */
  useEffect(() => {
+    let menuList: MenuItem[] = []
+    
    if (user.role === 'member' && source === 'space') {
-      setMenus((allMenus[source] || []).filter(menu => menu.code !== 'member'))
+      menuList = (allMenus[source] || []).filter(menu => menu.code !== 'member')
    } else if (user) {
-      setMenus(allMenus[source] || [])
+      menuList = allMenus[source] || []
    }
+
+    const noAuthList = ['user', 'pricing'].filter(vo => !user.permissions.includes(vo) && !user.permissions?.includes('all'))
+
+    if (noAuthList && !noAuthList?.includes('all')) {
+      const filterMenus = (list: MenuItem[]): MenuItem[] =>{
+        const filterList = list?.filter(menu => !noAuthList?.includes(menu.code as string))
+
+        const showList: MenuItem[] = [] 
+        filterList?.forEach(menu => {
+          const filteredSubs = filterMenus(menu.subs || [])
+          const hadSubs = menu.subs && menu.subs.length > 0
+          if (hadSubs && filteredSubs.length === 0) return
+          if (menu.type === 'group' && (!menu.subs || menu.subs?.length < 1)) return
+          showList.push({ ...menu, subs: filteredSubs })
+        })
+
+        return showList
+      }
+      menuList = filterMenus(menuList)
+    }
+
+    setMenus(menuList)
  }, [source, allMenus, user])
  
  /** Handle menu item click and navigate to path */
@@ -153,7 +177,7 @@ const Menu: FC<{
      const iconKey = selectedKeys.includes(menu.path || '') ? `${menu.code}Active` : menu.code;
      const iconSrc = iconPathMap[iconKey as keyof typeof iconPathMap];
      const subs = (menu.subs || []).filter(sub => sub.display);
-      
+
      /** Leaf node - menu item without children */
      if (!subs || subs.length === 0) {
        if (menu.path) {
--- a/web/src/store/menu.json
+++ b/web/src/store/menu.json
@@ -143,7 +143,7 @@
      "code": "systemSettings",
      "label": "systemSettings",
      "i18nKey": "menu.systemSettings",
-      "path": "/",
+      "path": null,
      "enable": true,
      "display": true,
      "level": 1,
--- a/web/src/styles/index.css
+++ b/web/src/styles/index.css
@@ -396,3 +396,7 @@ body {
  color: #FFFFFF;
  background-color: #171719;
 }
+
+.spin.ant-spin-nested-loading .ant-spin-container::after {
+  background: transparent;
+}
--- a/web/src/views/ApplicationConfig/Agent.tsx
+++ b/web/src/views/ApplicationConfig/Agent.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:29:21 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-27 13:46:18
+ * @Last Modified time: 2026-03-27 18:13:51
 */
 import { useEffect, useRef, useState, forwardRef, useImperativeHandle, useMemo } from 'react';
 import { useTranslation } from 'react-i18next'
@@ -255,7 +255,7 @@ const Agent = forwardRef<AgentRef, { onFeaturesLoad?: (features: FeaturesConfigF
      saveAgentConfig(data.app_id, params)
      .then((res) => {
        if (flag) {
-          message.success(t('common.saveSuccess'))
+          message.success({ content: t('common.saveSuccess'), duration: 1 })
        }
        setIsSave(false)
        resolve(res)
--- a/web/src/views/ApplicationConfig/Cluster.tsx
+++ b/web/src/views/ApplicationConfig/Cluster.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:29:33 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-27 11:51:34
+ * @Last Modified time: 2026-03-27 18:14:25
 */
 import { useEffect, useState, useRef, forwardRef, useImperativeHandle } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -79,7 +79,7 @@ const Cluster = forwardRef<ClusterRef, { onFeaturesLoad?: (features: FeaturesCon
        saveMultiAgentConfig(id as string, params)
          .then((res) => {
            if (flag) {
-              message.success(t('common.saveSuccess'))
+              message.success({ content: t('common.saveSuccess'), duration: 1 })
            }
            resolve(res)
          })
--- a/web/src/views/ApplicationConfig/components/Chat.tsx
+++ b/web/src/views/ApplicationConfig/components/Chat.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:27:39 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-26 13:41:44
+ * @Last Modified time: 2026-03-27 17:59:07
 */
 /**
 * Chat debugging component for application testing
@@ -224,11 +224,11 @@ const Chat: FC<ChatProps> = ({
    if (loading || !id) return
    setLoading(true)
    setCompareLoading(true)
+    const files = (fileList || []).filter(item => !['uploading', 'error'].includes(item.status))
    handleSave(false)
      .then(() => {
        const message = msg
        if (!message?.trim()) return
-        const files = (toolbarRef.current?.getFiles() || []).filter(item => !['uploading', 'error'].includes(item.status))
        // Validate required variables before sending
        let isCanSend = true
        const params: Record<string, any> = {}
@@ -427,11 +427,11 @@ const Chat: FC<ChatProps> = ({
    if (loading || !id) return
    setLoading(true)
    setCompareLoading(true)
+    const files = (fileList || []).filter(item => !['uploading', 'error'].includes(item.status))
    handleSave(false)
      .then(() => {
        const message = msg
        if (!message || message.trim() === '') return
-        const files = (toolbarRef.current?.getFiles() || []).filter(item => !['uploading', 'error'].includes(item.status))
        addUserMessage(message, files)
        setMessage(undefined)
        toolbarRef.current?.setFiles([])
--- a/web/src/views/ApplicationConfig/components/ConfigHeader.tsx
+++ b/web/src/views/ApplicationConfig/components/ConfigHeader.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:27:52 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-24 15:58:23
+ * @Last Modified time: 2026-03-27 17:33:44
 */
 import { type FC, useRef, useMemo, useCallback } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -212,7 +212,12 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({
        </Flex>}
        extra={application?.type === 'workflow' && source !== 'sharing' && activeTab === 'arrangement'
          ? <Flex align="center" justify="end" gap={10} className="rb:h-8">
-            <FeaturesConfig source={application?.type} value={features as FeaturesConfigForm} refresh={handleSaveFeaturesConfig} />
+            <FeaturesConfig
+              source={application?.type}
+              value={features as FeaturesConfigForm}
+              refresh={handleSaveFeaturesConfig}
+              chatVariables={(workflowRef.current?.chatVariables || []).map(v => ({ ...v, display_name: v.name }))}
+            />
            <Button onClick={clear}>{t('workflow.clear')}</Button>
            <Button onClick={addvariable}>{t('workflow.addvariable')}</Button>
            <Button onClick={run}>{t('workflow.run')}</Button>
--- a/web/src/views/ApplicationConfig/components/FeaturesConfig/FeaturesConfigModal.tsx
+++ b/web/src/views/ApplicationConfig/components/FeaturesConfig/FeaturesConfigModal.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:27:56 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-27 14:24:47
+ * @Last Modified time: 2026-03-27 17:32:10
 */
 /**
 * Copy Application Modal
@@ -75,15 +75,15 @@ const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigMod

  const formatFileTypeOptions = (fu: FeaturesConfigForm['file_upload']) => {
    let options = fu.document_enabled ? [{ type: 'document', enabled: fu.document_enabled, maxSize: fu.document_max_size_mb }] : []
-    if (!capability) return options
+    if (!capability && source !== 'workflow') return options
    
-    if ((capability.includes('vision') || source === 'workflow') && fu.image_enabled) {
+    if ((capability?.includes('vision') || source === 'workflow') && fu.image_enabled) {
      options.push({ type: 'image', enabled: fu.image_enabled, maxSize: fu.image_max_size_mb })
    }
-    if ((capability.includes('audio') || source === 'workflow') && fu.audio_enabled) {
+    if ((capability?.includes('audio') || source === 'workflow') && fu.audio_enabled) {
      options.push({ type: 'audio', enabled: fu.audio_enabled, maxSize: fu.audio_max_size_mb })
    }
-    if ((capability.includes('video') || source === 'workflow') && fu.video_enabled) {
+    if ((capability?.includes('video') || source === 'workflow') && fu.video_enabled) {
      options.push({ type: 'video', enabled: fu.video_enabled, maxSize: fu.video_max_size_mb })
    }
    return options.filter(item => item.enabled)
--- a/web/src/views/ApplicationConfig/types.ts
+++ b/web/src/views/ApplicationConfig/types.ts
@@ -8,7 +8,7 @@ import type { KnowledgeConfig } from './components/Knowledge/types'
 import type { Variable } from './components/VariableList/types'
 import type { ToolOption } from './components/ToolList/types'
 import type { ChatItem } from '@/components/Chat/types'
-import type { GraphRef, WorkflowConfig } from '@/views/Workflow/types';
+import type { ChatVariable, GraphRef, WorkflowConfig } from '@/views/Workflow/types';
 import type { ApiKey } from '@/views/ApiKeyManagement/types'
 import type { SkillConfigForm } from './components/Skill/types'
 import type { Capability } from '@/views/ModelManagement/types'
@@ -164,6 +164,7 @@ export interface WorkflowRef {
  graphRef: GraphRef;
  /** Add variable */
  addVariable: () => void;
+  chatVariables: ChatVariable[];
  config: WorkflowConfig | null;
  features: WorkflowConfig['features'];
  handleSaveFeaturesConfig?: (value: FeaturesConfigForm) => void;
--- a/web/src/views/Conversation/components/FileUpload.tsx
+++ b/web/src/views/Conversation/components/FileUpload.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-06 21:09:42 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-23 17:19:58
+ * @Last Modified time: 2026-03-27 17:55:04
 */
 /**
 * File Upload Component
@@ -59,7 +59,7 @@ interface UploadFilesProps extends Omit<UploadProps, 'onChange'> {
  featureConfig: FeaturesConfigForm['file_upload']
 }

-const transform_file_type = {
+export const transform_file_type: Record<string, string> = {
  'text/plain': 'document/text',
  'text/markdown': 'document/markdown',
  'text/x-markdown': 'document/x-markdown',
--- a/web/src/views/ModelManagement/components/ModelListDetail.tsx
+++ b/web/src/views/ModelManagement/components/ModelListDetail.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:49:45 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-25 12:28:07
+ * @Last Modified time: 2026-03-27 18:06:23
 */
 /**
 * Model List Detail Drawer
@@ -12,7 +12,7 @@

 import { useState, useImperativeHandle, forwardRef, useRef, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Switch, Row, Col, Space, Tooltip } from 'antd'
+import { Button, Switch, Row, Col, Space, Tooltip, Popover } from 'antd'

 import type { ProviderModelItem, ModelListItem, ModelListDetailRef, MultiKeyConfigModalRef } from '../types';
 import RbDrawer from '@/components/RbDrawer';
@@ -136,11 +136,19 @@ const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({
            <RbCard
              key={item.id}
              title={item.name}
-              subTitle={<Space size={8} className="rb:mt-1!">
-                <Tag>{t(`modelNew.${item.type}`)}</Tag>
-                <Tag color="warning">{item.api_keys.length}{t('modelNew.apiKeyNum')}</Tag>
-                {item.capability?.filter(item => item !=='video').map(vo => <Tag key={vo}>{t(`modelNew.${vo}`)}</Tag>)}
-              </Space>}
+              subTitle={
+                <Popover content={
+                  <Space size={8} className="rb:mt-1!">
+                    <Tag>{t(`modelNew.${item.type}`)}</Tag>
+                    <Tag color="warning">{item.api_keys.length}{t('modelNew.apiKeyNum')}</Tag>
+                    {item.capability?.map(vo => <Tag key={vo}>{t(`modelNew.${vo}`)}</Tag>)}
+                  </Space>}>
+                  <Space size={8} className="rb:mt-1!">
+                    <Tag>{t(`modelNew.${item.type}`)}</Tag>
+                    <Tag color="warning">{item.api_keys.length}{t('modelNew.apiKeyNum')}</Tag>
+                    {item.capability?.map(vo => <Tag key={vo}>{t(`modelNew.${vo}`)}</Tag>)}
+                  </Space>
+                </Popover>}
              avatarUrl={getLogoUrl(item.logo)}
              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]">
--- a/web/src/views/UserManagement/types.ts
+++ b/web/src/views/UserManagement/types.ts
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 17:50:56 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-25 11:44:02
+ * @Last Modified time: 2026-03-27 16:03:32
 */
 /**
 * User data type
@@ -18,6 +18,7 @@ export interface User {
  current_workspace_id?: string;
  current_workspace_name?: string;
  role: 'member' | 'manager' | null;
+  permissions: string[];
  [key: string]: unknown;
 }

--- a/web/src/views/UserMemoryDetail/components/CommunityNetwork.tsx
+++ b/web/src/views/UserMemoryDetail/components/CommunityNetwork.tsx
@@ -66,7 +66,7 @@ const CommunityNetwork: FC<{ onSelectCommunity?: (node: RawCommunityNode) => voi

  if (loading) {
    return <Flex align="center" justify="center" className="rb:w-full rb:h-full">
-      <Spin tip={t('userMemory.communityLoadingTip')} size="large" className="rb:text-[#5B6167]!">
+      <Spin tip={t('userMemory.communityLoadingTip')} size="large" className="rb:text-[#5B6167]! spin">
        <div className="rb:w-64 rb:h-64" />
      </Spin>
      </Flex>
--- a/web/src/views/Workflow/components/Chat/Chat.tsx
+++ b/web/src/views/Workflow/components/Chat/Chat.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-06 21:10:56 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-25 13:57:40
+ * @Last Modified time: 2026-03-27 17:30:47
 */
 /**
 * Workflow Chat Component
@@ -41,7 +41,9 @@ import type { ChatToolbarRef } from '@/components/Chat/ChatToolbar'
 import Runtime from './Runtime';
 import type { FeaturesConfigForm } from '@/views/ApplicationConfig/types';

-const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef; data: WorkflowConfig | null }>(({ appId, graphRef, data }, ref) => {
+const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef; data: WorkflowConfig | null; features?: FeaturesConfigForm }>(({
+  appId, graphRef, features
+}, ref) => {
  const { t } = useTranslation()
  const { message: messageApi } = App.useApp()
  const toolbarRef = useRef<ChatToolbarRef>(null)
@@ -58,7 +60,6 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef; data: Work
  const [conversationId, setConversationId] = useState<string | null>(null)
  const [fileList, setFileList] = useState<any[]>([])
  const [message, setMessage] = useState<string | undefined>(undefined)
-  const [features, setFeatures] = useState<FeaturesConfigForm>({} as FeaturesConfigForm)

  /**
   * Opens the chat drawer and loads workflow variables from the start node
@@ -67,10 +68,6 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef; data: Work
    setOpen(true)
  }

-  useEffect(() => {
-    if (data?.features && open) setFeatures(data.features)
-  }, [open, data?.features])
-
  useEffect(() => {
    if (open && toolbarReady) {
      getVariables()
@@ -434,7 +431,7 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef; data: Work
        >
          <ChatToolbar
            ref={toolbarCallbackRef}
-            features={features}
+            features={features as FeaturesConfigForm}
            onFilesChange={setFileList}
            onVariablesChange={setVariables}
          />
--- a/web/src/views/Workflow/hooks/useWorkflowGraph.ts
+++ b/web/src/views/Workflow/hooks/useWorkflowGraph.ts
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 15:17:48 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-24 15:01:52
+ * @Last Modified time: 2026-03-27 18:14:38
 */
 import { useRef, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
@@ -72,6 +72,7 @@ export interface UseWorkflowGraphReturn {

  handleAddNotes: () => void;
  handleSaveFeaturesConfig: (value: FeaturesConfigForm) => void;
+  features?: FeaturesConfigForm;
 }

 /**
@@ -1176,7 +1177,7 @@ export const useWorkflowGraph = ({
      saveWorkflowConfig(config.app_id, params as WorkflowConfig)
      .then((res) => {
        if (flag) {
-          message.success(t('common.saveSuccess'))
+          message.success({ content: t('common.saveSuccess'), duration: 1 })
        }
        resolve(res)
      }).catch(error => {
@@ -1212,6 +1213,7 @@ export const useWorkflowGraph = ({
  }
  const handleSaveFeaturesConfig = (value?: FeaturesConfigForm) => {
    featuresRef.current = value
+    onFeaturesLoad?.(value)
  }

  return {
@@ -1233,6 +1235,7 @@ export const useWorkflowGraph = ({
    chatVariables,
    setChatVariables,
    handleAddNotes,
-    handleSaveFeaturesConfig
+    handleSaveFeaturesConfig,
+    features: featuresRef.current,
  };
 };
--- a/web/src/views/Workflow/index.tsx
+++ b/web/src/views/Workflow/index.tsx
@@ -34,7 +34,8 @@ const Workflow = forwardRef<WorkflowRef, { onFeaturesLoad?: (features: FeaturesC
    chatVariables,
    setChatVariables,
    handleAddNotes,
-    handleSaveFeaturesConfig
+    handleSaveFeaturesConfig,
+    features
  } = useWorkflowGraph({ containerRef, miniMapRef, onFeaturesLoad });

  const onDragOver = (event: React.DragEvent) => {
@@ -55,8 +56,9 @@ const Workflow = forwardRef<WorkflowRef, { onFeaturesLoad?: (features: FeaturesC
    handleRun,
    graphRef,
    addVariable,
+    chatVariables,
    config,
-    features: config?.features,
+    features: features,
    handleSaveFeaturesConfig
  }))
  return (
@@ -99,6 +101,7 @@ const Workflow = forwardRef<WorkflowRef, { onFeaturesLoad?: (features: FeaturesC
      <Chat
        ref={chatRef}
        data={config}
+        features={features}
        graphRef={graphRef}
        appId={config?.app_id as string}
      />