apptify 0.8.0 → 0.8.5

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

@@ -0,0 +1,74 @@
+<template>
+  <main class="main-content paper-400-page">
+    <apple-card class="paper-400-card" shadow="none" zoom="none">
+      <template #title>
+        <div class="paper-400-heading">
+          <p class="paper-400-number" aria-hidden="true">400</p>
+          <h1><span class="paper-400-sr-only">400 · </span>{{ page.title }}</h1>
+        </div>
+      </template>
+      <p class="paper-400-copy">{{ page.copy[0] }}<br />{{ page.copy[1] }}</p>
+      <div class="paper-400-actions">
+        <router-link v-slot="{ href, navigate }" to="/" 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>
+    <BadRequestPaperScene class="paper-400-illustration" :theme="scheme" :reduced-motion="reducedMotion" />
+  </main>
+</template>
+
+<route lang="json">
+{ "alias": "/error/400", "meta": { "title": "请求有误" } }
+</route>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ArrowLeft } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+import { useApple } from 'apptify'
+import { resolveMotion } from 'apptify'
+import BadRequestPaperScene from '../components/bad-request-paper-scene.vue'
+
+import { errorPages } from '../error-pages'
+
+const page = errorPages[400]
+const router = useRouter()
+const apple = useApple()
+const scheme = computed(() => apple.theme.value.current.scheme)
+const reducedMotion = computed(() => resolveMotion('inherit', apple.motion.value.mode, apple.motion.value.reduced) !== 'full')
+function goBack() {
+  if (typeof router.options.history.state.back === 'string') router.back()
+  else void router.push('/')
+}
+</script>
+
+<style scoped>
+.paper-400-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-400-card { background:transparent; border:0; overflow:visible; }
+.paper-400-card :deep(.apple-card__body) { padding:0 0 0 8px; }
+.paper-400-card :deep(.apple-card__heading) { margin:0; }
+.paper-400-heading { width:100%; }
+.paper-400-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-400-heading h1 { font-size:clamp(26px,2.7vw,35px); line-height:1.35; letter-spacing:-.035em; font-weight:600; margin:0 0 17px; }
+.paper-400-copy { font-size:13px; line-height:1.95; color:var(--apple-secondary); margin:0; text-wrap:pretty; }
+.paper-400-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:27px; }
+.paper-400-actions .apple-link { font-size:12px; padding-inline:8px; color:var(--apple-secondary); }
+.paper-400-illustration { min-width:0; }
+.paper-400-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
+@media(max-width:880px) {
+  .paper-400-page { grid-template-columns:minmax(0,1fr); max-width:680px; padding-top:18px; }
+  .paper-400-illustration { grid-row:1; }
+  .paper-400-card { margin-top:36px; }
+  .paper-400-card :deep(.apple-card__body) { padding:0; text-align:center; }
+  .paper-400-number { font-size:70px; margin-bottom:18px; }
+  .paper-400-heading h1 { font-size:26px; margin-bottom:12px; }
+  .paper-400-actions { justify-content:center; margin-top:18px; }
+}
+@media(max-width:420px) {
+  .paper-400-page { padding-inline:18px; padding-top:12px; }
+  .paper-400-copy { font-size:12px; }
+  .paper-400-card { margin-top:30px; }
+}
+</style>

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

@@ -4,10 +4,10 @@
       <template #title>
         <div class="paper-403-heading">
           <p class="paper-403-number" aria-hidden="true">403</p>
-          <h1>无权访问</h1>
+          <h1>{{ page.title }}</h1>
         </div>
       </template>
-      <p class="paper-403-copy">这只鸡腿，可不能随便拿。<br />你暂时没有访问此页面的权限。</p>
+      <p class="paper-403-copy">{{ page.copy[0] }}<br />{{ page.copy[1] }}</p>
       <div class="paper-403-actions">
         <router-link v-slot="{ href, navigate }" :to="homePath" custom>
           <apple-button :href="href" @click="navigate">返回首页</apple-button>
