Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat:desktop & applaunchpad novice guide #4392

Merged
merged 6 commits into from
Dec 8, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/desktop/next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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, '../')
}
Expand Down
1 change: 1 addition & 0 deletions frontend/desktop/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
10 changes: 10 additions & 0 deletions frontend/desktop/public/icons/driverStar.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/desktop/public/images/driver-bg.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 17 additions & 3 deletions frontend/desktop/public/locales/en/common.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
19 changes: 15 additions & 4 deletions frontend/desktop/public/locales/zh/common.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,6 @@
"confirmNewPassword": "确认新密码",
"passwordMismatch": "密码不一致",
"passwordChangeSuccess": "密码修改成功",
"passwordMismatch": "密码不一致",
"newPassword": "新密码",
"Verify password": "确认密码",
"change": "修改",
"Invalid username or password": "用户名或密码错误",
Expand Down Expand Up @@ -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}} 余额."
}
25 changes: 25 additions & 0 deletions frontend/desktop/src/api/platform.ts
Original file line number Diff line number Diff line change
@@ -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) => {
Expand All @@ -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');
};
25 changes: 22 additions & 3 deletions frontend/desktop/src/components/desktop_content/index.tsx
Original file line number Diff line number Diff line change
@@ -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();
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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'}
Expand Down Expand Up @@ -132,7 +152,6 @@ export default function DesktopContent(props: any) {
<MoreButton />
<UserMenu />
</Flex>

{/* opened apps */}
{runningInfo.map((process) => {
return (
Expand Down
2 changes: 1 addition & 1 deletion frontend/desktop/src/components/floating_button/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions frontend/desktop/src/constants/account.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const GUIDE_DESKTOP_INDEX_KEY = 'frontend.guide.desktop.index';
Loading
Loading