feat: v4

client/src/components/Icon/icons/save.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688217440856" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2309" xmlns:xlink="http://www.w3.org/1999/xlink" ><path d="M819.823 83.694H206.991c-67.703 0-122.588 54.885-122.588 122.588v612.833c0 67.703 54.885 122.588 122.588 122.588h612.833c67.703 0 122.588-54.885 122.588-122.588V206.282c-0.001-67.703-54.885-122.588-122.589-122.588z m-124.435 63.313v241.142H331.772V147.007h363.616z m185.787 672.274c0.027 33.765-27.323 61.158-61.088 61.185H207.133c-16.389 0-31.864-6.297-43.454-17.887s-18.039-26.91-18.039-43.298v-612.94c0.061-33.923 27.57-61.395 61.493-61.41h61.327v245.294c-0.05 33.771 27.286 61.187 61.057 61.237h367.888c33.853 0 61.299-27.387 61.299-61.237V144.931h61.206c33.872 0.036 61.301 27.524 61.265 61.396V819.281z" fill="" p-id="2310"></path><path d="M574.817 329.936c17.483 0 31.656-14.173 31.656-31.656v-61.292c0-17.483-14.173-31.656-31.656-31.656s-31.656 14.173-31.656 31.656v61.292c0 17.483 14.173 31.656 31.656 31.656z" fill="" p-id="2311"></path></svg>

client/src/components/Icon/index.tsx

@@ -34,7 +34,8 @@ const map = {
   history: require('./icons/history.svg').default,
   kbTest: require('./icons/kbTest.svg').default,
   date: require('./icons/date.svg').default,
-  apikey: require('./icons/apikey.svg').default
+  apikey: require('./icons/apikey.svg').default,
+  save: require('./icons/save.svg').default
 };
 
 export type IconName = keyof typeof map;

client/src/components/Layout/index.tsx

