components

QXS-BNS 提供了丰富的 Vue 3 组件库，涵盖桌面端和移动端应用场景。

📦 快速安装

# 安装组件库
pnpm add @qxs-bns/components

🎯 组件分类

桌面端组件

基于 Element Plus 增强的桌面端组件，适用于管理后台、数据展示等场景：

组件	说明	依赖
QxsDataChart	数据图表组件	Element Plus, ECharts
QxsFileUpload	文件上传组件	Element Plus
QxsImageUpload	图片上传组件	Element Plus
QxsTinyMceEditor	富文本编辑器	TinyMCE
QxsSubjectList	学科列表组件	Element Plus

移动端组件

轻量级移动端组件，不依赖 Element Plus，适用于 H5 页面、移动端应用：

组件	说明	依赖
QxsFixedActionBar	固定操作栏	无
QxsPhotoCropTool	图片裁剪工具	无

通用组件

适用于桌面端和移动端的通用组件：

组件	说明	依赖
QxsIcon	图标组件	无

<template>
  <div class="mobile-page">
    <!-- 固定操作栏 -->
    <QxsFixedActionBar :actions="actions" />

    <!-- 图片裁剪工具 -->
    <QxsPhotoCropTool
      :src="imageSrc"
      @crop="handleCrop"
    />
  </div>
</template>

<script setup lang="ts">
import { QxsFixedActionBar, QxsPhotoCropTool } from '@qxs-bns/components'

const actions = [
  { text: '保存', type: 'primary', onClick: () => save() }
]

const handleCrop = (result) => {
  console.log('裁剪结果:', result)
}
</script>

🖥️ 桌面端使用

桌面端组件基于 Element Plus，提供丰富的功能：

<template>
  <div class="desktop-page">
    <!-- 数据图表 -->
    <QxsDataChart
      :data="chartData"
      type="line"
      :options="chartOptions"
    />

    <!-- 文件上传 -->
    <QxsFileUpload
      :multiple="true"
      :accept="'.jpg,.png,.pdf'"
      @success="handleUploadSuccess"
    />

    <!-- 富文本编辑器 -->
    <QxsTinyMceEditor
      v-model="content"
      :config="editorConfig"
    />
  </div>
</template>

<script setup lang="ts">
import {
  QxsDataChart,
  QxsFileUpload,
  QxsTinyMceEditor
} from '@qxs-bns/components'

const chartData = ref([])
const content = ref('')
const editorConfig = {
  height: 400,
  plugins: 'link image code'
}
</script>

🎯 可用组件列表

移动端友好组件

组件名	说明	文档
QxsFixedActionBar	固定操作栏	✅
QxsPhotoCropTool	图片裁剪工具	✅

桌面端组件

组件名	说明	文档
QxsDataChart	数据图表	✅
QxsFileUpload	文件上传	✅
QxsImageUpload	图片上传	✅
QxsTinyMceEditor	富文本编辑器	✅
QxsSubjectList	主题列表	✅
QxsAnswerContainer	答案容器	✅

工具库

🛠️ 工具函数 (Utils)

工具名	说明	文档
ArgoLog	日志工具	✅
Storage	存储工具	✅
DateTransfer	日期转换	✅
Device	设备检测	✅
FileOperations	文件操作	✅
OssUploader	OSS 上传	✅
UseApi	API 请求	✅
Watermark	水印工具	✅

🪝 Hooks

Hook 名	说明	文档
usePagination	分页管理	✅
useRequest	请求管理	🚧
useForm	表单管理	🚧
useTable	表格管理	🚧

📋 指令 (Directives)

指令名	说明	文档
v-copy	复制指令	✅
v-debounce	防抖指令	✅
v-lazy-load	懒加载指令	✅
v-rich-overflow	富文本溢出	✅
v-safe-html	安全 HTML	✅
v-slide-in	滑入动画	✅
v-waves	波纹效果	✅

🎨 图标 (Icons)

组件/类型	说明	文档
QxsIcon	图标组件	✅
基础图标	基础图标集	✅
图标展示	所有图标预览	✅
开发说明	图标开发指南	✅

使用方式

按需引入（推荐）

// 桌面端组件（依赖 Element Plus）
import { QxsDataChart, QxsFileUpload } from '@qxs-bns/components'

// 移动端组件（不依赖 Element Plus）
import { QxsFixedActionBar, QxsPhotoCropTool } from '@qxs-bns/components'

// 工具函数
import { ArgoLog, Storage } from '@qxs-bns/utils'

// Hooks
import { usePagination } from '@qxs-bns/hooks'

// 指令
import { vDebounce, vWaves } from '@qxs-bns/directives'

移动端专用引入

// 只引入移动端友好的组件
import {
  QxsFixedActionBar,
  QxsPhotoCropTool,
} from '@qxs-bns/components'

// 样式
import '@qxs-bns/components/theme-chalk/src/fixed-action-bar.scss'
import '@qxs-bns/components/theme-chalk/src/photo-crop-tool.scss'

依赖说明

核心依赖

• Vue 3: 组件库基础框架
• @vueuse/core: Vue 工具库

可选依赖

• Element Plus: 桌面端 UI 组件库
• ECharts: 图表库
• TinyMCE: 富文本编辑器
• Lodash: 工具函数库

智能依赖管理

QXS-BNS 使用智能依赖管理系统，只有真正需要的依赖才会被加载：

• 移动端组件不会加载 Element Plus
• 图表组件才会加载 ECharts
• 编辑器组件才会加载 TinyMCE

详见 依赖管理 文档。

浏览器支持

浏览器	版本
Chrome	>= 64
Firefox	>= 63
Safari	>= 12
Edge	>= 79
移动端 Safari	>= 12
移动端 Chrome	>= 64

下一步

• 查看 快速开始 开始使用
• 阅读 依赖管理 了解智能依赖系统
• 参考 开发指南 参与开发