feat(projects): add page plugin_barcode (#432)

package.json

@@ -59,6 +59,7 @@
     "clipboard": "2.0.11",
     "dayjs": "1.11.11",
     "echarts": "5.5.0",
+    "jsbarcode": "3.11.6",
     "lodash-es": "4.17.21",
     "naive-ui": "2.38.2",
     "nprogress": "0.2.0",

src/locales/langs/en-us.ts

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

src/locales/langs/zh-cn.ts

@@ -189,7 +189,8 @@ const local: App.I18n.Schema = {
     plugin_map: '地图',
     plugin_print: '打印',
     plugin_swiper: 'Swiper',
-    plugin_video: '视频'
+    plugin_video: '视频',
+    plugin_barcode: '条形码'
   },
   page: {
     login: {

src/router/elegant/imports.ts

@@ -36,6 +36,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   manage_user: () => import("@/views/manage/user/index.vue"),
   "multi-menu_first_child": () => import("@/views/multi-menu/first_child/index.vue"),
   "multi-menu_second_child_home": () => import("@/views/multi-menu/second_child_home/index.vue"),
+  plugin_barcode: () => import("@/views/plugin/barcode/index.vue"),
   plugin_charts_echarts: () => import("@/views/plugin/charts/echarts/index.vue"),
   plugin_copy: () => import("@/views/plugin/copy/index.vue"),
   plugin_editor_markdown: () => import("@/views/plugin/editor/markdown/index.vue"),

src/router/elegant/routes.ts

@@ -341,6 +341,16 @@ export const generatedRoutes: GeneratedRoute[] = [
       icon: 'clarity:plugin-line'
     },
     children: [
+      {
+        name: 'plugin_barcode',
+        path: '/plugin/barcode',
+        component: 'view.plugin_barcode',
+        meta: {
+          title: 'plugin_barcode',
+          i18nKey: 'route.plugin_barcode',
+          icon: 'ic:round-barcode'
+        }
+      },
       {
         name: 'plugin_charts',
         path: '/plugin/charts',

src/router/elegant/transform.ts

@@ -184,6 +184,7 @@ const routeMap: RouteMap = {
   "multi-menu_second_child": "/multi-menu/second/child",
   "multi-menu_second_child_home": "/multi-menu/second/child/home",
   "plugin": "/plugin",
+  "plugin_barcode": "/plugin/barcode",
   "plugin_charts": "/plugin/charts",
   "plugin_charts_echarts": "/plugin/charts/echarts",
   "plugin_copy": "/plugin/copy",

src/typings/components.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     AppProvider: typeof import('./../components/common/app-provider.vue')['default']
@@ -62,6 +62,7 @@ declare module 'vue' {
     NFormItemGi: typeof import('naive-ui')['NFormItemGi']
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
+    NGridItem: typeof import('naive-ui')['NGridItem']
     NInput: typeof import('naive-ui')['NInput']
     NInputGroup: typeof import('naive-ui')['NInputGroup']
     NInputNumber: typeof import('naive-ui')['NInputNumber']

src/typings/elegant-router.d.ts

@@ -58,6 +58,7 @@ declare module "@elegant-router/types" {
     "multi-menu_second_child": "/multi-menu/second/child";
     "multi-menu_second_child_home": "/multi-menu/second/child/home";
     "plugin": "/plugin";
+    "plugin_barcode": "/plugin/barcode";
     "plugin_charts": "/plugin/charts";
     "plugin_charts_echarts": "/plugin/charts/echarts";
     "plugin_copy": "/plugin/copy";
@@ -164,6 +165,7 @@ declare module "@elegant-router/types" {
     | "manage_user"
     | "multi-menu_first_child"
     | "multi-menu_second_child_home"
+    | "plugin_barcode"
     | "plugin_charts_echarts"
     | "plugin_copy"
     | "plugin_editor_markdown"

src/views/plugin/barcode/index.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import JsBarcode from 'jsbarcode';
+import { onMounted } from 'vue';
+
+const text = 'Soybean';
+
+onMounted(() => {
+  JsBarcode('#code39', 'Hello', { format: 'code39' });
+  JsBarcode('#code128', text);
+  JsBarcode('#ean-13', '1234567890128', { format: 'ean13' });
+  JsBarcode('#upc-a', '123456789012', { format: 'upc' });
+  JsBarcode('#barcode', 'Hello', {
+    height: 30,
+    lineColor: '#9ca3af'
+  });
+  JsBarcode('#barcode1', text, {
+    background: '#9ca3af',
+    lineColor: '#ffffff'
+  });
+  JsBarcode('#barcode2', text, {
+    fontSize: 40
+  });
+  JsBarcode('#barcode3', 'Hi', {
+    textMargin: 30,
+    width: 4
+  });
+  JsBarcode('#barcode4', text, {
+    textPosition: 'top',
+    fontOptions: 'bold'
+  });
+});
+</script>
+
+<template>
+  <div>
+    <NCard title="条形码" :bordered="false" class="h-full card-wrapper">
+      <NGrid cols="s:1 m:1 l:3" x-gap="12px" y-gap="24px" responsive="screen" item-responsive class="grid-wrapper">
+        <NGi>
+          CODE 39 正常尺寸
+          <svg id="code39" />
+        </NGi>
+        <NGi>
+          CODE 128 正常尺寸
+          <svg id="code128" />
+        </NGi>
+        <NGi>
+          ENA-13 商品条形码
+          <svg id="ean-13" />
+        </NGi>
+        <NGi>
+          UPC-A 商品条形码
+          <svg id="upc-a" />
+        </NGi>
+        <NGi>
+          不一样的高度，不一样的颜色
+          <svg id="barcode" />
+        </NGi>
+        <NGi>
+          加个背景色
+          <svg id="barcode1" />
+        </NGi>
+        <NGi>
+          字体好大
+          <svg id="barcode2" />
+        </NGi>
+        <NGi>
+          粗狂的条码，文字离远点
+          <svg id="barcode3" />
+        </NGi>
+        <NGi>
+          字体跑上面来，还是粗体
+          <svg id="barcode4" />
+        </NGi>
+      </NGrid>
+    </NCard>
+  </div>
+</template>
+
+<style scoped>
+.grid-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.grid-wrapper > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+</style>