feat(theme): hanzi 组件增加成语属性

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

@@ -1,12 +1,13 @@
 <script setup>
-import { onMounted, ref, shallowRef } from 'vue'
+import { computed, onMounted, ref, shallowRef } from 'vue'
 
 import cnchar from 'cnchar'
 import draw from 'cnchar-draw'
 import order from 'cnchar-order'
 import radical from 'cnchar-radical'
 import words from 'cnchar-words'
 import voice from 'cnchar-voice'
+import idiom from 'cnchar-idiom'
 
 import {
   CARD_WIDTH,
@@ -42,9 +43,15 @@ const props = defineProps({
       return []
     },
   },
+  chengyu: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
 })
 
-cnchar.use(draw, order, radical, words, voice)
+cnchar.use(draw, order, radical, words, voice, idiom)
 
 const printRef = ref(null)
 const aniRef = ref(null)
@@ -55,6 +62,20 @@ const bushouRet = shallowRef([{}])
 const bihuaCountRet = shallowRef([props.bihuashu])
 const bihuaNameRet = shallowRef([props.bihua])
 const zuciRet = shallowRef(props.zuci)
+const chengyuRef = computed(() => {
+  if (props.chengyu.length > 0) {
+    return props.chengyu.slice(0, 5)
+  }
+
+  return (
+    cnchar
+      .idiom(props.zi)
+      // 过滤四字成语
+      .filter(item => item.length === 4)
+      // .sort((a, b) => a.length - b.length)
+      .slice(0, 5)
+  )
+})
 
 const speehTxt = ref([])
 
@@ -127,6 +148,11 @@ onMounted(() => {
     speehTxt.value.push('组词')
     speehTxt.value.push(...props.zuci)
   }
+
+  if (chengyuRef.value.length > 0) {
+    speehTxt.value.push('成语')
+    speehTxt.value.push(...chengyuRef.value)
+  }
 })
 
 function handleVoice() {
@@ -238,7 +264,14 @@ function handleRead() {
               :kong="TIAN_KONG"
             />
           </div>
-          <div class="words-container">{{ zuciRet.join(' ') }}&nbsp;</div>
+          <div class="info words-container">
+            <span class="tag">组词</span>
+            <span class="content">{{ zuciRet.join(' ') }}</span>
+          </div>
+          <div class="info chengyu">
+            <span class="tag">成语</span>
+            <span class="content">{{ chengyuRef.join(' ') }}</span>
+          </div>
         </div>
       </div>
     </div>

docs/.vuepress/theme/components/hanzi/hanzi.css

@@ -65,8 +65,12 @@
   width: auto;
 }
 
-.words-container {
+.info.words-container {
   text-align: left;
+  display: block;
+}
+.info.chengyu {
+  display: block;
 }
 
 .hanzi-controls {

docs/posts/edu/learn-hanzi.md

@@ -89,11 +89,15 @@ head:
 
 它是一个数组，用于指定汉字的组词。
 
+### `成语`
+
+它是一个数组，用于指定汉字的成语。
+
 ## 简单效果
 
 <Hanzi zi="春" :zuci="['春风', '春雨', '春天', '春日']" />
 <Hanzi zi="冬" :bihua="['撇', '横撇', '捺', '点', '点']" />
-<Hanzi zi="风" pinyin="fēng" jiegou="独体字" :zuci="['风雨', '风云', '大风', '东风']" />
+<Hanzi zi="风" pinyin="fēng" jiegou="独体字" :zuci="['风雨', '风云', '大风', '东风']" :chengyu="['一帆风顺', '风口浪尖', '风云人物', '风吹云散']" />
 
 ## 查字