foucui 1.0.1 → 2.0.0

package/components/QiuBadge/components/BadgeImagePickerDialog.vue

@@ -1,243 +0,0 @@
-<template>
-  <qiu-dialog
-    v-model="visibleInner"
-    title="添加图片"
-    width="720px"
-    destroy-on-close
-    class="badge-img-picker-dlg"
-    @opened="load"
-  >
-    <qiu-tab-bar v-model="tab">
-      <qiu-tab-pane label="图片库" name="lib">
-        <p class="dlg-hint">双击缩略图插入到画布；删除后模板里若仍引用该地址将无法显示。</p>
-        <div v-qiu-loading="loading" class="lib-grid">
-          <div
-            v-for="it in list"
-            :key="it.id"
-            class="lib-cell"
-            @dblclick="pick(it)"
-          >
-            <img :src="fullUrl(it.url)" alt="" class="thumb" loading="lazy" />
-            <div class="meta" :title="it.orig_name">{{ it.orig_name || '未命名' }}</div>
-            <qiu-button type="danger" link size="small" class="del" @click.stop="remove(it)">删除</qiu-button>
-          </div>
-        </div>
-        <qiu-empty v-if="!loading && !list.length" description="暂无图片，可到「上传本地文件」添加" />
-      </qiu-tab-pane>
-      <qiu-tab-pane label="上传本地文件" name="up">
-        <p class="dlg-hint">上传后会写入图片库，并自动插入当前画布；可多选文件或一次拖拽多张。</p>
-        <div
-          class="upload-drop"
-          @dragover.prevent
-          @drop.prevent="onDrop"
-          @click="fileInputRef?.click()"
-        >
-          <qiu-icon icon="upload-cloud-2-line" class="upload-ico" />
-          <div class="upload-text">拖到此处，或 <em>点击选择多个文件</em></div>
-          <div class="upload-sub">支持 JPG / PNG / GIF / WebP / BMP，单文件不超过 8MB</div>
-          <input
-            ref="fileInputRef"
-            type="file"
-            multiple
-            accept="image/jpeg,image/png,image/gif,image/webp,image/bmp"
-            class="upload-input"
-            @change="onFileInput"
-          />
-        </div>
-      </qiu-tab-pane>
-    </qiu-tab-bar>
-
-    <qiu-dialog v-model="deleteConfirmVisible" title="删除确认" width="400px" append-to-body>
-      <p>确定删除「{{ deleteTarget?.orig_name || '该图片' }}」？</p>
-      <template #footer>
-        <qiu-button @click="deleteConfirmVisible = false">取消</qiu-button>
-        <qiu-button type="danger" @click="doRemove">删除</qiu-button>
-      </template>
-    </qiu-dialog>
-  </qiu-dialog>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, computed } from 'vue'
-import { qiuMsg } from '../../QiuMsg'
-import { getBadgeLibraryImages, uploadBadgeLibraryImage, deleteBadgeLibraryImage } from '../api/index'
-import { resolveAssetUrl } from '../shared/assetUrl'
-
-const props = withDefaults(
-  defineProps<{ modelValue: boolean; defaultTab?: 'lib' | 'up' }>(),
-  { defaultTab: 'lib' }
-)
-const emit = defineEmits<{ 'update:modelValue': [boolean]; pick: [string] }>()
-
-const visibleInner = computed({
-  get: () => props.modelValue,
-  set: (v: boolean) => emit('update:modelValue', v),
-})
-
-const tab = ref('lib')
-const loading = ref(false)
-const list = ref<any[]>([])
-const fileInputRef = ref<HTMLInputElement | null>(null)
-const deleteConfirmVisible = ref(false)
-const deleteTarget = ref<{ id: number; orig_name?: string } | null>(null)
-
-function fullUrl(path: string) {
-  return resolveAssetUrl(path)
-}
-
-async function load() {
-  loading.value = true
-  try {
-    const res: any = await getBadgeLibraryImages({ page: 1, page_size: 120 })
-    list.value = res.data?.list ?? []
-  } catch {
-    list.value = []
-  } finally {
-    loading.value = false
-  }
-}
-
-watch(
-  () => props.modelValue,
-  (v) => {
-    if (v) tab.value = props.defaultTab
-  }
-)
-
-function pick(it: { url: string }) {
-  if (!it?.url) return
-  emit('pick', resolveAssetUrl(it.url))
-  visibleInner.value = false
-}
-
-function remove(it: { id: number; orig_name?: string }) {
-  deleteTarget.value = it
-  deleteConfirmVisible.value = true
-}
-
-async function doRemove() {
-  const it = deleteTarget.value
-  if (!it) return
-  deleteConfirmVisible.value = false
-  try {
-    await deleteBadgeLibraryImage(Number(it.id))
-    qiuMsg.success('已删除')
-    await load()
-  } catch {
-    /* 拦截器 */
-  }
-}
-
-const MAX_BADGE_UPLOAD_MB = 8
-
-async function uploadFiles(files: FileList | File[]) {
-  for (const file of Array.from(files)) {
-    const mb = file.size / (1024 * 1024)
-    if (mb > MAX_BADGE_UPLOAD_MB) {
-      qiuMsg.error(`「${file.name}」超过 ${MAX_BADGE_UPLOAD_MB}MB，已跳过`)
-      continue
-    }
-    try {
-      const res: any = await uploadBadgeLibraryImage(file)
-      const url = res?.data?.url
-      if (!url) {
-        qiuMsg.error(`「${file.name}」上传失败`)
-        continue
-      }
-      emit('pick', resolveAssetUrl(url))
-      await load()
-    } catch {
-      /* 拦截器已提示 */
-    }
-  }
-}
-
-function onFileInput(e: Event) {
-  const input = e.target as HTMLInputElement
-  if (input.files?.length) uploadFiles(input.files)
-  input.value = ''
-}
-
-function onDrop(e: DragEvent) {
-  if (e.dataTransfer?.files?.length) uploadFiles(e.dataTransfer.files)
-}
-</script>
-
-<style scoped>
-.dlg-hint {
-  font-size: 13px;
-  color: #909399;
-  margin: 0 0 12px;
-  line-height: 1.5;
-}
-.lib-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 12px;
-  max-height: 420px;
-  overflow-y: auto;
-  padding: 4px 0;
-}
-.lib-cell {
-  border: 1px solid #ebeef5;
-  border-radius: 8px;
-  padding: 8px;
-  cursor: pointer;
-  transition: border-color 0.15s, box-shadow 0.15s;
-  position: relative;
-}
-.lib-cell:hover {
-  border-color: #409eff;
-  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
-}
-.thumb {
-  width: 100%;
-  height: 100px;
-  object-fit: contain;
-  background: #f5f7fa;
-  border-radius: 4px;
-}
-.meta {
-  font-size: 11px;
-  color: #606266;
-  margin-top: 6px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.del {
-  margin-top: 4px;
-}
-.upload-drop {
-  padding: 40px 20px;
-  text-align: center;
-  cursor: pointer;
-  border: 1px dashed #dcdfe6;
-  border-radius: 8px;
-  background: #fafafa;
-}
-.upload-drop:hover {
-  border-color: #409eff;
-}
-.upload-input {
-  display: none;
-}
-.upload-ico {
-  font-size: 48px;
-  color: #c0c4cc;
-  margin-bottom: 8px;
-}
-.upload-text {
-  font-size: 14px;
-  color: #606266;
-}
-.upload-text em {
-  color: #409eff;
-  font-style: normal;
-}
-.upload-sub {
-  font-size: 12px;
-  color: #909399;
-  margin-top: 8px;
-}
-</style>

package/components/QiuBadge/components/BadgeLibraryManagerDialog.vue

@@ -1,30 +0,0 @@
-<template>
-  <qiu-dialog
-    :model-value="modelValue"
-    title="证件图片库"
-    width="min(920px, 94vw)"
-    class="badge-library-manager-dialog"
-    append-to-body
-    destroy-on-close
-    @update:model-value="$emit('update:modelValue', $event)"
-  >
-    <p class="dlg-tip">管理模板编辑中上传的图片；删除后已保存模板里若仍引用该地址将无法显示。</p>
-    <BadgeLibraryPanel v-if="modelValue" />
-  </qiu-dialog>
-</template>
-
-<script setup lang="ts">
-import BadgeLibraryPanel from './BadgeLibraryPanel.vue'
-
-defineProps<{ modelValue: boolean }>()
-defineEmits<{ 'update:modelValue': [boolean] }>()
-</script>
-
-<style scoped>
-.dlg-tip {
-  margin: 0 0 14px;
-  font-size: 13px;
-  color: #909399;
-  line-height: 1.5;
-}
-</style>

package/components/QiuBadge/components/BadgeLibraryPanel.vue

@@ -1,182 +0,0 @@
-<template>
-  <div class="badge-library-panel">
-    <qiu-card shadow="never" class="toolbar-card">
-      <label class="upload-btn">
-        <input
-          type="file"
-          accept="image/jpeg,image/png,image/gif,image/webp,image/bmp"
-          class="upload-input"
-          @change="onFileChange"
-        />
-        <qiu-button type="primary" tag="span">上传图片</qiu-button>
-      </label>
-      <span class="hint">上传后可在模板编辑器的「图片库」中选用。</span>
-    </qiu-card>
-
-    <qiu-card v-qiu-loading="loading" shadow="never">
-      <div class="lib-grid">
-        <div v-for="it in list" :key="it.id" class="lib-cell">
-          <img :src="fullUrl(it.url)" alt="" class="thumb" loading="lazy" />
-          <div class="meta" :title="it.orig_name">{{ it.orig_name || '未命名' }}</div>
-          <div class="sub">{{ formatSize(it.size) }} · {{ it.create_time }}</div>
-          <qiu-button type="danger" link size="small" @click="remove(it)">删除</qiu-button>
-        </div>
-      </div>
-      <qiu-empty v-if="!loading && !list.length" description="暂无图片" />
-      <div v-if="total > pageSize" class="pager">
-        <qiu-pagination
-          v-model:current-page="page"
-          :page-size="pageSize"
-          layout="total, prev, pager, next"
-          :total="total"
-          @current-change="load"
-        />
-      </div>
-    </qiu-card>
-
-    <qiu-dialog v-model="deleteConfirmVisible" title="删除确认" width="400px">
-      <p>确定删除「{{ deleteTarget?.orig_name || '该图片' }}」？</p>
-      <template #footer>
-        <qiu-button @click="deleteConfirmVisible = false">取消</qiu-button>
-        <qiu-button type="danger" @click="doRemove">删除</qiu-button>
-      </template>
-    </qiu-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { qiuMsg } from '../../QiuMsg'
-import { getBadgeLibraryImages, uploadBadgeLibraryImage, deleteBadgeLibraryImage } from '../api/index'
-import { resolveAssetUrl } from '../shared/assetUrl'
-
-const loading = ref(false)
-const list = ref<any[]>([])
-const total = ref(0)
-const page = ref(1)
-const pageSize = ref(40)
-const deleteConfirmVisible = ref(false)
-const deleteTarget = ref<{ id: number; orig_name?: string } | null>(null)
-
-function fullUrl(path: string) {
-  return resolveAssetUrl(path)
-}
-
-function formatSize(n: unknown) {
-  const b = Number(n) || 0
-  if (b < 1024) return `${b} B`
-  if (b < 1024 * 1024) return `${(b / 1024).toFixed(1)} KB`
-  return `${(b / 1024 / 1024).toFixed(2)} MB`
-}
-
-async function load() {
-  loading.value = true
-  try {
-    const res: any = await getBadgeLibraryImages({ page: page.value, page_size: pageSize.value })
-    list.value = res.data?.list ?? []
-    total.value = Number(res.data?.total ?? 0)
-  } catch {
-    list.value = []
-    total.value = 0
-  } finally {
-    loading.value = false
-  }
-}
-
-async function onFileChange(e: Event) {
-  const input = e.target as HTMLInputElement
-  const file = input.files?.[0]
-  input.value = ''
-  if (!file) return
-  try {
-    await uploadBadgeLibraryImage(file)
-    qiuMsg.success('已上传')
-    page.value = 1
-    await load()
-  } catch {
-    /* */
-  }
-}
-
-function remove(it: { id: number; orig_name?: string }) {
-  deleteTarget.value = it
-  deleteConfirmVisible.value = true
-}
-
-async function doRemove() {
-  const it = deleteTarget.value
-  if (!it) return
-  deleteConfirmVisible.value = false
-  try {
-    await deleteBadgeLibraryImage(Number(it.id))
-    qiuMsg.success('已删除')
-    await load()
-  } catch {
-    /* */
-  }
-}
-
-onMounted(() => load())
-
-defineExpose({ load })
-</script>
-
-<style scoped>
-.badge-library-panel .toolbar-card {
-  margin-bottom: 16px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  flex-wrap: wrap;
-}
-.upload-btn {
-  position: relative;
-  display: inline-flex;
-  cursor: pointer;
-}
-.upload-input {
-  position: absolute;
-  width: 0;
-  height: 0;
-  opacity: 0;
-  pointer-events: none;
-}
-.hint {
-  font-size: 13px;
-  color: #909399;
-}
-.lib-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-  gap: 12px;
-}
-.lib-cell {
-  border: 1px solid #ebeef5;
-  border-radius: 8px;
-  padding: 10px;
-}
-.thumb {
-  width: 100%;
-  height: 120px;
-  object-fit: contain;
-  background: #f5f7fa;
-  border-radius: 6px;
-}
-.meta {
-  font-size: 13px;
-  margin-top: 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.sub {
-  font-size: 12px;
-  color: #909399;
-  margin: 4px 0 8px;
-}
-.pager {
-  margin-top: 16px;
-  display: flex;
-  justify-content: flex-end;
-}
-</style>

package/components/QiuBadge/composables/useTableHostHeight.ts

@@ -1,53 +0,0 @@
-import { ref, watch, onUnmounted, nextTick } from 'vue'
-
-/** 测量容器高度供 qiu-table 的 `height` 使用，使表格占满剩余区域。
- * 使用 ResizeObserver（宿主为表格外层 div，非表格根节点）+ window resize，避免仅靠窗口尺寸遗漏侧栏折叠等变化。 */
-export function useTableHostHeight(minHeight = 160) {
-  const hostRef = ref<HTMLElement | null>(null)
-  const tableHeight = ref(Math.max(minHeight, 200))
-  let raf = 0
-  let ro: ResizeObserver | null = null
-  let removeWindowListener: (() => void) | null = null
-
-  const measure = () => {
-    const el = hostRef.value
-    if (!el) return
-    cancelAnimationFrame(raf)
-    raf = requestAnimationFrame(() => {
-      const h = Math.floor(el.getBoundingClientRect().height)
-      const next = Math.max(minHeight, h)
-      if (Math.abs(next - tableHeight.value) > 1) {
-        tableHeight.value = next
-      }
-    })
-  }
-
-  const cleanup = () => {
-    removeWindowListener?.()
-    removeWindowListener = null
-    ro?.disconnect()
-    ro = null
-  }
-
-  watch(
-    hostRef,
-    (el) => {
-      cleanup()
-      if (!el) return
-      nextTick(() => measure())
-      const onWinResize = () => measure()
-      window.addEventListener('resize', onWinResize, { passive: true })
-      removeWindowListener = () => window.removeEventListener('resize', onWinResize)
-      ro = new ResizeObserver(() => measure())
-      ro.observe(el)
-    },
-    { flush: 'post' }
-  )
-
-  onUnmounted(() => {
-    cleanup()
-    cancelAnimationFrame(raf)
-  })
-
-  return { hostRef, tableHeight, recalcTableHeight: measure }
-}

package/components/QiuBadge/index.ts

@@ -1,18 +0,0 @@
-/**
- * QiuBadge — 证件 / 桌签制作插件
- * 源码迁自 zhihui web-admin + shared，先落地再调。
- */
-/** 编辑器真源在 QiuCanvasKit；此入口保持兼容 */
-export { default as QiuBadgeTemplateEditor } from '../QiuCanvasKit/QiuCanvasEditor.vue'
-export { default as QiuBadgeTemplateList } from './views/BadgeTemplateListView.vue'
-export { default as QiuBadgeManage } from './views/BadgeManageView.vue'
-export { default as QiuBadgeLibrary } from './views/BadgeLibraryView.vue'
-export { default as QiuDeskLabel } from './views/DeskLabelView.vue'
-export { default as QiuDeskLabelTemplateList } from './views/DeskLabelTemplateListView.vue'
-export { default as QiuBadgeTemplateRenderer } from './shared/BadgeTemplateRenderer.vue'
-export { default as QiuBadgeImagePickerDialog } from './components/BadgeImagePickerDialog.vue'
-export { default as QiuBadgeLibraryManagerDialog } from './components/BadgeLibraryManagerDialog.vue'
-export { default as QiuBadgeLibraryPanel } from './components/BadgeLibraryPanel.vue'
-export * from './shared/badgeTemplate'
-export * from './shared/assetUrl'
-export * as QiuBadgeApi from './api/index'

package/components/QiuBadge/shared/BadgeTemplateRenderer.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-/**
- * 兼容旧名：委托 QiuCanvasRenderer
- * @author qiuye
- * @email yjk150@qq.com
- * @date 2026-08-16
- */
-import QiuCanvasRenderer from '../../QiuCanvasKit/QiuCanvasRenderer.vue'
-import type { BadgeTemplateDoc } from './badgeTemplate'
-import type { MergeContext } from '../../QiuCanvasKit/types'
-
-defineOptions({ name: 'QiuBadgeTemplateRenderer' })
-
-withDefaults(
-  defineProps<{
-    doc: BadgeTemplateDoc | null
-    mergeData?: MergeContext | Record<string, string>
-    screenScale?: number
-    enableLinks?: boolean
-  }>(),
-  { screenScale: 1, mergeData: () => ({}), enableLinks: false }
-)
-</script>
-
-<template>
-  <QiuCanvasRenderer
-    :doc="(doc as any)"
-    :merge-data="mergeData"
-    :screen-scale="screenScale"
-    :enable-links="enableLinks"
-  />
-</template>

package/components/QiuBadge/shared/assetUrl.ts

@@ -1,26 +0,0 @@
-export function resolveAssetUrl(src: string | null | undefined): string {
-  const value = String(src || '').trim()
-  if (!value) return ''
-  if (/^data:/i.test(value) || /^blob:/i.test(value)) return value
-  if (/^(https?:)?\/\//i.test(value)) {
-    try {
-      const parsed = new URL(value, window.location.origin)
-      if (parsed.pathname.startsWith('/uploads/')) {
-        // Always prefer same-origin uploads path so html2canvas/jsPDF can render images
-        // without being blocked by cross-origin resource restrictions in production.
-        return `${parsed.pathname}${parsed.search}${parsed.hash}`
-      }
-    } catch {}
-    return value
-  }
-  if (value.startsWith('/uploads/')) {
-    return value
-  }
-
-  const raw = import.meta.env.VITE_API_BASE_URL
-  const apiBase = typeof raw === 'string' ? raw.trim().replace(/\/$/, '') : ''
-  if (!apiBase) return value.startsWith('/') ? value : `/${value}`
-
-  const staticBase = apiBase.replace(/\/api$/i, '')
-  return `${staticBase}${value.startsWith('/') ? value : `/${value}`}`
-}