diff --git a/pages.json b/pages.json
index ff494f116694bb3ac993b17baf0f14a3e04bdacf..1a6e66945378dc766cb9374a20c9d74faf0e7f9f 100644
--- a/pages.json
+++ b/pages.json
@@ -96,6 +96,30 @@
             "style": {
                 "navigationBarTitleText": "数据存储"
             }
+        },
+        {
+            "path": "pages/API/action-sheet/action-sheet",
+            "style": {
+                "navigationBarTitleText": "操作菜单"
+            }
+        },
+        {
+            "path": "pages/API/modal/modal",
+            "style": {
+                "navigationBarTitleText": "模态弹窗"
+            }
+        },
+        {
+            "path": "pages/API/show-loading/show-loading",
+            "style": {
+                "navigationBarTitleText": "加载提示框"
+            }
+        },
+        {
+            "path": "pages/API/toast/toast",
+            "style": {
+                "navigationBarTitleText": "消息提示框"
+            }
         }
     ],
     "globalStyle": {
diff --git a/pages/API/action-sheet/action-sheet.uvue b/pages/API/action-sheet/action-sheet.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..b0787a8306c1014345cf154bc69d0a92a1cb6bb2
--- /dev/null
+++ b/pages/API/action-sheet/action-sheet.uvue
@@ -0,0 +1,64 @@
+<template>
+    <view>
+        <page-head :title="title"></page-head>
+        <view class="uni-padding-wrap">
+            <view class="uni-btn-v">
+                <button class="target" type="default" @tap="actionSheetTap">弹出action sheet</button>
+            </view>
+        </view>
+    </view>
+</template>
+<script lang="ts">
+    export default {
+        data() {
+            return {
+                title: 'action-sheet',
+                // #ifdef H5
+                buttonRect: {},
+                // #endif
+            }
+        },
+        // #ifdef H5
+        onReady() {
+            this.getNodeInfo()
+            window.addEventListener('resize', this.getNodeInfo)
+        },
+        beforeDestroy() {
+            window.removeEventListener('resize', this.getNodeInfo)
+        },
+        // #endif
+        methods: {
+            actionSheetTap() {
+                const that = this
+                uni.showActionSheet({
+                    title: '标题',
+                    itemList: ['item1', 'item2', 'item3', 'item4'],
+                    // #ifdef H5
+                    popover: {
+                        // 104: navbar + topwindow 高度，暂时 fix createSelectorQuery 在 pc 上获取 top 不准确的 bug
+                        top: that.buttonRect.top + 104 + that.buttonRect.height,
+                        left: that.buttonRect.left + that.buttonRect.width / 2
+                    },
+                    // #endif
+                    success: (e) => {
+                        console.log(e.tapIndex);
+                        uni.showToast({
+                            title: "点击了第" + e.tapIndex + "个选项",
+                            icon: "none"
+                        })
+                    }
+                })
+            },
+            // #ifdef H5
+            getNodeInfo() {
+                uni.createSelectorQuery().select('.target').boundingClientRect().exec((ret) => {
+                    const rect = ret[0]
+                    if (rect) {
+                        this.buttonRect = rect
+                    }
+                });
+            }
+            // #endif
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/pages/API/modal/modal.uvue b/pages/API/modal/modal.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..3528598a1fb4ab257a98a903b4da6f235cd34afc
--- /dev/null
+++ b/pages/API/modal/modal.uvue
@@ -0,0 +1,37 @@
+<template>
+    <view>
+        <page-head :title="title"></page-head>
+        <view class="uni-padding-wrap uni-common-mt">
+            <view class="uni-btn-v">
+                <button class="uni-btn" type="default" @tap="modalTap">有标题的modal</button>
+                <button class="uni-btn" type="default" @tap="noTitlemodalTap">无标题的modal</button>
+            </view>
+        </view>
+    </view>
+</template>
+<script lang="ts">
+    export default {
+        data() {
+            return {
+                title: 'modal'
+            }
+        },
+        methods: {
+            modalTap: function () {
+                uni.showModal({
+                    title: "弹窗标题",
+                    content: "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内",
+                    showCancel: false,
+                    confirmText: "确定"
+                })
+            },
+            noTitlemodalTap: function () {
+                uni.showModal({
+                    content: "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内",
+                    confirmText: "确定",
+                    cancelText: "取消"
+                })
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/pages/API/show-loading/show-loading.uvue b/pages/API/show-loading/show-loading.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..875fb02cc719b5a7bfb7f706dc40633cc471b87a
--- /dev/null
+++ b/pages/API/show-loading/show-loading.uvue
@@ -0,0 +1,45 @@
+<template>
+    <view>
+        <page-head :title="title"></page-head>
+        <view class="uni-padding-wrap">
+            <view class="uni-btn-v">
+                <button class="uni-btn" type="primary" @click="showLoading">显示 loading 提示框</button>
+                <!-- #ifndef MP-ALIPAY -->
+                <button class="uni-btn" @click="hideLoading">隐藏 loading 提示框</button>
+                <!-- #endif -->
+            </view>
+        </view>
+    </view>
+</template>
+<script lang="ts">
+    export default {
+        data() {
+            return {
+                title: 'loading'
+            }
+        },
+        methods: {
+            showLoading: function() {
+                uni.showLoading({
+                    title: 'loading'
+                });
+
+                // #ifdef MP-ALIPAY
+                this._showTimer && clearTimeout(this._showTimer);
+                this._showTimer = setTimeout(() => {
+                    this.hideLoading();
+                }, 3000)
+                // #endif
+            },
+            hideLoading: function() {
+                uni.hideLoading();
+            }
+        }
+        // #ifdef MP-ALIPAY
+        ,
+        onUnload() {
+            this._showTimer && clearTimeout(this._showTimer);
+        }
+        // #endif
+    }
+</script>
\ No newline at end of file
diff --git a/pages/API/toast/toast.uvue b/pages/API/toast/toast.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..4118b2697a9d4fb09d5868f2749d7464461ec6ef
--- /dev/null
+++ b/pages/API/toast/toast.uvue
@@ -0,0 +1,80 @@
+<template>
+    <view>
+        <page-head :title="title"></page-head>
+        <view class="uni-padding-wrap">
+            <view class="uni-btn-v">
+                <button class="uni-btn" type="default" @tap="toast1Tap">点击弹出默认toast</button>
+                <button class="uni-btn" type="default" @tap="toast2Tap">点击弹出设置duration的toast</button>
+                <button class="uni-btn" type="default" @tap="toast3Tap">点击弹出显示loading的toast</button>
+                <!-- #ifndef MP-ALIPAY -->
+                <button class="uni-btn" type="default" @tap="toast4Tap">点击弹出显示自定义图片的toast</button>
+                <!-- #endif -->
+                <!-- #ifdef APP-PLUS -->
+                <button class="uni-btn" type="default" @tap="toast5Tap">点击显示无图标的居底toast</button>
+                <!-- #endif -->
+                <button class="uni-btn" type="default" @tap="hideToast">点击隐藏toast</button>
+            </view>
+        </view>
+    </view>
+</template>
+<script lang="ts">
+    export default {
+        data() {
+            return {
+                title: 'toast',
+                _showTimer: 0
+            }
+        },
+        // #ifdef MP-ALIPAY
+        onUnload() {
+            clearTimeout(this._showTimer);
+        },
+        // #endif
+        methods: {
+            toast1Tap: function () {
+                uni.showToast({
+                    title: "默认"
+                })
+            },
+            toast2Tap: function () {
+                uni.showToast({
+                    title: "duration 3000",
+                    duration: 3000
+                })
+            },
+            toast3Tap: function () {
+                uni.showToast({
+                    title: "loading",
+                    icon: "loading",
+                    duration: 5000
+                })
+                // #ifdef MP-ALIPAY
+                this._showTimer = setTimeout(() => {
+                    // icon 是 loading 时，showToast 实际执行的是 showLoading
+                    my.hideLoading()
+                    // 执行完所有代码再清除定时器
+                    clearTimeout(this._showTimer);
+                }, 3000)
+                // #endif
+
+            },
+            toast4Tap: function () {
+                uni.showToast({
+                    title: "logo",
+                    image: "/static/uni.png"
+                })
+            },
+            // #ifdef APP-PLUS
+            toast5Tap: function () {
+                uni.showToast({
+                    title: "显示一段轻提示",
+                    position: 'bottom'
+                })
+            },
+            // #endif
+            hideToast: function () {
+                uni.hideToast()
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/pages/tabBar/API/API.uvue b/pages/tabBar/API/API.uvue
index 93b5c5e9ba82dfaf17cb55fb640f9feb24fa9b6b..43e4544a63f6d706bf61ecdb4d079d583bc777c8 100644
--- a/pages/tabBar/API/API.uvue
+++ b/pages/tabBar/API/API.uvue
@@ -16,7 +16,8 @@
             </view>
             <view class="uni-panel-c" v-if="item.open">
                 <view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)">
-                    <text class="uni-navigate-text" :class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text>
+                    <text class="uni-navigate-text"
+                        :class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text>
                     <image :src="arrowRightIcon" class="uni-icon"></image>
                 </view>
             </view>
@@ -94,18 +95,22 @@
                         {
                             name: "显示操作菜单",
                             url: "action-sheet",
+                            enable: true
                         },
                         {
                             name: "显示模态弹窗",
                             url: "modal",
+                            enable: true
                         },
                         {
                             name: "显示加载提示框",
                             url: "show-loading",
+                            enable: true
                         },
                         {
                             name: "显示消息提示框",
                             url: "toast",
+                            enable: true
                         },
                     ] as Page[],
                 },
@@ -317,7 +322,7 @@
                     pages: [
                         {
                             name: "数据存储（key-value）",
-                            url: "storage",
+                            url: "storage",
                             enable: true
                         },
                         // #ifdef APP-PLUS