feat: 新增权限指令并集成到多个页面组件

refactor(backend): 重构数据库模型和初始化逻辑

fix(frontend): 修复权限指令在多个组件中的使用问题

perf(backend): 优化数据库连接和初始化性能

docs: 更新低代码生成器的README文档

style: 清理无用代码和注释

chore: 移除不再需要的依赖项

test: 更新用户权限相关测试用例

ci: 更新CI配置以支持新的权限检查

build: 更新依赖项版本

frontend/src/views/ai/mcp/index.vue

@@ -20,6 +20,7 @@
             v-if="messages.length > 0"
             text 
             @click="clearCurrentChat"
+            v-hasPerm="['ai:mcp:clear']"
           >
             <el-icon><Delete /></el-icon>
             清空对话
@@ -27,6 +28,7 @@
           <el-button 
             text 
             @click="toggleConnection"
+            v-hasPerm="['ai:mcp:connection']"
           >
             <el-icon><Setting /></el-icon>
             {{ isConnected ? '断开连接' : '重新连接' }}
@@ -195,7 +197,7 @@ const messagesContainer = ref<HTMLElement>()
 
 // WebSocket 连接
 let ws: WebSocket | null = null
-const WS_URL =  import.meta.env.VITE_APP_WS_ENDPOINT + '/api/v1/ai/ws/mcp/chat'
+const WS_URL =  import.meta.env.VITE_APP_WS_ENDPOINT + '/api/v1/ai/mcp/ws/chat'
 
 // 计算属性
 const connectionStatusText = computed(() => {

frontend/src/views/application/myapp/index.vue

@@ -17,9 +17,9 @@
             <el-input v-model="queryFormData.creator" placeholder="请输入创建人" clearable style="width: 150px" />
           </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>
-          </el-form-item>
+              <el-button type="primary" icon="search" @click="handleQuery" v-hasPerm="['application:myapp:query']">查询</el-button>
+              <el-button icon="refresh" @click="handleResetQuery" v-hasPerm="['application:myapp:query']">重置</el-button>
+            </el-form-item>
         </el-form>
       </div>
 
@@ -28,7 +28,7 @@
         <template #header>
           <div class="card-header">
             <span>应用市场</span>
-            <el-button type="primary" icon="plus" @click="handleCreateApp">
+            <el-button type="primary" icon="plus" @click="handleCreateApp" v-hasPerm="['application:myapp:create']">
               创建应用
             </el-button>
           </div>
@@ -76,8 +76,8 @@
                   />
                   <template #dropdown>
                     <el-dropdown-menu>
-                      <el-dropdown-item command="edit" icon="Edit">编辑</el-dropdown-item>
-                      <el-dropdown-item command="delete" icon="Delete" divided>删除</el-dropdown-item>
+                      <el-dropdown-item command="edit" icon="Edit" v-hasPerm="['application:myapp:update']">编辑</el-dropdown-item>
+                      <el-dropdown-item command="delete" icon="Delete" divided v-hasPerm="['application:myapp:delete']">删除</el-dropdown-item>
                     </el-dropdown-menu>
                   </template>
                 </el-dropdown>
@@ -109,6 +109,7 @@
                 :disabled="!app.status"
                 class="action-btn"
                 @click="openAppExternal(app.access_url)"
+                v-hasPerm="['application:myapp:open_external']"
               >
                 外部打开
               </el-button>
@@ -119,6 +120,7 @@
                 :disabled="!app.status"
                 class="action-btn"
                 @click="openAppInternal(app)"
+                v-hasPerm="['application:myapp:open_internal']"
               >
                 内部打开
               </el-button>

frontend/src/views/application/myapp/simple.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>
-    <!-- Simple view placeholder -->
-  </div>
-</template>
-
-<script setup lang="ts">
-// Simple view component
-</script>
-
-<style scoped>
-/* Simple view styles */
-</style>

frontend/src/views/current/profile.vue

@@ -36,8 +36,8 @@
                   @change="handleFileChange"
                 >
                   <template #trigger>
-                    <el-button type="primary" :icon="Camera" class="upload-trigger"/>
-                  </template>
+                      <el-button type="primary" :icon="Camera" class="upload-trigger" v-hasPerm="['system:user:update']"/>
+                    </template>
                 </el-upload>
             </div>
             <span class="user-name">
@@ -145,7 +145,7 @@
                   </el-form-item>
 
                   <el-form-item>
-                    <el-button type="primary" :loading="infoSubmitting" icon="edit" @click="handleSave">保存更改</el-button>
+                    <el-button type="primary" :loading="infoSubmitting" icon="edit" @click="handleSave" v-hasPerm="['system:user:update']">保存更改</el-button>
                   </el-form-item>
                 </el-form>
               </div>
@@ -185,7 +185,7 @@
                   </el-form-item>
 
                   <el-form-item>
-                    <el-button type="primary" :loading="passwordChanging" icon="edit" @click="handlePasswordChange">更新密码</el-button>
+                    <el-button type="primary" :loading="passwordChanging" icon="edit" @click="handlePasswordChange" v-hasPerm="['current:profile:change_password']">更新密码</el-button>
                   </el-form-item>
                 </el-form>
               </div>

frontend/src/views/demo/example/index.vue

@@ -22,12 +22,12 @@
                 </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>
+                    <el-button type="primary" icon="search" @click="handleQuery" v-hasPerm="['demo:example:query']">
+                            查询
+                        </el-button>
+                        <el-button icon="refresh" @click="handleResetQuery" v-hasPerm="['demo:example:query']">
+                            重置
+                        </el-button>
                     <!-- 展开/收起 -->
                     <template v-if="isExpandable">
                         <el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
@@ -62,33 +62,33 @@
             <!-- 功能区域 -->
             <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="success" icon="plus" @click="handleOpenDialog('create')" v-hasPerm="['demo:example:create']">新增</el-button>
                     <el-button type="danger" icon="delete" :disabled="selectIds.length === 0"
-                        @click="handleDelete(selectIds)">批量删除</el-button>
+                        @click="handleDelete(selectIds)" v-hasPerm="['demo:example:delete']">批量删除</el-button>
                     <el-dropdown trigger="click">
                         <el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">更多</el-button>
                         <template #dropdown>
                             <el-dropdown-menu>
-                                <el-dropdown-item icon="Check" @click="handleMoreClick(true)">批量启用</el-dropdown-item>
-                                <el-dropdown-item icon="CircleClose"
-                                    @click="handleMoreClick(false)">批量停用</el-dropdown-item>
+                                <el-dropdown-item icon="Check" @click="handleMoreClick(true)" v-hasPerm="['demo:example:batch_available']">批量启用</el-dropdown-item>
+                        <el-dropdown-item icon="CircleClose"
+                            @click="handleMoreClick(false)" v-hasPerm="['demo:example:batch_available']">批量停用</el-dropdown-item>
                             </el-dropdown-menu>
                         </template>
                     </el-dropdown>
                 </div>
                 <div class="data-table__toolbar--tools">
                     <el-tooltip content="导入">
-                        <el-button type="info" icon="upload" circle @click="handleOpenImportDialog" />
+                        <el-button type="info" icon="upload" circle @click="handleOpenImportDialog" v-hasPerm="['demo:example:import']" />
                     </el-tooltip>
                     <el-tooltip content="导出">
-                        <el-button type="warning" icon="download" circle @click="handleExport" />
+                        <el-button type="warning" icon="download" circle @click="handleExport" v-hasPerm="['demo:example:export']" />
                     </el-tooltip>
                     <el-tooltip content="刷新">
-                        <el-button type="primary" icon="refresh" circle @click="handleRefresh" />
+                        <el-button type="primary" icon="refresh" circle @click="handleRefresh" v-hasPerm="['demo:example:refresh']" />
                     </el-tooltip>
                     <el-tooltip content="列表筛选">
                         <el-dropdown trigger="click">
-                            <el-button type="default" icon="operation" circle />
+                            <el-button type="default" icon="operation" circle v-hasPerm="['demo:example:filter']" />
                             <template #dropdown>
                                 <el-dropdown-menu>
                                     <el-dropdown-item v-for="column in tableColumns" :key="column.prop"
@@ -145,11 +145,11 @@
                     label="操作" align="center" min-width="200">
                     <template #default="scope">
                         <el-button type="info" size="small" link icon="document"
-                            @click="handleOpenDialog('detail', scope.row.id)">详情</el-button>
+                            @click="handleOpenDialog('detail', scope.row.id)" v-hasPerm="['demo:example:detail']">详情</el-button>
                         <el-button type="primary" size="small" link icon="edit"
-                            @click="handleOpenDialog('update', scope.row.id)">编辑</el-button>
+                            @click="handleOpenDialog('update', scope.row.id)" v-hasPerm="['demo:example:update']">编辑</el-button>
                         <el-button type="danger" size="small" link icon="delete"
-                            @click="handleDelete([scope.row.id])">删除</el-button>
+                            @click="handleDelete([scope.row.id])" v-hasPerm="['demo:example:delete']">删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>
@@ -217,7 +217,7 @@
                     <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
                     <el-button @click="handleCloseDialog">取消</el-button>
                     <el-button v-if="dialogVisible.type !== 'detail'" type="primary"
-                        @click="handleSubmit">确定</el-button>
+                        @click="handleSubmit" v-hasPerm="['demo:example:submit']">确定</el-button>
                     <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
                 </div>
             </template>

frontend/src/views/gencode/backcode/components/basicInfoForm.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-form ref="basicInfoForm" :model="info" :rules="rules" label-width="150px">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="表名称" prop="tableName">
+          <el-input placeholder="请输入仓库名称" v-model="info.tableName" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="表描述" prop="tableComment">
+          <el-input placeholder="请输入" v-model="info.tableComment" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="实体类名称" prop="className">
+          <el-input placeholder="请输入" v-model="info.className" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="作者" prop="functionAuthor">
+          <el-input placeholder="请输入" v-model="info.functionAuthor" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="备注" prop="remark">
+          <el-input type="textarea" :rows="3" v-model="info.remark"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script setup>
+defineProps({
+  info: {
+    type: Object,
+    default: null
+  }
+});
+
+// 表单校验
+const rules = ref({
+  tableName: [{ required: true, message: "请输入表名称", trigger: "blur" }],
+  tableComment: [{ required: true, message: "请输入表描述", trigger: "blur" }],
+  className: [{ required: true, message: "请输入实体类名称", trigger: "blur" }],
+  functionAuthor: [{ required: true, message: "请输入作者", trigger: "blur" }]
+});
+</script>

frontend/src/views/gencode/backcode/components/createTable.vue

@@ -0,0 +1,46 @@
+<template>
+  <!-- 创建表 -->
+  <el-dialog title="创建表" v-model="visible" width="800px" top="5vh" append-to-body>
+    <span>创建表语句(支持多个建表语句)：</span>
+    <el-input type="textarea" :rows="10" placeholder="请输入文本" v-model="content"></el-input>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="handleImportTable">确 定</el-button>
+        <el-button @click="visible = false">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import GencodeAPI from "@/api/generator/gencode";
+
+const visible = ref(false);
+const content = ref("");
+const { proxy } = getCurrentInstance();
+const emit = defineEmits(["ok"]);
+
+/** 显示弹框 */
+function show() {
+  visible.value = true;
+}
+
+/** 导入按钮操作 */
+function handleImportTable() {
+  if (content.value === "") {
+    proxy.$modal.msgError("请输入建表语句");
+    return;
+  }
+  GencodeAPI.createTable({ sql: content.value }).then(res => {
+    proxy.$modal.msgSuccess(res.msg);
+    if (res.code === 200) {
+      visible.value = false;
+      emit("ok");
+    }
+  });
+}
+
+defineExpose({
+  show,
+});
+</script>

frontend/src/views/gencode/backcode/components/editTable.vue

@@ -0,0 +1,208 @@
+<template>
+  <el-card>
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="基本信息" name="basic">
+        <basic-info-form ref="basicInfo" :info="info" />
+      </el-tab-pane>
+      <el-tab-pane label="字段信息" name="columnInfo">
+        <el-table ref="dragTable" :data="columns" row-key="columnId" :max-height="tableHeight">
+          <el-table-column label="序号" type="index" min-width="5%"/>
+          <el-table-column
+            label="字段列名"
+            prop="columnName"
+            min-width="10%"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column label="字段描述" min-width="10%">
+            <template #default="scope">
+              <el-input v-model="scope.row.columnComment"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="物理类型"
+            prop="columnType"
+            min-width="10%"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column label="Python类型" min-width="11%">
+            <template #default="scope">
+              <el-select v-model="scope.row.pythonType">
+                <el-option label="str" value="str" />
+                <el-option label="int" value="int" />
+                <el-option label="float" value="float" />
+                <el-option label="Decimal" value="Decimal" />
+                <el-option label="date" value="date" />
+                <el-option label="time" value="time" />
+                <el-option label="datetime" value="datetime" />
+                <el-option label="bytes" value="bytes" />
+                <el-option label="dict" value="dict" />
+                <el-option label="list" value="list" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="Python属性" min-width="10%">
+            <template #default="scope">
+              <el-input v-model="scope.row.pythonField"></el-input>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="插入" min-width="5%">
+            <template #default="scope">
+              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isInsert"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="编辑" min-width="5%">
+            <template #default="scope">
+              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isEdit"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="列表" min-width="5%">
+            <template #default="scope">
+              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isList"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="查询" min-width="5%">
+            <template #default="scope">
+              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isQuery"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="查询方式" min-width="10%">
+            <template #default="scope">
+              <el-select v-model="scope.row.queryType">
+                <el-option label="=" value="EQ" />
+                <el-option label="!=" value="NE" />
+                <el-option label=">" value="GT" />
+                <el-option label=">=" value="GTE" />
+                <el-option label="<" value="LT" />
+                <el-option label="<=" value="LTE" />
+                <el-option label="LIKE" value="LIKE" />
+                <el-option label="BETWEEN" value="BETWEEN" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="必填" min-width="5%">
+            <template #default="scope">
+              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isRequired"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="唯一" min-width="5%">
+            <template #default="scope">
+              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isUnique"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="显示类型" min-width="12%">
+            <template #default="scope">
+              <el-select v-model="scope.row.htmlType">
+                <el-option label="文本框" value="input" />
+                <el-option label="文本域" value="textarea" />
+                <el-option label="下拉框" value="select" />
+                <el-option label="单选框" value="radio" />
+                <el-option label="复选框" value="checkbox" />
+                <el-option label="日期控件" value="datetime" />
+                <el-option label="图片上传" value="imageUpload" />
+                <el-option label="文件上传" value="fileUpload" />
+                <el-option label="富文本控件" value="editor" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="字典类型" min-width="12%">
+            <template #default="scope">
+              <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
+                <el-option
+                  v-for="dict in dictOptions"
+                  :key="dict.dictType"
+                  :label="dict.dictName"
+                  :value="dict.dictType">
+                  <span style="float: left">{{ dict.dictName }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
+              </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="生成信息" name="genInfo">
+        <gen-info-form ref="genInfo" :info="info" :tables="tables" />
+      </el-tab-pane>
+    </el-tabs>
+    <el-form label-width="100px">
+      <div style="text-align: center;margin-left:-100px;margin-top:10px;">
+        <el-button type="primary" @click="submitForm()">提交</el-button>
+        <el-button @click="close()">返回</el-button>
+      </div>
+    </el-form>
+  </el-card>
+</template>
+
+<script setup name="GenEdit">
+import GencodeAPI from "@/api/generator/gencode";
+import { optionselect as getDictOptionselect } from "@/api/system/dict/type";
+import basicInfoForm from "./components/basicInfoForm";
+import genInfoForm from "./components/genInfoForm";
+
+const route = useRoute();
+const { proxy } = getCurrentInstance();
+
+const activeName = ref("columnInfo");
+const tableHeight = ref(document.documentElement.scrollHeight - 245 + "px");
+const tables = ref([]);
+const columns = ref([]);
+const dictOptions = ref([]);
+const info = ref({});
+
+/** 提交按钮 */
+function submitForm() {
+  const basicForm = proxy.$refs.basicInfo.$refs.basicInfoForm;
+  const genForm = proxy.$refs.genInfo.$refs.genInfoForm;
+  Promise.all([basicForm, genForm].map(getFormPromise)).then(res => {
+    const validateResult = res.every(item => !!item);
+    if (validateResult) {
+      const genTable = Object.assign({}, info.value);
+      genTable.columns = columns.value;
+      genTable.params = {
+        treeCode: info.value.treeCode,
+        treeName: info.value.treeName,
+        treeParentCode: info.value.treeParentCode,
+        parentMenuId: info.value.parentMenuId
+      };
+      GencodeAPI.updateGenTable(genTable).then(res => {
+        proxy.$modal.msgSuccess(res.msg);
+        if (res.code === 200) {
+          close();
+        }
+      });
+    } else {
+      proxy.$modal.msgError("表单校验未通过，请重新检查提交内容");
+    }
+  });
+}
+
+function getFormPromise(form) {
+  return new Promise(resolve => {
+    form.validate(res => {
+      resolve(res);
+    });
+  });
+}
+
+function close() {
+  const obj = { path: "/tool/gen", query: { t: Date.now(), pageNum: route.query.pageNum } };
+  proxy.$tab.closeOpenPage(obj);
+}
+
+(() => {
+  const tableId = route.params && route.params.tableId;
+  if (tableId) {
+    // 获取表详细信息
+    GencodeAPI.getGenTable(tableId).then(res => {
+      columns.value = res.data.rows;
+      info.value = res.data.info;
+      tables.value = res.data.tables;
+    });
+    /** 查询字典下拉列表 */
+    GencodeAPI.getDictOptionselect().then(response => {
+      dictOptions.value = response.data;
+    });
+  }
+})();
+</script>

frontend/src/views/gencode/backcode/components/genInfoForm.vue

@@ -0,0 +1,306 @@
+<template>
+  <el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item prop="tplCategory">
+          <template #label>生成模板</template>
+          <el-select v-model="info.tplCategory" @change="tplSelectChange">
+            <el-option label="单表（增删改查）" value="crud" />
+            <el-option label="树表（增删改查）" value="tree" />
+            <el-option label="主子表（增删改查）" value="sub" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="tplWebType">
+          <template #label>前端类型</template>
+          <el-select v-model="info.tplWebType">
+            <el-option label="Vue2 Element UI 模版" value="element-ui" />
+            <el-option label="Vue3 Element Plus 模版" value="element-plus" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="packageName">
+          <template #label>
+            生成包路径
+            <el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-input v-model="info.packageName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="moduleName">
+          <template #label>
+            生成模块名
+            <el-tooltip content="可理解为子系统名，例如 system" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-input v-model="info.moduleName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="businessName">
+          <template #label>
+            生成业务名
+            <el-tooltip content="可理解为功能英文名，例如 user" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-input v-model="info.businessName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="functionName">
+          <template #label>
+            生成功能名
+            <el-tooltip content="用作类描述，例如 用户" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-input v-model="info.functionName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="genType">
+          <template #label>
+            生成代码方式
+            <el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-radio v-model="info.genType" value="0">zip压缩包</el-radio>
+          <el-radio v-model="info.genType" value="1">自定义路径</el-radio>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item>
+          <template #label>
+            上级菜单
+            <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-tree-select
+            v-model="info.parentMenuId"
+            :data="menuOptions"
+            :props="{ value: 'menuId', label: 'menuName', children: 'children' }"
+            value-key="menuId"
+            placeholder="请选择系统菜单"
+            check-strictly
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="24" v-if="info.genType == '1'">
+        <el-form-item prop="genPath">
+          <template #label>
+            自定义路径
+            <el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-input v-model="info.genPath">
+            <template #append>
+              <el-dropdown>
+                <el-button type="primary">
+                  最近路径快速选择
+                  <i class="el-icon-arrow-down el-icon--right"></i>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    
+    <template v-if="info.tplCategory == 'tree'">
+      <h4 class="form-header">其他信息</h4>
+      <el-row v-show="info.tplCategory == 'tree'">
+        <el-col :span="12">
+          <el-form-item>
+            <template #label>
+              树编码字段
+              <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+            </template>
+            <el-select v-model="info.treeCode" placeholder="请选择">
+              <el-option
+                v-for="(column, index) in info.columns"
+                :key="index"
+                :label="column.columnName + '：' + column.columnComment"
+                :value="column.columnName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item>
+            <template #label>
+              树父编码字段
+              <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+            </template>
+            <el-select v-model="info.treeParentCode" placeholder="请选择">
+              <el-option
+                v-for="(column, index) in info.columns"
+                :key="index"
+                :label="column.columnName + '：' + column.columnComment"
+                :value="column.columnName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item>
+            <template #label>
+              树名称字段
+              <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+            </template>
+            <el-select v-model="info.treeName" placeholder="请选择">
+              <el-option
+                v-for="(column, index) in info.columns"
+                :key="index"
+                :label="column.columnName + '：' + column.columnComment"
+                :value="column.columnName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </template>
+
+    <template v-if="info.tplCategory == 'sub'">
+      <h4 class="form-header">关联信息</h4>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item>
+            <template #label>
+              关联子表的表名
+              <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+            </template>
+            <el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
+              <el-option
+                v-for="(table, index) in tables"
+                :key="index"
+                :label="table.tableName + '：' + table.tableComment"
+                :value="table.tableName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item>
+            <template #label>
+              子表关联的外键名
+              <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+            </template>
+            <el-select v-model="info.subTableFkName" placeholder="请选择">
+              <el-option
+                v-for="(column, index) in subColumns"
+                :key="index"
+                :label="column.columnName + '：' + column.columnComment"
+                :value="column.columnName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </template>
+
+  </el-form>
+</template>
+
+<script setup>
+import { listMenu } from "@/api/system/menu";
+
+const subColumns = ref([]);
+const menuOptions = ref([]);
+const { proxy } = getCurrentInstance();
+
+const props = defineProps({
+  info: {
+    type: Object,
+    default: null
+  },
+  tables: {
+    type: Array,
+    default: null
+  }
+});
+
+// 表单校验
+const rules = ref({
+  tplCategory: [{ required: true, message: "请选择生成模板", trigger: "blur" }],
+  packageName: [{ required: true, message: "请输入生成包路径", trigger: "blur" }],
+  moduleName: [{ required: true, message: "请输入生成模块名", trigger: "blur" }],
+  businessName: [{ required: true, message: "请输入生成业务名", trigger: "blur" }],
+  functionName: [{ required: true, message: "请输入生成功能名", trigger: "blur" }]
+});
+
+function subSelectChange(value) {
+  props.info.subTableFkName = "";
+}
+
+function tplSelectChange(value) {
+  if (value !== "sub") {
+    props.info.subTableName = "";
+    props.info.subTableFkName = "";
+  }
+}
+
+function setSubTableColumns(value) {
+  for (var item in props.tables) {
+    const name = props.tables[item].tableName;
+    if (value === name) {
+      subColumns.value = props.tables[item].columns;
+      break;
+    }
+  }
+}
+
+/** 查询菜单下拉树结构 */
+function getMenuTreeselect() {
+  listMenu().then(response => {
+    menuOptions.value = proxy.handleTree(response.data, "menuId");
+  });
+}
+
+onMounted(() => {
+  getMenuTreeselect();
+})
+
+watch(() => props.info.subTableName, val => {
+  setSubTableColumns(val);
+});
+
+watch(() => props.info.tplWebType, val => {
+  if (val === '') {
+    props.info.tplWebType = "element-plus";
+  }
+});
+
+</script>

frontend/src/views/gencode/backcode/components/importTable.vue

@@ -0,0 +1,126 @@
+<template>
+  <!-- 导入表 -->
+  <el-dialog title="导入表" v-model="visible" width="800px" top="5vh" append-to-body>
+    <el-form :model="queryParams" ref="queryRef" :inline="true">
+      <el-form-item label="表名称" prop="tableName">
+        <el-input
+          v-model="queryParams.tableName"
+          placeholder="请输入表名称"
+          clearable
+          style="width: 180px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="表描述" prop="tableComment">
+        <el-input
+          v-model="queryParams.tableComment"
+          placeholder="请输入表描述"
+          clearable
+          style="width: 180px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row>
+      <el-table @row-click="clickRow" ref="table" :data="dbTableList" @selection-change="handleSelectionChange" height="260px">
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column prop="tableName" label="表名称" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column prop="tableComment" label="表描述" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column prop="createTime" label="创建时间"></el-table-column>
+        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
+      </el-table>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </el-row>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="handleImportTable">确 定</el-button>
+        <el-button @click="visible = false">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import GencodeAPI from "@/api/generator/gencode";
+
+const total = ref(0);
+const visible = ref(false);
+const tables = ref([]);
+const dbTableList = ref([]);
+const { proxy } = getCurrentInstance();
+
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  tableName: undefined,
+  tableComment: undefined
+});
+
+const emit = defineEmits(["ok"]);
+
+/** 查询参数列表 */
+function show() {
+  getList();
+  visible.value = true;
+}
+
+/** 单击选择行 */
+function clickRow(row) {
+  proxy.$refs.table.toggleRowSelection(row);
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  tables.value = selection.map(item => item.tableName);
+}
+
+/** 查询表数据 */
+function getList() {
+  GencodeAPI.listDbTable(queryParams).then(res => {
+    dbTableList.value = res.rows;
+    total.value = res.total;
+  });
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+/** 导入按钮操作 */
+function handleImportTable() {
+  const tableNames = tables.value.join(",");
+  if (tableNames == "") {
+    proxy.$modal.msgError("请选择要导入的表");
+    return;
+  }
+  GencodeAPI.importTable({ tables: tableNames }).then(res => {
+    proxy.$modal.msgSuccess(res.msg);
+    if (res.code === 200) {
+      visible.value = false;
+      emit("ok");
+    }
+  });
+}
+
+defineExpose({
+  show,
+});
+</script>

frontend/src/views/gencode/backcode/index.vue

@@ -1,173 +1,323 @@
-<!--
-  低代码页面生成器 - 主界面
-  整合 Palette、Canvas、Inspector 三个核心组件
--->
 <template>
-  <div class="container">
-    <!-- 左侧组件库 -->
-    <Palette @add-component="handleAddComponent" />
-    
-    <!-- 中间画布 -->
-    <Canvas
-      :components="components"
-      :selected-component-id="selectedComponentId || undefined"
-      @update-components="handleUpdateComponents"
-      @select-component="handleSelectComponent"
-      @update-component="handleUpdateComponent"
-      @delete-component="handleDeleteComponent"
-      @move-component="handleMoveComponent"
-    />
-    
-    <!-- 右侧属性面板 -->
-    <Inspector
-      :selected-component="selectedComponent"
-      @update-component="handleUpdateComponent"
-      @delete-component="handleDeleteComponent"
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+      <el-form-item label="表名称" prop="tableName">
+        <el-input
+          v-model="queryParams.tableName"
+          placeholder="请输入表名称"
+          clearable
+          style="width: 200px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="表描述" prop="tableComment">
+        <el-input
+          v-model="queryParams.tableComment"
+          placeholder="请输入表描述"
+          clearable
+          style="width: 200px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" style="width: 308px">
+        <el-date-picker
+          v-model="dateRange"
+          value-format="YYYY-MM-DD"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery" v-hasPermi="['generator:gencode:query']">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery" v-hasPermi="['generator:gencode:query']">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Download"
+          :disabled="multiple"
+          @click="handleGenTable"
+          v-hasPermi="['generator:gencode:code']"
+        >生成</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="openCreateTable"
+          v-hasRole="['admin']"
+        >创建</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="Upload"
+          @click="openImportTable"
+          v-hasPermi="['generator:gencode:import']"
+        >导入</el-button>
+      </el-col>
+      <el-col :span="1.5">
+          <el-button
+           type="success"
+           plain
+           icon="Edit"
+           :disabled="single"
+           @click="handleEditTable"
+           v-hasPermi="['generator:gencode:update']"
+          >修改</el-button>
+        </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['generator:gencode:delete']"
+        >删除</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" align="center" width="55"></el-table-column>
+      <el-table-column label="序号" type="index" width="50" align="center">
+        <template #default="scope">
+          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="表名称"
+        align="center"
+        prop="tableName"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="表描述"
+        align="center"
+        prop="tableComment"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="实体"
+        align="center"
+        prop="className"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="160" />
+      <el-table-column label="更新时间" align="center" prop="updateTime" width="160" />
+      <el-table-column label="操作" align="center" width="330" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-tooltip content="预览" placement="top">
+            <el-button link type="primary" icon="View" @click="handlePreview(scope.row)" v-hasPermi="['generator:gencode:query']"></el-button>
+          </el-tooltip>
+          <el-tooltip content="编辑" placement="top">
+            <el-button link type="primary" icon="Edit" @click="handleEditTable(scope.row)" v-hasPermi="['generator:gencode:update']"></el-button>
+          </el-tooltip>
+          <el-tooltip content="删除" placement="top">
+            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['generator:gencode:delete']"></el-button>
+          </el-tooltip>
+          <el-tooltip content="同步" placement="top">
+            <el-button link type="primary" icon="Refresh" @click="handleSynchDb(scope.row)" v-hasPermi="['generator:gencode:edit']"></el-button>
+          </el-tooltip>
+          <el-tooltip content="生成代码" placement="top">
+            <el-button link type="primary" icon="Download" @click="handleGenTable(scope.row)" v-hasPermi="['generator:gencode:code']"></el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
     />
+    <!-- 预览界面 -->
+    <el-dialog :title="preview.title" v-model="preview.open" width="80%" top="5vh" append-to-body class="scrollbar">
+      <el-tabs v-model="preview.activeName">
+        <el-tab-pane
+          v-for="(value, key) in preview.data"
+          :label="key.substring(key.lastIndexOf('/')+1,key.indexOf('.jinja2'))"
+          :name="key.substring(key.lastIndexOf('/')+1,key.indexOf('.jinja2'))"
+          :key="value"
+        >
+          <el-link :underline="false" icon="DocumentCopy" v-copyText="value" v-copyText:callback="copyTextSuccess" style="float:right">&nbsp;复制</el-link>
+          <pre>{{ value }}</pre>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+    <import-table ref="importRef" @ok="handleQuery" />
+    <create-table ref="createRef" @ok="handleQuery" />
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
-import Palette from './components/Palette.vue';
-import Canvas from './components/Canvas.vue';
-import Inspector from './components/Inspector.vue';
-import { ComponentSchema, PageSchema, generateId } from './utils/schema';
-import { generateVueFile, exportAsFile, copyToClipboard } from './utils/serializer';
-
-// 响应式数据
-const components = ref<ComponentSchema[]>([]);
-const selectedComponentId = ref<string | null>(null);
-
-
-// 计算属性
-const selectedComponent = computed(() => {
-  if (!selectedComponentId.value) return null;
-  return findComponentById(components.value, selectedComponentId.value);
+<script setup name="Gen">
+defineOptions({
+    name: "GenCode",
+    inheritAttrs: false,
 });
 
-// 查找组件
-function findComponentById(components: ComponentSchema[], id: string): ComponentSchema | null {
-  for (const component of components) {
-    if (component.id === id) {
-      return component;
-    }
-    if (component.children) {
-      const found = findComponentById(component.children, id);
-      if (found) return found;
-    }
-  }
-  return null;
-}
+import GencodeAPI from "@/api/generator/gencode";
+import router from "@/router";
+import importTable from "@/views/gencode/backcode/components/importTable.vue";
+import createTable from "@/views/gencode/backcode/components/createTable.vue";
 
-// 处理添加组件
-function handleAddComponent(component: ComponentSchema) {
-  components.value.push(component);
-  selectedComponentId.value = component.id;
-  ElMessage.success(`已添加 ${component.type} 组件`);
-}
+const route = useRoute();
+const { proxy } = getCurrentInstance();
 
-// 处理更新组件列表
-function handleUpdateComponents(newComponents: ComponentSchema[]) {
-  components.value = newComponents;
-}
+const tableList = ref([]);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const tableNames = ref([]);
+const dateRange = ref([]);
+const uniqueId = ref("");
 
-// 处理选择组件
-function handleSelectComponent(component: ComponentSchema | null) {
-  selectedComponentId.value = component?.id || null;
-}
-
-// 处理更新组件
-function handleUpdateComponent(component: ComponentSchema) {
-  updateComponentById(components.value, component);
-}
-
-// 更新组件
-function updateComponentById(components: ComponentSchema[], updatedComponent: ComponentSchema) {
-  for (let i = 0; i < components.length; i++) {
-    if (components[i].id === updatedComponent.id) {
-      components[i] = updatedComponent;
-      return;
-    }
-    if (components[i].children) {
-      updateComponentById(components[i].children!, updatedComponent);
-    }
-  }
-}
-
-// 处理删除组件
-function handleDeleteComponent(componentId: string) {
-  deleteComponentById(components.value, componentId);
-  if (selectedComponentId.value === componentId) {
-    selectedComponentId.value = null;
-  }
-}
-
-// 删除组件
-function deleteComponentById(components: ComponentSchema[], id: string): boolean {
-  for (let i = 0; i < components.length; i++) {
-    if (components[i].id === id) {
-      components.splice(i, 1);
-      return true;
-    }
-    if (components[i].children) {
-      if (deleteComponentById(components[i].children!, id)) {
-        return true;
-      }
-    }
-  }
-  return false;
-}
-
-// 处理移动组件
-function handleMoveComponent(fromIndex: number, toIndex: number) {
-  const component = components.value.splice(fromIndex, 1)[0];
-  components.value.splice(toIndex, 0, component);
-}
-
-
-// 组件挂载时加载本地数据
-onMounted(() => {
-  try {
-    const savedComponents = localStorage.getItem('lowcode-components');
-    if (savedComponents) {
-      components.value = JSON.parse(savedComponents);
-    }
-  } catch (error) {
-    console.warn('加载本地数据失败:', error);
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    tableName: undefined,
+    tableComment: undefined
+  },
+  preview: {
+    open: false,
+    title: "代码预览",
+    data: {},
+    activeName: "do.py"
   }
 });
 
-// 监听组件变化，自动保存到本地存储
-watch(() => components.value, (newComponents) => {
-  try {
-    localStorage.setItem('lowcode-components', JSON.stringify(newComponents));
-  } catch (error) {
-    console.warn('保存到本地存储失败:', error);
+const { queryParams, preview } = toRefs(data);
+
+onActivated(() => {
+  const time = route.query.t;
+  if (time != null && time != uniqueId.value) {
+    uniqueId.value = time;
+    queryParams.value.pageNum = Number(route.query.pageNum);
+    dateRange.value = [];
+    proxy.resetForm("queryForm");
+    getList();
   }
-}, { deep: true });
+})
+
+/** 查询表集合 */
+function getList() {
+  loading.value = true;
+  GencodeAPI.listTable(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+    tableList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 生成代码操作 */
+function handleGenTable(row) {
+  const tbNames = row.tableName || tableNames.value;
+  if (tbNames == "") {
+    proxy.$modal.msgError("请选择要生成的数据");
+    return;
+  }
+  if (row.genType === "1") {
+    GencodeAPI.genCodeToPath(row.tableName).then(() => {
+      proxy.$modal.msgSuccess("成功生成到自定义路径：" + row.genPath);
+    });
+  } else {
+    GencodeAPI.batchGenCode(tbNames).then(response => {
+      const blob = new Blob([response], { type: 'application/zip' });
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = 'code.zip';
+      link.click();
+      window.URL.revokeObjectURL(url);
+    });
+  }
+}
+
+/** 同步数据库操作 */
+function handleSynchDb(row) {
+  const tableName = row.tableName;
+  proxy.$modal.confirm('确认要强制同步"' + tableName + '"表结构吗？').then(function () {
+    return GencodeAPI.syncDb(tableName);
+  }).then(() => {
+    proxy.$modal.msgSuccess("同步成功");
+  }).catch(() => {});
+}
+
+/** 打开导入表弹窗 */
+function openImportTable() {
+  proxy.$refs["importRef"].show();
+}
+
+/** 打开创建表弹窗 */
+function openCreateTable() {
+  proxy.$refs["createRef"].show();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = [];
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+/** 预览按钮 */
+function handlePreview(row) {
+  GencodeAPI.previewTable(row.tableId).then(response => {
+    preview.value.data = response.data;
+    preview.value.open = true;
+    preview.value.activeName = "do.py";
+  });
+}
+
+/** 复制代码成功 */
+function copyTextSuccess() {
+  proxy.$modal.msgSuccess("复制成功");
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.tableId);
+  tableNames.value = selection.map(item => item.tableName);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 修改按钮操作 */
+function handleEditTable(row) {
+  const tableId = row.tableId || ids.value[0];
+  router.push({ path: "/tool/gen-edit/index/" + tableId, query: { pageNum: queryParams.value.pageNum } });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const tableIds = row.tableId ? [row.tableId] : ids.value;
+  proxy.$modal.confirm('是否确认删除表编号为"' + tableIds + '"的数据项？').then(function () {
+    return GencodeAPI.deleteTable(tableIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+
+getList();
 </script>
-
-<style scoped>
-.container {
-  position: relative;
-  width: 100%;
-  background-color: var(--el-bg-color-overlay);
-  height: calc(100vh - 50px - 40px);
-  overflow: hidden;
-}
-
-/* 响应式设计 */
-@media (max-width: 1200px) {
-  .container {
-    height: calc(100vh - 40px);
-  }
-}
-
-@media (max-width: 768px) {
-  .container {
-    height: calc(100vh - 30px);
-  }
-}
-</style>

frontend/src/views/gencode/webcode/components/RightPanel.vue

@@ -993,4 +993,4 @@ function tagChange(tagIcon) {
   font-size: 14px;
   padding-right: 8px;
 }
-</style>
+</style>

frontend/src/views/gencode/webcode/demo/index.vue

@@ -0,0 +1,173 @@
+<!--
+  低代码页面生成器 - 主界面
+  整合 Palette、Canvas、Inspector 三个核心组件
+-->
+<template>
+  <div class="container">
+    <!-- 左侧组件库 -->
+    <Palette @add-component="handleAddComponent" />
+    
+    <!-- 中间画布 -->
+    <Canvas
+      :components="components"
+      :selected-component-id="selectedComponentId || undefined"
+      @update-components="handleUpdateComponents"
+      @select-component="handleSelectComponent"
+      @update-component="handleUpdateComponent"
+      @delete-component="handleDeleteComponent"
+      @move-component="handleMoveComponent"
+    />
+    
+    <!-- 右侧属性面板 -->
+    <Inspector
+      :selected-component="selectedComponent"
+      @update-component="handleUpdateComponent"
+      @delete-component="handleDeleteComponent"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import Palette from './components/Palette.vue';
+import Canvas from './components/Canvas.vue';
+import Inspector from './components/Inspector.vue';
+import { ComponentSchema, PageSchema, generateId } from './utils/schema';
+import { generateVueFile, exportAsFile, copyToClipboard } from './utils/serializer';
+
+// 响应式数据
+const components = ref<ComponentSchema[]>([]);
+const selectedComponentId = ref<string | null>(null);
+
+
+// 计算属性
+const selectedComponent = computed(() => {
+  if (!selectedComponentId.value) return null;
+  return findComponentById(components.value, selectedComponentId.value);
+});
+
+// 查找组件
+function findComponentById(components: ComponentSchema[], id: string): ComponentSchema | null {
+  for (const component of components) {
+    if (component.id === id) {
+      return component;
+    }
+    if (component.children) {
+      const found = findComponentById(component.children, id);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+// 处理添加组件
+function handleAddComponent(component: ComponentSchema) {
+  components.value.push(component);
+  selectedComponentId.value = component.id;
+  ElMessage.success(`已添加 ${component.type} 组件`);
+}
+
+// 处理更新组件列表
+function handleUpdateComponents(newComponents: ComponentSchema[]) {
+  components.value = newComponents;
+}
+
+// 处理选择组件
+function handleSelectComponent(component: ComponentSchema | null) {
+  selectedComponentId.value = component?.id || null;
+}
+
+// 处理更新组件
+function handleUpdateComponent(component: ComponentSchema) {
+  updateComponentById(components.value, component);
+}
+
+// 更新组件
+function updateComponentById(components: ComponentSchema[], updatedComponent: ComponentSchema) {
+  for (let i = 0; i < components.length; i++) {
+    if (components[i].id === updatedComponent.id) {
+      components[i] = updatedComponent;
+      return;
+    }
+    if (components[i].children) {
+      updateComponentById(components[i].children!, updatedComponent);
+    }
+  }
+}
+
+// 处理删除组件
+function handleDeleteComponent(componentId: string) {
+  deleteComponentById(components.value, componentId);
+  if (selectedComponentId.value === componentId) {
+    selectedComponentId.value = null;
+  }
+}
+
+// 删除组件
+function deleteComponentById(components: ComponentSchema[], id: string): boolean {
+  for (let i = 0; i < components.length; i++) {
+    if (components[i].id === id) {
+      components.splice(i, 1);
+      return true;
+    }
+    if (components[i].children) {
+      if (deleteComponentById(components[i].children!, id)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+// 处理移动组件
+function handleMoveComponent(fromIndex: number, toIndex: number) {
+  const component = components.value.splice(fromIndex, 1)[0];
+  components.value.splice(toIndex, 0, component);
+}
+
+
+// 组件挂载时加载本地数据
+onMounted(() => {
+  try {
+    const savedComponents = localStorage.getItem('lowcode-components');
+    if (savedComponents) {
+      components.value = JSON.parse(savedComponents);
+    }
+  } catch (error) {
+    console.warn('加载本地数据失败:', error);
+  }
+});
+
+// 监听组件变化，自动保存到本地存储
+watch(() => components.value, (newComponents) => {
+  try {
+    localStorage.setItem('lowcode-components', JSON.stringify(newComponents));
+  } catch (error) {
+    console.warn('保存到本地存储失败:', error);
+  }
+}, { deep: true });
+</script>
+
+<style scoped>
+.container {
+  position: relative;
+  width: 100%;
+  background-color: var(--el-bg-color-overlay);
+  height: calc(100vh - 50px - 40px);
+  overflow: hidden;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .container {
+    height: calc(100vh - 40px);
+  }
+}
+
+@media (max-width: 768px) {
+  .container {
+    height: calc(100vh - 30px);
+  }
+}
+</style>

frontend/src/views/gencode/webcode/index.vue

@@ -11,9 +11,10 @@
           <div class="components-title">
             <svg-icon icon-class="component" />输入型组件
           </div>
-          <draggable class="components-draggable" :list="inputComponents"
+          <draggable
+class="components-draggable" :list="inputComponents"
             :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
-            draggable=".components-item" :sort="false" @end="onEnd" item-key="label">
+            draggable=".components-item" :sort="false" item-key="label" @end="onEnd">
             <template #item="{ element, index }">
               <div :key="index" class="components-item" @click="addComponent(element)">
                 <div class="components-body">
@@ -26,9 +27,10 @@
           <div class="components-title">
             <svg-icon icon-class="component" />选择型组件
           </div>
-          <draggable class="components-draggable" :list="selectComponents"
+          <draggable
+class="components-draggable" :list="selectComponents"
             :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
-            draggable=".components-item" :sort="false" @end="onEnd" item-key="label">
+            draggable=".components-item" :sort="false" item-key="label" @end="onEnd">
             <template #item="{ element, index }">
               <div :key="index" class="components-item" @click="addComponent(element)">
                 <div class="components-body">
@@ -41,9 +43,10 @@
           <div class="components-title">
             <svg-icon icon-class="component" /> 布局型组件
           </div>
-          <draggable class="components-draggable" :list="layoutComponents"
+          <draggable
+class="components-draggable" :list="layoutComponents"
             :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
-            draggable=".components-item" :sort="false" @end="onEnd" item-key="label">
+            draggable=".components-item" :sort="false" item-key="label" @end="onEnd">
             <template #item="{ element, index }">
               <div :key="index" class="components-item" @click="addComponent(element)">
                 <div class="components-body">
@@ -58,13 +61,13 @@
     </div>
     <div class="center-board">
       <div class="action-bar">
-        <el-button icon="Download" type="primary" text @click="download">
+        <el-button icon="Download" type="primary" text @click="download" v-hasPermi="['generator:webcode:download']">
           导出vue文件
         </el-button>
-        <el-button class="copy-btn-main" icon="DocumentCopy" type="primary" text @click="copy">
+        <el-button class="copy-btn-main" icon="DocumentCopy" type="primary" text @click="copy" v-hasPermi="['generator:webcode:copy']">
           复制代码
         </el-button>
-        <el-button class="delete-btn" icon="Delete" text @click="empty" type="danger">
+        <el-button class="delete-btn" icon="Delete" text type="danger" @click="empty" v-hasPermi="['generator:webcode:empty']">
           清空
         </el-button>
       </div>
@@ -72,12 +75,14 @@
         <el-row class="center-board-row" :gutter="formConf.gutter">
           <el-form :size="formConf.size" :label-position="formConf.labelPosition" :disabled="formConf.disabled"
             :label-width="formConf.labelWidth + 'px'">
-            <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup"
+            <draggable 
+              class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup"
               item-key="label">
               <template #item="{ element, index }">
-                <draggable-item :key="element.renderKey" :drawing-list="drawingList" :element="element" :index="index"
-                  :active-id="activeId" :form-conf="formConf" @activeItem="activeFormItem" @copyItem="drawingItemCopy"
-                  @deleteItem="drawingItemDelete" />
+                <DraggableItem 
+                  :key="element.renderKey" :drawing-list="drawingList" :element="element" :index="index"
+                  :active-id="activeId" :form-conf="formConf" @active-item="activeFormItem" @copy-item="drawingItemCopy"
+                  @delete-item="drawingItemDelete" />
               </template>
             </draggable>
             <div v-show="!drawingList.length" class="empty-info">
@@ -87,10 +92,11 @@
         </el-row>
       </el-scrollbar>
     </div>
-    <right-panel :active-data="activeData" :form-conf="formConf" :show-field="!!drawingList.length"
+    <RightPanel 
+      :active-data="activeData" :form-conf="formConf" :show-field="!!drawingList.length"
       @tag-change="tagChange" />
 
-    <code-type-dialog v-model="dialogVisible" title="选择生成类型" :showFileName="showFileName" @confirm="generate" />
+    <CodeTypeDialog v-model="dialogVisible" title="选择生成类型" :show-file-name="showFileName" @confirm="generate" />
     <input id="copyNode" type="hidden">
   </div>
 </template>
@@ -108,9 +114,9 @@ import { makeUpJs } from '@/utils/generator/js'
 import { makeUpCss } from '@/utils/generator/css'
 import Download from '@/plugins/download.ts'
 import { ElNotification, ElMessageBox, ElMessage } from 'element-plus'
-import DraggableItem from './DraggableItem.vue'
-import RightPanel from './RightPanel.vue'
-import CodeTypeDialog from './CodeTypeDialog.vue'
+import DraggableItem from './components/DraggableItem.vue'
+import RightPanel from './components/RightPanel.vue'
+import CodeTypeDialog from './components/CodeTypeDialog.vue'
 import { onMounted, watch, ref, nextTick } from 'vue'
 
 const drawingList = ref(drawingDefalut)

frontend/src/views/monitor/cache/index.vue

@@ -124,7 +124,7 @@
                     </el-tooltip>
                   </div>
                   <div>
-                    <el-button type="primary" link icon="RefreshRight" @click="refreshCacheNames" />
+                    <el-button type="primary" link icon="RefreshRight" @click="refreshCacheNames" v-hasPerm="['monitor:cache:refresh']" />
                   </div>
                 </div>
               </template>
@@ -134,7 +134,7 @@
                 </template>
                 <el-table-column prop="cache_name" label="缓存名称" show-overflow-tooltip>
                   <template #default="{ row }">
-                    <el-button type="primary" link @click="getCacheKeyList(row)">{{ row.cache_name }}</el-button>
+                    <el-button type="primary" link @click="getCacheKeyList(row)" v-hasPerm="['monitor:cache:view']">{{ row.cache_name }}</el-button>
                   </template>
                 </el-table-column>
                 <el-table-column prop="remark" label="备注" show-overflow-tooltip />
@@ -142,7 +142,7 @@
                   <template #default="{ row }">
                     <el-popconfirm class="box-item" :title="`确认删除缓存 ${row.cache_name} 吗？`" placement="top" @confirm="handleClearCacheName(row)">
                       <template #reference>
-                        <el-button type="danger" size="small" link icon="delete" />
+                        <el-button type="danger" size="small" link icon="delete" v-hasPerm="['monitor:cache:delete']" />
                       </template>
                     </el-popconfirm>
                   </template>
@@ -168,7 +168,7 @@
                     </el-tooltip>
                   </div>
                   <div>
-                    <el-button type="primary" link icon="RefreshRight" @click="refreshCacheKeys" />
+                    <el-button type="primary" link icon="RefreshRight" @click="refreshCacheKeys" v-hasPerm="['monitor:cache:refresh']" />
                   </div>
                 </div>
               </template>
@@ -178,7 +178,7 @@
                 </template>
                 <el-table-column prop="cacheKey" label="缓存键名" show-overflow-tooltip>
                   <template #default="{ row }">
-                    <el-button type="primary" link @click="handleCacheValue(row.cacheKey)">{{ row.cacheKey
+                    <el-button type="primary" link @click="handleCacheValue(row.cacheKey)" v-hasPerm="['monitor:cache:detail']">{{ row.cacheKey
                       }}</el-button>
                   </template>
                 </el-table-column>
@@ -186,7 +186,7 @@
                   <template #default="{ row }">
                     <el-popconfirm class="box-item" :title="`确认删除键 ${row.cacheKey} 吗？`" placement="top" @confirm="handleClearCacheKey(row.cacheKey)">
                       <template #reference>
-                        <el-button type="danger" size="small" link icon="delete" />
+                        <el-button type="danger" size="small" link icon="delete" v-hasPerm="['monitor:cache:delete']" />
                       </template>
                     </el-popconfirm>
                   </template>
@@ -212,7 +212,7 @@
                     </el-tooltip>
                   </div>
                   <div>
-                    <el-button type="danger" link icon="delete" @click="handleClearCacheAll">清理全部</el-button>
+                    <el-button type="danger" link icon="delete" @click="handleClearCacheAll" v-hasPerm="['monitor:cache:delete_all']">清理全部</el-button>
                   </div>
                 </div>
               </template>

frontend/src/views/monitor/job/components/JobLogDrawer.vue

@@ -151,7 +151,6 @@ const props = defineProps({
 })
 
 import JobAPI, { JobLogPageQuery, JobLogTable } from "@/api/monitor/job";
-import { ElMessageBox } from "element-plus";
 import { useAppStore } from "@/store/modules/app.store";
 import { DeviceEnum } from "@/enums/settings/device.enum";
 

frontend/src/views/monitor/job/index.vue

@@ -36,10 +36,10 @@
         </el-form-item>
         <!-- 查询、重置、展开/收起按钮 -->
         <el-form-item class="search-buttons">
-          <el-button type="primary" icon="search" @click="handleQuery"
+          <el-button type="primary" icon="search" @click="handleQuery" v-hasPerm="['monitor:job:query']"
             >查询</el-button
           >
-          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
+          <el-button icon="refresh" @click="handleResetQuery" v-hasPerm="['monitor:job:query']">重置</el-button>
           <!-- 展开/收起 -->
           <template v-if="isExpandable">
             <el-link
@@ -83,6 +83,7 @@
             type="success"
             icon="plus"
             @click="handleOpenDialog('create')"
+            v-hasPerm="['monitor:job:create']"
             >新增</el-button
           >
           <el-button
@@ -90,6 +91,7 @@
             icon="delete"
             :disabled="selectIds.length === 0"
             @click="handleDelete(selectIds)"
+            v-hasPerm="['monitor:job:delete']"
             >批量删除</el-button
           >
         </div>
@@ -100,10 +102,11 @@
               icon="download"
               circle
               @click="handleExport"
+              v-hasPerm="['monitor:job:export']"
             />
           </el-tooltip>
           <el-tooltip content="清除">
-            <el-button type="danger" icon="delete" circle @click="handleClear" />
+            <el-button type="danger" icon="delete" circle @click="handleClear" v-hasPerm="['monitor:job:clear']" />
           </el-tooltip>
           <el-tooltip content="刷新">
             <el-button
@@ -111,6 +114,7 @@
               icon="refresh"
               circle
               @click="handleRefresh"
+              v-hasPerm="['monitor:job:refresh']"
             />
           </el-tooltip>
         </div>
@@ -213,6 +217,7 @@
                 link
                 icon="edit"
                 @click="handleOpenDialog('update', scope.row.id)"
+                v-hasPerm="['monitor:job:update']"
               >
                 编辑
               </el-button>
@@ -222,10 +227,11 @@
                 link
                 icon="delete"
                 @click="handleDelete([scope.row.id])"
+                v-hasPerm="['monitor:job:delete']"
               >
                 删除
               </el-button>
-              <el-dropdown trigger="click">
+              <el-dropdown trigger="click" v-hasPerm="['monitor:job:status']">
                 <el-button type="warning" size="small" link icon="ArrowDown"
                   >更多</el-button
                 >
@@ -560,7 +566,7 @@
             @click="handleSubmit"
             >确定</el-button
           >
-          <el-button v-else type="primary" @click="handleCloseDialog"
+          <el-button v-else type="primary" @click="handleCloseDialog" v-hasPerm="['monitor:job:detail']"
             >确定</el-button
           >
         </div>

frontend/src/views/monitor/online/index.vue

@@ -15,8 +15,8 @@
         </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>
+          <el-button type="primary" icon="search" @click="handleQuery" v-hasPerm="['monitor:online:query']">查询</el-button>
+          <el-button icon="refresh" @click="handleResetQuery" v-hasPerm="['monitor:online:query']">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -37,15 +37,15 @@
       <!-- 功能区域 -->
       <div class="data-table__toolbar">
         <div class="data-table__toolbar--actions">
-          <el-button type="danger" icon="delete" @click="handleClear">强退所有</el-button>
+          <el-button type="danger" icon="delete" @click="handleClear" v-hasPerm="['monitor:online:force_logout']">强退所有</el-button>
         </div>
         <div class="data-table__toolbar--tools">
           <el-tooltip content="刷新">
-            <el-button type="primary" icon="refresh" circle @click="handleRefresh" />
+            <el-button type="primary" icon="refresh" circle @click="handleRefresh" v-hasPerm="['monitor:online:refresh']" />
           </el-tooltip>
           <el-tooltip content="列表筛选">
-            <el-dropdown trigger="click">
-              <el-button type="default" icon="operation" circle />
+            <el-dropdown trigger="click" v-hasPerm="['monitor:online:filter']">
+                <el-button type="default" icon="operation" circle />
               <template #dropdown>
                 <el-dropdown-menu>
                   <el-dropdown-item v-for="column in tableColumns" :key="column.prop" :command="column">
@@ -81,7 +81,7 @@
         <el-table-column v-if="tableColumns.find(col => col.prop === 'login_time')?.show" key="login_time" label="登录时间" prop="login_time" min-width="180" />
         <el-table-column v-if="tableColumns.find(col => col.prop === 'operation')?.show" key="operation" fixed="right" label="操作" min-width="100">
           <template #default="scope">
-            <el-button type="danger" size="small" link icon="delete" @click="handleSubmit(scope.row.session_id)">强退
+            <el-button type="danger" size="small" link icon="delete" @click="handleSubmit(scope.row.session_id)" v-hasPerm="['monitor:online:force_logout']">强退
             </el-button>
           </template>
         </el-table-column>
@@ -104,7 +104,6 @@ defineOptions({
 });
 
 import OnlineAPI, { type OnlineUserPageQuery, type OnlineUserTable } from "@/api/monitor/online";
-import { ElMessageBox } from "element-plus";
 
 const queryFormRef = ref();
 const total = ref(0);

frontend/src/views/monitor/resource/index.vue

@@ -3,38 +3,12 @@
     <!-- 搜索区域 -->
     <div class="search-container">
       <el-form ref="queryFormRef" :model="queryFormData" :inline="true" label-suffix=":">
-        <el-form-item prop="keyword" label="关键词">
-          <el-input v-model="queryFormData.keyword" placeholder="请输入文件名或关键词" clearable />
-        </el-form-item>
-        <el-form-item prop="file_type" label="文件类型">
-          <el-select v-model="queryFormData.file_type" placeholder="请选择" style="width: 167.5px" clearable>
-            <el-option label="图片" value="image" />
-            <el-option label="文档" value="document" />
-            <el-option label="视频" value="video" />
-            <el-option label="音频" value="audio" />
-            <el-option label="其他" value="other" />
-          </el-select>
-        </el-form-item>
-        <el-form-item prop="min_size" label="文件大小">
-          <el-input-number
-            v-model="queryFormData.min_size"
-            placeholder="最小"
-            :min="0"
-            controls-position="right"
-            style="width: 120px"
-          />
-          <span style="margin: 0 8px">-</span>
-          <el-input-number
-            v-model="queryFormData.max_size"
-            placeholder="最大"
-            :min="0"
-            controls-position="right"
-            style="width: 120px"
-          />
+        <el-form-item prop="name" label="关键词">
+          <el-input v-model="queryFormData.name" placeholder="请输入文件名或目录名" clearable />
         </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>
+          <el-button type="primary" icon="search" @click="handleQuery" v-hasPerm="['monitor:resource:query']">查询</el-button>
+          <el-button icon="refresh" @click="handleResetQuery" v-hasPerm="['monitor:resource:query']">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -55,30 +29,32 @@
       <!-- 功能区域 -->
       <div class="data-table__toolbar">
         <div class="data-table__toolbar--actions">
-          <el-button type="success" icon="plus" @click="handleUpload">上传文件</el-button>
-          <el-button type="primary" icon="folder-add" @click="handleCreateDir">新建文件夹</el-button>
-          <el-button type="danger" icon="delete" :disabled="selectedItems.length === 0" @click="handleBatchDelete">批量删除</el-button>
+          <el-button type="success" icon="plus" @click="handleUpload" v-hasPerm="['monitor:resource:upload']">上传文件</el-button>
+          <el-button type="primary" icon="folder-add" @click="handleCreateDir" v-hasPerm="['monitor:resource:create_dir']">新建文件夹</el-button>
+          <el-button type="danger" icon="delete" :disabled="selectedItems.length === 0" @click="handleBatchDelete" v-hasPerm="['monitor:resource:delete']">批量删除</el-button>
         </div>
         <div class="data-table__toolbar--tools">
-          <el-checkbox v-model="showHiddenFiles" @change="handleShowHiddenChange">
+          <el-checkbox v-model="showHiddenFiles" @change="handleShowHiddenChange" v-hasPerm="['monitor:resource:show_hidden']">
           显示隐藏文件
         </el-checkbox>
         <el-button-group>
           <el-button
             :type="viewMode === 'list' ? 'primary' : ''"
             @click="viewMode = 'list'"
+            v-hasPerm="['monitor:resource:view_list']"
           >
             <el-icon><List /></el-icon>
           </el-button>
           <el-button
             :type="viewMode === 'grid' ? 'primary' : ''"
             @click="viewMode = 'grid'"
+            v-hasPerm="['monitor:resource:view_grid']"
           >
             <el-icon><Grid /></el-icon>
           </el-button>
         </el-button-group>
           <el-tooltip content="刷新">
-            <el-button type="primary" icon="refresh" circle @click="handleRefresh" />
+            <el-button type="primary" icon="refresh" circle @click="handleRefresh" v-hasPerm="['monitor:resource:refresh']" />
           </el-tooltip>
         </div>
       </div>
@@ -97,7 +73,7 @@
               v-for="(item, index) in breadcrumbList"
               :key="index"
               :class="{ 'is-link': index < breadcrumbList.length - 1 }"
-              @click="handleBreadcrumbClick(item, index)"
+              @click="handleBreadcrumbClick(item)"
             >
               {{ item.name }}
             </el-breadcrumb-item>
@@ -111,7 +87,7 @@
         ref="dataTableRef"
         v-loading="loading"
         :data="fileList"
-        row-key="path"
+        row-key="file_url"
         class="data-table__content"
         height="540"
         border
@@ -133,6 +109,7 @@
               <span 
                 :class="{ 'file-name-clickable': true }"
                 @click="handleFileNameClick(row)"
+                v-hasPerm="['monitor:resource:preview']"
               >
                 {{ row.name }}
               </span>
@@ -159,13 +136,14 @@
               link
               icon="download"
               @click="handleDownload(row)"
+              v-hasPerm="['monitor:resource:download']"
             >
               下载
             </el-button>
-            <el-button type="primary" size="small" link icon="edit" @click="handleRename(row)">
+            <el-button type="primary" size="small" link icon="edit" @click="handleRename(row)" v-hasPerm="['monitor:resource:rename']">
               重命名
             </el-button>
-            <el-button type="danger" size="small" link icon="delete" @click="handleDelete(row)">
+            <el-button type="danger" size="small" link icon="delete" @click="handleDelete(row)" v-hasPerm="['monitor:resource:delete']">
               删除
             </el-button>
           </template>
@@ -176,7 +154,7 @@
       <div v-else class="grid-view">
         <div
           v-for="item in fileList"
-          :key="item.path"
+          :key="item.file_url"
           class="grid-item"
           @click="handleItemClick(item)"
         >
@@ -233,7 +211,7 @@
       </el-upload>
       <template #footer>
         <el-button @click="uploadDialogVisible = false">取消</el-button>
-        <el-button type="primary" :loading="uploading" @click="handleUploadConfirm">
+        <el-button type="primary" :loading="uploading" @click="handleUploadConfirm" v-hasPerm="['monitor:resource:upload']">
           确定上传
         </el-button>
       </template>
@@ -256,7 +234,7 @@
       </el-form>
       <template #footer>
         <el-button @click="createDirDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleCreateDirConfirm">确定</el-button>
+        <el-button type="primary" @click="handleCreateDirConfirm" v-hasPerm="['monitor:resource:create_dir']">确定</el-button>
       </template>
     </el-dialog>
 
@@ -277,13 +255,18 @@
       </el-form>
       <template #footer>
         <el-button @click="renameDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleRenameConfirm">确定</el-button>
+        <el-button type="primary" @click="handleRenameConfirm" v-hasPerm="['monitor:resource:rename']">确定</el-button>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
+defineOptions({
+  name: "ResourceMonitor",
+  inheritAttrs: false,
+});
+
 import { ref, reactive, onMounted, computed } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import {
@@ -294,32 +277,35 @@ import {
   UploadFilled,
   QuestionFilled
 } from '@element-plus/icons-vue'
-import { ResourceAPI, type ResourceItem, type ResourceSearchQuery } from '@/api/monitor/resource'
+import { ResourceAPI, type ResourceItem, type ResourcePageQuery } from '@/api/monitor/resource'
+
+// 分页表单
+const fileList = ref<ResourceItem[]>([])
 
 // 响应式数据
 const loading = ref(false)
-const fileList = ref<ResourceItem[]>([])
 const selectedItems = ref<ResourceItem[]>([])
 const breadcrumbList = ref([{ name: '资源根目录', path: '/' }])
 const showHiddenFiles = ref(false)
 const viewMode = ref<'list' | 'grid'>('list')
 const total = ref(0)
+const isSearchMode = ref(false) // 用于标记是否处于搜索模式
+const queryFormRef = ref()
 
 // 路径相关数据
-const currentPath = ref('/') // 添加当前路径的响应式变量
+const currentPath = ref('/') // 当前路径的响应式变量
 
-// 分页
+// 分页查询参数
 const pagination = reactive({
   page_no: 1,
   page_size: 20
 })
 
-// 搜索表单
-const queryFormData = reactive<ResourceSearchQuery>({
-  keyword: '',
-  file_type: '',
-  min_size: undefined,
-  max_size: undefined
+// 搜索表单数据
+const queryFormData = reactive<ResourcePageQuery>({
+  name: undefined,
+  page_no: 1,
+  page_size: 20
 })
 
 // 对话框状态
@@ -346,7 +332,9 @@ const renameForm = reactive({
 const currentQuery = computed(() => {
   // 构建查询参数
   const query: any = {
-    include_hidden: showHiddenFiles.value
+    include_hidden: showHiddenFiles.value,
+    page_no: pagination.page_no,
+    page_size: pagination.page_size
   }
   
   // 如果当前路径不是根路径，则添加路径参数
@@ -355,25 +343,35 @@ const currentQuery = computed(() => {
     query.path = currentPath.value
   }
   
+  // 添加搜索关键词
+  if (queryFormData.name) {
+    query.name = queryFormData.name
+  }
+  
   return query
 })
 
-// 方法
-const loadFileList = async () => {
+// 加载文件列表
+async function loadFileList() {
+  loading.value = true
   try {
-    loading.value = true
     const response = await ResourceAPI.getResourceList(currentQuery.value)
     
-    // 根据新的 API 响应结构获取数据
-    const data = response.data?.data?.items || response.data?.data
+    // 正确处理后端返回的分页数据结构
+    const pageResult = response.data?.data
     
-    if (Array.isArray(data)) {
-      // 直接使用后端返回的数据结构，无需转换
-      fileList.value = data.map(item => ({
+    if (pageResult && Array.isArray(pageResult.items)) {
+      fileList.value = pageResult.items.map(item => ({
         ...item,
         is_hidden: item.name.startsWith('.')
       }))
-      total.value = response.data?.data?.total_files + response.data?.data?.total_dirs || fileList.value.length
+      total.value = pageResult.total
+      if (pageResult.page_no !== undefined) {
+        pagination.page_no = pageResult.page_no
+      }
+      if (pageResult.page_size !== undefined) {
+        pagination.page_size = pageResult.page_size
+      }
     } else {
       fileList.value = []
       total.value = 0
@@ -388,14 +386,16 @@ const loadFileList = async () => {
   }
 }
 
-const handleBreadcrumbClick = (item: any) => {
+// 面包屑点击处理
+function handleBreadcrumbClick(item: any) {
   // 更新当前路径为点击的面包屑项路径
   currentPath.value = item.path
   updateBreadcrumb()
   loadFileList()
 }
 
-const updateBreadcrumb = () => {
+// 更新面包屑路径
+function updateBreadcrumb() {
   // 对于根路径，直接显示根目录
   if (currentPath.value === '/') {
     breadcrumbList.value = [{ name: '资源根目录', path: '/' }]
@@ -414,7 +414,8 @@ const updateBreadcrumb = () => {
   ]
 }
 
-const handleFileNameClick = (row: ResourceItem) => {
+// 文件名点击处理
+function handleFileNameClick(row: ResourceItem) {
   if (row.is_dir) {
     // 如果当前在根路径，则直接使用文件夹名称
     // 如果当前已在某个文件夹中，则拼接路径
@@ -431,7 +432,8 @@ const handleFileNameClick = (row: ResourceItem) => {
   }
 }
 
-const handleItemClick = (item: ResourceItem) => {
+// 网格视图项目点击处理
+function handleItemClick(item: ResourceItem) {
   if (item.is_dir) {
     // 如果当前在根路径，则直接使用文件夹名称
     // 如果当前已在某个文件夹中，则拼接路径
@@ -449,48 +451,37 @@ const handleItemClick = (item: ResourceItem) => {
 }
 
 // 文件预览
-const handleFilePreview = (file: ResourceItem) => {
-  // 使用后端返回的完整URL路径进行预览
-  let previewUrl = file.path
+function handleFilePreview(file: ResourceItem) {
+  // 直接使用file_url字段进行预览
+  let previewUrl = file.file_url
   
-  // 如果是完整URL，直接使用
-  if (!previewUrl.startsWith('http')) {
-    // 对于相对路径，需要构建完整URL
+  // 如果是相对路径，构建完整URL
+  if (previewUrl && !previewUrl.startsWith('http')) {
     previewUrl = `${window.location.origin}${previewUrl}`
   }
   
-  // 根据文件类型决定预览方式
-  const fileExtension = file.file_extension?.toLowerCase() || ''
-  
-  if (['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg'].includes(fileExtension)) {
-    // 图片预览
-    window.open(previewUrl, '_blank')
-  } else if (['.pdf'].includes(fileExtension)) {
-    // PDF预览
-    window.open(previewUrl, '_blank')
-  } else if (['.txt', '.md', '.json', '.xml', '.html', '.css', '.js', '.ts', '.vue'].includes(fileExtension)) {
-    // 文本文件预览
-    window.open(previewUrl, '_blank')
-  } else {
-    // 其他文件直接下载
-    window.open(previewUrl, '_blank')
-  }
+  // 所有文件类型统一直接打开预览
+  window.open(previewUrl, '_blank')
 }
 
-const handleSelectionChange = (selection: ResourceItem[]) => {
+// 选择项变化处理
+function handleSelectionChange(selection: ResourceItem[]) {
   selectedItems.value = selection
 }
 
-const handleUpload = () => {
+// 打开上传对话框
+function handleUpload() {
   uploadDialogVisible.value = true
   uploadFileList.value = []
 }
 
-const handleUploadChange = (file: any, fileList: any[]) => {
+// 上传文件变化处理
+function handleUploadChange(file: any, fileList: any[]) {
   uploadFileList.value = fileList
 }
 
-const handleUploadConfirm = async () => {
+// 确认上传文件
+async function handleUploadConfirm() {
   if (uploadFileList.value.length === 0) {
     ElMessage.warning('请选择要上传的文件')
     return
@@ -503,17 +494,8 @@ const handleUploadConfirm = async () => {
       formData.append('file', file.raw)
     })
     
-    // 处理目标路径
-    let targetPath = currentPath.value
-    if (targetPath.startsWith('http')) {
-      try {
-        const url = new URL(targetPath)
-        targetPath = url.pathname.replace('/api/v1/static', '') || '/'
-      } catch (error) {
-        console.warn('Failed to parse URL:', targetPath, error)
-      }
-    }
-    
+    // 在根目录时传递空字符串作为target_path，与后端relative_path格式保持一致
+    const targetPath = currentPath.value === '/' ? '' : currentPath.value
     formData.append('target_path', targetPath)
 
     await ResourceAPI.uploadFile(formData)
@@ -528,34 +510,28 @@ const handleUploadConfirm = async () => {
   }
 }
 
-const handleUploadClose = () => {
+// 关闭上传对话框
+function handleUploadClose() {
   uploadDialogVisible.value = false
   uploadFileList.value = []
 }
 
-const handleCreateDir = () => {
+// 打开新建目录对话框
+function handleCreateDir() {
   createDirForm.dir_name = ''
   createDirDialogVisible.value = true
 }
 
-const handleCreateDirConfirm = async () => {
+// 确认创建目录
+async function handleCreateDirConfirm() {
   if (!createDirForm.dir_name.trim()) {
     ElMessage.warning('请输入文件夹名称')
     return
   }
 
   try {
-    // 处理父路径
-    let parentPath = currentPath.value
-    if (parentPath.startsWith('http')) {
-      try {
-        const url = new URL(parentPath)
-        parentPath = url.pathname.replace('/api/v1/static', '') || '/'
-      } catch (error) {
-        console.warn('Failed to parse URL:', parentPath, error)
-      }
-    }
-    
+    // 在根目录时传递空字符串作为parent_path，与后端relative_path格式保持一致
+    const parentPath = currentPath.value === '/' ? '' : currentPath.value
     await ResourceAPI.createDirectory({
       parent_path: parentPath,
       dir_name: createDirForm.dir_name.trim()
@@ -569,67 +545,35 @@ const handleCreateDirConfirm = async () => {
   }
 }
 
-const handleRefresh = () => {
+// 列表刷新
+async function handleRefresh() {
+  await loadFileList()
+}
+
+// 查询（重置页码后获取数据）
+async function handleQuery() {
+  queryFormData.page_no = 1
+  await loadFileList()
+}
+
+// 重置查询
+async function handleResetQuery() {
+  queryFormRef.value.resetFields()
+  queryFormData.page_no = 1
+  isSearchMode.value = false // 退出搜索模式
+  await loadFileList()
+}
+
+// 显示隐藏文件切换
+function handleShowHiddenChange() {
   loadFileList()
 }
 
-const handleQuery = async () => {
+// 文件下载
+async function handleDownload(item: ResourceItem) {
   try {
-    loading.value = true
-    const response = await ResourceAPI.searchResource(queryFormData)
-    
-    // 根据新的 API 响应结构获取数据
-    const data = response.data?.data?.items || response.data?.data
-    if (Array.isArray(data)) {
-      // 直接使用后端返回的数据结构，无需转换
-      fileList.value = data.map(item => ({
-        ...item,
-        is_hidden: item.name.startsWith('.')
-      }))
-      total.value = response.data?.data?.total_files + response.data?.data?.total_dirs || fileList.value.length
-    } else {
-      console.warn('搜索 API 返回的数据不是数组类型:', data)
-      fileList.value = []
-      total.value = 0
-    }
-  } catch (error) {
-    ElMessage.error('搜索失败')
-    console.error('Search error:', error)
-    fileList.value = []
-    total.value = 0
-  } finally {
-    loading.value = false
-  }
-}
-
-const handleResetQuery = () => {
-  Object.assign(queryFormData, {
-    keyword: '',
-    file_type: '',
-    min_size: undefined,
-    max_size: undefined
-  })
-  loadFileList()
-}
-
-const handleShowHiddenChange = () => {
-  loadFileList()
-}
-
-const handleDownload = async (item: ResourceItem) => {
-  try {
-    // 处理完整URL路径
-    let filePath = item.path
-    if (filePath.startsWith('http')) {
-      try {
-        const url = new URL(filePath)
-        filePath = url.pathname.replace('/api/v1/static', '') || '/'
-      } catch (error) {
-        console.warn('Failed to parse URL:', filePath, error)
-      }
-    }
-    
-    const response = await ResourceAPI.downloadFile(filePath)
+    // 使用file_url字段
+    const response = await ResourceAPI.downloadFile(item.file_url)
     const blob = response.data
     const url = window.URL.createObjectURL(blob)
     const a = document.createElement('a')
@@ -645,24 +589,16 @@ const handleDownload = async (item: ResourceItem) => {
   }
 }
 
-const handleRename = (item: ResourceItem) => {
-  // 处理完整URL路径
-  let oldPath = item.path
-  if (oldPath.startsWith('http')) {
-    try {
-      const url = new URL(oldPath)
-      oldPath = url.pathname.replace('/api/v1/static', '') || '/'
-    } catch (error) {
-      console.warn('Failed to parse URL:', oldPath, error)
-    }
-  }
-  
-  renameForm.old_path = oldPath
+// 打开重命名对话框
+function handleRename(item: ResourceItem) {
+  // 使用file_url字段
+  renameForm.old_path = item.file_url
   renameForm.new_name = item.name
   renameDialogVisible.value = true
 }
 
-const handleRenameConfirm = async () => {
+// 确认重命名
+async function handleRenameConfirm() {
   if (!renameForm.new_name.trim()) {
     ElMessage.warning('请输入新名称')
     return
@@ -682,7 +618,8 @@ const handleRenameConfirm = async () => {
   }
 }
 
-const handleDelete = async (item: ResourceItem) => {
+// 文件删除
+async function handleDelete(item: ResourceItem) {
   try {
     await ElMessageBox.confirm(
       `确定要删除 ${item.name} 吗？`,
@@ -694,35 +631,27 @@ const handleDelete = async (item: ResourceItem) => {
       }
     )
 
-    // 处理完整URL路径
-    let filePath = item.path
-    if (filePath.startsWith('http')) {
-      try {
-        const url = new URL(filePath)
-        filePath = url.pathname.replace('/api/v1/static', '') || '/'
-      } catch (error) {
-        console.warn('Failed to parse URL:', filePath, error)
-      }
-    }
-    
-    await ResourceAPI.deleteResource([filePath])
+    // 使用file_url字段
+    await ResourceAPI.deleteResource([item.file_url])
     ElMessage.success('删除成功')
-    loadFileList()
-  } catch (error) {
-    if (error !== 'cancel') {
-      ElMessage.error('删除失败')
-      console.error('Delete error:', error)
-    }
+      loadFileList()
+    } catch (error) {
+      if (error !== 'cancel') {
+        ElMessage.error('删除失败')
+        console.error('Delete error:', error)
+      }
   }
 }
 
-const handlePagination = (params: { page: number; limit: number }) => {
+// 分页处理
+function handlePagination(params: { page: number; limit: number }) {
   pagination.page_no = params.page
   pagination.page_size = params.limit
   loadFileList()
 }
 
-const handleBatchDelete = async () => {
+// 批量删除
+async function handleBatchDelete() {
   if (selectedItems.value.length === 0) {
     ElMessage.warning('请选择要删除的文件')
     return
@@ -739,19 +668,8 @@ const handleBatchDelete = async () => {
       }
     )
 
-    const paths = selectedItems.value.map(item => {
-      // 处理完整URL路径
-      let path = item.path
-      if (path.startsWith('http')) {
-        try {
-          const url = new URL(path)
-          path = url.pathname.replace('/api/v1/static', '') || '/'
-        } catch (error) {
-          console.warn('Failed to parse URL:', path, error)
-        }
-      }
-      return path
-    })
+    // 使用file_url字段
+    const paths = selectedItems.value.map(item => item.file_url)
     
     await ResourceAPI.deleteResource(paths)
     ElMessage.success('删除成功')
@@ -764,9 +682,9 @@ const handleBatchDelete = async () => {
   }
 }
 
-// 工具函数
-const formatFileSize = (size?: number | null) => {
-  if (!size || size === null) return '-'
+// 格式化文件大小
+function formatFileSize(size?: number | null) {
+  if (!size || size === null) return '-'  
   const units = ['B', 'KB', 'MB', 'GB', 'TB']
   let unitIndex = 0
   let fileSize = size

frontend/src/views/monitor/stats/index.vue

@@ -1,200 +0,0 @@
-<template>
-  <div class="app-container">
-    <!-- 存储空间信息 -->
-    <el-row :gutter="16" class="mb-4">
-      <el-col :span="24">
-        <el-card :loading="statsLoading" shadow="hover">
-          <template #header>
-            <div class="flex items-center gap-2">
-              <el-icon><Monitor /></el-icon>
-              <span class="font-medium">存储空间信息</span>
-              <el-tooltip content="存储空间使用详情">
-                <el-icon><QuestionFilled /></el-icon>
-              </el-tooltip>
-            </div>
-          </template>
-          <el-descriptions :column="2" border>
-            <el-descriptions-item label="挂载点">{{ stats?.mount_point || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="总空间">{{ formatFileSize(stats?.total_space) }}</el-descriptions-item>
-            <el-descriptions-item label="已使用">{{ formatFileSize(stats?.used_space) }}</el-descriptions-item>
-            <el-descriptions-item label="可用空间">{{ formatFileSize(stats?.free_space) }}</el-descriptions-item>
-          </el-descriptions>
-          <div class="mt-4">
-            <div class="mb-2">
-              <span>使用率</span>
-            </div>
-            <el-progress 
-              :percentage="Math.round(((stats?.used_space || 0) / (stats?.total_space || 1)) * 100)"
-              :status="getStorageStatus(Math.round(((stats?.used_space || 0) / (stats?.total_space || 1)) * 100))"
-              :text-inside="true"
-              :stroke-width="16"
-            />
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-
-    <!-- 基础统计信息表格 -->
-    <el-row :gutter="16" class="mb-4">
-      <el-col :span="24">
-        <el-card :loading="statsLoading" shadow="hover">
-          <template #header>
-            <div class="flex items-center gap-2">
-              <el-icon><DataAnalysis /></el-icon>
-              <span class="font-medium">基础统计信息</span>
-              <el-tooltip content="文件系统基础统计信息">
-                <el-icon><QuestionFilled /></el-icon>
-              </el-tooltip>
-            </div>
-          </template>
-          <el-table :data="getBasicStatsData()" border>
-            <template #empty>
-              <el-empty :image-size="80" description="暂无数据" />
-            </template>
-            <el-table-column label="文件总数" prop="total_files" align="center" />
-            <el-table-column label="文件夹数" prop="total_dirs" align="center" />
-            <el-table-column label="总大小" prop="total_size" align="center" />
-            <el-table-column label="已使用空间" prop="used_space" align="center" />
-          </el-table>
-        </el-card>
-      </el-col>
-    </el-row>
-
-    <!-- 文件类型和扩展名统计 -->
-    <el-row :gutter="16" class="mb-4">
-      <!-- 文件类型统计 -->
-      <el-col :span="12">
-        <el-card :loading="statsLoading" shadow="hover">
-          <template #header>
-            <div class="flex items-center gap-2">
-              <el-icon><DataAnalysis /></el-icon>
-              <span class="font-medium">文件类型统计</span>
-              <el-tooltip content="按文件类型统计文件数量">
-                <el-icon><QuestionFilled /></el-icon>
-              </el-tooltip>
-            </div>
-          </template>
-          <el-table :data="getTypeStatsData()" border>
-            <template #empty>
-              <el-empty :image-size="80" description="暂无数据" />
-            </template>
-            <el-table-column label="文件类型" prop="type" />
-            <el-table-column label="数量" prop="count" align="center" width="100" />
-          </el-table>
-        </el-card>
-      </el-col>
-
-      <!-- 文件扩展名统计 -->
-      <el-col :span="12">
-        <el-card :loading="statsLoading" shadow="hover">
-          <template #header>
-            <div class="flex items-center gap-2">
-              <el-icon><PieChart /></el-icon>
-              <span class="font-medium">文件扩展名统计</span>
-              <el-tooltip content="按文件扩展名统计文件数量">
-                <el-icon><QuestionFilled /></el-icon>
-              </el-tooltip>
-            </div>
-          </template>
-          <el-table :data="getExtensionStatsData()" border>
-            <template #empty>
-              <el-empty :image-size="80" description="暂无数据" />
-            </template>
-            <el-table-column label="扩展名" prop="extension" />
-            <el-table-column label="数量" prop="count" align="center" width="100" />
-          </el-table>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { ElMessage } from 'element-plus'
-import {
-  Document,
-  Folder,
-  DataAnalysis,
-  PieChart,
-  Monitor,
-  QuestionFilled
-} from '@element-plus/icons-vue'
-import { ResourceAPI, type ResourceStats } from '@/api/monitor/resource'
-
-// 响应式数据
-const stats = ref<ResourceStats | null>(null)
-const statsLoading = ref(false)
-
-// 方法
-const loadStats = async () => {
-  try {
-    statsLoading.value = true
-    const response = await ResourceAPI.getResourceStats()
-    stats.value = response.data.data
-  } catch (error) {
-    ElMessage.error('获取统计信息失败')
-    console.error('Load stats error:', error)
-  } finally {
-    statsLoading.value = false
-  }
-}
-
-// 数据处理函数
-const getBasicStatsData = () => {
-  if (!stats.value) return []
-  return [
-    {
-      total_files: stats.value.total_files || 0,
-      total_dirs: stats.value.total_dirs || 0,
-      total_size: formatFileSize(stats.value.total_size),
-      used_space: formatFileSize(stats.value.used_space)
-    }
-  ]
-}
-
-const getTypeStatsData = () => {
-  if (!stats.value?.type_stats) return []
-  return Object.entries(stats.value.type_stats).map(([type, count]) => ({
-    type,
-    count
-  }))
-}
-
-const getExtensionStatsData = () => {
-  if (!stats.value?.extension_stats) return []
-  return Object.entries(stats.value.extension_stats).map(([extension, count]) => ({
-    extension,
-    count
-  }))
-}
-
-// 工具函数
-const formatFileSize = (size?: number | null) => {
-  if (!size || size === null) return '-'
-  const units = ['B', 'KB', 'MB', 'GB', 'TB']
-  let unitIndex = 0
-  let fileSize = size
-
-  while (fileSize >= 1024 && unitIndex < units.length - 1) {
-    fileSize /= 1024
-    unitIndex++
-  }
-
-  return `${fileSize.toFixed(1)} ${units[unitIndex]}`
-}
-
-// 存储空间使用率状态计算
-const getStorageStatus = (percentage: number) => {
-  if (percentage > 80) return 'exception'
-  if (percentage > 60) return 'warning'
-  return 'success'
-}
-
-// 生命周期
-onMounted(() => {
-  loadStats()
-})
-</script>
-
-<style lang="scss" scoped></style>

frontend/src/views/system/config/components/ConfigInfoDrawer.vue

@@ -40,7 +40,7 @@
     <template #footer> 
       <!-- 操作按钮 -->
       <el-button @click="resetForm">取消</el-button>
-      <el-button type="primary" :disabled="!hasChanges" @click="submitChanges" >保存</el-button>
+      <el-button type="primary" :disabled="!hasChanges" @click="submitChanges" v-hasPerm="['system:config:update']">保存</el-button>
     </template>
   </el-drawer>
 </template>

frontend/src/views/system/config/index.vue

@@ -24,8 +24,8 @@
           />
         </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>
+          <el-button type="primary" icon="search" @click="handleQuery" v-hasPerm="['system:config:query']">查询</el-button>
+          <el-button icon="refresh" @click="handleResetQuery" v-hasPerm="['system:config:query']">重置</el-button>
           <!-- 展开/收起 -->
           <template v-if="isExpandable">
             <el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
@@ -60,18 +60,18 @@
       <!-- 功能区域 -->
       <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>
+          <el-button type="success" icon="plus" @click="handleOpenDialog('create')" v-hasPerm="['system:config:create']">新增</el-button>
+          <el-button type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)" v-hasPerm="['system:config:delete']">批量删除</el-button>
         </div>
         <div class="data-table__toolbar--tools">
           <el-tooltip content="导出">
-            <el-button type="warning" icon="download" circle @click="handleExport" />
+            <el-button type="warning" icon="download" circle @click="handleExport" v-hasPerm="['system:config:export']" />
           </el-tooltip>
           <el-tooltip content="刷新">
-            <el-button type="primary" icon="refresh" circle @click="handleRefresh" />
-          </el-tooltip>
+              <el-button type="primary" icon="refresh" circle @click="handleRefresh" v-hasPerm="['system:config:refresh']" />
+            </el-tooltip>
           <el-tooltip content="列表筛选">
-            <el-dropdown trigger="click">
+            <el-dropdown trigger="click" v-hasPerm="['system:config:filter']">
               <el-button type="default" icon="operation" circle />
               <template #dropdown>
                 <el-dropdown-menu>
@@ -115,9 +115,9 @@
         </el-table-column>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'operation')?.show" fixed="right" label="操作" align="center" min-width="200">
           <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-button type="info" size="small" link icon="document" @click="handleOpenDialog('detail', scope.row.id)" v-hasPerm="['system:config:detail']">详情</el-button>
+            <el-button type="primary" size="small" link icon="edit" @click="handleOpenDialog('update', scope.row.id)" v-hasPerm="['system:config:update']">编辑</el-button>
+            <el-button type="danger" size="small" link icon="delete" @click="handleDelete([scope.row.id])" v-hasPerm="['system:config:delete']">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -174,8 +174,8 @@
         <div class="dialog-footer">
           <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
           <el-button @click="handleCloseDialog">取消</el-button>
-          <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 v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit" v-hasPerm="['system:config:submit']">确定</el-button>
+          <el-button v-else type="primary" @click="handleCloseDialog" v-hasPerm="['system:config:detail']">确定</el-button>
         </div>
       </template>
     </el-dialog>
@@ -191,7 +191,6 @@ defineOptions({
 });
 
 import ParamsAPI, { ConfigTable, ConfigForm, ConfigPageQuery } from "@/api/system/params";
-import { ElMessageBox } from "element-plus";
 
 const queryFormRef = ref();
 const dataFormRef = ref();

frontend/src/views/system/dept/index.vue

@@ -22,8 +22,8 @@
         </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>
+          <el-button type="primary" icon="search" @click="handleQuery" v-hasPerm="['system:dept:query']">查询</el-button>
+          <el-button icon="refresh" @click="handleResetQuery" v-hasPerm="['system:dept:query']">重置</el-button>
           <!-- 展开/收起 -->
           <template v-if="isExpandable">
             <el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
@@ -58,9 +58,9 @@
       <!-- 功能区域 -->
       <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>
-          <el-dropdown trigger="click">
+          <el-button v-hasPerm="['system:dept:create']" type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
+          <el-button v-hasPerm="['system:dept:delete']" type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)">批量删除</el-button>
+          <el-dropdown v-hasPerm="['system:dept:patch']" trigger="click">
             <el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">更多</el-button>
             <template #dropdown>
               <el-dropdown-menu>
@@ -72,10 +72,10 @@
         </div>
         <div class="data-table__toolbar--tools">
           <el-tooltip content="刷新">
-            <el-button type="primary" icon="refresh" circle @click="handleRefresh" />
-          </el-tooltip>
+              <el-button type="primary" icon="refresh" circle @click="handleRefresh" v-hasPerm="['system:dept:refresh']" />
+            </el-tooltip>
           <el-tooltip content="列表筛选">
-            <el-dropdown trigger="click">
+            <el-dropdown trigger="click" v-hasPerm="['system:dept:filter']">
               <el-button type="default" icon="operation" circle />
               <template #dropdown>
                 <el-dropdown-menu>
@@ -112,10 +112,10 @@
 
         <el-table-column v-if="tableColumns.find(col => col.prop === 'operation')?.show" fixed="right" label="操作" align="center"  min-width="200">
           <template #default="scope">
-            <el-button type="success" size="small" link icon="plus" @click="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>
+            <el-button v-hasPerm="['system:dept:create']" type="success" size="small" link icon="plus" @click="handleOpenDialog('create', undefined, scope.row.id)">新增</el-button>
+            <el-button type="info" size="small" link icon="document" @click="handleOpenDialog('detail', scope.row.id)" v-hasPerm="['system:dept:detail']">详情</el-button>
+            <el-button v-hasPerm="['system:dept:update']" type="primary" size="small" link icon="edit" @click="handleOpenDialog('update', scope.row.id)">编辑</el-button>
+            <el-button v-hasPerm="['system:dept:delete']" type="danger" size="small" link icon="delete" @click="handleDelete([scope.row.id])">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -172,8 +172,8 @@
         <div class="dialog-footer">
           <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
           <el-button @click="handleCloseDialog">取消</el-button>
-          <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 v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit" v-hasPerm="['system:dept:submit']">确定</el-button>
+          <el-button v-else type="primary" @click="handleCloseDialog" v-hasPerm="['system:dept:detail']">确定</el-button>
         </div>
       </template>
     </el-dialog>
@@ -188,7 +188,6 @@ defineOptions({
 });
 
 import DeptAPI, { DeptTable, DeptForm, DeptPageQuery } from "@/api/system/dept";
-import { ElMessageBox } from "element-plus";
 import { formatTree } from "@/utils/common";
 
 const queryFormRef = ref();

frontend/src/views/system/dict/components/DataDrawer.vue

@@ -59,9 +59,9 @@
       <!-- 功能区域 -->
       <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>
-          <el-dropdown trigger="click">
+          <el-button type="success" icon="plus" @click="handleOpenDialog('create')" v-hasPerm="['system:dict_data:create']">新增</el-button>
+          <el-button type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)" v-hasPerm="['system:dict_data:delete']">批量删除</el-button>
+          <el-dropdown trigger="click" v-hasPerm="['system:dict_data:patch']">
             <el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">更多</el-button>
             <template #dropdown>
               <el-dropdown-menu>
@@ -73,7 +73,7 @@
         </div>
         <div class="data-table__toolbar--tools">
           <el-tooltip content="导出">
-            <el-button type="warning" icon="download" circle @click="handleExport" />
+            <el-button type="warning" icon="download" circle @click="handleExport" v-hasPerm="['system:dict_data:export']" />
           </el-tooltip>
           <el-tooltip content="刷新">
             <el-button type="default" icon="refresh" circle @click="handleRefresh" />
@@ -126,8 +126,8 @@
         <el-table-column fixed="right" label="操作" align="center" min-width="200">
           <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-button type="primary" size="small" link icon="edit" @click="handleOpenDialog('update', scope.row.id)" v-hasPerm="['system:dict_data:update']">编辑</el-button>
+            <el-button type="danger" size="small" link icon="delete" @click="handleDelete([scope.row.id])" v-hasPerm="['system:dict_data:delete']">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -234,7 +234,6 @@ const props = defineProps({
 })
 
 import DictAPI, { DictDataTable, DictDataForm, DictDataPageQuery } from "@/api/system/dict";
-import { ElMessageBox } from "element-plus";
 import { useAppStore } from "@/store/modules/app.store";
 import { DeviceEnum } from "@/enums/settings/device.enum";
 

frontend/src/views/system/dict/index.vue

@@ -25,8 +25,8 @@
         </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>
+          <el-button type="primary" icon="search" @click="handleQuery" v-hasPerm="['system:dict_type:query']">查询</el-button>
+          <el-button icon="refresh" @click="handleResetQuery" v-hasPerm="['system:dict_type:query']">重置</el-button>
           <!-- 展开/收起 -->
           <template v-if="isExpandable">
             <el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
@@ -61,9 +61,9 @@
       <!-- 功能区域 -->
       <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>
-          <el-dropdown trigger="click">
+          <el-button type="success" icon="plus" @click="handleOpenDialog('create')" v-hasPerm="['system:dict_type:create']">新增</el-button>
+          <el-button type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)" v-hasPerm="['system:dict_type:delete']">批量删除</el-button>
+          <el-dropdown trigger="click" v-hasPerm="['system:dict_type:patch']">
             <el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">
               更多
             </el-button>
@@ -77,13 +77,13 @@
         </div>
         <div class="data-table__toolbar--tools">
           <el-tooltip content="导出">
-            <el-button type="warning" icon="download" circle @click="handleExport" />
+            <el-button type="warning" icon="download" circle @click="handleExport" v-hasPerm="['system:dict_type:export']" />
           </el-tooltip>
           <el-tooltip content="刷新">
-            <el-button type="primary" icon="refresh" circle @click="handleRefresh" />
-          </el-tooltip>
+              <el-button type="primary" icon="refresh" circle @click="handleRefresh" v-hasPerm="['system:dict_type:refresh']" />
+            </el-tooltip>
           <el-tooltip content="列表筛选">
-            <el-dropdown trigger="click">
+            <el-dropdown trigger="click" v-hasPerm="['system:dict_type:filter']">
               <el-button type="default" icon="operation" circle />
               <template #dropdown>
                 <el-dropdown-menu>
@@ -131,10 +131,10 @@
         </el-table-column>
         <el-table-column v-if="tableColumns.find(col => col.prop === 'operation')?.show" fixed="right" label="操作" align="center" min-width="260">
           <template #default="scope">
-            <el-button type="warning" size="small" link icon="document" @click="handleDictDataDrawer(scope.row.dict_type, scope.row.dict_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>
+            <el-button type="warning" size="small" link icon="document" @click="handleDictDataDrawer(scope.row.dict_type, scope.row.dict_name)" v-hasPerm="['system:dict_data:query']">字典</el-button>
+            <el-button type="info" size="small" link icon="document" @click="handleOpenDialog('detail', scope.row.id)" v-hasPerm="['system:dict_type:detail']">详情</el-button>
+            <el-button type="primary" size="small" link icon="edit" @click="handleOpenDialog('update', scope.row.id)" v-hasPerm="['system:dict_type:update']">编辑</el-button>
+            <el-button type="danger" size="small" link icon="delete" @click="handleDelete([scope.row.id])" v-hasPerm="['system:dict_type:delete']">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -189,8 +189,8 @@
         <div class="dialog-footer">
           <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
           <el-button @click="handleCloseDialog">取消</el-button>
-          <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 v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit" v-hasPerm="['system:dict_type:submit']">确定</el-button>
+          <el-button v-else type="primary" @click="handleCloseDialog" v-hasPerm="['system:dict_type:detail']">确定</el-button>
         </div>
       </template>
     </el-dialog>
@@ -207,7 +207,6 @@ defineOptions({
 });
 
 import DictAPI, { DictTable, DictForm, DictPageQuery } from "@/api/system/dict";
-import { ElMessageBox } from "element-plus";
 import DataDrawer from "@/views/system/dict/components/DataDrawer.vue"
 
 const queryFormRef = ref();

frontend/src/views/system/log/index.vue

@@ -25,8 +25,8 @@
         </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>
+          <el-button type="primary" icon="search" @click="handleQuery" v-hasPerm="['system:log:query']">查询</el-button>
+          <el-button icon="refresh" @click="handleResetQuery" v-hasPerm="['system:log:query']">重置</el-button>
           <!-- 展开/收起 -->
           <template v-if="isExpandable">
             <el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
@@ -61,14 +61,14 @@
       <!-- 功能区域 -->
       <div class="data-table__toolbar">
         <div class="data-table__toolbar--actions">
-          <el-button type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)">批量删除</el-button>
+          <el-button type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)" v-hasPerm="['system:log:delete']">批量删除</el-button>
         </div>
         <div class="data-table__toolbar--tools">
           <el-tooltip content="导出">
-            <el-button type="warning" icon="download" circle @click="handleExport" />
+            <el-button type="warning" icon="download" circle @click="handleExport" v-hasPerm="['system:log:export']" />
           </el-tooltip>
           <el-tooltip content="刷新">
-            <el-button type="default" icon="refresh" circle @click="handleRefresh" />
+            <el-button type="default" icon="refresh" circle @click="handleRefresh" v-hasPerm="['system:log:refresh']" />
           </el-tooltip>
         </div>
       </div>
@@ -124,8 +124,8 @@
         </el-table-column>
         <el-table-column label="操作" fixed="right" align="center" min-width="150">
           <template #default="scope">
-            <el-button type="info" size="small" link icon="document" @click="handleOpenDialog('detail', scope.row.id)">详情</el-button>
-            <el-button type="danger" size="small" link icon="delete" @click="handleDelete([scope.row.id])">删除</el-button>
+            <el-button type="info" size="small" link icon="document" @click="handleOpenDialog('detail', scope.row.id)" v-hasPerm="['system:log:detail']">详情</el-button>
+            <el-button type="danger" size="small" link icon="delete" @click="handleDelete([scope.row.id])" v-hasPerm="['system:log:delete']">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -179,7 +179,7 @@
         <div class="dialog-footer">
           <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
           <el-button @click="handleCloseDialog">取消</el-button>
-          <el-button type="primary" @click="handleCloseDialog">确定</el-button>
+          <el-button type="primary" @click="handleCloseDialog" v-hasPerm="['system:log:detail']">确定</el-button>
         </div>
       </template>
     </el-dialog>
@@ -194,7 +194,6 @@ defineOptions({
 });
 
 import LogAPI, { LogTable, LogPageQuery } from "@/api/system/log";
-import { ElMessage, ElMessageBox } from "element-plus";
 
 const queryFormRef = ref();
 const dataFormRef = ref();

frontend/src/views/system/menu/index.vue

@@ -22,8 +22,8 @@
         </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>
+          <el-button type="primary" icon="search" @click="handleQuery" v-hasPerm="['system:menu:query']">查询</el-button>
+          <el-button icon="refresh" @click="handleResetQuery" v-hasPerm="['system:menu:query']">重置</el-button>
           <!-- 展开/收起 -->
           <template v-if="isExpandable">
             <el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
@@ -58,9 +58,9 @@
       <!-- 功能区域 -->
       <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>
-          <el-dropdown trigger="click">
+          <el-button type="success" icon="plus" @click="handleOpenDialog('create')" v-hasPerm="['system:menu:create']">新增</el-button>
+          <el-button type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)" v-hasPerm="['system:menu:delete']">批量删除</el-button>
+          <el-dropdown trigger="click" v-hasPerm="['system:menu:patch']">
                 <el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">更多</el-button>
                 <template #dropdown>
                   <el-dropdown-menu>
@@ -72,7 +72,7 @@
         </div>
         <div class="data-table__toolbar--tools">
           <el-tooltip content="刷新">
-            <el-button type="primary" icon="refresh" circle @click="handleRefresh" />
+            <el-button type="primary" icon="refresh" circle @click="handleRefresh" v-hasPerm="['system:menu:refresh']" />
           </el-tooltip>
         </div>
       </div>
@@ -154,10 +154,10 @@
 
         <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('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>
+            <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)" v-hasPerm="['system:menu:create']">新增</el-button>
+            <el-button type="info" size="small" link icon="document" @click="handleOpenDialog('detail', scope.row.id)" v-hasPerm="['system:menu:detail']">详情</el-button>
+            <el-button type="primary" size="small" link icon="edit" @click="handleOpenDialog('update', scope.row.id)" v-hasPerm="['system:menu:update']">编辑</el-button>
+            <el-button type="danger" size="small" link icon="delete" @click="handleDelete([scope.row.id])" v-hasPerm="['system:menu:delete']">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -452,8 +452,8 @@
       <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 v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit" v-hasPerm="['system:menu:submit']">确定</el-button>
+          <el-button v-else type="primary" @click="handleCloseDialog" v-hasPerm="['system:menu:detail']">确定</el-button>
           <el-button @click="handleCloseDialog">取消</el-button>
         </div>
       </template>

frontend/src/views/system/notice/index.vue

@@ -32,12 +32,12 @@
         </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>
+          <el-button type="primary" icon="search" @click="handleQuery" v-hasPerm="['system:notice:query']">
+              查询
+            </el-button>
+          <el-button icon="refresh" @click="handleResetQuery" v-hasPerm="['system:notice:query']">
+              重置
+            </el-button>
           <!-- 展开/收起 -->
           <template v-if="isExpandable">
             <el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
@@ -72,9 +72,9 @@
       <!-- 功能区域 -->
       <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>
-          <el-dropdown trigger="click">
+          <el-button type="success" icon="plus" @click="handleOpenDialog('create')" v-hasPerm="['system:notice:create']">新增</el-button>
+          <el-button type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)" v-hasPerm="['system:notice:delete']">批量删除</el-button>
+          <el-dropdown trigger="click" v-hasPerm="['system:notice:patch']">
             <el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">更多</el-button>
             <template #dropdown>
               <el-dropdown-menu>
@@ -86,25 +86,25 @@
         </div>
         <div class="data-table__toolbar--tools">
           <el-tooltip content="导出">
-            <el-button type="warning" icon="download" circle @click="handleExport" />
+            <el-button type="warning" icon="download" circle @click="handleExport" v-hasPerm="['system:notice:export']" />
           </el-tooltip>
           <el-tooltip content="刷新">
-            <el-button type="primary" icon="refresh" circle @click="handleRefresh" />
-          </el-tooltip>
+              <el-button type="primary" icon="refresh" circle @click="handleRefresh" v-hasPerm="['system:notice:refresh']" />
+            </el-tooltip>
           <el-tooltip content="列表筛选">
-            <el-dropdown trigger="click">
-              <el-button type="default" icon="operation" circle />
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item v-for="column in tableColumns" :key="column.prop" :command="column">
-                    <el-checkbox v-model="column.show">
-                      {{ column.label }}
-                    </el-checkbox>
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-          </el-tooltip>
+              <el-dropdown trigger="click" v-hasPerm="['system:notice:filter']">
+                <el-button type="default" icon="operation" circle />
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item v-for="column in tableColumns" :key="column.prop" :command="column">
+                      <el-checkbox v-model="column.show">
+                        {{ column.label }}
+                      </el-checkbox>
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </el-tooltip>
         </div>
       </div>
 
@@ -146,9 +146,9 @@
 
         <el-table-column v-if="tableColumns.find(col => col.prop === 'operation')?.show" fixed="right" label="操作" align="center" min-width="200">
           <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-button type="info" size="small" link icon="document" @click="handleOpenDialog('detail', scope.row.id)" v-hasPerm="['system:notice:detail']">详情</el-button>
+            <el-button type="primary" size="small" link icon="edit" @click="handleOpenDialog('update', scope.row.id)" v-hasPerm="['system:notice:update']">编辑</el-button>
+            <el-button type="danger" size="small" link icon="delete" @click="handleDelete([scope.row.id])" v-hasPerm="['system:notice:delete']">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -234,8 +234,8 @@
         <div class="dialog-footer">
           <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
           <el-button @click="handleCloseDialog">取消</el-button>
-          <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 v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit" v-hasPerm="['system:notice:submit']">确定</el-button>
+          <el-button v-else type="primary" @click="handleCloseDialog" v-hasPerm="['system:notice:detail']">确定</el-button>
         </div>
       </template>
     </el-dialog>
@@ -253,7 +253,6 @@ defineOptions({
 });
 
 import NoticeAPI, { NoticeTable, NoticeForm, NoticePageQuery } from "@/api/system/notice";
-import { ElMessageBox } from "element-plus";
 
 const queryFormRef = ref();
 const dataFormRef = ref();

frontend/src/views/system/position/index.vue

@@ -22,8 +22,8 @@
         </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>
+          <el-button type="primary" icon="search" @click="handleQuery" v-hasPerm="['system:position:query']">查询</el-button>
+          <el-button icon="refresh" @click="handleResetQuery" v-hasPerm="['system:position:query']">重置</el-button>
           <!-- 展开/收起 -->
           <template v-if="isExpandable">
             <el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
@@ -58,12 +58,12 @@
       <!-- 功能区域 -->
       <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>
-          <el-dropdown trigger="click">
+          <el-button type="success" icon="plus" @click="handleOpenDialog('create')" v-hasPerm="['system:position:create']">新增</el-button>
+          <el-button type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)" v-hasPerm="['system:position:delete']">批量删除</el-button>
+          <el-dropdown trigger="click" v-hasPerm="['system:position:patch']">
             <el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">更多</el-button>
             <template #dropdown>
-              <el-dropdown-menu>
+          <el-dropdown-menu v-hasPerm="['system:position:filter']">
                 <el-dropdown-item icon="Check" @click="handleMoreClick(true)">批量启用</el-dropdown-item>
                 <el-dropdown-item icon="CircleClose" @click="handleMoreClick(false)">批量停用</el-dropdown-item>
               </el-dropdown-menu>
@@ -72,10 +72,10 @@
         </div>
         <div class="data-table__toolbar--tools">
           <el-tooltip content="导出">
-            <el-button type="warning" icon="download" circle @click="handleExport" />
+            <el-button type="warning" icon="download" circle @click="handleExport" v-hasPerm="['system:position:export']" />
           </el-tooltip>
           <el-tooltip content="刷新">
-            <el-button type="primary" icon="refresh" circle @click="handleRefresh" />
+            <el-button type="primary" icon="refresh" circle @click="handleRefresh" v-hasPerm="['system:position:refresh']" />
           </el-tooltip>
           <el-tooltip content="列表筛选">
             <el-dropdown trigger="click">
@@ -123,9 +123,9 @@
 
         <el-table-column v-if="tableColumns.find(col => col.prop === 'operation')?.show" fixed="right" label="操作" align="center" min-width="200">
           <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-button type="info" size="small" link icon="document" @click="handleOpenDialog('detail', scope.row.id)" v-hasPerm="['system:position:detail']">详情</el-button>
+            <el-button type="primary" size="small" link icon="edit" @click="handleOpenDialog('update', scope.row.id)" v-hasPerm="['system:position:update']">编辑</el-button>
+            <el-button type="danger" size="small" link icon="delete" @click="handleDelete([scope.row.id])" v-hasPerm="['system:position:delete']">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -180,8 +180,8 @@
         <div class="dialog-footer">
           <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
           <el-button @click="handleCloseDialog">取消</el-button>
-          <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 v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit" v-hasPerm="['system:position:submit']">确定</el-button>
+          <el-button v-else type="primary" @click="handleCloseDialog" v-hasPerm="['system:position:detail']">确定</el-button>
         </div>
       </template>
     </el-dialog>
@@ -196,7 +196,6 @@ defineOptions({
 });
 
 import PositionAPI, { PositionTable, PositionForm, PositionPageQuery } from "@/api/system/position";
-import { ElMessageBox } from "element-plus";
 
 const queryFormRef = ref();
 const dataFormRef = ref();

frontend/src/views/system/role/index.vue

@@ -22,8 +22,8 @@
         </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>
+          <el-button type="primary" icon="search" @click="handleQuery" v-hasPerm="['system:role:query']">查询</el-button>
+          <el-button icon="refresh" @click="handleResetQuery" v-hasPerm="['system:role:query']">重置</el-button>
           <!-- 展开/收起 -->
           <template v-if="isExpandable">
             <el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
@@ -58,14 +58,14 @@
       <!-- 功能区域 -->
       <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>
-          <el-dropdown trigger="click">
+          <el-button v-hasPerm="['system:role:create']" type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
+          <el-button v-hasPerm="['system:role:delete']" type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)">批量删除</el-button>
+          <el-dropdown v-hasPerm="['system:role:patch']" trigger="click">
             <el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">
               更多
             </el-button>
             <template #dropdown>
-              <el-dropdown-menu>
+              <el-dropdown-menu v-hasPerm="['system:role:filter']">
                 <el-dropdown-item icon="Check" @click="handleMoreClick(true)">批量启用</el-dropdown-item>
                 <el-dropdown-item icon="CircleClose" @click="handleMoreClick(false)">批量停用</el-dropdown-item>
               </el-dropdown-menu>
@@ -74,16 +74,16 @@
         </div>
         <div class="data-table__toolbar--tools">
           <el-tooltip content="导出">
-            <el-button type="warning" icon="download" circle @click="handleExport" />
+            <el-button type="warning" icon="download" circle @click="handleExport" v-hasPerm="['system:role:export']" />
           </el-tooltip>
           <el-tooltip content="刷新">
-            <el-button type="primary" icon="refresh" circle @click="handleRefresh" />
-          </el-tooltip>
+              <el-button type="primary" icon="refresh" circle @click="handleRefresh" v-hasPerm="['system:role:refresh']" />
+            </el-tooltip>
           <el-tooltip content="列表筛选">
             <el-dropdown trigger="click">
-              <el-button type="default" icon="operation" circle />
-              <template #dropdown>
-                <el-dropdown-menu>
+                <el-button type="default" icon="operation" circle />
+                <template #dropdown>
+                  <el-dropdown-menu v-hasPerm="['system:role:filter']">
                   <el-dropdown-item v-for="column in tableColumns" :key="column.prop" :command="column">
                     <el-checkbox v-model="column.show">{{ column.label }}</el-checkbox>
                   </el-dropdown-item>
@@ -135,12 +135,13 @@
         <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 
+              v-hasPerm="['system:role:permission']" 
               type="warning" 
               size="small" 
               link 
               icon="position" 
-              @click="scope.row.id === 1 ? ElMessage.warning('系统默认角色，不可操作') : handleOpenAssignPermDialog(scope.row.id, scope.row.name)"
               :disabled="scope.row.id === 1"
+              @click="scope.row.id === 1 ? ElMessage.warning('系统默认角色，不可操作') : handleOpenAssignPermDialog(scope.row.id, scope.row.name)"
             >分配权限</el-button>
             <el-button 
               type="info" 
@@ -148,22 +149,25 @@
               link 
               icon="document" 
               @click="handleOpenDialog('detail', scope.row.id)"
+              v-hasPerm="['system:role:detail']"
             >详情</el-button>
             <el-button 
+              v-hasPerm="['system:role:update']" 
               type="primary" 
               size="small" 
               link 
               icon="edit" 
-              @click="scope.row.id === 1 ? ElMessage.warning('系统默认角色，不可操作') : handleOpenDialog('update', scope.row.id)"
               :disabled="scope.row.id === 1"
+              @click="scope.row.id === 1 ? ElMessage.warning('系统默认角色，不可操作') : handleOpenDialog('update', scope.row.id)"
             >编辑</el-button>
             <el-button 
+              v-hasPerm="['system:role:delete']" 
               type="danger" 
               size="small" 
               link 
               icon="delete" 
-              @click="scope.row.id === 1 ? ElMessage.warning('系统默认角色，不可操作') : handleDelete([scope.row.id])"
               :disabled="scope.row.id === 1"
+              @click="scope.row.id === 1 ? ElMessage.warning('系统默认角色，不可操作') : handleDelete([scope.row.id])"
             >删除</el-button>
           </template>
         </el-table-column>
@@ -235,7 +239,7 @@
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="handleCloseDialog">取 消</el-button>
-          <el-button type="primary" @click="handleSubmit">确 定</el-button>
+          <el-button type="primary" @click="handleSubmit" v-hasPerm="['system:role:submit']">确 定</el-button>
         </div>
       </template>
     </el-dialog>

frontend/src/views/system/user/components/DeptTree.vue

@@ -24,7 +24,7 @@
 
 <script setup lang="ts">
 import DeptAPI, { DeptPageQuery } from "@/api/system/dept";
-import { formatTree, listToTree } from "@/utils/common";
+import { formatTree } from "@/utils/common";
 import type { FilterNodeMethodFunction, TreeInstance } from 'element-plus'
 
 const props = defineProps({
@@ -76,8 +76,6 @@ const loading = ref(true);
 onBeforeMount(() => {
   loading.value = true;
   DeptAPI.getDeptList(queryFormData).then((response) => {
-    // const treeData = listToTree(response.data.data.items);
-    // deptOptions.value = formatTree(treeData);
     deptOptions.value = formatTree(response.data.data);
   }).finally(() => {
     loading.value = false;

frontend/src/views/system/user/index.vue

@@ -33,8 +33,8 @@
             </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>
+              <el-button type="primary" icon="search" @click="handleQuery" v-hasPerm="['system:user:query']">查询</el-button>
+              <el-button icon="refresh" @click="handleResetQuery" v-hasPerm="['system:user:query']">重置</el-button>
               <!-- 展开/收起 -->
               <template v-if="isExpandable">
                 <el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
@@ -68,14 +68,14 @@
           <!-- 功能区域 -->
           <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>
-              <el-dropdown trigger="click">
+              <el-button v-hasPerm="['system:user:create']" type="success" icon="plus"  @click="handleOpenDialog('create')">新增</el-button>
+              <el-button v-hasPerm="['system:user:delete']" type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)">批量删除</el-button>
+              <el-dropdown v-hasPerm="['system:user:patch']" trigger="click">
                 <el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">
                   更多
                 </el-button>
                 <template #dropdown>
-                  <el-dropdown-menu>
+                  <el-dropdown-menu v-hasPerm="['system:user:filter']">
                     <el-dropdown-item icon="Check" @click="handleMoreClick(true)">批量启用</el-dropdown-item>
                     <el-dropdown-item icon="CircleClose" @click="handleMoreClick(false)">批量停用</el-dropdown-item>
                   </el-dropdown-menu>
@@ -85,13 +85,13 @@
 
             <div class="data-table__toolbar--tools">
               <el-tooltip content="导入">
-                <el-button type="info" icon="upload" circle @click="handleOpenImportDialog" />
+                <el-button v-hasPerm="['system:user:import']" type="info" icon="upload" circle @click="handleOpenImportDialog" />
               </el-tooltip>
               <el-tooltip content="导出">
-                <el-button type="warning" icon="download" circle @click="handleExport" />
+                <el-button v-hasPerm="['system:user:export']" type="warning" icon="download" circle @click="handleExport" />
               </el-tooltip>
               <el-tooltip content="刷新">
-                <el-button type="default" icon="refresh" circle @click="handleRefresh" />
+                <el-button type="default" icon="refresh" circle @click="handleRefresh" v-hasPerm="['system:user:refresh']" />
               </el-tooltip>
             </div>
           </div>
@@ -154,6 +154,7 @@
               <template #default="scope">
                 <el-button 
                   v-if="scope.row.username !== 'admin'" 
+                  v-hasPerm="['system:user:update']" 
                   type="warning" 
                   icon="RefreshLeft" 
                   size="small" 
@@ -166,9 +167,11 @@
                   link 
                   icon="document" 
                   @click="handleOpenDialog('detail', scope.row.id)"
+                  v-hasPerm="['system:user:detail']"
                 >详情</el-button>
                 <el-button 
                   v-if="scope.row.username !== 'admin'" 
+                  v-hasPerm="['system:user:update']" 
                   type="primary" 
                   size="small" 
                   link 
@@ -177,6 +180,7 @@
                 >编辑</el-button>
                 <el-button 
                   v-if="scope.row.username !== 'admin'" 
+                  v-hasPerm="['system:user:delete']" 
                   type="danger" 
                   size="small" 
                   link 
@@ -281,7 +285,7 @@
             </el-select>
           </el-form-item>
 
-          <el-form-item label="密码" prop="password" v-if="dialogVisible.type === 'create'">
+          <el-form-item v-if="dialogVisible.type === 'create'" label="密码" prop="password">
             <el-input v-model="formData.password" placeholder="请输入密码" type="password" show-password clearable />
           </el-form-item>
 
@@ -297,15 +301,14 @@
           </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-input v-model="formData.description" :rows="4" :maxlength="100" show-word-limit type="textarea" placeholder="请输入描述" />
           </el-form-item>
 
           <template #footer>
             <div class="dialog-footer">
               <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
-              <el-button v-if="dialogVisible.type === 'create' || dialogVisible.type === 'update'" type="primary" @click="handleSubmit">确定</el-button>
-              <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
+              <el-button v-if="dialogVisible.type === 'create' || dialogVisible.type === 'update'" type="primary" @click="handleSubmit" v-hasPerm="['system:user:submit']">确定</el-button>
+              <el-button v-else type="primary" @click="handleCloseDialog" v-hasPerm="['system:user:detail']">确定</el-button>
               <el-button @click="handleCloseDialog">取消</el-button>
             </div>
           </template>
@@ -314,7 +317,7 @@
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="handleSubmit">确 定</el-button>
+          <el-button type="primary" @click="handleSubmit" v-hasPerm="['system:user:submit']">确 定</el-button>
           <el-button @click="handleCloseDialog">取 消</el-button>
         </div>
       </template>
@@ -337,7 +340,7 @@ import { DeviceEnum } from "@/enums/settings/device.enum";
 import { ResultEnum } from "@/enums/api/result.enum";
 
 import UserAPI, { type UserForm, type UserInfo, type UserPageQuery } from "@/api/system/user";
-import { listToTree, formatTree } from "@/utils/common";
+import { formatTree } from "@/utils/common";
 import PositionAPI from "@/api/system/position";
 import DeptAPI from "@/api/system/dept";
 import RoleAPI from "@/api/system/role";
@@ -568,7 +571,6 @@ async function handleOpenDialog(type: 'create' | 'update' | 'detail', id?: numbe
 
   // 获取部门树
   const deptResponse = await DeptAPI.getDeptList(queryFormData);
-  // const treeData = listToTree(deptResponse.data.data.items);
   const treeData = deptResponse.data.data;
   deptOptions.value = formatTree(treeData);
 

frontend/src/views/workflow/operator/index.vue

@@ -62,11 +62,10 @@
             <!-- 功能区域 -->
             <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>
+                    <el-button type="success" icon="plus" @click="handleOpenDialog('create')" v-hasPerm="['workflow:operator:create']">新增</el-button>
+                    <el-button type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)" v-hasPerm="['workflow:operator:delete']">批量删除</el-button>
                     <el-dropdown trigger="click">
-                        <el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">更多</el-button>
+                        <el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown" v-hasPerm="['workflow:operator:status']">更多</el-button>
                         <template #dropdown>
                             <el-dropdown-menu>
                                 <el-dropdown-item icon="Check" @click="handleMoreClick(true)">批量启用</el-dropdown-item>
@@ -78,17 +77,17 @@
                 </div>
                 <div class="data-table__toolbar--tools">
                     <el-tooltip content="导入">
-                        <el-button type="info" icon="upload" circle @click="handleOpenImportDialog" />
+                        <el-button type="info" icon="upload" circle @click="handleOpenImportDialog" v-hasPerm="['workflow:operator:import']" />
                     </el-tooltip>
                     <el-tooltip content="导出">
-                        <el-button type="warning" icon="download" circle @click="handleExport" />
+                        <el-button type="warning" icon="download" circle @click="handleExport" v-hasPerm="['workflow:operator:export']" />
                     </el-tooltip>
                     <el-tooltip content="刷新">
-                        <el-button type="primary" icon="refresh" circle @click="handleRefresh" />
+                        <el-button type="primary" icon="refresh" circle @click="handleRefresh" v-hasPerm="['workflow:operator:refresh']" />
                     </el-tooltip>
                     <el-tooltip content="列表筛选">
                         <el-dropdown trigger="click">
-                            <el-button type="default" icon="operation" circle />
+                            <el-button type="default" icon="operation" circle v-hasPerm="['workflow:operator:filter']" />
                             <template #dropdown>
                                 <el-dropdown-menu>
                                     <el-dropdown-item v-for="column in tableColumns" :key="column.prop"
@@ -144,12 +143,9 @@
                 <el-table-column v-if="tableColumns.find(col => col.prop === 'operation')?.show" fixed="right"
                     label="操作" align="center" min-width="200">
                     <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-button type="info" size="small" link icon="document" @click="handleOpenDialog('detail', scope.row.id)" v-hasPerm="['workflow:operator:detail']">详情</el-button>
+                        <el-button type="primary" size="small" link icon="edit" @click="handleOpenDialog('update', scope.row.id)" v-hasPerm="['workflow:operator:update']">编辑</el-button>
+                        <el-button type="danger" size="small" link icon="delete" @click="handleDelete([scope.row.id])" v-hasPerm="['workflow:operator:delete']">删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>