labring · c121914yu · Jan 17, 2024 · Jan 16, 2024 · Jan 16, 2024
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/providers/applaunchpad/src/services/monitorFetch.ts b/frontend/providers/applaunchpad/src/services/monitorFetch.ts
@@ -2,16 +2,26 @@ import { AxiosRequestConfig } from 'axios';
 
 export const monitorFetch = async (props: AxiosRequestConfig, kubeconfig: string) => {
   const { url, params } = props;
-  const queryString = new URLSearchParams(params).toString();
+  const queryString = typeof params === 'object' ? new URLSearchParams(params).toString() : params;
   const requestOptions = {
     method: 'GET',
     headers: {
       Authorization: encodeURIComponent(kubeconfig)
     }
   };
   const doMain = process.env.MONITOR_URL || 'http://monitor-system.cloud.sealos.run';
-  const response = await fetch(`${doMain}${url}?${queryString}`, requestOptions).then((res) =>
-    res.json()
-  );
-  return response;
+
+  try {
+    const response = await fetch(`${doMain}${url}?${queryString}`, requestOptions);
+
+    if (!response.ok) {
+      throw new Error(`Error monitorFetch ${response.status}`);
+    }
+
+    const jsonResponse = await response.json();
+    return jsonResponse;
+  } catch (error) {
+    console.error('Error monitorFetch:', error);
+    throw error;
+  }
 };
diff --git a/frontend/providers/template/arrow-right.svg b/frontend/providers/template/arrow-right.svg
diff --git a/frontend/providers/template/package.json b/frontend/providers/template/package.json
@@ -59,6 +59,7 @@
     "remark-unwrap-images": "^3.0.1",
     "sass": "^1.68.0",
     "sealos-desktop-sdk": "workspace:^",
+    "swiper": "^11.0.5",
     "typescript": "5.2.2",
     "zustand": "^4.4.1"
   },