@@ -28,6 +28,9 @@ import { ArrowLeft } from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
 import ForbiddenPaperScene from '../components/forbidden-paper-scene.vue'
 
+import { errorPages } from '../error-pages'
+
+const page = errorPages[403]
 const router = useRouter()
 const homePath = router.getRoutes().some(page => page.path === '/') ? '/' : '/settings'
 function goBack() {

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

@@ -0,0 +1,74 @@
+<template>
+  <main class="main-content paper-429-page">
+    <apple-card class="paper-429-card" shadow="none" zoom="none">
+      <template #title>
+        <div class="paper-429-heading">
+          <p class="paper-429-number" aria-hidden="true">429</p>
+          <h1><span class="paper-429-sr-only">429 · </span>{{ page.title }}</h1>
+        </div>
+      </template>
+      <p class="paper-429-copy">{{ page.copy[0] }}<br />{{ page.copy[1] }}</p>
+      <div class="paper-429-actions">
+        <router-link v-slot="{ href, navigate }" to="/" 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>
+    <Hamster429Scene class="paper-429-illustration" :theme="scheme" :reduced-motion="reducedMotion" />
+  </main>
+</template>
+
+<route lang="json">
+{ "alias": "/error/429", "meta": { "title": "请求过于频繁" } }
+</route>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ArrowLeft } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+import { useApple } from 'apptify'
+import { resolveMotion } from 'apptify'
+import Hamster429Scene from '../components/hamster-429-scene.vue'
+
+import { errorPages } from '../error-pages'
+
+const page = errorPages[429]
+const router = useRouter()
+const apple = useApple()
+const scheme = computed(() => apple.theme.value.current.scheme)
+const reducedMotion = computed(() => resolveMotion('inherit', apple.motion.value.mode, apple.motion.value.reduced) !== 'full')
+function goBack() {
+  if (typeof router.options.history.state.back === 'string') router.back()
+  else void router.push('/')
+}
+</script>
+
+<style scoped>
+.paper-429-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-429-card { background:transparent; border:0; overflow:visible; }
+.paper-429-card :deep(.apple-card__body) { padding:0 0 0 8px; }
+.paper-429-card :deep(.apple-card__heading) { margin:0; }
+.paper-429-heading { width:100%; }
+.paper-429-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:429; }
+.paper-429-heading h1 { font-size:clamp(26px,2.7vw,35px); line-height:1.35; letter-spacing:-.035em; font-weight:600; margin:0 0 17px; }
+.paper-429-copy { font-size:13px; line-height:1.95; color:var(--apple-secondary); margin:0; text-wrap:pretty; }
+.paper-429-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:27px; }
+.paper-429-actions .apple-link { font-size:12px; padding-inline:8px; color:var(--apple-secondary); }
+.paper-429-illustration { min-width:0; }
+.paper-429-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
+@media(max-width:880px) {
+  .paper-429-page { grid-template-columns:minmax(0,1fr); max-width:680px; padding-top:18px; }
+  .paper-429-illustration { grid-row:1; }
+  .paper-429-card { margin-top:36px; }
+  .paper-429-card :deep(.apple-card__body) { padding:0; text-align:center; }
+  .paper-429-number { font-size:70px; margin-bottom:18px; }
+  .paper-429-heading h1 { font-size:26px; margin-bottom:12px; }
+  .paper-429-actions { justify-content:center; margin-top:18px; }
+}
+@media(max-width:420px) {
+  .paper-429-page { padding-inline:18px; padding-top:12px; }
+  .paper-429-copy { font-size:12px; }
+  .paper-429-card { margin-top:30px; }
+}
+</style>

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

