优化更新

DjangoAdmin_FastAPI_NaiveVue/zh/volume7/fe-component.md

@@ -2,11 +2,11 @@
 
 ## 概述
 
-前端基于 Vue3 + ElementPlus + 自定义组件库构建。页面统一使用 `PageWrapper` + `BasicForm` + `BasicTable` + `TableAction` 四件套，分页由 `BasicTable` 内置处理，无需单独引入分页组件。
+前端基于 Vue3 + NaiveUI + 自定义组件库构建。页面统一使用 `PageWrapper` + `BasicForm` + `BasicTable` + `TableAction` 四件套，分页由 `BasicTable` 内置处理，无需单独引入分页组件。
 
 :::tip 技术栈
 - Vue3（Composition API + `<script setup>`）
-- ElementPlus
+- NaiveUI
 - 自定义组件（BasicTable / BasicForm / TableAction / PageWrapper）
 - Pinia 状态管理
 - Vue Router 路由管理
@@ -56,7 +56,7 @@ ui/src/
 ├── utils/                # 工具函数
 ├── hooks/                # 组合式函数
 ├── styles/               # 全局样式
-├── plugins/              # 插件注册（ElementPlus、自定义组件、指令）
+├── plugins/              # 插件注册（NaiveUI、自定义组件、指令）
 └── main.ts               # 入口文件
 ```
 
@@ -79,12 +79,12 @@ ui/src/
 <template>
   <PageWrapper>
     <!-- 搜索表单 -->
-    <el-card :bordered="false" class="pt-3 mb-3 proCard">
+    <n-card :bordered="false" class="pt-3 mb-3 proCard">
       <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset" />
-    </el-card>
+    </n-card>
 
     <!-- 数据表格 -->
-    <el-card :bordered="false" class="proCard">
+    <n-card :bordered="false" class="proCard">
       <BasicTable
         :columns="columns"
         :request="loadDataTable"
@@ -94,22 +94,22 @@ ui/src/
         @selection-change="onSelectionChange"
       >
         <template #tableTitle>
-          <el-button type="primary" @click="handleAdd" v-perm="['sys:param:add']">
-            <el-icon><PlusOutlined /></el-icon>
+          <n-button type="primary" @click="handleAdd" v-perm="['sys:param:add']">
+            <n-icon><PlusOutlined /></n-icon>
             添加参数
-          </el-button>
-          <el-button
-            type="danger"
+          </n-button>
+          <n-button
+            type="error"
             @click="handleDelete()"
             :disabled="!selectionData.length"
             v-perm="['sys:param:batchDelete']"
           >
-            <el-icon><Delete /></el-icon>
+            <n-icon><Delete /></n-icon>
             删除
-          </el-button>
+          </n-button>
         </template>
       </BasicTable>
-    </el-card>
+    </n-card>
 
     <!-- 编辑弹窗（懒加载） -->
     <editDialog
@@ -133,7 +133,7 @@ ui/src/
 ```typescript
 // views/data/param/columns.ts
 import { h } from 'vue';
-import { ElTag } from 'element-plus';
+import { NTag } from 'naive-ui';
 
 export const columns = [
   { type: 'selection' },                    // 多选列
@@ -146,7 +146,7 @@ export const columns = [
     prop: 'type',
     minWidth: 100,
     render(record) {
-      return h(ElTag,
+      return h(NTag,
         { type: record.row.type == 0 ? 'primary' : 'warning' },
         { default: () => (record.row.type == 0 ? '系统' : '业务') }
       );
@@ -157,8 +157,8 @@ export const columns = [
     prop: 'status',
     minWidth: 100,
     render(record) {
-      return h(ElTag,
-        { type: record.row.status == 1 ? 'success' : 'danger' },
+      return h(NTag,
+        { type: record.row.status == 1 ? 'success' : 'error' },
         { default: () => (record.row.status == 1 ? '正常' : '禁用') }
       );
     },
@@ -172,8 +172,8 @@ export const columns = [
 ```typescript
 // 状态标签
 render(record) {
-  return h(ElTag,
-    { type: record.row.status == 1 ? 'success' : 'danger' },
+  return h(NTag,
+    { type: record.row.status == 1 ? 'success' : 'error' },
     { default: () => record.row.statusText }  // 使用后端 serialize_maps 返回的 xxxText
   );
 }
@@ -251,7 +251,7 @@ const actionColumn = reactive({
         {
           label: '删除',
           icon: 'Delete',
-          type: 'danger',
+          type: 'error',
           onClick: handleDelete.bind(null, record),
           auth: ['sys:param:delete'],
         },