@sheryuwei/fly-ui

一个现代化的 Vue 3 组件库，专注于提供高质量、可复用的 UI 组件。

✨ 特性

• 🎯 TypeScript 支持 - 完整的类型定义
• 📦 按需导入 - 支持 tree-shaking，减小包体积
• 🎨 高度可定制 - 灵活的主题配置和样式定制
• 📱 响应式设计 - 适配多种屏幕尺寸
• 🧪 全面测试 - 完整的单元测试覆盖
• 🔧 开发友好 - 优秀的开发体验和文档
• ⚡ 双构建系统 - 同时支持 unbuild 和 vite 构建

📦 安装

# npm
npm install @sheryuwei/fly-ui

# yarn  
yarn add @sheryuwei/fly-ui

# pnpm
pnpm add @sheryuwei/fly-ui

🚀 快速开始

本库提供了两种构建产物，你可以根据需要选择：

方式一：使用 Vite 构建版本（推荐）

适用于现代构建工具，包含完整的 Vue 组件和样式：

<script setup>
// 导入组件和样式
import Timeline from '@sheryuwei/fly-ui/vite/timeline.es.js'
import '@sheryuwei/fly-ui/vite/fly-ui.css'

const timelineItems = [
  {
    key: '1',
    label: '第一步',
    children: '创建一个服务',
    timestamp: '2024-01-01',
    color: '#00b96b'
  }
]
</script>

<template>
  <Timeline :items="timelineItems" />
</template>

方式二：从源文件导入（灵活性最高）

<script setup>
// 从源文件导入组件
import Timeline from '@sheryuwei/fly-ui/src/Timeline/index.vue'
import TimelineItem from '@sheryuwei/fly-ui/src/Timeline/TimelineItem.vue'

const timelineItems = [
  {
    key: '1',
    label: '第一步',
    children: '创建一个服务',
    timestamp: '2024-01-01',
    color: '#00b96b'
  },
  {
    key: '2', 
    label: '第二步',
    children: '解决网络问题',
    timestamp: '2024-01-02',
    color: '#1890ff'
  }
]
</script>

<template>
  <Timeline :items="timelineItems" />
</template>

方式三：导入工具函数

// 导入类型定义和工具函数
import type { TimelineProps, TimelineItemData } from '@sheryuwei/fly-ui'
import { format } from '@sheryuwei/fly-ui'

📦 构建产物

本库同时提供了两种构建方式的产物：

Unbuild 版本

• 📁 dist/index.mjs - ES 模块
• 📁 dist/index.cjs - CommonJS 模块
• 📁 dist/index.d.ts - TypeScript 类型声明
• ⚡ 轻量级，主要包含工具函数和类型定义

Vite 版本

• 📁 dist/vite/index.es.js - 主入口 ES 模块
• 📁 dist/vite/timeline.es.js - 时间线组件 ES 模块
• 📁 dist/vite/index.cjs.js - 主入口 CommonJS 模块
• 📁 dist/vite/timeline.cjs.js - 时间线组件 CommonJS 模块
• 📁 dist/vite/fly-ui.css - 组件样式文件
• 📁 dist/vite/*.d.ts - TypeScript 类型声明
• 🎨 完整版本，包含编译好的 Vue 组件和样式

🔧 组件

Timeline 时间线

时间线组件用于展示时间流信息，支持多种显示模式和丰富的自定义选项。

特性

• 📝 数据驱动和插槽两种使用方式
• 🎨 多种显示模式：左对齐、右对齐、交替显示、居中显示
• 🌈 自定义节点颜色、图标和内容
• 📱 支持水平和垂直布局
• 👆 可点击交互功能
• 🕐 时间戳显示控制

API

Timeline Props

| 属性 | 类型 | 默认值 | 说明 | |-----|-----|--------|------| | items | TimelineItemData[] | [] | 时间线数据 | | mode | 'left' \| 'right' \| 'alternate' \| 'center' | 'left' | 时间线模式 | | direction | 'vertical' \| 'horizontal' | 'vertical' | 时间线方向 | | showTimestamp | boolean | true | 是否显示时间戳 | | clickable | boolean | false | 是否可点击 |

Timeline Events

| 事件名 | 说明 | 回调参数 | |-------|------|----------| | itemClick | 点击时间线项时触发 | (item: TimelineItemData, index: number) |

TimelineItem Props

| 属性 | 类型 | 默认值 | 说明 | |-----|-----|--------|------| | color | string | '#1890ff' | 节点颜色 | | dot | string \| VNode | - | 自定义点元素 | | label | string | - | 节点标签 | | children | string \| VNode | - | 子节点内容 | | position | 'left' \| 'right' | 'left' | 节点位置 | | timestamp | string | - | 时间戳 | | isLast | boolean | false | 是否为最后一个节点 |

使用示例

数据驱动模式

<script setup>
import Timeline from '@sheryuwei/fly-ui/src/Timeline/index.vue'

const items = [
  {
    key: '1',
    label: '项目启动',
    children: '确定项目目标和范围',
    timestamp: '2024-01-01',
    color: '#52c41a'
  },
  {
    key: '2',
    label: '需求分析', 
    children: '收集和分析用户需求',
    timestamp: '2024-01-15',
    color: '#1890ff'
  }
]

function handleClick(item, index) {
  console.log('点击了:', item.label, index)
}
</script>

<template>
  <Timeline :items="items" mode="alternate" clickable @itemClick="handleClick" />
</template>

插槽模式

<script setup>
import Timeline from '@sheryuwei/fly-ui/src/Timeline/index.vue'
import TimelineItem from '@sheryuwei/fly-ui/src/Timeline/TimelineItem.vue'
</script>

<template>
  <Timeline>
    <TimelineItem color="#52c41a" label="开始" timestamp="2024-01-01">
      项目正式启动
    </TimelineItem>
    
    <TimelineItem color="#1890ff" label="进行中" timestamp="2024-01-15">
      <template #dot>
        <div style="width: 16px; height: 16px; background: linear-gradient(45deg, #ff6b6b, #4ecdc4); border-radius: 50%;" />
      </template>
      开发阶段
    </TimelineItem>
    
    <TimelineItem color="#f5222d" label="完成" timestamp="2024-02-01" is-last>
      项目交付
    </TimelineItem>
  </Timeline>
</template>

🎨 演示

打开 demo.html 文件可以查看完整的组件演示效果。

🔨 开发

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建（同时运行两种构建方式）
pnpm build

# 单独运行 unbuild 构建
pnpm build:unbuild

# 单独运行 vite 构建  
pnpm build:vite

# 运行测试
pnpm test

# 代码检查
pnpm lint

📄 License

ISC

🤝 贡献

欢迎提交 issues 和 pull requests 来帮助改进这个项目。

1. Fork 项目
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

📞 联系

如有问题或建议，请通过以下方式联系：

• 📧 Email: [email protected]