zy-web — Web 端组件库

智游联盟 Web 端组件库（Vue 3 · Vite · px/rem 单位） 与 zy-ui（小程序端）共享 DESIGN.md 设计规范，组件接口完全一致

当前状态

• ✅ 工程骨架：package.json / vite.config.ts（库模式构建）
• ✅ 设计令牌：src/styles/tokens.scss（DESIGN.md 全套变量，px 单位）
• ✅ 组件：ZySegment / Button / Card / NavBar / Tabs / Input / Table / Modal
• ✅ 独立预览：previews/（文档站嵌入）

目录结构

zy-web/
├── package.json              ← npm 包配置（@zhiyou/zy-web）
├── vite.config.ts            ← 组件库构建（库模式）
├── README.md                 ← 本文件
├── src/                      ← 源码（与 zy-ui 完全镜像）
│   ├── index.ts              ← 统一导出入口
│   ├── styles/
│   │   └── tokens.scss       ← 设计令牌（对应 DESIGN.md）
│   └── components/
│       ├── ZySegment.vue     ← 分段选择器（已完成）
│       └── ...
└── previews/                 ← 组件独立预览（文档站嵌入）

结构与 zy-ui（小程序端）完全镜像。用法看文档站。

目录约定

| 目录 | 文件 | 说明 | |------|------|------| | src/components/ | ZyXxx.vue | 组件源码 | | previews/ | ZyXxx.html | 独立预览页 |

与小程序版的对应关系

| 维度 | zy-ui（小程序） | zy-web（Web） | |------|----------------|---------------| | 单位 | rpx | px（rpx ÷ 2） | | 交互 | 触摸（hover-class） | 鼠标（:hover / :active）+ 键盘 | | 组件 | ZySegment ✅ | ZySegment ✅ | | 接口 | Props / Events / Slots | 完全一致 |

组件开发顺序（对应 ARCHITECTURE.md）

1. ✅ ZySegment — 分段选择器
2. ✅ ZyButton / ZyCard / ZyNavBar / ZyTabs — 页面骨架
3. ✅ ZyInput / ZyTable — 数据展示（MetricGrid / Badge / List 待做）
4. ✅ ZyModal — 交互（Empty 待做）
5. ZyForm / ZyPagination / ZyDrawer / ZyMessage / ZyDropdown / ZySwitch / ZyRow / ZyCol / ZyContainer — Web 特有

使用方式

开发中（源码直接引用）：

<script setup>
import ZySegment from './src/components/ZySegment.vue'
import './src/styles/tokens.scss' // 引入设计令牌
</script>

发布后（npm 包）：

npm install @zhiyou/zy-web

<script setup>
import { ZySegment } from '@zhiyou/zy-web'
</script>

设计规范

所有设计规则查阅 ../DESIGN.md，zy-web 与 zy-ui 共享同一套规范。