v4.8.1

.vscode/settings.json

@@ -21,17 +21,20 @@
   "cSpell.words": [
     "bezier",
     "Clickoutside",
+    "codabar",
     "commitmsg",
     "datetimerange",
     "domtoimage",
     "EDITMSG",
     "iife",
     "internalkey",
+    "jsbarcode",
     "linebreak",
     "macarons",
     "menutag",
     "ndata",
     "persistedstate",
+    "pharmacode",
     "Popselect",
     "precommit",
     "siderbar",

CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGE LOG
 
+## 4.8.1
+
+## Feats
+
+- 新增 `RBarcode` 条形码组件，基于 `JsBarcode` 二次封装
+
+## Fixes
+
+- 修复 `RSegment` 分段器设置 `popover` 后警告的问题
+
 ## 4.8.0
 
 全局破坏性更新。移除了很多包、方法，请谨慎更新。

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.8.0",
+  "version": "4.8.1",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || >=20.0.0",
@@ -42,6 +42,7 @@
     "dom-to-image": "2.6.0",
     "echarts": "^5.5.0",
     "interactjs": "1.10.26",
+    "jsbarcode": "3.11.6",
     "lodash-es": "^4.17.21",
     "mockjs": "1.1.0",
     "naive-ui": "^2.38.1",
@@ -61,6 +62,7 @@
     "@intlify/unplugin-vue-i18n": "^2.0.0",
     "@types/crypto-js": "^4.1.1",
     "@types/dom-to-image": "2.6.7",
+    "@types/jsbarcode": "3.11.4",
     "@types/lodash-es": "^4.17.11",
     "@types/mockjs": "1.0.7",
     "@typescript-eslint/eslint-plugin": "^6.5.0",

pnpm-lock.yaml

@@ -32,6 +32,9 @@ dependencies:
   interactjs:
     specifier: 1.10.26
     version: 1.10.26
+  jsbarcode:
+    specifier: 3.11.6
+    version: 3.11.6
   lodash-es:
     specifier: ^4.17.21
     version: 4.17.21
@@ -85,6 +88,9 @@ devDependencies:
   '@types/dom-to-image':
     specifier: 2.6.7
     version: 2.6.7
+  '@types/jsbarcode':
+    specifier: 3.11.4
+    version: 3.11.4
   '@types/lodash-es':
     specifier: ^4.17.11
     version: 4.17.12
@@ -1580,6 +1586,12 @@ packages:
     resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
     dev: false
 
+  /@types/jsbarcode@3.11.4:
+    resolution: {integrity: sha512-VBcpTAnEMH0Gbh8JpV14CgOtJjCYjsvR2FoDRyoYPE0gUxtApf8N4c+HKEOyz/iiIZkMzqrzBA3XX7+KgKxxsA==}
+    dependencies:
+      '@types/node': 20.11.30
+    dev: true
+
   /@types/json-schema@7.0.15:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: true
@@ -5288,6 +5300,10 @@ packages:
       argparse: 2.0.1
     dev: true
 
+  /jsbarcode@3.11.6:
+    resolution: {integrity: sha512-G5TKGyKY1zJo0ZQKFM1IIMfy0nF2rs92BLlCz+cU4/TazIc4ZH+X1GYeDRt7TKjrYqmPfTjwTBkU/QnQlsYiuA==}
+    dev: false
+
   /jsesc@2.5.2:
     resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
     engines: {node: '>=4'}

src/components/RBarcode/index.ts

@@ -0,0 +1,8 @@
+import RBarcode from './src/Barcode'
+import barcodeProps from './src/props'
+
+import type { ExtractPublicPropTypes } from 'vue'
+
+export type BarcodeProps = ExtractPublicPropTypes<typeof barcodeProps>
+
+export { RBarcode, barcodeProps }

src/components/RBarcode/src/Barcode.tsx

@@ -0,0 +1,72 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2024-04-14
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import './index.scss'
+
+import { NSpin } from 'naive-ui'
+
+import barcode from 'jsbarcode'
+import props from './props'
+import { completeSize } from '@/utils'
+
+export default defineComponent({
+  name: 'RBarcode',
+  props,
+  setup(props) {
+    const barcodeRef = ref<HTMLCanvasElement | HTMLOrSVGElement>()
+    const cssVars = computed(() => {
+      const cssVar = {
+        '--r-barcode-width': completeSize(props.width),
+        '--r-barcode-height': completeSize(props.height),
+      }
+
+      return cssVar
+    })
+
+    const barcodeRender = () => {
+      const { format, text = '', options } = props
+
+      const assignOptions = Object.assign({}, options, {
+        format,
+      })
+
+      barcode(barcodeRef.value, text, assignOptions)
+    }
+
+    onMounted(() => {
+      barcodeRender()
+    })
+
+    return {
+      barcodeRef,
+      cssVars,
+    }
+  },
+  render() {
+    const { barcodeRender, loading, cssVars } = this
+    const c = [
+      'r-barcode',
+      {
+        'r-barcode--loading': loading,
+      },
+    ]
+
+    return (
+      <NSpin class="r-barcode-spin" show={loading}>
+        {barcodeRender === 'canvas' ? (
+          <canvas class={c} style={cssVars} ref="barcodeRef" />
+        ) : (
+          <svg class={c} style={cssVars} ref="barcodeRef" />
+        )}
+      </NSpin>
+    )
+  },
+})

src/components/RBarcode/src/index.scss

@@ -0,0 +1,16 @@
+.r-barcode {
+  position: relative;
+  width: var(--r-barcode-width);
+  height: var(--r-barcode-height);
+  transition: filter 0.3s var(--r-bezier);
+
+  &.r-barcode--loading {
+    filter: blur(4px);
+  }
+}
+
+.r-barcode-spin,
+.r-barcode-spin .n-spin-content {
+  width: max-content !important;
+  height: max-content !important;
+}

src/components/RBarcode/src/props.ts

@@ -0,0 +1,87 @@
+import type { RBarcodeRender, RBarcodeOptions, RBarcodeFormat } from './types'
+import type { PropType } from 'vue'
+
+const props = {
+  /**
+   *
+   * @description
+   * 条形码宽度。
+   *
+   * @default 'auto'
+   */
+  width: {
+    type: [String, Number] as PropType<string | number>,
+    default: 'auto',
+  },
+  /**
+   *
+   * @description
+   * 条形码高度。
+   *
+   * @default 'auto'
+   */
+  height: {
+    type: [String, Number] as PropType<string | number>,
+    default: 'auto',
+  },
+  /**
+   *
+   * @description
+   * 是否显示 loading 状态。
+   *
+   * @default false
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   *
+   * @description
+   * 条形码渲染模式。
+   * 允许配置为 svg 或 canvas。
+   *
+   * @default 'canvas'
+   */
+  barcodeRender: {
+    type: String as PropType<RBarcodeRender>,
+    default: 'canvas',
+    validator: (value: RBarcodeRender) => ['canvas', 'svg'].includes(value),
+  },
+  /**
+   *
+   * @description
+   * 条形码内容。
+   *
+   * @default undefined
+   */
+  text: {
+    type: String,
+  },
+  /**
+   *
+   * @description
+   * 渲染配置项。
+   *
+   * @see https://github.com/lindell/JsBarcode/wiki/Options
+   *
+   * @default {}
+   */
+  options: {
+    type: Object as PropType<RBarcodeOptions>,
+    default: () => ({}),
+  },
+  /**
+   *
+   * @description
+   * 条形码输出格式，该配置项优先级最高。
+   *
+   * @default 'CODE128'
+   */
+  format: {
+    type: String as PropType<RBarcodeFormat>,
+    default: () => 'CODE128',
+  },
+} as const
+
+export default props

src/components/RBarcode/src/types.ts

@@ -0,0 +1,26 @@
+import type JsBarcode from 'jsbarcode'
+
+export type RBarcodeRender = 'canvas' | 'svg'
+
+export type RBarcodeOptions = JsBarcode.Options
+
+export type RBarcodeFormat =
+  | 'CODE39'
+  | 'CODE128'
+  | 'CODE128A'
+  | 'CODE128B'
+  | 'CODE128C'
+  | 'EAN13'
+  | 'EAN8'
+  | 'EAN5'
+  | 'EAN2'
+  | 'UPC'
+  | 'ITF14'
+  | 'ITF'
+  | 'MSI'
+  | 'MSI10'
+  | 'MSI11'
+  | 'MSI1010'
+  | 'MSI1110'
+  | 'pharmacode'
+  | 'codabar'

src/components/index.ts

@@ -10,6 +10,7 @@ export * from './RTable'
 export * from './RTransitionComponent'
 export * from './RForm'
 export * from './RSegment'
+export * from './RBarcode'
 
 // 导出自定义组件类型
 export type * from './RChart/src/types'
@@ -21,3 +22,4 @@ export type * from './RTransitionComponent/src/types'
 export type * from './RForm/src/types'
 export type * from './RModal/src/types'
 export type * from './RSegment/src/types'
+export type * from './RBarcode/src/types'

src/locales/lang/en-US/menu.json

@@ -1,30 +1,31 @@
 {
-  "Dashboard": "Home",
-  "Rely": "Rely",
-  "RelyAbout": "Rely About",
-  "Error": "Error Page",
-  "Echart": "Chart",
-  "scrollReveal": "Scroll Reveal",
   "Axios": "Axios Request",
-  "Table": "Table",
+  "Barcode": "Barcode",
-  "MultiMenu": "MultiMenu(catch)",
+  "CacheDemo": "Cache Utils Demo",
+  "CalculatePrecision": "Precision",
+  "ContextMenu": "Right Click Menu",
+  "Dashboard": "Home",
+  "Directive": "Directive",
   "Doc": "Doc",
   "DocLocal": "Doc (China)",
   "DocLocalInside": "Doc（inside）",
+  "Echart": "Chart",
+  "Error": "Error Page",
+  "Form": "Form",
+  "Mock": "Mock",
+  "Modal": "Modal",
+  "MultiMenu": "MultiMenu(catch)",
   "Office": "Office",
   "Office_Document": "Document",
   "Office_Presentation": "Presentation",
   "Office_Spreadsheet": "Spreadsheet",
-  "CalculatePrecision": "Precision",
-  "Directive": "Directive",
-  "RouterDemo": "Same Level Router Demo",
-  "Mock": "Mock",
   "QRCode": "QRCode",
+  "Rely": "Rely",
+  "RelyAbout": "Rely About",
+  "RouterDemo": "Same Level Router Demo",
+  "Segment": "Segment",
   "SvgIcon": "SVG Icon",
+  "Table": "Table",
   "TemplateHooks": "Template Api",
-  "Modal": "Modal",
+  "scrollReveal": "Scroll Reveal"
-  "ContextMenu": "Right Click Menu",
-  "CacheDemo": "Cache Utils Demo",
-  "Form": "Form",
-  "Segment": "Segment"
 }

src/locales/lang/zh-CN/menu.json

@@ -1,30 +1,31 @@
 {
-  "Dashboard": "首页",
-  "Rely": "依赖项",
-  "RelyAbout": "关于",
-  "Error": "错误页",
-  "Echart": "可视化",
-  "scrollReveal": "滚动动画",
   "Axios": "请求",
-  "Table": "表格",
+  "Barcode": "条形码",
-  "MultiMenu": "多级菜单(缓存)",
+  "CacheDemo": "缓存工具函数",
+  "CalculatePrecision": "数字精度",
+  "ContextMenu": "右键菜单",
+  "Dashboard": "首页",
+  "Directive": "指令",
   "Doc": "文档",
   "DocLocal": "文档 (加速地址)",
   "DocLocalInside": "文档（内嵌）",
+  "Echart": "可视化",
+  "Error": "错误页",
+  "Form": "表单",
+  "Mock": "Mock 数据",
+  "Modal": "模态框",
+  "MultiMenu": "多级菜单(缓存)",
   "Office": "办公",
   "Office_Document": "文档",
   "Office_Presentation": "演示",
   "Office_Spreadsheet": "表格",
-  "CalculatePrecision": "数字精度",
-  "Directive": "指令",
-  "RouterDemo": "页面详情模式",
-  "Mock": "Mock 数据",
   "QRCode": "二维码",
+  "Rely": "依赖项",
+  "RelyAbout": "关于",
+  "RouterDemo": "页面详情模式",
+  "Segment": "分段器",
   "SvgIcon": "SVG 图标",
+  "Table": "表格",
   "TemplateHooks": "模板内置 Api",
-  "Modal": "模态框",
+  "scrollReveal": "滚动动画"
-  "ContextMenu": "右键菜单",
-  "CacheDemo": "缓存工具函数",
-  "Form": "表单",
-  "Segment": "分段器"
 }

src/router/modules/demo/barcode.ts

@@ -0,0 +1,20 @@
+import { t } from '@/hooks/web/useI18n'
+import { LAYOUT } from '@/router/constant'
+
+import type { AppRouteRecordRaw } from '@/router/types'
+
+const barcode: AppRouteRecordRaw = {
+  path: 'barcode',
+  name: 'Barcode',
+  component: () => import('@/views/demo/BarcodeDemo'),
+  meta: {
+    i18nKey: t('menu.Barcode'),
+    icon: 'other',
+    order: 2,
+    extra: {
+      label: 'new',
+    },
+  },
+}
+
+export default barcode

src/router/modules/demo/qrcode.ts

@@ -10,7 +10,7 @@ const qrcode: AppRouteRecordRaw = {
   meta: {
     i18nKey: t('menu.QRCode'),
     icon: 'other',
-    order: 3,
+    order: 2,
   },
 }
 

src/router/modules/demo/rely.ts

@@ -4,24 +4,14 @@ import { LAYOUT } from '@/router/constant'
 import type { AppRouteRecordRaw } from '@/router/types'
 
 const rely: AppRouteRecordRaw = {
-  path: '/rely',
+  path: 'rely-about',
-  name: 'Rely',
+  name: 'RelyAbout',
-  component: LAYOUT,
+  component: () => import('@/views/demo/rely/views/rely-about/index'),
   meta: {
-    i18nKey: t('menu.Rely'),
+    i18nKey: t('menu.RelyAbout'),
     icon: 'rely',
     order: 999,
   },
-  children: [
-    {
-      path: 'rely-about',
-      name: 'RelyAbout',
-      component: () => import('@/views/demo/rely/views/rely-about/index'),
-      meta: {
-        i18nKey: t('menu.RelyAbout'),
-      },
-    },
-  ],
 }
 
 export default rely

src/router/modules/demo/template-hooks.ts

@@ -11,9 +11,6 @@ const axios: AppRouteRecordRaw = {
     i18nKey: t('menu.TemplateHooks'),
     icon: 'other',
     order: 1,
-    extra: {
-      label: 'new',
-    },
   },
 }
 

