feat: 添加汉语拼音功能示例

locales/en.yaml

@@ -101,6 +101,7 @@ menus:
   hsExecl: Export Excel
   hsInfiniteScroll: Table Infinite Scroll
   hsSensitive: Sensitive Filter
+  hsPinyin: PinYin
   hsdanmaku: Danmaku Components
   hsPureTableBase: Base Usage
   hsPureTableHigh: High Usage

locales/zh-CN.yaml

@@ -101,6 +101,7 @@ menus:
   hsExecl: 导出Excel
   hsInfiniteScroll: 表格无限滚动
   hsSensitive: 敏感词过滤
+  hsPinyin: 汉语拼音
   hsdanmaku: 弹幕组件
   hsPureTableBase: 基础用法（23个示例）
   hsPureTableHigh: 高级用法（11个示例）

package.json

@@ -58,6 +58,7 @@
     "nprogress": "^0.2.0",
     "path": "^0.12.7",
     "pinia": "^2.1.4",
+    "pinyin-pro": "^3.15.2",
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",
     "responsive-storage": "^2.2.0",

pnpm-lock.yaml

@@ -60,6 +60,7 @@ specifiers:
   path: ^0.12.7
   picocolors: ^1.0.0
   pinia: ^2.1.4
+  pinyin-pro: ^3.15.2
   postcss: ^8.4.24
   postcss-html: ^1.5.0
   postcss-import: ^15.1.0
@@ -145,6 +146,7 @@ dependencies:
   nprogress: 0.2.0
   path: 0.12.7
   pinia: 2.1.4_typescript@5.0.4+vue@3.3.4
+  pinyin-pro: 3.15.2
   qrcode: 1.5.3
   qs: 6.11.2
   responsive-storage: 2.2.0
@@ -8922,6 +8924,13 @@ packages:
       vue-demi: 0.14.5_vue@3.3.4
     dev: false
 
+  /pinyin-pro/3.15.2:
+    resolution:
+      {
+        integrity: sha512-kvbPYwTzz3mXZj7OLheB6LysDi/lIPRFvSXX6fCko03l4joruzrn+2GfO9BqIsHSjqipeH6qPB3jIfl8iRUQWA==
+      }
+    dev: false
+
   /pirates/4.0.5:
     resolution:
       {

src/router/modules/able.ts

@@ -155,6 +155,15 @@ export default {
         title: $t("menus.hsSensitive"),
         extraIcon: "IF-pure-iconfont-new svg"
       }
+    },
+    {
+      path: "/able/pinyin",
+      name: "Pinyin",
+      component: () => import("@/views/able/pinyin.vue"),
+      meta: {
+        title: $t("menus.hsPinyin"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
     }
   ]
 } as RouteConfigsTable;

src/views/able/pinyin.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { html } from "pinyin-pro";
+
+defineOptions({
+  name: "Pinyin"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">汉语拼音</span>
+      </div>
+    </template>
+    <p v-html="html('带 音 调')" />
+    <p class="mt-2" v-html="html('不 带 音 调', { toneType: 'none' })" />
+    <p class="mt-2 custom" v-html="html('自 定 义 样 式')" />
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+.custom {
+  /* 汉字的样式 */
+  :deep(.py-chinese-item) {
+    color: #409eff;
+  }
+
+  /* 拼音的样式 */
+  :deep(.py-pinyin-item) {
+    color: #f56c6c;
+  }
+}
+</style>