apptify 0.5.4 → 0.6.1

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.1",
   "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.1",
     "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-04T16:10:51.852Z",
+  "libraryVersion": "0.6.1",
   "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,15 +182,16 @@
     "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": "780f0e2ce21421eb0b71c16ec19ab4d1276e94293e8be0ab1d7f1248296e999f",
     "index.html": "75f6d93e3962ddca97a13b666a04d98ba9b263b6c288171383db764215034fea",
     "vite.config.ts": "e2fee737d17c721cefaa33c955c6a7fcd47b46d51a95365768208eb16b608585",
     "vite.lib.config.ts": "f877c1772da70c9fed5174118ca36a0fc25fd46cce49b71280a5f91c4f8003a3",
     "tsconfig.json": "09590870bfbf6e90614d8a34af38b9a72902e8747ecd1a76be47ab24c842f9ea",
     "tsconfig.lib.json": "c885806b003cee01192cddcaf32df3e7c6d369e645360398aa088c14b1c4792f",
-    "tooling/create-playground.mjs": "c45480c5982a64efd06f69dfb4620c65fd8ea35d01877b8574e7e2b30c095606",
+    "tooling/create-playground.mjs": "1252ef947ec8c1b3e0ca5d8c76cadacf69485aed5a181b866815cc9ed4658cc1",
+    "tooling/npm-command.mjs": "51c08c53cd395e32ec9b71b258dafadcdad3e6b227090d5b7bfbe55b9d0a97ba",
     "tooling/prepare-playground.mjs": "3a624b4966613a14e4f44a25555f25c564ea0fe69e5c68922c2ff5d21e1e2769",
-    "tooling/prepare-package.mjs": "cf57a112eec798412e2a68089d1b2d25b984600d6ffef99397ec253abf2fca57"
+    "tooling/prepare-package.mjs": "a663ad0343bee2e711cdbc1c497daa89edc20752c67f17fc45d5173c6807b66b"
   }
 }

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/create-playground.mjs

@@ -3,6 +3,7 @@ import { cp, mkdir, readFile, readdir, rename, writeFile } from 'node:fs/promise
 import { resolve, join, sep } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { execFileSync } from 'node:child_process'
+import { npmCommand } from './npm-command.mjs'
 
 const root = fileURLToPath(new URL('../', import.meta.url))
 const destination = process.argv[2]
@@ -23,8 +24,8 @@ try {
   await rename(join(target, 'gitignore'), join(target, '.gitignore'))
   const vendor = join(target, 'vendor')
   await mkdir(vendor)
-  const npm = process.platform === 'win32' ? 'npm.cmd' : 'npm'
-  const packed = JSON.parse(execFileSync(npm, ['pack', '--ignore-scripts', '--json', '--loglevel=error', '--pack-destination', vendor], { cwd: root, encoding: 'utf8' }))
+  const npm = npmCommand()
+  const packed = JSON.parse(execFileSync(npm.command, [...npm.args, 'pack', '--ignore-scripts', '--json', '--loglevel=error', '--pack-destination', vendor], { cwd: root, encoding: 'utf8' }))
   const manifest = JSON.parse(await readFile(join(target, 'package.json'), 'utf8'))
   manifest.dependencies.apptify = 'file:./vendor/' + packed[0].filename
   await writeFile(join(target, 'package.json'), JSON.stringify(manifest, null, 2) + '\n')

package/tooling/npm-command.mjs

@@ -0,0 +1,16 @@
+import { existsSync, realpathSync } from 'node:fs'
+import { delimiter, dirname, join } from 'node:path'
+
+// Run npm through Node so Windows .cmd shims never need shell quoting.
+export function npmCommand(env = process.env) {
+  const candidates = [env.npm_execpath, join(dirname(process.execPath), 'node_modules/npm/bin/npm-cli.js')]
+  for (const directory of (env.PATH ?? env.Path ?? '').split(delimiter)) {
+    if (!directory) continue
+    candidates.push(join(directory, 'node_modules/npm/bin/npm-cli.js'))
+    const executable = join(directory, 'npm')
+    if (existsSync(executable)) candidates.push(realpathSync(executable))
+  }
+  const cli = candidates.find(path => path?.endsWith('npm-cli.js') && existsSync(path))
+  if (!cli) throw new Error('Cannot find npm-cli.js. Install npm alongside Node.js or set npm_execpath to its entry point.')
+  return { command: process.execPath, args: [cli] }
+}

package/tooling/prepare-package.mjs

@@ -4,6 +4,7 @@ import { join, relative } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { createHash } from 'node:crypto'
 import { execFileSync } from 'node:child_process'
+import { npmCommand } from './npm-command.mjs'
 
 const root = fileURLToPath(new URL('../', import.meta.url))
 async function sourceHashes() {
@@ -20,12 +21,12 @@ async function sourceHashes() {
     }
   }
   for (const name of ['src', 'playground', 'public', 'docs']) await directory(join(root, name))
-  for (const name of ['README.md', 'package.json', 'index.html', 'vite.config.ts', 'vite.lib.config.ts', 'tsconfig.json', 'tsconfig.lib.json', 'tooling/create-playground.mjs', 'tooling/prepare-playground.mjs', 'tooling/prepare-package.mjs']) await record(join(root, name))
+  for (const name of ['README.md', 'package.json', 'index.html', 'vite.config.ts', 'vite.lib.config.ts', 'tsconfig.json', 'tsconfig.lib.json', 'tooling/create-playground.mjs', 'tooling/npm-command.mjs', 'tooling/prepare-playground.mjs', 'tooling/prepare-package.mjs']) await record(join(root, name))
   return files
 }
 const before = await sourceHashes()
