Hooks

useState

页面状态管理 Hook，用于配置 CRUD 页面。

import { useState } from 'vue-admin-kit'

useState({
  api: {
    list: (params) => getList(params),
    add: (data) => addItem(data),
    edit: (data) => updateItem(data),
    delete: (id) => deleteItem(id),
    detail: (id) => getDetail(id),
    batchDelete: (ids) => batchDelete(ids),
    export: (params) => exportData(params),
    import: (file) => importData(file)
  },
  searchConfig: [...],
  formConfig: [...],
  columnsConfig: [...],
  tableOptions: {
    tableOperationConfig: [...],  // 工具栏按钮
    operateColumns: [...]          // 行操作按钮
  }
})

useDialog

对话框状态管理 Hook。

import { useDialog } from "vue-admin-kit";

const { visible, title, openDialog, closeDialog, toggleDialog, setTitle } =
  useDialog({
    title: "新增用户",
    visible: false,
  });

// 打开对话框
openDialog("新增用户");

// 关闭对话框
closeDialog();

// 切换显示状态
toggleDialog();

// 设置标题
setTitle("编辑用户");

多个对话框

const addDialog = useDialog({ title: "新增" });
const editDialog = useDialog({ title: "编辑" });
const detailDialog = useDialog({ title: "详情" });

// 分别控制
addDialog.openDialog();
editDialog.openDialog("编辑用户");
detailDialog.closeDialog();

在模板中使用

<template>
  <el-dialog v-model="visible" :title="title">
    <!-- 对话框内容 -->
  </el-dialog>
</template>

useDict

字典数据获取 Hook。

import {
  useDict,
  useDictReactive,
  useDictLabel,
  useDictOptions,
  useDictTagType,
} from "vue-admin-kit";

// 响应式获取字典数据
const { dictData, loaded } = useDict("sys_status");

// 响应式字典（返回 ref）
const statusDict = useDictReactive("sys_status");

// 获取字典标签（响应式）
const statusLabel = useDictLabel("sys_status", "1");

// 获取字典选项列表（用于 Select 组件）
const statusOptions = useDictOptions("sys_status");

// 获取字典标签类型（用于 Tag 组件）
const tagType = useDictTagType("sys_status", "1");

同步方法

import {
  getDictLabel,
  getDictLabels,
  preloadDicts,
  clearDictCache,
  isDictLoaded,
  areDictsLoaded,
} from "vue-admin-kit";

// 同步获取标签（需确保已加载）
const label = getDictLabel("sys_status", "1");

// 批量获取标签
const labels = getDictLabels("sys_status", ["1", "2"]);

// 预加载字典
await preloadDicts(["sys_status", "sys_yes_no", "sys_user_sex"]);

// 清除字典缓存
clearDictCache("sys_status"); // 清除单个
clearDictCache(); // 清除全部

// 检查字典是否已加载
const loaded = isDictLoaded("sys_status");
const allLoaded = areDictsLoaded(["sys_status", "sys_yes_no"]);

useTableHeight

表格高度管理 Hook。

import {
  useTableHeight,
  resetTableHeightState,
  resetAllTableHeightStates,
} from "vue-admin-kit";

// 基础用法
const { calculateTableHeight } = useTableHeight();

// 多表格场景，使用 instanceKey 隔离
const { calculateTableHeight } = useTableHeight({
  instanceKey: Symbol("table1"),
});

// 手动触发高度计算
calculateTableHeight();

// 重置单个实例状态
resetTableHeightState(instanceKey);

// 重置所有实例状态
resetAllTableHeightStates();

useTableHeightEmitter

表格高度事件发射器。

import { useTableHeightEmitter } from "vue-admin-kit";

// 在组件中使用
const emit = defineEmits(["setTableHeight"]);
const { emitSetTableHeight } = useTableHeightEmitter(emit);

// 手动触发高度更新
emitSetTableHeight();

useConfirmAction

确认操作 Hook。

import { useConfirmAction } from "vue-admin-kit";

const { confirmAction } = useConfirmAction();

// 基础用法
await confirmAction("确定删除吗？", async () => {
  await deleteApi(id);
});

// 自定义成功消息
await confirmAction("确定提交吗？", submitFn, "提交成功");

// 带回调判断
const success = await confirmAction("确定吗？", actionFn);
if (success) {
  refreshList();
}

直接函数调用

import { confirmAction } from "vue-admin-kit";

// 不需要 hook，直接调用
await confirmAction("确定删除吗？", deleteFn);

创建状态切换函数

import { createStatusToggle } from 'vue-admin-kit'

// 创建状态切换函数（上架/下架场景）
const toggleStatus = createStatusToggle(updateStatusApi, getData)

// 在操作列中使用
{
  title: '下架',
  onClick: (row) => toggleStatus(row.id, '0', '确定下架该商品吗？')
}

usePackageAppConfig

获取包配置 Hook，返回当前的全局配置。

import { usePackageAppConfig } from "vue-admin-kit";

const config = usePackageAppConfig();

// 访问 UI 配置
const size = config.ui.formItemSize;

// 访问依赖配置
const dictLoader = config.dependencies.dictLoader;
const oss = config.dependencies.oss;
const calculateHeight = config.dependencies.calculateHeight;

// 访问字典配置
const preload = config.dict.preload;
const commonTypes = config.dict.commonTypes;
const cacheTime = config.dict.cacheTime;

返回值类型

interface InternalConfig {
  dict: {
    preload: boolean;
    cacheTime: number;
    timeout: number;
    retryCount: number;
    commonTypes: string[];
  };
  dependencies: {
    oss?: OssApi;
    permissionChecker?: (value?: string[]) => boolean;
    dictLoader?: (
      dictType: string,
      options: DictLoadOptions
    ) => Promise<DictLoadResult>;
    calculateHeight?: (formHeight: number, otherHeight: number) => number;
    calculateWidth?: (options?: {
      waitForVisible?: boolean;
    }) => Promise<number> | number;
    customAdapters?: Record<string, DictAdapterConfig>;
  };
  ui: {
    formItemSize: FormItemSizeType | (() => FormItemSizeType);
  };
}

使用场景

// 在自定义组件中获取 OSS 配置
const config = usePackageAppConfig();
const uploadFile = async (file: File) => {
  if (config.dependencies.oss) {
    return await config.dependencies.oss.uploadOSS(file);
  }
  throw new Error("OSS 未配置");
};

// 获取响应式表单尺寸
const getFormSize = () => {
  const { formItemSize } = config.ui;
  return typeof formItemSize === "function" ? formItemSize() : formItemSize;
};