@atooyu/uxto-ui 1.1.30 → 1.1.32

package/dist/style.css

@@ -2482,19 +2482,19 @@ to {
   letter-spacing: 0.5px;
   color: #12b6af;
   font-weight: 500;
-}.u-qrcode[data-v-d5a07c6c] {
+}.u-qrcode[data-v-eebb43a8] {
   display: inline-block;
   position: relative;
 }
-.u-qrcode__matrix[data-v-d5a07c6c] {
+.u-qrcode__matrix[data-v-eebb43a8] {
   display: flex;
   flex-direction: column;
 }
-.u-qrcode__row[data-v-d5a07c6c] {
+.u-qrcode__row[data-v-eebb43a8] {
   display: flex;
   flex-direction: row;
 }
-.u-qrcode__cell[data-v-d5a07c6c] {
+.u-qrcode__cell[data-v-eebb43a8] {
   flex-shrink: 0;
 }.u-barcode[data-v-4ecc744d] {
   display: inline-flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atooyu/uxto-ui",
-  "version": "1.1.30",
+  "version": "1.1.32",
   "description": "跨平台 UI 组件库 - 支持 Android、iOS、鸿蒙",
   "keywords": [
     "uxto-ui",

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

@@ -2,18 +2,18 @@
   <view class="u-qrcode" :style="{ width: `${size}px`, height: `${size}px` }">
     <view class="u-qrcode__matrix" :style="{ backgroundColor: bgColor }">
       <view
-        v-for="(row, rowIndex) in moduleCount"
+        v-for="(row, rowIndex) in modules"
         :key="rowIndex"
         class="u-qrcode__row"
       >
         <view
-          v-for="(col, colIndex) in moduleCount"
+          v-for="(cell, colIndex) in row"
           :key="colIndex"
           class="u-qrcode__cell"
           :style="{
             width: `${cellSize}px`,
             height: `${cellSize}px`,
-            backgroundColor: isDark(rowIndex, colIndex) ? color : bgColor
+            backgroundColor: cell ? color : bgColor
           }"
         />
       </view>
@@ -23,8 +23,6 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue'
-// @ts-ignore
-import qrcode from 'qrcode-generator'
 
 interface Props {
   value: string
@@ -42,59 +40,378 @@ const props = withDefaults(defineProps<Props>(), {
   errorCorrectLevel: 'M'
 })
 
-// QR Code 实例
-const qrInstance = ref<ReturnType<typeof qrcode> | null>(null)
-const moduleCount = ref(0)
+const modules = ref<boolean[][]>([])
 
 // 计算单元格大小
 const cellSize = computed(() => {
-  if (moduleCount.value === 0) return 0
-  return props.size / moduleCount.value
+  if (modules.value.length === 0) return 0
+  return props.size / modules.value.length
 })
 
-// 判断某个位置是否是黑色模块
-const isDark = (row: number, col: number): boolean => {
-  if (!qrInstance.value) return false
-  try {
-    return qrInstance.value.isDark(row, col)
-  } catch {
-    return false
+// ====== QR Code 生成器 ======
+// 纠错级别映射
+const ECL_MAP: Record<string, number> = { L: 0, M: 1, Q: 2, H: 3 }
+
+// 每个版本的数据容量 (字节模式) [L, M, Q, H]
+const DATA_CAPACITY = [
+  [17, 14, 11, 7],
+  [32, 26, 20, 14],
+  [53, 42, 32, 24],
+  [78, 62, 46, 34],
+  [106, 84, 60, 44],
+  [134, 106, 74, 58],
+  [154, 122, 86, 64],
+  [192, 152, 108, 84],
+  [230, 180, 130, 98],
+  [271, 213, 151, 119],
+  [321, 251, 177, 137],
+  [367, 287, 203, 155],
+  [425, 331, 241, 177],
+  [458, 362, 258, 194],
+  [520, 412, 292, 220],
+  [586, 450, 322, 250],
+  [644, 504, 364, 280],
+  [718, 560, 394, 310],
+  [792, 624, 442, 338],
+  [858, 666, 482, 382],
+  [929, 711, 509, 403],
+  [1003, 779, 565, 439],
+  [1091, 857, 611, 461],
+  [1171, 911, 661, 511],
+  [1273, 997, 715, 535],
+  [1367, 1059, 751, 593],
+  [1465, 1125, 805, 625],
+  [1528, 1190, 868, 658],
+  [1628, 1264, 908, 698],
+  [1732, 1370, 982, 742],
+  [1840, 1452, 1030, 790],
+  [1952, 1538, 1112, 842],
+  [2068, 1628, 1168, 898],
+  [2188, 1722, 1228, 958],
+  [2303, 1809, 1283, 983],
+  [2431, 1911, 1351, 1051],
+  [2563, 1989, 1423, 1093],
+  [2699, 2099, 1499, 1139],
+  [2809, 2213, 1579, 1219],
+  [2953, 2331, 1663, 1273]
+]
+
+// 每个版本的纠错码字数 [L, M, Q, H]
+const ECC_CODEWORDS = [
+  [7, 10, 13, 17],
+  [10, 16, 22, 28],
+  [15, 26, 36, 44],
+  [20, 36, 52, 64],
+  [26, 48, 72, 88],
+  [36, 64, 96, 112],
+  [40, 72, 108, 130],
+  [48, 88, 132, 156],
+  [60, 110, 160, 192],
+  [72, 130, 192, 224],
+  [80, 150, 224, 264],
+  [96, 176, 260, 308],
+  [104, 198, 288, 352],
+  [120, 216, 320, 384],
+  [132, 240, 360, 432],
+  [144, 280, 408, 480],
+  [168, 308, 448, 532],
+  [180, 338, 504, 588],
+  [196, 364, 546, 650],
+  [224, 416, 600, 700],
+  [224, 442, 644, 750],
+  [252, 476, 690, 816],
+  [270, 504, 750, 900],
+  [300, 560, 810, 960],
+  [312, 588, 870, 1050],
+  [336, 644, 952, 1110],
+  [360, 700, 1020, 1200],
+  [390, 728, 1050, 1260],
+  [420, 784, 1140, 1350],
+  [450, 812, 1200, 1440],
+  [480, 868, 1290, 1530],
+  [510, 924, 1350, 1620],
+  [540, 980, 1440, 1710],
+  [570, 1036, 1530, 1800],
+  [570, 1064, 1590, 1890],
+  [600, 1120, 1680, 1980],
+  [630, 1204, 1770, 2100],
+  [660, 1260, 1860, 2220],
+  [720, 1316, 1950, 2310],
+  [750, 1372, 2040, 2430]
+]
+
+// GF(2^8) 运算表
+const GF_EXP: number[] = []
+const GF_LOG: number[] = []
+
+// 初始化 GF 表
+;(function initGF() {
+  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
+  }
+  for (let i = 255; i < 512; i++) {
+    GF_EXP[i] = GF_EXP[i - 255]
+  }
+})()
+
+function gfMul(a: number, b: number): number {
+  if (a === 0 || b === 0) return 0
+  return GF_EXP[GF_LOG[a] + GF_LOG[b]]
+}
+
+// Reed-Solomon 编码
+function rsEncode(data: number[], eccCount: number): number[] {
+  // 生成多项式
+  let gen = [1]
+  for (let i = 0; i < eccCount; i++) {
+    const temp: number[] = new Array(gen.length + 1).fill(0)
+    for (let j = 0; j < gen.length; j++) {
+      temp[j] ^= gen[j]
+      temp[j + 1] ^= gfMul(gen[j], GF_EXP[i])
+    }
+    gen = temp
+  }
+
+  // 计算纠错码
+  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 < eccCount; i++) {
+      ecc[i] ^= gfMul(gen[i], factor)
+    }
+  }
+  return ecc
+}
+
+// 获取版本
+function getVersion(dataLength: number, ecl: string): number {
+  const eclIdx = ECL_MAP[ecl] ?? 1
+  for (let v = 0; v < 40; v++) {
+    if (DATA_CAPACITY[v][eclIdx] >= dataLength) return v + 1
   }
+  return 40
 }
 
 // 生成二维码
-const generateQRCode = () => {
-  if (!props.value) {
-    qrInstance.value = null
-    moduleCount.value = 0
-    return
+function generateQRCode(data: string, ecl: string): boolean[][] {
+  const eclIdx = ECL_MAP[ecl] ?? 1
+  const version = getVersion(data.length, ecl)
+  const size = version * 4 + 17
+
+  // 初始化矩阵
+  const matrix: number[][] = []
+  for (let i = 0; i < size; i++) {
+    matrix[i] = new Array(size).fill(-1)
   }
 
-  try {
-    // 创建二维码实例
-    const typeNumber = 0 // 自动选择版本
-    const qr = qrcode(typeNumber, props.errorCorrectLevel)
+  // 添加定位图案
+  function addFinder(row: number, col: number) {
+    for (let r = -1; r <= 7; r++) {
+      for (let c = -1; c <= 7; c++) {
+        const tr = row + r, tc = col + c
+        if (tr >= 0 && tr < size && tc >= 0 && tc < size) {
+          if (r === -1 || r === 7 || c === -1 || c === 7) {
+            matrix[tr][tc] = 0
+          } else if (r === 0 || r === 6 || c === 0 || c === 6 || (r >= 2 && r <= 4 && c >= 2 && c <= 4)) {
+            matrix[tr][tc] = 1
+          } else {
+            matrix[tr][tc] = 0
+          }
+        }
+      }
+    }
+  }
+  addFinder(0, 0)
+  addFinder(size - 7, 0)
+  addFinder(0, size - 7)
+
+  // 添加时序图案
+  for (let i = 8; i < size - 8; i++) {
+    matrix[6][i] = i % 2 === 0 ? 1 : 0
+    matrix[i][6] = i % 2 === 0 ? 1 : 0
+  }
+
+  // 添加对齐图案
+  if (version >= 2) {
+    const positions: number[] = [6]
+    const step = Math.ceil((size - 13) / (Math.floor(version / 7) + 1))
+    let pos = size - 7
+    while (pos > 6) {
+      positions.unshift(pos)
+      pos -= step
+    }
+
+    for (const row of positions) {
+      for (const col of positions) {
+        if (matrix[row][col] !== -1) continue
+        for (let r = -2; r <= 2; r++) {
+          for (let c = -2; c <= 2; c++) {
+            const tr = row + r, tc = col + c
+            if (tr >= 0 && tr < size && tc >= 0 && tc < size && matrix[tr][tc] === -1) {
+              matrix[tr][tc] = (Math.abs(r) === 2 || Math.abs(c) === 2 || (r === 0 && c === 0)) ? 1 : 0
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 暗模块
+  matrix[size - 8][8] = 1
+
+  // 保留格式信息区域
+  for (let i = 0; i < 9; i++) {
+    if (matrix[8][i] === -1) matrix[8][i] = 0
+    if (matrix[i][8] === -1) matrix[i][8] = 0
+  }
+  for (let i = 0; i < 8; i++) {
+    if (matrix[8][size - 1 - i] === -1) matrix[8][size - 1 - i] = 0
+    if (matrix[size - 1 - i][8] === -1) matrix[size - 1 - i][8] = 0
+  }
+
+  // 编码数据
+  const eccCount = ECC_CODEWORDS[version - 1][eclIdx]
+  const dataCapacity = DATA_CAPACITY[version - 1][eclIdx]
+  const bits: number[] = []
 
-    // 添加数据
-    qr.addData(props.value)
+  // 模式指示符 (字节模式 = 0100)
+  bits.push(0, 1, 0, 0)
 
-    // 生成
-    qr.make()
+  // 字符计数
+  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)
+    }
+  }
+
+  // 终止符
+  const termLen = Math.min(4, dataCapacity * 8 - 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 < dataCapacity * 8) {
+    for (let i = 7; i >= 0; i--) {
+      bits.push((padBytes[padIdx] >> i) & 1)
+    }
+    padIdx = (padIdx + 1) % 2
+  }
+
+  // 转为字节
+  const dataBytes: 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] || 0)
+    dataBytes.push(b)
+  }
+
+  // 纠错码
+  const eccBytes = rsEncode(dataBytes, eccCount)
+  const codewords = [...dataBytes, ...eccBytes]
+
+  // 填充数据到矩阵
+  let bitIdx = 0
+  let upward = true
+  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 tc = col - c
+        if (tc >= 0 && matrix[row][tc] === -1) {
+          let bit = 0
+          if (bitIdx < codewords.length * 8) {
+            bit = (codewords[Math.floor(bitIdx / 8)] >> (7 - (bitIdx % 8))) & 1
+          }
+          matrix[row][tc] = bit
+          bitIdx++
+        }
+      }
+    }
+    upward = !upward
+  }
+
+  // 应用掩码 (模式 0: (row + col) % 2 === 0)
+  for (let row = 0; row < size; row++) {
+    for (let col = 0; col < size; col++) {
+      if (matrix[row][col] >= 0 && (row + col) % 2 === 0) {
+        matrix[row][col] = matrix[row][col] === 1 ? 0 : 1
+      }
+    }
+  }
+
+  // 添加格式信息
+  const eclBits = { L: 1, M: 0, Q: 3, H: 2 }[ecl] ?? 0
+  let formatData = (eclBits << 3) | 0
+  let rem = formatData
+  for (let i = 0; i < 10; i++) {
+    rem = (rem << 1) ^ ((rem >> 9) * 0x537)
+  }
+  const formatBits = ((formatData << 10) | (rem & 0x3FF)) ^ 0x5412
+
+  // 填充格式信息
+  const fb: number[] = []
+  for (let i = 14; i >= 0; i--) {
+    fb.push((formatBits >> i) & 1)
+  }
+
+  for (let i = 0; i < 6; i++) matrix[8][i] = fb[i]
+  matrix[8][7] = fb[6]
+  matrix[8][8] = fb[7]
+  matrix[7][8] = fb[8]
+  for (let i = 9; i < 15; i++) matrix[14 - i][8] = fb[i]
 
-    qrInstance.value = qr
-    moduleCount.value = qr.getModuleCount()
+  for (let i = 0; i < 8; i++) matrix[8][size - 8 + i] = fb[14 - i]
+  for (let i = 8; i < 15; i++) matrix[size - 15 + i][8] = fb[14 - i]
+
+  // 转换为布尔矩阵
+  const result: boolean[][] = []
+  for (let row = 0; row < size; row++) {
+    result[row] = []
+    for (let col = 0; col < size; col++) {
+      result[row][col] = matrix[row][col] === 1
+    }
+  }
+
+  return result
+}
+
+// 生成二维码
+const generate = () => {
+  if (!props.value) {
+    modules.value = []
+    return
+  }
+
+  try {
+    modules.value = generateQRCode(props.value, props.errorCorrectLevel)
   } catch (e) {
     console.error('QR Code generation failed:', e)
-    qrInstance.value = null
-    moduleCount.value = 0
+    modules.value = []
   }
 }
 
-watch(() => props.value, generateQRCode)
-watch(() => props.errorCorrectLevel, generateQRCode)
+watch(() => props.value, generate)
+watch(() => props.errorCorrectLevel, generate)
 
 onMounted(() => {
-  generateQRCode()
+  generate()
 })
 </script>