refactor: model instance item

src/pages/llmodels/instance-view/index.tsx

@@ -1,7 +1,111 @@
-import React from 'react';
+import DeleteModal from '@/components/delete-modal';
+import IconFont from '@/components/icon-font';
+import { FilterBar } from '@/components/page-tools';
+import { PaginationKey, TABLE_SORT_DIRECTIONS } from '@/config/settings';
+import useTableFetch from '@/hooks/use-table-fetch';
+import NoResult from '@/pages/_components/no-result';
+import PageBox from '@/pages/_components/page-box';
+import { useIntl } from '@umijs/max';
+import { useMemoizedFn } from 'ahooks';
+import { ConfigProvider, Table } from 'antd';
+import _ from 'lodash';
+import {
+  deleteModelInstance,
+  MODEL_INSTANCE_API,
+  queryModelsInstances
+} from '../apis';
+import { ModelInstanceListItem as ListItem } from '../config/types';
+import useInstanceColumns from './use-instance-columns';
 
 const InstanceView: React.FC = () => {
-  return <div>InstanceView</div>;
+  const {
+    dataSource,
+    rowSelection,
+    queryParams,
+    modalRef,
+    handleTableChange,
+    handleDelete,
+    handleDeleteBatch,
+    fetchData,
+    handlePageChange,
+    handleSearch,
+    handleNameChange
+  } = useTableFetch<ListItem>({
+    key: PaginationKey.Providers,
+    fetchAPI: queryModelsInstances,
+    deleteAPI: deleteModelInstance,
+    watch: false,
+    API: MODEL_INSTANCE_API,
+    contentForDelete: 'menu.models.providers'
+  });
+  const intl = useIntl();
+
+  const handleSelect = useMemoizedFn((val: any, row: ListItem) => {});
+
+  const renderEmpty = (type?: string) => {
+    if (type !== 'Table') return;
+    return (
+      <NoResult
+        loading={dataSource.loading}
+        loadend={dataSource.loadend}
+        dataSource={dataSource.dataList}
+        image={<IconFont type="icon-extension-outline" />}
+        filters={_.omit(queryParams, ['sort_by'])}
+        noFoundText={intl.formatMessage({
+          id: 'noresult.providers.nofound'
+        })}
+        title={intl.formatMessage({ id: 'noresult.providers.title' })}
+        subTitle={intl.formatMessage({
+          id: 'noresult.providers.subTitle'
+        })}
+        buttonText={intl.formatMessage({ id: 'noresult.button.add' })}
+      ></NoResult>
+    );
+  };
+
+  const columns = useInstanceColumns(handleSelect);
+
+  return (
+    <>
+      <PageBox>
+        <FilterBar
+          showSelect={false}
+          marginBottom={22}
+          marginTop={30}
+          widths={{ input: 300 }}
+          rowSelection={rowSelection}
+          handleInputChange={handleNameChange}
+          handleSearch={handleSearch}
+          handleDeleteByBatch={handleDeleteBatch}
+        ></FilterBar>
+        <ConfigProvider renderEmpty={renderEmpty}>
+          <Table
+            rowKey="id"
+            tableLayout="fixed"
+            sortDirections={TABLE_SORT_DIRECTIONS}
+            showSorterTooltip={false}
+            dataSource={dataSource.dataList}
+            loading={{
+              spinning: dataSource.loading,
+              size: 'middle'
+            }}
+            rowSelection={rowSelection}
+            columns={columns}
+            scroll={{ x: 900 }}
+            pagination={{
+              showSizeChanger: true,
+              pageSize: queryParams.perPage,
+              current: queryParams.page,
+              total: dataSource.total,
+              hideOnSinglePage: queryParams.perPage === 10,
+              onChange: handlePageChange
+            }}
+          ></Table>
+        </ConfigProvider>
+      </PageBox>
+      <DeleteModal ref={modalRef}></DeleteModal>
+    </>
+  );
 };
 
 export default InstanceView;

src/pages/llmodels/instance-view/use-instance-columns.tsx

@@ -0,0 +1,63 @@
+// columns.ts
+import DropdownButtons from '@/components/drop-down-buttons';
+import { tableSorter } from '@/config/settings';
+import { useIntl } from '@umijs/max';
+import { ColumnsType } from 'antd/lib/table';
+import { useMemo } from 'react';
+import { ModelInstanceListItem as ListItem } from '../config/types';
+
+const useProviderColumns = (
+  handleSelect: (val: string, record: ListItem) => void,
+  onCellClick?: (record: ListItem, dataIndex: string) => void
+): ColumnsType<ListItem> => {
+  const intl = useIntl();
+
+  return useMemo(() => {
+    return [
+      {
+        title: intl.formatMessage({ id: 'common.table.name' }),
+        dataIndex: 'name',
+        sorter: tableSorter(1),
+        minWidth: 160,
+        span: 5,
+        render: () => '--'
+      },
+      {
+        title: intl.formatMessage({ id: 'providers.table.providerName' }),
+        dataIndex: ['config', 'type'],
+        sorter: tableSorter(2),
+        span: 4,
+        minWidth: 160,
+        render: () => '--'
+      },
+      {
+        title: intl.formatMessage({ id: 'providers.table.models' }),
+        dataIndex: 'models',
+        span: 3,
+        minWidth: 200,
+        render: () => '--'
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.createTime' }),
+        dataIndex: 'created_at',
+        sorter: tableSorter(6),
+        span: 3,
+        render: () => '--'
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.operation' }),
+        dataIndex: 'operations',
+        span: 3,
+        minWidth: 120,
+        render: (value: string, record: ListItem) => (
+          <DropdownButtons
+            items={[]}
+            onSelect={(val) => handleSelect(val, record)}
+          ></DropdownButtons>
+        )
+      }
+    ];
+  }, [handleSelect, onCellClick]);
+};
+
+export default useProviderColumns;