hdl-global-com v1.0.50

针对vue3公共组件库的使用介绍如下

0.1. 使用前说明

注意node版本需要固定为22.x.x 需要更新vscode版本，如果vscode版本没有检测更新按钮，需要下载system installer版本的vscode，下载路径为https://code.visualstudio.com/Download 建议安装yarn命令管理工具、node版本管理工具nvm element-plus固定版本号为2.9.2，vue：3.5.13，typescript：5.7.3，typescript-eslint：8.19.1 下面演示如有使用命令的，全部使用yarn演示

0.2. 安装

yarn add hdl-global-com element-plus@2.9.2 jsencrypt qs sortablejs @icon-park/vue-next axios pinia vite-plugin-qiankun vue-router screenfull vue3-ace-editor ace-builds yarn add @types/node @types/qs @types/sortablejs sass unplugin-auto-import vite-plugin-eslint2 ssh2-sftp-client inquirer -D

0.3. 使用

import hdlGlobalCom from 'hdl-global-com'
import 'hdl-global-com/themes/index.scss';

app.use(hdlGlobalCom)
// 或者针对性的设置一下初始值
app.use(hdlGlobalCom, {
  localStorageKey: Partial<{
    HDL_TOKEN: string; // token的标识 默认为HDL_TOKEN
    HDL_USER: string; // 用户信息的标识 默认为HDL_USER
    HDL_MENU: string; // 当前保存的菜单项
    HDL_MENU_SN: string; // 浏览器获取菜单sn的标识 默认为HDL_MENU_SN
    HDL_USER_NAME: string; // 用户名
    HDL_PWD: string; // 密码
  }>;
  hdlLogin: Partial<{ // 登录组件的全局配置类型注解
    loginSuccessRoute: string; // 登录成功后的默认路由
    loginRoute: string; // 登录页的路由
    refreshRouteName: string; // 刷新路由的名称
    qkMenuType: string; // qiankun的菜单类型
  }>;
  hdlAxios: Partial<{ // axios请求配置
  }>;
  hdlTable: Partial<{ // 表格组件 用于表格的一些配置
    operateColConfig: TableColumn; // 操作列配置
    authVal: number; // 值为authVal的时候显示
    onlyShowVal: boolean; // 值为onlyShowVal的时候显示
    pageSizes: number[]; // 分页器每页显示个数
    pageSize: number; // 分页器每页显示个数
    popupPageSizes: number[]; // 弹窗分页器每页显示个数
    popupPageSize: number; // 弹窗分页器每页显示个数
  }>;
  hdlMenus: Partial<{ // 菜单组件
    width: number; // 菜单展开后的宽度
    collapseWidth: number; // 菜单伸缩后的宽度
  }>;
  hdlSearch: Partial<{ // 筛选框组件
    width: number; // 筛选框的默认宽度
  }>;
  hdlForm: Partial<{ // 表单组件
    labelWidth: string; // 表单的label宽度
  }>;
  hdlTree: Partial<{ // 树组件
    width: number; // 初始树宽度
    minWidth: number; // 最小宽度
    maxWidth: number; // 最大宽度
  }>;
})

0.4. 公共组件的使用介绍

0.4.1. hdlHeader组件

0.4.1.1. 介绍

界面头部内容区域

0.4.1.2. 使用

1. template使用

<hdl-header
  v-model:collapse="collapse"
  :avatar="userInfo.avatar || ''"
  :user-name="userInfo.othername || userInfo.username"
  @get-menu-status="getMenuStatus"
/>

0.4.2. 按钮组件hdlBtn

0.4.2.1. 介绍

公共按钮组件，可动态配置出权限按钮，按钮形式包括：普通按钮、下拉按钮、上传按钮、提示按钮等

0.4.2.2. 使用

1. template使用

<hdl-btn v-model="btnData"></hdl-btn>

2. 普通按钮

import { ButtonType } from 'hdl-global-com';
const optButton = ref<ButtonType[]>([
  {
    type: 'default', // 普通按钮可省略这个配置
    name: '普通按钮',
    func: () => {
      console.log('xxx')
    },
    auth: 'xxx'
  }
]);

