diff --git a/src/main/java/com/youlai/boot/common/base/BaseQuery.java b/src/main/java/com/youlai/boot/common/base/BaseQuery.java
index 026d9673..7548937d 100644
--- a/src/main/java/com/youlai/boot/common/base/BaseQuery.java
+++ b/src/main/java/com/youlai/boot/common/base/BaseQuery.java
@@ -7,6 +7,12 @@ import lombok.Data;
 import java.io.Serial;
 import java.io.Serializable;
 
+/**
+ * 查询参数基类
+ *
+ * @author Ray.Hao
+ * @since 0.0.1
+ */
 @Data
 @Schema
 public class BaseQuery implements Serializable {
diff --git a/src/main/java/com/youlai/boot/common/exception/BusinessException.java b/src/main/java/com/youlai/boot/common/exception/BusinessException.java
index 06467091..cd93205f 100644
--- a/src/main/java/com/youlai/boot/common/exception/BusinessException.java
+++ b/src/main/java/com/youlai/boot/common/exception/BusinessException.java
@@ -7,13 +7,13 @@ import org.slf4j.helpers.MessageFormatter;
 /**
  * 自定义业务异常
  *
- * @author Ray
- * @since 2022/7/31
+ * @author Ray.Hao
+ * @since 0.0.1
  */
 @Getter
 public class BusinessException extends RuntimeException {
 
-    public IResultCode resultCode;
+    private IResultCode resultCode;
 
     public BusinessException(IResultCode errorCode) {
         super(errorCode.getMsg());
@@ -21,7 +21,7 @@ public class BusinessException extends RuntimeException {
     }
 
 
-    public BusinessException(IResultCode errorCode,String message) {
+    public BusinessException(IResultCode errorCode, String message) {
         super(message);
         this.resultCode = errorCode;
     }
diff --git a/src/main/java/com/youlai/boot/framework/security/config/SecurityConfig.java b/src/main/java/com/youlai/boot/framework/security/config/SecurityConfig.java
index 196477f7..b64b6de0 100644
--- a/src/main/java/com/youlai/boot/framework/security/config/SecurityConfig.java
+++ b/src/main/java/com/youlai/boot/framework/security/config/SecurityConfig.java
@@ -1,8 +1,8 @@
 package com.youlai.boot.framework.security.config;
 
 import cn.binarywang.wx.miniapp.api.WxMaService;
-import com.youlai.boot.framework.captcha.service.CaptchaService;
 import cn.hutool.core.util.ArrayUtil;
+import com.youlai.boot.framework.captcha.service.CaptchaService;
 import com.youlai.boot.framework.security.filter.CaptchaValidationFilter;
 import com.youlai.boot.framework.security.filter.TokenAuthenticationFilter;
 import com.youlai.boot.framework.security.handler.MyAccessDeniedHandler;
@@ -11,12 +11,12 @@ import com.youlai.boot.framework.security.provider.SmsAuthenticationProvider;
 import com.youlai.boot.framework.security.provider.WxMaAuthenticationProvider;
 import com.youlai.boot.framework.security.token.TokenManager;
 import com.youlai.boot.framework.security.service.SysUserDetailsService;
-import com.youlai.boot.system.service.ConfigService;
 import com.youlai.boot.system.service.UserService;
 import lombok.RequiredArgsConstructor;
+import org.springframework.data.redis.core.RedisTemplate;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
-import org.springframework.data.redis.core.RedisTemplate;
+
 import org.springframework.security.authentication.AuthenticationManager;
 import org.springframework.security.authentication.ProviderManager;
 import org.springframework.security.authentication.dao.DaoAuthenticationProvider;
@@ -51,7 +51,6 @@ public class SecurityConfig {
     private final SysUserDetailsService userDetailsService;
 
     private final CaptchaService captchaService;
-    private final ConfigService configService;
     private final SecurityProperties securityProperties;
 
     /**
diff --git a/src/main/java/com/youlai/boot/system/controller/UserController.java b/src/main/java/com/youlai/boot/system/controller/UserController.java
index 528c1e20..f90e3f25 100644
--- a/src/main/java/com/youlai/boot/system/controller/UserController.java
+++ b/src/main/java/com/youlai/boot/system/controller/UserController.java
@@ -14,10 +14,9 @@ import com.youlai.boot.common.result.PageResult;
 import com.youlai.boot.common.result.Result;
 import com.youlai.boot.common.util.ExcelUtils;
 import com.youlai.boot.system.listener.UserImportListener;
-import com.youlai.boot.system.model.vo.UserExportVO;
-import com.youlai.boot.system.model.form.UserImportForm;
-import com.youlai.boot.system.model.entity.SysUser;
 import com.youlai.boot.system.model.form.*;
+import com.youlai.boot.system.model.vo.UserExportVO;
+import com.youlai.boot.system.model.entity.SysUser;
 import com.youlai.boot.system.model.query.UserQuery;
 import com.youlai.boot.system.model.vo.CurrentUserVO;
 import com.youlai.boot.system.model.vo.UserPageVO;
diff --git a/src/main/java/com/youlai/boot/system/model/entity/SysUser.java b/src/main/java/com/youlai/boot/system/model/entity/SysUser.java
index 92cc9542..916042d6 100644
--- a/src/main/java/com/youlai/boot/system/model/entity/SysUser.java
+++ b/src/main/java/com/youlai/boot/system/model/entity/SysUser.java
@@ -2,15 +2,15 @@ package com.youlai.boot.system.model.entity;
 
 import com.baomidou.mybatisplus.annotation.TableName;
 import com.youlai.boot.common.base.BaseEntity;
-import lombok.Getter;
-import lombok.Setter;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
 
 /**
  * 用户实体
  */
 @TableName("sys_user")
-@Getter
-@Setter
+@Data
+@EqualsAndHashCode(callSuper = true)
 public class SysUser extends BaseEntity {
 
     /**
@@ -24,7 +24,7 @@ public class SysUser extends BaseEntity {
     private String nickname;
 
     /**
-     * 性别((1-男 2-女 0-保密)
+     * 性别(1-男 2-女 0-保密)
      */
     private Integer gender;
 
@@ -49,7 +49,7 @@ public class SysUser extends BaseEntity {
     private String mobile;
 
     /**
-     * 状态((1-正常 0-禁用)
+     * 状态(1-正常 0-禁用)
      */
     private Integer status;
 
diff --git a/src/main/java/com/youlai/boot/system/service/impl/UserServiceImpl.java b/src/main/java/com/youlai/boot/system/service/impl/UserServiceImpl.java
index 708afd26..8251829c 100644
--- a/src/main/java/com/youlai/boot/system/service/impl/UserServiceImpl.java
+++ b/src/main/java/com/youlai/boot/system/service/impl/UserServiceImpl.java
@@ -22,13 +22,13 @@ import com.youlai.boot.framework.security.util.SecurityUtils;
 import com.youlai.boot.system.converter.UserConverter;
 import com.youlai.boot.system.enums.DictCodeEnum;
 import com.youlai.boot.system.mapper.UserMapper;
+import com.youlai.boot.system.model.form.*;
 import com.youlai.boot.system.model.vo.CurrentUserVO;
 import com.youlai.boot.system.model.vo.UserExportVO;
 import com.youlai.boot.system.model.entity.Dept;
 import com.youlai.boot.system.model.entity.DictItem;
 import com.youlai.boot.system.model.entity.Role;
 import com.youlai.boot.system.model.entity.SysUser;
-import com.youlai.boot.system.model.form.*;
 import com.youlai.boot.system.model.query.UserQuery;
 import com.youlai.boot.system.model.vo.UserPageVO;
 import com.youlai.boot.system.model.vo.UserProfileVO;
diff --git a/src/main/resources/logback-spring.xml b/src/main/resources/logback-spring.xml
index a424b782..9391b1a8 100644
--- a/src/main/resources/logback-spring.xml
+++ b/src/main/resources/logback-spring.xml
@@ -38,7 +38,7 @@
             <maxFileSize>10MB</maxFileSize>
             <!-- 最大保留30天的日志 -->
             <maxHistory>30</maxHistory>
-            <!-- 总日志文件大小不超过3GB -->
+            <!-- 总日志文件大小不超过1GB -->
             <totalSizeCap>1GB</totalSizeCap>
         </rollingPolicy>
         <!-- 临界值过滤器，输出大于INFO级别日志 -->
diff --git a/src/main/resources/templates/codegen/backend/query.java.vm b/src/main/resources/templates/codegen/backend/query.java.vm
index 7bef3b97..0b968ce5 100644
--- a/src/main/resources/templates/codegen/backend/query.java.vm
+++ b/src/main/resources/templates/codegen/backend/query.java.vm
@@ -4,7 +4,17 @@ import ${packageName}.common.base.BaseQuery;
 import io.swagger.v3.oas.annotations.media.Schema;
 import lombok.Getter;
 import lombok.Setter;
+#if($fieldConfigs)
+    #set ($hasDateBetween = false)
+    #foreach($fieldConfig in ${fieldConfigs})
+        #if(($fieldConfig.formTypeName == "DATE" || $fieldConfig.formTypeName == "DATE_TIME") && $fieldConfig.queryTypeName == "BETWEEN")
+            #set ($hasDateBetween = true)
+        #end
+    #end
+    #if($hasDateBetween)
 import java.util.List;
+    #end
+#end
 #if(${hasLocalDateTime})
 import java.time.LocalDateTime;
 #end
diff --git a/src/main/resources/templates/codegen/frontend/js/index.curd.js.vue.vm b/src/main/resources/templates/codegen/frontend/js/index.curd.js.vue.vm
index 687fac85..ee1fec35 100644
--- a/src/main/resources/templates/codegen/frontend/js/index.curd.js.vue.vm
+++ b/src/main/resources/templates/codegen/frontend/js/index.curd.js.vue.vm
@@ -10,7 +10,7 @@
 #foreach($fieldConfig in $fieldConfigs)
 #if($fieldConfig.isShowInQuery == 1 && $fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
       <template #$fieldConfig.fieldName="scope">
-        <Dict v-model="scope.formData[scope.prop]" code="$fieldConfig.dictType" v-bind="scope.attrs" />
+        <DictSelect v-model="scope.formData[scope.prop]" code="$fieldConfig.dictType" v-bind="scope.attrs" />
       </template>
 #end
 #end
@@ -30,7 +30,7 @@
 #foreach($fieldConfig in $fieldConfigs)
 #if($fieldConfig.isShowInList == 1 && $fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
       <template #$fieldConfig.fieldName="scope">
-        <DictLabel v-model="scope.row[scope.prop]" code="$fieldConfig.dictType" />
+        <DictTag v-model="scope.row[scope.prop]" code="$fieldConfig.dictType" />
       </template>
 #end
 #end
@@ -39,9 +39,9 @@
     <!-- 新增 -->
     <PageModal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
 #foreach($fieldConfig in $fieldConfigs)
-#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formTypeName != "HIDDEN" && $fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
+#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formType.name() != "HIDDEN" && $fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
       <template #$fieldConfig.fieldName="scope">
-        <Dict v-model="scope.formData[scope.prop]" code="$fieldConfig.dictType" v-bind="scope.attrs" />
+        <DictSelect v-model="scope.formData[scope.prop]" code="$fieldConfig.dictType" v-bind="scope.attrs" />
       </template>
 #end
 #end
@@ -50,9 +50,9 @@
     <!-- 编辑 -->
     <PageModal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
 #foreach($fieldConfig in $fieldConfigs)
-#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formTypeName != "HIDDEN" && $fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
+#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formType.name() != "HIDDEN" && $fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
       <template #$fieldConfig.fieldName="scope">
-        <Dict v-model="scope.formData[scope.prop]" code="$fieldConfig.dictType" v-bind="scope.attrs" />
+        <DictSelect v-model="scope.formData[scope.prop]" code="$fieldConfig.dictType" v-bind="scope.attrs" />
       </template>
 #end
 #end
@@ -61,7 +61,10 @@
 </template>
 
 <script setup>
-defineOptions({ name: "$entityName" });
+defineOptions({
+  name: "$entityName",
+  inheritAttrs: false,
+});
 
 import ${entityName}API from "@/api/${moduleName}/${entityKebab}";
 import usePage from "@/components/CURD/usePage";
@@ -183,7 +186,7 @@ const contentConfig = reactive({
     {
       label: "操作",
       prop: "operation",
-      width: 220,
+      width: 180,
       templet: "tool",
       operat: ["edit", "delete"],
     },
@@ -208,7 +211,7 @@ const addModalConfig = reactive({
   // 表单项配置
   formItems: [
 #foreach($fieldConfig in $fieldConfigs)
-#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formTypeName != "HIDDEN")
+#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formType.name() != "HIDDEN")
 #if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
     {
       type: "custom",
diff --git a/src/main/resources/templates/codegen/frontend/js/index.js.vue.vm b/src/main/resources/templates/codegen/frontend/js/index.js.vue.vm
index d7f04600..9c3f1db8 100644
--- a/src/main/resources/templates/codegen/frontend/js/index.js.vue.vm
+++ b/src/main/resources/templates/codegen/frontend/js/index.js.vue.vm
@@ -1,64 +1,65 @@
 <template>
   <div class="page-container">
+    <!-- 搜索 -->
     <el-card class="page-search" shadow="never">
-      <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
+      <el-form ref="queryFormRef" :model="params" :inline="true">
         #foreach($fieldConfig in $fieldConfigs)
           #if($fieldConfig.isShowInQuery == 1)
             <el-form-item label="$fieldConfig.fieldComment" prop="$fieldConfig.fieldName">
-                    #if($fieldConfig.formTypeName == "INPUT")
+                    #if($fieldConfig.formType.name() == "INPUT")
                       <el-input
-                          v-model="queryParams.$fieldConfig.fieldName"
+                          v-model="params.$fieldConfig.fieldName"
                           placeholder="$fieldConfig.fieldComment"
                           clearable
                           @keyup.enter="handleQuery()"
                       />
-                    #elseif($fieldConfig.formTypeName == "SELECT")
+                    #elseif($fieldConfig.formType.name() == "SELECT")
                         #if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
-                          <DictSelect v-model="queryParams.$fieldConfig.fieldName" code="$fieldConfig.dictType" />
+                          <DictSelect v-model="params.$fieldConfig.fieldName" code="$fieldConfig.dictType" />
                         #else
-                          <el-select v-model="queryParams.$fieldConfig.fieldName" placeholder="请选择$fieldConfig.fieldComment">
+                          <el-select v-model="params.$fieldConfig.fieldName" placeholder="请选择$fieldConfig.fieldComment">
                             <el-option :key="1" :value="1" label="选项一"/>
                             <el-option :key="2" :value="2" label="选项二"/>
                           </el-select>
                         #end
-                    #elseif($fieldConfig.formTypeName == "RADIO")
+                    #elseif($fieldConfig.formType.name() == "RADIO")
                         #if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
-                          <DictSelect v-model="queryParams.$fieldConfig.fieldName" type="radio" code="$fieldConfig.dictType" />
+                          <DictSelect v-model="params.$fieldConfig.fieldName" type="radio" code="$fieldConfig.dictType" />
                         #else
-                          <el-radio-group v-model="queryParams.$fieldConfig.fieldName">
+                          <el-radio-group v-model="params.$fieldConfig.fieldName">
                             <el-radio :key="1" :value="1">选项一</el-radio>
                             <el-radio :key="2" :value="2">选项二</el-radio>
                           </el-radio-group>
                         #end
-                    #elseif($fieldConfig.formTypeName == "CHECK_BOX")
+                    #elseif($fieldConfig.formType.name() == "CHECK_BOX")
                         #if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
-                          <DictSelect v-model="queryParams.$fieldConfig.fieldName" type="checkbox" code="$fieldConfig.dictType" />
+                          <DictSelect v-model="params.$fieldConfig.fieldName" type="checkbox" code="$fieldConfig.dictType" />
                         #else
-                          <el-checkbox-group v-model="queryParams.$fieldConfig.fieldName">
+                          <el-checkbox-group v-model="params.$fieldConfig.fieldName">
                             <el-checkbox :key="1" :label="1">选项一</el-checkbox>
                             <el-checkbox :key="2" :label="2">选项二</el-checkbox>
                           </el-checkbox-group>
                         #end
-                    #elseif($fieldConfig.formTypeName == "INPUT_NUMBER")
+                    #elseif($fieldConfig.formType.name() == "INPUT_NUMBER")
                       <el-input-number
-                          v-model="queryParams.$fieldConfig.fieldName"
+                          v-model="params.$fieldConfig.fieldName"
                           placeholder="$fieldConfig.fieldComment"
                       />
-                    #elseif($fieldConfig.formTypeName == "SWITCH")
+                    #elseif($fieldConfig.formType.name() == "SWITCH")
                       <el-switch
-                          v-model="queryParams.$fieldConfig.fieldName"
+                          v-model="params.$fieldConfig.fieldName"
                           :active-value="1"
                           :inactive-value="0"
                       />
-                    #elseif($fieldConfig.formTypeName == "TEXT_AREA")
+                    #elseif($fieldConfig.formType.name() == "TEXT_AREA")
                       <el-input type="textarea"
-                                v-model="queryParams.$fieldConfig.fieldName"
+                                v-model="params.$fieldConfig.fieldName"
                                 placeholder="$fieldConfig.fieldComment"
                       />
-                    #elseif($fieldConfig.formTypeName == "DATE_TIME")
+                    #elseif($fieldConfig.formType.name() == "DATE_TIME")
                       <el-date-picker
-                          v-model="queryParams.$fieldConfig.fieldName"
-                          #if($fieldConfig.queryTypeName == "BETWEEN")
+                          v-model="params.$fieldConfig.fieldName"
+                          #if($fieldConfig.queryType.name() == "BETWEEN")
                           type="daterange"
                           range-separator="~"
                           start-placeholder="开始时间"
@@ -69,11 +70,11 @@
                           #end
                           value-format="YYYY-MM-DD HH:mm:ss"
                       />
-                    #elseif($fieldConfig.formTypeName == "DATE")
+                    #elseif($fieldConfig.formType.name() == "DATE")
                       <el-date-picker
                           class="!w-[240px]"
-                          v-model="queryParams.$fieldConfig.fieldName"
-                          #if($fieldConfig.queryTypeName == "BETWEEN")
+                          v-model="params.$fieldConfig.fieldName"
+                          #if($fieldConfig.queryType.name() == "BETWEEN")
                           type="daterange"
                           range-separator="~"
                           start-placeholder="开始时间"
@@ -89,41 +90,53 @@
           #end
         #end
         <el-form-item>
-          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
-          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
+          <el-button type="primary" @click="handleQuery">搜索</el-button>
+          <el-button @click="handleResetQuery">重置</el-button>
         </el-form-item>
       </el-form>
     </el-card>
 
-    <el-card class="page-content" shadow="never">
+    <!-- 表格 -->
+    <el-card ref="tableWrapperRef" class="page-content" shadow="never">
       <div class="page-toolbar">
         <div class="page-toolbar__left">
           <el-button
               v-hasPerm="['${moduleName}:${entityKebab}:create']"
-              type="success"
-              icon="plus"
+              type="primary"
               @click="handleCreateClick()"
           >新增</el-button>
           <el-button
               v-hasPerm="['${moduleName}:${entityKebab}:delete']"
               type="danger"
               :disabled="!hasSelection"
-              icon="delete"
-              @click="handleDelete()"
+              @click="handleBatchDelete()"
           >删除</el-button>
         </div>
+        <div class="page-toolbar__right">
+          <el-tooltip content="刷新" placement="top">
+            <el-button class="page-icon-btn" @click="fetchData">
+              <el-icon><Refresh /></el-icon>
+            </el-button>
+          </el-tooltip>
+          <el-tooltip content="全屏" placement="top">
+            <el-button class="page-icon-btn" @click="toggleFullscreen">
+              <el-icon><FullScreen /></el-icon>
+            </el-button>
+          </el-tooltip>
+        </div>
       </div>
 
-      <el-table
-        ref="dataTableRef"
-        v-loading="loading"
-        :data="pageData"
-        border
-        stripe
-        highlight-current-row
-        row-key="id"
-        @selection-change="handleSelectionChange"
-      >
+      <div class="page-table-wrapper">
+        <el-table
+          ref="dataTableRef"
+          v-loading="loading"
+          class="page-table"
+          :data="list"
+          height="100%"
+          border
+          highlight-current-row
+          @selection-change="handleSelectionChange"
+        >
         <el-table-column type="selection" width="55" align="center" />
         #foreach($fieldConfig in $fieldConfigs)
           #if($fieldConfig.isShowInList == 1)
@@ -144,14 +157,13 @@
             #end
           #end
         #end
-        <el-table-column fixed="right" label="操作" width="220">
+        <el-table-column fixed="right" label="操作" width="180">
           <template #default="scope">
             <el-button
                 v-hasPerm="['${moduleName}:${entityKebab}:update']"
                 type="primary"
                 size="small"
                 link
-                icon="edit"
                 @click="handleEditClick(String(scope.row.id))"
             >
               编辑
@@ -161,7 +173,6 @@
                 type="danger"
                 size="small"
                 link
-                icon="delete"
                 @click="handleDelete(String(scope.row.id))"
             >
               删除
@@ -169,35 +180,35 @@
           </template>
         </el-table-column>
       </el-table>
-
-      <div class="page-pagination">
-        <pagination
-            v-if="total > 0"
-            v-model:total="total"
-            v-model:page="queryParams.pageNum"
-            v-model:limit="queryParams.pageSize"
-            @pagination="fetchList"
-        />
       </div>
+
+      <pagination
+        v-if="total > 0"
+        v-model:total="total"
+        v-model:page="params.pageNum"
+        v-model:limit="params.pageSize"
+        class="page-pagination"
+        @pagination="fetchData"
+      />
     </el-card>
 
     <!-- $!{businessName}表单弹窗 -->
     <el-dialog
         v-model="dialog.visible"
         :title="dialog.title"
-        width="500px"
+        width="600px"
         @close="closeDialog"
     >
       <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
           #foreach($fieldConfig in $fieldConfigs)
-              #if($fieldConfig.isShowInForm == 1 && $fieldConfig.formTypeName != "HIDDEN")
+              #if($fieldConfig.isShowInForm == 1 && $fieldConfig.formType.name() != "HIDDEN")
                 <el-form-item label="$fieldConfig.fieldComment" prop="$fieldConfig.fieldName">
-                    #if($fieldConfig.formTypeName == "INPUT")
+                    #if($fieldConfig.formType.name() == "INPUT")
                       <el-input
                           v-model="formData.$fieldConfig.fieldName"
                           placeholder="$fieldConfig.fieldComment"
                       />
-                    #elseif($fieldConfig.formTypeName == "SELECT")
+                    #elseif($fieldConfig.formType.name() == "SELECT")
                         #if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
                           <DictSelect v-model="formData.$fieldConfig.fieldName" code="$fieldConfig.dictType" />
                         #else
@@ -206,7 +217,7 @@
                             <el-option :value="1" label="选项二"/>
                           </el-select>
                         #end
-                    #elseif($fieldConfig.formTypeName == "RADIO")
+                    #elseif($fieldConfig.formType.name() == "RADIO")
                         #if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
                           <DictSelect v-model="formData.$fieldConfig.fieldName" type="radio" code="$fieldConfig.dictType" />
                         #else
@@ -215,7 +226,7 @@
                             <el-radio :value="1">选项二</el-radio>
                           </el-radio-group>
                         #end
-                    #elseif($fieldConfig.formTypeName == "CHECK_BOX")
+                    #elseif($fieldConfig.formType.name() == "CHECK_BOX")
                         #if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
                           <DictSelect v-model="formData.$fieldConfig.fieldName" type="checkbox" code="$fieldConfig.dictType" />
                         #else
@@ -224,30 +235,30 @@
                             <el-checkbox :value="1">选项二</el-checkbox>
                           </el-checkbox-group>
                         #end
-                    #elseif($fieldConfig.formTypeName == "INPUT_NUMBER")
+                    #elseif($fieldConfig.formType.name() == "INPUT_NUMBER")
                       <el-input-number
                           v-model="formData.$fieldConfig.fieldName"
                           placeholder="$fieldConfig.fieldComment"
                       />
-                    #elseif($fieldConfig.formTypeName == "SWITCH")
+                    #elseif($fieldConfig.formType.name() == "SWITCH")
                       <el-switch
                           v-model="formData.$fieldConfig.fieldName"
                           :active-value="1"
                           :inactive-value="0"
                       />
-                    #elseif($fieldConfig.formTypeName == "TEXT_AREA")
+                    #elseif($fieldConfig.formType.name() == "TEXT_AREA")
                       <el-input type="textarea"
                                 v-model="formData.$fieldConfig.fieldName"
                                 placeholder="$fieldConfig.fieldComment"
                       />
-                    #elseif($fieldConfig.formTypeName == "DATE_TIME")
+                    #elseif($fieldConfig.formType.name() == "DATE_TIME")
                       <el-date-picker
                           v-model="formData.$fieldConfig.fieldName"
                           type="datetime"
                           placeholder="$fieldConfig.fieldComment"
                           value-format="YYYY-MM-DD HH:mm:ss"
                       />
-                    #elseif($fieldConfig.formTypeName == "DATE")
+                    #elseif($fieldConfig.formType.name() == "DATE")
                       <el-date-picker
                           class="!w-[240px]"
                           v-model="formData.$fieldConfig.fieldName"
@@ -258,15 +269,15 @@
                     #end
                 </el-form-item>
 
-              #elseif($fieldConfig.formTypeName == "HIDDEN")
+              #elseif($fieldConfig.formType.name() == "HIDDEN")
                 <el-input type="hidden" v-model="formData.$fieldConfig.fieldName" />
               #end
           #end
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="handleSubmit()">确定</el-button>
-          <el-button @click="closeDialog()">取消</el-button>
+          <el-button type="primary" @click="handleSubmit">确定</el-button>
+          <el-button @click="closeDialog">取消</el-button>
         </div>
       </template>
     </el-dialog>
@@ -274,9 +285,10 @@
 </template>
 
 <script setup>
-  import { onMounted, reactive, ref } from "vue";
+  import { useFullscreen } from "@vueuse/core";
   import { ElMessage, ElMessageBox } from "element-plus";
-  import { useTableSelection } from "@/composables";
+  import { FullScreen, Refresh } from "@element-plus/icons-vue";
+  import { usePageTable, useTableSelection } from "@/composables";
   import ${entityName}API from "@/api/${moduleName}/${entityKebab}";
 
   defineOptions({
@@ -286,17 +298,22 @@
 
   const queryFormRef = ref();
   const dataFormRef = ref();
+  const tableWrapperRef = ref(null);
+  const { toggle: toggleFullscreen } = useFullscreen(tableWrapperRef);
 
-  const loading = ref(false);
-  const total = ref(0);
-
-  const queryParams = reactive({
-    pageNum: 1,
-    pageSize: 10,
-  });
+  const initialFormData = reactive({});
 
   // $!{businessName}表格数据
-  const pageData = ref([]);
+  const { loading, list, total, params, fetchData, handleQuery, handleResetQuery } = usePageTable({
+    initialParams: {
+      pageNum: 1,
+      pageSize: 10,
+    },
+    request: ${entityName}API.getPage,
+    onBeforeReset: () => queryFormRef.value?.resetFields(),
+  });
+
+  const { selectedIds, hasSelection, handleSelectionChange } = useTableSelection();
 
   const dialog = reactive({
     title: "",
@@ -317,112 +334,114 @@
       #end
   });
 
-  const { selectedIds, hasSelection, handleSelectionChange } = useTableSelection();
-
-  async function fetchList() {
-    loading.value = true;
-    try {
-      const data = await ${entityName}API.getPage(queryParams);
-      pageData.value = data.list;
-      total.value = data.total ?? 0;
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  /** 查询$!{businessName} */
-  function handleQuery() {
-    queryParams.pageNum = 1;
-    fetchList();
-  }
-
-  /** 重置$!{businessName}查询 */
-  function handleResetQuery() {
-    queryFormRef.value?.resetFields();
-    handleQuery();
-  }
-
+  /**
+   * 打开表单弹窗
+   */
   function openDialog() {
     dialog.visible = true;
   }
 
+  /**
+   * 关闭弹窗并重置表单
+   */
   function closeDialog() {
     dialog.visible = false;
     resetForm();
   }
 
+  /**
+   * 重置表单
+   */
   function resetForm() {
     dataFormRef.value?.resetFields();
     dataFormRef.value?.clearValidate();
-    formData.id = undefined;
+    Object.keys(formData).forEach((key) => {
+      delete formData[key];
+    });
+    Object.assign(formData, initialFormData);
   }
 
+  /**
+   * 打开新增弹窗
+   */
   async function handleCreateClick() {
     dialog.title = "新增$!{businessName}";
     openDialog();
   }
 
+  /**
+   * 打开编辑弹窗并回填数据
+   */
   async function handleEditClick(id) {
     dialog.title = "修改$!{businessName}";
-          ${entityName}API.getFormData(id).then((data) => {
-      Object.assign(formData, data);
-      openDialog();
-    });
+    const data = await ${entityName}API.getFormData(id);
+    Object.assign(formData, data);
+    openDialog();
   }
 
-  /** 提交$!{businessName}表单 */
-  function handleSubmit() {
-    dataFormRef.value?.validate((valid) => {
-      if (valid) {
-        loading.value = true;
-        const id = formData.id;
-        if (id) {
-                ${entityName}API.update(id, formData)
-              .then(() => {
-                ElMessage.success("修改成功");
-                closeDialog();
-                handleResetQuery();
-              })
-              .finally(() => (loading.value = false));
-        } else {
-                ${entityName}API.create(formData)
-              .then(() => {
-                ElMessage.success("新增成功");
-                closeDialog();
-                handleResetQuery();
-              })
-              .finally(() => (loading.value = false));
-        }
+  /**
+   * 提交$!{businessName}表单
+   */
+  async function handleSubmit() {
+    const valid = await dataFormRef.value?.validate().then(
+      () => true,
+      () => false
+    );
+    if (!valid) return;
+
+    loading.value = true;
+    try {
+      const id = formData.id;
+      if (id) {
+        await ${entityName}API.update(id, formData);
+        ElMessage.success("修改成功");
+      } else {
+        await ${entityName}API.create(formData);
+        ElMessage.success("新增成功");
       }
-    });
+      closeDialog();
+      handleResetQuery();
+    } finally {
+      loading.value = false;
+    }
   }
 
-  /** 删除$!{businessName} */
-  function handleDelete(id) {
-    const ids = [id || selectedIds.value].join(",");
+  /**
+   * 批量删除$!{businessName}
+   */
+  function handleBatchDelete() {
+    handleDelete();
+  }
+
+  /**
+   * 删除$!{businessName}
+   */
+  async function handleDelete(id) {
+    const ids = id || selectedIds.value.join(",");
     if (!ids) {
       ElMessage.warning("请勾选删除项");
       return;
     }
 
-    ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    }).then(
-        () => {
-          loading.value = true;
-                ${entityName}API.deleteByIds(ids)
-              .then(() => {
-                ElMessage.success("删除成功");
-                handleResetQuery();
-              })
-              .finally(() => (loading.value = false));
-        },
-        () => {
-          ElMessage.info("已取消删除");
-        }
-    );
+    try {
+      await ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      });
+    } catch {
+      ElMessage.info("已取消删除");
+      return;
+    }
+
+    loading.value = true;
+    try {
+      await ${entityName}API.deleteByIds(ids);
+      ElMessage.success("删除成功");
+      handleResetQuery();
+    } finally {
+      loading.value = false;
+    }
   }
 
   onMounted(() => {
diff --git a/src/main/resources/templates/codegen/frontend/ts/api-types.ts.vm b/src/main/resources/templates/codegen/frontend/ts/api-types.ts.vm
index 2612f9c5..e97c198d 100644
--- a/src/main/resources/templates/codegen/frontend/ts/api-types.ts.vm
+++ b/src/main/resources/templates/codegen/frontend/ts/api-types.ts.vm
@@ -11,8 +11,8 @@ export interface ${entityName}QueryParams extends BaseQueryParams {
     #if("$!fieldConfig.fieldComment" != "")
   /** ${fieldConfig.fieldComment} */
     #end
-    #if($fieldConfig.formTypeName == "DATE" || $fieldConfig.formTypeName == "DATE_TIME")
-      #if($fieldConfig.queryTypeName == "BETWEEN")
+    #if($fieldConfig.formType.name() == "DATE" || $fieldConfig.formType.name() == "DATE_TIME")
+      #if($fieldConfig.queryType.name() == "BETWEEN")
   ${fieldConfig.fieldName}?: [string, string];
       #else
   ${fieldConfig.fieldName}?: ${fieldConfig.tsType};
@@ -26,7 +26,7 @@ export interface ${entityName}QueryParams extends BaseQueryParams {
 
 /** $!{businessName}表单对象 */
 export interface ${entityName}Form {
-  id?: number;
+  id?: string;
 #foreach($fieldConfig in $fieldConfigs)
   #if($fieldConfig.isShowInForm)
     #if("$!fieldConfig.fieldComment" != "")
diff --git a/src/main/resources/templates/codegen/frontend/ts/api.ts.vm b/src/main/resources/templates/codegen/frontend/ts/api.ts.vm
index 8a720b44..fdb03acd 100644
--- a/src/main/resources/templates/codegen/frontend/ts/api.ts.vm
+++ b/src/main/resources/templates/codegen/frontend/ts/api.ts.vm
@@ -7,30 +7,20 @@ const ${entityUpperSnake}_BASE_URL = "/api/v1/${entityKebab}";
 const ${entityName}API = {
     /** 获取${businessName}分页数据 */
     getPage(queryParams?: ${entityName}QueryParams) {
-        return request<any, PageResult<${entityName}Item>>({
+        return request<unknown, PageResult<${entityName}Item>>({
             url: `${${entityUpperSnake}_BASE_URL}`,
             method: "get",
             params: queryParams,
         });
     },
-    /**
-     * 获取${businessName}表单数据
-     *
-     * @param id ${businessName}ID
-     * @returns ${businessName}表单数据
-     */
+    /** 获取${businessName}表单数据 */
     getFormData(id: string) {
-        return request<any, ${entityName}Form>({
+        return request<unknown, ${entityName}Form>({
             url: `${${entityUpperSnake}_BASE_URL}/${id}/form`,
             method: "get",
         });
     },
-
-    /**
-     *  添加${businessName}
-     *
-     *  @param data ${businessName}表单数据
-     */
+    /** 新增${businessName} */
     create(data: ${entityName}Form) {
         return request({
             url: `${${entityUpperSnake}_BASE_URL}`,
@@ -38,13 +28,7 @@ const ${entityName}API = {
             data,
         });
     },
-
-    /**
-     * 更新${businessName}
-     *
-     * @param id ${businessName}ID
-     * @param data ${businessName}表单数据
-     */
+    /** 更新${businessName} */
      update(id: string, data: ${entityName}Form) {
         return request({
             url: `${${entityUpperSnake}_BASE_URL}/${id}`,
@@ -52,12 +36,7 @@ const ${entityName}API = {
             data,
         });
     },
-
-    /**
-     * 批量删除${businessName}，多个以英文逗号(,)分割
-     *
-     * @param ids ${businessName}ID字符串，多个以英文逗号(,)分割
-     */
+    /** 批量删除${businessName}，多个以英文逗号(,)分割 */
      deleteByIds(ids: string) {
         return request({
             url: `${${entityUpperSnake}_BASE_URL}/${ids}`,
diff --git a/src/main/resources/templates/codegen/frontend/ts/index.curd.vue.vm b/src/main/resources/templates/codegen/frontend/ts/index.curd.vue.vm
index 31476ed0..fff17201 100644
--- a/src/main/resources/templates/codegen/frontend/ts/index.curd.vue.vm
+++ b/src/main/resources/templates/codegen/frontend/ts/index.curd.vue.vm
@@ -39,7 +39,7 @@
     <!-- 新增 -->
     <PageModal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
 #foreach($fieldConfig in $fieldConfigs)
-#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formTypeName != "HIDDEN" && $fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
+#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formType.name() != "HIDDEN" && $fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
       <template #$fieldConfig.fieldName="scope">
         <DictSelect v-model="scope.formData[scope.prop]" code="$fieldConfig.dictType" v-bind="scope.attrs" />
       </template>
@@ -50,7 +50,7 @@
     <!-- 编辑 -->
     <PageModal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
 #foreach($fieldConfig in $fieldConfigs)
-#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formTypeName != "HIDDEN" && $fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
+#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formType.name() != "HIDDEN" && $fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
       <template #$fieldConfig.fieldName="scope">
         <DictSelect v-model="scope.formData[scope.prop]" code="$fieldConfig.dictType" v-bind="scope.attrs" />
       </template>
@@ -61,11 +61,14 @@
 </template>
 
 <script setup lang="ts">
-defineOptions({ name: "$entityName" });
+defineOptions({
+  name: "$entityName",
+  inheritAttrs: false,
+});
 
 import ${entityName}API from "@/api/${moduleName}/${entityKebab}";
 import type { ${entityName}Form, ${entityName}QueryParams } from "@/api/${moduleName}/${entityKebab}";
-import type { IObject, IModalConfig, IContentConfig, ISearchConfig } from "@/components/CURD/types";
+import type { IObject, IOperateData, IModalConfig, IContentConfig, ISearchConfig } from "@/components/CURD/types";
 import usePage from "@/components/CURD/usePage";
 
 // 组合式 CRUD
@@ -185,7 +188,7 @@ const contentConfig: IContentConfig<${entityName}QueryParams> = reactive({
     {
       label: "操作",
       prop: "operation",
-      width: 220,
+      width: 180,
       templet: "tool",
       operat: ["edit", "delete"],
     },
@@ -210,7 +213,7 @@ const addModalConfig: IModalConfig<${entityName}Form> = reactive({
   // 表单项配置
   formItems: [
 #foreach($fieldConfig in $fieldConfigs)
-#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formTypeName != "HIDDEN")
+#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formType.name() != "HIDDEN")
 #if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
     {
       type: "custom",
@@ -355,7 +358,7 @@ const editModalConfig: IModalConfig<${entityName}Form> = reactive({
 });
 
 // 处理操作按钮点击
-const handleOperateClick = (data: IObject) => {
+const handleOperateClick = (data: IOperateData) => {
   if (data.name === "edit") {
     handleEditClick(data.row, async () => {
       return await ${entityName}API.getFormData(String(data.row.id));
diff --git a/src/main/resources/templates/codegen/frontend/ts/index.vue.vm b/src/main/resources/templates/codegen/frontend/ts/index.vue.vm
index 6a0da01c..0d054c0f 100644
--- a/src/main/resources/templates/codegen/frontend/ts/index.vue.vm
+++ b/src/main/resources/templates/codegen/frontend/ts/index.vue.vm
@@ -1,64 +1,65 @@
 <template>
   <div class="page-container">
+    <!-- 搜索 -->
     <el-card class="page-search" shadow="never">
-      <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
+      <el-form ref="queryFormRef" :model="params" :inline="true">
         #foreach($fieldConfig in $fieldConfigs)
           #if($fieldConfig.isShowInQuery == 1)
             <el-form-item label="$fieldConfig.fieldComment" prop="$fieldConfig.fieldName">
-                    #if($fieldConfig.formTypeName == "INPUT")
+                    #if($fieldConfig.formType.name() == "INPUT")
                       <el-input
-                          v-model="queryParams.$fieldConfig.fieldName"
+                          v-model="params.$fieldConfig.fieldName"
                           placeholder="$fieldConfig.fieldComment"
                           clearable
                           @keyup.enter="handleQuery()"
                       />
-                    #elseif($fieldConfig.formTypeName == "SELECT")
+                    #elseif($fieldConfig.formType.name() == "SELECT")
                         #if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
-                          <DictSelect v-model="queryParams.$fieldConfig.fieldName" code="$fieldConfig.dictType" />
+                          <DictSelect v-model="params.$fieldConfig.fieldName" code="$fieldConfig.dictType" />
                         #else
-                          <el-select v-model="queryParams.$fieldConfig.fieldName" placeholder="请选择$fieldConfig.fieldComment">
+                          <el-select v-model="params.$fieldConfig.fieldName" placeholder="请选择$fieldConfig.fieldComment">
                             <el-option :key="1" :value="1" label="选项一"/>
                             <el-option :key="2" :value="2" label="选项二"/>
                           </el-select>
                         #end
-                    #elseif($fieldConfig.formTypeName == "RADIO")
+                    #elseif($fieldConfig.formType.name() == "RADIO")
                         #if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
-                          <DictSelect v-model="queryParams.$fieldConfig.fieldName" type="radio" code="$fieldConfig.dictType" />
+                          <DictSelect v-model="params.$fieldConfig.fieldName" type="radio" code="$fieldConfig.dictType" />
                         #else
-                          <el-radio-group v-model="queryParams.$fieldConfig.fieldName">
+                          <el-radio-group v-model="params.$fieldConfig.fieldName">
                             <el-radio :key="1" :value="1">选项一</el-radio>
                             <el-radio :key="2" :value="2">选项二</el-radio>
                           </el-radio-group>
                         #end
-                    #elseif($fieldConfig.formTypeName == "CHECK_BOX")
+                    #elseif($fieldConfig.formType.name() == "CHECK_BOX")
                         #if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
-                          <DictSelect v-model="queryParams.$fieldConfig.fieldName" type="checkbox" code="$fieldConfig.dictType" />
+                          <DictSelect v-model="params.$fieldConfig.fieldName" type="checkbox" code="$fieldConfig.dictType" />
                         #else
-                          <el-checkbox-group v-model="queryParams.$fieldConfig.fieldName">
+                          <el-checkbox-group v-model="params.$fieldConfig.fieldName">
                             <el-checkbox :key="1" :label="1">选项一</el-checkbox>
                             <el-checkbox :key="2" :label="2">选项二</el-checkbox>
                           </el-checkbox-group>
                         #end
-                    #elseif($fieldConfig.formTypeName == "INPUT_NUMBER")
+                    #elseif($fieldConfig.formType.name() == "INPUT_NUMBER")
                       <el-input-number
-                          v-model="queryParams.$fieldConfig.fieldName"
+                          v-model="params.$fieldConfig.fieldName"
                           placeholder="$fieldConfig.fieldComment"
                       />
-                    #elseif($fieldConfig.formTypeName == "SWITCH")
+                    #elseif($fieldConfig.formType.name() == "SWITCH")
                       <el-switch
-                          v-model="queryParams.$fieldConfig.fieldName"
+                          v-model="params.$fieldConfig.fieldName"
                           :active-value="1"
                           :inactive-value="0"
                       />
-                    #elseif($fieldConfig.formTypeName == "TEXT_AREA")
+                    #elseif($fieldConfig.formType.name() == "TEXT_AREA")
                       <el-input type="textarea"
-                                v-model="queryParams.$fieldConfig.fieldName"
+                                v-model="params.$fieldConfig.fieldName"
                                 placeholder="$fieldConfig.fieldComment"
                       />
-                    #elseif($fieldConfig.formTypeName == "DATE_TIME")
+                    #elseif($fieldConfig.formType.name() == "DATE_TIME")
                       <el-date-picker
-                          v-model="queryParams.$fieldConfig.fieldName"
-                          #if($fieldConfig.queryTypeName == "BETWEEN")
+                          v-model="params.$fieldConfig.fieldName"
+                          #if($fieldConfig.queryType.name() == "BETWEEN")
                           type="daterange"
                           range-separator="~"
                           start-placeholder="开始时间"
@@ -69,11 +70,11 @@
                           #end
                           value-format="YYYY-MM-DD HH:mm:ss"
                       />
-                    #elseif($fieldConfig.formTypeName == "DATE")
+                    #elseif($fieldConfig.formType.name() == "DATE")
                       <el-date-picker
                           class="!w-[240px]"
-                          v-model="queryParams.$fieldConfig.fieldName"
-                          #if($fieldConfig.queryTypeName == "BETWEEN")
+                          v-model="params.$fieldConfig.fieldName"
+                          #if($fieldConfig.queryType.name() == "BETWEEN")
                           type="daterange"
                           range-separator="~"
                           start-placeholder="开始时间"
@@ -89,41 +90,53 @@
           #end
         #end
         <el-form-item>
-          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
-          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
+          <el-button type="primary" @click="handleQuery">搜索</el-button>
+          <el-button @click="handleResetQuery">重置</el-button>
         </el-form-item>
       </el-form>
     </el-card>
 
-    <el-card class="page-content" shadow="never">
+    <!-- 表格 -->
+    <el-card ref="tableWrapperRef" class="page-content" shadow="never">
       <div class="page-toolbar">
         <div class="page-toolbar__left">
           <el-button
               v-hasPerm="['${moduleName}:${entityKebab}:create']"
-              type="success"
-              icon="plus"
+              type="primary"
               @click="handleCreateClick()"
           >新增</el-button>
           <el-button
               v-hasPerm="['${moduleName}:${entityKebab}:delete']"
               type="danger"
               :disabled="!hasSelection"
-              icon="delete"
-              @click="handleDelete()"
+              @click="handleBatchDelete()"
           >删除</el-button>
         </div>
+        <div class="page-toolbar__right">
+          <el-tooltip content="刷新" placement="top">
+            <el-button class="page-icon-btn" @click="fetchData">
+              <el-icon><Refresh /></el-icon>
+            </el-button>
+          </el-tooltip>
+          <el-tooltip content="全屏" placement="top">
+            <el-button class="page-icon-btn" @click="toggleFullscreen">
+              <el-icon><FullScreen /></el-icon>
+            </el-button>
+          </el-tooltip>
+        </div>
       </div>
 
-      <el-table
-        ref="dataTableRef"
-        v-loading="loading"
-        :data="pageData"
-        border
-        stripe
-        highlight-current-row
-        row-key="id"
-        @selection-change="handleSelectionChange"
-      >
+      <div class="page-table-wrapper">
+        <el-table
+          ref="dataTableRef"
+          v-loading="loading"
+          class="page-table"
+          :data="list"
+          height="100%"
+          border
+          highlight-current-row
+          @selection-change="handleSelectionChange"
+        >
         <el-table-column type="selection" width="55" align="center" />
         #foreach($fieldConfig in $fieldConfigs)
           #if($fieldConfig.isShowInList == 1)
@@ -144,14 +157,13 @@
             #end
           #end
         #end
-        <el-table-column fixed="right" label="操作" width="220">
+        <el-table-column fixed="right" label="操作" width="180">
           <template #default="scope">
             <el-button
                 v-hasPerm="['${moduleName}:${entityKebab}:update']"
                 type="primary"
                 size="small"
                 link
-                icon="edit"
                 @click="handleEditClick(String(scope.row.id))"
             >
               编辑
@@ -161,7 +173,6 @@
                 type="danger"
                 size="small"
                 link
-                icon="delete"
                 @click="handleDelete(String(scope.row.id))"
             >
               删除
@@ -169,35 +180,35 @@
           </template>
         </el-table-column>
       </el-table>
-
-      <div class="page-pagination">
-        <pagination
-            v-if="total > 0"
-            v-model:total="total"
-            v-model:page="queryParams.pageNum"
-            v-model:limit="queryParams.pageSize"
-            @pagination="fetchList"
-        />
       </div>
+
+      <pagination
+        v-if="total > 0"
+        v-model:total="total"
+        v-model:page="params.pageNum"
+        v-model:limit="params.pageSize"
+        class="page-pagination"
+        @pagination="fetchData"
+      />
     </el-card>
 
-    <!-- $!{businessName}表单弹窗 -->
+    <!-- 表单弹窗 -->
     <el-dialog
         v-model="dialog.visible"
         :title="dialog.title"
-        width="500px"
+        width="600px"
         @close="closeDialog"
     >
       <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
           #foreach($fieldConfig in $fieldConfigs)
-              #if($fieldConfig.isShowInForm == 1 && $fieldConfig.formTypeName != "HIDDEN")
+              #if($fieldConfig.isShowInForm == 1 && $fieldConfig.formType.name() != "HIDDEN")
                 <el-form-item label="$fieldConfig.fieldComment" prop="$fieldConfig.fieldName">
-                    #if($fieldConfig.formTypeName == "INPUT")
+                    #if($fieldConfig.formType.name() == "INPUT")
                       <el-input
                           v-model="formData.$fieldConfig.fieldName"
                           placeholder="$fieldConfig.fieldComment"
                       />
-                    #elseif($fieldConfig.formTypeName == "SELECT")
+                    #elseif($fieldConfig.formType.name() == "SELECT")
                         #if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
                           <DictSelect v-model="formData.$fieldConfig.fieldName" code="$fieldConfig.dictType" />
                         #else
@@ -206,7 +217,7 @@
                             <el-option :value="1" label="选项二"/>
                           </el-select>
                         #end
-                    #elseif($fieldConfig.formTypeName == "RADIO")
+                    #elseif($fieldConfig.formType.name() == "RADIO")
                         #if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
                           <DictSelect v-model="formData.$fieldConfig.fieldName" type="radio" code="$fieldConfig.dictType" />
                         #else
@@ -215,7 +226,7 @@
                             <el-radio :value="1">选项二</el-radio>
                           </el-radio-group>
                         #end
-                    #elseif($fieldConfig.formTypeName == "CHECK_BOX")
+                    #elseif($fieldConfig.formType.name() == "CHECK_BOX")
                         #if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
                           <DictSelect v-model="formData.$fieldConfig.fieldName" type="checkbox" code="$fieldConfig.dictType" />
                         #else
@@ -224,30 +235,30 @@
                             <el-checkbox :value="1">选项二</el-checkbox>
                           </el-checkbox-group>
                         #end
-                    #elseif($fieldConfig.formTypeName == "INPUT_NUMBER")
+                    #elseif($fieldConfig.formType.name() == "INPUT_NUMBER")
                       <el-input-number
                           v-model="formData.$fieldConfig.fieldName"
                           placeholder="$fieldConfig.fieldComment"
                       />
-                    #elseif($fieldConfig.formTypeName == "SWITCH")
+                    #elseif($fieldConfig.formType.name() == "SWITCH")
                       <el-switch
                           v-model="formData.$fieldConfig.fieldName"
                           :active-value="1"
                           :inactive-value="0"
                       />
-                    #elseif($fieldConfig.formTypeName == "TEXT_AREA")
+                    #elseif($fieldConfig.formType.name() == "TEXT_AREA")
                       <el-input type="textarea"
                                 v-model="formData.$fieldConfig.fieldName"
                                 placeholder="$fieldConfig.fieldComment"
                       />
-                    #elseif($fieldConfig.formTypeName == "DATE_TIME")
+                    #elseif($fieldConfig.formType.name() == "DATE_TIME")
                       <el-date-picker
                           v-model="formData.$fieldConfig.fieldName"
                           type="datetime"
                           placeholder="$fieldConfig.fieldComment"
                           value-format="YYYY-MM-DD HH:mm:ss"
                       />
-                    #elseif($fieldConfig.formTypeName == "DATE")
+                    #elseif($fieldConfig.formType.name() == "DATE")
                       <el-date-picker
                           class="!w-[240px]"
                           v-model="formData.$fieldConfig.fieldName"
@@ -258,15 +269,15 @@
                     #end
                 </el-form-item>
 
-              #elseif($fieldConfig.formTypeName == "HIDDEN")
+              #elseif($fieldConfig.formType.name() == "HIDDEN")
                 <el-input type="hidden" v-model="formData.$fieldConfig.fieldName" />
               #end
           #end
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="handleSubmit()">确定</el-button>
-          <el-button @click="closeDialog()">取消</el-button>
+          <el-button type="primary" @click="handleSubmit">确定</el-button>
+          <el-button @click="closeDialog">取消</el-button>
         </div>
       </template>
     </el-dialog>
@@ -274,9 +285,15 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, reactive, ref } from "vue";
-  import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
-  import { useTableSelection } from "@/composables";
+  import { useFullscreen } from "@vueuse/core";
+  import {
+    ElMessage,
+    ElMessageBox,
+    type FormInstance,
+    type FormRules,
+  } from "element-plus";
+  import { FullScreen, Refresh } from "@element-plus/icons-vue";
+  import { usePageTable, useTableSelection } from "@/composables";
   import ${entityName}API from "@/api/${moduleName}/${entityKebab}";
   import type { ${entityName}Item, ${entityName}Form, ${entityName}QueryParams } from "@/api/${moduleName}/${entityKebab}";
 
@@ -287,17 +304,26 @@
 
   const queryFormRef = ref<FormInstance>();
   const dataFormRef = ref<FormInstance>();
+  const tableWrapperRef = ref<HTMLElement | null>(null);
+  const { toggle: toggleFullscreen } = useFullscreen(tableWrapperRef);
 
-  const loading = ref(false);
-  const total = ref(0);
-
-  const queryParams = reactive<${entityName}QueryParams>({
-    pageNum: 1,
-    pageSize: 10,
-  } as ${entityName}QueryParams);
+  const initialFormData = reactive({} as ${entityName}Form);
+  Object.assign(initialFormData, {} as ${entityName}Form);
 
   // $!{businessName}表格数据
-  const pageData = ref<${entityName}Item[]>([]);
+  const { loading, list, total, params, fetchData, handleQuery, handleResetQuery } = usePageTable<
+    ${entityName}Item,
+    ${entityName}QueryParams
+  >({
+    initialParams: {
+      pageNum: 1,
+      pageSize: 10,
+    } as ${entityName}QueryParams,
+    request: ${entityName}API.getPage,
+    onBeforeReset: () => queryFormRef.value?.resetFields(),
+  });
+
+  const { selectedIds, hasSelection, handleSelectionChange } = useTableSelection<${entityName}Item>();
 
   // 弹窗
   const dialog = reactive({
@@ -319,112 +345,114 @@
       #end
   };
 
-  const { selectedIds, hasSelection, handleSelectionChange } = useTableSelection<${entityName}Item>();
-
-  async function fetchList(): Promise<void> {
-    loading.value = true;
-    try {
-      const data = await ${entityName}API.getPage(queryParams);
-      pageData.value = data.list;
-      total.value = data.total ?? 0;
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  /** 查询$!{businessName} */
-  function handleQuery(): void {
-    queryParams.pageNum = 1;
-    fetchList();
-  }
-
-  /** 重置$!{businessName}查询 */
-  function handleResetQuery() {
-    queryFormRef.value?.resetFields();
-    handleQuery();
-  }
-
+  /**
+   * 打开表单弹窗
+   */
   function openDialog(): void {
     dialog.visible = true;
   }
 
+  /**
+   * 关闭弹窗并重置表单
+   */
   function closeDialog(): void {
     dialog.visible = false;
     resetForm();
   }
 
+  /**
+   * 重置表单
+   */
   function resetForm(): void {
     dataFormRef.value?.resetFields();
     dataFormRef.value?.clearValidate();
-    formData.id = undefined;
+    Object.keys(formData).forEach((key) => {
+      delete (formData as Record<string, unknown>)[key];
+    });
+    Object.assign(formData, initialFormData);
   }
 
+  /**
+   * 打开新增弹窗
+   */
   async function handleCreateClick(): Promise<void> {
     dialog.title = "新增$!{businessName}";
     openDialog();
   }
 
+  /**
+   * 打开编辑弹窗并回填数据
+   */
   async function handleEditClick(id: string): Promise<void> {
     dialog.title = "修改$!{businessName}";
-          ${entityName}API.getFormData(id).then((data) => {
-      Object.assign(formData, data);
-      openDialog();
-    });
+    const data = await ${entityName}API.getFormData(id);
+    Object.assign(formData, data);
+    openDialog();
   }
 
-  /** 提交$!{businessName}表单 */
-  function handleSubmit() {
-    dataFormRef.value?.validate((valid: any) => {
-      if (valid) {
-        loading.value = true;
-        const id = formData.id;
-        if (id) {
-                ${entityName}API.update(id, formData)
-              .then(() => {
-                ElMessage.success("修改成功");
-                closeDialog();
-                handleResetQuery();
-              })
-              .finally(() => (loading.value = false));
-        } else {
-                ${entityName}API.create(formData)
-              .then(() => {
-                ElMessage.success("新增成功");
-                closeDialog();
-                handleResetQuery();
-              })
-              .finally(() => (loading.value = false));
-        }
+  /**
+   * 提交$!{businessName}表单
+   */
+  async function handleSubmit(): Promise<void> {
+    const valid = await dataFormRef.value?.validate().then(
+      () => true,
+      () => false
+    );
+    if (!valid) return;
+
+    loading.value = true;
+    try {
+      const id = formData.id;
+      if (id) {
+        await ${entityName}API.update(id, formData);
+        ElMessage.success("修改成功");
+      } else {
+        await ${entityName}API.create(formData);
+        ElMessage.success("新增成功");
       }
-    });
+      closeDialog();
+      handleResetQuery();
+    } finally {
+      loading.value = false;
+    }
   }
 
-  /** 删除$!{businessName} */
-  function handleDelete(id?: string) {
-    const ids = [id || selectedIds.value].join(",");
+  /**
+   * 批量删除$!{businessName}
+   */
+  function handleBatchDelete(): void {
+    handleDelete();
+  }
+
+  /**
+   * 删除$!{businessName}
+   */
+  async function handleDelete(id?: string): Promise<void> {
+    const ids = id || selectedIds.value.join(",");
     if (!ids) {
       ElMessage.warning("请勾选删除项");
       return;
     }
 
-    ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    }).then(
-        () => {
-          loading.value = true;
-                ${entityName}API.deleteByIds(ids)
-              .then(() => {
-                ElMessage.success("删除成功");
-                handleResetQuery();
-              })
-              .finally(() => (loading.value = false));
-        },
-        () => {
-          ElMessage.info("已取消删除");
-        }
-    );
+    try {
+      await ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      });
+    } catch {
+      ElMessage.info("已取消删除");
+      return;
+    }
+
+    loading.value = true;
+    try {
+      await ${entityName}API.deleteByIds(ids);
+      ElMessage.success("删除成功");
+      handleResetQuery();
+    } finally {
+      loading.value = false;
+    }
   }
 
   onMounted(() => {