apptify 0.7.2 → 0.8.1

package/templates/playground/src/components/gateway-paper-story.ts

@@ -0,0 +1,197 @@
+interface Point { x: number; y: number }
+export interface GatewaySnapshot {
+  seconds: number
+  phase: number
+  intro: boolean
+  zoom: number
+  bug: Point & { angle: number; scale: number; visible: boolean; captured: boolean }
+  mouth: Point
+  tip: Point
+  tongueVisible: boolean
+  contact: number
+  shoot: number
+  retractEnd: number
+  period: number
+  introEnd: number
+}
+export interface GatewayStory {
+  seek(seconds: number): GatewaySnapshot
+  play(): void
+  pause(): void
+  getState(): GatewaySnapshot
+  setReducedMotion(value: boolean): void
+  dispose(): void
+  timing: Readonly<{ contact: number; shoot: number; retractEnd: number; period: number; introEnd: number; initialPhase: number; zoomStart: number }>
+}
+type GatewayArt = SVGSVGElement & { gatewayStory?: GatewayStory }
+
+export function createGatewayStory(svg: GatewayArt, reducedMotion = false): GatewayStory {
+  const get = (name: string) => {
+    const el = svg.querySelector<SVGElement>(`[data-part="${name}"]`);
+    if (!el) throw new Error(`Missing gateway part: ${name}`);
+    return el;
+  };
+  const parts = Object.fromEntries([
+    'camera','bug','bug-pitch','bug-bag','bug-legs','wing-front','wing-back','bug-shadow',
+    'frog-torso','frog-head','frog-throat','eye-left','eye-right','pupil-left','pupil-right',
+    'mouth-closed','mouth-open','mouth-cavity','mouth-inner','lip-head','lip-front',
+    'tongue','tongue-edge','tongue-fill','tongue-shine','tongue-tip','flag-keep','flag-town'
+  ].map(name => [name, get(name)]));
+  const clamp = (x: number, a=0, b=1) => Math.max(a, Math.min(b, x));
+  const mix = (a: number,b: number,t: number) => a+(b-a)*t;
+  const smooth = (x: number) => { x=clamp(x); return x*x*(3-2*x); };
+  const segment = (t: number,a: number,b: number) => smooth((t-a)/(b-a));
+  const pulse = (t: number,a: number,b: number) => t>a && t<b ? Math.sin(Math.PI*(t-a)/(b-a)) ** 2 : 0;
+  const attr = (name: string,key: string,value: string | number) => parts[name].setAttribute(key,String(value));
+  const show = (name: string, yes: boolean) => attr(name,'display',yes?'inline':'none');
+  const n = (x: number) => Number(x.toFixed(4));
+  const root = {x:636, y:539};
+  const speed=174, startX=-130, catchX=500;
+  const contact=(catchX-startX)/speed;
+  const shoot=contact-.155;
+  const retractEnd=contact+.37;
+  const period=4.85;
+  const initialPhase=1.25;
+  const zoomStart=retractEnd-initialPhase+.18;
+  const introEnd=zoomStart+1.55;
+  const flight = (t: number) => {
+    const x=startX+speed*t;
+    const y=408+11*Math.sin(x*.010+.6)+4*Math.sin(x*.032+.4)-.018*(x-400);
+    const dy=11*.010*Math.cos(x*.010+.6)+4*.032*Math.cos(x*.032+.4)-.018;
+    return {x,y,angle:Math.atan2(dy,1)*180/Math.PI*.48};
+  };
+  const hit=flight(contact);
+  const bezier = (a: number,b: number,c: number,d: number,t: number) => (1-t)**3*a+3*(1-t)**2*t*b+3*(1-t)*t*t*c+t**3*d;
+  let disposed=false, raf=0, clock=0, lastNow=0, userPaused=false;
+  let inView=true;
+  const reduce=window.matchMedia('(prefers-reduced-motion: reduce)');
+  let observer: IntersectionObserver | undefined;
+  let snapshot: GatewaySnapshot | undefined;
+
+  function render(seconds: number): GatewaySnapshot {
+    const intro=seconds<introEnd;
+    const t=intro ? Math.min(initialPhase+seconds,period-.01) : (seconds-introEnd)%period;
+    const anticipating=segment(t,shoot-.25,shoot)*(1-segment(t,shoot,shoot+.12));
+    const action=pulse(t,shoot,retractEnd+.10);
+    const gulp=pulse(t,retractEnd+.08,retractEnd+.42);
+
+    const hx=-3.5*action, hy=1.5*anticipating-1.5*action+.7*gulp;
+    const headAngle=-1.0*action;
+    const headTransform=`translate(${n(hx)} ${n(hy)}) rotate(${n(headAngle)} 0 -100)`;
+    attr('frog-head','transform',headTransform);
+    attr('lip-head','transform',headTransform);
+    attr('frog-torso','transform',`scale(${n(1+.008*anticipating)} ${n(1-.016*anticipating+.004*Math.sin(seconds*1.8))})`);
+    attr('frog-throat','transform',`translate(0 -57) scale(${n(1+.035*gulp)} ${n(1+.055*gulp)}) translate(0 57)`);
+
+    const rad=headAngle*Math.PI/180;
+    const localMouth={x:-2, y:-90};
+    const mouth={x:root.x+hx+localMouth.x*Math.cos(rad)-(localMouth.y+100)*Math.sin(rad),
+                 y:root.y+hy-100+localMouth.x*Math.sin(rad)+(localMouth.y+100)*Math.cos(rad)};
+    let bug=flight(Math.min(t,contact)), scale=1, pitch=bug.angle, captured=false;
+    let tip={...mouth}, tongueVisible=false, retract=0;
+    if(t>=shoot && t<contact) {
+      const u=clamp((t-shoot)/(contact-shoot));
+      const extension=1-(1-u)**2;
+      tip={x:mix(mouth.x,hit.x,extension), y:mix(mouth.y,hit.y,extension)};
+      tongueVisible=true;
+    } else if(t>=contact && t<retractEnd) {
+      retract=clamp((t-contact)/(retractEnd-contact));
+      const u=retract;
+
+
+      bug={x:bezier(hit.x,hit.x+23,mouth.x-22,mouth.x,u),
+           y:bezier(hit.y,hit.y+2,mouth.y-12,mouth.y,u), angle:0};
+      scale=1-smooth((u-.79)/.21);
+      pitch=mix(hit.angle,20,smooth(u));
+      tip={x:bug.x,y:bug.y};
+      tongueVisible=true;
+      captured=true;
+    }
+    const visible=t<retractEnd && scale>.0001;
+    show('bug',visible);
+
+    if(visible) {
+      attr('bug','transform',`translate(${n(bug.x)} ${n(bug.y)}) scale(${n(scale)})`);
+      attr('bug-pitch','transform',`rotate(${n(pitch)})`);
+    }
+    const wing=2*Math.PI*11.3*seconds;
+    const flutter=captured?1.2:1;
+    attr('wing-front','transform',`translate(-5 -9) rotate(${n(-18+35*Math.sin(wing)*flutter)}) scale(1 ${n(.45+.55*Math.abs(Math.cos(wing)))}) translate(5 9)`);
+    attr('wing-back','transform',`translate(-5 -8) rotate(${n(18-33*Math.sin(wing+.9)*flutter)}) scale(1 ${n(.55+.45*Math.abs(Math.cos(wing+.9)))}) translate(5 8)`);
+    attr('bug-bag','transform',`rotate(${n(captured?-16*smooth(retract):5.5*Math.sin(seconds*5.1-.9)-3)} -22 -2)`);
+    attr('bug-legs','d',captured?'M-19 8-26 10m16 0-5 8m23-7 7 5':`M-19 8-28 ${n(18+2*Math.sin(seconds*8))}m18-8-2 13m20-12 8 10`);
+    show('bug-shadow',visible && !captured);
+    attr('bug-shadow','cx',n(bug.x));
+    attr('bug-shadow','rx',n(18+(bug.y-400)*.06));
+
+    const look=t<contact?clamp((bug.x-root.x)/120,-1,1):(1-segment(t,retractEnd,retractEnd+.55))*-.45;
+    const lookY=t<contact?clamp((bug.y-(root.y-140))/80,-1,1):.15;
+    for(const name of ['pupil-left','pupil-right']) attr(name,'transform',`translate(${n(look*3.8)} ${n(lookY*2)})`);
+    const blink=1-.94*Math.max(pulse(t,retractEnd+.12,retractEnd+.36),pulse(t,.53,.70));
+    attr('eye-left','transform',`translate(-44 -140) scale(1 ${n(blink)})`);
+    attr('eye-right','transform',`translate(44 -140) scale(1 ${n(blink)})`);
+    const opening=segment(t,shoot-.09,shoot+.035)*(1-segment(t,retractEnd-.015,retractEnd+.13));
+    const w=10+10*opening, bottom=-94+18*opening;
+    show('mouth-closed',opening<.03);
+    show('mouth-open',opening>=.03);
+    attr('mouth-cavity','d',`M${-w} -96Q0 ${n(-98-2*opening)} ${w} -96Q${n(w+1)} ${n(bottom)} 0 ${n(bottom)}Q${n(-w-1)} ${n(bottom)} ${-w} -96Z`);
+    attr('mouth-inner','d',`M${n(-12*opening)} ${n(bottom-2*opening)}Q0 ${n(bottom-7*opening)} ${n(12*opening)} ${n(bottom-2*opening)}Q0 ${n(bottom)} ${n(-12*opening)} ${n(bottom-2*opening)}Z`);
+    attr('lip-front','d',opening<.03?'M-24-92Q0-82 25-92':`M${n(-w-1)} ${n(bottom-5)}Q0 ${n(bottom+6)} ${n(w+1)} ${n(bottom-5)}`);
+    attr('lip-front','stroke-width',opening<.03?1.5:4.5);
+    show('tongue',tongueVisible);
+    if(tongueVisible) {
+
+      const length=Math.hypot(tip.x-mouth.x,tip.y-mouth.y);
+      const bend=Math.min(7,length*.035)*(captured?Math.sin(retract*Math.PI):.45);
+      const path=(offset: number)=>`M${n(mouth.x)} ${n(mouth.y+offset)} Q${n((mouth.x+tip.x)/2)} ${n((mouth.y+tip.y)/2+bend+offset)} ${n(tip.x)} ${n(tip.y+offset)}`;
+      const thickness=clamp(length/14);
+      attr('tongue-edge','stroke-width',n(12*thickness)); attr('tongue-fill','stroke-width',n(8.2*thickness)); attr('tongue-shine','stroke-width',n(1.3*thickness));
+      attr('tongue-edge','d',path(thickness)); attr('tongue-fill','d',path(0)); attr('tongue-shine','d',path(-2.5*thickness));
+      attr('tongue-tip','transform',`translate(${n(tip.x)} ${n(tip.y)}) rotate(${n(Math.atan2(tip.y-mouth.y,tip.x-mouth.x)*180/Math.PI)}) scale(${n(Math.min(1,length/10))})`);
+    }
+    attr('flag-keep','transform',`translate(1014 127) skewY(${n(Math.sin(seconds*2)*2)}) translate(-1014 -127)`);
+    attr('flag-town','transform',`translate(955 225) skewY(${n(Math.sin(seconds*2+.8)*2)}) translate(-955 -225)`);
+    let zoom=1, focus={x:600,y:360};
+    if(intro) {
+      const out=segment(seconds,zoomStart,introEnd);
+      const focusBug=t<retractEnd?bug:mouth;
+      zoom=mix(3.05,1,out);
+      focus={x:mix(focusBug.x-8,600,out),y:mix(focusBug.y-13,360,out)};
+    }
+    attr('camera','transform',`translate(600 360) scale(${n(zoom)}) translate(${n(-focus.x)} ${n(-focus.y)})`);
+    svg.dataset.story=reduce.matches || reducedMotion ? "static" : intro ? "intro" : "loop";
+    snapshot={seconds,phase:t,intro,zoom,bug:{...bug,scale,visible,captured},mouth,tip,tongueVisible,contact,shoot,retractEnd,period,introEnd};
+    return snapshot;
+  }
+  const allowed=()=>!disposed&&!userPaused&&!document.hidden&&inView&&!reduce.matches&&!reducedMotion;
+  function stopRAF() { if(raf) cancelAnimationFrame(raf); raf=0; lastNow=0; }
+  function tick(now: number) {
+    raf=0; if(!allowed()) {lastNow=0;return;}
+    if(lastNow) clock+=Math.min((now-lastNow)/1000,.08);
+    lastNow=now; render(clock); raf=requestAnimationFrame(tick);
+  }
+  function sync() { svg.dataset.playing=String(allowed()); if(allowed()) {if(!raf) {lastNow=0;raf=requestAnimationFrame(tick);}} else stopRAF(); }
+  function motionChanged() {
+    if(reduce.matches || reducedMotion) {stopRAF();render(introEnd+2.7);sync();}
+    else {clock=Math.max(clock,introEnd);render(clock);sync();}
+  }
+  document.addEventListener('visibilitychange',sync);
+  reduce.addEventListener('change',motionChanged);
+  if('IntersectionObserver' in window) {
+    observer=new IntersectionObserver(entries=>{inView=entries[0]?.isIntersecting??true;sync();},{threshold:0});
+    observer.observe(svg);
+  }
+  if(reduce.matches || reducedMotion) render(introEnd+2.7); else render(0);
+  const controller={
+    seek(seconds: number){if(!Number.isFinite(seconds)||seconds<0) throw new RangeError('seconds must be finite and non-negative');userPaused=true;sync();clock=seconds;return render(clock);},
+    play(){userPaused=false;sync();},
+    pause(){userPaused=true;sync();},
+    getState(){return snapshot!;},
+    setReducedMotion(value: boolean){reducedMotion=value;motionChanged();},
+    dispose(){if(disposed)return;disposed=true;stopRAF();svg.dataset.playing="false";observer?.disconnect();document.removeEventListener('visibilitychange',sync);reduce.removeEventListener('change',motionChanged);delete svg.gatewayStory;},
+    timing:Object.freeze({contact,shoot,retractEnd,period,introEnd,initialPhase,zoomStart})
+  };
+  svg.gatewayStory=controller;
+  sync();
+  return controller;
+}