3. 下拉按钮

import { ButtonType } from 'hdl-global-com';
const optButton = ref<ButtonType[]>([
  {
    type: 'select',
    name: '更多',
    children: [{
      name: '下载',
      auth: 'down',
      func: () => {
        console.log('xxx')
      }
    }]
  }
]);

children子按钮API

4. 上传按钮

import { ButtonType } from 'hdl-global-com';
const optButton = ref<ButtonType[]>([
  {
    type: 'upload',
    name: '上传',
    icon: 'icon-xinzeng',
    auth: 'xxx',
    props: {
      action: 'https://jsonplaceholder.typicode.com/posts/',
      headers: {
        Authorization: 'Bearer token'
      }
    }
  }
]);

5. 提示按钮

import { ButtonType } from 'hdl-global-com';
const optButton = ref<ButtonType[]>([
  {
    name: '提示',
    auth: '',
    type: 'tooltip',
    icon: 'icon-xinzeng',
    props: {
      content: '这是一个提示'
    },
    func: () => {
      console.log('xxx')
    }
  }
]);

0.4.3. 克隆表达式组件hdlCron

0.4.3.1. 介绍

针对于周期类型的计划、任务等需求下使用，可灵活的配置任何时间段的周期调度

0.4.3.2. 使用

<template>
  <hdlCron v-model="expression" />
</template>

<script lang="ts" setup>
const expression = ref('0 0 0/1 * * ?');
</script>

0.4.4. 筛选查询组件hdlSearch

0.4.4.1. 介绍

可动态配置出页面过滤条件，并可实现条件的显示隐藏、label文字更改、属性更改等效果

0.4.4.2. 使用

1. template使用

<hdl-search v-model="searchData" @search="search"></hdl-search>

1. 文本框

import { SearchType, useUUID } from 'hdl-global-com'

const model = ref('');
const optFilter = ref<SearchType[]>([{
  id: useUUID(),
  comName: 'el-input',
  model: model,
  props: {
    placeholder: '请输入xxx'
  },
}])

3. 下拉框

import { SearchType, useUUID } from 'hdl-global-com'

const model = ref('');
const optFilter = ref<SearchType[]>([{
  id: useUUID(),
  comName: 'el-select',
  model: model,
  children: {
    comName: 'el-option',
    data: [],
    props: {
      value: 'value',
      label: 'label'
    }
  },
  props: {
    placeholder: '请选择xxx'
  }
}])

4. 级联选择框

import { SearchType, useUUID } from 'hdl-global-com'

const model = ref<string[]>([]);
const optFilter = ref<SearchType[]>([{
  id: useUUID(),
  comName: 'el-cascader',
  model: model,
  props: {
    ...
  },
  emits: {
    ...
  }
}])

5. 其余类型请举一反三

0.4.5. 表单组件hdlForm

0.4.5.1. 介绍

主要是为了统一设置labelWidth，其余功能与官方的el-form一模一样

0.4.5.2. 使用

<template>
  <hdl-form ref="hdlFormRef" :model="formVal" :rules="rules">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="formVal.name" />
    </el-form-item>
    ...
  </-form>
</template>

<script lang="ts" setup>
import { FormRules } from 'element-plus'

const formVal = reactive({
  name: ''
})
const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
})
const hdlFormRef = useTemplateRef('hdlFormRef');
console.log(hdlFormRef) // 方法全在这里
</script>

0.4.6. 侧边栏菜单组件hdlMenus

0.4.6.1. 介绍

全项目就用一次，用于菜单展示

0.4.6.2. 使用

<template>
  <hdl-menus
    :user-name="userInfo.username || ''"
    :system-sn="systemSn"
    :collapse="collapse"
    @get-system-name="getSystemName"
  />
</template>

0.4.7. 表格组件hdlTable

0.4.7.1. 介绍

数据表单el-table的封装，更便捷的使用与灵活的权限控制

0.4.7.2. 使用

1. 不分页使用

<template>
  <hdlTable :data="tableData" :columns="columns" />
</template>

