feat(platform): UserCenter: add start guide button

Meta3D-Technology · Dec 17, 2023 · 3f0a0e7 · 3f0a0e7
1 parent 4de54bf
commit 3f0a0e7
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 24 deletions.
diff --git a/...al_layer/ui/app/assemble_space/components/element_assemble/components/ElementAssemble.res b/...al_layer/ui/app/assemble_space/components/element_assemble/components/ElementAssemble.res
@@ -387,13 +387,18 @@ let make = (
                     <Tour
                       current=currentTourStep
                       _open={openTour}
-                      onClose={() => {
-                        setOpenTour(_ => false)
-
-                        dispatchForElementAssembleStore(
-                          ElementAssembleStoreType.EndCreateFromScratchTourPhase2,
-                        )
-                      }}
+                      // onClose={() => {
+                      //   // setOpenTour(_ => false)
+
+                      //   // // dispatchForElementAssembleStore(
+                      //   // //   ElementAssembleStoreType.EndCreateFromScratchTourPhase2,
+                      //   // // )
+
+                      //   GuideUtils.handleCloseCreateFromScratchTour(
+                      //     dispatchForAppStore,
+                      //     dispatchForElementAssembleStore,
+                      //   )
+                      // }}
                       onChange={current => {
                         switch Method.buildCreateFromScratchTourStepAndStepMapData()->Meta3dCommonlib.ArraySt.find(
                           ((currentTourStep, _)) => {

diff --git a/platform/frontend/src/external_layer/ui/app/user_center/components/UserCenter.res b/platform/frontend/src/external_layer/ui/app/user_center/components/UserCenter.res
@@ -176,9 +176,9 @@ let make = (~service: FrontendType.service) => {
             AppStoreType.UserCenterAction(UserCenterStoreType.StartCreateFromScratchTourPhase1),
           )
           dispatchForElementAssembleStore(ElementAssembleStoreType.StartCreateFromScratchTourPhase2)
-          dispatch(
-            AppStoreType.UserCenterAction(UserCenterStoreType.StartCreateFromScratchTourPhase3),
-          )
+          // dispatch(
+          //   AppStoreType.UserCenterAction(UserCenterStoreType.StartCreateFromScratchTourPhase3),
+          // )
 
           RescriptReactRouter.push("/UserCenter")
         }
@@ -190,6 +190,11 @@ let make = (~service: FrontendType.service) => {
           dispatch(
             AppStoreType.UserCenterAction(UserCenterStoreType.EndCreateFromScratchTourPhase1),
           )
+          // isInCreateFromScratchTourPhase1 && !GuideUtils.readIsFinishCreateFromScratchTour()
+          //   ? dispatchForElementAssembleStore(
+          //       ElementAssembleStoreType.StartCreateFromScratchTourPhase2,
+          //     )
+          //   : ()
 
           // TODO perf: use batchXxx to merge request
           _selectAllUIControls(service, dispatch)->Js.Promise.then_(() => {
@@ -355,8 +360,16 @@ let make = (~service: FrontendType.service) => {
       | Some(info) => React.string(`${info}`)
       | None =>
         <>
-          <Layout.Sider width=200 theme=#light>
+          <Layout.Sider width=300 theme=#light>
             <Card key={"0"}>
+              <Button
+                onClick={_ => {
+                  GuideUtils.startCreateFromScratchTour(dispatch, dispatchForElementAssembleStore)
+                }}>
+                {React.string(`打开“从头创建新的编辑器”的引导`)}
+              </Button>
+            </Card>
+            <Card key={"1"}>
               <iframe
                 src="https://ghbtns.com/github-btn.html?user=Meta3D-Technology&repo=Meta3D&type=star&count=true&size=large"
                 // frameborder="0"
@@ -374,7 +387,7 @@ let make = (~service: FrontendType.service) => {
               // <span> {React.string(`欢迎Star`)} </span>
             </Card>
             <Card
-              key={"1"}
+              key={"2"}
               // title={<span>
               //   <a
               //     href={"https://qm.qq.com/cgi-bin/qm/qr?k=SaSgwsyiccUjc3Mx3Jqliv9HJnHxL-WI&jump_from=webapi&authKey=+EQRAdLQ80spfX++pA3UB4erf6cxC+Mo4jH6bfovhdE7MOvI5WBUljCZ6roGaNZh"}>
@@ -391,23 +404,23 @@ let make = (~service: FrontendType.service) => {
                 {React.string(`加QQ群`)}
               </span>
             </Card>
-            <Card key={"2"}>
+            <Card key={"3"}>
               <span>
                 <a href={"https://meta3d-website.4everland.app/docs/%E7%AE%80%E4%BB%8B"}>
                   {React.string(`文档`)}
                 </a>
                 {React.string(``)}
               </span>
             </Card>
-            <Card key={"3"}>
+            <Card key={"4"}>
               <span>
                 <a href={"https://github.com/Meta3D-Technology/Meta3D/issues/new/choose"}>
                   {React.string(`Github`)}
                 </a>
                 {React.string(`上提Issue`)}
               </span>
             </Card>
-            <Card key={"4"}>
+            <Card key={"5"}>
               <span>
                 <a href={"https://github.com/Meta3D-Technology/Meta3D/discussions"}>
                   {React.string(`论坛`)}
@@ -439,15 +452,20 @@ let make = (~service: FrontendType.service) => {
                     }, 0, GuideUtils.buildCreateFromScratchStepData())}
                     <Tour
                       _open={openCreateFromScratchPhase1Tour}
-                      onClose={() => {
-                        setOpenCreateFromScratchPhase1Tour(_ => false)
-
-                        dispatch(
-                          AppStoreType.UserCenterAction(
-                            UserCenterStoreType.EndCreateFromScratchTourPhase1,
-                          ),
-                        )
-                      }}
+                      // onClose={() => {
+                      //   // setOpenCreateFromScratchPhase1Tour(_ => false)
+
+                      //   // dispatch(
+                      //   //   AppStoreType.UserCenterAction(
+                      //   //     UserCenterStoreType.EndCreateFromScratchTourPhase1,
+                      //   //   ),
+                      //   // )
+
+                      //   GuideUtils.handleCloseCreateFromScratchTour(
+                      //     dispatch,
+                      //     dispatchForElementAssembleStore,
+                      //   )
+                      // }}
                       steps={_buildCreateFromScratchPhase1TourSteps()}
                     />
                   </>

diff --git a/platform/frontend/src/external_layer/ui/app/utils/GuideUtils.res b/platform/frontend/src/external_layer/ui/app/utils/GuideUtils.res
@@ -64,6 +64,17 @@ let markFinishCreateFromScratchTour = () => {
   )
 }
 
+let _markStartCreateFromScratchTour = () => {
+  LocalStorageUtils.set(
+    _buildKey(),
+    {
+      ..._readGuideStatus(),
+      isFinishCreateFromScratchTour: false,
+      // isInCreateFromScratchTour: false,
+    }->Js.Json.stringifyAny,
+  )
+}
+
 let buildCreateFromScratchStepData = () => {
   [
     ("点击创建按钮", "点击创建按钮", ""),
@@ -123,6 +134,18 @@ let isGameViewProtocolName = protocolName => {
   protocolName == "meta3d-ui-control-game-view-protocol"
 }
 
+let startCreateFromScratchTour = (dispatchForAppStore, dispatchForElementAssembleStore) => {
+  dispatchForAppStore(
+    AppStoreType.UserCenterAction(UserCenterStoreType.StartCreateFromScratchTourPhase1),
+  )
+  dispatchForElementAssembleStore(ElementAssembleStoreType.StartCreateFromScratchTourPhase2)
+  dispatchForAppStore(
+    AppStoreType.UserCenterAction(UserCenterStoreType.StartCreateFromScratchTourPhase3),
+  )
+
+  _markStartCreateFromScratchTour()
+}
+
 let endCreateFromScratchTour = (dispatchForAppStore, dispatchForElementAssembleStore) => {
   dispatchForAppStore(
     AppStoreType.UserCenterAction(UserCenterStoreType.EndCreateFromScratchTourPhase1),
@@ -191,3 +214,13 @@ let buildCloseIcon = (dispatchForAppStore, dispatchForElementAssembleStore) => {
     // </Button>
   </Popconfirm>
 }
+
+let handleCloseCreateFromScratchTour = (dispatchForAppStore, dispatchForElementAssembleStore) => {
+  Window.confirm("您确定要结束本次引导吗？")
+    ? {
+        endCreateFromScratchTour(dispatchForAppStore, dispatchForElementAssembleStore)
+      }
+    : {
+        ()
+      }
+}