💄 style: improve discover model page (#5544)

* improve * refactor db viewer * fix lint * improve code
lobehub · Jan 22, 2025 · 979849c · 979849c
1 parent a6eff23
commit 979849c
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 49 deletions.
diff --git a/src/app/(main)/discover/(detail)/model/[...slugs]/features/Header.tsx b/src/app/(main)/discover/(detail)/model/[...slugs]/features/Header.tsx
@@ -3,6 +3,7 @@
 import { ModelIcon } from '@lobehub/icons';
 import { Button } from 'antd';
 import { createStyles } from 'antd-style';
+import dayjs from 'dayjs';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -20,7 +21,9 @@ export const useStyles = createStyles(({ css, token }) => ({
     background: ${token.colorFillSecondary};
   `,
   time: css`
+    display: flex;
     font-size: 12px;
+    line-height: 22px;
     color: ${token.colorTextDescription};
   `,
   title: css`
@@ -41,6 +44,7 @@ const Header = memo<HeaderProps>(({ identifier, data, mobile }) => {
   const { styles, theme } = useStyles();
   const { t } = useTranslation(['discover', 'models']);
 
+  const releasedAt = data.meta.releasedAt;
   return (
     <Flexbox gap={12} width={'100%'}>
       {!mobile && <Back href={'/discover/models'} />}
@@ -56,9 +60,11 @@ const Header = memo<HeaderProps>(({ identifier, data, mobile }) => {
               style={{ color: theme.colorTextSecondary }}
             >
               <div>{identifier}</div>
-              <time className={styles.time} dateTime={new Date(data.createdAt).toISOString()}>
-                {data.createdAt}
-              </time>
+              {releasedAt && (
+                <time className={styles.time} dateTime={dayjs(releasedAt).toISOString()}>
+                  {releasedAt}
+                </time>
+              )}
             </Flexbox>
           </Flexbox>
         </Flexbox>

diff --git a/src/app/(main)/discover/(detail)/model/[...slugs]/features/InfoSidebar/SuggestionItem.tsx b/src/app/(main)/discover/(detail)/model/[...slugs]/features/InfoSidebar/SuggestionItem.tsx
@@ -44,13 +44,13 @@ export interface SuggestionItemProps
   extends Omit<DiscoverModelItem, 'suggestions' | 'socialData' | 'providers'>,
     FlexboxProps {}
 
-const SuggestionItem = memo<SuggestionItemProps>(({ className, meta, identifier, ...rest }) => {
+const SuggestionItem = memo<SuggestionItemProps>(({ className, meta, identifier }) => {
   const { title, description, contextWindowTokens, vision, functionCall } = meta;
   const { t } = useTranslation('models');
   const { cx, styles } = useStyles();
 
   return (
-    <Flexbox className={cx(styles.container, className)} gap={12} key={identifier} {...rest}>
+    <Flexbox className={cx(styles.container, className)} gap={12} key={identifier}>
       <Flexbox align={'center'} gap={12} horizontal width={'100%'}>
         <ModelIcon model={identifier} size={36} type={'avatar'} />
         <Flexbox style={{ overflow: 'hidden' }}>

diff --git a/src/app/(main)/discover/(detail)/model/[...slugs]/features/ParameterList/index.tsx b/src/app/(main)/discover/(detail)/model/[...slugs]/features/ParameterList/index.tsx
@@ -89,10 +89,10 @@ const ParameterList = memo<ParameterListProps>(({ data }) => {
     <Block title={t('models.parameterList.title')}>
       <Collapse
         defaultActiveKey={items.map((item) => item.key)}
-        expandIconPosition={'right'}
+        expandIconPosition={'end'}
         gap={16}
         items={items.map((item) => ({
-          children: <ParameterItem {...item} />,
+          children: <ParameterItem {...item} key={item.key} />,
           key: item.key,
           label: (
             <Flexbox align={'center'} gap={8} horizontal>

diff --git a/src/app/(main)/discover/(detail)/model/[...slugs]/features/ProviderList/index.tsx b/src/app/(main)/discover/(detail)/model/[...slugs]/features/ProviderList/index.tsx
@@ -4,7 +4,7 @@ import { ModelIcon } from '@lobehub/icons';
 import { Divider } from 'antd';
 import { useTheme } from 'antd-style';
 import { BrainCircuit } from 'lucide-react';
-import { memo } from 'react';
+import { Fragment, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DiscoverProviderItem } from '@/types/discover';
@@ -33,10 +33,10 @@ const ProviderList = memo<ProviderListProps>(({ mobile, data, identifier }) => {
       title={t('models.supportedProviders')}
     >
       {data.map((item, index) => (
-        <>
-          <ProviderItem key={item.identifier} mobile={mobile} modelId={identifier} {...item} />
-          {index < data.length - 1 && <Divider key={index} style={{ margin: 0 }} />}
-        </>
+        <Fragment key={item.identifier}>
+          <ProviderItem mobile={mobile} modelId={identifier} {...item} />
+          {index < data.length - 1 && <Divider style={{ margin: 0 }} />}
+        </Fragment>
       ))}
     </HighlightBlock>
   );

diff --git a/src/features/DevPanel/PostgresViewer/DataTable/Table.tsx b/src/features/DevPanel/PostgresViewer/DataTable/Table.tsx
@@ -2,13 +2,8 @@ import { createStyles } from 'antd-style';
 import React from 'react';
 import { Center } from 'react-layout-kit';
 import { TableVirtuoso } from 'react-virtuoso';
-import useSWR from 'swr';
 
-import { tableViewerService } from '@/services/tableViewer';
-import { useGlobalStore } from '@/store/global';
-import { systemStatusSelectors } from '@/store/global/selectors';
-
-import { useTableColumns } from '../useTableColumns';
+import { usePgTable, useTableColumns } from '../usePgTable';
 import TableCell from './TableCell';
 
 const useStyles = createStyles(({ token, css }) => ({
@@ -100,12 +95,8 @@ const Table = ({ tableName }: TableProps) => {
   const { styles } = useStyles();
 
   const tableColumns = useTableColumns(tableName);
-  const isDBInited = useGlobalStore(systemStatusSelectors.isDBInited);
 
-  const tableData = useSWR(
-    isDBInited && tableName ? ['fetch-table-data', tableName] : null,
-    ([, table]) => tableViewerService.getTableData(table),
-  );
+  const tableData = usePgTable(tableName);
 
   const columns = tableColumns.data?.map((t) => t.name) || [];
   const isLoading = tableColumns.isLoading || tableData.isLoading;

diff --git a/src/features/DevPanel/PostgresViewer/DataTable/index.tsx b/src/features/DevPanel/PostgresViewer/DataTable/index.tsx
@@ -3,7 +3,9 @@ import { Button } from 'antd';
 import { createStyles } from 'antd-style';
 import { Download, Filter, RefreshCw } from 'lucide-react';
 import React from 'react';
+import { mutate } from 'swr';
 
+import { FETCH_TABLE_DATA_KEY } from '../usePgTable';
 import Table from './Table';
 
 const useStyles = createStyles(({ token, css }) => ({
@@ -54,7 +56,13 @@ const DataTable = ({ tableName }: DataTableProps) => {
             Filter
           </Button>
           <ActionIcon icon={Download} title={'Export'} />
-          <ActionIcon icon={RefreshCw} title={'Refresh'} />
+          <ActionIcon
+            icon={RefreshCw}
+            onClick={async () => {
+              await mutate(FETCH_TABLE_DATA_KEY(tableName));
+            }}
+            title={'Refresh'}
+          />
         </div>
       </div>
 

diff --git a/src/features/DevPanel/PostgresViewer/Schema.tsx b/src/features/DevPanel/PostgresViewer/Schema.tsx
@@ -3,15 +3,10 @@ import { createStyles } from 'antd-style';
 import { ChevronDown, ChevronRight, Database, Table as TableIcon } from 'lucide-react';
 import React, { useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import useSWR from 'swr';
-
-import { tableViewerService } from '@/services/tableViewer';
-import { useGlobalStore } from '@/store/global';
-import { systemStatusSelectors } from '@/store/global/selectors';
 
 import TableColumns from './TableColumns';
+import { useFetchTables } from './usePgTable';
 
-// 样式定义
 const useStyles = createStyles(({ token, css }) => ({
   button: css`
     cursor: pointer;
@@ -138,11 +133,7 @@ const SchemaPanel = ({ onTableSelect, selectedTable }: SchemaPanelProps) => {
   const { styles, cx } = useStyles();
   const [expandedTables, setExpandedTables] = useState(new Set());
 
-  const isDBInited = useGlobalStore(systemStatusSelectors.isDBInited);
-
-  const { data, isLoading } = useSWR(isDBInited ? 'fetch-tables' : null, () =>
-    tableViewerService.getAllTables(),
-  );
+  const { data, isLoading } = useFetchTables();
 
   const toggleTable = (tableName: string) => {
     const newExpanded = new Set(expandedTables);

diff --git a/src/features/DevPanel/PostgresViewer/TableColumns.tsx b/src/features/DevPanel/PostgresViewer/TableColumns.tsx
@@ -3,7 +3,7 @@ import { createStyles } from 'antd-style';
 import React from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useTableColumns } from './useTableColumns';
+import { useTableColumns } from './usePgTable';
 
 const useStyles = createStyles(({ token, css }) => ({
   container: css`

diff --git a/src/features/DevPanel/PostgresViewer/usePgTable.ts b/src/features/DevPanel/PostgresViewer/usePgTable.ts
@@ -0,0 +1,31 @@
+import useSWR from 'swr';
+
+import { tableViewerService } from '@/services/tableViewer';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+
+const FETCH_TABLES = 'fetch-tables';
+const FETCH_TABLE_COLUMN_KEY = (tableName: string) => ['fetch-table-columns', tableName];
+export const FETCH_TABLE_DATA_KEY = (tableName: string) => ['fetch-table-data', tableName];
+
+export const useFetchTables = () => {
+  const isDBInited = useGlobalStore(systemStatusSelectors.isDBInited);
+
+  return useSWR(isDBInited ? FETCH_TABLES : null, () => tableViewerService.getAllTables());
+};
+
+export const useTableColumns = (tableName?: string) => {
+  const isDBInited = useGlobalStore(systemStatusSelectors.isDBInited);
+
+  return useSWR(isDBInited && tableName ? FETCH_TABLE_COLUMN_KEY(tableName) : null, ([, table]) =>
+    tableViewerService.getTableDetails(table),
+  );
+};
+
+export const usePgTable = (tableName?: string) => {
+  const isDBInited = useGlobalStore(systemStatusSelectors.isDBInited);
+
+  return useSWR(isDBInited && tableName ? FETCH_TABLE_DATA_KEY(tableName) : null, ([, table]) =>
+    tableViewerService.getTableData(table),
+  );
+};
diff --git a/src/features/DevPanel/PostgresViewer/useTableColumns.ts b/src/features/DevPanel/PostgresViewer/useTableColumns.ts
diff --git a/src/services/config.ts b/src/services/config.ts
@@ -23,6 +23,9 @@ export interface ImportResults {
   type?: string;
 }
 
+/**
+ * @deprecated
+ */
 class ConfigService {
   importConfigState = async (config: ConfigFile, callbacks?: OnImportCallbacks): Promise<void> => {
     if (config.exportType === 'settings') {