<script lang="ts" setup>
import { TableColumn } from 'hdl-global-com'

const tableData = ref<any[]>([])
const columns = ref<TableColumn<any>>([])
</script>

2. 分页使用

<template>
  <hdl-table :data="tableData" :columns="columns">
    <template #pagination="pageScope">
      <el-pagination v-bind="pageScope" v-model:page-size="pageSize" v-model:current-page="currentPage" :total="total"></el-pagination>
    </template>
  </hdl-table>
</template>

<script lang="ts" setup>
import { AxiosListResultType, usePagination } from 'hdl-global-com'

const columns = ref<TableColumn<AxiosListResultType['xxx']>>([{
  label: '名称',
  prop: 'taskName'
}, {
  label: '开始时间',
  prop: 'createTime'
}])
const { tableData, total, pageSize, currentPage, getTableData } = usePagination({ // 分页获取公司列表信息
  url: 'xxx'
});
</script>

3. 插槽使用

<template>
  <hdlTable :data="tableData" :columns="columns">
    <template #name="{ colData }">
      <el-table-column v-bind="colData">
        <template #default="{ row }">
          <span>我的名字是：{{ row.name }}</span>
        </template>
      </el-table-column>
    </template>
  </hdlTable>
</template>

<script lang="ts" setup>
import { TableColumn } from 'hdl-global-com'

const tableData = ref<any[]>([])
const columns = ref<TableColumn<any>>([
  {
    prop: 'name',
    label: '名称',
    slot: true
  }
])
</script>

4. API说明

hdlTable的配置说明

columns的配置说明

0.4.8. 树组件hdlTree

0.4.8.1. 介绍

用于树形数据的展示

0.4.8.2. 使用

<template>
  <hdl-tree ref="hdlTreeRef" :data="treeData" node-key="code" :input-props="{ placeholder: '请输入公司名称' }" @current-change="currentChange"></hdl-tree>
</template>

<script lang="ts" setup>

const treeData = ref<any[]>([]);
const currentChange = (data: any) => { // 树节点选择的时候
  console.log(data)
};
</script>

0.4.9. 文件上传组件hdlFileImport

0.4.9.1. 介绍

主要用于上传excel文件

0.4.8.2. 使用

<template>
  <hdl-file-import v-model="fileImportVisible" :url="apiUrl.getUserInfo" @refresh="refresh" />
</template>

<script lang="ts" setup>
import apiUrl from '@axios/apiUrl';

const fileImportVisible = ref(false);
//xx按钮点击
const btnClick = () => {
  fileImportVisible.value = true;
}
const refresh = () => {
  console.log('文件上传完毕回调');
}
</script>

0.4.10. 代码编辑器组件hdl-json-form

0.4.10.1. 介绍

用于可视化扩展字段的编辑

0.4.10.2. 使用

<template>
  <hdl-json-form v-model="jsonDialogVisible" v-model:json="jsonData" />
</template>

<script lang="ts" setup>
const jsonDialogVisible = ref(false);
const jsonData = ref({
  name: '张三',
  age: 18,
  work: ['work1', 'work2'],
  info: {
    address: '北京',
    phone: '123456789'
  },
  a: [
    {
      name: 'a1',
      age: 1
    },
    {
      name: 'a2',
      age: 2
    }
  ]
});
</script>

0.5. 指令

0.5.1. treeDrag

0.5.1.1. 介绍

用于树右侧的宽度拖拽

0.5.1.2. 使用

<div class="hdl-tree-bar" v-tree-drag></div>

0.5.2. formAuth

0.5.2.1. 介绍

用于控制表单项的权限

0.5.2.2. 使用

<hdl-form :model="form">
  <el-row :gutter="15">
    <el-col :span="12" v-form-auth:[callback]="['sysRole', 'formRoleName', true]">
      <el-form-item label="名称" v-bind="nameProps.formItemProps">
        <el-input v-model="form.name" v-bind="nameProps.props" />
      </el-form-item>
    </el-col>
  </el-row>
</hdl-form>

