diff --git a/miniprogram/components/navigation-bar/navigation-bar.json b/miniprogram/components/navigation-bar/navigation-bar.json
index 4a20f17..278aeab 100644
--- a/miniprogram/components/navigation-bar/navigation-bar.json
+++ b/miniprogram/components/navigation-bar/navigation-bar.json
@@ -1,5 +1,5 @@
 {
-  "component": true,
-  "styleIsolation": "apply-shared",
-  "usingComponents": {}
-}
\ No newline at end of file
+    "component": true,
+    "styleIsolation": "apply-shared",
+    "usingComponents": {}
+}
diff --git a/miniprogram/components/navigation-bar/navigation-bar.less b/miniprogram/components/navigation-bar/navigation-bar.less
index 8bd379e..eff1536 100644
--- a/miniprogram/components/navigation-bar/navigation-bar.less
+++ b/miniprogram/components/navigation-bar/navigation-bar.less
@@ -1,96 +1,98 @@
 .weui-navigation-bar {
-  --weui-FG-0:rgba(0,0,0,.9);
-  --height: 44px;
-  --left: 16px;
+    --weui-FG-0: rgba(0, 0, 0, .9);
+    --height: 44px;
+    --left: 16px;
 }
+
 .weui-navigation-bar .android {
-  --height: 48px;
+    --height: 48px;
 }
 
 .weui-navigation-bar {
-  overflow: hidden;
-  color: var(--weui-FG-0);
-  flex: none;
+    overflow: hidden;
+    color: var(--weui-FG-0);
+    flex: none;
 }
 
 .weui-navigation-bar__inner {
-  position: relative;
-  top: 0;
-  left: 0;
-  height: calc(var(--height) + env(safe-area-inset-top));
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding-top: env(safe-area-inset-top);
-  width: 100%;
-  box-sizing: border-box;
+    position: relative;
+    top: 0;
+    left: 0;
+    height: calc(var(--height) + env(safe-area-inset-top));
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding-top: env(safe-area-inset-top);
+    width: 100%;
+    box-sizing: border-box;
 }
 
 .weui-navigation-bar__left {
-  position: relative;
-  padding-left: var(--left);
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  height: 100%;
-  box-sizing: border-box;
+    position: relative;
+    padding-left: var(--left);
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    height: 100%;
+    box-sizing: border-box;
 }
 
 .weui-navigation-bar__btn_goback_wrapper {
-  padding: 11px 18px 11px 16px;
-  margin: -11px -18px -11px -16px;
+    padding: 11px 18px 11px 16px;
+    margin: -11px -18px -11px -16px;
 }
 
 .weui-navigation-bar__btn_goback_wrapper.weui-active {
-  opacity: 0.5;
+    opacity: 0.5;
 }
 
 .weui-navigation-bar__btn_goback {
-  font-size: 12px;
-  width: 12px;
-  height: 24px;
-  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
-  mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
-  -webkit-mask-size: cover;
-  mask-size: cover;
-  background-color: var(--weui-FG-0);
+    font-size: 12px;
+    width: 12px;
+    height: 24px;
+    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
+    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    background-color: var(--weui-FG-0);
 }
 
 .weui-navigation-bar__center {
-  font-size: 17px;
-  text-align: center;
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  flex: 1;
-  height: 100%;
+    font-size: 17px;
+    text-align: center;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    flex: 1;
+    height: 100%;
 }
 
 .weui-navigation-bar__loading {
-  margin-right: 4px;
-  align-items: center;
+    margin-right: 4px;
+    align-items: center;
 }
 
 .weui-loading {
-  font-size: 16px;
-  width: 16px;
-  height: 16px;
-  display: block;
-  background: transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
-  background-size: 100%;
-  margin-left: 0;
-  animation: loading linear infinite 1s;
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+    display: block;
+    background: transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
+    background-size: 100%;
+    margin-left: 0;
+    animation: loading linear infinite 1s;
 }
 
 @keyframes loading {
-  from {
-    transform: rotate(0);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+    from {
+        transform: rotate(0);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
\ No newline at end of file
diff --git a/miniprogram/components/navigation-bar/navigation-bar.ts b/miniprogram/components/navigation-bar/navigation-bar.ts
index 4466e8e..464c928 100644
--- a/miniprogram/components/navigation-bar/navigation-bar.ts
+++ b/miniprogram/components/navigation-bar/navigation-bar.ts
@@ -1,105 +1,106 @@
 Component({
-  options: {
-    multipleSlots: true // 在组件定义时的选项中启用多slot支持
-  },
-  /**
-   * 组件的属性列表
-   */
-  properties: {
-    extClass: {
-      type: String,
-      value: ''
+    options: {
+        multipleSlots: true, // 在组件定义时的选项中启用多slot支持
     },
-    title: {
-      type: String,
-      value: ''
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        extClass: {
+            type: String,
+            value: '',
+        },
+        title: {
+            type: String,
+            value: '',
+        },
+        background: {
+            type: String,
+            value: '',
+        },
+        color: {
+            type: String,
+            value: '',
+        },
+        back: {
+            type: Boolean,
+            value: true,
+        },
+        loading: {
+            type: Boolean,
+            value: false,
+        },
+        homeButton: {
+            type: Boolean,
+            value: false,
+        },
+        animated: {
+            // 显示隐藏的时候opacity动画效果
+            type: Boolean,
+            value: true,
+        },
+        show: {
+            // 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
+            type: Boolean,
+            value: true,
+            observer: '_showChange',
+        },
+        // back为true的时候，返回的页面深度
+        delta: {
+            type: Number,
+            value: 1,
+        },
     },
-    background: {
-      type: String,
-      value: ''
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        displayStyle: '',
     },
-    color: {
-      type: String,
-      value: ''
+    lifetimes: {
+        attached() {
+            const rect = wx.getMenuButtonBoundingClientRect();
+            wx.getSystemInfo({
+                success: (res) => {
+                    const isAndroid = res.platform === 'android';
+                    const isDevtools = res.platform === 'devtools';
+                    this.setData({
+                        ios: !isAndroid,
+                        innerPaddingRight: `padding-right: ${res.windowWidth - rect.left}px`,
+                        leftWidth: `width: ${res.windowWidth - rect.left}px`,
+                        safeAreaTop:
+                            isDevtools || isAndroid
+                                ? `height: calc(var(--height) + ${res.safeArea.top}px); padding-top: ${res.safeArea.top}px`
+                                : ``,
+                    });
+                },
+            });
+        },
     },
-    back: {
-      type: Boolean,
-      value: true
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        _showChange(show: boolean) {
+            const animated = this.data.animated;
+            let displayStyle = '';
+            if (animated) {
+                displayStyle = `opacity: ${show ? '1' : '0'};transition:opacity 0.5s;`;
+            } else {
+                displayStyle = `display: ${show ? '' : 'none'}`;
+            }
+            this.setData({
+                displayStyle,
+            });
+        },
+        back() {
+            const data = this.data;
+            if (data.delta) {
+                wx.navigateBack({
+                    delta: data.delta,
+                });
+            }
+            this.triggerEvent('back', { delta: data.delta }, {});
+        },
     },
-    loading: {
-      type: Boolean,
-      value: false
-    },
-    homeButton: {
-      type: Boolean,
-      value: false,
-    },
-    animated: {
-      // 显示隐藏的时候opacity动画效果
-      type: Boolean,
-      value: true
-    },
-    show: {
-      // 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
-      type: Boolean,
-      value: true,
-      observer: '_showChange'
-    },
-    // back为true的时候，返回的页面深度
-    delta: {
-      type: Number,
-      value: 1
-    },
-  },
-  /**
-   * 组件的初始数据
-   */
-  data: {
-    displayStyle: ''
-  },
-  lifetimes: {
-    attached() {
-      const rect = wx.getMenuButtonBoundingClientRect()
-      wx.getSystemInfo({
-        success: (res) => {
-          const isAndroid = res.platform === 'android'
-          const isDevtools = res.platform === 'devtools'
-          this.setData({
-            ios: !isAndroid,
-            innerPaddingRight: `padding-right: ${res.windowWidth - rect.left}px`,
-            leftWidth: `width: ${res.windowWidth - rect.left }px`,
-            safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${res.safeArea.top}px); padding-top: ${res.safeArea.top}px` : ``
-          })
-        }
-      })
-    },
-  },
-  /**
-   * 组件的方法列表
-   */
-  methods: {
-    _showChange(show: boolean) {
-      const animated = this.data.animated
-      let displayStyle = ''
-      if (animated) {
-        displayStyle = `opacity: ${
-          show ? '1' : '0'
-        };transition:opacity 0.5s;`
-      } else {
-        displayStyle = `display: ${show ? '' : 'none'}`
-      }
-      this.setData({
-        displayStyle
-      })
-    },
-    back() {
-      const data = this.data
-      if (data.delta) {
-        wx.navigateBack({
-          delta: data.delta
-        })
-      }
-      this.triggerEvent('back', { delta: data.delta }, {})
-    }
-  },
-})
+});
diff --git a/miniprogram/components/navigation-bar/navigation-bar.wxml b/miniprogram/components/navigation-bar/navigation-bar.wxml
index be9a663..c6075f9 100644
--- a/miniprogram/components/navigation-bar/navigation-bar.wxml
+++ b/miniprogram/components/navigation-bar/navigation-bar.wxml
@@ -1,64 +1,61 @@
 <view class="weui-navigation-bar {{extClass}}">
-  <view class="weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}" style="color: {{color}}; background: {{background}}; {{displayStyle}}; {{innerPaddingRight}}; {{safeAreaTop}};">
+    <view
+        class="weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}"
+        style="color: {{color}}; background: {{background}}; {{displayStyle}}; {{innerPaddingRight}}; {{safeAreaTop}};">
+        <!-- 左侧按钮 -->
+        <view class="weui-navigation-bar__left" style="{{leftWidth}};">
+            <block wx:if="{{back || homeButton}}">
+                <!-- 返回上一页 -->
+                <block wx:if="{{back}}">
+                    <view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_goback">
+                        <view
+                            bindtap="back"
+                            class="weui-navigation-bar__btn_goback_wrapper"
+                            hover-class="weui-active"
+                            hover-stay-time="100"
+                            aria-role="button"
+                            aria-label="返回">
+                            <view
+                                class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view>
+                        </view>
+                    </view>
+                </block>
+                <!-- 返回首页 -->
+                <block wx:if="{{homeButton}}">
+                    <view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_home">
+                        <view
+                            bindtap="home"
+                            class="weui-navigation-bar__btn_home_wrapper"
+                            hover-class="weui-active"
+                            aria-role="button"
+                            aria-label="首页">
+                            <view
+                                class="weui-navigation-bar__button weui-navigation-bar__btn_home"></view>
+                        </view>
+                    </view>
+                </block>
+            </block>
+            <block wx:else>
+                <slot name="left"></slot>
+            </block>
+        </view>
 
-    <!-- 左侧按钮 -->
-    <view class='weui-navigation-bar__left' style="{{leftWidth}};">
-      <block wx:if="{{back || homeButton}}">
-        <!-- 返回上一页 -->
-        <block wx:if="{{back}}">
-          <view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_goback">
-            <view
-              bindtap="back"
-              class="weui-navigation-bar__btn_goback_wrapper"
-              hover-class="weui-active"
-              hover-stay-time="100"
-              aria-role="button"
-              aria-label="返回"
-            >
-              <view class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view>
+        <!-- 标题 -->
+        <view class="weui-navigation-bar__center">
+            <view wx:if="{{loading}}" class="weui-navigation-bar__loading" aria-role="alert">
+                <view class="weui-loading" aria-role="img" aria-label="加载中"></view>
             </view>
-          </view>
-        </block>
-        <!-- 返回首页 -->
-        <block wx:if="{{homeButton}}">
-          <view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_home">
-            <view
-              bindtap="home"
-              class="weui-navigation-bar__btn_home_wrapper"
-              hover-class="weui-active"
-              aria-role="button"
-              aria-label="首页"
-            >
-              <view class="weui-navigation-bar__button weui-navigation-bar__btn_home"></view>
-            </view>
-          </view>
-        </block>
-      </block>
-      <block wx:else>
-        <slot name="left"></slot>
-      </block>
-    </view>
+            <block wx:if="{{title}}">
+                <text>{{title}}</text>
+            </block>
+            <block wx:else>
+                <slot name="center"></slot>
+            </block>
+        </view>
 
-    <!-- 标题 -->
-    <view class='weui-navigation-bar__center'>
-      <view wx:if="{{loading}}" class="weui-navigation-bar__loading" aria-role="alert">
-        <view
-          class="weui-loading"
-          aria-role="img"
-          aria-label="加载中"
-        ></view>
-      </view>
-      <block wx:if="{{title}}">
-        <text>{{title}}</text>
-      </block>
-      <block wx:else>
-        <slot name="center"></slot>
-      </block>
+        <!-- 右侧留空 -->
+        <view class="weui-navigation-bar__right">
+            <slot name="right"></slot>
+        </view>
     </view>
-    
-    <!-- 右侧留空 -->
-    <view class='weui-navigation-bar__right'>
-      <slot name="right"></slot>
-    </view>
-  </view>
 </view>
diff --git a/miniprogram/components/word-card/word-card.json b/miniprogram/components/word-card/word-card.json
new file mode 100644
index 0000000..44daf20
--- /dev/null
+++ b/miniprogram/components/word-card/word-card.json
@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "styleIsolation": "apply-shared",
+    "usingComponents": {
+        "van-icon": "@vant/weapp/icon/index"
+    }
+}
diff --git a/miniprogram/components/word-card/word-card.less b/miniprogram/components/word-card/word-card.less
new file mode 100644
index 0000000..f82c59b
--- /dev/null
+++ b/miniprogram/components/word-card/word-card.less
@@ -0,0 +1,43 @@
+.word-card {
+    display: flex;
+    flex-direction: row;
+    // width: 324rpx;
+    height: 100rpx;
+    border-radius: 16rpx;
+    background-color: #EEFCFC;
+    align-items: center;
+    box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.35);
+
+    .color-box {
+        width: 60rpx;
+        height: 60rpx;
+        border-radius: 50%;
+        background-color: #ff0000;
+        margin-left: 20rpx;
+        border: 1rpx solid #141414;
+    }
+
+    .word-box {
+        margin: 0 24rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 82rpx;
+        height: 52rpx;
+        border: 1rpx solid #000;
+        background-color: #fff;
+
+        .word-content {
+            font-size: 28rpx;
+            color: #141414;
+            text-align: center;
+
+        }
+    }
+
+    .delete-icon {
+        padding: 20rpx;
+        margin-right: 8rpx;
+        color: #141414;
+    }
+}
\ No newline at end of file
diff --git a/miniprogram/components/word-card/word-card.ts b/miniprogram/components/word-card/word-card.ts
new file mode 100644
index 0000000..20d417b
--- /dev/null
+++ b/miniprogram/components/word-card/word-card.ts
@@ -0,0 +1,27 @@
+Component({
+    options: {
+        // multipleSlots: true, // 在组件定义时的选项中启用多slot支持
+    },
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        extClass: {
+            type: String,
+            value: '',
+        },
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        displayStyle: '',
+    },
+    lifetimes: {
+        attached() {},
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {},
+});
diff --git a/miniprogram/components/word-card/word-card.wxml b/miniprogram/components/word-card/word-card.wxml
new file mode 100644
index 0000000..515af29
--- /dev/null
+++ b/miniprogram/components/word-card/word-card.wxml
@@ -0,0 +1,9 @@
+<view class="word-card">
+    <view class="color-box"></view>
+    <view class="word-box">
+        <text class="word-content">文</text>
+    </view>
+    <view class="delete-icon">
+        <van-icon name="delete" custom-class="delete-icon-inner" size="44rpx" />
+    </view>
+</view>
diff --git a/miniprogram/components/word-input/word-input.json b/miniprogram/components/word-input/word-input.json
new file mode 100644
index 0000000..44daf20
--- /dev/null
+++ b/miniprogram/components/word-input/word-input.json
@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "styleIsolation": "apply-shared",
+    "usingComponents": {
+        "van-icon": "@vant/weapp/icon/index"
+    }
+}
diff --git a/miniprogram/components/word-input/word-input.less b/miniprogram/components/word-input/word-input.less
new file mode 100644
index 0000000..c47e8b9
--- /dev/null
+++ b/miniprogram/components/word-input/word-input.less
@@ -0,0 +1,22 @@
+.word-input-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    border-radius: 20rpx;
+    background-color: #f8f8f8;
+    align-items: center;
+
+    .word-input-icon {
+        // border: 1px solid red;
+        padding: 22rpx;
+    }
+
+    .word-input {
+        flex: 1;
+        height: 92rpx;
+        padding-right: 20rpx;
+        // padding: 0 20rpx 0 10rpx;
+        font-size: 28rpx;
+        line-height: 92rpx;
+    }
+}
\ No newline at end of file
diff --git a/miniprogram/components/word-input/word-input.ts b/miniprogram/components/word-input/word-input.ts
new file mode 100644
index 0000000..20d417b
--- /dev/null
+++ b/miniprogram/components/word-input/word-input.ts
@@ -0,0 +1,27 @@
+Component({
+    options: {
+        // multipleSlots: true, // 在组件定义时的选项中启用多slot支持
+    },
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        extClass: {
+            type: String,
+            value: '',
+        },
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        displayStyle: '',
+    },
+    lifetimes: {
+        attached() {},
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {},
+});
diff --git a/miniprogram/components/word-input/word-input.wxml b/miniprogram/components/word-input/word-input.wxml
new file mode 100644
index 0000000..9442357
--- /dev/null
+++ b/miniprogram/components/word-input/word-input.wxml
@@ -0,0 +1,9 @@
+<view class="word-input-container">
+    <van-icon name="miniprogram-o" custom-class="word-input-icon" size="48rpx" />
+    <input
+        class="word-input"
+        type="text"
+        placeholder="请输入小朋友喜欢的文字"
+        bindconfirm="onConfirm"
+        maxlength="6" />
+</view>
diff --git a/miniprogram/constants/index.ts b/miniprogram/constants/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/miniprogram/pages/demoIndex/index.json b/miniprogram/pages/demoIndex/index.json
new file mode 100644
index 0000000..76f0ed5
--- /dev/null
+++ b/miniprogram/pages/demoIndex/index.json
@@ -0,0 +1,7 @@
+{
+    "navigationBarTitleText": "首页",
+    "navigationBarBackgroundColor": "#d2e7d8",
+    "homeButton": true,
+    "backgroundColor": "#e8eddb",
+    "enablePullDownRefresh": false
+}
diff --git a/miniprogram/pages/demoIndex/index.less b/miniprogram/pages/demoIndex/index.less
new file mode 100644
index 0000000..51c5884
--- /dev/null
+++ b/miniprogram/pages/demoIndex/index.less
@@ -0,0 +1,33 @@
+/**index.less**/
+page {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.scroll-view {
+    flex: 1;
+    overflow-y: hidden;
+}
+
+.card {
+    margin: 10px;
+    padding: 10px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    width: calc(33.33% - 20px);
+    /* Adjust width for three cards per row */
+    box-sizing: border-box;
+    /* Ensure padding and margin are included in the width */
+    display: inline-block;
+    /* Allow cards to sit next to each other */
+    vertical-align: top;
+    /* Align cards to the top */
+
+    .card-title {
+        font-size: 18px;
+        font-weight: bold;
+        color: #333;
+    }
+}
\ No newline at end of file
diff --git a/miniprogram/pages/demoIndex/index.ts b/miniprogram/pages/demoIndex/index.ts
new file mode 100644
index 0000000..74d58be
--- /dev/null
+++ b/miniprogram/pages/demoIndex/index.ts
@@ -0,0 +1,32 @@
+Page({
+    data: {
+        cards: [
+            {
+                key: 0,
+                title: '文本绘制',
+                url: '/demoPages/textPaint/textPaint',
+            },
+            {
+                key: 1,
+                title: '文本绘制2',
+                url: '/demoPages/textPaint2/textPaint',
+            },
+            {
+                key: 2,
+                title: '文本绘制',
+                url: '/demoPages/textPaint/textPaint',
+            },
+            {
+                key: 3,
+                title: '文本绘制',
+                url: '/demoPages/textPaint/textPaint',
+            },
+        ],
+    },
+
+    tapCard(e: WechatMiniprogram.TouchEvent) {
+        const { url } = e.currentTarget.dataset;
+        console.log('navigateTo url:', url);
+        wx.navigateTo({ url });
+    },
+});
diff --git a/miniprogram/pages/demoIndex/index.wxml b/miniprogram/pages/demoIndex/index.wxml
new file mode 100644
index 0000000..af88b65
--- /dev/null
+++ b/miniprogram/pages/demoIndex/index.wxml
@@ -0,0 +1,12 @@
+<!--index.wxml-->
+<scroll-view class="scroll-view" scroll-y type="list">
+    <view 
+        class="card" 
+        wx:for="{{cards}}"
+        wx:for-item="card"
+        wx:key="*this"
+        bindtap="tapCard" 
+        data-url="{{card.url}}">
+        <view class="card-title">{{card.title}}</view>
+    </view>
+</scroll-view>
diff --git a/miniprogram/pages/index/index.json b/miniprogram/pages/index/index.json
index 76f0ed5..e5c0ea9 100644
--- a/miniprogram/pages/index/index.json
+++ b/miniprogram/pages/index/index.json
@@ -1,7 +1,11 @@
 {
-    "navigationBarTitleText": "首页",
-    "navigationBarBackgroundColor": "#d2e7d8",
+    "navigationBarTitleText": "涂鸦丫",
+    "navigationBarBackgroundColor": "#FFD719",
     "homeButton": true,
-    "backgroundColor": "#e8eddb",
-    "enablePullDownRefresh": false
+    "backgroundColor": "#F6F6F6",
+    "enablePullDownRefresh": false,
+    "usingComponents": {
+        "word-input": "../../components/word-input/word-input",
+        "word-card": "../../components/word-card/word-card"
+    }
 }
diff --git a/miniprogram/pages/index/index.less b/miniprogram/pages/index/index.less
index 51c5884..5333d39 100644
--- a/miniprogram/pages/index/index.less
+++ b/miniprogram/pages/index/index.less
@@ -1,33 +1,38 @@
-/**index.less**/
 page {
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
+    background-color: #F6F6F6;
 }
 
-.scroll-view {
-    flex: 1;
-    overflow-y: hidden;
-}
-
-.card {
-    margin: 10px;
-    padding: 10px;
-    background-color: #fff;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    width: calc(33.33% - 20px);
-    /* Adjust width for three cards per row */
+.page-container {
+    background-color: #F6F6F6;
+    padding: 24rpx;
     box-sizing: border-box;
-    /* Ensure padding and margin are included in the width */
-    display: inline-block;
-    /* Allow cards to sit next to each other */
-    vertical-align: top;
-    /* Align cards to the top */
 
-    .card-title {
-        font-size: 18px;
-        font-weight: bold;
-        color: #333;
+    .wrapper {
+        background-color: #ffffff;
+        border-radius: 20rpx;
+        padding: 30rpx;
+        box-shadow: 0 3rpx 4rpx rgba(0, 0, 0, 0.15);
+        margin: 30rpx 0;
+        display: flex;
+        flex-direction: column;
+
+        .wrapper-title {
+            font-size: 32rpx;
+            color: #141414;
+            margin-bottom: 30rpx;
+            font-weight: bold;
+            text-align: center;
+        }
+    }
+
+    .word-card-box {
+        margin-top: 30rpx;
+    }
+
+    .word-card-list {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-bottom: 24rpx;
     }
 }
\ No newline at end of file
diff --git a/miniprogram/pages/index/index.ts b/miniprogram/pages/index/index.ts
index 74d58be..bb1ff89 100644
--- a/miniprogram/pages/index/index.ts
+++ b/miniprogram/pages/index/index.ts
@@ -1,28 +1,5 @@
 Page({
-    data: {
-        cards: [
-            {
-                key: 0,
-                title: '文本绘制',
-                url: '/demoPages/textPaint/textPaint',
-            },
-            {
-                key: 1,
-                title: '文本绘制2',
-                url: '/demoPages/textPaint2/textPaint',
-            },
-            {
-                key: 2,
-                title: '文本绘制',
-                url: '/demoPages/textPaint/textPaint',
-            },
-            {
-                key: 3,
-                title: '文本绘制',
-                url: '/demoPages/textPaint/textPaint',
-            },
-        ],
-    },
+    data: {},
 
     tapCard(e: WechatMiniprogram.TouchEvent) {
         const { url } = e.currentTarget.dataset;
diff --git a/miniprogram/pages/index/index.wxml b/miniprogram/pages/index/index.wxml
index af88b65..2eb7828 100644
--- a/miniprogram/pages/index/index.wxml
+++ b/miniprogram/pages/index/index.wxml
@@ -1,12 +1,19 @@
-<!--index.wxml-->
-<scroll-view class="scroll-view" scroll-y type="list">
-    <view 
-        class="card" 
-        wx:for="{{cards}}"
-        wx:for-item="card"
-        wx:key="*this"
-        bindtap="tapCard" 
-        data-url="{{card.url}}">
-        <view class="card-title">{{card.title}}</view>
+<scroll-view class="page-container" scroll-y type="list">
+    <view class="wrapper">
+        <text class="wrapper-title">设置文字和颜色</text>
+        <word-input />
+        <view class="word-card-box">
+            <view class="word-card-list">
+                <word-card />
+                <word-card />
+            </view>
+            <view class="word-card-list">
+                <word-card />
+                <word-card />
+            </view>
+        </view>
+    </view>
+    <view class="wrapper">
+        <text class="wrapper-title">预览打印效果</text>
     </view>
 </scroll-view>
diff --git a/miniprogram/ui/README.md b/miniprogram/ui/README.md
new file mode 100644
index 0000000..a30c0e4
--- /dev/null
+++ b/miniprogram/ui/README.md
@@ -0,0 +1 @@
+# ui 目录用于放UI类组件