sike-vue3-ui-components

基于 Vue 3 + Element Plus 的组件库，内置完整的素材管理模块。

📦 安装

pnpm add sike-vue3-ui-components

🚀 快速开始

1. 引入样式

在项目入口文件（如 src/main.ts）中引入组件库样式：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

// 引入组件库样式
import 'sike-vue3-ui-components/dist/style.css'

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

2. 配置 API 适配器

创建 API 适配器来连接你的后端接口：

import { createMaterialAPI } from 'sike-vue3-ui-components'

const materialAPI = createMaterialAPI({
  // 获取素材列表
  list: (params) => http.get('/api/material/list', { params }),

  // 获取分组列表
  groups: () => http.get('/api/material/groups'),

  // 创建分组
  createGroup: (data) => http.post('/api/material/group', data),

  // 更新分组
  updateGroup: (data) => http.put('/api/material/group', data),

  // 删除分组
  deleteGroup: (id) => http.delete(`/api/material/group/${id}`),

  // 上传素材
  upload: (formData) => http.post('/api/material/upload', formData),

  // 删除素材
  remove: (id) => http.delete(`/api/material/${id}`)
})

3. 使用组件

在页面中使用素材管理组件：

<template>
  <div class="material-page">
    <!-- 完整的素材管理界面 -->
    <MaterialLibrary
      :material-a-p-i="materialAPI"
      :t="$t"
      :use-type="1"
    />
  </div>
  
</template>

<script setup lang="ts">
import { MaterialLibrary, createMaterialAPI } from 'sike-vue3-ui-components'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

// 配置 API（如上所示）
const materialAPI = createMaterialAPI({
  // ... API 配置
})
</script>

📋 组件说明

MaterialLibrary

完整的素材管理界面，包含分组管理、素材列表、上传、预览等功能。

Props:

• material-a-p-i - API 适配器对象（必需）
• t - 国际化函数，传入项目的 $t 或 t 函数
• use-type - 使用类型，数字类型

MaterialGroup

素材分组管理组件，支持创建、编辑、删除分组。

MaterialTable

素材列表展示组件，支持分页、搜索、预览、删除等操作。

🌍 国际化支持

组件库内置中文文案，同时支持项目级国际化：

<template>
  <!-- 传入项目的国际化函数 -->
  <MaterialLibrary :material-a-p-i="materialAPI" :t="$t" />
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>

🖼️ 图片预览

• 支持图片全屏预览
• 预览层使用 teleport 挂载到 body，不影响页面布局
• 支持鼠标滚轮缩放、拖拽移动

📋 依赖要求

• Vue 3.x
• Element Plus
• Vue I18n（可选，用于国际化）

🔧 开发

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

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建
pnpm build

# 发布
pnpm publish

📄 License

MIT