优化更新

DjangoAdmin_FastAPI_AntdVue/zh/volume4/frontend/components.md

@@ -1,7 +1,7 @@
 # 公共组件库
 
 :::tip 说明
-项目提供丰富的公共组件，位于 `ui/src/components/` 目录，基于 ElementPlus 二次封装，覆盖表格、表单、弹窗、上传、富文本编辑等常见场景。组件通过 `src/plugins/` 中的 `setupCustomComponents` 全局注册，任何页面直接使用，无需单独 import。
+项目提供丰富的公共组件，位于 `ui/src/components/` 目录，基于 AntDesign Vue 二次封装，覆盖表格、表单、弹窗、上传、富文本编辑等常见场景。组件通过 `src/plugins/` 中的 `setupCustomComponents` 全局注册，任何页面直接使用，无需单独 import。
 :::
 
 ## 组件总览
@@ -17,7 +17,7 @@
 | CropperImage | `components/Cropper/` | 图片裁剪（圆形/矩形、实时预览） |
 | QrCode | `components/Qrcode/` | 二维码生成（canvas/img、内嵌 logo） |
 | ChinaArea | `components/ChinaArea/` | 省市区级联（懒加载、二/三级联动） |
-| Icon | `components/icon/` | 图标（支持 ElementPlus 图标 + SVG 图标） |
+| Icon | `components/icon/` | 图标（支持 AntDesign 图标 + SVG 图标） |
 | BasicSelect | `components/Select/` | 增强下拉（远程请求、本地缓存） |
 | CountTo | `components/CountTo/` | 数字动画（前缀/后缀、千分位、缓动曲线） |
 | Password | `components/Password/` | 密码强度（强度指示器、重复确认、复杂度校验） |
@@ -38,7 +38,7 @@
 
 ## BasicTable 表格
 
-表格组件是使用频率最高的组件，基于 `el-table` + `el-pagination` 封装，详见 [BasicTable 表格](/zh/volume4/frontend/table) 章节。
+表格组件是使用频率最高的组件，基于 `a-table` 封装，详见 [BasicTable 表格](/zh/volume4/frontend/table) 章节。
 
 ### Props
 
@@ -129,18 +129,23 @@
 <template>
   <BasicTable :columns="columns" :request="loadDataTable" ref="tableRef">
     <template #tableTitle>
-      <el-button v-perm="['sys:level:add']" type="primary" @click="handleAdd">
-        <el-icon><Plus /></el-icon>新增
-      </el-button>
+      <a-space>
+        <a-button v-perm="['sys:level:add']" type="primary" @click="handleAdd">
+          <template #icon><PlusOutlined /></template>
+          新增
+        </a-button>
+      </a-space>
     </template>
   </BasicTable>
 </template>
 
 <script setup lang="ts">
+import { PlusOutlined } from '@ant-design/icons-vue';
+
 const columns = [
-  { label: '名称', prop: 'name', width: 200 },
-  { label: '状态', prop: 'status', width: 100 },
-  { label: '创建时间', prop: 'createTime', width: 180 },
+  { title: '名称', dataIndex: 'name', width: 200 },
+  { title: '状态', dataIndex: 'status', width: 100 },
+  { title: '创建时间', dataIndex: 'createTime', width: 180 },
 ];
 
 const actionColumn = {
@@ -287,8 +292,8 @@ const [registerForm] = useForm({
     {
       field: 'dateRange',
       label: '日期范围',
-      component: 'DatePicker',
-      componentProps: { type: 'daterange' },
+      component: 'RangePicker',
+      componentProps: { valueFormat: 'YYYY-MM-DD' },
     },
   ],
 });
@@ -299,7 +304,7 @@ const [registerForm] = useForm({
 
 ## BasicModal 弹窗
 
-弹窗组件基于 `el-dialog` 封装，支持拖拽、自定义按钮，详见 [Modal 弹窗](/zh/volume4/frontend/modal) 章节。
+弹窗组件基于 `a-modal` 封装，支持拖拽、自定义按钮，详见 [Modal 弹窗](/zh/volume4/frontend/modal) 章节。
 
 ### Props
 
@@ -356,7 +361,7 @@ function handleEdit(record) {
 
 ## BasicUpload 上传
 
-文件/图片上传组件，基于 `el-upload` 封装，支持卡片/列表模式、数量限制、图片预览。
+文件/图片上传组件，基于 `a-upload` 封装，支持卡片/列表模式、数量限制、图片预览。
 
 ### Props
 
@@ -698,10 +703,10 @@ async function getDeptOptions() {
     <BasicTable :columns="columns" :request="loadData" />
 
     <template #leftFooter>
-      <el-button @click="handleCancel">取消</el-button>
+      <a-button @click="handleCancel">取消</a-button>
     </template>
     <template #rightFooter>
-      <el-button type="primary" @click="handleSubmit">提交</el-button>
+      <a-button type="primary" @click="handleSubmit">提交</a-button>
     </template>
   </PageWrapper>
 </template>
@@ -724,7 +729,7 @@ async function getDeptOptions() {
 ```vue
 <template>
   <Authority :value="['sys:user:add']">
-    <el-button type="primary">新增用户</el-button>
+    <a-button type="primary">新增用户</a-button>
   </Authority>
 </template>
 ```
@@ -732,7 +737,7 @@ async function getDeptOptions() {
 :::tip v-perm 指令
 除了 `Authority` 组件，项目还提供 `v-perm` 指令，功能相同但更简洁：
 ```vue
-<el-button v-perm="['sys:user:add']">新增用户</el-button>
+<a-button v-perm="['sys:user:add']">新增用户</a-button>
 ```
 :::
 
@@ -740,7 +745,7 @@ async function getDeptOptions() {
 
 ## Icon 图标
 
-统一图标组件，支持 ElementPlus 图标和 SVG 图标。
+统一图标组件，支持 AntDesign 图标和 SVG 图标。
 
 ### Props
 
@@ -754,8 +759,8 @@ async function getDeptOptions() {
 
 ```vue
 <template>
-  <!-- ElementPlus 图标 -->
-  <Icon name="el-icon-Plus" size="18px" />
+  <!-- AntDesign 图标 -->
+  <Icon name="ant-design:plus-outlined" size="18px" />
   <!-- SVG 图标 -->
   <Icon name="svg-icon-user" />
 </template>
@@ -836,4 +841,4 @@ setupCustomComponents(app); // 注册所有自定义组件
 
 ## 总结
 
-公共组件库基于 ElementPlus 二次封装，核心三件套 BasicTable（表格）、BasicForm（表单）、BasicModal（弹窗）覆盖列表页标准场景。辅以 Upload、Editor、Cropper 等业务组件，以及 Authority、v-perm 权限体系。通过全局注册，任何页面直接使用，无需单独 import。优先使用公共组件，避免重复开发。
+公共组件库基于 AntDesign Vue 二次封装，核心三件套 BasicTable（表格）、BasicForm（表单）、BasicModal（弹窗）覆盖列表页标准场景。辅以 Upload、Editor、Cropper 等业务组件，以及 Authority、v-perm 权限体系。通过全局注册，任何页面直接使用，无需单独 import。优先使用公共组件，避免重复开发。