@@ -0,0 +1,67 @@
+<template>
+  <main class="main-content paper-500-page">
+    <apple-card class="paper-500-card" shadow="none" zoom="none">
+      <template #title>
+        <div class="paper-500-heading">
+          <p class="paper-500-number" aria-hidden="true">500</p>
+          <h1>{{ page.title }}</h1>
+        </div>
+      </template>
+      <p class="paper-500-copy">{{ page.copy[0] }}<br />{{ page.copy[1] }}</p>
+      <div class="paper-500-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>
+    <ServerFirePaperScene class="paper-500-illustration" />
+  </main>
+</template>
+
+<route lang="json">
+{ "alias": "/error/500", "meta": { "title": "服务器内部错误" } }
+</route>
+
+<script setup lang="ts">
+import { ArrowLeft } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+import { errorPages } from '../error-pages'
+import ServerFirePaperScene from '../components/server-fire-paper-scene.vue'
+
+const page = errorPages[500]
+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-500-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-500-card { background: transparent; border: 0; overflow: visible; }
+.paper-500-card :deep(.apple-card__body) { padding: 0 0 0 8px; }
+.paper-500-card :deep(.apple-card__heading) { margin: 0; }
+.paper-500-heading { width: 100%; }
+.paper-500-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-500-heading h1 { font-size: clamp(26px, 2.7vw, 35px); line-height: 1.35; letter-spacing: -.035em; font-weight: 600; margin: 0 0 17px; }
+.paper-500-copy { font-size: 13px; line-height: 1.95; color: var(--apple-secondary); margin: 0; text-wrap: pretty; }
+.paper-500-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 27px; }
+.paper-500-actions .apple-link { font-size: 12px; padding-inline: 8px; color: var(--apple-secondary); }
+.paper-500-illustration { min-width: 0; }
+@media (max-width: 880px) {
+  .paper-500-page { grid-template-columns: minmax(0, 1fr); max-width: 680px; padding-top: 18px; }
+  .paper-500-illustration { grid-row: 1; }
+  .paper-500-card { margin-top: 26px; }
+  .paper-500-card :deep(.apple-card__body) { padding: 0; text-align: center; }
+  .paper-500-number { font-size: 70px; margin-bottom: 18px; }
+  .paper-500-heading h1 { font-size: 26px; margin-bottom: 12px; }
+  .paper-500-actions { justify-content: center; margin-top: 18px; }
+}
+@media (max-width: 420px) {
+  .paper-500-page { padding-inline: 18px; padding-top: 12px; }
+  .paper-500-copy { font-size: 12px; }
+  .paper-500-card { margin-top: 22px; }
+}
+</style>

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

@@ -0,0 +1,68 @@
+<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>{{ page.title }}</h1>
+        </div>
+      </template>
+      <p class="paper-502-copy">{{ page.copy[0] }}<br />{{ page.copy[1] }}</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'
+
+import { errorPages } from '../error-pages'
+
+const page = errorPages[502]
+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/templates/playground/src/views/503.vue

