foucui 1.0.1 → 2.0.0

package/components/QiuCanvasKit/QiuCanvasRenderer.vue

@@ -1,348 +0,0 @@
-<script setup lang="ts">
-/**
- * 画布渲染器（预览 / 套打 / Banner；支持 link 热区）
- * @author qiuye
- * @email yjk150@qq.com
- * @date 2026-08-16
- */
-import { computed } from 'vue'
-import type {
-  CanvasKitDoc,
-  CanvasKitElement,
-  CanvasKitShapeElement,
-  CanvasKitTextElement,
-  MergeContext,
-} from './types'
-import { mergeTemplateText, sortCanvasElements } from './modules/merge'
-import { resolveAssetUrl } from './assetUrl'
-
-defineOptions({ name: 'QiuCanvasRenderer' })
-
-const CSS_MM_TO_PX = 96 / 25.4
-
-const props = withDefaults(
-  defineProps<{
-    doc: CanvasKitDoc | null
-    mergeData?: MergeContext | Record<string, string>
-    screenScale?: number
-    enableLinks?: boolean
-  }>(),
-  { screenScale: 1, mergeData: () => ({}), enableLinks: true }
-)
-
-const sorted = computed(() => {
-  if (!props.doc?.elements?.length) return []
-  return sortCanvasElements(props.doc.elements)
-})
-
-const canvasStyle = computed(() => {
-  const d = props.doc
-  if (!d?.canvas) return {}
-  const showBorder = d.canvas.showBorder !== false && d.mode !== 'banner'
-  const borderColor = d.canvas.borderColor || '#334155'
-  const bw = Number(d.canvas.borderWidthMm)
-  const borderWidthMm = Number.isFinite(bw) && bw > 0 ? bw : 0.35
-  const usePx = d.canvas.unit === 'px' || (d.mode === 'banner' && !!d.canvas.widthPx)
-  const style: Record<string, string> = {
-    width: usePx
-      ? `${d.canvas.widthPx ?? Math.round(d.canvas.widthMm * CSS_MM_TO_PX)}px`
-      : `${d.canvas.widthMm}mm`,
-    height: usePx
-      ? `${d.canvas.heightPx ?? Math.round(d.canvas.heightMm * CSS_MM_TO_PX)}px`
-      : `${d.canvas.heightMm}mm`,
-    position: 'relative',
-    boxSizing: 'border-box',
-    overflow: 'hidden',
-    backgroundColor: d.canvas.background || 'transparent',
-    border: showBorder ? `${borderWidthMm}mm solid ${borderColor}` : '0 solid transparent',
-  }
-  return style
-})
-
-const backgroundImageUrl = computed(() => {
-  const src = props.doc?.canvas?.backgroundImage
-  return src ? resolveAssetUrl(src) : ''
-})
-
-const wrapStyle = computed(() => ({
-  transform: `scale(${props.screenScale})`,
-  transformOrigin: 'top left',
-}))
-
-const layoutClipStyle = computed(() => {
-  const d = props.doc?.canvas
-  if (!d) return {}
-  const usePx = d.unit === 'px' || (props.doc?.mode === 'banner' && !!d.widthPx)
-  const w = usePx
-    ? (d.widthPx ?? d.widthMm * CSS_MM_TO_PX) * props.screenScale
-    : d.widthMm * CSS_MM_TO_PX * props.screenScale
-  const h = usePx
-    ? (d.heightPx ?? d.heightMm * CSS_MM_TO_PX) * props.screenScale
-    : d.heightMm * CSS_MM_TO_PX * props.screenScale
-  return {
-    width: `${w}px`,
-    height: `${h}px`,
-    overflow: 'hidden',
-    lineHeight: 0,
-    display: 'inline-block',
-    verticalAlign: 'top',
-  }
-})
-
-function textMerged(el: CanvasKitTextElement) {
-  return mergeTemplateText(el.text, props.mergeData || {})
-}
-
-function linkHref(el: CanvasKitElement) {
-  if (!el.link?.href) return ''
-  return mergeTemplateText(el.link.href, props.mergeData || {})
-}
-
-function flexForAlign(align?: string) {
-  switch (align) {
-    case 'center':
-      return { justifyContent: 'center', alignItems: 'center', textAlign: 'center' as const }
-    case 'top-center':
-      return { justifyContent: 'center', alignItems: 'flex-start', textAlign: 'center' as const }
-    case 'bottom-center':
-      return { justifyContent: 'center', alignItems: 'flex-end', textAlign: 'center' as const }
-    case 'middle-left':
-      return { justifyContent: 'flex-start', alignItems: 'center', textAlign: 'left' as const }
-    case 'middle-right':
-      return { justifyContent: 'flex-end', alignItems: 'center', textAlign: 'right' as const }
-    default:
-      return { justifyContent: 'flex-start', alignItems: 'flex-start', textAlign: 'left' as const }
-  }
-}
-
-function elBase(el: CanvasKitElement) {
-  const transforms: string[] = []
-  if (el.rotation) transforms.push(`rotate(${el.rotation}deg)`)
-  if (el.flipX) transforms.push('scaleX(-1)')
-  if (el.flipY) transforms.push('scaleY(-1)')
-  return {
-    position: 'absolute' as const,
-    left: `${el.xMm}mm`,
-    top: `${el.yMm}mm`,
-    width: `${el.wMm}mm`,
-    height: `${el.hMm}mm`,
-    zIndex: el.zIndex ?? 1,
-    transform: transforms.join(' ') || undefined,
-    transformOrigin: 'center center',
-    pointerEvents: props.enableLinks && el.link?.href ? ('auto' as const) : ('none' as const),
-    textDecoration: 'none' as const,
-    color: undefined as string | undefined,
-  }
-}
-
-function textElStyle(el: CanvasKitTextElement) {
-  const flex = flexForAlign(el.align)
-  const vertical = el.textDirection === 'vertical'
-  const base = elBase(el)
-  return {
-    ...base,
-    display: 'flex',
-    ...flex,
-    fontSize: `${el.fontSize}pt`,
-    fontFamily: el.fontFamily,
-    color: el.color,
-    lineHeight: 1.25,
-    whiteSpace: 'pre-wrap' as const,
-    wordBreak: 'break-word' as const,
-    overflow: 'hidden',
-    writingMode: vertical ? ('vertical-rl' as const) : ('horizontal-tb' as const),
-    textOrientation: vertical ? ('upright' as const) : ('mixed' as const),
-  }
-}
-
-function imgElStyle(el: CanvasKitElement) {
-  if (el.type !== 'image' && el.type !== 'seal') return {}
-  return {
-    ...elBase(el),
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: '0.5mm',
-    boxSizing: 'border-box' as const,
-  }
-}
-
-function shapeElStyle(el: CanvasKitShapeElement) {
-  return {
-    ...elBase(el),
-    boxSizing: 'border-box' as const,
-    opacity: el.opacity != null ? String(el.opacity) : undefined,
-  }
-}
-
-function shapeStroke(el: CanvasKitShapeElement) {
-  return el.showStroke === false ? 'none' : el.strokeColor || '#606266'
-}
-
-function shapeStrokeWidth(el: CanvasKitShapeElement) {
-  return Math.max(0, Number(el.strokeWidthMm ?? 0.6))
-}
-
-function shapeFill(el: CanvasKitShapeElement) {
-  return el.background || 'transparent'
-}
-
-function polygonPoints(el: CanvasKitShapeElement) {
-  const sides = Math.max(3, Math.min(12, Math.round(Number(el.polygonSides ?? 5))))
-  const pts: string[] = []
-  for (let i = 0; i < sides; i++) {
-    const angle = -Math.PI / 2 + (Math.PI * 2 * i) / sides
-    pts.push(`${50 + Math.cos(angle) * 44},${50 + Math.sin(angle) * 44}`)
-  }
-  return pts.join(' ')
-}
-</script>
-
-<template>
-  <div v-if="doc?.canvas" class="qck-layout-clip" :style="layoutClipStyle">
-    <div class="qck-screen-wrap" :style="wrapStyle">
-      <div class="qiu-canvas-root qck-print-root" :style="canvasStyle">
-        <img
-          v-if="backgroundImageUrl"
-          class="qiu-canvas-bg"
-          :src="backgroundImageUrl"
-          alt=""
-          crossorigin="anonymous"
-        />
-        <div
-          v-for="region in doc.regions || []"
-          :key="region.id"
-          class="qiu-canvas-region"
-          :style="{
-            left: `${region.xMm}mm`,
-            top: `${region.yMm}mm`,
-            width: `${region.wMm}mm`,
-            height: `${region.hMm}mm`,
-            backgroundColor: region.background || 'transparent',
-            backgroundImage: region.backgroundImage
-              ? `url(${resolveAssetUrl(region.backgroundImage)})`
-              : undefined,
-            backgroundSize: region.backgroundImage ? 'cover' : undefined,
-            backgroundPosition: region.backgroundImage ? 'center' : undefined,
-          }"
-        />
-        <template v-for="el in sorted" :key="el.id">
-          <component
-            :is="enableLinks && linkHref(el) ? 'a' : 'div'"
-            v-if="el.type === 'text'"
-            :href="enableLinks && linkHref(el) ? linkHref(el) : undefined"
-            :target="el.link?.target || '_blank'"
-            :rel="el.link?.target === '_self' ? undefined : 'noopener noreferrer'"
-            :style="textElStyle(el)"
-          >
-            {{ textMerged(el) }}
-          </component>
-          <component
-            :is="enableLinks && linkHref(el) ? 'a' : 'div'"
-            v-else-if="el.type === 'image' || el.type === 'seal'"
-            :href="enableLinks && linkHref(el) ? linkHref(el) : undefined"
-            :target="el.link?.target || '_blank'"
-            :rel="el.link?.target === '_self' ? undefined : 'noopener noreferrer'"
-            :style="imgElStyle(el)"
-          >
-            <img
-              :src="resolveAssetUrl(el.src)"
-              alt=""
-              style="max-width: 100%; max-height: 100%; object-fit: contain"
-            />
-          </component>
-          <component
-            :is="enableLinks && linkHref(el) ? 'a' : 'div'"
-            v-else-if="el.type === 'shape'"
-            :href="enableLinks && linkHref(el) ? linkHref(el) : undefined"
-            :target="el.link?.target || '_blank'"
-            :rel="el.link?.target === '_self' ? undefined : 'noopener noreferrer'"
-            :style="shapeElStyle(el)"
-          >
-            <svg class="qiu-canvas-shape-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
-              <line
-                v-if="el.shape === 'line'"
-                x1="4"
-                y1="50"
-                x2="96"
-                y2="50"
-                :stroke="shapeStroke(el)"
-                :stroke-width="Math.max(shapeStrokeWidth(el) * 3.2, 1)"
-                stroke-linecap="round"
-              />
-              <rect
-                v-else-if="el.shape === 'rect'"
-                x="4"
-                y="4"
-                width="92"
-                height="92"
-                :fill="shapeFill(el)"
-                :stroke="shapeStroke(el)"
-                :stroke-width="shapeStrokeWidth(el) * 3.2"
-              />
-              <ellipse
-                v-else-if="el.shape === 'circle'"
-                cx="50"
-                cy="50"
-                rx="46"
-                ry="46"
-                :fill="shapeFill(el)"
-                :stroke="shapeStroke(el)"
-                :stroke-width="shapeStrokeWidth(el) * 3.2"
-              />
-              <polygon
-                v-else-if="el.shape === 'triangle'"
-                points="50,4 96,96 4,96"
-                :fill="shapeFill(el)"
-                :stroke="shapeStroke(el)"
-                :stroke-width="shapeStrokeWidth(el) * 3.2"
-                stroke-linejoin="round"
-              />
-              <polygon
-                v-else
-                :points="polygonPoints(el)"
-                :fill="shapeFill(el)"
-                :stroke="shapeStroke(el)"
-                :stroke-width="shapeStrokeWidth(el) * 3.2"
-                stroke-linejoin="round"
-              />
-            </svg>
-          </component>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.qck-layout-clip {
-  box-sizing: border-box;
-}
-.qck-screen-wrap {
-  display: inline-block;
-}
-.qiu-canvas-root {
-  border: 1px solid #dcdfe6;
-}
-.qiu-canvas-bg {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  pointer-events: none;
-  user-select: none;
-  z-index: 0;
-}
-.qiu-canvas-region {
-  position: absolute;
-  box-sizing: border-box;
-  pointer-events: none;
-  z-index: 0;
-}
-.qiu-canvas-shape-svg {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-</style>

package/components/QiuCanvasKit/assetUrl.ts

@@ -1,11 +0,0 @@
-/**
- * 资源 URL 解析（画布预览）
- * @author qiuye
- * @email yjk150@qq.com
- * @date 2026-08-16
- */
-export function resolveAssetUrl(src: string): string {
-  if (!src) return ''
-  if (/^(https?:|data:|blob:|\/\/)/i.test(src)) return src
-  return src
-}

package/components/QiuCanvasKit/components/DataModulesPanel.vue

@@ -1,352 +0,0 @@
-<script setup lang="ts">
-/**
- * 数据模块配置面板：启用/增删字段、插入 {{module.key}}、预览样例
- * @author qiuye
- * @email yjk150@qq.com
- * @date 2026-08-16
- */
-import { computed, ref, watch } from 'vue'
-import type { DataModuleDef } from '../types'
-import {
-  createCustomModule,
-  listInsertableFields,
-  resolveDataModules,
-  sampleContextFromModules,
-} from '../modules/dataRegistry'
-
-defineOptions({ name: 'QiuCanvasDataModulesPanel' })
-
-const props = defineProps<{
-  modelValue: DataModuleDef[]
-  extraModules?: DataModuleDef[]
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [DataModuleDef[]]
-  insert: [token: string, meta: { moduleId: string; key: string; label: string }]
-  'preview-context': [ctx: Record<string, Record<string, string> | string>]
-}>()
-
-const activeId = ref('')
-const previewJson = ref('')
-const showLabel = ref(true)
-
-const modules = computed({
-  get: () => resolveDataModules(props.extraModules, props.modelValue),
-  set: (v) => emit('update:modelValue', v),
-})
-
-watch(
-  modules,
-  (list) => {
-    if (!activeId.value && list[0]) activeId.value = list[0].id
-    if (activeId.value && !list.find((m) => m.id === activeId.value)) {
-      activeId.value = list[0]?.id || ''
-    }
-  },
-  { immediate: true, deep: true }
-)
-
-const active = computed(() => modules.value.find((m) => m.id === activeId.value) || null)
-
-const fieldRows = computed(() => listInsertableFields(modules.value))
-
-function patchModules(next: DataModuleDef[]) {
-  emit('update:modelValue', next)
-}
-
-function toggleEnabled(m: DataModuleDef, enabled: boolean) {
-  const base = props.modelValue?.length ? [...props.modelValue] : resolveDataModules(props.extraModules)
-  const idx = base.findIndex((x) => x.id === m.id)
-  if (idx >= 0) {
-    base[idx] = { ...base[idx], enabled }
-  } else {
-    base.push({ ...m, enabled })
-  }
-  patchModules(base)
-}
-
-function addModule() {
-  const m = createCustomModule('自定义模块')
-  const base = props.modelValue?.length ? [...props.modelValue] : resolveDataModules(props.extraModules)
-  base.push(m)
-  patchModules(base)
-  activeId.value = m.id
-}
-
-function removeModule(m: DataModuleDef) {
-  if (m.builtin) return
-  const base = (props.modelValue || []).filter((x) => x.id !== m.id)
-  patchModules(base)
-}
-
-function addField() {
-  if (!active.value) return
-  const base = props.modelValue?.length ? [...props.modelValue] : resolveDataModules(props.extraModules)
-  let idx = base.findIndex((x) => x.id === active.value!.id)
-  if (idx < 0) {
-    base.push({ ...active.value })
-    idx = base.length - 1
-  }
-  const key = `field_${Date.now().toString(36).slice(-4)}`
-  base[idx] = {
-    ...base[idx],
-    fields: [...base[idx].fields, { key, label: '新字段', type: 'string' }],
-    sample: { ...(base[idx].sample || {}), [key]: '样例' },
-  }
-  patchModules(base)
-}
-
-function updateField(i: number, patch: Partial<{ key: string; label: string }>) {
-  if (!active.value) return
-  const base = props.modelValue?.length ? [...props.modelValue] : resolveDataModules(props.extraModules)
-  let idx = base.findIndex((x) => x.id === active.value!.id)
-  if (idx < 0) {
-    base.push({ ...active.value })
-    idx = base.length - 1
-  }
-  const fields = base[idx].fields.map((f, j) => (j === i ? { ...f, ...patch } : f))
-  base[idx] = { ...base[idx], fields }
-  patchModules(base)
-}
-
-function updateSample(key: string, val: string) {
-  if (!active.value) return
-  const base = props.modelValue?.length ? [...props.modelValue] : resolveDataModules(props.extraModules)
-  let idx = base.findIndex((x) => x.id === active.value!.id)
-  if (idx < 0) {
-    base.push({ ...active.value })
-    idx = base.length - 1
-  }
-  base[idx] = {
-    ...base[idx],
-    sample: { ...(base[idx].sample || {}), [key]: val },
-  }
-  patchModules(base)
-}
-
-function insertField(row: { moduleId: string; key: string; label: string; token: string }) {
-  const token = showLabel.value ? `${row.label}：${row.token}` : row.token
-  emit('insert', token, { moduleId: row.moduleId, key: row.key, label: row.label })
-}
-
-function applyPreview() {
-  let ctx = sampleContextFromModules(modules.value)
-  if (previewJson.value.trim()) {
-    try {
-      const parsed = JSON.parse(previewJson.value)
-      ctx = { ...ctx, ...parsed }
-    } catch {
-      /* ignore */
-    }
-  }
-  emit('preview-context', ctx)
-}
-
-function renameActive(label: string) {
-  if (!active.value) return
-  const base = props.modelValue?.length ? [...props.modelValue] : resolveDataModules(props.extraModules)
-  let idx = base.findIndex((x) => x.id === active.value!.id)
-  if (idx < 0) {
-    base.push({ ...active.value, label })
-  } else {
-    base[idx] = { ...base[idx], label }
-  }
-  patchModules(base)
-}
-</script>
-
-<template>
-  <div class="qck-data-modules">
-    <div class="qck-dm-head">
-      <span class="qck-dm-title">数据模块</span>
-      <qiu-button size="small" type="primary" plain @click="addModule">添加模块</qiu-button>
-    </div>
-    <div class="qck-dm-list">
-      <button
-        v-for="m in modules"
-        :key="m.id"
-        type="button"
-        class="qck-dm-chip"
-        :class="{ active: m.id === activeId, off: m.enabled === false }"
-        @click="activeId = m.id"
-      >
-        <qiu-switch
-          :model-value="m.enabled !== false"
-          size="small"
-          @click.stop
-          @update:model-value="(v: boolean) => toggleEnabled(m, v)"
-        />
-        <span>{{ m.label }}</span>
-      </button>
-    </div>
-
-    <template v-if="active">
-      <div class="qck-dm-row">
-        <span class="label">模块名</span>
-        <qiu-input
-          :model-value="active.label"
-          size="small"
-          :disabled="!!active.builtin"
-          @update:model-value="renameActive"
-        />
-        <qiu-button
-          v-if="!active.builtin"
-          size="small"
-          type="danger"
-          link
-          @click="removeModule(active)"
-        >
-          删除
-        </qiu-button>
-      </div>
-      <div class="qck-dm-fields">
-        <div class="qck-dm-field-head">
-          <span>字段</span>
-          <qiu-button size="small" @click="addField">增字段</qiu-button>
-        </div>
-        <div v-for="(f, i) in active.fields" :key="`${active.id}-${i}-${f.key}`" class="qck-dm-field">
-          <qiu-input
-            :model-value="f.key"
-            size="small"
-            placeholder="key"
-            @update:model-value="(v: string) => updateField(i, { key: v })"
-          />
-          <qiu-input
-            :model-value="f.label"
-            size="small"
-            placeholder="标签"
-            @update:model-value="(v: string) => updateField(i, { label: v })"
-          />
-          <qiu-input
-            :model-value="active.sample?.[f.key] || ''"
-            size="small"
-            placeholder="样例"
-            @update:model-value="(v: string) => updateSample(f.key, v)"
-          />
-          <qiu-button
-            size="small"
-            type="primary"
-            link
-            @click="
-              insertField({
-                moduleId: active.id,
-                key: f.key,
-                label: f.label,
-                token: `{{${active.id}.${f.key}}}`,
-              })
-            "
-          >
-            插入
-          </qiu-button>
-        </div>
-      </div>
-    </template>
-
-    <div class="qck-dm-insert">
-      <div class="qck-dm-row">
-        <span class="label">插入带标签</span>
-        <qiu-switch v-model="showLabel" size="small" />
-      </div>
-      <div class="qck-dm-quick">
-        <qiu-button
-          v-for="row in fieldRows.slice(0, 12)"
-          :key="row.token"
-          size="small"
-          @click="insertField(row)"
-        >
-          {{ row.moduleLabel }}.{{ row.label }}
-        </qiu-button>
-      </div>
-    </div>
-
-    <div class="qck-dm-preview">
-      <div class="qck-dm-field-head">
-        <span>预览数据（JSON）</span>
-        <qiu-button size="small" type="primary" @click="applyPreview">应用到画布</qiu-button>
-      </div>
-      <qiu-input
-        v-model="previewJson"
-        type="textarea"
-        :rows="4"
-        placeholder='{"student":{"name":"李四"},"classroom":{"name":"教室A"}}'
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.qck-data-modules {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  font-size: 12px;
-}
-.qck-dm-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.qck-dm-title {
-  font-weight: 600;
-  color: #0f172a;
-}
-.qck-dm-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-.qck-dm-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  border: 1px solid #e2e8f0;
-  background: #fff;
-  border-radius: 6px;
-  padding: 4px 8px;
-  cursor: pointer;
-}
-.qck-dm-chip.active {
-  border-color: #0d9488;
-  background: #f0fdfa;
-}
-.qck-dm-chip.off {
-  opacity: 0.55;
-}
-.qck-dm-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.qck-dm-row .label {
-  color: #64748b;
-  min-width: 64px;
-}
-.qck-dm-fields {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.qck-dm-field-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: #475569;
-}
-.qck-dm-field {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr auto;
-  gap: 4px;
-  align-items: center;
-}
-.qck-dm-quick {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-.qck-dm-preview {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-</style>