feat(platform): First Login use Carousel instead of Modal

show gifs;

(chore: README show gifs)

README.md

@@ -7,11 +7,28 @@ Meta3D是开源Web3D低代码平台，快速搭建Web3D编辑器，共建开放
 
 [文档](https://meta3d-website.4everland.app/docs/%E7%AE%80%E4%BB%8B) • [搭建的编辑器Demo](https://meta3d-production-5eol5gce9a6b9c-1302358347.tcloudbaseapp.com/EnterApp?account=meta3d&appName=%E5%AE%8C%E6%95%B4%E7%9A%84%E7%BC%96%E8%BE%91%E5%99%A8) • [进入平台](https://meta3d-production-5eol5gce9a6b9c-1302358347.tcloudbaseapp.com/)
 
-![image](https://img2023.cnblogs.com/blog/419321/202312/419321-20231228184839012-1192918596.png)
+<!-- ![image](https://img2023.cnblogs.com/blog/419321/202312/419321-20231228184839012-1192918596.png) -->
 
+**加入UI Control**
 
-![Alt Text](./add_ui_control.gif)
+![Alt Text](./platform/frontend/static/image/gif/add_ui_control.gif)
 
+**加入Action脚本**
+
+![Alt Text](./platform/frontend/static/image/gif/add_action.gif)
+
+
+**发布编辑器**
+
+![Alt Text](./platform/frontend/static/image/gif/publish.gif)
+
+**导入编辑器**
+
+![Alt Text](./platform/frontend/static/image/gif/import.gif)
+
+**运行“完整的编辑器”模板**
+
+![Alt Text](./platform/frontend/static/image/gif/run_complete_editor.gif)
 
 <!-- Meta3D现在处于公开内测中，已经完成了基本的案例，您可以开始使用，欢迎您来一起共建开源社区！
 

doc/1.0.0-beta.3.org

@@ -651,21 +651,42 @@ TODO https://github.com/Meta3D-Technology/Meta3D/discussions/43 add FAQ link
 
 
 
-# - TODO 给出多个gif，展示各种特性
-# e.g. 展示搭建编辑器（包括引擎）、使用编辑器开发web3d应用  的过程、自定义Menu等ui control。。。。。。
+- TODO 给出多个gif，展示各种特性
+e.g. 展示搭建编辑器（包括引擎）、使用编辑器开发web3d应用  的过程、自定义Menu等ui control。。。。。。
+
+
+
+add ui control: window, change rect
+
+# test in Github
+
+# test in doc
+
+add action to button, run editor in visual, click button to trigger alert
+
+publish editor->see in user center
 
-#   - TODO update doc
-#   - TODO update 官网
-#   - 参考：
+import template
 
-# https://cn.nocobase.com/
-#   - TODO update README
-#     update snapshot
-#     add gif
+run complete editor demo gif, add cube, load glb, 
+
+
+
+  - TODO update doc->简介
+  # - TODO update 官网
+  # - 参考：
+
+https://cn.nocobase.com/
+  - TODO update README
+    update snapshot
+    add gif
 
-#     add contributors: show avater
+    # add contributors: show avater
 
 
+- First Login
+# show gifs in doc draw
+show gifs in Modal
 
 
 # TODO update FAQ

platform/frontend/src/external_layer/ui/app/login/components/Login.res

@@ -88,6 +88,23 @@ let make = (~service: FrontendType.service) => {
     RescriptReactRouter.push("/Login")
   }
 
+  let _afterChange = currentSlide => {
+    // _finishGuide()
+    ()
+  }
+
+  let _getCaroselStyle = () => {
+    ReactDOM.Style.make(
+      ~margin="10px",
+      ~height="500px",
+      // ~color="#ffffff",
+      // ~lineHeight="500px",
+      ~textAlign="center",
+      ~background="#364d79",
+      (),
+    )
+  }
+
   <>
     {GuideUtils.readIsFinishFirstLogin()
       ? <Layout>
@@ -160,27 +177,87 @@ let make = (~service: FrontendType.service) => {
             {isLoginBegin ? <Loading text={j`加载中，请稍候`} /> : React.null}
           </Layout.Content>
         </Layout>
-      : <Modal
-          title={`欢迎来到Meta3D`}
-          visible={true}
-          onOk={() => {
-            _finishGuide()
-          }}
-          onCancel={() => {
-            _finishGuide()
-          }}
-          footer={React.null}>
-          <Space direction=#vertical>
-            <Typography.Title level=2>
-              {React.string({
-                j`Meta3D是开源Web3D低代码平台，快速搭建Web3D编辑器，共建开放互助的web3d生态`
-              })}
-            </Typography.Title>
-            <Typography.Text _type=#warning>
-              {React.string({
-                j`目前处于内测阶段，完全免费`
-              })}
-            </Typography.Text>
+      : <>
+          <Carousel
+            style={_getCaroselStyle()}
+            dots=true
+            autoplay=true
+            autoplaySpeed=15000
+            afterChange={_afterChange}>
+            <Space direction=#vertical>
+              <Typography.Title level=2>
+                {React.string({
+                  j`Meta3D是开源Web3D低代码平台，快速搭建Web3D编辑器，共建开放互助的web3d生态`
+                })}
+              </Typography.Title>
+              <Typography.Text _type=#warning>
+                {React.string({
+                  j`目前处于内测阶段，完全免费`
+                })}
+              </Typography.Text>
+            </Space>
+            <section>
+              <Row align=#middle justify=#center>
+                <Space direction=#vertical>
+                  <Typography.Title level=2>
+                    {React.string({
+                      j`加入UI Control`
+                    })}
+                  </Typography.Title>
+                  <img src="/static/image/gif/add_ui_control.gif" />
+                </Space>
+              </Row>
+            </section>
+            <section>
+              <Row align=#middle justify=#center>
+                <Space direction=#vertical>
+                  <Typography.Title level=2>
+                    {React.string({
+                      j`加入Action脚本`
+                    })}
+                  </Typography.Title>
+                  <img src="/static/image/gif/add_action.gif" />
+                </Space>
+              </Row>
+            </section>
+            <section>
+              <Row align=#middle justify=#center>
+                <Space direction=#vertical>
+                  <Typography.Title level=2>
+                    {React.string({
+                      j`发布编辑器`
+                    })}
+                  </Typography.Title>
+                  <img src="/static/image/gif/publish.gif" />
+                </Space>
+              </Row>
+            </section>
+            <section>
+              <Row align=#middle justify=#center>
+                <Space direction=#vertical>
+                  <Typography.Title level=2>
+                    {React.string({
+                      j`导入编辑器`
+                    })}
+                  </Typography.Title>
+                  <img src="/static/image/gif/import.gif" />
+                </Space>
+              </Row>
+            </section>
+            <section>
+              <Row align=#middle justify=#center>
+                <Space direction=#vertical>
+                  <Typography.Title level=2>
+                    {React.string({
+                      j`运行“完整的编辑器”模板`
+                    })}
+                  </Typography.Title>
+                  <img src="/static/image/gif/run_complete_editor.gif" />
+                </Space>
+              </Row>
+            </section>
+          </Carousel>
+          <Row align=#middle justify=#center>
             <Space direction=#horizontal>
               <Button
                 _type=#primary
@@ -197,7 +274,7 @@ let make = (~service: FrontendType.service) => {
                 {React.string(`了解详情`)}
               </Button>
             </Space>
-          </Space>
-        </Modal>}
+          </Row>
+        </>}
   </>
 }

platform/frontend/src/external_layer/ui/app/utils/EnvUtils.res

@@ -1 +1 @@
-let getEnv = (): EnvType.env => #production
+let getEnv = (): EnvType.env => #local

platform/frontend/src/external_layer/ui/app/utils/utils/externals/antd/Antd.res

@@ -35,3 +35,5 @@ module Tooltip = Antd__Tooltip
 module Drawer = Antd__Drawer
 
 module ConfigProvider = Antd__ConfigProvider
+
+module Carousel = Antd__Carousel

platform/frontend/src/external_layer/ui/app/utils/utils/externals/antd/Antd__Carousel.res

@@ -0,0 +1,15 @@
+type slide = int
+
+type dots = {
+    className:string
+}
+
+@module("antd") @react.component
+external make: (
+  ~style: ReactDOM.Style.t=?,
+  ~autoplay: bool=?,
+  ~autoplaySpeed: int=?,
+  ~dots: bool=?,
+  ~afterChange: slide => unit=?,
+  ~children: React.element=?,
+) => React.element = "Carousel"

platform/frontend/src/external_layer/ui/app/utils/utils/externals/antd/Antd__Typography.res

@@ -13,7 +13,9 @@ module Title = {
 
 module Text = {
   @react.component @module("antd") @scope("Typography")
-  external make: (~_type: textType=?, ~children: React.element=?) => React.element = "Text"
+  external make: (
+
+    ~_type: textType=?, ~children: React.element=?) => React.element = "Text"
 }
 
 module Link = {