diff --git a/package.json b/package.json
index 73f2ae7..d71d242 100644
--- a/package.json
+++ b/package.json
@@ -18,12 +18,14 @@
     "lodash": "^4.17.21",
     "pinia": "^2.1.4",
     "pinyin-pro": "^3.15.4",
+    "vite-svg-loader": "^5.1.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
     "@tsconfig/node18": "^2.0.1",
+    "@types/lodash": "^4.14.202",
     "@types/node": "^18.16.17",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0e0f751..97d0837 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,6 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@rushstack/eslint-patch': ^1.2.0
   '@tsconfig/node18': ^2.0.1
+  '@types/lodash': ^4.14.202
   '@types/node': ^18.16.17
   '@vitejs/plugin-vue': ^4.2.3
   '@vitejs/plugin-vue-jsx': ^3.0.1
@@ -22,6 +23,7 @@ specifiers:
   sass: ^1.63.6
   typescript: ~5.0.4
   vite: ^4.3.9
+  vite-svg-loader: ^5.1.0
   vue: ^3.3.4
   vue-router: ^4.2.2
   vue-tsc: ^1.6.5
@@ -33,12 +35,14 @@ dependencies:
   lodash: 4.17.21
   pinia: 2.1.4_typescript@5.0.4+vue@3.3.4
   pinyin-pro: 3.15.4
+  vite-svg-loader: 5.1.0_vue@3.3.4
   vue: 3.3.4
   vue-router: 4.2.2_vue@3.3.4
 
 devDependencies:
   '@rushstack/eslint-patch': 1.3.2
   '@tsconfig/node18': 2.0.1
+  '@types/lodash': 4.14.202
   '@types/node': 18.16.18
   '@vitejs/plugin-vue': 4.2.3_vite@4.3.9+vue@3.3.4
   '@vitejs/plugin-vue-jsx': 3.0.1_vite@4.3.9+vue@3.3.4
@@ -670,6 +674,11 @@ packages:
     resolution: {integrity: sha512-V+MvGwaHH03hYhY+k6Ef/xKd6RYlc4q8WBx+2ANmipHJcKuktNcI/NgEsJgdSUF6Lw32njT6OnrRsKYCdgHjYw==}
     dev: true
 
+  /@trysound/sax/0.2.0:
+    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
+    engines: {node: '>=10.13.0'}
+    dev: false
+
   /@tsconfig/node18/2.0.1:
     resolution: {integrity: sha512-UqdfvuJK0SArA2CxhKWwwAWfnVSXiYe63bVpMutc27vpngCntGUZQETO24pEJ46zU6XM+7SpqYoMgcO3bM11Ew==}
     dev: true
@@ -678,6 +687,10 @@ packages:
     resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==}
     dev: true
 
+  /@types/lodash/4.14.202:
+    resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==}
+    dev: true
+
   /@types/node/18.16.18:
     resolution: {integrity: sha512-/aNaQZD0+iSBAGnvvN2Cx92HqE5sZCPZtx2TsK+4nvV23fFe09jVDvpArXr2j9DnYlzuU9WuoykDDc6wqvpNcw==}
     dev: true
@@ -1149,7 +1162,6 @@ packages:
 
   /boolbase/1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
-    dev: true
 
   /brace-expansion/1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
@@ -1263,6 +1275,11 @@ packages:
       delayed-stream: 1.0.0
     dev: false
 
+  /commander/7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+    dev: false
+
   /concat-map/0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
@@ -1291,12 +1308,50 @@ packages:
       which: 2.0.2
     dev: true
 
+  /css-select/5.1.0:
+    resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.1.0
+      domhandler: 5.0.3
+      domutils: 3.1.0
+      nth-check: 2.1.1
+    dev: false
+
+  /css-tree/2.2.1:
+    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+    dependencies:
+      mdn-data: 2.0.28
+      source-map-js: 1.0.2
+    dev: false
+
+  /css-tree/2.3.1:
+    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+    dependencies:
+      mdn-data: 2.0.30
+      source-map-js: 1.0.2
+    dev: false
+
+  /css-what/6.1.0:
+    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
+    engines: {node: '>= 6'}
+    dev: false
+
   /cssesc/3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
     dev: true
 
