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/index.tsx
+++ b/web/src/views/ModelManagement/index.tsx
@@ -0,0 +1,100 @@
+import { useState, useRef, type FC } from 'react';
+import { Row, Col, Button } from 'antd'
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
+
+import ConfigModal from './components/ConfigModal'
+import type { Model, DescriptionItem, ConfigModalRef } from './types'
+import RbCard from '@/components/RbCard/Card'
+import SearchInput from '@/components/SearchInput'
+import PageScrollList, { type PageScrollListRef } from '@/components/PageScrollList'
+import { getModelListUrl } from '@/api/models'
+import { formatDateTime } from '@/utils/format';
+
+const ModelManagement: FC = () => {
+  const { t } = useTranslation();
+  const [query, setQuery] = useState({})
+  const configModalRef = useRef<ConfigModalRef>(null)
+  const scrollListRef = useRef<PageScrollListRef>(null)
+
+  const formatData = (data: Model) => {
+    return [
+      {
+        key: 'type',
+        label: t(`model.type`),
+        children: data.type || '-',
+      },
+      {
+        key: 'provider',
+        label: t(`model.provider`),
+        children: data.api_keys[0].provider || '-',
+      },
+      {
+        key: 'is_active',
+        label: t(`model.status`),
+        children: data.is_active ? t(`common.statusEnabled`) : t(`common.statusDisabled`),
+      },
+      {
+        key: 'created',
+        label: t(`model.created`),
+        children: data.created_at ? formatDateTime(data.created_at, 'YYYY-MM-DD HH:mm:ss') : '-',
+      },
+    ]
+  }
+
+  const handleEdit = (model?: Model) => {
+    configModalRef?.current?.handleOpen(model)
+  }
+  const handleSearch = (value?: string) => {
+    setQuery({ search: value })
+  }
+
+  return (
+    <div className="rb:w-full">
+      <Row className='rb:mb-[16px] rb:w-full'>
+        <Col span={6}>
+          <SearchInput
+            placeholder={t('model.searchPlaceholder')}
+            onSearch={handleSearch}
+            style={{width: '100%'}}
+          />
+        </Col>
+        <Col span={18} className="rb:text-right">
+          <Button type="primary" onClick={() => handleEdit()}>{t('model.createModel')}</Button>
+        </Col>
+      </Row>
+
+      <PageScrollList
+        ref={scrollListRef}
+        url={getModelListUrl}
+        query={query}
+        renderItem={(item: Model) => (
+          <RbCard
+            title={item.name}
+          >
+            {formatData(item)?.map((description: DescriptionItem) => (
+              <div 
+                key={description.key}
+                className="rb:flex rb:justify-between rb:text-[#5B6167] rb:text-[14px] rb:leading-[20px] rb:mb-[12px]"
+              >
+                  <span className="rb:whitespace-nowrap">{(description.label as string)}</span>
+                  <span className={clsx({
+                    "rb:text-[#212332]": description.key !== 'is_active',
+                    "rb:text-[#369F21] rb:font-medium": description.key === 'is_active' && item.is_active,
+                  })}>{(description.children as string)}</span>
+              </div>
+            ))}
+            <Button className="rb:mt-[8px]" type="primary" ghost block onClick={() => handleEdit(item)}>{t('model.configureBtn')}</Button>
+          </RbCard>
+        )}
+      />
+
+      <ConfigModal
+        ref={configModalRef}
+        refresh={() => scrollListRef?.current?.refresh()}
+      />
+    </div>
+  )
+}
+
+export default ModelManagement