feat: Add base project structure with API and web components
This commit is contained in:
Ke Sun
164
web/src/views/SpaceManagement/components/SpaceModal.tsx
Normal file
164
web/src/views/SpaceManagement/components/SpaceModal.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
import { forwardRef, useImperativeHandle, useState } from 'react';
|
||||
import { Form, Input, App } from 'antd';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import type { SpaceModalData, SpaceModalRef, Space } from '../types'
|
||||
import RbModal from '@/components/RbModal'
|
||||
import { createWorkspace } from '@/api/workspaces'
|
||||
import RadioGroupCard from '@/components/RadioGroupCard'
|
||||
import { getModelListUrl } from '@/api/models'
|
||||
import CustomSelect from '@/components/CustomSelect'
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
interface SpaceModalProps {
|
||||
refresh: () => void;
|
||||
}
|
||||
const types = [
|
||||
'rag',
|
||||
'neo4j',
|
||||
]
|
||||
|
||||
const SpaceModal = forwardRef<SpaceModalRef, SpaceModalProps>(({
|
||||
refresh
|
||||
}, ref) => {
|
||||
const { t } = useTranslation();
|
||||
const { message } = App.useApp();
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [form] = Form.useForm<SpaceModalData>();
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [editVo, setEditVo] = useState<Space | null>(null)
|
||||
|
||||
const values = Form.useWatch([], form);
|
||||
|
||||
// 封装取消方法，添加关闭弹窗逻辑
|
||||
const handleClose = () => {
|
||||
setVisible(false);
|
||||
form.resetFields();
|
||||
setLoading(false)
|
||||
setEditVo(null)
|
||||
};
|
||||
|
||||
const handleOpen = (space?: Space) => {
|
||||
if (space) {
|
||||
setEditVo(space || null)
|
||||
form.setFieldsValue({
|
||||
name: space.name,
|
||||
icon: space.icon
|
||||
})
|
||||
} else {
|
||||
form.resetFields();
|
||||
}
|
||||
setVisible(true);
|
||||
};
|
||||
// 封装保存方法，添加提交逻辑
|
||||
const handleSave = () => {
|
||||
form
|
||||
.validateFields()
|
||||
.then(() => {
|
||||
setLoading(true)
|
||||
createWorkspace(values as SpaceModalData)
|
||||
.then(() => {
|
||||
setLoading(false)
|
||||
refresh()
|
||||
handleClose()
|
||||
message.success(t('common.createSuccess'))
|
||||
})
|
||||
.catch(() => {
|
||||
setLoading(false)
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err', err)
|
||||
});
|
||||
}
|
||||
|
||||
// 暴露给父组件的方法
|
||||
useImperativeHandle(ref, () => ({
|
||||
handleOpen,
|
||||
handleClose
|
||||
}));
|
||||
|
||||
return (
|
||||
<RbModal
|
||||
title={t(`space.${editVo?.id ? 'editSpace' : 'createSpace'}`)}
|
||||
open={visible}
|
||||
onCancel={handleClose}
|
||||
okText={t('common.save')}
|
||||
onOk={handleSave}
|
||||
confirmLoading={loading}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
>
|
||||
<FormItem
|
||||
name="name"
|
||||
label={t('space.spaceName')}
|
||||
rules={[{ required: true, message: t('common.pleaseEnter') }]}
|
||||
>
|
||||
<Input placeholder={t('common.enter')} />
|
||||
</FormItem>
|
||||
<Form.Item
|
||||
label={t('space.llmModel')}
|
||||
name="llm"
|
||||
rules={[{ required: true, message: t('common.pleaseSelect') }]}
|
||||
>
|
||||
<CustomSelect
|
||||
url={getModelListUrl}
|
||||
params={{ type: 'llm', pagesize: 100 }}
|
||||
valueKey="id"
|
||||
labelKey="name"
|
||||
hasAll={false}
|
||||
style={{width: '100%'}}
|
||||
/>
|
||||
</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 }}
|
||||
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 }}
|
||||
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') }]}
|
||||
>
|
||||
<RadioGroupCard
|
||||
options={types.map((type) => ({
|
||||
value: type,
|
||||
label: t(`space.${type}`),
|
||||
labelDesc: t(`space.${type}Desc`),
|
||||
// icon: typeIcons[type]
|
||||
}))}
|
||||
/>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</RbModal>
|
||||
);
|
||||
});
|
||||
|
||||
export default SpaceModal;
|
||||
92
web/src/views/SpaceManagement/index.tsx
Normal file
92
web/src/views/SpaceManagement/index.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import clsx from 'clsx';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { List, Button } from 'antd';
|
||||
import type { Space, SpaceModalRef } from './types';
|
||||
import SpaceModal from './components/SpaceModal';
|
||||
import RbCard from '@/components/RbCard/Card'
|
||||
import { getWorkspaces, switchWorkspace } from '@/api/workspaces'
|
||||
import BodyWrapper from '@/components/Empty/BodyWrapper'
|
||||
import Tag from '@/components/Tag'
|
||||
|
||||
const SpaceManagement: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [data, setData] = useState<Space[]>([]);
|
||||
const spaceModalRef = useRef<SpaceModalRef>(null);
|
||||
|
||||
const loadMoreData = () => {
|
||||
setLoading(true);
|
||||
getWorkspaces()
|
||||
.then((res) => {
|
||||
const response = res as Space[];
|
||||
const results = Array.isArray(response) ? response : [];
|
||||
setData(results);
|
||||
})
|
||||
.catch(() => {
|
||||
console.error('Failed to load data');
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadMoreData();
|
||||
}, []);
|
||||
|
||||
const handleCreate = () => {
|
||||
spaceModalRef.current?.handleOpen();
|
||||
}
|
||||
|
||||
const handleJump = (id: string) => {
|
||||
switchWorkspace(id)
|
||||
.then(() => {
|
||||
localStorage.removeItem('user')
|
||||
navigate('/')
|
||||
})
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Button type="primary" className="rb:mb-[16px]" onClick={handleCreate}>
|
||||
{t('space.createSpace')}
|
||||
</Button>
|
||||
<BodyWrapper loading={loading} empty={data.length === 0}>
|
||||
<List
|
||||
grid={{ gutter: 16, column: 4 }}
|
||||
dataSource={data}
|
||||
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]">
|
||||
{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>}
|
||||
>
|
||||
<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]", {
|
||||
'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)}>
|
||||
{t('space.enterSpace')}
|
||||
</Button>
|
||||
</RbCard>
|
||||
</List.Item>
|
||||
)}
|
||||
className="rb:h-[calc(100vh-148px)] rb:overflow-y-auto rb:overflow-x-hidden"
|
||||
/>
|
||||
</BodyWrapper>
|
||||
|
||||
<SpaceModal
|
||||
ref={spaceModalRef}
|
||||
refresh={loadMoreData}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SpaceManagement;
|
||||
65
web/src/views/SpaceManagement/types.ts
Normal file
65
web/src/views/SpaceManagement/types.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
// 应用数据类型
|
||||
export interface Space {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
tenant_id: string;
|
||||
created_at: string | number;
|
||||
is_active: boolean;
|
||||
icon: string;
|
||||
storage_type: 'rag' | 'neo4j' | null;
|
||||
}
|
||||
|
||||
// 创建表单数据类型
|
||||
export interface SpaceModalData {
|
||||
name: string;
|
||||
type: string;
|
||||
icon: string;
|
||||
llm: string;
|
||||
embedding: string;
|
||||
rerank: string;
|
||||
storage_type: string;
|
||||
}
|
||||
|
||||
// 定义组件暴露的方法接口
|
||||
export interface SpaceModalRef {
|
||||
handleOpen: (space?: Space) => void;
|
||||
}
|
||||
export interface ModelConfigModalRef {
|
||||
handleOpen: (space?: Space) => void;
|
||||
}
|
||||
export interface ModelConfigModalData {
|
||||
model: string;
|
||||
[key: string]: string;
|
||||
}
|
||||
export interface AiPromptModalRef {
|
||||
handleOpen: (space?: Space) => void;
|
||||
}
|
||||
export interface VariableModalRef {
|
||||
handleOpen: (space?: Space) => void;
|
||||
}
|
||||
export interface VariableModalProps {
|
||||
refresh: () => void;
|
||||
}
|
||||
export interface VariableEditModalRef {
|
||||
handleOpen: (values?: Variable) => void;
|
||||
}
|
||||
export interface Variable {
|
||||
index?: number;
|
||||
type: string;
|
||||
key: string;
|
||||
name: string;
|
||||
maxLength?: number;
|
||||
defaultValue?: string;
|
||||
options?: string[];
|
||||
required: boolean;
|
||||
hidden?: boolean;
|
||||
}
|
||||
export interface ApiExtensionModalData {
|
||||
name: string;
|
||||
apiEndpoint: string;
|
||||
apiKey: string;
|
||||
}
|
||||
export interface ApiExtensionModalRef {
|
||||
handleOpen: () => void;
|
||||
}
|
||||
Reference in New Issue
Block a user