@melt-js/demo-vue3 2026.11.8 → 2026.11.10

package/README.md

@@ -2,7 +2,7 @@
 
 Vue 3 + Vite 5 的 hel 宿主（消费方）示例，消费 [`comps-vue3`](../comps-vue3)。
 
-页面使用 **vue-router（hash 模式）** 把示例拆成多个可切换的页面，顶部导航栏同时显示当前示例的简介，示例区右上角有**全屏按钮**（只放大当前示例的组件预览区，基于 `vue-fullscreen` 的 `pageOnly + teleport` 模式）。
+页面使用 **vue-router（hash 模式）** 把示例拆成多个可切换的页面，顶部导航栏同时显示当前示例的简介，示例区右上角有**下载示例**与**全屏**两个按钮（下载按钮导出一份单文件「HTML + CDN」示例，用于演示 hel 的接法；全屏按钮只放大当前示例的组件预览区，基于 `vue-fullscreen` 的 `pageOnly + teleport` 模式）。
 
 | 项 | 值 |
 | --- | --- |
@@ -63,6 +63,7 @@ Vue 3 + Vite 5 的 hel 宿主（消费方）示例，消费 [`comps-vue3`](../co
 - **hash 模式**：demo 的构建产物会通过 unpkg 上的 `dist/index.html` 打开，history 模式在那种静态文件路径下会 404。
 - 路由清单在 `src/router/index.ts`，每条路由的 `meta.title` / `meta.description` 同时驱动导航栏 tab 与下方那行简介；新增示例只要加一条路由。
 - 全屏按钮只把当前示例标记为 `data-demo-preview` 的组件预览区送进全屏，页面标题、简介、说明与页脚都留在屏幕外；全屏借用 `vue-fullscreen` 5.x 的 `pageOnly + teleport` 模式：预览区临时挂到 body、用 fixed 铺满视口，退出时还原到页面原位置，不调用浏览器原生 Fullscreen API（iframe 内也可用）。预览区右下角提供「退出全屏」浮层按钮，Esc 也可退出；切换路由时会自动退出并还原。
+- 全屏按钮左侧的「下载示例」会下载 `src/templates/hel-micro-cdn.html`（单文件示例：Vue 与 hel-micro 走 CDN，组件由 `preFetchLib` 在运行时从 unpkg 拉取），用于对外演示 / 推广 hel 的接法。示例源码用 Vite 的 `?raw` 内联进产物后以 Blob 下载，不依赖网络、也不受 `base` 影响，`file://` 下打开 demo 同样可下载；改示例只需改那个 html 文件。
 - 需要全屏的示例在组件预览区外包一层 `<DemoPreview>`；简介页没有预览区，在路由 `meta` 里标记 `fullscreen: false`，工具栏不显示全屏按钮。
 - 每个组件示例都用 `<LevaPlayground>` 包一层 leva 实验台（左侧组件 + 右侧 `libs-vue3-leva` 的 `PropsPanel`），面板值通过 `v-bind` 实时写回组件；不再有单独的「属性面板」tab。`LevaPlayground` 支持 `presets` / `listeners` / `slotHtml` / `stage-style`。
 
@@ -70,10 +71,11 @@ Vue 3 + Vite 5 的 hel 宿主（消费方）示例，消费 [`comps-vue3`](../co
 
 ```
 demo-vue3/src
-├── App.vue                   # demo 外壳：导航栏 + 示例舞台（含全屏按钮）+ router-view
+├── App.vue                   # demo 外壳：导航栏 + 示例舞台（下载示例 / 全屏按钮）+ router-view
 ├── components/
 │   ├── DemoNavbar.vue        # 顶部导航栏：示例 tab + 当前示例简介
 │   ├── DemoPreview.vue       # 组件预览区：全屏目标 + 「退出全屏」浮层按钮
+│   ├── DownloadExampleButton.vue # 下载 HTML + CDN 示例按钮（全屏按钮左侧）
 │   ├── LevaPlayground.vue    # 单个示例的 leva 实验台：组件 + schema → PropsPlayground
 │   ├── MatrixRain.vue        # 赛博朋克页 / 终端登录页的矩阵雨背景（页面氛围，不属于组件）
 │   └── ScreenfullButton.vue  # 示例区全屏按钮
@@ -83,7 +85,9 @@ demo-vue3/src
 │   ├── app.ts                # demo 展示信息（名称 / 端口 / unpkg 入口）
 │   └── remote.ts             # 远程组件地址与 preFetchLib（Promise 复用）
 ├── router/index.ts           # 示例路由（hash 模式）
-├── styles/demo-shell.css     # 外壳样式（导航栏 / 舞台 / 全屏 / 通用排版）
+├── styles/demo-shell.css     # 外壳样式（导航栏 / 舞台 / 按钮 / 全屏 / 通用排版）
+├── templates/
+│   └── hel-micro-cdn.html    # 「下载示例」导出的单文件 HTML + CDN 示例源码
 ├── style.css                 # 变量与全局重置
 └── views/                    # OverviewView / HostView / RemoteView / CircularMenuView / MagneticButtonView / SpotlightButtonView / GlowBorderView / TypewriterView / TiltCardView / FloatingLabelInputView / PasswordInputView / ExpandSearchView / CyberInputView / CorgiInputView / GridLoadingView / GooeyBallsLoadingView / DnaLoadingView / NeonRingLoadingView / GearLoadingView / VortexLoadingView / WaterBallLoadingView / HourglassLoadingView / CubeWaveLoadingView / JellyLoadingView / DominoLoadingView / SlideAuthPanelView / TerminalAuthView / WheelMenuButtonView / PhotoSphereView / WarpStarfieldView / ChinaRouteMapView / SplitCodePreviewView / BookFlipView / MinecraftChestView / FilmRollView / RopeGalleryView / CompareSliderView / PosterCollageView / LiftCardView
 ```

package/dist/assets/BilibiliBannerView-Dwbb2MOU.js

@@ -0,0 +1,2 @@
+import{_ as g,a as v}from"./_plugin-vue_export-helper-DF7_SnVz.js";import{L as _}from"./LevaPlayground-B6ewqrVh.js";import{d as f,c as o,b as e,t as b,F as h,r as w,h as a,u as i,e as n,w as B,n as y,i as k,H as x,o as d,J as E}from"./index-BCTasth8.js";const C=[{name:"theme",type:"'autumn-1' | 'autumn-2' | 'autumn-3' | 'autumn-4' | 'autumn-5' | 'spring-1' | 'spring-2' | 'spring-3' | 'spring-4' | 'spring-5' | 'spring-6' | 'summer-1' | 'summer-2' | 'summer-3' | 'summer-4' | 'summer-5' | 'summer-6' | 'summer-7' | 'winter-1' | 'winter-2' | 'winter-3' | 'winter-4' | 'winter-5'",description:"banner 主题，对应原仓库的 23 套节日 banner",default:'"spring-1"',required:!1,version:"",isEvent:!1,bindable:!0,value:"spring-1",control:{options:{"autumn-1":"autumn-1","autumn-2":"autumn-2","autumn-3":"autumn-3","autumn-4":"autumn-4","autumn-5":"autumn-5","spring-1":"spring-1","spring-2":"spring-2","spring-3":"spring-3","spring-4":"spring-4","spring-5":"spring-5","spring-6":"spring-6","summer-1":"summer-1","summer-2":"summer-2","summer-3":"summer-3","summer-4":"summer-4","summer-5":"summer-5","summer-6":"summer-6","summer-7":"summer-7","winter-1":"winter-1","winter-2":"winter-2","winter-3":"winter-3","winter-4":"winter-4","winter-5":"winter-5"}}},{name:"height",type:"number",description:"banner 高度，单位 px（原版固定 150）",default:"150",required:!1,version:"",isEvent:!1,bindable:!0,value:150,control:{min:90,max:320,step:2}},{name:"logo",type:"boolean",description:"是否显示左上角的 bilibili logo",default:"true",required:!1,version:"",isEvent:!1,bindable:!0,value:!0},{name:"background",type:"string",description:"没有图层铺满时的底色",default:'"#f9f9f9"',required:!1,version:"",isEvent:!1,bindable:!0,value:"#f9f9f9"}],V={class:"demo-page"},q={class:"bb-demo"},L={class:"bb-demo__head"},S={class:"bb-demo__tag"},N={class:"bb-demo__themes"},F=["onClick"],H={class:"bb-demo__stage"},T={class:"bb-demo__row"},$={class:"bb-demo__cell"},z={class:"bb-demo__cell"},D=f({__name:"BilibiliBannerView",setup(I){const t=y("BilibiliBanner"),m=[{value:"spring-1",label:"春日 1"},{value:"spring-2",label:"春日 2"},{value:"spring-3",label:"春日 3"},{value:"spring-4",label:"春日 4"},{value:"spring-5",label:"春日 5"},{value:"spring-6",label:"春日 6"},{value:"summer-1",label:"夏日 1"},{value:"summer-2",label:"夏日 2"},{value:"summer-3",label:"夏日 3"},{value:"summer-4",label:"夏日 4"},{value:"summer-5",label:"夏日 5"},{value:"summer-6",label:"夏日 6"},{value:"summer-7",label:"夏日 7"},{value:"autumn-1",label:"秋日 1"},{value:"autumn-2",label:"秋日 2"},{value:"autumn-3",label:"秋日 3"},{value:"autumn-4",label:"秋日 4"},{value:"autumn-5",label:"秋日 5"},{value:"winter-1",label:"冬日 1"},{value:"winter-2",label:"冬日 2"},{value:"winter-3",label:"冬日 3"},{value:"winter-4",label:"冬日 4"},{value:"winter-5",label:"冬日 5"}],u=k("spring-1"),p=x(()=>{var r,l;return(l=(r=m.find(s=>s.value===u.value))==null?void 0:r.label)!=null?l:""}),c={display:"block",height:"210px",padding:"12px",background:"#eef1f5"};return(r,l)=>(d(),o("div",V,[l[4]||(l[4]=e("header",null,[e("p",{class:"demo-page__eyebrow"},"远程组件"),e("h1",{class:"demo-page__title"},"comps-vue3 · BilibiliBanner"),e("p",{class:"demo-page__lead"}," 从 bilibili-banner-master 的 Vue 版本迁移来的 B 站节日横幅：23 套主题，每套由多层图片 / 视频叠成， 每层按各自的 bench 系数跟手，指针在横幅上左右移动就会错位出视差；触摸端点一下左上角 logo 复位。 图层资源随 comps-vue3 的 public/bilibili 一起下发，远程加载时会自动指到远端包的地址。 ")],-1)),e("section",q,[e("div",L,[l[0]||(l[0]=e("h2",{class:"demo-page__section-title"},"主题",-1)),e("code",S,b(p.value),1)]),e("div",N,[(d(),o(h,null,w(m,s=>e("button",{key:s.value,type:"button",class:E(["bb-demo__theme",{"is-active":s.value===u.value}]),onClick:J=>u.value=s.value},b(s.label),11,F)),64))]),e("div",H,[a(i(t),{theme:u.value,height:180},null,8,["theme"])]),l[3]||(l[3]=e("p",{class:"bb-demo__hint"}," 把指针放到横幅上左右移动（或横向滑动）试试；换成主题时图层会重新铺开。 ",-1)),e("div",T,[e("div",$,[a(i(t),{theme:"winter-1",height:120,logo:!1}),l[1]||(l[1]=e("p",null,[e("code",null,':logo="false"'),n(" 去掉左上角 logo，单独看图层")],-1))]),e("div",z,[a(i(t),{theme:"summer-5",height:120,background:"#101820"}),l[2]||(l[2]=e("p",null,[e("code",null,"background"),n(" 是图层没铺满时的底色")],-1))])])]),a(g,{class:"bb-preview"},{default:B(()=>[a(_,{name:"BilibiliBanner",component:i(t),schema:i(C),"stage-style":c},null,8,["component","schema"])]),_:1}),l[5]||(l[5]=e("p",{class:"demo-note"},[e("span",null,[n(" 属性面板里 "),e("code",null,"theme"),n(" 是 23 套主题的下拉，"),e("code",null,"height"),n(" 是横幅高度， "),e("code",null,"logo"),n(" 控制左上角 logo，"),e("code",null,"background"),n(" 是兜底底色； 远程包会把 "),e("code",null,"public/bilibili/<theme>/"),n(" 里的图层按绝对地址加载。 ")])],-1))]))}}),A=v(D,[["__scopeId","data-v-37501e4b"]]);export{A as default};
+//# sourceMappingURL=BilibiliBannerView-Dwbb2MOU.js.map

package/dist/assets/{BilibiliBannerView-CDLH7Krl.js.map → BilibiliBannerView-Dwbb2MOU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"BilibiliBannerView-CDLH7Krl.js","sources":["../../src/views/BilibiliBannerView.vue"],"sourcesContent":["<template>\n  <div class=\"demo-page\">\n    <header>\n      <p class=\"demo-page__eyebrow\">远程组件</p>\n      <h1 class=\"demo-page__title\">comps-vue3 · BilibiliBanner</h1>\n      <p class=\"demo-page__lead\">\n        从 bilibili-banner-master 的 Vue 版本迁移来的 B 站节日横幅：23 套主题，每套由多层图片 / 视频叠成，\n        每层按各自的 bench 系数跟手，指针在横幅上左右移动就会错位出视差；触摸端点一下左上角 logo 复位。\n        图层资源随 comps-vue3 的 public/bilibili 一起下发，远程加载时会自动指到远端包的地址。\n      </p>\n    </header>\n\n    <section class=\"bb-demo\">\n      <div class=\"bb-demo__head\">\n        <h2 class=\"demo-page__section-title\">主题</h2>\n        <code class=\"bb-demo__tag\">{{ currentLabel }}</code>\n      </div>\n\n      <div class=\"bb-demo__themes\">\n        <button\n          v-for=\"item in THEMES\"\n          :key=\"item.value\"\n          type=\"button\"\n          class=\"bb-demo__theme\"\n          :class=\"{ 'is-active': item.value === theme }\"\n          @click=\"theme = item.value\"\n        >\n          {{ item.label }}\n        </button>\n      </div>\n\n      <div class=\"bb-demo__stage\">\n        <BilibiliBanner :theme=\"theme\" :height=\"180\" />\n      </div>\n      <p class=\"bb-demo__hint\">\n        把指针放到横幅上左右移动（或横向滑动）试试；换成主题时图层会重新铺开。\n      </p>\n\n      <div class=\"bb-demo__row\">\n        <div class=\"bb-demo__cell\">\n          <BilibiliBanner theme=\"winter-1\" :height=\"120\" :logo=\"false\" />\n          <p><code>:logo=\"false\"</code> 去掉左上角 logo，单独看图层</p>\n        </div>\n        <div class=\"bb-demo__cell\">\n          <BilibiliBanner theme=\"summer-5\" :height=\"120\" background=\"#101820\" />\n          <p><code>background</code> 是图层没铺满时的底色</p>\n        </div>\n      </div>\n    </section>\n\n    <DemoPreview class=\"bb-preview\">\n      <LevaPlayground\n        name=\"BilibiliBanner\"\n        :component=\"BilibiliBanner\"\n        :schema=\"BilibiliBannerSchema\"\n        :stage-style=\"stageStyle\"\n      />\n    </DemoPreview>\n\n    <p class=\"demo-note\">\n      <span>\n        属性面板里 <code>theme</code> 是 23 套主题的下拉，<code>height</code> 是横幅高度，\n        <code>logo</code> 控制左上角 logo，<code>background</code> 是兜底底色；\n        远程包会把 <code>public/bilibili/&lt;theme&gt;/</code> 里的图层按绝对地址加载。\n      </span>\n    </p>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport BilibiliBannerSchema from '@melt-js/comps-vue3/src/components/BilibiliBanner/propsSchema.json'\nimport DemoPreview from '../components/DemoPreview.vue'\nimport LevaPlayground from '../components/LevaPlayground.vue'\nimport { remoteComponent } from '../configs/remote'\n\nconst BilibiliBanner = remoteComponent('BilibiliBanner')\n\n/** 与原仓库 inst 组件一一对应的主题名，顺序按春 → 夏 → 秋 → 冬 */\nconst THEMES = [\n  { value: 'spring-1', label: '春日 1' },\n  { value: 'spring-2', label: '春日 2' },\n  { value: 'spring-3', label: '春日 3' },\n  { value: 'spring-4', label: '春日 4' },\n  { value: 'spring-5', label: '春日 5' },\n  { value: 'spring-6', label: '春日 6' },\n  { value: 'summer-1', label: '夏日 1' },\n  { value: 'summer-2', label: '夏日 2' },\n  { value: 'summer-3', label: '夏日 3' },\n  { value: 'summer-4', label: '夏日 4' },\n  { value: 'summer-5', label: '夏日 5' },\n  { value: 'summer-6', label: '夏日 6' },\n  { value: 'summer-7', label: '夏日 7' },\n  { value: 'autumn-1', label: '秋日 1' },\n  { value: 'autumn-2', label: '秋日 2' },\n  { value: 'autumn-3', label: '秋日 3' },\n  { value: 'autumn-4', label: '秋日 4' },\n  { value: 'autumn-5', label: '秋日 5' },\n  { value: 'winter-1', label: '冬日 1' },\n  { value: 'winter-2', label: '冬日 2' },\n  { value: 'winter-3', label: '冬日 3' },\n  { value: 'winter-4', label: '冬日 4' },\n  { value: 'winter-5', label: '冬日 5' },\n] as const\n\ntype BannerTheme = (typeof THEMES)[number]['value']\n\nconst theme = ref<BannerTheme>('spring-1')\nconst currentLabel = computed(() => THEMES.find((item) => item.value === theme.value)?.label ?? '')\n\nconst stageStyle = {\n  display: 'block',\n  height: '210px',\n  padding: '12px',\n  background: '#eef1f5',\n}\n</script>\n\n<style scoped>\n.bb-demo {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.bb-demo__head {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px 12px;\n  align-items: baseline;\n  justify-content: space-between;\n}\n\n.bb-demo__head .demo-page__section-title {\n  margin: 0;\n}\n\n.bb-demo__tag {\n  padding: 2px 8px;\n  border-radius: 999px;\n  background: var(--demo-accent-soft);\n  color: var(--demo-accent);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.bb-demo__themes {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.bb-demo__theme {\n  padding: 5px 12px;\n  border: 1px solid var(--demo-border);\n  border-radius: 999px;\n  background: transparent;\n  color: var(--demo-fg);\n  font-size: 12px;\n  cursor: pointer;\n  transition: color 0.2s, border-color 0.2s, background 0.2s;\n}\n\n.bb-demo__theme:hover {\n  border-color: var(--demo-accent);\n  color: var(--demo-accent);\n}\n\n.bb-demo__theme.is-active {\n  border-color: var(--demo-accent);\n  background: var(--demo-accent);\n  color: #fff;\n}\n\n.bb-demo__stage {\n  overflow: hidden;\n  border-radius: 16px;\n  background: #f9f9f9;\n  box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.55);\n}\n\n.bb-demo__hint {\n  margin: 0;\n  color: var(--demo-muted);\n  font-size: 13px;\n}\n\n.bb-demo__row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  margin-top: 6px;\n}\n\n.bb-demo__cell {\n  flex: 1 1 320px;\n  min-width: 260px;\n}\n\n.bb-demo__cell > :first-child {\n  overflow: hidden;\n  border-radius: 14px;\n}\n\n.bb-demo__cell p {\n  margin: 8px 0 0;\n  color: var(--demo-muted);\n  font-size: 12px;\n}\n</style>\n"],"names":["BilibiliBanner","remoteComponent","THEMES","theme","ref","currentLabel","computed","_b","_a","item","stageStyle","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_cache","_hoisted_4","_toDisplayString","_hoisted_5","_Fragment","_renderList","$event","_hoisted_6","_hoisted_7","_createVNode","_unref","_hoisted_8","_hoisted_9","_hoisted_10","DemoPreview","LevaPlayground","BilibiliBannerSchema"],"mappings":"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"}
+{"version":3,"file":"BilibiliBannerView-Dwbb2MOU.js","sources":["../../src/views/BilibiliBannerView.vue"],"sourcesContent":["<template>\n  <div class=\"demo-page\">\n    <header>\n      <p class=\"demo-page__eyebrow\">远程组件</p>\n      <h1 class=\"demo-page__title\">comps-vue3 · BilibiliBanner</h1>\n      <p class=\"demo-page__lead\">\n        从 bilibili-banner-master 的 Vue 版本迁移来的 B 站节日横幅：23 套主题，每套由多层图片 / 视频叠成，\n        每层按各自的 bench 系数跟手，指针在横幅上左右移动就会错位出视差；触摸端点一下左上角 logo 复位。\n        图层资源随 comps-vue3 的 public/bilibili 一起下发，远程加载时会自动指到远端包的地址。\n      </p>\n    </header>\n\n    <section class=\"bb-demo\">\n      <div class=\"bb-demo__head\">\n        <h2 class=\"demo-page__section-title\">主题</h2>\n        <code class=\"bb-demo__tag\">{{ currentLabel }}</code>\n      </div>\n\n      <div class=\"bb-demo__themes\">\n        <button\n          v-for=\"item in THEMES\"\n          :key=\"item.value\"\n          type=\"button\"\n          class=\"bb-demo__theme\"\n          :class=\"{ 'is-active': item.value === theme }\"\n          @click=\"theme = item.value\"\n        >\n          {{ item.label }}\n        </button>\n      </div>\n\n      <div class=\"bb-demo__stage\">\n        <BilibiliBanner :theme=\"theme\" :height=\"180\" />\n      </div>\n      <p class=\"bb-demo__hint\">\n        把指针放到横幅上左右移动（或横向滑动）试试；换成主题时图层会重新铺开。\n      </p>\n\n      <div class=\"bb-demo__row\">\n        <div class=\"bb-demo__cell\">\n          <BilibiliBanner theme=\"winter-1\" :height=\"120\" :logo=\"false\" />\n          <p><code>:logo=\"false\"</code> 去掉左上角 logo，单独看图层</p>\n        </div>\n        <div class=\"bb-demo__cell\">\n          <BilibiliBanner theme=\"summer-5\" :height=\"120\" background=\"#101820\" />\n          <p><code>background</code> 是图层没铺满时的底色</p>\n        </div>\n      </div>\n    </section>\n\n    <DemoPreview class=\"bb-preview\">\n      <LevaPlayground\n        name=\"BilibiliBanner\"\n        :component=\"BilibiliBanner\"\n        :schema=\"BilibiliBannerSchema\"\n        :stage-style=\"stageStyle\"\n      />\n    </DemoPreview>\n\n    <p class=\"demo-note\">\n      <span>\n        属性面板里 <code>theme</code> 是 23 套主题的下拉，<code>height</code> 是横幅高度，\n        <code>logo</code> 控制左上角 logo，<code>background</code> 是兜底底色；\n        远程包会把 <code>public/bilibili/&lt;theme&gt;/</code> 里的图层按绝对地址加载。\n      </span>\n    </p>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport BilibiliBannerSchema from '@melt-js/comps-vue3/src/components/BilibiliBanner/propsSchema.json'\nimport DemoPreview from '../components/DemoPreview.vue'\nimport LevaPlayground from '../components/LevaPlayground.vue'\nimport { remoteComponent } from '../configs/remote'\n\nconst BilibiliBanner = remoteComponent('BilibiliBanner')\n\n/** 与原仓库 inst 组件一一对应的主题名，顺序按春 → 夏 → 秋 → 冬 */\nconst THEMES = [\n  { value: 'spring-1', label: '春日 1' },\n  { value: 'spring-2', label: '春日 2' },\n  { value: 'spring-3', label: '春日 3' },\n  { value: 'spring-4', label: '春日 4' },\n  { value: 'spring-5', label: '春日 5' },\n  { value: 'spring-6', label: '春日 6' },\n  { value: 'summer-1', label: '夏日 1' },\n  { value: 'summer-2', label: '夏日 2' },\n  { value: 'summer-3', label: '夏日 3' },\n  { value: 'summer-4', label: '夏日 4' },\n  { value: 'summer-5', label: '夏日 5' },\n  { value: 'summer-6', label: '夏日 6' },\n  { value: 'summer-7', label: '夏日 7' },\n  { value: 'autumn-1', label: '秋日 1' },\n  { value: 'autumn-2', label: '秋日 2' },\n  { value: 'autumn-3', label: '秋日 3' },\n  { value: 'autumn-4', label: '秋日 4' },\n  { value: 'autumn-5', label: '秋日 5' },\n  { value: 'winter-1', label: '冬日 1' },\n  { value: 'winter-2', label: '冬日 2' },\n  { value: 'winter-3', label: '冬日 3' },\n  { value: 'winter-4', label: '冬日 4' },\n  { value: 'winter-5', label: '冬日 5' },\n] as const\n\ntype BannerTheme = (typeof THEMES)[number]['value']\n\nconst theme = ref<BannerTheme>('spring-1')\nconst currentLabel = computed(() => THEMES.find((item) => item.value === theme.value)?.label ?? '')\n\nconst stageStyle = {\n  display: 'block',\n  height: '210px',\n  padding: '12px',\n  background: '#eef1f5',\n}\n</script>\n\n<style scoped>\n.bb-demo {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.bb-demo__head {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px 12px;\n  align-items: baseline;\n  justify-content: space-between;\n}\n\n.bb-demo__head .demo-page__section-title {\n  margin: 0;\n}\n\n.bb-demo__tag {\n  padding: 2px 8px;\n  border-radius: 999px;\n  background: var(--demo-accent-soft);\n  color: var(--demo-accent);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.bb-demo__themes {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.bb-demo__theme {\n  padding: 5px 12px;\n  border: 1px solid var(--demo-border);\n  border-radius: 999px;\n  background: transparent;\n  color: var(--demo-fg);\n  font-size: 12px;\n  cursor: pointer;\n  transition: color 0.2s, border-color 0.2s, background 0.2s;\n}\n\n.bb-demo__theme:hover {\n  border-color: var(--demo-accent);\n  color: var(--demo-accent);\n}\n\n.bb-demo__theme.is-active {\n  border-color: var(--demo-accent);\n  background: var(--demo-accent);\n  color: #fff;\n}\n\n.bb-demo__stage {\n  overflow: hidden;\n  border-radius: 16px;\n  background: #f9f9f9;\n  box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.55);\n}\n\n.bb-demo__hint {\n  margin: 0;\n  color: var(--demo-muted);\n  font-size: 13px;\n}\n\n.bb-demo__row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  margin-top: 6px;\n}\n\n.bb-demo__cell {\n  flex: 1 1 320px;\n  min-width: 260px;\n}\n\n.bb-demo__cell > :first-child {\n  overflow: hidden;\n  border-radius: 14px;\n}\n\n.bb-demo__cell p {\n  margin: 8px 0 0;\n  color: var(--demo-muted);\n  font-size: 12px;\n}\n</style>\n"],"names":["BilibiliBanner","remoteComponent","THEMES","theme","ref","currentLabel","computed","_b","_a","item","stageStyle","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_cache","_hoisted_4","_toDisplayString","_hoisted_5","_Fragment","_renderList","$event","_hoisted_6","_hoisted_7","_createVNode","_unref","_hoisted_8","_hoisted_9","_hoisted_10","DemoPreview","LevaPlayground","BilibiliBannerSchema"],"mappings":"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"}

package/dist/assets/{BookFlipView-Dej1lwhJ.js → BookFlipView-BNZWBDkl.js}

@@ -1,15 +1,15 @@
-import{_ as x,a as w}from"./_plugin-vue_export-helper-BbhRsZUO.js";import{L as E}from"./LevaPlayground-ChwSFC5s.js";import{d as V,f as q,g as e,m as o,t as d,A as n,u as a,l as F,D as B,H as C,b as _,c as S,o as $}from"./index-CthyPCf3.js";import"./loadApp-BA8EV_l7.js";const I=[{name:"pages",type:"() => { front: Face; back: Face }[]",description:"内页：每张叶子有 front / back 两面（title / text / image）",default:"[]",required:!1,version:"",isEvent:!1,bindable:!1},{name:"cover",type:"() => Face",description:"首封面（合上时看到的那一面）",default:`{
+import{_ as x,a as w}from"./_plugin-vue_export-helper-DF7_SnVz.js";import{L as E}from"./LevaPlayground-B6ewqrVh.js";import{d as V,c as q,b as e,e as o,t as d,h as n,u as a,w as F,j as B,n as C,i as _,H as S,o as $}from"./index-BCTasth8.js";const I=[{name:"pages",type:"() => { front: Face; back: Face }[]",description:"内页：每张叶子有 front / back 两面（title / text / image）",default:"[]",required:!1,version:"",isEvent:!1,bindable:!1},{name:"cover",type:"() => Face",description:"首封面（合上时看到的那一面）",default:`{
   title: '封面',
   text: ''
 }`,required:!1,version:"",isEvent:!1,bindable:!1},{name:"endCover",type:"() => Face",description:"尾封面（翻到最后看到的那一面）",default:`{
   title: '',
   text: ''
-}`,required:!1,version:"",isEvent:!1,bindable:!1},{name:"width",type:"number",description:"书页宽度，单位 px（单页宽 = 一半）",default:"560",required:!1,version:"",isEvent:!1,bindable:!0,value:560,control:{min:360,max:900,step:20}},{name:"height",type:"number",description:"书页高度，单位 px",default:"380",required:!1,version:"",isEvent:!1,bindable:!0,value:380,control:{min:240,max:560,step:20}},{name:"duration",type:"number",description:"一次翻页的时长，单位毫秒",default:"1200",required:!1,version:"",isEvent:!1,bindable:!0,value:1200,control:{min:300,max:3e3,step:100}},{name:"paper",type:"string",description:"纸色",default:'"#e9e6c4"',required:!1,version:"",isEvent:!1,bindable:!0,value:"#e9e6c4"},{name:"ink",type:"string",description:"正文颜色",default:'"#3f3b2f"',required:!1,version:"",isEvent:!1,bindable:!0,value:"#3f3b2f"},{name:"modelValue",type:"number",description:"当前翻到第几张（可用 v-model 双向绑定）",default:"0",required:!1,version:"",isEvent:!1,bindable:!0,value:0,control:{min:0,max:12,step:1}},{name:"controls",type:"boolean",description:"是否显示上一页 / 下一页按钮和页码",default:"true",required:!1,version:"",isEvent:!1,bindable:!0,value:!0},{name:"hint",type:"boolean",description:"是否显示底部操作提示",default:"true",required:!1,version:"",isEvent:!1,bindable:!0,value:!0},{name:"autoplay",type:"boolean",description:"是否自动往后翻（翻到最后一页停下）",default:"false",required:!1,version:"",isEvent:!1,bindable:!0,value:!1},{name:"autoplayInterval",type:"number",description:"自动翻页的间隔，单位毫秒",default:"2600",required:!1,version:"",isEvent:!1,bindable:!0,value:2600,control:{min:800,max:6e3,step:200}}],T={class:"demo-page"},N={class:"book-demo"},A={class:"book-demo__head"},D={class:"book-demo__tag"},G={class:"book-demo__stage"},L={class:"book-demo__hint"},P={class:"book-demo__row"},z={class:"book-demo__cell"},U={class:"book-demo__stage book-demo__stage--small"},j={class:"book-demo__cell"},H={class:"book-demo__stage book-demo__stage--small"},M=V({__name:"BookFlipView",setup(O){const i=C("BookFlip"),v=[["#f97316","#ec4899"],["#22d3ee","#3b82f6"],["#a855f7","#6366f1"],["#34d399","#14b8a6"],["#fbbf24","#f97316"],["#f472b6","#a855f7"],["#38bdf8","#818cf8"],["#4ade80","#22d3ee"]];function r(s){const[t,m]=v[s%v.length],k=`<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400">
+}`,required:!1,version:"",isEvent:!1,bindable:!1},{name:"width",type:"number",description:"书页宽度，单位 px（单页宽 = 一半）",default:"560",required:!1,version:"",isEvent:!1,bindable:!0,value:560,control:{min:360,max:900,step:20}},{name:"height",type:"number",description:"书页高度，单位 px",default:"380",required:!1,version:"",isEvent:!1,bindable:!0,value:380,control:{min:240,max:560,step:20}},{name:"duration",type:"number",description:"一次翻页的时长，单位毫秒",default:"1200",required:!1,version:"",isEvent:!1,bindable:!0,value:1200,control:{min:300,max:3e3,step:100}},{name:"paper",type:"string",description:"纸色",default:'"#e9e6c4"',required:!1,version:"",isEvent:!1,bindable:!0,value:"#e9e6c4"},{name:"ink",type:"string",description:"正文颜色",default:'"#3f3b2f"',required:!1,version:"",isEvent:!1,bindable:!0,value:"#3f3b2f"},{name:"modelValue",type:"number",description:"当前翻到第几张（可用 v-model 双向绑定）",default:"0",required:!1,version:"",isEvent:!1,bindable:!0,value:0,control:{min:0,max:12,step:1}},{name:"controls",type:"boolean",description:"是否显示上一页 / 下一页按钮和页码",default:"true",required:!1,version:"",isEvent:!1,bindable:!0,value:!0},{name:"hint",type:"boolean",description:"是否显示底部操作提示",default:"true",required:!1,version:"",isEvent:!1,bindable:!0,value:!0},{name:"autoplay",type:"boolean",description:"是否自动往后翻（翻到最后一页停下）",default:"false",required:!1,version:"",isEvent:!1,bindable:!0,value:!1},{name:"autoplayInterval",type:"number",description:"自动翻页的间隔，单位毫秒",default:"2600",required:!1,version:"",isEvent:!1,bindable:!0,value:2600,control:{min:800,max:6e3,step:200}}],T={class:"demo-page"},N={class:"book-demo"},G={class:"book-demo__head"},L={class:"book-demo__tag"},P={class:"book-demo__stage"},j={class:"book-demo__hint"},z={class:"book-demo__row"},A={class:"book-demo__cell"},D={class:"book-demo__stage book-demo__stage--small"},U={class:"book-demo__cell"},H={class:"book-demo__stage book-demo__stage--small"},M=V({__name:"BookFlipView",setup(O){const i=C("BookFlip"),v=[["#f97316","#ec4899"],["#22d3ee","#3b82f6"],["#a855f7","#6366f1"],["#34d399","#14b8a6"],["#fbbf24","#f97316"],["#f472b6","#a855f7"],["#38bdf8","#818cf8"],["#4ade80","#22d3ee"]];function r(s){const[t,m]=v[s%v.length],k=`<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400">
     <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
       <stop offset="0" stop-color="${t}"/><stop offset="1" stop-color="${m}"/>
     </linearGradient></defs>
     <rect width="300" height="400" fill="url(#g)"/>
     <text x="150" y="222" font-family="sans-serif" font-size="120" font-weight="700"
       fill="rgba(255,255,255,0.82)" text-anchor="middle">${s}</text>
-  </svg>`;return`data:image/svg+xml;utf8,${encodeURIComponent(k)}`}const f=["第一页：组件从一整页 demo 里被拆出来，带上自己的 props、事件和样式，能独立站在任何一个 Vue 3 项目里。","第二页：所有视觉常量都变成了 props —— 尺寸、颜色、时长、开关，在属性面板里拖一拖就能看到差别。","第三页：交互逻辑重新组织过：拖动、点击、缩放这些手势用 Pointer Events 统一处理，鼠标和触摸是同一套。","第四页：动画尽量交给 CSS 和 rAF，Vue 只负责状态；每帧只写必要的 DOM，避免把响应式拖进动画循环里。"],l=f.map((s,t)=>({front:{title:`第 ${t*2+1} 面`,text:s,image:r(t*2+1)},back:{title:`第 ${t*2+2} 面`,text:f[(t+1)%f.length],image:r(t*2+2)}})),c={title:"『组件提取笔记』",text:"",image:r(0)},p={title:"",text:"",image:r(7)},u=_(0),b=S(()=>l.length+2),g=_("（还没翻过）"),h={display:"flex",alignItems:"center",justifyContent:"center",height:"560px",padding:"24px",background:"#4f4e68"};function y(s){g.value=`翻到第 ${s} 张`}return(s,t)=>($(),q("div",T,[t[8]||(t[8]=e("header",null,[e("p",{class:"demo-page__eyebrow"},"远程组件"),e("h1",{class:"demo-page__title"},"comps-vue3 · BookFlip"),e("p",{class:"demo-page__lead"},[o(" 来自 video-code 的「书本翻页」：一叠对开页贴在书脊右侧，绕左边缘 "),e("code",null,"rotateY(-180deg)"),o(" 翻过去，正面转走背面转来，每面都有标题、正文和底图。原 demo 用 "),e("code",null,"z-index"),o(" + "),e("code",null,"visibility"),o(" 关键帧处理正反面切换；组件里改用 "),e("code",null,"backface-visibility: hidden"),o("， 逻辑简单很多，另外补了上一页 / 下一页、页码、键盘左右键和自动播放。 ")])],-1)),e("section",N,[e("div",A,[t[1]||(t[1]=e("h2",{class:"demo-page__section-title"},"点右半页翻过去",-1)),e("code",D,d(u.value)+" / "+d(b.value),1)]),t[7]||(t[7]=e("p",{class:"demo-card__text"}," 下面这本是 4 张内页（8 个面）加首尾封面：点右半页向前翻，点左边已经翻过的页可以翻回来； 底部按钮和 ← → 键也能翻。底图是用内联 SVG 生成的渐变，不依赖外网。 ",-1)),e("div",G,[n(a(i),{modelValue:u.value,"onUpdate:modelValue":t[0]||(t[0]=m=>u.value=m),pages:a(l),cover:c,"end-cover":p,width:620,height:400,duration:1e3,onChange:y},null,8,["modelValue","pages"])]),e("p",L,[t[2]||(t[2]=o(" 当前第 ",-1)),e("code",null,d(u.value),1),t[3]||(t[3]=o(" 张（共 ",-1)),e("code",null,d(b.value),1),t[4]||(t[4]=o(" 张）· 最近一次翻页： ",-1)),e("code",null,d(g.value),1)]),e("div",P,[e("div",z,[e("div",U,[n(a(i),{pages:a(l).slice(0,2),cover:c,"end-cover":p,width:360,height:240,duration:700,hint:!1,paper:"#f3ecdc"},null,8,["pages"])]),t[5]||(t[5]=e("p",null,[o("小尺寸 + 米色纸（"),e("code",null,"width"),o(" / "),e("code",null,"height"),o(" / "),e("code",null,"paper"),o("）")],-1))]),e("div",j,[e("div",H,[n(a(i),{pages:a(l).slice(0,3),cover:c,"end-cover":p,width:360,height:240,duration:800,autoplay:!0,"autoplay-interval":1800,controls:!1,hint:!1},null,8,["pages"])]),t[6]||(t[6]=e("p",null,[o("自动播放（"),e("code",null,"autoplay"),o("，翻到最后一页停下，无按钮）")],-1))])])]),n(x,{class:"book-preview"},{default:F(()=>[n(E,{name:"BookFlip",component:a(i),schema:a(I),presets:{pages:a(l),cover:c,endCover:p,width:560,height:380},"stage-style":h},null,8,["component","schema","presets"])]),_:1}),t[9]||(t[9]=B('<p class="demo-note" data-v-c89c9df1><span data-v-c89c9df1> 面板里 <code data-v-c89c9df1>width</code> / <code data-v-c89c9df1>height</code> 是书页尺寸，<code data-v-c89c9df1>duration</code> 是一次翻页的毫秒数， <code data-v-c89c9df1>paper</code> / <code data-v-c89c9df1>ink</code> 是纸色和正文颜色，<code data-v-c89c9df1>modelValue</code> 是当前翻到第几张 （和 <code data-v-c89c9df1>v-model</code> 同步），<code data-v-c89c9df1>controls</code> / <code data-v-c89c9df1>hint</code> 控制按钮和提示， <code data-v-c89c9df1>autoplay</code> + <code data-v-c89c9df1>autoplayInterval</code> 是自动翻页。内页数组用 <code data-v-c89c9df1>pages</code> 传入（每张有 front / back 两面）。 </span></p>',1))]))}}),K=w(M,[["__scopeId","data-v-c89c9df1"]]);export{K as default};
-//# sourceMappingURL=BookFlipView-Dej1lwhJ.js.map
+  </svg>`;return`data:image/svg+xml;utf8,${encodeURIComponent(k)}`}const f=["第一页：组件从一整页 demo 里被拆出来，带上自己的 props、事件和样式，能独立站在任何一个 Vue 3 项目里。","第二页：所有视觉常量都变成了 props —— 尺寸、颜色、时长、开关，在属性面板里拖一拖就能看到差别。","第三页：交互逻辑重新组织过：拖动、点击、缩放这些手势用 Pointer Events 统一处理，鼠标和触摸是同一套。","第四页：动画尽量交给 CSS 和 rAF，Vue 只负责状态；每帧只写必要的 DOM，避免把响应式拖进动画循环里。"],l=f.map((s,t)=>({front:{title:`第 ${t*2+1} 面`,text:s,image:r(t*2+1)},back:{title:`第 ${t*2+2} 面`,text:f[(t+1)%f.length],image:r(t*2+2)}})),c={title:"『组件提取笔记』",text:"",image:r(0)},p={title:"",text:"",image:r(7)},u=_(0),b=S(()=>l.length+2),g=_("（还没翻过）"),h={display:"flex",alignItems:"center",justifyContent:"center",height:"560px",padding:"24px",background:"#4f4e68"};function y(s){g.value=`翻到第 ${s} 张`}return(s,t)=>($(),q("div",T,[t[8]||(t[8]=e("header",null,[e("p",{class:"demo-page__eyebrow"},"远程组件"),e("h1",{class:"demo-page__title"},"comps-vue3 · BookFlip"),e("p",{class:"demo-page__lead"},[o(" 来自 video-code 的「书本翻页」：一叠对开页贴在书脊右侧，绕左边缘 "),e("code",null,"rotateY(-180deg)"),o(" 翻过去，正面转走背面转来，每面都有标题、正文和底图。原 demo 用 "),e("code",null,"z-index"),o(" + "),e("code",null,"visibility"),o(" 关键帧处理正反面切换；组件里改用 "),e("code",null,"backface-visibility: hidden"),o("， 逻辑简单很多，另外补了上一页 / 下一页、页码、键盘左右键和自动播放。 ")])],-1)),e("section",N,[e("div",G,[t[1]||(t[1]=e("h2",{class:"demo-page__section-title"},"点右半页翻过去",-1)),e("code",L,d(u.value)+" / "+d(b.value),1)]),t[7]||(t[7]=e("p",{class:"demo-card__text"}," 下面这本是 4 张内页（8 个面）加首尾封面：点右半页向前翻，点左边已经翻过的页可以翻回来； 底部按钮和 ← → 键也能翻。底图是用内联 SVG 生成的渐变，不依赖外网。 ",-1)),e("div",P,[n(a(i),{modelValue:u.value,"onUpdate:modelValue":t[0]||(t[0]=m=>u.value=m),pages:a(l),cover:c,"end-cover":p,width:620,height:400,duration:1e3,onChange:y},null,8,["modelValue","pages"])]),e("p",j,[t[2]||(t[2]=o(" 当前第 ",-1)),e("code",null,d(u.value),1),t[3]||(t[3]=o(" 张（共 ",-1)),e("code",null,d(b.value),1),t[4]||(t[4]=o(" 张）· 最近一次翻页： ",-1)),e("code",null,d(g.value),1)]),e("div",z,[e("div",A,[e("div",D,[n(a(i),{pages:a(l).slice(0,2),cover:c,"end-cover":p,width:360,height:240,duration:700,hint:!1,paper:"#f3ecdc"},null,8,["pages"])]),t[5]||(t[5]=e("p",null,[o("小尺寸 + 米色纸（"),e("code",null,"width"),o(" / "),e("code",null,"height"),o(" / "),e("code",null,"paper"),o("）")],-1))]),e("div",U,[e("div",H,[n(a(i),{pages:a(l).slice(0,3),cover:c,"end-cover":p,width:360,height:240,duration:800,autoplay:!0,"autoplay-interval":1800,controls:!1,hint:!1},null,8,["pages"])]),t[6]||(t[6]=e("p",null,[o("自动播放（"),e("code",null,"autoplay"),o("，翻到最后一页停下，无按钮）")],-1))])])]),n(x,{class:"book-preview"},{default:F(()=>[n(E,{name:"BookFlip",component:a(i),schema:a(I),presets:{pages:a(l),cover:c,endCover:p,width:560,height:380},"stage-style":h},null,8,["component","schema","presets"])]),_:1}),t[9]||(t[9]=B('<p class="demo-note" data-v-c89c9df1><span data-v-c89c9df1> 面板里 <code data-v-c89c9df1>width</code> / <code data-v-c89c9df1>height</code> 是书页尺寸，<code data-v-c89c9df1>duration</code> 是一次翻页的毫秒数， <code data-v-c89c9df1>paper</code> / <code data-v-c89c9df1>ink</code> 是纸色和正文颜色，<code data-v-c89c9df1>modelValue</code> 是当前翻到第几张 （和 <code data-v-c89c9df1>v-model</code> 同步），<code data-v-c89c9df1>controls</code> / <code data-v-c89c9df1>hint</code> 控制按钮和提示， <code data-v-c89c9df1>autoplay</code> + <code data-v-c89c9df1>autoplayInterval</code> 是自动翻页。内页数组用 <code data-v-c89c9df1>pages</code> 传入（每张有 front / back 两面）。 </span></p>',1))]))}}),J=w(M,[["__scopeId","data-v-c89c9df1"]]);export{J as default};
+//# sourceMappingURL=BookFlipView-BNZWBDkl.js.map

