diff --git a/pages/component/unicloud-db/unicloud-db.test.js b/pages/component/unicloud-db/unicloud-db.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..0d93113ae5e4d6bb519a96b3ad7fb7e7d199f5ae
--- /dev/null
+++ b/pages/component/unicloud-db/unicloud-db.test.js
@@ -0,0 +1,31 @@
+const PAGE_PATH = '/pages/unicloud-db/unicloud-db'
+
+describe('unicloud-db', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
+  it('add/get/update/remove', async () => {
+    await page.callMethod('add')
+    await page.waitFor(3000)
+    const {
+      $addResult
+    } = await page.data()
+    expect($addResult['id'].length > 0).toBe(true)
+
+    await page.callMethod('update', $addResult['id'])
+    await page.waitFor(3000)
+    const {
+      $updateResult
+    } = await page.data()
+    expect($updateResult['updated']).toBe(1)
+
+    await page.callMethod('remove', $addResult['id'])
+    await page.waitFor(3000)
+    const {
+      $removeResult
+    } = await page.data()
+    expect($removeResult['deleted']).toBe(1)
+  })
+})
\ No newline at end of file
diff --git a/pages/component/unicloud-db/unicloud-db.uvue b/pages/component/unicloud-db/unicloud-db.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..9bec19567f86d4fc495c60dc1069f4aad4cbc248
--- /dev/null
+++ b/pages/component/unicloud-db/unicloud-db.uvue
@@ -0,0 +1,180 @@
+<template>
+  <view class="content">
+    <unicloud-db ref="udb" class="unicloud-db" v-slot:default="{data, pagination, loading, error}"
+      :collection="collection" :getcount="true" loadtime="manual">
+      <list-view v-if="data.length>0" ref="listView" class="list" :scroll-y="true" @scrolltolower="loadMore()">
+        <list-item class="list-item" v-for="(item, _) in data">
+          <view class="list-item-fill">
+            <text>{{item}}</text>
+          </view>
+          <view>
+            <text class="list-item-remove" @click="remove(item.getString('_id')!)">❌</text>
+          </view>
+        </list-item>
+      </list-view>
+      <text class="loading" v-if="loading">Loading...</text>
+      <view class="error" v-if="error!=null">{{error.errMsg}}</view>
+      <view class="pagination" v-if="data.length>0">
+        <text class="pagination-item">{{data.length}} / {{pagination.count}}</text>
+      </view>
+    </unicloud-db>
+    <view class="btn-group">
+      <button class="btn btn-add" @click="add()">Add</button>
+      <button class="btn btn-get" @click="get()">Get</button>
+    </view>
+  </view>
+</template>
+
+<script>
+  const db = uniCloud.databaseForJQL()
+
+  export default {
+    data() {
+      return {
+        collection: 'unicloud-db-test',
+        collectionList: [
+          db.collection('book').where('name == "水浒传"').getTemp(),
+        ] as UTSJSONObject[],
+        $uniCloudElement: null as UniCloudDBElement | null,
+        $isTesting: false,
+        $addResult: {},
+        $updateResult: {},
+        $removeResult: {}
+      }
+    },
+    onReady() {
+      this.$uniCloudElement = this.$refs['udb'] as UniCloudDBElement
+      this.get();
+    },
+    onPullDownRefresh() {
+      this.$uniCloudElement!.loadData({
+        clear: true,
+        success: (_ : UniCloudDBGetResult) => {
+          uni.stopPullDownRefresh()
+        }
+      })
+    },
+    methods: {
+      loadMore() {
+        this.$uniCloudElement!.loadMore()
+      },
+      get() {
+        this.$uniCloudElement!.loadData({
+          clear: true
+        })
+      },
+      add() {
+        const value = {
+          title: "title-" + Date.now(),
+          comment: "comment" + Date.now()
+        };
+        this.$uniCloudElement!.add(value, {
+          showToast: false,
+          success: (res : UniCloudDBAddResult) => {
+            this.$addResult = {
+              id: res.id
+            };
+            this.get();
+          },
+          fail: (err : any | null) => {
+            this.showError(err)
+          }
+        })
+      },
+      update(id : string) {
+        const value = {
+          title: "title-" + Date.now(),
+          comment: "comment" + Date.now()
+        };
+        this.$uniCloudElement!.update(id, value, {
+          showToast: false,
+          needLoading: true,
+          needConfirm: false,
+          loadingTitle: "正在更新...",
+          success: (res : UniCloudDBUpdateResult) => {
+            this.$updateResult = {
+              updated: res.updated
+            }
+          },
+          fail: (err : any | null) => {
+            this.showError(err)
+          }
+        })
+      },
+      remove(id : string) {
+        this.$uniCloudElement!.remove(id, {
+          showToast: false,
+          needConfirm: false,
+          needLoading: false,
+          success: (res : UniCloudDBRemoveResult) => {
+            this.$removeResult = {
+              deleted: res.deleted
+            }
+          },
+          fail: (err : any | null) => {
+            this.showError(err)
+          }
+        })
+      },
+      onQueryLoad(data : Array<UTSJSONObject>, ended : boolean, pagination : UTSJSONObject) {
+        console.log(data, ended, pagination);
+      },
+      showError(err : any | null) {
+        const error = err as UniCloudError
+        uni.showModal({
+          content: error.errMsg,
+          showCancel: false
+        })
+      }
+    }
+  }
+</script>
+
+<style>
+  .content {
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .list {
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .list-item {
+    flex-direction: row;
+    padding: 10px;
+  }
+
+  .list-item-fill {
+    flex: 1;
+  }
+
+  .list-item-remove {
+    padding: 10px;
+  }
+
+  .loading {
+    padding: 10px;
+    text-align: center;
+  }
+
+  .pagination {
+    flex-direction: row;
+    background-color: #f2f2f2;
+  }
+
+  .pagination-item {
+    margin: auto;
+    padding: 5px 10px;
+  }
+
+  .btn-group {
+    flex-direction: row;
+  }
+
+  .btn {
+    flex: 1;
+    margin: 10px;
+  }
+</style>
\ No newline at end of file
diff --git a/uniCloud-aliyun/database/unicloud-db-test.schema.json b/uniCloud-aliyun/database/unicloud-db-test.schema.json
new file mode 100644
index 0000000000000000000000000000000000000000..7f4a69440e95ab9334f33c4aa8b1d358125e089b
--- /dev/null
+++ b/uniCloud-aliyun/database/unicloud-db-test.schema.json
@@ -0,0 +1,40 @@
+{
+  "bsonType": "object",
+  "permission": {
+    "read": true,
+    "create": true,
+    "update": true,
+    "delete": true
+  },
+  "required": ["title", "comment"],
+  "properties": {
+    "_id": {
+      "description": "存储文档 ID（用户 ID），系统自动生成"
+    },
+    "title": {
+      "bsonType": "string",
+      "title": "姓名",
+      "description": "姓名",
+      "order": 1,
+      "trim": "both"
+    },
+    "comment": {
+      "bsonType": "string",
+      "title": "备注",
+      "order": 5,
+      "description": "备注",
+      "trim": "both",
+      "component": {
+        "name": "textarea"
+      }
+    },
+    "create_date": {
+      "bsonType": "timestamp",
+      "description": "创建时间",
+      "forceDefaultValue": {
+        "$env": "now"
+      }
+    }
+  },
+  "version": "0.0.1"
+}
\ No newline at end of file