apptify 0.5.1 → 0.5.4

package/tooling/prepare-input-source.mjs

@@ -0,0 +1,38 @@
+import { readFile, writeFile } from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
+import ts from 'typescript'
+import postcss from 'postcss'
+
+// Extract the actual AppleInput declarations with TypeScript's AST. Preserve
+// implementation logic; only erase TS types and route dependencies to public ESM.
+export async function prepareInputSource() {
+  const root = new URL('../', import.meta.url)
+  const source = await readFile(new URL('src/components/forms.ts', root), 'utf8')
+  const ast = ts.createSourceFile('forms.ts', source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS)
+  const names = ['fieldProps', 'FieldVm', 'fieldId', 'controlAttrs', 'field', 'spinner', 'stringValue', 'AppleInput']
+  const declarations = new Map()
+  for (const statement of ast.statements) {
+    const name = ts.isVariableStatement(statement) ? statement.declarationList.declarations[0]?.name.getText(ast) : statement.name?.getText(ast)
+    if (names.includes(name)) declarations.set(name, statement.getText(ast))
+  }
+  for (const name of names) if (!declarations.has(name)) throw new Error(`AppleInput source changed: missing ${name}`)
+  const script = [
+    "import { defineComponent, h, useId, type PropType, type Slots, type VNodeChild } from 'vue'",
+    "import { ripple } from 'apptify'",
+    "import { Eye, EyeOff, LoaderCircle, X } from 'lucide-vue-next'",
+    ...names.map(name => declarations.get(name)),
+    'export default AppleInput',
+  ].join('\n\n')
+  const js = ts.transpileModule(script, { compilerOptions: { target: ts.ScriptTarget.ES2022, module: ts.ModuleKind.ESNext } }).outputText
+  const cssAst = postcss.parse(await readFile(new URL('src/styles/forms.css', root), 'utf8'))
+  const boundary = cssAst.nodes.findIndex(node => node.type === 'rule' && node.selector === '.apple-textarea')
+  if (boundary < 0) throw new Error('Input CSS section changed: review source extraction')
+  const css = cssAst.nodes.slice(0, boundary).map(node => node.toString()).join('\n')
+  const code = `<!-- AppleInput 同源实现：src/components/forms.ts + src/styles/forms.css。\n只移除 TypeScript 类型并转接浏览器公开依赖，保留 Options API/render 实现。 -->\n<script>\n${js}</script>\n\n<style>\n${css}\n</style>\n`
+  const destination = new URL('playground/editor/apple-input-source.ts', root)
+  const snapshot = '// Generated by tooling/prepare-input-source.mjs; do not edit the snapshot by hand.\nexport default ' + JSON.stringify(code) + '\n'
+  // Do not trigger a hot update during dev-server startup for unchanged data.
+  const previous = await readFile(destination, 'utf8').catch(() => undefined)
+  if (previous !== snapshot) await writeFile(destination, snapshot)
+}
+if (process.argv[1] === fileURLToPath(import.meta.url)) await prepareInputSource()

package/tooling/prepare-playground.mjs

@@ -3,22 +3,32 @@ import { basename, join, relative } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { createHash } from 'node:crypto'
 
+import { prepareInputSource } from './prepare-input-source.mjs'
+await prepareInputSource()
 const root = fileURLToPath(new URL('../', import.meta.url))
 const output = join(root, 'templates/playground')
 const library = JSON.parse(await readFile(join(root, 'package.json'), 'utf8'))
 await rm(output, { recursive: true, force: true })
 await mkdir(output, { recursive: true })
 const copyOptions = { recursive: true, filter: source => basename(source) !== '.DS_Store' }
-await cp(join(root, 'playground'), join(output, 'playground'), copyOptions)
+await cp(join(root, 'playground'), join(output, 'src'), copyOptions)
 await cp(join(root, 'public'), join(output, 'public'), copyOptions)
-await cp(join(root, 'index.html'), join(output, 'index.html'))
+await writeFile(join(output, 'index.html'), (await readFile(join(root, 'index.html'), 'utf8')).replace('/playground/main.ts', '/src/main.ts'))
+await mkdir(join(output, 'tooling'), { recursive: true })
+await cp(join(root, 'tooling/prepare-input-source.mjs'), join(output, 'tooling/prepare-input-source.mjs'))
+await cp(join(root, 'tooling/playground-editor.mjs'), join(output, 'tooling/playground-editor.mjs'))
 