+  /csso/5.0.5:
+    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+    dependencies:
+      css-tree: 2.2.1
+    dev: false
+
   /csstype/3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 
@@ -1347,10 +1402,42 @@ packages:
       esutils: 2.0.3
     dev: true
 
+  /dom-serializer/2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+    dev: false
+
+  /domelementtype/2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+    dev: false
+
+  /domhandler/5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+    dependencies:
+      domelementtype: 2.3.0
+    dev: false
+
+  /domutils/3.1.0:
+    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+    dev: false
+
   /electron-to-chromium/1.4.436:
     resolution: {integrity: sha512-aktOxo8fnrMC8vOIBMVS3PXbT1nrPQ+SouUuN7Y0a+Rw3pOMrvIV92Ybnax7x4tugA+ZpYA5fOHTby7ama8OQQ==}
     dev: true
 
+  /entities/4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+    dev: false
+
   /error-ex/1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
     dependencies:
@@ -2157,6 +2244,14 @@ packages:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  /mdn-data/2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
+    dev: false
+
+  /mdn-data/2.0.30:
+    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
+    dev: false
+
   /memorystream/0.3.1:
     resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
     engines: {node: '>= 0.10.0'}
@@ -2263,7 +2358,6 @@ packages:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
     dependencies:
       boolbase: 1.0.0
-    dev: true
 
   /object-inspect/1.12.3:
     resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
@@ -2697,6 +2791,20 @@ packages:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
     dev: true
 
