feat(hanzi): 添加查字功能

.markdownlint.json

@@ -21,7 +21,8 @@
       "Catalog",
       "Replit",
       "SiteInfo",
-      "Hanzi"
+      "Hanzi",
+      "Chazi"
     ]
   }
 }

docs/.vuepress/client.ts

@@ -4,6 +4,7 @@ import type { ClientConfig } from '@vuepress/client'
 import AutoArticleListLayout from './theme/layouts/AutoArticleListLayout'
 import AutoArticleList from './theme/components/AutoArticleList'
 import Hanzi from './theme/components/hanzi/Hanzi.vue'
+import Chazi from './theme/components/hanzi/Chazi.vue'
 
 // 为项目主页的特性添加闪光效果
 import 'vuepress-theme-hope/presets/shinning-feature-panel.scss'
@@ -24,5 +25,6 @@ export default defineClientConfig({
   enhance: ({ app }) => {
     app.component('AutoArticleList', AutoArticleList)
     app.component('Hanzi', Hanzi)
+    app.component('Chazi', Chazi)
   },
 })

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

@@ -0,0 +1,25 @@
+<script setup>
+import { ref } from 'vue'
+
+import Hanzi from './Hanzi.vue'
+
+const input = ref('')
+const zi = ref('')
+
+function handleClick() {
+  zi.value = input.value
+}
+</script>
+
+<template>
+  <div class="container">
+    <label>
+      汉字
+      <input v-model="input" type="text" maxlength="1" />
+    </label>
+    <button @click="handleClick">查</button>
+  </div>
+  <div class="result">
+    <Hanzi v-if="zi" :key="zi" :zi="zi" />
+  </div>
+</template>

docs/posts/edu/chazi.md

@@ -0,0 +1,19 @@
+---
+star: 99
+article: true
+date: 2024-03-03
+category:
+  - edu
+tag:
+  - edu
+  - 教育
+  - 汉字
+head:
+  - - meta
+    - name: description
+      content: 汉字学习，查看笔画，笔划，笔顺
+---
+
+# 查字
+
+<Chazi />

docs/posts/edu/learn-hanzi.md

@@ -87,3 +87,7 @@ head:
 <Hanzi zi="春" :zuci="['春风', '春雨', '春天', '春日']" />
 <Hanzi zi="冬" :bihua="['撇', '横撇', '捺', '点', '点']" />
 <Hanzi zi="风" pinyin="fēng" jiegou="独体字" :zuci="['风雨', '风云', '大风', '东风']" />
+
+## 查字
+
+<Chazi />