refactor: 前端代码优化

2025-11-02 15:30:25 +08:00 · 2023-07-02 17:06:00 +08:00
parent aca4e6751e
commit c240079df4
13 changed files with 278 additions and 148 deletions
--- a/mayfly_go_web/src/components/auth/auth.ts
+++ b/mayfly_go_web/src/components/auth/auth.ts
@@ -0,0 +1,25 @@
+import { useUserInfo } from '@/store/userInfo';
+
+/**
+ * 判断当前用户是否拥有指定权限
+ * @param code 权限code
+ * @returns 
+ */
+export function hasPerm(code: string) {
+    return useUserInfo().userInfo.permissions.some((v: any) => v === code);
+}
+
+/**
+ * 判断用户是否拥有权限对象里对应的code
+ * @param perms { save: "xxx:save"}
+ * @returns {"xxx:save": true}  key->permission code
+ */
+export function hasPerms(permCodes: any[]) {
+    const res = {};
+    for (let permCode of permCodes) {
+        if (hasPerm(permCode)) {
+            res[permCode] = true;
+        }
+    }
+    return res;
+}
--- a/mayfly_go_web/src/components/pagetable/PageTable.vue
+++ b/mayfly_go_web/src/components/pagetable/PageTable.vue
@@ -86,13 +86,13 @@
            </div>

            <el-table v-bind="$attrs" max-height="700" @selection-change="handleSelectionChange" :data="props.data" border
-                highlight-current-row show-overflow-tooltip v-loading="loadingData">
+                highlight-current-row v-loading="loadingData">

                <el-table-column v-if="props.showSelection" type="selection" width="40" />

                <template v-for="(item, index) in columns">
                    <el-table-column :key="index" v-if="item.show" :prop="item.prop" :label="item.label" :fixed="item.fixed"
-                        :align="item.align" :show-overflow-tooltip="item.showOverflowTooltip || true"
+                        :align="item.align" :show-overflow-tooltip="item.showOverflowTooltip"
                        :min-width="item.minWidth" :sortable="item.sortable || false" :type="item.type" :width="item.width">

                        <!-- 插槽：预留功能 -->
--- a/mayfly_go_web/src/components/pagetable/index.ts
+++ b/mayfly_go_web/src/components/pagetable/index.ts
@@ -77,6 +77,11 @@ export class TableColumn {
        return new TableColumn(prop, label)
    }

