foucui 1.0.1

package/components/QiuCanvasKit/presets/banner.ts

@@ -0,0 +1,79 @@
+/**
+ * Banner 模式默认画布与模块
+ * @author qiuye
+ * @email yjk150@qq.com
+ * @date 2026-08-16
+ */
+import type { CanvasKitDoc, DataModuleDef } from '../types'
+import { cloneBuiltinModules } from '../modules/dataRegistry'
+
+export const BANNER_DEFAULT_MODULES: DataModuleDef[] = cloneBuiltinModules().map((m) => ({
+  ...m,
+  enabled: ['school', 'competition'].includes(m.id),
+}))
+
+export function createBannerDoc(partial?: Partial<CanvasKitDoc>): CanvasKitDoc {
+  return {
+    version: 1,
+    mode: 'banner',
+    canvas: {
+      widthMm: 320,
+      heightMm: 90,
+      widthPx: 1200,
+      heightPx: 340,
+      unit: 'px',
+      background: '#0f766e',
+      showBorder: false,
+    },
+    elements: [
+      {
+        id: 'banner-title',
+        type: 'text',
+        zIndex: 2,
+        xMm: 20,
+        yMm: 25,
+        wMm: 200,
+        hMm: 20,
+        text: '{{school.name}}',
+        fontSize: 28,
+        fontFamily: 'Microsoft YaHei, sans-serif',
+        color: '#ffffff',
+        link: { href: 'https://example.com', target: '_blank' },
+      },
+      {
+        id: 'banner-sub',
+        type: 'text',
+        zIndex: 2,
+        xMm: 20,
+        yMm: 50,
+        wMm: 240,
+        hMm: 14,
+        text: '{{competition.name}}',
+        fontSize: 14,
+        fontFamily: 'Microsoft YaHei, sans-serif',
+        color: '#ccfbf1',
+      },
+    ],
+    dataModules: BANNER_DEFAULT_MODULES,
+    ...partial,
+  }
+}
+
+export function createBadgeDoc(partial?: Partial<CanvasKitDoc>): CanvasKitDoc {
+  return {
+    version: 1,
+    mode: 'badge',
+    canvas: {
+      widthMm: 90,
+      heightMm: 130,
+      unit: 'mm',
+      background: '#ffffff',
+      showBorder: true,
+      borderColor: '#334155',
+      borderWidthMm: 0.35,
+    },
+    elements: [],
+    dataModules: cloneBuiltinModules(),
+    ...partial,
+  }
+}

package/components/QiuCanvasKit/types.ts

@@ -0,0 +1,138 @@
+/**
+ * QiuCanvasKit 类型：统一证件 / 桌签 / Banner 画布文档
+ * @author qiuye
+ * @email yjk150@qq.com
+ * @date 2026-08-16
+ */
+
+export type CanvasKitMode = 'badge' | 'desk' | 'banner'
+
+export type DataFieldType = 'string' | 'number' | 'image' | 'url'
+
+export type DataFieldDef = {
+  key: string
+  label: string
+  type?: DataFieldType
+}
+
+export type DataModuleDef = {
+  id: string
+  label: string
+  fields: DataFieldDef[]
+  sample?: Record<string, string>
+  /** 内置模块不可删；自定义可删 */
+  builtin?: boolean
+  enabled?: boolean
+}
+
+/** 嵌套合并上下文：{ student: { name }, classroom: { name } } */
+export type MergeContext = Record<string, Record<string, string> | string>
+
+export type ElementLink = {
+  href: string
+  target?: '_blank' | '_self'
+}
+
+export interface CanvasKitCanvas {
+  widthMm: number
+  heightMm: number
+  /** Banner 可用 px；与 widthMm 二选一优先 px */
+  widthPx?: number
+  heightPx?: number
+  background?: string
+  backgroundImage?: string
+  showBorder?: boolean
+  borderColor?: string
+  borderWidthMm?: number
+  unit?: 'mm' | 'px'
+}
+
+export interface CanvasKitRegion {
+  id: string
+  name: string
+  xMm: number
+  yMm: number
+  wMm: number
+  hMm: number
+  background?: string
+  backgroundImage?: string
+}
+
+export interface CanvasKitElementBase {
+  id: string
+  zIndex: number
+  xMm: number
+  yMm: number
+  wMm: number
+  hMm: number
+  rotation?: number
+  flipX?: boolean
+  flipY?: boolean
+  groupId?: string
+  regionId?: string
+  align?: string
+  link?: ElementLink
+}
+
+export interface CanvasKitTextElement extends CanvasKitElementBase {
+  type: 'text'
+  text: string
+  fontSize: number
+  fontFamily: string
+  color: string
+  textDirection?: 'horizontal' | 'vertical'
+}
+
+export interface CanvasKitImageElement extends CanvasKitElementBase {
+  type: 'image' | 'seal'
+  src: string
+  clipboardSource?: 'clipboard'
+  clipboardUploadState?: 'pending' | 'uploaded'
+  clipboardUploadKey?: string
+  clipboardImageId?: number
+  clipboardOrigName?: string
+}
+
+export interface CanvasKitShapeElement extends CanvasKitElementBase {
+  type: 'shape'
+  shape: 'rect' | 'circle' | 'triangle' | 'line' | 'polygon' | 'trapezoid'
+  background?: string
+  lockAspectRatio?: boolean
+  showStroke?: boolean
+  strokeColor?: string
+  strokeWidthMm?: number
+  opacity?: number
+  polygonSides?: number
+}
+
+export type CanvasKitElement =
+  | CanvasKitTextElement
+  | CanvasKitImageElement
+  | CanvasKitShapeElement
+
+export interface CanvasKitGuideLine {
+  id: string
+  axis: 'horizontal' | 'vertical'
+  offsetMm: number
+}
+
+export interface CanvasKitDoc {
+  version: number
+  mode?: CanvasKitMode
+  canvas: CanvasKitCanvas
+  elements: CanvasKitElement[]
+  guides?: CanvasKitGuideLine[]
+  regions?: CanvasKitRegion[]
+  /** 模板级数据模块（启用/自定义） */
+  dataModules?: DataModuleDef[]
+}
+
+/** 兼容旧证件模板类型别名 */
+export type BadgeTemplateDoc = CanvasKitDoc
+export type BadgeElement = CanvasKitElement
+export type BadgeTextElement = CanvasKitTextElement
+export type BadgeImageElement = CanvasKitImageElement
+export type BadgeShapeElement = CanvasKitShapeElement
+export type BadgeTemplateCanvas = CanvasKitCanvas
+export type BadgeCanvasRegion = CanvasKitRegion
+export type BadgeGuideLine = CanvasKitGuideLine

