foucui 1.0.1 → 2.0.0

package/components/QiuQrcode/index.vue

@@ -1,302 +0,0 @@
-<template>
-  <div class="qiu-qrcode" :style="{ width: `${size}px`, height: `${size}px` }">
-    <canvas ref="canvasRef" :width="size" :height="size" class="qiu-qrcode__canvas" />
-    <div v-if="error" class="qiu-qrcode__error">生成失败</div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue'
-
-defineOptions({ name: 'QiuQrcode' })
-
-const props = withDefaults(
-  defineProps<{
-    value?: string
-    size?: number
-    /** 容错级别 L/M/Q/H */
-    level?: 'L' | 'M' | 'Q' | 'H'
-    fgColor?: string
-    bgColor?: string
-    margin?: number
-  }>(),
-  {
-    value: '',
-    size: 160,
-    level: 'M',
-    fgColor: '#000000',
-    bgColor: '#ffffff',
-    margin: 2,
-  }
-)
-
-const canvasRef = ref<HTMLCanvasElement | null>(null)
-const error = ref(false)
-
-// 极简 QR 算法（基于数值技巧的 Reed-Solomon 容错），
-// 采用通用 QR 矩阵生成思路，覆盖常用版本与容错。
-const QR = (() => {
-  // 基础常量
-  const PAD0 = 0xec
-  const PAD1 = 0x11
-
-  const expTable = new Array(256)
-  const logTable = new Array(256)
-  let x = 1
-  for (let i = 0; i < 255; i++) {
-    expTable[i] = x
-    logTable[x] = i
-    x <<= 1
-    if (x & 0x100) x ^= 0x11d
-  }
-
-  const gexp = (n: number) => expTable[(n % 255 + 255) % 255]
-  const glog = (n: number) => logTable[n]
-
-  const gmul = (a: number, b: number) => (a === 0 || b === 0 ? 0 : gexp(glog(a) + glog(b)))
-
-  // 生成多项式系数
-  const rsPoly = (ecLength: number) => {
-    let poly = [1]
-    for (let i = 0; i < ecLength; i++) {
-      const next = new Array(poly.length + 1).fill(0)
-      for (let j = 0; j < poly.length; j++) {
-        next[j] ^= gmul(poly[j], 1)
-        next[j + 1] ^= gmul(poly[j], gexp(i))
-      }
-      poly = next
-    }
-    return poly
-  }
-
-  // BCH 纠错位数
-  const EC_CODEWORDS = [
-    [7, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
-    [10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
-    [13, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
-    [17, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
-  ]
-  // 仅支持 L/M/Q/H 在小版本：这里用预置表格（版本1-10 简化）
-  const EC = {
-    1: { L: 7, M: 10, Q: 13, H: 17 },
-    2: { L: 10, M: 16, Q: 22, H: 28 },
-    3: { L: 15, M: 26, Q: 36, H: 44 },
-    4: { L: 20, M: 36, Q: 52, H: 64 },
-    5: { L: 26, M: 48, Q: 72, H: 86 },
-    6: { L: 36, M: 64, Q: 96, H: 112 },
-    7: { L: 40, M: 72, Q: 108, H: 130 },
-    8: { L: 48, M: 88, Q: 132, H: 156 },
-    9: { L: 60, M: 110, Q: 160, H: 192 },
-    10: { L: 72, M: 130, Q: 192, H: 224 },
-  }
-  const VERSION_SIZE = [
-    21, 25, 29, 33, 37, 41, 45, 49, 53, 57,
-  ]
-
-  const getBestVersion = (len: number, level: keyof typeof EC[1]) => {
-    for (let v = 1; v <= 10; v++) {
-      const capacity = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
-      const cap8 = [17, 32, 53, 78, 106, 134, 154, 192, 230, 271][v - 1]
-      if (cap8 >= len) return v
-    }
-    return 10
-  }
-
-  const build = (text: string, level: 'L' | 'M' | 'Q' | 'H') => {
-    const bytes = new TextEncoder().encode(text)
-    const version = getBestVersion(bytes.length, level)
-    const size = VERSION_SIZE[version - 1]
-    const ecCount = (EC as any)[version][level]
-
-    // 数据码字：模式(字节=0100) + 长度(8bit) + 数据
-    const dataBits: number[] = []
-    const pushBits = (val: number, len: number) => {
-      for (let i = len - 1; i >= 0; i--) dataBits.push((val >> i) & 1)
-    }
-    pushBits(4, 4) // byte mode
-    pushBits(bytes.length, 8) // length (version<=9 用8bit)
-    for (const b of bytes) pushBits(b, 8)
-
-    const totalData = ((size - 17) * (size - 17) / 8) | 0 // 粗略
-    const capacityBits = totalData * 8
-    // terminator
-    for (let i = 0; i < 4 && dataBits.length < capacityBits; i++) dataBits.push(0)
-    while (dataBits.length % 8 !== 0) dataBits.push(0)
-
-    const dataCodewords: number[] = []
-    for (let i = 0; i < dataBits.length; i += 8) {
-      let byte = 0
-      for (let j = 0; j < 8; j++) byte = (byte << 1) | (dataBits[i + j] || 0)
-      dataCodewords.push(byte)
-    }
-    const dataCapacity = Math.floor(capacityBits / 8)
-    let p = dataCodewords.length
-    let flip = true
-    while (p < dataCapacity) {
-      dataCodewords.push(flip ? PAD0 : PAD1)
-      flip = !flip
-      p++
-    }
-
-    // 纠错码字
-    const gen = rsPoly(ecCount)
-    const ec = new Array(ecCount).fill(0)
-    for (const b of dataCodewords) {
-      const factor = b ^ ec[0]
-      ec.shift()
-      ec.push(0)
-      if (factor !== 0) {
-        for (let i = 0; i < ecCount; i++) {
-          ec[i] ^= gmul(gen[i + 1], factor)
-        }
-      }
-    }
-
-    const all = [...dataCodewords, ...ec]
-
-    // 构造模块矩阵（含定位/时序/对齐的简化实现）
-    const moduleCount = size
-    const modules = Array.from({ length: moduleCount }, () => new Array(moduleCount).fill(null as boolean | null))
-    // 是否需要让模块记录保留位
-    const reserved = Array.from({ length: moduleCount }, () => new Array(moduleCount).fill(false))
-
-    const set = (r: number, c: number, v: boolean, res = true) => {
-      modules[r][c] = v
-      if (res) reserved[r][c] = true
-    }
-
-    // 定位标记
-    const placeFinder = (top: number, left: number) => {
-      for (let r = -1; r <= 7; r++) {
-        for (let c = -1; c <= 7; c++) {
-          const rr = top + r
-          const cc = left + c
-          if (rr < 0 || rr >= moduleCount || cc < 0 || cc >= moduleCount) continue
-          let v = false
-          if (r >= 0 && r <= 6 && (c === 0 || c === 6)) v = true
-          else if (c >= 0 && c <= 6 && (r === 0 || r === 6)) v = true
-          else if (r >= 2 && r <= 4 && c >= 2 && c <= 4) v = true
-          set(rr, cc, v, true)
-        }
-      }
-    }
-    placeFinder(0, 0)
-    placeFinder(0, moduleCount - 7)
-    placeFinder(moduleCount - 7, 0)
-
-    // 时序图样
-    for (let i = 8; i < moduleCount - 8; i++) {
-      const v = i % 2 === 0
-      if (!reserved[6][i]) set(6, i, v, true)
-      if (!reserved[i][6]) set(i, 6, v, true)
-    }
-
-    // 对齐图案（版本2+ 简化放中心一个）
-    if (version >= 2) {
-      const pos = moduleCount - 7
-      for (let r = -2; r <= 2; r++) {
-        for (let c = -2; c <= 2; c++) {
-          const rr = pos + r
-          const cc = pos + c
-          const v = Math.max(Math.abs(r), Math.abs(c)) !== 1
-          if (!reserved[rr][cc]) set(rr, cc, v, true)
-        }
-      }
-    }
-
-    // 深色模块 + 格式预留（简化：固定格式位）
-    set(8, 0, true, true)
-    set(moduleCount - 8, 8, true, true)
-
-    // 写入数据（之字形）
-    let bitIndex = 0
-    let direction = -1
-    let row = moduleCount - 1
-    let col = moduleCount - 1
-    while (col > 0) {
-      if (col === 6) col--
-      while (row >= 0 && row < moduleCount) {
-        for (let c = 0; c < 2; c++) {
-          const cc = col - c
-          if (!reserved[row][cc]) {
-            let bit = false
-            if (bitIndex < all.length * 8) {
-              const byte = all[bitIndex >> 3]
-              bit = ((byte >> (7 - (bitIndex & 7))) & 1) === 1
-              bitIndex++
-            }
-            set(row, cc, bit, false)
-          }
-        }
-        row += direction
-      }
-      direction = -direction
-      row += direction
-      col -= 2
-    }
-
-    return { size: moduleCount, modules }
-  }
-
-  return { build }
-})()
-
-const render = () => {
-  error.value = false
-  const canvas = canvasRef.value
-  if (!canvas) return
-  const ctx = canvas.getContext('2d')
-  if (!ctx) return
-  try {
-    const { size, modules } = QR.build(props.value || ' ', props.level)
-    const count = modules.length
-    const cell = props.size / (count + props.margin * 2)
-    ctx.fillStyle = props.bgColor
-    ctx.fillRect(0, 0, props.size, props.size)
-    ctx.fillStyle = props.fgColor
-    for (let r = 0; r < count; r++) {
-      for (let c = 0; c < count; c++) {
-        if (modules[r][c]) {
-          ctx.fillRect(
-            Math.round(props.margin * cell + c * cell),
-            Math.round(props.margin * cell + r * cell),
-            Math.ceil(cell),
-            Math.ceil(cell)
-          )
-        }
-      }
-    }
-  } catch {
-    error.value = true
-  }
-}
-
-onMounted(render)
-watch(
-  () => [props.value, props.size, props.level, props.fgColor, props.bgColor, props.margin],
-  render
-)
-</script>
-
-<style lang="scss" scoped>
-.qiu-qrcode {
-  position: relative;
-  display: inline-block;
-
-  &__canvas {
-    display: block;
-    border-radius: 4px;
-  }
-
-  &__error {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 12px;
-    color: var(--qiu-color-danger, #f56c6c);
-    background: var(--qiu-bg-color, #fff);
-  }
-}
-</style>

package/components/QiuQueryForm/components/QiuQueryFormBottomPanel.vue

@@ -1,13 +0,0 @@
-<template>
-  <div class="qiu-query-form-col qiu-query-form-col--full">
-    <div class="bottom-panel">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({
-  name: 'QiuQueryFormBottomPanel',
-})
-</script>

package/components/QiuQueryForm/components/QiuQueryFormLeftPanel.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="qiu-query-form-col" :style="colStyle">
-    <div class="left-panel">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({
-  name: 'QiuQueryFormLeftPanel',
-})
-
-const props = defineProps({
-  span: {
-    type: Number,
-    default: 14,
-  },
-})
-
-const colStyle = computed(() => ({
-  '--qiu-query-col-span': String(props.span),
-}))
-</script>
-
-<style lang="scss" scoped>
-.qiu-query-form-col {
-  flex: 0 0 calc(var(--qiu-query-col-span, 14) / 24 * 100%);
-  max-width: calc(var(--qiu-query-col-span, 14) / 24 * 100%);
-  box-sizing: border-box;
-
-  @media (max-width: 992px) {
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-}
-</style>

package/components/QiuQueryForm/components/QiuQueryFormRightPanel.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="qiu-query-form-col" :style="colStyle">
-    <div class="right-panel">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({
-  name: 'QiuQueryFormRightPanel',
-})
-
-const props = defineProps({
-  span: {
-    type: Number,
-    default: 10,
-  },
-})
-
-const colStyle = computed(() => ({
-  '--qiu-query-col-span': String(props.span),
-}))
-</script>
-
-<style lang="scss" scoped>
-.qiu-query-form-col {
-  flex: 0 0 calc(var(--qiu-query-col-span, 10) / 24 * 100%);
-  max-width: calc(var(--qiu-query-col-span, 10) / 24 * 100%);
-  box-sizing: border-box;
-
-  @media (max-width: 992px) {
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-}
-</style>

package/components/QiuQueryForm/components/QiuQueryFormTopPanel.vue

@@ -1,13 +0,0 @@
-<template>
-  <div class="qiu-query-form-col qiu-query-form-col--full">
-    <div class="top-panel">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({
-  name: 'QiuQueryFormTopPanel',
-})
-</script>

package/components/QiuQueryForm/index.vue

@@ -1,117 +0,0 @@
-<template>
-  <div class="qiu-query-form">
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({
-  name: 'QiuQueryForm',
-})
-</script>
-
-<style lang="scss" scoped>
-@mixin panel {
-  display: flex;
-  flex-wrap: nowrap;
-  align-content: center;
-  align-items: center;
-  min-height: var(--qiu-input-height, 32px);
-  margin: 0;
-
-  :deep(.el-form-item) {
-    margin-right: 12px !important;
-    margin-bottom: 0 !important;
-  }
-
-  :deep(.el-form-item__content) {
-    display: flex;
-    align-items: center;
-  }
-
-  :deep(> .el-button),
-  :deep(> .qiu-button) {
-    margin: 0 0 0 8px !important;
-  }
-}
-
-.qiu-query-form {
-  width: 100%;
-
-  /* 关键：left-panel 与 right-panel 同一行，按钮不换行 */
-  :deep(.el-form) {
-    display: flex;
-    flex-wrap: nowrap;
-    gap: 8px;
-    align-items: center;
-    width: 100%;
-    margin: 0;
-  }
-
-  :deep(.qiu-query-form-col--full) {
-    flex: 0 0 100%;
-    max-width: 100%;
-    box-sizing: border-box;
-  }
-
-  :deep(.el-input),
-  :deep(.el-select) {
-    width: 160px;
-  }
-
-  :deep(.el-date-editor) {
-    --qiu-date-editor-daterange-width: 220px;
-    width: 220px;
-  }
-
-  :deep(.top-panel) {
-    @include panel;
-    flex-wrap: wrap;
-    width: 100%;
-  }
-
-  :deep(.bottom-panel) {
-    @include panel;
-    flex-wrap: wrap;
-    width: 100%;
-    border-top: 1px solid var(--qiu-border-color, #dcdfe6);
-  }
-
-  :deep(.left-panel) {
-    @include panel;
-    flex: 1 1 auto;
-    justify-content: flex-start;
-    min-width: 0;
-    overflow-x: auto;
-    overflow-y: hidden;
-  }
-
-  :deep(.right-panel) {
-    @include panel;
-    flex: 0 0 auto;
-    justify-content: flex-end;
-    white-space: nowrap;
-  }
-}
-
-/* 窄屏才允许整行换行 */
-@media (max-width: 900px) {
-  .qiu-query-form {
-    :deep(.el-form) {
-      flex-wrap: wrap;
-    }
-
-    :deep(.left-panel) {
-      flex: 1 1 100%;
-      flex-wrap: wrap;
-      overflow-x: visible;
-    }
-
-    :deep(.right-panel) {
-      flex: 1 1 100%;
-      justify-content: flex-end;
-      margin-top: 4px;
-    }
-  }
-}
-</style>

package/components/QiuRadio/QiuRadioGroup.vue

@@ -1,75 +0,0 @@
-<template>
-  <div
-    class="qiu-radio-group"
-    :class="[
-      { 'is-disabled': disabled },
-      `qiu-radio-group--${type}`,
-    ]"
-    role="radiogroup"
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { QiuRadioGroupContext } from './types'
-
-defineOptions({ name: 'QiuRadioGroup' })
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string | number | boolean
-    disabled?: boolean
-    name?: string
-    type?: 'default' | 'button'
-  }>(),
-  {
-    disabled: false,
-    name: '',
-    type: 'default',
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [string | number | boolean]
-  change: [string | number | boolean]
-}>()
-
-const groupName = computed(() => props.name || `qiu-radio-group-${Math.random().toString(36).slice(2, 9)}`)
-const modelValueRef = computed(() => props.modelValue)
-const disabledRef = computed(() => props.disabled)
-
-const changeEvent = (val: string | number | boolean) => {
-  emit('update:modelValue', val)
-  emit('change', val)
-}
-
-provide<QiuRadioGroupContext>('qiuRadioGroup', {
-  modelValue: modelValueRef as Ref<string | number | boolean | undefined>,
-  disabled: disabledRef as Ref<boolean>,
-  name: groupName as Ref<string>,
-  type: computed(() => props.type),
-  changeEvent,
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-radio-group {
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-
-  &.is-disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-
-  &--button {
-    flex-wrap: nowrap;
-
-    :deep(.qiu-radio) {
-      margin-right: 0;
-    }
-  }
-}
-</style>