improve style

lobehub · Dec 24, 2024 · 4df5b34 · 4df5b34
1 parent 3c27b8c
commit 4df5b34
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 76 deletions.
diff --git a/src/app/(main)/settings/provider/(list)/ProviderGrid/Card.tsx b/src/app/(main)/settings/provider/(list)/ProviderGrid/Card.tsx
@@ -1,5 +1,5 @@
 import { ProviderCombine } from '@lobehub/icons';
-import { Switch, Typography } from 'antd';
+import { Divider, Switch, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import Link from 'next/link';
 import { memo, useState } from 'react';
@@ -22,7 +22,6 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     overflow: hidden;
 
     height: 100%;
-    min-height: 100px;
 
     background: ${token.colorBgContainer};
     border-radius: 12px;
@@ -36,7 +35,7 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     }
   `,
   desc: css`
-    min-height: 22px;
+    min-height: 44px;
     margin-block-end: 0 !important;
     color: ${token.colorTextDescription};
   `,
@@ -85,20 +84,24 @@ const ProviderCard = memo<ProviderCardProps>(({ id, description, name }) => {
               title={name}
             />
           </Link>
+        </Flexbox>
+        {description && (
+          <Paragraph className={styles.desc} ellipsis={{ rows: 2, tooltip: true }}>
+            {t(`${id}.description`)}
+          </Paragraph>
+        )}
+        <Divider style={{ margin: '4px 0' }} />
+        <Flexbox horizontal justify={'space-between'} paddingBlock={'8px 0'}>
+          <div />
           <Switch
             checked={checked}
             onChange={(checked) => {
               setChecked(checked);
               toggleProviderEnabled(id as any, checked);
             }}
-            size={'small'}
+            // size={'small'}
           />
         </Flexbox>
-        {description && (
-          <Paragraph className={styles.desc} ellipsis={{ rows: 1, tooltip: true }}>
-            {t(`${id}.description`)}
-          </Paragraph>
-        )}
       </Flexbox>
     </Flexbox>
   );

diff --git a/src/app/(main)/settings/provider/(list)/ProviderGrid/index.tsx b/src/app/(main)/settings/provider/(list)/ProviderGrid/index.tsx
@@ -1,11 +1,13 @@
 'use client';
 
+import { Grid } from '@lobehub/ui';
 import { Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
+import { MAX_WIDTH } from '@/const/layoutTokens';
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';
 
@@ -15,7 +17,7 @@ const useStyles = createStyles(({ css, responsive, token }) => ({
   container: css`
     display: grid;
     grid-gap: 12px;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(3, 1fr);
 
     width: 100%;
     ${responsive.mobile} {
@@ -38,27 +40,27 @@ const List = memo(() => {
   const disabledList = useUserStore(modelProviderSelectors.disabledModelProviderList, isEqual);
 
   return (
-    <Flexbox gap={24} padding={'16px 0'}>
+    <Flexbox gap={24} padding={'16px 0'} style={{ maxWidth: MAX_WIDTH }}>
       <Flexbox gap={8}>
         <Flexbox align={'center'} gap={4} horizontal>
           <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>
             已开启服务商
           </Typography.Text>
           <Center className={styles.count}>{enabledList.length}</Center>
         </Flexbox>
-        <div className={styles.container}>
+        <Grid>
           {enabledList.map((item) => (
             <Card {...item} key={item.id} />
           ))}
-        </div>
+        </Grid>
       </Flexbox>
       <Flexbox gap={8}>
         <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>待开启服务商</Typography.Text>
-        <div className={styles.container}>
+        <Grid>
           {disabledList.map((item) => (
             <Card {...item} key={item.id} />
           ))}
-        </div>
+        </Grid>
       </Flexbox>
     </Flexbox>
   );

diff --git a/src/app/(main)/settings/provider/(list)/index.tsx b/src/app/(main)/settings/provider/(list)/index.tsx
@@ -10,8 +10,8 @@ import ProviderGrid from './ProviderGrid';
 const Page = () => {
   return (
     <Flexbox
+      align={'center'}
       gap={24}
-      paddingInline={16}
       style={{ overflow: 'scroll', paddingBottom: 24 }}
       width={'100%'}
     >

diff --git a/src/app/(main)/settings/provider/ProviderMenu/Item.tsx b/src/app/(main)/settings/provider/ProviderMenu/Item.tsx
@@ -54,7 +54,6 @@ const ProviderItem = memo<ModelProviderCard>(({ id, name }) => {
         <ProviderIcon provider={id} size={24} style={{ borderRadius: 6 }} type={'avatar'} />
         {name}
       </Flexbox>
-
       {enabled && <Badge status="success" />}
     </Link>
   );

diff --git a/src/app/(main)/settings/provider/ProviderMenu/SearchResult.tsx b/src/app/(main)/settings/provider/ProviderMenu/SearchResult.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
+
+import ProviderItem from './Item';
+
+interface SearchResultProps {
+  searchKeyword: string;
+}
+const SearchResult = memo<SearchResultProps>(({ searchKeyword }) => {
+  const { t } = useTranslation('modelProvider');
+
+  // 使用 useMemo 优化过滤性能
+  const filteredProviders = useMemo(() => {
+    const keyword = searchKeyword.toLowerCase().trim();
+
+    if (!keyword) return DEFAULT_MODEL_PROVIDER_LIST;
+
+    return DEFAULT_MODEL_PROVIDER_LIST.filter((provider) => {
+      return (
+        provider.id.toLowerCase().includes(keyword) || provider.name.toLowerCase().includes(keyword)
+      );
+    });
+  }, [searchKeyword]);
+
+  return (
+    <Flexbox gap={4} padding={'0 12px'}>
+      {searchKeyword && filteredProviders.length === 0 ? (
+        <Flexbox align="center" justify="center" padding={16}>
+          {t('menu.notFound')}
+        </Flexbox>
+      ) : (
+        filteredProviders.map((item) => <ProviderItem {...item} key={item.id} />)
+      )}
+    </Flexbox>
+  );
+});
+
+export default SearchResult;
diff --git a/src/app/(main)/settings/provider/ProviderMenu/index.tsx b/src/app/(main)/settings/provider/ProviderMenu/index.tsx
@@ -1,14 +1,17 @@
 'use client';
 
-import { Icon, SearchBar } from '@lobehub/ui';
-import { Button, Dropdown } from 'antd';
+import { ActionIcon, SearchBar } from '@lobehub/ui';
+import { Typography } from 'antd';
 import { useTheme } from 'antd-style';
-import { ArrowDownAZ, ArrowUpDown, GripVertical, PlusIcon } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import isEqual from 'fast-deep-equal';
+import { PlusIcon } from 'lucide-react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
+import SearchResult from '@/app/(main)/settings/provider/ProviderMenu/SearchResult';
+import { useUserStore } from '@/store/user';
+import { modelProviderSelectors } from '@/store/user/selectors';
 
 import All from './All';
 import ProviderItem from './Item';
@@ -17,18 +20,15 @@ const ProviderMenu = () => {
   const { t } = useTranslation('modelProvider');
   const [searchKeyword, setSearchKeyword] = useState('');
   const theme = useTheme();
-  // 使用 useMemo 优化过滤性能
-  const filteredProviders = useMemo(() => {
-    const keyword = searchKeyword.toLowerCase().trim();
 
-    if (!keyword) return DEFAULT_MODEL_PROVIDER_LIST;
-
-    return DEFAULT_MODEL_PROVIDER_LIST.filter((provider) => {
-      return (
-        provider.id.toLowerCase().includes(keyword) || provider.name.toLowerCase().includes(keyword)
-      );
-    });
-  }, [searchKeyword]);
+  const enabledModelProviderList = useUserStore(
+    modelProviderSelectors.enabledModelProviderList,
+    isEqual,
+  );
+  const disabledModelProviderList = useUserStore(
+    modelProviderSelectors.disabledModelProviderList,
+    isEqual,
+  );
 
   return (
     <Flexbox style={{ minWidth: 280, overflow: 'scroll' }} width={280}>
@@ -46,49 +46,27 @@ const ProviderMenu = () => {
           type={'block'}
           value={searchKeyword}
         />
-        <Dropdown
-          menu={{
-            items: [
-              {
-                icon: <Icon icon={ArrowUpDown} />,
-                key: 'default',
-                label: t('menu.sort.default'),
-              },
-              {
-                icon: <Icon icon={ArrowDownAZ} />,
-                key: 'alphabet',
-                label: t('menu.sort.alphabet'),
-              },
-              {
-                icon: <Icon icon={GripVertical} />,
-                key: 'custom-order',
-                label: t('menu.sort.customOrder'),
-              },
-            ],
-          }}
-        >
-          <Button color={'default'} icon={<Icon icon={ArrowUpDown} />} variant={'filled'} />
-        </Dropdown>
-      </Flexbox>
-      <Flexbox gap={4} padding={'0 12px'}>
-        {/* 当没有搜索关键词时才显示 All 选项 */}
-        {!searchKeyword && <All />}
-        {filteredProviders.map((item) => (
-          <ProviderItem {...item} key={item.id} />
-        ))}
-        {/* 当搜索无结果时显示提示信息 */}
-        {searchKeyword && filteredProviders.length === 0 && (
-          <Flexbox align="center" justify="center" padding={16}>
-            {t('menu.notFound')}
-          </Flexbox>
-        )}
-      </Flexbox>
-      <Flexbox
-        padding={'12px 12px'}
-        style={{ background: theme.colorBgLayout, bottom: 0, position: 'sticky', zIndex: 50 }}
-      >
-        <Button icon={<Icon icon={PlusIcon} />}>自定义服务商</Button>
+        {/*<ActionIcon icon={PlusIcon} title={'添加自定义服务商'} />*/}
       </Flexbox>
+      {!!searchKeyword ? (
+        <SearchResult searchKeyword={searchKeyword} />
+      ) : (
+        <Flexbox gap={4} padding={'0 12px'}>
+          <All />
+          <Typography.Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
+            已启用
+          </Typography.Text>
+          {enabledModelProviderList.map((item) => (
+            <ProviderItem {...item} key={item.id} />
+          ))}
+          <Typography.Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
+            未启用
+          </Typography.Text>
+          {disabledModelProviderList.map((item) => (
+            <ProviderItem {...item} key={item.id} />
+          ))}
+        </Flexbox>
+      )}
     </Flexbox>
   );
 };

diff --git a/src/app/(main)/settings/provider/layout.tsx b/src/app/(main)/settings/provider/layout.tsx
@@ -4,6 +4,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import NProgress from '@/components/NProgress';
 import { serverFeatureFlags } from '@/config/featureFlags';
+import { MAX_WIDTH } from '@/const/layoutTokens';
 
 import ProviderMenu from './ProviderMenu';
 
@@ -16,7 +17,9 @@ const Layout = ({ children }: PropsWithChildren) => {
       <NProgress />
       <Flexbox horizontal width={'100%'}>
         <ProviderMenu />
-        {children}
+        <Flexbox horizontal justify={'center'} paddingBlock={24} width={'100%'}>
+          <Flexbox style={{ maxWidth: MAX_WIDTH, width: '100%' }}>{children}</Flexbox>
+        </Flexbox>
       </Flexbox>
     </>
   );

diff --git a/src/database/schemas/aiInfra.ts b/src/database/schemas/aiInfra.ts
@@ -14,6 +14,7 @@ export const aiProviders = pgTable(
       .references(() => users.id, { onDelete: 'cascade' })
       .notNull(),
 
+    sort: integer('sort'),
     enabled: boolean('enabled'),
     checkModel: text('check_model'),
     logo: text('logo'),
-Original file line number
+Diff line change
@@ Expand Up @@
             <ProviderIcon provider={id} size={24} style={{ borderRadius: 6 }} type={'avatar'} />
             {name}
           </Flexbox>
           {enabled && <Badge status="success" />}
         </Link>
       );
@@ Expand Down @@