feat(web): create space add icon

web/src/i18n/en.ts

@@ -423,7 +423,9 @@ export const en = {
       remove: 'Remove',
 
       fileSizeTip: 'File size cannot exceed {{size}}MB',
-      fileAcceptTip: 'Unsupported file type:'
+      fileAcceptTip: 'Unsupported file type:',
+      nextStep: 'Next Step',
+      prevStep: 'Previous Step',
     },
     model: {
       searchPlaceholder: 'search model…',
@@ -1373,6 +1375,9 @@ export const en = {
       embeddingModel: 'Embedding Model',
       rerankModel: 'Rerank Model',
       configAlert: 'Space model configuration ensures that the space can correctly call the corresponding models to process business data during runtime.',
+
+      basic: 'Basic Config',
+      models: 'Model Selection',
     },
     memoryExtractionEngine: {
       title: 'Memory Engine Module Configuration Center',
@@ -2039,7 +2044,7 @@ Memory Bear: After the rebellion, regional warlordism intensified for several re
         'code': {
           input_variables: 'Input Variables',
           output_variables: 'Output Variables',
-          refreshTip: '同步函数签名至代码',
+          refreshTip: 'Sync function signature to code',
         },
         name: 'Key',
         type: 'Type',

web/src/i18n/zh.ts

@@ -977,7 +977,9 @@ export const zh = {
       remove: '删除',
 
       fileSizeTip: '文件大小不能超过 {{size}}MB',
-      fileAcceptTip: '不支持的文件类型:'
+      fileAcceptTip: '不支持的文件类型:',
+      nextStep: '下一步',
+      prevStep: '上一步',
     },
     product: {
       applicationManagement: '应用管理',
@@ -1449,6 +1451,9 @@ export const zh = {
       embeddingModel: 'Embedding 模型',
       rerankModel: 'Rerank 模型',
       configAlert: '空间模型配置为空间的模型模型，保障空间运行时能正确的调用到相应的模型来处理业务数据。',
+
+      basic: '基础配置',
+      models: '模型选择',
     },
     memoryExtractionEngine: {
       title: '记忆引擎模块配置中心',

web/src/views/SpaceManagement/components/SpaceModal.tsx

@@ -1,24 +1,31 @@
-import { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
+import { forwardRef, useImperativeHandle, useState } from 'react';
-import { Form, Input, App, Select } from 'antd';
+import { Form, Input, App, Steps, Button } from 'antd';
 import { useTranslation } from 'react-i18next';
 
-import type { SpaceModalData, SpaceModalRef, Space } from '../types'
+import type { SpaceModalData, SpaceModalRef, Space, StorageType } from '../types'
 import RbModal from '@/components/RbModal'
 import { createWorkspace } from '@/api/workspaces'
 import RadioGroupCard from '@/components/RadioGroupCard'
-import { getModelListUrl, getModelList } from '@/api/models'
+import { getModelListUrl } from '@/api/models'
 import CustomSelect from '@/components/CustomSelect'
-import type { ModelListItem } from '@/views/ModelManagement/types'
+import UploadImages from '@/components/Upload/UploadImages'
+import { getFileLink } from '@/api/fileStorage'
+import ragIcon from '@/assets/images/space/rag.png'
+import neo4jIcon from '@/assets/images/space/neo4j.png'
 
 const FormItem = Form.Item;
 
 interface SpaceModalProps {
   refresh: () => void;
 }
-const types = [
+const types: StorageType[] = [
   'rag',
   'neo4j',
 ]
+const typeIcons: Record<StorageType, string> = {
+  rag: ragIcon,
+  neo4j: neo4jIcon
+}
 
 const SpaceModal = forwardRef<SpaceModalRef, SpaceModalProps>(({
   refresh
@@ -29,7 +36,7 @@ const SpaceModal = forwardRef<SpaceModalRef, SpaceModalProps>(({
   const [form] = Form.useForm<SpaceModalData>();
   const [loading, setLoading] = useState(false)
   const [editVo, setEditVo] = useState<Space | null>(null)
-  const [modelList, setModelList] = useState<ModelListItem[]>([])
+  const [currentStep, setCurrentStep] = useState(0)
 
   const values = Form.useWatch([], form);
 
@@ -39,7 +46,11 @@ const SpaceModal = forwardRef<SpaceModalRef, SpaceModalProps>(({
     form.resetFields();
     setLoading(false)
     setEditVo(null)
+    setCurrentStep(0)
   };
+  const handlePrevStep = () => {
+    setCurrentStep(prev => prev - 1)
+  }
 
   const handleOpen = (space?: Space) => {
     if (space) {
@@ -58,33 +69,41 @@ const SpaceModal = forwardRef<SpaceModalRef, SpaceModalProps>(({
     form
       .validateFields()
       .then(() => {
-        setLoading(true)
+        if (currentStep === 0) {
-        createWorkspace(values as SpaceModalData)
+          setCurrentStep(1)
-          .then(() => {
+        } else {
-            setLoading(false)
+          const { icon, ...rest } = values
-            refresh()
+          let formData: SpaceModalData = {
-            handleClose()
+            ...rest
-            message.success(t('common.createSuccess'))
+          }
-          })
+          if (icon?.response?.data.file_id) {
-          .catch(() => {
+            getFileLink(icon?.response?.data.file_id).then(res => {
-            setLoading(false)
+              const logoRes = res as { url: string }
-          });
+              formData.icon = logoRes.url
+              formData.iconType = 'remote'
+              handleUpdate(formData)
+            }).catch(() => {
+              handleUpdate(formData)
+            })
+          }
+        }
       })
       .catch((err) => {
         console.log('err', err)
       });
   }
-
+  const handleUpdate = (formData: SpaceModalData) => {
-  useEffect(() => {
+    setLoading(true)
-    getModels()
+    createWorkspace(formData)
-  }, [])
+      .then(() => {
-  
+        setLoading(false)
-  const getModels = () => {
+        refresh()
-    getModelList({ type: 'llm,chat', pagesize: 100, page: 1, is_active: true })
+        handleClose()
-      .then(res => {
+        message.success(t('common.createSuccess'))
-        const response = res as { items: ModelListItem[] }
-        setModelList(response.items)
       })
+      .catch(() => {
+        setLoading(false)
+      });
   }
 
   // 暴露给父组件的方法
@@ -98,78 +117,104 @@ const SpaceModal = forwardRef<SpaceModalRef, SpaceModalProps>(({
       title={t(`space.${editVo?.id ? 'editSpace' : 'createSpace'}`)}
       open={visible}
       onCancel={handleClose}
-      okText={t('common.save')}
       onOk={handleSave}
+      footer={[
+        <Button key="close" onClick={currentStep === 0 ? handleClose : handlePrevStep}>{t(currentStep === 0 ? 'common.cancel' : 'common.prevStep')}</Button>,
+        <Button key="submit" type="primary" onClick={handleSave}>{t(currentStep === 0 ? 'common.nextStep' : 'common.save')}</Button>,
+      ]}
       confirmLoading={loading}
     >
+      <Steps
+        size="small"
+        current={currentStep}
+        items={['basic', 'models'].map(key => ({ title: t(`space.${key}`) } ))}
+        className="rb:mb-6!"
+      />
       <Form
         form={form}
         layout="vertical"
       >
+        <Form.Item
+          name="icon"
+          label={t('space.spaceIcon')}
+          valuePropName="fileList"
+          hidden={currentStep === 1}
+        >
+          <UploadImages />
+        </Form.Item>
         <FormItem
           name="name"
           label={t('space.spaceName')}
-          rules={[{ required: true, message: t('common.pleaseEnter') }]}
+          hidden={currentStep === 1}
+          rules={[{ required: true, message: t('common.inputPlaceholder', { title: t('space.spaceName') }) }]}
         >
-          <Input placeholder={t('common.enter')} />
+          <Input placeholder={t('common.inputPlaceholder', { title: t('space.spaceName') })} />
         </FormItem>
-        <Form.Item 
-          label={t('space.llmModel')} 
-          name="llm"
-          rules={[{ required: true, message: t('common.pleaseSelect') }]}
-        >
-          <Select
-            placeholder={t('common.pleaseSelect')}
-            fieldNames={{
-              label: 'name',
-              value: 'id',
-            }}
-            options={modelList}
-          />
-        </Form.Item>
-        <Form.Item 
-          label={t('space.embeddingModel')} 
-          name="embedding"
-          rules={[{ required: true, message: t('common.pleaseSelect') }]}
-        >
-          <CustomSelect
-            url={getModelListUrl}
-            params={{ type: 'embedding', pagesize: 100, is_active: true }}
-            valueKey="id"
-            labelKey="name"
-            hasAll={false}
-            style={{width: '100%'}}
-          />
-        </Form.Item>
-        <Form.Item 
-          label={t('space.rerankModel')} 
-          name="rerank"
-          rules={[{ required: true, message: t('common.pleaseSelect') }]}
-        >
-          <CustomSelect
-            url={getModelListUrl}
-            params={{ type: 'rerank', pagesize: 100, is_active: true }}
-            valueKey="id"
-            labelKey="name"
-            hasAll={false}
-            style={{width: '100%'}}
-          />
-        </Form.Item>
-        
         <FormItem
           name="storage_type"
           label={t('space.storageType')}
-          rules={[{ required: true, message: t('common.pleaseSelect') }]}
+          hidden={currentStep === 1}
+          rules={[{ required: true, message: t('common.selectPlaceholder', { title: t('space.storageType') }) }]}
         >
           <RadioGroupCard
             options={types.map((type) => ({
               value: type,
               label: t(`space.${type}`),
               labelDesc: t(`space.${type}Desc`),
-              // icon: typeIcons[type]
+              icon: typeIcons[type]
             }))}
+            block={true}
           />
         </FormItem>
+
+
+        {currentStep === 1 && <>
+          <Form.Item
+            label={t('space.llmModel')}
+            name="llm"
+            rules={[{ required: true, message: t('common.selectPlaceholder', { title: t('space.llmModel') }) }]}
+          >
+            <CustomSelect
+              url={getModelListUrl}
+              params={{ type: 'llm,chat', pagesize: 100, is_active: true }}
+              valueKey="id"
+              labelKey="name"
+              hasAll={false}
+              placeholder={t('common.selectPlaceholder', { title: t('space.llmModel') })}
+              className="rb:w-full!"
+            />
+          </Form.Item>
+          <Form.Item
+            label={t('space.embeddingModel')}
+            name="embedding"
+            rules={[{ required: true, message: t('common.selectPlaceholder', { title: t('space.embeddingModel') }) }]}
+          >
+            <CustomSelect
+              url={getModelListUrl}
+              params={{ type: 'embedding', pagesize: 100, is_active: true }}
+              valueKey="id"
+              labelKey="name"
+              hasAll={false}
+              placeholder={t('common.selectPlaceholder', { title: t('space.embeddingModel') })}
+              className="rb:w-full!"
+            />
+          </Form.Item>
+          <Form.Item
+            label={t('space.rerankModel')}
+            name="rerank"
+            rules={[{ required: true, message: t('common.selectPlaceholder', { title: t('space.rerankModel') }) }]}
+          >
+            <CustomSelect
+              url={getModelListUrl}
+              params={{ type: 'rerank', pagesize: 100, is_active: true }}
+              valueKey="id"
+              labelKey="name"
+              hasAll={false}
+              placeholder={t('common.selectPlaceholder', { title: t('space.rerankModel') })}
+              className="rb:w-full!"
+            />
+          </Form.Item>
+        </>}
       </Form>
     </RbModal>
   );

web/src/views/SpaceManagement/index.tsx

@@ -50,7 +50,7 @@ const SpaceManagement: React.FC = () => {
   }
   return (
     <>
-      <Button type="primary" className="rb:mb-[16px]" onClick={handleCreate}>
+      <Button type="primary" className="rb:mb-4" onClick={handleCreate}>
         {t('space.createSpace')}
       </Button>
       <BodyWrapper loading={loading} empty={data.length === 0}>
@@ -60,18 +60,19 @@ const SpaceManagement: React.FC = () => {
           renderItem={(item) => (
             <List.Item key={item.id}>
               <RbCard
-                avatar={<div className="rb:w-[48px] rb:h-[48px] rb:rounded-[8px] rb:mr-[12px] rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
+                avatarUrl={item.icon}
+                avatar={<div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
                   {item.name[0]}
                 </div>}
                 title={item.name}
-                subTitle={<Tag className="rb:mt-[4px] rb:font-regular!" color={item.storage_type === 'rag' ? 'processing' : 'warning'}>{t(`space.${item.storage_type || 'neo4j'}`)}</Tag>}
+                subTitle={<Tag className="rb:mt-1 rb:font-regular!" color={item.storage_type === 'rag' ? 'processing' : 'warning'}>{t(`space.${item.storage_type || 'neo4j'}`)}</Tag>}
               >
-                <div className={clsx("rb:absolute rb:top-[-1px] rb:right-[-1px] rb:p-[2px_9px] rb:text-[#FFFFFF] rb:leading-[16px] rb:text-[12px] rb:font-regular rb:rounded-[0px_12px_0px_12px]", {
+                <div className={clsx("rb:absolute rb:-top-px rb:-right-px rb:p-[2px_9px] rb:text-[#FFFFFF] rb:leading-4 rb:text-[12px] rb:font-regular rb:rounded-[0px_12px_0px_12px]", {
                   'rb:bg-[#369F21]': item.is_active,
                   'rb:bg-[#A8A9AA]': !item.is_active,
                 })}>{item.is_active ? t('space.associated') : t('space.notAssociated')}</div>
                 
-                <Button type="primary" ghost block className="rb:mt-[40px]" onClick={() => handleJump(item.id)}>
+                <Button type="primary" ghost block className="rb:mt-10" onClick={() => handleJump(item.id)}>
                   {t('space.enterSpace')}
                 </Button>
               </RbCard>

web/src/views/SpaceManagement/types.ts

@@ -1,4 +1,6 @@
 // 应用数据类型
+
+export type StorageType = 'rag' | 'neo4j';
 export interface Space {
   id: string;
   name: string;
@@ -7,18 +9,19 @@ export interface Space {
   created_at: string | number;
   is_active: boolean;
   icon: string;
-  storage_type: 'rag' | 'neo4j' | null;
+  storage_type: StorageType | null;
 }
 
 // 创建表单数据类型
 export interface SpaceModalData {
   name: string;
   type: string;
-  icon: string;
+  icon?: any;
+  iconType?: 'remote';
   llm: string;
   embedding: string;
   rerank: string;
-  storage_type: string;
+  storage_type: StorageType;
 }
 
 // 定义组件暴露的方法接口