@@ -0,0 +1,79 @@
+<template>
+  <main class="main-content paper-503-page">
+    <apple-card class="paper-503-card" shadow="none" zoom="none">
+      <template #title>
+        <div class="paper-503-heading">
+          <p class="paper-503-number" aria-hidden="true">503</p>
+          <h1><span class="paper-503-sr-only">503 · </span>{{ page.title }}</h1>
+          <p class="paper-503-english" lang="en">Service temporarily unavailable</p>
+        </div>
+      </template>
+      <p class="paper-503-copy">{{ page.copy[0] }}<br />{{ page.copy[1] }}</p>
+      <div class="paper-503-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>
+    <UnavailablePaperScene class="paper-503-illustration" :theme="scheme" :reduced-motion="reducedMotion" />
+  </main>
+</template>
+
+<route lang="json">
+{ "alias": "/error/503", "meta": { "title": "服务暂时不可用" } }
+</route>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ArrowLeft } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+import { useApple } from 'apptify'
+import { resolveMotion } from 'apptify'
+import UnavailablePaperScene from '../components/unavailable-paper-scene.vue'
+
+import { errorPages } from '../error-pages'
+
+const page = errorPages[503]
+const router = useRouter()
+const homePath = router.getRoutes().some(page => page.path === '/') ? '/' : '/settings'
+const apple = useApple()
+const scheme = computed(() => apple.theme.value.current.scheme)
+const reducedMotion = computed(() => resolveMotion('inherit', apple.motion.value.mode, apple.motion.value.reduced) !== 'full')
+
+function goBack() {
+  if (typeof router.options.history.state.back === 'string') router.back()
+  else void router.push(homePath)
+}
+</script>
+
+<style scoped>
+.paper-503-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-503-card { background: transparent; border: 0; overflow: visible; }
+.paper-503-card :deep(.apple-card__body) { padding: 0 0 0 8px; }
+.paper-503-card :deep(.apple-card__heading) { margin: 0; }
+.paper-503-heading { width: 100%; }
+.paper-503-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-503-heading h1 { font-size: clamp(26px, 2.7vw, 35px); line-height: 1.35; letter-spacing: -.035em; font-weight: 600; margin: 0 0 9px; }
+.paper-503-english { font-size: 11px; line-height: 1.6; letter-spacing: .015em; color: var(--apple-secondary); margin: 0 0 20px; font-weight: 400; }
+.paper-503-copy { font-size: 13px; line-height: 1.95; color: var(--apple-secondary); margin: 0; text-wrap: pretty; }
+.paper-503-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 27px; }
+.paper-503-actions .apple-link { font-size: 12px; padding-inline: 8px; color: var(--apple-secondary); }
+.paper-503-illustration { min-width: 0; }
+.paper-503-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+@media (max-width: 880px) {
+  .paper-503-page { grid-template-columns: minmax(0, 1fr); max-width: 680px; padding-top: 18px; }
+  .paper-503-illustration { grid-row: 1; }
+  .paper-503-card { margin-top: 26px; }
+  .paper-503-card :deep(.apple-card__body) { padding: 0; text-align: center; }
+  .paper-503-number { font-size: 70px; margin-bottom: 18px; }
+  .paper-503-heading h1 { font-size: 26px; margin-bottom: 8px; }
+  .paper-503-english { margin-bottom: 15px; }
+  .paper-503-actions { justify-content: center; margin-top: 18px; }
+}
+@media (max-width: 420px) {
+  .paper-503-page { padding-inline: 18px; padding-top: 12px; }
+  .paper-503-copy { font-size: 12px; }
+  .paper-503-card { margin-top: 22px; }
+}
+</style>

package/templates/playground/src/views/[...all].vue

@@ -4,10 +4,10 @@
       <template #title>
         <div class="paper-404-heading">
           <p class="paper-404-number" aria-hidden="true">404</p>
-          <h1>页面不存在</h1>
+          <h1>{{ page.title }}</h1>
         </div>
       </template>
-      <p class="paper-404-copy">有些东西，悄悄溜走了。<br />就像松鼠的橡果，这一页也不知漂去了哪里。</p>
+      <p class="paper-404-copy">{{ page.copy[0] }}<br />{{ page.copy[1] }}</p>
       <div class="paper-404-actions">
         <router-link v-slot="{ href, navigate }" :to="homePath" custom>
           <apple-button :href="href" @click="navigate">返回首页</apple-button>
@@ -24,6 +24,9 @@ import { ArrowLeft } from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
 import NotFoundPaperScene from '../components/not-found-paper-scene.vue'
 
