初始化导入 new-api 源码

web/src/components/table/models/modals/MissingModelsModal.jsx

@@ -0,0 +1,198 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useEffect, useState } from 'react';
+import {
+  Modal,
+  Table,
+  Spin,
+  Button,
+  Typography,
+  Empty,
+  Input,
+} from '@douyinfe/semi-ui';
+import {
+  IllustrationNoResult,
+  IllustrationNoResultDark,
+} from '@douyinfe/semi-illustrations';
+import { IconSearch } from '@douyinfe/semi-icons';
+import { API, showError } from '../../../../helpers';
+import { MODEL_TABLE_PAGE_SIZE } from '../../../../constants';
+import { useIsMobile } from '../../../../hooks/common/useIsMobile';
+
+const MissingModelsModal = ({ visible, onClose, onConfigureModel, t }) => {
+  const [loading, setLoading] = useState(false);
+  const [missingModels, setMissingModels] = useState([]);
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const isMobile = useIsMobile();
+
+  const fetchMissing = async () => {
+    setLoading(true);
+    try {
+      const res = await API.get('/api/models/missing');
+      if (res.data.success) {
+        setMissingModels(res.data.data || []);
+      } else {
+        showError(res.data.message);
+      }
+    } catch (_) {
+      showError(t('获取未配置模型失败'));
+    }
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    if (visible) {
+      fetchMissing();
+      setSearchKeyword('');
+      setCurrentPage(1);
+    } else {
+      setMissingModels([]);
+    }
+  }, [visible]);
+
+  // 过滤和分页逻辑
+  const filteredModels = missingModels.filter((model) =>
+    model.toLowerCase().includes(searchKeyword.toLowerCase()),
+  );
+
+  const dataSource = (() => {
+    const start = (currentPage - 1) * MODEL_TABLE_PAGE_SIZE;
+    const end = start + MODEL_TABLE_PAGE_SIZE;
+    return filteredModels.slice(start, end).map((model) => ({
+      model,
+      key: model,
+    }));
+  })();
+
+  const columns = [
+    {
+      title: t('模型名称'),
+      dataIndex: 'model',
+      render: (text) => (
+        <div className='flex items-center'>
+          <Typography.Text strong>{text}</Typography.Text>
+        </div>
+      ),
+    },
+    {
+      title: '',
+      dataIndex: 'operate',
+      fixed: 'right',
+      width: 120,
+      render: (text, record) => (
+        <Button
+          type='primary'
+          size='small'
+          onClick={() => onConfigureModel(record.model)}
+        >
+          {t('配置')}
+        </Button>
+      ),
+    },
+  ];
+
+  return (
+    <Modal
+      title={
+        <div className='flex flex-col gap-2 w-full'>
+          <div className='flex items-center gap-2'>
+            <Typography.Text
+              strong
+              className='!text-[var(--semi-color-text-0)] !text-base'
+            >
+              {t('未配置的模型列表')}
+            </Typography.Text>
+            <Typography.Text type='tertiary' size='small'>
+              {t('共')} {missingModels.length} {t('个未配置模型')}
+            </Typography.Text>
+          </div>
+        </div>
+      }
+      visible={visible}
+      onCancel={onClose}
+      footer={null}
+      size={isMobile ? 'full-width' : 'medium'}
+      className='!rounded-lg'
+    >
+      <Spin spinning={loading}>
+        {missingModels.length === 0 && !loading ? (
+          <Empty
+            image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
+            darkModeImage={
+              <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
+            }
+            description={t('暂无缺失模型')}
+            style={{ padding: 30 }}
+          />
+        ) : (
+          <div className='missing-models-content'>
+            {/* 搜索框 */}
+            <div className='flex items-center justify-end gap-2 w-full mb-4'>
+              <Input
+                placeholder={t('搜索模型...')}
+                value={searchKeyword}
+                onChange={(v) => {
+                  setSearchKeyword(v);
+                  setCurrentPage(1);
+                }}
+                className='!w-full'
+                prefix={<IconSearch />}
+                showClear
+              />
+            </div>
+
+            {/* 表格 */}
+            {filteredModels.length > 0 ? (
+              <Table
+                columns={columns}
+                dataSource={dataSource}
+                pagination={{
+                  currentPage: currentPage,
+                  pageSize: MODEL_TABLE_PAGE_SIZE,
+                  total: filteredModels.length,
+                  showSizeChanger: false,
+                  onPageChange: (page) => setCurrentPage(page),
+                }}
+              />
+            ) : (
+              <Empty
+                image={
+                  <IllustrationNoResult style={{ width: 100, height: 100 }} />
+                }
+                darkModeImage={
+                  <IllustrationNoResultDark
+                    style={{ width: 100, height: 100 }}
+                  />
+                }
+                description={
+                  searchKeyword ? t('未找到匹配的模型') : t('暂无缺失模型')
+                }
+                style={{ padding: 20 }}
+              />
+            )}
+          </div>
+        )}
+      </Spin>
+    </Modal>
+  );
+};
+
+export default MissingModelsModal;