fix: select ui;perf: max link and compose

client/.env.template

@@ -1,7 +1,7 @@
 # 运行端口，如果不是 3000 口运行，需要改成其他的。注意：不是改了这个变量就会变成其他端口，而是因为改成其他端口，才用这个变量。
 PORT=3000
 # database max link
-DB_MAX_LINK=15
+DB_MAX_LINK=5
 # 代理
 # AXIOS_PROXY_HOST=127.0.0.1
 # AXIOS_PROXY_PORT=7890

client/src/components/Select/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { Menu, MenuButton, MenuList, MenuItem, Button, useDisclosure } from '@chakra-ui/react';
 import type { ButtonProps } from '@chakra-ui/react';
 import { ChevronDownIcon } from '@chakra-ui/icons';
@@ -13,6 +13,7 @@ interface Props extends ButtonProps {
 }
 
 const MySelect = ({ placeholder, value, width = 'auto', list, onchange, ...props }: Props) => {
+  const ref = useRef<HTMLDivElement>(null);
   const menuItemStyles = {
     borderRadius: 'sm',
     py: 2,
@@ -26,8 +27,9 @@ const MySelect = ({ placeholder, value, width = 'auto', list, onchange, ...props
 
   return (
     <Menu autoSelect={false} onOpen={onOpen} onClose={onClose}>
-      <MenuButton style={{ width: '100%' }} as={'span'}>
+      <MenuButton style={{ width: '100%', position: 'relative' }} as={'span'}>
         <Button
+          ref={ref}
           width={width}
           px={3}
           variant={'base'}
@@ -47,9 +49,15 @@ const MySelect = ({ placeholder, value, width = 'auto', list, onchange, ...props
         </Button>
       </MenuButton>
       <MenuList
-        minW={
-          Array.isArray(width) ? width.map((item) => `${item} !important`) : `${width} !important`
-        }
+        minW={(() => {
+          const w = ref.current?.clientWidth;
+          if (w) {
+            return `${w}px !important`;
+          }
+          return Array.isArray(width)
+            ? width.map((item) => `${item} !important`)
+            : `${width} !important`;
+        })()}
         p={'6px'}
         border={'1px solid #fff'}
         boxShadow={'0px 2px 4px rgba(161, 167, 179, 0.25), 0px 0px 1px rgba(121, 141, 159, 0.25);'}
@@ -78,4 +86,4 @@ const MySelect = ({ placeholder, value, width = 'auto', list, onchange, ...props
   );
 };
 
-export default MySelect;
+export default React.memo(MySelect);

client/src/pages/model/components/detail/components/Settings.tsx

@@ -75,7 +75,7 @@ const Settings = ({ modelId }: { modelId: string }) => {
     }
 
     return max;
-  }, [getValues, setValue]);
+  }, [getValues, setValue, refresh]);
 
   // 提交保存模型修改
   const saveSubmitSuccess = useCallback(
@@ -240,12 +240,12 @@ const Settings = ({ modelId }: { modelId: string }) => {
           对话模型
         </Box>
         <MySelect
-          width={['100%', '280px']}
+          width={['90%', '280px']}
           value={getValues('chat.chatModel')}
           list={chatModelList.map((item) => ({
             id: item.chatModel,
             label: `${item.name} (${formatPrice(
-              ChatModelMap[getValues('chat.chatModel')]?.price,
+              ChatModelMap[item.chatModel]?.price,
               1000
             )} 元/1k tokens)`
           }))}
@@ -265,7 +265,7 @@ const Settings = ({ modelId }: { modelId: string }) => {
               { label: '严谨', value: 0 },
               { label: '发散', value: 10 }
             ]}
-            width={['100%', '260px']}
+            width={['90%', '260px']}
             min={0}
             max={10}
             activeVal={getValues('chat.temperature')}
@@ -286,7 +286,7 @@ const Settings = ({ modelId }: { modelId: string }) => {
               { label: '100', value: 100 },
               { label: `${tokenLimit}`, value: tokenLimit }
             ]}
-            width={['100%', '260px']}
+            width={['90%', '260px']}
             min={100}
             max={tokenLimit}
             step={50}

client/src/service/mongo.ts

@@ -36,9 +36,9 @@ export async function connectToDatabase(): Promise<void> {
     global.mongodb = await mongoose.connect(process.env.MONGODB_URI as string, {
       bufferCommands: true,
       dbName: process.env.MONGODB_NAME,
-      maxConnecting: Number(process.env.DB_MAX_LINK || 10),
-      maxPoolSize: Number(process.env.DB_MAX_LINK || 10),
-      minPoolSize: 5
+      maxConnecting: Number(process.env.DB_MAX_LINK || 5),
+      maxPoolSize: Number(process.env.DB_MAX_LINK || 5),
+      minPoolSize: 2
     });
     console.log('mongo connected');
   } catch (error) {

client/src/service/pg.ts

@@ -12,7 +12,7 @@ export const connectPg = async () => {
     user: process.env.PG_USER,
     password: process.env.PG_PASSWORD,
     database: process.env.PG_DB_NAME,
-    max: Number(process.env.DB_MAX_LINK || 10),
+    max: Number(process.env.DB_MAX_LINK || 5),
     idleTimeoutMillis: 30000,
     connectionTimeoutMillis: 5000
   });