# @fx1422/semi-ui-vue

基于 Semi Design 的 Vue 3 组件库。提供了一系列高质量、可定制的组件，帮助开发者快速构建现代化的用户界面。

## 安装

```bash
# 使用 npm
npm install @fx1422/semi-ui-vue

# 使用 yarn
yarn add @fx1422/semi-ui-vue

# 使用 pnpm
pnpm add @fx1422/semi-ui-vue
```

## 使用方法

```
在 Webpack,vue-cli 或 Vite 项目中使用时，无需进行任何编译项配置，直接使用即可。构建时所有相关资源均会按需打包。

//代码块
<script setup>
import { Button } from "@fx1422/semi-ui-vue"
</script>

<template>
<div>
    <Button>hello word</Button>
</div>
</template>
```

### 在组件中使用

```vue
<template>
  <div>
    <semi-button type="primary">主要按钮</semi-button>
    <semi-input placeholder="请输入" />
  </div>
</template>

<script setup lang="ts">
import { Button, Input } from '@fx1422/semi-ui-vue'
</script>
```

## 组件列表

### 基础组件

- Button（按钮）
- Icon（图标）
- Typography（排版）
- Space（间距）

### 表单组件

- Input（输入框）
- Select（选择器）
- Checkbox（复选框）
- Radio（单选框）
- Switch（开关）
- DatePicker（日期选择器）
- TimePicker（时间选择器）
- Form（表单）

### 数据展示

- Table（表格）
- List（列表）
- Card（卡片）
- Descriptions（描述列表）
- Tree（树形控件）
- Timeline（时间线）

### 反馈组件

- Modal（对话框）
- Drawer（抽屉）
- Message（全局提示）
- Notification（通知提醒）
- Progress（进度条）
- Spin（加载中）
- Alert（警告提示）

### 导航组件

- Menu（菜单）
- Tabs（标签页）
- Breadcrumb（面包屑）
- Pagination（分页）
- Steps（步骤条）

### 其他组件

- BackTop（回到顶部）
- Affix（固钉）
- Anchor（锚点）
- Tooltip（文字提示）
- Popover（气泡卡片）
- Dropdown（下拉菜单）

## 主题定制

Semi Design 支持通过 CSS 变量进行主题定制：

```css
:root {
  --semi-color-primary: #1890ff;
  --semi-color-success: #52c41a;
  --semi-color-warning: #faad14;
  --semi-color-danger: #f5222d;
  --semi-color-text-0: rgba(0, 0, 0, 0.85);
  --semi-color-text-1: rgba(0, 0, 0, 0.65);
  --semi-color-text-2: rgba(0, 0, 0, 0.45);
}
```

## 国际化

支持中英文两种语言：

```typescript
import { createApp } from 'vue'
import App from './App.vue'
import SemiUI from '@fx1422/semi-ui-vue'
import { zh_CN, en_US } from '@fx1422/semi-ui-vue'

const app = createApp(App)
app.use(SemiUI, {
  locale: zh_CN // 或 en_US
})
app.mount('#app')
```

## 最佳实践

### 组件按需加载

推荐使用按需加载的方式引入组件，可以有效减小打包体积：

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { SemiUIResolver } from '@fx1422/semi-ui-vue/resolver'

export default defineConfig({
  plugins: [
    vue(),
    SemiUIResolver()
  ]
})
```

### 主题定制

1. 使用 CSS 变量进行主题定制
2. 使用 Less 变量进行深度定制
3. 使用主题包进行快速切换

### 性能优化

1. 使用按需加载
2. 合理使用组件缓存
3. 避免不必要的组件重渲染
4. 使用虚拟滚动处理大数据列表

## 版本兼容

- Vue 3.x
- TypeScript 4.x+
- Node.js 14.x+

## 相关链接

- [Semi Design 官网](https://semi.design/zh-CN)
- [Semi Design GitHub](https://github.com/DouyinFE/semi-design)
- [Vue 3 文档](https://v3.vuejs.org/)

## 许可证

MIT