npm.io
1.2.2 • Published 8 months ago

sia-ui

Licence
ISC
Version
1.2.2
Deps
2
Size
686 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

SIA UI 组件库

一个基于 Vue 3 + TypeScript + Vite 的现代化 UI 组件库，提供丰富的数据可视化和交互组件。

特性

  • 丰富的组件: 包含数据可视化、表单、布局等 30+ 个组件
  • TypeScript: 完整的 TypeScript 类型支持
  • 响应式: 支持移动端和桌面端
  • 性能优化: v1.2.0+ 外部化大型依赖，包体积更小
  • Playground: 所有组件支持在线实时编辑预览
  • CDN 友好: 支持 CDN 引入，适合快速原型开发

安装

基础安装
# 安装组件库
npm install sia-ui

# 安装必需的 peer 依赖
npm install vue@^3.3.0
完整安装（推荐）

如果您的项目需要使用数据可视化和高级组件：

# 安装组件库和所有依赖
npm install sia-ui vue@^3.3.0 element-plus@^2.0.0 echarts@^5.0.0

# 安装样式
# 样式已包含在 sia-ui/dist/style.css 中
依赖说明

必需依赖（peerDependencies）：

  • vue@^3.3.0 - 必须安装

可选依赖（部分组件需要）：

  • element-plus@^2.0.0 - 部分组件基于 Element Plus
  • echarts@^5.0.0 - 图表组件需要

为什么要单独安装依赖？

  • 包体积更小（从 5MB+ 降至 ~500KB）
  • 避免版本冲突
  • 更好的 tree-shaking
  • 您可以选择是否需要这些依赖

快速开始

完整引入
import { createApp } from 'vue'
import SiaUI from 'sia-ui'
import 'sia-ui/dist/style.css'
import 'element-plus/dist/index.css'  // 如果使用了 Element Plus 相关组件

const app = createApp(App)
app.use(SiaUI)
app.mount('#app')
按需引入（推荐）
// 使用大写别名导入（推荐）
import { Button, Table, Charts } from 'sia-ui'
import 'sia-ui/dist/style.css'

export default {
  components: {
    Button,    // 在模板中使用 <s-button>
    Table,     // 在模板中使用 <s-table>
    Charts     // 在模板中使用 <s-chart>
  }
}

或使用原始命名：

import { sButton, sTable, sChart } from 'sia-ui'

export default {
  components: {
    sButton,   // 在模板中使用 <s-button>
    sTable,    // 在模板中使用 <s-table>
    sChart     // 在模板中使用 <s-chart>
  }
}

依赖说明

v1.2.0+ 依赖策略

从 v1.2.0 开始，我们采用更合理的依赖管理策略：

外部化的大型依赖（需要用户自行安装）：

  • element-plus - Element Plus UI 组件（可选）
  • echarts - 图表库（可选）
  • vue-echarts - Vue ECharts 组件（可选）

内置的工具库（无需安装）：

  • dayjs - 日期处理
  • lodash-debounce - 防抖函数
  • 其他轻量级工具
组件依赖关系

不同组件需要的依赖：

组件类型 需要的依赖
基础组件（Button, Calendar 等） 仅需 Vue
表格组件（Table） Element Plus
图表组件（Charts, ChartMap） ECharts
特殊组件（ChatGPT, Upload） Element Plus
版本兼容性
  • Vue: ^3.3.0 (必需)
  • Element Plus: ^2.0.0 (可选)
  • ECharts: ^5.0.0 (可选)
  • Node.js: ^14.18.0 || >=16.0.0
  • 浏览器: 支持 ES2015+ 的现代浏览器
包大小

v1.2.0+ 优化后的包体积：

  • sia-ui.js: ~500KB (gzip 后约 150KB)
  • sia-ui.umd.cjs: ~500KB (gzip 后约 150KB)
  • style.css: ~100KB

相比 v1.1.x，包体积减少了 90%！

组件列表

数据展示
  • sTable - 高级表格组件
  • sChart - 图表组件
  • sChartMap - 地图图表
  • sStatistics - 统计数字展示
  • sSticCard - 统计卡片
表单组件
  • sButton - 按钮组件
  • sForm - 文件上传组件
  • sLogin - 登录注册组件
  • sCalendar - 日历组件
布局组件
  • sHeader - 页面头部
  • sFooter - 页面底部
  • sDrawer - 抽屉组件
  • sDraggable - 拖拽组件
  • sCardList - 卡片列表
交互组件
  • sNotification - 通知组件
  • sStep - 步骤条
  • sTextScroll - 文字滚动
  • sJump - 跳跃动画
  • sCarousel - 轮播组件
特殊功能
  • sChatAI - AI 聊天组件
  • sOfficePreview - 办公文档预览
  • sScreen - 数据大屏
  • sWorkMonitor - 工作监控

使用示例

基础组件示例
<template>
  <div>
    <!-- 按钮组件 - 注意使用 kebab-case -->
    <s-button type="primary">主要按钮</s-button>
    <s-button type="success">成功按钮</s-button>
    <s-button type="danger">危险按钮</s-button>
    
    <!-- 日历组件 -->
    <s-calendar v-model="date" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Button, Calendar } from 'sia-ui'
import 'sia-ui/dist/style.css'

const date = ref(new Date())
</script>
图表组件示例
<template>
  <div>
    <s-chart :option="chartOption" style="height: 400px;" />
  </div>
</template>

<script setup>
import { Charts } from 'sia-ui'
import 'sia-ui/dist/style.css'

const chartOption = {
  title: { text: '销售数据' },
  xAxis: { data: ['周一', '周二', '周三', '周四', '周五'] },
  yAxis: {},
  series: [{
    data: [120, 200, 150, 80, 170],
    type: 'line',
    smooth: true
  }]
}
</script>
表格组件示例
<template>
  <div>
    <s-table :data="tableData" />
  </div>
</template>

<script setup>
import { Table } from 'sia-ui'
import 'sia-ui/dist/style.css'
import 'element-plus/dist/index.css'

const tableData = [
  { id: 1, name: '张三', age: 18, city: '北京' },
  { id: 2, name: '李四', age: 25, city: '上海' },
  { id: 3, name: '王五', age: 30, city: '深圳' }
]
</script>
注意事项

  1. 导入名称 vs 模板标签名

    import { Button } from 'sia-ui'  // 导入用大写
    <s-button>文字</s-button>  // 模板用 kebab-case

  2. 样式引入

    import 'sia-ui/dist/style.css'           // 必需
import 'element-plus/dist/index.css'      // 使用 EP 组件时需要

  3. 按需加载依赖

    • 只使用基础组件？只需安装 vue 和 sia-ui
    • 需要图表？额外安装 echarts
    • 需要高级表格？额外安装 element-plus

开发

# 克隆项目
git clone <repository-url>

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建库
npm run build

# 构建文档
npm run docs:build

文档

完整文档和在线演示: 查看文档

贡献

欢迎提交 Issue 和 Pull Request！

许可证

ISC