package/dist/assets/{BookFlipView-Dej1lwhJ.js.map → BookFlipView-BNZWBDkl.js.map}

@@ -1 +1 @@
-{"version":3,"file":"BookFlipView-Dej1lwhJ.js","sources":["../../src/views/BookFlipView.vue"],"sourcesContent":["<template>\n  <div class=\"demo-page\">\n    <header>\n      <p class=\"demo-page__eyebrow\">远程组件</p>\n      <h1 class=\"demo-page__title\">comps-vue3 · BookFlip</h1>\n      <p class=\"demo-page__lead\">\n        来自 video-code 的「书本翻页」：一叠对开页贴在书脊右侧，绕左边缘 <code>rotateY(-180deg)</code>\n        翻过去，正面转走背面转来，每面都有标题、正文和底图。原 demo 用 <code>z-index</code> +\n        <code>visibility</code> 关键帧处理正反面切换；组件里改用 <code>backface-visibility: hidden</code>，\n        逻辑简单很多，另外补了上一页 / 下一页、页码、键盘左右键和自动播放。\n      </p>\n    </header>\n\n    <section class=\"book-demo\">\n      <div class=\"book-demo__head\">\n        <h2 class=\"demo-page__section-title\">点右半页翻过去</h2>\n        <code class=\"book-demo__tag\">{{ page }} / {{ leaves }}</code>\n      </div>\n      <p class=\"demo-card__text\">\n        下面这本是 4 张内页（8 个面）加首尾封面：点右半页向前翻，点左边已经翻过的页可以翻回来；\n        底部按钮和 ← → 键也能翻。底图是用内联 SVG 生成的渐变，不依赖外网。\n      </p>\n\n      <div class=\"book-demo__stage\">\n        <BookFlip\n          v-model=\"page\"\n          :pages=\"pages\"\n          :cover=\"cover\"\n          :end-cover=\"endCover\"\n          :width=\"620\"\n          :height=\"400\"\n          :duration=\"1000\"\n          @change=\"onChange\"\n        />\n      </div>\n\n      <p class=\"book-demo__hint\">\n        当前第 <code>{{ page }}</code> 张（共 <code>{{ leaves }}</code> 张）· 最近一次翻页：\n        <code>{{ lastChange }}</code>\n      </p>\n\n      <div class=\"book-demo__row\">\n        <div class=\"book-demo__cell\">\n          <div class=\"book-demo__stage book-demo__stage--small\">\n            <BookFlip\n              :pages=\"pages.slice(0, 2)\"\n              :cover=\"cover\"\n              :end-cover=\"endCover\"\n              :width=\"360\"\n              :height=\"240\"\n              :duration=\"700\"\n              :hint=\"false\"\n              paper=\"#f3ecdc\"\n            />\n          </div>\n          <p>小尺寸 + 米色纸（<code>width</code> / <code>height</code> / <code>paper</code>）</p>\n        </div>\n        <div class=\"book-demo__cell\">\n          <div class=\"book-demo__stage book-demo__stage--small\">\n            <BookFlip\n              :pages=\"pages.slice(0, 3)\"\n              :cover=\"cover\"\n              :end-cover=\"endCover\"\n              :width=\"360\"\n              :height=\"240\"\n              :duration=\"800\"\n              :autoplay=\"true\"\n              :autoplay-interval=\"1800\"\n              :controls=\"false\"\n              :hint=\"false\"\n            />\n          </div>\n          <p>自动播放（<code>autoplay</code>，翻到最后一页停下，无按钮）</p>\n        </div>\n      </div>\n    </section>\n\n    <DemoPreview class=\"book-preview\">\n      <LevaPlayground\n        name=\"BookFlip\"\n        :component=\"BookFlip\"\n        :schema=\"BookFlipSchema\"\n        :presets=\"{ pages, cover, endCover, width: 560, height: 380 }\"\n        :stage-style=\"stageStyle\"\n      />\n    </DemoPreview>\n\n    <p class=\"demo-note\">\n      <span>\n        面板里 <code>width</code> / <code>height</code> 是书页尺寸，<code>duration</code> 是一次翻页的毫秒数，\n        <code>paper</code> / <code>ink</code> 是纸色和正文颜色，<code>modelValue</code> 是当前翻到第几张\n        （和 <code>v-model</code> 同步），<code>controls</code> / <code>hint</code> 控制按钮和提示，\n        <code>autoplay</code> + <code>autoplayInterval</code> 是自动翻页。内页数组用\n        <code>pages</code> 传入（每张有 front / back 两面）。\n      </span>\n    </p>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport BookFlipSchema from '@melt-js/comps-vue3/src/components/BookFlip.propsSchema.json'\nimport DemoPreview from '../components/DemoPreview.vue'\nimport LevaPlayground from '../components/LevaPlayground.vue'\nimport { remoteComponent } from '../configs/remote'\n\nconst BookFlip = remoteComponent('BookFlip')\n\ntype Face = { title?: string; text?: string; image?: string }\ntype Page = { front: Face; back: Face }\n\nconst PALETTE = [\n  ['#f97316', '#ec4899'],\n  ['#22d3ee', '#3b82f6'],\n  ['#a855f7', '#6366f1'],\n  ['#34d399', '#14b8a6'],\n  ['#fbbf24', '#f97316'],\n  ['#f472b6', '#a855f7'],\n  ['#38bdf8', '#818cf8'],\n  ['#4ade80', '#22d3ee'],\n]\n\n/** 生成一张带编号的渐变底图，免得 demo 依赖外网图片 */\nfunction poster(index: number): string {\n  const [from, to] = PALETTE[index % PALETTE.length]\n  const svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"300\" height=\"400\">\n    <defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n      <stop offset=\"0\" stop-color=\"${from}\"/><stop offset=\"1\" stop-color=\"${to}\"/>\n    </linearGradient></defs>\n    <rect width=\"300\" height=\"400\" fill=\"url(#g)\"/>\n    <text x=\"150\" y=\"222\" font-family=\"sans-serif\" font-size=\"120\" font-weight=\"700\"\n      fill=\"rgba(255,255,255,0.82)\" text-anchor=\"middle\">${index}</text>\n  </svg>`\n  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`\n}\n\nconst TEXTS = [\n  '第一页：组件从一整页 demo 里被拆出来，带上自己的 props、事件和样式，能独立站在任何一个 Vue 3 项目里。',\n  '第二页：所有视觉常量都变成了 props —— 尺寸、颜色、时长、开关，在属性面板里拖一拖就能看到差别。',\n  '第三页：交互逻辑重新组织过：拖动、点击、缩放这些手势用 Pointer Events 统一处理，鼠标和触摸是同一套。',\n  '第四页：动画尽量交给 CSS 和 rAF，Vue 只负责状态；每帧只写必要的 DOM，避免把响应式拖进动画循环里。',\n]\n\nconst pages: Page[] = TEXTS.map((text, index) => ({\n  front: {\n    title: `第 ${index * 2 + 1} 面`,\n    text,\n    image: poster(index * 2 + 1),\n  },\n  back: {\n    title: `第 ${index * 2 + 2} 面`,\n    text: TEXTS[(index + 1) % TEXTS.length],\n    image: poster(index * 2 + 2),\n  },\n}))\n\nconst cover: Face = { title: '『组件提取笔记』', text: '', image: poster(0) }\nconst endCover: Face = { title: '', text: '', image: poster(7) }\n\nconst page = ref(0)\nconst leaves = computed(() => pages.length + 2)\nconst lastChange = ref('（还没翻过）')\n\nconst stageStyle = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  height: '560px',\n  padding: '24px',\n  background: '#4f4e68',\n}\n\nfunction onChange(value: number) {\n  lastChange.value = `翻到第 ${value} 张`\n}\n</script>\n\n<style scoped>\n.book-demo {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.book-demo__head {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px 12px;\n  align-items: baseline;\n  justify-content: space-between;\n}\n\n.book-demo__head .demo-page__section-title {\n  margin: 0;\n}\n\n.book-demo__tag {\n  padding: 2px 8px;\n  border-radius: 999px;\n  background: var(--demo-accent-soft);\n  color: var(--demo-accent);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.book-demo__stage {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 36px 24px;\n  border-radius: 16px;\n  background: #4f4e68;\n}\n\n.book-demo__stage--small {\n  padding: 20px;\n}\n\n.book-demo__hint {\n  margin: 0;\n  color: var(--demo-muted);\n  font-size: 13px;\n}\n\n.book-demo__row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  margin-top: 6px;\n}\n\n.book-demo__cell {\n  flex: 1 1 320px;\n  min-width: 280px;\n}\n\n.book-demo__cell p {\n  margin: 8px 0 0;\n  color: var(--demo-muted);\n  font-size: 12px;\n}\n\n.book-preview.is-demo-fullscreen {\n  padding: 16px;\n  background: #4f4e68;\n}\n</style>\n"],"names":["BookFlip","remoteComponent","PALETTE","poster","index","from","to","svg","TEXTS","pages","text","cover","endCover","page","ref","leaves","computed","lastChange","stageStyle","onChange","value","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_cache","_hoisted_4","_toDisplayString","_hoisted_5","_createVNode","_unref","$event","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","DemoPreview","LevaPlayground","BookFlipSchema"],"mappings":"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"}
+{"version":3,"file":"BookFlipView-BNZWBDkl.js","sources":["../../src/views/BookFlipView.vue"],"sourcesContent":["<template>\n  <div class=\"demo-page\">\n    <header>\n      <p class=\"demo-page__eyebrow\">远程组件</p>\n      <h1 class=\"demo-page__title\">comps-vue3 · BookFlip</h1>\n      <p class=\"demo-page__lead\">\n        来自 video-code 的「书本翻页」：一叠对开页贴在书脊右侧，绕左边缘 <code>rotateY(-180deg)</code>\n        翻过去，正面转走背面转来，每面都有标题、正文和底图。原 demo 用 <code>z-index</code> +\n        <code>visibility</code> 关键帧处理正反面切换；组件里改用 <code>backface-visibility: hidden</code>，\n        逻辑简单很多，另外补了上一页 / 下一页、页码、键盘左右键和自动播放。\n      </p>\n    </header>\n\n    <section class=\"book-demo\">\n      <div class=\"book-demo__head\">\n        <h2 class=\"demo-page__section-title\">点右半页翻过去</h2>\n        <code class=\"book-demo__tag\">{{ page }} / {{ leaves }}</code>\n      </div>\n      <p class=\"demo-card__text\">\n        下面这本是 4 张内页（8 个面）加首尾封面：点右半页向前翻，点左边已经翻过的页可以翻回来；\n        底部按钮和 ← → 键也能翻。底图是用内联 SVG 生成的渐变，不依赖外网。\n      </p>\n\n      <div class=\"book-demo__stage\">\n        <BookFlip\n          v-model=\"page\"\n          :pages=\"pages\"\n          :cover=\"cover\"\n          :end-cover=\"endCover\"\n          :width=\"620\"\n          :height=\"400\"\n          :duration=\"1000\"\n          @change=\"onChange\"\n        />\n      </div>\n\n      <p class=\"book-demo__hint\">\n        当前第 <code>{{ page }}</code> 张（共 <code>{{ leaves }}</code> 张）· 最近一次翻页：\n        <code>{{ lastChange }}</code>\n      </p>\n\n      <div class=\"book-demo__row\">\n        <div class=\"book-demo__cell\">\n          <div class=\"book-demo__stage book-demo__stage--small\">\n            <BookFlip\n              :pages=\"pages.slice(0, 2)\"\n              :cover=\"cover\"\n              :end-cover=\"endCover\"\n              :width=\"360\"\n              :height=\"240\"\n              :duration=\"700\"\n              :hint=\"false\"\n              paper=\"#f3ecdc\"\n            />\n          </div>\n          <p>小尺寸 + 米色纸（<code>width</code> / <code>height</code> / <code>paper</code>）</p>\n        </div>\n        <div class=\"book-demo__cell\">\n          <div class=\"book-demo__stage book-demo__stage--small\">\n            <BookFlip\n              :pages=\"pages.slice(0, 3)\"\n              :cover=\"cover\"\n              :end-cover=\"endCover\"\n              :width=\"360\"\n              :height=\"240\"\n              :duration=\"800\"\n              :autoplay=\"true\"\n              :autoplay-interval=\"1800\"\n              :controls=\"false\"\n              :hint=\"false\"\n            />\n          </div>\n          <p>自动播放（<code>autoplay</code>，翻到最后一页停下，无按钮）</p>\n        </div>\n      </div>\n    </section>\n\n    <DemoPreview class=\"book-preview\">\n      <LevaPlayground\n        name=\"BookFlip\"\n        :component=\"BookFlip\"\n        :schema=\"BookFlipSchema\"\n        :presets=\"{ pages, cover, endCover, width: 560, height: 380 }\"\n        :stage-style=\"stageStyle\"\n      />\n    </DemoPreview>\n\n    <p class=\"demo-note\">\n      <span>\n        面板里 <code>width</code> / <code>height</code> 是书页尺寸，<code>duration</code> 是一次翻页的毫秒数，\n        <code>paper</code> / <code>ink</code> 是纸色和正文颜色，<code>modelValue</code> 是当前翻到第几张\n        （和 <code>v-model</code> 同步），<code>controls</code> / <code>hint</code> 控制按钮和提示，\n        <code>autoplay</code> + <code>autoplayInterval</code> 是自动翻页。内页数组用\n        <code>pages</code> 传入（每张有 front / back 两面）。\n      </span>\n    </p>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport BookFlipSchema from '@melt-js/comps-vue3/src/components/BookFlip.propsSchema.json'\nimport DemoPreview from '../components/DemoPreview.vue'\nimport LevaPlayground from '../components/LevaPlayground.vue'\nimport { remoteComponent } from '../configs/remote'\n\nconst BookFlip = remoteComponent('BookFlip')\n\ntype Face = { title?: string; text?: string; image?: string }\ntype Page = { front: Face; back: Face }\n\nconst PALETTE = [\n  ['#f97316', '#ec4899'],\n  ['#22d3ee', '#3b82f6'],\n  ['#a855f7', '#6366f1'],\n  ['#34d399', '#14b8a6'],\n  ['#fbbf24', '#f97316'],\n  ['#f472b6', '#a855f7'],\n  ['#38bdf8', '#818cf8'],\n  ['#4ade80', '#22d3ee'],\n]\n\n/** 生成一张带编号的渐变底图，免得 demo 依赖外网图片 */\nfunction poster(index: number): string {\n  const [from, to] = PALETTE[index % PALETTE.length]\n  const svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"300\" height=\"400\">\n    <defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n      <stop offset=\"0\" stop-color=\"${from}\"/><stop offset=\"1\" stop-color=\"${to}\"/>\n    </linearGradient></defs>\n    <rect width=\"300\" height=\"400\" fill=\"url(#g)\"/>\n    <text x=\"150\" y=\"222\" font-family=\"sans-serif\" font-size=\"120\" font-weight=\"700\"\n      fill=\"rgba(255,255,255,0.82)\" text-anchor=\"middle\">${index}</text>\n  </svg>`\n  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`\n}\n\nconst TEXTS = [\n  '第一页：组件从一整页 demo 里被拆出来，带上自己的 props、事件和样式，能独立站在任何一个 Vue 3 项目里。',\n  '第二页：所有视觉常量都变成了 props —— 尺寸、颜色、时长、开关，在属性面板里拖一拖就能看到差别。',\n  '第三页：交互逻辑重新组织过：拖动、点击、缩放这些手势用 Pointer Events 统一处理，鼠标和触摸是同一套。',\n  '第四页：动画尽量交给 CSS 和 rAF，Vue 只负责状态；每帧只写必要的 DOM，避免把响应式拖进动画循环里。',\n]\n\nconst pages: Page[] = TEXTS.map((text, index) => ({\n  front: {\n    title: `第 ${index * 2 + 1} 面`,\n    text,\n    image: poster(index * 2 + 1),\n  },\n  back: {\n    title: `第 ${index * 2 + 2} 面`,\n    text: TEXTS[(index + 1) % TEXTS.length],\n    image: poster(index * 2 + 2),\n  },\n}))\n\nconst cover: Face = { title: '『组件提取笔记』', text: '', image: poster(0) }\nconst endCover: Face = { title: '', text: '', image: poster(7) }\n\nconst page = ref(0)\nconst leaves = computed(() => pages.length + 2)\nconst lastChange = ref('（还没翻过）')\n\nconst stageStyle = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  height: '560px',\n  padding: '24px',\n  background: '#4f4e68',\n}\n\nfunction onChange(value: number) {\n  lastChange.value = `翻到第 ${value} 张`\n}\n</script>\n\n<style scoped>\n.book-demo {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.book-demo__head {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px 12px;\n  align-items: baseline;\n  justify-content: space-between;\n}\n\n.book-demo__head .demo-page__section-title {\n  margin: 0;\n}\n\n.book-demo__tag {\n  padding: 2px 8px;\n  border-radius: 999px;\n  background: var(--demo-accent-soft);\n  color: var(--demo-accent);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.book-demo__stage {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 36px 24px;\n  border-radius: 16px;\n  background: #4f4e68;\n}\n\n.book-demo__stage--small {\n  padding: 20px;\n}\n\n.book-demo__hint {\n  margin: 0;\n  color: var(--demo-muted);\n  font-size: 13px;\n}\n\n.book-demo__row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  margin-top: 6px;\n}\n\n.book-demo__cell {\n  flex: 1 1 320px;\n  min-width: 280px;\n}\n\n.book-demo__cell p {\n  margin: 8px 0 0;\n  color: var(--demo-muted);\n  font-size: 12px;\n}\n\n.book-preview.is-demo-fullscreen {\n  padding: 16px;\n  background: #4f4e68;\n}\n</style>\n"],"names":["BookFlip","remoteComponent","PALETTE","poster","index","from","to","svg","TEXTS","pages","text","cover","endCover","page","ref","leaves","computed","lastChange","stageStyle","onChange","value","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_cache","_hoisted_4","_toDisplayString","_hoisted_5","_createVNode","_unref","$event","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","DemoPreview","LevaPlayground","BookFlipSchema"],"mappings":"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"}