签入版本

RXThinkCMF_Laravel13_AntdVue/zh/guide/frontend-integration.md

@@ -147,7 +147,7 @@ HTTP 封装（Token 携带、401 处理、统一错误提示、camel/snake 转
 | `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`（列表页）示例：
@@ -157,50 +157,56 @@ HTTP 封装（Token 携带、401 处理、统一错误提示、camel/snake 转
 <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="2" />
-        </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 style="width: 160px">
+          <a-select-option :value="1">启用</a-select-option>
+          <a-select-option :value="2">停用</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item>
+        <a-button type="primary" @click="handleSearch">搜索</a-button>
+        <a-button @click="handleReset">重置</a-button>
+      </a-form-item>
+    </a-form>
 
     <!-- 操作按钮（v-perm 控制显示，与后端权限码一致） -->
-    <el-button v-perm="['sys:example:add']" type="primary" @click="handleAdd">新增</el-button>
-    <el-button v-perm="['sys:example:batchDelete']" type="danger"
-               :disabled="!selectedIds.length" @click="handleBatchDelete">批量删除</el-button>
+    <a-space style="margin: 12px 0">
+      <a-button v-perm="['sys:example:add']" type="primary" @click="handleAdd">新增</a-button>
+      <a-button v-perm="['sys:example:batchDelete']" 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="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 v-perm="['sys:example:update']" size="small" @click="handleEdit(row)">编辑</el-button>
-          <el-button v-perm="['sys:example:delete']" size="small" type="danger"
-                     @click="handleDelete(row.id)">删除</el-button>
+    <a-table
+      :data-source="tableData"
+      :columns="columns"
+      :row-selection="{ selectedRowKeys: selectedIds, onChange: handleSelectionChange }"
+      :pagination="false"
+      row-key="id"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a-button v-perm="['sys:example:update']" size="small" @click="handleEdit(record)">编辑</a-button>
+            <a-button v-perm="['sys:example:delete']" size="small" danger
+                       @click="handleDelete(record.id)">删除</a-button>
+          </a-space>
         </template>
-      </el-table-column>
-    </el-table>
+      </template>
+    </a-table>
 
     <!-- 分页（后端固定返回 records / total / current / size / pages） -->
-    <el-pagination
-      v-model:current-page="pageNo"
+    <a-pagination
+      v-model:current="pageNo"
       v-model:page-size="pageSize"
       :total="total"
-      @current-change="fetchData"
+      :show-total="(t) => `共 ${t} 条`"
+      style="margin-top: 16px; text-align: right"
+      @change="fetchData"
     />
   </div>
 </template>
@@ -209,6 +215,15 @@ HTTP 封装（Token 携带、401 处理、统一错误提示、camel/snake 转
 import { ref, onMounted } from 'vue';
 import { getExamplePage, exampleDelete, exampleBatchDelete } from '@/api/tool/example';
 
+const columns = [
+  { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
+  { title: '名称', dataIndex: 'name', key: 'name' },
+  { title: '状态', dataIndex: 'statusText', key: 'statusText', width: 100 },
+  { title: '排序', dataIndex: 'sort', key: 'sort', width: 80 },
+  { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 180 },
+  { title: '操作', key: 'action', width: 200 },
+];
+
 const searchForm = ref({ name: '', status: '' });
 const tableData = ref([]);
 const pageNo = ref(1);
@@ -230,7 +245,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>
@@ -249,7 +264,7 @@ tool/example/index
 ## 步骤四：测试联调
 
 1. 确保后端服务运行：`php artisan serve`（或 `composer dev`）
-2. 确保前端服务运行：`cd ui && pnpm dev`（开发端口 8001）
+2. 确保前端服务运行：`cd ui && pnpm dev`（开发端口 8002）
 3. 为测试角色分配新菜单权限（见 [3.8 权限节点配置](/zh/guide/permission.html)）
 4. 刷新前端页面，侧边栏应出现"案例演示"菜单
 5. 点击菜单，测试增删改查功能