feat(web): create space add icon

2026-02-02 10:45:44 +08:00
parent d62746fc8c
commit 15a254c0cd
7 changed files with 146 additions and 87 deletions
--- a/web/src/assets/images/space/neo4j.png
+++ b/web/src/assets/images/space/neo4j.png
--- a/web/src/assets/images/space/rag.png
+++ b/web/src/assets/images/space/rag.png
--- a/web/src/i18n/en.ts
+++ b/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',
--- a/web/src/i18n/zh.ts
+++ b/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: '记忆引擎模块配置中心',
--- a/web/src/views/SpaceManagement/components/SpaceModal.tsx
+++ b/web/src/views/SpaceManagement/components/SpaceModal.tsx
@@ -1,24 +1,31 @@
-import { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
-import { Form, Input, App, Select } from 'antd';
+import { forwardRef, useImperativeHandle, useState } from 'react';
+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)
-        createWorkspace(values as SpaceModalData)
-          .then(() => {
-            setLoading(false)
-            refresh()
-            handleClose()
-            message.success(t('common.createSuccess'))
-          })
-          .catch(() => {
-            setLoading(false)
-          });
+        if (currentStep === 0) {
+          setCurrentStep(1)
+        } else {
+          const { icon, ...rest } = values
+          let formData: SpaceModalData = {
+            ...rest
+          }
+          if (icon?.response?.data.file_id) {
+            getFileLink(icon?.response?.data.file_id).then(res => {
+              const logoRes = res as { url: string }
+              formData.icon = logoRes.url
+              formData.iconType = 'remote'
+              handleUpdate(formData)
+            }).catch(() => {
+              handleUpdate(formData)
+            })
+          }
+        }
      })
      .catch((err) => {
        console.log('err', err)
      });
  }
-
-  useEffect(() => {
-    getModels()
-  }, [])
-  
-  const getModels = () => {
-    getModelList({ type: 'llm,chat', pagesize: 100, page: 1, is_active: true })
-      .then(res => {
-        const response = res as { items: ModelListItem[] }
-        setModelList(response.items)
+  const handleUpdate = (formData: SpaceModalData) => {
+    setLoading(true)
+    createWorkspace(formData)
+      .then(() => {
+        setLoading(false)
+        refresh()
+        handleClose()
+        message.success(t('common.createSuccess'))
      })
+      .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>
  );
--- a/web/src/views/SpaceManagement/index.tsx
+++ b/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>
--- a/web/src/views/SpaceManagement/types.ts
+++ b/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;
 }

 // 定义组件暴露的方法接口