feat(hanzi): 增加朗读相关信息功能

Author: FuckDoctors

docs/.vuepress/styles/zhaobc.scss

@@ -94,3 +94,16 @@
     }
   }
 }
+
+.page-break-always {
+  break-after: always !important;
+}
+.page-break-avoid {
+  page-break-inside: avoid !important;
+}
+
+@media print {
+  .no-print {
+    display: none !important;
+  }
+}

docs/.vuepress/theme/components/hanzi/Hanzi.vue

@@ -47,6 +47,8 @@ const bihuaCountRet = shallowRef([props.bihuashu])
 const bihuaNameRet = shallowRef([props.bihua])
 const zuciRet = shallowRef(props.zuci)
 
+const speehTxt = ref([])
+
 onMounted(() => {
   cnchar.draw(props.zi, {
     el: printRef.value,
@@ -79,18 +81,32 @@ onMounted(() => {
     },
   })
 
+  speehTxt.value.push(props.zi)
   if (!props.pinyin) {
     pinyinRet.value = cnchar.spell(props.zi, 'low', 'tone', 'poly')
   }
   bushouRet.value = cnchar.radical(props.zi)
+  speehTxt.value.push(props.bushou || bushouRet.value[0].struct)
+  speehTxt.value.push('笔画数')
   if (!props.bihuashu) {
     bihuaCountRet.value = cnchar.stroke(props.zi, 'order', 'count')
+    speehTxt.value.push(bihuaCountRet.value)
+  } else {
+    speehTxt.value.push(props.bihuashu)
   }
+  speehTxt.value.push('笔划')
   if (props.bihua === null || props.bihua.length === 0) {
     bihuaNameRet.value = cnchar.stroke(props.zi, 'order', 'name')
+    speehTxt.value.push(...bihuaNameRet.value[0])
+  } else {
+    speehTxt.value.push(...props.bihua)
   }
+  speehTxt.value.push('组词')
   if (props.zuci === null || props.zuci.length === 0) {
     zuciRet.value = cnchar.words(props.zi)
+    speehTxt.value.push(...zuciRet.value.slice(0, 5))
+  } else {
+    speehTxt.value.push(...props.zuci)
   }
 })
 
@@ -128,6 +144,10 @@ function handleWriting() {
     },
   })
 }
+
+function handleRead() {
+  cnchar.voice.speak(speehTxt.value)
+}
 </script>
 
 <template>
@@ -141,6 +161,11 @@ function handleWriting() {
           <button class="btn-voice btn" title="发音" @click="handleVoice" />
           <button class="btn-play btn" title="笔划" @click="handlePlay" />
           <button class="btn-write btn" title="书写" @click="handleWriting" />
+          <button
+            class="btn-human-voice btn"
+            title="朗读"
+            @click="handleRead"
+          />
         </div>
       </div>
       <div class="hanzi-main__right">

docs/posts/edu/learn-hanzi.md

@@ -29,13 +29,17 @@ head:
 同时，可以展示汉字发音，书写笔划，以及汉字临摹功能。
 另外，也可以打印出来，方便孩子学习。
 
+:::info
+为了发音迅速，优先使用浏览器自带的特性实现，推荐使用最新的 Edge 浏览器。
+:::
+
 ## 使用方法
 
 封装了一个简单的 `Hanzi` 组件，使用方式如下：
 
 ```vue
 <Hanzi zi="春" :zuci="['春风', '春雨', '春天', '春日']" />
-<Hanzi zi="冬" />
+<Hanzi zi="冬" :bihua="['撇', '横撇', '捺', '点', '点']" />
 <Hanzi
   zi="风"
   pinyin="fēng"
@@ -81,5 +85,5 @@ head:
 ## 简单效果
 
 <Hanzi zi="春" :zuci="['春风', '春雨', '春天', '春日']" />
-<Hanzi zi="冬" />
+<Hanzi zi="冬" :bihua="['撇', '横撇', '捺', '点', '点']" />
 <Hanzi zi="风" pinyin="fēng" jiegou="独体字" :zuci="['风雨', '风云', '大风', '东风']" />

docs/posts/edu/小学/一年级/语文/下册.md

@@ -13,17 +13,21 @@ tag:
 head:
   - - meta
     - name: description
-      content: 一年级下册 识字
+      content: 一年级下册
 ---
 
-# 识字
+# 下册
+
+:::info
+为了发音迅速，优先使用浏览器自带的特性实现，推荐使用最新的 Edge 浏览器。
+:::
 
 ## 1.春夏秋冬
 
 <Hanzi zi="春" :zuci="['春风', '春雨', '春天', '春日']" />
-<Hanzi zi="冬" :zuci="['冬天', '立冬', '冬雪', '冬日']" />
+<Hanzi zi="冬" :bihua="['撇', '横撇', '捺', '点', '点']" :zuci="['冬天', '立冬', '冬雪', '冬日']" />
 <Hanzi zi="风" pinyin="fēng" jiegou="独体字" :zuci="['风雨', '风云', '大风', '东风']" />
-<Hanzi zi="雪" :zuci="['雪花', '雨雪', '风雪', '雪人']" />
+<Hanzi zi="雪" :bihua="['横', '点', '横钩', '竖', '点', '点', '点', '点', '横折', '横', '横']" :zuci="['雪花', '雨雪', '风雪', '雪人']" />
 <Hanzi zi="花" :zuci="['雪花', '花生', '开花', '水花', '烟花']" />
 <Hanzi zi="飞" :zuci="['飞虫', '飞走', '飞机', '飞人', '飞鱼']" />
 <Hanzi zi="入" :zuci="['出入', '入口', '入门', '进入']" />
@@ -33,7 +37,7 @@ head:
 <Hanzi zi="姓" :zuci="['姓氏', '姓名', '百姓']" />
 <Hanzi zi="什" :zuci="['什么', '为什么', '什锦']" />
 <Hanzi zi="么" :zuci="['什么', '为什么', '多么', '那么', '怎么', '要么']" />
-<Hanzi zi="双" :zuci="['双人', '双手', '双方', '双向', '成双成对']" />
+<Hanzi zi="双" :bihua="['横撇', '点', '横撇', '捺']" :zuci="['双人', '双手', '双方', '双向', '成双成对']" />
 <Hanzi zi="国" :zuci="['中国', '国家', '国王', '国土']" />
 <Hanzi zi="王" :zuci="['王子', '国王', '女王', '大王']" />
 <Hanzi zi="方" :zuci="['大方', '方向', '对方', '方圆', '方方面面']" />
@@ -44,6 +48,6 @@ head:
 <Hanzi zi="清" />
 <Hanzi zi="气" />
 <Hanzi zi="晴" />
-<Hanzi zi="情" />
+<Hanzi zi="情" :bihua="['点', '点', '竖', '横', '横', '竖', '横', '竖', '横折钩', '横', '横']" />
 <Hanzi zi="请" />
 <Hanzi zi="生" />