perf: ssr

391332c8 · archer · 89e7c1ab · 391332c8 · 391332c8 · 391332c8
Commit 391332c8 authored Jun 13, 2023 by archer
8 changed files
--- a/client/src/components/Radio/index.tsx
+++ b/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',

--- a/client/src/constants/theme.ts
+++ b/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%)'
      },

--- a/client/src/pages/_error.tsx
+++ b/client/src/pages/_error.tsx
-function Error({ errStr }: { errStr: string }) {
+function Error() {
-  return <p>{errStr}</p>;
+  return (
+    <p>
+      部分系统不兼容，导致页面崩溃。如果可以，请联系作者，反馈下具体操作和页面。大部分是 苹果 的
+      safari 浏览器导致，可以尝试更换 chrome 浏览器。
+    </p>
+  );
 }
-Error.getInitialProps = ({ res, err }: { res: any; err: any }) => {
-  console.log(err);
-  return {
-    errStr: `部分系统不兼容，导致页面崩溃。如果可以，请联系作者，反馈下具体操作和页面。大部分是 苹果 的 safari 浏览器导致，可以尝试更换 chrome 浏览器。`
-  };
-};
 export default Error;
--- a/client/src/pages/model/components/ModelList.tsx
+++ b/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';
+const Avatar = dynamic(() => import('@/components/Avatar'), {
-import Tabs from '@/components/Tabs';
+  ssr: true
+});
+const Tabs = dynamic(() => import('@/components/Tabs'), {
+  ssr: true
+});
 const ModelList = ({ modelId }: { modelId: string }) => {
  const [currentTab, setCurrentTab] = useState(MyModelsTypeEnum.my);

--- a/client/src/pages/model/components/detail/components/ModelEditForm.tsx
+++ b/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 {

--- a/client/src/pages/model/components/detail/index.tsx
+++ b/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();

--- a/client/src/pages/model/index.tsx
+++ b/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 }) => {

--- a/client/src/styles/reset.scss
+++ b/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 {