@@ -14,7 +14,8 @@ import { getUnreadCount } from '@/api/user';
 const pcUnShowLayoutRoute: Record<string, boolean> = {
   '/': true,
   '/login': true,
-  '/chat/share': true
+  '/chat/share': true,
+  '/app/edit': true
 };
 const phoneUnShowLayoutRoute: Record<string, boolean> = {
   '/': true,
@@ -60,10 +61,7 @@ const Layout = ({ children }: { children: JSX.Element }) => {
 
   return (
     <>
-      <Box
-        h={'100%'}
-        bgGradient={'linear(to-t,rgba(173, 206, 255, 0.05) 0%, rgba(173, 206, 255, 0.12) 100%)'}
-      >
+      <Box h={'100%'} bg={'#F3F4F5E0'}>
         <Box h={'100%'} display={['none', 'block']}>
           {pcUnShowLayoutRoute[router.pathname] ? (
             <Auth>{children}</Auth>

client/src/components/Layout/navbar.tsx

@@ -29,6 +29,12 @@ const Navbar = ({ unread }: { unread: number }) => {
       {
         label: '应用',
         icon: 'model',
+        link: `/app/list`,
+        activeLink: ['/app/list']
+      },
+      {
+        label: '旧应用',
+        icon: 'model',
         link: `/model?modelId=${lastModelId}`,
         activeLink: ['/model']
       },

client/src/components/Select/index.tsx

@@ -1,5 +1,14 @@
 import React, { useRef } from 'react';
-import { Menu, MenuButton, MenuList, MenuItem, Button, useDisclosure } from '@chakra-ui/react';
+import {
+  Menu,
+  Box,
+  MenuList,
+  MenuItem,
+  MenuButton,
+  Button,
+  useDisclosure,
+  useOutsideClick
+} from '@chakra-ui/react';
 import type { ButtonProps } from '@chakra-ui/react';
 import { ChevronDownIcon } from '@chakra-ui/icons';
 interface Props extends ButtonProps {
@@ -7,13 +16,14 @@ interface Props extends ButtonProps {
   placeholder?: string;
   list: {
     label: string;
-    id: string;
+    value: string;
   }[];
   onchange?: (val: string) => void;
 }
 
 const MySelect = ({ placeholder, value, width = 'auto', list, onchange, ...props }: Props) => {
   const ref = useRef<HTMLDivElement>(null);
+  const SelectRef = useRef(null);
   const menuItemStyles = {
     borderRadius: 'sm',
     py: 2,
@@ -25,9 +35,16 @@ const MySelect = ({ placeholder, value, width = 'auto', list, onchange, ...props
   };
   const { isOpen, onOpen, onClose } = useDisclosure();
 
+  useOutsideClick({
+    ref: SelectRef,
+    handler: () => {
+      onClose();
+    }
+  });
+
   return (
-    <Menu autoSelect={false} onOpen={onOpen} onClose={onClose}>
-      <MenuButton style={{ width: '100%', position: 'relative' }} as={'span'}>
+    <Menu autoSelect={false} isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
+      <Box ref={SelectRef} position={'relative'} onClick={() => (isOpen ? onClose() : onOpen())}>
         <Button
           ref={ref}
           width={width}
@@ -36,6 +53,9 @@ const MySelect = ({ placeholder, value, width = 'auto', list, onchange, ...props
           display={'flex'}
           alignItems={'center'}
           justifyContent={'space-between'}
+          _active={{
+            transform: ''
+          }}
           {...(isOpen
             ? {
                 boxShadow: '0px 0px 4px #A8DBFF',
@@ -44,44 +64,48 @@ const MySelect = ({ placeholder, value, width = 'auto', list, onchange, ...props
             : {})}
           {...props}
         >
-          {list.find((item) => item.id === value)?.label || placeholder}
+          {list.find((item) => item.value === value)?.label || placeholder}
           <ChevronDownIcon />
         </Button>
-      </MenuButton>
-      <MenuList
-        minW={(() => {
-          const w = ref.current?.clientWidth;
-          if (w) {
-            return `${w}px !important`;
+
+        <MenuList
+          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);'
           }
-          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);'}
-        zIndex={99}
-      >
-        {list.map((item) => (
-          <MenuItem
-            key={item.id}
-            {...menuItemStyles}
-            {...(value === item.id
-              ? {
-                  color: 'myBlue.600'
+          zIndex={99}
+          transform={'translateY(35px) !important'}
+        >
+          {list.map((item) => (
+            <MenuItem
+              key={item.value}
+              {...menuItemStyles}
+              {...(value === item.value
+                ? {
+                    color: 'myBlue.600'
+                  }
+                : {})}
+              onClick={() => {
+                if (onchange && value !== item.value) {
+                  onchange(item.value);
                 }
-              : {})}
-            onClick={() => {
-              if (onchange && value !== item.id) {
-                onchange(item.id);
-              }
-            }}
-          >
-            {item.label}
-          </MenuItem>
-        ))}
-      </MenuList>
+              }}
+            >
+              {item.label}
+            </MenuItem>
+          ))}
+        </MenuList>
+      </Box>
     </Menu>
   );
 };

client/src/components/Slider/index.tsx

@@ -10,8 +10,8 @@ import {
 
 const MySlider = ({
   markList = [],
-  setVal,
-  activeVal,
+  onChange,
+  value,
   max = 100,
   min = 0,
   step = 1,
@@ -21,8 +21,8 @@ const MySlider = ({
     label: string | number;
     value: number;
   }[];
-  activeVal: number;
-  setVal: (index: number) => void;
+  value: number;
+  onChange?: (index: number) => void;
   max?: number;
   min?: number;
   step?: number;
@@ -40,10 +40,6 @@ const MySlider = ({
     top: 0,
     transform: 'translateY(-3px)'
   };
-  const value = useMemo(() => {
-    const index = markList.findIndex((item) => item.value === activeVal);
-    return index > -1 ? index : 0;
-  }, [activeVal, markList]);
 
   return (
     <Slider
@@ -51,9 +47,9 @@ const MySlider = ({
       min={min}
       step={step}
       size={'lg'}
-      value={activeVal}
+      value={value}
       width={width}
-      onChange={setVal}
+      onChange={onChange}
     >
       {markList?.map((item, i) => (
         <SliderMark
@@ -71,7 +67,7 @@ const MySlider = ({
         </SliderMark>
       ))}
       <SliderMark
-        value={activeVal}
+        value={value}
         textAlign="center"
         bg="myBlue.600"
         color="white"
@@ -84,7 +80,7 @@ const MySlider = ({
         transform={'translate(-50%, -170%)'}
         boxSizing={'border-box'}
       >
-        {activeVal}
+        {value}
       </SliderMark>
       <SliderTrack
         bg={'#EAEDF3'}