feat: Add base project structure with API and web components

2025-12-02 20:28:01 +08:00
parent f3de6d6cc9
commit c1adc62ec6
817 changed files with 111226 additions and 106 deletions
--- a/web/src/views/ModelManagement/components/ConfigModal.tsx
+++ b/web/src/views/ModelManagement/components/ConfigModal.tsx
@@ -0,0 +1,172 @@
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Form, Input, App } from 'antd';
+import { useTranslation } from 'react-i18next';
+import type { ModelFormData, Model, ConfigModalRef, ConfigModalProps } from '../types';
+import RbModal from '@/components/RbModal'
+import CustomSelect from '@/components/CustomSelect'
+import { updateModel, addModel, modelTypeUrl, modelProviderUrl } from '@/api/models'
+
+const ConfigModal = forwardRef<ConfigModalRef, ConfigModalProps>(({
+  refresh
+}, ref) => {
+  const { t } = useTranslation();
+  const { message } = App.useApp();
+  const [visible, setVisible] = useState(false);
+  const [model, setModel] = useState<Model>({} as Model);
+  const [isEdit, setIsEdit] = useState(false);
+  const [form] = Form.useForm<ModelFormData>();
+  const [loading, setLoading] = useState(false)
+
+  const values = Form.useWatch<ModelFormData>([], form);
+
+  // 封装取消方法，添加关闭弹窗逻辑
+  const handleClose = () => {
+    setModel({} as Model);
+    form.resetFields();
+    setLoading(false)
+    setVisible(false);
+  };
+
+  const handleOpen = (model?: Model) => {
+    if (model) {
+      setIsEdit(true);
+      setModel(model);
+      // 设置表单值
+      const apiKeyInfo = model.api_keys[0]
+      form.setFieldsValue({
+        provider: apiKeyInfo.provider,
+        model_name: apiKeyInfo.model_name,
+        api_key: apiKeyInfo.api_key,
+        api_base: apiKeyInfo.api_base
+    });
+    } else {
+      setIsEdit(false);
+      form.resetFields();
+    }
+    setVisible(true);
+  };
+  // 封装保存方法，添加提交逻辑
+  const handleSave = () => {
+    form
+      .validateFields()
+      .then(() => {
+        const data = {
+          name: values.name,
+          type: values.type,
+          api_keys: {
+            provider: values.provider,
+            model_name: values.model_name,
+            api_key: values.api_key,
+            api_base: values.api_base
+          },
+        }
+        setLoading(true)
+        const res = isEdit
+          ? updateModel(model.api_keys[0].id, {
+              provider: values.provider,
+              model_name: values.model_name,
+              api_key: values.api_key,
+              api_base: values.api_base
+            } as ModelFormData)
+          : addModel(data as ModelFormData)
+
+        res.then(() => {
+            if (refresh) {
+              refresh();
+            }
+            handleClose()
+            message.success(isEdit ? t('common.updateSuccess') : t('common.createSuccess'))
+          })
+          .catch(() => {
+            setLoading(false)
+          });
+      })
+      .catch((err) => {
+        console.log('err', err)
+      });
+  }
+
+  // 暴露给父组件的方法
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+    handleClose
+  }));
+
+  return (
+    <RbModal
+      title={isEdit ? `${model.name} - ${t('model.modelConfiguration')}` : t('model.createModel')}
+      open={visible}
+      onCancel={handleClose}
+      okText={t(`common.${isEdit ? 'save' : 'create'}`)}
+      onOk={handleSave}
+      confirmLoading={loading}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        initialValues={{}}
+      >
+        {!isEdit && (
+          <>
+            <Form.Item
+              name="name"
+              label={t('model.displayName')}
+              rules={[{ required: true, message: t('common.inputPlaceholder', { title: t('model.displayName') }) }]}
+            >
+              <Input placeholder={t('common.pleaseEnter')} />
+            </Form.Item>
+            <Form.Item
+              name="type"
+              label={t('model.type')}
+              rules={[{ required: true, message: t('common.selectPlaceholder', { title: t('model.type') }) }]}
+            >
+              <CustomSelect
+                url={modelTypeUrl}
+                hasAll={false}
+                format={(items) => items.map((item) => ({ label: item, value: item }))}
+              />
+            </Form.Item>
+          </>
+        )}
+
+
+        <Form.Item
+          name="provider"
+          label={t('model.provider')}
+          rules={[{ required: true, message: t('common.selectPlaceholder', { title: t('model.provider') }) }]}
+        >
+          <CustomSelect
+            url={modelProviderUrl}
+            hasAll={false}
+            format={(items) => items.map((item) => ({ label: item, value: item }))}
+          />
+        </Form.Item>
+        {/* TODO:改成模型名称 */}
+        <Form.Item
+          name="model_name"
+          label={t('model.modelName')}
+          rules={[{ required: true, message: t('common.inputPlaceholder', { title: t('model.modelName') }) }]}
+        >
+          <Input placeholder={t('common.pleaseEnter')} />
+        </Form.Item>
+
+        <Form.Item
+          name="api_key"
+          label={t('model.apiKey')}
+          rules={[{ required: true, message: t('common.inputPlaceholder', { title: t('model.apiKey') }) }]}
+        >
+          <Input.Password placeholder={t('common.pleaseEnter')} />
+        </Form.Item>
+
+        <Form.Item
+          name="api_base"
+          label={t('model.apiEndpoint')}
+        >
+          <Input placeholder="https://api.example.com/v1" />
+        </Form.Item>
+      </Form>
+    </RbModal>
+  );
+});
+
+export default ConfigModal;