-const npm = process.platform === 'win32' ? 'npm.cmd' : 'npm'
-execFileSync(npm, ['run', 'build'], { cwd: root, stdio: 'inherit' })
+const npm = npmCommand()
+execFileSync(npm.command, [...npm.args, 'run', 'build'], { cwd: root, stdio: 'inherit' })
 execFileSync(process.execPath, [join(root, 'tooling/prepare-playground.mjs')], { cwd: root, stdio: 'inherit' })
 assert.deepEqual(await sourceHashes(), before, 'Sources changed during the build; rerun packing to take the latest snapshot. No source file was restored.')
 const snapshotPath = join(root, 'templates/playground/source-snapshot.json')

package/tooling/test-create-apptify.mjs

@@ -1,13 +1,14 @@
 import assert from 'node:assert/strict'
-import { mkdir, mkdtemp, readFile, readdir, rm, symlink, writeFile } from 'node:fs/promises'
+import { chmod, 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'
 import { execFileSync, spawnSync } from 'node:child_process'
+import { npmCommand } from './npm-command.mjs'
 
 const root = fileURLToPath(new URL('../', import.meta.url))
 const scratch = await mkdtemp(join(tmpdir(), 'create-apptify-test-'))
-const npm = process.platform === 'win32' ? 'npm.cmd' : 'npm'
+const npm = npmCommand()
 const env = { ...process.env, npm_config_cache: join(scratch, 'cache'), npm_config_offline: 'true' }
 const installer = join(scratch, 'installer')
 const creator = join(installer, 'node_modules/create-apptify')
@@ -15,7 +16,7 @@ const library = join(installer, 'node_modules/apptify')
 const cli = join(creator, 'bin/create-apptify.mjs')
 
 async function unpack(cwd, destination) {
-  const packed = JSON.parse(execFileSync(npm, ['pack', '--ignore-scripts', '--json', '--pack-destination', scratch], { cwd, env, encoding: 'utf8' }))[0]
+  const packed = JSON.parse(execFileSync(npm.command, [...npm.args, 'pack', '--ignore-scripts', '--json', '--pack-destination', scratch], { cwd, env, encoding: 'utf8' }))[0]
   await mkdir(destination, { recursive: true })
   execFileSync('tar', ['-xzf', join(scratch, packed.filename), '--strip-components=1', '-C', destination])
   return packed
@@ -27,9 +28,15 @@ try {
   const packed = await unpack(join(root, 'packages/create-apptify'), creator)
   const files = new Set(packed.files.map(file => file.path))
   for (const path of ['package.json', 'bin/create-apptify.mjs', 'README.md', 'LICENSE']) assert(files.has(path), 'Missing creator file: ' + path)
-  await unpack(root, library)
+  const libraryPacked = await unpack(root, library)
+  assert(libraryPacked.files.some(file => file.path === 'tooling/npm-command.mjs'), 'Missing npm launcher in library tarball')
   await mkdir(join(installer, 'node_modules/.bin'))
-  await symlink('../create-apptify/bin/create-apptify.mjs', join(installer, 'node_modules/.bin/create-apptify'))
+  if (process.platform === 'win32') {
+    await writeFile(join(installer, 'node_modules/.bin/create-apptify.cmd'), '@echo off\r\n"' + process.execPath + '" "%~dp0\\..\\create-apptify\\bin\\create-apptify.mjs" %*\r\n')
+  } else {
+    await chmod(cli, 0o755)
+    await symlink('../create-apptify/bin/create-apptify.mjs', join(installer, 'node_modules/.bin/create-apptify'))
+  }
   await writeFile(join(installer, 'package.json'), JSON.stringify({ private: true, dependencies: { 'create-apptify': packed.version } }) + '\n')
 
   const run = (args, cwd = installer) => spawnSync(process.execPath, [cli, ...args], { cwd, env, encoding: 'utf8' })
@@ -41,8 +48,8 @@ try {
   assert.equal(run(['--unknown']).status, 1)
   assert.equal(run(['one', 'two']).status, 1)
 
-  const app = join(scratch, 'my app')
-  const result = spawnSync(npm, ['create', 'apptify', '--offline', '--', app], { cwd: installer, env, encoding: 'utf8', timeout: 60_000 })
+  const app = join(scratch, 'my app & (demo)')
+  const result = spawnSync(npm.command, [...npm.args, 'create', 'apptify', '--offline', '--', app], { cwd: installer, env, encoding: 'utf8', timeout: 60_000 })
   assert.equal(result.status, 0, result.stdout + result.stderr)
   const manifest = JSON.parse(await readFile(join(app, 'package.json'), 'utf8'))
   assert.match(manifest.dependencies.apptify, /^file:\.\/vendor\/apptify-/)
@@ -62,7 +69,7 @@ try {
   assert.equal(await readFile(join(app, 'package.json'), 'utf8'), before)
   assert.equal(run([join(library, 'unsafe')]).status, 1)
   const alias = join(scratch, 'library-alias')
-  await symlink(library, alias, 'dir')
+  await symlink(library, alias, process.platform === 'win32' ? 'junction' : 'dir')
   assert.equal(run([join(alias, 'unsafe')]).status, 1)
 
   const empty = join(scratch, 'existing-empty')

package/tooling/test-playground-package.mjs

@@ -2,21 +2,23 @@ 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'
 import { chromium, expect } from '@playwright/test'
+import { npmCommand } from './npm-command.mjs'
 
 const root = fileURLToPath(new URL('../', import.meta.url))
 const scratch = await mkdtemp(join(tmpdir(), 'apptify-package-'))
-const npm = process.platform === 'win32' ? 'npm.cmd' : 'npm'
-const run = (args, cwd = root) => execFileSync(npm, args, { cwd, stdio: 'inherit', timeout: 240_000 })
+const npm = npmCommand()
+const run = (args, cwd = root) => execFileSync(npm.command, [...npm.args, ...args], { cwd, stdio: 'inherit', timeout: 240_000 })
 console.log('Package acceptance workspace: ' + scratch)
 const archiveInput = process.argv[2] ? resolve(process.argv[2]) : undefined
 const archiveSha256 = archiveInput ? createHash('sha256').update(await readFile(archiveInput)).digest('hex') : undefined
 const packArgs = ['pack', '--ignore-scripts', '--json', '--loglevel=error', '--pack-destination', scratch]
 if (archiveInput) packArgs.push(archiveInput)
-const packed = JSON.parse(execFileSync(npm, packArgs, { cwd: root, encoding: 'utf8' }))[0]
+const packed = JSON.parse(execFileSync(npm.command, [...npm.args, ...packArgs], { cwd: root, encoding: 'utf8' }))[0]
 const contents = new Set(packed.files.map(file => file.path))
 const snapshot = archiveInput
   ? JSON.parse(execFileSync('tar', ['-xOf', join(scratch, packed.filename), 'package/templates/playground/source-snapshot.json'], { encoding: 'utf8' }))
@@ -70,7 +72,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.command, [...npm.args, '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 +130,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 +144,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')
   })