本仓库保留了 example/ 作为参考实现；根目录为可运行的 Vue 3 + Vite + TypeScript 工程，核心交付是可复用组件 HolographicCard。

npm install
npm run dev

构建：

npm run build

说明：已通过项目级 .npmrc 将 npm cache 固定到 ./.npm-cache，用于规避全局 cache 权限问题。

• 页面默认渲染多张 HolographicCard，每张卡片维护自己的一套资源与配置
• 上传后的资源与配置会持久化到 IndexedDB（刷新后仍存在）
• 支持 ZIP 导出/导入（合并导入：同 id 覆盖更新，不同 id 追加）

导入：

import { HolographicCard } from './components/HolographicCard'

基础用法：

<HolographicCard :flippable="true" v-model:flipped="flipped" />

• active?: boolean：是否启用指针交互（默认 true）
• theme?: 'system' | 'light' | 'dark'：仅影响 color-scheme（默认 system）
• cardWidth?: number | string：卡片宽度（默认 260）
• flippable?: boolean：是否允许点击翻转（默认 false）
• flipped?: boolean：翻转状态（默认 false，配合 v-model:flipped）
• showSticker?: boolean：是否展示左下角贴纸（默认 true）
• showSignature?: boolean：是否展示右下角签名（默认 true）
• footerText?: string | null：背面 emboss 底部文案（默认 'TechTrades © 2025'，传 null 隐藏）
• name?: string / role?: string：标题文案
• frontImageUrl? / frontCutoutUrl? / rearBackdropUrl? / wordmarkUrl? / gemstoneUrl?：图片资源 URL

• title：自定义标题区域（默认使用 name/role）