AdminTable 组件及相关 API

AdminTable 是一个多功能的 Vue 组件，专为在管理界面中显示和管理表格数据而设计。它提供了分页、排序、筛选、列可见性控制和行选择等功能。

AdminTable 组件

app/components/AdminTable/index.vue

核心组件，负责协调表格的显示和交互。

主要功能：

• 数据获取： 接受一个 fetchData prop，该函数负责根据分页、排序和筛选参数检索数据。
• 列定义： 使用 columns prop 定义表格结构，包括表头和数据访问器。
• 筛选： 支持通过 filters prop 定义的各种筛选类型（input、checkbox、tabs、daterange）。筛选条件的更改会触发数据重新获取。
• 分页： 集成了一个分页组件，页码和每页项目数与 URL 查询参数同步。
• 排序： 排序选项也与 URL 查询参数同步。
• 列可见性： 利用可组合函数和组件，允许用户显示/隐藏列。
• 行选择： 如果 canSelect 为 true，则启用行选择功能，由可组合函数管理。
• 状态管理： 组件状态（页码、每页数量、排序选项）是响应式的，并与 URL 查询参数同步，以提供更好的用户体验和可共享性。
• 错误处理： 包括数据获取操作的基本错误处理，失败时显示提示通知。
• 刷新功能： 提供 handleRefresh 方法以手动重新获取表格数据。

后端 API

支持 AdminTable 组件的两个主要 API 端点：

1. 列表 API (/api/admin/list/[tableName].get.ts)

   • 此动态 GET 端点为指定的 tableName 检索经过分页和筛选的记录列表。
   • 路径参数： tableName (string) - 要查询的数据库表的名称。
   • 查询参数：
     • page (number, 可选, 默认值: 1): 分页的页码。
     • limit (number, 可选, 默认值: 20, 最大值: 100): 每页的项目数。
     • filter (string, 可选): 一个 JSON 字符串，表示筛选条件数组 (例如：[{ "col": "name", "op": "like", "v": "test" }])。
     • sort (string, 可选): 一个 JSON 字符串，表示排序条件数组 (例如：[[ "createdAt", "desc" ]])。
   • 功能：
     • 验证 tableName。
     • 解析并应用 filter 和 sort 查询参数。
     • 使用 page 和 limit 应用分页。
     • 返回一个包含 data (记录数组)、total (总记录数)、page 和 limit 的对象。
     • 使用 Drizzle ORM 进行数据库交互。

2. 计数 API (/api/admin/count/[tableName]/[columnName].get.ts)

   • 此动态 GET 端点检索给定 tableName 中指定 columnName 的不同值的计数，可选择筛选。
   • 路径参数：
     • tableName (string): 数据库表的名称。
     • columnName (string): 要计算不同值的列的名称。
   • 查询参数：
     • filter (string, 可选): 一个 JSON 字符串，表示筛选条件数组，类似于列表 API。
   • 功能：
     • 验证 tableName 和 columnName。
     • 解析并应用 filter 查询参数。
     • 返回一个对象数组，每个对象包含一个不同的 column 值及其 count。
     • 用于生成统计数据或填充筛选选项 (例如，带计数的复选框)。

这种灵活的前端组件和强大的后端 API 的组合，为管理面板中的数据管理提供了一个强大的系统。