feat: @sealos/ui useMessage component

frontend/desktop/src/components/desktop_content/index.tsx

@@ -1,17 +1,17 @@
 import AppWindow from '@/components/app_window';
 import MoreButton from '@/components/more_button';
 import UserMenu from '@/components/user_menu';
+import { BackgroundImageUrl } from '@/constants/config';
+import useDriver from '@/hooks/useDriver';
 import useAppStore from '@/stores/app';
 import { TApp } from '@/types';
-import { Box, Flex, Grid, GridItem, Image, Text, Icon, FlexProps, Button } from '@chakra-ui/react';
+import { Box, Flex, Grid, GridItem, Image, Text } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import { MouseEvent, useCallback, useEffect, useState } from 'react';
 import { createMasterAPP, masterApp } from 'sealos-desktop-sdk/master';
 import IframeWindow from './iframe_window';
 import styles from './index.module.scss';
-import useDriver from '@/hooks/useDriver';
-import { BackgroundImageUrl } from '@/constants/config';
 
 const TimeComponent = dynamic(() => import('./time'), {
   ssr: false

frontend/desktop/src/components/signin/index.tsx

@@ -37,9 +37,10 @@ export default function SigninComponent() {
     service_protocol_en = '',
     private_protocol_en = '',
     needPassword = false,
-    needSms = false
+    needSms = false,
+    openWechatEnabled = false
   } = platformEnv?.data || {};
-  const needTabs = needPassword && needSms;
+  const needTabs = (needPassword && needSms) || (needSms && openWechatEnabled);
 
   const disclosure = useDisclosure();
   const { t, i18n } = useTranslation();
@@ -180,9 +181,11 @@ export default function SigninComponent() {
                 <Tab px="0" _selected={{ color: 'white' }}>
                   {t('Password Login')}
                 </Tab>
-                <Tab px="0" _selected={{ color: 'white' }}>
-                  {t('Official account login')}
-                </Tab>
+                {openWechatEnabled && (
+                  <Tab px="0" _selected={{ color: 'white' }}>
+                    {t('Official account login')}
+                  </Tab>
+                )}
               </TabList>
               <TabIndicator mt="-2px" height="2px" bg="#FFFFFF" borderRadius="1px" />
             </Tabs>

frontend/desktop/src/components/user_menu/github.tsx

@@ -0,0 +1,55 @@
+import { Flex, FlexProps, Icon, Tooltip } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+
+export default function GithubComponent(props: FlexProps) {
+  const { data } = useQuery(
+    ['getGithubStar'],
+    () => fetch('https://api.github.com/repos/labring/sealos').then((res) => res.json()),
+    {
+      staleTime: 60 * 60 * 1000
+    }
+  );
+
+  return (
+    <Tooltip
+      hasArrow
+      px={4}
+      py={2}
+      borderRadius={'8px'}
+      fontSize={'12px'}
+      fontWeight={400}
+      color={'#24282C'}
+      label={`GitHub Star: ${Math.floor(
+        (data?.stargazers_count ? data.stargazers_count : 12500) / 1000
+      )}k`}
+      bg={'rgba(255, 255, 255)'}
+      placement="bottom-end"
+    >
+      <Flex
+        userSelect={'none'}
+        ml="auto"
+        w="32px"
+        h="32px"
+        borderRadius={'50%'}
+        justifyContent={'center'}
+        alignItems={'center'}
+        backgroundColor={'#FFF'}
+        color={'#152539'}
+        cursor={'pointer'}
+        fontWeight={500}
+        {...props}
+        onClick={() => window.open('https://github.com/labring/sealos')}
+      >
+        <Icon
+          xmlns="http://www.w3.org/2000/svg"
+          width="20px"
+          height="20px"
+          viewBox="0 0 20 20"
+          fill="#111824"
+        >
+          <path d="M10.5149 2.46429C9.50066 2.46429 8.94582 2.57085 8.11017 2.75393C7.6713 2.47429 7.1805 2.2266 6.71141 2.04216C6.16273 1.82643 5.50582 1.64137 4.96522 1.69937C4.73761 1.72379 4.54128 1.83769 4.40747 2.00232C4.34607 2.06873 4.29451 2.14634 4.25617 2.23385C3.78624 3.30652 3.8237 4.37524 4.02876 5.17706C3.70273 5.62136 3.45054 6.03802 3.2796 6.49567C3.06127 7.08016 2.99839 7.66872 2.99839 8.37421C2.99839 10.2018 3.55784 11.6251 4.60368 12.6213C5.34248 13.325 6.27275 13.7665 7.29637 14.0126C7.19262 14.3116 7.14454 14.6131 7.12749 14.9237C7.12244 14.9608 7.11984 14.9987 7.11984 15.0371L7.11984 15.2993C7.08437 15.3069 7.04899 15.3168 7.01389 15.3292C6.29686 15.5828 4.42832 15.4917 3.48217 13.4202C3.29096 13.0015 2.79658 12.8172 2.37795 13.0084C1.95931 13.1996 1.77494 13.6939 1.96615 14.1126C3.19725 16.808 5.63646 17.3073 7.11984 17.0209L7.11984 17.4781C7.11984 17.9383 7.49294 18.3114 7.95318 18.3114C8.41341 18.3114 8.78651 17.9383 8.78651 17.4781L8.7865 15.2177C8.78661 14.8916 8.82066 14.6928 8.87987 14.5341C8.93817 14.3779 9.04207 14.2042 9.26358 13.9629C9.57478 13.6238 9.5522 13.0967 9.21313 12.7854C9.12786 12.7072 9.03069 12.65 8.92805 12.6137C8.85498 12.5841 8.77645 12.5645 8.69396 12.5566C7.41295 12.4343 6.42015 12.0497 5.75319 11.4145C5.10404 10.7961 4.66505 9.84643 4.66505 8.37421C4.66505 7.76687 4.72051 7.40117 4.8409 7.07886C4.96477 6.74723 5.18069 6.39831 5.6054 5.85725C5.68261 5.75888 5.73419 5.64856 5.76109 5.53435C5.79993 5.37587 5.79274 5.20438 5.73033 5.04034C5.57774 4.63929 5.48097 4.05052 5.61339 3.42948C5.75142 3.46674 5.91501 3.5199 6.10155 3.59324C6.57035 3.77757 7.06537 4.04219 7.45271 4.32035C7.58549 4.4157 7.7368 4.46641 7.88875 4.47541C7.9655 4.4805 8.04425 4.47496 8.12315 4.45762L8.25749 4.42806C9.19661 4.22125 9.60665 4.13096 10.5149 4.13096C11.472 4.13096 11.9343 4.22367 12.9808 4.45706C13.0503 4.47256 13.1197 4.47889 13.1878 4.47685C13.3544 4.47581 13.5223 4.42493 13.668 4.32035C14.0553 4.04219 14.5503 3.77757 15.0191 3.59324C15.2035 3.52076 15.3654 3.46799 15.5024 3.4308C15.6309 4.03267 15.5421 4.58336 15.3904 4.98448C15.3739 5.02807 15.3613 5.07218 15.3525 5.11643C15.2813 5.36893 15.3302 5.65098 15.5085 5.86975C15.8603 6.30132 16.0766 6.61787 16.2175 6.96875C16.3557 7.31312 16.4425 7.74564 16.4425 8.42196C16.4425 9.79112 16.0558 10.7082 15.4422 11.328C14.8146 11.962 13.85 12.3861 12.5089 12.5597C12.4949 12.5615 12.4811 12.5637 12.4673 12.5661C12.2703 12.5692 12.0736 12.6417 11.9171 12.7854C11.578 13.0967 11.5554 13.6238 11.8666 13.9629C12.0881 14.2042 12.192 14.3779 12.2503 14.5341C12.3095 14.6928 12.3436 14.8916 12.3437 15.2177L12.3437 17.4781C12.3437 17.9383 12.7168 18.3114 13.177 18.3114C13.6373 18.3114 14.0104 17.9383 14.0104 17.4781L14.0104 15.0371C14.0104 14.9987 14.0078 14.9608 14.0027 14.9237C13.9855 14.6103 13.9367 14.3061 13.831 14.0045C14.9295 13.7266 15.889 13.2458 16.6267 12.5005C17.6174 11.4997 18.1092 10.1226 18.1092 8.42196C18.1092 7.59831 18.0029 6.94238 17.7642 6.34782C17.587 5.90648 17.3488 5.53004 17.0789 5.17087C17.2969 4.35681 17.3282 3.29947 16.8497 2.20714C16.7832 2.05551 16.6771 1.93357 16.5488 1.84818C16.4364 1.76822 16.3024 1.71514 16.1554 1.69937C15.6148 1.64137 14.9579 1.82643 14.4093 2.04216C13.939 2.22706 13.4469 2.47552 13.0072 2.75601C12.1219 2.56301 11.5322 2.46429 10.5149 2.46429Z" />
+        </Icon>
+      </Flex>
+    </Tooltip>
+  );
+}

frontend/desktop/src/components/user_menu/index.tsx

@@ -1,10 +1,11 @@
 import Account from '@/components/account';
 import Notification from '@/components/notification';
 import useSessionStore from '@/stores/session';
-import { Box, Flex, FlexProps, Image, useDisclosure } from '@chakra-ui/react';
+import { Box, Center, Flex, FlexProps, Image, useDisclosure } from '@chakra-ui/react';
 import { useState } from 'react';
 import LangSelectSimple from '../LangSelect/simple';
 import Iconfont from '../iconfont';
+import GithubComponent from './github';
 
 enum UserMenuKeys {
   LangSelect,
@@ -30,6 +31,13 @@ export default function Index(props: { userMenuStyleProps?: FlexProps }) {
     }
   } = props;
 
+  const baseItemStyle = {
+    w: '36px',
+    h: '36px',
+    background: 'rgba(244, 246, 248, 0.7)',
+    boxShadow: '0px 1.2px 2.3px rgba(0, 0, 0, 0.2)'
+  };
+
   const buttonList: {
     click?: () => void;
     button: JSX.Element;
@@ -68,27 +76,20 @@ export default function Index(props: { userMenuStyleProps?: FlexProps }) {
   ];
   return (
     <Flex {...userMenuStyleProps}>
-      <LangSelectSimple
-        w="36px"
-        h="36px"
-        background={'rgba(244, 246, 248, 0.7)'}
-        boxShadow={'0px 1.2px 2.3px rgba(0, 0, 0, 0.2)'}
-      />
+      <LangSelectSimple {...baseItemStyle} />
+      <GithubComponent {...baseItemStyle} />
       {buttonList.map((item) => (
         <Flex
-          w="36px"
-          h="36px"
           key={item.key}
           borderRadius={'50%'}
-          background={'rgba(244, 246, 248, 0.7)'}
           justifyContent={'center'}
           alignItems={'center'}
           position={'relative'}
-          boxShadow={'0px 1.2px 2.3px rgba(0, 0, 0, 0.2)'}
+          {...baseItemStyle}
         >
-          <Box onClick={item.click} cursor={'pointer'}>
+          <Center w="100%" h="100%" onClick={item.click} cursor={'pointer'}>
             {item.button}
-          </Box>
+          </Center>
           {item.content}
           {item.key === UserMenuKeys.Notification && notificationAmount > 0 && (
             <Box

frontend/desktop/src/hooks/useDriver.tsx

@@ -58,6 +58,7 @@ export default function useDriver({ openDesktopApp }: { openDesktopApp: any }) {
     const handleUserGuide = async () => {
       try {
         const { data: env } = await getSystemEnv();
+        if (!env.guideEnabled) return;
         const { data } = await getUserAccount();
         const bonus = await getPriceBonus();
         if (bonus.data?.activities) {

frontend/desktop/src/pages/api/platform/getEnv.ts

@@ -9,7 +9,8 @@ import {
   enableStripe,
   enableWechatRecharge,
   enableLicense,
-  enableRecharge
+  enableRecharge,
+  enableOpenWechat
 } from '@/services/enable';
 import { ApiResp, SystemEnv } from '@/types';
 
@@ -32,6 +33,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   const licenseEnabled = enableLicense();
   const rechargeEnabled = enableRecharge();
   const guideEnabled = process.env.GUIDE_ENABLED === 'true';
+  const openWechatEnabled = enableOpenWechat();
 
   jsonRes<SystemEnv>(res, {
     data: {
@@ -53,7 +55,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       wechatEnabledRecharge,
       rechargeEnabled,
       licenseEnabled,
-      guideEnabled
+      guideEnabled,
+      openWechatEnabled
     }
   });
 }

frontend/desktop/src/services/enable.ts

@@ -22,6 +22,8 @@ export const enableGoogle = () =>
 export const enableRecharge = () => {
   return process.env.RECHARGE_ENABLED === 'true';
 };
+export const enableOpenWechat = () =>
+  !!process.env.PBULIC_WECHAT_APP_ID && !!process.env.PBULIC_WECHAT_APP_SECRET;
 export const enableSignUp = () => process.env.SIGN_UP_ENABLED === 'true';
 export const enableApi = () => process.env.API_ENABLED === 'true';
 // costcenter

frontend/desktop/src/stores/global.ts

@@ -31,6 +31,7 @@ export const useGlobalStore = create<GlobalState>()(
       wechatEnabledRecharge: false,
       SEALOS_CLOUD_DOMAIN: 'cloud.sealos.io',
       rechargeEnabled: false,
+      openWechatEnabled: false,
       setEnv(env, val) {
         set({ [env]: val });
       }

frontend/desktop/src/types/system.ts

@@ -30,4 +30,5 @@ export type SystemEnv = {
   rechargeEnabled: boolean;
   licenseEnabled: boolean;
   guideEnabled: boolean;
+  openWechatEnabled: boolean;
 } & LoginProps;

frontend/packages/ui/src/components/Message/index.tsx

@@ -0,0 +1,75 @@
+import { AlertStatus, Box, Center, Flex, UseToastOptions, useToast } from '@chakra-ui/react';
+import CloseIcon from '../icons/CloseIcon';
+import WarningIcon from '../icons/WarningIcon';
+import SuccessIcon from '../icons/SuccessIcon';
+
+export default function useMessage(props?: UseToastOptions) {
+  const statusMap: Record<AlertStatus, { bg: string; icon: JSX.Element }> = {
+    info: { bg: 'yellow.50', icon: <WarningIcon /> },
+    error: { bg: 'red.50', icon: <CloseIcon w={'16px'} h="16px" fill={'#D92D20'} /> },
+    success: { bg: '#EDFBF3', icon: <SuccessIcon w={'16px'} h="16px" fill={'#039855'} /> },
+    warning: { bg: 'yellow.50', icon: <WarningIcon /> },
+    loading: { bg: 'yellow.50', icon: <WarningIcon /> }
+  };
+
+  const renderStatusIcon = (status: AlertStatus) => {
+    const { bg, icon } = statusMap[status];
+    return (
+      <Center bg={bg} borderRadius={'full'} p={1}>
+        {icon}
+      </Center>
+    );
+  };
+
+  const message = useToast({
+    position: 'top',
+    isClosable: true,
+    ...props,
+    render: (props) => {
+      return (
+        <Box
+          position={'relative'}
+          background={'white'}
+          py={3}
+          px={5}
+          fontSize={'md'}
+          borderRadius={'lg'}
+          boxShadow={
+            '0px 0px 1px 0px rgba(19, 51, 107, 0.08), 0px 4px 10px 0px rgba(19, 51, 107, 0.08)'
+          }
+        >
+          <Flex alignItems={'start'} gap={'12px'}>
+            {renderStatusIcon(props?.status || 'info')}
+            <Box flex={1} color={'sealosGrayModern.900'}>
+              {props?.title && (
+                <Box fontSize={'16px'} fontWeight={500} mb="4px">
+                  {props?.title}
+                </Box>
+              )}
+              {props?.description && (
+                <Box fontSize={'14px'} fontWeight={40}>
+                  {props?.description}
+                </Box>
+              )}
+            </Box>
+            {props?.isClosable && (
+              <Center
+                borderRadius={'md'}
+                p={'4px'}
+                _hover={{ bg: 'rgba(0, 0, 0, 0.06)' }}
+                cursor={'pointer'}
+                onClick={props.onClose}
+              >
+                <CloseIcon w="16px" h="16px" fill={'black'} />
+              </Center>
+            )}
+          </Flex>
+        </Box>
+      );
+    }
+  });
+
+  return {
+    message
+  };
+}

frontend/packages/ui/src/components/icons/CloseIcon.tsx

@@ -4,16 +4,16 @@ export default function CloseIcon(props: IconProps) {
   return (
     <Icon
       xmlns="http://www.w3.org/2000/svg"
-      width="24px"
-      height="24px"
-      viewBox="0 0 24 24"
-      fill="#24282C"
+      width="16px"
+      height="16px"
+      viewBox="0 0 16 16"
+      fill={'#D92D20'}
       {...props}
     >
       <path
-        d="M12.6428 13.7245L12.3 13.3817L11.9572 13.7245L5.77165 19.9101C5.64002 20.0417 5.47302 20.1152 5.2308 20.1152C4.98857 20.1152 4.82158 20.0417 4.68995 19.9101C4.55831 19.7784 4.48479 19.6114 4.48479 19.3692C4.48479 19.127 4.55831 18.96 4.68995 18.8284L10.8755 12.6428L11.2183 12.3L10.8755 11.9572L4.68995 5.77166C4.55831 5.64002 4.48479 5.47303 4.48479 5.23081C4.48479 4.98858 4.55831 4.82159 4.68995 4.68995C4.82158 4.55832 4.98857 4.4848 5.2308 4.4848C5.47303 4.4848 5.64002 4.55832 5.77165 4.68995L11.9572 10.8755L12.3 11.2183L12.6428 10.8755L18.8283 4.68995C18.96 4.55832 19.127 4.4848 19.3692 4.4848C19.6114 4.4848 19.7784 4.55832 19.9101 4.68995C20.0417 4.82159 20.1152 4.98858 20.1152 5.23081C20.1152 5.47303 20.0417 5.64002 19.9101 5.77166L13.7245 11.9572L13.3817 12.3L13.7245 12.6428L19.9101 18.8284C20.0417 18.96 20.1152 19.127 20.1152 19.3692C20.1152 19.6114 20.0417 19.7784 19.9101 19.9101C19.7784 20.0417 19.6114 20.1152 19.3692 20.1152C19.127 20.1152 18.96 20.0417 18.8283 19.9101L12.6428 13.7245Z"
-        stroke="#24282C"
-        strokeWidth="0.969582"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.52876 3.52864C3.78911 3.26829 4.21122 3.26829 4.47157 3.52864L8.00016 7.05723L11.5288 3.52864C11.7891 3.26829 12.2112 3.26829 12.4716 3.52864C12.7319 3.78899 12.7319 4.2111 12.4716 4.47145L8.94297 8.00004L12.4716 11.5286C12.7319 11.789 12.7319 12.2111 12.4716 12.4714C12.2112 12.7318 11.7891 12.7318 11.5288 12.4714L8.00016 8.94285L4.47157 12.4714C4.21122 12.7318 3.78911 12.7318 3.52876 12.4714C3.26841 12.2111 3.26841 11.789 3.52876 11.5286L7.05735 8.00004L3.52876 4.47145C3.26841 4.2111 3.26841 3.78899 3.52876 3.52864Z"
       />
     </Icon>
   );

frontend/packages/ui/src/components/icons/SuccessIcon.tsx

@@ -0,0 +1,20 @@
+import { Icon, IconProps } from '@chakra-ui/react';
+
+export default function SuccessIcon(props: IconProps) {
+  return (
+    <Icon
+      xmlns="http://www.w3.org/2000/svg"
+      width="17"
+      height="16"
+      viewBox="0 0 17 16"
+      fill="#039855"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.1265 3.52864C14.3869 3.78899 14.3869 4.2111 14.1265 4.47145L6.79318 11.8048C6.53283 12.0651 6.11072 12.0651 5.85037 11.8048L2.51704 8.47145C2.25669 8.2111 2.25669 7.78899 2.51704 7.52864C2.77739 7.26829 3.1995 7.26829 3.45985 7.52864L6.32178 10.3906L13.1837 3.52864C13.4441 3.26829 13.8662 3.26829 14.1265 3.52864Z"
+      />
+    </Icon>
+  );
+}

frontend/packages/ui/src/components/icons/WarningIcon.tsx

@@ -0,0 +1,20 @@
+import { Icon, IconProps } from '@chakra-ui/react';
+
+export default function WarningIcon(props: IconProps) {
+  return (
+    <Icon
+      xmlns="http://www.w3.org/2000/svg"
+      width="17px"
+      height="16px"
+      viewBox="0 0 17 16"
+      fill="#DC6803"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.72204 3.76156C9.72109 3.26167 9.31508 2.85721 8.8152 2.85816C8.31532 2.85911 7.91085 3.26511 7.9118 3.765L7.9215 8.87333C7.92245 9.37322 8.32846 9.77768 8.82834 9.77673C9.32823 9.77578 9.73269 9.36978 9.73174 8.86989L9.72204 3.76156ZM8.82178 13.1418C9.37406 13.1418 9.82178 12.6941 9.82178 12.1418C9.82178 11.5895 9.37406 11.1418 8.82178 11.1418C8.26949 11.1418 7.82178 11.5895 7.82178 12.1418C7.82178 12.6941 8.26949 13.1418 8.82178 13.1418Z"
+      />
+    </Icon>
+  );
+}

frontend/packages/ui/src/components/index.ts

@@ -1,5 +1,3 @@
-import EditTabs from './EditTabs';
-import YamlCode from './YamlCode';
 import CopyIcon from './icons/CopyIcon';
 import DownloadIcon from './icons/DownloadIcon';
 import DeleteIcon from './icons/DeleteIcon';
@@ -42,8 +40,15 @@ import WarnIcon from './icons/WarnIcon';
 import CloseIcon from './icons/CloseIcon';
 import SortPolygonUpIcon from './icons/SortPolygonUpIcon';
 import SortPolygonDownIcon from './icons/SortPolygonDownIcon';
+import WarningIcon from './icons/WarningIcon';
+
+import useMessage from './Message/index';
+import EditTabs from './EditTabs';
+import YamlCode from './YamlCode';
 
 export {
+  WarningIcon,
+  useMessage,
   YamlCode,
   EditTabs,
   AddIcon,