<script lang="ts" setup>
const nameProps = reactive({
  props: {},
  formItemProps: {}
});
const callback = (params: Record<string, any>) => {
  nameProps.props = params.props || {};
  nameProps.formItemProps = params.formItemProps || {};
};
</script>

v-form-auth:D="A, B, C"举例

0.5.3. resize

0.5.3.1. 介绍

监听DOM尺寸变化，常用于echarts的重绘

0.5.3.2. 使用

<template>
  <div v-resize="domResize">
    echarts
  </div>
</template>

<script setup lang="ts">
const domResize = (width: number, height: number) => {
  console.log(width, height)
}
</script>

0.6. 公共方法

0.7. 特殊方法

0.7.1. 请求方法useAxios

0.7.1.1. 介绍

统一封装请求方法，并增加ts类型注解 在当前项目中，进行useAxios的方法注册，并传递url信息与ts的注解文件 后续该项目中的所有请求，直接使用注册后的axios即可

0.7.1.2. 使用

import { useAxios } from 'hdl-global-com';
import apiUrlList from './apiUrl';

import { ApiUrlKeyType, AxiosResponseType } from './type';

export const axios = useAxios<ApiUrlKeyType, AxiosResponseType>(apiUrlList);
export default axios;

/* xxx使用 */
axios({
  ...
})

0.7.2. 分页hooks函数usePagination

0.7.2.1. 介绍

统一封装分页请求表格数据 在当前项目中，需要进行usePagination的方法注册，传递当前的请求函数与ts注解文件 后续该项目中的所有分页请求，直接使用注册后的usePagination即可

0.7.2.2. 使用

/* 当前项目的utils/index.ts文件中 */
import { usePagination as pagination } from 'hdl-global-com';
import axios from '@axios/index';
import { AxiosResponseType, AxiosResultType } from '@axios/type';

export const usePagination = pagination<AxiosResponseType, AxiosResultType>(axios);

/* xxx使用 */
import { usePagination } from '@utils/index';
const { total, pageSize, currentPage, tableData } = usePagination({
  url: 'xxx'
})

参数说明

返回值说明

0.7.3. 事件栈useEventBus

0.7.3.1. 介绍

常用于父子系统之间的事件交互

0.7.3.2. 使用

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import { useEventBus } from 'hdl-global-com'

const routes: RouteRecordRaw[] = [{
  path: '/',
  component: () => import('@/views/index/index.vue'),
  redirect: '/login',
  name: 'default',
  children: [{
    path: '/home',
    name: 'home',
    component: () => import('@views/home/index.vue')
  }, ...]
}, {
  path: '/login',
  name: 'login',
  component: () => import('@/views/login/index.vue')
}]

const router = createRouter({
  history: createWebHistory(),
  routes
})

useEventBus().on('logout', () => {
  router.push('/login')
})

export default router

0.7.4. 数据回显useAssign

0.7.4.1. 介绍

常用于编辑表单时的数据回显

0.7.4.2. 使用

<template>
  <hdlTable @update="updateForm"></hdlTable>
</template>

<script lang="ts" setup>
import { useAssign } from 'hdl-global-com'

const formVal = reactive({
  name: ''
}) // 表单数据
const tableSelectRow = reactive({
  name: '张三',
  age: 18
}) // 当前选中的表格行数据
const updateForm = () => { // 点击编辑按钮时
  Object.assign(formVal, useAssign(formVal, tableSelectRow))
  console.log(formVal)
  // 输出 { name: 张三 }
}
</script>

0.7.5. websocket封装函数useWs

0.7.5.1. 介绍

统一封装websocket，更便捷的调用与监听 需要在该项目中，进行useWs的注册

0.7.5.2. 使用

1. 注册

/* utils/index.ts中 */
import { useWs } from 'hdl-global-com';
import apiUrlList from '@axios/apiUrl';

export const { useInitWs, useWsClose, useWsError, useWsMsg, useWsOpen, useWsSend } = useWs(apiUrlList);

2. useInitWs API说明

useInitWs({
  url: 'xxx',
  data: ''
})

3. useWsOpen API说明

