feat: 拼音转换组件

package.json

@@ -50,6 +50,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.3.0",
     "pinia-plugin-persistedstate": "^3.2.1",
+    "pinyin-pro": "^3.26.0",
     "print-js": "^1.6.0",
     "qrcode": "^1.5.4",
     "sortablejs": "^1.15.2",

pnpm-lock.yaml

@@ -62,6 +62,9 @@ importers:
       pinia-plugin-persistedstate:
         specifier: ^3.2.1
         version: 3.2.1(pinia@2.3.0(typescript@5.4.3)(vue@3.4.21(typescript@5.4.3)))
+      pinyin-pro:
+        specifier: ^3.26.0
+        version: 3.26.0
       print-js:
         specifier: ^1.6.0
         version: 1.6.0
@@ -3272,6 +3275,9 @@ packages:
       typescript:
         optional: true
 
+  pinyin-pro@3.26.0:
+    resolution: {integrity: sha512-HcBZZb0pvm0/JkPhZHWA5Hqp2cWHXrrW/WrV+OtaYYM+kf35ffvZppIUuGmyuQ7gDr1JDJKMkbEE+GN0wfMoGg==}
+
   pkg-types@1.0.3:
     resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
 
@@ -7674,6 +7680,8 @@ snapshots:
     transitivePeerDependencies:
       - '@vue/composition-api'
 
+  pinyin-pro@3.26.0: {}
+
   pkg-types@1.0.3:
     dependencies:
       jsonc-parser: 3.2.1

src/components.d.ts

