签入版本

DjangoAdmin_Tornado_AntdVue/zh/volume2/fe-view.md

@@ -1,6 +1,6 @@
 # 前端页面视图
 
-前端页面视图是用户直接交互的界面。项目使用 Vue3 + ElementPlus + Vite 构建。一个完整的 CRUD 页面由 4 个文件组成：
+前端页面视图是用户直接交互的界面。项目使用 Vue3 + AntDesign + Vite 构建。一个完整的 CRUD 页面由 4 个文件组成：
 
 ```
 ui/src/views/system/position/
@@ -19,10 +19,10 @@ ui/src/views/system/position/
 ```vue
 <template>
   <PageWrapper>
-    <el-card :bordered="false" class="pt-3 mb-3 proCard">
+    <a-card :bordered="false" class="pt-3 mb-3 proCard">
       <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset" />
-    </el-card>
-    <el-card :bordered="false" class="proCard">
+    </a-card>
+    <a-card :bordered="false" class="proCard">
       <BasicTable
         :columns="columns"
         :request="loadDataTable"
@@ -32,30 +32,30 @@ ui/src/views/system/position/
         @selection-change="onSelectionChange"
       >
         <template #tableTitle>
-          <el-button type="primary" @click="handleAdd" v-perm="['sys:position:add']">
+          <a-button type="primary" @click="handleAdd" v-perm="['sys:position:add']">
             <template #icon>
-              <el-icon class="el-input__icon">
+              
                 <PlusOutlined />
-              </el-icon>
+              
             </template>
             添加岗位
-          </el-button>
-          <el-button
+          </a-button>
+          <a-button
             type="danger"
             @click="handleDelete()"
             :disabled="!selectionData.length"
             v-perm="['sys:position:batchDelete']"
           >
             <template #icon>
-              <el-icon class="el-input__icon">
+              
                 <Delete />
-              </el-icon>
+              
             </template>
             删除
-          </el-button>
+          </a-button>
         </template>
       </BasicTable>
-    </el-card>
+    </a-card>
 
     <editDialog
       v-if="editVisible"
@@ -68,7 +68,7 @@ ui/src/views/system/position/
 
 <script lang="ts" setup>
   import { reactive, ref, h, nextTick, defineAsyncComponent } from 'vue';
-  import { ColProps } from 'element-plus';
+  import { ColProps } from 'ant-design-vue';
   import { schemas } from './querySchemas';
   import { useForm } from '@/components/Form/index';
   import { TableAction } from '@/components/Table';
@@ -210,7 +210,7 @@ ui/src/views/system/position/
 
 ### 代码解析
 
-**页面结构**：`PageWrapper` 包裹两个 `el-card`，上方是搜索表单，下方是数据表格。
+**页面结构**：`PageWrapper` 包裹两个 `a-card`，上方是搜索表单，下方是数据表格。
 
 **搜索表单**：通过 `useForm` 注册，Schema 从 `querySchemas.ts` 导入。`submitOnReset: true` 表示重置时自动触发查询。
 
@@ -230,42 +230,42 @@ ui/src/views/system/position/
 
 ```vue
 <template>
-  <el-dialog
+  <a-modal
     v-model="props.visible"
     :title="props.positionId ? '编辑' : '新增'"
     width="500"
-    :close-on-click-modal="false"
-    :before-close="dialogClose"
+    :mask-closable="false"
+    
   >
-    <el-form class="ls-form" ref="formRef" :model="formData" label-width="80px">
-      <el-form-item
+    <a-form class="ls-form" ref="formRef" :model="formData" :label-col="{ style: { width: '80px' } }">
+      <a-form-item
         label="岗位名称"
         prop="name"
         :rules="{ required: true, message: '请输入岗位名称', trigger: 'blur' }"
       >
-        <el-input class="ls-input" v-model="formData.name" placeholder="请输入岗位名称" clearable />
-      </el-form-item>
-      <el-form-item label="岗位状态" prop="status">
-        <el-radio-group v-model="formData.status" name="status">
-          <el-radio :value="1">正常</el-radio>
-          <el-radio :value="2">停用</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="排序" prop="sort">
-        <el-input-number v-model="formData.sort" />
-      </el-form-item>
-    </el-form>
+        <a-input class="ls-input" v-model:value="formData.name" placeholder="请输入岗位名称" allow-clear />
+      </a-form-item>
+      <a-form-item label="岗位状态" name="status">
+        <a-radio-group v-model:value="formData.status" name="status">
+          <a-radio :value="1">正常</a-radio>
+          <a-radio :value="2">停用</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="排序" name="sort">
+        <a-input-number v-model:value="formData.sort" />
+      </a-form-item>
+    </a-form>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="dialogClose">取消</el-button>
-        <el-button :loading="subLoading" type="primary" @click="submit"> 确定 </el-button>
+        <a-button @click="dialogClose">取消</a-button>
+        <a-button :loading="subLoading" type="primary" @click="submit"> 确定 </a-button>
       </span>
     </template>
-  </el-dialog>
+  </a-modal>
 </template>
 
 <script lang="ts" setup>
-  import type { FormInstance } from 'element-plus';
+  import type { FormInstance } from 'ant-design-vue';
   import { getPositionDetail, positionAdd, positionUpdate } from '@/api/system/position';
   import { onMounted, reactive, shallowRef } from 'vue';
   import { message } from '@/utils/auth';
@@ -369,7 +369,7 @@ ui/src/views/system/position/
 
 ```typescript
 import { h } from 'vue';
-import { ElTag } from 'element-plus';
+import { Tag } from 'ant-design-vue';
 
 export const columns = [
   {
@@ -392,7 +392,7 @@ export const columns = [
     minWidth: 100,
     render(record) {
       return h(
-        ElTag,
+        Tag,
         {
           type: record.row.status == 1 ? 'success' : 'danger',
         },
@@ -455,7 +455,7 @@ export const schemas: FormSchema[] = [
     label: '状态',
     componentProps: {
       placeholder: '请选择状态',
-      clearable: true,
+      allowClear: true,
       options: [
         {
           label: '正常',
@@ -480,9 +480,9 @@ export const schemas: FormSchema[] = [
 | `field` | 字段名，与后端查询参数对应 |
 | `component` | 表单组件类型：`Input` / `Select` / `DatePicker` 等 |
 | `label` | 标签文本 |
-| `componentProps` | 组件属性，透传给 ElementPlus 组件 |
+| `componentProps` | 组件属性，透传给 AntDesign 组件 |
 
-**Select 组件**：`options` 定义下拉选项，`clearable: true` 允许清空选择。
+**Select 组件**：`options` 定义下拉选项，`allowClear: true` 允许清空选择。
 
 ## 文件关系图