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}