-const snapshot = { createdAt: new Date().toISOString(), libraryVersion: library.version, files: {} }
+const snapshot = { createdAt: new Date().toISOString(), libraryVersion: library.version, files: {}, sourcePaths: {} }
 async function record(directory) {
   for (const entry of await readdir(directory, { withFileTypes: true })) {
     const path = join(directory, entry.name)
     if (entry.isDirectory()) await record(path)
-    else snapshot.files[relative(output, path)] = createHash('sha256').update(await readFile(path)).digest('hex')
+    else {
+      const key = relative(output, path).replaceAll('\\', '/')
+      const sourcePath = key.startsWith('src/') ? 'playground/' + key.slice(4) : key
+      snapshot.sourcePaths[key] = sourcePath
+      snapshot.files[key] = createHash('sha256').update(await readFile(join(root, sourcePath))).digest('hex')
+    }
   }
 }
 await record(output)
@@ -32,14 +42,15 @@ async function adapt(directory) {
       let source = await readFile(path, 'utf8')
       source = source.replace(/(['"])(?:\.\.\/)+src(?:\/(?:index|core\/motion|core\/context|components\/content))?\1/g, "'apptify'")
       if (/(['"])(?:\.\.\/)+src(?:\/[^'"]*)?\1/.test(source)) throw new Error('Unmapped private library import: ' + path)
+      if (path === join(output, 'src/editor/runtime.ts')) source = "import 'apptify/style.css'\n" + source
       if (entry.name === 'main.ts') source = "import 'apptify/style.css'\n" + source
-      if (path === join(output, 'playground/App.vue')) {
+      if (path === join(output, 'src/App.vue')) {
         const navigationEnd = ']\n\nfunction navigate'
         if (!source.includes(navigationEnd)) throw new Error('App navigation layout changed; update template adaptation')
         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 (path === join(output, 'playground/views/[...all].vue')) {
+      if (path === join(output, 'src/views/[...all].vue')) {
         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)')
@@ -48,7 +59,7 @@ async function adapt(directory) {
     }
   }
 }
-await adapt(join(output, 'playground'))
+await adapt(join(output, 'src'))
 const manifest = {
   name: 'apptify-app', version: '0.0.0', private: true, type: 'module',
   scripts: { dev: 'vite', typecheck: 'vue-tsc --noEmit', build: 'vue-tsc --noEmit && vite build', preview: 'vite preview --host 127.0.0.1' },
@@ -57,19 +68,21 @@ const manifest = {
     'vue-router': library.devDependencies['vue-router'], vuetify: library.peerDependencies.vuetify,
     'lucide-vue-next': library.dependencies['lucide-vue-next'],
   },
-  devDependencies: Object.fromEntries(['@vitejs/plugin-vue', 'typescript', 'vite', 'vite-plugin-pages', 'vue-tsc'].map(name => [name, library.devDependencies[name]])),
+  devDependencies: Object.fromEntries(['@vitejs/plugin-vue', 'typescript', 'vite', 'vite-plugin-pages', 'vue-tsc', '@vue/repl', 'es-module-shims', 'esbuild', 'postcss'].map(name => [name, library.devDependencies[name]])),
 }
 await writeFile(join(output, 'package.json'), JSON.stringify(manifest, null, 2) + '\n')
 const tsconfig = JSON.parse(await readFile(join(root, 'tsconfig.json'), 'utf8'))
-tsconfig.include = ['playground/**/*.ts', 'playground/**/*.vue']
+tsconfig.include = ['src/**/*.ts', 'src/**/*.vue']
 await writeFile(join(output, 'tsconfig.json'), JSON.stringify(tsconfig, null, 2) + '\n')
 await writeFile(join(output, 'vite.config.ts'), [
   "import { defineConfig } from 'vite'",
   "import vue from '@vitejs/plugin-vue'",
   "import apptifyRoutes from 'apptify/vite'",
+  "import playgroundEditor from './tooling/playground-editor.mjs'",
   '',
   'export default defineConfig({',
-  "  plugins: [apptifyRoutes({ dirs: [{ dir: 'playground/views', baseRoute: '' }] }), vue()],",
+  "  optimizeDeps: { exclude: ['@vue/repl'] },",
+  "  plugins: [playgroundEditor({ appDir: 'src', libraryDir: null }), apptifyRoutes(), vue()],",
   "  server: { host: '127.0.0.1' },",
   "  build: { outDir: 'dist' },",
   '})', '',
@@ -88,10 +101,10 @@ await writeFile(join(output, 'README.md'), [
   "",
   "检查：`npm run typecheck`、`npm run build`。",
   "",
-  "- 页面：`playground/views/`，文件路由自动生成。",
-  "- 布局与导航：`playground/App.vue` 的 `navigation` 数组。",
-  "- 账号表单：`playground/components/UserMenu.vue`，需要接入自己的后端。",
-  "- 样式：`playground/style.css`；图片与来源：`public/images/`。",
+  "- 页面：`src/views/`，文件路由自动生成。",
+  "- 布局与导航：`src/App.vue` 的 `navigation` 数组。",
+  "- 账号表单：`src/components/UserMenu.vue`，需要接入自己的后端。",
+  "- 样式：`src/style.css`；图片与来源：`public/images/`。",
   "",
   "可删除 `views/index.vue` 和 `views/components.vue`，再添加业务页面；删除后重启开发服务。删除组件总览后，可一并删除 `ComponentDemo.vue`、`catalog.ts` 和 `components/ComponentIndex.vue`。",
   "",

package/tooling/test-create-apptify.mjs

@@ -1,5 +1,5 @@
 import assert from 'node:assert/strict'
-import { mkdir, mkdtemp, readFile, rm, symlink, writeFile } from 'node:fs/promises'
+import { mkdir, mkdtemp, readFile, readdir, rm, symlink, writeFile } from 'node:fs/promises'
 import { join } from 'node:path'
 import { tmpdir } from 'node:os'
 import { fileURLToPath } from 'node:url'
@@ -30,13 +30,14 @@ try {
   await unpack(root, library)
   await mkdir(join(installer, 'node_modules/.bin'))
   await symlink('../create-apptify/bin/create-apptify.mjs', join(installer, 'node_modules/.bin/create-apptify'))
-  await writeFile(join(installer, 'package.json'), '{"private":true,"dependencies":{"create-apptify":"0.1.0"}}\n')
+  await writeFile(join(installer, 'package.json'), JSON.stringify({ private: true, dependencies: { 'create-apptify': packed.version } }) + '\n')
 
-  const run = args => spawnSync(process.execPath, [cli, ...args], { cwd: installer, env, encoding: 'utf8' })
+  const run = (args, cwd = installer) => spawnSync(process.execPath, [cli, ...args], { cwd, env, encoding: 'utf8' })
   const help = run(['--help'])
   assert.equal(help.status, 0, help.stderr)
   assert.match(help.stdout, /npm create apptify@latest/)
   assert.equal(run([]).status, 1)
+  assert.match(run([]).stderr, /Destination must be empty/)
   assert.equal(run(['--unknown']).status, 1)
   assert.equal(run(['one', 'two']).status, 1)
 
@@ -46,7 +47,10 @@ try {
   const manifest = JSON.parse(await readFile(join(app, 'package.json'), 'utf8'))
   assert.match(manifest.dependencies.apptify, /^file:\.\/vendor\/apptify-/)
   assert.match(await readFile(join(app, '.gitignore'), 'utf8'), /node_modules/)
-  await readFile(join(app, 'playground/App.vue'))
+  await readFile(join(app, 'src/App.vue'))
+  assert(!(await readdir(app)).includes('playground'), 'Generated app must use src/')
+  assert.match(await readFile(join(app, 'index.html'), 'utf8'), /src="\/src\/main\.ts"/)
+  assert.deepEqual(JSON.parse(await readFile(join(app, 'tsconfig.json'), 'utf8')).include, ['src/**/*.ts', 'src/**/*.vue'])
   const archive = join(app, manifest.dependencies.apptify.slice('file:./'.length))
   const portableManifest = JSON.parse(execFileSync('tar', ['-xOf', archive, 'package/package.json'], { encoding: 'utf8' }))
   assert.equal(portableManifest.name, 'apptify')
@@ -65,7 +69,13 @@ try {
   await mkdir(empty)
   const copied = run([empty])
   assert.equal(copied.status, 0, copied.stderr)
-  await readFile(join(empty, 'playground/App.vue'))
+  await readFile(join(empty, 'src/App.vue'))
+  const current = join(scratch, 'current-directory')
+  await mkdir(current)
+  const defaultTarget = run([], current)
+  assert.equal(defaultTarget.status, 0, defaultTarget.stderr)
+  await readFile(join(current, 'src/router/index.ts'))
+  assert.match(JSON.parse(await readFile(join(current, 'package.json'), 'utf8')).dependencies.apptify, /^file:\.\/vendor\//)
   await rm(installer, { recursive: true, force: true })
   execFileSync('tar', ['-t', '-f', archive])
   console.log('create-apptify: packed CLI, npm create, portable archive, help, argument validation and overwrite protection passed.')

package/tooling/test-playground-package.mjs

@@ -5,7 +5,7 @@ import { tmpdir } from 'node:os'
 import { createHash } from 'node:crypto'
 import { execFileSync, spawn } from 'node:child_process'
 import { fileURLToPath } from 'node:url'
-import { chromium } from '@playwright/test'
+import { chromium, expect } from '@playwright/test'
 
 const root = fileURLToPath(new URL('../', import.meta.url))
 const scratch = await mkdtemp(join(tmpdir(), 'apptify-package-'))
@@ -123,6 +123,12 @@ try {
     assert.equal(await image.evaluate(async image => { await image.decode(); return image.naturalWidth > 0 }), true)
     await page.locator('.component-index [aria-current]').first().waitFor()
   })
+  await checkPage(server.url, '/component-docs/apple-input', async page => {
+    const frame = page.frameLocator('[data-testid="input-playground"] .vue-repl iframe')
+    await expect(frame.locator('.apple-input-wrap input').first()).toBeVisible()
+    await frame.locator('.apple-input-wrap input').first().fill('Template src preview')
+    await expect(frame.locator('.apple-input-wrap input').first()).toHaveValue('Template src preview')
+  })
   await checkPage(server.url, '/settings', async page => {
     await page.setViewportSize({ width: 320, height: 900 })
     await page.getByRole('button', { name: '深色', exact: true }).click()
@@ -150,12 +156,12 @@ try {
   server.stop()
   server = undefined
 
-  await rm(join(app, 'playground/views/index.vue'))
-  await rm(join(app, 'playground/views/components.vue'))
+  await rm(join(app, 'src/views/index.vue'))
+  await rm(join(app, 'src/views/components.vue'))
   // These files only served the removed overview page. Deleting them must be optional.
-  await rm(join(app, 'playground/ComponentDemo.vue'))
-  await rm(join(app, 'playground/catalog.ts'))
-  await rm(join(app, 'playground/components/ComponentIndex.vue'))
+  await rm(join(app, 'src/ComponentDemo.vue'))
+  await rm(join(app, 'src/catalog.ts'))
+  await rm(join(app, 'src/components/ComponentIndex.vue'))
   run(['run', 'typecheck'], app)
   run(['run', 'build'], app)
   server = await serve()
@@ -178,7 +184,7 @@ try {
   await browser.close()
 }
 for (const [path, hash] of Object.entries(snapshot.files)) {
-  assert.equal(createHash('sha256').update(await readFile(join(root, path))).digest('hex'), hash, 'Source changed during packing; rerun for its latest snapshot: ' + path)
+  assert.equal(createHash('sha256').update(await readFile(join(root, snapshot.sourcePaths?.[path] ?? path))).digest('hex'), hash, 'Source changed during packing; rerun for its latest snapshot: ' + path)
 }
 for (const [path, hash] of Object.entries(snapshot.buildSources || {})) {
   assert.equal(createHash('sha256').update(await readFile(join(root, path))).digest('hex'), hash, 'Build source changed after this archive was created; pack the latest version: ' + path)

package/templates/playground/playground/components/ComponentIndex.vue

@@ -1,62 +0,0 @@
-<template>
-  <nav class="component-index" aria-label="组件定位">
-    <AppleTree :items="treeItems" :model-value="activeId || activeGroup" :expanded="expandedGroups" label="组件目录树" @update:expanded="expanded = $event" @select="navigate">
-      <template #item="{ item }">
-        <router-link :to="`/components#${item.value}`" :class="['index-link', { 'index-group': item.children, active: activeId === item.value || (item.children && activeGroup === item.value) }]" :aria-current="activeId === item.value ? 'location' : undefined" tabindex="-1" @click.prevent>
-          <component :is="icons[item.label]" v-if="item.children" :size="15" aria-hidden="true" />
-          <span>{{ item.label }}</span><small v-if="item.children">{{ item.children.length }}</small>
-        </router-link>
-      </template>
-    </AppleTree>
-    <p v-if="!treeItems.length" class="index-empty" role="status">未找到组件，请尝试其他关键词。</p>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { Bell, Box, MousePointer2, Smartphone, Table2, TextCursorInput } from 'lucide-vue-next'
-import { AppleTree } from 'apptify'
-import type { AppleTreeItem, AppleValue } from 'apptify'
-import { sections, componentId } from '../catalog'
-
-const props = defineProps<{ activeGroup: string; activeId: string; search?: string }>()
-const emit = defineEmits<{ navigate: [] }>()
-const router = useRouter()
-const route = useRoute()
-const expanded = ref<AppleValue[]>([props.activeGroup])
-const icons: Record<string, typeof Box> = { '基础': Box, '表单': TextCursorInput, '导航': MousePointer2, '数据展示': Table2, '反馈': Bell, '移动交互': Smartphone }
-const query = computed(() => props.search?.trim().toLocaleLowerCase() ?? '')
-const treeItems = computed<AppleTreeItem[]>(() => sections.flatMap(section => {
-  const groupMatches = section.label.toLocaleLowerCase().includes(query.value)
-  const items = section.items.filter(item => groupMatches || `${item.label} ${item.name} ${componentId(item.name)} ${item.description}`.toLocaleLowerCase().includes(query.value))
-  return items.length ? [{ label: section.label, value: section.id, children: items.map(item => ({ label: item.label, value: componentId(item.name) })) }] : []
-}))
-const expandedGroups = computed(() => query.value ? treeItems.value.map(item => item.value) : expanded.value)
-watch(() => props.activeGroup, group => {
-  if (!expanded.value.includes(group)) expanded.value = [...expanded.value, group]
-})
-function navigate(item: AppleTreeItem) {
-  const hash = `#${item.value}`
-  if (route.hash === hash) {
-    const target = document.getElementById(String(item.value))
-    if (target) window.scrollTo({ top: target.getBoundingClientRect().top + window.scrollY - 96, behavior: 'instant' })
-  } else void router.push(`/components${hash}`)
-  emit('navigate')
-}
-</script>
-
-<style scoped>
-.component-index { min-width: 0; }
-.component-index :deep(.apple-tree__row) { min-height: 38px; gap: 0; font-size: 12px; border-radius: 6px; }
-.component-index :deep(.apple-tree__toggle), .component-index :deep(.apple-tree__spacer) { flex-basis: 24px; width: 24px; height: 34px; }
-.component-index .index-link { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 8px 4px; font-size: 12px; color: inherit; text-decoration: none; }
-.component-index .index-group { border-radius: 0; }
-/* The tree row owns the fade; avoid a second, smaller hover background on its link. */
-.component-index .index-link:hover { background: transparent; }
-.index-link > span { flex: 1; overflow-wrap: anywhere; }
-.index-link > svg { flex-shrink: 0; }
-.index-link.active { color: var(--apple-text); font-weight: 600; }
-.index-link small { font-size: 10px; color: var(--apple-secondary); font-variant-numeric: tabular-nums; }
-.index-empty { margin: 12px 8px; font-size: 12px; line-height: 1.7; color: var(--apple-secondary); }
-</style>

package/templates/playground/playground/components/PageFooter.vue

@@ -1,3 +0,0 @@
-<template>
-  <footer class="page-footer"><span>Apptify</span><span>Write your own footer here</span></footer>
-</template>

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

@@ -1,126 +0,0 @@
-<template>
-  <apple-aside class="sidebar" aria-label="组件目录">
-    <div class="sidebar-heading"><strong>组件目录</strong><span>点击定位，直接预览</span></div>
-    <div class="directory-search"><apple-search v-model="directorySearch" label="搜索组件目录" placeholder="名称、标签或描述" /></div>
-    <ComponentIndex :active-group="activeGroup" :active-id="activeId" :search="directorySearch" />
-  </apple-aside>
-  <main class="main-content components-page">
-    <header class="page-heading"><div><div class="page-kicker">COMPONENTS</div><h1>组件<span>。</span></h1><p>{{ catalog.length }} 个组件，完整呈现。向下浏览，直接体验。</p></div></header>
-    <div class="feed-toolbar">
-      <apple-button class="mobile-index-toggle" variant="ghost" size="small" :icon="PanelLeft" @click="mobileIndex = true">组件目录</apple-button>
-      <span class="feed-count">全部组件 <small>{{ catalog.length }}</small></span>
-      <div class="preview-controls" role="group" aria-label="预览尺寸">
-        <apple-button variant="ghost" size="small" icon-only :icon="Monitor" :class="{ active: previewMode === 'desktop' }" :aria-pressed="previewMode === 'desktop'" label="桌面预览" @click="previewMode = 'desktop'" />
-        <apple-button variant="ghost" size="small" icon-only :icon="Smartphone" :class="{ active: previewMode === 'mobile' }" :aria-pressed="previewMode === 'mobile'" label="手机预览" @click="previewMode = 'mobile'" />
-      </div>
-    </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`">
-        <header class="feed-group-heading"><span>0{{ index + 1 }}</span><h2 :id="`${section.id}-heading`">{{ section.label }}</h2><small>{{ section.items.length }} 个组件</small></header>
-        <article 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>
-          <apple-accordion class="component-source" :items="sourceSections">
-            <template #item>
-              <div class="code-view"><div class="code-toolbar"><span>使用示例</span><apple-button variant="ghost" size="small" @click="copy(item.code)">复制代码</apple-button></div><pre><code>{{ item.code }}</code></pre><h4>接口</h4><p class="api-line">{{ item.api }}</p></div>
-            </template>
-          </apple-accordion>
-        </article>
-      </section>
-    </div>
-    <PageFooter />
-  </main>
-  <apple-drawer v-model="mobileIndex" title="组件目录" placement="left" width="290px">
-    <div class="directory-search"><apple-search v-model="directorySearch" label="搜索组件目录" placeholder="名称、标签或描述" /></div>
-    <ComponentIndex :active-group="activeGroup" :active-id="activeId" :search="directorySearch" @navigate="mobileIndex = false" />
-  </apple-drawer>
-</template>
-
-<script setup lang="ts">
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { Hash, Monitor, PanelLeft, Smartphone } from 'lucide-vue-next'
-import { useApple } from 'apptify'
-import { catalog, sections, componentId } from '../catalog'
-import ComponentDemo from '../ComponentDemo.vue'
-import ComponentIndex from '../components/ComponentIndex.vue'
-import PageFooter from '../components/PageFooter.vue'
-
-const route = useRoute()
-const router = useRouter()
-const apple = useApple()
-const feed = ref<HTMLElement>()
-const activeGroup = ref(sections[0].id)
-const activeId = ref('')
-const previewMode = ref('desktop')
-const mobileIndex = ref(false)
-const directorySearch = ref('')
-const sourceSections = [{ label: '代码与 API', value: 'source' }]
-let anchors: HTMLElement[] = []
-let frame = 0
-let observer: ResizeObserver | undefined
-
-function updatePosition() {
-  frame = 0
-  let current: HTMLElement | undefined
-  for (const anchor of anchors) {
-    if (anchor.getBoundingClientRect().top > 128) break
-    if (!current || Math.abs(anchor.getBoundingClientRect().top - current.getBoundingClientRect().top) > 1) current = anchor
-    else if (anchor.id === route.hash.slice(1) || (current.id !== route.hash.slice(1) && anchor.id === activeId.value)) current = anchor
-  }
-  activeId.value = current?.id ?? ''
-  activeGroup.value = current?.dataset.group ?? sections[0].id
-}
-function schedulePosition() {
-  if (!frame) frame = requestAnimationFrame(updatePosition)
-}
-function navigateGroup(label: string) {
-  const section = sections.find(section => section.label === label)
-  void router.push(section ? `/components#${section.id}` : '/components')
-}
-async function copy(value: string) {
-  try { await navigator.clipboard.writeText(value); apple.notify('已复制', { tone: 'success' }) }
-  catch { apple.notify('无法访问剪贴板，请手动选择代码复制', { tone: 'warning' }) }
-}
-watch(() => route.hash, () => { mobileIndex.value = false; schedulePosition() })
-watch(activeId, async () => {
-  await nextTick()
-  const sidebar = document.querySelector<HTMLElement>('.sidebar')
-  const current = sidebar?.querySelector<HTMLElement>('[aria-current="location"]')
-  if (!sidebar || !current) return
-  const item = current.getBoundingClientRect(), bounds = sidebar.getBoundingClientRect()
-  if (item.top < bounds.top + 16) sidebar.scrollTop -= bounds.top + 16 - item.top
-  else if (item.bottom > bounds.bottom - 16) sidebar.scrollTop += item.bottom - bounds.bottom + 16
-})
-onMounted(() => {
-  anchors = Array.from(feed.value!.querySelectorAll<HTMLElement>('.feed-anchor'))
-  window.addEventListener('scroll', schedulePosition, { passive: true })
-  window.addEventListener('resize', schedulePosition)
-  observer = new ResizeObserver(schedulePosition)
-  observer.observe(feed.value!)
-  schedulePosition()
-})
-onBeforeUnmount(() => {
-  window.removeEventListener('scroll', schedulePosition)
-  window.removeEventListener('resize', schedulePosition)
-  observer?.disconnect()
-  cancelAnimationFrame(frame)
-})
-</script>
-
-<style scoped>
-.directory-search { min-width: 0; margin: 0 4px 16px; }
-.directory-search :deep(.apple-field__label) { font-size: 11px; }
-.directory-search :deep(input) { min-width: 0; font-size: 12px; }
-.components-page > * { max-width: none; }
-.feed-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 20px; align-items: start; }
-.feed-group-heading { grid-column: 1 / -1; padding-bottom: 0; }
-.component-card { margin-bottom: 0; }
-.component-source :deep(.apple-accordion__item) { border: 0; }
-.component-source :deep(.apple-accordion__item > h3) { font-size: 11px; font-weight: 400; }
-.component-source :deep(.apple-accordion__item > h3 > button) { min-height: 44px; gap: 8px; padding: 13px 28px; color: var(--apple-secondary); }
-.component-source :deep(.apple-accordion__content) { padding: 0; }
-@media (max-width: 800px) {
-  .component-source :deep(.apple-accordion__item > h3 > button) { padding-inline: 18px; }
-}
-</style>

package/templates/playground/playground/views/index.vue

@@ -1,75 +0,0 @@
-<template>
-  <main class="main-content home-page">
-    <section class="home-intro">
-      <div class="page-kicker">APPTIFY / 界面与交互</div>
-      <h1>让界面自然，<br /><span>让细节动人。</span></h1>
-      <p>从一个按钮，到完整体验。<br class="mobile-break" /> 简洁的组件，恰到好处的交互。</p>
-      <div class="home-actions">
-        <router-link v-slot="{ href, navigate }" to="/components" custom>
-          <apple-button :href="href" @click="navigate">浏览全部组件 <ArrowRight :size="17" aria-hidden="true" /></apple-button>
-        </router-link>
-        <router-link v-slot="{ href, navigate }" to="/settings" custom>
-          <apple-link :href="href" class="home-link" @click="navigate">调整外观与动效 <ArrowUpRight :size="16" aria-hidden="true" /></apple-link>
-        </router-link>
-      </div>
-    </section>
-    <section aria-label="精选交互示例">
-      <div class="section-heading"><h2>细节，即刻体验。</h2><span>精选交互示例 · 直接试一试</span></div>
-          <div class="specimen-grid">
-            <section class="specimen"><div class="specimen-caption"><span>01 / 导航</span></div><h2>内容，各归其位。</h2><apple-search v-model="settingQuery" placeholder="搜索设置" label="搜索设置" /><apple-list v-model="setting" :items="filteredSettings" selectable label="设置导航示例" /><p v-if="!filteredSettings.length" class="search-empty" role="status">没有匹配的设置，试试其他关键词。</p></section>
-            <section class="specimen"><div class="specimen-caption"><span>02 / 控制</span></div><h2>点到，即止。</h2><div class="button-specimens"><apple-button :icon="arrowIcon" @click="$apple.notify('操作已完成',{tone:'success'})">继续探索</apple-button><apple-button variant="secondary" @click="$apple.notify('已加入收藏')">加入收藏</apple-button><apple-button variant="outline" @click="$router.push('/components#apple-button')">了解更多</apple-button><div class="icon-button-row"><apple-button variant="secondary" :icon="plusIcon" icon-only label="添加" @click="$apple.notify('已添加')" /><apple-button :variant="liked?'primary':'secondary'" :icon="heartIcon" icon-only :label="liked ? '取消收藏' : '收藏'" :aria-pressed="liked" @click="liked=!liked" /><apple-button variant="secondary" :icon="downloadIcon" icon-only label="浏览组件示例" @click="$router.push('/components')" /></div></div><div class="specimen-foot"><code>apple-button</code><span>5 种样式</span></div></section>
-            <section class="specimen"><div class="specimen-caption"><span>03 / 偏好</span></div><h2>恰好，是你的。</h2><div class="preference-demo"><apple-segmented-control v-model="period" :items="periods" label="统计周期" /><div class="setting-line"><div><strong>消息通知</strong><small>不错过重要的事</small></div><apple-switch v-model="notices" aria-label="消息通知" /></div><div class="setting-line"><div><strong>自动同步</strong><small>在所有设备上保持一致</small></div><apple-switch v-model="sync" aria-label="自动同步" /></div><apple-slider v-model="volume" label="音量" /><div class="check-row"><apple-checkbox v-model="agreed" label="记住我的偏好" /></div></div></section>
-            <section class="specimen form-specimen"><div class="specimen-caption"><span>04 / 输入</span></div><h2>开始一段对话。</h2><apple-form @submit="$apple.notify(`你好，${name || '新朋友'}！`,{tone:'success'})"><apple-input v-model="name" label="你的名字" placeholder="怎么称呼你" autocomplete="name" clearable required /><apple-input v-model="email" label="电子邮箱" type="email" placeholder="name@example.com" autocomplete="email" required /><apple-button type="submit">加入我们<ArrowRight :size="15" /></apple-button></apple-form></section>
-            <section class="specimen media-specimen"><div class="specimen-caption"><span>05 / 媒体</span></div><h2>靠近一点，再一点。</h2><apple-image :gallery="[{ src: '/images/lake.jpg', alt: '山间湖泊和木屋' }, { src: '/images/airpods-max-orange.jpg', alt: '橙色耳机' }]" aspect-ratio="4/3" /><div class="specimen-foot"><code>apple-image</code><span>山间的一刻</span></div></section>
-            <section class="specimen feedback-specimen"><div class="specimen-caption"><span>06 / 反馈</span></div><h2>每一步，都有回应。</h2><apple-alert title="所有更改已保存" tone="success" /><div class="progress-demo"><div><span>正在同步</span><span>{{progress}}%</span></div><apple-progress :model-value="progress" label="正在同步" /></div><apple-avatar-group :items="[{name:'林初'},{name:'Alex'},{name:'Taylor'},{name:'Quinn'}]" /><div class="feedback-actions"><apple-button variant="secondary" size="small" @click="openDemoDialog">打开对话框</apple-button><apple-button variant="ghost" size="small" @click="$apple.notify('所有更改已保存',{tone:'success'});progress=Math.min(100,progress+10)">显示提示</apple-button></div></section>
-          </div>
-    </section>
-    <section class="more-components">
-      <div><h2>更多组件，同样顺手。</h2><span>{{ catalog.length }} 个组件，预览与交互都在一页之中。</span></div>
-      <router-link v-slot="{ href, navigate }" to="/components" custom>
-        <apple-link :href="href" class="home-link" @click="navigate">查看全部组件 <ArrowRight :size="16" aria-hidden="true" /></apple-link>
-      </router-link>
-    </section>
-    <PageFooter />
-  </main>
-</template>
-
-<script lang="ts">
-import { defineComponent, markRaw } from 'vue'
-import { ArrowRight, ArrowUpRight, Download, Heart, Plus } from 'lucide-vue-next'
-import { catalog } from '../catalog'
-import PageFooter from '../components/PageFooter.vue'
-
-export default defineComponent({
-  components: { ArrowRight, ArrowUpRight, PageFooter },
-  data() { return {
-    catalog, arrowIcon: markRaw(ArrowRight), plusIcon: markRaw(Plus), heartIcon: markRaw(Heart), downloadIcon: markRaw(Download),
-    period: 'month', periods: [{label:'日',value:'day'},{label:'周',value:'week'},{label:'月',value:'month'}],
-    notices: true, sync: false, agreed: true, volume: 64, progress: 68, name: '', email: '', liked: false,
-    settingQuery: '', setting: 'profile', overviewSettings: [
-      {label:'个人资料',value:'profile',description:'姓名、头像和联系方式'},
-      {label:'通知',value:'notices',description:'推送和邮件偏好'},
-      {label:'隐私与安全',value:'privacy',description:'管理你的账户安全设置'},
-    ],
-  } },
-  computed: {
-    filteredSettings() {
-      const query = this.settingQuery.trim()
-      return this.overviewSettings.filter(item => item.label.includes(query) || item.description.includes(query))
-    },
-  },
-  methods: {
-    openDemoDialog() { this.$apple.dialog({title:'一切，就从这里开始。',message:'试试这些组件，找到适合你的交互。',confirmText:'好的',cancelText:'稍后'}) },
-  },
-})
-</script>
-
-<style scoped>
-.home-link { min-height: 44px; gap: 9px; font-size: 13px; font-weight: 500; }
-.search-empty { margin: 12px 0 0; color: var(--apple-secondary); font-size: 12px; line-height: 1.7; }
-/* Keep the library's control sizes in the compact specimens. */
-.button-specimens > .apple-button { min-height: 44px; font-size: inherit; }
-.icon-button-row .apple-button { width: 44px; height: 44px; min-height: 44px; }
-.form-specimen .apple-form .apple-button { min-height: 44px; font-size: inherit; }
-.feedback-actions .apple-button { font-size: 13px; }
-</style>