+  /svgo/3.1.0:
+    resolution: {integrity: sha512-R5SnNA89w1dYgNv570591F66v34b3eQShpIBcQtZtM5trJwm1VvxbIoMpRYY3ybTAutcKTLEmTsdnaknOHbiQA==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      '@trysound/sax': 0.2.0
+      commander: 7.2.0
+      css-select: 5.1.0
+      css-tree: 2.3.1
+      css-what: 6.1.0
+      csso: 5.0.5
+      picocolors: 1.0.0
+    dev: false
+
   /text-table/0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
@@ -2788,6 +2896,15 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
+  /vite-svg-loader/5.1.0_vue@3.3.4:
+    resolution: {integrity: sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==}
+    peerDependencies:
+      vue: '>=3.2.13'
+    dependencies:
+      svgo: 3.1.0
+      vue: 3.3.4
+    dev: false
+
   /vite/4.3.9_p77cnisglvxcw4xjyzbclrj6da:
     resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
     engines: {node: ^14.18.0 || >=16.0.0}
diff --git a/src/App.vue b/src/App.vue
index 68ffd8f..14a82e3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -90,6 +90,7 @@ const changeTheme = () => {
         <router-link to="/" class="y-menu__item y-menu__item--active">限时模式</router-link>
         <router-link to="/words" class="y-menu__item">词/成语模式</router-link>
         <router-link to="/quote" class="y-menu__item">句子模式</router-link>
+        <router-link to="/custom" class="y-menu__item">自定义</router-link>
         <router-link to="/keyboard" class="y-menu__item y-menu__keyboard-test"
           >键盘测试</router-link
         >
diff --git a/src/assets/svg/change.svg b/src/assets/svg/change.svg
new file mode 100644
index 0000000..25973d2
--- /dev/null
+++ b/src/assets/svg/change.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703005643684" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18186" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M899.072 463.238095c1.999238 15.969524 3.023238 32.256 3.023238 48.761905 0 215.454476-174.640762 390.095238-390.095238 390.095238-103.862857 0-198.265905-40.594286-268.190476-106.788571V902.095238H170.666667l0.024381-170.666667L170.666667 658.285714h243.809523v73.142857h-131.169523c57.685333 60.123429 138.825143 97.52381 228.693333 97.52381 175.055238 0 316.952381-141.897143 316.952381-316.952381a319.390476 319.390476 0 0 0-3.730286-48.761905h73.874286zM853.333333 121.904762l-0.024381 170.666667L853.333333 365.714286H609.52381v-73.142857h131.193904A316.025905 316.025905 0 0 0 512 195.047619C336.944762 195.047619 195.047619 336.944762 195.047619 512c0 16.579048 1.26781 32.889905 3.730286 48.761905h-73.874286A393.947429 393.947429 0 0 1 121.904762 512c0-215.454476 174.640762-390.095238 390.095238-390.095238 103.862857 0 198.290286 40.618667 268.190476 106.812952V121.904762h73.142857z" p-id="18187"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svg/setting.svg b/src/assets/svg/setting.svg
new file mode 100644
index 0000000..984f786
--- /dev/null
+++ b/src/assets/svg/setting.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703004894736" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5558" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M392.533333 921.6h-12.8a401.066667 401.066667 0 0 1-149.333333-85.333333c-17.066667-12.8-17.066667-38.4-4.266667-59.733334 17.066667-21.333333 17.066667-46.933333 4.266667-72.533333l-21.333333-34.133333c-12.8-21.333333-38.4-34.133333-64-29.866667-21.333333 4.266667-42.666667-12.8-46.933334-34.133333-8.533333-34.133333-12.8-64-12.8-93.866667 0-29.866667 4.266667-59.733333 8.533334-85.333333 4.266667-21.333333 25.6-38.4 46.933333-34.133334 25.6 4.266667 51.2-8.533333 64-34.133333l21.333333-34.133333c12.8-25.6 12.8-51.2-4.266666-72.533334-12.8-17.066667-12.8-42.666667 4.266666-59.733333 42.666667-38.4 93.866667-68.266667 149.333334-85.333333 21.333333-8.533333 42.666667 4.266667 51.2 25.6 12.8 21.333333 38.4 38.4 64 38.4h42.666666c25.6 0 51.2-17.066667 59.733334-38.4 8.533333-21.333333 29.866667-29.866667 51.2-25.6 55.466667 17.066667 106.666667 46.933333 149.333333 85.333333 17.066667 12.8 17.066667 38.4 4.266667 59.733333-17.066667 21.333333-17.066667 46.933333-4.266667 72.533334l21.333333 34.133333c12.8 21.333333 38.4 34.133333 64 29.866667 21.333333-4.266667 42.666667 12.8 46.933334 34.133333 8.533333 29.866667 12.8 59.733333 12.8 89.6 0 29.866667-4.266667 59.733333-8.533334 85.333333-4.266667 21.333333-25.6 38.4-46.933333 34.133334-25.6-4.266667-51.2 8.533333-64 29.866666l-21.333333 34.133334c-12.8 21.333333-12.8 51.2 4.266666 72.533333 12.8 17.066667 12.8 42.666667-4.266666 59.733333-42.666667 38.4-93.866667 68.266667-149.333334 85.333334-21.333333 8.533333-42.666667-4.266667-51.2-25.6-8.533333-25.6-34.133333-38.4-59.733333-38.4h-42.666667c-25.6 0-51.2 17.066667-59.733333 38.4-8.533333 21.333333-25.6 34.133333-42.666667 34.133333z m-81.066666-132.266667l64 38.4c25.6-38.4 68.266667-59.733333 115.2-59.733333h42.666666c46.933333 0 89.6 21.333333 115.2 55.466667 21.333333-8.533333 42.666667-21.333333 64-38.4-17.066667-42.666667-12.8-89.6 8.533334-128l21.333333-34.133334c25.6-42.666667 64-68.266667 110.933333-72.533333V512v-38.4c-42.666667-8.533333-85.333333-34.133333-106.666666-72.533333l-21.333334-34.133334c-21.333333-38.4-25.6-89.6-8.533333-128l-64-38.4c-29.866667 34.133333-72.533333 55.466667-119.466667 55.466667h-42.666666c-46.933333 0-89.6-21.333333-115.2-55.466667-21.333333 8.533333-42.666667 21.333333-64 38.4 17.066667 42.666667 12.8 89.6-8.533334 128l-21.333333 34.133334C256 443.733333 217.6 469.333333 170.666667 473.6v76.8c42.666667 8.533333 85.333333 34.133333 106.666666 72.533333l21.333334 34.133334c25.6 42.666667 29.866667 89.6 12.8 132.266666z" p-id="5559"></path><path d="M512 512m-128 0a128 128 0 1 0 256 0 128 128 0 1 0-256 0Z" p-id="5560"></path></svg>
\ No newline at end of file
diff --git a/src/components/WordInput.vue b/src/components/WordInput.vue
index b885853..13e0a18 100644
--- a/src/components/WordInput.vue
+++ b/src/components/WordInput.vue
@@ -19,11 +19,14 @@ const props = defineProps<{
   quote: string;
 }>();
 
+const emit = defineEmits(['is-typing']);
+
 const state = reactive({
   currentAreaHeight: LINE_HEIGHT,
   isComposing: false,
   inputText: '',
-  quoteArr: [] as SentenceArrItem[]
+  quoteArr: [] as SentenceArrItem[],
+  isTyping: false
 });
 
 onMounted(async () => {
@@ -57,6 +60,12 @@ watch(
 watch(
   () => state.inputText,
   (newVal) => {
+    if (newVal === '') {
+      setTimeout(() => {
+        y.value = 0;
+      });
+    }
+
     const inputTextArr = newVal.split('');
     state.quoteArr.forEach((item, index) => {
       item.isInput = false;
@@ -73,16 +82,20 @@ watch(
   }
 );
 
+function focusInput() {
+  if (!inputAreaRef.value) return;
+  inputAreaRef.value.focus();
+}
+
 function handlerInput(text: string) {
   state.inputText = text;
   const currentHeight = inputAreaRef.value?.offsetHeight;
-  console.log(currentHeight);
   if (currentHeight && currentHeight > Math.max(state.currentAreaHeight, LINE_HEIGHT * 2)) {
     y.value += LINE_HEIGHT;
-  } else if (currentHeight && currentHeight < Math.min(state.currentAreaHeight, LINE_HEIGHT * 2)) {
+  } else if (currentHeight && currentHeight < state.currentAreaHeight) {
     y.value -= LINE_HEIGHT;
   }
-  state.currentAreaHeight = currentHeight || 70;
+  state.currentAreaHeight = currentHeight || LINE_HEIGHT;
 }
 
 function pasteEvent(e: ClipboardEvent) {
@@ -94,6 +107,7 @@ function keyDownEvent(e: KeyboardEvent) {
   }
 }
 function inputEvent(e: Event) {
+  emit('is-typing');
   const input = e.target as HTMLElement;
   if (!state.isComposing) {
     handlerInput(input?.innerText);
@@ -113,35 +127,82 @@ function compositionEndEvent(e: CompositionEvent) {
     handlerInput(text);
   }
 }
+
+defineExpose({
+  focusInput
+});
 </script>
 
 <template>
-  <div class="y-word-input" ref="el">
-    <div class="y-word-input__quote">
-      <span
-        v-for="item in state.quoteArr"
-        :class="[item.isWrong ? 'is-wrong' : '', item.isInput ? 'is-input' : '']"
-        :key="item.id"
-        >{{ item.word }}</span
-      >
+  <div class="y-word-input__wrap">
+    <Transition name="mask">
+      <div v-if="y > 0" class="y-word-input__mask"></div>
+    </Transition>
+    <div class="y-word-input__mask-bottom"></div>
+    <div class="y-word-input" ref="el">
+      <div class="y-word-input__quote">
+        <span
+          v-for="item in state.quoteArr"
+          :class="[item.isWrong ? 'is-wrong' : '', item.isInput ? 'is-input' : '']"
+          :key="item.id"
+          >{{ item.word }}</span
+        >
+      </div>
+      <div
+        ref="inputAreaRef"
+        @paste="pasteEvent"
+        @keydown="keyDownEvent"
+        @input="inputEvent"
+        @compositionstart="compositionStartEvent"
+        @compositionupdate="compositionUpdateEvent"
+        @compositionend="compositionEndEvent"
+        class="y-word-input__input-area"
+        contenteditable="true"
+      ></div>
     </div>
-    <div
-      ref="inputAreaRef"
-      @paste="pasteEvent"
-      @keydown="keyDownEvent"
-      @input="inputEvent"
-      @compositionstart="compositionStartEvent"
-      @compositionupdate="compositionUpdateEvent"
-      @compositionend="compositionEndEvent"
-      class="y-word-input__input-area"
-      contenteditable="true"
-    ></div>
   </div>
 </template>
 
 <style lang="scss">
-.y-word-input {
+.y-word-input__wrap {
   position: relative;
+  width: 100%;
+  height: 280px;
+  overflow: hidden;
+}
+
+.y-word-input__mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100px;
+  background: linear-gradient(
+    to bottom,
+    $background-gray 0%,
+    $background-gray 10%,
+    rgba(255, 0, 0, 0) 100%
+  );
+  z-index: 1;
+}
+.y-word-input__mask-bottom {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100px;
+  background: linear-gradient(
+    to top,
+    $background-gray 0%,
+    $background-gray 10%,
+    rgba(255, 0, 0, 0) 100%
+  );
+  z-index: 1;
+}
+
+.y-word-input {
+  position: absolute;
+  top: -10px;
   user-select: none;
   height: 280px;
   overflow: hidden;
@@ -183,4 +244,14 @@ function compositionEndEvent(e: CompositionEvent) {
     }
   }
 }
+
+.mask-enter-active,
+.mask-leave-active {
+  transition: all 0.3s ease;
+}
+
+.mask-enter-from,
+.mask-leave-to {
+  opacity: 0;
+}
 </style>
diff --git a/src/files/Sentence.json b/src/files/Quote.json
similarity index 69%
rename from src/files/Sentence.json
rename to src/files/Quote.json
index 05793fb..25f2d19 100644
--- a/src/files/Sentence.json
+++ b/src/files/Quote.json
@@ -13,6 +13,13 @@
             "type": "散文",
             "length": "long",
             "content": "如果以一天中的时间来对应四季，当然春天是早晨，夏天是中午，秋天是黄昏，冬天是夜晚。如果以乐器来对应四季，我想春天应该是小号，夏天是定音鼓，秋天是大提琴，冬天是圆号和长笛。要是以这园子里的声响来对应四季呢？那么，春天是祭坛上空漂浮着的鸽子的哨音，夏天是冗长的蝉歌和杨树叶子哗啦啦地对蝉歌的取笑，秋天是古殿檐头的风铃响，冬天是啄木鸟随意而空旷的啄木声。以园中的景物对应四季，春天是一径时而苍白时而黑润的小路，时而明朗时而阴晦的天上摇荡着串串杨花；夏天是一条条耀眼而灼人的石凳，或阴凉而爬满了青苔的石阶，阶下有果皮，阶上有半张被坐皱的报纸；秋天是一座青铜的大钟，在园子的西北角上曾丢弃着一座很大的铜钟，铜钟与这园子一般年纪，浑身挂满绿锈，文字已不清晰；冬天，是林中空地上几只羽毛蓬松的老麻雀。以心绪对应四季呢？春天是卧病的季节，否则人们不易发觉春天的残忍与渴望；夏天，情人们应该在这个季节里失恋，不然就似乎对不起爱情；秋天是从外面买一棵盆花回家的时候，把花搁在阔别了的家中，并且打开窗户把阳光也放进屋里，慢慢回忆慢慢整理一些发过霉的东西；冬天伴着火炉和书，一遍遍坚定不死的决心，写一些并不发出的信。还可以用艺术形式对应四季，这样春天就是一幅画，夏天是一部长篇小说，秋天是一首短歌或诗，冬天是一群雕塑。以梦呢？以梦对应四季呢？春天是树尖上的呼喊，夏天是呼喊中的细雨，秋天是细雨中的土地，冬天是干净的土地上的一只孤零的烟斗。"
+        },
+        {
+            "title": "冰灯",
+            "author": "佚名",
+            "type": "散文",
+            "length": "long",
+            "content": "冰灯是流行于中国北方的一种古老的民间艺术形式。因为独特的地域优势，黑龙江可以说是制作冰灯最早的地方。传说在很早以前，每到冬季的夜晚，在松嫩平原上，人们总会看到三五成群的农夫和渔民在悠然自得地喂马和捕鱼，他们所使用的照明工具就是用冰做成的灯笼。这便是最早的冰灯。当时制作冰灯的工艺也很简单，把水放进木桶里冻成冰坨，凿出空心，放个油灯在里面，用以照明，冰罩挡住了凛冽的寒风，黑夜里便有了不灭的灯盏，冰灯成了人们生活中不可缺少的帮手。后来，每逢新春佳节和上元之夜，人们又把它加以装饰，而成为供人观赏的独特的艺术表现形式。清代《黑龙江外纪》里对此有过详细的记载：“上元，城中张灯五夜，村落妇女来观剧者，车声彻夜不绝。有镂五六尺冰为寿星灯者，中燃双炬，望之如水晶人。”其时，冰灯在南方一些地方也相继出现过。乾隆、嘉庆年间，四川诗人张问陶曾写过一首专门描写冰灯的诗，题名就叫《冰灯》，诗云：“黑夜有炎凉，冰灯吐焰长。照来消热念，凿处漏寒光。影湿星沉水，神清月里霜。三冬足文史，底用探萤囊。”南京诗人金德荣在被谪戍新疆巴里坤时，在其古风长诗《巴里坤冰灯歌》中也咏叹道：“雪山高与天山接，上有万古不化雪。朔风一夜结作冰，裁雪妙手搏为冰。以矾入冰冰不化，以烛照冰光四射。五里之内尽通明，半月能教天不夜。元夕月轮照碧空，大千人入水晶宫......"
         }
     ],
     "medium": [
diff --git a/src/router/routes.ts b/src/router/routes.ts
index a246d23..9fc0264 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -2,6 +2,7 @@ import TimeLimit from '@/view/TimeLimit.vue';
 import WordsLimit from '@/view/WordsLimit.vue';
 import QuoteLimit from '@/view/QuoteLimit.vue';
 import TypingKeyboard from '@/view/TypingKeyboard.vue';
+import CustomPage from '@/view/CustomPage.vue';
 import User from '@/view/User.vue';
 
 export default [
@@ -9,5 +10,6 @@ export default [
   { path: '/words', name: 'WordsLimit', component: WordsLimit },
   { path: '/quote', name: 'QuoteLimit', component: QuoteLimit },
   { path: '/keyboard', name: 'TypingKeyboard', component: TypingKeyboard },
+  { path: '/custom', name: 'Custom', component: CustomPage },
   { path: '/user/:id', name: 'User', component: User }
 ];
diff --git a/src/view/CustomPage.vue b/src/view/CustomPage.vue
new file mode 100644
index 0000000..c4c7acf
--- /dev/null
+++ b/src/view/CustomPage.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import YPinyin from '@/components/Pinyin.vue';
+import { useConfigStore } from '@/store/config';
+import { storeToRefs } from 'pinia';
+const useConfig = useConfigStore();
+
+const { currentFont } = storeToRefs(useConfig);
+</script>
+<template>
+  <main :class="'y-font--' + currentFont">
+    <y-pinyin words="自定义模式"></y-pinyin>
+  </main>
+</template>
diff --git a/src/view/QuoteLimit.vue b/src/view/QuoteLimit.vue
index 5d716e2..e1f54f4 100644
--- a/src/view/QuoteLimit.vue
+++ b/src/view/QuoteLimit.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { reactive } from 'vue';
+// @ts-ignore
 import flatten from 'lodash/flatten';
 
 // components
@@ -10,7 +11,7 @@ import { storeToRefs } from 'pinia';
 import { useConfigStore } from '@/store/config';
 
 // files
-import Sentence from '@/files/Sentence.json';
+import Sentence from '@/files/Quote.json';
 
 const useConfig = useConfigStore();
 const { currentFont } = storeToRefs(useConfig);
@@ -72,4 +73,3 @@ function getRandomNonRepeatingElement(arr: any[]) {
   color: $gray-02;
 }
 </style>
-
diff --git a/src/view/TimeLimit.vue b/src/view/TimeLimit.vue
index cc7d3dc..e5e8be7 100644
--- a/src/view/TimeLimit.vue
+++ b/src/view/TimeLimit.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { reactive, watch } from 'vue';
 
 // components
 import WordInput from '@/components/WordInput.vue';
@@ -9,18 +9,56 @@ import { storeToRefs } from 'pinia';
 import { useConfigStore } from '@/store/config';
 
 // files
-import Sentence from '@/files/Sentence.json';
+import Sentence from '@/files/Quote.json';
+
+// svg
+import IcoSetting from '@/assets/svg/setting.svg';
+import IcoChange from '@/assets/svg/change.svg';
 
 const useConfig = useConfigStore();
-const { currentFont } = storeToRefs(useConfig);
+const { currentFont, onlyShowMain } = storeToRefs(useConfig);
+const customTime = [15, 30, 60, 120];
 
 const state = reactive({
   quote: {} as any,
-  lastIndex: -1
+  lastIndex: -1,
+  selectTime: 30 as number,
+  countDown: null as null | number,
+  isTyping: false,
+  intervalId: null as null | number
 });
 state.quote = getRandomNonRepeatingElement(Object.values(Sentence.long));
 
+watch(
+  () => state.isTyping,
+  (val) => {
+    if (val && state.selectTime) {
+      state.countDown = state.selectTime;
+      state.intervalId = setInterval(() => {
+        console.log(`剩余时间：${state.countDown} 秒`);
+
+        if (state.countDown) {
+          state.countDown -= 1;
+          if (state.countDown < 1) {
+            if (state.intervalId !== null) {
+              clearInterval(state.intervalId);
+              state.intervalId = null;
+            }
+          }
+        }
+      }, 1000);
+    } else {
+      state.countDown = null;
+      if (state.intervalId !== null) {
+        clearInterval(state.intervalId);
+        state.intervalId = null;
+      }
+    }
+  }
+);
+
 function refresh() {
+  state.isTyping = false;
   state.quote = getRandomNonRepeatingElement(Object.values(Sentence.long));
 }
 
@@ -41,12 +79,87 @@ function getRandomNonRepeatingElement(arr: any[]) {
   state.lastIndex = randomIndex;
   return arr[randomIndex];
 }
+
+function selectTime(time: number) {
+  console.log('选择的时间：', time);
+  state.selectTime = time;
+  refresh();
+}
+
+function isTyping() {
+  state.isTyping = true;
+}
+
+interface CountdownOptions {
+  duration: number;
+  onEnd: () => void;
+}
+
+interface Countdown {
+  stop: () => void;
+}
+
+function countdownFunc(options: CountdownOptions): Countdown {
+  const { duration, onEnd } = options;
+
+  let remainingTime = duration;
+  let intervalId: number | null = null;
+
+  const stopCountdown = (): void => {
+    if (intervalId !== null) {
+      clearInterval(intervalId);
+      intervalId = null;
+    }
+  };
+
+  const countdownInterval = setInterval(() => {
+    console.log(`剩余时间：${remainingTime} 秒`);
+
+    remainingTime -= 1;
+    if (remainingTime < 0) {
+      stopCountdown();
+      onEnd();
+    }
+  }, 1000);
+
+  intervalId = countdownInterval;
+
+  return {
+    stop: stopCountdown
+  };
+}
 </script>
 <template>
   <main :class="'y-font--' + currentFont">
-    <div class="y-time-limit__refresh" @click="refresh">随机</div>
+    <div class="y-time-limit__setting">
+      <div v-if="state.countDown !== null" class="y-time-limit__count-down">
+        {{ state.countDown }}
+      </div>
+      <Transition name="menu">
+        <div
+          v-show="!onlyShowMain"
+          class="y-time-limit__setting-item y-time-limit__refresh"
+          @click="refresh"
+        >
+          <IcoChange></IcoChange>
+        </div>
+      </Transition>
+      <Transition name="menu">
+        <div v-show="!onlyShowMain" class="y-time-limit__setting-item y-time-limit__time">
+          <span
+            v-for="item in customTime"
+            :key="item"
+            class="y-time-limit__time-item"
+            :class="{ 'y-time-limit__time-item--active': state.selectTime === item }"
+            @click="selectTime(item)"
+            >{{ item }}</span
+          >
+          <IcoSetting class="y-time-limit__time-svg"></IcoSetting>
+        </div>
+      </Transition>
+    </div>
 
-    <WordInput :quote="state.quote?.content"></WordInput>
+    <WordInput :quote="state.quote?.content" @is-typing="isTyping"></WordInput>
 
     <div class="y-time-limit__info">
       ——
@@ -61,8 +174,67 @@ function getRandomNonRepeatingElement(arr: any[]) {
   </main>
 </template>
 <style lang="scss">
+.y-time-limit__setting {
+  position: relative;
+  margin-bottom: 30px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: 24px;
+}
+.y-time-limit__setting-item:not(:last-child) {
+  position: relative;
+  margin-right: 30px;
+  &::after {
+    content: '';
+    position: absolute;
+    width: 1px;
+    height: 12px;
+    background: $gray-02;
+    right: -15px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+.y-time-limit__count-down {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  color: $main-color;
+  font-size: 22px;
+  font-weight: bold;
+}
+.y-time-limit__time {
+  display: inline-flex;
+  align-items: center;
+  color: $gray-06;
+  font-size: 16px;
+  line-height: 24px;
+  height: 24px;
+}
+.y-time-limit__time-item {
+  margin-right: 10px;
+  cursor: pointer;
+}
+.y-time-limit__time-item--active {
+  color: $main-color;
+}
+.y-time-limit__time-svg {
+  width: 18px;
+  height: 18px;
+  fill: $gray-06;
+  cursor: pointer;
+}
 .y-time-limit__refresh {
   cursor: pointer;
+  height: 18px;
+  margin-right: 20px;
+  svg {
+    fill: $gray-06;
+    width: 18px;
+    height: 18px;
+  }
 }
 .y-time-limit__info {
   margin-top: 30px;
diff --git a/tsconfig.json b/tsconfig.json
index 66b5e57..df574e2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,5 +7,8 @@
     {
       "path": "./tsconfig.app.json"
     }
-  ]
+  ],
+  "compilerOptions": {
+    "typeRoots": ["node_modules/@types"]
+  }
 }
diff --git a/vite.config.ts b/vite.config.ts
index 104ee94..12d4fbd 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,10 +3,11 @@ import { fileURLToPath, URL } from 'node:url';
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
+import svgLoader from 'vite-svg-loader'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), vueJsx()],
+  plugins: [vue(), vueJsx(), svgLoader()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))