@tjfbjj/bgl-package

基于 ant-design-vue v4 的组件封装库，提供增强版的 Tree 和 Table 组件。

安装

npm install @tjfbjj/bgl-package
# 或
yarn add @tjfbjj/bgl-package

全局引入：

// 导入全局样式
import '@tjfbjj/bgl-package/style.css'

import BglPackage from '@tjfbjj/bgl-package'
app.use(BglPackage)

按需引入：

import { TreeList, TableList } from '@tjfbjj/bgl-package'

组件列表

| 组件 | 说明 | |------|------| | TreeList | 增强版树组件，支持过滤、自定义图标、右键菜单等 | | TableList | 增强版表格组件，支持列显示/隐藏、拖拽排序、斑马纹等 |

TreeList 组件

基于 ant-design-vue Tree 组件封装，提供过滤、自定义图标等增强功能。

基础用法

<script setup lang="ts">
import { ref } from 'vue'
import { TreeList } from '@tjfbjj/bgl-package'

const treeData = ref([
  {
    key: '1',
    title: '一级菜单 1',
    children: [
      { key: '1-1', title: '二级菜单 1-1' },
      { key: '1-2', title: '二级菜单 1-2' },
    ],
  },
  {
    key: '2',
    title: '一级菜单 2',
  },
])
</script>

<template>
  <TreeList :tree-data="treeData" />
</template>

过滤功能

<script setup lang="ts">
import { ref, computed } from 'vue'
import { TreeList } from '@tjfbjj/bgl-package'

const treeData = ref([...])
const filterText = ref('')

const filterKeys = computed(() => {
  if (!filterText.value) return []
  const findKeys = (nodes: any[]) => {
    const keys: string[] = []
    nodes.forEach(node => {
      if (node.title.includes(filterText.value)) {
        keys.push(node.key)
      }
      if (node.children) {
        keys.push(...findKeys(node.children))
      }
    })
    return keys
  }
  return findKeys(treeData.value)
})
</script>

<template>
  <input v-model="filterText" placeholder="搜索..." />
  
  <!-- 高亮模式 -->
  <TreeList 
    :tree-data="treeData" 
    :filter-text="filterText"
    :filter-keys="filterKeys"
    filter-mode="highlight"
  />
</template>

自定义图标

<script setup lang="ts">
import { ref } from 'vue'
import { TreeList } from '@tjfbjj/bgl-package'
import { FolderOpenFilled, FolderFilled, FileTextOutlined } from '@ant-design/icons-vue'

const treeData = ref([...])
</script>

<template>
  <TreeList
    :tree-data="treeData"
    :expand-icon="FolderOpenFilled"
    :collapse-icon="FolderFilled"
    :leaf-icon="FileTextOutlined"
  />
</template>

TreeList API

Props

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | treeData | TreeNode[] | [] | 树节点数据 | | expandedKeys | string[] | - | 展开的节点key（受控） | | selectedKeys | string[] | - | 选中的节点key（受控） | | checkedKeys | string[] | - | 勾选的节点key（受控） | | defaultExpandAll | boolean | false | 默认展开所有节点 | | showIcon | boolean | true | 是否显示图标 | | showLine | boolean | false | 是否显示连接线 | | selectable | boolean | true | 是否可选择 | | checkable | boolean | false | 是否可勾选 | | checkStrictly | boolean | false | 是否严格勾选 | | draggable | boolean | false | 是否可拖拽 | | filterText | string | - | 过滤文本 | | filterKeys | string[] | - | 匹配的节点key列表 | | filterMode | 'highlight' \| 'disabled' | 'highlight' | 过滤模式 | | expandIcon | any | - | 展开文件夹图标 | | collapseIcon | any | - | 未展开文件夹图标 | | leafIcon | any | - | 叶子节点图标 | | selectedIconColor | string | - | 选中图标颜色 |

Events

| 事件名 | 回调参数 | 说明 | |--------|----------|------| | select | (selectedKeys, info) | 节点选中时触发 | | check | (checkedKeys, info) | 节点勾选时触发 | | expand | (expandedKeys, info) | 节点展开/收起时触发 | | right-click | (info) | 右键点击时触发 |

TableList 组件

基于 ant-design-vue Table 组件封装，提供列显示/隐藏、拖拽排序、斑马纹等增强功能。

基础用法

<script setup lang="ts">
import { ref } from 'vue'
import { TableList } from '@tjfbjj/bgl-package'

const columns = ref([
  { title: '姓名', key: 'name', dataIndex: 'name', width: 100 },
  { title: '年龄', key: 'age', dataIndex: 'age', width: 80 },
  { title: '部门', key: 'dept', dataIndex: 'dept', width: 150 },
])

const dataSource = ref([
  { key: '1', name: '张三', age: 28, dept: '技术部' },
  { key: '2', name: '李四', age: 32, dept: '产品部' },
])
</script>

<template>
  <TableList :columns="columns" :data-source="dataSource" />
</template>

列设置功能

<script setup lang="ts">
import { ref } from 'vue'
import { TableList } from '@tjfbjj/bgl-package'