// 举例
const C = useWsOpen(A, B)
//使用
const stopListenOpen = useWsOpen('xxx', () => {
  console.log('ws已打开')
})
onUnmounted(stopListenOpen)

4. useWsSend API说明

// 举例
useWsSend(A, B, {
  interval: C,
  isHeartbeat: D
})
// 使用
useWsSend('xxx', '', {
  interval: 30000,
  isHeartbeat: true
})

5. useWsMsg API说明

// 举例
const C = useWsMsg(A, B)
// 使用
const stopMsgListen = useWsMsg('xxx', (val) => {
  console.log('ws数据：', val)
})
onUnmounted(stopMsgListen)

6. useWsClose API说明

// 举例
const C = useWsClose(A, B)
// 使用
const stopWsCloseListen = useWsClose('xxx', () => {
  console.log('ws关闭')
})
onUnmounted(stopWsCloseListen)

7. useWsError API说明

// 举例
const C = useWsError(A, B)
// 使用
const stopErrorListen = useWsError('xxx', () => {
  console.log('ws异常')
})
onUnmounted(stopErrorListen)

0.8. TS类型

import { TableColumnCtx, InputProps, SelectContext, cascaderProps, DatePickerProps, InputNumberProps, SelectV2Context, TimePickerDefaultProps, CascaderNode, CascaderValue, UploadProps, ElTooltipProps } from 'element-plus';
import { TimeSelectProps } from 'element-plus/es/components/time-select/src/time-select';
import { TreeComponentProps } from 'element-plus/es/components/tree/src/tree.type';
import { DefineComponent, ExtractPropTypes } from 'vue';
import { AxiosResultType } from '../axios/type';

/**
 * @description 一些常用的ts工具函数
 */
export type GetArrItemType<T> = T extends (infer I)[] ? I : T; // 获取数组项的数据类型
export type DictChildType = GetArrItemType<AxiosResultType['getDictChild']>; // 字典类型

/**
 * @description 表格组件的类型导出
 */
type OtherTableColumn<T> = {
  prop: T extends Record<string, any> ? keyof T : string;
  type: 'default' | 'selection' | 'index' | 'expand' | 'move',
  slot: boolean;
  show: any;
  auth: string;
  onlyAuth: boolean;
};
export type TableColumn<T = any> = Partial<
  TableColumnCtx<T> & OtherTableColumn<T>
>[]; // 表格列的类型
export type TableColumnSlotType<T = any> = TableColumn<T>; // 表格列插槽的类型
export type TableRowType<T> = (T extends Array<infer I> ? I : T) | null; // 表格行的类型
export type TableEmitsType = 'info' | 'update' | 'del'; // 表格的操作类型
export type TableRefFuncType = {
  // 表格的ref方法
  clearSelection: () => void;
  getSelectionRows: <T>() => TableRowType<T>[];
  toggleRowSelection: <T>(row: TableRowType<T>, selected: boolean) => void;
  toggleAllSelection: () => void;
  toggleRowExpansion: <T>(row: TableRowType<T>, expanded: boolean) => void;
  setCurrentRow: <T>(row: TableRowType<T>) => void;
  clearSort: () => void;
  doLayout: () => void;
  clearFilter: (columnKey?: string[]) => void;
  sort: (prop: string, order: string) => void;
  scrollTo: (
    options: number | ScrollToOptions,
    yCoord?: number | undefined
  ) => void;
  setScrollLeft: (left?: number | undefined) => void;
  setScrollTop: (top?: number | undefined) => void;
};

/**
 * @description 筛选区域的类型导出
 */
