pixel-flow-vue 1.0.16 → 1.0.18

package/README.md

@@ -1,5 +1,228 @@
-# Vue 3 + TypeScript + Vite
+# Pixel Flow Vue
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+一个基于 Vue 3 和 Vant UI 的移动端业务组件库，专为电商场景设计，提供常用的页面组件。
 
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+## 功能特性
+
+- ✨ 基于 Vue 3 Composition API
+- 📦 轻量级组件库
+- 🎨 预设电商常用组件
+- 📝 完整的 TypeScript 支持
+- 🎯 按需引入
+
+## 安装
+
+```bash
+npm install pixel-flow-vue vant
+# 或者
+yarn add pixel-flow-vue vant
+# 或者
+pnpm add pixel-flow-vue vant
+```
+
+## 快速开始
+
+### 完整引入
+
+```typescript
+import { createApp } from 'vue'
+import App from './App.vue'
+import Vant, { Lazyload } from 'vant'
+import 'vant/lib/index.css'
+import pixelFlowVue from 'pixel-flow-vue'
+import 'pixel-flow-vue/dist/pixel-flow-vue.css'
+
+const app = createApp(App)
+app.use(Vant)
+app.use(Lazyload)
+app.use(pixelFlowVue)
+app.mount('#app')
+```
+
+### 按需引入
+
+```typescript
+import { createApp } from 'vue'
+import App from './App.vue'
+import Vant, { Lazyload } from 'vant'
+import 'vant/lib/index.css'
+import { hxButton, hxAdGrid, hxBannerSwipe, hxHotSaleList } from 'pixel-flow-vue'
+import 'pixel-flow-vue/dist/pixel-flow-vue.css'
+
+const app = createApp(App)
+app.use(Vant)
+app.use(Lazyload)
+app.use(hxButton)
+app.use(hxAdGrid)
+app.use(hxBannerSwipe)
+app.use(hxHotSaleList)
+app.mount('#app')
+```
+
+## 组件列表
+
+### 1. hx-button
+
+基础按钮组件
+
+```vue
+<template>
+  <hx-button />
+</template>
+```
+
+### 2. hx-adgrid
+
+三图广告位组件
+
+```vue
+<template>
+  <hx-adgrid />
+</template>
+```
+
+**数据结构：**
+
+```typescript
+import type { AdItem } from 'pixel-flow-vue'
+
+const adItem: AdItem = {
+  id: 1,
+  imageUrl: 'https://example.com/image.jpg',
+  linkUrl: 'https://example.com',
+  title: '广告标题'
+}
+```
+
+### 3. hx-banner-swipe
+
+轮播图组件
+
+```vue
+<template>
+  <hx-banner-swipe />
+</template>
+```
+
+**数据结构：**
+
+```typescript
+import type { BannerItem } from 'pixel-flow-vue'
+
+const bannerItem: BannerItem = {
+  id: 1,
+  imageUrl: 'https://example.com/banner.jpg',
+  linkUrl: 'https://example.com',
+  title: '轮播标题'
+}
+```
+
+### 4. hx-hotSaleList
+
+热卖商品列表组件
+
+```vue
+<template>
+  <hx-hotSaleList title="热卖推荐" />
+</template>
+```
+
+**Props：**
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| title | 标题 | string | '热卖推荐' |
+
+**数据结构：**
+
+```typescript
+import type { ProductItem } from 'pixel-flow-vue'
+
+const productItem: ProductItem = {
+  id: 1,
+  name: '商品名称',
+  price: '99.99',
+  imageUrl: 'https://example.com/product.jpg',
+  linkUrl: 'https://example.com/product'
+}
+```
+
+## 类型定义
+
+```typescript
+// 轮播图单项
+interface BannerItem {
+  id: string | number
+  imageUrl: string
+  linkUrl?: string
+  title?: string
+}
+
+// 广告位单项
+interface AdItem {
+  id: string | number
+  imageUrl: string
+  linkUrl?: string
+  title?: string
+}
+
+// 商品项
+interface ProductItem {
+  id: string | number
+  name: string
+  price: string | number
+  imageUrl: string
+  linkUrl?: string
+}
+
+// 主题商品项
+interface ThemeProductItem extends ProductItem {
+  tag?: string
+  originalPrice: string | number
+}
+```
+
+## 依赖说明
+
+本组件库依赖以下库，请确保项目中已正确安装：
+
+- `vue`: ^3.0.0
+- `vant`: ^4.0.0 || ^5.0.0
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 开发模式
+npm run dev
+
+# 构建
+npm run build
+
+# 预览
+npm run preview
+```
+
+## 项目结构
+
+```
+pixel-flow-vue/
+├── dist/                # 构建输出
+├── examples/            # 示例代码
+├── packages/            # 组件源码
+│   ├── hx-adgrid/       # 广告位组件
+│   ├── hx-banner-swipe/ # 轮播图组件
+│   ├── hx-button/       # 按钮组件
+│   ├── hx-hotsaleList/  # 热卖列表组件
+│   ├── index.ts         # 组件入口
+│   └── types.ts         # 类型定义
+├── package.json
+├── vite.config.ts
+└── pixel-flow-vue.d.ts  # 类型声明
+```
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixel-flow-vue",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "type": "module",
   "main": "dist/pixel-flow-vue.umd.js",
   "module": "dist/pixel-flow-vue.es.js",
@@ -15,7 +15,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "sass": "^1.101.0"
+    "sass": "^1.101.0",
+    "unocss": "^66.7.2"
   },
   "peerDependencies": {
     "vant": "^4.0.0 || ^5.0.0",