# ui

**Repository Path**: sscayp/ui

## Basic Information

- **Project Name**: ui
- **Description**: 简单的前端样式UI库

- **Primary Language**: Unknown
- **License**: EPL-1.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-17
- **Last Updated**: 2026-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @xyy1994/tag-ui

一个基于 Vue 3 的轻量级 UI 组件库，提供常用的基础组件。

[English](./README.en.md) | 中文

## 特性

- 🚀 基于 Vue 3 Composition API
- 📦 轻量级，仅依赖 Vue
- 🎨 支持自定义样式主题
- 📱 简单易用的 API 设计
- 🔧 支持 TypeScript
- 📐 基于 Flexbox 的 24栏栅格系统

## 组件列表

| 组件 | 说明 | 分类 |
|------|------|------|
| STag | 标签组件，支持自定义字体、颜色、边框样式 | 基础组件 |
| SLayout | 布局容器，基于 Flexbox 布局 | 布局组件 |
| SCell | 栅格单元，配合 SLayout 使用（24栏栅格） | 布局组件 |
| STitle | 标题组件，支持字体大小、颜色、字重设置 | 基础组件 |
| SInput | 文本输入框，支持 v-model 双向绑定 | 表单组件 |
| SInputNumber | 数字输入框，支持步进增减 | 表单组件 |

## 安装

```bash
npm install @xyy1994/tag-ui
```

## 快速开始

### 全量引入

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import uiPlugin from '@xyy1994/tag-ui'
import '@xyy1994/tag-ui/dist/my-component-lib.umd.js'

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

### 按需引入

```javascript
import { STag, SLayout, SCell, STitle, SInput, SInputNumber } from '@xyy1994/tag-ui'
```

## 组件用法

### STag - 标签

用于展示标签、标记、状态等场景。

```vue
<template>
  <STag text="标签文本" />
  <STag text="自定义颜色" color="#409EFF" backgroundColor="#ECF5FF" />
  <STag :fontSize="16" :borderRadius="8">自定义样式</STag>
</template>
```

**Props:**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| text | String/Number | '' | 标签文本 |
| fontSize | String/Number | 14 | 字体大小 |
| lineHeight | String/Number | 22 | 行高 |
| borderRadius | String/Number | 4 | 圆角 |
| backgroundColor | String | '' | 背景色 |
| color | String | '#FD0707' | 文字颜色 |
| border | String | '1px solid #FFA6A6' | 边框样式 |
| fontWeight | String/Number | '500' | 字重 |
| marginLeft | String/Number | 0 | 左侧外边距 |

---

### SLayout - 布局容器

基于 Flexbox 的布局容器，用于页面整体布局。

```vue
<template>
  <SLayout :gutter="20" justify="space-between" align="center">
    <SCell :span="12">左侧内容</SCell>
    <SCell :span="12">右侧内容</SCell>
  </SLayout>
</template>
```

**Props:**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| gutter | Number | 20 | 栅格间距（px） |
| justify | String | 'flex-start' | 水平对齐方式 |
| align | String | 'flex-start' | 垂直对齐方式 |
| direction | String | 'row' | 排列方向 |
| flexWrap | String | 'nowrap' | 是否换行 |

**justify 可选值:**
- `flex-start` - 居左对齐
- `flex-end` - 居右对齐
- `center` - 居中对齐
- `space-between` - 两端对齐
- `space-around` - 均匀分布

**align 可选值:**
- `flex-start` - 顶部对齐
- `flex-end` - 底部对齐
- `center` - 垂直居中
- `baseline` - 基线对齐
- `stretch` - 拉伸填充

---

### SCell - 栅格单元

配合 SLayout 使用的栅格单元，采用 24栏栅格系统。

```vue
<template>
  <SLayout>
    <SCell :span="8">占 1/3</SCell>
    <SCell :span="16">占 2/3</SCell>
  </SLayout>
</template>
```

**Props:**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| span | Number | 8 | 栅格宽度（24栏制，1-24） |