package/templates/playground/src/editor/handbooks/apple-list.ts

@@ -28,6 +28,12 @@ export default defineHandbook({
       "default": "false",
       "description": "使用 button 单选并更新 modelValue；false 时有 href 的项渲染为链接，其余作为内容。"
     },
+    {
+      "name": "border",
+      "type": "boolean",
+      "default": "false",
+      "description": "显示列表项之间的分隔线；默认不显示。"
+    },
     {
       "name": "disabled",
       "type": "boolean",

package/templates/playground/src/editor/handbooks/apple-scroll-bar.ts

@@ -11,5 +11,5 @@ export default defineHandbook({
   events: [{ name: 'interaction', type: '() => void', description: '拖动、点击轨道、键盘或滚轮操作时触发。' }],
   slots: [],
   methods: [{ name: 'refresh()', type: '() => void', description: '重新测量目标及滚动位置。尺寸、内容和滚动变化默认自动同步。' }],
-  notes: ['AppleProvider 默认启用全局接管，无需逐个包裹内容。滚动条使用 fixed，不占布局空间；z-index 取 max(80, 目标及祖先层级)，弹窗内留在所属弹层上下文。', '原本主动隐藏滚动条的轮播、标签栏与日期滚轮保持原有交互；data-apple-scrollbar-ignore 可排除指定容器。'],
+  notes: ['AppleProvider 默认启用全局接管，无需逐个包裹内容。滚动条使用 fixed，不占布局空间；z-index 跟随目标及祖先层级，默认为 0，弹窗内留在所属弹层上下文。', '原本主动隐藏滚动条的轮播、标签栏与日期滚轮保持原有交互；data-apple-scrollbar-ignore 可排除指定容器。'],
 })

package/templates/playground/src/views/502.vue

@@ -0,0 +1,65 @@
+<template>
+  <main class="main-content paper-502-page">
+    <apple-card class="paper-502-card" shadow="none" zoom="none">
+      <template #title>
+        <div class="paper-502-heading">
+          <p class="paper-502-number" aria-hidden="true">502</p>
+          <h1>网关错误</h1>
+        </div>
+      </template>
+      <p class="paper-502-copy">包裹在城门口被拦住了。<br />服务暂时无法响应，请稍后再试。</p>
+      <div class="paper-502-actions">
+        <router-link v-slot="{ href, navigate }" :to="homePath" custom>
+          <apple-button :href="href" @click="navigate">返回首页</apple-button>
+        </router-link>
+        <apple-link as="button" @click="goBack"><ArrowLeft :size="16" aria-hidden="true" /> 返回上一页</apple-link>
+      </div>
+    </apple-card>
+    <GatewayPaperScene class="paper-502-illustration" />
+  </main>
+</template>
+
+<route lang="json">
+{ "alias": "/error/502", "meta": { "title": "网关错误" } }
+</route>
+
+<script setup lang="ts">
+import { ArrowLeft } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+import GatewayPaperScene from '../components/gateway-paper-scene.vue'
+
+const router = useRouter()
+const homePath = router.getRoutes().some(page => page.path === '/') ? '/' : '/settings'
+function goBack() {
+  if (typeof router.options.history.state.back === 'string') router.back()
+  else void router.push(homePath)
+}
+</script>
+
+<style scoped>
+.paper-502-page { max-width: 1360px; display: grid; grid-template-columns: minmax(260px, .78fr) minmax(0, 1.65fr); align-content: center; align-items: center; column-gap: 16px; padding-top: 38px; padding-bottom: calc(38px + 64px); }
+.paper-502-card { background: transparent; border: 0; overflow: visible; }
+.paper-502-card :deep(.apple-card__body) { padding: 0 0 0 8px; }
+.paper-502-card :deep(.apple-card__heading) { margin: 0; }
+.paper-502-heading { width: 100%; }
+.paper-502-number { color: var(--apple-text); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(78px, 8.2vw, 118px); line-height: .9; letter-spacing: -.075em; margin: 0 0 28px; font-weight: 400; }
+.paper-502-heading h1 { font-size: clamp(26px, 2.7vw, 35px); line-height: 1.35; letter-spacing: -.035em; font-weight: 600; margin: 0 0 17px; }
+.paper-502-copy { font-size: 13px; line-height: 1.95; color: var(--apple-secondary); margin: 0; text-wrap: pretty; }
+.paper-502-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 27px; }
+.paper-502-actions .apple-link { font-size: 12px; padding-inline: 8px; color: var(--apple-secondary); }
+.paper-502-illustration { min-width: 0; }
+@media (max-width: 880px) {
+  .paper-502-page { grid-template-columns: minmax(0, 1fr); max-width: 680px; padding-top: 18px; }
+  .paper-502-illustration { grid-row: 1; }
+  .paper-502-card { margin-top: 26px; }
+  .paper-502-card :deep(.apple-card__body) { padding: 0; text-align: center; }
+  .paper-502-number { font-size: 70px; margin-bottom: 18px; }
+  .paper-502-heading h1 { font-size: 26px; margin-bottom: 12px; }
+  .paper-502-actions { justify-content: center; margin-top: 18px; }
+}
+@media (max-width: 420px) {
+  .paper-502-page { padding-inline: 18px; padding-top: 12px; }
+  .paper-502-copy { font-size: 12px; }
+  .paper-502-card { margin-top: 22px; }
+}
+</style>

package/tooling/prepare-playground.mjs

@@ -50,7 +50,7 @@ async function adapt(directory) {
         source = source.replace('to="/" aria-label="Apptify 首页"', ':to="homePath" aria-label="Apptify 首页"')
         source = source.replace(navigationEnd, "].filter(item => router.getRoutes().some(page => page.path === item.href))\nconst homePath = navigation[0]?.href ?? '/'\n\nfunction navigate")
       }
-      if (['[...all].vue', '403.vue'].some(view => path === join(output, 'src/views', view))) {
+      if (['[...all].vue', '403.vue', '502.vue'].some(view => path === join(output, 'src/views', view))) {
         source = source.replace('to="/" custom', ':to="homePath" custom')
         source = source.replace('const router = useRouter()', "const router = useRouter()\nconst homePath = router.getRoutes().some(page => page.path === '/') ? '/' : '/settings'")
         source = source.replace("else void router.push('/')", 'else void router.push(homePath)')
@@ -92,7 +92,7 @@ await writeFile(join(output, 'gitignore'), 'node_modules/\ndist/\n.env.local\n')
 await writeFile(join(output, 'README.md'), [
   "# Apptify 应用模板",
   "",
-  "可编辑的 Vue 应用，包含导航、账号表单、外观设置、403、404 与组件示例。建议 Node.js 22 或 24 LTS。",
+  "可编辑的 Vue 应用，包含导航、账号表单、外观设置、403、404、502 与组件示例。建议 Node.js 22 或 24 LTS。",
   "",
   "```sh",
   "npm install",