签入版本

RXThinkCMF_ThinkPhp8_NaiveVue/zh/architecture/frontend-layer.md

@@ -81,52 +81,69 @@ src/views/
 
 ```vue
 <template>
-  <!-- 搜索区 -->
-  <el-form :model="searchForm" inline>
-    <el-form-item label="名称">
-      <el-input v-model="searchForm.name" />
-    </el-form-item>
-    <el-form-item>
-      <el-button type="primary" @click="fetchData">搜索</el-button>
-    </el-form-item>
-  </el-form>
+  <n-card :bordered="false" class="pt-3 mb-3 proCard">
+    <!-- 搜索区（BasicForm 驱动） -->
+    <BasicForm @register="registerForm" @submit="handleSubmit" @reset="handleReset" />
+  </n-card>
 
-  <!-- 操作栏 -->
-  <el-button v-perm="'sys:example:add'" type="primary" @click="handleAdd">新增</el-button>
-
-  <!-- 数据表格 -->
-  <el-table :data="tableData">
-    <el-table-column prop="id" label="ID" />
-    <el-table-column prop="name" label="名称" />
-    <el-table-column prop="statusText" label="状态" />
-    <el-table-column label="操作">
-      <template #default="{ row }">
-        <el-button v-perm="'sys:example:update'" @click="handleEdit(row)">编辑</el-button>
-        <el-button v-perm="'sys:example:delete'" type="danger" @click="handleDelete(row.id)">删除</el-button>
+  <n-card :bordered="false" class="proCard">
+    <!-- 操作栏 + 数据表格（BasicTable 驱动，分页内置） -->
+    <BasicTable
+      :columns="columns"
+      :request="loadDataTable"
+      :row-key="(row) => row.id"
+      ref="basicTableRef"
+      :actionColumn="actionColumn"
+    >
+      <template #tableTitle>
+        <n-space>
+          <n-button v-perm="'sys:example:add'" type="primary" @click="handleAdd">
+            新增
+          </n-button>
+        </n-space>
       </template>
-    </el-table-column>
-  </el-table>
-
-  <!-- 分页 -->
-  <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize"
-    :total="total" @change="fetchData" />
+    </BasicTable>
+  </n-card>
 </template>
 
 <script setup lang="ts">
+import { h } from 'vue';
+import { NButton } from 'naive-ui';
+import { BasicTable, TableAction } from '@/components/Table';
+import { BasicForm, useForm } from '@/components/Form';
 import { getExamplePage, exampleDelete } from '@/api/tool/example';
 
-const tableData = ref([]);
-const pageNo = ref(1);
-const pageSize = ref(20);
-const total = ref(0);
+const [registerForm, { handleSubmit, handleReset }] = useForm({
+  schemas: [
+    { field: 'name', label: '名称', component: 'NInput' },
+  ],
+});
 
-const fetchData = async () => {
-  const res = await getExamplePage({ pageNo: pageNo.value, pageSize: pageSize.value });
-  tableData.value = res.records;
-  total.value = res.total;
+const columns = [
+  { title: 'ID', key: 'id', width: 80 },
+  { title: '名称', key: 'name' },
+  { title: '状态', key: 'statusText' },
+];
+
+const actionColumn = {
+  width: 200,
+  title: '操作',
+  key: 'action',
+  render(record) {
+    return h(TableAction, {
+      actions: [
+        { label: '编辑', type: 'warning', onClick: () => handleEdit(record), auth: 'sys:example:update' },
+        { label: '删除', type: 'error', onClick: () => handleDelete(record.id), auth: 'sys:example:delete' },
+      ],
+    });
+  },
 };
 
-onMounted(() => fetchData());
+// 分页数据请求（BasicTable 内置分页）
+const loadDataTable = async (params) => {
+  const res = await getExamplePage({ ...params });
+  return { records: res.records, total: res.total };
+};
 </script>
 ```
 
@@ -312,10 +329,10 @@ src/utils/http/axios/
 
 ```vue
 <!-- v-perm：单权限 -->
-<el-button v-perm="'sys:user:add'" type="primary">新增</el-button>
+<n-button v-perm="'sys:user:add'" type="primary">新增</n-button>
 
 <!-- v-perms：多权限（满足任一即可） -->
-<el-button v-perms="['sys:user:add', 'sys:user:update']">操作</el-button>
+<n-button v-perms="['sys:user:add', 'sys:user:update']">操作</n-button>
 ```
 
 无权限时元素直接从 DOM 移除，而非仅隐藏。
@@ -331,8 +348,11 @@ src/utils/http/axios/
 | Hook | 文件 | 说明 |
 |------|------|------|
 | `usePermission` | `hooks/web/usePermission.ts` | 权限判断（hasPermission、hasSomePermission） |
-| `useTable` | `hooks/web/useTable.ts` | 表格通用逻辑（分页、搜索、刷新） |
-| `useForm` | `hooks/web/useForm.ts` | 表单通用逻辑（提交、重置、校验） |
+| `useMessage` / `useDialog` | `hooks/web/useMessage.ts`、`useDialog.ts` | 消息提示 / 确认弹窗（离散 API，可在非组件上下文调用） |
+| `useLoadingBar` | `hooks/web/useLoadingBar.ts` | 顶部加载条 |
+| `useLockFn` | `utils/useLockFn.ts` | 请求级防重复提交 |
+| `useForm` | `components/Form/src/hooks/useForm.ts` | 表单通用逻辑（注册、提交、重置、校验） |
+| 表格逻辑 | `components/Table/src/hooks/*` | BasicTable 内部钩子（分页、数据源、搜索） |
 
 ### Directives（自定义指令）