REAL SHOWCASE SOURCEbarcode-qrcode-clinical

1 个文件 · 51 行 · TypeScript

// ===== showcase/src/examples/components/barcode_qrcode.ts ===== import {  RenderBarcode,  RenderPageHeader,  RenderStackPanel,  RenderText,  RenderWrapPanel,} from 'ds-ui' function labeledCode(label: string, code: RenderBarcode): RenderStackPanel {  const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 8, crossAxisAlignment: 'center' })  panel.addChild(new RenderText(label, { role: 'title', weight: 'semibold' }))  panel.addChild(code)  panel.addChild(new RenderText(code.debugState().valid ? '编码有效' : code.debugState().message ?? '编码无效', { role: 'secondary' }))  return panel} export function createBarcodeQrCodeExample(): RenderStackPanel {  const codes = new RenderWrapPanel({ spacing: 24, runSpacing: 18, crossAxisAlignment: 'start' })  codes.addChild(labeledCode('患者腕带 · Code128', new RenderBarcode({    type: 'code128',    text: 'MR202607170018',    width: 220,    height: 72,    showText: true,  })))  codes.addChild(labeledCode('标本标签 · Code39', new RenderBarcode({    type: 'code39',    text: 'LAB-7A92',    width: 190,    height: 72,    showText: true,  })))  codes.addChild(labeledCode('移动端病历入口 · QRCode', new RenderBarcode({    type: 'qrcode',    text: 'https://example.invalid/record/MR202607170018',    width: 128,    height: 128,  })))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 16, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'Barcode / QRCode 医疗编码',    description: '同一套编码逻辑同时服务 Canvas 展示、标签设计和打印输出。',  }))  panel.addChild(codes, 1)  panel.addChild(new RenderText('支持 Code128、Code39、EAN-13 和 QRCode;无效输入会显示占位提示而不会抛出异常。', { role: 'secondary' }))  panel.padding = 20  return panel}