feat: Implement app guide module (#5115)

* add user task table

* update desktop guide

* desktop guide done

* delete Deprecated API

* support verifyAppToken

* update desktop prisma

* launchpad guide

* update db

* add desktop api

* db guide done

* update launchpad api

* appstore done

* update

* fix desktop autolaunch

* fix desktop refresh

* update

* update desktop

* fix password login

* fix fontweight

* desktop add check

* update db

* update desktop

* checkDeductionBalanceAndCreateTasks

* update deploy

* update check

* update task title

Author: zjy365

frontend/desktop/prisma/global/migrations/20240926064719_add_user_task_table/migration.sql

@@ -0,0 +1,41 @@
+-- CreateEnum
+CREATE TYPE "TaskType" AS ENUM ('LAUNCHPAD', 'COSTCENTER', 'DATABASE', 'DESKTOP', 'APPSTORE');
+
+-- CreateEnum
+CREATE TYPE "TaskStatus" AS ENUM ('NOT_COMPLETED', 'COMPLETED');
+
+-- CreateTable
+CREATE TABLE "Task" (
+    "id" UUID NOT NULL DEFAULT gen_random_uuid(),
+    "title" STRING NOT NULL,
+    "description" STRING NOT NULL,
+    "reward" INT8 NOT NULL,
+    "order" INT4 NOT NULL,
+    "isActive" BOOL NOT NULL DEFAULT true,
+    "isNewUserTask" BOOL NOT NULL DEFAULT false,
+    "taskType" "TaskType" NOT NULL,
+    "createdAt" TIMESTAMPTZ(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMPTZ(3) NOT NULL,
+
+    CONSTRAINT "Task_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "UserTask" (
+    "id" UUID NOT NULL DEFAULT gen_random_uuid(),
+    "userUid" UUID NOT NULL,
+    "taskId" UUID NOT NULL,
+    "status" "TaskStatus" NOT NULL,
+    "rewardStatus" "TaskStatus" NOT NULL,
+    "completedAt" TIMESTAMP(3) NOT NULL,
+    "createdAt" TIMESTAMPTZ(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMPTZ(3) NOT NULL,
+
+    CONSTRAINT "UserTask_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "UserTask_taskId_idx" ON "UserTask"("taskId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "UserTask_userUid_taskId_key" ON "UserTask"("userUid", "taskId");

frontend/desktop/prisma/global/schema.prisma

@@ -102,6 +102,7 @@ model User {
   newMergeUserTransactionInfo MergeUserTransactionInfo[] @relation("newUser")
   DeleteUserTransactionInfo   DeleteUserTransactionInfo?
   deleteUserLog               DeleteUserLog?
+  userTasks                   UserTask[]
 }
 
 model Transfer {
@@ -323,3 +324,47 @@ enum UserStatus {
   LOCK_USER
   DELETE_USER
 }
+
+model Task {
+  id            String     @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
+  title         String
+  description   String
+  reward        BigInt
+  order         Int
+  isActive      Boolean    @default(true)
+  isNewUserTask Boolean    @default(false)
+  taskType      TaskType   
+  createdAt     DateTime   @default(now()) @db.Timestamptz(3)
+  updatedAt     DateTime   @updatedAt @db.Timestamptz(3)
+  userTasks     UserTask[]
+}
+
+model UserTask {
+  id          String     @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
+  userUid     String     @db.Uuid
+  taskId      String     @db.Uuid
+  status      TaskStatus
+  rewardStatus TaskStatus
+  completedAt DateTime
+  createdAt   DateTime   @default(now()) @db.Timestamptz(3)
+  updatedAt   DateTime   @updatedAt @db.Timestamptz(3)
+
+  user        User       @relation(fields: [userUid], references: [uid])
+  task        Task       @relation(fields: [taskId], references: [id])
+
+  @@unique([userUid, taskId])
+  @@index([taskId])
+}
+
+enum TaskType {
+  LAUNCHPAD
+  COSTCENTER
+  DATABASE
+  DESKTOP
+  APPSTORE
+}
+
+enum TaskStatus {
+  NOT_COMPLETED
+  COMPLETED
+}

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

@@ -14,6 +14,8 @@
   "and": "and",
   "app_info": "App Info",
   "app_launchpad": "App Launchpad",
+  "application_desktop": "Application desktop",
+  "application_desktop_tips": "Installed application portal",
   "avatar": "Avatar",
   "balance": "Balance",
   "bind": "Bind",
@@ -29,6 +31,7 @@
   "charge": "Charge",
   "click_anywhere_to_continue": "Click on any blank space to continue",
   "click_on_any_shadow_to_skip": "Click on any shadow to skip",
+  "completed": "Finish",
   "completed_the_deployment_of_an_nginx_for_the_first_time": "Completed the deployment of an nginx for the first time",
   "confirm": "Confirm",
   "confirm_again": "confirm again",
@@ -74,6 +77,9 @@
   "gift_amount": "Reward {{amount}} balance.",
   "github": "Github",
   "google": "Google",
+  "guide_applaunchpad": "Quickly deploy applications without cumbersome configuration",
+  "guide_dbprovider": "Create multiple databases in seconds to meet different application needs",
+  "guide_objectstorage": "Massive storage space, almost bare metal speed experience",
   "handle": "Handle",
   "have_read": "Have read",
   "healthy_pod": "Healthy Pod: {{count}}",
@@ -128,6 +134,7 @@
   "new_email": "New email",
   "new_phone": "New mobile number",
   "newpassword": "New Password",
+  "newuser_benefit": "Benefits",
   "next": "Next",
   "next_time": "Next",
   "nickname": "Nickname",
@@ -199,11 +206,13 @@
   "scan_with_wechat": "Scan with WeChat",
   "sealos_copilot": "Sealos Copilot",
   "sealos_document": "Sealos Document",
+  "sealos_newcomer_benefits": "Sealos Newbie Benefits",
   "search_apps": "Search Apps",
   "select_amount": "Select Amount",
   "service_agreement": "Service Agreement",
   "spend": "spend",
   "start_immediately": "Start",
+  "start_now": "Go Now",
   "start_your_sealos_journey": "Start your Sealos journey",
   "status": "Status",
   "storage": "Storage",
@@ -224,19 +233,29 @@
   "user_name": "User Name",
   "username": "Username",
   "username_tips": "Username must be 3-16 characters, including letters, numbers",
+  "usertask": {
+    "task_appstore_desc": "Provides prefabricated multiple types of application and tool templates, click to install, and automatically deploy",
+    "task_appstore_title": "App Store",
+    "task_database_desc": "Distributed storage, compatible with multi-language ecology, no need to build complex multi-node architecture by yourself",
+    "task_database_title": "Create DataBase",
+    "task_launchpad_desc": "Create a container cluster with one click, automatically deploy container applications, and provide intranet/extranet access addresses",
+    "task_launchpad_title": "Deploy App"
+  },
   "verification_code_login": "with Phone",
   "verifyCode_invalid": "Verification code format is incorrect",
   "verify_code_tips": "6-digit Verification Code",
   "verify_password": "Verify password",
   "verifycode": "verification",
   "view_discount_rules": "View recharge discount rules.",
+  "view_later": "Talk to You later",
   "waiting": "Waiting",
   "warning": "Warning",
   "wechat": "Wechat",
   "work_order": "Work Order",
   "year": "Year",
+  "you_can_complete_the_following_operations": "You can do the following",
   "you_can_use_the_kubectl_command_directly_from_the_terminal": "You can use the kubectl command directly from the terminal",
   "you_can_view_fees_through_the_fee_center": "You can view fees through the fee center",
   "you_have_not_purchased_the_license": "You have not purchased the License",
   "yuan": "Yuan"
-}
+}

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

@@ -13,6 +13,8 @@
   "amount_forecast": "根据近一天消耗金额进行预测",
   "and": "和",
   "app_info": "应用信息",
+  "application_desktop": "应用桌面",
+  "application_desktop_tips": "已安装应用入口",
   "avatar": "头像",
   "balance": "余额",
   "bind": "绑定",
@@ -28,6 +30,7 @@
   "charge": "充值",
   "click_anywhere_to_continue": "点击任意空白继续",
   "click_on_any_shadow_to_skip": "点击任意阴影跳过",
+  "completed": "完成",
   "completed_the_deployment_of_an_nginx_for_the_first_time": "部署一个 nginx ，首次完成 将",
   "confirm": "确认",
   "confirm_again": "再次确认",
@@ -71,6 +74,9 @@
   "gift_amount": "赠送 {{amount}} 余额.",
   "github": "Github",
   "google": "Google",
+  "guide_applaunchpad": "快速部署应用，无需繁琐配置",
+  "guide_dbprovider": "多种数据库秒级创建，满足不同应用需求",
+  "guide_objectstorage": "海量存储空间，近乎裸机的速度体验",
   "handle": "操作",
   "have_read": "已读",
   "healthy_pod": "健康 Pod: {{count}}",
@@ -124,6 +130,7 @@
   "new_email": "新电子邮箱",
   "new_phone": "新手机号",
   "newpassword": "新密码",
+  "newuser_benefit": "新手福利",
   "next": "下一步",
   "next_time": "下次吧",
   "nickname": "昵称",
@@ -194,11 +201,13 @@
   "rename": "重命名",
   "scan_with_wechat": "微信扫码支付",
   "sealos_copilot": "Sealos 小助理",
+  "sealos_newcomer_benefits": "Sealos 新手福利",
   "search_apps": "搜索应用",
   "select_amount": "选择金额",
   "service_agreement": "服务协议",
   "spend": "花",
   "start_immediately": "立即开始",
+  "start_now": "立即前往",
   "start_your_sealos_journey": "开始您的 Sealos 之旅",
   "status": "状态",
   "storage": "存储",
@@ -217,19 +226,29 @@
   "user_name": "用户名",
   "username": "用户名",
   "username_tips": "用户名为3-16位的英文或数字的字符",
+  "usertask": {
+    "task_launchpad_desc": "一键创建容器集群，自动化 部署容器应用，并提供内 网/外网访问地址",
+    "task_launchpad_title": "部署应用",
+    "task_database_desc": "分布式存储，兼容多语言生态，无须自行构建复杂的多节点架构",
+    "task_database_title": "创建数据库",
+    "task_appstore_desc": "提供预制的多类型应用、工具模板，点击安装，自动部署",
+    "task_appstore_title": "应用商店"
+  },
   "verification_code_login": "手机号登录",
   "verifyCode_invalid": "验证码格式不对",
   "verify_code_tips": "6位验证码",
   "verify_password": "确认密码",
   "verifycode": "验证码",
   "view_discount_rules": "查看优惠规则",
+  "view_later": "稍后再说",
   "waiting": "等待中",
   "warning": "警告",
   "wechat": "微信",
   "work_order": "工单",
   "year": "年",
+  "you_can_complete_the_following_operations": "您可以完成以下操作",
   "you_can_use_the_kubectl_command_directly_from_the_terminal": "您可通过终端直接使用 kubectl 命令",
   "you_can_view_fees_through_the_fee_center": "您可通过费用中心查看费用",
   "you_have_not_purchased_the_license": "您还没有购买 License",
   "yuan": "元"
-}
+}

frontend/desktop/src/api/platform.ts

@@ -8,7 +8,7 @@ import {
   CommonClientConfigType,
   TNotification
 } from '@/types';
-import { AccountCRD } from '@/types/user';
+import { UserTask } from '@/types/task';
 
 // handle baidu
 export const uploadConvertData = ({ newType, bdVid }: { newType: number[]; bdVid?: string }) => {
@@ -24,12 +24,16 @@ export const uploadConvertData = ({ newType, bdVid }: { newType: number[]; bdVid
   });
 };
 
-export const updateDesktopGuide = () => {
-  return request.post('/api/account/updateGuide');
+export const getUserTasks = () => {
+  return request.get<UserTask[]>('/api/account/getTasks');
 };
 
-export const getUserAccount = () => {
-  return request.get<AccountCRD>('/api/account/getAccount');
+export const checkUserTask = () => {
+  return request.get('/api/account/checkTask');
+};
+
+export const updateTask = (taskId: string) => {
+  return request.post('/api/account/updateTask', { taskId });
 };
 
 export const getAppConfig = () => {

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

@@ -109,6 +109,7 @@ export default function Apps() {
           gap={`${gridSpacing}px`}
           templateColumns={`repeat(auto-fill, minmax(${appWidth}px, 1fr))`}
           templateRows={`repeat(auto-fit, ${appHeight}px)`}
+          className="apps-container"
         >
           {paginatedApps &&
             paginatedApps.map((item: TApp, index) => (
@@ -121,9 +122,9 @@ export default function Apps() {
                 userSelect="none"
                 cursor={'pointer'}
                 onClick={(e) => handleDoubleClick(e, item)}
+                className={item.key}
               >
                 <Box
-                  className={item.key}
                   w="60px"
                   h="60px"
                   p={'8px'}