foucui 1.0.1

package/components/QiuCanvasKit/QiuCanvasRenderer.vue

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

@@ -0,0 +1,11 @@
+/**
+ * 资源 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

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