zt-ios-comp

zt-ios-comp

纯 Vue 3 + TypeScript 多端组件库，提供 iOS、SaaS、Website 与 Foundation 四个领域。发布包不包含 Playground、React 或 React UI 依赖。

安装

npm install zt-ios-comp vue

Vue >=3.5 是必需 peer。普通组件无需安装 Vue Router、Tailwind 或 shadcn。

公共入口

import * as All from "zt-ios-comp"
import * as Ios from "zt-ios-comp/ios"
import * as Saas from "zt-ios-comp/saas"
import * as Website from "zt-ios-comp/website"
import * as Foundation from "zt-ios-comp/foundation"

推荐按领域子路径导入，以获得更明确的边界和 tree-shaking。zt-ios-comp/style.css 只包含 Foundation / iOS / SaaS 样式，不再自动带 Website（含 BackgroundBeams）。Website 组件从 zt-ios-comp/website 导入，并显式加载 zt-ios-comp/website/style.css。领域样式分别为 zt-ios-comp/ios/style.css、zt-ios-comp/saas/style.css、zt-ios-comp/website/style.css 和 zt-ios-comp/foundation/style.css。

可选能力

• 仅使用 IosRouterTabBar 或路由辅助类型时安装 vue-router；普通组件不会静态加载 Router。
• Lucide 是默认图标实现。Tabler、Hugeicons、Phosphor 和 Remixicon 是可选 peer，安装后分别导入 zt-ios-comp/icons/tabler、hugeicons、phosphor 或 remixicon 注册 adapter；未安装的 adapter 会回退到缺省图标。
• DataTable、Calendar、Carousel 与 Toast 所需的 Vue 运行依赖已由本包声明；消费者无需安装对应 React 实现。

组件包同时提供 ESM、CJS、.d.ts 和预编译 CSS。构建后的 CSS 已包含组件与主题规则，消费者无需配置 Tailwind content/source。

SaaS / Website 排版

业务域默认原生字体，Windows 字体链通过 html[data-font-platform="windows"] 显式启用。推荐以 data-zt-domain="website" 或 data-zt-domain="saas" 容器使用 .text-page-title、.text-title、.text-body、.article-content、.table-number 和 .technical-id 等角色类；SaaS 正文默认 0.875rem，Website 为 1rem，宿主根字号由应用负责。

局部 .typography-admin / .typography-website 选择密度，独立于字体平台。中文和混排默认零字距；独立英语文本叶节点需专用 .text-latin-title / .text-latin-hero 等类及自身真实 lang="en" 才启用收紧。数字格式由业务负责，等宽数字只对数字角色生效。

两域样式已包含共享排版，不额外加载外部规范 CSS。iOS 保留自己的字体和 Dynamic Type。现有控件主题继续生效，导入库不会设置 html/body 字号或覆盖通用 .button / .tag；这次更新不表示所有历史组件都已完成排版迁移。完整审计、接入范围及验收限制见工作区 docs/business-typography-v2-audit.md。

本地包验证

pnpm --filter zt-ios-comp typecheck
pnpm --filter zt-ios-comp build
pnpm --filter zt-ios-comp pack:local

对外发布与兼容性

当前 2.0.0 是公开发布版本。它要求 Node >=20.19.0、pnpm >=12 和 Vue >=3.5。

import { IosButton } from "zt-ios-comp/ios"
import "zt-ios-comp/ios/style.css"

按领域导入可以减少无关代码：

import { Button, Input } from "zt-ios-comp/saas"
import "zt-ios-comp/saas/style.css"

完整的发布门槛、CI 命令、支持范围和已知适配边界见 公开发布指南。Preline 对标的逐项证据见 适配验收矩阵。

Website 组件必须从 zt-ios-comp/website 导入，并显式加载 zt-ios-comp/website/style.css。根入口不会自动加载 Website 样式。