# SenzUI

**Repository Path**: ninesenz/senz-ui

## Basic Information

- **Project Name**: SenzUI
- **Description**: 一个Vue3的组件库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-07
- **Last Updated**: 2026-03-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SenzUI

一个基于 Vue 3 和 TypeScript 构建的现代化 UI 组件库。

## 特性

- 🎨 现代美观的设计风格
- 🚀 基于 Vue 3 组合式 API 构建
- 💪 完整的 TypeScript 支持
- 🎯 支持按需引入和 Tree Shaking
- 📦 同时支持 ES Module 和 UMD 格式
- ✅ 完善的单元测试(Vitest)
- 🎨 SCSS 主题系统
- 📦 开箱即用

## 安装

```bash
npm install senz-ui
# 或
yarn add senz-ui
# 或
pnpm add senz-ui
```

## 快速开始

```javascript
import { createApp } from 'vue'
import SenzUI from 'senz-ui'
import 'senz-ui/dist/style.css'

const app = createApp()
app.use(SenzUI)
app.mount('#app')
```

或者按需引入:

```javascript
import { Button } from 'senz-ui'

export default {
  components: {
    Button
  }
}
```

## 组件

### 基础组件

#### Icon 图标
用于显示图标的组件。

```vue
<template>
  <Icon icon="search" :size="24" />
  <Icon icon="edit" color="#409EFF" />
</template>
```

#### Link 链接
文字链接组件。

```vue
<template>
  <Link href="https://example.com">默认链接</Link>
  <Link type="primary">主要链接</Link>
  <Link type="success">成功链接</Link>
  <Link :underline="false">无下划线</Link>
</template>
```

#### Typography 排版
文字排版组件。

```vue
<template>
  <Typography type="h1">标题 1</Typography>
  <Typography type="h2">标题 2</Typography>
  <Typography type="p">这是一段文字</Typography>
  <Typography type="span">这是一段内联文字</Typography>
</template>
```

#### Divider 分割线
分割线组件。

```vue
<template>
  <Divider />
  <Divider content-position="left">左侧文字</Divider>
  <Divider dashed>虚线分割线</Divider>
  <Divider vertical />
</template>
```

#### Card 卡片
卡片组件。

```vue
<template>
  <Card shadow="hover">
    <template #header>
      <div>卡片标题</div>
    </template>
    <div>卡片内容</div>
  </Card>
</template>
```

#### Collapse 折叠面板
折叠面板组件。

```vue
<template>
  <Collapse v-model="activeNames">
    <CollapseItem title="面板 1" name="1">内容 1</CollapseItem>
    <CollapseItem title="面板 2" name="2">内容 2</CollapseItem>
  </Collapse>
</template>
```

#### Image 图片
图片组件。

```vue
<template>
  <Image src="https://example.com/image.jpg" fit="cover" />
  <Image src="https://example.com/image.jpg" lazy />
</template>
```

#### Avatar 头像
头像组件。

```vue
<template>
  <Avatar>User</Avatar>
  <Avatar size="large">User</Avatar>
  <Avatar shape="square">User</Avatar>
  <Avatar src="https://example.com/avatar.jpg" />
</template>
```

### 表单组件

### Button 按钮组件

功能丰富的按钮组件,支持多种类型和尺寸。

```vue
<template>
  <div>
    <Button>默认按钮</Button>
    <Button type="primary">主要按钮</Button>
    <Button type="success">成功按钮</Button>
    <Button type="warning">警告按钮</Button>
    <Button type="danger">危险按钮</Button>
    <Button type="info">信息按钮</Button>
  </div>

  <div>
    <Button size="large">大号按钮</Button>
    <Button>默认按钮</Button>
    <Button size="small">小号按钮</Button>
  </div>

  <div>
    <Button plain>朴素按钮</Button>
    <Button round>圆角按钮</Button>
    <Button circle>圆形按钮</Button>
    <Button disabled>禁用按钮</Button>
  </div>

  <div>
    <Button loading>加载中</Button>
    <Button icon="search">带图标</Button>
  </div>
</template>
```

#### Button 属性

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| type | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'default'` | `'default'` | 按钮类型 |
| size | `'large' \| 'default' \| 'small'` | `'default'` | 按钮尺寸 |
| plain | `boolean` | `false` | 是否为朴素按钮 |
| round | `boolean` | `false` | 是否为圆角按钮 |
| circle | `boolean` | `false` | 是否为圆形按钮 |
| loading | `boolean` | `false` | 是否为加载状态 |
| disabled | `boolean` | `false` | 是否禁用 |
| icon | `string` | `''` | 图标名称 |
| autofocus | `boolean` | `false` | 是否自动聚焦 |
| nativeType | `'button' \| 'submit' \| 'reset'` | `'button'` | 原生 type 属性 |
| tag | `string` | `'button'` | 自定义 HTML 标签 |

#### Button 事件

| 事件名 | 说明 |
|--------|------|
| click | 点击事件 |

## 开发

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 运行测试
npm run test

# 运行测试 UI
npm run test:ui

# 运行测试覆盖率
npm run test:coverage

# 构建组件库
npm run build

# 代码检查
npm run lint

# 代码格式化
npm run format
```

## 浏览器支持

现代浏览器和 IE11+。

## 许可证

MIT