perf: ssr

client/src/components/Radio/index.tsx

@@ -25,6 +25,7 @@ const Radio = ({ list, value, onChange, ...props }: Props) => {
             mr: 1,
             borderRadius: '16px',
             transition: '0.2s',
+            boxSizing: 'border-box',
             ...(value === item.value
               ? {
                   border: '5px solid',

client/src/constants/theme.ts

@@ -11,8 +11,6 @@ const { definePartsStyle: switchPart, defineMultiStyleConfig: switchMultiStyle }
   createMultiStyleConfigHelpers(switchAnatomy.keys);
 const { definePartsStyle: selectPart, defineMultiStyleConfig: selectMultiStyle } =
   createMultiStyleConfigHelpers(selectAnatomy.keys);
-const { definePartsStyle: checkboxPart, defineMultiStyleConfig: checkboxMultiStyle } =
-  createMultiStyleConfigHelpers(checkboxAnatomy.keys);
 
 // modal 弹窗
 const ModalTheme = defineMultiStyleConfig({
@@ -69,6 +67,7 @@ const Button = defineStyleConfig({
       backgroundImage:
         'linear-gradient(to bottom right, #2152d9 0%,#3370ff 40%, #4e83fd 100%) !important',
       color: 'white',
+      border: 'none',
       _hover: {
         filter: 'brightness(115%)'
       },

client/src/pages/_error.tsx

@@ -1,12 +1,10 @@
-function Error({ errStr }: { errStr: string }) {
-  return <p>{errStr}</p>;
+function Error() {
+  return (
+    <p>
+      部分系统不兼容，导致页面崩溃。如果可以，请联系作者，反馈下具体操作和页面。大部分是 苹果 的
+      safari 浏览器导致，可以尝试更换 chrome 浏览器。
+    </p>
+  );
 }
 
-Error.getInitialProps = ({ res, err }: { res: any; err: any }) => {
-  console.log(err);
-  return {
-    errStr: `部分系统不兼容，导致页面崩溃。如果可以，请联系作者，反馈下具体操作和页面。大部分是 苹果 的 safari 浏览器导致，可以尝试更换 chrome 浏览器。`
-  };
-};
-
 export default Error;

client/src/pages/model/components/ModelList.tsx

@@ -9,9 +9,14 @@ import { useToast } from '@/hooks/useToast';
 import { useQuery } from '@tanstack/react-query';
 import { useUserStore } from '@/store/user';
 import { MyModelsTypeEnum } from '@/constants/user';
+import dynamic from 'next/dynamic';
 
-import Avatar from '@/components/Avatar';
-import Tabs from '@/components/Tabs';
+const Avatar = dynamic(() => import('@/components/Avatar'), {
+  ssr: true
+});
+const Tabs = dynamic(() => import('@/components/Tabs'), {
+  ssr: true
+});
 
 const ModelList = ({ modelId }: { modelId: string }) => {
   const [currentTab, setCurrentTab] = useState(MyModelsTypeEnum.my);

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

@@ -47,10 +47,10 @@ import { defaultShareChat } from '@/constants/model';
 import type { ShareChatEditType } from '@/types/model';
 import type { ModelSchema } from '@/types/mongoSchema';
 import { formatTimeToChatTime, useCopyData, getErrText } from '@/utils/tools';
-import MyIcon from '@/components/Icon';
 import { useGlobalStore } from '@/store/global';
 import { useUserStore } from '@/store/user';
 import Avatar from '@/components/Avatar';
+import MyIcon from '@/components/Icon';
 
 const ModelEditForm = ({
   formHooks,
@@ -174,32 +174,6 @@ ${e.password ? `密码为: ${e.password}` : ''}`;
 
   // init kb select list
   const { data: kbList = [] } = useQuery(['loadKbList'], () => loadKbList());
-  const RenderSelectedKbList = useCallback(() => {
-    const kbs = getValues('chat.relatedKbs')?.map((id) => kbList.find((kb) => kb._id === id)) || [];
-
-    return (
-      <>
-        {kbs.map((item) =>
-          item ? (
-            <Card
-              key={item._id}
-              p={3}
-              mt={3}
-              cursor={'pointer'}
-              onClick={() => router.push(`/kb?kbId=${item._id}`)}
-            >
-              <Flex alignItems={'center'}>
-                <Avatar src={item.avatar} w={'20px'} h={'20px'}></Avatar>
-                <Box ml={3} fontWeight={'bold'}>
-                  {item.name}
-                </Box>
-              </Flex>
-            </Card>
-          ) : null
-        )}
-      </>
-    );
-  }, [getValues, kbList, router]);
 
   return (
     <>
@@ -353,7 +327,6 @@ ${e.password ? `密码为: ${e.password}` : ''}`;
               </Select>
             </Flex>
           )}
-
           <Box mt={4}>
             <Box mb={1}>系统提示词</Box>
             <Textarea
@@ -408,7 +381,32 @@ ${e.password ? `密码为: ${e.password}` : ''}`;
                 选择
               </Button>
             </Flex>
-            <RenderSelectedKbList />
+            {(() => {
+              const kbs =
+                getValues('chat.relatedKbs')?.map((id) => kbList.find((kb) => kb._id === id)) || [];
+              return (
+                <>
+                  {kbs.map((item) =>
+                    item ? (
+                      <Card
+                        key={item._id}
+                        p={3}
+                        mt={3}
+                        cursor={'pointer'}
+                        onClick={() => router.push(`/kb?kbId=${item._id}`)}
+                      >
+                        <Flex alignItems={'center'}>
+                          <Avatar src={item.avatar} w={'20px'} h={'20px'}></Avatar>
+                          <Box ml={3} fontWeight={'bold'}>
+                            {item.name}
+                          </Box>
+                        </Flex>
+                      </Card>
+                    ) : null
+                  )}
+                </>
+              );
+            })()}
           </Card>
         </>
       )}
@@ -586,7 +584,6 @@ ${e.password ? `密码为: ${e.password}` : ''}`;
                   isChecked={getValues('chat.relatedKbs')?.includes(item._id)}
                   onChange={(e) => {
                     const ids = getValues('chat.relatedKbs');
-                    // toggle to true
                     if (e.target.checked) {
                       setValue('chat.relatedKbs', ids.concat(item._id));
                     } else {

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

@@ -8,7 +8,13 @@ import { useForm } from 'react-hook-form';
 import { useQuery } from '@tanstack/react-query';
 import { useUserStore } from '@/store/user';
 import { useLoading } from '@/hooks/useLoading';
-import ModelEditForm from './components/ModelEditForm';
+import Loading from '@/components/Loading';
+import dynamic from 'next/dynamic';
+
+const ModelEditForm = dynamic(() => import('./components/ModelEditForm'), {
+  loading: () => <Loading fixed={false} />,
+  ssr: false
+});
 
 const ModelDetail = ({ modelId, isPc }: { modelId: string; isPc: boolean }) => {
   const { toast } = useToast();

client/src/pages/model/index.tsx

@@ -10,7 +10,7 @@ import SideBar from '@/components/SideBar';
 
 const ModelDetail = dynamic(() => import('./components/detail/index'), {
   loading: () => <Loading fixed={false} />,
-  ssr: false
+  ssr: true
 });
 
 const Model = ({ modelId }: { modelId: string }) => {

client/src/styles/reset.scss

@@ -65,13 +65,14 @@ textarea::placeholder {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-focus-ring-color: rgba(0, 0, 0, 0);
   outline: none;
+  box-sizing: border-box;
 }
 
 #__next {
   height: 100%;
 }
 #nprogress .bar {
-  background: '#85b1ff' !important; //自定义颜色
+  background: '#1237b3' !important; //自定义颜色
 }
 
 .textEllipsis {