---
name: new-list-page
description: 在本模板中新建一个带搜索+分页表格的列表页（PcSearch + PcTable + useTablePage）。当需要新增后台列表/查询页面时使用。
---

# 新建列表页

本模板最核心的页面范式。完整示例见 `src/views/demo/index.vue`。

## 步骤

1. 先有 API 模块（见 `new-api-module` 技能），拿到列表请求函数，如 `getPayList`。
2. 在 `src/views/<模块>/index.vue` 写页面：用 `useTablePage` 统一持有 `searchRef` / `tableRef` 与 `requestTable`。
3. 在 `src/router/index.ts` 加路由（动态路由必须带 `name`，与 `defineOptions` 的 name 对应）。

## 模板

```vue
<script setup lang="ts">
import type { FormItemProp, IColumList } from "@sud-web/vue-ui"
import useTablePage from "@sud-web/vue-hooks/useTablePage"
import { reactive } from "vue"
import { getPayList } from "@/api/recharge"

defineOptions({ name: "DemoList" })

// 统一管理 search / table 引用，requestTable 触发刷新
const { tableRef, searchRef, requestTable } = useTablePage()

// 搜索表单数据
const searchFormData = reactive({ txType: "", status: "" })

// 搜索表单项配置
const searchFormList: FormItemProp[] = [
  { prop: "txType", label: "交易类型", type: "input", width: 200 },
  {
    prop: "status",
    label: "状态",
    type: "select",
    width: 180,
    sources: [
      { label: "成功", value: "SUCCESS" },
      { label: "处理中", value: "READY" }
    ]
  }
]

// 表格列配置
const columList: IColumList = [
  { label: "交易号", prop: "txId", minWidth: 160, align: "left" },
  { label: "金额", prop: "amount", minWidth: 140, align: "left" },
  { label: "状态", prop: "status", minWidth: 120, align: "left" }
]

// 分页参数（pageNo/pageSize）由 PcTable 注入，业务只合并搜索条件
function requestApi(params: any) {
  return getPayList({ ...params, ...searchFormData })
}
</script>

<template>
  <el-card shadow="never">
    <PcSearch ref="searchRef" v-model="searchFormData" :form-list="searchFormList" @request="requestTable" />
    <PcTable ref="tableRef" :request-api="requestApi" :colum-list="columList" type-index>
      <!-- 自定义列：具名插槽 #列prop -->
      <template #amount="{ row }">
        <span>¥ {{ row.amount }}</span>
      </template>
    </PcTable>
  </el-card>
</template>
```

## 要点 / 约束

- `PcSearch` / `PcTable` 已在 `src/main.ts` 全局注册，**无需 import**。
- 流程：搜索点击 → `PcSearch` 触发 `@request` → `requestTable` → `PcTable` 重新请求。
- 列内容自定义一律用具名插槽 `#列prop="{ row }"`。
- 风格遵守 `AGENTS.md`：双引号、无分号、无尾随逗号、SFC 块序 script→template→style。改完跑 `npm run lint`。