const columns = ref([
  { title: '姓名', key: 'name', dataIndex: 'name' },
  { title: '年龄', key: 'age', dataIndex: 'age', hideInColumnSelector: true },
  { title: '操作', key: 'action', dataIndex: 'action', hideInColumnSelector: true },
])

const dataSource = ref([...])
</script>

<template>
  <TableList 
    :columns="columns" 
    :data-source="dataSource"
    :show-column-selector="true"
  />
</template>

横向滚动

<script setup lang="ts">
import { ref } from 'vue'
import { TableList } from '@tjfbjj/bgl-package'

const columns = ref([
  { title: '列1', key: 'col1', dataIndex: 'col1', width: 150, fixed: 'left' },
  { title: '列2', key: 'col2', dataIndex: 'col2', width: 150 },
  { title: '列3', key: 'col3', dataIndex: 'col3', width: 150 },
  { title: '操作', key: 'action', dataIndex: 'action', width: 100, fixed: 'right' },
])

const dataSource = ref([...])
</script>

<template>
  <TableList 
    :columns="columns" 
    :data-source="dataSource"
    :scroll="{ x: 1500, y: 300 }"
  />
</template>

自定义单元格

<script setup lang="ts">
import { ref } from 'vue'
import { TableList } from '@tjfbjj/bgl-package'

const columns = ref([
  { title: '姓名', key: 'name', dataIndex: 'name' },
  { title: '状态', key: 'status', dataIndex: 'status' },
  { title: '操作', key: 'action', dataIndex: 'action' },
])

const dataSource = ref([
  { key: '1', name: '张三', status: 'active', action: '' },
])
</script>

<template>
  <TableList :columns="columns" :data-source="dataSource">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'status'">
        <span :style="{ color: record.status === 'active' ? 'green' : 'red' }">
          {{ record.status === 'active' ? '在职' : '离职' }}
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <a-button type="link" size="small">编辑</a-button>
      </template>
    </template>
  </TableList>
</template>

TableList API

Props

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | columns | TableColumn[] | [] | 列配置 | | dataSource | any[] | [] | 数据源 | | scroll | { x?: number \| string; y?: number \| string } | - | 滚动配置 | | pagination | boolean \| object | false | 分页配置 | | loading | boolean | false | 加载状态 | | bordered | boolean | false | 是否显示边框 | | showHeader | boolean | true | 是否显示表头 | | striped | boolean | true | 是否显示斑马纹 | | showColumnSelector | boolean | true | 是否显示列设置按钮 |

列配置属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | title | string | - | 列标题 | | key | string | - | 列唯一标识 | | dataIndex | string | - | 数据源字段名 | | width | number \| string | - | 列宽度 | | fixed | 'left' \| 'right' | - | 固定列 | | sortable | boolean \| object | false | 是否可排序 | | hideInTable | boolean | false | 是否在表格中隐藏 | | hideInColumnSelector | boolean | false | 是否在列设置中隐藏 |

Events

| 事件名 | 回调参数 | 说明 | |--------|----------|------| | change | (pagination, filters, sorter) | 分页/排序/筛选改变 | | expand | (expanded, record) | 行展开/收起 |

主题配置

组件库支持主题切换和自定义颜色配置，提供明暗两种预设主题，并支持自定义颜色。

导入主题工具

import { theme, setTheme, setThemeColors } from '@tjfbjj/bgl-package'

切换预设主题

// 切换到暗黑模式
setTheme('dark')

// 切换到浅色模式
setTheme('light')

自定义主题颜色

// 自定义单个或多个颜色
setThemeColors({
  primary: '#ff0000',      // 主色
  success: '#00ff00',      // 成功色
  warning: '#ffff00',      // 警告色
  error: '#ff00ff',        // 错误色
  bgContainer: '#fafafa',  // 容器背景色
  bgHover: '#f0f0f0',      // 悬停背景色
  border: '#e8e8e8',       // 边框色
  textPrimary: '#333333',  // 主文字色
  textSecondary: '#999999',// 次文字色
})

CSS 变量覆盖

也可以通过 CSS 变量直接覆盖主题颜色：

:root {
  --bgl-primary: #ff0000;
  --bgl-bg-container: #fafafa;
  --bgl-text-primary: #333333;
}

主题 API

| 函数 | 说明 | |------|------| | setTheme(theme) | 切换预设主题，支持 'light' 和 'dark' | | setThemeColors(colors) | 自定义主题颜色 | | getThemePreset(name) | 获取预设主题配置 | | theme.set(theme) | 同 setTheme | | theme.setColors(colors) | 同 setThemeColors | | theme.registerPreset(name, colors) | 注册自定义主题预设 |

主题颜色变量列表

| 变量名 | 说明 | |--------|------| | --bgl-bg-container | 容器背景色 | | --bgl-bg-elevated | 悬浮背景色 | | --bgl-bg-hover | 悬停背景色 | | --bgl-border | 边框色 | | --bgl-text-primary | 主文字色 | | --bgl-text-secondary | 次文字色 | | --bgl-primary | 主色 | | --bgl-success | 成功色 | | --bgl-warning | 警告色 | | --bgl-error | 错误色 |

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 类型检查
npm run typecheck

# 构建生产版本
npm run build

许可证

MIT