feat(projects): add plugin pinyin-pro (#557)

package.json

@@ -58,12 +58,14 @@
     "@vueuse/core": "10.11.0",
     "clipboard": "2.0.11",
     "dayjs": "1.11.11",
+    "dompurify": "3.1.6",
     "echarts": "5.5.1",
     "jsbarcode": "3.11.6",
     "lodash-es": "4.17.21",
     "naive-ui": "2.38.2",
     "nprogress": "0.2.0",
     "pinia": "2.1.7",
+    "pinyin-pro": "3.23.1",
     "print-js": "1.6.0",
     "swiper": "11.1.1",
     "tailwind-merge": "2.4.0",
@@ -83,6 +85,7 @@
     "@sa/uno-preset": "workspace:*",
     "@soybeanjs/eslint-config": "1.3.7",
     "@types/bmapgl": "0.0.5",
+    "@types/dompurify": "3.0.5",
     "@types/lodash-es": "4.17.12",
     "@types/node": "20.14.10",
     "@types/nprogress": "0.2.3",

src/locales/langs/en-us.ts

@@ -195,7 +195,8 @@ const local: App.I18n.Schema = {
     plugin_print: 'Print',
     plugin_swiper: 'Swiper',
     plugin_video: 'Video',
-    plugin_barcode: 'Barcode'
+    plugin_barcode: 'Barcode',
+    plugin_pinyin: 'pinyin'
   },
   page: {
     login: {

src/locales/langs/zh-cn.ts

@@ -195,7 +195,8 @@ const local: App.I18n.Schema = {
     plugin_print: '打印',
     plugin_swiper: 'Swiper',
     plugin_video: '视频',
-    plugin_barcode: '条形码'
+    plugin_barcode: '条形码',
+    plugin_pinyin: '拼音'
   },
   page: {
     login: {

src/router/elegant/imports.ts

@@ -43,6 +43,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   plugin_editor_quill: () => import("@/views/plugin/editor/quill/index.vue"),
   plugin_icon: () => import("@/views/plugin/icon/index.vue"),
   plugin_map: () => import("@/views/plugin/map/index.vue"),
+  plugin_pinyin: () => import("@/views/plugin/pinyin/index.vue"),
   plugin_print: () => import("@/views/plugin/print/index.vue"),
   plugin_swiper: () => import("@/views/plugin/swiper/index.vue"),
   plugin_video: () => import("@/views/plugin/video/index.vue"),

src/router/elegant/routes.ts

@@ -433,6 +433,16 @@ export const generatedRoutes: GeneratedRoute[] = [
           icon: 'mdi:map'
         }
       },
+      {
+        name: 'plugin_pinyin',
+        path: '/plugin/pinyin',
+        component: 'view.plugin_pinyin',
+        meta: {
+          title: 'plugin_pinyin',
+          i18nKey: 'route.plugin_pinyin',
+          icon: 'entypo-social:google-hangouts'
+        }
+      },
       {
         name: 'plugin_print',
         path: '/plugin/print',

src/router/elegant/transform.ts

@@ -211,6 +211,7 @@ const routeMap: RouteMap = {
   "plugin_editor_quill": "/plugin/editor/quill",
   "plugin_icon": "/plugin/icon",
   "plugin_map": "/plugin/map",
+  "plugin_pinyin": "/plugin/pinyin",
   "plugin_print": "/plugin/print",
   "plugin_swiper": "/plugin/swiper",
   "plugin_video": "/plugin/video",

src/typings/elegant-router.d.ts

@@ -67,6 +67,7 @@ declare module "@elegant-router/types" {
     "plugin_editor_quill": "/plugin/editor/quill";
     "plugin_icon": "/plugin/icon";
     "plugin_map": "/plugin/map";
+    "plugin_pinyin": "/plugin/pinyin";
     "plugin_print": "/plugin/print";
     "plugin_swiper": "/plugin/swiper";
     "plugin_video": "/plugin/video";
@@ -172,6 +173,7 @@ declare module "@elegant-router/types" {
     | "plugin_editor_quill"
     | "plugin_icon"
     | "plugin_map"
+    | "plugin_pinyin"
     | "plugin_print"
     | "plugin_swiper"
     | "plugin_video"

src/views/plugin/pinyin/index.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { html } from 'pinyin-pro';
+import domPurify from 'dompurify';
+
+const domRef = ref<HTMLElement | null>(null);
+const domRef2 = ref<HTMLElement | null>(null);
+const domRef3 = ref<HTMLElement | null>(null);
+
+function renderHtml() {
+  if (!domRef.value || !domRef2.value || !domRef3.value) return;
+
+  const text = 'SoybeanAdmin是一个清新优雅、高颜值且功能强大的后台管理模板';
+
+  const code = domPurify.sanitize(html(text));
+  const code2 = domPurify.sanitize(html(text, { toneType: 'none' }));
+
+  domRef.value.innerHTML = code;
+  domRef2.value.innerHTML = code2;
+  domRef3.value.innerHTML = code;
+}
+
+onMounted(() => {
+  renderHtml();
+});
+</script>
+
+<template>
+  <div>
+    <NCard title="pinyin 插件" :bordered="false" class="h-full card-wrapper">
+      <NSpace :vertical="true">
+        <GithubLink link="https://github.com/zh-lx/pinyin-pro" />
+        <WebSiteLink label="文档地址：" link="https://pinyin-pro.cn/" />
+      </NSpace>
+      <NDivider title-placement="left">常规使用</NDivider>
+      <p ref="domRef" class="text-18px"></p>
+      <NDivider title-placement="left">不带音调</NDivider>
+      <p ref="domRef2" class="text-18px"></p>
+      <NDivider title-placement="left">自定义样式</NDivider>
+      <p ref="domRef3" class="custom-style text-18px"></p>
+    </NCard>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.custom-style {
+  :deep(.py-result-item) {
+    .py-chinese-item {
+      --uno: text-primary;
+    }
+
+    .py-pinyin-item {
+      --uno: text-error;
+    }
+  }
+}
+</style>