+import { errorPages } from '../error-pages'
+
+const page = errorPages[404]
 const router = useRouter()
 const homePath = router.getRoutes().some(page => page.path === '/') ? '/' : '/settings'
 function goBack() {

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

@@ -12,10 +12,9 @@
       <div class="components-content">
         <div class="feed-toolbar">
           <span class="feed-count">全部组件 <small>{{ catalog.length }}</small></span>
-          <div class="preview-controls" role="group" aria-label="预览尺寸">
-            <apple-link as="button" icon-only :icon="Monitor" :class="{ active: previewMode === 'desktop' }" :aria-pressed="previewMode === 'desktop'" label="桌面预览" @click="previewMode = 'desktop'" />
-            <apple-link icon-only :icon="Smartphone" :class="{ active: previewMode === 'mobile' }" :aria-pressed="previewMode === 'mobile'" label="手机预览" @click="previewMode = 'mobile'" />
-          </div>
+          <router-link v-slot="{ href, navigate }" to="#error-pages" custom>
+            <apple-link :href="href" @click="navigate">错误页面 <ArrowDown :size="14" aria-hidden="true" /></apple-link>
+          </router-link>
         </div>
         <div ref="feed" class="component-feed">
           <section v-for="(section, index) in sections" :id="section.id" :key="section.id" class="feed-group feed-anchor" :data-group="section.id" :aria-labelledby="`${section.id}-heading`">
@@ -23,12 +22,13 @@
             <MasonryFeed class="feed-cards" @layout="schedulePosition">
             <apple-card v-for="item in section.items" :id="componentId(item.name)" :key="item.name" class="component-card feed-anchor" :data-group="section.id" :aria-labelledby="`${componentId(item.name)}-heading`">
               <header class="component-card-heading"><div><h3 :id="`${componentId(item.name)}-heading`"><router-link :to="`#${componentId(item.name)}`">{{ item.label }}<Hash :size="14" /></router-link></h3><p>{{ item.description }}</p></div><code>{{ componentId(item.name) }}</code></header>
-              <section class="detail-preview" :class="{ 'mobile-preview': previewMode === 'mobile' }" :aria-label="`${item.label}预览`"><ComponentDemo :name="item.name" @navigate="navigateGroup" /></section>
+              <section class="detail-preview" :aria-label="`${item.label}预览`"><ComponentDemo :name="item.name" @navigate="navigateGroup" /></section>
               <ComponentDocumentLink :href="documentPaths[item.name]" label="代码与 API" />
             </apple-card>
             </MasonryFeed>
           </section>
         </div>
+        <ErrorPagePreviews id="error-pages" class="feed-anchor" />
       </div>
     </div>
   </apple-container>
@@ -38,10 +38,11 @@
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { Hash, Monitor, Smartphone } from 'lucide-vue-next'
+import { ArrowDown, Hash } from 'lucide-vue-next'
 import { catalog, sections, componentId } from '../catalog'
 import ComponentDemo from '../ComponentDemo.vue'
 import ComponentIndex from '../components/ComponentIndex.vue'
+import ErrorPagePreviews from '../components/ErrorPagePreviews.vue'
 import MasonryFeed from '../components/MasonryFeed.vue'
 import ComponentDocumentLink from '../editor/ComponentDocumentLink.vue'
 import { componentDocuments, componentDocumentPath } from '../editor/documents'
@@ -52,7 +53,6 @@ const router = useRouter()
 const feed = ref<HTMLElement>()
 const activeGroup = ref(sections[0].id)
 const activeId = ref('')
-const previewMode = ref('desktop')
 const expandedGroups = ref(sections.map(section => section.id))
 let anchors: HTMLElement[] = []
 let frame = 0
@@ -107,7 +107,7 @@ onBeforeUnmount(() => {
 .directory-index { display: flex; flex-direction: column; overflow: hidden; }
 .directory-header { flex-shrink: 0; }
 .directory-header > span { color: var(--apple-secondary); font-size: 12px; display: block; margin: 0 0 12px 8px; }
-.directory-tree { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
+.directory-tree { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding-inline: var(--apple-focus-clearance, 6px); padding-block-start: var(--apple-focus-clearance, 6px); }
 @media (max-width: 900px) { .directory-index { display: none; } }
 .components-page > * { max-width: none; }
 .feed-anchor { scroll-margin-top: 96px; }

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', '500.vue', '502.vue', '503.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、503 与组件示例。建议 Node.js 22 或 24 LTS。",
   "",
   "```sh",
   "npm install",

package/dist/components/scrollbar.d.ts

@@ -1,88 +0,0 @@
-import { type PropType } from 'vue';
-import { type ScrollBarAxis } from '../core/scrollbar';
-export declare const AppleScrollBar: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    target: {
-        type: PropType<string | HTMLElement | (() => HTMLElement | undefined)>;
-        default: string;
-    };
-    axis: {
-        type: PropType<ScrollBarAxis>;
-        default: string;
-    };
-    label: {
-        type: StringConstructor;
-        default: string;
-    };
-    controls: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, () => null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "interaction"[], "interaction", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    target: {
-        type: PropType<string | HTMLElement | (() => HTMLElement | undefined)>;
-        default: string;
-    };
-    axis: {
-        type: PropType<ScrollBarAxis>;
-        default: string;
-    };
-    label: {
-        type: StringConstructor;
-        default: string;
-    };
-    controls: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & Readonly<{
-    onInteraction?: ((...args: any[]) => any) | undefined;
-}>, {
-    label: string;
-    target: string | HTMLElement | (() => HTMLElement | undefined);
-    axis: ScrollBarAxis;
-    controls: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export declare const scrollBarComponents: {
-    AppleScrollBar: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        target: {
-            type: PropType<string | HTMLElement | (() => HTMLElement | undefined)>;
-            default: string;
-        };
-        axis: {
-            type: PropType<ScrollBarAxis>;
-            default: string;
-        };
-        label: {
-            type: StringConstructor;
-            default: string;
-        };
-        controls: {
-            type: StringConstructor;
-            default: string;
-        };
-    }>, () => null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "interaction"[], "interaction", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-        target: {
-            type: PropType<string | HTMLElement | (() => HTMLElement | undefined)>;
-            default: string;
-        };
-        axis: {
-            type: PropType<ScrollBarAxis>;
-            default: string;
-        };
-        label: {
-            type: StringConstructor;
-            default: string;
-        };
-        controls: {
-            type: StringConstructor;
-            default: string;
-        };
-    }>> & Readonly<{
-        onInteraction?: ((...args: any[]) => any) | undefined;
-    }>, {
-        label: string;
-        target: string | HTMLElement | (() => HTMLElement | undefined);
-        axis: ScrollBarAxis;
-        controls: string;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-};

package/dist/core/scrollbar.d.ts

@@ -1,14 +0,0 @@
-export type ScrollBarAxis = 'both' | 'horizontal' | 'vertical';
-interface ScrollBarOptions {
-    axis?: ScrollBarAxis;
-    label?: string;
-    controls?: string;
-    host?: HTMLElement;
-    interaction?: () => void;
-}
-export declare function attachScrollBar(target: HTMLElement, options?: ScrollBarOptions): {
-    refresh: () => void;
-    dispose(): void;
-};
-export declare function installScrollBars(host: HTMLElement): () => void;
-export {};

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

@@ -1,15 +0,0 @@
-import { defineHandbook } from '../handbook'
-
-export default defineHandbook({
-  name: 'AppleScrollBar', source: 'src/components/scrollbar.ts',
-  props: [
-    { name: 'target', type: 'string | HTMLElement | (() => HTMLElement | undefined)', default: '""', description: 'CSS 选择器、元素或返回元素的函数；空值自动接管当前文档的滚动容器。' },
-    { name: 'axis', type: "'both' | 'horizontal' | 'vertical'", default: '"both"', description: '指定目标时显示的滚动方向。' },
-    { name: 'label', type: 'string', default: '""', description: '滚动条的可访问名称，默认从目标名称生成。' },
-    { name: 'controls', type: 'string', default: '""', description: '目标元素 ID；未提供时使用或生成目标 ID。' },
-  ],
-  events: [{ name: 'interaction', type: '() => void', description: '拖动、点击轨道、键盘或滚轮操作时触发。' }],
-  slots: [],
-  methods: [{ name: 'refresh()', type: '() => void', description: '重新测量目标及滚动位置。尺寸、内容和滚动变化默认自动同步。' }],
-  notes: ['AppleProvider 默认启用全局接管，无需逐个包裹内容。滚动条使用 fixed，不占布局空间；z-index 跟随目标及祖先层级，默认为 0，弹窗内留在所属弹层上下文。', '原本主动隐藏滚动条的轮播、标签栏与日期滚轮保持原有交互；data-apple-scrollbar-ignore 可排除指定容器。'],
-})