diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
index 2cb661a..574beef 100644
--- a/.stylelintrc.cjs
+++ b/.stylelintrc.cjs
@@ -53,5 +53,6 @@ module.exports = {
     'no-duplicate-selectors': null,
     'scss/comment-no-empty': null,
     'selector-class-pattern': null,
+    'font-family-no-missing-generic-family-keyword': null,
   },
 }
diff --git a/manifest.config.ts b/manifest.config.ts
index 4cc4e1f..6f8667a 100644
--- a/manifest.config.ts
+++ b/manifest.config.ts
@@ -89,6 +89,7 @@ export default defineManifestConfig({
   },
   'mp-alipay': {
     usingComponents: true,
+    styleIsolation: 'shared',
   },
   'mp-baidu': {
     usingComponents: true,
diff --git a/package.json b/package.json
index 5fc8aae..efde5f4 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,8 @@
     "pinia-plugin-persistedstate": "3.2.1",
     "qs": "6.5.3",
     "vue": "3.4.26",
-    "wot-design-uni": "^1.2.13"
+    "wot-design-uni": "^1.2.13",
+    "z-paging": "^2.7.10"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.4.3",
diff --git a/pages.config.ts b/pages.config.ts
index 68f2e60..994644c 100644
--- a/pages.config.ts
+++ b/pages.config.ts
@@ -12,6 +12,8 @@ export default defineUniPages({
     autoscan: true,
     custom: {
       '^wd-(.*)': 'wot-design-uni/components/wd-$1/wd-$1.vue',
+      '^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)':
+        'z-paging/components/z-paging$1/z-paging$1.vue',
     },
   },
   tabBar: {
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 5a296ff..768d875 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,5 +1,17 @@
 <template>
-  <view class="default-layout">
+  <wd-config-provider :themeVars="themeVars">
     <slot />
-  </view>
+    <wd-toast />
+    <wd-message-box />
+  </wd-config-provider>
 </template>
+
+<script lang="ts" setup>
+import type { ConfigProviderThemeVars } from 'wot-design-uni'
+
+const themeVars: ConfigProviderThemeVars = {
+  // colorTheme: 'red',
+  // buttonPrimaryBgColor: '#07c160',
+  // buttonPrimaryColor: '#07c160',
+}
+</script>
diff --git a/src/layouts/demo.vue b/src/layouts/demo.vue
index 44407ec..768d875 100644
--- a/src/layouts/demo.vue
+++ b/src/layouts/demo.vue
@@ -1,5 +1,17 @@
 <template>
-  <view class="demo-layout">
+  <wd-config-provider :themeVars="themeVars">
     <slot />
-  </view>
+    <wd-toast />
+    <wd-message-box />
+  </wd-config-provider>
 </template>
+
+<script lang="ts" setup>
+import type { ConfigProviderThemeVars } from 'wot-design-uni'
+
+const themeVars: ConfigProviderThemeVars = {
+  // colorTheme: 'red',
+  // buttonPrimaryBgColor: '#07c160',
+  // buttonPrimaryColor: '#07c160',
+}
+</script>
diff --git a/src/manifest.json b/src/manifest.json
index f6ad007..0999421 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -59,7 +59,8 @@
     "usingComponents": true
   },
   "mp-alipay": {
-    "usingComponents": true
+    "usingComponents": true,
+    "styleIsolation": "shared"
   },
   "mp-baidu": {
     "usingComponents": true
diff --git a/src/pages.json b/src/pages.json
index 5bcd6be..51a7e3a 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -9,7 +9,8 @@
   "easycom": {
     "autoscan": true,
     "custom": {
-      "^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
+      "^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue",
+      "^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue"
     }
   },
   "tabBar": {
diff --git a/src/pages/index/about.vue b/src/pages/index/about.vue
index 417fa0a..c1b7a52 100644
--- a/src/pages/index/about.vue
+++ b/src/pages/index/about.vue
@@ -25,6 +25,14 @@
       <wd-button type="primary" @click="gotoPage('upload')">上传demo</wd-button>
       <wd-button type="primary" @click="gotoPage('upload2')">上传demo2(请求状态一体化)</wd-button>
     </view>
+    <view class="text-center mt-8">
+      <text mr-2>iconfont:</text>
+      <text class="gap-2 text-red">
+        <i class="iconfont icon-my" />
+        <i class="iconfont icon-chat" />
+        <i class="iconfont icon-package" />
+      </text>
+    </view>
   </view>
 </template>
 
diff --git a/src/style/iconfont.css b/src/style/iconfont.css
new file mode 100644
index 0000000..35da86c
--- /dev/null
+++ b/src/style/iconfont.css
@@ -0,0 +1,28 @@
+@font-face {
+  font-family: 'iconfont'; /* Project id 4543091 */
+  src:
+    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOwAAsAAAAAB9AAAANjAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDHAqDBIJqATYCJAMQCwoABCAFhGcHPRvnBsgusG3kMyE15/44PsBX09waBHv0REDt97oHAQDFrOIyPirRiULQ+TJcXV0hCYTuVFcBC915/2vX/32Q80hkZ5PZGZ9snvwruVLloidKqYN6iKC53bOtbKwVLSIi3W6zCWZbs3VbER3j9JpGX3ySYcc94IQRTK5s4epS/jSqIgvg37qlY2/jwQN7D9ADpfRCmIknQByTscVZPTBr+hnnCKg2o4bjakvXEPjuY65DJGeJNtBUhn1JxOBuB2UZmUpBOXdsFp4oxOv4GHgs3h/+wRDcicqSZJG1q9kK1z/Af9NpqxjpC2QaAdpHlCFh4spcYXs5sMWpSk5wUj31G2dLQKVKkZ/w7f/8/i/A3JVUSZK9f7xIKJeU14IFpBI/Qfkkz46GT/CuaGREfCtKJUougWeQWHvVC5Lcz2BGS+SePR99vj3yjJx7h574tp7uWcOh4yfaTjS/245TT/vkQrN+a7RLkK8+Vd+bz+FSGh+9srDQKPeJ2s29z7ah4+efdoxefRbbGwfy7ht+SuIWukzsu1b6ePP+6kN1aamb47qsPim1Ia3xdEpDcl1dckPKGYnneI23+57r2W1Mmkqs6ajrChRCs5qyQ66rTVWhgZaG7toOeHm5cxn0sSQuNDEgcUTdNTSupKI1JRZih/JssAUKezPeOJJzbNozF6zWJuuVavVU5Tgtkop/SDzHa7ytvnCTq0PhkEfi4xLLtb0PuwyOAYqmrYQApFJyoJjTnfz+ve94vvv2f/yWgxl8Jd8Di2DRDPuob59mU/+VfDCROQyR8xSnmP9fXm7liagmN39OlmbvjqG0sMsJKrU0EFXogaRSH5bNY1CmxhyUq7QC1cY1T67RwuQk5CoM2RUQNLoEUb03kDS6h2XzcyjT7iOUa/QXqq1Hn6/GUBAaGcGcWJFlGUmCoVOp8kLvABHnVczGYiOE2SVEUH5OXj/TSnTCDjHAviAWcE4RZYaGWszNiKoayGSGTASeY+PcrMjNpVMvyREMDRoxBMYRVojFMkQiMOhohubdzxtAiOapMMbERpKMnQT9SL4ceQysVdJZVa9kEbsFogIcRyEUE2kN0mL7CDVIGhBzupWMEHA5bDvipgq5hKJcKef8ivbx1kC15KgcYkghhzLxYNntxoKCReJ82jAHAAA=')
+      format('woff2'),
+    url('//at.alicdn.com/t/c/font_4543091_njpo5b95nl.woff?t=1715485842402') format('woff'),
+    url('//at.alicdn.com/t/c/font_4543091_njpo5b95nl.ttf?t=1715485842402') format('truetype');
+}
+
+.iconfont {
+  font-family: 'iconfont' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-my:before {
+  content: '\e78c';
+}
+
+.icon-package:before {
+  content: '\e9c2';
+}
+
+.icon-chat:before {
+  content: '\e600';
+}
diff --git a/src/style/index.scss b/src/style/index.scss
index 3456387..86184d9 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -1,3 +1,5 @@
+@import './iconfont.css';
+
 .test {
   // 可以通过 @apply 多个样式封装整体样式
   @apply mt-4 ml-4;
@@ -5,3 +7,12 @@
   padding-top: 4px;
   color: red;
 }
+
+:root,
+page {
+  // 修改按主题色
+  // --wot-color-theme: #37c2bc;
+
+  // 修改按钮背景色
+  // --wot-button-primary-bg-color: green;
+}