type SearchFilterDefaultType = {
  id: string;
  auth?: string; // 组件权限标识 需要配合父级的auth 不设置则默认展示
  onlyAuth?: boolean; // 增加onlyAuth权限，在auth权限为显示的情况下，只有配置了onlyAuth也为显示，此筛选框才有权限显示
  model: any; // 绑定的数据
  show?: any; // 逻辑控制显示隐藏 显示时权限比auth低 隐藏时权限比auth高
};
type SearchFilter = { // 筛选区域的类型
  'el-input': SearchFilterDefaultType & {
    comName: 'el-input';
    props?: Partial<InputProps>;
    emits?: Partial<{
      blur: (event: FocusEvent) => void;
      focus: (event: FocusEvent) => void;
      change: (value: string | number) => void;
      input: (value: string | number) => void;
      clear: () => void;
    }>;
  };
  'el-select': SearchFilterDefaultType & {
    comName: 'el-select';
    children: {
      comName: 'el-option';
      data: any;
      props?: Partial<{
        value: string | number | boolean | object;
        label: string | number;
        disabled: boolean;
      }>
    };
    props?: Partial<SelectContext['props']>;
    emits?: Partial<{
      change: (value: any) => void;
      visibleChange: (visible: boolean) => void;
      removeTag: (tagValue: any) => void;
      clear: () => void;
      blur: (event: FocusEvent) => void;
      focus: (event: FocusEvent) => void;
    }>
  };
  'el-cascader': SearchFilterDefaultType & {
    comName: 'el-cascader';
    props?: Partial<ExtractPropTypes<typeof cascaderProps> & {
      options: any
    }>;
    emits?: Partial<{
      change: (value: CascaderValue) => void;
      expandChange: (value: CascaderValue) => void;
      blur: (event: FocusEvent) => void;
      focus: (event: FocusEvent) => void;
      visibleChange: (value: boolean) => void;
      removeTag: (value: CascaderNode['valueByOption']) => void
    }>;
  };
  'el-date-picker': SearchFilterDefaultType & {
    comName: 'el-date-picker';
    props?: Partial<DatePickerProps>;
    emits?: Partial<{
      change: (value: any) => void;
      blur: (e: FocusEvent) => void;
      focus: (e: FocusEvent) => void;
      calendarChange: (val: [Date, null | Date]) => void;
      panelChange: (date: Date | [Date, Date], mode: 'month' | 'year', view?: string) => void;
      visibleChange: (visibility: boolean) => void;
    }>;
  };
  'el-input-number': SearchFilterDefaultType & {
    comName: 'el-input-number';
    props?: Partial<InputNumberProps>;
    emits?: Partial<{
      change: (currentValue: number | undefined, oldValue: number | undefined) => void;
      blur: (event: FocusEvent) => void;
      focus: (event: FocusEvent) => void;
    }>;
  };
  'el-select-v2': SearchFilterDefaultType & {
    comName: 'el-select-v2';
    props?: Partial<SelectV2Context['props']>;
    emits?: Partial<{
      change: (val: any) => void;
      visibleChange: (visible: boolean) => void;
      removeTag: (tagValue: any) => void;
      clear: () => void;
      blur: (event: FocusEvent) => void;
      focus: (event: FocusEvent) => void;
    }>
  };
  'el-time-picker': SearchFilterDefaultType & {
    comName: 'el-time-picker';
    props?: Partial<TimePickerDefaultProps>;
    emits?: Partial<{
      change: (val: number | string | Date | [number, number] | [string, string] | [Date, Date]) => void;
      blur: (e: FocusEvent) => void;
      focus: (e: FocusEvent) => void;
      visibleChange: (visibility: boolean) => void;
    }>
  };
  'el-time-select': SearchFilterDefaultType & {
    comName: 'el-time-select';
    props?: Partial<TimeSelectProps>;
    emits?: Partial<{
      change: (value: string) => void;
      blur: (e: FocusEvent) => void;
      focus: (e: FocusEvent) => void;
    }>;
  };
  'el-tree-select': SearchFilterDefaultType & {
    comName: 'el-tree-select';
    props?: Partial<SelectContext['props'] & TreeComponentProps>;
    emits?: Partial<{
      nodeClick: ((...args: any[]) => any);
      nodeContextmenu: ((...args: any[]) => any);
      checkChange: ((...args: any[]) => any);
      check: ((...args: any[]) => any);
      currentChange: ((...args: any[]) => any);
      nodeExpand: ((...args: any[]) => any);
      nodeCollapse: ((...args: any[]) => any);
      nodeDragStart: ((...args: any[]) => any);
      nodeDragEnter: ((...args: any[]) => any);
      nodeDragLeave: ((...args: any[]) => any);
      nodeDragOver: ((...args: any[]) => any);
      nodeDragEnd: ((...args: any[]) => any);
      nodeDrop: ((...args: any[]) => any);
      change: (value: any) => void;
      visibleChange: (visible: boolean) => void;
      removeTag: (tagValue: any) => void;
      clear: () => void;
      blur: (event: FocusEvent) => void;
      focus: (event: FocusEvent) => void;
    }>
  };
};
export type SearchType = SearchFilter[keyof SearchFilter];

