feat:desktop & applaunchpad novice guide (#4392)

* add package @sealos/driver

* account

* done

* fix

* fix

* fix appcr

frontend/desktop/next.config.js

@@ -15,7 +15,7 @@ const nextConfig = withPWA({
   reactStrictMode: false,
   swcMinify: isProduction,
   output: 'standalone',
-  transpilePackages: ['@sealos/ui', 'sealos-desktop-sdk'],
+  transpilePackages: ['@sealos/ui', 'sealos-desktop-sdk', '@sealos/driver'],
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../')
   }

frontend/desktop/package.json

@@ -25,6 +25,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@kubernetes/client-node": "^0.18.1",
+    "@sealos/driver": "workspace:^",
     "@sealos/ui": "workspace:^",
     "@tanstack/react-query": "^4.35.3",
     "axios": "^1.5.1",

frontend/desktop/public/locales/en/common.json

@@ -100,7 +100,21 @@
   "Purchase Link Error": "Purchase Link Error",
   "You have not purchased the License": "You have not purchased the License",
   "App Info": "App Info",
-  "Click anywhere to continue": "Click on any blank space to continue",
   "Jump Over": "Jump Over",
-  "Detail": "Detail"
-}
+  "Detail": "Detail",
+  "Hello, welcome": "Hello, welcome to",
+  "Quick application switching floating ball": "Quick application switching floating ball",
+  "You can use the kubectl command directly from the terminal": "You can use the kubectl command directly from the terminal",
+  "Help you enable high availability database": "Help you enable high availability database",
+  "Launch various third-party applications with one click": "Launch various third-party applications with one click",
+  "You can view fees through the fee center": "You can view fees through the fee center",
+  "deploy an application": "Let’s deploy an application~",
+  "spend": "spend",
+  "Completed the deployment of an nginx for the first time": "Completed the deployment of an nginx for the first time",
+  "Next time": "Next",
+  "start immediately": "Start",
+  "Click on any shadow to skip": "Click on any shadow to skip",
+  "Start your Sealos journey": "Start your Sealos journey",
+  "gift amount": "Reward {{amount}} balance.",
+  "Recharge Amount": "Recharge Amount"
+}

frontend/desktop/public/locales/zh/common.json

@@ -24,8 +24,6 @@
   "confirmNewPassword": "确认新密码",
   "passwordMismatch": "密码不一致",
   "passwordChangeSuccess": "密码修改成功",
-  "passwordMismatch": "密码不一致",
-  "newPassword": "新密码",
   "Verify password": "确认密码",
   "change": "修改",
   "Invalid username or password": "用户名或密码错误",
@@ -96,7 +94,20 @@
   "Purchase Link Error": "购买链接错误",
   "You have not purchased the License": "您还没有购买 License",
   "App Info": "应用信息",
-  "Click anywhere to continue": "点击任意空白继续",
   "Jump Over": "跳过",
-  "Detail": "详情"
+  "Detail": "详情",
+  "Hello, welcome": "您好, 欢迎来到",
+  "Quick application switching floating ball": "快捷应用切换悬浮球",
+  "You can use the kubectl command directly from the terminal": "您可通过终端直接使用 kubectl 命令",
+  "Help you enable high availability database": "帮您启用高可用数据库",
+  "Launch various third-party applications with one click": "一键启动各种第三方应用",
+  "You can view fees through the fee center": "您可通过费用中心查看费用",
+  "deploy an application": "来部署一个应用吧～",
+  "spend": "花",
+  "Completed the deployment of an nginx for the first time": "部署一个 nginx ，首次完成 将",
+  "Next time": "下次吧",
+  "start immediately": "立即开始",
+  "Click on any shadow to skip": "点击任意阴影跳过",
+  "Start your Sealos journey": "开始您的 Sealos 之旅",
+  "gift amount": "赠送 {{amount}} 余额."
 }

frontend/desktop/src/api/platform.ts

@@ -1,4 +1,6 @@
 import request from '@/services/request';
+import { ApiResp } from '@/types';
+import { AccountCRD } from '@/types/user';
 
 // handle baidu
 export const uploadConvertData = (newType: number[], url?: string) => {
@@ -14,3 +16,26 @@ export const uploadConvertData = (newType: number[], url?: string) => {
     main_url
   });
 };
+
+export const updateDesktopGuide = () => {
+  return request.post('/api/account/updateGuide');
+};
+
+export const getUserAccount = () => {
+  return request.get<AccountCRD>('/api/account/getAccount');
+};
+
+export const getSystemEnv = () => {
+  return request.get('/api/platform/getEnv');
+};
+
+export const getPriceBonus = () => {
+  return request.get<
+    any,
+    ApiResp<{
+      steps: string;
+      ratios: string;
+      activities: string;
+    }>
+  >('/api/price/bonus');
+};

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

@@ -1,19 +1,20 @@
 import AppWindow from '@/components/app_window';
 import MoreButton from '@/components/more_button';
+import UserMenu from '@/components/user_menu';
 import useAppStore from '@/stores/app';
 import { TApp } from '@/types';
-import { Box, Flex, Grid, GridItem, Image, Text } from '@chakra-ui/react';
+import { Box, Flex, Grid, GridItem, Image, Text, Icon, FlexProps, Button } 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';
 
 const TimeComponent = dynamic(() => import('./time'), {
   ssr: false
 });
-import UserMenu from '@/components/user_menu';
 
 export default function DesktopContent(props: any) {
   const { t, i18n } = useTranslation();
@@ -66,6 +67,8 @@ export default function DesktopContent(props: any) {
     return masterApp?.addEventListen('openDesktopApp', openDesktopApp);
   }, [openDesktopApp]);
 
+  const { UserGuide, showGuide } = useDriver({ openDesktopApp });
+
   return (
     <Box
       id="desktop"
@@ -78,6 +81,22 @@ export default function DesktopContent(props: any) {
         <Box mt="12vh" minW={'508px'}>
           <TimeComponent />
         </Box>
+        {showGuide ? (
+          <>
+            <UserGuide />
+            <Box
+              position="fixed"
+              top="0"
+              left="0"
+              width="100%"
+              height="100%"
+              backgroundColor="rgba(0, 0, 0, 0.7)" // 半透明黑色背景
+              zIndex="11000" // 保证蒙层在最上层
+            />
+          </>
+        ) : (
+          <></>
+        )}
         {/* desktop apps */}
         <Grid
           mt="50px"
@@ -98,6 +117,7 @@ export default function DesktopContent(props: any) {
                 onClick={(e) => handleDoubleClick(e, item)}
               >
                 <Box
+                  className={item.key}
                   w="72px"
                   h="72px"
                   p={'12px'}
@@ -132,7 +152,6 @@ export default function DesktopContent(props: any) {
         <MoreButton />
         <UserMenu />
       </Flex>
-
       {/* opened apps */}
       {runningInfo.map((process) => {
         return (

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

@@ -169,7 +169,7 @@ export default function Index(props: any) {
       >
         <div
           id="floatButtonNav"
-          className={clsx(styles.container, dragging ? styles.notrans : '')}
+          className={clsx(styles.container, 'floatButtonNav', dragging ? styles.notrans : '')}
           data-open={isOpen}
           onMouseEnter={(e) => {
             if (suction !== Suction.None) return;

frontend/desktop/src/constants/account.ts

@@ -0,0 +1 @@
+export const GUIDE_DESKTOP_INDEX_KEY = 'frontend.guide.desktop.index';