@atooyu/uxto-ui 1.1.26 → 1.1.28

package/src/components/u-qrcode/u-qrcode.vue

@@ -1,29 +1,17 @@
 <template>
-  <view class="u-qrcode" :style="{ width: `${size}px`, height: `${size}px` }">
-    <view v-if="matrix.length > 0" class="u-qrcode__matrix" :style="matrixStyle">
-      <view
-        v-for="(row, rowIndex) in matrix"
-        :key="rowIndex"
-        class="u-qrcode__row"
-        :style="{ height: `${cellSize}px` }"
-      >
-        <view
-          v-for="(cell, colIndex) in row"
-          :key="colIndex"
-          class="u-qrcode__cell"
-          :style="{
-            width: `${cellSize}px`,
-            height: `${cellSize}px`,
-            backgroundColor: cell === 1 ? color : bgColor
-          }"
-        />
-      </view>
-    </view>
+  <view class="u-qrcode">
+    <canvas
+      v-if="canvasId"
+      :canvas-id="canvasId"
+      :id="canvasId"
+      class="u-qrcode__canvas"
+      :style="{ width: `${size}px`, height: `${size}px` }"
+    />
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue'
+import { ref, watch, onMounted, nextTick } from 'vue'
 
 interface Props {
   value: string
@@ -41,213 +29,447 @@ const props = withDefaults(defineProps<Props>(), {
   errorCorrectLevel: 'M'
 })
 
-const matrix = ref<number[][]>([])
+// 生成唯一 canvas ID
+const canvasId = ref(`qrcode_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`)
 
-// 计算单元格大小
-const cellSize = computed(() => {
-  if (matrix.value.length === 0) return 0
-  return props.size / matrix.value.length
-})
+// QR Code 生成器（基于 qrcode-generator 库的简化版本）
+class QRCode {
+  // 纠错级别
+  private static ECC_LEVEL: Record<string, number> = { L: 1, M: 0, Q: 3, H: 2 }
+
+  // 每个版本的纠错码字数（M级别）
+  private static ECC_CODEWORDS: number[] = [
+    0, 10, 16, 22, 28, 36, 44, 52, 64, 72, 80, 96, 108, 120, 132, 144,
+    168, 180, 196, 216, 240, 260, 288, 320, 344, 376, 412, 452, 492, 536
+  ]
 
-// 矩阵样式
-const matrixStyle = computed(() => ({
-  width: `${props.size}px`,
-  height: `${props.size}px`,
-  backgroundColor: props.bgColor
-}))
-
-// QR Code 生成算法
-const QRCode = {
-  // 错误纠正级别
-  ECL: { L: 1, M: 0, Q: 3, H: 2 },
-
-  // 版本容量表
-  getCapacity(version: number, ecl: number): number {
-    const capacities = [
-      0, 17, 32, 53, 78, 106, 134, 154, 192, 230, 271, 321, 367, 425, 458, 520,
-      586, 644, 718, 792, 858, 929, 1003, 1091, 1171, 1273, 1367, 1465, 1528, 1628, 1732, 1840,
-      1952, 2068, 2188, 2303, 2431, 2563, 2699, 2809, 2953
-    ]
-    return capacities[version] || 0
-  },
+  // 每个版本的总码字数
+  private static TOTAL_CODEWORDS: number[] = [
+    0, 26, 44, 70, 100, 134, 172, 196, 242, 292, 346, 404, 466, 532, 581, 625,
+    733, 815, 901, 993, 1079, 1157, 1253, 1353, 1453, 1553, 1673, 1793, 1913, 2033
+  ]
+
+  // 每个版本的容量（字节模式，M级别）
+  private static CAPACITY: number[] = [
+    0, 16, 28, 44, 64, 86, 108, 124, 154, 186, 216, 252, 290, 334, 365, 415,
+    453, 507, 563, 623, 669, 719, 783, 843, 909, 969, 1047, 1119, 1193, 1273
+  ]
 
   // 获取版本
-  getVersion(length: number, ecl: number): number {
+  private static getVersion(dataLength: number): number {
     for (let v = 1; v <= 40; v++) {
-      if (this.getCapacity(v, ecl) >= length) return v
+      if (this.CAPACITY[v] >= dataLength) return v
     }
     return 40
-  },
+  }
 
-  // 生成二维码矩阵
-  generate(data: string, ecl: string): number[][] {
-    const level = this.ECL[ecl] || 0
-    const version = this.getVersion(data.length, level)
+  // 生成二维码数据
+  static generate(data: string, ecl: string): { version: number; size: number; modules: number[][] } {
+    const version = this.getVersion(data.length)
     const size = version * 4 + 17
-    const result: number[][] = []
 
-    // 初始化矩阵
+    // 创建矩阵
+    const modules: number[][] = []
     for (let i = 0; i < size; i++) {
-      result[i] = new Array(size).fill(-1)
+      modules[i] = new Array(size).fill(0)
     }
 
-    // 添加定位图案
-    this.addFinderPattern(result, 0, 0)
-    this.addFinderPattern(result, size - 7, 0)
-    this.addFinderPattern(result, 0, size - 7)
+    // 添加功能图案
+    this.addFinderPatterns(modules, size)
+    this.addTimingPatterns(modules, size)
+    if (version >= 2) {
+      this.addAlignmentPatterns(modules, version, size)
+    }
+    this.addDarkModule(modules, size)
 
-    // 添加分隔符
-    this.addSeparator(result, size)
+    // 编码数据
+    const codewords = this.encodeCodewords(data, version, ecl)
 
-    // 添加定位图案
-    this.addAlignmentPattern(result, version)
+    // 填充数据
+    this.fillData(modules, codewords, size)
 
-    // 添加定时图案
-    this.addTimingPattern(result, size)
+    // 应用最佳掩码
+    const bestMask = this.findBestMask(modules, size)
+    this.applyMask(modules, size, bestMask)
 
-    // 添加格式信息区域
-    this.addFormatInfo(result, size)
+    // 添加格式信息
+    this.addFormatInfo(modules, size, ecl, bestMask)
 
-    // 填充数据
-    this.fillData(result, data, version, size)
-
-    return result
-  },
-
-  addFinderPattern(matrix: number[][], row: number, col: number) {
-    for (let r = 0; r < 7; r++) {
-      for (let c = 0; c < 7; c++) {
-        if (row + r < matrix.length && col + c < matrix.length) {
-          if (r === 0 || r === 6 || c === 0 || c === 6 ||
-              (r >= 2 && r <= 4 && c >= 2 && c <= 4)) {
-            matrix[row + r][col + c] = 1
-          } else {
-            matrix[row + r][col + c] = 0
+    return { version, size, modules }
+  }
+
+  // 添加定位图案
+  private static addFinderPatterns(modules: number[][], size: number) {
+    const positions = [[0, 0], [size - 7, 0], [0, size - 7]]
+
+    for (const [row, col] of positions) {
+      // 外框
+      for (let r = 0; r < 7; r++) {
+        for (let c = 0; c < 7; c++) {
+          if (r === 0 || r === 6 || c === 0 || c === 6 || (r >= 2 && r <= 4 && c >= 2 && c <= 4)) {
+            modules[row + r][col + c] = 1
           }
         }
       }
+      // 分隔符
+      for (let i = 0; i < 8; i++) {
+        // 上/下分隔符
+        if (row === 0 && i < size && modules[7]) modules[7][i] = 0
+        if (row === 0 && i < size && modules[i]) modules[i][7] = 0
+        // 右下分隔符
+        if (row === size - 7 && i < size && modules[7]) modules[7][size - 8 + i] = 0
+        if (row === size - 7 && i < size && modules[i]) modules[i][size - 8] = 0
+        // 左下分隔符
+        if (row === 0 && col === size - 7 && i < size && modules[size - 8]) modules[size - 8][i] = 0
+        if (row === 0 && col === size - 7 && i < size && modules[size - 1 - i]) modules[size - 1 - i][7] = 0
+      }
     }
-  },
+  }
 
-  addSeparator(matrix: number[][], size: number) {
-    for (let i = 0; i < 8; i++) {
-      if (i < size && matrix[7]) matrix[7][i] = 0
-      if (i < size && matrix[i]) matrix[i][7] = 0
-      if (size - 8 + i < size && matrix[7]) matrix[7][size - 8 + i] = 0
-      if (i < size && matrix[i]) matrix[i][size - 8] = 0
-      if (i < size && matrix[size - 8]) matrix[size - 8][i] = 0
-      if (size - 8 + i < size && matrix[size - 1 - i]) matrix[size - 1 - i][7] = 0
+  // 添加时序图案
+  private static addTimingPatterns(modules: number[][], size: number) {
+    for (let i = 8; i < size - 8; i++) {
+      modules[6][i] = i % 2 === 0 ? 1 : 0
+      modules[i][6] = i % 2 === 0 ? 1 : 0
     }
-  },
+  }
+
+  // 添加定位图案
+  private static addAlignmentPatterns(modules: number[][], version: number, size: number) {
+    const positions = this.getAlignmentPositions(version, size)
 
-  addAlignmentPattern(matrix: number[][], version: number) {
-    if (version < 2) return
-    const positions = this.getAlignmentPositions(version)
     for (const row of positions) {
       for (const col of positions) {
-        if (matrix[row] && matrix[row][col] === -1) {
-          this.addAlignmentPatternAt(matrix, row, col)
+        // 避免重叠
+        if (modules[row][col] !== 0) continue
+
+        for (let r = -2; r <= 2; r++) {
+          for (let c = -2; c <= 2; c++) {
+            if (row + r >= 0 && row + r < size && col + c >= 0 && col + c < size) {
+              if (Math.abs(r) === 2 || Math.abs(c) === 2 || (r === 0 && c === 0)) {
+                modules[row + r][col + c] = 1
+              } else {
+                modules[row + r][col + c] = 0
+              }
+            }
+          }
         }
       }
     }
-  },
+  }
 
-  getAlignmentPositions(version: number): number[] {
+  // 获取定位图案位置
+  private static getAlignmentPositions(version: number, size: number): number[] {
     if (version === 1) return []
-    const intervals = Math.floor(version / 7) + 1
-    const size = version * 4 + 17
-    const step = Math.ceil((size - 13) / intervals)
+
     const positions = [6]
-    for (let i = 1; i <= intervals; i++) {
-      positions.push(size - 7 + (i - intervals) * step)
+    const step = version === 32 ? 26 : Math.ceil((size - 13) / (Math.floor(version / 7) + 1))
+    let pos = size - 7
+
+    while (pos > 6) {
+      positions.unshift(pos)
+      pos -= step
     }
-    return [...new Set(positions)].sort((a, b) => a - b)
-  },
-
-  addAlignmentPatternAt(matrix: number[][], row: number, col: number) {
-    for (let r = -2; r <= 2; r++) {
-      for (let c = -2; c <= 2; c++) {
-        if (row + r >= 0 && row + r < matrix.length &&
-            col + c >= 0 && col + c < matrix.length) {
-          if (Math.abs(r) === 2 || Math.abs(c) === 2 || (r === 0 && c === 0)) {
-            matrix[row + r][col + c] = 1
-          } else {
-            matrix[row + r][col + c] = 0
-          }
-        }
+
+    return positions
+  }
+
+  // 添加暗模块
+  private static addDarkModule(modules: number[][], size: number) {
+    modules[size - 8][8] = 1
+  }
+
+  // 编码码字
+  private static encodeCodewords(data: string, version: number, ecl: string): number[] {
+    const bits: number[] = []
+
+    // 模式指示符 (字节模式)
+    bits.push(0, 1, 0, 0)
+
+    // 字符计数
+    const cciBits = version <= 9 ? 8 : 16
+    for (let i = cciBits - 1; i >= 0; i--) {
+      bits.push((data.length >> i) & 1)
+    }
+
+    // 数据
+    for (const char of data) {
+      const code = char.charCodeAt(0)
+      for (let i = 7; i >= 0; i--) {
+        bits.push((code >> i) & 1)
       }
     }
-  },
 
-  addTimingPattern(matrix: number[][], size: number) {
-    for (let i = 8; i < size - 8; i++) {
-      if (matrix[6] && matrix[6][i] === -1) matrix[6][i] = i % 2 === 0 ? 1 : 0
-      if (matrix[i] && matrix[i][6] === -1) matrix[i][6] = i % 2 === 0 ? 1 : 0
+    // 终止符
+    const totalDataBits = (this.TOTAL_CODEWORDS[version] - this.ECC_CODEWORDS[version]) * 8
+    const termLen = Math.min(4, totalDataBits - bits.length)
+    for (let i = 0; i < termLen; i++) bits.push(0)
+
+    // 补齐到字节边界
+    while (bits.length % 8 !== 0) bits.push(0)
+
+    // 填充码字
+    const padBytes = [0xEC, 0x11]
+    let padIdx = 0
+    while (bits.length < totalDataBits) {
+      for (let i = 7; i >= 0; i--) {
+        bits.push((padBytes[padIdx] >> i) & 1)
+      }
+      padIdx = (padIdx + 1) % 2
+    }
+
+    // 转换为字节
+    const bytes: number[] = []
+    for (let i = 0; i < bits.length; i += 8) {
+      let b = 0
+      for (let j = 0; j < 8; j++) b = (b << 1) | bits[i + j]
+      bytes.push(b)
+    }
+
+    // 生成纠错码字
+    const eccBytes = this.generateECC(bytes, this.ECC_CODEWORDS[version])
+
+    return [...bytes, ...eccBytes]
+  }
+
+  // Reed-Solomon 纠错码生成
+  private static generateECC(data: number[], eccCount: number): number[] {
+    // Galois Field GF(256) 的生成多项式
+    const GF_EXP: number[] = new Array(512)
+    const GF_LOG: number[] = new Array(256)
+
+    let x = 1
+    for (let i = 0; i < 255; i++) {
+      GF_EXP[i] = x
+      GF_LOG[x] = i
+      x = x * 2
+      if (x >= 256) x ^= 285 // 285 = 0x11D (生成多项式)
+    }
+    for (let i = 255; i < 512; i++) {
+      GF_EXP[i] = GF_EXP[i - 255]
+    }
+
+    // GF 域乘法
+    const gfMul = (a: number, b: number): number => {
+      if (a === 0 || b === 0) return 0
+      return GF_EXP[GF_LOG[a] + GF_LOG[b]]
+    }
+
+    // 生成纠错码生成多项式
+    const genPoly: number[] = [1]
+    for (let i = 0; i < eccCount; i++) {
+      const newPoly: number[] = new Array(genPoly.length + 1).fill(0)
+      for (let j = 0; j < genPoly.length; j++) {
+        newPoly[j] ^= genPoly[j]
+        newPoly[j + 1] ^= gfMul(genPoly[j], GF_EXP[i])
+      }
+      genPoly = newPoly
+    }
+
+    // 计算纠错码字
+    const ecc: number[] = new Array(eccCount).fill(0)
+    for (const byte of data) {
+      const factor = byte ^ ecc[0]
+      ecc.shift()
+      ecc.push(0)
+      for (let i = 0; i < ecc.length; i++) {
+        ecc[i] ^= gfMul(genPoly[i], factor)
+      }
+    }
+
+    return ecc
+  }
+
+  // 填充数据到矩阵
+  private static fillData(modules: number[][], codewords: number[], size: number) {
+    // 标记保留区域为 -1（不可填充）
+    for (let row = 0; row < size; row++) {
+      for (let col = 0; col < size; col++) {
+        if (modules[row][col] !== 0) {
+          modules[row][col] = -1
+        }
+      }
     }
-  },
 
-  addFormatInfo(matrix: number[][], size: number) {
+    // 填充格式信息保留区
     for (let i = 0; i < 9; i++) {
-      if (matrix[8] && matrix[8][i] === -1) matrix[8][i] = 0
-      if (matrix[i] && matrix[i][8] === -1) matrix[i][8] = 0
+      if (modules[8][i] === 0) modules[8][i] = -1
+      if (modules[i][8] === 0) modules[i][8] = -1
     }
     for (let i = 0; i < 8; i++) {
-      if (matrix[8] && matrix[8][size - 1 - i] === -1) matrix[8][size - 1 - i] = 0
-      if (matrix[size - 1 - i] && matrix[size - 1 - i][8] === -1) matrix[size - 1 - i][8] = 0
+      if (modules[8][size - 1 - i] === 0) modules[8][size - 1 - i] = -1
+      if (modules[size - 1 - i][8] === 0) modules[size - 1 - i][8] = -1
     }
-  },
 
-  fillData(matrix: number[][], data: string, version: number, size: number) {
-    const bytes = this.encodeData(data)
-    let bitIndex = 0
+    // 填充数据
+    let bitIdx = 0
     let upward = true
 
-    for (let col = size - 1; col >= 1; col -= 2) {
+    for (let col = size - 1; col >= 0; col -= 2) {
       if (col === 6) col = 5
+
       for (let row = upward ? size - 1 : 0; upward ? row >= 0 : row < size; upward ? row-- : row++) {
         for (let c = 0; c < 2; c++) {
-          const currentCol = col - c
-          if (matrix[row] && matrix[row][currentCol] === -1) {
-            const bit = bitIndex < bytes.length * 8
-              ? (bytes[Math.floor(bitIndex / 8)] >> (7 - (bitIndex % 8))) & 1
-              : (bitIndex % 2 === 0 ? 1 : 0)
-            matrix[row][currentCol] = bit
-            bitIndex++
+          const tc = col - c
+          if (tc >= 0 && modules[row][tc] === 0) {
+            let bit = 0
+            if (bitIdx < codewords.length * 8) {
+              bit = (codewords[Math.floor(bitIdx / 8)] >> (7 - (bitIdx % 8))) & 1
+            }
+            modules[row][tc] = bit
+            bitIdx++
           }
         }
       }
       upward = !upward
     }
-  },
+  }
 
-  encodeData(data: string): number[] {
-    const bytes: number[] = []
-    bytes.push(0x40)
-    const len = data.length
-    if (len < 256) {
-      bytes.push(len)
+  // 寻找最佳掩码
+  private static findBestMask(modules: number[][], size: number): number {
+    let bestMask = 0
+    let bestScore = Infinity
+
+    for (let mask = 0; mask < 8; mask++) {
+      const testModules = modules.map(row => [...row])
+      this.applyMask(testModules, size, mask)
+      const score = this.evaluateMask(testModules, size)
+      if (score < bestScore) {
+        bestScore = score
+        bestMask = mask
+      }
+    }
+
+    return bestMask
+  }
+
+  // 应用掩码
+  private static applyMask(modules: number[][], size: number, mask: number) {
+    for (let row = 0; row < size; row++) {
+      for (let col = 0; col < size; col++) {
+        if (modules[row][col] >= 0) {
+          if (this.getMaskBit(row, col, mask)) {
+            modules[row][col] = modules[row][col] === 1 ? 0 : 1
+          }
+        }
+      }
     }
-    for (let i = 0; i < data.length; i++) {
-      bytes.push(data.charCodeAt(i))
+  }
+
+  // 掩码函数
+  private static getMaskBit(row: number, col: number, mask: number): boolean {
+    switch (mask) {
+      case 0: return (row + col) % 2 === 0
+      case 1: return row % 2 === 0
+      case 2: return col % 3 === 0
+      case 3: return (row + col) % 3 === 0
+      case 4: return (Math.floor(row / 2) + Math.floor(col / 3)) % 2 === 0
+      case 5: return ((row * col) % 2) + ((row * col) % 3) === 0
+      case 6: return (((row * col) % 2) + ((row * col) % 3)) % 2 === 0
+      case 7: return (((row + col) % 2) + ((row * col) % 3)) % 2 === 0
+      default: return false
     }
-    bytes.push(0, 0, 0, 0)
-    return bytes
   }
-}
 
-const generateQRCode = () => {
-  if (!props.value) {
-    matrix.value = []
-    return
+  // 评估掩码质量
+  private static evaluateMask(modules: number[][], size: number): number {
+    let score = 0
+
+    // 规则1：连续同色模块
+    for (let row = 0; row < size; row++) {
+      let count = 1
+      for (let col = 1; col < size; col++) {
+        if (modules[row][col] === modules[row][col - 1]) {
+          count++
+        } else {
+          if (count >= 5) score += count - 2
+          count = 1
+        }
+      }
+      if (count >= 5) score += count - 2
+    }
+
+    for (let col = 0; col < size; col++) {
+      let count = 1
+      for (let row = 1; row < size; row++) {
+        if (modules[row][col] === modules[row - 1][col]) {
+          count++
+        } else {
+          if (count >= 5) score += count - 2
+          count = 1
+        }
+      }
+      if (count >= 5) score += count - 2
+    }
+
+    return score
   }
-  matrix.value = QRCode.generate(props.value, props.errorCorrectLevel)
+
+  // 添加格式信息
+  private static addFormatInfo(modules: number[][], size: number, ecl: string, mask: number) {
+    const eclBits = this.ECC_LEVEL[ecl]
+    const data = (eclBits << 3) | mask
+
+    // BCH 编码
+    let rem = data
+    for (let i = 0; i < 10; i++) {
+      rem = (rem << 1) ^ ((rem >> 14) * 0x537)
+    }
+    const format = ((data << 10) | rem) ^ 0x5412
+
+    // 填充格式信息
+    const bits: number[] = []
+    for (let i = 14; i >= 0; i--) {
+      bits.push((format >> i) & 1)
+    }
+
+    // 左上角 + 右上角 + 左下角
+    for (let i = 0; i < 6; i++) modules[8][i] = bits[i]
+    modules[8][7] = bits[6]
+    modules[8][8] = bits[7]
+    modules[7][8] = bits[8]
+    for (let i = 9; i < 15; i++) modules[14 - i][8] = bits[i]
+
+    for (let i = 0; i < 8; i++) modules[8][size - 1 - i] = bits[14 - i]
+    for (let i = 8; i < 15; i++) modules[size - 15 + i][8] = bits[14 - i]
+  }
+}
+
+// 绘制二维码到 canvas
+const drawQRCode = () => {
+  if (!props.value) return
+
+  nextTick(() => {
+    const result = QRCode.generate(props.value, props.errorCorrectLevel)
+    const cellSize = props.size / result.size
+
+    const ctx = uni.createCanvasContext(canvasId.value)
+
+    // 背景
+    ctx.setFillStyle(props.bgColor)
+    ctx.fillRect(0, 0, props.size, props.size)
+
+    // 绘制模块
+    ctx.setFillStyle(props.color)
+    for (let row = 0; row < result.size; row++) {
+      for (let col = 0; col < result.size; col++) {
+        if (result.modules[row][col] === 1) {
+          ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize)
+        }
+      }
+    }
+
+    ctx.draw()
+  })
 }
 
-watch(() => props.value, generateQRCode)
-watch(() => props.errorCorrectLevel, generateQRCode)
+watch(() => props.value, drawQRCode)
+watch(() => props.size, drawQRCode)
+watch(() => props.color, drawQRCode)
+watch(() => props.bgColor, drawQRCode)
 
 onMounted(() => {
-  generateQRCode()
+  drawQRCode()
 })
 </script>
 
@@ -265,18 +487,8 @@ export default {
   display: inline-block;
   position: relative;
 
-  &__matrix {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__row {
-    display: flex;
-    flex-direction: row;
-  }
-
-  &__cell {
-    flex-shrink: 0;
+  &__canvas {
+    display: block;
   }
 }
-</style>
+</style>