配置驱动

vue-admin-kit 采用配置驱动的设计模式，通过 defineXxxConfig() 辅助函数提供类型安全的配置。

配置定义模式

// 定义函数（原样返回，仅提供类型）
export function defineSearchConfig(
  config: SearchConfigItem[]
): SearchConfigItem[] {
  return config;
}

// 使用
const searchConfig = defineSearchConfig([
  { type: "input", prop: "name", label: "名称" },
  { type: "select", prop: "status", dictType: "sys_status" },
]);

可用的定义函数

函数	说明
defineSearchConfig	搜索配置
defineFormConfig	表单配置
defineColumnsConfig	列配置
defineApiConfig	API 配置
definePermissions	权限配置
defineTableOperations	工具栏按钮
defineOperateColumns	行操作按钮

条件显示模式

操作按钮的条件显示：

import { showWhen, showWhenIn, showAll, showAny } from "vue-admin-kit";

// 单条件
show: showWhen("status", "1");

// 多值匹配
show: showWhenIn("status", ["1", "2"]);

// AND 组合
show: showAll(showWhen("status", "1"), showWhen("role", "admin"));

// OR 组合
show: showAny(showWhen("status", "1"), showWhen("isSuper", true));

Provide/Inject 模式

全局配置注入：

// 提供配置
providePageTemplateConfig({
  dependencies: { dictLoader, oss },
  ui: { formItemSize: "default" },
});

// 使用配置
const config = usePageTemplateConfig();

Hook 组合模式

业务逻辑封装为可复用的 Hook：

// 对话框状态管理
const { visible, title, openDialog, closeDialog } = useDialog({
  title: "新增",
});

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

// 页面状态管理
useState({ api, searchConfig, formConfig, columnsConfig });