@fx1422/semi-illustrations-vue

基于 Semi Design 的 Vue 3 插画组件库。提供了一系列精美的插画，可用于空状态、引导页、错误页等场景。

安装

# 使用 npm
npm install @fx1422/semi-illustrations-vue

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

# 使用 pnpm
pnpm add @fx1422/semi-illustrations-vue

使用方法

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import { SemiIllustrations } from '@fx1422/semi-illustrations-vue'

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

按需引入

import { IllustrationEmpty, IllustrationNoAccess } from '@fx1422/semi-illustrations-vue'

在组件中使用

<template>
  <div>
    <!-- 使用全局注册的插画 -->
    <semi-illustration-empty />
    <semi-illustration-no-access />

    <!-- 使用按需引入的插画 -->
    <illustration-empty />
    <illustration-no-access />
  </div>
</template>

<script setup lang="ts">
import { IllustrationEmpty, IllustrationNoAccess } from '@fx1422/semi-illustrations-vue'
</script>

插画属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | width | number | string | 200 | 插画宽度 | | height | number | string | 200 | 插画高度 | | color | string | - | 插画颜色 | | style | object | - | 自定义样式 |

示例

<template>
  <div>
    <!-- 基础用法 -->
    <semi-illustration-empty />
    
    <!-- 自定义尺寸 -->
    <semi-illustration-empty :width="300" :height="300" />
    
    <!-- 自定义颜色 -->
    <semi-illustration-empty color="#1890ff" />
    
    <!-- 自定义样式 -->
    <semi-illustration-empty :style="{ margin: '20px' }" />
  </div>
</template>

常用场景

空状态展示

<template>
  <div class="empty-state">
    <semi-illustration-empty />
    <p>暂无数据</p>
  </div>
</template>

<style scoped>
.empty-state {
  text-align: center;
  padding: 40px;
}
</style>

错误页面

<template>
  <div class="error-page">
    <semi-illustration-no-access />
    <h2>访问受限</h2>
    <p>抱歉，您没有权限访问此页面</p>
  </div>
</template>

引导页面

<template>
  <div class="guide-page">
    <semi-illustration-success />
    <h2>欢迎使用</h2>
    <p>开始您的旅程吧</p>
  </div>
</template>

可用插画

Semi Design 提供了丰富的插画资源，包括但不限于：

• 空状态插画（Empty）
• 无权限插画（NoAccess）
• 成功状态插画（Success）
• 错误状态插画（Error）
• 加载状态插画（Loading）
• 网络错误插画（NetworkError）
• 维护状态插画（Maintenance）

版本兼容

• Vue 3.x
• TypeScript 4.x+

相关链接

• Semi Design 官网
• Semi Design GitHub
• Vue 3 文档

许可证

MIT