**栅格示例:**

| span 值 | 宽度比例 |
|---------|----------|
| 24 | 100% |
| 12 | 50% (1/2) |
| 8 | 33.33% (1/3) |
| 6 | 25% (1/4) |
| 4 | 16.67% (1/6) |

---

### STitle - 标题

用于展示标题文字，支持多种样式自定义。

```vue
<template>
  <STitle title="我是标题" />
  <STitle :fontSize="18" color="#000" :fontWeight="bold">自定义标题</STitle>
</template>
```

**Props:**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| title | String | '' | 标题文本 |
| fontSize | String/Number | 14 | 字体大小 |
| color | String | '#303133' | 文字颜色 |
| fontWeight | String/Number | 'bold' | 字重 |

---

### SInput - 输入框

文本输入框组件，支持 v-model 双向绑定。

```vue
<template>
  <SInput v-model="value" placeholder="请输入内容" />
  <SInput v-model="value" disabled placeholder="禁用状态" />
</template>

<script setup>
import { ref } from 'vue'
const value = ref('')
</script>
```

**Props:**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| modelValue | String/Number | '' | 绑定值（v-model） |
| placeholder | String | '请输入' | 占位符 |
| disabled | Boolean | false | 是否禁用 |

**Events:**

| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| update:modelValue | 双向绑定更新 | value: String/Number |
| change | 值改变时触发 | value: String/Number |
| blur | 失去焦点时触发 | value: String/Number |

---

### SInputNumber - 数字输入框

带步进按钮的数字输入框，适用于数量、金额等数值输入场景。

```vue
<template>
  <SInputNumber v-model="num" :min="0" :max="100" :step="1" />
</template>

<script setup>
import { ref } from 'vue'
const num = ref(1)
</script>
```

**Props:**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| modelValue | String/Number | '' | 绑定值（v-model） |
| placeholder | String | '请输入' | 占位符 |
| disabled | Boolean | false | 是否禁用 |
| min | Number | 0 | 最小值 |
| max | Number | 10000 | 最大值 |
| step | Number | 1 | 步长 |

**Events:**

| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| update:modelValue | 双向绑定更新 | value: Number |
| change | 值改变时触发 | value: Number |
| blur | 失去焦点时触发 | value: Number |

---

## 项目结构

```
tag/
├── src/
│   ├── ui/                    # 组件源码
│   │   ├── s-tag/              # 标签组件
│   │   ├── s-layout/           # 布局组件
│   │   ├── s-cell/             # 栅格组件
│   │   ├── s-title/           # 标题组件
│   │   ├── s-input/           # 输入框组件
│   │   ├── s-input-number/    # 数字输入框组件
│   │   └── index.js           # 组件导出入口
│   ├── styles/                 # 全局样式
│   │   └── index.scss
│   ├── App.vue                 # 示例应用
│   └── main.ts                 # 入口文件
├── dist/                      # 构建输出
├── index.html                 # 开发环境入口
├── package.json               # 项目配置
├── vite.config.js             # Vite 配置
└── README.md                  # 中文文档
```

## 开发

```bash
# 安装依赖
npm install

# 开发模式（热更新）
npm run dev

# 构建库
npm run build

# 预览构建结果
npm run preview
```

## 技术栈

- **Vue** 3.4.0+ - 响应式 UI 框架
- **Vite** 5.0.0+ - 下一代构建工具
- **Sass** - CSS 预处理器

## 浏览器支持

支持所有现代浏览器：
- Chrome >= 90
- Firefox >= 88
- Safari >= 14
- Edge >= 90

## 贡献指南

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/xxx`)
3. 提交更改 (`git commit -m 'Add xxx'`)
4. 推送分支 (`git push origin feature/xxx`)
5. 创建 Pull Request

## 版本历史

- **0.0.1** (2026-04-17) - 初始版本，发布基础组件

## 许可证

MIT License - [LICENSE](./LICENSE)

---

Made with ❤️ by @xyy1994