foucui 1.0.1

package/components/QiuQrcode/index.vue

@@ -0,0 +1,302 @@
+<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

@@ -0,0 +1,13 @@
+<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

@@ -0,0 +1,37 @@
+<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

@@ -0,0 +1,37 @@
+<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

@@ -0,0 +1,13 @@
+<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

@@ -0,0 +1,117 @@
+<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

@@ -0,0 +1,75 @@
+<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>