fix user avator && url (#4218)

* fix user avator && url Signed-off-by: jingyang <[email protected]> * modify purchase page Signed-off-by: jingyang <[email protected]> * fix height Signed-off-by: jingyang <[email protected]> * fix docs Signed-off-by: jingyang <[email protected]> * fix params * copy code * license time --------- Signed-off-by: jingyang <[email protected]>
labring · Nov 1, 2023 · b2fb15a · b2fb15a
1 parent ec16d34
commit b2fb15a
Show file tree

Hide file tree

Showing 16 changed files with 129 additions and 86 deletions.
diff --git a/docs/website/src/pages/pricing/plan/index.tsx b/docs/website/src/pages/pricing/plan/index.tsx
@@ -127,14 +127,14 @@ export default function Plan() {
           {select === 'month' && (
             <div className="my-5 text-lg lg:text-xs font-medium text-white/80">
               如集群中运行一个容器，配额是 CPU 1核 x 内存1G x 存储卷 100G x 网络 10G,
-              则一年消耗的费用为 1.61 + 0.80 + 0 + 0 = 2.41元
+              则一月消耗的费用为 1.61 + 0.80 + 0 + 0 = 2.41元
             </div>
           )}
 
           {select === 'day' && (
             <div className="my-5 text-lg lg:text-xs font-medium text-white/80">
               如集群中运行一个容器，配额是 CPU 1核 x 内存1G x 存储卷 100G x 网络 10G,
-              则一年消耗的费用为 0.05 + 0.03 + 0 + 0 = 0.08元
+              则一天消耗的费用为 0.05 + 0.03 + 0 + 0 = 0.08元
             </div>
           )}
           <div

diff --git a/docs/website/src/pages/pricing/product/index.tsx b/docs/website/src/pages/pricing/product/index.tsx
@@ -27,7 +27,7 @@ export default function Product() {
   ];
 
   return (
-    <main className="self-center flex w-full max-w-[1280px] flex-col px-10">
+    <main className="self-center flex w-full max-w-[1280px] flex-col px-10 z-10">
       <div className="mt-24 text-white text-6xl font-semibold leading-[140%] self-center max-md:text-4xl lg:text-3xl">
         Sealos 私有云
       </div>

diff --git a/service/license/public/images/avatar.svg b/service/license/public/images/avatar.svg
diff --git a/service/license/src/components/Account/index.tsx b/service/license/src/components/Account/index.tsx
@@ -29,23 +29,15 @@ export default function Account() {
       position={'relative'}
       onClick={accountDisclosure.onOpen}
     >
-      {userInfo?.user?.avatar ? (
-        <Image
-          width={'36px'}
-          height={'36px'}
-          borderRadius="full"
-          src={userInfo?.user?.avatar || ''}
-          alt="user avator"
-        />
-      ) : (
-        <Avatar
-          name={userInfo?.user?.name || ''}
-          width={'36px'}
-          height={'36px'}
-          borderRadius="full"
-          bg="#36ADEF"
-        ></Avatar>
-      )}
+      <Image
+        opacity={'0.9'}
+        width={'36px'}
+        height={'36px'}
+        borderRadius="full"
+        src={userInfo?.user?.avatar || ''}
+        fallbackSrc={'/images/avatar.svg'}
+        alt="user avator"
+      />
 
       {accountDisclosure.isOpen && (
         <>
@@ -75,7 +67,7 @@ export default function Account() {
                 height={'36px'}
                 borderRadius="full"
                 src={userInfo?.user?.avatar || ''}
-                fallbackSrc="/images/sealos.svg"
+                fallbackSrc={'/images/avatar.svg'}
                 alt="user avator"
               />
               <Text ml="12px">{userInfo?.user?.name}</Text>

diff --git a/service/license/src/components/CodeBlock/index.tsx b/service/license/src/components/CodeBlock/index.tsx
@@ -1,17 +1,24 @@
 import { useCopyData } from '@/hooks/useCopyData';
-import { Center, Flex, FlexProps, Text } from '@chakra-ui/react';
+import { Box, Center, Flex, FlexProps, Text } from '@chakra-ui/react';
 import { CSSProperties } from 'react';
 import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { CopyIcon } from '@/components/Icon';
 
 type CodeBlockProps = {
   code: string;
+  copyValue?: string;
   language: string;
   customStyle?: CSSProperties | undefined;
   flexStyle?: FlexProps;
 };
 
-export default function CodeBlock({ code, language, customStyle, flexStyle }: CodeBlockProps) {
+export default function CodeBlock({
+  code,
+  language,
+  customStyle,
+  flexStyle,
+  copyValue
+}: CodeBlockProps) {
   const { copyData } = useCopyData();
 
   return (
@@ -25,14 +32,14 @@ export default function CodeBlock({ code, language, customStyle, flexStyle }: Co
         px="20px"
         fontSize={'14px'}
       >
-        <Text mr="10px" color={'#c99bdf'}>
+        <Box mr="10px" color={'#c99bdf'} alignSelf={'self-start'}>
           $
-        </Text>
+        </Box>
         <SyntaxHighlighter language={language} customStyle={customStyle}>
           {code}
         </SyntaxHighlighter>
       </Flex>
-      <Center mx="20px" onClick={() => copyData(code)}>
+      <Center mx="20px" onClick={() => copyData(copyValue ? copyValue : code)}>
         <CopyIcon _hover={{ fill: '#219BF4' }} />
       </Center>
     </Flex>

diff --git a/service/license/src/components/Signin/index.tsx b/service/license/src/components/Signin/index.tsx
@@ -55,14 +55,13 @@ export default function SigninComponent() {
     isLoading: passwordLoading
   } = usePassword({ showError });
   const isLoading = useMemo(() => passwordLoading || smsLoading, [passwordLoading, smsLoading]);
-  const isSignIn = useSessionStore((s) => s.isUserLogin);
-  const router = useRouter();
-
-  useEffect(() => {
-    if (isSignIn()) {
-      router.push('/pricing');
-    }
-  }, [isSignIn, router]);
+  // const isSignIn = useSessionStore((s) => s.isUserLogin);
+  // const router = useRouter();
+  // useEffect(() => {
+  //   if (isSignIn()) {
+  //     router.push('/pricing');
+  //   }
+  // }, [isSignIn, router]);
 
   const { AuthList } = useAuthList();
 

diff --git a/service/license/src/components/account/index.tsx b/service/license/src/components/account/index.tsx
@@ -29,23 +29,15 @@ export default function Account() {
       position={'relative'}
       onClick={accountDisclosure.onOpen}
     >
-      {userInfo?.user?.avatar ? (
-        <Image
-          width={'36px'}
-          height={'36px'}
-          borderRadius="full"
-          src={userInfo?.user?.avatar || ''}
-          alt="user avator"
-        />
-      ) : (
-        <Avatar
-          name={userInfo?.user?.name || ''}
-          width={'36px'}
-          height={'36px'}
-          borderRadius="full"
-          bg="#36ADEF"
-        ></Avatar>
-      )}
+      <Image
+        opacity={'0.9'}
+        width={'36px'}
+        height={'36px'}
+        borderRadius="full"
+        src={userInfo?.user?.avatar || ''}
+        fallbackSrc={'/images/avatar.svg'}
+        alt="user avator"
+      />
 
       {accountDisclosure.isOpen && (
         <>
@@ -75,7 +67,7 @@ export default function Account() {
                 height={'36px'}
                 borderRadius="full"
                 src={userInfo?.user?.avatar || ''}
-                fallbackSrc="/images/sealos.svg"
+                fallbackSrc={'/images/avatar.svg'}
                 alt="user avator"
               />
               <Text ml="12px">{userInfo?.user?.name}</Text>

diff --git a/service/license/src/components/signin/index.tsx b/service/license/src/components/signin/index.tsx
@@ -55,14 +55,13 @@ export default function SigninComponent() {
     isLoading: passwordLoading
   } = usePassword({ showError });
   const isLoading = useMemo(() => passwordLoading || smsLoading, [passwordLoading, smsLoading]);
-  const isSignIn = useSessionStore((s) => s.isUserLogin);
-  const router = useRouter();
-
-  useEffect(() => {
-    if (isSignIn()) {
-      router.push('/pricing');
-    }
-  }, [isSignIn, router]);
+  // const isSignIn = useSessionStore((s) => s.isUserLogin);
+  // const router = useRouter();
+  // useEffect(() => {
+  //   if (isSignIn()) {
+  //     router.push('/pricing');
+  //   }
+  // }, [isSignIn, router]);
 
   const { AuthList } = useAuthList();
 

diff --git a/service/license/src/pages/api/payment/create.ts b/service/license/src/pages/api/payment/create.ts
@@ -1,4 +1,5 @@
 import { authSession } from '@/services/backend/auth';
+import { generateLicenseToken } from '@/services/backend/db/license';
 import { createPaymentRecord } from '@/services/backend/db/payment';
 import { jsonRes } from '@/services/backend/response';
 import { getSealosPay } from '@/services/pay';

diff --git a/service/license/src/pages/cluster/components/Tutorial.tsx b/service/license/src/pages/cluster/components/Tutorial.tsx
@@ -29,7 +29,22 @@ export default function Tutorial({
   clusterId: string;
   ossFileName: string;
 }) {
-  let fileName = useMemo(() => ossFileName.replace('/cloud/', ''), [ossFileName]);
+  let { fileNameParams, bashParams } = useMemo(() => {
+    if (ossFileName) {
+      let match = /cloud-(.*?)\.tar/g.exec(ossFileName);
+      return {
+        fileNameParams: ossFileName?.replace('/cloud/', ''),
+        bashParams: match ? `--cloud-version=${match[1]}` : '--cloud-version v5.0.0-beta1'
+      };
+    } else {
+      return {
+        fileNameParams: '',
+        bashParams: ''
+      };
+    }
+  }, [ossFileName]);
+  // console.log(ossFileName, fileNameParams, bashParams);
+
   const { t } = useTranslation();
   const { copyData } = useCopyData();
   const [ossLink, setOssLink] = useState('');
@@ -239,14 +254,15 @@ export default function Tutorial({
               <Text mt="24px" fontSize={'16px'} fontWeight={600} mb="12px">
                 服务器上下载
               </Text>
-              <CodeBlock language="bash" code={`wget ${ossLink}`}></CodeBlock>
+              <CodeBlock language="bash" code={`wget '${ossLink}' -O ${ossFileName}`}></CodeBlock>
               <Divider my="20px" />
               <Text mt="12px" fontSize={'16px'} fontWeight={600} mb="12px">
                 部署集群
               </Text>
               <CodeBlock
                 language="bash"
-                code={`tar xzf ${fileName} && cd sealos-cloud && bash install.sh`}
+                code={`tar xzvf ${fileNameParams} \n && cd sealos-cloud && bash install.sh`}
+                copyValue={`tar xzvf ${fileNameParams} && cd sealos-cloud && bash install.sh`}
               ></CodeBlock>
             </AccordionPanel>
           </AccordionItem>
@@ -263,7 +279,7 @@ export default function Tutorial({
           <AccordionPanel py="20px" pl="40px" gap={'12px'}>
             <CodeBlock
               language="bash"
-              code={`curl -sfL https://raw.githubusercontent.com/labring/sealos/main/scripts/cloud/install.sh -o /tmp/install.sh && bash /tmp/install.sh`}
+              code={`curl -sfL https://raw.githubusercontent.com/labring/sealos/main/scripts/cloud/install.sh -o /tmp/install.sh && bash /tmp/install.sh ${bashParams}`}
             ></CodeBlock>
           </AccordionPanel>
         </AccordionItem>

diff --git a/service/license/src/pages/license/components/Recharge.tsx b/service/license/src/pages/license/components/Recharge.tsx
@@ -32,7 +32,7 @@ export default function RechargeComponent() {
   const queryClient = useQueryClient();
   const toast = useToast({ position: 'top', duration: 2000 });
   const { t } = useTranslation();
-  const [isAgree, setIsAgree] = useState(true);
+  const [isAgree, setIsAgree] = useState(false);
   const [isInvalid, setIsInvalid] = useState(false);
   const { BonusBox, selectAmount } = useBonusBox();
   const { isOpen, onOpen, onClose } = useDisclosure();

diff --git a/service/license/src/pages/pricing/components/Product.tsx b/service/license/src/pages/pricing/components/Product.tsx
@@ -46,7 +46,7 @@ export default function Product() {
   const [orderID, setOrderID] = useState('');
   const [wechatData, setWechatData] = useState<WechatPaymentData>();
   const { data: platformEnv } = useQuery(['getPlatformEnv'], getSystemEnv);
-  const [remainingSeconds, setRemainingSeconds] = useState(2); // 初始值为2秒
+  const [remainingSeconds, setRemainingSeconds] = useState(1); // 初始值为2秒
   const { data: routeParams, setRouteParams, clearRouteParams } = useRouteParamsStore();
   const { isUserLogin } = useSessionStore();
   const { paymentData, setPaymentData, deletePaymentData, isExpired } = usePaymentDataStore();
@@ -221,7 +221,7 @@ export default function Product() {
         status: 'success',
         title: t('Checking Payment Results'), // 这里改为license 签发成功
         isClosable: true,
-        duration: 9000,
+        duration: 3500,
         position: 'top'
       });
       setComplete(2);
@@ -262,27 +262,20 @@ export default function Product() {
 
   // handle Jump link
   useEffect(() => {
-    const { clusterType, external } = router.query;
-    const isLogin = isUserLogin();
-    console.log(clusterType, external);
-
-    if (!isLogin) {
-      setRouteParams(external as string, clusterType as ClusterType);
-    } else if (routeParams.clusterType) {
+    const { clusterType, external } = routeParams;
+    console.log(clusterType, external, 'pricing');
+    if (clusterType && external) {
       handleProductByType(routeParams.clusterType as ClusterType);
       clearRouteParams();
-    } else {
-      console.log(11);
-      handleProductByType(clusterType as ClusterType);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
     <Box flex={1} overflow={'scroll'} backgroundColor="#f2f5f7">
       <Flex
-        minW={'1280px'}
-        // flexWrap={'wrap'}
+        // minW={'1280px'}
+        flexWrap={'wrap'}
         h="100%"
         pt="30px"
         pb="15px"

diff --git a/service/license/src/pages/pricing/components/ServicePackage.tsx b/service/license/src/pages/pricing/components/ServicePackage.tsx
@@ -18,6 +18,7 @@ export default function ServicePackage({ items, children }: ServicePackageProps)
       pt="48px"
       flexDirection={'column'}
       maxW="400px"
+      minH={'676px'}
     >
       {children}
       <Divider my="28px" color={'rgba(0, 0, 0, 0.10)'} />

diff --git a/service/license/src/pages/signin.tsx b/service/license/src/pages/signin.tsx
@@ -1,8 +1,29 @@
 import SigninComponent from '@/components/Signin';
+import useRouteParamsStore from '@/stores/routeParams';
+import useSessionStore from '@/stores/session';
+import { ClusterType } from '@/types';
 import { compareFirstLanguages } from '@/utils/tools';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 
 export default function SigninPage() {
+  const router = useRouter();
+  const { data: routeParams, setRouteParams, clearRouteParams } = useRouteParamsStore();
+  const { isUserLogin } = useSessionStore();
+
+  useEffect(() => {
+    const { clusterType, external } = router.query;
+    console.log(clusterType, external, '--------');
+    if (external && clusterType) {
+      setRouteParams(external as string, clusterType as ClusterType);
+    }
+    if (isUserLogin()) {
+      router.push('/pricing');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return <SigninComponent />;
 }