/**
 * @description 按钮组件类型导出
 */
type ClassType = 'primary' | 'success' | 'info' | 'warning' | 'danger';
type ButtonTypeDefault = {
  default: { // 默认按钮
    type?: 'default';
    name: string;
    icon?: DefineComponent;
    auth: string;
    func: (...args: any[]) => any;
    class?: ClassType;
    show?: any;
    loading?: any;
    developShow?: boolean;
  };
  children: { // 下拉按钮
    type: 'select',
    name: string;
    class?: ClassType;
    children: {
      name: string;
      icon?: DefineComponent;
      auth: string;
      func: (...args: any[]) => any;
      show?: any;
      loading?: any;
      developShow?: boolean;
    }[]
  };
  upload: { // 上传按钮
    type: 'upload',
    props: Partial<UploadProps>;
    name: string;
    auth: string;
    class?: ClassType;
    show?: any;
    loading?: any;
    developShow?: boolean;
    icon?: DefineComponent;
  };
  tooltip: { // 提示按钮
    type: 'tooltip',
    name: string;
    auth: string;
    class?: ClassType;
    show?: any;
    loading?: any;
    developShow?: boolean;
    icon?: DefineComponent;
    props: Partial<ElTooltipProps>;
    func: (...args: any[]) => any;
  }
}
export type ButtonType = ButtonTypeDefault[keyof ButtonTypeDefault];

/**
 * @description 公共的配置类型导出
 */
export type ConfigType = Partial<{
  localStorageKey: Partial<{
    HDL_TOKEN: string; // token的标识 默认为HDL_TOKEN
    HDL_USER: string; // 用户信息的标识 默认为HDL_USER
    HDL_MENU: string; // 当前保存的菜单项
    HDL_MENU_SN: string; // 浏览器获取菜单sn的标识 默认为HDL_MENU_SN
    HDL_USER_NAME: string; // 用户名
    HDL_PWD: string; // 密码
  }>;
  hdlLogin: Partial<{ // 登录组件的全局配置类型注解
    loginSuccessRoute: string; // 登录成功后的默认路由
    loginRoute: string; // 登录页的路由
    refreshRouteName: string; // 刷新路由的名称
    qkMenuType: string; // qiankun的菜单类型
  }>;
  hdlAxios: Partial<{ // axios请求配置
  }>;
  hdlTable: Partial<{ // 表格组件 用于表格的一些配置
    operateColConfig: TableColumn; // 操作列配置
    authVal: number; // 值为authVal的时候显示
    onlyShowVal: boolean; // 值为onlyShowVal的时候显示
    pageSizes: number[]; // 分页器每页显示个数
    pageSize: number; // 分页器每页显示个数
    popupPageSizes: number[]; // 弹窗分页器每页显示个数
    popupPageSize: number; // 弹窗分页器每页显示个数
  }>;
  hdlMenus: Partial<{ // 菜单组件
    width: number; // 菜单展开后的宽度
    collapseWidth: number; // 菜单伸缩后的宽度
  }>;
  hdlSearch: Partial<{ // 筛选框组件
    width: number; // 筛选框的默认宽度
  }>;
  hdlForm: Partial<{ // 表单组件
    labelWidth: string; // 表单的label宽度
  }>;
  hdlTree: Partial<{ // 树组件
    width: number; // 初始树宽度
    minWidth: number; // 最小宽度
    maxWidth: number; // 最大宽度
  }>;
  hdlWs: Partial<{
    reconnectInter: number[]; // 重连时间间隔 默认为[1000, 3000, 10000, 30000, 60000]
  }>;
}>