签入版本

RXThinkCMF_ThinkPhp8_AntdVue/zh/guide/frontend-integration.md

@@ -165,7 +165,7 @@ export function exampleExport(params) {
 | `querySchemas.ts` | 搜索表单字段定义 |
 
 :::tip 关于以下示例
-以下代码使用原生 `el-table` / `el-form` 简化展示核心逻辑。实际项目中应使用封装好的 `BasicTable` + `useForm` 等组合式组件，详见[第 9 章组件文档](/zh/frontend/overview.html)。
+以下代码使用原生 `a-table` / `a-form` 简化展示核心逻辑。实际项目中应使用封装好的 `BasicTable` + `useForm` 等组合式组件，详见[第 9 章组件文档](/zh/frontend/overview.html)。
 :::
 
 `index.vue`（列表页）示例：
@@ -175,51 +175,61 @@ export function exampleExport(params) {
 <template>
   <div>
     <!-- 搜索表单 -->
-    <el-form :model="searchForm" inline>
-      <el-form-item label="名称">
-        <el-input v-model="searchForm.name" placeholder="请输入名称" />
-      </el-form-item>
-      <el-form-item label="状态">
-        <el-select v-model="searchForm.status" placeholder="请选择" clearable>
-          <el-option label="启用" :value="1" />
-          <el-option label="禁用" :value="0" />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="handleSearch">搜索</el-button>
-        <el-button @click="handleReset">重置</el-button>
-      </el-form-item>
-    </el-form>
+    <a-form :model="searchForm" layout="inline">
+      <a-form-item label="名称">
+        <a-input v-model:value="searchForm.name" placeholder="请输入名称" allow-clear />
+      </a-form-item>
+      <a-form-item label="状态">
+        <a-select v-model:value="searchForm.status" placeholder="请选择" allow-clear>
+          <a-select-option :value="1">启用</a-select-option>
+          <a-select-option :value="0">禁用</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item>
+        <a-button type="primary" @click="handleSearch">搜索</a-button>
+        <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
+      </a-form-item>
+    </a-form>
 
     <!-- 操作按钮 -->
-    <el-button type="primary" @click="handleAdd">新增</el-button>
-    <el-button type="danger" :disabled="!selectedIds.length" @click="handleBatchDelete">
-      批量删除
-    </el-button>
+    <a-space style="margin: 10px 0">
+      <a-button type="primary" @click="handleAdd">新增</a-button>
+      <a-button danger :disabled="!selectedIds.length" @click="handleBatchDelete">
+        批量删除
+      </a-button>
+    </a-space>
 
     <!-- 数据表格 -->
-    <el-table :data="tableData" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" />
-      <el-table-column prop="id" label="ID" width="80" />
-      <el-table-column prop="name" label="名称" />
-      <el-table-column prop="typeText" label="类型" width="100" />
-      <el-table-column prop="statusText" label="状态" width="100" />
-      <el-table-column prop="sort" label="排序" width="80" />
-      <el-table-column prop="createTime" label="创建时间" width="180" />
-      <el-table-column label="操作" width="200">
-        <template #default="{ row }">
-          <el-button size="small" @click="handleEdit(row)">编辑</el-button>
-          <el-button size="small" type="danger" @click="handleDelete(row.id)">删除</el-button>
+    <a-table
+      :data-source="tableData"
+      :pagination="false"
+      :row-key="(row) => row.id"
+      :row-selection="{ onChange: handleSelectionChange }"
+    >
+      <a-table-column title="ID" data-index="id" width="80" />
+      <a-table-column title="名称" data-index="name" />
+      <a-table-column title="类型" data-index="typeText" width="100" />
+      <a-table-column title="状态" data-index="statusText" width="100" />
+      <a-table-column title="排序" data-index="sort" width="80" />
+      <a-table-column title="创建时间" data-index="createTime" width="180" />
+      <a-table-column title="操作" width="200">
+        <template #bodyCell="{ record }">
+          <a-space>
+            <a-button size="small" type="primary" @click="handleEdit(record)">编辑</a-button>
+            <a-button size="small" danger @click="handleDelete(record.id)">删除</a-button>
+          </a-space>
         </template>
-      </el-table-column>
-    </el-table>
+      </a-table-column>
+    </a-table>
 
     <!-- 分页 -->
-    <el-pagination
-      v-model:current-page="pageNo"
+    <a-pagination
+      style="margin-top: 10px; text-align: right"
+      v-model:current="pageNo"
       v-model:page-size="pageSize"
       :total="total"
-      @current-change="fetchData"
+      show-total
+      @change="fetchData"
     />
   </div>
 </template>
@@ -249,7 +259,7 @@ const handleSearch = () => { pageNo.value = 1; fetchData(); };
 const handleReset = () => { searchForm.value = { name: '', status: '' }; handleSearch(); };
 const handleDelete = async (id: number) => { await exampleDelete(id); fetchData(); };
 const handleBatchDelete = async () => { await exampleBatchDelete({ ids: selectedIds.value }); fetchData(); };
-const handleSelectionChange = (rows: any[]) => { selectedIds.value = rows.map((r) => r.id); };
+const handleSelectionChange = (keys: any[]) => { selectedIds.value = keys; };
 
 onMounted(() => fetchData());
 </script>