diff --git a/backend/app/api/v1/models/system/menu_model.py b/backend/app/api/v1/models/system/menu_model.py
index 6f27e396..40c50aa0 100644
--- a/backend/app/api/v1/models/system/menu_model.py
+++ b/backend/app/api/v1/models/system/menu_model.py
@@ -39,7 +39,7 @@ class MenuModel(ModelBase):
     keep_alive = Column(Boolean, default=True, nullable=False, comment="是否缓存(True:是 False:否)")
     always_show = Column(Boolean, default=False, nullable=False, comment="是否始终显示(True:是 False:否)")
     title = Column(String(50), nullable=True, comment="菜单标题")
-    params = Column(String(200), nullable=True, comment="路由参数")
+    params = Column(Text, nullable=True, comment="路由参数(JSON数组: [{\"key\": \"\", \"value\": \"\"}])")
     affix = Column(Boolean, default=False, nullable=False, comment="是否固定标签页(True:是 False:否)")
 
     # 层级关系
diff --git a/backend/app/api/v1/models/system/operation_log_model.py b/backend/app/api/v1/models/system/operation_log_model.py
index 95589481..26b2902a 100644
--- a/backend/app/api/v1/models/system/operation_log_model.py
+++ b/backend/app/api/v1/models/system/operation_log_model.py
@@ -13,6 +13,7 @@ class OperationLogModel(ModelBase):
     __table_args__ = ({'comment': '操作日志表'})
 
     id = Column(Integer, primary_key=True, autoincrement=True, comment='主键ID')
+    type = Column(Integer, nullable=True, comment="日志类型(1登录日志 2操作日志)", index=True)
     request_path = Column(String(255), nullable=True, comment="请求路径", index=True)
     request_method = Column(String(10), nullable=True, comment="请求方式", index=True)
     request_payload = Column(Text, nullable=True, comment="请求体")