diff --git a/frontend/providers/template/src/components/Banner/index.tsx b/frontend/providers/template/src/components/Banner/index.tsx
@@ -0,0 +1,183 @@
+import { Box, Flex, Image, Text } from '@chakra-ui/react';
+import { useRef } from 'react';
+import { Autoplay } from 'swiper/modules';
+import { Swiper, SwiperRef, SwiperSlide, useSwiper } from 'swiper/react';
+import 'swiper/css';
+import { ArrowRightIcon } from '../icons/ArrowRight';
+
+export const SlideData = [
+  {
+    image:
+      'https://images.unsplash.com/photo-1546768292-fb12f6c92568?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+    bg: '#824DFF',
+    title: '1111',
+    desc: 'Build the tools you can’t buy off the shelf',
+    borderRadius: '8px',
+    icon: 'https://jsd.onmicrosoft.cn/gh/appsmithorg/appsmith@release/static/logo.png'
+  },
+  {
+    image:
+      'https://images.unsplash.com/photo-1501446529957-6226bd447c46?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1489&q=80',
+    bg: '#3770FE',
+    title: '222',
+    desc: 'Make AI more knowledgeable about you',
+    borderRadius: '8px',
+    icon: 'https://jsd.onmicrosoft.cn/gh/appsmithorg/appsmith@release/static/logo.png'
+  },
+  {
+    image:
+      'https://images.unsplash.com/photo-1483729558449-99ef09a8c325?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80',
+    bg: '#824DFF',
+    title: '333',
+    desc: 'Build the tools you can’t buy off the shelf',
+    borderRadius: '8px',
+    icon: 'https://jsd.onmicrosoft.cn/gh/appsmithorg/appsmith@release/static/logo.png'
+  },
+  {
+    image:
+      'https://images.unsplash.com/photo-1475189778702-5ec9941484ae?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1351&q=80',
+    bg: '#824DFF',
+    title: '4444',
+    desc: 'Build the tools you can’t buy off the shelf',
+    borderRadius: '8px',
+    icon: 'https://jsd.onmicrosoft.cn/gh/appsmithorg/appsmith@release/static/logo.png'
+  }
+];
+
+export default function Banner() {
+  const swiperRef = useRef<SwiperRef>(null);
+  const swiper = useSwiper();
+
+  const handlePrev = () => {
+    if (swiperRef.current) {
+      swiperRef.current?.swiper.slidePrev();
+    }
+  };
+
+  const handleNext = () => {
+    if (swiperRef.current) {
+      swiperRef.current?.swiper.slideNext();
+    }
+  };
+
+  return (
+    <Box
+      minW={'765px'}
+      h="213px"
+      mb="32px"
+      position={'relative'}
+      _hover={{
+        '.my-prev-button, .my-next-button': {
+          opacity: 1
+        }
+      }}>
+      <Swiper
+        ref={swiperRef}
+        slidesPerView={1}
+        spaceBetween={30}
+        loop={true}
+        pagination={{
+          clickable: true
+        }}
+        modules={[Autoplay]}
+        autoplay={{
+          delay: 5000,
+          disableOnInteraction: false
+        }}>
+        {SlideData.map((item, index) => (
+          <SwiperSlide key={index}>
+            <Flex w="full" h="213px" gap={'16px'} overflow={'hidden'}>
+              <Flex
+                flex={1}
+                bg={item.bg}
+                borderRadius={item.borderRadius}
+                p="16px 24px"
+                justifyContent={'space-between'}>
+                <Flex flexDirection={'column'} justifyContent={'space-between'}>
+                  <Flex gap="12px" alignItems={'center'} mt="26px">
+                    <Box
+                      p={'6px'}
+                      w={'48px'}
+                      h={'48px'}
+                      boxShadow={'0px 1px 2px 0.5px rgba(84, 96, 107, 0.20)'}
+                      borderRadius={'4px'}
+                      backgroundColor={'#fff'}
+                      border={' 1px solid rgba(255, 255, 255, 0.50)'}>
+                      <Image src={item.icon} alt="" width={'36px'} height={'36px'} />
+                    </Box>
+                    <Text fontSize={'20px'} color={'#FFF'} fontWeight={600}>
+                      {item.title}
+                    </Text>
+                  </Flex>
+                  <Text mb="26px" w="215px" fontSize={'16px'} color={'#FFF'} fontWeight={600}>
+                    {item.desc}
+                  </Text>
+                </Flex>
+                <Image maxW={'200px'} height={'100%'} src={item.image} alt={`slide-${index}`} />
+              </Flex>
+              <Flex
+                flex={1}
+                bg={SlideData[(index + 1) % SlideData.length].bg}
+                borderRadius={SlideData[(index + 1) % SlideData.length].borderRadius}
+                p="16px 24px"
+                justifyContent={'space-between'}>
+                <Flex flexDirection={'column'} justifyContent={'space-between'}>
+                  <Flex gap="12px" alignItems={'center'} mt="26px">
+                    <Box
+                      p={'6px'}
+                      w={'48px'}
+                      h={'48px'}
+                      boxShadow={'0px 1px 2px 0.5px rgba(84, 96, 107, 0.20)'}
+                      borderRadius={'4px'}
+                      backgroundColor={'#fff'}
+                      border={' 1px solid rgba(255, 255, 255, 0.50)'}>
+                      <Image
+                        src={SlideData[(index + 1) % SlideData.length].icon}
+                        alt=""
+                        width={'36px'}
+                        height={'36px'}
+                      />
+                    </Box>
+                    <Text fontSize={'20px'} color={'#FFF'} fontWeight={600}>
+                      {SlideData[(index + 1) % SlideData.length].title}
+                    </Text>
+                  </Flex>
+                  <Text mb="26px" w="215px" fontSize={'16px'} color={'#FFF'} fontWeight={600}>
+                    {SlideData[(index + 1) % SlideData.length].desc}
+                  </Text>
+                </Flex>
+                <Image maxW={'200px'} height={'100%'} src={item.image} alt={`slide-${index}`} />
+              </Flex>
+            </Flex>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+      <Box
+        transition="opacity 0.3s"
+        opacity={0}
+        cursor={'pointer'}
+        className="my-prev-button"
+        onClick={handlePrev}
+        position={'absolute'}
+        zIndex={10}
+        top="50%"
+        left="-30px"
+        transform="translateY(-50%) rotate(180deg)">
+        <ArrowRightIcon />
+      </Box>
+      <Box
+        transition="opacity 0.3s"
+        opacity={0}
+        cursor={'pointer'}
+        className="my-next-button"
+        onClick={handleNext}
+        position={'absolute'}
+        zIndex={10}
+        top="50%"
+        right="-30px"
+        transform="translateY(-50%)">
+        <ArrowRightIcon />
+      </Box>
+    </Box>
+  );
+}
diff --git a/frontend/providers/template/src/components/icons/ArrowRight.tsx b/frontend/providers/template/src/components/icons/ArrowRight.tsx
@@ -0,0 +1,16 @@
+import { Icon, IconProps } from '@chakra-ui/react';
+
+export const ArrowRightIcon = (props: IconProps) => (
+  <Icon
+    width="21px"
+    height="67px"
+    viewBox="0 0 21 67"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
+    <path
+      d="M13.7104 32.9874L5.27107 8.60709C5.08599 8.07239 5.3694 7.48889 5.90411 7.3038C6.43881 7.11871 7.02232 7.40213 7.2074 7.93683L15.7578 32.6381C15.8203 32.8188 15.8294 33.005 15.7934 33.1796C15.7846 33.2311 15.7718 33.2827 15.7548 33.3339L7.18199 59.0522C7.00306 59.589 6.42285 59.8791 5.88606 59.7002C5.34926 59.5213 5.05916 58.9411 5.23809 58.4043L13.7104 32.9874Z"
+      fill="#8A95A7"
+    />
+  </Icon>
+);
diff --git a/frontend/providers/template/src/components/icons/index.ts b/frontend/providers/template/src/components/icons/index.ts
@@ -3,3 +3,4 @@ export * from './Share';
 export * from './HomePage';
 export * from './HtmlIcon';
 export * from './MdIcon';
+export * from './ArrowRight';
diff --git a/frontend/providers/template/src/components/layout/appmenu.tsx b/frontend/providers/template/src/components/layout/appmenu.tsx
@@ -1,16 +1,38 @@
-import { Box, Flex, Input, InputGroup, InputLeftElement, Text } from '@chakra-ui/react';
+import { useCachedStore } from '@/store/cached';
+import { useSearchStore } from '@/store/search';
+import { getLangStore, setLangStore } from '@/utils/cookieUtils';
+import { Box, Flex, FlexProps, Input, InputGroup, InputLeftElement, Text } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
-import SideBar from './sidebar';
 import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 import MyIcon from '../Icon';
-import { useGlobalStore } from '@/store/global';
-import { useMemo } from 'react';
-import { useSearchStore } from '@/store/search';
+import SideBar from './sidebar';
 
 export default function AppMenu({ isMobile }: { isMobile: boolean }) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const router = useRouter();
   const { searchValue, setSearchValue } = useSearchStore();
+  const { insideCloud, setInsideCloud } = useCachedStore();
+
+  const changeI18n = async (newLang: string) => {
+    const lastLang = getLangStore();
+    if (lastLang !== newLang && i18n?.changeLanguage) {
+      i18n.changeLanguage(newLang);
+      setLangStore(newLang);
+    }
+  };
+
+  const baseStyle: FlexProps = {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    bg: 'rgba(150, 153, 180, 0.15)',
+    userSelect: 'none'
+  };
+
+  useEffect(() => {
+    setInsideCloud(!(window.top === window));
+  }, [setInsideCloud]);
 
   return (
     <Box py="28px" px="16px" position={'relative'}>
@@ -26,8 +48,7 @@ export default function AppMenu({ isMobile }: { isMobile: boolean }) {
                 width="16"
                 height="17"
                 viewBox="0 0 16 17"
-                fill="none"
-              >
+                fill="none">
                 <path
                   d="M14.4733 14.2786L12 11.8252C12.9601 10.6282 13.425 9.10876 13.2992 7.57942C13.1734 6.05009 12.4664 4.62708 11.3237 3.60299C10.1809 2.57889 8.6892 2.03156 7.15528 2.07354C5.62136 2.11551 4.16181 2.7436 3.07676 3.82865C1.99171 4.9137 1.36362 6.37325 1.32164 7.90717C1.27967 9.44109 1.827 10.9328 2.85109 12.0756C3.87519 13.2183 5.2982 13.9253 6.82753 14.0511C8.35686 14.1769 9.87627 13.712 11.0733 12.7519L13.5267 15.2052C13.5886 15.2677 13.6624 15.3173 13.7436 15.3512C13.8249 15.385 13.912 15.4024 14 15.4024C14.088 15.4024 14.1751 15.385 14.2564 15.3512C14.3376 15.3173 14.4114 15.2677 14.4733 15.2052C14.5935 15.0809 14.6607 14.9148 14.6607 14.7419C14.6607 14.569 14.5935 14.4029 14.4733 14.2786ZM7.33333 12.7519C6.41035 12.7519 5.5081 12.4782 4.74067 11.9654C3.97324 11.4526 3.3751 10.7238 3.02189 9.87108C2.66868 9.01836 2.57627 8.08005 2.75633 7.1748C2.9364 6.26956 3.38085 5.43804 4.0335 4.78539C4.68614 4.13275 5.51766 3.68829 6.42291 3.50822C7.32815 3.32816 8.26646 3.42058 9.11919 3.77378C9.97191 4.12699 10.7007 4.72513 11.2135 5.49256C11.7263 6.25999 12 7.16224 12 8.08522C12 9.3229 11.5083 10.5099 10.6332 11.3851C9.75799 12.2602 8.57101 12.7519 7.33333 12.7519Z"
                   fill="#5A646E"
@@ -50,27 +71,49 @@ export default function AppMenu({ isMobile }: { isMobile: boolean }) {
           </InputGroup>
         </>
       )}
-
       <SideBar isMobile={isMobile} />
-
-      <Flex
-        justifyContent={'center'}
-        alignItems={'center'}
-        p="4px 12px"
-        position={'absolute'}
-        backgroundColor={'rgba(150, 153, 180, 0.15)'}
-        borderRadius={'40px'}
-        bottom={'28px'}
-        userSelect={'none'}
-        onClick={() => router.push('/develop')}
-      >
-        <MyIcon name="tool" fill={'transparent'} />
-        {!isMobile && (
+      {isMobile ? (
+        <Flex
+          {...baseStyle}
+          w="28px"
+          h="28px"
+          borderRadius={'50%'}
+          bottom={'28px'}
+          right={isMobile ? '24px' : '16px'}
+          onClick={() => router.push('/develop')}>
+          <MyIcon name="tool" fill={'transparent'} />
+        </Flex>
+      ) : (
+        <Flex
+          {...baseStyle}
+          p="4px 12px"
+          borderRadius={'40px'}
+          bottom={'28px'}
+          onClick={() => router.push('/develop')}>
+          <MyIcon name="tool" fill={'transparent'} />
           <Text ml="8px" color={'#485058'} fontWeight={500} cursor={'pointer'} fontSize={'12px'}>
             {t('develop.Debugging Template')}
           </Text>
-        )}
-      </Flex>
+        </Flex>
+      )}
+      {!insideCloud && (
+        <Flex
+          {...baseStyle}
+          color={'#485058'}
+          w="28px"
+          h="28px"
+          borderRadius={'50%'}
+          bottom={isMobile ? '66px' : '28px'}
+          right={isMobile ? '24px' : '16px'}
+          fontSize={'12px'}
+          fontWeight={500}
+          cursor={'pointer'}
+          onClick={() => {
+            changeI18n(i18n?.language === 'en' ? 'zh' : 'en');
+          }}>
+          {i18n?.language === 'en' ? 'En' : '中'}
+        </Flex>
+      )}
     </Box>
   );
 }