src/utils/element.ts

@@ -402,6 +402,10 @@ export const queryElements = <T extends Element = Element>(
  * 自动补全尺寸。
  */
 export const completeSize = (size: number | string, unit = 'px') => {
+  if (size === 'auto') {
+    return size
+  }
+
   if (typeof size === 'number') {
     return size.toString() + unit
   } else if (

src/views/demo/BarcodeDemo.tsx

@@ -0,0 +1,125 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2024-04-14
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { RBarcode } from '@/components'
+import { NAlert, NCard, NFlex, NGrid, NGridItem, NSwitch } from 'naive-ui'
+
+export default defineComponent({
+  name: 'BarcodeDemo',
+  setup() {
+    const baseOptions = {
+      width: 4,
+    }
+    const loading = ref(false)
+
+    return {
+      baseOptions,
+      loading,
+    }
+  },
+  render() {
+    const { baseOptions } = this
+
+    return (
+      <NGrid cols={2} xGap={12} yGap={12}>
+        <NGridItem span={2}>
+          <NCard title="详细配置项说明">
+            点击查看详细配置项：
+            <a href="https://github.com/lindell/JsBarcode/wiki/Options">
+              js-barcode options
+            </a>
+            。
+          </NCard>
+        </NGridItem>
+        <NGridItem span={1}>
+          <NCard title="基础条形码">
+            <RBarcode
+              text="RayTemplate"
+              options={{
+                ...baseOptions,
+              }}
+            />
+          </NCard>
+        </NGridItem>
+        <NGridItem span={1}>
+          <NCard title="自定义颜色条形码">
+            <RBarcode
+              text="RayTemplate"
+              options={{
+                ...baseOptions,
+                lineColor: 'red',
+              }}
+            />
+          </NCard>
+        </NGridItem>
+        <NGridItem span={1}>
+          <NCard title="pharmacode 模式">
+            <NFlex vertical>
+              <NAlert type="warning" title="注意">
+                该模式下，条形码只能渲染有效数值，否则将会渲染失败。可以查看官网说明：
+                <a href="https://github.com/lindell/JsBarcode/wiki/pharmacode">
+                  pharmacode
+                </a>
+                。
+              </NAlert>
+              <RBarcode
+                text="1234"
+                format="pharmacode"
+                options={{
+                  width: 4,
+                  height: 40,
+                  displayValue: false,
+                  background: '#eee',
+                }}
+              />
+            </NFlex>
+          </NCard>
+        </NGridItem>
+        <NGridItem span={1}>
+          <NCard title="codabar 模式">
+            <NFlex vertical>
+              <NAlert type="warning" title="注意">
+                该模式下，需要注意 text 中的特殊字符，可以查看官网说明：
+                <a href="https://github.com/lindell/JsBarcode/wiki/codabar">
+                  codabar
+                </a>
+                。
+              </NAlert>
+              <RBarcode
+                text="1234"
+                format="codabar"
+                options={{
+                  width: 4,
+                  height: 40,
+                  displayValue: false,
+                  background: '#eee',
+                }}
+              />
+            </NFlex>
+          </NCard>
+        </NGridItem>
+        <NGridItem span={1}>
+          <NCard title="有状态的条形码">
+            <NFlex vertical size="large" justify="flex-start" inline>
+              <NSwitch v-model:value={this.loading} style="width: fit-content">
+                {{
+                  checked: () => 'loading...',
+                  unchecked: () => 'success!',
+                }}
+              </NSwitch>
+              <RBarcode text="RayTemplate" loading={this.loading} />
+            </NFlex>
+          </NCard>
+        </NGridItem>
+      </NGrid>
+    )
+  },
+})