apptify 0.5.4 → 0.6.0

package/README.md

@@ -1,59 +1,23 @@
 # Apptify
 
-面向桌面与移动端的 Vue 3 组件库，采用 Apple 风格设计，统一使用 `<apple-*>` 标签。支持主题切换、减少动效、表单、图片预览与多层弹窗；支持 JavaScript、TypeScript 和 Options API。
+面向桌面与移动端的 Vue 3 组件库，基于 Vuetify Material UI 融合 Apple 风格设计，统一使用 `<apple-*>` 标签。
 
 [npm](https://www.npmjs.com/package/apptify) · [组件 API](docs/COMPONENTS.md) · [应用模板](docs/PLAYGROUND-TEMPLATE.md)
 
-## 安装
+## 快速开始
 
 ```sh
-npm install apptify vue@^3.5 vuetify@^3.9
+npm create apptify
 ```
 
-Vue 与 Vuetify 是 peer dependencies。Vuetify 仅用于 Ripple，无需安装其插件、导入完整样式或使用 `<v-app>`。
-
-## 快速接入
-
-```js
-// src/main.js
-import { createApp } from 'vue'
-import { createAppleUI } from 'apptify'
-import 'apptify/style.css'
-import App from './App.vue'
-
-createApp(App)
-  .use(createAppleUI({ theme: 'system', motion: 'auto', persist: true }))
-  .mount('#app')
-```
-
-```vue
-<!-- App.vue -->
-<template>
-  <apple-provider>
-    <apple-container>
-      <apple-card title="个人资料">
-        <apple-input v-model="name" label="姓名" />
-        <template #actions>
-          <apple-button @click="save">保存</apple-button>
-        </template>
-      </apple-card>
-    </apple-container>
-  </apple-provider>
-</template>
-
-<script>
-export default {
-  data: () => ({ name: '' }),
-  methods: {
-    save() {
-      this.$apple.notify('资料已保存', { tone: 'success' })
-    },
-  },
-}
-</script>
-```
-
-`AppleProvider` 提供主题与弹层宿主，无需额外添加 `AppleOverlayHost`。插件全局注册组件，也支持命名导入并局部注册。嵌套 Provider 内可用 `appleKey` 注入局部上下文，或在 `setup()` 中使用 `useApple()`。
+安装后会自带所有组件说明的样例站。Bundle 包含以下组件之外的内容：
+- 自动根据 src/views 生成 routes
+- lucide icons
+- 竖屏、触屏布尔状态
+- 全局广播通道 `sendMessage`
+- 错误页
+- 外观设置页
+- 各组件示例与源码等，有问题可以直接抄
 
 ## 常用 API
 
@@ -73,26 +37,12 @@ const confirmed = await dialog.result // 确认 true，取消 false，关闭 und
 
 Props、事件、插槽、自定义主题与弹层消息回传见[组件 API](docs/COMPONENTS.md)。
 
-## 创建完整应用
+## 自动发布
 
-```sh
-npm create apptify@latest ./my-app
-cd my-app
-npm install
-npm run dev
-```
-
-也可运行 `npx --package=apptify apptify-playground ./my-app`。
-
-目标目录需为空。模板含导航、设置、账号表单、404 和组件示例，可直接编辑；账号功能需接入自己的后端。复制项目携带库归档，可独立安装。页面开发与部署见[应用模板](docs/PLAYGROUND-TEMPLATE.md)。
+推送到 `main` 后，GitHub Actions 会将尚未发布的 `apptify` 和 `create-apptify` 版本发布到 npm。发布前更新对应的 `package.json` 版本；已发布版本自动跳过，预发布版本使用 `next` 标签。
 
-## 本地开发
-
-```sh
-npm ci
-npm run dev
-```
+在两个 npm 包的 Settings → Trusted Publisher 中选择 GitHub Actions，填写用户 `GARBAGELINUXGRAPHIC`、仓库 `apptify`、工作流文件 `npm-publish.yml`，允许 `npm publish`，环境名留空。使用 OIDC，无需配置或保存 npm token。
 
-建议 Node.js 22 或 24 LTS。检查使用 `npm run typecheck`、`npm test`、`npm run build`、`npm run test:e2e` 和 `npm run test:package`；`npm pack` 自动构建并准备模板。生成器位于 [`packages/create-apptify`](packages/create-apptify/README.md)，使用 `npm run test:create` 验证。历史验证记录见[验证文档](docs/VALIDATION.md)。
+## LICENSE
 
-MIT 许可。Apptify 不是 Apple 官方产品。
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apptify",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "An Apple-inspired, responsive Vue 3 component library.",
   "repository": {
     "type": "git",

package/templates/playground/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview --host 127.0.0.1"
   },
   "dependencies": {
-    "apptify": "^0.5.4",
+    "apptify": "^0.6.0",
     "vue": "^3.5.0",
     "vue-router": "^4.6.4",
     "vuetify": "^3.9.0",

package/templates/playground/source-snapshot.json

@@ -1,6 +1,6 @@
 {
-  "createdAt": "2026-10-04T09:39:13.558Z",
-  "libraryVersion": "0.5.4",
+  "createdAt": "2026-10-04T14:04:37.104Z",
+  "libraryVersion": "0.6.0",
   "files": {
     "index.html": "75f6d93e3962ddca97a13b666a04d98ba9b263b6c288171383db764215034fea",
     "public/images/SOURCES.md": "24ccb6625b1168e48550b7651e9fc20cb747324d87666d39199608c7db20541b",
@@ -17,8 +17,8 @@
     "public/images/sunset.jpg": "4ee91e88f1e341143a807ef48fdfc24d63aa045d99351b4ea8ad7efcfef6ef9b",
     "public/images/waterfall.jpg": "cfd55ff5f41d3a58e91793d0e26a9ca90c86760aa401da033fbfa77d3364f238",
     "src/App.vue": "1c794c9a04e5830cde04e2884a7ab3116e36283a9def63fc4d16cf9eea7151e0",
-    "src/ComponentDemo.vue": "0c3b65ad2bec0da36d01451b0fd2e4c4e6bdb34da0beb2f0b813427fa2eeaa3d",
-    "src/catalog.ts": "3aecd5190d37533ecd9427da3a2c9ed3b18b6f2f04a51c543ff88dfe52070e59",
+    "src/ComponentDemo.vue": "7f8ba3f3fc5c0c4a212383c6bd9d390271f5d9cc058802393ebd18b06be2aaa6",
+    "src/catalog.ts": "688145825314fed7dfb41a22c121a895f8114e3abf96dc812bc7c5186a16fa0c",
     "src/components/ComponentIndex.vue": "55c021899113b7fe26dcf42075f188a49d996e04a992ec9c86410eadc29e68a0",
     "src/components/DirectoryDialog.vue": "ec6191422dad07dff2d710748a3f024bf7828be8b9b70fa16ab474f36ed878d2",
     "src/components/PageFooter.vue": "5e9c1b4ba8866c05216993fb8d605fa826a09739a5ced15068b24334e4814fac",
@@ -46,7 +46,7 @@
     "src/views/component-docs/[component].vue": "3f505550dacb1d8151417df61d0598940aa7d218518179e532ddc962b0632a5e",
     "src/views/components.vue": "a19c4ca87a6a2ed43c4a6dc6eb52d3071733ce787024e1ab305db99b6acc6333",
     "src/views/index.vue": "9afc860da88aebe4879668784da24c657ecba19e5bc3ddad9dbcdd72f84db245",
-    "src/views/settings.vue": "f5f9ca38f99d80fafab75fd33053715faa4265b998f32604af432497215a7c09",
+    "src/views/settings.vue": "1d36c866d1d5b1ec426d1254b31649e54585d3f3b4313ec8eb924f6a0eba456a",
     "tooling/playground-editor.mjs": "128b1ffa1b5660b04f7652130d5474c1f31686c2c8e0e2866f1ebde2594d0b5b",
     "tooling/prepare-input-source.mjs": "91bea35dcfa09735dbaeb5fbed7a70abfe447c3d133f4b4381e6ba0d0d4f9f6a"
   },
@@ -135,8 +135,8 @@
     "src/styles/overlays.css": "bb3d5f7bfc1b3e7a0ecf5ab4f632a65be3f496cb5de0e8c885bd6b6e5dc0f97a",
     "src/styles/ripple.css": "df0a5f661a862b5232bac256958f4bae6f555dd1f4a9c1432f61e85de71bdfea",
     "playground/App.vue": "1c794c9a04e5830cde04e2884a7ab3116e36283a9def63fc4d16cf9eea7151e0",
-    "playground/ComponentDemo.vue": "0c3b65ad2bec0da36d01451b0fd2e4c4e6bdb34da0beb2f0b813427fa2eeaa3d",
-    "playground/catalog.ts": "3aecd5190d37533ecd9427da3a2c9ed3b18b6f2f04a51c543ff88dfe52070e59",
+    "playground/ComponentDemo.vue": "7f8ba3f3fc5c0c4a212383c6bd9d390271f5d9cc058802393ebd18b06be2aaa6",
+    "playground/catalog.ts": "688145825314fed7dfb41a22c121a895f8114e3abf96dc812bc7c5186a16fa0c",
     "playground/components/ComponentIndex.vue": "55c021899113b7fe26dcf42075f188a49d996e04a992ec9c86410eadc29e68a0",
     "playground/components/DirectoryDialog.vue": "ec6191422dad07dff2d710748a3f024bf7828be8b9b70fa16ab474f36ed878d2",
     "playground/components/PageFooter.vue": "5e9c1b4ba8866c05216993fb8d605fa826a09739a5ced15068b24334e4814fac",
@@ -164,7 +164,7 @@
     "playground/views/component-docs/[component].vue": "3f505550dacb1d8151417df61d0598940aa7d218518179e532ddc962b0632a5e",
     "playground/views/components.vue": "a19c4ca87a6a2ed43c4a6dc6eb52d3071733ce787024e1ab305db99b6acc6333",
     "playground/views/index.vue": "9afc860da88aebe4879668784da24c657ecba19e5bc3ddad9dbcdd72f84db245",
-    "playground/views/settings.vue": "f5f9ca38f99d80fafab75fd33053715faa4265b998f32604af432497215a7c09",
+    "playground/views/settings.vue": "1d36c866d1d5b1ec426d1254b31649e54585d3f3b4313ec8eb924f6a0eba456a",
     "public/images/SOURCES.md": "24ccb6625b1168e48550b7651e9fc20cb747324d87666d39199608c7db20541b",
     "public/images/airpods-max-orange.jpg": "f365fe9e374e2cede88f3e68487f6a773a767873978bcf20e4b21dee08aca966",
     "public/images/architecture.jpg": "928ea321954f0edabc1eed3c908c6b1fc93b247badcbd89d8dc5ba237420c26b",
@@ -182,8 +182,8 @@
     "docs/INPUT-WORKSHOP.md": "82ea6db156d2d9be4cfee233675b107c837aaa30a849f92010e988e1df7ce3a0",
     "docs/PLAYGROUND-TEMPLATE.md": "e476d6622e89d8cb04d9acdd54c090e5d559d666bb49f266bcf36d3f3bf8fe67",
     "docs/VALIDATION.md": "3c1755f4699d6b7d8febb44b2b0b00eb416b86559c26d8b69e46a1c98271af5f",
-    "README.md": "95a66c9be54623335683af80d48e2415ae195e3797d624dfa69d042d6ea14958",
-    "package.json": "905ddd2741ce948047ae576fd6715f048cbda60218618617d703397c76df7d0b",
+    "README.md": "1e24796cf31d3d93f34e4edd32b8e1629b1dfdc175f74df573e14b4eb12186ed",
+    "package.json": "677a70164d41c33517f36c661d773d17b4103d6e22fd55f8dc1df3c3bb3d2729",
     "index.html": "75f6d93e3962ddca97a13b666a04d98ba9b263b6c288171383db764215034fea",
     "vite.config.ts": "e2fee737d17c721cefaa33c955c6a7fcd47b46d51a95365768208eb16b608585",
     "vite.lib.config.ts": "f877c1772da70c9fed5174118ca36a0fc25fd46cce49b71280a5f91c4f8003a3",

package/templates/playground/src/ComponentDemo.vue

@@ -123,7 +123,6 @@
       </apple-action-sheet>
     </template>
     <apple-pull-refresh v-else-if="name === 'ApplePullRefresh'" @refresh="refresh"><apple-list :items="[{label:'最新内容',value:'latest',description:refreshText},{label:'最近更新',value:'recent',description:'所有内容已同步'}]" /></apple-pull-refresh>
-    <apple-infinite-scroll v-else-if="name === 'AppleInfiniteScroll'" :finished="itemsCount >= 12" @load="loadMore"><apple-list :items="Array.from({length:itemsCount}, (_, i) => ({label:`灵感收藏 ${i+1}`, value:i, description:'刚刚更新'}))" /></apple-infinite-scroll>
     <template v-else-if="name === 'AppleBackTop'"><apple-button :icon="icons.ArrowUp" variant="secondary" @click="toTop">回到顶部</apple-button><apple-back-top :threshold="0" :fixed="false" /></template>
     <template v-else-if="name === 'AppleFloatingGroup'"><apple-button variant="secondary" @click="notify('快捷操作已就绪')">快捷操作</apple-button><apple-card class="demo-floating-preview"><apple-provider><apple-floating-group :threshold="0" /></apple-provider></apple-card></template>
     <apple-stack v-else-if="name === 'AppleAutoSize'"><apple-switch v-model="checked" label="显示详情" /><apple-auto-size><apple-list :items="checked ? settings : settings.slice(0,1)" selectable /></apple-auto-size></apple-stack>
@@ -135,6 +134,7 @@
         </apple-transition>
       </div>
     </apple-stack>
+    <apple-infinite-scroll v-else-if="name === 'AppleInfiniteScroll'" :finished="itemsCount >= 12" @load="loadMore"><apple-list :items="Array.from({length:itemsCount}, (_, i) => ({label:`灵感收藏 ${i+1}`, value:i, description:'刚刚更新'}))" /></apple-infinite-scroll>
   </div>
 </template>
 

package/templates/playground/src/catalog.ts

@@ -60,11 +60,11 @@ export const catalog: CatalogItem[] = [
   item('AppleMenu', '下拉菜单', '反馈', '按需展开的操作列表。', 'v-model · items[{label,value,disabled,danger,icon,description}] · label · selected | select(value,item)', '<apple-menu :items="actions" label="更多操作" @select="onAction" />'),
   item('AppleActionSheet', '动作面板', '移动交互', '熟悉、直接的移动操作。', 'v-model · title · message · items[{label,value,disabled,danger}] · cancelText | default slot {select(item),close(value)} | select(value,item)', '<apple-action-sheet v-model="open" title="选择操作" @select="onAction">\n  <template #default="{ select }">\n    <apple-button @click="select({ label: \'收藏\', value: \'favorite\' })">加入收藏</apple-button>\n  </template>\n</apple-action-sheet>'),
   item('ApplePullRefresh', '下拉刷新', '移动交互', '轻轻下拉，获取新内容。', 'v-model(refreshing) · threshold · label · disabled | refresh(done)', '<apple-pull-refresh @refresh="async done => { await reload(); done() }">内容</apple-pull-refresh>'),
-  item('AppleInfiniteScroll', '无限滚动', '移动交互', '浏览，不必被翻页打断。', 'loading · finished · error · disabled · distance | load(done), retry(done)', '<apple-infinite-scroll :finished="finished" @load="async done => { await loadMore(); done() }">内容</apple-infinite-scroll>'),
   item('AppleBackTop', '回到顶部', '移动交互', '回到开始，毫不费力。', 'threshold · label', '<apple-back-top :threshold="400" />'),
   item('AppleFloatingGroup', '悬浮操作组', '移动交互', '常用操作，触手可及。', 'backTop · threshold · target · label · motion | default', '<apple-floating-group :threshold="300" />'),
   item('AppleAutoSize', '自适应尺寸', '基础', '内容变化，布局随行。', 'axis(height|both) · motion | default', '<apple-auto-size><div v-if="expanded">详情内容</div></apple-auto-size>'),
   item('AppleTransition', '动效容器', '基础', '为页面保留连续感。', 'name(page|slide-x|slide-y|fade) · mode · appear · motion | default', '<apple-transition name="page"><router-view /></apple-transition>'),
+  item('AppleInfiniteScroll', '无限滚动', '移动交互', '浏览，不必被翻页打断。', 'loading · finished · error · disabled · distance | load(done), retry(done)', '<apple-infinite-scroll :finished="finished" @load="async done => { await loadMore(); done() }">内容</apple-infinite-scroll>'),
 ]
 export const groups = ['全部组件', '基础', '表单', '导航', '数据展示', '反馈', '移动交互']
 

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

@@ -38,7 +38,7 @@
         <div class="settings-section-heading"><div><h2 id="ripple-heading">点击波纹</h2><p>让每一次轻点，都有细微的回应。</p></div></div>
         <apple-switch :model-value="rippleAllowed && apple.ripple.value.enabled" :disabled="!rippleAllowed" label="点击波纹" :hint="rippleAllowed ? '减弱动效时自动关闭，可手动开启；偏好保存在这台设备上。' : '关闭动效时，无法开启点击波纹。'" @update:model-value="apple.ripple.value.set" />
         <div ref="rippleDemo" class="effect-demo ripple-sample" aria-label="波纹自动演示" @pointerenter="ripplePaused = true" @pointerleave="ripplePaused = false" @focusin="ripplePaused = true" @focusout="ripplePaused = false">
-          <apple-button @click="rippleDemoClicks++">试试点击波纹</apple-button>
+          <apple-button variant="outline" @click="rippleDemoClicks++">试试点击波纹</apple-button>
           <span class="ripple-click-count">已点击 {{ rippleDemoClicks }} 次</span>
         </div>
         <div class="settings-card-foot">{{ rippleAllowed && apple.ripple.value.enabled ? '自动点击 · 也可以手动试一试' : '点击波纹已关闭 · 静态展示' }}</div>
@@ -127,7 +127,6 @@ const glassPreviewChoice = ref('1')
 const glassPreviewItems = [
   { label: 'Item 1', value: '1', description: 'Item 1' },
   { label: 'Item 2', value: '2', description: 'Item 2' },
-  { label: 'Item 3', value: '3', description: 'Item 3' },
 ]
 function formatOpacity(value: number) { return `${Number(value.toFixed(1))}%` }
 function formatBlur(value: number) { return `${value}px` }

package/tooling/test-playground-package.mjs

@@ -2,6 +2,7 @@ import assert from 'node:assert/strict'
 import { cp, mkdir, mkdtemp, readFile, rm, writeFile } from 'node:fs/promises'
 import { join, resolve } from 'node:path'
 import { tmpdir } from 'node:os'
+import { createServer } from 'node:net'
 import { createHash } from 'node:crypto'
 import { execFileSync, spawn } from 'node:child_process'
 import { fileURLToPath } from 'node:url'
@@ -70,7 +71,14 @@ if (hasConsumerTypes) {
 }
 
 async function serve() {
-  const child = spawn(npm, ['run', 'dev', '--', '--host', '127.0.0.1', '--port', '0', '--strictPort'], { cwd: app, stdio: ['ignore', 'pipe', 'pipe'], detached: process.platform !== 'win32' })
+  const reservation = createServer()
+  await new Promise((resolve, reject) => {
+    reservation.once('error', reject)
+    reservation.listen(0, '127.0.0.1', resolve)
+  })
+  const port = reservation.address().port
+  await new Promise((resolve, reject) => reservation.close(error => error ? reject(error) : resolve()))
+  const child = spawn(npm, ['run', 'dev', '--', '--host', '127.0.0.1', '--port', String(port), '--strictPort'], { cwd: app, stdio: ['ignore', 'pipe', 'pipe'], detached: process.platform !== 'win32' })
   const stop = () => {
     if (process.platform !== 'win32') { try { process.kill(-child.pid, 'SIGTERM') } catch {} }
     else child.kill('SIGTERM')
@@ -121,7 +129,7 @@ try {
     const image = page.locator('#apple-image img').first()
     await image.scrollIntoViewIfNeeded()
     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 page.locator('.component-index [role=treeitem][aria-selected=true]').first().waitFor()
   })
   await checkPage(server.url, '/component-docs/apple-input', async page => {
     const frame = page.frameLocator('[data-testid="input-playground"] .vue-repl iframe')
@@ -135,8 +143,8 @@ try {
     await page.getByRole('slider', { name: '玻璃不透明度', exact: true }).waitFor()
     await page.getByRole('button', { name: '打开用户菜单', exact: true }).click()
     await page.getByRole('button', { name: /登录 Login/ }).click()
-    await page.getByLabel('电子邮箱', { exact: true }).fill('template@example.com')
-    await page.getByLabel('密码', { exact: true }).fill('template-password')
+    await page.locator('.user-auth-form').getByRole('textbox', { name: /^电子邮箱/ }).fill('template@example.com')
+    await page.locator('.user-auth-form').getByLabel(/^密码/).fill('template-password')
     assert.equal(await page.locator('.user-auth-form input[type=password]').count(), 1)
     await settledScreenshot(page, 'settings-login-320.png')
   })