feat:template carousel image

Signed-off-by: jingyang <[email protected]>
labring · Jan 16, 2024 · 097d715 · 097d715
1 parent ae7f63f
commit 097d715
Show file tree

Hide file tree

Showing 12 changed files with 322 additions and 169 deletions.
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'}>
@@ -49,26 +71,48 @@ 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}
+          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>
   );
 }