diff --git a/backend/app/api/v1/params/system/operation_log_param.py b/backend/app/api/v1/params/system/operation_log_param.py
index 2d4654d9..6ac667cf 100644
--- a/backend/app/api/v1/params/system/operation_log_param.py
+++ b/backend/app/api/v1/params/system/operation_log_param.py
@@ -11,6 +11,7 @@ class OperationLogQueryParams:
 
     def __init__(
             self,
+            type: Optional[int] = Query(None, description="日志类型(1:登录日志, 2:操作日志)"),
             request_path: Optional[str] = Query(None, description="请求路径"),
             request_method: Optional[str] = Query(None, description="请求方法"),
             request_ip: Optional[str] = Query(None, description="请求IP"),
@@ -29,6 +30,7 @@ class OperationLogQueryParams:
         self.request_method = request_method
         self.request_ip = request_ip
         self.response_code = response_code
+        self.type = type
         
         # 时间范围查询
         if start_time and end_time:
diff --git a/backend/app/api/v1/schemas/system/menu_schema.py b/backend/app/api/v1/schemas/system/menu_schema.py
index 52634d4f..f237ede4 100644
--- a/backend/app/api/v1/schemas/system/menu_schema.py
+++ b/backend/app/api/v1/schemas/system/menu_schema.py
@@ -10,7 +10,7 @@ from app.core.base_schema import BaseSchema
 class MenuCreateSchema(BaseModel):
     """菜单创建模型"""
     name: str = Field(..., max_length=50, description="菜单名称")
-    type: int = Field(..., ge=1, le=3, description="菜单类型(1:目录 2:菜单 3:按钮)")
+    type: int = Field(..., ge=1, le=4, description="菜单类型(1:目录 2:菜单 3:按钮 4:外链)")
     icon: Optional[str] = Field(default=None, max_length=100, description="菜单图标")
     order: int = Field(default=1, ge=0, description="显示顺序")
     permission: Optional[str] = Field(default=None, max_length=100, description="权限标识")
@@ -23,7 +23,7 @@ class MenuCreateSchema(BaseModel):
     hidden: bool = Field(default=False, description="是否隐藏(True:是 False:否)")
     always_show: bool = Field(default=False, description="是否始终显示(True:是 False:否)")
     title: Optional[str] = Field(default=None, max_length=50, description="菜单标题")
-    params: Optional[str] = Field(default=None, max_length=200, description="路由参数")
+    params: Optional[list[dict[str, str]]] = Field(default=None, description="路由参数，格式为[{key: string, value: string}]")
     affix: bool = Field(default=False, description="是否固定标签页(True:是 False:否)")
     parent_id: Optional[int] = Field(default=None, ge=0, description="父菜单ID")
     description: Optional[str] = Field(default=None, max_length=500, description="备注说明")
diff --git a/backend/app/api/v1/schemas/system/operation_log_schema.py b/backend/app/api/v1/schemas/system/operation_log_schema.py
index fd421109..1044278b 100644
--- a/backend/app/api/v1/schemas/system/operation_log_schema.py
+++ b/backend/app/api/v1/schemas/system/operation_log_schema.py
@@ -8,6 +8,7 @@ from app.core.base_schema import BaseSchema
 
 class OperationLogCreateSchema(BaseModel):
     """日志创建模型"""
+    type: Optional[int] = Field(default=None, description="日志类型(1登录日志 2操作日志)")
     request_path: Optional[str] = Field(default=None, description="请求路径")
     request_method: Optional[str] = Field(default=None, description="请求方法")
     request_payload: Optional[str] = Field(default=None, description="请求负载")
diff --git a/backend/app/api/v1/services/system/operation_log_service.py b/backend/app/api/v1/services/system/operation_log_service.py
index e2fc1f7e..a79678f2 100644
--- a/backend/app/api/v1/services/system/operation_log_service.py
+++ b/backend/app/api/v1/services/system/operation_log_service.py
@@ -65,6 +65,7 @@ class OperationLogService:
         # 操作日志字段映射
         mapping_dict = {
             'id': '编号',
+            'type': '日志类型',
             'request_path': '请求URL',
             'request_method': '请求方式',
             'request_payload': '请求参数',
@@ -87,5 +88,7 @@ class OperationLogService:
         for item in data:
             # 处理状态
             item['response_code'] = '成功' if item.get('response_code') == 200 else '失败'
+            # 处理日志类型
+            item['type'] = '操作日志' if item.get('type') == 1 else '登录日志'
 
         return ExcelUtil.export_list2excel(list_data=operation_log_list, mapping_dict=mapping_dict)
diff --git a/backend/app/core/router_class.py b/backend/app/core/router_class.py
index 838bcab1..37159b3e 100644
--- a/backend/app/core/router_class.py
+++ b/backend/app/core/router_class.py
@@ -60,9 +60,11 @@ class OperationLogRoute(APIRoute):
             process_time = time.time() - start_time
 
             # 获取当前用户ID,如果是登录接口则为空
+            log_type = 1 # 1:登录日志 2:操作日志
             current_user_id = None
             if "user_id" in request.scope:
                 current_user_id = request.scope.get("user_id")
+                log_type = 2
             
             request_ip = None
             x_forwarded_for = request.headers.get('X-Forwarded-For')
@@ -81,6 +83,7 @@ class OperationLogRoute(APIRoute):
                     auth = AuthSchema(db=session)
                     
                     await OperationLogService.create_log_service(data=OperationLogCreateSchema(
+                        type = log_type,
                         request_path = request.url.path,
                         request_method = request.method,
                         request_payload = payload,
diff --git a/backend/app/scripts/data/system_menu.json b/backend/app/scripts/data/system_menu.json
index 1e8f9d7f..d430a47c 100644
--- a/backend/app/scripts/data/system_menu.json
+++ b/backend/app/scripts/data/system_menu.json
@@ -1500,7 +1500,7 @@
     "route_name": null,
     "route_path": null,
     "component_path": null,
-    "parent_id": 62,
+    "parent_id": 71,
     "status": true,
     "keep_alive": false,
     "hidden": false,
@@ -1535,7 +1535,7 @@
   {
     "id": 74,
     "name": "接口管理",
-    "type": 2,
+    "type": 4,
     "icon": "api",
     "order": 1,
     "permission": "common:docs:query",
@@ -1556,7 +1556,7 @@
   {
     "id": 75,
     "name": "文档管理",
-    "type": 2,
+    "type": 4,
     "icon": "el-icon-Document",
     "order": 2,
     "permission": "common:redoc:query",
diff --git a/backend/dev_sql.db b/backend/dev_sql.db
index 987cdf89..d05ed072 100644
Binary files a/backend/dev_sql.db and b/backend/dev_sql.db differ
diff --git a/frontend/package.json b/frontend/package.json
index 39f2e9a5..98eaf833 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -45,7 +45,6 @@
     "@types/node": "^22.16.5",
     "@types/nprogress": "^0.2.3",
     "@types/qs": "^6.14.0",
-    "@vitejs/plugin-vue": "^6.0.0",
     "eslint": "^9.31.0",
     "sass": "^1.89.2",
     "terser": "^5.43.1",
@@ -53,6 +52,7 @@
     "unocss": "66.2.3",
     "unplugin-auto-import": "^19.3.0",
     "unplugin-vue-components": "^28.8.0",
+    "@vitejs/plugin-vue": "^6.0.0",
     "vite": "^6.3.5"
   },
   "engines": {
diff --git a/frontend/src/api/system/dept.ts b/frontend/src/api/system/dept.ts
index 23f07358..98b1285c 100644
--- a/frontend/src/api/system/dept.ts
+++ b/frontend/src/api/system/dept.ts
@@ -1,7 +1,7 @@
 import request from "@/utils/request";
 
 const DeptAPI = {
-  getDeptList(query: DeptPageQuery) {
+  getDeptList(query?: DeptPageQuery) {
     return request<ApiResponse<PageResult<DeptTable[]>>>({
       url: `/system/dept/list`,
       method: "get",
diff --git a/frontend/src/api/system/log.ts b/frontend/src/api/system/log.ts
index 178f3de1..5da00e5a 100644
--- a/frontend/src/api/system/log.ts
+++ b/frontend/src/api/system/log.ts
@@ -37,6 +37,7 @@ const LogAPI = {
 export default LogAPI;
 
 export interface LogPageQuery extends PageQuery {
+  type?: number;
   request_path?: string;
   creator_name?: string;
   /** 开始时间 */
@@ -47,6 +48,7 @@ export interface LogPageQuery extends PageQuery {
 
 export interface LogTable {
   id?: number;
+  type?: number; // 1 登录日志 2 操作日志
   request_path?: string;
   request_method?: string;
   request_ip?: string;
diff --git a/frontend/src/api/system/menu.ts b/frontend/src/api/system/menu.ts
index 2e579865..138546df 100644
--- a/frontend/src/api/system/menu.ts
+++ b/frontend/src/api/system/menu.ts
@@ -1,7 +1,7 @@
 import request from "@/utils/request";
 
 const MenuAPI = {
-  getMenuList(query: MenuPageQuery) {
+  getMenuList(query?: MenuPageQuery) {
     return request<ApiResponse<PageResult<MenuTable[]>>>({
       url: `/system/menu/list`,
       method: "get",
@@ -78,7 +78,7 @@ export interface MenuTable {
   hidden?: boolean;
   always_show?: boolean;
   title?: string;
-  params?: string;
+  params?: { key: string; value: string; }[];
   affix?: boolean;
   status?: boolean;
   description?: string;
@@ -103,7 +103,7 @@ export interface MenuForm {
   hidden?: boolean;
   always_show?: boolean;
   title?: string;
-  params?: string;
+  params?: { key: string; value: string; }[];
   affix?: boolean;
   status?: boolean;
   description?: string;
diff --git a/frontend/src/api/system/role.ts b/frontend/src/api/system/role.ts
index 2be6dc6c..4efca3f9 100644
--- a/frontend/src/api/system/role.ts
+++ b/frontend/src/api/system/role.ts
@@ -106,26 +106,26 @@ export interface RoleForm {
 }
 
 export interface permissionDataType {
-  role_ids?: RoleTable["id"][];
-  menu_ids?: permissionMenuType["id"][];
-  data_scope?: number;
-  dept_ids?: number[];
+  role_ids: RoleTable["id"][];
+  menu_ids: permissionMenuType["id"][];
+  data_scope: number;
+  dept_ids: permissionDeptType["id"][];
 }
 
 export interface permissionDeptType {
-  id?: number;
-  name?: string;
-  parent_id?: number;
-  children?: permissionDeptType[];
+  id: number;
+  name: string;
+  parent_id: number;
+  children: permissionDeptType[];
 }
 
 export interface permissionMenuType {
-  id?: number;
-  name?: string;
-  type?: number;
-  permission?: string;
+  id: number;
+  name: string;
+  type: number;
+  permission: string;
   parent_id?: number;
-  status?: boolean;
+  status: boolean;
   description?: string;
   children?: permissionMenuType[];
 }
diff --git a/frontend/src/enums/system/menu.enum.ts b/frontend/src/enums/system/menu.enum.ts
index cf246c3e..f561d8fc 100644
--- a/frontend/src/enums/system/menu.enum.ts
+++ b/frontend/src/enums/system/menu.enum.ts
@@ -1,7 +1,7 @@
 // 核心枚举定义
 export enum MenuTypeEnum {
-  CATALOG = 2, // 目录
-  MENU = 1, // 菜单
+  CATALOG = 1, // 目录
+  MENU = 2, // 菜单
   BUTTON = 3, // 按钮
   EXTLINK = 4, // 外链
 }
diff --git a/frontend/src/store/modules/notice.store.ts b/frontend/src/store/modules/notice.store.ts
index 6f9baf1e..f493d86e 100644
--- a/frontend/src/store/modules/notice.store.ts
+++ b/frontend/src/store/modules/notice.store.ts
@@ -11,7 +11,6 @@ export const useNoticeStore = defineStore("notice", {
   actions: {
     async getNotice() {
       const response = await NoticeAPI.getNoticeListAvailable();
-      console.log('获取我的通知公告', response);
       this.noticeList = response.data.data.items;
       this.total = response.data.data.total;
       this.isNoticeLoaded = true;
diff --git a/frontend/src/store/modules/permission.store.ts b/frontend/src/store/modules/permission.store.ts
index 5da4561b..dd8967bb 100644
--- a/frontend/src/store/modules/permission.store.ts
+++ b/frontend/src/store/modules/permission.store.ts
@@ -22,7 +22,7 @@ export interface Meta {
   /** 排序 */
   order?: number;
   /** 参数 */
-  params?: string;
+  params?: { key: string; value: string; }[];
   /** 是否固定路由 */
   affix?: boolean;
 }
diff --git a/frontend/src/utils/common.ts b/frontend/src/utils/common.ts
index f27ee2a5..ccdd5d73 100644
--- a/frontend/src/utils/common.ts
+++ b/frontend/src/utils/common.ts
@@ -1,5 +1,3 @@
-
-
 // 问候语：根据当前小时返回不同问候语
 export function greetings () {
   // 当前时间（用于计算问候语）
@@ -145,7 +143,7 @@ export function listToTree(list: any[]) {
 }
 
 // 加载部门选项
-export function formatDeptTree(nodes: any[]): any[] {
+export function formatTree(nodes: any[]): any[] {
   return nodes.map(node => {
     const formattedNode = {
       value: node.id,
@@ -153,7 +151,7 @@ export function formatDeptTree(nodes: any[]): any[] {
     };
     
     if (node.children && node.children.length > 0) {
-      Object.assign(formattedNode, { children: formatDeptTree(node.children) });
+      Object.assign(formattedNode, { children: formatTree(node.children) });
     }
     
     return formattedNode;
diff --git a/frontend/src/views/monitor/job/index.vue b/frontend/src/views/monitor/job/index.vue
index 3b190f6d..e24354aa 100644
--- a/frontend/src/views/monitor/job/index.vue
+++ b/frontend/src/views/monitor/job/index.vue
@@ -1,280 +1,506 @@
 <!-- 公告通知配置 -->
 <template>
-    <div class="app-container">
-        <!-- 搜索区域 -->
-        <div class="search-container">
-            <el-form ref="queryFormRef" :model="queryFormData" :inline="true">
-                <el-form-item prop="name" label="任务名称">
-                    <el-input v-model="queryFormData.name" placeholder="请输入任务名称" clearable />
-                </el-form-item>
-                <el-form-item prop="status" label="状态">
-                    <el-select v-model="queryFormData.status" placeholder="请选择状态" clearable>
-                        <el-option value="true" label="启用" />
-                        <el-option value="false" label="暂停" />
-                    </el-select>
-                </el-form-item>
-                <!-- 时间范围，收起状态下隐藏 -->
-                <el-form-item v-if="isExpand" prop="start_time" label="创建时间">
-                    <el-date-picker v-model="queryFormData.start_time" type="daterange" value-format="yyyy-MM-dd"
-                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
-                </el-form-item>
-                <!-- 查询、重置、展开/收起按钮 -->
-                <el-form-item class="search-buttons">
-                    <el-button type="primary" icon="search" @click="handleQuery">查询</el-button>
-                    <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
-                    <!-- 展开/收起 -->
-                    <template v-if="isExpandable">
-                        <el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
-                            {{ isExpand ? "收起" : "展开" }}
-                            <el-icon>
-                                <template v-if="isExpand">
-                                    <ArrowUp />
-                                </template>
-                                <template v-else>
-                                    <ArrowDown />
-                                </template>
-                            </el-icon>
-                        </el-link>
-                    </template>
-                </el-form-item>
-            </el-form>
-        </div>
-
-        <!-- 内容区域 -->
-        <el-card shadow="hover" class="data-table">
-            <template #header>
-                <div class="card-header">
-                    <span>
-                        <el-tooltip content="定时任务列表">
-                            <QuestionFilled class="w-4 h-4 mx-1" />
-                        </el-tooltip>
-                        定时任务列表
-                    </span>
-                </div>
-            </template>
-
-            <!-- 功能区域 -->
-            <div class="data-table__toolbar">
-                <div class="data-table__toolbar--actions">
-                    <el-button type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
-                    <el-button type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)">批量删除</el-button>
-                </div>
-                <div class="data-table__toolbar--tools">
-                    <el-tooltip content="导出">
-                        <el-button type="warning" icon="download" circle @click="handleExport" />
-                    </el-tooltip>
-                    <el-tooltip content="清除">
-                        <el-button type="danger" icon="plus" circle @click="handleClear" />
-                    </el-tooltip>
-                    <el-tooltip content="刷新">
-                        <el-button type="primary" icon="refresh" circle @click="handleRefresh" />
-                    </el-tooltip>
-                </div>
-            </div>
-
-            <!-- 表格区域：系统配置列表 -->
-            <el-table ref="dataTableRef" v-loading="loading" :data="pageTableData" class="data-table__content"
-                highlight-current-row height="450" border stripe @selection-change="handleSelectionChange">
-                <template #empty>
-                    <el-empty :image-size="80" description="暂无数据" />
+  <div class="app-container">
+    <!-- 搜索区域 -->
+    <div class="search-container">
+      <el-form ref="queryFormRef" :model="queryFormData" :inline="true">
+        <el-form-item prop="name" label="任务名称">
+          <el-input
+            v-model="queryFormData.name"
+            placeholder="请输入任务名称"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item prop="status" label="状态">
+          <el-select
+            v-model="queryFormData.status"
+            placeholder="请选择状态"
+            clearable
+          >
+            <el-option value="true" label="启用" />
+            <el-option value="false" label="暂停" />
+          </el-select>
+        </el-form-item>
+        <!-- 时间范围，收起状态下隐藏 -->
+        <el-form-item v-if="isExpand" prop="start_time" label="创建时间">
+          <el-date-picker
+            v-model="queryFormData.start_time"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          />
+        </el-form-item>
+        <!-- 查询、重置、展开/收起按钮 -->
+        <el-form-item class="search-buttons">
+          <el-button type="primary" icon="search" @click="handleQuery"
+            >查询</el-button
+          >
+          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
+          <!-- 展开/收起 -->
+          <template v-if="isExpandable">
+            <el-link
+              class="ml-3"
+              type="primary"
+              underline="never"
+              @click="isExpand = !isExpand"
+            >
+              {{ isExpand ? "收起" : "展开" }}
+              <el-icon>
+                <template v-if="isExpand">
+                  <ArrowUp />
                 </template>
-                <el-table-column type="selection" align="center" min-width="55" />
-                <el-table-column type="index" label="序号" fixed min-width="60" />
-                <el-table-column label="任务名称" prop="name" min-width="140" />
-                <el-table-column label="执行函数" prop="func" min-width="140" />
-                <el-table-column label="触发器" prop="trigger" min-width="100" />
-                <el-table-column label="存储器" prop="jobstore" min-width="100" />
-                <el-table-column label="执行器" prop="executor" min-width="100" />
-                <el-table-column label="并发执行" prop="coalesce" min-width="100">
-                    <template #default="scope">
-                        <el-tag :type="scope.row.coalesce === true ? 'success' : 'danger'">
-                            {{ scope.row.coalesce === true ? "是" : "否" }}
-                        </el-tag>
-                    </template>
-                </el-table-column>
-                <el-table-column label="状态" prop="status" min-width="100">
-                    <template #default="scope">
-                        <el-tag :type="scope.row.status === true ? 'success' : 'danger'">
-                            {{ scope.row.status === true ? "启用" : "停用" }}
-                        </el-tag>
-                    </template>
-                </el-table-column>
-                <el-table-column label="描述" prop="description" min-width="100" />
-                <el-table-column label="创建时间" prop="created_at" min-width="200" sortable />
-                <el-table-column label="更新时间" prop="updated_at" min-width="200" sortable />
-
-                <el-table-column fixed="right" label="操作" min-width="240">
-                    <template #default="scope">
-                        <el-button type="info" size="small" link icon="document"
-                            @click="handleOpenDialog('detail', scope.row.id)">详情</el-button>
-                        <el-button type="primary" size="small" link icon="edit"
-                            @click="handleOpenDialog('update', scope.row.id)">编辑</el-button>
-                        <el-button type="danger" size="small" link icon="delete"
-                            @click="handleDelete([scope.row.id])">删除</el-button>
-                        <el-dropdown trigger="click">
-                            <el-button type="default" size="small" link icon="ArrowDown">更多</el-button>
-                            <template #dropdown>
-                                <el-dropdown-menu>
-                                    <el-dropdown-item icon="Check" @click="handleOption(scope.row, 1)">暂停</el-dropdown-item>
-                                    <el-dropdown-item icon="CircleClose" @click="handleOption(scope.row, 2)">恢复</el-dropdown-item>
-                                    <!-- <el-dropdown-item icon="CircleClose" @click="handleOption(scope.row, 3)">重启</el-dropdown-item> -->
-                                </el-dropdown-menu>
-                            </template>
-                        </el-dropdown>
-                    </template>
-                </el-table-column>
-            </el-table>
-
-            <!-- 分页区域 -->
-            <template #footer>
-                <pagination v-model:total="total" v-model:page="queryFormData.page_no" v-model:limit="queryFormData.page_size" @pagination="loadingData" />
-            </template>
-        </el-card>
-
-        <!-- 弹窗区域 -->
-        <el-dialog v-model="dialogVisible.visible" :title="dialogVisible.title" @close="handleCloseDialog">
-            <!-- 详情 -->
-            <template v-if="dialogVisible.type === 'detail'">
-                <el-descriptions :column="4" border>
-                    <el-descriptions-item label="序号" :span="2">{{ detailFormData.id }}</el-descriptions-item>
-                    <el-descriptions-item label="任务名称" :span="2">{{ detailFormData.name }}</el-descriptions-item>
-                    <el-descriptions-item label="任务函数" :span="2">{{ detailFormData.func }}</el-descriptions-item>
-                    <el-descriptions-item label="存储器" :span="2">{{ detailFormData.jobstore }}</el-descriptions-item>
-                    <el-descriptions-item label="执行器" :span="2">{{ detailFormData.executor }}</el-descriptions-item>
-                    <el-descriptions-item label="触发器" :span="2">{{ detailFormData.trigger }}</el-descriptions-item>
-                    <el-descriptions-item label="位置参数" :span="2">{{ detailFormData.args }}</el-descriptions-item>
-                    <el-descriptions-item label="关键字参数" :span="2">{{ detailFormData.kwargs }}</el-descriptions-item>
-                    <el-descriptions-item label="并发执行" :span="2">
-                        <el-tag :type="detailFormData.coalesce ? 'success' : 'danger'">
-                            {{ detailFormData.coalesce ? '是' : '否' }}
-                        </el-tag>
-                    </el-descriptions-item>
-                    <el-descriptions-item label="状态" :span="2">
-                        <el-tag :type="detailFormData.status ? 'success' : 'danger'">
-                            {{ detailFormData.status ? '启用' : '停用' }}
-                        </el-tag>
-                    </el-descriptions-item>
-                    <el-descriptions-item label="最大实例数" :span="2">{{ detailFormData.max_instances }}</el-descriptions-item>
-                    <el-descriptions-item label="触发器参数" :span="2">{{ detailFormData.trigger_args }}</el-descriptions-item>
-                    <el-descriptions-item label="开始时间" :span="2">{{ detailFormData.start_date }}</el-descriptions-item>
-                    <el-descriptions-item label="结束时间" :span="2">{{ detailFormData.end_date }}</el-descriptions-item>
-                    <el-descriptions-item label="日志信息" :span="2">{{ detailFormData.message }}</el-descriptions-item>
-                    <el-descriptions-item label="创建人" :span="2">{{ detailFormData.creator?.name }}</el-descriptions-item>
-                    <el-descriptions-item label="创建时间" :span="2">{{ detailFormData.created_at }}</el-descriptions-item>
-                    <el-descriptions-item label="更新时间" :span="2">{{ detailFormData.updated_at }}</el-descriptions-item>
-                    <el-descriptions-item label="描述" :span="4">{{ detailFormData.description }}</el-descriptions-item>
-                </el-descriptions>
-            </template>
-            <!-- 新增、编辑表单 -->
-            <template v-else>
-                <el-form ref="dataFormRef" :model="formData" :rules="rules" label-suffix=":" label-width="100px">
-                    <el-form-item label="任务名称" prop="name">
-                        <el-input v-model="formData.name" placeholder="请输入任务名称" :maxlength="50" />
-                    </el-form-item>
-                    <el-form-item label="任务函数" prop="func">
-                        <el-input v-model="formData.func" placeholder="请输入任务函数" :maxlength="50" />
-                    </el-form-item>
-                    <el-form-item label="存储器" prop="jobstore">
-                        <el-select v-model="formData.jobstore" placeholder="请选择存储器">
-                            <el-option value="default" label="默认(Memory)" />
-                            <el-option value="sqlalchemy" label="数据库" />
-                            <el-option value="redis" label="Redis存储器" />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="执行器" prop="executor">
-                        <el-select v-model="formData.executor" placeholder="请选择执行器">
-                            <el-option value="default" label="默认" />
-                            <el-option value="processpool" label="进程池" />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="位置参数" prop="args">
-                        <el-input v-model="formData.args" placeholder="请输入位置参数" :maxlength="50" />
-                    </el-form-item>
-                    <el-form-item label="关键字参数" prop="kwargs">
-                        <el-input v-model="formData.kwargs" placeholder="请输入关键字参数" :maxlength="50" />
-                    </el-form-item>
-                    <el-form-item label="并发执行" prop="coalesce">
-                        <el-radio-group v-model="formData.coalesce">
-                            <el-radio :value="true">是</el-radio>
-                            <el-radio :value="false">否</el-radio>
-                        </el-radio-group>
-                    </el-form-item>
-                    <el-form-item label="最大实例数" prop="max_instances">
-                        <el-input-number v-model="formData.max_instances" controls-position="right" :min="1"
-                            :max="10" />
-                    </el-form-item>
-                    <el-form-item label="触发器" prop="trigger">
-                        <el-select v-model="formData.trigger" placeholder="请选择触发器">
-                            <el-option value="date" label="指定日期(date)" />
-                            <el-option value="interval" label="间隔触发器(interval)" />
-                            <el-option value="cron" label="cron表达式" />
-                        </el-select>
-                    </el-form-item>
-
-                    <!-- 运行日期、间隔时间或 Cron 表达式 -->
-                    <el-form-item v-if="formData.trigger === 'date'" label="运行日期"
-                        :rules="[{ required: true, message: '请选择运行日期' }]">
-                        <el-date-picker v-model="formData.trigger_args" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-                            value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择运行日期" style="width: 100%" />
-                    </el-form-item>
-                    <el-form-item v-else-if="formData.trigger === 'interval'" label="间隔时间"
-                        :rules="[{ required: true, message: '请输入间隔时间' }]">
-                        <el-input v-model="formData.trigger_args" placeholder="请输入 秒-分-时-天-周 (* * * * 1)" clearable
-                            @click="openIntervalTabHandle('create')" />
-                    </el-form-item>
-                    <el-form-item v-else-if="formData.trigger === 'cron'" label="Cron表达式"
-                        :rules="[{ required: true, message: '请输入Cron表达式' }]">
-                        <el-input v-model="formData.trigger_args" placeholder="请输入 Cron表达式(*/3 * * * *)" clearable
-                            readonly @click="handleShowCron">
-                        </el-input>
-                    </el-form-item>
-                    <!-- 开始日期和结束日期 -->
-                    <el-form-item v-if="formData.trigger && formData.trigger != 'date'" label="开始日期"
-                        :rules="[{ required: false, message: '请选择开始日期' }]">
-                        <el-date-picker v-model="formData.start_date" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-                            value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始日期" style="width: 100%" />
-                    </el-form-item>
-                    <el-form-item v-if="formData.trigger && formData.trigger != 'date'" label="结束日期"
-                        :rules="[{ required: false, message: '请选择结束日期' }]">
-                        <el-date-picker v-model="formData.end_date" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-                            value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束日期" style="width: 100%" />
-                    </el-form-item>
-
-                    <el-form-item label="描述" prop="description">
-                        <el-input v-model="formData.description" :rows="4" :maxlength="100" show-word-limit
-                            type="textarea" placeholder="请输入描述" />
-                    </el-form-item>
-                </el-form>
-            </template>
-
-            <template #footer>
-                <div class="dialog-footer">
-                    <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
-                    <el-button v-if="dialogVisible.type !== 'detail'" type="primary"
-                        @click="handleSubmit">确定</el-button>
-                    <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
-                    <el-button @click="handleCloseDialog">取消</el-button>
-                </div>
-            </template>
-        </el-dialog>
-
-        <!-- 时间间隔组件 -->
-        <el-dialog v-model="openIntervalTab" title="间隔时间设置" :width="600" :destroy-on-close="true"
-            @ok="handleIntervalConfirm">
-            <IntervalTab ref="intervalTabRef" />
-        </el-dialog>
-
-        <!-- core组件 -->
-        <el-dialog v-model="openCron">
-            <Vue3CronPlusPicker :expression="expression" @hide="closeDialog" @fill="fillValue" />
-        </el-dialog>
+                <template v-else>
+                  <ArrowDown />
+                </template>
+              </el-icon>
+            </el-link>
+          </template>
+        </el-form-item>
+      </el-form>
     </div>
+
+    <!-- 内容区域 -->
+    <el-card shadow="hover" class="data-table">
+      <template #header>
+        <div class="card-header">
+          <span>
+            <el-tooltip content="定时任务列表">
+              <QuestionFilled class="w-4 h-4 mx-1" />
+            </el-tooltip>
+            定时任务列表
+          </span>
+        </div>
+      </template>
+
+      <!-- 功能区域 -->
+      <div class="data-table__toolbar">
+        <div class="data-table__toolbar--actions">
+          <el-button
+            type="success"
+            icon="plus"
+            @click="handleOpenDialog('create')"
+            >新增</el-button
+          >
+          <el-button
+            type="danger"
+            icon="delete"
+            :disabled="selectIds.length === 0"
+            @click="handleDelete(selectIds)"
+            >批量删除</el-button
+          >
+        </div>
+        <div class="data-table__toolbar--tools">
+          <el-tooltip content="导出">
+            <el-button
+              type="warning"
+              icon="download"
+              circle
+              @click="handleExport"
+            />
+          </el-tooltip>
+          <el-tooltip content="清除">
+            <el-button type="danger" icon="plus" circle @click="handleClear" />
+          </el-tooltip>
+          <el-tooltip content="刷新">
+            <el-button
+              type="primary"
+              icon="refresh"
+              circle
+              @click="handleRefresh"
+            />
+          </el-tooltip>
+        </div>
+      </div>
+
+      <!-- 表格区域：系统配置列表 -->
+      <el-table
+        ref="dataTableRef"
+        v-loading="loading"
+        :data="pageTableData"
+        class="data-table__content"
+        highlight-current-row
+        height="450"
+        border
+        stripe
+        @selection-change="handleSelectionChange"
+      >
+        <template #empty>
+          <el-empty :image-size="80" description="暂无数据" />
+        </template>
+        <el-table-column type="selection" align="center" min-width="55" />
+        <el-table-column type="index" label="序号" fixed min-width="60">
+          <template #default="scope">
+            {{
+              (queryFormData.page_no - 1) * queryFormData.page_size +
+              scope.$index +
+              1
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column label="任务名称" prop="name" min-width="140" />
+        <el-table-column label="执行函数" prop="func" min-width="140" />
+        <el-table-column label="触发器" prop="trigger" min-width="100" />
+        <el-table-column label="存储器" prop="jobstore" min-width="100" />
+        <el-table-column label="执行器" prop="executor" min-width="100" />
+        <el-table-column label="并发执行" prop="coalesce" min-width="100">
+          <template #default="scope">
+            <el-tag :type="scope.row.coalesce === true ? 'success' : 'danger'">
+              {{ scope.row.coalesce === true ? "是" : "否" }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" prop="status" min-width="100">
+          <template #default="scope">
+            <el-tag :type="scope.row.status === true ? 'success' : 'danger'">
+              {{ scope.row.status === true ? "启用" : "停用" }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="描述" prop="description" min-width="100" />
+        <el-table-column
+          label="创建时间"
+          prop="created_at"
+          min-width="200"
+          sortable
+        />
+        <el-table-column
+          label="更新时间"
+          prop="updated_at"
+          min-width="200"
+          sortable
+        />
+
+        <el-table-column fixed="right" label="操作" min-width="240">
+          <template #default="scope">
+            <el-button
+              type="info"
+              size="small"
+              link
+              icon="document"
+              @click="handleOpenDialog('detail', scope.row.id)"
+              >详情</el-button
+            >
+            <el-button
+              type="primary"
+              size="small"
+              link
+              icon="edit"
+              @click="handleOpenDialog('update', scope.row.id)"
+              >编辑</el-button
+            >
+            <el-button
+              type="danger"
+              size="small"
+              link
+              icon="delete"
+              @click="handleDelete([scope.row.id])"
+              >删除</el-button
+            >
+            <el-dropdown trigger="click">
+              <el-button type="default" size="small" link icon="ArrowDown"
+                >更多</el-button
+              >
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item
+                    icon="Check"
+                    @click="handleOption(scope.row, 1)"
+                    >暂停</el-dropdown-item
+                  >
+                  <el-dropdown-item
+                    icon="CircleClose"
+                    @click="handleOption(scope.row, 2)"
+                    >恢复</el-dropdown-item
+                  >
+                  <!-- <el-dropdown-item icon="CircleClose" @click="handleOption(scope.row, 3)">重启</el-dropdown-item> -->
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页区域 -->
+      <template #footer>
+        <pagination
+          v-model:total="total"
+          v-model:page="queryFormData.page_no"
+          v-model:limit="queryFormData.page_size"
+          @pagination="loadingData"
+        />
+      </template>
+    </el-card>
+
+    <!-- 弹窗区域 -->
+    <el-dialog
+      v-model="dialogVisible.visible"
+      :title="dialogVisible.title"
+      top="3vh"
+      @close="handleCloseDialog"
+    >
+      <!-- 详情 -->
+      <template v-if="dialogVisible.type === 'detail'">
+        <el-descriptions :column="4" border>
+          <el-descriptions-item label="序号" :span="2">{{
+            detailFormData.id
+          }}</el-descriptions-item>
+          <el-descriptions-item label="任务名称" :span="2">{{
+            detailFormData.name
+          }}</el-descriptions-item>
+          <el-descriptions-item label="任务函数" :span="2">{{
+            detailFormData.func
+          }}</el-descriptions-item>
+          <el-descriptions-item label="存储器" :span="2">{{
+            detailFormData.jobstore
+          }}</el-descriptions-item>
+          <el-descriptions-item label="执行器" :span="2">{{
+            detailFormData.executor
+          }}</el-descriptions-item>
+          <el-descriptions-item label="触发器" :span="2">{{
+            detailFormData.trigger
+          }}</el-descriptions-item>
+          <el-descriptions-item label="位置参数" :span="2">{{
+            detailFormData.args
+          }}</el-descriptions-item>
+          <el-descriptions-item label="关键字参数" :span="2">{{
+            detailFormData.kwargs
+          }}</el-descriptions-item>
+          <el-descriptions-item label="并发执行" :span="2">
+            <el-tag :type="detailFormData.coalesce ? 'success' : 'danger'">
+              {{ detailFormData.coalesce ? "是" : "否" }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="状态" :span="2">
+            <el-tag :type="detailFormData.status ? 'success' : 'danger'">
+              {{ detailFormData.status ? "启用" : "停用" }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="最大实例数" :span="2">{{
+            detailFormData.max_instances
+          }}</el-descriptions-item>
+          <el-descriptions-item label="触发器参数" :span="2">{{
+            detailFormData.trigger_args
+          }}</el-descriptions-item>
+          <el-descriptions-item label="开始时间" :span="2">{{
+            detailFormData.start_date
+          }}</el-descriptions-item>
+          <el-descriptions-item label="结束时间" :span="2">{{
+            detailFormData.end_date
+          }}</el-descriptions-item>
+          <el-descriptions-item label="日志信息" :span="2">{{
+            detailFormData.message
+          }}</el-descriptions-item>
+          <el-descriptions-item label="创建人" :span="2">{{
+            detailFormData.creator?.name
+          }}</el-descriptions-item>
+          <el-descriptions-item label="创建时间" :span="2">{{
+            detailFormData.created_at
+          }}</el-descriptions-item>
+          <el-descriptions-item label="更新时间" :span="2">{{
+            detailFormData.updated_at
+          }}</el-descriptions-item>
+          <el-descriptions-item label="描述" :span="4">{{
+            detailFormData.description
+          }}</el-descriptions-item>
+        </el-descriptions>
+      </template>
+      <!-- 新增、编辑表单 -->
+      <template v-else>
+        <el-form
+          ref="dataFormRef"
+          :model="formData"
+          :rules="rules"
+          label-suffix=":"
+          label-width="100px"
+        >
+          <el-form-item label="任务名称" prop="name">
+            <el-input
+              v-model="formData.name"
+              placeholder="请输入任务名称"
+              :maxlength="50"
+            />
+          </el-form-item>
+          <el-form-item label="任务函数" prop="func">
+            <el-input
+              v-model="formData.func"
+              placeholder="请输入任务函数"
+              :maxlength="50"
+            />
+          </el-form-item>
+          <el-form-item label="存储器" prop="jobstore">
+            <el-select v-model="formData.jobstore" placeholder="请选择存储器">
+              <el-option value="default" label="默认(Memory)" />
+              <el-option value="sqlalchemy" label="数据库" />
+              <el-option value="redis" label="Redis存储器" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="执行器" prop="executor">
+            <el-select v-model="formData.executor" placeholder="请选择执行器">
+              <el-option value="default" label="默认" />
+              <el-option value="processpool" label="进程池" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="位置参数" prop="args">
+            <el-input
+              v-model="formData.args"
+              placeholder="请输入位置参数"
+              :maxlength="50"
+            />
+          </el-form-item>
+          <el-form-item label="关键字参数" prop="kwargs">
+            <el-input
+              v-model="formData.kwargs"
+              placeholder="请输入关键字参数"
+              :maxlength="50"
+            />
+          </el-form-item>
+          <el-form-item label="并发执行" prop="coalesce">
+            <el-radio-group v-model="formData.coalesce">
+              <el-radio :value="true">是</el-radio>
+              <el-radio :value="false">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="最大实例数" prop="max_instances">
+            <el-input-number
+              v-model="formData.max_instances"
+              controls-position="right"
+              :min="1"
+              :max="10"
+            />
+          </el-form-item>
+          <el-form-item label="触发器" prop="trigger">
+            <el-select v-model="formData.trigger" placeholder="请选择触发器">
+              <el-option value="date" label="指定日期(date)" />
+              <el-option value="interval" label="间隔触发器(interval)" />
+              <el-option value="cron" label="cron表达式" />
+            </el-select>
+          </el-form-item>
+
+          <!-- 运行日期、间隔时间或 Cron 表达式 -->
+          <el-form-item
+            v-if="formData.trigger === 'date'"
+            label="运行日期"
+            :rules="[{ required: true, message: '请选择运行日期' }]"
+          >
+            <el-date-picker
+              v-model="formData.trigger_args"
+              type="datetime"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择运行日期"
+              style="width: 100%"
+            />
+          </el-form-item>
+          <el-form-item
+            v-else-if="formData.trigger === 'interval'"
+            label="间隔时间"
+            :rules="[{ required: true, message: '请输入间隔时间' }]"
+          >
+            <el-input
+              v-model="formData.trigger_args"
+              placeholder="请输入 秒-分-时-天-周 (* * * * 1)"
+              clearable
+              @click="openIntervalTabHandle('create')"
+            />
+          </el-form-item>
+          <el-form-item
+            v-else-if="formData.trigger === 'cron'"
+            label="Cron表达式"
+            :rules="[{ required: true, message: '请输入Cron表达式' }]"
+          >
+            <el-input
+              v-model="formData.trigger_args"
+              placeholder="请输入 Cron表达式(*/3 * * * *)"
+              clearable
+              readonly
+              @click="handleShowCron"
+            >
+            </el-input>
+          </el-form-item>
+          <!-- 开始日期和结束日期 -->
+          <el-form-item
+            v-if="formData.trigger && formData.trigger != 'date'"
+            label="开始日期"
+            :rules="[{ required: false, message: '请选择开始日期' }]"
+          >
+            <el-date-picker
+              v-model="formData.start_date"
+              type="datetime"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择开始日期"
+              style="width: 100%"
+            />
+          </el-form-item>
+          <el-form-item
+            v-if="formData.trigger && formData.trigger != 'date'"
+            label="结束日期"
+            :rules="[{ required: false, message: '请选择结束日期' }]"
+          >
+            <el-date-picker
+              v-model="formData.end_date"
+              type="datetime"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择结束日期"
+              style="width: 100%"
+            />
+          </el-form-item>
+
+          <el-form-item label="描述" prop="description">
+            <el-input
+              v-model="formData.description"
+              :rows="4"
+              :maxlength="100"
+              show-word-limit
+              type="textarea"
+              placeholder="请输入描述"
+            />
+          </el-form-item>
+        </el-form>
+      </template>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
+          <el-button
+            v-if="dialogVisible.type !== 'detail'"
+            type="primary"
+            @click="handleSubmit"
+            >确定</el-button
+          >
+          <el-button v-else type="primary" @click="handleCloseDialog"
+            >确定</el-button
+          >
+          <el-button @click="handleCloseDialog">取消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 时间间隔组件 -->
+    <el-dialog
+      v-model="openIntervalTab"
+      title="间隔时间设置"
+      :width="600"
+      :destroy-on-close="true"
+      @ok="handleIntervalConfirm"
+    >
+      <IntervalTab ref="intervalTabRef" />
+    </el-dialog>
+
+    <!-- core组件 -->
+    <el-dialog v-model="openCron">
+      <Vue3CronPlusPicker @hide="closeDialog" @fill="fillValue" :expression="expression" />
+    </el-dialog>
+  </div>
 </template>
 
 <script lang="ts" setup>
 defineOptions({
-    name: "Job",
-    inheritAttrs: false,
+  name: "Job",
+  inheritAttrs: false,
 });
 
 import JobAPI, { JobTable, JobForm, JobPageQuery } from "@/api/monitor/job";
@@ -326,288 +552,288 @@ const detailFormData = ref<JobTable>({});
 
 // 分页查询参数
 const queryFormData = reactive<JobPageQuery>({
-    page_no: 1,
-    page_size: 10,
-    name: undefined,
-    status: undefined,
-    start_time: undefined,
-    end_time: undefined,
+  page_no: 1,
+  page_size: 10,
+  name: undefined,
+  status: undefined,
+  start_time: undefined,
+  end_time: undefined,
 });
 
 // 编辑表单
 const formData = reactive<JobForm>({
-    id: undefined,
-    name: undefined,
-    func: undefined,
-    trigger: undefined,
-    args: undefined,
-    kwargs: undefined,
-    coalesce: undefined,
-    max_instances: undefined,
-    jobstore: undefined,
-    executor: undefined,
-    trigger_args: undefined,
-    start_date: undefined,
-    end_date: undefined,
-    status: undefined,
-    message: undefined,
-    description: undefined,
+  id: undefined,
+  name: undefined,
+  func: undefined,
+  trigger: undefined,
+  args: undefined,
+  kwargs: undefined,
+  coalesce: undefined,
+  max_instances: undefined,
+  jobstore: undefined,
+  executor: undefined,
+  trigger_args: undefined,
+  start_date: undefined,
+  end_date: undefined,
+  status: undefined,
+  message: undefined,
+  description: undefined,
 });
 
 // 弹窗状态
 const dialogVisible = reactive({
-    title: "",
-    visible: false,
-    type: "create" as "create" | "update" | "detail",
+  title: "",
+  visible: false,
+  type: "create" as "create" | "update" | "detail",
 });
 
 // 表单验证规则
 const rules = reactive({
-    name: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
-    func: [{ required: true, message: "请输入执行函数", trigger: "blur" }],
-    trigger: [{ required: true, message: "请选择触发器", trigger: "blur" }],
-    coalesce: [{ required: true, message: "请选择并发执行", trigger: "blur" }],
-    jobstore: [{ required: true, message: "请选择存储器", trigger: "blur" }],
-    executor: [{ required: true, message: "请选择执行器", trigger: "blur" }],
+  name: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
+  func: [{ required: true, message: "请输入执行函数", trigger: "blur" }],
+  trigger: [{ required: true, message: "请选择触发器", trigger: "blur" }],
+  coalesce: [{ required: true, message: "请选择并发执行", trigger: "blur" }],
+  jobstore: [{ required: true, message: "请选择存储器", trigger: "blur" }],
+  executor: [{ required: true, message: "请选择执行器", trigger: "blur" }],
 });
 
 // 刷新数据(防抖)
 const handleRefresh = useDebounceFn(() => {
-    loadingData();
-    ElMessage.success("刷新成功");
+  loadingData();
+  ElMessage.success("刷新成功");
 }, 1000);
 
 // 加载表格数据
 async function loadingData() {
-    loading.value = true;
-    try {
-        const response = await JobAPI.getJobList(queryFormData);
-        pageTableData.value = response.data.data.items;
-        total.value = response.data.data.total;
-    } catch (error: any) {
-        ElMessage.error(error.message);
-    } finally {
-        loading.value = false;
-    }
+  loading.value = true;
+  try {
+    const response = await JobAPI.getJobList(queryFormData);
+    pageTableData.value = response.data.data.items;
+    total.value = response.data.data.total;
+  } catch (error: any) {
+    ElMessage.error(error.message);
+  } finally {
+    loading.value = false;
+  }
 }
 
 // 查询（重置页码后获取数据）
 async function handleQuery() {
-    queryFormData.page_no = 1;
-    loadingData();
+  queryFormData.page_no = 1;
+  loadingData();
 }
 
 // 重置查询
 async function handleResetQuery() {
-    queryFormRef.value.resetFields();
-    queryFormData.page_no = 1;
-    loadingData();
+  queryFormRef.value.resetFields();
+  queryFormData.page_no = 1;
+  loadingData();
 }
 
 // 重置表单
 async function resetForm() {
-    dataFormRef.value.resetFields();
-    dataFormRef.value.clearValidate();
-    formData.id = undefined;
+  dataFormRef.value.resetFields();
+  dataFormRef.value.clearValidate();
+  formData.id = undefined;
 }
 
 // 行复选框选中项变化
 async function handleSelectionChange(selection: any) {
-    selectIds.value = selection.map((item: any) => item.id);
+  selectIds.value = selection.map((item: any) => item.id);
 }
 
 // 关闭弹窗
 async function handleCloseDialog() {
-    dialogVisible.visible = false;
-    resetForm();
+  dialogVisible.visible = false;
+  resetForm();
 }
 
 // 打开弹窗
 async function handleOpenDialog(
-    type: "create" | "update" | "detail",
-    id?: number,
+  type: "create" | "update" | "detail",
+  id?: number
 ) {
-    dialogVisible.type = type;
-    if (id) {
-        const response = await JobAPI.getJobDetail(id);
-        if (type === "detail") {
-            dialogVisible.title = "任务详情";
-            Object.assign(detailFormData.value, response.data.data);
-        } else if (type === "update") {
-            dialogVisible.title = "修改任务";
-            Object.assign(formData, response.data.data);
-        }
-    } else {
-        dialogVisible.title = "新增任务";
-        formData.id = undefined;
+  dialogVisible.type = type;
+  if (id) {
+    const response = await JobAPI.getJobDetail(id);
+    if (type === "detail") {
+      dialogVisible.title = "任务详情";
+      Object.assign(detailFormData.value, response.data.data);
+    } else if (type === "update") {
+      dialogVisible.title = "修改任务";
+      Object.assign(formData, response.data.data);
     }
-    dialogVisible.visible = true;
+  } else {
+    dialogVisible.title = "新增任务";
+    formData.id = undefined;
+  }
+  dialogVisible.visible = true;
 }
 
 // 提交表单（防抖）
 async function handleSubmit() {
-    // 表单校验
-    dataFormRef.value.validate(async (valid: any) => {
-        if (valid) {
-            loading.value = true;
-            // 根据弹窗传入的参数(deatil\create\update)判断走什么逻辑
-            const id = formData.id;
-            if (id) {
-                try {
-                    await JobAPI.updateJob(formData);
-                    dialogVisible.visible = false;
-                    resetForm();
-                    handleCloseDialog();
-                    handleResetQuery();
-                } catch (error: any) {
-                    ElMessage.error(error.message);
-                } finally {
-                    loading.value = false;
-                }
-            } else {
-                try {
-                    await JobAPI.createJob(formData);
-                    dialogVisible.visible = false;
-                    resetForm();
-                    handleCloseDialog();
-                    handleResetQuery();
-                } catch (error: any) {
-                    ElMessage.error(error.message);
-                } finally {
-                    loading.value = false;
-                }
-            }
+  // 表单校验
+  dataFormRef.value.validate(async (valid: any) => {
+    if (valid) {
+      loading.value = true;
+      // 根据弹窗传入的参数(deatil\create\update)判断走什么逻辑
+      const id = formData.id;
+      if (id) {
+        try {
+          await JobAPI.updateJob(formData);
+          dialogVisible.visible = false;
+          resetForm();
+          handleCloseDialog();
+          handleResetQuery();
+        } catch (error: any) {
+          ElMessage.error(error.message);
+        } finally {
+          loading.value = false;
         }
-    });
+      } else {
+        try {
+          await JobAPI.createJob(formData);
+          dialogVisible.visible = false;
+          resetForm();
+          handleCloseDialog();
+          handleResetQuery();
+        } catch (error: any) {
+          ElMessage.error(error.message);
+        } finally {
+          loading.value = false;
+        }
+      }
+    }
+  });
 }
 
 // 删除、批量删除
 async function handleDelete(ids: number[]) {
-    ElMessageBox.confirm("确认删除该项数据?", "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
+  ElMessageBox.confirm("确认删除该项数据?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        loading.value = true;
+        await JobAPI.deleteJob(ids);
+        handleResetQuery();
+      } catch (error: any) {
+        ElMessage.error(error.message);
+      } finally {
+        loading.value = false;
+      }
     })
-        .then(async () => {
-            try {
-                loading.value = true;
-                await JobAPI.deleteJob(ids);
-                handleResetQuery();
-            } catch (error: any) {
-                ElMessage.error(error.message);
-            } finally {
-                loading.value = false;
-            }
-        })
-        .catch(() => {
-            ElMessage.info("已取消删除");
-        });
+    .catch(() => {
+      ElMessage.info("已取消删除");
+    });
 }
 
 // 导出
 async function handleExport() {
-    ElMessageBox.confirm("是否确认导出当前任务配置?", "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-    })
-        .then(async () => {
-            try {
-                loading.value = true;
-                const body = {
-                    ...queryFormData,
-                    page_no: 1,
-                    page_size: total.value,
-                };
-                ElMessage.warning("正在导出数据，请稍候...");
+  ElMessageBox.confirm("是否确认导出当前任务配置?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        loading.value = true;
+        const body = {
+          ...queryFormData,
+          page_no: 1,
+          page_size: total.value,
+        };
+        ElMessage.warning("正在导出数据，请稍候...");
 
-                const response = await JobAPI.exportJob(body);
-                const blob = new Blob([JSON.stringify(response.data.data)], {
-                    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
-                });
-                // 从响应头获取文件名
-                const contentDisposition = response.headers["content-disposition"];
-                let fileName = "系统配置.xlsx";
-                if (contentDisposition) {
-                    const fileNameMatch = contentDisposition.match(/filename=(.*?)(;|$)/);
-                    if (fileNameMatch) {
-                        fileName = decodeURIComponent(fileNameMatch[1]);
-                    }
-                }
-                const url = window.URL.createObjectURL(blob);
-                const link = document.createElement("a");
-                link.href = url;
-                link.download = fileName;
-                document.body.appendChild(link);
-                link.click();
-            } catch (error: any) {
-                ElMessage.error("文件处理失败", error.message);
-                console.error("导出错误:", error);
-            } finally {
-                loading.value = false;
-            }
-        })
-        .catch(() => {
-            ElMessage.info("已取消导出");
+        const response = await JobAPI.exportJob(body);
+        const blob = new Blob([JSON.stringify(response.data.data)], {
+          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
         });
+        // 从响应头获取文件名
+        const contentDisposition = response.headers["content-disposition"];
+        let fileName = "系统配置.xlsx";
+        if (contentDisposition) {
+          const fileNameMatch = contentDisposition.match(/filename=(.*?)(;|$)/);
+          if (fileNameMatch) {
+            fileName = decodeURIComponent(fileNameMatch[1]);
+          }
+        }
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = fileName;
+        document.body.appendChild(link);
+        link.click();
+      } catch (error: any) {
+        ElMessage.error("文件处理失败", error.message);
+        console.error("导出错误:", error);
+      } finally {
+        loading.value = false;
+      }
+    })
+    .catch(() => {
+      ElMessage.info("已取消导出");
+    });
 }
 
 function openIntervalTabHandle(value: any) {
-    openIntervalTab.value = true;
-    modalTitle.value = value;
+  openIntervalTab.value = true;
+  modalTitle.value = value;
 }
 
 function handleIntervalConfirm() {
-    formData.trigger_args = intervalTabRef.value.handleConfirm();
-    openIntervalTab.value = false;
+  formData.trigger_args = intervalTabRef.value.handleConfirm();
+  openIntervalTab.value = false;
 }
 
 const handleShowCron = () => {
-    openCron.value = true;
-    expression.value = formData.trigger_args;
+  openCron.value = true;
+  expression.value = formData.trigger_args;
 };
 
 const closeDialog = () => {
-    openCron.value = false;
+  openCron.value = false;
 };
 
 const fillValue = (cronValue: string) => {
-    formData.trigger_args = cronValue;
+  formData.trigger_args = cronValue;
 };
 
 // 清空按钮操作
 const handleClear = () => {
-    ElMessageBox.confirm("是否确认清空所有定时任务数据?", "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
+  ElMessageBox.confirm("是否确认清空所有定时任务数据?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        loading.value = true;
+        await JobAPI.clearJob();
+        ElMessage.success("清空成功");
+        handleResetQuery();
+      } catch (error: any) {
+        ElMessage.error(error.message);
+      } finally {
+        loading.value = false;
+      }
     })
-        .then(async () => {
-            try {
-                loading.value = true;
-                await JobAPI.clearJob();
-                ElMessage.success("清空成功");
-                handleResetQuery();
-            } catch (error: any) {
-                ElMessage.error(error.message);
-            } finally {
-                loading.value = false;
-            }
-        })
-        .catch(() => {
-            ElMessage.info("已取消清空");
-        });
+    .catch(() => {
+      ElMessage.info("已取消清空");
+    });
 };
 
 // 操作按钮:操作类型 1: 暂停 2: 恢复 3: 重启（暂时移除重启）
 const handleOption = (id: number, option: number) => {
-    JobAPI.OptionJob({ id, option }).then(() => {
-        loadingData();
-    });
+  JobAPI.OptionJob({ id, option }).then(() => {
+    loadingData();
+  });
 };
 
 onMounted(() => {
-    loadingData();
+  loadingData();
 });
 </script>
 
diff --git a/frontend/src/views/system/config/index.vue b/frontend/src/views/system/config/index.vue
index 8e7928a5..809bcdd9 100644
--- a/frontend/src/views/system/config/index.vue
+++ b/frontend/src/views/system/config/index.vue
@@ -88,7 +88,11 @@
           <el-empty :image-size="80" description="暂无数据" />
         </template>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'selection')?.show" type="selection" min-width="55" align="center" />
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" type="index" fixed label="序号" min-width="60" />
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" type="index" fixed label="序号" min-width="60">
+          <template #default="scope">
+            {{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
+          </template>
+        </el-table-column>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'config_name')?.show" key="config_name" label="配置名称" prop="config_name" min-width="100" />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'config_key')?.show" key="config_key" label="配置键" prop="config_key" min-width="200" />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'config_value')?.show" key="config_value" label="配置值" prop="config_value" min-width="120" show-overflow-tooltip />
diff --git a/frontend/src/views/system/dept/index.vue b/frontend/src/views/system/dept/index.vue
index 7772b2ed..0a6eb2c1 100644
--- a/frontend/src/views/system/dept/index.vue
+++ b/frontend/src/views/system/dept/index.vue
@@ -181,7 +181,7 @@ defineOptions({
 
 import DeptAPI, { DeptTable, DeptForm, DeptPageQuery } from "@/api/system/dept";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { listToTree, formatDeptTree } from "@/utils/common";
+import { listToTree, formatTree } from "@/utils/common";
 
 const queryFormRef = ref();
 const dataFormRef = ref();
@@ -246,13 +246,8 @@ const rules = reactive({
   status: [{ required: true, message: "请选择状态", trigger: "blur" }],
 });
 
-// 刷新数据(防抖)
-const handleRefresh = () => {
-  refreshTable();
-};
-
-// 刷新列表数据
-async function refreshTable() {
+// 列表刷新
+async function handleRefresh () {
   loading.value = true;
   try {
     const response = await DeptAPI.getDeptList(queryFormData);
@@ -264,7 +259,7 @@ async function refreshTable() {
   } finally {
     loading.value = false;
   }
-}
+};
 
 // 加载表格数据
 async function loadingData() {
@@ -275,7 +270,7 @@ async function loadingData() {
     pageTableData.value = treeData;
     total.value = response.data.data.total;
     // 加载部门选项
-    deptOptions.value = formatDeptTree(treeData);
+    deptOptions.value = formatTree(treeData);
   }
   catch (error: any) {
     ElMessage.error(error.message);
diff --git a/frontend/src/views/system/dict/components/DataDrawer.vue b/frontend/src/views/system/dict/components/DataDrawer.vue
index 14fca18d..ffdf6dc3 100644
--- a/frontend/src/views/system/dict/components/DataDrawer.vue
+++ b/frontend/src/views/system/dict/components/DataDrawer.vue
@@ -1,6 +1,6 @@
 <!-- 字典数据 -->
 <template>
-  <el-drawer v-model="drawerVisible" :title="`${props.dictLabel}-字典数据`" size="70%">
+  <el-drawer v-model="drawerVisible" :title="'【' + props.dictLabel + '】字典数据'" :size="drawerSize">
     <!-- 搜索区域 -->
     <div class="search-container">
       <el-form ref="queryFormRef" :model="queryFormData" :inline="true">
@@ -96,7 +96,11 @@
           <el-empty :image-size="80" description="暂无数据" />
         </template>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'selection')?.show" type="selection" min-width="55" align="center" />
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" type="index" fixed label="序号" min-width="60" />
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" type="index" fixed label="序号" min-width="60">
+          <template #default="scope">
+            {{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
+          </template>
+        </el-table-column>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'dict_label')?.show" key="dict_label" label="标签" prop="dict_label" min-width="100" show-overflow-tooltip />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'status')?.show" key="status" label="状态" prop="status" min-width="100" show-overflow-tooltip>
           <template #default="scope">
@@ -242,6 +246,11 @@ import DictAPI, { DictDataTable, DictDataForm, DictDataPageQuery } from "@/api/s
 import { ElMessage, ElMessageBox } from "element-plus";
 import { useDebounceFn } from "@vueuse/core";
 import { Check, Close } from '@element-plus/icons-vue'
+import { useAppStore } from "@/store/modules/app.store";
+import { DeviceEnum } from "@/enums/settings/device.enum";
+
+const appStore = useAppStore();
+const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "80%" : "60%"));
 
 const queryFormRef = ref();
 const dataFormRef = ref();
diff --git a/frontend/src/views/system/dict/index.vue b/frontend/src/views/system/dict/index.vue
index 8869b793..c6aef4e1 100644
--- a/frontend/src/views/system/dict/index.vue
+++ b/frontend/src/views/system/dict/index.vue
@@ -100,7 +100,11 @@
           <el-empty :image-size="80" description="暂无数据" />
         </template>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'selection')?.show" type="selection" min-width="55" align="center" />
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" type="index" fixed label="序号" min-width="60" />
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" type="index" fixed label="序号" min-width="60">
+          <template #default="scope">
+            {{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
+          </template>
+        </el-table-column>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'dict_name')?.show" key="dict_name" label="字典名称" prop="dict_name" min-width="120" />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'dict_type')?.show" key="dict_type" label="字典类型" prop="dict_type" min-width="160" />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'status')?.show" key="status" label="状态" prop="status" min-width="80">
diff --git a/frontend/src/views/system/log/index.vue b/frontend/src/views/system/log/index.vue
index e48e8a12..c38c1850 100644
--- a/frontend/src/views/system/log/index.vue
+++ b/frontend/src/views/system/log/index.vue
@@ -10,6 +10,12 @@
         <el-form-item prop="creator_name" label="创建人">
           <el-input v-model="queryFormData.creator_name" placeholder="请输入创建人" clearable />
         </el-form-item>
+        <el-form-item prop="type" label="日志类型">
+          <el-select v-model="queryFormData.type" placeholder="请选择日志类型" style="width: 167.5px" clearable>
+            <el-option label="登录日志" value=1 />
+            <el-option label="操作日志" value=2 />
+          </el-select>
+        </el-form-item>
         <!-- 时间范围，收起状态下隐藏 -->
         <el-form-item v-if="isExpand" prop="start_time" label="创建时间">
           <el-date-picker v-model="queryFormData.start_time" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
@@ -82,7 +88,18 @@
           <el-empty :image-size="80" description="暂无数据" />
         </template>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'selection')?.show" prop='selection' type="selection" min-width="55" align="center" />
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" type="index" fixed label="序号" min-width="60" />
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" type="index" fixed label="序号" min-width="60" >
+          <template #default="scope">
+            {{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'type')?.show" label="日志类型" prop="type" min-width="100">
+          <template #default="scope">
+            <el-tag :type="scope.row.type === 1 ? 'success' : 'primary'">
+              {{ scope.row.type === 1 ? '登录日志' : '操作日志' }}
+            </el-tag>
+          </template>
+        </el-table-column>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'request_path')?.show" label="请求路径" prop="request_path" min-width="200" show-overflow-tooltip />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'request_method')?.show" label="请求方法" prop="request_method" min-width="100">
           <template #default="scope">
@@ -133,6 +150,11 @@
       <!-- 详情 -->
       <template v-if="dialogVisible.type === 'detail'">
         <el-descriptions :column="4" border>
+          <el-descriptions-item label="日志类型" :span="2">
+            <el-tag :type="detailFormData.type === 1 ? 'success' : 'primary'">
+              {{ detailFormData.type === 1 ? '登录日志' : '操作日志' }}
+            </el-tag>
+          </el-descriptions-item>
           <el-descriptions-item label="请求路径" :span="2">{{ detailFormData.request_path }}</el-descriptions-item>
           <el-descriptions-item label="请求方法" :span="2">
             <el-tag :type="getMethodType(detailFormData.request_method)">
@@ -145,15 +167,15 @@
             </el-tag>
           </el-descriptions-item>
           <el-descriptions-item label="请求IP" :span="2">{{ detailFormData.request_ip }}</el-descriptions-item>
+          <el-descriptions-item label="处理时间" :span="2">{{ detailFormData.process_time }}</el-descriptions-item>
+          <el-descriptions-item label="浏览器" :span="2">{{ detailFormData.request_browser }}</el-descriptions-item>
+          <el-descriptions-item label="操作系统" :span="2">{{ detailFormData.request_os }}</el-descriptions-item>
           <el-descriptions-item label="请求参数" :span="4">
             <el-input v-model="detailFormData.request_payload" type="textarea" :rows="3" readonly class="long-text-editor" />
           </el-descriptions-item>
           <el-descriptions-item label="响应数据" :span="4">
             <el-input v-model="detailFormData.response_json" type="textarea" :rows="5" readonly class="long-text-editor" />
           </el-descriptions-item>
-          <el-descriptions-item label="处理时间" :span="2">{{ detailFormData.process_time }}</el-descriptions-item>
-          <el-descriptions-item label="浏览器" :span="2">{{ detailFormData.request_browser }}</el-descriptions-item>
-          <el-descriptions-item label="操作系统" :span="2">{{ detailFormData.request_os }}</el-descriptions-item>
           <el-descriptions-item label="登录地点" :span="2">{{ detailFormData.login_location }}</el-descriptions-item>
           <el-descriptions-item label="创建人" :span="2">{{ detailFormData.creator?.name }}</el-descriptions-item>
           <el-descriptions-item label="创建时间" :span="2">{{ detailFormData.created_at }}</el-descriptions-item>
@@ -199,6 +221,7 @@ const pageTableData = ref<LogTable[]>([]);
 const tableColumns = ref([
   { prop: 'selection', label: '选择框', show: true },
   { prop: 'index', label: '序号', show: true },
+  { prop: 'type', label: '日志类型', show: true },
   { prop: 'request_path', label: '请求路径', show: true },
   { prop: 'request_method', label: '请求方法', show: true },
   { prop: 'response_code', label: '响应状态码', show: true },
@@ -221,6 +244,7 @@ const detailFormData = ref<LogTable>({});
 const queryFormData = reactive<LogPageQuery>({
   page_no: 1,
   page_size: 10,
+  type: undefined,
   request_path: undefined,
   creator_name: undefined,
   start_time: undefined,
diff --git a/frontend/src/views/system/menu/index.vue b/frontend/src/views/system/menu/index.vue
index ebe4edb0..bc7af0fb 100644
--- a/frontend/src/views/system/menu/index.vue
+++ b/frontend/src/views/system/menu/index.vue
@@ -4,8 +4,8 @@
     <!-- 搜索区域 -->
     <div class="search-container">
       <el-form ref="queryFormRef" :model="queryFormData" :inline="true">
-        <el-form-item prop="notice_title" label="标题">
-          <el-input v-model="queryFormData.name" placeholder="请输入标题" clearable />
+        <el-form-item prop="name" label="菜单名称">
+          <el-input v-model="queryFormData.name" placeholder="请输入菜单名称" clearable />
         </el-form-item>
         <el-form-item prop="status" label="状态">
           <el-select v-model="queryFormData.status" placeholder="请选择状态" style="width: 167.5px" clearable>
@@ -69,23 +69,19 @@
         </div>
         <div class="data-table__toolbar--tools">
           <el-tooltip content="刷新">
-            <el-button type="default" icon="refresh" circle @click="handleRefresh" />
+            <el-button type="primary" icon="refresh" circle @click="handleRefresh" />
           </el-tooltip>
         </div>
       </div>
 
       <!-- 表格区域 -->
-      <el-table ref="dataTableRef" v-loading="loading" row-key="id" :data="pageTableData" :tree-props="{children: 'children',hasChildren: 'hasChildren'}" class="data-table__content" height="450" border stripe @selection-change="handleSelectionChange" @row-click="handleRowClick">
+      <el-table ref="dataTableRef" v-loading="loading" row-key="id" :data="pageTableData" :tree-props="{children: 'children',hasChildren: 'hasChildren'}" class="data-table__content" height="540" border stripe @selection-change="handleSelectionChange" @row-click="handleRowClick">
         <template #empty>
           <el-empty :image-size="80" description="暂无数据" />
         </template>
         <el-table-column type="selection" min-width="55" align="center" />
         <el-table-column type="index" fixed label="序号" min-width="60" />
-        <el-table-column label="菜单名称" prop="name" min-width="120">
-          <template #default="scope">
-            {{ scope.row.name }}
-          </template>
-        </el-table-column>
+        <el-table-column label="菜单名称" prop="name" min-width="240" />
         <el-table-column label="图标" prop="icon" min-width="80" align="center">
           <template #default="scope">
             <template v-if="scope.row.icon && scope.row.icon.startsWith('el-icon')">
@@ -114,23 +110,26 @@
           </template>
         </el-table-column>
         <el-table-column label="排序" prop="order" min-width="80" />
-        <el-table-column label="重定向" prop="redirect" min-width="100" />
+        <el-table-column label="重定向" prop="redirect" min-width="200" />
         <el-table-column label="是否缓存" prop="keep_alive" min-width="100">
           <template #default="scope">
-            <el-tag v-if="scope.row.keep_alive" type="success">是</el-tag>
-            <el-tag v-else type="danger">否</el-tag>
+            <el-tag :type="scope.row.keep_alive ? 'success' : 'danger'">
+              {{ scope.row.keep_alive ? '是' : '否' }}
+            </el-tag>
           </template>
         </el-table-column>
         <el-table-column label="是否隐藏" prop="hidden" min-width="100">
           <template #default="scope">
-            <el-tag v-if="scope.row.hidden" type="success">是</el-tag>
-            <el-tag v-else type="danger">否</el-tag>
+            <el-tag :type="scope.row.hidden ? 'success' : 'danger'">
+              {{ scope.row.hidden ? '是' : '否' }}
+            </el-tag>
           </template>
         </el-table-column>
         <el-table-column label="显示根路由" prop="always_show" min-width="120">
           <template #default="scope">
-            <el-tag v-if="scope.row.always_show" type="success">是</el-tag>
-            <el-tag v-else type="danger">否</el-tag>
+            <el-tag :type="scope.row.always_show ? 'success' : 'danger'">
+              {{ scope.row.always_show ? '是' : '否' }}
+            </el-tag>
           </template>
         </el-table-column>
         <el-table-column label="固定路由" prop="affix" min-width="100">
@@ -140,30 +139,26 @@
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="菜单标题" prop="title" min-width="100"/>
-        <el-table-column label="权限标识" prop="permission" min-width="100"  />
-        <el-table-column label="路由名称" prop="router_name" min-width="100" />
-        <el-table-column label="路由路径" prop="router_name" min-width="100" />
-        <el-table-column label="组件路径" prop="component_path" min-width="100"  />
+        <el-table-column label="菜单标题" prop="title" min-width="200"/>
+        <el-table-column label="权限标识" prop="permission" min-width="220"  />
+        <el-table-column label="路由名称" prop="route_name" min-width="200" />
+        <el-table-column label="路由路径" prop="route_path" min-width="200" />
+        <el-table-column label="组件路径" prop="component_path" min-width="200"  />
         <el-table-column label="路由参数" prop="params" min-width="100" />
-        <el-table-column label="描述" prop="description" min-width="100" />
+        <el-table-column label="描述" prop="description" min-width="200" />
         <el-table-column label="创建时间" prop="created_at" min-width="200" sortable />
         <el-table-column label="更新时间" prop="updated_at" min-width="200" sortable />
 
         <el-table-column fixed="right" label="操作" align="center" min-width="260">
           <template #default="scope">
-            <el-button v-if="scope.row.type == MenuTypeEnum.CATALOG || scope.row.type == MenuTypeEnum.MENU" type="success" link size="small" icon="plus" @click.stop="handleOpenDialog(scope.row.id)">新增</el-button>
-            <el-button type="info" size="small" link icon="document" @click.stop="handleOpenDialog('detail', scope.row.id)">详情</el-button>
-            <el-button type="primary" size="small" link icon="edit" @click.stop="handleOpenDialog('update', scope.row.id)">编辑</el-button>
-            <el-button type="danger" size="small" link icon="delete" @click.stop="handleDelete([scope.row.id])">删除</el-button>
+            <el-button v-if="scope.row.type == MenuTypeEnum.CATALOG || scope.row.type == MenuTypeEnum.MENU" type="success" link size="small" icon="plus" @click.stop="handleOpenDialog('create', undefined, scope.row.id)">新增</el-button>
+            <el-button type="info" size="small" link icon="document" @click="handleOpenDialog('detail', scope.row.id)">详情</el-button>
+            <el-button type="primary" size="small" link icon="edit" @click="handleOpenDialog('update', scope.row.id)">编辑</el-button>
+            <el-button type="danger" size="small" link icon="delete" @click="handleDelete([scope.row.id])">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <!-- 分页区域 -->
-      <template #footer>
-        <pagination v-if="total > 0" v-model:total="total" v-model:page="queryFormData.page_no" v-model:limit="queryFormData.page_size" @pagination="loadingData" />
-      </template>
     </el-card>
 
     <!-- 弹窗区域 -->
@@ -179,7 +174,18 @@
             <el-tag v-if="detailFormData.type === MenuTypeEnum.BUTTON" type="danger">按钮</el-tag>
             <el-tag v-if="detailFormData.type === MenuTypeEnum.EXTLINK" type="info">外链</el-tag>
           </el-descriptions-item>
-          <el-descriptions-item label="图标" :span="2">{{ detailFormData.icon }}</el-descriptions-item>
+          <el-descriptions-item label="图标" :span="2">
+            <template #default="scope">
+              <template v-if=" detailFormData.icon &&  detailFormData.icon.startsWith('el-icon')">
+                <el-icon style="vertical-align: -0.15em">
+                  <component :is="detailFormData.icon.replace('el-icon-', '')" />
+                </el-icon>
+              </template>
+              <template v-else-if=" detailFormData.icon">
+                <div :class="`i-svg:${detailFormData.icon}`" />
+              </template>
+            </template>
+          </el-descriptions-item>
           <el-descriptions-item label="排序" :span="2">{{ detailFormData.order }}</el-descriptions-item>
           <el-descriptions-item label="权限标识" :span="2">{{ detailFormData.permission }}</el-descriptions-item>
           <el-descriptions-item label="路由名称" :span="2">{{ detailFormData.route_name }}</el-descriptions-item>
@@ -216,9 +222,9 @@
             </el-tag>
           </el-descriptions-item>
           <el-descriptions-item label="排序" :span="2">{{ detailFormData.order }}</el-descriptions-item>
-          <el-descriptions-item label="描述" :span="2">{{ detailFormData.description }}</el-descriptions-item>
           <el-descriptions-item label="创建时间" :span="2">{{ detailFormData.created_at }}</el-descriptions-item>
           <el-descriptions-item label="更新时间" :span="2">{{ detailFormData.updated_at }}</el-descriptions-item>
+          <el-descriptions-item label="描述" :span="4">{{ detailFormData.description }}</el-descriptions-item>
         </el-descriptions>
       </template>
 
@@ -260,7 +266,7 @@
                 </el-tooltip>
               </div>
             </template>
-            <el-input v-model="formData.route_name" placeholder="User" />
+            <el-input v-model="formData.route_name" placeholder="请输入路由名称" />
           </el-form-item>
 
           <el-form-item v-if="formData.type == MenuTypeEnum.CATALOG || formData.type == MenuTypeEnum.MENU" prop="routePath">
@@ -279,7 +285,7 @@
               </div>
             </template>
             <el-input v-if="formData.type == MenuTypeEnum.CATALOG" v-model="formData.route_path" placeholder="system" />
-            <el-input v-else v-model="formData.route_path" placeholder="user" />
+            <el-input v-else v-model="formData.route_path" placeholder="请输入路由路径" />
           </el-form-item>
 
           <el-form-item v-if="formData.type == MenuTypeEnum.MENU" prop="component">
@@ -297,7 +303,7 @@
               </div>
             </template>
 
-            <el-input v-model="formData.component_path" placeholder="system/user/index" style="width: 95%">
+            <el-input v-model="formData.component_path" placeholder="请输入组件路径，如system/user/index" style="width: 95%">
               <template v-if="formData.type == MenuTypeEnum.MENU" #prepend>src/views/</template>
               <template v-if="formData.type == MenuTypeEnum.MENU" #append>.vue</template>
             </el-input>
@@ -318,7 +324,7 @@
               </div>
             </template>
 
-            <div v-if="!formData.params || formData.params.length === 0">
+            <div v-if="!formData.params || (Array.isArray(formData.params) && formData.params.length === 0)">
               <el-button type="success" plain @click="formData.params = [{ key: '', value: '' }]">
                 添加路由参数
               </el-button>
@@ -342,10 +348,27 @@
             </div>
           </el-form-item>
 
-          <el-form-item v-if="formData.type !== MenuTypeEnum.BUTTON" prop="hidden" label="显示状态">
+          <el-form-item v-if="formData.type !== MenuTypeEnum.BUTTON">
+            <template #label>
+              <div class="flex-y-center">
+                是否隐藏
+                <el-tooltip placement="bottom" effect="light">
+                  <template #content>
+                    选择"是", 菜单中隐藏
+                    <br />
+                    选择"否"，菜单中显示。
+                    <br />
+                  </template>
+                  <el-icon class="ml-1 cursor-pointer">
+                    <QuestionFilled />
+                  </el-icon>
+                </el-tooltip>
+              </div>
+            </template>
+
             <el-radio-group v-model="formData.hidden">
-              <el-radio :value="true">显示</el-radio>
-              <el-radio :value="false">隐藏</el-radio>
+              <el-radio :value="true">是</el-radio>
+              <el-radio :value="false">否</el-radio>
             </el-radio-group>
           </el-form-item>
 
@@ -382,12 +405,12 @@
           </el-form-item>
 
           <el-form-item label="排序" prop="order">
-            <el-input-number v-model="formData.order" style="width: 100px" controls-position="right" :min="0" />
+            <el-input-number v-model="formData.order"  controls-position="right" :min="1" />
           </el-form-item>
 
           <!-- 权限标识 -->
-          <el-form-item v-if="formData.type == MenuTypeEnum.BUTTON" label="权限标识" prop="perm">
-            <el-input v-model="formData.permission" placeholder="sys:user:add" />
+          <el-form-item v-if="formData.type == MenuTypeEnum.BUTTON || formData.type === MenuTypeEnum.MENU" label="权限标识" prop="perm">
+            <el-input v-model="formData.permission" placeholder="请输入权限标识，如sys:user:add" />
           </el-form-item>
 
           <el-form-item v-if="formData.type !== MenuTypeEnum.BUTTON" label="图标" prop="icon">
@@ -395,8 +418,26 @@
             <icon-select v-model="formData.icon" />
           </el-form-item>
 
-          <el-form-item v-if="formData.type == MenuTypeEnum.CATALOG" label="跳转路由">
-            <el-input v-model="formData.redirect" placeholder="跳转路由" />
+          <el-form-item v-if="formData.type == MenuTypeEnum.CATALOG || formData.type === MenuTypeEnum.MENU" label="重定向" prop="redirect">
+            <el-input v-model="formData.redirect" placeholder="请输入重定向路由" />
+          </el-form-item>
+
+          <el-form-item v-if="formData.type != MenuTypeEnum.BUTTON" label="常驻标签栏" prop="affix">
+            <el-radio-group v-model="formData.affix">
+              <el-radio :value="true">是</el-radio>
+              <el-radio :value="false">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="formData.status">
+              <el-radio :value="true">启用</el-radio>
+              <el-radio :value="false">禁用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label="描述" prop="description">
+            <el-input v-model="formData.description" :rows="4" :maxlength="100" show-word-limit type="textarea" placeholder="请输入描述" />
           </el-form-item>
         </el-form>
       </template>
@@ -424,7 +465,7 @@ import { DeviceEnum } from "@/enums/settings/device.enum";
 
 import MenuAPI, { MenuPageQuery, MenuForm, MenuTable } from "@/api/system/menu";
 import { MenuTypeEnum } from "@/enums/system/menu.enum";
-import { listToTree } from "@/utils/common";
+import { formatTree, listToTree } from "@/utils/common";
 
 const appStore = useAppStore();
 
@@ -459,18 +500,18 @@ const formData = reactive<MenuForm>({
   name: undefined,
   type: MenuTypeEnum.MENU,
   icon: undefined,
-  order: undefined,
+  order: 1,
   permission: '',
   route_name: '',
   route_path: '',
   component_path: '',
   redirect: '',
   parent_id: undefined,
-  keep_alive: undefined,
-  hidden: undefined,
-  always_show: undefined,
+  keep_alive: false,
+  hidden: false,
+  always_show: false,
   title: '',
-  params: '',
+  params: [] as { key: string; value: string }[],
   affix: false,
   status: true,
   description: undefined,
@@ -508,19 +549,41 @@ const rules = reactive({
 // 选择表格的行菜单ID
 const selectedMenuId = ref<number | undefined>();
 
-// 刷新数据(防抖)
-const handleRefresh = useDebounceFn(() => {
-  loadingData();
-  ElMessage.success("刷新成功");
-}, 1000);
+// 列表刷新
+async function handleRefresh () {
+  loading.value = true;
+  try {
+    const response = await MenuAPI.getMenuList(queryFormData);
+    const treeData = listToTree(response.data.data.items);
+    pageTableData.value = treeData;
+    total.value = response.data.data.total;
+  } catch (error: any) {
+    ElMessage.error(error.message);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 修改菜单选项过滤逻辑，添加递归过滤函数
+const filterMenuTypes = (nodes: MenuTable[]) => {
+  return nodes
+    .filter(node => node.type === MenuTypeEnum.CATALOG || node.type === MenuTypeEnum.MENU)
+    .map((node: any): any => ({
+      ...node,
+      children: node.children ? filterMenuTypes(node.children) : []
+    }));
+};
 
 // 加载表格数据
 async function loadingData() {
   loading.value = true;
   try {
     const response = await MenuAPI.getMenuList(queryFormData);
-    pageTableData.value = listToTree(response.data.data.items);
+    const treeData = listToTree(response.data.data.items);
+    pageTableData.value = treeData;
     total.value = response.data.data.total;
+    // 加载部门选项，只显示目录、菜单
+    menuOptions.value = formatTree(filterMenuTypes(treeData));
   }
   catch (error: any) {
     ElMessage.error(error.message);
@@ -566,10 +629,10 @@ async function handleCloseDialog() {
 }
 
 //打开弹窗
-async function handleOpenDialog(type: 'create' | 'update' | 'detail', id?: number) {
+async function handleOpenDialog(type: 'create' | 'update' | 'detail', id?: number, parentId?: number) {
   dialogVisible.type = type;
   if (id) {
-    const response = await MenuAPI.getMenuDetail({ id });
+    const response = await MenuAPI.getMenuDetail(id);
     if (type === 'detail') {
       dialogVisible.title = "菜单详情";
       Object.assign(detailFormData.value, response.data.data);
@@ -580,6 +643,10 @@ async function handleOpenDialog(type: 'create' | 'update' | 'detail', id?: numbe
   } else {
     dialogVisible.title = "新增菜单";
     formData.id = undefined;
+    // 设置父级部门
+    if (parentId) {
+      formData.parent_id = parentId;
+    }
   }
   dialogVisible.visible = true;
 }
@@ -632,48 +699,44 @@ async function handleSubmit() {
 
 // 删除、批量删除
 async function handleDelete(ids: number[]) {
-  if (!ids && !selectIds.value.length) {
-    ElMessageBox.confirm("确认删除该项数据?", "警告", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    }).then(async () => {
-      try {
-        loading.value = true;
-        await DictAPI.deleteDictType({ ids });
-        handleResetQuery();
-      } catch (error: any) {
-        ElMessage.error(error.message);
-      } finally {
-        loading.value = false;
-      }
-    }).catch(() => {
-      ElMessage.info('已取消删除');
-    });
-  }
+  ElMessageBox.confirm("确认删除该项数据?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(async () => {
+    try {
+      loading.value = true;
+      await MenuAPI.deleteMenu(ids);
+      handleResetQuery();
+    } catch (error: any) {
+      ElMessage.error(error.message);
+    } finally {
+      loading.value = false;
+    }
+  }).catch(() => {
+    ElMessage.info('已取消删除');
+  });
 }
 
 // 批量启用/停用
 async function handleMoreClick(status: boolean) {
-  if (selectIds.value.length) {
-    ElMessageBox.confirm(`确认${status ? '启用' : '停用'}该项数据?`, "警告", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    }).then(async () => {
-      try {
-        loading.value = true;
-        await MenuAPI.batchAvailableMenu({ ids: selectIds.value, status });
-        handleResetQuery();
-      } catch (error: any) {
-        ElMessage.error(error.message);
-      } finally {
-        loading.value = false;
-      }
-    }).catch(() => {
-      ElMessage.info('已取消批量操作');
-    });
-  }
+  ElMessageBox.confirm(`确认${status ? '启用' : '停用'}该项数据?`, "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(async () => {
+    try {
+      loading.value = true;
+      await MenuAPI.batchAvailableMenu({ ids: selectIds.value, status });
+      handleResetQuery();
+    } catch (error: any) {
+      ElMessage.error(error.message);
+    } finally {
+      loading.value = false;
+    }
+  }).catch(() => {
+    ElMessage.info('已取消批量操作');
+  });
 }
 
 onMounted(() => {
diff --git a/frontend/src/views/system/notice/index.vue b/frontend/src/views/system/notice/index.vue
index e7a4ba88..ae3b49af 100644
--- a/frontend/src/views/system/notice/index.vue
+++ b/frontend/src/views/system/notice/index.vue
@@ -107,7 +107,11 @@
           <el-empty :image-size="80" description="暂无数据" />
         </template>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'selection')?.show" type="selection" min-width="55" align="center" />
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" type="index" fixed label="序号" min-width="60" />
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" fixed label="序号" min-width="60" >
+          <template #default="scope">
+            {{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
+          </template>
+        </el-table-column>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'notice_title')?.show" label="通知标题" prop="notice_title" min-width="140" />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'status')?.show" label="状态" prop="status" min-width="80">
           <template #default="scope">
@@ -230,81 +234,6 @@
       </template>
     </el-dialog>
 
-    <!-- 导出弹窗 -->
-    <el-dialog v-model="exportsModalVisible" :align-center="true" title="导出数据" width="600px" style="padding-right: 0" @close="handleCloseExportsModal">
-      <!-- 滚动 -->
-      <el-scrollbar max-height="60vh">
-        <!-- 表单 -->
-        <el-form ref="exportsFormRef" style="padding-right: var(--el-dialog-padding-primary)" :model="exportsFormData" :rules="exportsFormRules">
-          <el-form-item label="文件名" prop="filename">
-            <el-input v-model="exportsFormData.filename" clearable />
-          </el-form-item>
-          <el-form-item label="工作表名" prop="sheetname">
-            <el-input v-model="exportsFormData.sheetname" clearable />
-          </el-form-item>
-          <el-form-item label="数据源" prop="origin">
-            <el-select v-model="exportsFormData.origin">
-              <el-option label="当前数据 (当前页的数据)" :value="ExportsOriginEnum.CURRENT" />
-              <el-option label="选中数据 (所有选中的数据)" :value="ExportsOriginEnum.SELECTED" :disabled="selectionData.length <= 0" />
-              <el-option label="全量数据 (所有分页的数据)" :value="ExportsOriginEnum.REMOTE" :disabled="contentConfig.exportsAction === undefined" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="字段" prop="fields">
-            <el-checkbox-group v-model="exportsFormData.fields">
-              <template v-for="col in cols" :key="col.prop">
-                <el-checkbox v-if="col.prop" :value="col.prop" :label="col.label" />
-              </template>
-            </el-checkbox-group>
-          </el-form-item>
-        </el-form>
-      </el-scrollbar>
-      <!-- 弹窗底部操作按钮 -->
-      <template #footer>
-        <div style="padding-right: var(--el-dialog-padding-primary)">
-          <el-button type="primary" @click="handleExportsSubmit">确 定</el-button>
-          <el-button @click="handleCloseExportsModal">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-    <!-- 导入弹窗 -->
-    <el-dialog v-model="importModalVisible" :align-center="true" title="导入数据" width="600px" style="padding-right: 0" @close="handleCloseImportModal">
-      <!-- 滚动 -->
-      <el-scrollbar max-height="60vh">
-        <!-- 表单 -->
-        <el-form ref="importFormRef" style="padding-right: var(--el-dialog-padding-primary)" :model="importFormData"
-          :rules="importFormRules">
-          <el-form-item label="文件名" prop="files">
-            <el-upload ref="uploadRef" v-model:file-list="importFormData.files" class="w-full"
-              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
-              :drag="true" :limit="1" :auto-upload="false" :on-exceed="handleFileExceed">
-              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-              <div class="el-upload__text">
-                <span>将文件拖到此处，或</span>
-                <em>点击上传</em>
-              </div>
-              <template #tip>
-                <div class="el-upload__tip">
-                  *.xlsx / *.xls
-                  <el-link v-if="contentConfig.importTemplate" type="primary" icon="download" underline="never"
-                    @click="handleDownloadTemplate">
-                    下载模板
-                  </el-link>
-                </div>
-              </template>
-            </el-upload>
-          </el-form-item>
-        </el-form>
-      </el-scrollbar>
-      <!-- 弹窗底部操作按钮 -->
-      <template #footer>
-        <div style="padding-right: var(--el-dialog-padding-primary)">
-          <el-button type="primary" :disabled="importFormData.files.length === 0" @click="handleImportSubmit">
-            确 定
-          </el-button>
-          <el-button @click="handleCloseImportModal">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
   </div>
 </template>
 
@@ -580,129 +509,6 @@ async function handleMoreClick(status: boolean) {
   }
 }
 
-
-// // 导出
-// function handleExport() {
-//   const filename = exportsFormData.filename
-//     ? exportsFormData.filename
-//     : props.contentConfig.permPrefix || "export";
-//   const sheetname = exportsFormData.sheetname ? exportsFormData.sheetname : "sheet";
-//   const workbook = new ExcelJS.Workbook();
-//   const worksheet = workbook.addWorksheet(sheetname);
-//   const columns: Partial<ExcelJS.Column>[] = [];
-//   cols.value.forEach((col) => {
-//     if (col.label && col.prop && exportsFormData.fields.includes(col.prop)) {
-//       columns.push({ header: col.label, key: col.prop });
-//     }
-//   });
-//   worksheet.columns = columns;
-//   if (exportsFormData.origin === ExportsOriginEnum.REMOTE) {
-//     if (props.contentConfig.exportsAction) {
-//       props.contentConfig.exportsAction(lastFormData).then((res) => {
-//         worksheet.addRows(res);
-//         workbook.xlsx
-//           .writeBuffer()
-//           .then((buffer) => {
-//             saveXlsx(buffer, filename as string);
-//           })
-//           .catch((error) => console.log(error));
-//       });
-//     } else {
-//       ElMessage.error("未配置exportsAction");
-//     }
-//   } else {
-//     worksheet.addRows(
-//       exportsFormData.origin === ExportsOriginEnum.SELECTED ? selectionData.value : pageData.value
-//     );
-//     workbook.xlsx
-//       .writeBuffer()
-//       .then((buffer) => {
-//         saveXlsx(buffer, filename as string);
-//       })
-//       .catch((error) => console.log(error));
-//   }
-// }
-
-// // 下载导入模板
-// function handleDownloadTemplate() {
-//   const importTemplate = props.contentConfig.importTemplate;
-//   if (typeof importTemplate === "string") {
-//     window.open(importTemplate);
-//   } else if (typeof importTemplate === "function") {
-//     importTemplate().then((response) => {
-//       const fileData = response.data;
-//       const fileName = decodeURI(
-//         response.headers["content-disposition"].split(";")[1].split("=")[1]
-//       );
-//       saveXlsx(fileData, fileName);
-//     });
-//   } else {
-//     ElMessage.error("未配置importTemplate");
-//   }
-// }
-
-// // 导入
-// function handleImport() {
-//   const importsAction = props.contentConfig.importsAction;
-//   if (importsAction === undefined) {
-//     ElMessage.error("未配置importsAction");
-//     return;
-//   }
-//   // 获取选择的文件
-//   const file = importFormData.files[0].raw as File;
-//   // 创建Workbook实例
-//   const workbook = new ExcelJS.Workbook();
-//   // 使用FileReader对象来读取文件内容
-//   const fileReader = new FileReader();
-//   // 二进制字符串的形式加载文件
-//   fileReader.readAsArrayBuffer(file);
-//   fileReader.onload = (ev) => {
-//     if (ev.target !== null && ev.target.result !== null) {
-//       const result = ev.target.result as ArrayBuffer;
-//       // 从 buffer中加载数据解析
-//       workbook.xlsx
-//         .load(result)
-//         .then((workbook) => {
-//           // 解析后的数据
-//           const data = [];
-//           // 获取第一个worksheet内容
-//           const worksheet = workbook.getWorksheet(1);
-//           if (worksheet) {
-//             // 获取第一行的标题
-//             const fields: any[] = [];
-//             worksheet.getRow(1).eachCell((cell) => {
-//               fields.push(cell.value);
-//             });
-//             // 遍历工作表的每一行（从第二行开始，因为第一行通常是标题行）
-//             for (let rowNumber = 2; rowNumber <= worksheet.rowCount; rowNumber++) {
-//               const rowData: IObject = {};
-//               const row = worksheet.getRow(rowNumber);
-//               // 遍历当前行的每个单元格
-//               row.eachCell((cell, colNumber) => {
-//                 // 获取标题对应的键，并将当前单元格的值存储到相应的属性名中
-//                 rowData[fields[colNumber - 1]] = cell.value;
-//               });
-//               // 将当前行的数据对象添加到数组中
-//               data.push(rowData);
-//             }
-//           }
-//           if (data.length === 0) {
-//             ElMessage.error("未解析到数据");
-//             return;
-//           }
-//           importsAction(data).then(() => {
-//             ElMessage.success("导入数据成功");
-//             handleCloseImportModal();
-//             handleRefresh(true);
-//           });
-//         })
-//         .catch((error) => console.log(error));
-//     } else {
-//       ElMessage.error("读取文件失败");
-//     }
-//   };
-// }
-
 onMounted(() => {
   loadingData();
 });
diff --git a/frontend/src/views/system/position/index.vue b/frontend/src/views/system/position/index.vue
index a3361e07..de84dff6 100644
--- a/frontend/src/views/system/position/index.vue
+++ b/frontend/src/views/system/position/index.vue
@@ -95,7 +95,11 @@
           <el-empty :image-size="80" description="暂无数据" />
         </template>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'selection')?.show" type="selection" min-width="55" align="center" />
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" type="index" fixed label="序号" min-width="60" />
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" type="index" fixed label="序号" min-width="60">
+          <template #default="scope">
+            {{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
+          </template>
+        </el-table-column>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'name')?.show" key="name" label="岗位名称" prop="name" min-width="100" />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'status')?.show" key="status" label="状态" prop="status" min-width="80">
           <template #default="scope">
diff --git a/frontend/src/views/system/role/components/PermissonDrawer.vue b/frontend/src/views/system/role/components/PermissonDrawer.vue
new file mode 100644
index 00000000..d07091d5
--- /dev/null
+++ b/frontend/src/views/system/role/components/PermissonDrawer.vue
@@ -0,0 +1,305 @@
+  <!-- 角色授权 -->
+<template>
+  <!-- 分配权限弹窗 -->
+  <el-drawer v-model="drawerVisible" :title="'【' + props.roleName + '】权限分配'" size="50%">
+    <el-container>
+      <!-- 数据权限 -->
+      <el-aside >
+        <div class="border-r-1 border-r-[#f0f0f0] b-r-solid h-[100%] p-[20px] box-border">
+          <div class="flex items-center">
+            <div style="display: flex; gap: 10px; ">
+              <div style="width: 10px; background-color: #409eff;"></div>
+              <div>
+                <span style="font-size: 16px;">数据授权</span>
+                <el-tooltip placement="right">
+                  <template #content>
+                    <span>授权用户可操作的数据范围</span>
+                  </template>
+                  <el-icon class="ml-1 inline-block cursor-pointer">
+                    <QuestionFilled />
+                  </el-icon>
+                </el-tooltip>
+              </div>
+            </div>
+          </div>
+          <div class="mt-3">
+            <el-form ref="dataFormRef" :model="permissionState">
+              <el-form-item prop="data_scope">
+                <el-select v-model="permissionState.data_scope">
+                  <el-option :key="1" label="仅本人数据权限" :value="1" />
+                  <el-option :key="2" label="本部门数据权限" :value="2" />
+                  <el-option :key="3" label="本部门及以下数据权限" :value="3" />
+                  <el-option :key="4" label="全部数据权限" :value="4" />
+                  <el-option :key="5" label="自定义数据权限" :value="5" />
+                </el-select>
+                </el-form-item>
+              </el-form>
+              
+              <div class="mt-5 max-h-[60vh] b-1 b-solid b-[#e5e7eb] p-10px overflow-auto box-border" v-if="permissionState.data_scope === 5 && deptTreeData.length">
+                <el-input v-model="deptFilterText" placeholder="部门名称" />
+                <el-tree 
+                  ref="deptTreeRef"
+                  node-key="value"
+                  show-checkbox
+                  :data="deptTreeData"
+                  :filter-node-method="handleFilter"
+                  default-expand-all
+                  :highlight-current="true"
+                  :check-strictly="!parentChildLinked"
+                  @check="deptTreeCheck"
+                  style="height: calc(100% - 60px); overflow-y: auto; margin-top: 10px;"
+                  >
+                  <template #empty>
+                    <el-empty :image-size="80" description="暂无数据" />
+                  </template>
+                </el-tree>
+              </div>
+          </div>
+        </div>
+      </el-aside>
+
+      <!-- 菜单权限 -->
+      <el-main>
+        <div style="display: flex; gap: 10px; ">
+          <div style="width: 10px; background-color: #409eff;"></div>
+          <div>
+            <span style="font-size: 16px;">菜单授权</span>
+            <el-tooltip placement="right">
+              <template #content>
+                <span>授权用户可操作的菜单权限</span>
+              </template>
+              <el-icon class="ml-1 inline-block cursor-pointer">
+                <QuestionFilled />
+              </el-icon>
+            </el-tooltip>
+          </div>
+        </div>
+        <div class="mt-3 flex-x-between">
+          <el-input v-model="permFilterText" placeholder="菜单名称" />
+          <div class="flex-center ml-5">
+            <el-button type="primary" size="small" plain @click="togglePermTree">
+              <template #icon>
+                <Switch />
+              </template>
+              {{ isExpanded ? "收缩" : "展开" }}
+            </el-button>
+            <el-checkbox v-model="parentChildLinked" class="ml-5" @change="handleParentChildLinkedChange">
+              父子联动
+            </el-checkbox>
+
+            <el-tooltip placement="bottom">
+              <template #content>
+                如果只需勾选菜单权限，不需要勾选子菜单或者按钮权限，请关闭父子联动
+              </template>
+              <el-icon class="ml-1 color-[--el-color-primary] inline-block cursor-pointer">
+                <QuestionFilled />
+              </el-icon>
+            </el-tooltip>
+          </div>
+        </div>
+
+        <div class="mt-5 max-h-[65vh] b-1 b-solid b-[#e5e7eb] p-10px overflow-auto box-border">
+          <el-tree 
+            ref="permTreeRef" 
+            node-key="value" 
+            show-checkbox 
+            :data="menuTreeData"
+            :filter-node-method="handleFilter" 
+            default-expand-all
+            :highlight-current="true"
+            :check-strictly="!parentChildLinked"
+            @check="menuTreeCheck"
+            style="height: calc(100% - 60px); overflow: auto; margin-top: 10px;">
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+          </el-tree>
+        </div>
+      </el-main>
+    </el-container>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleCancel">取 消</el-button>
+        <el-button type="primary" @click.stop="handleDrawerSave">确 定</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+// 添加 props 来接收 dictType
+const props = defineProps({
+  roleName: {
+    type: String,
+    required: true
+  },
+  roleId: {
+    type: Number,
+    required: true
+  },
+  modelValue: {
+    type: Boolean,
+    required: true
+  }
+})
+
+import { listToTree, formatTree } from "@/utils/common";
+import RoleAPI, { permissionDataType, permissionDeptType, permissionMenuType } from "@/api/system/role";
+import DeptAPI from "@/api/system/dept";
+import MenuAPI from "@/api/system/menu";
+import type { TreeInstance } from 'element-plus'
+
+const emit = defineEmits(['update:modelValue'])
+
+const permTreeRef = ref<TreeInstance>();
+const deptTreeRef = ref<TreeInstance>()
+const deptFilterText = ref("")
+const permFilterText = ref("");
+const dataFormRef = ref();
+const drawerVisible = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+const isExpanded = ref(true);
+const parentChildLinked = ref(true)
+const loading = ref<boolean>(false);
+const deptTreeData = ref<permissionDeptType[]>([]);
+const menuTreeData = ref<permissionMenuType[]>([]);
+const permissionState = ref<permissionDataType>({
+  role_ids: [],
+  menu_ids: [],
+  data_scope: 1,
+  dept_ids: []
+});
+
+// 初始化方法,用于打开抽屉并加载数据
+const init = async () => {
+  loading.value = true;
+
+  try {
+    // 获取全部部门树
+    const deptResponse = await DeptAPI.getDeptList();
+    deptTreeData.value = formatTree(listToTree(deptResponse.data.data.items));
+
+    // 获取全部菜单树
+    const menuResponse = await MenuAPI.getMenuList();
+    menuTreeData.value = formatTree(listToTree(menuResponse.data.data.items));
+
+    // 获取角色详情
+    const roleResponse = await RoleAPI.getRoleDetail(props.roleId);
+
+    // 更新权限状态
+    permissionState.value = {
+      role_ids: [props.roleId],
+      menu_ids: roleResponse.data.data.menus?.map(menu => menu.id) || [],
+      data_scope: roleResponse.data.data.data_scope || 1,
+      dept_ids: roleResponse.data.data.depts?.map(dept => dept.id) || []
+    };
+
+    // 回显菜单树选中项
+    if (permTreeRef.value) {
+      await permTreeRef.value.setCheckedKeys(permissionState.value.menu_ids);
+    }
+
+    // 修改：增加对 deptTreeRef.value 的存在性判断，并添加日志
+    if (permissionState.value.data_scope === 5 && deptTreeRef.value) {
+      // await 一定不能丢，否则到导致初始化时候deptTreeRef.value 为 undefined
+      await deptTreeRef.value.setCheckedKeys(permissionState.value.dept_ids);
+    }
+
+  } catch (error: any) {
+    ElMessage.error('获取权限数据失败: ' + error.message);
+  } finally {
+    loading.value = false;
+    // handleCancel()
+  }
+}
+
+// 取消按钮处理函数
+function handleCancel() {
+  drawerVisible.value = false;
+}
+
+// 保存权限设置
+async function handleDrawerSave () {
+  try {
+    loading.value = true;
+
+    // 构造提交数据
+    const submitData : permissionDataType = {
+      role_ids: [props.roleId],
+      menu_ids: (permTreeRef.value?.getCheckedKeys() || []).map(key => Number(key)),
+      data_scope: permissionState.value.data_scope,
+      dept_ids: (deptTreeRef.value?.getCheckedKeys() || []).map(key => Number(key))
+    };
+
+    await RoleAPI.setPermission(submitData)
+    
+  } catch (error: any) {
+    console.error('保存失败:', error);
+    ElMessage.error('保存失败: ' + error.message);
+  } finally {
+    loading.value = false;
+    drawerVisible.value = false;
+  }
+}
+
+// 部门树选择回调
+const deptTreeCheck = (checkedIds: number[]) => {
+  permissionState.value.dept_ids = checkedIds;
+}
+
+// 菜单选择变更回调
+const menuTreeCheck = (checkedIds: number[]) => {
+  permissionState.value.menu_ids = checkedIds;
+}
+
+// 展开/收缩 菜单权限树
+function togglePermTree() {
+  isExpanded.value = !isExpanded.value;
+  if (permTreeRef.value) {
+    Object.values(permTreeRef.value.store.nodesMap).forEach((node: any) => {
+      if (isExpanded.value) {
+        node.expand();
+      } else {
+        node.collapse();
+      }
+    });
+  }
+}
+
+// 部门筛选
+watch(deptFilterText, (val) => {
+  deptTreeRef.value!.filter(val);
+})
+
+// 菜单筛选
+watch(permFilterText, (val) => {
+  permTreeRef.value!.filter(val);
+});
+
+// 树节点过滤
+function handleFilter(
+  value: string,
+  data: {[key: string]: any;}
+) {
+  if (!value) return true;
+  return data.label.includes(value);
+}
+
+// 父子菜单节点是否联动
+function handleParentChildLinkedChange(val: any) {
+  parentChildLinked.value = val;
+}
+
+onMounted(async () => {
+  await init();
+})
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/src/views/system/role/index.vue b/frontend/src/views/system/role/index.vue
index a9ae0229..1b5af436 100644
--- a/frontend/src/views/system/role/index.vue
+++ b/frontend/src/views/system/role/index.vue
@@ -1,11 +1,11 @@
-<!-- 岗位管理 -->
+<!-- 角色管理 -->
 <template>
   <div class="app-container">
     <!-- 搜索区域 -->
     <div class="search-container">
       <el-form ref="queryFormRef" :model="queryFormData" :inline="true">
-        <el-form-item prop="name" label="岗位名称">
-          <el-input v-model="queryFormData.name" placeholder="请输入岗位名称" clearable />
+        <el-form-item prop="name" label="角色名称">
+          <el-input v-model="queryFormData.name" placeholder="请输入角色名称" clearable />
         </el-form-item>
         <el-form-item prop="status" label="状态">
           <el-select v-model="queryFormData.status" placeholder="请选择状态" style="width: 167.5px" clearable>
@@ -96,11 +96,23 @@
           <el-empty :image-size="80" description="暂无数据" />
         </template>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'selection')?.show" type="selection" width="55" align="center" />
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" type="index" fixed label="序号" width="60" />
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" type="index" fixed label="序号" width="60" >
+          <template #default="scope">
+            {{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
+          </template>
+        </el-table-column>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'name')?.show" key="name" label="角色名称" prop="name" min-width="100" />
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'data_scope')?.show" key="data_scope" label="数据权限" prop="data_scope" min-width="100" />
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'data_scope')?.show" key="data_scope" label="数据权限" prop="data_scope" min-width="200">
+          <template #default="scope">
+            <el-tag v-if="scope.row.data_scope === 1" type="primary">仅本人数据权限</el-tag>
+            <el-tag v-else-if="scope.row.data_scope === 2" type="info">本部门数据权限</el-tag>
+            <el-tag v-else-if="scope.row.data_scope === 3" type="warning">本部门及以下数据权限</el-tag>
+            <el-tag v-else-if="scope.row.data_scope === 4" type="success">全部数据权限</el-tag>
+            <el-tag v-else type="danger" >自定义数据权限</el-tag>
+          </template>
+        </el-table-column>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'order')?.show" key="order" label="排序" prop="order" min-width="80" show-overflow-tooltip />
-        <el-table-column v-if="tableColumns.find(col => col.prop === 'status')?.show" key="status" label="状态" prop="status" min-width="60">
+        <el-table-column v-if="tableColumns.find(col => col.prop === 'status')?.show" key="status" label="状态" prop="status" min-width="80">
           <template #default="scope">
             <el-tag :type="scope.row.status === true ? 'success' : 'danger'">
               {{ scope.row.status === true ? "启用" : "停用" }}
@@ -118,7 +130,7 @@
 
         <el-table-column v-if="tableColumns.find(col => col.prop === 'operation')?.show" fixed="right" label="操作" align="center" min-width="280">
           <template #default="scope">
-            <el-button type="primary" size="small" link icon="position" @click="handleOpenAssignPermDialog(scope.row)">分配权限</el-button>
+            <el-button type="primary" size="small" link icon="position" @click="handleOpenAssignPermDialog(scope.row.id, scope.row.name)">分配权限</el-button>
             <el-button type="info" size="small" link icon="document" @click="handleOpenDialog('detail', scope.row.id)">详情</el-button>
             <el-button type="primary" size="small" link icon="edit" @click="handleOpenDialog('update', scope.row.id)">编辑</el-button>
             <el-button type="danger" size="small" link icon="delete" @click="handleDelete([scope.row.id])">删除</el-button>
@@ -133,26 +145,30 @@
     </el-card>
 
     <!-- 角色表单弹窗 -->
-    <el-dialog v-model="dialogVisible.visible" :title="dialogVisible.title" width="500px" @close="handleCloseDialog">
+    <el-dialog v-model="dialogVisible.visible" :title="dialogVisible.title" @close="handleCloseDialog">
       <!-- 详情 -->
       <template v-if="dialogVisible.type === 'detail'">
-        <el-descriptions :column="2" border>
+        <el-descriptions :column="4" border>
           <el-descriptions-item label="角色名称" :span="2">{{ detailFormData.name }}</el-descriptions-item>
           <el-descriptions-item label="排序" :span="2">
             {{ detailFormData.order }}
           </el-descriptions-item>
           <el-descriptions-item label="数据权限" :span="2">
-            {{ detailFormData.data_scope }}
+            <el-tag v-if="detailFormData.data_scope === 1" type="primary">仅本人数据权限</el-tag>
+            <el-tag v-else-if="detailFormData.data_scope === 2" type="info">本部门数据权限</el-tag>
+            <el-tag v-else-if="detailFormData.data_scope === 3" type="warning">本部门及以下数据权限</el-tag>
+            <el-tag v-else-if="detailFormData.data_scope === 4" type="success">全部数据权限</el-tag>
+            <el-tag v-else type="danger" >自定义数据权限</el-tag>
           </el-descriptions-item>
           <el-descriptions-item label="状态" :span="2">
             <el-tag :type="detailFormData.status ? 'success' : 'danger'">
               {{ detailFormData.status ? '启用' : '停用' }}
             </el-tag>
           </el-descriptions-item>
-          <el-descriptions-item label="描述" :span="2">{{ detailFormData.description }}</el-descriptions-item>
           <el-descriptions-item label="创建人" :span="2">{{ detailFormData.creator?.name }}</el-descriptions-item>
           <el-descriptions-item label="创建时间" :span="2">{{ detailFormData.created_at }}</el-descriptions-item>
           <el-descriptions-item label="更新时间" :span="2">{{ detailFormData.updated_at }}</el-descriptions-item>
+          <el-descriptions-item label="描述" :span="4">{{ detailFormData.description }}</el-descriptions-item>
         </el-descriptions>
       </template>
       <!-- 新增、编辑表单 -->
@@ -189,148 +205,33 @@
       </template>
     </el-dialog>
 
-    <!-- 分配权限弹窗 -->
-    <el-drawer v-model="assignPermDialogVisible" :title="'【' + checkedRole.name + '】权限分配'" :size="drawerSize">
-      <!-- 使用 element-plus 的 row 和 col 组件实现左右两部分并排显示 -->
-      <el-row :gutter="20" style="height: calc(100% - 60px);">
-        <!-- 左侧数据权限设置，占据 8 列 -->
-        <el-col :span="8">
-          <div style="display: flex; gap: 10px; ">
-            <div style="width: 10px; background-color: #1677ff;"></div>
-            <div>
-              <span style="font-size: 16px;">数据授权</span>
-              <a-tooltip placement="right">
-                <template #title>
-                  <span>授权用户可操作的数据范围</span>
-                </template>
-                <QuestionCircleOutlined style="margin-left: 5px;" />
-              </a-tooltip>
-            </div>
-          </div>
+    <PermissonDrawer v-if="drawerVisible" v-model="drawerVisible" :role-name="checkedRole.name" :role-id="checkedRole.id" />
 
-          <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
-            <el-form-item label="数据权限" prop="data_scope">
-              <el-select v-model="permissionState.data_scope">
-                <el-option :key="1" label="全部数据" :value="1" />
-                <el-option :key="2" label="部门及子部门数据" :value="2" />
-                <el-option :key="3" label="本部门数据" :value="3" />
-                <el-option :key="4" label="仅本人数据" :value="4" />
-                <el-option :key="5" label="自定义数据" :value="5" />
-              </el-select>
-            </el-form-item>
-          </el-form>
-
-          <el-tree 
-            v-if="permissionState.data_scope === 5 && deptTreeData.length"
-            :checked-keys="permissionState.dept_ids" 
-            :row-key="record => record.id" 
-            :tree-data="deptTreeData"
-            :default-expand-all=true 
-            :field-names="{ children: 'children', title: 'name', key: 'id' }" 
-            checkable
-            check-strictly style="margin-top: 15px; height: calc(100% - 100px); overflow: auto;"
-            @check="deptTreeCheck" />
-        </el-col>
-
-        <!-- 右侧菜单功能权限设置，占据 16 列 -->
-        <el-col :span="16">
-          <div class="flex-x-between">
-            <div style="width: 10px; background-color: #1677ff;"></div>
-            <span style="font-size: 16px;">菜单授权</span>
-            <el-input v-model="permKeywords" clearable class="w-[150px]" placeholder="菜单权限名称">
-              <template #prefix>
-                <Search />
-              </template>
-            </el-input>
-
-            <div class="flex-center ml-5">
-              <el-button type="primary" size="small" plain @click="togglePermTree">
-                <template #icon>
-                  <Switch />
-                </template>
-                {{ isExpanded ? "收缩" : "展开" }}
-              </el-button>
-              <el-checkbox v-model="parentChildLinked" class="ml-5" @change="handleparentChildLinkedChange">
-                父子联动
-              </el-checkbox>
-
-              <el-tooltip placement="bottom">
-                <template #content>
-                  如果只需勾选菜单权限，不需要勾选子菜单或者按钮权限，请关闭父子联动
-                </template>
-                <el-icon class="ml-1 color-[--el-color-primary] inline-block cursor-pointer">
-                  <QuestionFilled />
-                </el-icon>
-              </el-tooltip>
-            </div>
-          </div>
-
-          <el-tree 
-            ref="permTreeRef" 
-            node-key="value" 
-            show-checkbox 
-            :data="menuTreeData"
-            :filter-node-method="handlePermFilter" 
-            :default-expand-all="true" 
-            :check-strictly="!parentChildLinked"
-            class="mt-5" 
-            style="height: calc(100% - 60px); 
-            overflow: auto;">
-            <template #default="{ data }">
-              {{ data.label }}
-            </template>
-          </el-tree>
-        </el-col>
-      </el-row>
-
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="handleAssignPermSubmit">确 定</el-button>
-          <el-button @click="assignPermDialogVisible = false">取 消</el-button>
-        </div>
-      </template>
-    </el-drawer>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ElMessage, ElMessageBox } from "element-plus";
-import { useAppStore } from "@/store/modules/app.store";
-import { DeviceEnum } from "@/enums/settings/device.enum";
-
-import RoleAPI, { RoleTable, RoleForm, TablePageQuery, permissionDataType, permissionDeptType, permissionMenuType } from "@/api/system/role";
-import MenuAPI from "@/api/system/menu";
-
 defineOptions({
   name: "Role",
   inheritAttrs: false,
 });
 
-const appStore = useAppStore();
+import { ElMessage, ElMessageBox } from "element-plus";
+import RoleAPI, { RoleTable, RoleForm, TablePageQuery } from "@/api/system/role";
 
 const queryFormRef = ref();
 const dataFormRef = ref();
-const permTreeRef = ref();
 const selectIds = ref<number[]>([]);
 const loading = ref(false);
-const ids = ref<number[]>([]);
 const total = ref(0);
 const isExpand = ref(false);
 const isExpandable = ref(true);
 
-
-const permissionState = ref<permissionDataType>({
-  role_ids: [],
-  menu_ids: [],
-  data_scope: 1,
-  dept_ids: []
-});
-const deptTreeData = ref<permissionDeptType[]>([]);
-const menuTreeData = ref<permissionMenuType[]>([]);
-
 // 分页表单
 const pageTableData = ref<RoleTable[]>([]);
 
+// 抽屉显隐
+const drawerVisible = ref(false);
 
 // 表格列配置
 const tableColumns = ref([
@@ -347,11 +248,12 @@ const tableColumns = ref([
   { prop: 'operation', label: '操作', show: true }
 ])
 
-const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
-
 // 详情表单
 const detailFormData = ref<RoleTable>({});
 
+// 选中的角色
+const checkedRole = ref<RoleTable>({});
+
 const queryFormData = reactive<TablePageQuery>({
   page_no: 1,
   page_size: 10,
@@ -384,19 +286,6 @@ const rules = reactive({
   status: [{ required: true, message: "请选择状态", trigger: "blur" }],
 });
 
-// 选中的角色
-interface CheckedRole {
-  id?: number;
-  name?: string;
-}
-
-const checkedRole = ref<CheckedRole>({});
-const assignPermDialogVisible = ref(false);
-
-const permKeywords = ref("");
-const isExpanded = ref(true);
-
-const parentChildLinked = ref(true);
 
 // 加载表格数据
 async function loadingData() {
@@ -594,85 +483,14 @@ async function handleMoreClick(status: boolean) {
 }
 
 // 打开分配菜单权限弹窗
-async function handleOpenAssignPermDialog(row: RoleTable) {
-  const roleId = row.id;
+async function handleOpenAssignPermDialog(roleId: number, roleName: string) {
   if (roleId) {
-    assignPermDialogVisible.value = true;
-    loading.value = true;
-
+    drawerVisible.value = true;
     checkedRole.value.id = roleId;
-    checkedRole.value.name = row.name;
-
-    // 获取所有的菜单
-    menuTreeData.value = await MenuAPI.getMenuList();
-
-    // 回显角色已拥有的菜单
-    RoleAPI.getRoleMenuIds(roleId)
-      .then((data) => {
-        const checkedMenuIds = data;
-        checkedMenuIds.forEach((menuId) => permTreeRef.value!.setChecked(menuId, true, false));
-      })
-      .finally(() => {
-        loading.value = false;
-      });
+    checkedRole.value.name = roleName;
   }
 }
 
-// 分配菜单权限提交
-function handleAssignPermSubmit() {
-  const roleId = checkedRole.value.id;
-  if (roleId) {
-    const checkedMenuIds: number[] = permTreeRef
-      .value!.getCheckedNodes(false, true)
-      .map((node: any) => node.value);
-
-    loading.value = true;
-    RoleAPI.setPermission(roleId, checkedMenuIds)
-      .then(() => {
-        ElMessage.success("分配权限成功");
-        assignPermDialogVisible.value = false;
-        handleResetQuery();
-      })
-      .finally(() => {
-        loading.value = false;
-      });
-  }
-}
-
-// 展开/收缩 菜单权限树
-function togglePermTree() {
-  isExpanded.value = !isExpanded.value;
-  if (permTreeRef.value) {
-    Object.values(permTreeRef.value.store.nodesMap).forEach((node: any) => {
-      if (isExpanded.value) {
-        node.expand();
-      } else {
-        node.collapse();
-      }
-    });
-  }
-}
-
-// 权限筛选
-watch(permKeywords, (val) => {
-  permTreeRef.value!.filter(val);
-});
-
-function handlePermFilter(
-  value: string,
-  data: {
-    [key: string]: any;
-  }
-) {
-  if (!value) return true;
-  return data.label.includes(value);
-}
-
-// 父子菜单节点是否联动
-function handleparentChildLinkedChange(val: any) {
-  parentChildLinked.value = val;
-}
-
 onMounted(() => {
   loadingData();
 });
diff --git a/frontend/src/views/system/user/components/DeptTree.vue b/frontend/src/views/system/user/components/DeptTree.vue
index a28e124f..310d1e09 100644
--- a/frontend/src/views/system/user/components/DeptTree.vue
+++ b/frontend/src/views/system/user/components/DeptTree.vue
@@ -21,7 +21,7 @@
 
 <script setup lang="ts">
 import DeptAPI, { DeptPageQuery } from "@/api/system/dept";
-import { formatDeptTree, listToTree } from "@/utils/common";
+import { formatTree, listToTree } from "@/utils/common";
 
 const props = defineProps({
   modelValue: {
@@ -76,7 +76,7 @@ onBeforeMount(() => {
   loading.value = true;
   DeptAPI.getDeptList(queryFormData).then((response) => {
     const treeData = listToTree(response.data.data.items);
-    deptOptions.value = formatDeptTree(treeData);
+    deptOptions.value = formatTree(treeData);
   }).finally(() => {
     loading.value = false;
   });
diff --git a/frontend/src/views/system/user/components/UserImport.vue b/frontend/src/views/system/user/components/UserImport.vue
index 82b1a0d8..98ea86c1 100644
--- a/frontend/src/views/system/user/components/UserImport.vue
+++ b/frontend/src/views/system/user/components/UserImport.vue
@@ -84,6 +84,82 @@
         </div>
       </template>
     </el-dialog>
+
+    <!-- 导出弹窗预留 -->
+    <el-dialog v-model="exportsModalVisible" :align-center="true" title="导出数据" width="600px" style="padding-right: 0" @close="handleCloseExportsModal">
+      <!-- 滚动 -->
+      <el-scrollbar max-height="60vh">
+        <!-- 表单 -->
+        <el-form ref="exportsFormRef" style="padding-right: var(--el-dialog-padding-primary)" :model="exportsFormData" :rules="exportsFormRules">
+          <el-form-item label="文件名" prop="filename">
+            <el-input v-model="exportsFormData.filename" clearable />
+          </el-form-item>
+          <el-form-item label="工作表名" prop="sheetname">
+            <el-input v-model="exportsFormData.sheetname" clearable />
+          </el-form-item>
+          <el-form-item label="数据源" prop="origin">
+            <el-select v-model="exportsFormData.origin">
+              <el-option label="当前数据 (当前页的数据)" :value="ExportsOriginEnum.CURRENT" />
+              <el-option label="选中数据 (所有选中的数据)" :value="ExportsOriginEnum.SELECTED" :disabled="selectionData.length <= 0" />
+              <el-option label="全量数据 (所有分页的数据)" :value="ExportsOriginEnum.REMOTE" :disabled="contentConfig.exportsAction === undefined" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="字段" prop="fields">
+            <el-checkbox-group v-model="exportsFormData.fields">
+              <template v-for="col in cols" :key="col.prop">
+                <el-checkbox v-if="col.prop" :value="col.prop" :label="col.label" />
+              </template>
+            </el-checkbox-group>
+          </el-form-item>
+        </el-form>
+      </el-scrollbar>
+      <!-- 弹窗底部操作按钮 -->
+      <template #footer>
+        <div style="padding-right: var(--el-dialog-padding-primary)">
+          <el-button type="primary" @click="handleExportsSubmit">确 定</el-button>
+          <el-button @click="handleCloseExportsModal">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 导入弹窗预留 -->
+    <el-dialog v-model="importModalVisible" :align-center="true" title="导入数据" width="600px" style="padding-right: 0" @close="handleCloseImportModal">
+      <!-- 滚动 -->
+      <el-scrollbar max-height="60vh">
+        <!-- 表单 -->
+        <el-form ref="importFormRef" style="padding-right: var(--el-dialog-padding-primary)" :model="importFormData"
+          :rules="importFormRules">
+          <el-form-item label="文件名" prop="files">
+            <el-upload ref="uploadRef" v-model:file-list="importFormData.files" class="w-full"
+              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+              :drag="true" :limit="1" :auto-upload="false" :on-exceed="handleFileExceed">
+              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+              <div class="el-upload__text">
+                <span>将文件拖到此处，或</span>
+                <em>点击上传</em>
+              </div>
+              <template #tip>
+                <div class="el-upload__tip">
+                  *.xlsx / *.xls
+                  <el-link v-if="contentConfig.importTemplate" type="primary" icon="download" underline="never"
+                    @click="handleDownloadTemplate">
+                    下载模板
+                  </el-link>
+                </div>
+              </template>
+            </el-upload>
+          </el-form-item>
+        </el-form>
+      </el-scrollbar>
+      <!-- 弹窗底部操作按钮 -->
+      <template #footer>
+        <div style="padding-right: var(--el-dialog-padding-primary)">
+          <el-button type="primary" :disabled="importFormData.files.length === 0" @click="handleImportSubmit">
+            确 定
+          </el-button>
+          <el-button @click="handleCloseImportModal">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -194,4 +270,127 @@ const handleClose = () => {
   importFormData.files.length = 0;
   visible.value = false;
 };
+
+
+// // 导出
+// function handleExport() {
+//   const filename = exportsFormData.filename
+//     ? exportsFormData.filename
+//     : props.contentConfig.permPrefix || "export";
+//   const sheetname = exportsFormData.sheetname ? exportsFormData.sheetname : "sheet";
+//   const workbook = new ExcelJS.Workbook();
+//   const worksheet = workbook.addWorksheet(sheetname);
+//   const columns: Partial<ExcelJS.Column>[] = [];
+//   cols.value.forEach((col) => {
+//     if (col.label && col.prop && exportsFormData.fields.includes(col.prop)) {
+//       columns.push({ header: col.label, key: col.prop });
+//     }
+//   });
+//   worksheet.columns = columns;
+//   if (exportsFormData.origin === ExportsOriginEnum.REMOTE) {
+//     if (props.contentConfig.exportsAction) {
+//       props.contentConfig.exportsAction(lastFormData).then((res) => {
+//         worksheet.addRows(res);
+//         workbook.xlsx
+//           .writeBuffer()
+//           .then((buffer) => {
+//             saveXlsx(buffer, filename as string);
+//           })
+//           .catch((error) => console.log(error));
+//       });
+//     } else {
+//       ElMessage.error("未配置exportsAction");
+//     }
+//   } else {
+//     worksheet.addRows(
+//       exportsFormData.origin === ExportsOriginEnum.SELECTED ? selectionData.value : pageData.value
+//     );
+//     workbook.xlsx
+//       .writeBuffer()
+//       .then((buffer) => {
+//         saveXlsx(buffer, filename as string);
+//       })
+//       .catch((error) => console.log(error));
+//   }
+// }
+
+// // 下载导入模板
+// function handleDownloadTemplate() {
+//   const importTemplate = props.contentConfig.importTemplate;
+//   if (typeof importTemplate === "string") {
+//     window.open(importTemplate);
+//   } else if (typeof importTemplate === "function") {
+//     importTemplate().then((response) => {
+//       const fileData = response.data;
+//       const fileName = decodeURI(
+//         response.headers["content-disposition"].split(";")[1].split("=")[1]
+//       );
+//       saveXlsx(fileData, fileName);
+//     });
+//   } else {
+//     ElMessage.error("未配置importTemplate");
+//   }
+// }
+
+// // 导入
+// function handleImport() {
+//   const importsAction = props.contentConfig.importsAction;
+//   if (importsAction === undefined) {
+//     ElMessage.error("未配置importsAction");
+//     return;
+//   }
+//   // 获取选择的文件
+//   const file = importFormData.files[0].raw as File;
+//   // 创建Workbook实例
+//   const workbook = new ExcelJS.Workbook();
+//   // 使用FileReader对象来读取文件内容
+//   const fileReader = new FileReader();
+//   // 二进制字符串的形式加载文件
+//   fileReader.readAsArrayBuffer(file);
+//   fileReader.onload = (ev) => {
+//     if (ev.target !== null && ev.target.result !== null) {
+//       const result = ev.target.result as ArrayBuffer;
+//       // 从 buffer中加载数据解析
+//       workbook.xlsx
+//         .load(result)
+//         .then((workbook) => {
+//           // 解析后的数据
+//           const data = [];
+//           // 获取第一个worksheet内容
+//           const worksheet = workbook.getWorksheet(1);
+//           if (worksheet) {
+//             // 获取第一行的标题
+//             const fields: any[] = [];
+//             worksheet.getRow(1).eachCell((cell) => {
+//               fields.push(cell.value);
+//             });
+//             // 遍历工作表的每一行（从第二行开始，因为第一行通常是标题行）
+//             for (let rowNumber = 2; rowNumber <= worksheet.rowCount; rowNumber++) {
+//               const rowData: IObject = {};
+//               const row = worksheet.getRow(rowNumber);
+//               // 遍历当前行的每个单元格
+//               row.eachCell((cell, colNumber) => {
+//                 // 获取标题对应的键，并将当前单元格的值存储到相应的属性名中
+//                 rowData[fields[colNumber - 1]] = cell.value;
+//               });
+//               // 将当前行的数据对象添加到数组中
+//               data.push(rowData);
+//             }
+//           }
+//           if (data.length === 0) {
+//             ElMessage.error("未解析到数据");
+//             return;
+//           }
+//           importsAction(data).then(() => {
+//             ElMessage.success("导入数据成功");
+//             handleCloseImportModal();
+//             handleRefresh(true);
+//           });
+//         })
+//         .catch((error) => console.log(error));
+//     } else {
+//       ElMessage.error("读取文件失败");
+//     }
+//   };
+// }
 </script>
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
index 81a7cbff..e378d6e4 100644
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@@ -120,7 +120,11 @@
               <el-empty :image-size="80" description="暂无数据" />
             </template>
             <el-table-column v-if="tableColumns.find(col => col.prop === 'selection')?.show" type="selection" min-width="55" align="center" />
-            <el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" type="index" fixed label="序号" align="center" min-width="60" />
+            <el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" type="index" fixed label="序号" align="center" min-width="60" >
+              <template #default="scope">
+                {{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
+              </template>
+            </el-table-column>
             <el-table-column v-if="tableColumns.find(col => col.prop === 'avatar')?.show" label="头像" prop="avatar" min-width="80" align="center">
               <template #default="scope">
                 <el-avatar size="small" :src="scope.row.avatar" />
@@ -179,7 +183,7 @@
     <el-drawer v-model="dialogVisible.visible" :title="dialogVisible.title" append-to-body :size="drawerSize" @close="handleCloseDialog">
       <!-- 详情 -->
       <template v-if="dialogVisible.type === 'detail'">
-        <el-descriptions :column="2" border>
+        <el-descriptions :column="4" border>
           <el-descriptions-item label="编号" :span="2">{{ detailFormData.id }}</el-descriptions-item>
           <el-descriptions-item label="头像" :span="2">
             <el-avatar :src="detailFormData.avatar" size="small"></el-avatar>
@@ -208,7 +212,7 @@
           <el-descriptions-item label="创建人" :span="2">{{ detailFormData.creator?.name }}</el-descriptions-item>
           <el-descriptions-item label="创建时间" :span="2">{{ detailFormData.created_at }}</el-descriptions-item>
           <el-descriptions-item label="更新时间" :span="2">{{ detailFormData.updated_at }}</el-descriptions-item>
-          <el-descriptions-item label="描述" :span="2">{{ detailFormData.description }}</el-descriptions-item>
+          <el-descriptions-item label="描述" :span="4">{{ detailFormData.description }}</el-descriptions-item>
         </el-descriptions>
       </template>
       <!-- 新增、编辑表单 -->
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 31791484..ca8aacf3 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -22,7 +22,10 @@
     // 调试和兼容性相关配置
     "sourceMap": true,
     "useDefineForClassFields": true,
-    "allowJs": true
+    "allowJs": true,
+
+    // 类型检查相关配置
+    "types": ["vite/client"] // 添加 Vite 客户端类型
   },
 
   "include": ["mock/**/*.ts", "src/**/*.ts", "src/**/*.vue", "vite.config.ts"],