feat(projects): add plugin pinyin-pro

package.json

@@ -64,6 +64,7 @@
     "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",

src/locales/langs/en-us.ts

@@ -196,7 +196,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

@@ -196,7 +196,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

@@ -212,6 +212,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

@@ -68,6 +68,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";
@@ -174,6 +175,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,35 @@
+<script setup lang="ts">
+import { html } from 'pinyin-pro';
+</script>
+
+<template>
+  <div class="h-full">
+    <NCard title="pinyin 插件" :bordered="false" class="h-full card-wrapper" content-style="overflow:hidden">
+      <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 v-html="html('soybean 是一个清新优雅、高颜值且功能强大的后台管理模板')" />
+      <NDivider title-placement="left">不带音调</NDivider>
+      <p v-html="html('soybean 是一个清新优雅、高颜值且功能强大的后台管理模板', { toneType: 'none' })" />
+      <NDivider title-placement="left">自定义样式</NDivider>
+      <p class="custom-style" v-html="html('soybean 是一个清新优雅、高颜值且功能强大的后台管理模板')" />
+    </NCard>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.custom-style {
+  /* 汉字的样式 */
+  :deep(.py-chinese-item) {
+    color: #646cff;
+  }
+
+  /* 拼音的样式 */
+  :deep(.py-pinyin-item) {
+    color: #06b6d4;
+  }
+}
+</style>