@huitu/ui

慧图 Vue 3 通用 UI 组件库，基于 Element Plus、VXE-Table 和 View UI Plus 封装。

📦 安装

在 Monorepo 项目中，该包通常已经作为依赖安装。

🧩 提供的组件

1. HTable (通用表格)

基于 el-table 封装的通用表格组件，支持配置化渲染列。

使用示例：

<template>
  <HTable
    :data="tableData"
    :columns="columns"
    :loading="loading"
    @row-click="handleRowClick"
  />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'age', label: '年龄', width: 80 },
  { prop: 'address', label: '地址' }
]
const tableData = [...]
</script>

主要 Props:

• data: 表格数据数组
• columns: 列配置数组（支持嵌套多级表头）
• loading: 加载状态

2. VexTable (大数据表格)

基于 vxe-table 封装的高性能表格组件，支持虚拟滚动。

使用示例：

<template>
  <VexTable
    :data="bigData"
    :columns="columns"
    :table-props="{ virtualScroll: true }"
  >
    <!-- 自定义插槽 -->
    <template #action="{ row }">
      <el-button>编辑</el-button>
    </template>
  </VexTable>
</template>

主要 Props:

• data: 数据数组
• columns: 列配置数组（支持插槽配置）
• tableProps: 传递给 vxe-table 的原生 props

3. HtDialog (通用弹窗)

可拖拽、可最大化的模态对话框。

使用示例：

<template>
  <HtDialog
    v-model:visible="visible"
    title="系统提示"
    width="500px"
  >
    <p>这是一个弹窗内容</p>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary">确定</el-button>
    </template>
  </HtDialog>
</template>

主要 Props:

• visible: 是否显示（支持 v-model）
• title: 标题
• width: 宽度
• minimizable: 是否允许最小化
• maximizable: 是否允许最大化

4. HtDragDialog (可伸缩拖拽弹窗)

基于 vue-draggable-resizable 封装，支持自由拖拽和调整大小，常用于地图上的浮动面板。

使用示例：

<template>
  <HtDragDialog
    v-model:visible="visible"
    caption="图层控制"
    :w="300"
    :h="400"
    :x="100"
    :y="100"
    :modal="false"
  >
    <div>面板内容</div>
  </HtDragDialog>
</template>

主要 Props:

• caption: 标题
• w, h: 初始宽高
• x, y: 初始位置
• modal: 是否显示遮罩（默认为 true，设为 false 可作为非模态浮窗）

5. HtNewDrawer (增强抽屉)

基于 view-ui-plus 的 Drawer 封装，支持全屏切换和左侧收起按钮。

使用示例：

<template>
  <HtNewDrawer
    v-model:visible="visible"
    title="详细信息"
    drawer-size="50%"
  >
    <div>抽屉内容</div>
  </HtNewDrawer>
</template>

主要 Props:

• visible: 是否显示
• drawerSize: 抽屉宽度（默认 '70%'）
• isScreenIcon: 是否显示全屏切换按钮

🛠 初始化

在项目入口文件（如 main.js）中注册：

import HuituUI from 'cmpt-huitu-ui'
import request from '@/utils/request' // 你的 axios 实例

app.use(HuituUI, {
  request: request // 可选：注入请求实例供组件内部使用
})