foucui 1.0.1 → 2.0.0

package/components/QiuCanvasKit/presets/banner.ts

@@ -1,79 +0,0 @@
-/**
- * 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

@@ -1,138 +0,0 @@
-/**
- * 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

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

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

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