From 1a79835e6ee8f337981cb3e433db1abfca5f0c51 Mon Sep 17 00:00:00 2001
From: Zhao Bin <413853119@qq.com>
Date: Thu, 16 May 2024 16:49:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(theme):=20hanzi=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=88=90=E8=AF=AD=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../theme/components/hanzi/Hanzi.vue          | 39 +++++++++++++++++--
 .../theme/components/hanzi/hanzi.css          |  6 ++-
 docs/posts/edu/learn-hanzi.md                 |  6 ++-
 3 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/docs/.vuepress/theme/components/hanzi/Hanzi.vue b/docs/.vuepress/theme/components/hanzi/Hanzi.vue
index 26f6800..6fc776b 100644
--- a/docs/.vuepress/theme/components/hanzi/Hanzi.vue
+++ b/docs/.vuepress/theme/components/hanzi/Hanzi.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, shallowRef } from 'vue'
+import { computed, onMounted, ref, shallowRef } from 'vue'
 
 import cnchar from 'cnchar'
 import draw from 'cnchar-draw'
@@ -7,6 +7,7 @@ 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>
diff --git a/docs/.vuepress/theme/components/hanzi/hanzi.css b/docs/.vuepress/theme/components/hanzi/hanzi.css
index 9417bd4..3b332a3 100644
--- a/docs/.vuepress/theme/components/hanzi/hanzi.css
+++ b/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 {
diff --git a/docs/posts/edu/learn-hanzi.md b/docs/posts/edu/learn-hanzi.md
index bbe76c9..210a790 100644
--- a/docs/posts/edu/learn-hanzi.md
+++ b/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="['一帆风顺', '风口浪尖', '风云人物', '风吹云散']" />
 
 ## 查字