+    noShowOverflowTooltip(): TableColumn {
+        this.showOverflowTooltip = false
+        return this;
+    }
+
    setMinWidth(minWidth: number | string): TableColumn {
        this.minWidth = minWidth
        this.autoWidth = false;
--- a/mayfly_go_web/src/directive/auth.ts
+++ b/mayfly_go_web/src/directive/auth.ts
@@ -1,13 +1,14 @@
 import type { App } from 'vue';
 import { useUserInfo } from '@/store/userInfo';
 import { judementSameArr } from '@/common/utils/arrayOperation';
+import { hasPerm } from '@/components/auth/auth';

 // 用户权限指令
 export function authDirective(app: App) {
    // 单个权限验证（v-auth="xxx"）
    app.directive('auth', {
        mounted(el, binding) {
-            if (!useUserInfo().userInfo.permissions.some((v: any) => v === binding.value)) {
+            if (!hasPerm(binding.value)) {
                parseNoAuth(el, binding);
            };
        },
--- a/mayfly_go_web/src/views/ops/db/DbList.vue
+++ b/mayfly_go_web/src/views/ops/db/DbList.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="db-list">
-        <page-table ref="pageTableRef" :query="state.queryConfig" v-model:query-form="query" :show-selection="true"
-            v-model:selection-data="state.selectionData" :data="datas" :columns="state.columns" :total="total"
+        <page-table ref="pageTableRef" :query="queryConfig" v-model:query-form="query" :show-selection="true"
+            v-model:selection-data="state.selectionData" :data="datas" :columns="columns" :total="total"
            v-model:page-size="query.pageSize" v-model:page-num="query.pageNum" @pageChange="search()">

            <template #tagPathSelect>
@@ -12,8 +12,8 @@
            </template>

            <template #queryRight>
-                <el-button v-auth="permissions.saveDb" type="primary" icon="plus" @click="editDb(true)">添加</el-button>
-                <el-button v-auth="permissions.delDb" :disabled="selectionData.length < 1" @click="deleteDb()" type="danger"
+                <el-button v-auth="perms.saveDb" type="primary" icon="plus" @click="editDb(true)">添加</el-button>
+                <el-button v-auth="perms.delDb" :disabled="selectionData.length < 1" @click="deleteDb()" type="danger"
                    icon="delete">删除</el-button>
            </template>

@@ -54,7 +54,7 @@
            </template>

            <template #action="{ data }">
-                <el-button v-auth="permissions.saveDb" @click="editDb(data)" type="primary" link>编辑</el-button>
+                <el-button v-if="actionBtns[perms.saveDb]" @click="editDb(data)" type="primary" link>编辑</el-button>
            </template>
        </page-table>

@@ -277,15 +277,35 @@ import { dateFormat } from '@/common/utils/date';
 import TagInfo from '../component/TagInfo.vue';
 import PageTable from '@/components/pagetable/PageTable.vue'
 import { TableColumn, TableQuery } from '@/components/pagetable';
+import { hasPerms } from '@/components/auth/auth';

 const DbEdit = defineAsyncComponent(() => import('./DbEdit.vue'));
 const CreateTable = defineAsyncComponent(() => import('./CreateTable.vue'));

-const permissions = {
+const perms = {
    saveDb: 'db:save',
    delDb: 'db:del',
 }

+const queryConfig = [
+    TableQuery.slot("tagPath", "标签", "tagPathSelect"),
+]
+
+const columns = [
+    TableColumn.new("tagPath", "标签路径").isSlot().setAddWidth(20),
+    TableColumn.new("name", "名称"),
+    TableColumn.new("host", "host:port").setFormatFunc((data: any, _prop: string) => `${data.host}:${data.port}`),
+    TableColumn.new("type", "类型"),
+    TableColumn.new("database", "数据库").isSlot().setMinWidth(70),
+    TableColumn.new("username", "用户名"),
+    TableColumn.new("remark", "备注"),
+    TableColumn.new("more", "更多").isSlot().setMinWidth(165).fixedRight(),
+]
+
+// 该用户拥有的的操作列按钮权限
+const actionBtns = hasPerms([perms.saveDb,])
+const actionColumn = TableColumn.new("action", "操作").isSlot().setMinWidth(65).fixedRight();
+
 const pageTableRef: any = ref(null)

 const state = reactive({
@@ -305,20 +325,6 @@ const state = reactive({
        pageNum: 1,
        pageSize: 10,
    },
-    queryConfig: [
-        TableQuery.slot("tagPath", "标签", "tagPathSelect"),
-    ],
-    columns: [
-        TableColumn.new("tagPath", "标签路径").isSlot().setAddWidth(20),
-        TableColumn.new("name", "名称"),
-        TableColumn.new("host", "host:port").setFormatFunc((data: any, _prop: string) => `${data.host}:${data.port}`),
-        TableColumn.new("type", "类型"),
-        TableColumn.new("database", "数据库").isSlot().setMinWidth(70),
-        TableColumn.new("username", "用户名"),
-        TableColumn.new("remark", "备注"),
-        TableColumn.new("more", "更多").isSlot().setMinWidth(165).fixedRight(),
-        TableColumn.new("action", "操作").isSlot().setMinWidth(65).fixedRight(),
-    ],
    datas: [],
    total: 0,
    infoDialog: {
@@ -422,6 +428,9 @@ const {


 onMounted(async () => {
+    if (Object.keys(actionBtns).length > 0) {
+        columns.push(actionColumn);
+    }
    search();
 });

--- a/mayfly_go_web/src/views/ops/machine/MachineList.vue
+++ b/mayfly_go_web/src/views/ops/machine/MachineList.vue
@@ -1,7 +1,7 @@
 <template>
    <div>
-        <page-table ref="pageTableRef" :query="state.queryConfig" v-model:query-form="params" :show-selection="true"
-            v-model:selection-data="state.selectionData" :data="data.list" :columns="state.columns" :total="data.total"
+        <page-table ref="pageTableRef" :query="queryConfig" v-model:query-form="params" :show-selection="true"
+            v-model:selection-data="state.selectionData" :data="data.list" :columns="columns" :total="data.total"
            v-model:page-size="params.pageSize" v-model:page-num="params.pageNum" @pageChange="search()">

            <template #tagPathSelect>
@@ -12,9 +12,9 @@
            </template>

            <template #queryRight>
-                <el-button v-auth="'machine:add'" type="primary" icon="plus" @click="openFormDialog(false)" plain>添加
+                <el-button v-auth="perms.addMachine" type="primary" icon="plus" @click="openFormDialog(false)" plain>添加
                </el-button>
-                <el-button v-auth="'machine:del'" :disabled="selectionData.length < 1" @click="deleteMachine()"
+                <el-button v-auth="perms.delMachine" :disabled="selectionData.length < 1" @click="deleteMachine()"
                    type="danger" icon="delete">删除</el-button>
            </template>

@@ -53,7 +53,7 @@
                <el-button :disabled="data.status == -1" type="warning" @click="serviceManager(data)" link>脚本</el-button>
                <el-divider direction="vertical" border-style="dashed" />

-                <el-dropdown>
+                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link-machine-list">
                        更多
                        <el-icon class="el-icon--right">
@@ -62,26 +62,26 @@
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
-                            <el-dropdown-item>
-                                <el-button @click="showInfo(data)" link>详情</el-button>
+                            <el-dropdown-item :command="{ type: 'detail', data }">
+                                详情
                            </el-dropdown-item>

-                            <el-dropdown-item>
-                                <el-button v-auth="'machine:update'" @click="openFormDialog(data)" link>编辑</el-button>
+                            <el-dropdown-item :command="{ type: 'edit', data }" v-if="actionBtns[perms.updateMachine]">
+                                编辑
                            </el-dropdown-item>

-                            <el-dropdown-item>
-                                <el-button @click="showProcess(data)" :disabled="data.status == -1" link>进程</el-button>
+                            <el-dropdown-item :command="{ type: 'process', data }" :disabled="data.status == -1">
+                                进程
                            </el-dropdown-item>

-                            <el-dropdown-item v-if="data.enableRecorder == 1">
-                                <el-button v-auth="'machine:update'" @click="showRec(data)" link>终端回放</el-button>
+                            <el-dropdown-item :command="{ type: 'terminalRec', data }"
+                                v-if="actionBtns[perms.updateMachine] && data.enableRecorder == 1">
+                                终端回放
                            </el-dropdown-item>

-                            <el-dropdown-item>
-                                <el-button v-auth="'machine:close-cli'" :disabled="!data.hasCli || data.status == -1"
-                                    type="danger" @click="closeCli(data)" link>关闭连接
-                                </el-button>
+                            <el-dropdown-item :command="{ type: 'closeCli', data }" v-if="actionBtns[perms.closeCli]"
+                                :disabled="!data.hasCli || data.status == -1">
+                                关闭连接
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
@@ -152,6 +152,7 @@ import { dateFormat } from '@/common/utils/date';
 import TagInfo from '../component/TagInfo.vue';
 import PageTable from '@/components/pagetable/PageTable.vue'
 import { TableColumn, TableQuery } from '@/components/pagetable';
+import { hasPerms } from '@/components/auth/auth';

 // 组件
 const MachineEdit = defineAsyncComponent(() => import('./MachineEdit.vue'));
@@ -164,6 +165,32 @@ const ProcessList = defineAsyncComponent(() => import('./ProcessList.vue'));
 const router = useRouter();
 const pageTableRef: any = ref(null)

+const perms = {
+    addMachine: "machine:add",
+    updateMachine: "machine:update",
+    delMachine: "machine:del",
+    terminal: "machine:terminal",
+    closeCli: "machine:close-cli",
+}
+
+const queryConfig = [
+    TableQuery.slot("tagPath", "标签", "tagPathSelect"),
+    TableQuery.text("ip", "IP"),
+    TableQuery.text("name", "名称"),
+]
+
+const columns = [
+    TableColumn.new("tagPath", "标签路径").isSlot().setAddWidth(20),
+    TableColumn.new("name", "名称"),
+    TableColumn.new("ipPort", "ip:port").isSlot().setAddWidth(35),
+    TableColumn.new("username", "用户名"),
+    TableColumn.new("status", "状态").isSlot().setMinWidth(85),
+    TableColumn.new("remark", "备注"),
+    TableColumn.new("action", "操作").isSlot().setMinWidth(238).fixedRight(),
+]
+// 该用户拥有的的操作列按钮权限，使用v-if进行判断，v-auth对el-dropdown-item无效
+const actionBtns = hasPerms([perms.updateMachine, perms.closeCli])
+
 const state = reactive({
    tags: [] as any,
    params: {
@@ -173,20 +200,6 @@ const state = reactive({
        name: null,
        tagPath: null,
    },
-    queryConfig: [
-        TableQuery.slot("tagPath", "标签", "tagPathSelect"),
-        TableQuery.text("ip", "IP"),
-        TableQuery.text("name", "名称"),
-    ],
-    columns: [
-        TableColumn.new("tagPath", "标签路径").isSlot().setAddWidth(20),
-        TableColumn.new("name", "名称"),
-        TableColumn.new("ipPort", "ip:port").isSlot().setAddWidth(35),
-        TableColumn.new("username", "用户名"),
-        TableColumn.new("status", "状态").isSlot().setMinWidth(85),
-        TableColumn.new("remark", "备注"),
-        TableColumn.new("action", "操作").isSlot().setMinWidth(235).fixedRight(),
-    ],
    // 列表数据
    data: {
        list: [],
@@ -248,6 +261,34 @@ onMounted(async () => {
    search();
 });

+const handleCommand = (commond: any) => {
+    const data = commond.data;
+    const type = commond.type;
+    console.log(type);
+    switch (type) {
+        case "detail": {
+            showInfo(data);
+            return;
+        }
+        case "edit": {
+            openFormDialog(data);
+            return;
+        }
+        case "process": {
+            showProcess(data);
+            return;
+        }
+        case "terminalRec": {
+            showRec(data);
+            return;
+        }
+        case "closeCli": {
+            closeCli(data);
+            return;
+        }
+    }
+}
+
 const showTerminal = (row: any) => {
    const { href } = router.resolve({
        path: `/machine/terminal`,
--- a/mayfly_go_web/src/views/ops/mongo/MongoList.vue
+++ b/mayfly_go_web/src/views/ops/mongo/MongoList.vue
@@ -1,7 +1,7 @@
 <template>
    <div>
-        <page-table ref="pageTableRef" :query="state.queryConfig" v-model:query-form="query" :show-selection="true"
-            v-model:selection-data="selectionData" :data="list" :columns="state.columns" :total="total"
+        <page-table ref="pageTableRef" :query="queryConfig" v-model:query-form="query" :show-selection="true"
+            v-model:selection-data="selectionData" :data="list" :columns="columns" :total="total"
            v-model:page-size="query.pageSize" v-model:page-num="query.pageNum" @pageChange="search()">

            <template #tagPathSelect>
@@ -180,6 +180,18 @@ import { TableColumn, TableQuery } from '@/components/pagetable';

 const pageTableRef: any = ref(null)

+const queryConfig = [
+    TableQuery.slot("tagPath", "标签", "tagPathSelect"),
+]
+const columns = [
+    TableColumn.new("tagPath", "标签路径").isSlot().setAddWidth(20),
+    TableColumn.new("name", "名称"),
+    TableColumn.new("uri", "连接uri"),
+    TableColumn.new("createTime", "创建时间").isTime(),
+    TableColumn.new("creator", "创建人"),
+    TableColumn.new("action", "操作").isSlot().setMinWidth(100).fixedRight(),
+]
+
 const state = reactive({
    tags: [],
    dbOps: {
@@ -194,17 +206,6 @@ const state = reactive({
        pageSize: 10,
        tagPath: null,
    },
-    queryConfig: [
-        TableQuery.slot("tagPath", "标签", "tagPathSelect"),
-    ],
-    columns: [
-        TableColumn.new("tagPath", "标签路径").isSlot().setAddWidth(20),
-        TableColumn.new("name", "名称"),
-        TableColumn.new("uri", "连接uri"),
-        TableColumn.new("createTime", "创建时间").isTime(),
-        TableColumn.new("creator", "创建人"),
-        TableColumn.new("action", "操作").isSlot().setMinWidth(100).fixedRight(),
-    ],
    mongoEditDialog: {
        visible: false,
        data: null as any,
--- a/mayfly_go_web/src/views/ops/redis/DataOperation.vue
+++ b/mayfly_go_web/src/views/ops/redis/DataOperation.vue
@@ -44,11 +44,14 @@
                                </el-input>
                            </el-form-item>
                            <el-form-item>
-                                <el-button @click="searchKey()" type="success" icon="search" plain></el-button>
-                                <el-button @click="scan()" icon="bottom" plain>scan</el-button>
-                                <el-button @click="showNewKeyDialog" type="primary" icon="plus" plain
-                                    v-auth="'redis:data:save'"></el-button>
-                                <el-button @click="flushDb" type="danger" plain v-auth="'redis:data:save'">flush</el-button>
+                                <el-button :disabled="!scanParam.id || !scanParam.db" @click="searchKey()" type="success"
+                                    icon="search" plain></el-button>
+                                <el-button :disabled="!scanParam.id || !scanParam.db" @click="scan()" icon="bottom"
+                                    plain>scan</el-button>
+                                <el-button :disabled="!scanParam.id || !scanParam.db" @click="showNewKeyDialog"
+                                    type="primary" icon="plus" plain v-auth="'redis:data:save'"></el-button>
+                                <el-button :disabled="!scanParam.id || !scanParam.db" @click="flushDb" type="danger" plain
+                                    v-auth="'redis:data:save'">flush</el-button>
                            </el-form-item>
                            <div style="float: right">
                                <span>keys: {{ state.dbsize }}</span>
@@ -149,7 +152,7 @@ const state = reactive({
    scanParam: {
        id: null as any,
        mode: '',
-        db: 0,
+        db: null as any,
        match: null,
        count: 10,
        cursor: {},
--- a/mayfly_go_web/src/views/ops/redis/RedisList.vue
+++ b/mayfly_go_web/src/views/ops/redis/RedisList.vue
@@ -1,7 +1,7 @@
 <template>
    <div>
-        <page-table ref="pageTableRef" :query="state.queryConfig" v-model:query-form="query" :show-selection="true"
-            v-model:selection-data="selectionData" :data="redisTable" :columns="state.columns" :total="total"
+        <page-table ref="pageTableRef" :query="queryConfig" v-model:query-form="query" :show-selection="true"
+            v-model:selection-data="selectionData" :data="redisTable" :columns="columns" :total="total"
            v-model:page-size="query.pageSize" v-model:page-num="query.pageNum" @pageChange="search()">

            <template #tagPathSelect>
@@ -154,6 +154,19 @@ import { TableColumn, TableQuery } from '@/components/pagetable';

 const pageTableRef: any = ref(null)

+const queryConfig = [
+    TableQuery.slot("tagPath", "标签", "tagPathSelect"),
+]
+const columns = [
+    TableColumn.new("tagPath", "标签路径").isSlot().setAddWidth(20),
+    TableColumn.new("name", "名称"),
+    TableColumn.new("host", "host:port"),
+    TableColumn.new("mode", "mode"),
+    TableColumn.new("remark", "备注"),
+    TableColumn.new("more", "更多").isSlot().setMinWidth(155).fixedRight(),
+    TableColumn.new("action", "操作").isSlot().setMinWidth(65).fixedRight(),
+]
+
 const state = reactive({
    tags: [],
    redisTable: [],
@@ -164,18 +177,6 @@ const state = reactive({
        pageNum: 1,
        pageSize: 10,
    },
-    queryConfig: [
-        TableQuery.slot("tagPath", "标签", "tagPathSelect"),
-    ],
-    columns: [
-        TableColumn.new("tagPath", "标签路径").isSlot().setAddWidth(20),
-        TableColumn.new("name", "名称"),
-        TableColumn.new("host", "host:port"),
-        TableColumn.new("mode", "mode"),
-        TableColumn.new("remark", "备注"),
-        TableColumn.new("more", "更多").isSlot().setMinWidth(155).fixedRight(),
-        TableColumn.new("action", "操作").isSlot().setMinWidth(65).fixedRight(),
-    ],
    detailDialog: {
        visible: false,
        data: null as any,
--- a/mayfly_go_web/src/views/system/account/AccountList.vue
+++ b/mayfly_go_web/src/views/system/account/AccountList.vue
@@ -1,13 +1,14 @@
 <template>
    <div>
-        <page-table ref="pageTableRef" :query="state.queryConfig" v-model:query-form="query" :show-selection="true"
-            v-model:selection-data="selectionData" :data="datas" :columns="state.columns" :total="total"
+        <page-table ref="pageTableRef" :query="queryConfig" v-model:query-form="query" :show-selection="true"
+            v-model:selection-data="selectionData" :data="datas" :columns="columns" :total="total"
            v-model:page-size="query.pageSize" v-model:page-num="query.pageNum" @pageChange="search()">

            <template #queryRight>
-                <el-button v-auth="'account:add'" type="primary" icon="plus" @click="editAccount(true)">添加</el-button>
-                <el-button v-auth="'account:del'" :disabled="state.selectionData.length < 1" @click="deleteAccount()"
-                    type="danger" icon="delete">删除</el-button>
+                <el-button v-auth="perms.addAccount" type="primary" icon="plus"
+                    @click="editAccount(true)">添加</el-button>
+                <el-button v-auth="perms.delAccount" :disabled="state.selectionData.length < 1"
+                    @click="deleteAccount()" type="danger" icon="delete">删除</el-button>
            </template>

            <template #status="{ data }">
@@ -22,18 +23,21 @@
            </template>

            <template #action="{ data }">
-                <el-button link v-auth="'account:add'" @click="editAccount(data)" type="primary">编辑</el-button>
+                <el-button link v-if="actionBtns[perms.addAccount]" @click="editAccount(data)"
+                    type="primary">编辑</el-button>

-                <el-button link v-auth="'account:saveRoles'" @click="showRoleEdit(data)" type="success">角色分配</el-button>
+                <el-button link v-if="actionBtns[perms.saveAccountRole]" @click="showRoleEdit(data)"
+                    type="success">角色分配</el-button>

-                <el-button link v-auth="'account:changeStatus'" @click="changeStatus(data)" v-if="data.status == 1"
-                    type="danger">禁用</el-button>
+                <el-button link v-if="actionBtns[perms.changeAccountStatus] && data.status == 1"
+                    @click="changeStatus(data)" type="danger">禁用</el-button>

-                <el-button link v-auth="'account:changeStatus'" v-if="data.status == -1" type="success"
+                <el-button link v-if="actionBtns[perms.changeAccountStatus] && data.status == -1" type="success"
                    @click="changeStatus(data)">启用</el-button>

-                <el-button link v-auth="'account:add'" :disabled="!data.otpSecret || data.otpSecret == '-'"
-                    @click="resetOtpSecret(data)" type="warning">重置OTP</el-button>
+                <el-button link v-if="actionBtns[perms.addAccount]"
+                    :disabled="!data.otpSecret || data.otpSecret == '-'" @click="resetOtpSecret(data)"
+                    type="warning">重置OTP</el-button>
            </template>
        </page-table>

@@ -79,9 +83,36 @@ import { ElMessage, ElMessageBox } from 'element-plus';
 import { dateFormat } from '@/common/utils/date';
 import PageTable from '@/components/pagetable/PageTable.vue'
 import { TableColumn, TableQuery } from '@/components/pagetable';
+import { hasPerms } from '@/components/auth/auth';

 const pageTableRef: any = ref(null)

+const perms = {
+    addAccount: "account:add",
+    delAccount: "account:del",
+    saveAccountRole: "account:saveRoles",
+    changeAccountStatus: "account:changeStatus",
+}
+
+const queryConfig = [
+    TableQuery.text("username", "用户名"),
+]
+const columns = [
+    TableColumn.new("name", "姓名"),
+    TableColumn.new("username", "用户名"),
+    TableColumn.new("status", "状态").isSlot(),
+    TableColumn.new("lastLoginTime", "最后登录时间").isTime(),
+    TableColumn.new("showmore", "查看更多").isSlot().setMinWidth(150),
+    TableColumn.new("creator", "创建账号"),
+    TableColumn.new("createTime", "创建时间").isTime(),
+    TableColumn.new("modifier", "更新账号"),
+    TableColumn.new("updateTime", "更新时间").isTime(),
+]
+
+// 该用户拥有的的操作列按钮权限
+const actionBtns = hasPerms([perms.addAccount, perms.saveAccountRole, perms.changeAccountStatus])
+const actionColumn = TableColumn.new("action", "操作").isSlot().fixedRight().setMinWidth(260).noShowOverflowTooltip()
+
 const state = reactive({
    /**
     * 选中的数据
@@ -95,21 +126,6 @@ const state = reactive({
        pageNum: 1,
        pageSize: 10,
    },
-    queryConfig: [
-        TableQuery.text("username", "用户名"),
-    ],
-    columns: [
-        TableColumn.new("name", "姓名"),
-        TableColumn.new("username", "用户名"),
-        TableColumn.new("status", "状态").isSlot("status"),
-        TableColumn.new("lastLoginTime", "最后登录时间").isTime(),
-        TableColumn.new("showmore", "查看更多").isSlot("showmore").setMinWidth(150),
-        TableColumn.new("creator", "创建账号"),
-        TableColumn.new("createTime", "创建时间").isTime(),
-        TableColumn.new("modifier", "更新账号"),
-        TableColumn.new("updateTime", "更新时间").isTime(),
-        TableColumn.new("action", "操作").isSlot("action").fixedRight().setMinWidth(280),
-    ],
    datas: [],
    total: 0,
    showRoleDialog: {
@@ -149,6 +165,9 @@ const {
 } = toRefs(state)

 onMounted(() => {
+    if (Object.keys(actionBtns).length > 0) {
+        columns.push(actionColumn);
+    }
    search();
 });

--- a/mayfly_go_web/src/views/system/config/ConfigList.vue
+++ b/mayfly_go_web/src/views/system/config/ConfigList.vue
@@ -1,10 +1,11 @@
 <template>
    <div>
-        <page-table :show-selection="true" v-model:selection-data="selectionData" :data="configs" :columns="state.columns"
+        <page-table :show-selection="true" v-model:selection-data="selectionData" :data="configs" :columns="columns"
            :total="total" v-model:page-size="query.pageSize" v-model:page-num="query.pageNum" @pageChange="search()">

            <template #queryRight>
-                <el-button v-auth="'config:save'" type="primary" icon="plus" @click="editConfig(false)">添加</el-button>
+                <el-button v-auth="perms.saveConfig" type="primary" icon="plus"
+                    @click="editConfig(false)">添加</el-button>
            </template>

            <template #status="{ data }">
@@ -15,7 +16,7 @@
            <template #action="{ data }">
                <el-button :disabled="data.status == -1" type="warning" @click="showSetConfigDialog(data)"
                    link>配置</el-button>
-                <el-button v-auth="'config:save'" @click="editConfig(data)" type="primary" link>编辑
+                <el-button v-if="actionBtns[perms.saveConfig]" @click="editConfig(data)" type="primary" link>编辑
                </el-button>
            </template>
        </page-table>
@@ -60,6 +61,21 @@ import { configApi } from '../api';
 import { ElMessage } from 'element-plus';
 import PageTable from '@/components/pagetable/PageTable.vue'
 import { TableColumn } from '@/components/pagetable';
+import { hasPerms } from '@/components/auth/auth';
+
+const perms = {
+    saveConfig: "config:save"
+}
+const columns = [
+    TableColumn.new("name", "配置项"),
+    TableColumn.new("key", "配置key"),
+    TableColumn.new("value", "配置值"),
+    TableColumn.new("remark", "备注"),
+    TableColumn.new("modifier", "更新账号"),
+    TableColumn.new("updateTime", "更新时间").isTime(),
+]
+const actionColumn = TableColumn.new("action", "操作").isSlot().fixedRight().setMinWidth(130).noShowOverflowTooltip();
+const actionBtns = hasPerms([perms.saveConfig])

 const paramsFormRef: any = ref(null)
 const state = reactive({
@@ -68,15 +84,6 @@ const state = reactive({
        pageSize: 10,
        name: null,
    },
-    columns: [
-        TableColumn.new("name", "配置项"),
-        TableColumn.new("key", "配置key"),
-        TableColumn.new("value", "配置值"),
-        TableColumn.new("remark", "备注"),
-        TableColumn.new("modifier", "更新账号"),
-        TableColumn.new("updateTime", "更新时间").isTime(),
-        TableColumn.new("action", "操作").isSlot().fixedRight().setMinWidth(130),
-    ],
    total: 0,
    configs: [],
    selectionData: [],
@@ -103,6 +110,9 @@ const {
 } = toRefs(state)

 onMounted(() => {
+    if (Object.keys(actionBtns).length > 0) {
+        columns.push(actionColumn);
+    }
    search();
 });

--- a/mayfly_go_web/src/views/system/role/RoleList.vue
+++ b/mayfly_go_web/src/views/system/role/RoleList.vue
@@ -1,12 +1,12 @@
 <template>
    <div>
-        <page-table ref="pageTableRef" :query="state.queryConfig" v-model:query-form="query" :show-selection="true"
-            v-model:selection-data="selectionData" :data="roles" :columns="state.columns" :total="total"
+        <page-table ref="pageTableRef" :query="queryConfig" v-model:query-form="query" :show-selection="true"
+            v-model:selection-data="selectionData" :data="roles" :columns="columns" :total="total"
            v-model:page-size="query.pageSize" v-model:page-num="query.pageNum" @pageChange="search()">

            <template #queryRight>
-                <el-button v-auth="'role:add'" type="primary" icon="plus" @click="editRole(false)">添加</el-button>
-                <el-button v-auth="'role:del'" :disabled="selectionData.length < 1" @click="deleteRole(selectionData)"
+                <el-button v-auth="perms.addRole" type="primary" icon="plus" @click="editRole(false)">添加</el-button>
+                <el-button v-auth="perms.delRole" :disabled="selectionData.length < 1" @click="deleteRole(selectionData)"
                    type="danger" icon="delete">删除</el-button>
            </template>

@@ -20,8 +20,9 @@
            </template>

            <template #action="{ data }">
-                <el-button v-auth="'role:update'" @click="editRole(data)" type="primary" link>编辑</el-button>
-                <el-button v-auth="'role:saveResources'" @click="editResource(data)" type="success" link>权限分配</el-button>
+                <el-button v-if="actionBtns[perms.updateRole]" @click="editRole(data)" type="primary" link>编辑</el-button>
+                <el-button v-if="actionBtns[perms.saveRoleResource]" @click="editResource(data)" type="success"
+                    link>权限分配</el-button>
            </template>

        </page-table>
@@ -45,30 +46,41 @@ import { roleApi, resourceApi } from '../api';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import PageTable from '@/components/pagetable/PageTable.vue'
 import { TableColumn, TableQuery } from '@/components/pagetable';
+import { hasPerms } from '@/components/auth/auth';

 const pageTableRef: any = ref(null)

+const perms = {
+    addRole: "role:add",
+    delRole: "role:del",
+    updateRole: "role:update",
+    saveRoleResource: "role:saveResources",
+}
+
+const queryConfig = [
+    TableQuery.text("name", "角色名"),
+]
+const columns = [
+    TableColumn.new("name", "角色名称"),
+    TableColumn.new("code", "角色code"),
+    TableColumn.new("remark", "备注"),
+    TableColumn.new("status", "状态").isSlot(),
+    TableColumn.new("creator", "创建账号"),
+    TableColumn.new("createTime", "创建时间").isTime(),
+    TableColumn.new("modifier", "更新账号"),
+    TableColumn.new("updateTime", "更新时间").isTime(),
+    TableColumn.new("showmore", "查看更多").isSlot().setMinWidth(150),
+]
+
+const actionBtns = hasPerms([perms.updateRole, perms.saveRoleResource])
+const actionColumn = TableColumn.new("action", "操作").isSlot().setMinWidth(160).fixedRight()
+
 const state = reactive({
    query: {
        pageNum: 1,
        pageSize: 10,
        name: null,
    },
-    queryConfig: [
-        TableQuery.text("name", "角色名"),
-    ],
-    columns: [
-        TableColumn.new("name", "角色名称"),
-        TableColumn.new("code", "角色code"),
-        TableColumn.new("remark", "备注"),
-        TableColumn.new("status", "状态").isSlot(),
-        TableColumn.new("creator", "创建账号"),
-        TableColumn.new("createTime", "创建时间").isTime(),
-        TableColumn.new("modifier", "更新账号"),
-        TableColumn.new("updateTime", "更新时间").isTime(),
-        TableColumn.new("showmore", "查看更多").isSlot().setMinWidth(150),
-        TableColumn.new("action", "操作").isSlot().setMinWidth(160).fixedRight(),
-    ],
    total: 0,
    roles: [],
    selectionData: [],
@@ -101,6 +113,9 @@ const {
 } = toRefs(state)

 onMounted(() => {
+    if (Object.keys(actionBtns).length > 0) {
+        columns.push(actionColumn);
+    }
    search();
 });

--- a/mayfly_go_web/src/views/system/syslog/SyslogList.vue
+++ b/mayfly_go_web/src/views/system/syslog/SyslogList.vue
@@ -45,7 +45,7 @@ const state = reactive({
    columns: [
        TableColumn.new("creator", "操作人"),
        TableColumn.new("createTime", "操作时间").isTime(),
-        TableColumn.new("type", "结果").setSlot("type"),
+        TableColumn.new("type", "结果").isSlot(),
        TableColumn.new("description", "描述"),
        TableColumn.new("reqParam", "操作信息"),
        TableColumn.new("resp", "响应信息"),