From 87d0a7a4af9bb7d03720f2b6fa9684099351683f Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <443547225@qq.com> Date: Sun, 14 Apr 2024 23:47:27 +0800 Subject: [PATCH] v4.8.1 --- .vscode/settings.json | 3 + CHANGELOG.md | 10 ++ package.json | 4 +- pnpm-lock.yaml | 16 +++ src/components/RBarcode/index.ts | 8 ++ src/components/RBarcode/src/Barcode.tsx | 72 +++++++++++++ src/components/RBarcode/src/index.scss | 16 +++ src/components/RBarcode/src/props.ts | 87 +++++++++++++++ src/components/RBarcode/src/types.ts | 26 +++++ src/components/index.ts | 2 + src/locales/lang/en-US/menu.json | 35 +++--- src/locales/lang/zh-CN/menu.json | 35 +++--- src/router/modules/demo/barcode.ts | 20 ++++ src/router/modules/demo/qrcode.ts | 2 +- src/router/modules/demo/rely.ts | 18 +--- src/router/modules/demo/template-hooks.ts | 3 - src/utils/element.ts | 4 + src/views/demo/BarcodeDemo.tsx | 125 ++++++++++++++++++++++ 18 files changed, 433 insertions(+), 53 deletions(-) create mode 100644 src/components/RBarcode/index.ts create mode 100644 src/components/RBarcode/src/Barcode.tsx create mode 100644 src/components/RBarcode/src/index.scss create mode 100644 src/components/RBarcode/src/props.ts create mode 100644 src/components/RBarcode/src/types.ts create mode 100644 src/router/modules/demo/barcode.ts create mode 100644 src/views/demo/BarcodeDemo.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json index 95022367..d9e4f2f1 100644 --- a/.vscode/settings.json +++ b/.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", diff --git a/CHANGELOG.md b/CHANGELOG.md index f3e04e9f..6ecdecd2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,15 @@ # CHANGE LOG +## 4.8.1 + +## Feats + +- 新增 `RBarcode` 条形码组件，基于 `JsBarcode` 二次封装 + +## Fixes + +- 修复 `RSegment` 分段器设置 `popover` 后警告的问题 + ## 4.8.0 全局破坏性更新。移除了很多包、方法，请谨慎更新。 diff --git a/package.json b/package.json index c5dff8ac..965e32ec 100755 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ac5798a1..a4d1d340 100644 --- a/pnpm-lock.yaml +++ b/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'} diff --git a/src/components/RBarcode/index.ts b/src/components/RBarcode/index.ts new file mode 100644 index 00000000..a1b7e79c --- /dev/null +++ b/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 + +export { RBarcode, barcodeProps } diff --git a/src/components/RBarcode/src/Barcode.tsx b/src/components/RBarcode/src/Barcode.tsx new file mode 100644 index 00000000..287f38e7 --- /dev/null +++ b/src/components/RBarcode/src/Barcode.tsx @@ -0,0 +1,72 @@ +/** + * + * @author 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() + 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 ( + + {barcodeRender === 'canvas' ? ( + + ) : ( + + )} + + ) + }, +}) diff --git a/src/components/RBarcode/src/index.scss b/src/components/RBarcode/src/index.scss new file mode 100644 index 00000000..a06fc126 --- /dev/null +++ b/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; +} diff --git a/src/components/RBarcode/src/props.ts b/src/components/RBarcode/src/props.ts new file mode 100644 index 00000000..15c479c0 --- /dev/null +++ b/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, + default: 'auto', + }, + /** + * + * @description + * 条形码高度。 + * + * @default 'auto' + */ + height: { + type: [String, Number] as PropType, + default: 'auto', + }, + /** + * + * @description + * 是否显示 loading 状态。 + * + * @default false + */ + loading: { + type: Boolean, + default: false, + }, + /** + * + * @description + * 条形码渲染模式。 + * 允许配置为 svg 或 canvas。 + * + * @default 'canvas' + */ + barcodeRender: { + type: String as PropType, + 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, + default: () => ({}), + }, + /** + * + * @description + * 条形码输出格式，该配置项优先级最高。 + * + * @default 'CODE128' + */ + format: { + type: String as PropType, + default: () => 'CODE128', + }, +} as const + +export default props diff --git a/src/components/RBarcode/src/types.ts b/src/components/RBarcode/src/types.ts new file mode 100644 index 00000000..6b7fe2d6 --- /dev/null +++ b/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' diff --git a/src/components/index.ts b/src/components/index.ts index 5aefc36e..4467f0f5 100644 --- a/src/components/index.ts +++ b/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' diff --git a/src/locales/lang/en-US/menu.json b/src/locales/lang/en-US/menu.json index 6d51f534..1b410da5 100644 --- a/src/locales/lang/en-US/menu.json +++ b/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", - "MultiMenu": "MultiMenu(catch)", + "Barcode": "Barcode", + "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", - "ContextMenu": "Right Click Menu", - "CacheDemo": "Cache Utils Demo", - "Form": "Form", - "Segment": "Segment" + "scrollReveal": "Scroll Reveal" } diff --git a/src/locales/lang/zh-CN/menu.json b/src/locales/lang/zh-CN/menu.json index 95d3da7f..987d424d 100644 --- a/src/locales/lang/zh-CN/menu.json +++ b/src/locales/lang/zh-CN/menu.json @@ -1,30 +1,31 @@ { - "Dashboard": "首页", - "Rely": "依赖项", - "RelyAbout": "关于", - "Error": "错误页", - "Echart": "可视化", - "scrollReveal": "滚动动画", "Axios": "请求", - "Table": "表格", - "MultiMenu": "多级菜单(缓存)", + "Barcode": "条形码", + "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": "模态框", - "ContextMenu": "右键菜单", - "CacheDemo": "缓存工具函数", - "Form": "表单", - "Segment": "分段器" + "scrollReveal": "滚动动画" } diff --git a/src/router/modules/demo/barcode.ts b/src/router/modules/demo/barcode.ts new file mode 100644 index 00000000..94e2b506 --- /dev/null +++ b/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 diff --git a/src/router/modules/demo/qrcode.ts b/src/router/modules/demo/qrcode.ts index 95f8f346..c79f4aec 100644 --- a/src/router/modules/demo/qrcode.ts +++ b/src/router/modules/demo/qrcode.ts @@ -10,7 +10,7 @@ const qrcode: AppRouteRecordRaw = { meta: { i18nKey: t('menu.QRCode'), icon: 'other', - order: 3, + order: 2, }, } diff --git a/src/router/modules/demo/rely.ts b/src/router/modules/demo/rely.ts index 6da5b610..67d2b838 100644 --- a/src/router/modules/demo/rely.ts +++ b/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', - name: 'Rely', - component: LAYOUT, + path: 'rely-about', + name: 'RelyAbout', + 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 diff --git a/src/router/modules/demo/template-hooks.ts b/src/router/modules/demo/template-hooks.ts index 7dc8466e..a071549f 100644 --- a/src/router/modules/demo/template-hooks.ts +++ b/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', - }, }, } diff --git a/src/utils/element.ts b/src/utils/element.ts index d66bf45c..6e741bbc 100644 --- a/src/utils/element.ts +++ b/src/utils/element.ts @@ -402,6 +402,10 @@ export const queryElements = ( * 自动补全尺寸。 */ export const completeSize = (size: number | string, unit = 'px') => { + if (size === 'auto') { + return size + } + if (typeof size === 'number') { return size.toString() + unit } else if ( diff --git a/src/views/demo/BarcodeDemo.tsx b/src/views/demo/BarcodeDemo.tsx new file mode 100644 index 00000000..52c3efcd --- /dev/null +++ b/src/views/demo/BarcodeDemo.tsx @@ -0,0 +1,125 @@ +/** + * + * @author 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 ( + + + + 点击查看详细配置项： + + js-barcode options + + 。 + + + + + + + + + + + + + + + + + 该模式下，条形码只能渲染有效数值，否则将会渲染失败。可以查看官网说明： + + pharmacode + + 。 + + + + + + + + + + 该模式下，需要注意 text 中的特殊字符，可以查看官网说明： + + codabar + + 。 + + + + + + + + + + {{ + checked: () => 'loading...', + unchecked: () => 'success!', + }} + + + + + + + ) + }, +})