package/components/QiuCard/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="qiu-card" :class="[`qiu-card--shadow-${shadow}`]">
+    <div v-if="$slots.header || title" class="qiu-card__header">
+      <slot v-if="$slots.header" name="header" />
+      <template v-else>{{ title }}</template>
+    </div>
+    <div class="qiu-card__body" :class="bodyClass" :style="bodyStyle">
+      <qiu-skeleton v-if="skeleton" animated :loading="skeletonShow" :rows="skeletonRows">
+        <slot />
+      </qiu-skeleton>
+      <slot v-else />
+    </div>
+    <div v-if="$slots.footer" class="qiu-card__footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'QiuCard',
+})
+
+const props = defineProps({
+  bodyClass: {
+    type: String,
+    default: '',
+  },
+  bodyStyle: {
+    type: [Object, String] as () => Record<string, string> | string,
+    default: () => ({}),
+  },
+  shadow: {
+    type: String as () => 'never' | 'hover' | 'always',
+    default: 'never',
+  },
+  skeleton: {
+    type: Boolean,
+    default: false,
+  },
+  skeletonRows: {
+    type: Number,
+    default: 5,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+})
+
+const skeletonShow = ref<boolean>(true)
+
+const timer: ReturnType<typeof setTimeout> = setTimeout(() => {
+  skeletonShow.value = false
+}, 500)
+
+onBeforeUnmount(() => {
+  clearTimeout(timer)
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-card {
+  overflow: hidden;
+  background: var(--qiu-bg-color, #fff);
+  border: 1px solid var(--qiu-border-color-light, #e4e7ed);
+  border-radius: var(--qiu-border-radius-base, 4px);
+  transition: box-shadow 0.3s ease;
+
+  &--shadow-always {
+    box-shadow: var(--qiu-box-shadow-light, 0 2px 12px 0 rgb(0 0 0 / 10%));
+  }
+
+  &--shadow-hover:hover {
+    box-shadow: var(--qiu-box-shadow-light, 0 2px 12px 0 rgb(0 0 0 / 10%));
+  }
+
+  &__header {
+    padding: calc(var(--qiu-card-padding, 20px) - 2px) var(--qiu-card-padding, 20px);
+    font-weight: 500;
+    border-bottom: 1px solid var(--qiu-border-color-light, #e4e7ed);
+
+    :deep([class*='ri-']) {
+      background-image: linear-gradient(120deg, #bd34fe 30%, var(--qiu-color-primary));
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  &__body {
+    padding: var(--qiu-card-padding, 20px);
+  }
+
+  &__footer {
+    padding: calc(var(--qiu-card-padding, 20px) - 2px) var(--qiu-card-padding, 20px);
+    border-top: 1px solid var(--qiu-border-color-light, #e4e7ed);
+  }
+
+  :deep(.qiu-skeleton) {
+    height: 100%;
+    overflow: hidden;
+  }
+}
+</style>

package/components/QiuCarousel/context.ts

@@ -0,0 +1,16 @@
+import type { InjectionKey, Ref } from 'vue'
+
+export interface QiuCarouselItemRegistration {
+  uid: number
+  name?: string | number
+}
+
+export interface QiuCarouselContext {
+  activeIndex: Ref<number>
+  itemCount: Ref<number>
+  registerItem: (item: QiuCarouselItemRegistration) => number
+  unregisterItem: (uid: number) => void
+  loop: Ref<boolean>
+}
+
+export const QIU_CAROUSEL_KEY: InjectionKey<QiuCarouselContext> = Symbol('QiuCarousel')

package/components/QiuCarousel/index.vue

@@ -0,0 +1,343 @@
+<template>
+  <div
+    class="qiu-carousel"
+    :class="[`qiu-carousel--arrow-${arrow}`]"
+    :style="rootStyle"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <div class="qiu-carousel__container">
+      <Transition :name="transitionName" mode="out-in">
+        <div :key="activeIndex" class="qiu-carousel__slide">
+          <component :is="currentVNode" v-if="currentVNode" />
+        </div>
+      </Transition>
+
+      <button
+        v-if="arrow !== 'never'"
+        type="button"
+        class="qiu-carousel__arrow qiu-carousel__arrow--left"
+        aria-label="previous"
+        @click="prev"
+      >
+        <qiu-icon icon="arrow-left-s-line" />
+      </button>
+      <button
+        v-if="arrow !== 'never'"
+        type="button"
+        class="qiu-carousel__arrow qiu-carousel__arrow--right"
+        aria-label="next"
+        @click="next"
+      >
+        <qiu-icon icon="arrow-right-s-line" />
+      </button>
+    </div>
+
+    <div
+      v-if="indicatorPosition !== 'none'"
+      class="qiu-carousel__indicators"
+      :class="`qiu-carousel__indicators--${indicatorPosition}`"
+    >
+      <button
+        v-for="(_, idx) in itemCount"
+        :key="idx"
+        type="button"
+        class="qiu-carousel__indicator"
+        :class="{ 'is-active': idx === activeIndex }"
+        :aria-label="`slide ${idx + 1}`"
+        @click="goTo(idx)"
+      />
+    </div>
+
+    <div class="qiu-carousel__items" aria-hidden="true">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { QiuCarouselContext, QiuCarouselItemRegistration } from './context'
+import { QIU_CAROUSEL_KEY } from './context'
+
+defineOptions({ name: 'QiuCarousel' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number
+    autoplay?: boolean
+    interval?: number
+    height?: string | number
+    indicatorPosition?: 'outside' | 'inside' | 'none'
+    arrow?: 'always' | 'hover' | 'never'
+    loop?: boolean
+  }>(),
+  {
+    modelValue: 0,
+    autoplay: true,
+    interval: 3000,
+    height: '',
+    indicatorPosition: 'inside',
+    arrow: 'hover',
+    loop: true,
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [number]
+  change: [number]
+}>()
+
+const items = ref<QiuCarouselItemRegistration[]>([])
+const itemRenders = ref<Map<number, () => any>>(new Map())
+const hover = ref(false)
+const direction = ref<'next' | 'prev'>('next')
+let timer: ReturnType<typeof setInterval> | null = null
+
+const itemCount = computed(() => items.value.length)
+
+const activeIndex = computed({
+  get() {
+    if (!itemCount.value) return 0
+    const idx = props.modelValue ?? 0
+    return ((idx % itemCount.value) + itemCount.value) % itemCount.value
+  },
+  set(val: number) {
+    emit('update:modelValue', val)
+    emit('change', val)
+  },
+})
+
+const rootStyle = computed(() => {
+  if (!props.height && props.height !== 0) return undefined
+  const h = typeof props.height === 'number' ? `${props.height}px` : props.height
+  return { height: h }
+})
+
+const transitionName = computed(() =>
+  direction.value === 'next' ? 'qiu-carousel-slide-next' : 'qiu-carousel-slide-prev'
+)
+
+const currentUid = computed(() => items.value[activeIndex.value]?.uid)
+const currentVNode = computed(() => {
+  const uid = currentUid.value
+  if (uid === undefined) return null
+  const render = itemRenders.value.get(uid)
+  return render ? render : null
+})
+
+const registerItem = (item: QiuCarouselItemRegistration) => {
+  const idx = items.value.findIndex((i) => i.uid === item.uid)
+  if (idx >= 0) items.value[idx] = item
+  else items.value.push(item)
+  return items.value.findIndex((i) => i.uid === item.uid)
+}
+
+const unregisterItem = (uid: number) => {
+  items.value = items.value.filter((i) => i.uid !== uid)
+  itemRenders.value.delete(uid)
+}
+
+provide<QiuCarouselContext>(QIU_CAROUSEL_KEY, {
+  activeIndex: activeIndex as Ref<number>,
+  itemCount,
+  registerItem,
+  unregisterItem,
+  loop: toRef(props, 'loop'),
+})
+
+provide('qiuCarouselRegisterRender', (uid: number, render: () => any) => {
+  itemRenders.value.set(uid, render)
+})
+
+const goTo = (idx: number) => {
+  if (!itemCount.value) return
+  direction.value = idx >= activeIndex.value ? 'next' : 'prev'
+  activeIndex.value = idx
+}
+
+const next = () => {
+  if (!itemCount.value) return
+  direction.value = 'next'
+  if (activeIndex.value >= itemCount.value - 1) {
+    activeIndex.value = props.loop ? 0 : itemCount.value - 1
+  } else {
+    activeIndex.value = activeIndex.value + 1
+  }
+}
+
+const prev = () => {
+  if (!itemCount.value) return
+  direction.value = 'prev'
+  if (activeIndex.value <= 0) {
+    activeIndex.value = props.loop ? itemCount.value - 1 : 0
+  } else {
+    activeIndex.value = activeIndex.value - 1
+  }
+}
+
+const startAutoplay = () => {
+  stopAutoplay()
+  if (!props.autoplay || itemCount.value <= 1) return
+  timer = setInterval(() => next(), props.interval)
+}
+
+const stopAutoplay = () => {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+}
+
+const onMouseEnter = () => {
+  hover.value = true
+  stopAutoplay()
+}
+
+const onMouseLeave = () => {
+  hover.value = false
+  startAutoplay()
+}
+
+watch(
+  () => [props.autoplay, props.interval, itemCount.value] as const,
+  () => startAutoplay(),
+  { immediate: true }
+)
+
+onBeforeUnmount(stopAutoplay)
+
+defineExpose({ next, prev, goTo })
+</script>
+
+<style lang="scss" scoped>
+.qiu-carousel {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  background: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
+  border-radius: var(--qiu-border-radius, var(--qiu-border-radius-base, 4px));
+
+  &__container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 180px;
+  }
+
+  &__slide {
+    width: 100%;
+    height: 100%;
+    min-height: inherit;
+  }
+
+  &__items {
+    display: none;
+  }
+
+  &__arrow {
+    position: absolute;
+    top: 50%;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    font-size: 18px;
+    color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
+    cursor: pointer;
+    background: rgb(255 255 255 / 85%);
+    border: 0;
+    border-radius: 50%;
+    box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
+    transform: translateY(-50%);
+    transition: opacity 0.2s, background 0.2s;
+
+    &:hover {
+      background: #fff;
+    }
+
+    &--left {
+      left: 12px;
+    }
+
+    &--right {
+      right: 12px;
+    }
+  }
+
+  &--arrow-hover &__arrow {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &--arrow-hover:hover &__arrow {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &__indicators {
+    display: flex;
+    gap: 8px;
+    justify-content: center;
+    padding: 10px 0;
+
+    &--inside {
+      position: absolute;
+      right: 0;
+      bottom: 8px;
+      left: 0;
+      z-index: 2;
+      padding: 0;
+    }
+
+    &--outside {
+      position: static;
+    }
+  }
+
+  &__indicator {
+    width: 8px;
+    height: 8px;
+    padding: 0;
+    cursor: pointer;
+    background: rgb(255 255 255 / 55%);
+    border: 1px solid var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
+    border-radius: 50%;
+    transition: background 0.2s, transform 0.2s;
+
+    &.is-active {
+      background: var(--qiu-color-primary, var(--qiu-color-primary, #409eff));
+      border-color: var(--qiu-color-primary, var(--qiu-color-primary, #409eff));
+      transform: scale(1.15);
+    }
+  }
+}
+
+.qiu-carousel-slide-next-enter-active,
+.qiu-carousel-slide-next-leave-active,
+.qiu-carousel-slide-prev-enter-active,
+.qiu-carousel-slide-prev-leave-active {
+  transition: opacity 0.35s ease, transform 0.35s ease;
+}
+
+.qiu-carousel-slide-next-enter-from {
+  opacity: 0;
+  transform: translateX(24px);
+}
+
+.qiu-carousel-slide-next-leave-to {
+  opacity: 0;
+  transform: translateX(-24px);
+}
+
+.qiu-carousel-slide-prev-enter-from {
+  opacity: 0;
+  transform: translateX(-24px);
+}
+
+.qiu-carousel-slide-prev-leave-to {
+  opacity: 0;
+  transform: translateX(24px);
+}
+</style>