@@ -9,11 +9,13 @@ declare module 'vue' {
   export interface GlobalComponents {
     BarcodeDraw: typeof import('./components/barcode-draw/index.vue')['default']
     CodeView: typeof import('./components/code-view/index.vue')['default']
+    copy: typeof import('./components/pinyin-pro/index copy.vue')['default']
     ExternalLinkPage: typeof import('./components/external-link-page/index.vue')['default']
     FillPage: typeof import('./components/fill-page/index.vue')['default']
     InternalLinkPage: typeof import('./components/internal-link-page/index.vue')['default']
     LangProvider: typeof import('./components/lang-provider/index.vue')['default']
     MainTransition: typeof import('./components/main-transition/index.vue')['default']
+    PinyinPro: typeof import('./components/pinyin-pro/index.vue')['default']
     QrcodeDraw: typeof import('./components/qrcode-draw/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/components/pinyin-pro/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <div v-html="content"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { html } from "pinyin-pro";
+// https://github.com/zh-lx/pinyin-pro
+interface Props {
+  text: string;
+  options?: {
+    // 汉字和拼音最外层 <span> 标签的类名
+    resultClass?: string;
+    // 拼音外层 <rt> 标签的类名
+    pinyinClass?: string;
+    // 汉字外层 <span> 标签的类名
+    chineseClass?: string;
+    // 是否用 <span> 标签包裹非汉字字符。
+    wrapNonChinese?: boolean;
+    // 非汉字字符外层 <span> 标签的类名 （仅在 wrapNonChinese 值为 true 时有效）
+    nonChineseClass?: string;
+    // 拼音中音调的显示形式
+    tone?: boolean;
+    // v3.24.2+  是否输出 <rp>(</rp> 和 <rp>)</rp> 标签
+    rp?: boolean;
+    // 指定文字类名 key：类名 value：文字数组
+    customClassMap?: {
+      [key: string]: string[];
+    };
+  };
+}
+
+// withDefaults为defineProps标注类型
+// https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
+const props = withDefaults(defineProps<Props>(), {
+  text: "", // 默认值
+  options: () => ({})
+});
+
+const content = ref<string>();
+const createPinyin = () => {
+  content.value = html(props.text, props.options);
+};
+
+watch(
+  () => props.text,
+  () => {
+    createPinyin();
+  }
+);
+
+createPinyin();
+</script>
+
+<style lang="scss" scoped></style>

src/lang/modules/enUS.ts

@@ -24,7 +24,8 @@ export default {
     ["notice"]: "Notice",
     ["message"]: "Message",
     ["backlog"]: "Backlog",
-    ["switch-language-to-preview"]: "Please switch the language to preview the internationalization effect"
+    ["switch-language-to-preview"]: "Please switch the language to preview the internationalization effect",
+    ["please-enter-something"]: "Please enter something"
   },
   menu: {
     ["home"]: "home",
@@ -59,6 +60,7 @@ export default {
     ["fingerprintjs2"]: "fingerprintjs2",
     ["barcode"]: "barcode",
     ["qrcode"]: "qrcode",
+    ["pinyin"]: "pinyin",
     ["markdown"]: "Markdown",
     ["directive"]: "directive",
     ["anti-shake"]: "anti-shake",

src/lang/modules/zhCN.ts

@@ -24,7 +24,8 @@ export default {
     ["notice"]: "通知",
     ["message"]: "消息",
     ["backlog"]: "待办",
-    ["switch-language-to-preview"]: "请切换语言来预览国际化效果"
+    ["switch-language-to-preview"]: "请切换语言来预览国际化效果",
+    ["please-enter-something"]: "请输入"
   },
   menu: {
     ["home"]: "首页",
@@ -59,6 +60,7 @@ export default {
     ["fingerprintjs2"]: "浏览器指纹",
     ["barcode"]: "条形码",
     ["qrcode"]: "二维码",
+    ["pinyin"]: "拼音",
     ["markdown"]: "Markdown",
     ["directive"]: "自定义指令",
     ["anti-shake"]: "防抖",

src/mock/_data/system_menu.ts

@@ -588,6 +588,23 @@ export default [
               icon: "icon-menu",
               sort: 10
             }
+          },
+          {
+            path: "/component/pinyin",
+            name: "pinyin",
+            component: "component/pinyin/pinyin",
+            meta: {
+              title: "pinyin",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 11
+            }
           }
         ]
       },

src/views/component/pinyin/pinyin.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="snow-page">
+    <div class="snow-inner">
+      <a-card title="拼音转换" hoverable>
+        <a-space direction="vertical" size="large" fill>
+          <a-textarea v-model="myText" placeholder="请输入内容" allow-clear />
+          <pinyin-pro
+            v-if="myText"
+            :text="myText"
+            :options="{
+              resultClass: 'my-text-item'
+            }"
+          />
+          <a-empty v-else />
+        </a-space>
+      </a-card>
+      <br />
+      <a-card title="默认字符拼音-自定义字体大小" hoverable>
+        <pinyin-pro
+          :text="text"
+          :options="{
+            resultClass: 'my-text-item'
+          }"
+        />
+      </a-card>
+      <br />
+      <a-card title="字符拼音-自定义颜色" hoverable>
+        <pinyin-pro
+          :text="text"
+          :options="{
+            resultClass: 'my-text-item',
+            chineseClass: 'my-chinese-item',
+            pinyinClass: 'my-pinyin-item'
+          }"
+        />
+      </a-card>
+      <br />
+      <a-card title="字符拼音-指定文字颜色" hoverable>
+        <pinyin-pro
+          :text="text"
+          :options="{
+            resultClass: 'my-text-item',
+            customClassMap: {
+              'red-item': ['节', '气'],
+              'blue-item': ['科', '学']
+            }
+          }"
+        />
+      </a-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+let text =
+  "二十四节气是我国独创的传统历法，也是我国历史长河中不可多得的瑰宝，上至风雨雷电，下至芸芸众生，包罗万象。在长期的生产实践中，我国劳动人民通过对太阳、天象的不断观察，开创出了节气这种独特的历法。经过不断的探索、分析和总结，节气的划分逐渐变得科学和丰富，到距今两千多年的秦汉时期，二十四节气已经形成了完整的体系，并一直沿用至今。";
+const myText = ref("");
+</script>
+
+<style lang="scss" scoped>
+:deep(.my-text-item) {
+  font-size: 16px;
+  line-height: 30px;
+}
+:deep(.my-chinese-item) {
+  color: $color-primary;
+}
+:deep(.my-pinyin-item) {
+  color: $color-danger;
+}
+:deep(.red-item) {
+  color: $color-danger;
+}
+:deep(.blue-item) {
+  color: $color-primary;
+}
+</style>