From e9e9190e21e4c0b53662b36eee6c3f1f721ea4d3 Mon Sep 17 00:00:00 2001
From: DiamondYuan <541832074@qq.com>
Date: Wed, 17 Jan 2024 18:57:43 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=20GuideTour=20(#1017)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 更新 GuideTour

* feat: 更新 guide-tour 的 axml

* feat: 更新 guide tour 的测试

* fix: 更新 axml

* chore: 更新 guidetour 的 axml

* fix: 修复 guide tour 的 axml

* fix: 更新 guidetour 的 axml

* fix: 更新 axml

* fix: 更新 axml

* fix: update axml

* fix: 更新 axml

* fix: 删除 disable-touch

---------

Co-authored-by: DiamondYuan <fandi.yfd@antgroup.com>
---
 .../alipay/demo/pages/GuideTour/index.axml    |  32 ++--
 compiled/alipay/demo/pages/GuideTour/index.js |  97 +++++-----
 .../GuideTour/{index.acss => index.less}      |   0
 compiled/alipay/src/GuideTour/index.axml      | 134 +++++++-------
 compiled/alipay/src/GuideTour/index.json      |   6 +-
 compiled/alipay/src/GuideTour/index.sjs       |  10 +-
 compiled/alipay/src/GuideTour/props.ts        |  18 ++
 compiled/alipay/src/Skeleton/index.axml       |   2 +-
 compiled/alipay/src/tsxml/type.ts             |   1 +
 compiled/wechat/src/Skeleton/index.wxml       |   2 +-
 demo/pages/GuideTour/index.axml               |  67 -------
 demo/pages/GuideTour/index.axml.tsx           |  75 ++++++++
 .../GuideTour/{index.acss => index.less}      |   0
 demo/pages/GuideTour/{index.js => index.ts}   |   0
 src/GuideTour/index.axml                      |  98 ----------
 src/GuideTour/index.axml.tsx                  | 172 ++++++++++++++++++
 src/GuideTour/index.json                      |   6 +-
 src/GuideTour/{index.sjs => index.sjs.ts}     |   0
 src/GuideTour/props.ts                        |  18 ++
 src/tsxml/index.tsx                           |   2 +
 src/tsxml/type.ts                             |   1 +
 .../alipay/GuideTour/__tests__/index.test.ts  | 101 ----------
 tests/alipay/GuideTour/index.test.ts          |  70 +++++++
 23 files changed, 507 insertions(+), 405 deletions(-)
 rename compiled/alipay/demo/pages/GuideTour/{index.acss => index.less} (100%)
 delete mode 100644 demo/pages/GuideTour/index.axml
 create mode 100644 demo/pages/GuideTour/index.axml.tsx
 rename demo/pages/GuideTour/{index.acss => index.less} (100%)
 rename demo/pages/GuideTour/{index.js => index.ts} (100%)
 delete mode 100644 src/GuideTour/index.axml
 create mode 100644 src/GuideTour/index.axml.tsx
 rename src/GuideTour/{index.sjs => index.sjs.ts} (100%)
 delete mode 100644 tests/alipay/GuideTour/__tests__/index.test.ts
 create mode 100644 tests/alipay/GuideTour/index.test.ts

diff --git a/compiled/alipay/demo/pages/GuideTour/index.axml b/compiled/alipay/demo/pages/GuideTour/index.axml
index bb7cf65a6..09b26f875 100644
--- a/compiled/alipay/demo/pages/GuideTour/index.axml
+++ b/compiled/alipay/demo/pages/GuideTour/index.axml
@@ -1,40 +1,41 @@
 <guide-tour
-  items="{{[list[0]]}}"
-  visible="{{baseVisible}}"
+  items="{{ [list[0]] }}"
+  visible="{{ baseVisible }}"
   onCancel="closeTour"
   onChange="onChange" />
 <guide-tour
-  items="{{list}}"
-  visible="{{moreVisible}}"
+  items="{{ list }}"
+  visible="{{ moreVisible }}"
   onCancel="closeTour"
   onChange="onChange" />
 <guide-tour
-  items="{{list}}"
-  visible="{{swiperVisible}}"
+  items="{{ list }}"
+  visible="{{ swiperVisible }}"
   onCancel="closeTour"
   onChange="onChange"
-  swiperable="{{true}}" />
+  swiperable="{{ true }}" />
 <guide-tour
-  items="{{list}}"
-  current="{{current}}"
-  visible="{{controlledVisible}}"
+  items="{{ list }}"
+  current="{{ current }}"
+  visible="{{ controlledVisible }}"
   onCancel="closeTour"
   onChange="onChangeControlled" />
 <guide-tour
-  items="{{list}}"
-  visible="{{slotVisible}}"
+  items="{{ list }}"
+  visible="{{ slotVisible }}"
   onCancel="closeTour"
   onChange="onChange">
   <view
     class="step-box"
     slot="step"
     slot-scope="props">
-    step-{{props.index}}
+    step-{{ props.index }}
   </view>
 </guide-tour>
+
 <container
   title="基础用法"
-  class="list">
+  className="list">
   <button
     onTap="openTour"
     data-field="baseVisible">
@@ -56,9 +57,10 @@
     受控模式
   </button>
 </container>
+
 <container
   title="插槽用法"
-  class="list">
+  className="list">
   <button
     onTap="openTour"
     data-field="slotVisible">
diff --git a/compiled/alipay/demo/pages/GuideTour/index.js b/compiled/alipay/demo/pages/GuideTour/index.js
index 18733d761..ccf5db4b0 100644
--- a/compiled/alipay/demo/pages/GuideTour/index.js
+++ b/compiled/alipay/demo/pages/GuideTour/index.js
@@ -1,52 +1,49 @@
 Page({
-  data: {
-    baseVisible: false,
-    moreVisible: false,
-    swiperVisible: false,
-    slotVisible: false,
-    controlledVisible: false,
-    current: 0,
-    list: [
-      {
-        left: 20,
-        top: 80,
-        imageUrl:
-          'https://gw.alipayobjects.com/zos/antfincdn/IV3MGP1qL/bianzu%25252013.png',
-        imageMode: 'widthFix',
-      },
-      {
-        left: 20,
-        top: 160,
-        imageUrl:
-          'https://gw.alipayobjects.com/zos/antfincdn/%26B6d3lBJn/bianzu%25252020.png',
-      },
-      {
-        left: 20,
-        top: 220,
-        imageUrl:
-          'https://gw.alipayobjects.com/zos/antfincdn/lwVOkCcwb/bianzu%25252021.png',
-      },
-    ],
-  },
-  onChange(index) {
-    console.log('index', index);
-  },
-  onChangeControlled(index) {
-    this.setData({ current: index });
-  },
-  openTour(e) {
-    this.setData({
-      [e.target.dataset.field]: true,
-      current: 0,
-    });
-  },
-  closeTour() {
-    this.setData({
-      baseVisible: false,
-      moreVisible: false,
-      swiperVisible: false,
-      slotVisible: false,
-      controlledVisible: false,
-    });
-  },
+    data: {
+        baseVisible: false,
+        moreVisible: false,
+        swiperVisible: false,
+        slotVisible: false,
+        controlledVisible: false,
+        current: 0,
+        list: [
+            {
+                left: 20,
+                top: 80,
+                imageUrl: 'https://gw.alipayobjects.com/zos/antfincdn/IV3MGP1qL/bianzu%25252013.png',
+                imageMode: 'widthFix',
+            },
+            {
+                left: 20,
+                top: 160,
+                imageUrl: 'https://gw.alipayobjects.com/zos/antfincdn/%26B6d3lBJn/bianzu%25252020.png',
+            },
+            {
+                left: 20,
+                top: 220,
+                imageUrl: 'https://gw.alipayobjects.com/zos/antfincdn/lwVOkCcwb/bianzu%25252021.png',
+            },
+        ],
+    },
+    onChange(index) {
+        console.log('index', index);
+    },
+    onChangeControlled(index) {
+        this.setData({ current: index });
+    },
+    openTour(e) {
+        this.setData({
+            [e.target.dataset.field]: true,
+            current: 0,
+        });
+    },
+    closeTour() {
+        this.setData({
+            baseVisible: false,
+            moreVisible: false,
+            swiperVisible: false,
+            slotVisible: false,
+            controlledVisible: false,
+        });
+    },
 });
diff --git a/compiled/alipay/demo/pages/GuideTour/index.acss b/compiled/alipay/demo/pages/GuideTour/index.less
similarity index 100%
rename from compiled/alipay/demo/pages/GuideTour/index.acss
rename to compiled/alipay/demo/pages/GuideTour/index.less
diff --git a/compiled/alipay/src/GuideTour/index.axml b/compiled/alipay/src/GuideTour/index.axml
index 74ff18930..12e61738a 100644
--- a/compiled/alipay/src/GuideTour/index.axml
+++ b/compiled/alipay/src/GuideTour/index.axml
@@ -1,98 +1,110 @@
 <import-sjs
   from="./index.sjs"
   name="utils" />
+
 <view
-  class="ant-guide-tour {{className?className:''}}"
-  style="{{style || ''}}"
-  a:if="{{visible}}">
+  a:if="{{ visible }}"
+  class="ant-guide-tour {{ className || '' }}"
+  style="{{ style || '' }}">
   <mask
     show
-    className="{{maskClassName}}"
-    style="z-index:9999;{{maskStyle || ''}}" />
-  <am-icon
+    className="{{ maskClassName }}"
+    style="z-index:9999;{{ maskStyle || '' }}" />
+  <ant-icon
     type="CloseOutline"
-    class="ant-guide-tour-clear"
+    className="ant-guide-tour-clear"
     onTap="onCancel" />
   <view class="ant-guide-tour-button">
-    <button
+    <ant-button
+      a:if="{{ utils.checkShowJump(mixin.value, items) }}"
       inline
       size="small"
-      a:if="{{utils.checkShowJump(mixin.value,items)}}"
       onTap="onCancel">
       跳过
-    </button>
-    <button
+    </ant-button>
+    <ant-button
+      a:if="{{ utils.checkShowPrev(mixin.value, items) }}"
       inline
       size="small"
       onTap="onPrev"
-      a:if="{{utils.checkShowPrev(mixin.value,items)}}"
-      data-currentValue="{{mixin.value}}">
+      data-currentValue="{{ mixin.value }}">
       上一步
-    </button>
-    <button
+    </ant-button>
+    <ant-button
+      a:if="{{ utils.checkShowNext(mixin.value, items) }}"
       inline
       size="small"
       onTap="onNext"
-      a:if="{{utils.checkShowNext(mixin.value,items)}}"
-      data-currentValue="{{mixin.value}}">
+      data-currentValue="{{ mixin.value }}">
       下一步
-    </button>
-    <button
+    </ant-button>
+    <ant-button
+      a:if="{{ utils.checkShowKnow(mixin.value, items) }}"
       inline
       size="small"
-      a:if="{{utils.checkShowKnow(mixin.value,items)}}"
       onTap="onCancel">
       知道了
-    </button>
+    </ant-button>
   </view>
-  <block a:if="{{swiperable}}">
+  <block a:if="{{ swiperable }}">
     <view class="ant-guide-tour-indicator">
-      <view
-        a:for="{{items}}"
-        class="ant-guide-tour-indicator-dot {{index === mixin.value ? 'ant-guide-tour-indicator-dot-active':''}}" />
+      <block
+        a:for="{{ items }}"
+        a:for-index="index"
+        a:for-item="item">
+        <view
+          class="ant-guide-tour-indicator-dot {{ index === mixin.value ? 'ant-guide-tour-indicator-dot-active' : '' }}" />
+      </block>
     </view>
     <swiper
       class="ant-guide-tour-swiper"
-      current="{{mixin.value}}"
+      current="{{ mixin.value }}"
       adjust-height="none"
       style="height: 100vh"
-      disable-touch="{{ture}}"
       onChange="onSwiperChange">
-      <swiper-item a:for="{{items}}">
-        <view
-          class="ant-guide-tour-item {{item.className ? item.className : ''}}"
-          style="top:{{item.top}}px; left:{{item.left}}px">
-          <slot
-            name="step"
-            index="{{current}}">
-            <image
-              a:if="{{item.imageUrl}}"
-              class="ant-guide-tour-item-img"
-              src="{{item.imageUrl}}"
-              style="{{item.imageStyle}}"
-              mode="{{item.imageMode}}" />
-          </slot>
-        </view>
-      </swiper-item>
+      <block
+        a:for="{{ items }}"
+        a:for-index="index"
+        a:for-item="item">
+        <swiper-item>
+          <view
+            class="ant-guide-tour-item {{ item.className || '' }}"
+            style="top:{{ item.top }}px; left:{{ item.left }}px">
+            <slot
+              name="step"
+              index="{{ current }}">
+              <image
+                a:if="{{ item.imageUrl }}"
+                class="ant-guide-tour-item-img"
+                src="{{ item.imageUrl }}"
+                style="{{ item.imageStyle }}"
+                mode="{{ item.imageMode }}" />
+            </slot>
+          </view>
+        </swiper-item>
+      </block>
     </swiper>
   </block>
-  <block
-    a:else
-    a:for="{{items}}">
-    <view
-      class="ant-guide-tour-item {{item.className ? item.className : ''}}"
-      style="top:{{item.top}}px; left:{{item.left}}px"
-      a:if="{{mixin.value === index}}">
-      <slot
-        name="step"
-        index="{{index}}">
-        <image
-          a:if="{{item.imageUrl}}"
-          class="ant-guide-tour-item-img"
-          src="{{item.imageUrl}}"
-          style="{{item.imageStyle}}"
-          mode="{{item.imageMode}}" />
-      </slot>
-    </view>
+  <block a:else>
+    <block
+      a:for="{{ items }}"
+      a:for-index="index"
+      a:for-item="item">
+      <view
+        a:if="{{ mixin.value === index }}"
+        class="ant-guide-tour-item {{ item.className || '' }}"
+        style="top:{{ item.top }}px; left:{{ item.left }}px">
+        <slot
+          name="step"
+          index="{{ index }}">
+          <image
+            a:if="{{ item.imageUrl }}"
+            class="ant-guide-tour-item-img"
+            src="{{ item.imageUrl }}"
+            style="{{ item.imageStyle }}"
+            mode="{{ item.imageMode }}" />
+        </slot>
+      </view>
+    </block>
   </block>
 </view>
diff --git a/compiled/alipay/src/GuideTour/index.json b/compiled/alipay/src/GuideTour/index.json
index 701f8aea5..9c14b8442 100644
--- a/compiled/alipay/src/GuideTour/index.json
+++ b/compiled/alipay/src/GuideTour/index.json
@@ -2,7 +2,7 @@
   "component": true,
   "usingComponents": {
     "mask": "../Mask/index",
-    "button": "../Button/index",
-    "am-icon": "../Icon/index"
+    "ant-button": "../Button/index",
+    "ant-icon": "../Icon/index"
   }
-}
\ No newline at end of file
+}
diff --git a/compiled/alipay/src/GuideTour/index.sjs b/compiled/alipay/src/GuideTour/index.sjs
index dfe0a5026..c776f951a 100644
--- a/compiled/alipay/src/GuideTour/index.sjs
+++ b/compiled/alipay/src/GuideTour/index.sjs
@@ -11,8 +11,8 @@ function checkShowKnow(current, items) {
   return current === items.length - 1;
 }
 export default {
-  checkShowNext,
-  checkShowPrev,
-  checkShowJump,
-  checkShowKnow,
-};
+  checkShowNext: checkShowNext,
+  checkShowPrev: checkShowPrev,
+  checkShowJump: checkShowJump,
+  checkShowKnow: checkShowKnow
+};
\ No newline at end of file
diff --git a/compiled/alipay/src/GuideTour/props.ts b/compiled/alipay/src/GuideTour/props.ts
index 1e2ca8c86..f53489bc2 100644
--- a/compiled/alipay/src/GuideTour/props.ts
+++ b/compiled/alipay/src/GuideTour/props.ts
@@ -21,6 +21,10 @@ interface IStep {
    * @description 距离左边
    */
   left: string;
+  /**
+   * @description className
+   */
+  className?: string;
 }
 
 export interface IGuideTour extends IBaseProps {
@@ -28,6 +32,10 @@ export interface IGuideTour extends IBaseProps {
    * @description 蒙层样式
    */
   maskStyle: string;
+  /**
+   * @description 蒙层 className
+   */
+  maskClassName?: string;
   /**
    * @description 步骤详情
    */
@@ -65,3 +73,13 @@ export const GuideTourDefaultProps: Partial<IGuideTour> = {
   items: [],
   defaultCurrent: 0,
 };
+
+export const GuideTourFunctionalProps: Partial<IGuideTour> = {
+  maskStyle: '',
+  maskClassName: '',
+  items: [],
+  current: null,
+  defaultCurrent: 0,
+  swiperable: false,
+  visible: false,
+};
diff --git a/compiled/alipay/src/Skeleton/index.axml b/compiled/alipay/src/Skeleton/index.axml
index e58aeac4a..c1f5e78e5 100644
--- a/compiled/alipay/src/Skeleton/index.axml
+++ b/compiled/alipay/src/Skeleton/index.axml
@@ -17,7 +17,7 @@
     <paragraph
       a:if="{{ paragraph }}"
       animate="{{ animate }}"
-      rows="{{ paragraph !== true ? paragraph.rows : 3 }}"
+      rows="{{ paragraph === true ? 3 : paragraph.rows }}"
       loading />
   </view>
 </view>
diff --git a/compiled/alipay/src/tsxml/type.ts b/compiled/alipay/src/tsxml/type.ts
index 549ce528c..b2f49db7e 100644
--- a/compiled/alipay/src/tsxml/type.ts
+++ b/compiled/alipay/src/tsxml/type.ts
@@ -4,6 +4,7 @@ export interface Props {
   ref?: string;
   name?: string;
   scrollX?: any;
+  current?: any;
   'a:key'?: string;
   scrollLeft?: any;
   onTap?: string;
diff --git a/compiled/wechat/src/Skeleton/index.wxml b/compiled/wechat/src/Skeleton/index.wxml
index d0536b5b4..76de92ba9 100644
--- a/compiled/wechat/src/Skeleton/index.wxml
+++ b/compiled/wechat/src/Skeleton/index.wxml
@@ -17,7 +17,7 @@
     <paragraph
       wx:if="{{ paragraph }}"
       animate="{{ animate }}"
-      rows="{{ paragraph !== true ? paragraph.rows : 3 }}"
+      rows="{{ paragraph === true ? 3 : paragraph.rows }}"
       loading />
   </view>
 </view>
diff --git a/demo/pages/GuideTour/index.axml b/demo/pages/GuideTour/index.axml
deleted file mode 100644
index bb7cf65a6..000000000
--- a/demo/pages/GuideTour/index.axml
+++ /dev/null
@@ -1,67 +0,0 @@
-<guide-tour
-  items="{{[list[0]]}}"
-  visible="{{baseVisible}}"
-  onCancel="closeTour"
-  onChange="onChange" />
-<guide-tour
-  items="{{list}}"
-  visible="{{moreVisible}}"
-  onCancel="closeTour"
-  onChange="onChange" />
-<guide-tour
-  items="{{list}}"
-  visible="{{swiperVisible}}"
-  onCancel="closeTour"
-  onChange="onChange"
-  swiperable="{{true}}" />
-<guide-tour
-  items="{{list}}"
-  current="{{current}}"
-  visible="{{controlledVisible}}"
-  onCancel="closeTour"
-  onChange="onChangeControlled" />
-<guide-tour
-  items="{{list}}"
-  visible="{{slotVisible}}"
-  onCancel="closeTour"
-  onChange="onChange">
-  <view
-    class="step-box"
-    slot="step"
-    slot-scope="props">
-    step-{{props.index}}
-  </view>
-</guide-tour>
-<container
-  title="基础用法"
-  class="list">
-  <button
-    onTap="openTour"
-    data-field="baseVisible">
-    单图模式
-  </button>
-  <button
-    onTap="openTour"
-    data-field="moreVisible">
-    多图模式
-  </button>
-  <button
-    onTap="openTour"
-    data-field="swiperVisible">
-    滑动模式
-  </button>
-  <button
-    onTap="openTour"
-    data-field="controlledVisible">
-    受控模式
-  </button>
-</container>
-<container
-  title="插槽用法"
-  class="list">
-  <button
-    onTap="openTour"
-    data-field="slotVisible">
-    开始
-  </button>
-</container>
diff --git a/demo/pages/GuideTour/index.axml.tsx b/demo/pages/GuideTour/index.axml.tsx
new file mode 100644
index 000000000..1b2132db3
--- /dev/null
+++ b/demo/pages/GuideTour/index.axml.tsx
@@ -0,0 +1,75 @@
+import { InternalData, Page } from 'tsxml';
+import GuideTour from '../../../src/GuideTour/index.axml';
+import Button from '../../../src/Button/index.axml';
+import Container from '../../../src/Container/index.axml';
+
+export default ({
+  list,
+  baseVisible,
+  props,
+  slotVisible,
+  moreVisible,
+  controlledVisible,
+  current,
+  swiperVisible,
+}: InternalData) => (
+  <Page>
+    <GuideTour
+      items={[list[0]]}
+      visible={baseVisible}
+      onCancel="closeTour"
+      onChange="onChange"
+    />
+    <GuideTour
+      items={list}
+      visible={moreVisible}
+      onCancel="closeTour"
+      onChange="onChange"
+    />
+    <GuideTour
+      items={list}
+      visible={swiperVisible}
+      onCancel="closeTour"
+      onChange="onChange"
+      swiperable={true}
+    />
+    <GuideTour
+      items={list}
+      current={current}
+      visible={controlledVisible}
+      onCancel="closeTour"
+      onChange="onChangeControlled"
+    />
+    <GuideTour
+      items={list}
+      visible={slotVisible}
+      onCancel="closeTour"
+      onChange="onChange"
+    >
+      <view class="step-box" slot="step" slot-scope="props">
+        step-{props.index}
+      </view>
+    </GuideTour>
+
+    <Container title="基础用法" className="list">
+      <Button onTap="openTour" data-field="baseVisible">
+        单图模式
+      </Button>
+      <Button onTap="openTour" data-field="moreVisible">
+        多图模式
+      </Button>
+      <Button onTap="openTour" data-field="swiperVisible">
+        滑动模式
+      </Button>
+      <Button onTap="openTour" data-field="controlledVisible">
+        受控模式
+      </Button>
+    </Container>
+
+    <Container title="插槽用法" className="list">
+      <Button onTap="openTour" data-field="slotVisible">
+        开始
+      </Button>
+    </Container>
+  </Page>
+);
diff --git a/demo/pages/GuideTour/index.acss b/demo/pages/GuideTour/index.less
similarity index 100%
rename from demo/pages/GuideTour/index.acss
rename to demo/pages/GuideTour/index.less
diff --git a/demo/pages/GuideTour/index.js b/demo/pages/GuideTour/index.ts
similarity index 100%
rename from demo/pages/GuideTour/index.js
rename to demo/pages/GuideTour/index.ts
diff --git a/src/GuideTour/index.axml b/src/GuideTour/index.axml
deleted file mode 100644
index 74ff18930..000000000
--- a/src/GuideTour/index.axml
+++ /dev/null
@@ -1,98 +0,0 @@
-<import-sjs
-  from="./index.sjs"
-  name="utils" />
-<view
-  class="ant-guide-tour {{className?className:''}}"
-  style="{{style || ''}}"
-  a:if="{{visible}}">
-  <mask
-    show
-    className="{{maskClassName}}"
-    style="z-index:9999;{{maskStyle || ''}}" />
-  <am-icon
-    type="CloseOutline"
-    class="ant-guide-tour-clear"
-    onTap="onCancel" />
-  <view class="ant-guide-tour-button">
-    <button
-      inline
-      size="small"
-      a:if="{{utils.checkShowJump(mixin.value,items)}}"
-      onTap="onCancel">
-      跳过
-    </button>
-    <button
-      inline
-      size="small"
-      onTap="onPrev"
-      a:if="{{utils.checkShowPrev(mixin.value,items)}}"
-      data-currentValue="{{mixin.value}}">
-      上一步
-    </button>
-    <button
-      inline
-      size="small"
-      onTap="onNext"
-      a:if="{{utils.checkShowNext(mixin.value,items)}}"
-      data-currentValue="{{mixin.value}}">
-      下一步
-    </button>
-    <button
-      inline
-      size="small"
-      a:if="{{utils.checkShowKnow(mixin.value,items)}}"
-      onTap="onCancel">
-      知道了
-    </button>
-  </view>
-  <block a:if="{{swiperable}}">
-    <view class="ant-guide-tour-indicator">
-      <view
-        a:for="{{items}}"
-        class="ant-guide-tour-indicator-dot {{index === mixin.value ? 'ant-guide-tour-indicator-dot-active':''}}" />
-    </view>
-    <swiper
-      class="ant-guide-tour-swiper"
-      current="{{mixin.value}}"
-      adjust-height="none"
-      style="height: 100vh"
-      disable-touch="{{ture}}"
-      onChange="onSwiperChange">
-      <swiper-item a:for="{{items}}">
-        <view
-          class="ant-guide-tour-item {{item.className ? item.className : ''}}"
-          style="top:{{item.top}}px; left:{{item.left}}px">
-          <slot
-            name="step"
-            index="{{current}}">
-            <image
-              a:if="{{item.imageUrl}}"
-              class="ant-guide-tour-item-img"
-              src="{{item.imageUrl}}"
-              style="{{item.imageStyle}}"
-              mode="{{item.imageMode}}" />
-          </slot>
-        </view>
-      </swiper-item>
-    </swiper>
-  </block>
-  <block
-    a:else
-    a:for="{{items}}">
-    <view
-      class="ant-guide-tour-item {{item.className ? item.className : ''}}"
-      style="top:{{item.top}}px; left:{{item.left}}px"
-      a:if="{{mixin.value === index}}">
-      <slot
-        name="step"
-        index="{{index}}">
-        <image
-          a:if="{{item.imageUrl}}"
-          class="ant-guide-tour-item-img"
-          src="{{item.imageUrl}}"
-          style="{{item.imageStyle}}"
-          mode="{{item.imageMode}}" />
-      </slot>
-    </view>
-  </block>
-</view>
diff --git a/src/GuideTour/index.axml.tsx b/src/GuideTour/index.axml.tsx
new file mode 100644
index 000000000..247fd3d42
--- /dev/null
+++ b/src/GuideTour/index.axml.tsx
@@ -0,0 +1,172 @@
+import { IGuideTour } from './props';
+import {
+  Component,
+  View,
+  Slot,
+  InternalData,
+  TSXMLProps,
+  Block,
+  Swiper,
+  SwiperItem,
+  Image,
+} from 'tsxml';
+import Mask from '../Mask/index.axml';
+import AntButton from '../Button/index.axml';
+import AntIcon from '../Icon/index.axml';
+import utils from './index.sjs';
+
+export default (
+  {
+    className,
+    style,
+    maskStyle,
+    maskClassName,
+    items,
+    visible,
+    swiperable,
+  }: TSXMLProps<IGuideTour>,
+  { mixin, current }: InternalData
+) => (
+  <Component>
+    {visible && (
+      <View class={`ant-guide-tour ${className || ''}`} style={style || ''}>
+        <Mask
+          show
+          className={maskClassName}
+          style={`z-index:9999;${maskStyle || ''}`}
+        />
+        <AntIcon
+          type="CloseOutline"
+          className="ant-guide-tour-clear"
+          onTap="onCancel"
+        />
+        <View class="ant-guide-tour-button">
+          {utils.checkShowJump(mixin.value, items) && (
+            <AntButton inline size="small" onTap="onCancel">
+              跳过
+            </AntButton>
+          )}
+          {utils.checkShowPrev(mixin.value, items) && (
+            <AntButton
+              inline
+              size="small"
+              onTap="onPrev"
+              data-currentValue={mixin.value}
+            >
+              上一步
+            </AntButton>
+          )}
+          {utils.checkShowNext(mixin.value, items) && (
+            <AntButton
+              inline
+              size="small"
+              onTap="onNext"
+              data-currentValue={mixin.value}
+            >
+              下一步
+            </AntButton>
+          )}
+          {utils.checkShowKnow(mixin.value, items) && (
+            <AntButton inline size="small" onTap="onCancel">
+              知道了
+            </AntButton>
+          )}
+        </View>
+        {swiperable ? (
+          <Block>
+            <View class="ant-guide-tour-indicator">
+              {items.map((item, index) => (
+                <View
+                  class={`ant-guide-tour-indicator-dot ${
+                    index === mixin.value
+                      ? 'ant-guide-tour-indicator-dot-active'
+                      : ''
+                  }`}
+                ></View>
+              ))}
+            </View>
+            <Swiper
+              class="ant-guide-tour-swiper"
+              current={mixin.value}
+              adjust-height="none"
+              style="height: 100vh"
+              onChange="onSwiperChange"
+            >
+              {items.map((item) => (
+                <SwiperItem>
+                  <View
+                    class={`ant-guide-tour-item ${item.className || ''}`}
+                    style={`top:${item.top}px; left:${item.left}px`}
+                  >
+                    {/* #if WECHAT */}
+                    {item.imageUrl ? (
+                      <Image
+                        class="ant-guide-tour-item-img"
+                        src={item.imageUrl}
+                        style={item.imageStyle}
+                        mode={item.imageMode}
+                      />
+                    ) : (
+                      <Slot name="step" index={current}></Slot>
+                    )}
+                    {/* #endif */}
+                    {/* #if ALIPAY */}
+                    <Slot name="step" index={current}>
+                      {item.imageUrl && (
+                        <Image
+                          class="ant-guide-tour-item-img"
+                          src={item.imageUrl}
+                          style={item.imageStyle}
+                          mode={item.imageMode}
+                        />
+                      )}
+                    </Slot>
+                    {/* #endif */}
+                  </View>
+                </SwiperItem>
+              ))}
+            </Swiper>
+          </Block>
+        ) : (
+          <Block>
+            {items.map(
+              (item, index) =>
+                mixin.value === index && (
+                  <View
+                    class={`ant-guide-tour-item ${item.className || ''}`}
+                    style={`top:${item.top}px; left:${item.left}px`}
+                  >
+                    {/* #if WECHAT */}
+                    {item.imageUrl ? (
+                      <Image
+                        class="ant-guide-tour-item-img"
+                        src={item.imageUrl}
+                        style={item.imageStyle}
+                        mode={item.imageMode}
+                      />
+                    ) : (
+                      <Slot name="step" index={index}></Slot>
+                    )}
+                    {/* #endif */}
+
+                    {/* #if ALIPAY */}
+                    <Slot name="step" index={index}>
+                      {item.imageUrl && (
+                        <Image
+                          class="ant-guide-tour-item-img"
+                          src={item.imageUrl}
+                          style={item.imageStyle}
+                          mode={item.imageMode}
+                        />
+                      )}
+                    </Slot>
+                    {/* #endif */}
+                  </View>
+                )
+            )}
+          </Block>
+        )}
+      </View>
+    )}
+  </Component>
+);
diff --git a/src/GuideTour/index.json b/src/GuideTour/index.json
index 701f8aea5..9c14b8442 100644
--- a/src/GuideTour/index.json
+++ b/src/GuideTour/index.json
@@ -2,7 +2,7 @@
   "component": true,
   "usingComponents": {
     "mask": "../Mask/index",
-    "button": "../Button/index",
-    "am-icon": "../Icon/index"
+    "ant-button": "../Button/index",
+    "ant-icon": "../Icon/index"
   }
-}
\ No newline at end of file
+}
diff --git a/src/GuideTour/index.sjs b/src/GuideTour/index.sjs.ts
similarity index 100%
rename from src/GuideTour/index.sjs
rename to src/GuideTour/index.sjs.ts
diff --git a/src/GuideTour/props.ts b/src/GuideTour/props.ts
index 1e2ca8c86..f53489bc2 100644
--- a/src/GuideTour/props.ts
+++ b/src/GuideTour/props.ts
@@ -21,6 +21,10 @@ interface IStep {
    * @description 距离左边
    */
   left: string;
+  /**
+   * @description className
+   */
+  className?: string;
 }
 
 export interface IGuideTour extends IBaseProps {
@@ -28,6 +32,10 @@ export interface IGuideTour extends IBaseProps {
    * @description 蒙层样式
    */
   maskStyle: string;
+  /**
+   * @description 蒙层 className
+   */
+  maskClassName?: string;
   /**
    * @description 步骤详情
    */
@@ -65,3 +73,13 @@ export const GuideTourDefaultProps: Partial<IGuideTour> = {
   items: [],
   defaultCurrent: 0,
 };
+
+export const GuideTourFunctionalProps: Partial<IGuideTour> = {
+  maskStyle: '',
+  maskClassName: '',
+  items: [],
+  current: null,
+  defaultCurrent: 0,
+  swiperable: false,
+  visible: false,
+};
diff --git a/src/tsxml/index.tsx b/src/tsxml/index.tsx
index 54d81fd34..21e9eb22f 100644
--- a/src/tsxml/index.tsx
+++ b/src/tsxml/index.tsx
@@ -25,6 +25,8 @@ export const Slot = (props: AnyProps): any => {};
 export const Block = (props: Props): any => {};
 
 export const Page = (props: Props): any => {};
+export const Swiper = (props: Props): any => {};
+export const SwiperItem = (props: Props): any => {};
 
 export const Component = (props: Props): any => {};
 
diff --git a/src/tsxml/type.ts b/src/tsxml/type.ts
index 549ce528c..b2f49db7e 100644
--- a/src/tsxml/type.ts
+++ b/src/tsxml/type.ts
@@ -4,6 +4,7 @@ export interface Props {
   ref?: string;
   name?: string;
   scrollX?: any;
+  current?: any;
   'a:key'?: string;
   scrollLeft?: any;
   onTap?: string;
diff --git a/tests/alipay/GuideTour/__tests__/index.test.ts b/tests/alipay/GuideTour/__tests__/index.test.ts
deleted file mode 100644
index 36a160351..000000000
--- a/tests/alipay/GuideTour/__tests__/index.test.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { getInstance } from 'tests/utils';
-import { describe, it, expect, vi } from 'vitest';
-
-describe('guideTour onCancel', () => {
-  it('guideTour onCancel', () => {
-    const my = {
-      canIUse() {
-        return true;
-      },
-    };
-    const onCancel = vi.fn();
-    const instance = getInstance(
-      'GuideTour',
-      {
-        onCancel,
-      },
-      my
-    );
-    instance.callMethod('onCancel');
-    expect(onCancel).toBeCalled();
-  });
-});
-
-describe('guideTour onChange', () => {
-  it('guideTour onNext', () => {
-    const my = {
-      canIUse() {
-        return true;
-      },
-    };
-    const onChange = vi.fn();
-    const instance = getInstance(
-      'GuideTour',
-      {
-        onChange,
-      },
-      my
-    );
-    instance.callMethod('onNext');
-    expect(instance.getData().mixin.value).toBe(1);
-    expect(onChange).toBeCalledWith(1);
-  });
-  it('guideTour onPrev', () => {
-    const my = {
-      canIUse() {
-        return true;
-      },
-    };
-    const onChange = vi.fn();
-    const instance = getInstance(
-      'GuideTour',
-      {
-        onChange,
-        defaultCurrent: 1,
-      },
-      my
-    );
-
-    instance.callMethod('onPrev');
-    expect(instance.getData().mixin.value).toBe(0);
-    expect(onChange).toBeCalledWith(0);
-  });
-  it('guideTour onSwiperChange', () => {
-    const my = {
-      canIUse() {
-        return true;
-      },
-    };
-    const onChange = vi.fn();
-    const instance = getInstance(
-      'GuideTour',
-      {
-        onChange,
-      },
-      my
-    );
-
-    instance.callMethod('onSwiperChange', { detail: { current: 1 } });
-    expect(instance.getData().mixin.value).toBe(1);
-    expect(onChange).toBeCalledWith(1);
-  });
-  it('guideTour controlled', () => {
-    const my = {
-      canIUse() {
-        return true;
-      },
-    };
-    const onChange = vi.fn();
-    const instance = getInstance(
-      'GuideTour',
-      {
-        onChange,
-        current: 0,
-      },
-      my
-    );
-    instance.callMethod('onNext');
-    expect(instance.getData().mixin.value).toBe(0);
-    expect(onChange).toBeCalledWith(1);
-  });
-});
diff --git a/tests/alipay/GuideTour/index.test.ts b/tests/alipay/GuideTour/index.test.ts
new file mode 100644
index 000000000..83eb73235
--- /dev/null
+++ b/tests/alipay/GuideTour/index.test.ts
@@ -0,0 +1,70 @@
+import { getInstance } from 'tests/utils';
+import { describe, it, expect, vi } from 'vitest';
+import { IGuideTour } from '../../../src/GuideTour/props';
+
+const createGuideTour = (options: Partial<IGuideTour>) => {
+  const my = {
+    canIUse() {
+      return true;
+    },
+  };
+  const onChange = vi.fn();
+  const onCancel = vi.fn();
+  const instance = getInstance(
+    'GuideTour',
+    {
+      onCancel,
+      onChange,
+      ...options,
+    },
+    my
+  );
+  return {
+    instance,
+    onCancel,
+    onChange,
+  };
+};
+
+describe('guideTour onCancel', () => {
+  it('guideTour onCancel', () => {
+    const { instance, onCancel } = createGuideTour({});
+    instance.callMethod('onCancel');
+    expect(onCancel).toBeCalled();
+  });
+});
+
+describe('guideTour onChange', () => {
+  it('guideTour onNext', () => {
+    const { instance, onChange } = createGuideTour({});
+    instance.callMethod('onNext');
+    expect(instance.getData().mixin.value).toBe(1);
+    expect(onChange).toBeCalledWith(1);
+  });
+
+  it('guideTour onPrev', () => {
+    const { instance, onChange } = createGuideTour({
+      defaultCurrent: 1,
+    });
+
+    instance.callMethod('onPrev');
+    expect(instance.getData().mixin.value).toBe(0);
+    expect(onChange).toBeCalledWith(0);
+  });
+  it('guideTour onSwiperChange', () => {
+    const { instance, onChange } = createGuideTour({
+      defaultCurrent: 1,
+    });
+    instance.callMethod('onSwiperChange', { detail: { current: 1 } });
+    expect(instance.getData().mixin.value).toBe(1);
+    expect(onChange).toBeCalledWith(1);
+  });
+  it('guideTour controlled', () => {
+    const { instance, onChange } = createGuideTour({
+      current: 0,
+    });
+    instance.callMethod('onNext');
+    expect(instance.getData().mixin.value).toBe(0);
+    expect(onChange).toBeCalledWith(1);
+  });
+});