feat: select model in visualized modl mapping

2026-01-08 15:26:59 +00:00
parent 04ff3df583
commit c0a9934a2e
3 changed files with 667 additions and 335 deletions
--- a/web/src/components/table/channels/modals/SingleModelSelectModal.jsx
+++ b/web/src/components/table/channels/modals/SingleModelSelectModal.jsx
@@ -0,0 +1,195 @@
+/*
+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, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useIsMobile } from '../../../../hooks/common/useIsMobile';
+import {
+  Collapse,
+  Empty,
+  Input,
+  Modal,
+  Radio,
+  Typography,
+} from '@douyinfe/semi-ui';
+import {
+  IllustrationNoResult,
+  IllustrationNoResultDark,
+} from '@douyinfe/semi-illustrations';
+import { IconSearch } from '@douyinfe/semi-icons';
+import { getModelCategories } from '../../../../helpers/render';
+
+const SingleModelSelectModal = ({
+  visible,
+  models = [],
+  selected = '',
+  onConfirm,
+  onCancel,
+}) => {
+  const { t } = useTranslation();
+  const isMobile = useIsMobile();
+
+  const normalizeModelName = (model) => String(model ?? '').trim();
+  const normalizedModels = useMemo(() => {
+    const list = Array.isArray(models) ? models : [];
+    return Array.from(new Set(list.map(normalizeModelName).filter(Boolean)));
+  }, [models]);
+
+  const [keyword, setKeyword] = useState('');
+  const [selectedModel, setSelectedModel] = useState('');
+
+  useEffect(() => {
+    if (visible) {
+      setKeyword('');
+      setSelectedModel(normalizeModelName(selected));
+    }
+  }, [visible, selected]);
+
+  const filteredModels = useMemo(() => {
+    const lower = keyword.trim().toLowerCase();
+    if (!lower) return normalizedModels;
+    return normalizedModels.filter((m) => m.toLowerCase().includes(lower));
+  }, [normalizedModels, keyword]);
+
+  const modelsByCategory = useMemo(() => {
+    const categories = getModelCategories(t);
+    const categorized = {};
+    const uncategorized = [];
+
+    filteredModels.forEach((model) => {
+      let foundCategory = false;
+      for (const [key, category] of Object.entries(categories)) {
+        if (key !== 'all' && category.filter({ model_name: model })) {
+          if (!categorized[key]) {
+            categorized[key] = {
+              label: category.label,
+              icon: category.icon,
+              models: [],
+            };
+          }
+          categorized[key].models.push(model);
+          foundCategory = true;
+          break;
+        }
+      }
+      if (!foundCategory) {
+        uncategorized.push(model);
+      }
+    });
+
+    if (uncategorized.length > 0) {
+      categorized.other = {
+        label: t('其他'),
+        icon: null,
+        models: uncategorized,
+      };
+    }
+
+    return categorized;
+  }, [filteredModels, t]);
+
+  const categoryEntries = useMemo(
+    () => Object.entries(modelsByCategory),
+    [modelsByCategory],
+  );
+
+  return (
+    <Modal
+      header={
+        <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4 py-4'>
+          <Typography.Title heading={5} className='m-0'>
+            {t('选择模型')}
+          </Typography.Title>
+        </div>
+      }
+      visible={visible}
+      onOk={() => onConfirm?.(selectedModel)}
+      onCancel={onCancel}
+      okText={t('确定')}
+      cancelText={t('取消')}
+      okButtonProps={{ disabled: !selectedModel }}
+      size={isMobile ? 'full-width' : 'large'}
+      closeOnEsc
+      maskClosable
+      centered
+    >
+      <Input
+        prefix={<IconSearch size={14} />}
+        placeholder={t('搜索模型')}
+        value={keyword}
+        onChange={(v) => setKeyword(v)}
+        showClear
+      />
+
+      <div style={{ maxHeight: 400, overflowY: 'auto', paddingRight: 8 }}>
+        {filteredModels.length === 0 ? (
+          <Empty
+            image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
+            darkModeImage={
+              <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
+            }
+            description={t('暂无匹配模型')}
+            style={{ padding: 30 }}
+          />
+        ) : (
+          <Radio.Group
+            className='w-full'
+            style={{ width: '100%' }}
+            value={selectedModel}
+            onChange={(val) => {
+              const next = val && val.target ? val.target.value : val;
+              setSelectedModel(next);
+            }}
+          >
+            <Collapse
+              className='w-full'
+              style={{ width: '100%' }}
+              defaultActiveKey={[]}
+            >
+              {categoryEntries.map(([key, categoryData], index) => (
+                <Collapse.Panel
+                  key={`${key}_${index}`}
+                  itemKey={`${key}_${index}`}
+                  header={
+                    <span className='flex items-center gap-2'>
+                      {categoryData.icon}
+                      <span>
+                        {categoryData.label} ({categoryData.models.length})
+                      </span>
+                    </span>
+                  }
+                >
+                  <div className='grid grid-cols-2 gap-x-4'>
+                    {categoryData.models.map((model) => (
+                      <Radio key={model} value={model} className='my-1'>
+                        {model}
+                      </Radio>
+                    ))}
+                  </div>
+                </Collapse.Panel>
+              ))}
+            </Collapse>
+          </Radio.Group>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default SingleModelSelectModal;