From 540f089b6271d0cdbade1a815489a2532a01f5e5 Mon Sep 17 00:00:00 2001
From: ssongliu <sloooop1x@gmail.com>
Date: Tue, 12 May 2026 11:39:39 +0800
Subject: [PATCH 1/3] fix: tighten frontend RBAC permission guards

---
 frontend/src/components/status/index.vue      |  3 +-
 .../composables/useMenuManagePermission.ts    | 73 ++++++++++++++++
 .../src/layout/components/Sidebar/index.vue   | 31 +++----
 frontend/src/store/modules/global.ts          |  3 +
 .../src/views/ai/agents/agent/add/index.vue   | 14 ++-
 .../agents/agent/components/hermes-chat.vue   |  7 +-
 .../config/tabs/agents/binding/index.vue      | 13 ++-
 .../agent/config/tabs/agents/create/index.vue |  9 +-
 .../agent/config/tabs/agents/detail/index.vue |  9 +-
 .../agents/agent/config/tabs/agents/index.vue | 26 ++++--
 .../tabs/channels/components/channel-bots.vue | 43 +++++++---
 .../channels/components/plugin-install.vue    | 21 ++++-
 .../config/tabs/channels/hermes/dingtalk.vue  | 14 ++-
 .../config/tabs/channels/hermes/discord.vue   | 14 ++-
 .../config/tabs/channels/hermes/feishu.vue    | 14 ++-
 .../agent/config/tabs/channels/hermes/qq.vue  | 14 ++-
 .../config/tabs/channels/hermes/telegram.vue  | 14 ++-
 .../config/tabs/channels/hermes/wecom.vue     | 14 ++-
 .../config/tabs/channels/hermes/weixin.vue    |  6 +-
 .../tabs/channels/openclaw/dingtalk.vue       | 10 ++-
 .../config/tabs/channels/openclaw/discord.vue |  4 +-
 .../config/tabs/channels/openclaw/feishu.vue  |  9 +-
 .../config/tabs/channels/openclaw/qq.vue      |  9 +-
 .../tabs/channels/openclaw/telegram.vue       |  4 +-
 .../config/tabs/channels/openclaw/wecom.vue   | 16 +++-
 .../config/tabs/channels/openclaw/weixin.vue  |  9 +-
 .../ai/agents/agent/config/tabs/model.vue     | 18 +++-
 .../config/tabs/settings/config-file.vue      |  4 +-
 .../agent/config/tabs/settings/other.vue      |  4 +-
 .../agent/config/tabs/settings/security.vue   |  4 +-
 .../agent/config/tabs/skills/hermes.vue       |  4 +
 .../agent/config/tabs/skills/openclaw.vue     |  4 +
 .../views/ai/agents/agent/delete/index.vue    |  4 +-
 frontend/src/views/ai/agents/agent/index.vue  | 59 ++++++++++---
 .../views/ai/agents/agent/website/index.vue   |  4 +-
 .../src/views/ai/agents/model/add/index.vue   |  4 +-
 frontend/src/views/ai/agents/model/index.vue  |  8 +-
 .../src/views/ai/agents/model/pool/index.vue  |  8 +-
 .../src/views/ai/mcp/server/bind/index.vue    |  4 +-
 .../src/views/ai/mcp/server/import/index.vue  |  4 +-
 frontend/src/views/ai/mcp/server/index.vue    | 12 ++-
 .../src/views/ai/mcp/server/operate/index.vue | 18 +++-
 .../src/views/ai/mcp/server/volume/index.vue  | 14 ++-
 .../src/views/ai/model/ollama/add/index.vue   |  4 +-
 .../src/views/ai/model/ollama/del/index.vue   |  8 +-
 .../views/ai/model/ollama/domain/index.vue    |  4 +-
 frontend/src/views/ai/model/ollama/index.vue  | 31 +++++--
 .../src/views/ai/model/tensorrt/index.vue     | 10 ++-
 .../views/ai/model/tensorrt/operate/index.vue |  4 +-
 .../src/views/app-store/apps/app/index.vue    |  7 +-
 frontend/src/views/app-store/apps/index.vue   | 10 ++-
 frontend/src/views/app-store/detail/index.vue |  3 +
 .../views/app-store/installed/app/header.vue  | 27 ++++--
 .../src/views/app-store/installed/index.vue   | 17 +++-
 .../src/views/app-store/setting/index.vue     |  6 ++
 .../src/views/container/compose/index.vue     | 42 +++++++--
 .../src/views/container/container/index.vue   | 74 +++++++++++-----
 .../container/container/operate/index.vue     | 12 ++-
 .../src/views/container/dashboard/index.vue   |  6 ++
 frontend/src/views/container/image/index.vue  | 18 ++--
 .../src/views/container/network/index.vue     | 10 ++-
 frontend/src/views/container/repo/index.vue   | 10 ++-
 .../src/views/container/setting/index.vue     | 85 +++++++++++++++----
 .../src/views/container/template/index.vue    | 19 +++--
 frontend/src/views/container/volume/index.vue |  8 +-
 frontend/src/views/cronjob/cronjob/index.vue  | 42 ++++++---
 .../views/cronjob/cronjob/record/index.vue    |  8 +-
 frontend/src/views/cronjob/library/index.vue  | 28 ++++--
 .../src/views/database/mongodb/conn/index.vue |  8 +-
 frontend/src/views/database/mongodb/index.vue | 22 +++--
 .../views/database/mongodb/remote/index.vue   |  6 +-
 .../src/views/database/mysql/conn/index.vue   | 14 ++-
 frontend/src/views/database/mysql/index.vue   | 22 +++--
 .../src/views/database/mysql/remote/index.vue |  7 +-
 .../views/database/mysql/setting/index.vue    | 11 ++-
 .../database/mysql/setting/slow-log/index.vue |  3 +
 .../mysql/setting/variables/index.vue         |  8 +-
 .../views/database/postgresql/conn/index.vue  |  8 +-
 .../src/views/database/postgresql/index.vue   | 22 +++--
 .../database/postgresql/remote/index.vue      |  6 +-
 .../database/postgresql/setting/index.vue     | 11 ++-
 .../views/database/redis/command/index.vue    |  9 +-
 .../src/views/database/redis/conn/index.vue   |  8 +-
 frontend/src/views/database/redis/index.vue   | 16 +++-
 .../src/views/database/redis/remote/index.vue |  6 +-
 .../views/database/redis/setting/index.vue    | 16 +++-
 .../redis/setting/persistence/index.vue       | 40 +++++++--
 frontend/src/views/home/app/index.vue         | 16 +++-
 frontend/src/views/home/index.vue             | 60 +++++++++++--
 .../disk-management/components/disk-card.vue  | 35 ++++++--
 .../views/host/disk-management/disk/index.vue |  4 +
 .../host/disk-management/partition/index.vue  | 15 +++-
 .../host/file-management/favorite/index.vue   |  4 +
 .../src/views/host/file-management/index.vue  | 53 +++++++++---
 .../file-management/recycle-bin/index.vue     | 23 ++++-
 .../host/file-management/share-list/index.vue |  4 +
 .../host/file-management/share/index.vue      |  6 +-
 .../src/views/host/firewall/advance/index.vue | 16 +++-
 .../src/views/host/firewall/forward/index.vue | 16 +++-
 frontend/src/views/host/firewall/ip/index.vue | 26 ++++--
 .../src/views/host/firewall/port/index.vue    | 26 ++++--
 .../src/views/host/firewall/status/index.vue  | 45 ++++++++--
 .../src/views/host/monitor/setting/index.vue  | 27 ++++--
 .../src/views/host/process/process/index.vue  |  3 +
 frontend/src/views/host/ssh/log/log.vue       |  6 +-
 frontend/src/views/host/ssh/session/index.vue |  3 +
 .../host/ssh/ssh/certification/index.vue      | 10 ++-
 frontend/src/views/host/ssh/ssh/index.vue     | 53 ++++++++++--
 frontend/src/views/log/login/index.vue        |  4 +-
 frontend/src/views/log/operation/index.vue    |  4 +-
 frontend/src/views/log/website/index.vue      |  6 +-
 frontend/src/views/toolbox/clam/index.vue     | 18 +++-
 .../src/views/toolbox/clam/operate/index.vue  | 16 +++-
 .../src/views/toolbox/clam/record/index.vue   | 16 +++-
 .../src/views/toolbox/clam/setting/index.vue  | 10 ++-
 .../src/views/toolbox/clam/status/index.vue   | 36 ++++++--
 frontend/src/views/toolbox/clean/index.vue    |  6 +-
 .../src/views/toolbox/device/dns/index.vue    |  4 +-
 .../views/toolbox/device/hostname/index.vue   |  4 +-
 .../src/views/toolbox/device/hosts/index.vue  |  6 +-
 frontend/src/views/toolbox/device/index.vue   | 41 +++++++--
 .../src/views/toolbox/device/ntp/index.vue    | 28 +++++-
 .../src/views/toolbox/device/passwd/index.vue |  8 +-
 .../src/views/toolbox/device/swap/index.vue   |  5 +-
 .../toolbox/fail2ban/ban-action/index.vue     |  4 +-
 .../views/toolbox/fail2ban/ban-time/index.vue |  4 +-
 .../toolbox/fail2ban/find-time/index.vue      |  4 +-
 frontend/src/views/toolbox/fail2ban/index.vue | 78 ++++++++++++++---
 .../src/views/toolbox/fail2ban/ips/index.vue  |  4 +-
 .../views/toolbox/fail2ban/log-path/index.vue |  6 +-
 .../toolbox/fail2ban/max-retry/index.vue      |  4 +-
 .../src/views/toolbox/fail2ban/port/index.vue |  4 +-
 frontend/src/views/toolbox/ftp/index.vue      | 30 +++++--
 .../src/views/toolbox/ftp/operate/index.vue   | 14 ++-
 frontend/src/views/toolbox/index.vue          |  6 +-
 .../toolbox/supervisor/config/basic/index.vue |  4 +-
 .../supervisor/config/source/index.vue        |  4 +-
 .../views/toolbox/supervisor/create/index.vue | 10 ++-
 .../views/toolbox/supervisor/file/index.vue   |  4 +-
 .../src/views/toolbox/supervisor/index.vue    | 16 +++-
 .../views/toolbox/supervisor/log/index.vue    |  4 +-
 .../views/toolbox/supervisor/status/index.vue | 24 ++++--
 .../toolbox/supervisor/status/init/index.vue  |  4 +-
 .../views/website/runtime/dotnet/index.vue    | 17 +++-
 .../src/views/website/runtime/go/index.vue    | 11 ++-
 .../src/views/website/runtime/java/index.vue  | 18 +++-
 .../src/views/website/runtime/node/index.vue  | 18 +++-
 .../runtime/php/extension-template/index.vue  |  7 +-
 .../src/views/website/runtime/php/index.vue   | 18 +++-
 .../website/runtime/php/supervisor/index.vue  |  3 +-
 .../views/website/runtime/python/index.vue    | 18 +++-
 .../views/website/ssl/acme-account/index.vue  |  4 +-
 frontend/src/views/website/ssl/ca/index.vue   |  6 +-
 .../views/website/ssl/dns-account/index.vue   |  5 +-
 frontend/src/views/website/ssl/index.vue      | 32 ++++---
 .../website/config/basic/auth-basic/index.vue |  6 +-
 .../config/basic/load-balance/index.vue       |  5 +-
 .../website/config/basic/proxy/index.vue      | 23 +++--
 .../website/config/basic/redirect/index.vue   |  9 +-
 frontend/src/views/website/website/index.vue  | 32 +++++--
 .../website/website/nginx/module/index.vue    | 14 ++-
 161 files changed, 1950 insertions(+), 503 deletions(-)
 create mode 100644 frontend/src/composables/useMenuManagePermission.ts

diff --git a/frontend/src/components/status/index.vue b/frontend/src/components/status/index.vue
index a297791144af..10d887d32a0e 100644
--- a/frontend/src/components/status/index.vue
+++ b/frontend/src/components/status/index.vue
@@ -21,7 +21,7 @@
                 </el-icon>
             </span>
         </el-tag>
-        <el-button size="small" v-else :type="getType(statusItem)" plain round>
+        <el-button size="small" v-else :type="getType(statusItem)" plain round :disabled="props.disabled">
             <span v-if="statusItem != ''">{{ $t('commons.status.' + statusItem) }}</span>
             <el-icon v-if="loadingIcon(statusItem)" class="is-loading">
                 <Loading />
@@ -39,6 +39,7 @@ const props = defineProps({
     status: String,
     msg: String,
     hasIcon: Boolean,
+    disabled: Boolean,
     operate: {
         type: Boolean,
         default: false,
diff --git a/frontend/src/composables/useMenuManagePermission.ts b/frontend/src/composables/useMenuManagePermission.ts
new file mode 100644
index 000000000000..310f10aa1f68
--- /dev/null
+++ b/frontend/src/composables/useMenuManagePermission.ts
@@ -0,0 +1,73 @@
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { GlobalStore } from '@/store';
+
+const getRoutePermission = (route: ReturnType<typeof useRoute>) => {
+    const metaPermission = route.meta?.permission;
+    if (typeof metaPermission === 'string' && metaPermission) {
+        return metaPermission;
+    }
+
+    for (const record of [...route.matched].reverse()) {
+        const permission = record.meta?.permission;
+        if (typeof permission === 'string' && permission) {
+            return permission;
+        }
+    }
+
+    return '';
+};
+
+const toManagePermission = (permission: string) => {
+    if (!permission) {
+        return '';
+    }
+    return permission.endsWith('_view') ? permission.replace(/_view$/, '_manage') : permission;
+};
+
+export const useMenuManagePermission = (permission?: string) => {
+    const route = useRoute();
+    const globalStore = GlobalStore();
+
+    const sourcePermission = computed(() => {
+        if (permission) {
+            return permission;
+        }
+        return getRoutePermission(route);
+    });
+    const managePermission = computed(() => {
+        return toManagePermission(sourcePermission.value);
+    });
+    const hasAdminManagePermission = computed(() => globalStore.isAdmin || globalStore.isNodeAdmin);
+    const hasPermission = computed(() => {
+        if (hasAdminManagePermission.value) {
+            return true;
+        }
+        if (!sourcePermission.value) {
+            return false;
+        }
+        if (sourcePermission.value.endsWith('_view')) {
+            return (
+                globalStore.hasPermission(sourcePermission.value) ||
+                globalStore.hasPermission(toManagePermission(sourcePermission.value))
+            );
+        }
+        return globalStore.hasPermission(sourcePermission.value);
+    });
+    const hasManagePermission = computed(() => {
+        if (hasAdminManagePermission.value) {
+            return true;
+        }
+        if (!managePermission.value) {
+            return false;
+        }
+        return globalStore.hasPermission(managePermission.value);
+    });
+
+    return {
+        managePermission,
+        hasAdminManagePermission,
+        hasPermission,
+        hasManagePermission,
+    };
+};
diff --git a/frontend/src/layout/components/Sidebar/index.vue b/frontend/src/layout/components/Sidebar/index.vue
index b7a0c11f9b3f..ad41ff7643e7 100644
--- a/frontend/src/layout/components/Sidebar/index.vue
+++ b/frontend/src/layout/components/Sidebar/index.vue
@@ -96,22 +96,8 @@ const search = async () => {
         version.value = '';
     }
 
-    if (!globalStore.isAdmin) {
-        menuStore.setMenuList(buildAuthVisibleMenuList(menuList));
-        return;
-    }
     try {
-        const hideMenu = JSON.parse(settingInfo?.hideMenu || '[]');
-        const showSet = new Set<string>();
-        getCheckedLabels(hideMenu, showSet);
-        const rstMenuList: RouteRecordRaw[] = [];
-        const resMenuList = adjustAndCleanMenu(hideMenu, menuList);
-        for (const menu of resMenuList) {
-            const menuItem = buildVisibleMenu(menu, showSet);
-            if (menuItem) {
-                rstMenuList.push(menuItem);
-            }
-        }
+        const rstMenuList = buildMenuListFromSettings(settingInfo?.hideMenu);
         if (!isSameMenuList(menuStore.menuList as RouteRecordRaw[], rstMenuList)) {
             menuStore.setMenuList(rstMenuList);
         }
@@ -141,6 +127,21 @@ function allowMenuItem(item: RouteRecordRaw) {
     return allowed;
 }
 
+function buildMenuListFromSettings(hideMenuValue?: string) {
+    const hideMenu = JSON.parse(hideMenuValue || '[]');
+    const showSet = new Set<string>();
+    getCheckedLabels(hideMenu, showSet);
+    const rstMenuList: RouteRecordRaw[] = [];
+    const resMenuList = adjustAndCleanMenu(hideMenu, menuList);
+    for (const menu of resMenuList) {
+        const menuItem = buildVisibleMenu(menu, showSet);
+        if (menuItem) {
+            rstMenuList.push(menuItem);
+        }
+    }
+    return rstMenuList;
+}
+
 function buildAuthVisibleMenuList(source: RouteRecordRaw[]) {
     return source
         .map((item) => {
diff --git a/frontend/src/store/modules/global.ts b/frontend/src/store/modules/global.ts
index de23dc6ab8d1..f1306e3793af 100644
--- a/frontend/src/store/modules/global.ts
+++ b/frontend/src/store/modules/global.ts
@@ -78,6 +78,9 @@ const GlobalStore = defineStore({
         isDarkGoldTheme: (state) => state.themeConfig.primary === '#F0BE96' && state.isProductPro,
         isNodeAdmin: (state) =>
             state.nodeRoles.some((item) => item.nodeName === state.currentNode && item.roleName === 'Node Admin'),
+        isAdminOrNodeAdmin: (state) =>
+            state.isAdmin ||
+            state.nodeRoles.some((item) => item.nodeName === state.currentNode && item.roleName === 'Node Admin'),
         docsUrl: (state) => {
             if (state.docWithRegion) {
                 return state.isIntl ? INTL_DOCS_URL : CN_DOCS_URL;
diff --git a/frontend/src/views/ai/agents/agent/add/index.vue b/frontend/src/views/ai/agents/agent/add/index.vue
index a25c8999cc84..483ac88b0f87 100644
--- a/frontend/src/views/ai/agents/agent/add/index.vue
+++ b/frontend/src/views/ai/agents/agent/add/index.vue
@@ -66,7 +66,13 @@
                     </el-select>
                     <span class="input-help">
                         {{ $t('aiTools.agents.noAccountHint') }}
-                        <el-button type="primary" link class="inline-link" @click="openAccountCreate">
+                        <el-button
+                            type="primary"
+                            link
+                            class="inline-link"
+                            :disabled="!hasManagePermission"
+                            @click="openAccountCreate"
+                        >
                             {{ $t('commons.button.create') }}
                         </el-button>
                     </span>
@@ -95,7 +101,9 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="open = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="submit">{{ $t('commons.button.confirm') }}</el-button>
+                <el-button type="primary" :disabled="!hasManagePermission" @click="submit">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
             </span>
         </template>
     </DrawerPro>
@@ -105,6 +113,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue';
 import { FormInstance } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { checkNumberRange, Rules } from '@/global/form-rules';
 import { createAgent, getAgentProviders, pageAgentAccounts } from '@/api/modules/ai';
 import { AI } from '@/api/interface/ai';
@@ -123,6 +132,7 @@ import AccountAddDialog from '@/views/ai/agents/model/add/index.vue';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 
 const emit = defineEmits(['search', 'task']);
+const { hasManagePermission } = useMenuManagePermission();
 
 const open = ref(false);
 const formRef = ref<FormInstance>();
diff --git a/frontend/src/views/ai/agents/agent/components/hermes-chat.vue b/frontend/src/views/ai/agents/agent/components/hermes-chat.vue
index 247f9887a6de..2156a0e05b15 100644
--- a/frontend/src/views/ai/agents/agent/components/hermes-chat.vue
+++ b/frontend/src/views/ai/agents/agent/components/hermes-chat.vue
@@ -46,7 +46,7 @@
                                         <el-button
                                             link
                                             type="primary"
-                                            :disabled="!canSaveSessionTitle"
+                                            :disabled="!canSaveSessionTitle || !hasManagePermission"
                                             @click.stop="saveSessionTitle(item)"
                                         >
                                             {{ $t('commons.button.save') }}
@@ -60,6 +60,7 @@
                                         link
                                         icon="Edit"
                                         class="hermes-chat-dialog__edit-button"
+                                        :disabled="!hasManagePermission"
                                         @mousedown.stop
                                         @click.stop="startEditSessionTitle(item)"
                                     />
@@ -68,7 +69,7 @@
                                         link
                                         type="danger"
                                         icon="Delete"
-                                        :disabled="isDeleteDisabled(item)"
+                                        :disabled="isDeleteDisabled(item) || !hasManagePermission"
                                         :loading="deletingSessionId === item.id"
                                         @mousedown.stop
                                         @click.stop="deleteSession(item)"
@@ -97,6 +98,7 @@
 <script setup lang="ts">
 import { ElMessageBox } from 'element-plus';
 import { computed, nextTick, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import DialogPro from '@/components/dialog-pro/index.vue';
 import Terminal from '@/components/terminal/index.vue';
@@ -112,6 +114,7 @@ import { MsgError, MsgSuccess } from '@/utils/message';
 
 const { currentNode } = useGlobalStore();
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 
 interface HermesChatDialogParams {
     agentId: number;
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/agents/binding/index.vue b/frontend/src/views/ai/agents/agent/config/tabs/agents/binding/index.vue
index fb3483139d30..5b6610f059a1 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/agents/binding/index.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/agents/binding/index.vue
@@ -35,7 +35,7 @@
                 </el-table-column>
                 <el-table-column :label="$t('commons.table.operate')" width="100" align="right">
                     <template #default="{ $index }">
-                        <el-button link @click="removeBinding($index)">
+                        <el-button link :disabled="!hasManagePermission" @click="removeBinding($index)">
                             {{ $t('commons.button.delete') }}
                         </el-button>
                     </template>
@@ -45,7 +45,12 @@
                 <el-empty :description="$t('commons.msg.noneData')" :image-size="60" />
             </div>
             <div class="binding-dialog__actions">
-                <el-button type="primary" link :disabled="loading || submitting" @click="addBinding">
+                <el-button
+                    type="primary"
+                    link
+                    :disabled="loading || submitting || !hasManagePermission"
+                    @click="addBinding"
+                >
                     {{ $t('commons.button.add') }}
                 </el-button>
             </div>
@@ -57,7 +62,7 @@
             <el-button
                 type="primary"
                 :loading="submitting"
-                :disabled="loading || !form.bindings.length"
+                :disabled="loading || !form.bindings.length || !hasManagePermission"
                 @click="submitBind"
             >
                 {{ $t('commons.button.bind') }}
@@ -68,10 +73,12 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { bindAgentRole, getAgentRoleChannels } from '@/api/modules/ai';
 import { AI } from '@/api/interface/ai';
 import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
+const { hasManagePermission } = useMenuManagePermission();
 
 interface SelectOption {
     label: string;
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/agents/create/index.vue b/frontend/src/views/ai/agents/agent/config/tabs/agents/create/index.vue
index 70d7fd559839..5bd56c57b936 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/agents/create/index.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/agents/create/index.vue
@@ -51,7 +51,7 @@
                         </el-table-column>
                         <el-table-column :label="$t('commons.table.operate')" width="90" align="center">
                             <template #default="{ $index }">
-                                <el-button link @click="removeBinding($index)">
+                                <el-button link :disabled="!hasManagePermission" @click="removeBinding($index)">
                                     {{ $t('commons.button.delete') }}
                                 </el-button>
                             </template>
@@ -59,7 +59,7 @@
                     </el-table>
                     <el-empty v-else :description="$t('commons.msg.noneData')" :image-size="60" />
                     <div class="bindings-footer">
-                        <el-button type="primary" link @click="addBinding">
+                        <el-button type="primary" link :disabled="!hasManagePermission" @click="addBinding">
                             {{ $t('commons.button.add') }}
                         </el-button>
                     </div>
@@ -68,7 +68,7 @@
         </div>
         <template #footer>
             <el-button :disabled="loading" @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
-            <el-button type="primary" :loading="loading" @click="submit">
+            <el-button type="primary" :loading="loading" :disabled="!hasManagePermission" @click="submit">
                 {{ $t('commons.button.confirm') }}
             </el-button>
         </template>
@@ -78,6 +78,7 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { createAgentRole, getAgentRoleChannels, pageAgentAccounts } from '@/api/modules/ai';
 import { AI } from '@/api/interface/ai';
 import { Rules } from '@/global/form-rules';
@@ -85,6 +86,8 @@ import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 
+const { hasManagePermission } = useMenuManagePermission();
+
 interface SelectOption {
     label: string;
     value: string;
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/agents/detail/index.vue b/frontend/src/views/ai/agents/agent/config/tabs/agents/detail/index.vue
index d49ab189600c..2b9540b092ec 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/agents/detail/index.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/agents/detail/index.vue
@@ -28,7 +28,12 @@
                 <el-button :loading="loading" :disabled="saving || !agentId || !workspace" @click="reloadFiles">
                     {{ $t('commons.button.refresh') }}
                 </el-button>
-                <el-button type="primary" :loading="saving" :disabled="!currentFile" @click="saveAllFiles">
+                <el-button
+                    type="primary"
+                    :loading="saving"
+                    :disabled="!currentFile || !hasManagePermission"
+                    @click="saveAllFiles"
+                >
                     {{ $t('aiTools.agents.saveAllMd') }}
                 </el-button>
             </span>
@@ -39,10 +44,12 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { ElMessageBox } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { AI } from '@/api/interface/ai';
 import { getAgentRoleMarkdownFiles, updateAgentRoleMarkdownFile } from '@/api/modules/ai';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
+const { hasManagePermission } = useMenuManagePermission();
 
 interface DialogParams {
     name: string;
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/agents/index.vue b/frontend/src/views/ai/agents/agent/config/tabs/agents/index.vue
index f0d0b2144283..27a11dcfb027 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/agents/index.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/agents/index.vue
@@ -8,7 +8,7 @@
         />
         <template v-else>
             <div class="role-toolbar">
-                <el-button type="primary" @click="openCreateDialog">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="openCreateDialog">
                     {{ $t('commons.button.add') }}
                 </el-button>
             </div>
@@ -49,7 +49,13 @@
                                     {{ $t('aiTools.agents.agentDir') }}
                                 </el-button>
                             </el-tooltip>
-                            <el-button plain size="small" round @click="handleDelete(row)">
+                            <el-button
+                                plain
+                                size="small"
+                                round
+                                :disabled="!hasManagePermission"
+                                @click="handleDelete(row)"
+                            >
                                 {{ $t('commons.button.delete') }}
                             </el-button>
                         </div>
@@ -64,17 +70,25 @@
                                 <el-tag
                                     v-for="item in row.bindings"
                                     :key="`${item.channel}-${item.accountId || 'default'}`"
-                                    closable
+                                    :closable="hasManagePermission"
                                     @close="handleUnbind(row, item)"
                                 >
                                     {{ item.accountId ? `${item.channel}:${item.accountId}` : item.channel }}
                                 </el-tag>
-                                <el-button size="small" @click="openBindingDialog(row)">
+                                <el-button
+                                    size="small"
+                                    :disabled="!hasManagePermission"
+                                    @click="openBindingDialog(row)"
+                                >
                                     + {{ $t('commons.button.add') }}
                                 </el-button>
                             </div>
                             <div v-else class="role-card__tags">
-                                <el-button size="small" @click="openBindingDialog(row)">
+                                <el-button
+                                    size="small"
+                                    :disabled="!hasManagePermission"
+                                    @click="openBindingDialog(row)"
+                                >
                                     + {{ $t('commons.button.add') }}
                                 </el-button>
                             </div>
@@ -93,6 +107,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { deleteAgentRole, getConfiguredAgentRoles, unbindAgentRole } from '@/api/modules/ai';
 import { AI } from '@/api/interface/ai';
 import i18n from '@/lang';
@@ -101,6 +116,7 @@ import { MsgSuccess } from '@/utils/message';
 import CreateDialog from './create/index.vue';
 import BindingDialog from './binding/index.vue';
 import DetailDrawer from './detail/index.vue';
+const { hasManagePermission } = useMenuManagePermission();
 
 interface AgentRoleLoadParams {
     agentId: number;
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/components/channel-bots.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/components/channel-bots.vue
index bab45bddb25c..d5d76360e44c 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/components/channel-bots.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/components/channel-bots.vue
@@ -2,7 +2,7 @@
     <div class="channel-bots">
         <div class="channel-bots__header">
             <span class="channel-bots__title">{{ title || t('aiTools.agents.bots') }}</span>
-            <el-button type="primary" link :disabled="addDisabled" @click="openCreate">
+            <el-button type="primary" link :disabled="addDisabled || !hasManagePermission" @click="openCreate">
                 {{ t('aiTools.agents.addBot') }}
             </el-button>
         </div>
@@ -33,7 +33,7 @@
                 <template #default="{ row, $index }">
                     <el-switch
                         :model-value="row.enabled"
-                        :disabled="disabled || isBotActionDisabled(row)"
+                        :disabled="disabled || isBotActionDisabled(row) || !hasManagePermission"
                         @change="updateEnabled($index, $event)"
                     />
                 </template>
@@ -41,7 +41,12 @@
             <el-table-column :label="t('commons.table.operate')" width="240" fixed="right">
                 <template #default="{ row, $index }">
                     <div class="channel-bots__actions">
-                        <el-button link type="primary" :disabled="disabled" @click="openEdit(row, $index)">
+                        <el-button
+                            link
+                            type="primary"
+                            :disabled="disabled || !hasManagePermission"
+                            @click="openEdit(row, $index)"
+                        >
                             {{ t('commons.button.edit') }}
                         </el-button>
                         <el-button
@@ -50,6 +55,7 @@
                             type="primary"
                             :disabled="
                                 disabled ||
+                                !hasManagePermission ||
                                 !row.enabled ||
                                 isBotActionDisabled(row) ||
                                 (approveDisabled ? approveDisabled(row) : false)
@@ -59,7 +65,9 @@
                             {{ t('aiTools.agents.approvePairing') }}
                         </el-button>
                         <el-button
-                            :disabled="disabled || undeletableAccountIds.includes(row.accountId)"
+                            :disabled="
+                                disabled || !hasManagePermission || undeletableAccountIds.includes(row.accountId)
+                            "
                             link
                             type="primary"
                             @click="removeBot($index)"
@@ -71,7 +79,7 @@
                             trigger="hover"
                             @command="handleMoreCommand(row, $index, $event)"
                         >
-                            <el-button link type="primary" :disabled="disabled">
+                            <el-button link type="primary" :disabled="disabled || !hasManagePermission">
                                 {{ t('tabs.more') }}
                             </el-button>
                             <template #dropdown>
@@ -79,7 +87,7 @@
                                     <el-dropdown-item
                                         v-if="defaultable && !row.isDefault"
                                         command="default"
-                                        :disabled="disabled || isBotActionDisabled(row)"
+                                        :disabled="disabled || !hasManagePermission || isBotActionDisabled(row)"
                                     >
                                         {{ t('aiTools.agents.setDefaultBot') }}
                                     </el-dropdown-item>
@@ -94,23 +102,23 @@
         <DialogPro v-model="dialogVisible" :title="dialogTitle">
             <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
                 <el-form-item v-if="showNameField" :label="t('commons.table.name')" prop="name">
-                    <el-input v-model="form.name" :disabled="disabled" />
+                    <el-input v-model="form.name" :disabled="disabled || !hasManagePermission" />
                 </el-form-item>
                 <el-form-item :label="t('aiTools.agents.accountId')" prop="accountId">
                     <el-input
                         v-model="form.accountId"
-                        :disabled="disabled || accountIdLocked"
+                        :disabled="disabled || !hasManagePermission || accountIdLocked"
                         :placeholder="t('aiTools.agents.accountIdPlaceholder')"
                     />
                 </el-form-item>
                 <el-form-item :label="t('commons.table.status')">
-                    <el-switch v-model="form.enabled" :disabled="disabled" />
+                    <el-switch v-model="form.enabled" :disabled="disabled || !hasManagePermission" />
                 </el-form-item>
                 <el-form-item v-for="field in fields" :key="field.prop" :label="field.label" :prop="field.prop">
                     <el-select
                         v-if="field.type === 'select'"
                         v-model="form[field.prop]"
-                        :disabled="disabled"
+                        :disabled="disabled || !hasManagePermission"
                         :placeholder="field.placeholder"
                     >
                         <el-option
@@ -125,7 +133,7 @@
                         v-model="form[field.prop]"
                         type="password"
                         show-password
-                        :disabled="disabled"
+                        :disabled="disabled || !hasManagePermission"
                         :placeholder="field.placeholder"
                     />
                     <el-input
@@ -133,15 +141,20 @@
                         v-model="form[field.prop]"
                         type="textarea"
                         :rows="3"
-                        :disabled="disabled"
+                        :disabled="disabled || !hasManagePermission"
+                        :placeholder="field.placeholder"
+                    />
+                    <el-input
+                        v-else
+                        v-model="form[field.prop]"
+                        :disabled="disabled || !hasManagePermission"
                         :placeholder="field.placeholder"
                     />
-                    <el-input v-else v-model="form[field.prop]" :disabled="disabled" :placeholder="field.placeholder" />
                 </el-form-item>
             </el-form>
             <template #footer>
                 <el-button @click="dialogVisible = false">{{ t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" :disabled="disabled" @click="saveBot">
+                <el-button type="primary" :disabled="disabled || !hasManagePermission" @click="saveBot">
                     {{ t('commons.button.save') }}
                 </el-button>
             </template>
@@ -153,9 +166,11 @@
 import { computed, reactive, ref } from 'vue';
 import type { FormInstance, FormRules } from 'element-plus';
 import type { PropType } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { Rules } from '@/global/form-rules';
 import { MsgWarning } from '@/utils/message';
+const { hasManagePermission } = useMenuManagePermission();
 
 interface ChannelBotField {
     prop: string;
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/components/plugin-install.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/components/plugin-install.vue
index 211db6825b9c..370f5dbf6282 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/components/plugin-install.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/components/plugin-install.vue
@@ -8,7 +8,7 @@
         :description="t('aiTools.agents.pluginInstallNPMRegistryHelper')"
     />
     <el-form-item v-if="!installed" class="mt-4">
-        <el-button type="primary" :loading="installing" @click="handleInstall">
+        <el-button type="primary" :loading="installing" :disabled="!hasManagePermission" @click="handleInstall">
             {{ t('commons.button.install') }}
         </el-button>
     </el-form-item>
@@ -18,7 +18,14 @@
                 <span class="plugin-install-status__label">{{ t('app.version') }}</span>
                 <span class="plugin-install-status__value">{{ currentVersion || '-' }}</span>
             </div>
-            <el-button type="danger" plain size="small" :loading="uninstalling" @click="handleUninstall">
+            <el-button
+                type="danger"
+                plain
+                size="small"
+                :loading="uninstalling"
+                :disabled="!hasManagePermission"
+                @click="handleUninstall"
+            >
                 {{ t('commons.button.uninstall') }}
             </el-button>
         </div>
@@ -27,7 +34,13 @@
                 <span class="plugin-install-status__label">{{ t('app.newVersion') }}</span>
                 <span class="plugin-install-status__value">{{ latestVersion || '-' }}</span>
             </div>
-            <el-button type="primary" size="small" :loading="upgrading" @click="handleUpgrade">
+            <el-button
+                type="primary"
+                size="small"
+                :loading="upgrading"
+                :disabled="!hasManagePermission"
+                @click="handleUpgrade"
+            >
                 {{ t('commons.button.upgrade') }}
             </el-button>
         </div>
@@ -37,6 +50,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import TaskLog from '@/components/log/task/index.vue';
 
@@ -55,6 +69,7 @@ const props = defineProps<{
 }>();
 
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 const taskLogRef = ref();
 
 const openTaskLog = (taskID: string) => {
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/dingtalk.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/dingtalk.vue
index 6578276c3f89..97b38b781fd6 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/dingtalk.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/dingtalk.vue
@@ -1,7 +1,7 @@
 <template>
     <el-form ref="formRef" v-loading="deleting" :model="form" :rules="rules" label-position="top">
         <el-form-item v-if="configured">
-            <el-button type="danger" plain :loading="deleting" @click="deleteChannel">
+            <el-button type="danger" plain :loading="deleting" :disabled="!hasManagePermission" @click="deleteChannel">
                 {{ t('commons.button.delete') }}
             </el-button>
         </el-form-item>
@@ -19,7 +19,7 @@
             </el-select>
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="saving" @click="save">
+            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="save">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -29,7 +29,13 @@
                 <el-input v-model="pairingCode" :placeholder="t('aiTools.agents.pairingCodePlaceholder')" />
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" plain :loading="approving" @click="approvePairing">
+                <el-button
+                    type="primary"
+                    plain
+                    :loading="approving"
+                    :disabled="!hasManagePermission"
+                    @click="approvePairing"
+                >
                     {{ t('aiTools.agents.approvePairing') }}
                 </el-button>
             </el-form-item>
@@ -40,6 +46,7 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import { ElMessageBox, type FormInstance } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import {
     approveAgentChannelPairing,
@@ -57,6 +64,7 @@ interface DingTalkForm {
 }
 
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 const formRef = ref<FormInstance>();
 const saving = ref(false);
 const approving = ref(false);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/discord.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/discord.vue
index dc7bc77455f2..f30dea2792d4 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/discord.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/discord.vue
@@ -1,7 +1,7 @@
 <template>
     <el-form ref="formRef" v-loading="deleting" :model="form" :rules="rules" label-position="top">
         <el-form-item v-if="configured">
-            <el-button type="danger" plain :loading="deleting" @click="deleteChannel">
+            <el-button type="danger" plain :loading="deleting" :disabled="!hasManagePermission" @click="deleteChannel">
                 {{ t('commons.button.delete') }}
             </el-button>
         </el-form-item>
@@ -18,7 +18,7 @@
             <el-switch v-model="form.requireMention" />
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="saving" @click="save">
+            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="save">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -28,7 +28,13 @@
                 <el-input v-model="pairingCode" :placeholder="t('aiTools.agents.pairingCodePlaceholder')" />
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" plain :loading="approving" @click="approvePairing">
+                <el-button
+                    type="primary"
+                    plain
+                    :loading="approving"
+                    :disabled="!hasManagePermission"
+                    @click="approvePairing"
+                >
                     {{ t('aiTools.agents.approvePairing') }}
                 </el-button>
             </el-form-item>
@@ -39,6 +45,7 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import { ElMessageBox, type FormInstance } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import {
     approveAgentChannelPairing,
@@ -56,6 +63,7 @@ interface DiscordForm {
 }
 
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 const formRef = ref<FormInstance>();
 const saving = ref(false);
 const approving = ref(false);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/feishu.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/feishu.vue
index 013bd64a655a..da9990838d2b 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/feishu.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/feishu.vue
@@ -1,7 +1,7 @@
 <template>
     <el-form ref="formRef" v-loading="deleting" :model="form" :rules="rules" label-position="top">
         <el-form-item v-if="configured">
-            <el-button type="danger" plain :loading="deleting" @click="deleteChannel">
+            <el-button type="danger" plain :loading="deleting" :disabled="!hasManagePermission" @click="deleteChannel">
                 {{ t('commons.button.delete') }}
             </el-button>
         </el-form-item>
@@ -24,7 +24,7 @@
             </el-select>
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="saving" @click="save">
+            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="save">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -34,7 +34,13 @@
                 <el-input v-model="pairingCode" :placeholder="t('aiTools.agents.pairingCodePlaceholder')" />
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" plain :loading="approving" @click="approvePairing">
+                <el-button
+                    type="primary"
+                    plain
+                    :loading="approving"
+                    :disabled="!hasManagePermission"
+                    @click="approvePairing"
+                >
                     {{ t('aiTools.agents.approvePairing') }}
                 </el-button>
             </el-form-item>
@@ -45,6 +51,7 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import { ElMessageBox, type FormInstance } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import {
     approveAgentChannelPairing,
@@ -63,6 +70,7 @@ interface FeishuForm {
 }
 
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 const formRef = ref<FormInstance>();
 const saving = ref(false);
 const approving = ref(false);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/qq.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/qq.vue
index 9713b0ac41ac..c2dfa3a9896e 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/qq.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/qq.vue
@@ -1,7 +1,7 @@
 <template>
     <el-form ref="formRef" v-loading="deleting" :model="form" :rules="rules" label-position="top">
         <el-form-item v-if="configured">
-            <el-button type="danger" plain :loading="deleting" @click="deleteChannel">
+            <el-button type="danger" plain :loading="deleting" :disabled="!hasManagePermission" @click="deleteChannel">
                 {{ t('commons.button.delete') }}
             </el-button>
         </el-form-item>
@@ -25,7 +25,7 @@
             </el-select>
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="saving" @click="save">
+            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="save">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -35,7 +35,13 @@
                 <el-input v-model="pairingCode" :placeholder="t('aiTools.agents.pairingCodePlaceholder')" />
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" plain :loading="approving" @click="approvePairing">
+                <el-button
+                    type="primary"
+                    plain
+                    :loading="approving"
+                    :disabled="!hasManagePermission"
+                    @click="approvePairing"
+                >
                     {{ t('aiTools.agents.approvePairing') }}
                 </el-button>
             </el-form-item>
@@ -46,6 +52,7 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import { ElMessageBox, type FormInstance } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import {
     approveAgentChannelPairing,
@@ -64,6 +71,7 @@ interface QQBotForm {
 }
 
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 const formRef = ref<FormInstance>();
 const saving = ref(false);
 const approving = ref(false);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/telegram.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/telegram.vue
index f14495543c9f..156361916b9d 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/telegram.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/telegram.vue
@@ -1,7 +1,7 @@
 <template>
     <el-form ref="formRef" v-loading="deleting" :model="form" :rules="rules" label-position="top">
         <el-form-item v-if="configured">
-            <el-button type="danger" plain :loading="deleting" @click="deleteChannel">
+            <el-button type="danger" plain :loading="deleting" :disabled="!hasManagePermission" @click="deleteChannel">
                 {{ t('commons.button.delete') }}
             </el-button>
         </el-form-item>
@@ -18,7 +18,7 @@
             <el-switch v-model="form.requireMention" />
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="saving" @click="save">
+            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="save">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -28,7 +28,13 @@
                 <el-input v-model="pairingCode" :placeholder="t('aiTools.agents.pairingCodePlaceholder')" />
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" plain :loading="approving" @click="approvePairing">
+                <el-button
+                    type="primary"
+                    plain
+                    :loading="approving"
+                    :disabled="!hasManagePermission"
+                    @click="approvePairing"
+                >
                     {{ t('aiTools.agents.approvePairing') }}
                 </el-button>
             </el-form-item>
@@ -39,6 +45,7 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import { ElMessageBox, type FormInstance } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import {
     approveAgentChannelPairing,
@@ -56,6 +63,7 @@ interface TelegramForm {
 }
 
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 const formRef = ref<FormInstance>();
 const saving = ref(false);
 const approving = ref(false);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/wecom.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/wecom.vue
index d28c8ab9f2de..43fc364dea21 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/wecom.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/wecom.vue
@@ -1,7 +1,7 @@
 <template>
     <el-form ref="formRef" v-loading="deleting" :model="form" :rules="rules" label-position="top">
         <el-form-item v-if="configured">
-            <el-button type="danger" plain :loading="deleting" @click="deleteChannel">
+            <el-button type="danger" plain :loading="deleting" :disabled="!hasManagePermission" @click="deleteChannel">
                 {{ t('commons.button.delete') }}
             </el-button>
         </el-form-item>
@@ -25,7 +25,7 @@
             </el-select>
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="saving" @click="save">
+            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="save">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -35,7 +35,13 @@
                 <el-input v-model="pairingCode" :placeholder="t('aiTools.agents.pairingCodePlaceholder')" />
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" plain :loading="approving" @click="approvePairing">
+                <el-button
+                    type="primary"
+                    plain
+                    :loading="approving"
+                    :disabled="!hasManagePermission"
+                    @click="approvePairing"
+                >
                     {{ t('aiTools.agents.approvePairing') }}
                 </el-button>
             </el-form-item>
@@ -46,6 +52,7 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import { ElMessageBox, type FormInstance } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import {
     approveAgentChannelPairing,
@@ -64,6 +71,7 @@ interface WecomForm {
 }
 
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 const formRef = ref<FormInstance>();
 const saving = ref(false);
 const approving = ref(false);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/weixin.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/weixin.vue
index 3593f2a89353..802a29904537 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/weixin.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/weixin.vue
@@ -1,12 +1,12 @@
 <template>
     <el-form v-loading="deleting" label-position="top">
         <el-form-item v-if="configured">
-            <el-button type="danger" plain :loading="deleting" @click="deleteChannel">
+            <el-button type="danger" plain :loading="deleting" :disabled="!hasManagePermission" @click="deleteChannel">
                 {{ t('commons.button.delete') }}
             </el-button>
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="loggingIn" @click="loginChannel">
+            <el-button type="primary" :loading="loggingIn" :disabled="!hasManagePermission" @click="loginChannel">
                 {{ t('aiTools.agents.scanConnect') }}
             </el-button>
         </el-form-item>
@@ -18,6 +18,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { ElMessageBox } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { deleteAgentChannelConfig, getAgentWeixinConfig, loginAgentWeixinChannel } from '@/api/modules/ai';
 import TaskLog from '@/components/log/task/index.vue';
@@ -28,6 +29,7 @@ const props = defineProps<{
     agentId: number;
 }>();
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 const loggingIn = ref(false);
 const deleting = ref(false);
 const loginTaskLogRef = ref();
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/dingtalk.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/dingtalk.vue
index 27d3f5484ac0..c7aee824b7fe 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/dingtalk.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/dingtalk.vue
@@ -93,7 +93,12 @@
                 @save="saveChannel"
             />
             <el-form-item class="mt-4">
-                <el-button type="primary" :loading="saving" :disabled="!installed" @click="saveChannel">
+                <el-button
+                    type="primary"
+                    :loading="saving"
+                    :disabled="!installed || !hasManagePermission"
+                    @click="saveChannel"
+                >
                     {{ t('commons.button.save') }}
                 </el-button>
             </el-form-item>
@@ -104,6 +109,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue';
 import type { FormInstance, FormRules } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { AI } from '@/api/interface/ai';
 import { getAgentDingTalkConfig, updateAgentDingTalkConfig } from '@/api/modules/ai';
@@ -115,6 +121,8 @@ import VersionSupport from '../../components/version-support.vue';
 import { useAgentPluginChannel } from './useAgentPluginChannel';
 import ChannelBots from '../components/channel-bots.vue';
 
+const { hasManagePermission } = useMenuManagePermission();
+
 interface DingTalkForm extends Omit<AI.AgentDingTalkConfig, 'installed' | 'allowFrom' | 'groupAllowFrom'> {
     allowFromText: string;
     groupAllowFromText: string;
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/discord.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/discord.vue
index b00356dbd6b3..950ee242be5e 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/discord.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/discord.vue
@@ -33,7 +33,7 @@
             @approve="approvePairing"
         />
         <el-form-item class="mt-4">
-            <el-button type="primary" :loading="saving" @click="saveChannel">
+            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="saveChannel">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -44,6 +44,7 @@
 import { reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
 import { ElMessageBox } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { AI } from '@/api/interface/ai';
 import { approveAgentChannelPairing, getAgentDiscordConfig, updateAgentDiscordConfig } from '@/api/modules/ai';
@@ -52,6 +53,7 @@ import { Rules } from '@/global/form-rules';
 import ChannelBots from '../components/channel-bots.vue';
 
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 type BotField = {
     prop: string;
     label: string;
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/feishu.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/feishu.vue
index 31ce6eb18aaa..a4c081aaafe9 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/feishu.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/feishu.vue
@@ -75,7 +75,12 @@
                 @approve="approvePairing"
             />
             <el-form-item class="mt-4">
-                <el-button type="primary" :loading="saving" :disabled="!installed" @click="saveChannel">
+                <el-button
+                    type="primary"
+                    :loading="saving"
+                    :disabled="!installed || !hasManagePermission"
+                    @click="saveChannel"
+                >
                     {{ t('commons.button.save') }}
                 </el-button>
             </el-form-item>
@@ -87,6 +92,7 @@
 import { computed, reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
 import { ElMessageBox } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { AI } from '@/api/interface/ai';
 import { approveAgentChannelPairing, getAgentFeishuConfig, updateAgentFeishuConfig } from '@/api/modules/ai';
@@ -97,6 +103,7 @@ import { useAgentPluginChannel } from './useAgentPluginChannel';
 import ChannelBots from '../components/channel-bots.vue';
 
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 
 type BotField = {
     prop: string;
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/qq.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/qq.vue
index bcdd3326e6d4..05620c7cce71 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/qq.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/qq.vue
@@ -34,7 +34,12 @@
                 @save="saveChannel"
             />
             <el-form-item class="mt-4">
-                <el-button type="primary" :loading="saving" :disabled="!installed" @click="saveChannel">
+                <el-button
+                    type="primary"
+                    :loading="saving"
+                    :disabled="!installed || !hasManagePermission"
+                    @click="saveChannel"
+                >
                     {{ t('commons.button.save') }}
                 </el-button>
             </el-form-item>
@@ -44,6 +49,7 @@
 
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { AI } from '@/api/interface/ai';
 import { getAgentQQBotConfig, updateAgentQQBotConfig } from '@/api/modules/ai';
@@ -70,6 +76,7 @@ interface QQBotForm {
 }
 
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 const saving = ref(false);
 const {
     agentId,
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/telegram.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/telegram.vue
index 082926011eba..0431d777f249 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/telegram.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/telegram.vue
@@ -67,7 +67,7 @@
             @approve="approvePairing"
         />
         <el-form-item class="mt-4">
-            <el-button type="primary" :loading="saving" @click="saveChannel">
+            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="saveChannel">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -78,6 +78,7 @@
 import { reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
 import { ElMessageBox } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { AI } from '@/api/interface/ai';
 import { approveAgentChannelPairing, getAgentTelegramConfig, updateAgentTelegramConfig } from '@/api/modules/ai';
@@ -86,6 +87,7 @@ import { Rules } from '@/global/form-rules';
 import ChannelBots from '../components/channel-bots.vue';
 
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 
 type BotField = {
     prop: string;
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/wecom.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/wecom.vue
index 2bf4cbd46edd..f2ef9867dd7a 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/wecom.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/wecom.vue
@@ -65,7 +65,12 @@
                 <el-input v-model="form.secret" type="password" show-password />
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" :loading="saving" :disabled="!installed" @click="saveChannel">
+                <el-button
+                    type="primary"
+                    :loading="saving"
+                    :disabled="!installed || !hasManagePermission"
+                    @click="saveChannel"
+                >
                     {{ t('commons.button.save') }}
                 </el-button>
             </el-form-item>
@@ -77,7 +82,12 @@
                     <el-input v-model="pairingCode" :placeholder="t('aiTools.agents.pairingCodePlaceholder')" />
                 </el-form-item>
                 <el-form-item>
-                    <el-button type="primary" :loading="approving" :disabled="!installed" @click="approvePairing">
+                    <el-button
+                        type="primary"
+                        :loading="approving"
+                        :disabled="!installed || !hasManagePermission"
+                        @click="approvePairing"
+                    >
                         {{ t('aiTools.agents.approvePairing') }}
                     </el-button>
                 </el-form-item>
@@ -89,6 +99,7 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { AI } from '@/api/interface/ai';
 import { approveAgentChannelPairing, getAgentWecomConfig, updateAgentWecomConfig } from '@/api/modules/ai';
@@ -103,6 +114,7 @@ interface WecomForm extends Omit<AI.AgentWecomConfig, 'installed' | 'allowFrom'
 }
 
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 const saving = ref(false);
 const approving = ref(false);
 const pairingCode = ref('');
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/weixin.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/weixin.vue
index fa2829cd4d10..40533ef8a61d 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/weixin.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/weixin.vue
@@ -16,7 +16,12 @@
         />
         <template v-if="installed">
             <el-form-item class="mt-4">
-                <el-button type="primary" :loading="loggingIn" :disabled="!installed" @click="loginChannel">
+                <el-button
+                    type="primary"
+                    :loading="loggingIn"
+                    :disabled="!installed || !hasManagePermission"
+                    @click="loginChannel"
+                >
                     {{ t('aiTools.agents.scanConnect') }}
                 </el-button>
             </el-form-item>
@@ -28,6 +33,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { loginAgentWeixinChannel } from '@/api/modules/ai';
 import { newUUID } from '@/utils/id';
@@ -43,6 +49,7 @@ const props = defineProps<{
 }>();
 
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 const loggingIn = ref(false);
 const loginTaskLogRef = ref();
 const {
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/model.vue b/frontend/src/views/ai/agents/agent/config/tabs/model.vue
index 192f3189a498..f3a7e1b8eb73 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/model.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/model.vue
@@ -22,7 +22,12 @@
                             :value="item.id"
                         />
                     </el-select>
-                    <el-button type="primary" plain :disabled="!fallbackCandidate" @click="addFallback">
+                    <el-button
+                        type="primary"
+                        plain
+                        :disabled="!fallbackCandidate || !hasManagePermission"
+                        @click="addFallback"
+                    >
                         {{ t('aiTools.agents.addFallbackModel') }}
                     </el-button>
                 </div>
@@ -46,7 +51,12 @@
                                 :disabled="$index === fallbackRows.length - 1"
                                 @click="moveFallback($index, 1)"
                             />
-                            <el-button link :icon="Delete" @click="removeFallback($index)" />
+                            <el-button
+                                link
+                                :icon="Delete"
+                                :disabled="!hasManagePermission"
+                                @click="removeFallback($index)"
+                            />
                         </template>
                     </el-table-column>
                     <template #empty>
@@ -56,7 +66,7 @@
             </div>
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="saving" @click="saveModel">
+            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="saveModel">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -67,6 +77,7 @@
 import { computed, reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
 import { ArrowDown, ArrowUp, Delete } from '@element-plus/icons-vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { AI } from '@/api/interface/ai';
 import { getAgentModelConfig, pageAgentAccounts, updateAgentModelConfig } from '@/api/modules/ai';
@@ -76,6 +87,7 @@ import { useGlobalStore } from '@/composables/useGlobalStore';
 
 const emit = defineEmits(['updated']);
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 const saving = ref(false);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/settings/config-file.vue b/frontend/src/views/ai/agents/agent/config/tabs/settings/config-file.vue
index 1f4221a254d6..1be08f5aa1f6 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/settings/config-file.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/settings/config-file.vue
@@ -9,7 +9,7 @@
             :placeholder="t('commons.msg.noneData')"
         />
         <div class="mt-4">
-            <el-button type="primary" :loading="saving" @click="confirmSave">
+            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="confirmSave">
                 {{ t('commons.button.save') }}
             </el-button>
         </div>
@@ -19,6 +19,7 @@
 
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
@@ -27,6 +28,7 @@ import { getAgentConfigFile, updateAgentConfigFile } from '@/api/modules/ai';
 import { MsgSuccess } from '@/utils/message';
 
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 const loading = ref(false);
 const saving = ref(false);
 const agentId = ref(0);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/settings/other.vue b/frontend/src/views/ai/agents/agent/config/tabs/settings/other.vue
index ff9ba06817f4..258ead08b22e 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/settings/other.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/settings/other.vue
@@ -13,7 +13,7 @@
             <el-input v-model="form.userTimezone" />
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="saving" @click="saveConfig">
+            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="saveConfig">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -24,6 +24,7 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { Rules } from '@/global/form-rules';
 import { AI } from '@/api/interface/ai';
@@ -31,6 +32,7 @@ import { getAgentOtherConfig, updateAgentOtherConfig } from '@/api/modules/ai';
 import { MsgSuccess } from '@/utils/message';
 
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 const loading = ref(false);
 const saving = ref(false);
 const agentId = ref(0);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/settings/security.vue b/frontend/src/views/ai/agents/agent/config/tabs/settings/security.vue
index 32dcd6116df1..32206e870225 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/settings/security.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/settings/security.vue
@@ -9,7 +9,7 @@
             />
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="saving" @click="saveConfig">
+            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="saveConfig">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -19,12 +19,14 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { getAgentSecurityConfig, updateAgentSecurityConfig } from '@/api/modules/ai';
 import { MsgSuccess } from '@/utils/message';
 import { buildDefaultAllowedOrigin, parseAllowedOriginsInput, validateAllowedOriginsInput } from '@/utils/agent';
 
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 const loading = ref(false);
 const saving = ref(false);
 const agentId = ref(0);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/skills/hermes.vue b/frontend/src/views/ai/agents/agent/config/tabs/skills/hermes.vue
index 125eae361a91..f2f4186e61d4 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/skills/hermes.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/skills/hermes.vue
@@ -59,6 +59,7 @@
                                         v-if="skill.uninstallable"
                                         link
                                         type="danger"
+                                        :disabled="!hasManagePermission"
                                         :loading="uninstallingSkill === skill.name"
                                         @click="uninstallSkill(skill)"
                                     >
@@ -99,6 +100,7 @@
                             <el-button
                                 type="primary"
                                 link
+                                :disabled="!hasManagePermission"
                                 :loading="installingSkill === (skill.identifier || skill.slug)"
                                 @click="installSkill(skill)"
                             >
@@ -134,6 +136,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { Refresh, Search } from '@element-plus/icons-vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { AI } from '@/api/interface/ai';
 import { installAgentSkill, listAgentSkills, searchAgentSkills, uninstallAgentSkill } from '@/api/modules/ai';
@@ -145,6 +148,7 @@ type SkillViewMode = 'installed' | 'market';
 type HermesSkillMarketSource = 'official' | 'skills-sh';
 
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 const loading = ref(false);
 const searching = ref(false);
 const mode = ref<SkillViewMode>('market');
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/skills/openclaw.vue b/frontend/src/views/ai/agents/agent/config/tabs/skills/openclaw.vue
index d435d59ce09d..f2c83d574b8f 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/skills/openclaw.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/skills/openclaw.vue
@@ -62,6 +62,7 @@
                                     <div class="skill-name">{{ skill.name }}</div>
                                     <el-switch
                                         :model-value="!skill.disabled"
+                                        :disabled="!hasManagePermission"
                                         :loading="updatingSkill === skill.name"
                                         @change="(value) => toggleSkill(skill, Boolean(value))"
                                     />
@@ -101,6 +102,7 @@
                             <el-button
                                 type="primary"
                                 link
+                                :disabled="!hasManagePermission"
                                 :loading="installingSkill === skill.slug"
                                 @click="installSkill(skill)"
                             >
@@ -142,6 +144,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { Refresh, Search } from '@element-plus/icons-vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { AI } from '@/api/interface/ai';
 import { installAgentSkill, listAgentSkills, searchAgentSkills, updateAgentSkill } from '@/api/modules/ai';
@@ -162,6 +165,7 @@ const props = defineProps<{
 }>();
 
 const { t } = useI18n();
+const { hasManagePermission } = useMenuManagePermission();
 const { isIntl } = useGlobalStore();
 const loading = ref(false);
 const searching = ref(false);
diff --git a/frontend/src/views/ai/agents/agent/delete/index.vue b/frontend/src/views/ai/agents/agent/delete/index.vue
index ee4bf453e5ad..39593938e24a 100644
--- a/frontend/src/views/ai/agents/agent/delete/index.vue
+++ b/frontend/src/views/ai/agents/agent/delete/index.vue
@@ -16,7 +16,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="submit" :loading="loading">
+                <el-button type="primary" @click="submit" :loading="loading" :disabled="!hasManagePermission">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -28,12 +28,14 @@
 <script setup lang="ts">
 import { FormInstance } from 'element-plus';
 import { ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { deleteAgent } from '@/api/modules/ai';
 import { newUUID } from '@/utils/id';
 import TaskLog from '@/components/log/task/index.vue';
 
 const open = ref(false);
 const loading = ref(false);
+const { hasManagePermission } = useMenuManagePermission();
 const taskLogRef = ref();
 const agentName = ref('');
 const deleteForm = ref<FormInstance>();
diff --git a/frontend/src/views/ai/agents/agent/index.vue b/frontend/src/views/ai/agents/agent/index.vue
index ece8499fdb03..ddf616a27575 100644
--- a/frontend/src/views/ai/agents/agent/index.vue
+++ b/frontend/src/views/ai/agents/agent/index.vue
@@ -4,7 +4,7 @@
         <DockerStatus v-model:isActive="isActive" v-model:isExist="isExist" />
         <LayoutContent v-loading="loading" v-if="isExist" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" @click="openCreate" :disabled="noApp">
+                <el-button type="primary" @click="openCreate" :disabled="noApp || !hasManagePermission">
                     {{ $t('commons.button.create') }}
                 </el-button>
             </template>
@@ -36,23 +36,23 @@
                     <el-table-column :label="$t('commons.table.status')" prop="status" width="120">
                         <template #default="{ row }">
                             <el-dropdown placement="bottom">
-                                <Status :status="row.status" :operate="true" />
+                                <Status :status="row.status" :disabled="!hasManagePermission" :operate="true" />
                                 <template #dropdown>
                                     <el-dropdown-menu>
                                         <el-dropdown-item
-                                            :disabled="checkStatus('start', row)"
+                                            :disabled="checkStatus('start', row) || !hasManagePermission"
                                             @click="onOperate(row, 'start')"
                                         >
                                             {{ $t('commons.operate.start') }}
                                         </el-dropdown-item>
                                         <el-dropdown-item
-                                            :disabled="checkStatus('stop', row)"
+                                            :disabled="checkStatus('stop', row) || !hasManagePermission"
                                             @click="onOperate(row, 'stop')"
                                         >
                                             {{ $t('commons.operate.stop') }}
                                         </el-dropdown-item>
                                         <el-dropdown-item
-                                            :disabled="checkStatus('restart', row)"
+                                            :disabled="checkStatus('restart', row) || !hasManagePermission"
                                             @click="onOperate(row, 'restart')"
                                         >
                                             {{ $t('commons.button.restart') }}
@@ -66,7 +66,13 @@
                         <template #default="{ row }">
                             <div class="version-cell">
                                 <span>{{ row.appVersion }}</span>
-                                <el-button v-if="row.upgradable" link type="primary" @click="openUpgrade(row)">
+                                <el-button
+                                    :disabled="!hasManagePermission"
+                                    v-if="row.upgradable"
+                                    link
+                                    type="primary"
+                                    @click="openUpgrade(row)"
+                                >
                                     {{ $t('commons.button.upgrade') }}
                                 </el-button>
                             </div>
@@ -134,31 +140,42 @@
                                     link
                                     type="primary"
                                     class="website-link-cell__unbind"
+                                    :disabled="!hasManagePermission"
                                     @click="onUnbindWebsite(row)"
                                 >
                                     {{ $t('commons.button.unbind') }}
                                 </el-button>
                             </div>
-                            <el-button v-else link type="primary" @click="openBindWebsite(row)">
+                            <el-button
+                                v-else
+                                link
+                                type="primary"
+                                :disabled="!hasManagePermission"
+                                @click="openBindWebsite(row)"
+                            >
                                 {{ $t('commons.button.bind') }}
                             </el-button>
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('website.remark')" prop="remark" min-width="150">
                         <template #default="{ row }">
-                            <fu-read-write-switch>
+                            <fu-read-write-switch :write-trigger="hasManagePermission ? 'onClick' : 'disabled'">
                                 <template #read>
                                     <MsgInfo :info="row.remark" :width="'150'" />
                                 </template>
                                 <template #default="{ read }">
-                                    <el-input v-model="row.remark" @blur="handleUpdateRemark(row, read)" />
+                                    <el-input
+                                        v-model="row.remark"
+                                        :disabled="!hasManagePermission"
+                                        @blur="handleUpdateRemark(row, read)"
+                                    />
                                 </template>
                             </fu-read-write-switch>
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('runtime.workDir')" min-width="90">
                         <template #default="{ row }">
-                            <el-button type="primary" link @click="openWorkDir(row)">
+                            <el-button :disabled="!hasFilePermission" type="primary" link @click="openWorkDir(row)">
                                 <el-icon>
                                     <FolderOpened />
                                 </el-icon>
@@ -169,7 +186,12 @@
                         <template #default="{ row }">
                             <el-space v-if="supportsAgentToken(row.agentType)">
                                 <CopyButton :content="row.token" />
-                                <el-button link type="primary" @click="onResetToken(row)">
+                                <el-button
+                                    :disabled="!hasManagePermission"
+                                    link
+                                    type="primary"
+                                    @click="onResetToken(row)"
+                                >
                                     {{ $t('commons.button.reset') }}
                                 </el-button>
                             </el-space>
@@ -211,6 +233,7 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { deleteAgentCheck, pageAgents, resetAgentToken, unbindAgentWebsite, updateAgentRemark } from '@/api/modules/ai';
 import { checkAppInstalled, installedOp, searchApp, searchAppInstalled } from '@/api/modules/app';
 import { AI } from '@/api/interface/ai';
@@ -247,6 +270,7 @@ import NoApp from '@/views/app-store/apps/no-app/index.vue';
 import openclawIcon from '@/assets/images/ai-agent-openclaw.svg';
 import copawIcon from '@/assets/images/ai-agent-copaw.svg';
 import hermesIcon from '@/assets/images/ai-agent-hermes-agent.svg';
+import { GlobalStore } from '@/store';
 
 const items = ref<AI.AgentItem[]>([]);
 const loading = ref(false);
@@ -264,6 +288,8 @@ const hermesChatRef = ref();
 const dialogPortJumpRef = ref();
 const route = useRoute();
 const router = useRouter();
+const { hasManagePermission } = useMenuManagePermission();
+const { hasPermission: hasFilePermission } = useMenuManagePermission('host_file_view');
 const isActive = ref(false);
 const isExist = ref(false);
 const noApp = ref(false);
@@ -271,6 +297,7 @@ const searchName = ref('');
 const defaultHttpsPort = ref(443);
 const openrestyPortLoaded = ref(false);
 const websiteDomainsMap = ref<Record<number, Website.Domain[]>>({});
+const globalStore = GlobalStore();
 
 const headerButtons = [
     {
@@ -289,6 +316,7 @@ const buttons = [
     {
         label: i18n.global.t('aiTools.agents.hermesChatAction'),
         click: (row: AI.AgentItem) => openHermesChat(row),
+        disabled: () => !globalStore.isAdminOrNodeAdmin,
         show: (row: AI.AgentItem) => row.agentType === 'hermes-agent' && row.status === 'Running',
     },
     {
@@ -298,6 +326,7 @@ const buttons = [
     {
         label: i18n.global.t('menu.terminal'),
         click: (row: AI.AgentItem) => openTerminal(row),
+        disabled: () => !globalStore.isAdminOrNodeAdmin,
     },
     {
         label: i18n.global.t('menu.home'),
@@ -307,25 +336,27 @@ const buttons = [
     {
         label: i18n.global.t('commons.operate.start'),
         click: (row: AI.AgentItem) => onOperate(row, 'start'),
-        disabled: (row: AI.AgentItem) => row.status === 'Running',
+        disabled: (row: AI.AgentItem) => row.status === 'Running' || !hasManagePermission.value,
     },
     {
         label: i18n.global.t('commons.operate.stop'),
         click: (row: AI.AgentItem) => onOperate(row, 'stop'),
-        disabled: (row: AI.AgentItem) => row.status !== 'Running',
+        disabled: (row: AI.AgentItem) => row.status !== 'Running' || !hasManagePermission.value,
     },
     {
         label: i18n.global.t('commons.operate.restart'),
         click: (row: AI.AgentItem) => onOperate(row, 'restart'),
+        disabled: () => !hasManagePermission.value,
     },
     {
         label: i18n.global.t('commons.button.upgrade'),
         click: (row: AI.AgentItem) => openUpgrade(row),
-        disabled: (row: AI.AgentItem) => !row.upgradable,
+        disabled: (row: AI.AgentItem) => !row.upgradable || !hasManagePermission.value,
     },
     {
         label: i18n.global.t('commons.button.delete'),
         click: (row: AI.AgentItem) => onDelete(row),
+        disabled: () => !hasManagePermission.value,
     },
 ];
 
diff --git a/frontend/src/views/ai/agents/agent/website/index.vue b/frontend/src/views/ai/agents/agent/website/index.vue
index dbe47eafcf5d..0b378870549e 100644
--- a/frontend/src/views/ai/agents/agent/website/index.vue
+++ b/frontend/src/views/ai/agents/agent/website/index.vue
@@ -22,7 +22,7 @@
             <el-button @click="open = false" :disabled="loading">
                 {{ $t('commons.button.cancel') }}
             </el-button>
-            <el-button type="primary" @click="submit" :disabled="loading">
+            <el-button type="primary" @click="submit" :disabled="loading || !hasManagePermission">
                 {{ $t('commons.button.confirm') }}
             </el-button>
         </template>
@@ -32,6 +32,7 @@
 <script setup lang="ts">
 import { FormInstance, FormRules } from 'element-plus';
 import { reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { AI } from '@/api/interface/ai';
 import { Website } from '@/api/interface/website';
 import { bindAgentWebsite } from '@/api/modules/ai';
@@ -42,6 +43,7 @@ import i18n from '@/lang';
 
 const open = ref(false);
 const loading = ref(false);
+const { hasManagePermission } = useMenuManagePermission();
 const agentName = ref('');
 const websites = ref<Website.WebsiteOption[]>([]);
 const formRef = ref<FormInstance>();
diff --git a/frontend/src/views/ai/agents/model/add/index.vue b/frontend/src/views/ai/agents/model/add/index.vue
index c8dd4a4805e1..be50cb3181b4 100644
--- a/frontend/src/views/ai/agents/model/add/index.vue
+++ b/frontend/src/views/ai/agents/model/add/index.vue
@@ -70,7 +70,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button :disabled="loading" @click="open = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading" type="primary" @click="submit">
+                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="submit">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -81,6 +81,7 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue';
 import { FormInstance } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { AI } from '@/api/interface/ai';
 import { Rules } from '@/global/form-rules';
 import { createAgentAccount, getAgentProviders, updateAgentAccount } from '@/api/modules/ai';
@@ -90,6 +91,7 @@ import { MsgError } from '@/utils/message';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 
 const emit = defineEmits(['search']);
+const { hasManagePermission } = useMenuManagePermission();
 
 const open = ref(false);
 const formRef = ref<FormInstance>();
diff --git a/frontend/src/views/ai/agents/model/index.vue b/frontend/src/views/ai/agents/model/index.vue
index 85b4cbe35abe..6ba377622757 100644
--- a/frontend/src/views/ai/agents/model/index.vue
+++ b/frontend/src/views/ai/agents/model/index.vue
@@ -2,7 +2,9 @@
     <div>
         <LayoutContent>
             <template #leftToolBar>
-                <el-button type="primary" @click="openCreate">{{ $t('commons.button.create') }}</el-button>
+                <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
+                    {{ $t('commons.button.create') }}
+                </el-button>
             </template>
             <template #rightToolBar>
                 <TableSearch v-model:searchName="searchName" @search="search" />
@@ -51,6 +53,7 @@
 
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { deleteAgentAccount, pageAgentAccounts } from '@/api/modules/ai';
 import { AI } from '@/api/interface/ai';
 import AddDialog from '@/views/ai/agents/model/add/index.vue';
@@ -64,10 +67,12 @@ const items = ref<AI.AgentAccountItem[]>([]);
 const addRef = ref();
 const modelPoolRef = ref();
 const searchName = ref('');
+const { hasManagePermission } = useMenuManagePermission();
 
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value,
         click: (row: AI.AgentAccountItem) => onEdit(row),
     },
     {
@@ -76,6 +81,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => !hasManagePermission.value,
         click: (row: AI.AgentAccountItem) => onDelete(row),
     },
 ];
diff --git a/frontend/src/views/ai/agents/model/pool/index.vue b/frontend/src/views/ai/agents/model/pool/index.vue
index 5630aadbd413..1ceb823e7904 100644
--- a/frontend/src/views/ai/agents/model/pool/index.vue
+++ b/frontend/src/views/ai/agents/model/pool/index.vue
@@ -3,7 +3,7 @@
         <template #content>
             <div v-loading="loading">
                 <div class="toolbar">
-                    <el-button type="primary" @click="openCreate">
+                    <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
                         {{ $t('commons.button.add') }}
                     </el-button>
                 </div>
@@ -62,7 +62,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button :disabled="saving" @click="editorOpen = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="saving" type="primary" @click="submit">
+                <el-button :disabled="saving || !hasManagePermission" type="primary" @click="submit">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -74,6 +74,7 @@
 import { computed, reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
 import { ElMessageBox } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import {
     createAgentAccountModel,
     deleteAgentAccountModel,
@@ -85,6 +86,7 @@ import i18n from '@/lang';
 import { MsgError } from '@/utils/message';
 import { getAgentProviderDisplayName } from '@/utils/agent';
 import { Rules } from '@/global/form-rules';
+const { hasManagePermission } = useMenuManagePermission();
 
 const emit = defineEmits(['updated']);
 
@@ -131,10 +133,12 @@ const rules = reactive({
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value,
         click: (row: AI.AgentAccountModel) => openEdit(row),
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => !hasManagePermission.value,
         click: (row: AI.AgentAccountModel) => onDelete(row),
     },
 ];
diff --git a/frontend/src/views/ai/mcp/server/bind/index.vue b/frontend/src/views/ai/mcp/server/bind/index.vue
index 3a7a8ccefd28..c34bd538b45c 100644
--- a/frontend/src/views/ai/mcp/server/bind/index.vue
+++ b/frontend/src/views/ai/mcp/server/bind/index.vue
@@ -80,7 +80,7 @@
             <el-button @click="handleClose">
                 {{ $t('commons.button.cancel') }}
             </el-button>
-            <el-button type="primary" @click="onSubmit(formRef)">
+            <el-button type="primary" :disabled="!hasManagePermission" @click="onSubmit(formRef)">
                 {{ $t('commons.button.add') }}
             </el-button>
         </template>
@@ -90,6 +90,7 @@
 <script lang="ts" setup>
 import { Website } from '@/api/interface/website';
 import { listSSL, searchAcmeAccount } from '@/api/modules/website';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Rules } from '@/global/form-rules';
 import { FormInstance, FormRules } from 'element-plus';
 import { reactive, ref } from 'vue';
@@ -98,6 +99,7 @@ import { dateFormatSimple } from '@/utils/date';
 import { bindMcpDomain, getMcpDomain, updateMcpDomain } from '@/api/modules/ai';
 import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
+const { hasManagePermission } = useMenuManagePermission();
 
 type SSLItem = Website.SSL & { organization?: string };
 
diff --git a/frontend/src/views/ai/mcp/server/import/index.vue b/frontend/src/views/ai/mcp/server/import/index.vue
index eb623cbcf45a..50d84d499290 100644
--- a/frontend/src/views/ai/mcp/server/import/index.vue
+++ b/frontend/src/views/ai/mcp/server/import/index.vue
@@ -27,7 +27,7 @@
                 <el-button @click="onCancel">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
-                <el-button type="primary" @click="onConfirm">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="onConfirm">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -38,8 +38,10 @@
 <script lang="ts" setup>
 import i18n from '@/lang';
 import { ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const submitVisible = ref(false);
+const { hasManagePermission } = useMenuManagePermission();
 const mcpServerJson = ref();
 const mcpServerConfig = ref();
 
diff --git a/frontend/src/views/ai/mcp/server/index.vue b/frontend/src/views/ai/mcp/server/index.vue
index db259cfe78e0..02053b299ec3 100644
--- a/frontend/src/views/ai/mcp/server/index.vue
+++ b/frontend/src/views/ai/mcp/server/index.vue
@@ -4,10 +4,10 @@
         <LayoutContent :title="'Servers'" v-loading="loading">
             <template #leftToolBar>
                 <div class="flex flex-wrap gap-3">
-                    <el-button type="primary" @click="openCreate">
+                    <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
                         {{ $t('commons.button.create') }}
                     </el-button>
-                    <el-button type="primary" plain @click="openDomain">
+                    <el-button type="primary" plain :disabled="!hasManagePermission" @click="openDomain">
                         {{ $t('aiTools.mcp.bindDomain') }}
                     </el-button>
                 </div>
@@ -136,12 +136,14 @@ const getUrl = (row: AI.McpServer) => {
 const buttons = [
     {
         label: i18n.global.t('menu.config'),
+        disabled: () => !hasManagePermission.value,
         click: (row: AI.McpServer) => {
             openConfig(row);
         },
     },
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value,
         click: (row: AI.McpServer) => {
             openDetail(row);
         },
@@ -152,7 +154,7 @@ const buttons = [
             opServer(row, 'start');
         },
         disabled: (row: AI.McpServer) => {
-            return row.status === 'Running';
+            return row.status === 'Running' || !hasManagePermission.value;
         },
     },
     {
@@ -161,17 +163,19 @@ const buttons = [
             opServer(row, 'stop');
         },
         disabled: (row: AI.McpServer) => {
-            return row.status === 'Stopped';
+            return row.status === 'Stopped' || !hasManagePermission.value;
         },
     },
     {
         label: i18n.global.t('commons.button.restart'),
+        disabled: () => !hasManagePermission.value,
         click: (row: AI.McpServer) => {
             opServer(row, 'restart');
         },
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => !hasManagePermission.value,
         click: (row: AI.McpServer) => {
             deleteServer(row);
         },
diff --git a/frontend/src/views/ai/mcp/server/operate/index.vue b/frontend/src/views/ai/mcp/server/operate/index.vue
index 899ac5a07a84..1e8f04251f55 100644
--- a/frontend/src/views/ai/mcp/server/operate/index.vue
+++ b/frontend/src/views/ai/mcp/server/operate/index.vue
@@ -15,7 +15,7 @@
             v-loading="loading"
         >
             <el-form-item>
-                <el-button @click="importRef.acceptParams()" type="primary" plain>
+                <el-button :disabled="!hasManagePermission" @click="importRef.acceptParams()" type="primary" plain>
                     {{ $t('aiTools.mcp.importMcpJson') }}
                 </el-button>
             </el-form-item>
@@ -60,7 +60,13 @@
                         </el-col>
                         <el-col :span="4">
                             <el-form-item>
-                                <el-button type="primary" @click="removeEnv(index)" link class="mt-1">
+                                <el-button
+                                    type="primary"
+                                    :disabled="!hasManagePermission"
+                                    @click="removeEnv(index)"
+                                    link
+                                    class="mt-1"
+                                >
                                     {{ $t('commons.button.delete') }}
                                 </el-button>
                             </el-form-item>
@@ -68,7 +74,9 @@
                     </el-row>
                     <el-row :gutter="20">
                         <el-col :span="4">
-                            <el-button class="mb-2" @click="addEnv">{{ $t('commons.button.add') }}</el-button>
+                            <el-button class="mb-2" :disabled="!hasManagePermission" @click="addEnv">
+                                {{ $t('commons.button.add') }}
+                            </el-button>
                         </el-col>
                     </el-row>
                 </div>
@@ -128,7 +136,7 @@
         <template #footer>
             <span>
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="submit(mcpServerForm)" :disabled="loading">
+                <el-button type="primary" @click="submit(mcpServerForm)" :disabled="loading || !hasManagePermission">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -140,6 +148,7 @@
 <script lang="ts" setup>
 import { AI } from '@/api/interface/ai';
 import { createMcpServer, getMcpDomain, updateMcpServer } from '@/api/modules/ai';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
@@ -147,6 +156,7 @@ import { FormInstance } from 'element-plus';
 import { ref, watch } from 'vue';
 import Volumes from '../volume/index.vue';
 import Import from '../import/index.vue';
+const { hasManagePermission } = useMenuManagePermission();
 
 const open = ref(false);
 const mode = ref('create');
diff --git a/frontend/src/views/ai/mcp/server/volume/index.vue b/frontend/src/views/ai/mcp/server/volume/index.vue
index f1c2723f79f5..883bd8add20e 100644
--- a/frontend/src/views/ai/mcp/server/volume/index.vue
+++ b/frontend/src/views/ai/mcp/server/volume/index.vue
@@ -15,7 +15,13 @@
                 </el-col>
                 <el-col :span="4">
                     <el-form-item>
-                        <el-button type="primary" @click="removeEnv(index)" link class="mt-1">
+                        <el-button
+                            type="primary"
+                            :disabled="!hasManagePermission"
+                            @click="removeEnv(index)"
+                            link
+                            class="mt-1"
+                        >
                             {{ $t('commons.button.delete') }}
                         </el-button>
                     </el-form-item>
@@ -23,7 +29,9 @@
             </el-row>
             <el-row :gutter="20">
                 <el-col :span="4">
-                    <el-button @click="addEnv">{{ $t('commons.button.add') }}</el-button>
+                    <el-button :disabled="!hasManagePermission" @click="addEnv">
+                        {{ $t('commons.button.add') }}
+                    </el-button>
                 </el-col>
             </el-row>
         </div>
@@ -33,6 +41,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue';
 import { FormRules } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Rules } from '@/global/form-rules';
 import { AI } from '@/api/interface/ai';
 
@@ -42,6 +51,7 @@ const props = defineProps({
         required: true,
     },
 });
+const { hasManagePermission } = useMenuManagePermission();
 
 const rules = reactive<FormRules>({
     value: [Rules.requiredInput],
diff --git a/frontend/src/views/ai/model/ollama/add/index.vue b/frontend/src/views/ai/model/ollama/add/index.vue
index 99e05e7ed158..4a5d9c32c765 100644
--- a/frontend/src/views/ai/model/ollama/add/index.vue
+++ b/frontend/src/views/ai/model/ollama/add/index.vue
@@ -27,7 +27,7 @@
                 <el-button @click="drawerVisible = false">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
-                <el-button type="primary" @click="onSubmit(formRef)">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="onSubmit(formRef)">
                     {{ $t('commons.button.add') }}
                 </el-button>
             </span>
@@ -37,6 +37,7 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
@@ -44,6 +45,7 @@ import { MsgSuccess } from '@/utils/message';
 import { createOllamaModel } from '@/api/modules/ai';
 import { newUUID } from '@/utils/id';
 const drawerVisible = ref(false);
+const { hasManagePermission } = useMenuManagePermission();
 const form = reactive({
     name: '',
 });
diff --git a/frontend/src/views/ai/model/ollama/del/index.vue b/frontend/src/views/ai/model/ollama/del/index.vue
index bd2e5e2e8cd4..de5ca2703dc6 100644
--- a/frontend/src/views/ai/model/ollama/del/index.vue
+++ b/frontend/src/views/ai/model/ollama/del/index.vue
@@ -25,7 +25,11 @@
                 <el-button @click="handleClose()" :disabled="loading">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
-                <el-button type="primary" @click="onConfirm" :disabled="loading || checkedItems.length === 0">
+                <el-button
+                    type="primary"
+                    @click="onConfirm"
+                    :disabled="loading || checkedItems.length === 0 || !hasManagePermission"
+                >
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -36,6 +40,7 @@
 <script setup lang="ts">
 import { AI } from '@/api/interface/ai';
 import { deleteOllamaModel } from '@/api/modules/ai';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { CheckboxValueType } from 'element-plus';
@@ -44,6 +49,7 @@ import { ref } from 'vue';
 defineOptions({ name: 'OpDialog' });
 
 const checkAll = ref();
+const { hasManagePermission } = useMenuManagePermission();
 const isIndeterminate = ref(false);
 const checkedItems = ref([]);
 const list = ref([]);
diff --git a/frontend/src/views/ai/model/ollama/domain/index.vue b/frontend/src/views/ai/model/ollama/domain/index.vue
index 91c479a4e620..c312ad28488f 100644
--- a/frontend/src/views/ai/model/ollama/domain/index.vue
+++ b/frontend/src/views/ai/model/ollama/domain/index.vue
@@ -85,7 +85,7 @@
             <el-button @click="handleClose">
                 {{ $t('commons.button.cancel') }}
             </el-button>
-            <el-button type="primary" @click="onSubmit(formRef)">
+            <el-button type="primary" :disabled="!hasManagePermission" @click="onSubmit(formRef)">
                 {{ $t('commons.button.add') }}
             </el-button>
         </template>
@@ -95,6 +95,7 @@
 <script lang="ts" setup>
 import { Website } from '@/api/interface/website';
 import { listSSL, searchAcmeAccount } from '@/api/modules/website';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Rules } from '@/global/form-rules';
 import { FormInstance, FormRules } from 'element-plus';
 import { reactive, ref } from 'vue';
@@ -109,6 +110,7 @@ type SSLItem = Website.SSL & { organization?: string };
 const open = ref(false);
 const operate = ref('create');
 const loading = ref(false);
+const { hasManagePermission } = useMenuManagePermission();
 const ssls = ref<SSLItem[]>([]);
 const websiteSSL = ref<Website.SSL>();
 const acmeAccounts = ref();
diff --git a/frontend/src/views/ai/model/ollama/index.vue b/frontend/src/views/ai/model/ollama/index.vue
index 34de7d09bcc4..be9907bbcad3 100644
--- a/frontend/src/views/ai/model/ollama/index.vue
+++ b/frontend/src/views/ai/model/ollama/index.vue
@@ -20,16 +20,30 @@
                 </el-alert>
             </template>
             <template #leftToolBar>
-                <el-button :disabled="modelInfo.status !== 'Running'" type="primary" @click="onCreate()">
+                <el-button
+                    :disabled="!hasManagePermission || modelInfo.status !== 'Running'"
+                    type="primary"
+                    @click="onCreate()"
+                >
                     {{ $t('commons.button.add') }}
                 </el-button>
-                <el-button plain type="primary" :disabled="modelInfo.status !== 'Running'" @click="bindDomain">
+                <el-button
+                    plain
+                    type="primary"
+                    :disabled="modelInfo.status !== 'Running' || !hasManagePermission"
+                    @click="bindDomain"
+                >
                     {{ $t('aiTools.proxy.proxy') }}
                 </el-button>
                 <el-button :disabled="modelInfo.status !== 'Running'" @click="onLoadConn" type="primary" plain>
                     {{ $t('database.databaseConnInfo') }}
                 </el-button>
-                <el-button :disabled="modelInfo.status !== 'Running'" type="primary" plain @click="onSync()">
+                <el-button
+                    :disabled="modelInfo.status !== 'Running' || !hasManagePermission"
+                    type="primary"
+                    plain
+                    @click="onSync()"
+                >
                     {{ $t('database.loadFromRemote') }}
                 </el-button>
                 <el-button
@@ -42,7 +56,12 @@
                     OpenWebUI
                 </el-button>
 
-                <el-button plain :disabled="selects.length === 0" type="primary" @click="onDelete(null)">
+                <el-button
+                    plain
+                    :disabled="selects.length === 0 || !hasManagePermission"
+                    type="primary"
+                    @click="onDelete(null)"
+                >
                     {{ $t('commons.button.delete') }}
                 </el-button>
             </template>
@@ -418,7 +437,7 @@ const buttons = [
             onReCreate(row.name);
         },
         disabled: (row: any) => {
-            return row.status === 'Success' || row.status === 'Waiting';
+            return row.status === 'Success' || row.status === 'Waiting' || !hasManagePermission.value;
         },
     },
     {
@@ -427,7 +446,7 @@ const buttons = [
             onDelete(row);
         },
         disabled: (row: any) => {
-            return row.status === 'Waiting';
+            return row.status === 'Waiting' || !hasManagePermission.value;
         },
     },
 ];
diff --git a/frontend/src/views/ai/model/tensorrt/index.vue b/frontend/src/views/ai/model/tensorrt/index.vue
index b3f28db7db86..c7ffb4582cda 100644
--- a/frontend/src/views/ai/model/tensorrt/index.vue
+++ b/frontend/src/views/ai/model/tensorrt/index.vue
@@ -3,7 +3,7 @@
         <LayoutContent>
             <template #leftToolBar>
                 <div class="flex flex-wrap gap-3">
-                    <el-button type="primary" @click="openCreate">
+                    <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
                         {{ $t('commons.button.create') }}
                     </el-button>
                 </div>
@@ -83,6 +83,7 @@ import PortJumpDialog from '@/components/port-jump/index.vue';
 import PortJump from '@/views/website/runtime/components/port-jump.vue';
 
 import { reactive, onMounted, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { dateFormat } from '@/utils/date';
 import { AI } from '@/api/interface/ai';
 import { deleteTensorRTLLM, operateTensorRTLLM, pageTensorRTLLM } from '@/api/modules/ai';
@@ -180,6 +181,7 @@ const deleteLLM = async (row: AI.TensorRTLLM) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value || !hasManagePermission.value,
         click: (row: AI.TensorRTLLM) => {
             openEdit(row);
         },
@@ -187,7 +189,7 @@ const buttons = [
     {
         label: i18n.global.t('commons.button.start'),
         disabled: (row: AI.TensorRTLLM) => {
-            return row.status === 'Running';
+            return row.status === 'Running' || !hasManagePermission.value;
         },
         click: (row: AI.TensorRTLLM) => {
             operate(row, 'start');
@@ -196,7 +198,7 @@ const buttons = [
     {
         label: i18n.global.t('commons.button.stop'),
         disabled: (row: AI.TensorRTLLM) => {
-            return row.status !== 'Running';
+            return row.status !== 'Running' || !hasManagePermission.value;
         },
         click: (row: AI.TensorRTLLM) => {
             operate(row, 'stop');
@@ -204,12 +206,14 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.restart'),
+        disabled: () => !hasManagePermission.value,
         click: (row: AI.TensorRTLLM) => {
             operate(row, 'restart');
         },
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => !hasManagePermission.value,
         click: (row: AI.TensorRTLLM) => {
             deleteLLM(row);
         },
diff --git a/frontend/src/views/ai/model/tensorrt/operate/index.vue b/frontend/src/views/ai/model/tensorrt/operate/index.vue
index 661c301a589e..7e058a9de2a6 100644
--- a/frontend/src/views/ai/model/tensorrt/operate/index.vue
+++ b/frontend/src/views/ai/model/tensorrt/operate/index.vue
@@ -46,7 +46,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading" type="primary" @click="onSubmit">
+                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSubmit">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -61,6 +61,7 @@ import DrawerPro from '@/components/drawer-pro/index.vue';
 import FileList from '@/components/file-list/index.vue';
 
 import { reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm, FormInstance } from 'element-plus';
@@ -68,6 +69,7 @@ import { createTensorRTLLM, updateTensorRTLLM } from '@/api/modules/ai';
 import { MsgSuccess } from '@/utils/message';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 const { isFxplay } = useGlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 const mode = ref('create');
diff --git a/frontend/src/views/app-store/apps/app/index.vue b/frontend/src/views/app-store/apps/app/index.vue
index 53996dc028d5..230d8762c19b 100644
--- a/frontend/src/views/app-store/apps/app/index.vue
+++ b/frontend/src/views/app-store/apps/app/index.vue
@@ -35,7 +35,9 @@
                             size="small"
                             plain
                             round
-                            :disabled="(app.installed && app.limit == 1) || app.status === 'TakeDown'"
+                            :disabled="
+                                (app.installed && app.limit == 1) || app.status === 'TakeDown' || !hasManagePermission
+                            "
                             @click.stop="openInstall(app)"
                         >
                             {{ $t('commons.button.install') }}
@@ -50,6 +52,7 @@
 <script lang="ts" setup>
 import { getAppIconUrl } from '@/api/modules/app';
 import { useGlobalStore } from '@/composables/useGlobalStore';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const { currentNode } = useGlobalStore();
 
 defineProps({
@@ -59,6 +62,8 @@ defineProps({
     },
 });
 
+const { hasManagePermission } = useMenuManagePermission();
+
 const em = defineEmits(['openDetail', 'openInstall']);
 
 const openDetail = (key: string) => {
diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue
index d1035cc96d80..b521c03d894f 100644
--- a/frontend/src/views/app-store/apps/index.vue
+++ b/frontend/src/views/app-store/apps/index.vue
@@ -6,10 +6,16 @@
                 <Tags @change="changeTag" />
             </template>
             <template #leftToolBar>
-                <el-button @click="sync" type="primary" plain :disabled="syncing">
+                <el-button @click="sync" type="primary" plain :disabled="syncing || !hasManagePermission">
                     <span>{{ syncCustomAppstore || isOffline ? $t('app.syncCustomApp') : $t('app.syncAppList') }}</span>
                 </el-button>
-                <el-button @click="syncLocal" type="primary" plain :disabled="syncing" class="ml-2">
+                <el-button
+                    @click="syncLocal"
+                    type="primary"
+                    plain
+                    :disabled="syncing || !hasManagePermission"
+                    class="ml-2"
+                >
                     {{ $t('app.syncLocalApp') }}
                 </el-button>
             </template>
diff --git a/frontend/src/views/app-store/detail/index.vue b/frontend/src/views/app-store/detail/index.vue
index 4b0187effeda..1c71210b0db1 100644
--- a/frontend/src/views/app-store/detail/index.vue
+++ b/frontend/src/views/app-store/detail/index.vue
@@ -33,6 +33,7 @@
                         <el-button
                             round
                             v-if="appDetail.enable && operate === 'install'"
+                            :disabled="!hasManagePermission"
                             @click="openInstall"
                             type="primary"
                             class="brief-button"
@@ -81,7 +82,9 @@ import Install from './install/index.vue';
 import { computeSizeFromMB } from '@/utils/size';
 import { jumpToInstall } from '@/utils/app';
 import { useGlobalStore } from '@/composables/useGlobalStore';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const { currentNode } = useGlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 
 const app = ref<any>({});
 const appDetail = ref<any>({});
diff --git a/frontend/src/views/app-store/installed/app/header.vue b/frontend/src/views/app-store/installed/app/header.vue
index 8517d684a8b7..a01bb37fb2f9 100644
--- a/frontend/src/views/app-store/installed/app/header.vue
+++ b/frontend/src/views/app-store/installed/app/header.vue
@@ -31,7 +31,13 @@
                 </span>
                 <span class="ml-1">
                     <el-tooltip effect="dark" :content="$t('app.toFolder')" placement="top">
-                        <el-button type="primary" link @click="$emit('toFolder')" icon="FolderOpened"></el-button>
+                        <el-button
+                            type="primary"
+                            :disabled="!hasFilePermission"
+                            link
+                            @click="$emit('toFolder')"
+                            icon="FolderOpened"
+                        ></el-button>
                     </el-tooltip>
                 </span>
                 <span class="ml-1">
@@ -57,7 +63,7 @@
                             type="primary"
                             link
                             @click="$emit('openTerminal')"
-                            :disabled="installed.status !== 'Running'"
+                            :disabled="installed.status !== 'Running' || !globalStore.isAdminOrNodeAdmin"
                         >
                             <el-icon>
                                 <SvgIcon iconName="p-terminal2" />
@@ -86,7 +92,7 @@
                             size="large"
                             icon="StarFilled"
                             type="warning"
-                            :disabled="sortMode"
+                            :disabled="sortMode || !hasManagePermission"
                             @click="$emit('favoriteInstall')"
                         ></el-button>
                     </el-tooltip>
@@ -95,7 +101,7 @@
                             link
                             icon="Star"
                             type="info"
-                            :disabled="sortMode"
+                            :disabled="sortMode || !hasManagePermission"
                             @click="$emit('favoriteInstall')"
                         ></el-button>
                     </el-tooltip>
@@ -109,6 +115,7 @@
                     size="small"
                     @click="$emit('openUploads')"
                     v-if="mode === 'installed'"
+                    :disabled="!hasManagePermission"
                 >
                     {{ $t('database.loadBackup') }}
                 </el-button>
@@ -119,6 +126,7 @@
                     size="small"
                     @click="$emit('openBackups')"
                     v-if="mode === 'installed'"
+                    :disabled="!hasManagePermission"
                 >
                     {{ $t('commons.button.backup') }}
                 </el-button>
@@ -127,7 +135,7 @@
                     plain
                     round
                     size="small"
-                    :disabled="installed.status === 'Upgrading'"
+                    :disabled="installed.status === 'Upgrading' || !hasManagePermission"
                     @click="$emit('ignoreApp')"
                     v-if="mode === 'upgrade'"
                 >
@@ -140,7 +148,8 @@
                     size="small"
                     :disabled="
                         (installed.status !== 'Running' && installed.status !== 'UpgradeErr') ||
-                        installed.appStatus === 'TakeDown'
+                        installed.appStatus === 'TakeDown' ||
+                        !hasManagePermission
                     "
                     @click="$emit('openOperate')"
                     v-if="mode === 'upgrade'"
@@ -154,6 +163,12 @@
 
 <script lang="ts" setup>
 import { App } from '@/api/interface/app';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
+import { GlobalStore } from '@/store';
+
+const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
+const { hasPermission: hasFilePermission } = useMenuManagePermission('host_file_view');
 
 interface Props {
     installed: App.AppInstalled;
diff --git a/frontend/src/views/app-store/installed/index.vue b/frontend/src/views/app-store/installed/index.vue
index 5f656a0fe7fd..adb5a4b42972 100644
--- a/frontend/src/views/app-store/installed/index.vue
+++ b/frontend/src/views/app-store/installed/index.vue
@@ -160,7 +160,9 @@ import { MsgSuccess } from '@/utils/message';
 import { getAgentSettingInfo } from '@/api/modules/setting';
 import { routerToFileWithPath, routerToNameWithQuery } from '@/utils/router';
 import { useGlobalStore } from '@/composables/useGlobalStore';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const { currentNode, isMaster, currentNodeAddr, isIntl } = useGlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 
 const data = ref<any>();
 const loading = ref(false);
@@ -324,7 +326,8 @@ const buttons = [
                 row.status === 'DownloadErr' ||
                 row.status === 'Upgrading' ||
                 row.status === 'Rebuilding' ||
-                row.status === 'Uninstalling'
+                row.status === 'Uninstalling' ||
+                !hasManagePermission.value
             );
         },
     },
@@ -338,7 +341,8 @@ const buttons = [
                 row.status === 'DownloadErr' ||
                 row.status === 'Upgrading' ||
                 row.status === 'Rebuilding' ||
-                row.status === 'Uninstalling'
+                row.status === 'Uninstalling' ||
+                !hasManagePermission.value
             );
         },
     },
@@ -354,7 +358,8 @@ const buttons = [
                 row.status === 'DownloadErr' ||
                 row.status === 'Upgrading' ||
                 row.status === 'Rebuilding' ||
-                row.status === 'Uninstalling'
+                row.status === 'Uninstalling' ||
+                !hasManagePermission.value
             );
         },
     },
@@ -369,7 +374,8 @@ const buttons = [
                 row.status === 'DownloadErr' ||
                 row.status === 'Upgrading' ||
                 row.status === 'Rebuilding' ||
-                row.status === 'Uninstalling'
+                row.status === 'Uninstalling' ||
+                !hasManagePermission.value
             );
         },
     },
@@ -378,6 +384,9 @@ const buttons = [
         click: (row: any) => {
             openOperate(row, 'delete');
         },
+        disabled: () => {
+            return !hasManagePermission.value;
+        },
     },
     {
         label: i18n.global.t('app.params'),
diff --git a/frontend/src/views/app-store/setting/index.vue b/frontend/src/views/app-store/setting/index.vue
index de66fc6fbbda..223af541d9f6 100644
--- a/frontend/src/views/app-store/setting/index.vue
+++ b/frontend/src/views/app-store/setting/index.vue
@@ -15,6 +15,7 @@
                         <el-form-item :label="$t('app.uninstallDeleteBackup')" prop="uninstallDeleteBackup">
                             <el-switch
                                 v-model="config.uninstallDeleteBackup"
+                                :disabled="!hasManagePermission"
                                 active-value="Enable"
                                 inactive-value="Disable"
                                 :loading="loading"
@@ -24,6 +25,7 @@
                         <el-form-item :label="$t('app.uninstallDeleteImage')" prop="uninstallDeleteImage">
                             <el-switch
                                 v-model="config.uninstallDeleteImage"
+                                :disabled="!hasManagePermission"
                                 active-value="Enable"
                                 inactive-value="Disable"
                                 :loading="loading"
@@ -33,6 +35,7 @@
                         <el-form-item :label="$t('app.upgradeBackup')" prop="upgradeBackup">
                             <el-switch
                                 v-model="config.upgradeBackup"
+                                :disabled="!hasManagePermission"
                                 active-value="Enable"
                                 inactive-value="Disable"
                                 :loading="loading"
@@ -42,6 +45,7 @@
                         <el-form-item :label="$t('app.installAllowPort')" prop="installAllowPort">
                             <el-switch
                                 v-model="config.installAllowPort"
+                                :disabled="!hasManagePermission"
                                 active-value="Enable"
                                 inactive-value="Disable"
                                 :loading="loading"
@@ -72,6 +76,8 @@ import i18n from '@/lang';
 import { defineAsyncComponent } from 'vue';
 import { loadOptionalComponent } from '@/extensions/optional';
 import { GlobalStore } from '@/store';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
+const { hasManagePermission } = useMenuManagePermission();
 const globalStore = GlobalStore();
 
 const CustomSetting = defineAsyncComponent(() => loadOptionalComponent('/src/xpack/views/appstore/index.vue'));
diff --git a/frontend/src/views/container/compose/index.vue b/frontend/src/views/container/compose/index.vue
index 27a6e1b0f698..b7ec903475f2 100644
--- a/frontend/src/views/container/compose/index.vue
+++ b/frontend/src/views/container/compose/index.vue
@@ -9,10 +9,10 @@
 
         <LayoutContent v-if="isExist" :title="$t('container.compose', 2)" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" @click="onOpenDialog()">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog()">
                     {{ $t('commons.button.create') }}
                 </el-button>
-                <el-button type="primary" plain @click="onImportCompose()">
+                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onImportCompose()">
                     {{ $t('commons.button.import') }}
                 </el-button>
             </template>
@@ -80,25 +80,33 @@
                                             </div>
                                             <div class="compose-actions" @click.stop>
                                                 <el-dropdown placement="bottom">
-                                                    <Status :status="getComposeStatus(row)" :operate="true" />
+                                                    <Status
+                                                        :status="getComposeStatus(row)"
+                                                        :disabled="!hasManagePermission"
+                                                        :operate="true"
+                                                    />
                                                     <template #dropdown>
                                                         <el-dropdown-menu>
                                                             <el-dropdown-item
                                                                 :disabled="
-                                                                    row.containerCount === row.runningCount &&
-                                                                    row.runningCount > 0
+                                                                    !hasManagePermission ||
+                                                                    (row.containerCount === row.runningCount &&
+                                                                        row.runningCount > 0)
                                                                 "
                                                                 @click="handleComposeOperate('up', row)"
                                                             >
                                                                 {{ $t('commons.operate.start') }}
                                                             </el-dropdown-item>
                                                             <el-dropdown-item
-                                                                :disabled="row.runningCount === 0"
+                                                                :disabled="
+                                                                    row.runningCount === 0 || !hasManagePermission
+                                                                "
                                                                 @click="handleComposeOperate('stop', row)"
                                                             >
                                                                 {{ $t('commons.operate.stop') }}
                                                             </el-dropdown-item>
                                                             <el-dropdown-item
+                                                                :disabled="!hasManagePermission"
                                                                 @click="handleComposeOperate('restart', row)"
                                                             >
                                                                 {{ $t('commons.button.restart') }}
@@ -111,7 +119,7 @@
                                                     round
                                                     size="small"
                                                     class="round-btn ml-3"
-                                                    :disabled="!row?.workdir"
+                                                    :disabled="!row?.workdir || !hasFilePermission"
                                                     @click="openComposeFolder(row)"
                                                 >
                                                     {{ $t('home.dir') }}
@@ -121,6 +129,7 @@
                                                     round
                                                     size="small"
                                                     class="round-btn"
+                                                    :disabled="!hasManagePermission"
                                                     @click="onBackupList(row)"
                                                 >
                                                     {{ $t('commons.button.backup') }}
@@ -130,6 +139,7 @@
                                                     round
                                                     size="small"
                                                     class="round-btn"
+                                                    :disabled="!hasManagePermission"
                                                     @click="onDelete(row)"
                                                 >
                                                     {{ $t('commons.operate.delete') }}
@@ -281,7 +291,12 @@
                                 </el-table-column>
                                 <el-table-column :label="$t('commons.table.operate')" width="160">
                                     <template #default="{ row }">
-                                        <el-button type="primary" link @click="onOpenTerminal(row)">
+                                        <el-button
+                                            type="primary"
+                                            link
+                                            :disabled="!globalStore.isAdminOrNodeAdmin"
+                                            @click="onOpenTerminal(row)"
+                                        >
                                             {{ $t('menu.terminal') }}
                                         </el-button>
                                         <el-button type="primary" link @click="onOpenLog(row)">
@@ -302,6 +317,7 @@
                                 <el-button
                                     v-if="showType !== 'log' && !(showType === 'env' && isAppStoreCompose)"
                                     type="primary"
+                                    :disabled="!hasManagePermission"
                                     @click="onSubmitEdit"
                                 >
                                     {{ $t('commons.button.save') }}
@@ -436,7 +452,12 @@
                                 </el-form-item>
                             </el-form>
 
-                            <el-button type="primary" class="mt-2" @click="onSubmit(formRef)">
+                            <el-button
+                                type="primary"
+                                class="mt-2"
+                                :disabled="!hasManagePermission"
+                                @click="onSubmit(formRef)"
+                            >
                                 {{ $t('commons.button.save') }}
                             </el-button>
                         </el-card>
@@ -464,6 +485,7 @@
 
 <script lang="ts" setup>
 import { computed, h, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
 import ContainerLog from '@/components/log/container/index.vue';
 import TaskLog from '@/components/log/task/index.vue';
@@ -499,6 +521,8 @@ import { ElCheckbox, ElForm } from 'element-plus';
 import { GlobalStore } from '@/store';
 
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
+const { hasPermission: hasFilePermission } = useMenuManagePermission('host_file_view');
 
 const data = ref<any[]>([]);
 const loading = ref(false);
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index 370f68a064ce..5675095a14cb 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -22,35 +22,56 @@
             </template>
 
             <template #leftToolBar>
-                <el-button type="primary" @click="onContainerOperate('')">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="onContainerOperate('')">
                     {{ $t('commons.button.create') }}
                 </el-button>
-                <el-button type="primary" plain @click="onImportCreate()">
+                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onImportCreate()">
                     {{ $t('commons.button.import') }}
                 </el-button>
-                <el-button type="primary" plain @click="onClean()">
+                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onClean()">
                     {{ $t('container.containerPrune') }}
                 </el-button>
                 <el-button-group class="button-group">
-                    <el-button :disabled="checkStatus('start', null)" @click="onOperate('start', null)">
+                    <el-button
+                        :disabled="!hasManagePermission || checkStatus('start', null)"
+                        @click="onOperate('start', null)"
+                    >
                         {{ $t('commons.operate.start') }}
                     </el-button>
-                    <el-button :disabled="checkStatus('stop', null)" @click="onOperate('stop', null)">
+                    <el-button
+                        :disabled="!hasManagePermission || checkStatus('stop', null)"
+                        @click="onOperate('stop', null)"
+                    >
                         {{ $t('commons.operate.stop') }}
                     </el-button>
-                    <el-button :disabled="checkStatus('restart', null)" @click="onOperate('restart', null)">
+                    <el-button
+                        :disabled="!hasManagePermission || checkStatus('restart', null)"
+                        @click="onOperate('restart', null)"
+                    >
                         {{ $t('commons.button.restart') }}
                     </el-button>
-                    <el-button :disabled="checkStatus('kill', null)" @click="onOperate('kill', null)">
+                    <el-button
+                        :disabled="!hasManagePermission || checkStatus('kill', null)"
+                        @click="onOperate('kill', null)"
+                    >
                         {{ $t('container.kill') }}
                     </el-button>
-                    <el-button :disabled="checkStatus('pause', null)" @click="onOperate('pause', null)">
+                    <el-button
+                        :disabled="!hasManagePermission || checkStatus('pause', null)"
+                        @click="onOperate('pause', null)"
+                    >
                         {{ $t('container.pause') }}
                     </el-button>
-                    <el-button :disabled="checkStatus('unpause', null)" @click="onOperate('unpause', null)">
+                    <el-button
+                        :disabled="!hasManagePermission || checkStatus('unpause', null)"
+                        @click="onOperate('unpause', null)"
+                    >
                         {{ $t('container.unpause') }}
                     </el-button>
-                    <el-button :disabled="checkStatus('remove', null)" @click="onOperate('remove', null)">
+                    <el-button
+                        :disabled="!hasManagePermission || checkStatus('remove', null)"
+                        @click="onOperate('remove', null)"
+                    >
                         {{ $t('commons.button.delete') }}
                     </el-button>
                 </el-button-group>
@@ -117,6 +138,7 @@
                                         size="large"
                                         :icon="row.isPinned ? 'StarFilled' : 'Star'"
                                         type="warning"
+                                        :disabled="!hasManagePermission"
                                         @click="changePinned(row, true)"
                                     />
                                 </el-tooltip>
@@ -137,41 +159,41 @@
                                     (visible) => handleStatusDropdownVisibleChange(row.containerID, visible)
                                 "
                             >
-                                <Status :status="row.state" :operate="true"></Status>
+                                <Status :status="row.state" :disabled="!hasManagePermission" :operate="true" />
                                 <template #dropdown>
                                     <el-dropdown-menu v-if="activeDropdownContainerId === row.containerID">
                                         <el-dropdown-item
-                                            :disabled="checkStatus('start', row)"
+                                            :disabled="!hasManagePermission || checkStatus('start', row)"
                                             @click="onOperate('start', row)"
                                         >
                                             {{ $t('commons.operate.start') }}
                                         </el-dropdown-item>
                                         <el-dropdown-item
-                                            :disabled="checkStatus('stop', row)"
+                                            :disabled="!hasManagePermission || checkStatus('stop', row)"
                                             @click="onOperate('stop', row)"
                                         >
                                             {{ $t('commons.operate.stop') }}
                                         </el-dropdown-item>
                                         <el-dropdown-item
-                                            :disabled="checkStatus('restart', row)"
+                                            :disabled="!hasManagePermission || checkStatus('restart', row)"
                                             @click="onOperate('restart', row)"
                                         >
                                             {{ $t('commons.button.restart') }}
                                         </el-dropdown-item>
                                         <el-dropdown-item
-                                            :disabled="checkStatus('kill', row)"
+                                            :disabled="!hasManagePermission || checkStatus('kill', row)"
                                             @click="onOperate('kill', row)"
                                         >
                                             {{ $t('container.kill') }}
                                         </el-dropdown-item>
                                         <el-dropdown-item
-                                            :disabled="checkStatus('pause', row)"
+                                            :disabled="!hasManagePermission || checkStatus('pause', row)"
                                             @click="onOperate('pause', row)"
                                         >
                                             {{ $t('container.pause') }}
                                         </el-dropdown-item>
                                         <el-dropdown-item
-                                            :disabled="checkStatus('unpause', row)"
+                                            :disabled="!hasManagePermission || checkStatus('unpause', row)"
                                             @click="onOperate('unpause', row)"
                                         >
                                             {{ $t('container.unpause') }}
@@ -349,6 +371,7 @@
                         <template #default="{ row }">
                             <fu-input-rw-switch
                                 v-model="row.description"
+                                :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
                                 @enter="changePinned(row, false)"
                                 @blur="changePinned(row, false)"
                             />
@@ -431,6 +454,8 @@ import { useGlobalStore } from '@/composables/useGlobalStore';
 
 const { isMobile } = useGlobalStore();
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
+const { hasPermission: hasFilePermission } = useMenuManagePermission('host_file_view');
 
 const isActive = ref(false);
 const isExist = ref(false);
@@ -521,7 +546,7 @@ const applyStatsToRows = (stats: Record<string, any>[]) => {
     }
 };
 
-const updateTags = (status: Record<string, number>) => {
+const updateTags = (status: Record<string, any>) => {
     const nextTags = [];
     if (status.containerCount) {
         nextTags.push({ key: 'all', count: status.containerCount });
@@ -831,7 +856,7 @@ const buttons = [
     {
         label: i18n.global.t('menu.terminal'),
         disabled: (row: Container.ContainerInfo) => {
-            return row.state !== 'running';
+            return row.state !== 'running' || !globalStore.isAdminOrNodeAdmin;
         },
         click: (row: Container.ContainerInfo) => {
             onTerminal(row);
@@ -846,7 +871,7 @@ const buttons = [
     {
         label: i18n.global.t('home.dir'),
         disabled: (row: Container.ContainerInfo) => {
-            return row.state !== 'running';
+            return row.state !== 'running' || !hasFilePermission.value;
         },
         click: (row: Container.ContainerInfo) => {
             onOpenFileBrowser(row);
@@ -854,18 +879,21 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Container.ContainerInfo) => {
             onContainerOperate(row.name);
         },
     },
     {
         label: i18n.global.t('commons.button.upgrade'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Container.ContainerInfo) => {
             dialogUpgradeRef.value!.acceptParams({ container: row.name, image: row.imageName, fromApp: row.isFromApp });
         },
     },
     {
         label: i18n.global.t('commons.button.backup'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Container.ContainerInfo) => {
             onBackup(row);
         },
@@ -885,7 +913,7 @@ const buttons = [
             dialogRenameRef.value!.acceptParams({ container: row.name });
         },
         disabled: (row: any) => {
-            return row.isFromCompose;
+            return row.isFromCompose || !hasManagePermission.value;
         },
     },
     {
@@ -894,7 +922,7 @@ const buttons = [
             dialogCommitRef.value!.acceptParams({ containerID: row.containerID, containerName: row.name });
         },
         disabled: (row: any) => {
-            return checkStatus('commit', row);
+            return checkStatus('commit', row) || !hasManagePermission.value;
         },
     },
     {
@@ -903,7 +931,7 @@ const buttons = [
             onOperate('remove', row);
         },
         disabled: (row: any) => {
-            return checkStatus('remove', row);
+            return checkStatus('remove', row) || !hasManagePermission.value;
         },
     },
 ];
diff --git a/frontend/src/views/container/container/operate/index.vue b/frontend/src/views/container/container/operate/index.vue
index c9227b91106f..edc6a0cdbe2a 100644
--- a/frontend/src/views/container/container/operate/index.vue
+++ b/frontend/src/views/container/container/operate/index.vue
@@ -23,7 +23,14 @@
                                     type="error"
                                 />
 
-                                <el-button v-if="isCreate" type="primary" icon="EditPen" plain @click="toTerminal()">
+                                <el-button
+                                    v-if="isCreate"
+                                    :disabled="!globalStore.isAdminOrNodeAdmin"
+                                    type="primary"
+                                    icon="EditPen"
+                                    plain
+                                    @click="toTerminal()"
+                                >
                                     {{ $t('container.commandInput') }}
                                 </el-button>
                                 <el-form-item class="mt-5" :label="$t('commons.table.name')" prop="name">
@@ -362,6 +369,9 @@ import { newUUID } from '@/utils/id';
 import router from '@/routers';
 import TerminalDialog from '@/views/host/file-management/terminal/index.vue';
 import { routerToName, routerToNameWithQuery } from '@/utils/router';
+import { GlobalStore } from '@/store';
+
+const globalStore = GlobalStore();
 
 const loading = ref(false);
 const isCreate = ref();
diff --git a/frontend/src/views/container/dashboard/index.vue b/frontend/src/views/container/dashboard/index.vue
index 6eeb32411efb..faef7011a64f 100644
--- a/frontend/src/views/container/dashboard/index.vue
+++ b/frontend/src/views/container/dashboard/index.vue
@@ -107,6 +107,7 @@
                             <el-button
                                 v-if="countItem.imageReclaimable"
                                 class="-mt-0.5"
+                                :disabled="!hasManagePermission"
                                 @click="onClean('image', true)"
                                 link
                                 type="primary"
@@ -124,6 +125,7 @@
                             <el-button
                                 v-if="countItem.containerReclaimable"
                                 class="-mt-0.5"
+                                :disabled="!hasManagePermission"
                                 @click="onClean('container', false)"
                                 link
                                 type="primary"
@@ -141,6 +143,7 @@
                             <el-button
                                 v-if="countItem.volumeReclaimable"
                                 class="-mt-0.5"
+                                :disabled="!hasManagePermission"
                                 @click="onClean('volume', false)"
                                 link
                                 type="primary"
@@ -158,6 +161,7 @@
                             <el-button
                                 v-if="countItem.buildCacheUsage"
                                 class="-mt-0.5"
+                                :disabled="!hasManagePermission"
                                 @click="onClean('buildcache', false)"
                                 link
                                 type="primary"
@@ -202,9 +206,11 @@ import { newUUID } from '@/utils/id';
 import TaskLog from '@/components/log/task/index.vue';
 import { routerToName } from '@/utils/router';
 import { onMounted, reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 
 const taskLogRef = ref();
+const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref();
 const usageLoading = ref(false);
diff --git a/frontend/src/views/container/image/index.vue b/frontend/src/views/container/image/index.vue
index 5a5a3551adc5..0dbfd4d670b3 100644
--- a/frontend/src/views/container/image/index.vue
+++ b/frontend/src/views/container/image/index.vue
@@ -10,19 +10,19 @@
 
         <LayoutContent v-if="isExist" :title="$t('container.image', 2)" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" plain @click="onOpenPull">
+                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onOpenPull">
                     {{ $t('container.imagePull') }}
                 </el-button>
-                <el-button type="primary" plain @click="onOpenLoad">
+                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onOpenLoad">
                     {{ $t('container.importImage') }}
                 </el-button>
-                <el-button type="primary" plain @click="onOpenBuild">
+                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onOpenBuild">
                     {{ $t('container.imageBuild') }}
                 </el-button>
-                <el-button type="primary" plain @click="onOpenBuildCache()">
+                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onOpenBuildCache()">
                     {{ $t('container.cleanBuildCache') }}
                 </el-button>
-                <el-button type="primary" plain @click="onOpenPrune()">
+                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onOpenPrune()">
                     {{ $t('container.imagePrune') }}
                 </el-button>
             </template>
@@ -57,6 +57,7 @@
                                         size="large"
                                         :icon="row.isPinned ? 'StarFilled' : 'Star'"
                                         type="warning"
+                                        :disabled="!hasManagePermission"
                                         @click="changePinned(row, true)"
                                     />
                                 </el-tooltip>
@@ -135,7 +136,7 @@
                     <el-button @click="handleUpdateDialogClose">
                         {{ $t('commons.button.cancel') }}
                     </el-button>
-                    <el-button type="primary" @click="submitUpdateSelection">
+                    <el-button type="primary" :disabled="!hasManagePermission" @click="submitUpdateSelection">
                         {{ $t('commons.button.confirm') }}
                     </el-button>
                 </span>
@@ -420,6 +421,7 @@ const submitUpdateSelection = async () => {
 const buttons = [
     {
         label: i18n.global.t('container.push'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Container.ImageInfo) => {
             let params = {
                 repos: repos.value,
@@ -430,6 +432,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('container.export'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Container.ImageInfo) => {
             let params = {
                 repos: repos.value,
@@ -440,12 +443,14 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.update'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Container.ImageInfo) => {
             onUpdate(row);
         },
     },
     {
         label: i18n.global.t('container.tag'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Container.ImageInfo) => {
             let params = {
                 repos: repos.value,
@@ -457,6 +462,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => !hasManagePermission.value,
         click: async (row: Container.ImageInfo) => {
             if (row.tags && row.tags.length > 1) {
                 let params = {
diff --git a/frontend/src/views/container/network/index.vue b/frontend/src/views/container/network/index.vue
index 9ea84b80c2dc..a72e5913baee 100644
--- a/frontend/src/views/container/network/index.vue
+++ b/frontend/src/views/container/network/index.vue
@@ -9,13 +9,13 @@
 
         <LayoutContent v-if="isExist" :title="$t('container.network', 2)" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" @click="onCreate()">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="onCreate()">
                     {{ $t('commons.button.create') }}
                 </el-button>
-                <el-button type="primary" plain @click="onClean()">
+                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onClean()">
                     {{ $t('container.networkPrune') }}
                 </el-button>
-                <el-button :disabled="selects.length === 0" @click="batchDelete(null)">
+                <el-button :disabled="selects.length === 0 || !hasManagePermission" @click="batchDelete(null)">
                     {{ $t('commons.button.delete') }}
                 </el-button>
             </template>
@@ -96,6 +96,7 @@
 import CreateDialog from '@/views/container/network/create/index.vue';
 import DetailDrawer from '@/views/container/network/detail/index.vue';
 import { reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { dateFormat } from '@/utils/date';
 import { newUUID } from '@/utils/id';
 import { deleteNetwork, searchNetwork, inspect, containerPrune } from '@/api/modules/container';
@@ -118,6 +119,7 @@ const paginationConfig = reactive({
     total: 0,
 });
 const searchName = ref();
+const { hasManagePermission } = useMenuManagePermission();
 
 const opRef = ref();
 const isActive = ref(false);
@@ -232,7 +234,7 @@ const buttons = [
             batchDelete(row);
         },
         disabled: (row: any) => {
-            return row.isSystem;
+            return row.isSystem || !hasManagePermission.value;
         },
     },
 ];
diff --git a/frontend/src/views/container/repo/index.vue b/frontend/src/views/container/repo/index.vue
index 818c77ee55c6..34a895e76d93 100644
--- a/frontend/src/views/container/repo/index.vue
+++ b/frontend/src/views/container/repo/index.vue
@@ -9,7 +9,7 @@
 
         <LayoutContent v-if="isExist" :title="$t('container.repo', 2)" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" @click="onOpenDialog('add')">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('add')">
                     {{ $t('commons.button.add') }}
                 </el-button>
             </template>
@@ -61,11 +61,13 @@
 <script lang="ts" setup>
 import OperatorDialog from '@/views/container/repo/operator/index.vue';
 import { reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { dateFormat } from '@/utils/date';
 import { Container } from '@/api/interface/container';
 import { checkRepoStatus, deleteImageRepo, searchImageRepo } from '@/api/modules/container';
 import DockerStatus from '@/views/container/docker-status/index.vue';
 import i18n from '@/lang';
+const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref();
 const data = ref();
@@ -171,7 +173,7 @@ const buttons = [
     {
         label: i18n.global.t('commons.button.sync'),
         disabled: (row: Container.RepoInfo) => {
-            return row.id === 1;
+            return row.id === 1 || !hasManagePermission.value;
         },
         click: (row: Container.RepoInfo) => {
             onCheckConn(row);
@@ -180,7 +182,7 @@ const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
         disabled: (row: Container.RepoInfo) => {
-            return row.id === 1;
+            return row.id === 1 || !hasManagePermission.value;
         },
         click: (row: Container.RepoInfo) => {
             onOpenDialog('edit', row);
@@ -189,7 +191,7 @@ const buttons = [
     {
         label: i18n.global.t('commons.button.delete'),
         disabled: (row: Container.RepoInfo) => {
-            return row.id === 1;
+            return row.id === 1 || !hasManagePermission.value;
         },
         click: (row: Container.RepoInfo) => {
             onDelete(row);
diff --git a/frontend/src/views/container/setting/index.vue b/frontend/src/views/container/setting/index.vue
index c7ee0c0245c7..08508d44997d 100644
--- a/frontend/src/views/container/setting/index.vue
+++ b/frontend/src/views/container/setting/index.vue
@@ -17,14 +17,26 @@
                         <el-tag>{{ $t('app.version') }}: {{ form.version }}</el-tag>
                     </div>
                     <div class="mt-0.5">
-                        <el-button v-if="isActive" type="primary" @click="onOperator('stop')" link>
+                        <el-button
+                            v-if="isActive"
+                            type="primary"
+                            :disabled="!hasManagePermission"
+                            @click="onOperator('stop')"
+                            link
+                        >
                             {{ $t('commons.operate.stop') }}
                         </el-button>
-                        <el-button v-if="!isActive" type="primary" @click="onOperator('start')" link>
+                        <el-button
+                            v-if="!isActive"
+                            type="primary"
+                            :disabled="!hasManagePermission"
+                            @click="onOperator('start')"
+                            link
+                        >
                             {{ $t('commons.operate.start') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button type="primary" @click="onOperator('restart')" link>
+                        <el-button type="primary" :disabled="!hasManagePermission" @click="onOperator('restart')" link>
                             {{ $t('commons.button.restart') }}
                         </el-button>
                     </div>
@@ -57,13 +69,22 @@
                                         v-model="form.mirrors"
                                         style="width: calc(100% - 80px)"
                                     />
-                                    <el-button @click="onChangeMirrors" icon="Setting" class="custom-input-textarea">
+                                    <el-button
+                                        :disabled="!hasManagePermission"
+                                        @click="onChangeMirrors"
+                                        icon="Setting"
+                                        class="custom-input-textarea"
+                                    >
                                         {{ $t('commons.button.set') }}
                                     </el-button>
                                 </div>
                                 <el-input disabled v-if="!form.mirrors" v-model="unset">
                                     <template #append>
-                                        <el-button @click="onChangeMirrors" icon="Setting">
+                                        <el-button
+                                            :disabled="!hasManagePermission"
+                                            @click="onChangeMirrors"
+                                            icon="Setting"
+                                        >
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -85,13 +106,21 @@
                                         v-model="form.registries"
                                         style="width: calc(100% - 80px)"
                                     />
-                                    <el-button @click="onChangeRegistries" icon="Setting">
+                                    <el-button
+                                        :disabled="!hasManagePermission"
+                                        @click="onChangeRegistries"
+                                        icon="Setting"
+                                    >
                                         {{ $t('commons.button.set') }}
                                     </el-button>
                                 </div>
                                 <el-input disabled v-if="!form.registries" v-model="unset">
                                     <template #append>
-                                        <el-button @click="onChangeRegistries" icon="Setting">
+                                        <el-button
+                                            :disabled="!hasManagePermission"
+                                            @click="onChangeRegistries"
+                                            icon="Setting"
+                                        >
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -99,7 +128,11 @@
                             </el-form-item>
 
                             <el-form-item label="IPv6" prop="ipv6">
-                                <el-switch v-model="form.ipv6" @change="handleIPv6"></el-switch>
+                                <el-switch
+                                    :disabled="!hasManagePermission"
+                                    v-model="form.ipv6"
+                                    @change="handleIPv6"
+                                ></el-switch>
                                 <span class="input-help"></span>
                                 <div v-if="ipv6OptionShow">
                                     <el-tag>{{ $t('container.subnet') }}: {{ form.fixedCidrV6 }}</el-tag>
@@ -112,7 +145,11 @@
                             </el-form-item>
 
                             <el-form-item :label="$t('container.cutLog')" prop="hasLogOption">
-                                <el-switch v-model="form.logOptionShow" @change="handleLogOption"></el-switch>
+                                <el-switch
+                                    :disabled="!hasManagePermission"
+                                    v-model="form.logOptionShow"
+                                    @change="handleLogOption"
+                                ></el-switch>
                                 <span class="input-help"></span>
                                 <div v-if="logOptionShow">
                                     <el-tag>{{ $t('container.maxSize') }}: {{ form.logMaxSize }}</el-tag>
@@ -126,12 +163,16 @@
                             </el-form-item>
 
                             <el-form-item label="iptables" prop="iptables">
-                                <el-switch v-model="form.iptables" @change="handleIptables"></el-switch>
+                                <el-switch
+                                    :disabled="!hasManagePermission"
+                                    v-model="form.iptables"
+                                    @change="handleIptables"
+                                ></el-switch>
                                 <span class="input-help">{{ $t('container.iptablesHelper1') }}</span>
                             </el-form-item>
                             <el-form-item label="Live restore" prop="liveRestore">
                                 <el-switch
-                                    :disabled="form.isSwarm"
+                                    :disabled="form.isSwarm || !hasManagePermission"
                                     v-model="form.liveRestore"
                                     @change="handleLive"
                                 ></el-switch>
@@ -141,7 +182,11 @@
                                 </span>
                             </el-form-item>
                             <el-form-item label="Cgroup Driver" prop="cgroupDriver">
-                                <el-radio-group v-model="form.cgroupDriver" @change="handleCgroup">
+                                <el-radio-group
+                                    :disabled="!hasManagePermission"
+                                    v-model="form.cgroupDriver"
+                                    @change="handleCgroup"
+                                >
                                     <el-radio value="cgroupfs">cgroupfs</el-radio>
                                     <el-radio value="systemd">systemd</el-radio>
                                 </el-radio-group>
@@ -149,7 +194,11 @@
                             <el-form-item :label="$t('container.sockPath')" prop="dockerSockPath">
                                 <el-input disabled v-model="form.dockerSockPath">
                                     <template #append>
-                                        <el-button @click="onChangeSockPath" icon="Setting">
+                                        <el-button
+                                            :disabled="!hasManagePermission"
+                                            @click="onChangeSockPath"
+                                            icon="Setting"
+                                        >
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -169,7 +218,12 @@
                         mode="json"
                         placeholder="# The Docker configuration file does not exist or is empty"
                     ></CodemirrorPro>
-                    <el-button :disabled="loading" type="primary" @click="onSaveFile" class="mt-2.5">
+                    <el-button
+                        :disabled="loading || !hasManagePermission"
+                        type="primary"
+                        @click="onSaveFile"
+                        class="mt-2.5"
+                    >
                         {{ $t('commons.button.save') }}
                     </el-button>
                 </div>
@@ -199,7 +253,7 @@
                         {{ $t('commons.button.cancel') }}
                     </el-button>
                     <el-button
-                        :disabled="submitInput !== $t('database.restartNow')"
+                        :disabled="submitInput !== $t('database.restartNow') || !hasManagePermission"
                         type="primary"
                         @click="onSubmitCloseIPtable"
                     >
@@ -251,6 +305,7 @@ import { useGlobalStore } from '@/composables/useGlobalStore';
 
 const { isMobile } = useGlobalStore();
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 
 const unset = ref(i18n.global.t('setting.unSetting'));
 const submitInput = ref();
diff --git a/frontend/src/views/container/template/index.vue b/frontend/src/views/container/template/index.vue
index c82fd55c9c82..e6998204281c 100644
--- a/frontend/src/views/container/template/index.vue
+++ b/frontend/src/views/container/template/index.vue
@@ -9,18 +9,23 @@
 
         <LayoutContent v-if="isExist" :title="$t('container.composeTemplate', 2)" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" @click="onOpenDialog('create')">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
                     {{ $t('commons.button.create') }}
                 </el-button>
-                <el-button type="primary" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
+                <el-button
+                    type="primary"
+                    plain
+                    :disabled="selects.length === 0 || !hasManagePermission"
+                    @click="onBatchDelete(null)"
+                >
                     {{ $t('commons.button.delete') }}
                 </el-button>
 
                 <el-button-group>
-                    <el-button @click="onImport">
+                    <el-button :disabled="!hasManagePermission" @click="onImport">
                         {{ $t('commons.button.import') }}
                     </el-button>
-                    <el-button :disabled="selects.length === 0" @click="onExport">
+                    <el-button :disabled="selects.length === 0 || !hasManagePermission" @click="onExport">
                         {{ $t('commons.button.export') }}
                     </el-button>
                 </el-button-group>
@@ -74,6 +79,7 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { dateFormat, getCurrentDateFormatted } from '@/utils/date';
 import { downloadWithContent } from '@/utils/file';
 import { Container } from '@/api/interface/container';
@@ -87,6 +93,7 @@ import i18n from '@/lang';
 const loading = ref();
 const data = ref();
 const selects = ref<any>([]);
+const { hasManagePermission } = useMenuManagePermission();
 
 const dialogImportRef = ref();
 const detailRef = ref();
@@ -195,7 +202,7 @@ const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
         disabled: (row: Container.RepoInfo) => {
-            return row.downloadUrl === 'docker.io';
+            return row.downloadUrl === 'docker.io' || !hasManagePermission.value;
         },
         click: (row: Container.RepoInfo) => {
             onOpenDialog('edit', row);
@@ -204,7 +211,7 @@ const buttons = [
     {
         label: i18n.global.t('commons.button.delete'),
         disabled: (row: Container.RepoInfo) => {
-            return row.downloadUrl === 'docker.io';
+            return row.downloadUrl === 'docker.io' || !hasManagePermission.value;
         },
         click: (row: Container.RepoInfo) => {
             onBatchDelete(row);
diff --git a/frontend/src/views/container/volume/index.vue b/frontend/src/views/container/volume/index.vue
index 74e97d70c613..3a8f519f6a2b 100644
--- a/frontend/src/views/container/volume/index.vue
+++ b/frontend/src/views/container/volume/index.vue
@@ -9,13 +9,13 @@
 
         <LayoutContent v-if="isExist" :title="$t('container.volume', 2)" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" @click="onCreate()">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="onCreate()">
                     {{ $t('commons.button.create') }}
                 </el-button>
-                <el-button type="primary" plain @click="onClean()">
+                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onClean()">
                     {{ $t('container.volumePrune') }}
                 </el-button>
-                <el-button :disabled="selects.length === 0" @click="batchDelete(null)">
+                <el-button :disabled="selects.length === 0 || !hasManagePermission" @click="batchDelete(null)">
                     {{ $t('commons.button.delete') }}
                 </el-button>
             </template>
@@ -90,6 +90,7 @@
                                     type="primary"
                                     icon="FolderOpened"
                                     link
+                                    :disabled="!hasFilePermission"
                                     @click="routerToFileWithPath(row.mountpoint)"
                                 />
                             </el-tooltip>
@@ -258,6 +259,7 @@ const batchDelete = async (row: Container.VolumeInfo | null) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Container.VolumeInfo) => {
             batchDelete(row);
         },
diff --git a/frontend/src/views/cronjob/cronjob/index.vue b/frontend/src/views/cronjob/cronjob/index.vue
index 5c634f9f0061..377ed5ee9338 100644
--- a/frontend/src/views/cronjob/cronjob/index.vue
+++ b/frontend/src/views/cronjob/cronjob/index.vue
@@ -2,29 +2,37 @@
     <div>
         <LayoutContent v-loading="loading" v-if="!isRecordShow" :title="$t('menu.cronjob')">
             <template #leftToolBar>
-                <el-button type="primary" @click="onOpenDialog('')">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('')">
                     {{ $t('commons.button.create') }}
                 </el-button>
-                <el-button @click="onOpenGroupDialog()">
+                <el-button :disabled="!hasManagePermission" @click="onOpenGroupDialog()">
                     {{ $t('commons.table.group') }}
                 </el-button>
                 <el-button-group>
-                    <el-button plain :disabled="selects.length === 0" @click="onBatchChangeStatus('enable')">
+                    <el-button
+                        plain
+                        :disabled="selects.length === 0 || !hasManagePermission"
+                        @click="onBatchChangeStatus('enable')"
+                    >
                         {{ $t('commons.button.enable') }}
                     </el-button>
-                    <el-button plain :disabled="selects.length === 0" @click="onBatchChangeStatus('disable')">
+                    <el-button
+                        plain
+                        :disabled="selects.length === 0 || !hasManagePermission"
+                        @click="onBatchChangeStatus('disable')"
+                    >
                         {{ $t('commons.button.disable') }}
                     </el-button>
-                    <el-button plain :disabled="selects.length === 0" @click="onDelete(null)">
+                    <el-button plain :disabled="selects.length === 0 || !hasManagePermission" @click="onDelete(null)">
                         {{ $t('commons.button.delete') }}
                     </el-button>
                 </el-button-group>
 
                 <el-button-group>
-                    <el-button @click="onImport">
+                    <el-button :disabled="!hasManagePermission" @click="onImport">
                         {{ $t('commons.button.import') }}
                     </el-button>
-                    <el-button :disabled="selects.length === 0" @click="onExport">
+                    <el-button :disabled="selects.length === 0 || !hasManagePermission" @click="onExport">
                         {{ $t('commons.button.export') }}
                     </el-button>
                 </el-button-group>
@@ -70,7 +78,11 @@
                     </el-table-column>
                     <el-table-column :label="$t('commons.table.group')" min-width="120" prop="group">
                         <template #default="{ row }">
-                            <fu-select-rw-switch v-model="row.groupID" @change="updateGroup(row)">
+                            <fu-select-rw-switch
+                                v-model="row.groupID"
+                                :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
+                                @change="updateGroup(row)"
+                            >
                                 <template #read>
                                     {{ row.groupBelong === 'Default' ? $t('commons.table.default') : row.groupBelong }}
                                 </template>
@@ -91,12 +103,14 @@
                                 v-if="row.status === 'Enable'"
                                 @click="onChangeStatus(row.id, 'disable')"
                                 :status="row.status"
+                                :disabled="!hasManagePermission"
                                 :operate="true"
                             />
                             <Status
                                 v-if="row.status === 'Disable'"
                                 @click="onChangeStatus(row.id, 'enable')"
                                 :status="row.status"
+                                :disabled="!hasManagePermission"
                                 :operate="true"
                             />
                             <Status v-if="row.status === 'Pending'" :status="row.status" />
@@ -125,7 +139,13 @@
                     </el-table-column>
                     <el-table-column :label="$t('cronjob.retainCopies')" :min-width="120" prop="retainCopies">
                         <template #default="{ row }">
-                            <el-button v-if="hasBackup(row.type)" @click="loadBackups(row)" plain size="small">
+                            <el-button
+                                :disabled="!hasManagePermission"
+                                v-if="hasBackup(row.type)"
+                                @click="loadBackups(row)"
+                                plain
+                                size="small"
+                            >
                                 {{ row.retainCopies }}{{ $t('cronjob.retainCopiesUnit') }}
                             </el-button>
                             <span v-else>{{ row.retainCopies }}</span>
@@ -494,7 +514,7 @@ const buttons = [
             onHandle(row);
         },
         disabled: (row: any) => {
-            return row.status === 'Pending';
+            return row.status === 'Pending' || !hasManagePermission.value;
         },
     },
     {
@@ -505,12 +525,14 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Cronjob.CronjobInfo) => {
             onOpenDialog(row.id + '');
         },
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Cronjob.CronjobInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/cronjob/cronjob/record/index.vue b/frontend/src/views/cronjob/cronjob/record/index.vue
index 3b5f2155217e..42631ca2fe2f 100644
--- a/frontend/src/views/cronjob/cronjob/record/index.vue
+++ b/frontend/src/views/cronjob/cronjob/record/index.vue
@@ -32,7 +32,7 @@
                     <div class="mt-0.5">
                         <el-button
                             type="primary"
-                            :disabled="dialogData.rowData.status === 'Pending'"
+                            :disabled="dialogData.rowData.status === 'Pending' || !hasManagePermission"
                             @click="onHandle(dialogData.rowData)"
                             link
                         >
@@ -42,6 +42,7 @@
                         <el-button
                             type="primary"
                             v-if="dialogData.rowData.status === 'Enable'"
+                            :disabled="!hasManagePermission"
                             @click="onChangeStatus(dialogData.rowData.id, 'disable')"
                             link
                         >
@@ -50,13 +51,14 @@
                         <el-button
                             type="primary"
                             v-if="dialogData.rowData.status === 'Disable'"
+                            :disabled="!hasManagePermission"
                             @click="onChangeStatus(dialogData.rowData.id, 'enable')"
                             link
                         >
                             {{ $t('commons.button.enable') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button :disabled="!hasRecords" type="primary" @click="onClean" link>
+                        <el-button :disabled="!hasRecords || !hasManagePermission" type="primary" @click="onClean" link>
                             {{ $t('commons.button.clean') }}
                         </el-button>
                     </div>
@@ -261,6 +263,8 @@ import { listDbItems } from '@/api/modules/database';
 import { listAppInstalled } from '@/api/modules/app';
 import { shortcuts } from '@/utils/shortcuts';
 import { hasBackup } from '../helper';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
+const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref();
 const hasRecords = ref();
diff --git a/frontend/src/views/cronjob/library/index.vue b/frontend/src/views/cronjob/library/index.vue
index 2430fd9ebf84..3916e31e611f 100644
--- a/frontend/src/views/cronjob/library/index.vue
+++ b/frontend/src/views/cronjob/library/index.vue
@@ -2,7 +2,7 @@
     <div>
         <LayoutContent v-loading="loading" :title="$t('logs.login')">
             <template #leftToolBar>
-                <el-button type="primary" @click="onOpenDialog('create')">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
                     {{ $t('commons.button.create') }}
                 </el-button>
                 <el-dropdown @command="handleSyncOp" class="mr-2.5">
@@ -12,13 +12,21 @@
                     </el-button>
                     <template #dropdown>
                         <el-dropdown-menu>
-                            <el-dropdown-item command="sync">
+                            <el-dropdown-item command="sync" :disabled="!hasManagePermission">
                                 {{ $t('cronjob.library.syncNow') }}
                             </el-dropdown-item>
-                            <el-dropdown-item v-if="scriptSync === 'Disable'" command="turnOnSync">
+                            <el-dropdown-item
+                                v-if="scriptSync === 'Disable'"
+                                command="turnOnSync"
+                                :disabled="!hasManagePermission"
+                            >
                                 {{ $t('cronjob.library.turnOnSync') }}
                             </el-dropdown-item>
-                            <el-dropdown-item v-if="scriptSync === 'Enable'" command="turnOffSync">
+                            <el-dropdown-item
+                                v-if="scriptSync === 'Enable'"
+                                command="turnOffSync"
+                                :disabled="!hasManagePermission"
+                            >
                                 {{ $t('cronjob.library.turnOffSync') }}
                             </el-dropdown-item>
                         </el-dropdown-menu>
@@ -28,7 +36,7 @@
                 <el-button type="primary" plain @click="onOpenGroupDialog()">
                     {{ $t('commons.table.group') }}
                 </el-button>
-                <el-button plain :disabled="selects.length === 0" @click="onDelete(null)">
+                <el-button plain :disabled="selects.length === 0 || !hasManagePermission" @click="onDelete(null)">
                     {{ $t('commons.button.delete') }}
                 </el-button>
             </template>
@@ -129,6 +137,7 @@ import OperateDialog from '@/views/cronjob/library/operate/index.vue';
 import TerminalDialog from '@/views/cronjob/library/run/index.vue';
 import { deleteScript, searchScript, syncScript } from '@/api/modules/cronjob';
 import { onMounted, reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Cronjob } from '@/api/interface/cronjob';
 import i18n from '@/lang';
 import { GlobalStore } from '@/store';
@@ -305,6 +314,9 @@ const loadGroupOptions = async () => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.handle'),
+        disabled: () => {
+            return !globalStore.isAdminOrNodeAdmin;
+        },
         click: (row: Cronjob.ScriptInfo) => {
             ElMessageBox.confirm(
                 i18n.global.t('cronjob.library.handleHelper', [
@@ -325,7 +337,7 @@ const buttons = [
     {
         label: i18n.global.t('commons.button.clone'),
         disabled: (row: any) => {
-            return !row.isSystem;
+            return !row.isSystem || !hasManagePermission.value;
         },
         click: (row: Cronjob.ScriptInfo) => {
             let item = deepCopy(row) as Cronjob.ScriptInfo;
@@ -339,7 +351,7 @@ const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
         disabled: (row: any) => {
-            return row.isSystem;
+            return row.isSystem || !hasManagePermission.value;
         },
         click: (row: Cronjob.ScriptInfo) => {
             onOpenDialog('edit', row);
@@ -348,7 +360,7 @@ const buttons = [
     {
         label: i18n.global.t('commons.button.delete'),
         disabled: (row: any) => {
-            return row.isSystem;
+            return row.isSystem || !hasManagePermission.value;
         },
         click: (row: Cronjob.ScriptInfo) => {
             onDelete(row);
diff --git a/frontend/src/views/database/mongodb/conn/index.vue b/frontend/src/views/database/mongodb/conn/index.vue
index 8020aaf816ea..fb46c5e54073 100644
--- a/frontend/src/views/database/mongodb/conn/index.vue
+++ b/frontend/src/views/database/mongodb/conn/index.vue
@@ -117,7 +117,11 @@
                 <el-button :disabled="loading" @click="dialogVisible = false">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
-                <el-button :disabled="loading || form.status !== 'Running'" type="primary" @click="onSave(formRef)">
+                <el-button
+                    :disabled="loading || form.status !== 'Running' || !hasManagePermission"
+                    type="primary"
+                    @click="onSave(formRef)"
+                >
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -127,6 +131,7 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Rules } from '@/global/form-rules';
 import { ElForm } from 'element-plus';
 import { getDatabase, updateMongodbRootPassword } from '@/api/modules/database';
@@ -139,6 +144,7 @@ import i18n from '@/lang';
 import { GlobalStore } from '@/store';
 
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 const loading = ref(false);
 const dialogVisible = ref(false);
 
diff --git a/frontend/src/views/database/mongodb/index.vue b/frontend/src/views/database/mongodb/index.vue
index cf956ff6ecfc..926df91932fc 100644
--- a/frontend/src/views/database/mongodb/index.vue
+++ b/frontend/src/views/database/mongodb/index.vue
@@ -26,6 +26,7 @@
             <template #leftToolBar>
                 <el-button
                     v-if="currentDB && (currentDB.from !== 'local' || mongodbStatus === 'Running')"
+                    :disabled="!hasManagePermission"
                     type="primary"
                     @click="openCreateDrawer"
                 >
@@ -38,6 +39,7 @@
                     v-if="currentDB && (currentDB.from !== 'local' || mongodbStatus === 'Running')"
                     type="primary"
                     plain
+                    :disabled="!hasManagePermission"
                     @click="onLoadFromRemote"
                 >
                     {{ $t('database.loadFromRemote') }}
@@ -48,7 +50,12 @@
                 <el-button
                     type="primary"
                     plain
-                    :disabled="!currentDB || currentDB.from !== 'local' || mongodbStatus !== 'Running'"
+                    :disabled="
+                        !currentDB ||
+                        currentDB.from !== 'local' ||
+                        mongodbStatus !== 'Running' ||
+                        !globalStore.isAdminOrNodeAdmin
+                    "
                     @click="goTerminal"
                 >
                     {{ $t('menu.terminal') }}
@@ -196,6 +203,8 @@
                         <template #default="{ row }">
                             <fu-input-rw-switch
                                 v-model="row.description"
+                                :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
+                                :disabled="!hasManagePermission"
                                 @enter="onChange(row)"
                                 @blur="onChange(row)"
                             />
@@ -536,7 +545,7 @@ const buttons = [
     {
         label: i18n.global.t('database.changePassword'),
         disabled: (row: Database.MongodbDBInfo) => {
-            return !row.username || row.isDelete;
+            return !row.username || row.isDelete || !hasManagePermission.value;
         },
         click: (row: Database.MongodbDBInfo) => {
             onChangePassword(row);
@@ -545,7 +554,7 @@ const buttons = [
     {
         label: i18n.global.t('database.permission'),
         disabled: (row: Database.MongodbDBInfo) => {
-            return !row.username || row.isDelete;
+            return !row.username || row.isDelete || !hasManagePermission.value;
         },
         click: (row: Database.MongodbDBInfo) => {
             let param = {
@@ -559,7 +568,7 @@ const buttons = [
     {
         label: i18n.global.t('database.backupList'),
         disabled: (row: Database.MongodbDBInfo) => {
-            return row.isDelete;
+            return row.isDelete || !hasManagePermission.value;
         },
         click: (row: Database.MongodbDBInfo) => {
             openBackupList(row);
@@ -568,7 +577,7 @@ const buttons = [
     {
         label: i18n.global.t('database.loadBackup'),
         disabled: (row: Database.MongodbDBInfo) => {
-            return row.isDelete;
+            return row.isDelete || !hasManagePermission.value;
         },
         click: (row: Database.MongodbDBInfo) => {
             openUploadDialog(row);
@@ -576,6 +585,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => {
+            return !hasManagePermission.value;
+        },
         click: (row: Database.MongodbDBInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/database/mongodb/remote/index.vue b/frontend/src/views/database/mongodb/remote/index.vue
index f23cce9a6c99..65a1b35cf128 100644
--- a/frontend/src/views/database/mongodb/remote/index.vue
+++ b/frontend/src/views/database/mongodb/remote/index.vue
@@ -2,7 +2,7 @@
     <div v-loading="loading">
         <LayoutContent :title="$t('database.remoteDB', 2)" backName="MongoDB">
             <template #leftToolBar>
-                <el-button type="primary" @click="onOpenDialog('create')">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
                     {{ $t('database.createRemoteDB') }}
                 </el-button>
             </template>
@@ -77,6 +77,7 @@
 <script lang="ts" setup>
 import { dateFormat } from '@/utils/date';
 import { onMounted, reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { deleteCheckDatabase, searchDatabases } from '@/api/modules/database';
 import AppResources from '@/views/database/postgresql/check/index.vue';
 import OperateDialog from '@/views/database/mongodb/remote/operate/index.vue';
@@ -85,6 +86,7 @@ import i18n from '@/lang';
 import { Database } from '@/api/interface/database';
 
 const loading = ref(false);
+const { hasManagePermission } = useMenuManagePermission();
 
 const dialogRef = ref();
 const checkRef = ref();
@@ -154,12 +156,14 @@ const onDelete = async (row: Database.DatabaseInfo) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Database.DatabaseInfo) => {
             onOpenDialog('edit', row);
         },
     },
     {
         label: i18n.global.t('commons.button.unbind'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Database.DatabaseInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/database/mysql/conn/index.vue b/frontend/src/views/database/mysql/conn/index.vue
index 74530a5a0428..7965c3c7d43c 100644
--- a/frontend/src/views/database/mysql/conn/index.vue
+++ b/frontend/src/views/database/mysql/conn/index.vue
@@ -73,7 +73,11 @@
 
             <div v-if="form.from === 'local'">
                 <el-form-item :label="$t('database.remoteAccess')" prop="privilege">
-                    <el-switch v-model="form.privilege" :disabled="form.status !== 'Running'" @change="onSaveAccess" />
+                    <el-switch
+                        v-model="form.privilege"
+                        :disabled="form.status !== 'Running' || !hasManagePermission"
+                        @change="onSaveAccess"
+                    />
                     <span class="input-help">{{ $t('database.remoteConnHelper') }}</span>
                 </el-form-item>
                 <el-form-item :label="$t('database.rootPassword')" prop="password">
@@ -109,7 +113,11 @@
                 <el-button :disabled="loading" @click="dialogVisible = false">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
-                <el-button :disabled="loading || form.status !== 'Running'" type="primary" @click="onSave(formRef)">
+                <el-button
+                    :disabled="loading || form.status !== 'Running' || !hasManagePermission"
+                    type="primary"
+                    @click="onSave(formRef)"
+                >
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -129,7 +137,9 @@ import { getRandomStr } from '@/utils/id';
 import { copyText } from '@/utils/clipboard';
 import { getAgentSettingInfo } from '@/api/modules/setting';
 import { GlobalStore } from '@/store';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index 838b3be13fa5..4bbdf12c6510 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -27,6 +27,7 @@
             <template #leftToolBar>
                 <el-button
                     v-if="currentDB && (currentDB.from !== 'local' || mysqlStatus === 'Running')"
+                    :disabled="!hasManagePermission"
                     type="primary"
                     @click="onOpenDialog()"
                 >
@@ -37,6 +38,7 @@
                 </el-button>
                 <el-button
                     v-if="currentDB && (currentDB.from !== 'local' || mysqlStatus === 'Running')"
+                    :disabled="!hasManagePermission"
                     @click="loadDB"
                     type="primary"
                     plain
@@ -46,7 +48,12 @@
                 <el-button @click="goRemoteDB()" type="primary" plain>
                     {{ $t('database.remoteDB') }}
                 </el-button>
-                <el-button @click="goTerminal()" :disabled="currentDB?.from !== 'local'" type="primary" plain>
+                <el-button
+                    @click="goTerminal()"
+                    :disabled="currentDB?.from !== 'local' || !globalStore.isAdminOrNodeAdmin"
+                    type="primary"
+                    plain
+                >
                     {{ $t('menu.terminal') }}
                 </el-button>
                 <el-dropdown>
@@ -194,6 +201,8 @@
                         <template #default="{ row }">
                             <fu-input-rw-switch
                                 v-model="row.description"
+                                :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
+                                :disabled="!hasManagePermission"
                                 @enter="onChange(row)"
                                 @blur="onChange(row)"
                             />
@@ -602,7 +611,7 @@ const buttons = [
     {
         label: i18n.global.t('database.changePassword'),
         disabled: (row: Database.MysqlDBInfo) => {
-            return !row.username || row.isDelete;
+            return !row.username || row.isDelete || !hasManagePermission.value;
         },
         click: (row: Database.MysqlDBInfo) => {
             onChangePassword(row);
@@ -611,7 +620,7 @@ const buttons = [
     {
         label: i18n.global.t('database.permission'),
         disabled: (row: Database.MysqlDBInfo) => {
-            return !row.password || row.isDelete;
+            return !row.password || row.isDelete || !hasManagePermission.value;
         },
         click: (row: Database.MysqlDBInfo) => {
             let param = {
@@ -637,7 +646,7 @@ const buttons = [
     {
         label: i18n.global.t('database.backupList'),
         disabled: (row: Database.MysqlDBInfo) => {
-            return row.isDelete;
+            return row.isDelete || !hasManagePermission.value;
         },
         click: (row: Database.MysqlDBInfo) => {
             let params = {
@@ -651,7 +660,7 @@ const buttons = [
     {
         label: i18n.global.t('database.loadBackup'),
         disabled: (row: Database.MysqlDBInfo) => {
-            return row.isDelete;
+            return row.isDelete || !hasManagePermission.value;
         },
         click: (row: Database.MysqlDBInfo) => {
             let params = {
@@ -665,6 +674,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => {
+            return !hasManagePermission.value;
+        },
         click: (row: Database.MysqlDBInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/database/mysql/remote/index.vue b/frontend/src/views/database/mysql/remote/index.vue
index f1f85ae511b5..e1bf809eff7c 100644
--- a/frontend/src/views/database/mysql/remote/index.vue
+++ b/frontend/src/views/database/mysql/remote/index.vue
@@ -2,7 +2,7 @@
     <div v-loading="loading">
         <LayoutContent backName="MySQL" :title="$t('database.remoteDB')">
             <template #leftToolBar>
-                <el-button type="primary" @click="onOpenDialog('create')">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
                     {{ $t('database.createRemoteDB') }}
                 </el-button>
             </template>
@@ -82,6 +82,9 @@ import OperateDialog from '@/views/database/mysql/remote/operate/index.vue';
 import DeleteDialog from '@/views/database/mysql/remote/delete/index.vue';
 import i18n from '@/lang';
 import { Database } from '@/api/interface/database';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
+
+const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 
@@ -152,12 +155,14 @@ const onDelete = async (row: Database.DatabaseInfo) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Database.DatabaseInfo) => {
             onOpenDialog('edit', row);
         },
     },
     {
         label: i18n.global.t('commons.button.unbind'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Database.DatabaseInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/database/mysql/setting/index.vue b/frontend/src/views/database/mysql/setting/index.vue
index 3da620748496..4181a802998e 100644
--- a/frontend/src/views/database/mysql/setting/index.vue
+++ b/frontend/src/views/database/mysql/setting/index.vue
@@ -57,7 +57,7 @@
                     <el-button class="mt-2.5" @click="getDefaultConfig()">
                         {{ $t('app.defaultConfig') }}
                     </el-button>
-                    <el-button type="primary" class="mt-2.5" @click="onSaveConf">
+                    <el-button :disabled="!hasManagePermission" type="primary" class="mt-2.5" @click="onSaveConf">
                         {{ $t('commons.button.save') }}
                     </el-button>
                     <el-row>
@@ -83,7 +83,12 @@
                                     <el-input clearable type="number" v-model.number="baseInfo.port" />
                                 </el-form-item>
                                 <el-form-item>
-                                    <el-button type="primary" @click="onSavePort(panelFormRef)" icon="Collection">
+                                    <el-button
+                                        type="primary"
+                                        :disabled="!hasManagePermission"
+                                        @click="onSavePort(panelFormRef)"
+                                        icon="Collection"
+                                    >
                                         {{ $t('commons.button.save') }}
                                     </el-button>
                                 </el-form-item>
@@ -134,6 +139,8 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
 import { routerToName } from '@/utils/router';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
+const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 
diff --git a/frontend/src/views/database/mysql/setting/slow-log/index.vue b/frontend/src/views/database/mysql/setting/slow-log/index.vue
index a7e85c0af51d..8bf99c91f389 100644
--- a/frontend/src/views/database/mysql/setting/slow-log/index.vue
+++ b/frontend/src/views/database/mysql/setting/slow-log/index.vue
@@ -3,6 +3,7 @@
         <el-form label-position="left" label-width="80px" @submit.prevent>
             <el-form-item :label="$t('database.isOn')">
                 <el-switch
+                    :disabled="!hasManagePermission"
                     v-model="variables.slow_query_log"
                     active-value="ON"
                     inactive-value="OFF"
@@ -30,6 +31,8 @@ import { updateMysqlVariables } from '@/api/modules/database';
 import LogFile from '@/components/log/file/index.vue';
 import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
+const { hasManagePermission } = useMenuManagePermission();
 
 const detailShow = ref();
 const currentStatus = ref();
diff --git a/frontend/src/views/database/mysql/setting/variables/index.vue b/frontend/src/views/database/mysql/setting/variables/index.vue
index fba18cb859c4..fb6390453ff9 100644
--- a/frontend/src/views/database/mysql/setting/variables/index.vue
+++ b/frontend/src/views/database/mysql/setting/variables/index.vue
@@ -63,7 +63,11 @@
                     </el-form-item>
 
                     <el-form-item>
-                        <el-button @click="onSaveStart(variableFormRef)" type="primary">
+                        <el-button
+                            :disabled="!hasManagePermission"
+                            @click="onSaveStart(variableFormRef)"
+                            type="primary"
+                        >
                             {{ $t('commons.button.save') }}
                         </el-button>
                     </el-form-item>
@@ -123,6 +127,8 @@ import { updateMysqlVariables } from '@/api/modules/database';
 import i18n from '@/lang';
 import { planOptions } from './../helper';
 import { MsgSuccess } from '@/utils/message';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
+const { hasManagePermission } = useMenuManagePermission();
 
 const plan = ref();
 const confirmDialogRef = ref();
diff --git a/frontend/src/views/database/postgresql/conn/index.vue b/frontend/src/views/database/postgresql/conn/index.vue
index 034b2da40ad6..9574a149cada 100644
--- a/frontend/src/views/database/postgresql/conn/index.vue
+++ b/frontend/src/views/database/postgresql/conn/index.vue
@@ -111,7 +111,11 @@
                 <el-button :disabled="loading" @click="dialogVisible = false">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
-                <el-button :disabled="loading || form.status !== 'Running'" type="primary" @click="onSave(formRef)">
+                <el-button
+                    :disabled="loading || form.status !== 'Running' || !hasManagePermission"
+                    type="primary"
+                    @click="onSave(formRef)"
+                >
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -121,6 +125,7 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
@@ -132,6 +137,7 @@ import { copyText } from '@/utils/clipboard';
 import { getAgentSettingInfo } from '@/api/modules/setting';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 
diff --git a/frontend/src/views/database/postgresql/index.vue b/frontend/src/views/database/postgresql/index.vue
index fa95e7fbd331..169af4d7acba 100644
--- a/frontend/src/views/database/postgresql/index.vue
+++ b/frontend/src/views/database/postgresql/index.vue
@@ -25,6 +25,7 @@
             <template #leftToolBar>
                 <el-button
                     v-if="currentDB && (currentDB.from !== 'local' || postgresqlStatus === 'Running')"
+                    :disabled="!hasManagePermission"
                     type="primary"
                     @click="onOpenDialog()"
                 >
@@ -35,6 +36,7 @@
                 </el-button>
                 <el-button
                     v-if="currentDB && (currentDB.from !== 'local' || postgresqlStatus === 'Running')"
+                    :disabled="!hasManagePermission"
                     @click="loadDB"
                     type="primary"
                     plain
@@ -44,7 +46,12 @@
                 <el-button @click="goRemoteDB" type="primary" plain>
                     {{ $t('database.remoteDB') }}
                 </el-button>
-                <el-button @click="goTerminal()" :disabled="currentDB?.from !== 'local'" type="primary" plain>
+                <el-button
+                    @click="goTerminal()"
+                    :disabled="currentDB?.from !== 'local' || !globalStore.isAdminOrNodeAdmin"
+                    type="primary"
+                    plain
+                >
                     {{ $t('menu.terminal') }}
                 </el-button>
                 <el-button @click="goDashboard()" type="primary" plain>PGAdmin4</el-button>
@@ -160,6 +167,8 @@
                         <template #default="{ row }">
                             <fu-input-rw-switch
                                 v-model="row.description"
+                                :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
+                                :disabled="!hasManagePermission"
                                 @enter="onChange(row)"
                                 @blur="onChange(row)"
                             />
@@ -541,7 +550,7 @@ const buttons = [
     {
         label: i18n.global.t('database.changePassword'),
         disabled: (row: Database.PostgresqlDBInfo) => {
-            return !row.username || row.isDelete;
+            return !row.username || row.isDelete || !hasManagePermission.value;
         },
         click: (row: Database.PostgresqlDBInfo) => {
             onChangePassword(row);
@@ -550,7 +559,7 @@ const buttons = [
     {
         label: i18n.global.t('database.permission'),
         disabled: (row: Database.PostgresqlDBInfo) => {
-            return !row.username || row.isDelete;
+            return !row.username || row.isDelete || !hasManagePermission.value;
         },
         click: (row: Database.PostgresqlDBInfo) => {
             let param = {
@@ -565,7 +574,7 @@ const buttons = [
     {
         label: i18n.global.t('database.backupList'),
         disabled: (row: Database.PostgresqlDBInfo) => {
-            return row.isDelete;
+            return row.isDelete || !hasManagePermission.value;
         },
         click: (row: Database.PostgresqlDBInfo) => {
             let params = {
@@ -579,7 +588,7 @@ const buttons = [
     {
         label: i18n.global.t('database.loadBackup'),
         disabled: (row: Database.PostgresqlDBInfo) => {
-            return row.isDelete;
+            return row.isDelete || !hasManagePermission.value;
         },
         click: (row: Database.PostgresqlDBInfo) => {
             let params = {
@@ -593,6 +602,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => {
+            return !hasManagePermission.value;
+        },
         click: (row: Database.PostgresqlDBInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/database/postgresql/remote/index.vue b/frontend/src/views/database/postgresql/remote/index.vue
index 67eaec5b4d95..177ce3960a0c 100644
--- a/frontend/src/views/database/postgresql/remote/index.vue
+++ b/frontend/src/views/database/postgresql/remote/index.vue
@@ -2,7 +2,7 @@
     <div v-loading="loading">
         <LayoutContent :title="$t('database.remoteDB', 2)" backName="PostgreSQL">
             <template #leftToolBar>
-                <el-button type="primary" @click="onOpenDialog('create')">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
                     {{ $t('database.createRemoteDB') }}
                 </el-button>
             </template>
@@ -76,6 +76,7 @@
 <script lang="ts" setup>
 import { dateFormat } from '@/utils/date';
 import { onMounted, reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { deleteCheckDatabase, searchDatabases } from '@/api/modules/database';
 import AppResources from '@/views/database/postgresql/check/index.vue';
 import OperateDialog from '@/views/database/postgresql/remote/operate/index.vue';
@@ -84,6 +85,7 @@ import i18n from '@/lang';
 import { Database } from '@/api/interface/database';
 
 const loading = ref(false);
+const { hasManagePermission } = useMenuManagePermission();
 
 const dialogRef = ref();
 const checkRef = ref();
@@ -152,12 +154,14 @@ const onDelete = async (row: Database.DatabaseInfo) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Database.DatabaseInfo) => {
             onOpenDialog('edit', row);
         },
     },
     {
         label: i18n.global.t('commons.button.unbind'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Database.DatabaseInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/database/postgresql/setting/index.vue b/frontend/src/views/database/postgresql/setting/index.vue
index 02d16e20731b..348912cc8408 100644
--- a/frontend/src/views/database/postgresql/setting/index.vue
+++ b/frontend/src/views/database/postgresql/setting/index.vue
@@ -29,7 +29,7 @@
             <template #main>
                 <div v-if="activeName === 'conf'">
                     <CodemirrorPro :heightDiff="320" v-model="postgresqlConf"></CodemirrorPro>
-                    <el-button type="primary" class="mt-5" @click="onSaveConf">
+                    <el-button :disabled="!hasManagePermission" type="primary" class="mt-5" @click="onSaveConf">
                         {{ $t('commons.button.save') }}
                     </el-button>
                 </div>
@@ -42,7 +42,12 @@
                                     <el-input clearable type="number" v-model.number="baseInfo.port" />
                                 </el-form-item>
                                 <el-form-item>
-                                    <el-button type="primary" @click="onSavePort(panelFormRef)" icon="Collection">
+                                    <el-button
+                                        type="primary"
+                                        :disabled="!hasManagePermission"
+                                        @click="onSavePort(panelFormRef)"
+                                        icon="Collection"
+                                    >
                                         {{ $t('commons.button.save') }}
                                     </el-button>
                                 </el-form-item>
@@ -77,6 +82,7 @@ import { FormInstance } from 'element-plus';
 import ContainerLog from '@/components/log/container/index.vue';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import { onMounted, reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { loadDBFile, loadDBBaseInfo, updateDBFile } from '@/api/modules/database';
 import { changePort, checkAppInstalled } from '@/api/modules/app';
 import { Rules } from '@/global/form-rules';
@@ -86,6 +92,7 @@ import CodemirrorPro from '@/components/codemirror-pro/index.vue';
 import { routerToName } from '@/utils/router';
 
 const loading = ref(false);
+const { hasManagePermission } = useMenuManagePermission();
 
 const activeName = ref('conf');
 
diff --git a/frontend/src/views/database/redis/command/index.vue b/frontend/src/views/database/redis/command/index.vue
index a6c7e4334555..50219059bd71 100644
--- a/frontend/src/views/database/redis/command/index.vue
+++ b/frontend/src/views/database/redis/command/index.vue
@@ -1,10 +1,10 @@
 <template>
     <DrawerPro v-model="drawerVisible" :header="$t('database.redisQuickCmd')" @close="handleClose" size="large">
         <template #content>
-            <el-button type="primary" @click="handleCmdAdd()">
+            <el-button type="primary" :disabled="!hasManagePermission" @click="handleCmdAdd()">
                 {{ $t('commons.button.add') }}
             </el-button>
-            <el-button @click="batchDelete(null)">
+            <el-button :disabled="!hasManagePermission" @click="batchDelete(null)">
                 {{ $t('commons.button.delete') }}
             </el-button>
             <el-table :data="data" class="mt-5" @selection-change="handleSelectionChange">
@@ -30,6 +30,7 @@
                             v-if="scope.row.lineStatus === 'create' || scope.row.lineStatus === 'edit'"
                             link
                             type="primary"
+                            :disabled="!hasManagePermission"
                             @click="handleCmdSave(scope.row)"
                         >
                             {{ $t('commons.button.save') }}
@@ -38,6 +39,7 @@
                             v-if="!scope.row.lineStatus || scope.row.lineStatus === 'saved'"
                             link
                             type="primary"
+                            :disabled="!hasManagePermission"
                             @click="scope.row.lineStatus = 'edit'"
                         >
                             {{ $t('commons.button.edit') }}
@@ -54,6 +56,7 @@
                             v-if="scope.row.lineStatus !== 'create' && scope.row.lineStatus !== 'edit'"
                             link
                             type="primary"
+                            :disabled="!hasManagePermission"
                             @click="handleCmdDelete(scope.$index)"
                         >
                             {{ $t('commons.button.delete') }}
@@ -75,8 +78,10 @@
 import { Command } from '@/api/interface/command';
 import { deleteCommand, getCommandPage, addCommand, editCommand } from '@/api/modules/command';
 import { reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
+const { hasManagePermission } = useMenuManagePermission();
 
 const drawerVisible = ref();
 const loading = ref();
diff --git a/frontend/src/views/database/redis/conn/index.vue b/frontend/src/views/database/redis/conn/index.vue
index ce484c0ca342..019a1e306edc 100644
--- a/frontend/src/views/database/redis/conn/index.vue
+++ b/frontend/src/views/database/redis/conn/index.vue
@@ -102,7 +102,11 @@
                 <el-button :disabled="loading" @click="dialogVisible = false">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
-                <el-button :disabled="loading || form.status !== 'Running'" type="primary" @click="onSave(formRef)">
+                <el-button
+                    :disabled="loading || form.status !== 'Running' || !hasManagePermission"
+                    type="primary"
+                    @click="onSave(formRef)"
+                >
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -112,6 +116,7 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { changeRedisPassword, getDatabase } from '@/api/modules/database';
@@ -123,6 +128,7 @@ import { copyText } from '@/utils/clipboard';
 import { getAgentSettingInfo } from '@/api/modules/setting';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 
diff --git a/frontend/src/views/database/redis/index.vue b/frontend/src/views/database/redis/index.vue
index 240ab15c8d9d..e5b45806df3d 100644
--- a/frontend/src/views/database/redis/index.vue
+++ b/frontend/src/views/database/redis/index.vue
@@ -81,7 +81,12 @@
                         :style="{ height: `calc(100vh - ${loadHeight()})`, 'background-color': '#000' }"
                         :description="loadErrMsg()"
                     >
-                        <el-button v-if="currentDB.from === 'remote'" type="primary" @click="installCli">
+                        <el-button
+                            v-if="currentDB.from === 'remote'"
+                            :disabled="!hasManagePermission"
+                            type="primary"
+                            @click="installCli"
+                        >
                             {{ $t('commons.button.enable') }}
                         </el-button>
                     </el-empty>
@@ -95,7 +100,12 @@
                                 :value="cmd.command"
                             />
                         </el-select>
-                        <el-button @click="onSetQuickCmd" icon="Setting" style="width: 10%">
+                        <el-button
+                            :disabled="!hasManagePermission"
+                            @click="onSetQuickCmd"
+                            icon="Setting"
+                            style="width: 10%"
+                        >
                             {{ $t('commons.button.set') }}
                         </el-button>
                     </div>
@@ -144,6 +154,7 @@ import Terminal from '@/components/terminal/index.vue';
 import AppStatus from '@/components/app-status/index.vue';
 import QuickCmd from '@/views/database/redis/command/index.vue';
 import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { checkAppInstalled } from '@/api/modules/app';
 import { GlobalStore } from '@/store';
 import { listDatabases, checkRedisCli, installRedisCli } from '@/api/modules/database';
@@ -153,6 +164,7 @@ import i18n from '@/lang';
 import { getCommandList } from '@/api/modules/command';
 import { routerToName, routerToNameWithQuery } from '@/utils/router';
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 
diff --git a/frontend/src/views/database/redis/remote/index.vue b/frontend/src/views/database/redis/remote/index.vue
index c9292f24a707..7b4527d93b68 100644
--- a/frontend/src/views/database/redis/remote/index.vue
+++ b/frontend/src/views/database/redis/remote/index.vue
@@ -2,7 +2,7 @@
     <div v-loading="loading">
         <LayoutContent :title="$t('database.remoteDB', 2)" backName="Redis">
             <template #leftToolBar>
-                <el-button type="primary" @click="onOpenDialog('create')">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
                     {{ $t('database.createRemoteDB') }}
                 </el-button>
             </template>
@@ -75,6 +75,7 @@
 <script lang="ts" setup>
 import { dateFormat } from '@/utils/date';
 import { onMounted, reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { deleteCheckDatabase, searchDatabases } from '@/api/modules/database';
 import AppResources from '@/views/database/redis/check/index.vue';
 import OperateDialog from '@/views/database/redis/remote/operate/index.vue';
@@ -83,6 +84,7 @@ import i18n from '@/lang';
 import { Database } from '@/api/interface/database';
 
 const loading = ref(false);
+const { hasManagePermission } = useMenuManagePermission();
 
 const dialogRef = ref();
 const checkRef = ref();
@@ -152,12 +154,14 @@ const onDelete = async (row: Database.DatabaseInfo) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Database.DatabaseInfo) => {
             onOpenDialog('edit', row);
         },
     },
     {
         label: i18n.global.t('commons.button.unbind'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Database.DatabaseInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/database/redis/setting/index.vue b/frontend/src/views/database/redis/setting/index.vue
index 610e867eec96..2e918683f15c 100644
--- a/frontend/src/views/database/redis/setting/index.vue
+++ b/frontend/src/views/database/redis/setting/index.vue
@@ -47,7 +47,7 @@
                     <el-button class="mt-5" @click="getDefaultConfig()">
                         {{ $t('app.defaultConfig') }}
                     </el-button>
-                    <el-button type="primary" @click="onSaveFile" class="mt-5">
+                    <el-button :disabled="!hasManagePermission" type="primary" @click="onSaveFile" class="mt-5">
                         {{ $t('commons.button.save') }}
                     </el-button>
                     <el-row>
@@ -87,7 +87,11 @@
                                     <span class="input-help">{{ $t('database.maxmemoryHelper') }}</span>
                                 </el-form-item>
                                 <el-form-item>
-                                    <el-button type="primary" @click="onSubmitForm(formRef)">
+                                    <el-button
+                                        :disabled="!hasManagePermission"
+                                        type="primary"
+                                        @click="onSubmitForm(formRef)"
+                                    >
                                         {{ $t('commons.button.save') }}
                                     </el-button>
                                 </el-form-item>
@@ -104,7 +108,11 @@
                                     <el-input clearable type="number" v-model.number="form.port" />
                                 </el-form-item>
                                 <el-form-item>
-                                    <el-button @click="onSavePort(portRef)" icon="Collection">
+                                    <el-button
+                                        :disabled="!hasManagePermission"
+                                        @click="onSavePort(portRef)"
+                                        icon="Collection"
+                                    >
                                         {{ $t('commons.button.save') }}
                                     </el-button>
                                 </el-form-item>
@@ -128,6 +136,7 @@
 <script lang="ts" setup>
 import { FormInstance } from 'element-plus';
 import { reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import Status from '@/views/database/redis/setting/status/index.vue';
 import Persistence from '@/views/database/redis/setting/persistence/index.vue';
@@ -138,6 +147,7 @@ import { changePort, getAppDefaultConfig } from '@/api/modules/app';
 import { MsgSuccess } from '@/utils/message';
 
 const loading = ref(false);
+const { hasManagePermission } = useMenuManagePermission();
 
 const form = reactive({
     name: '',
diff --git a/frontend/src/views/database/redis/setting/persistence/index.vue b/frontend/src/views/database/redis/setting/persistence/index.vue
index bb5394039381..837ac1d17c27 100644
--- a/frontend/src/views/database/redis/setting/persistence/index.vue
+++ b/frontend/src/views/database/redis/setting/persistence/index.vue
@@ -27,7 +27,11 @@
                                     </el-radio-group>
                                 </el-form-item>
                                 <el-form-item>
-                                    <el-button type="primary" @click="onSave(formRef, 'aof')">
+                                    <el-button
+                                        :disabled="!hasManagePermission"
+                                        type="primary"
+                                        @click="onSave(formRef, 'aof')"
+                                    >
                                         {{ $t('commons.button.save') }}
                                     </el-button>
                                 </el-form-item>
@@ -58,21 +62,34 @@
                                 {{ $t('database.rdbHelper2') }}
                             </td>
                             <td>
-                                <el-button link type="primary" style="font-size: 10px" @click="handleDelete(index)">
+                                <el-button
+                                    link
+                                    type="primary"
+                                    style="font-size: 10px"
+                                    :disabled="!hasManagePermission"
+                                    @click="handleDelete(index)"
+                                >
                                     {{ $t('commons.button.delete') }}
                                 </el-button>
                             </td>
                         </tr>
                         <tr>
                             <td align="left">
-                                <el-button @click="handleAdd()">{{ $t('commons.button.add') }}</el-button>
+                                <el-button :disabled="!hasManagePermission" @click="handleAdd()">
+                                    {{ $t('commons.button.add') }}
+                                </el-button>
                             </td>
                         </tr>
                     </table>
                     <div>
                         <span style="margin-left: 2px; margin-top: 5px">{{ $t('database.rdbHelper3') }}</span>
                     </div>
-                    <el-button type="primary" @click="onSave(undefined, 'rbd')" style="margin-top: 10px">
+                    <el-button
+                        :disabled="!hasManagePermission"
+                        type="primary"
+                        @click="onSave(undefined, 'rbd')"
+                        style="margin-top: 10px"
+                    >
                         {{ $t('commons.button.save') }}
                     </el-button>
                 </el-card>
@@ -81,8 +98,15 @@
         <el-card style="margin-top: 20px">
             <ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" @search="search" :data="data">
                 <template #toolbar>
-                    <el-button type="primary" @click="onBackup">{{ $t('commons.button.backup') }}</el-button>
-                    <el-button type="primary" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
+                    <el-button :disabled="!hasManagePermission" type="primary" @click="onBackup">
+                        {{ $t('commons.button.backup') }}
+                    </el-button>
+                    <el-button
+                        type="primary"
+                        plain
+                        :disabled="selects.length === 0 || !hasManagePermission"
+                        @click="onBatchDelete(null)"
+                    >
                         {{ $t('commons.button.delete') }}
                     </el-button>
                 </template>
@@ -121,6 +145,7 @@ import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import { Database } from '@/api/interface/database';
 import { redisPersistenceConf, updateRedisPersistenceConf } from '@/api/modules/database';
 import { deleteBackupRecord, handleBackup, handleRecover, searchBackupRecords } from '@/api/modules/backup';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Rules } from '@/global/form-rules';
 import { dateFormat } from '@/utils/date';
 import { newUUID } from '@/utils/id';
@@ -129,6 +154,7 @@ import { FormInstance } from 'element-plus';
 import { reactive, ref } from 'vue';
 import { MsgInfo, MsgSuccess } from '@/utils/message';
 import { Backup } from '@/api/interface/backup';
+const { hasManagePermission } = useMenuManagePermission();
 
 interface saveStruct {
     second: number;
@@ -259,6 +285,7 @@ const onBatchDelete = async (row: Backup.RecordInfo | null) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.recover'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Backup.RecordInfo) => {
             currentRow.value = row;
             let params = {
@@ -271,6 +298,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Backup.RecordInfo) => {
             onBatchDelete(row);
         },
diff --git a/frontend/src/views/home/app/index.vue b/frontend/src/views/home/app/index.vue
index 46695e0336f7..8464119f4a00 100644
--- a/frontend/src/views/home/app/index.vue
+++ b/frontend/src/views/home/app/index.vue
@@ -18,7 +18,12 @@
                         </el-table-column>
                     </el-table>
                     <template #reference>
-                        <el-button class="h-button-setting" link icon="Setting"></el-button>
+                        <el-button
+                            class="h-button-setting"
+                            :disabled="!globalStore.isAdminOrNodeAdmin"
+                            link
+                            icon="Setting"
+                        ></el-button>
                     </template>
                 </el-popover>
             </template>
@@ -74,6 +79,7 @@
                                             type="primary"
                                             link
                                             v-if="app.currentRow.status !== 'Running'"
+                                            :disabled="!hasManagePermission"
                                             @click="onOperate('start', app.currentRow)"
                                         >
                                             {{ $t('commons.button.start') }}
@@ -84,6 +90,7 @@
                                             type="primary"
                                             link
                                             v-else
+                                            :disabled="!hasManagePermission"
                                             @click="onOperate('stop', app.currentRow)"
                                         >
                                             {{ $t('commons.button.stop') }}
@@ -93,6 +100,7 @@
                                             size="small"
                                             type="primary"
                                             link
+                                            :disabled="!hasManagePermission"
                                             @click="onOperate('restart', app.currentRow)"
                                         >
                                             {{ $t('commons.button.restart') }}
@@ -102,6 +110,7 @@
                                             size="small"
                                             type="primary"
                                             link
+                                            :disabled="!hasManagePermission"
                                             @click="routerToName('AppInstalled')"
                                         >
                                             {{ $t('tabs.more') }}
@@ -116,7 +125,10 @@
                                     plain
                                     round
                                     size="small"
-                                    :disabled="app.limit == 1 && app.detail && app.detail.length !== 0"
+                                    :disabled="
+                                        (app.limit == 1 && app.detail && app.detail.length !== 0) ||
+                                        !hasManagePermission
+                                    "
                                     @click="goInstall(app.key, app.appType)"
                                 >
                                     {{ $t('commons.button.install') }}
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index e7233b56271f..dd3dbc5e8e31 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -31,6 +31,7 @@
                     <el-link
                         style="font-size: 12px; margin-left: 5px"
                         icon="Position"
+                        v-if="globalStore.isAdmin"
                         @click="jumpToPath(router, '/settings/safe')"
                         type="primary"
                     >
@@ -44,7 +45,13 @@
             <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
                 <CardWithHeader :header="$t('menu.home')" height="166px">
                     <template #header-r>
-                        <el-button class="h-button-setting" @click="quickJumpRef.acceptParams()" link icon="Setting" />
+                        <el-button
+                            class="h-button-setting"
+                            :disabled="!globalStore.isAdminOrNodeAdmin"
+                            @click="quickJumpRef.acceptParams()"
+                            link
+                            icon="Setting"
+                        />
                     </template>
                     <template #body>
                         <div class="h-overview">
@@ -57,11 +64,24 @@
                                             :content="item.detail"
                                             placement="bottom"
                                         >
-                                            <span @click="quickJump(item)">
+                                            <el-button
+                                                link
+                                                :disabled="!checkPermission('File')"
+                                                type="primary"
+                                                @click="quickJump(item)"
+                                            >
                                                 {{ item.alias || item.detail.substring(0, 18) + '...' }}
-                                            </span>
+                                            </el-button>
                                         </el-tooltip>
-                                        <span @click="quickJump(item)" v-else>{{ item.detail }}</span>
+                                        <el-button
+                                            link
+                                            :disabled="!checkPermission(item.name)"
+                                            type="primary"
+                                            @click="quickJump(item)"
+                                            v-else
+                                        >
+                                            {{ item.detail }}
+                                        </el-button>
                                     </div>
                                 </el-col>
                             </el-row>
@@ -213,7 +233,12 @@
                                         </div>
                                     </div>
                                     <template #reference>
-                                        <el-button class="h-button-setting" link icon="Setting" />
+                                        <el-button
+                                            class="h-button-setting"
+                                            :disabled="!globalStore.isAdminOrNodeAdmin"
+                                            link
+                                            icon="Setting"
+                                        />
                                     </template>
                                 </el-popover>
                                 <el-tooltip :content="$t('commons.button.refresh')" placement="top">
@@ -322,7 +347,13 @@
                         <CardWithHeader :header="$t('home.memo')" class="memo-card">
                             <template #header-r>
                                 <el-tooltip v-if="!memoEditing" :content="$t('commons.button.edit')" placement="top">
-                                    <el-button class="h-button-setting" @click="startMemoEdit" link icon="Edit" />
+                                    <el-button
+                                        class="h-button-setting"
+                                        :disabled="!globalStore.isAdminOrNodeAdmin"
+                                        @click="startMemoEdit"
+                                        link
+                                        icon="Edit"
+                                    />
                                 </el-tooltip>
                                 <el-tooltip v-if="memoEditing" :content="$t('commons.button.save')" placement="top">
                                     <el-button
@@ -461,6 +492,7 @@ import {
     setDashboardCache,
 } from '@/utils/dashboardCache';
 import { MsgSuccess } from '@/utils/message';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const router = useRouter();
 const globalStore = GlobalStore();
 
@@ -544,6 +576,18 @@ const hasRefreshedOptionsOnHover = ref(false);
 const licenseRef = ref();
 const quickJumpRef = ref();
 const { isProductPro, isEnterprise, isOffline } = storeToRefs(globalStore);
+const quickJumpPermissionMap = {
+    Agent: useMenuManagePermission('ai_agent_view').hasPermission,
+    Website: useMenuManagePermission('website_view').hasPermission,
+    Database: useMenuManagePermission('database_view').hasPermission,
+    Cronjob: useMenuManagePermission('cronjob_view').hasPermission,
+    AppInstalled: useMenuManagePermission('app_view').hasPermission,
+    File: useMenuManagePermission('host_file_view').hasPermission,
+} as const;
+
+const checkPermission = (item: string) => {
+    return quickJumpPermissionMap[item as keyof typeof quickJumpPermissionMap]?.value ?? true;
+};
 
 const searchInfo = reactive({
     ioOption: 'all',
@@ -1135,11 +1179,9 @@ onBeforeUnmount(() => {
     .count {
         margin-top: 10px;
 
-        span {
+        :deep(.el-button) {
             font-size: 18px;
-            color: $primary-color;
             line-height: 32px;
-            cursor: pointer;
         }
     }
 }
diff --git a/frontend/src/views/host/disk-management/components/disk-card.vue b/frontend/src/views/host/disk-management/components/disk-card.vue
index 1c0ed10907ef..047b04c69a7f 100644
--- a/frontend/src/views/host/disk-management/components/disk-card.vue
+++ b/frontend/src/views/host/disk-management/components/disk-card.vue
@@ -48,7 +48,12 @@
                                 diskInfo.mountPoint == ''
                             "
                         >
-                            <el-button type="primary" size="small" @click="handlePartition(diskInfo)">
+                            <el-button
+                                type="primary"
+                                size="small"
+                                :disabled="!hasManagePermission"
+                                @click="handlePartition(diskInfo)"
+                            >
                                 {{ $t('disk.handlePartition') }}
                             </el-button>
                         </div>
@@ -92,10 +97,18 @@
                 <el-table-column :label="$t('commons.table.operate')" width="150">
                     <template #default="{ row }">
                         <el-text type="info" v-if="scope === 'system'">{{ $t('disk.cannotOperate') }}</el-text>
-                        <el-button type="primary" link v-else-if="row.mountPoint != ''" @click="unmount(row)">
+                        <el-button
+                            type="primary"
+                            link
+                            v-else-if="row.mountPoint != ''"
+                            :disabled="!hasManagePermission"
+                            @click="unmount(row)"
+                        >
                             {{ $t('disk.unmount') }}
                         </el-button>
-                        <el-button type="primary" link v-else @click="mount(row)">{{ $t('disk.mount') }}</el-button>
+                        <el-button type="primary" link v-else :disabled="!hasManagePermission" @click="mount(row)">
+                            {{ $t('disk.mount') }}
+                        </el-button>
                     </template>
                 </el-table-column>
             </el-table>
@@ -137,10 +150,18 @@
                 <el-table-column :label="$t('commons.table.operate')" width="150">
                     <template #default="{ row }">
                         <el-text type="info" v-if="scope === 'system'">{{ $t('disk.cannotOperate') }}</el-text>
-                        <el-button type="primary" link v-else-if="row.mountPoint != ''" @click="unmount(row)">
+                        <el-button
+                            type="primary"
+                            link
+                            v-else-if="row.mountPoint != ''"
+                            :disabled="!hasManagePermission"
+                            @click="unmount(row)"
+                        >
                             {{ $t('disk.unmount') }}
                         </el-button>
-                        <el-button type="primary" link v-else @click="mount(row)">{{ $t('disk.mount') }}</el-button>
+                        <el-button type="primary" link v-else :disabled="!hasManagePermission" @click="mount(row)">
+                            {{ $t('disk.mount') }}
+                        </el-button>
                     </template>
                 </el-table-column>
             </el-table>
@@ -165,6 +186,10 @@ defineProps({
         type: String,
         required: false,
     },
+    hasManagePermission: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const handlePartition = (diskInfo: Host.DiskInfo) => {
diff --git a/frontend/src/views/host/disk-management/disk/index.vue b/frontend/src/views/host/disk-management/disk/index.vue
index c3a1b73659fc..d3e08b2cb332 100644
--- a/frontend/src/views/host/disk-management/disk/index.vue
+++ b/frontend/src/views/host/disk-management/disk/index.vue
@@ -17,6 +17,7 @@
                     v-for="(disk, index) in diskInfo.unpartitionedDisks"
                     :key="index"
                     :diskInfo="disk"
+                    :has-manage-permission="hasManagePermission"
                     scope="unpartitioned"
                     @partition="(diskInfo) => partitionRef.acceptParams(diskInfo, 'partition')"
                     @search="() => getDisk()"
@@ -28,6 +29,7 @@
                     v-for="(disk, index) in diskInfo.disks"
                     :key="index"
                     :diskInfo="disk"
+                    :has-manage-permission="hasManagePermission"
                     @mount="(diskInfo) => partitionRef.acceptParams(diskInfo, 'mount')"
                     scope="normal"
                     @search="() => getDisk()"
@@ -43,8 +45,10 @@ import { listDisks } from '@/api/modules/host';
 import DiskRouter from '@/views/host/disk-management/index.vue';
 import DiskCard from '@/views/host/disk-management/components/disk-card.vue';
 import Partition from '@/views/host/disk-management/partition/index.vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const loading = ref(false);
+const { hasManagePermission } = useMenuManagePermission();
 const partitionRef = ref();
 const diskInfo = ref<Host.CompleteDiskInfo>();
 
diff --git a/frontend/src/views/host/disk-management/partition/index.vue b/frontend/src/views/host/disk-management/partition/index.vue
index 1b30c865077e..b183161d5b01 100644
--- a/frontend/src/views/host/disk-management/partition/index.vue
+++ b/frontend/src/views/host/disk-management/partition/index.vue
@@ -30,20 +30,24 @@
             <el-form-item :label="$t('disk.mountPoint')" prop="mountPoint">
                 <el-input v-model="form.mountPoint">
                     <template #prepend>
-                        <el-button icon="Folder" @click="fileRef.acceptParams({ dir: true })" />
+                        <el-button
+                            icon="Folder"
+                            :disabled="!hasManagePermission"
+                            @click="fileRef.acceptParams({ dir: true })"
+                        />
                     </template>
                 </el-input>
             </el-form-item>
             <el-form-item :label="$t('disk.autoMount')" prop="autoMount">
-                <el-switch v-model="form.autoMount" />
+                <el-switch :disabled="!hasManagePermission" v-model="form.autoMount" />
             </el-form-item>
             <el-form-item :label="$t('disk.noFail')" prop="noFail" v-if="form.autoMount">
-                <el-switch v-model="form.noFail" />
+                <el-switch :disabled="!hasManagePermission" v-model="form.noFail" />
             </el-form-item>
         </el-form>
         <template #footer>
             <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
-            <el-button type="primary" @click="submit" :disabled="loading">
+            <el-button type="primary" @click="submit" :disabled="loading || !hasManagePermission">
                 {{ $t('commons.button.confirm') }}
             </el-button>
         </template>
@@ -57,6 +61,9 @@ import { mountDisk, partitionDisk } from '@/api/modules/host';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
+
+const { hasManagePermission } = useMenuManagePermission();
 
 const rules = ref<any>({
     filesystem: [Rules.requiredInput],
diff --git a/frontend/src/views/host/file-management/favorite/index.vue b/frontend/src/views/host/file-management/favorite/index.vue
index 4e7469431f16..26e980dc3a44 100644
--- a/frontend/src/views/host/file-management/favorite/index.vue
+++ b/frontend/src/views/host/file-management/favorite/index.vue
@@ -24,6 +24,9 @@ import { searchFavorite, removeFavorite } from '@/api/modules/files';
 import i18n from '@/lang';
 import { reactive, ref } from 'vue';
 import { File } from '@/api/interface/file';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
+
+const { hasManagePermission } = useMenuManagePermission();
 
 const paginationConfig = reactive({
     cacheSizeKey: 'favorite-page-size',
@@ -89,6 +92,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => !hasManagePermission.value,
         click: (row: any) => {
             singleDel(row.id);
         },
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index 34d69db2969d..7b5aa606950c 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -223,11 +223,11 @@
                                 </el-button>
                                 <template #dropdown>
                                     <el-dropdown-menu>
-                                        <el-dropdown-item command="dir">
+                                        <el-dropdown-item command="dir" :disabled="!hasManagePermission">
                                             <svg-icon iconName="p-file-folder"></svg-icon>
                                             {{ $t('file.dir') }}
                                         </el-dropdown-item>
-                                        <el-dropdown-item command="file">
+                                        <el-dropdown-item command="file" :disabled="!hasManagePermission">
                                             <svg-icon iconName="p-file-normal"></svg-icon>
                                             {{ $t('menu.files') }}
                                         </el-dropdown-item>
@@ -241,11 +241,11 @@
                                 </el-button>
                                 <template #dropdown>
                                     <el-dropdown-menu>
-                                        <el-dropdown-item @click="openUpload">
+                                        <el-dropdown-item @click="openUpload" :disabled="!hasManagePermission">
                                             <el-icon><ElUpload /></el-icon>
                                             {{ $t('commons.button.upload') }}
                                         </el-dropdown-item>
-                                        <el-dropdown-item @click="openWget">
+                                        <el-dropdown-item @click="openWget" :disabled="!hasManagePermission">
                                             <el-icon><ElDownload /></el-icon>
                                             {{ $t('file.remoteFile') }}
                                         </el-dropdown-item>
@@ -256,7 +256,7 @@
                                 <el-button class="btn" @click="openRecycleBin">
                                     {{ $t('file.recycleBin') }}
                                 </el-button>
-                                <el-button class="btn" @click="toTerminal">
+                                <el-button class="btn" @click="toTerminal" :disabled="!globalStore.isAdminOrNodeAdmin">
                                     {{ $t('menu.terminal') }}
                                 </el-button>
                                 <el-popover
@@ -401,7 +401,11 @@
                                 <template v-if="visibleButtons.length > 0">
                                     <el-button-group class="flex items-center">
                                         <template v-for="btn in visibleButtons" :key="btn.label">
-                                            <el-button plain @click="btn.action" :disabled="selects.length === 0">
+                                            <el-button
+                                                plain
+                                                @click="btn.action"
+                                                :disabled="selects.length === 0 || !hasManagePermission"
+                                            >
                                                 {{ $t(btn.label) }}
                                             </el-button>
                                         </template>
@@ -434,7 +438,7 @@
                                     :content="$t('file.paste')"
                                     placement="bottom"
                                 >
-                                    <el-button plain @click="openPaste">
+                                    <el-button plain :disabled="!hasManagePermission" @click="openPaste">
                                         {{ $t('file.paste') }}({{ fileMove.count }})
                                     </el-button>
                                 </el-tooltip>
@@ -473,7 +477,12 @@
                                         </template>
                                     </el-input>
                                 </div>
-                                <el-button plain type="primary" @click="openAiSearchDrawer">
+                                <el-button
+                                    plain
+                                    type="primary"
+                                    :disabled="!hasManagePermission"
+                                    @click="openAiSearchDrawer"
+                                >
                                     {{ $t('file.aiSearch') }}
                                 </el-button>
                             </div>
@@ -543,6 +552,7 @@
                                                 type="primary"
                                                 size="large"
                                                 icon="Share"
+                                                :disabled="!hasManagePermission"
                                                 @click="openShareFile(row)"
                                             ></el-button>
                                         </div>
@@ -553,6 +563,7 @@
                                                 type="warning"
                                                 size="large"
                                                 icon="StarFilled"
+                                                :disabled="!hasManagePermission"
                                                 @click="remove(row.favoriteID)"
                                             ></el-button>
                                             <div v-else>
@@ -560,6 +571,7 @@
                                                     v-if="hoveredRowPath === row.path"
                                                     link
                                                     icon="Star"
+                                                    :disabled="!hasManagePermission"
                                                     @click="addToFavorite(row)"
                                                 ></el-button>
                                             </div>
@@ -569,7 +581,9 @@
                             </el-table-column>
                             <el-table-column :label="$t('file.mode')" prop="mode" width="80">
                                 <template #default="{ row }">
-                                    <el-link underline="never" @click="openMode(row)">{{ row.mode }}</el-link>
+                                    <el-link underline="never" :disabled="!hasManagePermission" @click="openMode(row)">
+                                        {{ row.mode }}
+                                    </el-link>
                                 </template>
                             </el-table-column>
                             <el-table-column
@@ -579,7 +593,7 @@
                                 width="200"
                             >
                                 <template #default="{ row }">
-                                    <el-link underline="never" @click="openChown(row)">
+                                    <el-link underline="never" :disabled="!hasManagePermission" @click="openChown(row)">
                                         {{ row.user ? row.user : '-' }} ({{ row.uid }}) /
                                         {{ row.group ? row.group : '-' }} ({{ row.gid }})
                                     </el-link>
@@ -758,6 +772,7 @@ import TerminalDialog from './terminal/index.vue';
 import { Dashboard } from '@/api/interface/dashboard';
 import { CompressExtension, MimetypeByExtensionObject } from '@/enums/files';
 import type { TabPaneName } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { getComponentInfo } from '@/api/modules/host';
 import { routerToNameWithQuery } from '@/utils/router';
 import { loadBaseDir } from '@/api/modules/setting';
@@ -767,6 +782,7 @@ import { useGlobalStore } from '@/composables/useGlobalStore';
 const { isMobile } = useGlobalStore();
 
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 
 interface FilePaths {
     url: string;
@@ -1772,21 +1788,24 @@ const beforeButtons = [
     },
     {
         label: i18n.global.t('commons.button.copy'),
+        disabled: () => !hasManagePermission.value,
         click: (row: File.File) => openMoveBtn('copy', row),
     },
     {
         label: i18n.global.t('file.move'),
+        disabled: () => !hasManagePermission.value,
         click: (row: File.File) => openMoveBtn('cut', row),
     },
     {
         label: i18n.global.t('file.paste'),
         click: openPaste,
         disabled: () => {
-            return !moveOpen.value;
+            return !moveOpen.value || !hasManagePermission.value;
         },
     },
     {
         label: i18n.global.t('file.compress'),
+        disabled: () => !hasManagePermission.value,
         click: (row: File.File) => {
             openCompress([row]);
         },
@@ -1800,6 +1819,7 @@ const beforeButtons = [
     },
     {
         label: i18n.global.t('file.editPermissions'),
+        disabled: () => !hasManagePermission.value,
         click: (row: File.File) => {
             openBatchRole([row]);
         },
@@ -1807,6 +1827,7 @@ const beforeButtons = [
     {
         label: i18n.global.t('file.setRemark'),
         hideOnRemarkBlackList: true,
+        disabled: () => !hasManagePermission.value,
         click: (row: File.File) => {
             openRemark(row);
         },
@@ -1816,7 +1837,7 @@ const afterButtons = [
     {
         label: i18n.global.t('commons.button.delete'),
         disabled: (row: File.File) => {
-            return row.name == '.1panel_clash';
+            return row.name == '.1panel_clash' || !hasManagePermission.value;
         },
         click: delFile,
         divided: true,
@@ -1827,6 +1848,7 @@ const afterButtons = [
     },
     {
         label: i18n.global.t('file.addFavoriteAction'),
+        disabled: () => !hasManagePermission.value,
         click: (row: File.File) => {
             addToFavorite(row);
         },
@@ -1834,6 +1856,7 @@ const afterButtons = [
     },
     {
         label: i18n.global.t('file.removeFavoriteAction'),
+        disabled: () => !hasManagePermission.value,
         click: (row: File.File) => {
             remove(row?.favoriteID);
         },
@@ -1841,6 +1864,7 @@ const afterButtons = [
     },
     {
         label: i18n.global.t('file.shareFile'),
+        disabled: () => !hasManagePermission.value,
         click: openShareFile,
         show: (row: File.File) => {
             return !row?.isDir && !row?.shareCode;
@@ -1848,6 +1872,7 @@ const afterButtons = [
     },
     {
         label: i18n.global.t('file.shareCancel'),
+        disabled: () => !hasManagePermission.value,
         click: (row: File.File) => {
             removeShareByPath(row.path);
         },
@@ -1861,7 +1886,7 @@ const afterButtons = [
             openConvert(row);
         },
         disabled: (row: File.File) => {
-            return row?.isDir || !isConvertible(row?.extension, row?.mimeType);
+            return row?.isDir || !isConvertible(row?.extension, row?.mimeType) || !hasManagePermission.value;
         },
     },
     {
@@ -1878,6 +1903,7 @@ const afterButtons = [
 const rightBtnRename = [
     {
         label: i18n.global.t('file.rename'),
+        disabled: () => !hasManagePermission.value,
         click: (row: File.File) => {
             openRename(row, 'right');
         },
@@ -1886,6 +1912,7 @@ const rightBtnRename = [
 const moreBtnRename = [
     {
         label: i18n.global.t('file.rename'),
+        disabled: () => !hasManagePermission.value,
         click: (row: File.File) => {
             openRename(row, 'more');
         },
diff --git a/frontend/src/views/host/file-management/recycle-bin/index.vue b/frontend/src/views/host/file-management/recycle-bin/index.vue
index 12e3e3b14676..2be6134a56d4 100644
--- a/frontend/src/views/host/file-management/recycle-bin/index.vue
+++ b/frontend/src/views/host/file-management/recycle-bin/index.vue
@@ -2,17 +2,27 @@
     <DrawerPro v-model="open" :header="$t('file.recycleBin')" @close="handleClose" size="large">
         <template #content>
             <div class="flex space-x-4">
-                <el-button @click="clear" type="primary" :disabled="data == null || data.length == 0">
+                <el-button
+                    @click="clear"
+                    type="primary"
+                    :disabled="data == null || data.length == 0 || !hasManagePermission"
+                >
                     {{ $t('file.clearRecycleBin') }}
                 </el-button>
-                <el-button @click="patchDelete" :disabled="data == null || selects.length == 0">
+                <el-button @click="patchDelete" :disabled="data == null || selects.length == 0 || !hasManagePermission">
                     {{ $t('commons.button.delete') }}
                 </el-button>
-                <el-button @click="patchReduce" :disabled="data == null || selects.length == 0">
+                <el-button @click="patchReduce" :disabled="data == null || selects.length == 0 || !hasManagePermission">
                     {{ $t('file.reduce') }}
                 </el-button>
                 <el-form-item :label="$t('file.fileRecycleBin')">
-                    <el-switch v-model="status" active-value="Enable" inactive-value="Disable" @change="changeStatus" />
+                    <el-switch
+                        v-model="status"
+                        active-value="Enable"
+                        inactive-value="Disable"
+                        :disabled="!hasManagePermission"
+                        @change="changeStatus"
+                    />
                 </el-form-item>
             </div>
             <ComplexTable
@@ -68,6 +78,9 @@ import Delete from './delete/index.vue';
 import Reduce from './reduce/index.vue';
 import { MsgSuccess } from '@/utils/message';
 import { updateAgentSetting } from '@/api/modules/setting';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
+
+const { hasManagePermission } = useMenuManagePermission();
 
 const open = ref(false);
 const req = reactive({
@@ -181,10 +194,12 @@ const clear = async () => {
 const buttons = [
     {
         label: i18n.global.t('file.reduce'),
+        disabled: () => !hasManagePermission.value,
         click: rdFile,
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => !hasManagePermission.value,
         click: singleDel,
     },
 ];
diff --git a/frontend/src/views/host/file-management/share-list/index.vue b/frontend/src/views/host/file-management/share-list/index.vue
index a838b4a33204..89db764396a9 100644
--- a/frontend/src/views/host/file-management/share-list/index.vue
+++ b/frontend/src/views/host/file-management/share-list/index.vue
@@ -29,6 +29,9 @@ import { File } from '@/api/interface/file';
 import i18n from '@/lang';
 import { dateFormat as formatDateTime } from '@/utils/date';
 import { computed, reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
+
+const { hasManagePermission } = useMenuManagePermission();
 
 const paginationConfig = reactive({
     cacheSizeKey: 'share-page-size',
@@ -89,6 +92,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('file.shareClose'),
+        disabled: () => !hasManagePermission.value,
         click: (row: File.FileShareInfo) => {
             closeShare(row.path);
         },
diff --git a/frontend/src/views/host/file-management/share/index.vue b/frontend/src/views/host/file-management/share/index.vue
index 34fd3bd762ca..7dd693e4ad6d 100644
--- a/frontend/src/views/host/file-management/share/index.vue
+++ b/frontend/src/views/host/file-management/share/index.vue
@@ -63,13 +63,13 @@
                 <el-button :disabled="loading" @click="handleClose">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
-                <el-button v-if="shareInfo" :disabled="loading" @click="cancelShare">
+                <el-button v-if="shareInfo" :disabled="loading || !hasManagePermission" @click="cancelShare">
                     {{ $t('file.shareClose') }}
                 </el-button>
                 <el-button v-if="shareInfo" :disabled="loading" @click="copyLink">
                     {{ $t('file.shareCopyLink') }}
                 </el-button>
-                <el-button type="primary" :disabled="loading" @click="generate">
+                <el-button type="primary" :disabled="loading || !hasManagePermission" @click="generate">
                     {{ shareInfo ? $t('file.shareRegenerate') : $t('file.shareGenerate') }}
                 </el-button>
             </span>
@@ -105,12 +105,14 @@ import { copyText } from '@/utils/clipboard';
 import { dateFormat as formatDateTime } from '@/utils/date';
 import type { FormInstance, FormRules } from 'element-plus';
 import { computed, reactive, ref, watch } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 interface ShareProps {
     path: string;
 }
 
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 const open = ref(false);
 const loading = ref(false);
 const changed = ref(false);
diff --git a/frontend/src/views/host/firewall/advance/index.vue b/frontend/src/views/host/firewall/advance/index.vue
index 4a255e00c205..cc9808c29bea 100644
--- a/frontend/src/views/host/firewall/advance/index.vue
+++ b/frontend/src/views/host/firewall/advance/index.vue
@@ -36,16 +36,20 @@
                         <el-alert type="info" :closable="false" :title="loadPrompt()" />
                     </template>
                     <template #leftToolBar>
-                        <el-button type="primary" @click="onOpenDialog('create')">
+                        <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
                             {{ $t('firewall.create') }}
                         </el-button>
-                        <el-button v-if="isBind" plain @click="onUnBind">
+                        <el-button v-if="isBind" plain :disabled="!hasManagePermission" @click="onUnBind">
                             {{ $t('commons.button.unbind') }}
                         </el-button>
-                        <el-button v-if="!isBind" plain @click="onBind">
+                        <el-button v-if="!isBind" plain :disabled="!hasManagePermission" @click="onBind">
                             {{ $t('commons.button.bind') }}
                         </el-button>
-                        <el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
+                        <el-button
+                            @click="onDelete(null)"
+                            plain
+                            :disabled="selects.length === 0 || !hasManagePermission"
+                        >
                             {{ $t('commons.button.delete') }}
                         </el-button>
                     </template>
@@ -117,6 +121,7 @@
                                 <template #default="{ row }">
                                     <fu-input-rw-switch
                                         v-model="row.description"
+                                        :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
                                         @enter="onChange(row)"
                                         @blur="onChange(row)"
                                     />
@@ -153,10 +158,12 @@ import {
     updateFirewallDescription,
 } from '@/api/modules/host';
 import { Host } from '@/api/interface/host';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 
 const loading = ref();
+const { hasManagePermission } = useMenuManagePermission();
 const selects = ref<any>([]);
 const selectedChain = ref('1PANEL_INPUT');
 const defaultStrategy = ref('ACCEPT');
@@ -337,6 +344,7 @@ const onChange = async (row: any) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Host.IptablesRules) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/host/firewall/forward/index.vue b/frontend/src/views/host/firewall/forward/index.vue
index 967cf4e75af1..afcc073b9ab6 100644
--- a/frontend/src/views/host/firewall/forward/index.vue
+++ b/frontend/src/views/host/firewall/forward/index.vue
@@ -19,17 +19,21 @@
 
                 <LayoutContent :title="$t('firewall.forwardRule', 2)" :class="{ mask: !isActive }">
                     <template #leftToolBar>
-                        <el-button type="primary" @click="onOpenDialog('create')">
+                        <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
                             {{ $t('commons.button.create') }}
                         </el-button>
-                        <el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
+                        <el-button
+                            @click="onDelete(null)"
+                            plain
+                            :disabled="selects.length === 0 || !hasManagePermission"
+                        >
                             {{ $t('commons.button.delete') }}
                         </el-button>
                         <el-button-group>
-                            <el-button @click="onImport">
+                            <el-button :disabled="!hasManagePermission" @click="onImport">
                                 {{ $t('commons.button.import') }}
                             </el-button>
-                            <el-button :disabled="selects.length === 0" @click="onExport">
+                            <el-button :disabled="selects.length === 0 || !hasManagePermission" @click="onExport">
                                 {{ $t('commons.button.export') }}
                             </el-button>
                         </el-button-group>
@@ -103,11 +107,13 @@ import FireStatus from '@/views/host/firewall/status/index.vue';
 import { onMounted, reactive, ref } from 'vue';
 import { operateForwardRule, searchFireRule } from '@/api/modules/host';
 import { Host } from '@/api/interface/host';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { downloadWithContent } from '@/utils/file';
 import { getCurrentDateFormatted } from '@/utils/date';
 const loading = ref();
+const { hasManagePermission } = useMenuManagePermission();
 const activeTag = ref('forward');
 const selects = ref<any>([]);
 const searchName = ref();
@@ -254,12 +260,14 @@ const onExport = () => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Host.RuleForward) => {
             onOpenDialog('edit', row);
         },
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Host.RuleForward) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/host/firewall/ip/index.vue b/frontend/src/views/host/firewall/ip/index.vue
index 2b1d3e7c9cc1..6d90bf654fbf 100644
--- a/frontend/src/views/host/firewall/ip/index.vue
+++ b/frontend/src/views/host/firewall/ip/index.vue
@@ -29,17 +29,21 @@
                         </div>
                     </template>
                     <template #leftToolBar>
-                        <el-button type="primary" @click="onOpenDialog('create')">
+                        <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
                             {{ $t('commons.button.create') }}
                         </el-button>
-                        <el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
+                        <el-button
+                            @click="onDelete(null)"
+                            plain
+                            :disabled="selects.length === 0 || !hasManagePermission"
+                        >
                             {{ $t('commons.button.delete') }}
                         </el-button>
                         <el-button-group>
-                            <el-button @click="onImport">
+                            <el-button :disabled="!hasManagePermission" @click="onImport">
                                 {{ $t('commons.button.import') }}
                             </el-button>
-                            <el-button :disabled="selects.length === 0" @click="onExport">
+                            <el-button :disabled="selects.length === 0 || !hasManagePermission" @click="onExport">
                                 {{ $t('commons.button.export') }}
                             </el-button>
                         </el-button-group>
@@ -74,13 +78,20 @@
                                 <template #default="{ row }">
                                     <el-button
                                         v-if="row.strategy === 'accept'"
+                                        :disabled="!hasManagePermission"
                                         @click="onChangeStatus(row, 'drop')"
                                         link
                                         type="success"
                                     >
                                         {{ $t('firewall.allow') }}
                                     </el-button>
-                                    <el-button v-else link type="danger" @click="onChangeStatus(row, 'accept')">
+                                    <el-button
+                                        v-else
+                                        link
+                                        type="danger"
+                                        :disabled="!hasManagePermission"
+                                        @click="onChangeStatus(row, 'accept')"
+                                    >
                                         {{ $t('firewall.deny') }}
                                     </el-button>
                                 </template>
@@ -94,6 +105,7 @@
                                 <template #default="{ row }">
                                     <fu-input-rw-switch
                                         v-model="row.description"
+                                        :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
                                         @enter="onChange(row)"
                                         @blur="onChange(row)"
                                     />
@@ -127,11 +139,13 @@ import { onMounted, reactive, ref } from 'vue';
 import { batchOperateRule, searchFireRule, updateAddrRule, updateFirewallDescription } from '@/api/modules/host';
 import { Host } from '@/api/interface/host';
 import { ElMessageBox } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { downloadWithContent } from '@/utils/file';
 import { getCurrentDateFormatted } from '@/utils/date';
 const loading = ref();
+const { hasManagePermission } = useMenuManagePermission();
 const activeTag = ref('address');
 const selects = ref<any>([]);
 const searchName = ref();
@@ -314,12 +328,14 @@ const onExport = () => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Host.RuleIP) => {
             onOpenDialog('edit', row);
         },
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Host.RuleIP) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/host/firewall/port/index.vue b/frontend/src/views/host/firewall/port/index.vue
index 5d5c98f95307..78c6e638224a 100644
--- a/frontend/src/views/host/firewall/port/index.vue
+++ b/frontend/src/views/host/firewall/port/index.vue
@@ -43,17 +43,21 @@
                         </el-alert>
                     </template>
                     <template #leftToolBar>
-                        <el-button type="primary" @click="onOpenDialog('create')">
+                        <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
                             {{ $t('commons.button.create') }}
                         </el-button>
-                        <el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
+                        <el-button
+                            @click="onDelete(null)"
+                            plain
+                            :disabled="selects.length === 0 || !hasManagePermission"
+                        >
                             {{ $t('commons.button.delete') }}
                         </el-button>
                         <el-button-group>
-                            <el-button @click="onImport">
+                            <el-button :disabled="!hasManagePermission" @click="onImport">
                                 {{ $t('commons.button.import') }}
                             </el-button>
-                            <el-button :disabled="selects.length === 0" @click="onExport">
+                            <el-button :disabled="selects.length === 0 || !hasManagePermission" @click="onExport">
                                 {{ $t('commons.button.export') }}
                             </el-button>
                         </el-button-group>
@@ -102,13 +106,20 @@
                                 <template #default="{ row }">
                                     <el-button
                                         v-if="row.strategy === 'accept'"
+                                        :disabled="!hasManagePermission"
                                         @click="onChangeStatus(row, 'drop')"
                                         link
                                         type="success"
                                     >
                                         {{ $t('firewall.accept') }}
                                     </el-button>
-                                    <el-button v-else link type="danger" @click="onChangeStatus(row, 'accept')">
+                                    <el-button
+                                        v-else
+                                        link
+                                        type="danger"
+                                        :disabled="!hasManagePermission"
+                                        @click="onChangeStatus(row, 'accept')"
+                                    >
                                         {{ $t('firewall.drop') }}
                                     </el-button>
                                 </template>
@@ -128,6 +139,7 @@
                                 <template #default="{ row }">
                                     <fu-input-rw-switch
                                         v-model="row.description"
+                                        :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
                                         @enter="onChange(row)"
                                         @blur="onChange(row)"
                                     />
@@ -164,6 +176,7 @@ import { batchOperateRule, searchFireRule, updateFirewallDescription, updatePort
 import { getListeningProcess } from '@/api/modules/process';
 import { Host } from '@/api/interface/host';
 import { Process } from '@/api/interface/process';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox } from 'element-plus';
@@ -172,6 +185,7 @@ import { routerToName } from '@/utils/router';
 import { downloadWithContent } from '@/utils/file';
 import { getCurrentDateFormatted } from '@/utils/date';
 const loading = ref();
+const { hasManagePermission } = useMenuManagePermission();
 const activeTag = ref('port');
 const selects = ref<any>([]);
 const searchName = ref();
@@ -420,12 +434,14 @@ const showProcessDetail = (pid: number) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Host.RulePort) => {
             onOpenDialog('edit', row);
         },
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Host.RuleInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/host/firewall/status/index.vue b/frontend/src/views/host/firewall/status/index.vue
index 2567767af43b..6785c400c39f 100644
--- a/frontend/src/views/host/firewall/status/index.vue
+++ b/frontend/src/views/host/firewall/status/index.vue
@@ -10,29 +10,58 @@
                     </div>
                     <div class="mt-0.5">
                         <template v-if="baseInfo.name !== 'iptables'">
-                            <el-button type="primary" v-if="baseInfo.isActive" @click="onOperate('stop')" link>
+                            <el-button
+                                type="primary"
+                                v-if="baseInfo.isActive"
+                                :disabled="!hasManagePermission"
+                                @click="onOperate('stop')"
+                                link
+                            >
                                 {{ $t('commons.button.stop') }}
                             </el-button>
-                            <el-button type="primary" v-if="!baseInfo.isActive" @click="onOperate('start')" link>
+                            <el-button
+                                type="primary"
+                                v-if="!baseInfo.isActive"
+                                :disabled="!hasManagePermission"
+                                @click="onOperate('start')"
+                                link
+                            >
                                 {{ $t('commons.button.start') }}
                             </el-button>
                             <el-divider direction="vertical" />
-                            <el-button type="primary" @click="onOperate('restart')" link>
+                            <el-button
+                                type="primary"
+                                :disabled="!hasManagePermission"
+                                @click="onOperate('restart')"
+                                link
+                            >
                                 {{ $t('commons.button.restart') }}
                             </el-button>
                         </template>
                         <template v-if="!baseInfo.isInit || (props.currentTab === 'forward' && !baseInfo.isBind)">
                             <el-divider direction="vertical" />
-                            <el-button type="primary" link @click="onInit">
+                            <el-button type="primary" link :disabled="!hasManagePermission" @click="onInit">
                                 {{ $t('commons.button.init') }}
                             </el-button>
                         </template>
                         <template v-if="baseInfo.name === 'iptables' && baseInfo.isInit && props.currentTab == 'base'">
                             <el-divider direction="vertical" />
-                            <el-button v-if="baseInfo.isBind" type="primary" link @click="onUnBind">
+                            <el-button
+                                v-if="baseInfo.isBind"
+                                type="primary"
+                                link
+                                :disabled="!hasManagePermission"
+                                @click="onUnBind"
+                            >
                                 {{ $t('commons.button.unbind') }}
                             </el-button>
-                            <el-button v-if="!baseInfo.isBind" type="primary" link @click="onBind">
+                            <el-button
+                                v-if="!baseInfo.isBind"
+                                type="primary"
+                                link
+                                :disabled="!hasManagePermission"
+                                @click="onBind"
+                            >
                                 {{ $t('commons.button.bind') }}
                             </el-button>
                         </template>
@@ -44,6 +73,7 @@
                                 class="ml-2"
                                 inactive-value="Disable"
                                 active-value="Enable"
+                                :disabled="!hasManagePermission"
                                 @change="onPingOperate"
                                 v-model="onPing"
                             />
@@ -90,6 +120,9 @@ import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox } from 'element-plus';
 import { ref } from 'vue';
 import { loadDockerStatus } from '@/api/modules/container';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
+
+const { hasManagePermission } = useMenuManagePermission();
 
 const props = defineProps({
     currentTab: String,
diff --git a/frontend/src/views/host/monitor/setting/index.vue b/frontend/src/views/host/monitor/setting/index.vue
index fa29e7814cd9..e6168aad0127 100644
--- a/frontend/src/views/host/monitor/setting/index.vue
+++ b/frontend/src/views/host/monitor/setting/index.vue
@@ -10,6 +10,7 @@
                         <el-col :span="12">
                             <el-form-item :label="$t('monitor.enableMonitor')" prop="monitorStatus">
                                 <el-switch
+                                    :disabled="!hasManagePermission"
                                     @change="onSaveStatus"
                                     v-model="form.monitorStatus"
                                     active-value="Enable"
@@ -19,7 +20,11 @@
                             <el-form-item :label="$t('monitor.storeDays')" prop="monitorStoreDays">
                                 <el-input disabled v-model="form.monitorStoreDays">
                                     <template #append>
-                                        <el-button @click="onChangeStoreDays" icon="Setting">
+                                        <el-button
+                                            :disabled="!hasManagePermission"
+                                            @click="onChangeStoreDays"
+                                            icon="Setting"
+                                        >
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -28,7 +33,11 @@
                             <el-form-item :label="$t('monitor.interval')" prop="monitorIntervalItem">
                                 <el-input disabled v-model="form.monitorIntervalItem">
                                     <template #append>
-                                        <el-button @click="onChangeInterval" icon="Setting">
+                                        <el-button
+                                            :disabled="!hasManagePermission"
+                                            @click="onChangeInterval"
+                                            icon="Setting"
+                                        >
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -37,7 +46,11 @@
                             <el-form-item :label="$t('monitor.defaultNetwork')">
                                 <el-input disabled v-model="form.defaultNetwork">
                                     <template #append>
-                                        <el-button @click="onChangeNetwork" icon="Setting">
+                                        <el-button
+                                            :disabled="!hasManagePermission"
+                                            @click="onChangeNetwork"
+                                            icon="Setting"
+                                        >
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -47,7 +60,7 @@
                             <el-form-item :label="$t('monitor.defaultIO')">
                                 <el-input disabled v-model="form.defaultIO">
                                     <template #append>
-                                        <el-button @click="onChangeIO" icon="Setting">
+                                        <el-button :disabled="!hasManagePermission" @click="onChangeIO" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -55,7 +68,9 @@
                                 <span class="input-help">{{ $t('monitor.defaultIOHelper') }}</span>
                             </el-form-item>
                             <el-form-item>
-                                <el-button @click="onClean()" icon="Delete">{{ $t('monitor.cleanMonitor') }}</el-button>
+                                <el-button :disabled="!hasManagePermission" @click="onClean()" icon="Delete">
+                                    {{ $t('monitor.cleanMonitor') }}
+                                </el-button>
                             </el-form-item>
                         </el-col>
                     </el-row>
@@ -82,7 +97,9 @@ import IO from '@/views/host/monitor/setting/default-io/index.vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { splitTimeFromSecond, transTimeUnit } from '@/utils/validate';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const loading = ref();
+const { hasManagePermission } = useMenuManagePermission();
 const form = reactive({
     monitorStatus: 'Disable',
     monitorStoreDays: 30,
diff --git a/frontend/src/views/host/process/process/index.vue b/frontend/src/views/host/process/process/index.vue
index de09b3cc90f1..d5cf2e65e112 100644
--- a/frontend/src/views/host/process/process/index.vue
+++ b/frontend/src/views/host/process/process/index.vue
@@ -70,9 +70,11 @@ import i18n from '@/lang';
 import { stopProcess } from '@/api/modules/process';
 import { GlobalStore, ProcessStore } from '@/store';
 import { SortBy, TableV2SortOrder, ElButton } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const globalStore = GlobalStore();
 const processStore = ProcessStore();
+const { hasManagePermission } = useMenuManagePermission();
 
 const statusOptions = computed(() => [
     { text: i18n.global.t('process.running'), value: 'running' },
@@ -199,6 +201,7 @@ const columns = ref([
                     ElButton,
                     {
                         type: 'text',
+                        disabled: !hasManagePermission.value,
                         onClick: () => stop(rowData),
                     },
                     () => i18n.global.t('process.stopProcess'),
diff --git a/frontend/src/views/host/ssh/log/log.vue b/frontend/src/views/host/ssh/log/log.vue
index 326cf7c6c955..5107cf9ac232 100644
--- a/frontend/src/views/host/ssh/log/log.vue
+++ b/frontend/src/views/host/ssh/log/log.vue
@@ -6,7 +6,7 @@
                 <div class="mt-2"><el-alert type="info" :title="$t('ssh.sshAlert')" :closable="false" /></div>
             </template>
             <template #leftToolBar>
-                <el-button type="primary" @click="onExport">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="onExport">
                     {{ $t('commons.button.export') }}
                 </el-button>
             </template>
@@ -79,7 +79,7 @@
                     <el-button @click="open = false" :disabled="loading">
                         {{ $t('commons.button.cancel') }}
                     </el-button>
-                    <el-button type="primary" @click="onSubmitExport" :disabled="loading">
+                    <el-button type="primary" @click="onSubmitExport" :disabled="loading || !hasManagePermission">
                         {{ $t('commons.button.confirm') }}
                     </el-button>
                 </span>
@@ -94,7 +94,9 @@ import { downloadFile } from '@/utils/file';
 import { onMounted, reactive, ref } from 'vue';
 import { exportSSHLogs, loadSSHLogs } from '@/api/modules/host';
 import { GlobalStore } from '@/store';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref();
 const data = ref();
diff --git a/frontend/src/views/host/ssh/session/index.vue b/frontend/src/views/host/ssh/session/index.vue
index 7e6ca94fe380..89c2b1a239b4 100644
--- a/frontend/src/views/host/ssh/session/index.vue
+++ b/frontend/src/views/host/ssh/session/index.vue
@@ -31,7 +31,9 @@ import { stopProcess } from '@/api/modules/process';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { GlobalStore } from '@/store';
 import { checkStreamAuth } from '@/utils/stream-auth';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 
 const sshSearch = reactive({
     type: 'ssh',
@@ -41,6 +43,7 @@ const sshSearch = reactive({
 const buttons = [
     {
         label: i18n.global.t('commons.button.disConn'),
+        disabled: () => !hasManagePermission.value,
         click: function (row: any) {
             stop(row.PID);
         },
diff --git a/frontend/src/views/host/ssh/ssh/certification/index.vue b/frontend/src/views/host/ssh/ssh/certification/index.vue
index b5aa84bfda09..71074e7958b0 100644
--- a/frontend/src/views/host/ssh/ssh/certification/index.vue
+++ b/frontend/src/views/host/ssh/ssh/certification/index.vue
@@ -4,13 +4,13 @@
             <div class="mb-4">
                 <el-alert :closable="false">{{ $t('ssh.pubKeyHelper', [currentUser]) }}</el-alert>
             </div>
-            <el-button type="primary" plain @click="onOpenDialog('create')">
+            <el-button type="primary" plain :disabled="!hasManagePermission" @click="onOpenDialog('create')">
                 {{ $t('commons.button.create') }}
             </el-button>
-            <el-button plain @click="onSync()">
+            <el-button plain :disabled="!hasManagePermission" @click="onSync()">
                 {{ $t('commons.button.sync') }}
             </el-button>
-            <el-button plain :disabled="selects.length === 0" @click="onDelete(null)">
+            <el-button plain :disabled="selects.length === 0 || !hasManagePermission" @click="onDelete(null)">
                 {{ $t('commons.button.delete') }}
             </el-button>
             <ComplexTable
@@ -101,8 +101,10 @@ import Operate from '@/views/host/ssh/ssh/certification/operate/index.vue';
 import { copyText } from '@/utils/clipboard';
 import { Base64 } from 'js-base64';
 import { reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const loading = ref();
+const { hasManagePermission } = useMenuManagePermission();
 const drawerVisible = ref();
 const data = ref();
 const selects = ref<any>([]);
@@ -261,6 +263,7 @@ const handleClose = () => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Host.RootCertInfo) => {
             onOpenDialog('edit', row);
         },
@@ -274,6 +277,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Host.RootCertInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/host/ssh/ssh/index.vue b/frontend/src/views/host/ssh/ssh/index.vue
index ac10cbf7db06..052e63de30f5 100644
--- a/frontend/src/views/host/ssh/ssh/index.vue
+++ b/frontend/src/views/host/ssh/ssh/index.vue
@@ -10,14 +10,26 @@
                         <Status class="mt-0.5" :status="form.isActive ? 'enable' : 'disable'" :msg="form.message" />
                     </div>
                     <div class="mt-0.5">
-                        <el-button v-if="form.isActive" type="primary" @click="onOperate('stop')" link>
+                        <el-button
+                            v-if="form.isActive"
+                            type="primary"
+                            :disabled="!hasManagePermission"
+                            @click="onOperate('stop')"
+                            link
+                        >
                             {{ $t('commons.button.stop') }}
                         </el-button>
-                        <el-button v-if="!form.isActive" type="primary" @click="onOperate('start')" link>
+                        <el-button
+                            v-if="!form.isActive"
+                            type="primary"
+                            :disabled="!hasManagePermission"
+                            @click="onOperate('start')"
+                            link
+                        >
                             {{ $t('commons.button.start') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button type="primary" @click="onOperate('restart')" link>
+                        <el-button type="primary" :disabled="!hasManagePermission" @click="onOperate('restart')" link>
                             {{ $t('commons.button.restart') }}
                         </el-button>
                         <el-divider direction="vertical" />
@@ -29,6 +41,7 @@
                             class="ml-2"
                             inactive-value="disable"
                             active-value="enable"
+                            :disabled="!hasManagePermission"
                             @change="onOperate(autoStart)"
                             v-model="autoStart"
                         />
@@ -44,8 +57,8 @@
                     <el-radio-button value="all">{{ $t('database.allConf') }}</el-radio-button>
                 </el-radio-group>
 
-                <el-button @click="onOpenDrawer">{{ $t('ssh.pubkey') }}</el-button>
-                <el-button @click="onOpenAuthKeys">{{ $t('ssh.authKeys') }}</el-button>
+                <el-button :disabled="!hasManagePermission" @click="onOpenDrawer">{{ $t('ssh.pubkey') }}</el-button>
+                <el-button :disabled="!hasManagePermission" @click="onOpenAuthKeys">{{ $t('ssh.authKeys') }}</el-button>
             </template>
             <template #main>
                 <el-row class="mt-10" v-if="confShowType === 'base'">
@@ -54,7 +67,11 @@
                             <el-form-item :label="$t('ssh.port')" prop="port">
                                 <el-input disabled v-model="form.port">
                                     <template #append>
-                                        <el-button @click="onChangePort" icon="Setting">
+                                        <el-button
+                                            :disabled="!hasManagePermission"
+                                            @click="onChangePort"
+                                            icon="Setting"
+                                        >
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -64,7 +81,11 @@
                             <el-form-item :label="$t('ssh.listenAddress')" prop="listenAddress">
                                 <el-input disabled v-model="form.listenAddressItem">
                                     <template #append>
-                                        <el-button @click="onChangeAddress" icon="Setting">
+                                        <el-button
+                                            :disabled="!hasManagePermission"
+                                            @click="onChangeAddress"
+                                            icon="Setting"
+                                        >
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -74,7 +95,11 @@
                             <el-form-item :label="$t('ssh.permitRootLogin')" prop="permitRootLoginItem">
                                 <el-input disabled v-model="form.permitRootLoginItem">
                                     <template #append>
-                                        <el-button @click="onChangeRoot" icon="Setting">
+                                        <el-button
+                                            :disabled="!hasManagePermission"
+                                            @click="onChangeRoot"
+                                            icon="Setting"
+                                        >
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -85,6 +110,7 @@
                                 <el-switch
                                     active-value="yes"
                                     inactive-value="no"
+                                    :disabled="!hasManagePermission"
                                     @change="onSave(formRef, 'PasswordAuthentication', form.passwordAuthentication)"
                                     v-model="form.passwordAuthentication"
                                 ></el-switch>
@@ -94,6 +120,7 @@
                                 <el-switch
                                     active-value="yes"
                                     inactive-value="no"
+                                    :disabled="!hasManagePermission"
                                     @change="onSave(formRef, 'PubkeyAuthentication', form.pubkeyAuthentication)"
                                     v-model="form.pubkeyAuthentication"
                                 ></el-switch>
@@ -103,6 +130,7 @@
                                 <el-switch
                                     active-value="yes"
                                     inactive-value="no"
+                                    :disabled="!hasManagePermission"
                                     @change="onSave(formRef, 'UseDNS', form.useDNS)"
                                     v-model="form.useDNS"
                                 ></el-switch>
@@ -130,7 +158,12 @@
                         mode="nginx"
                         placeholder="# The SSH configuration file does not exist or is empty (/etc/ssh/sshd_config)"
                     ></CodemirrorPro>
-                    <el-button :disabled="loading" type="primary" @click="onSaveFile" class="mt-2.5">
+                    <el-button
+                        :disabled="loading || !hasManagePermission"
+                        type="primary"
+                        @click="onSaveFile"
+                        class="mt-2.5"
+                    >
                         {{ $t('commons.button.save') }}
                     </el-button>
                 </div>
@@ -158,8 +191,10 @@ import { MsgSuccess } from '@/utils/message';
 import { loadSSHFile, getSSHInfo, operateSSH, updateSSH, updateSSHByFile } from '@/api/modules/host';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const loading = ref(false);
+const { hasManagePermission } = useMenuManagePermission();
 const formRef = ref();
 const confShowType = ref('base');
 const pubKeyRef = ref();
diff --git a/frontend/src/views/log/login/index.vue b/frontend/src/views/log/login/index.vue
index 315c07d6d3e3..b6a8f2fcfa53 100644
--- a/frontend/src/views/log/login/index.vue
+++ b/frontend/src/views/log/login/index.vue
@@ -5,7 +5,7 @@
                 <LogRouter current="LoginLog" />
             </template>
             <template #leftToolBar>
-                <el-button type="primary" plain @click="onClean()">
+                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onClean()">
                     {{ $t('logs.deleteLogs') }}
                 </el-button>
             </template>
@@ -51,8 +51,10 @@ import { cleanLogs, getLoginLogs } from '@/api/modules/log';
 import { onMounted, reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const loading = ref();
+const { hasManagePermission } = useMenuManagePermission();
 const data = ref();
 const confirmDialogRef = ref();
 const paginationConfig = reactive({
diff --git a/frontend/src/views/log/operation/index.vue b/frontend/src/views/log/operation/index.vue
index fa0f49110a9d..2dd1de047507 100644
--- a/frontend/src/views/log/operation/index.vue
+++ b/frontend/src/views/log/operation/index.vue
@@ -5,7 +5,7 @@
                 <LogRouter current="OperationLog" />
             </template>
             <template #leftToolBar>
-                <el-button type="primary" plain @click="onClean()">
+                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onClean()">
                     {{ $t('logs.deleteLogs') }}
                 </el-button>
             </template>
@@ -103,8 +103,10 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { GlobalStore } from '@/store';
 import { listNodes } from '@/utils/node';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const loading = ref();
+const { hasManagePermission } = useMenuManagePermission();
 const data = ref();
 const confirmDialogRef = ref();
 const paginationConfig = reactive({
diff --git a/frontend/src/views/log/website/index.vue b/frontend/src/views/log/website/index.vue
index d50afa2473f2..36add3ea4477 100644
--- a/frontend/src/views/log/website/index.vue
+++ b/frontend/src/views/log/website/index.vue
@@ -34,10 +34,10 @@
                         {{ $t('commons.button.watch') }}
                     </el-checkbox>
                 </el-button>
-                <el-button @click="onDownload" icon="Download" :disabled="!hasContent">
+                <el-button @click="onDownload" icon="Download" :disabled="!hasContent || !hasManagePermission">
                     {{ $t('commons.button.download') }}
                 </el-button>
-                <el-button type="primary" plain @click="onClean()" :disabled="!hasContent">
+                <el-button type="primary" plain @click="onClean()" :disabled="!hasContent || !hasManagePermission">
                     {{ $t('logs.deleteLogs') }}
                 </el-button>
             </template>
@@ -66,6 +66,7 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import LogFile from '@/components/log/file/index.vue';
 import MainDiv from '@/components/main-div/index.vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const logConfig = reactive({
     type: 'website',
@@ -80,6 +81,7 @@ const confirmDialogRef = ref();
 const tailLog = ref(false);
 const logRef = ref();
 const hasContent = ref(false);
+const { hasManagePermission } = useMenuManagePermission();
 
 const searchLog = () => {
     showLog.value = false;
diff --git a/frontend/src/views/toolbox/clam/index.vue b/frontend/src/views/toolbox/clam/index.vue
index c97136abeed4..8ad02c848c2b 100644
--- a/frontend/src/views/toolbox/clam/index.vue
+++ b/frontend/src/views/toolbox/clam/index.vue
@@ -20,10 +20,18 @@
                 />
             </template>
             <template #leftToolBar v-if="clamStatus.isExist">
-                <el-button type="primary" :disabled="!clamStatus.isRunning" @click="onOpenDialog('add')">
+                <el-button
+                    type="primary"
+                    :disabled="!clamStatus.isRunning || !hasManagePermission"
+                    @click="onOpenDialog('add')"
+                >
                     {{ $t('toolbox.clam.clamCreate') }}
                 </el-button>
-                <el-button plain :disabled="selects.length === 0 || !clamStatus.isRunning" @click="onDelete(null)">
+                <el-button
+                    plain
+                    :disabled="selects.length === 0 || !clamStatus.isRunning || !hasManagePermission"
+                    @click="onDelete(null)"
+                >
                     {{ $t('commons.button.delete') }}
                 </el-button>
             </template>
@@ -139,6 +147,7 @@
                         <template #default="{ row }">
                             <fu-input-rw-switch
                                 v-model="row.description"
+                                :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
                                 @enter="onChange(row)"
                                 @blur="onChange(row)"
                             />
@@ -185,9 +194,11 @@ import { transSpecToStr } from '@/views/cronjob/cronjob/helper';
 import { GlobalStore } from '@/store';
 import { storeToRefs } from 'pinia';
 import { routerToFileWithPath, routerToName } from '@/utils/router';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const loading = ref();
 const selects = ref<any>([]);
+const { hasManagePermission } = useMenuManagePermission();
 
 const globalStore = GlobalStore();
 const { isProductPro } = storeToRefs(globalStore);
@@ -339,6 +350,7 @@ const onChangeStatus = async (id: number, status: string) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.handle'),
+        disabled: !hasManagePermission.value,
         click: async (row: Toolbox.ClamInfo) => {
             loading.value = true;
             await handleClamScan(row.id)
@@ -354,6 +366,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: !hasManagePermission.value,
         click: (row: Toolbox.ClamInfo) => {
             onOpenDialog('edit', row);
         },
@@ -366,6 +379,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: !hasManagePermission.value,
         click: (row: Toolbox.ClamInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/toolbox/clam/operate/index.vue b/frontend/src/views/toolbox/clam/operate/index.vue
index 6d28266bd43f..e4c05ee47f8e 100644
--- a/frontend/src/views/toolbox/clam/operate/index.vue
+++ b/frontend/src/views/toolbox/clam/operate/index.vue
@@ -19,7 +19,11 @@
                     <el-form-item :label="$t('toolbox.clam.scanDir')" prop="path">
                         <el-input v-model="dialogData.rowData!.path">
                             <template #prepend>
-                                <el-button icon="Folder" @click="scanDirRef.acceptParams({ dir: true })" />
+                                <el-button
+                                    icon="Folder"
+                                    :disabled="!hasManagePermission"
+                                    @click="scanDirRef.acceptParams({ dir: true })"
+                                />
                             </template>
                         </el-input>
                     </el-form-item>
@@ -38,7 +42,11 @@
                     <el-form-item v-if="hasInfectedDir()" :label="$t('toolbox.clam.infectedDir')" prop="infectedDir">
                         <el-input v-model="dialogData.rowData!.infectedDir">
                             <template #prepend>
-                                <el-button icon="Folder" @click="infectedDirRef.acceptParams({ dir: true })" />
+                                <el-button
+                                    icon="Folder"
+                                    :disabled="!hasManagePermission"
+                                    @click="infectedDirRef.acceptParams({ dir: true })"
+                                />
                             </template>
                         </el-input>
                     </el-form-item>
@@ -217,7 +225,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
+                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSubmit(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -242,7 +250,9 @@ import { storeToRefs } from 'pinia';
 import { GlobalStore } from '@/store';
 import { specOptions, transObjToSpec, transSpecToObj, weekOptions } from '@/views/cronjob/cronjob/helper';
 import { splitTimeFromSecond, transferTimeToSecond } from '@/utils/validate';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 const licenseRef = ref();
 const scanDirRef = ref();
 const infectedDirRef = ref();
diff --git a/frontend/src/views/toolbox/clam/record/index.vue b/frontend/src/views/toolbox/clam/record/index.vue
index cf77a1232553..c428e3cea6a6 100644
--- a/frontend/src/views/toolbox/clam/record/index.vue
+++ b/frontend/src/views/toolbox/clam/record/index.vue
@@ -30,11 +30,21 @@
                         </el-tag>
 
                         <span class="mt-0.5">
-                            <el-button type="primary" @click="onHandle(dialogData.rowData)" link>
+                            <el-button
+                                type="primary"
+                                :disabled="!hasManagePermission"
+                                @click="onHandle(dialogData.rowData)"
+                                link
+                            >
                                 {{ $t('commons.button.handle') }}
                             </el-button>
                             <el-divider direction="vertical" />
-                            <el-button :disabled="!hasRecords" type="primary" @click="onClean" link>
+                            <el-button
+                                :disabled="!hasRecords || !hasManagePermission"
+                                type="primary"
+                                @click="onClean"
+                                link
+                            >
                                 {{ $t('commons.button.clean') }}
                             </el-button>
                         </span>
@@ -190,10 +200,12 @@ import { Toolbox } from '@/api/interface/toolbox';
 import LogFile from '@/components/log/file/index.vue';
 import { cleanClamRecord, handleClamScan, searchClamRecord } from '@/api/modules/toolbox';
 import { routerToFileWithPath } from '@/utils/router';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const loading = ref();
 const refresh = ref(false);
 const hasRecords = ref();
+const { hasManagePermission } = useMenuManagePermission();
 
 const recordShow = ref(false);
 interface DialogProps {
diff --git a/frontend/src/views/toolbox/clam/setting/index.vue b/frontend/src/views/toolbox/clam/setting/index.vue
index fb0ecd49a6bd..d1eddf608f0f 100644
--- a/frontend/src/views/toolbox/clam/setting/index.vue
+++ b/frontend/src/views/toolbox/clam/setting/index.vue
@@ -37,7 +37,13 @@
                         :disabled="!canUpdate()"
                         :placeholder="$t('commons.msg.noneData')"
                     ></CodemirrorPro>
-                    <el-button type="primary" class="mt-5" v-if="canUpdate()" @click="onSave">
+                    <el-button
+                        type="primary"
+                        class="mt-5"
+                        v-if="canUpdate()"
+                        :disabled="!hasManagePermission"
+                        @click="onSave"
+                    >
                         {{ $t('commons.button.save') }}
                     </el-button>
                 </div>
@@ -55,8 +61,10 @@ import { searchClamFile, updateClamFile } from '@/api/modules/toolbox';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const loading = ref(false);
+const { hasManagePermission } = useMenuManagePermission();
 
 const activeName = ref('clamd');
 const tail = ref(200);
diff --git a/frontend/src/views/toolbox/clam/status/index.vue b/frontend/src/views/toolbox/clam/status/index.vue
index 9f92908ecc48..a36bfc056c5a 100644
--- a/frontend/src/views/toolbox/clam/status/index.vue
+++ b/frontend/src/views/toolbox/clam/status/index.vue
@@ -9,18 +9,35 @@
                         <el-tag class="w-24">{{ $t('app.version') }}:{{ data.version }}</el-tag>
                     </div>
                     <div class="mt-0.5">
-                        <el-button type="primary" v-if="!data.isActive" link @click="onOperate('ClamAV', 'start')">
+                        <el-button
+                            type="primary"
+                            v-if="!data.isActive"
+                            link
+                            :disabled="!hasManagePermission"
+                            @click="onOperate('ClamAV', 'start')"
+                        >
                             {{ $t('commons.operate.start') }}
                         </el-button>
-                        <el-button type="primary" v-if="data.isActive" link @click="onOperate('ClamAV', 'stop')">
+                        <el-button
+                            type="primary"
+                            v-if="data.isActive"
+                            link
+                            :disabled="!hasManagePermission"
+                            @click="onOperate('ClamAV', 'stop')"
+                        >
                             {{ $t('commons.operate.stop') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button type="primary" link @click="onOperate('ClamAV', 'restart')">
+                        <el-button
+                            type="primary"
+                            link
+                            :disabled="!hasManagePermission"
+                            @click="onOperate('ClamAV', 'restart')"
+                        >
                             {{ $t('commons.button.restart') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button type="primary" link @click="setting">
+                        <el-button type="primary" link :disabled="!hasManagePermission" @click="setting">
                             {{ $t('commons.button.set') }}
                         </el-button>
                         <el-divider direction="vertical" />
@@ -43,6 +60,7 @@
                             type="primary"
                             v-if="!data.freshIsActive"
                             link
+                            :disabled="!hasManagePermission"
                             @click="onOperate('FreshClam', 'start')"
                         >
                             {{ $t('commons.operate.start') }}
@@ -51,12 +69,18 @@
                             type="primary"
                             v-if="data.freshIsActive"
                             link
+                            :disabled="!hasManagePermission"
                             @click="onOperate('FreshClam', 'stop')"
                         >
                             {{ $t('commons.operate.stop') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button type="primary" link @click="onOperate('FreshClam', 'restart')">
+                        <el-button
+                            type="primary"
+                            link
+                            :disabled="!hasManagePermission"
+                            @click="onOperate('FreshClam', 'restart')"
+                        >
                             {{ $t('commons.button.restart') }}
                         </el-button>
                     </div>
@@ -73,6 +97,7 @@ import { onMounted, ref } from 'vue';
 import { ElMessageBox } from 'element-plus';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const data = ref({
     isExist: true,
@@ -85,6 +110,7 @@ const data = ref({
 });
 const loading = ref(false);
 const showFresh = ref(localStorage.getItem('clam-fresh-show') !== 'hide');
+const { hasManagePermission } = useMenuManagePermission();
 
 const em = defineEmits(['setting', 'getStatus', 'update:loading', 'update:maskShow']);
 
diff --git a/frontend/src/views/toolbox/clean/index.vue b/frontend/src/views/toolbox/clean/index.vue
index 8c82a7927933..25eff3571caf 100644
--- a/frontend/src/views/toolbox/clean/index.vue
+++ b/frontend/src/views/toolbox/clean/index.vue
@@ -2,7 +2,7 @@
     <div v-loading="loading">
         <LayoutContent :title="$t('setting.diskClean')" :divider="true">
             <template #leftToolBar>
-                <el-button type="primary" @click="scanData">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="scanData">
                     {{ $t('clean.scan') }}
                 </el-button>
             </template>
@@ -80,7 +80,7 @@
                         <el-button
                             type="primary"
                             class="-mt-2 ml-20"
-                            :disabled="selectSize <= 0"
+                            :disabled="selectSize <= 0 || !hasManagePermission"
                             @click="onSubmitClean"
                         >
                             {{ $t('clean.clean') }}
@@ -261,8 +261,10 @@ import { getAgentSettingInfo } from '@/api/modules/setting';
 import { clean, scan } from '@/api/modules/toolbox';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const loading = ref();
+const { hasManagePermission } = useMenuManagePermission();
 const totalSize = ref<number>(0);
 const selectSize = ref<number>(0);
 
diff --git a/frontend/src/views/toolbox/device/dns/index.vue b/frontend/src/views/toolbox/device/dns/index.vue
index ba5db254b953..148e5694cc89 100644
--- a/frontend/src/views/toolbox/device/dns/index.vue
+++ b/frontend/src/views/toolbox/device/dns/index.vue
@@ -31,7 +31,7 @@
                 <el-button :disabled="loading" @click="onTest()">
                     {{ $t('toolbox.device.dnsCheck') }}
                 </el-button>
-                <el-button :disabled="loading" type="primary" @click="onSave()">
+                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSave()">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -43,8 +43,10 @@ import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { loadDeviceConf, checkDNS, updateDevice, updateDeviceByConf } from '@/api/modules/toolbox';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
+const { hasManagePermission } = useMenuManagePermission();
 
 const confShowType = ref('form');
 const dnsConf = ref();
diff --git a/frontend/src/views/toolbox/device/hostname/index.vue b/frontend/src/views/toolbox/device/hostname/index.vue
index 831160f21995..a47ff2e49cd5 100644
--- a/frontend/src/views/toolbox/device/hostname/index.vue
+++ b/frontend/src/views/toolbox/device/hostname/index.vue
@@ -9,7 +9,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading" type="primary" @click="onSaveHostname(formRef)">
+                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSaveHostname(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -23,8 +23,10 @@ import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { updateDevice } from '@/api/modules/toolbox';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
+const { hasManagePermission } = useMenuManagePermission();
 
 interface DialogProps {
     hostname: string;
diff --git a/frontend/src/views/toolbox/device/hosts/index.vue b/frontend/src/views/toolbox/device/hosts/index.vue
index 35421b307a71..ec5e17e48157 100644
--- a/frontend/src/views/toolbox/device/hosts/index.vue
+++ b/frontend/src/views/toolbox/device/hosts/index.vue
@@ -24,7 +24,7 @@
                     </template>
                 </el-table-column>
             </el-table>
-            <el-button class="ml-3 mt-2" @click="handleHostsAdd()">
+            <el-button class="ml-3 mt-2" :disabled="!hasManagePermission" @click="handleHostsAdd()">
                 {{ $t('commons.button.add') }}
             </el-button>
         </div>
@@ -39,7 +39,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading" type="primary" @click="onSave()">
+                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSave()">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -52,8 +52,10 @@ import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { loadDeviceConf, updateDeviceByConf, updateDeviceHost } from '@/api/modules/toolbox';
 import { Toolbox } from '@/api/interface/toolbox';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
+const { hasManagePermission } = useMenuManagePermission();
 
 const confShowType = ref('base');
 const hostsConf = ref();
diff --git a/frontend/src/views/toolbox/device/index.vue b/frontend/src/views/toolbox/device/index.vue
index bf343cad0931..d5576b4134e8 100644
--- a/frontend/src/views/toolbox/device/index.vue
+++ b/frontend/src/views/toolbox/device/index.vue
@@ -14,7 +14,7 @@
                             <el-form-item label="DNS" prop="dnsItem">
                                 <el-input disabled v-model="form.dnsItem">
                                     <template #append>
-                                        <el-button @click="onChangeDNS" icon="Setting">
+                                        <el-button :disabled="!hasManagePermission" @click="onChangeDNS" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -23,7 +23,11 @@
                             <el-form-item label="Hosts" prop="hosts">
                                 <el-input disabled v-model="form.hostItem">
                                     <template #append>
-                                        <el-button @click="onChangeHost" icon="Setting">
+                                        <el-button
+                                            :disabled="!hasManagePermission"
+                                            @click="onChangeHost"
+                                            icon="Setting"
+                                        >
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -32,7 +36,11 @@
                             <el-form-item label="Swap" prop="swap">
                                 <el-input disabled v-model="form.swapItem">
                                     <template #append>
-                                        <el-button @click="onChangeSwap" icon="Setting">
+                                        <el-button
+                                            :disabled="!hasManagePermission"
+                                            @click="onChangeSwap"
+                                            icon="Setting"
+                                        >
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -41,7 +49,11 @@
                             <el-form-item :label="$t('toolbox.device.hostname')" prop="hostname">
                                 <el-input disabled v-model="form.hostname">
                                     <template #append>
-                                        <el-button @click="onChangeHostname" icon="Setting">
+                                        <el-button
+                                            :disabled="!hasManagePermission"
+                                            @click="onChangeHostname"
+                                            icon="Setting"
+                                        >
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -50,7 +62,11 @@
                             <el-form-item :label="$t('toolbox.device.passwd')" prop="passwd">
                                 <el-input disabled v-model="form.passwd" type="password">
                                     <template #append>
-                                        <el-button @click="onChangePasswd" icon="Setting">
+                                        <el-button
+                                            :disabled="!hasManagePermission"
+                                            @click="onChangePasswd"
+                                            icon="Setting"
+                                        >
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -59,7 +75,7 @@
                             <el-form-item :label="$t('toolbox.device.syncSite')" prop="ntp">
                                 <el-input disabled v-model="form.ntp">
                                     <template #append>
-                                        <el-button @click="onChangeNtp" icon="Setting">
+                                        <el-button :disabled="!hasManagePermission" @click="onChangeNtp" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -68,7 +84,11 @@
                             <el-form-item :label="$t('toolbox.device.timeZone')" prop="timeZone">
                                 <el-input disabled v-model="form.timeZone">
                                     <template #append>
-                                        <el-button @click="onChangeTimeZone" icon="Setting">
+                                        <el-button
+                                            :disabled="!hasManagePermission"
+                                            @click="onChangeTimeZone"
+                                            icon="Setting"
+                                        >
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -77,7 +97,12 @@
                             <el-form-item :label="$t('toolbox.device.localTime')" prop="localTime">
                                 <el-input disabled v-model="form.localTime">
                                     <template #append>
-                                        <el-button @click="onChangeLocalTime" icon="Refresh" width="150px">
+                                        <el-button
+                                            :disabled="!hasManagePermission"
+                                            @click="onChangeLocalTime"
+                                            icon="Refresh"
+                                            width="150px"
+                                        >
                                             {{ $t('commons.button.sync') }}
                                         </el-button>
                                     </template>
diff --git a/frontend/src/views/toolbox/device/ntp/index.vue b/frontend/src/views/toolbox/device/ntp/index.vue
index f6576e06c209..c607e39b4f58 100644
--- a/frontend/src/views/toolbox/device/ntp/index.vue
+++ b/frontend/src/views/toolbox/device/ntp/index.vue
@@ -3,13 +3,31 @@
         <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
             <el-form-item :label="$t('toolbox.device.syncSite')" prop="ntpSite" :rules="Rules.domain">
                 <el-input v-model="form.ntpSite" />
-                <el-button type="primary" link class="tagClass" @click="form.ntpSite = 'pool.ntp.org'">
+                <el-button
+                    type="primary"
+                    link
+                    class="tagClass"
+                    :disabled="!hasManagePermission"
+                    @click="form.ntpSite = 'pool.ntp.org'"
+                >
                     {{ $t('commons.table.default') }}
                 </el-button>
-                <el-button type="primary" link class="tagClass" @click="form.ntpSite = 'ntp.aliyun.com'">
+                <el-button
+                    type="primary"
+                    link
+                    class="tagClass"
+                    :disabled="!hasManagePermission"
+                    @click="form.ntpSite = 'ntp.aliyun.com'"
+                >
                     {{ $t('toolbox.device.ntpALi') }}
                 </el-button>
-                <el-button type="primary" link class="tagClass" @click="form.ntpSite = 'time.google.com'">
+                <el-button
+                    type="primary"
+                    link
+                    class="tagClass"
+                    :disabled="!hasManagePermission"
+                    @click="form.ntpSite = 'time.google.com'"
+                >
                     {{ $t('toolbox.device.ntpGoogle') }}
                 </el-button>
             </el-form-item>
@@ -17,7 +35,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading" type="primary" @click="onSyncTime(formRef)">
+                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSyncTime(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -31,8 +49,10 @@ import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { updateDevice } from '@/api/modules/toolbox';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
+const { hasManagePermission } = useMenuManagePermission();
 
 interface DialogProps {
     ntpSite: string;
diff --git a/frontend/src/views/toolbox/device/passwd/index.vue b/frontend/src/views/toolbox/device/passwd/index.vue
index 62b3c55604c4..c884a95b6920 100644
--- a/frontend/src/views/toolbox/device/passwd/index.vue
+++ b/frontend/src/views/toolbox/device/passwd/index.vue
@@ -23,7 +23,11 @@
                 <el-button :disabled="loading" @click="passwordVisible = false">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
-                <el-button :disabled="loading" type="primary" @click="submitChangePassword(formRef)">
+                <el-button
+                    :disabled="loading || !hasManagePermission"
+                    type="primary"
+                    @click="submitChangePassword(formRef)"
+                >
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -38,8 +42,10 @@ import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { reactive, ref } from 'vue';
 import { updateDevicePasswd } from '@/api/modules/toolbox';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const formRef = ref<FormInstance>();
+const { hasManagePermission } = useMenuManagePermission();
 const passRules = reactive({
     user: Rules.requiredInput,
     newPassword: [Rules.requiredInput, Rules.noSpace, { validator: checkPassword, trigger: 'blur' }],
diff --git a/frontend/src/views/toolbox/device/swap/index.vue b/frontend/src/views/toolbox/device/swap/index.vue
index c7f794e7e8f9..9150a2172ddb 100644
--- a/frontend/src/views/toolbox/device/swap/index.vue
+++ b/frontend/src/views/toolbox/device/swap/index.vue
@@ -67,7 +67,7 @@
             </el-table-column>
             <el-table-column min-width="70">
                 <template #default="scope">
-                    <el-button link type="primary" @click="onSave(scope.row)">
+                    <el-button link type="primary" :disabled="!hasManagePermission" @click="onSave(scope.row)">
                         {{ $t('commons.button.save') }}
                     </el-button>
                 </template>
@@ -91,6 +91,9 @@ import { computeSize, splitSize } from '@/utils/size';
 import { newUUID } from '@/utils/id';
 import TaskLog from '@/components/log/task/index.vue';
 import { loadBaseDir } from '@/api/modules/setting';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
+
+const { hasManagePermission } = useMenuManagePermission();
 
 const form = reactive({
     swapMemoryTotal: '',
diff --git a/frontend/src/views/toolbox/fail2ban/ban-action/index.vue b/frontend/src/views/toolbox/fail2ban/ban-action/index.vue
index 10f8ab505252..53ad767caf74 100644
--- a/frontend/src/views/toolbox/fail2ban/ban-action/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/ban-action/index.vue
@@ -33,7 +33,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSave(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -47,8 +47,10 @@ import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { updateFail2ban } from '@/api/modules/toolbox';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
+const { hasManagePermission } = useMenuManagePermission();
 
 interface DialogProps {
     banAction: string;
diff --git a/frontend/src/views/toolbox/fail2ban/ban-time/index.vue b/frontend/src/views/toolbox/fail2ban/ban-time/index.vue
index 0b57449e284e..2798d153b558 100644
--- a/frontend/src/views/toolbox/fail2ban/ban-time/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/ban-time/index.vue
@@ -18,7 +18,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSave(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -32,7 +32,9 @@ import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { updateFail2ban } from '@/api/modules/toolbox';
 import { splitTime, transTimeUnit } from '@/utils/validate';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const emit = defineEmits<{ (e: 'search'): void }>();
+const { hasManagePermission } = useMenuManagePermission();
 
 interface DialogProps {
     banTime: string;
diff --git a/frontend/src/views/toolbox/fail2ban/find-time/index.vue b/frontend/src/views/toolbox/fail2ban/find-time/index.vue
index 3cf094de7645..1eaca9112847 100644
--- a/frontend/src/views/toolbox/fail2ban/find-time/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/find-time/index.vue
@@ -18,7 +18,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSave(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -33,7 +33,9 @@ import { FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { updateFail2ban } from '@/api/modules/toolbox';
 import { splitTime, transTimeUnit } from '@/utils/validate';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const emit = defineEmits<{ (e: 'search'): void }>();
+const { hasManagePermission } = useMenuManagePermission();
 
 interface DialogProps {
     findTime: string;
diff --git a/frontend/src/views/toolbox/fail2ban/index.vue b/frontend/src/views/toolbox/fail2ban/index.vue
index 0bd38d8fd43c..818bf8b0b396 100644
--- a/frontend/src/views/toolbox/fail2ban/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/index.vue
@@ -9,14 +9,26 @@
                         <el-tag>{{ form.version }}</el-tag>
                     </div>
                     <div class="mt-0.5">
-                        <el-button v-if="form.isActive" type="primary" @click="onOperate('stop')" link>
+                        <el-button
+                            v-if="form.isActive"
+                            type="primary"
+                            :disabled="!hasManagePermission"
+                            @click="onOperate('stop')"
+                            link
+                        >
                             {{ $t('commons.button.stop') }}
                         </el-button>
-                        <el-button v-if="!form.isActive" type="primary" @click="onOperate('start')" link>
+                        <el-button
+                            v-if="!form.isActive"
+                            type="primary"
+                            :disabled="!hasManagePermission"
+                            @click="onOperate('start')"
+                            link
+                        >
                             {{ $t('commons.button.start') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button type="primary" @click="onOperate('restart')" link>
+                        <el-button type="primary" :disabled="!hasManagePermission" @click="onOperate('restart')" link>
                             {{ $t('commons.button.restart') }}
                         </el-button>
                         <el-divider direction="vertical" />
@@ -26,6 +38,7 @@
                         <el-switch
                             size="small"
                             class="ml-2"
+                            :disabled="!hasManagePermission"
                             inactive-value="disable"
                             active-value="enable"
                             @change="onOperate(autoStart)"
@@ -49,10 +62,20 @@
                     </el-alert>
                 </template>
                 <template #leftToolBar>
-                    <el-button :disabled="!form.isActive" type="primary" plain @click="onLoadList('ignore')">
+                    <el-button
+                        :disabled="!form.isActive || !hasManagePermission"
+                        type="primary"
+                        plain
+                        @click="onLoadList('ignore')"
+                    >
                         {{ $t('toolbox.fail2ban.ignoreIP') }}
                     </el-button>
-                    <el-button :disabled="!form.isActive" type="primary" plain @click="onLoadList('banned')">
+                    <el-button
+                        :disabled="!form.isActive || !hasManagePermission"
+                        type="primary"
+                        plain
+                        @click="onLoadList('banned')"
+                    >
                         {{ $t('toolbox.fail2ban.bannedIP') }}
                     </el-button>
                 </template>
@@ -68,7 +91,11 @@
                                 <el-form-item :label="$t('toolbox.fail2ban.sshPort')" prop="port">
                                     <el-input disabled v-model="form.port">
                                         <template #append>
-                                            <el-button @click="onChangePort" icon="Setting">
+                                            <el-button
+                                                :disabled="!hasManagePermission"
+                                                @click="onChangePort"
+                                                icon="Setting"
+                                            >
                                                 {{ $t('commons.button.set') }}
                                             </el-button>
                                         </template>
@@ -78,7 +105,11 @@
                                 <el-form-item :label="$t('toolbox.fail2ban.maxRetry')" prop="maxRetry">
                                     <el-input disabled v-model="form.maxRetry">
                                         <template #append>
-                                            <el-button @click="onChangeMaxRetry" icon="Setting">
+                                            <el-button
+                                                :disabled="!hasManagePermission"
+                                                @click="onChangeMaxRetry"
+                                                icon="Setting"
+                                            >
                                                 {{ $t('commons.button.set') }}
                                             </el-button>
                                         </template>
@@ -87,7 +118,11 @@
                                 <el-form-item :label="$t('toolbox.fail2ban.banTime')" prop="banTime">
                                     <el-input disabled v-model="form.banTimeItem">
                                         <template #append>
-                                            <el-button @click="onChangeBanTime" icon="Setting">
+                                            <el-button
+                                                :disabled="!hasManagePermission"
+                                                @click="onChangeBanTime"
+                                                icon="Setting"
+                                            >
                                                 {{ $t('commons.button.set') }}
                                             </el-button>
                                         </template>
@@ -97,7 +132,11 @@
                                 <el-form-item :label="$t('toolbox.fail2ban.findTime')" prop="findTime">
                                     <el-input disabled v-model="form.findTimeItem">
                                         <template #append>
-                                            <el-button @click="onChangeFindTime" icon="Setting">
+                                            <el-button
+                                                :disabled="!hasManagePermission"
+                                                @click="onChangeFindTime"
+                                                icon="Setting"
+                                            >
                                                 {{ $t('commons.button.set') }}
                                             </el-button>
                                         </template>
@@ -106,7 +145,11 @@
                                 <el-form-item :label="$t('toolbox.fail2ban.banAction')" prop="banAction">
                                     <el-input disabled v-model="form.banAction">
                                         <template #append>
-                                            <el-button @click="onChangeBanAction" icon="Setting">
+                                            <el-button
+                                                :disabled="!hasManagePermission"
+                                                @click="onChangeBanAction"
+                                                icon="Setting"
+                                            >
                                                 {{ $t('commons.button.set') }}
                                             </el-button>
                                         </template>
@@ -115,7 +158,11 @@
                                 <el-form-item :label="$t('toolbox.fail2ban.logPath')" prop="logPath">
                                     <el-input disabled v-model="form.logPath">
                                         <template #append>
-                                            <el-button @click="onChangeLogPath" icon="Setting">
+                                            <el-button
+                                                :disabled="!hasManagePermission"
+                                                @click="onChangeLogPath"
+                                                icon="Setting"
+                                            >
                                                 {{ $t('commons.button.set') }}
                                             </el-button>
                                         </template>
@@ -132,7 +179,12 @@
                             v-model="fail2banConf"
                             :heightDiff="460"
                         ></CodemirrorPro>
-                        <el-button :disabled="loading" type="primary" @click="onSaveFile" class="mt-2.5">
+                        <el-button
+                            :disabled="loading || !hasManagePermission"
+                            type="primary"
+                            @click="onSaveFile"
+                            class="mt-2.5"
+                        >
                             {{ $t('commons.button.save') }}
                         </el-button>
                     </div>
@@ -168,8 +220,10 @@ import { getFail2banConf, getFail2banBase, operateFail2ban, updateFail2banByFile
 import { ElMessageBox } from 'element-plus';
 import { transTimeUnit } from '@/utils/validate';
 import { GlobalStore } from '@/store';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 const formRef = ref();
diff --git a/frontend/src/views/toolbox/fail2ban/ips/index.vue b/frontend/src/views/toolbox/fail2ban/ips/index.vue
index 78742d4b933d..54c76823d1d3 100644
--- a/frontend/src/views/toolbox/fail2ban/ips/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/ips/index.vue
@@ -13,7 +13,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSave(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -27,7 +27,9 @@ import { FormInstance } from 'element-plus';
 import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
 import { checkCidr, checkIpV4V6 } from '@/utils/validate';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const emit = defineEmits<{ (e: 'search'): void }>();
+const { hasManagePermission } = useMenuManagePermission();
 
 const drawerVisible = ref(false);
 const loading = ref();
diff --git a/frontend/src/views/toolbox/fail2ban/log-path/index.vue b/frontend/src/views/toolbox/fail2ban/log-path/index.vue
index 4735920d989f..f448d2dcbd18 100644
--- a/frontend/src/views/toolbox/fail2ban/log-path/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/log-path/index.vue
@@ -4,7 +4,7 @@
             <el-form-item :label="$t('toolbox.fail2ban.logPath')" prop="logPath" :rules="Rules.requiredInput">
                 <el-input v-model="form.logPath">
                     <template #prepend>
-                        <el-button icon="Folder" @click="fileRef.acceptParams({})" />
+                        <el-button icon="Folder" :disabled="!hasManagePermission" @click="fileRef.acceptParams({})" />
                     </template>
                 </el-input>
                 <span class="input-help">{{ $t('toolbox.fail2ban.logPathHelper') }}</span>
@@ -13,7 +13,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSave(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -29,8 +29,10 @@ import FileList from '@/components/file-list/index.vue';
 import { updateFail2ban } from '@/api/modules/toolbox';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
+const { hasManagePermission } = useMenuManagePermission();
 
 interface DialogProps {
     logPath: string;
diff --git a/frontend/src/views/toolbox/fail2ban/max-retry/index.vue b/frontend/src/views/toolbox/fail2ban/max-retry/index.vue
index c6dae8c80176..24380ed365d3 100644
--- a/frontend/src/views/toolbox/fail2ban/max-retry/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/max-retry/index.vue
@@ -10,7 +10,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSave(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -24,8 +24,10 @@ import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { Rules, checkNumberRange } from '@/global/form-rules';
 import { updateFail2ban } from '@/api/modules/toolbox';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
+const { hasManagePermission } = useMenuManagePermission();
 
 interface DialogProps {
     maxRetry: string;
diff --git a/frontend/src/views/toolbox/fail2ban/port/index.vue b/frontend/src/views/toolbox/fail2ban/port/index.vue
index 53b54477026b..9000c4e12840 100644
--- a/frontend/src/views/toolbox/fail2ban/port/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/port/index.vue
@@ -8,7 +8,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSave(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -22,8 +22,10 @@ import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { Rules, checkNumberRange } from '@/global/form-rules';
 import { updateFail2ban } from '@/api/modules/toolbox';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
+const { hasManagePermission } = useMenuManagePermission();
 
 interface DialogProps {
     port: string;
diff --git a/frontend/src/views/toolbox/ftp/index.vue b/frontend/src/views/toolbox/ftp/index.vue
index 374e2c32f4fb..fa11f269b3e4 100644
--- a/frontend/src/views/toolbox/ftp/index.vue
+++ b/frontend/src/views/toolbox/ftp/index.vue
@@ -8,14 +8,26 @@
                         <Status class="mt-0.5" :status="form.isActive ? 'enable' : 'disable'" />
                     </div>
                     <div class="mt-0.5">
-                        <el-button v-if="form.isActive" type="primary" @click="onOperate('stop')" link>
+                        <el-button
+                            v-if="form.isActive"
+                            type="primary"
+                            :disabled="!hasManagePermission"
+                            @click="onOperate('stop')"
+                            link
+                        >
                             {{ $t('commons.button.stop') }}
                         </el-button>
-                        <el-button v-if="!form.isActive" type="primary" @click="onOperate('start')" link>
+                        <el-button
+                            v-if="!form.isActive"
+                            type="primary"
+                            :disabled="!hasManagePermission"
+                            @click="onOperate('start')"
+                            link
+                        >
                             {{ $t('commons.button.start') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button type="primary" @click="onOperate('restart')" link>
+                        <el-button type="primary" :disabled="!hasManagePermission" @click="onOperate('restart')" link>
                             {{ $t('commons.button.restart') }}
                         </el-button>
                     </div>
@@ -35,13 +47,13 @@
                     </el-alert>
                 </template>
                 <template #leftToolBar>
-                    <el-button type="primary" @click="onOpenDialog('add')">
+                    <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('add')">
                         {{ $t('commons.button.add') }}
                     </el-button>
-                    <el-button @click="onSync()">
+                    <el-button :disabled="!hasManagePermission" @click="onSync()">
                         {{ $t('commons.button.sync') }}
                     </el-button>
-                    <el-button plain :disabled="selects.length === 0" @click="onDelete(null)">
+                    <el-button plain :disabled="selects.length === 0 || !hasManagePermission" @click="onDelete(null)">
                         {{ $t('commons.button.delete') }}
                     </el-button>
                 </template>
@@ -125,6 +137,7 @@
                             <template #default="{ row }">
                                 <fu-input-rw-switch
                                     v-model="row.description"
+                                    :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
                                     @enter="onChange(row)"
                                     @blur="onChange(row)"
                                 />
@@ -164,7 +177,9 @@ import { Toolbox } from '@/api/interface/toolbox';
 import { GlobalStore } from '@/store';
 import { routerToFileWithPath } from '@/utils/router';
 import { getRandomStr } from '@/utils/id';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref();
 const selects = ref<any>([]);
@@ -336,7 +351,7 @@ const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
         disabled: (row: Toolbox.FtpInfo) => {
-            return row.status === 'deleted';
+            return row.status === 'deleted' || !hasManagePermission.value;
         },
         click: (row: Toolbox.FtpInfo) => {
             onOpenDialog('edit', row);
@@ -353,6 +368,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => !hasManagePermission.value,
         click: (row: Toolbox.FtpInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/toolbox/ftp/operate/index.vue b/frontend/src/views/toolbox/ftp/operate/index.vue
index abe51b15bce6..c6b41ef07caf 100644
--- a/frontend/src/views/toolbox/ftp/operate/index.vue
+++ b/frontend/src/views/toolbox/ftp/operate/index.vue
@@ -13,14 +13,20 @@
             <el-form-item :label="$t('commons.login.password')" prop="password">
                 <el-input type="password" clearable v-model="dialogData.rowData!.password" show-password>
                     <template #append>
-                        <el-button @click="random">{{ $t('commons.button.random') }}</el-button>
+                        <el-button :disabled="!hasManagePermission" @click="random">
+                            {{ $t('commons.button.random') }}
+                        </el-button>
                     </template>
                 </el-input>
             </el-form-item>
             <el-form-item :label="$t('file.root')" prop="path">
                 <el-input v-model="dialogData.rowData!.path">
                     <template #prepend>
-                        <el-button icon="Folder" @click="fileRef.acceptParams({ dir: true })" />
+                        <el-button
+                            icon="Folder"
+                            :disabled="!hasManagePermission"
+                            @click="fileRef.acceptParams({ dir: true })"
+                        />
                     </template>
                 </el-input>
                 <span class="input-help">{{ $t('toolbox.ftp.dirHelper') }}</span>
@@ -32,7 +38,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
+                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSubmit(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -52,12 +58,14 @@ import { Toolbox } from '@/api/interface/toolbox';
 import { createFtp, updateFtp } from '@/api/modules/toolbox';
 import { getRandomStr } from '@/utils/id';
 import { isSensitiveLinuxPath } from '@/utils/file';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 interface DialogProps {
     title: string;
     rowData?: Toolbox.FtpInfo;
     getTableList?: () => Promise<any>;
 }
 const loading = ref();
+const { hasManagePermission } = useMenuManagePermission();
 const title = ref<string>('');
 const drawerVisible = ref(false);
 const fileRef = ref();
diff --git a/frontend/src/views/toolbox/index.vue b/frontend/src/views/toolbox/index.vue
index d3d3fd210aba..72dcb91b6176 100644
--- a/frontend/src/views/toolbox/index.vue
+++ b/frontend/src/views/toolbox/index.vue
@@ -3,11 +3,11 @@
         <RouterButton :buttons="buttons">
             <template #route-button>
                 <div class="router-button">
-                    <el-button link type="primary" @click="onRestart('1panel')">
+                    <el-button link type="primary" :disabled="!hasManagePermission" @click="onRestart('1panel')">
                         {{ $t('home.restart_1panel') }}
                     </el-button>
                     <el-divider direction="vertical" />
-                    <el-button link type="primary" @click="onRestart('system')">
+                    <el-button link type="primary" :disabled="!hasManagePermission" @click="onRestart('system')">
                         {{ $t('home.restart_system') }}
                     </el-button>
                 </div>
@@ -28,10 +28,12 @@ import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import { GlobalStore } from '@/store';
 import { MsgSuccess } from '@/utils/message';
 import { systemRestart } from '@/api/modules/dashboard';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const restartType = ref();
 const confirmDialogRef = ref();
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 
 const onRestart = (type: string) => {
     let header = i18n.global.t('home.restart_' + type);
diff --git a/frontend/src/views/toolbox/supervisor/config/basic/index.vue b/frontend/src/views/toolbox/supervisor/config/basic/index.vue
index 8f2f056dc4c6..c0c55cc3c77e 100644
--- a/frontend/src/views/toolbox/supervisor/config/basic/index.vue
+++ b/frontend/src/views/toolbox/supervisor/config/basic/index.vue
@@ -10,7 +10,7 @@
                     <span class="input-help">{{ $t('tool.supervisor.serviceNameHelper') }}</span>
                 </el-form-item>
                 <el-form-item>
-                    <el-button type="primary" @click="submit(initForm)" :disabled="loading">
+                    <el-button type="primary" @click="submit(initForm)" :disabled="loading || !hasManagePermission">
                         {{ $t('commons.button.confirm') }}
                     </el-button>
                 </el-form-item>
@@ -27,7 +27,9 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { onMounted, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const loading = ref(false);
+const { hasManagePermission } = useMenuManagePermission();
 const initForm = ref<FormInstance>();
 const rules = ref({
     configPath: [Rules.requiredInput],
diff --git a/frontend/src/views/toolbox/supervisor/config/source/index.vue b/frontend/src/views/toolbox/supervisor/config/source/index.vue
index 8fd9b6da8487..dcfb585dee11 100644
--- a/frontend/src/views/toolbox/supervisor/config/source/index.vue
+++ b/frontend/src/views/toolbox/supervisor/config/source/index.vue
@@ -2,7 +2,7 @@
     <div v-loading="loading">
         <CodemirrorPro class="mt-5" v-model="content" :heightDiff="375"></CodemirrorPro>
         <div class="mt-5">
-            <el-button type="primary" @click="submit()" :disabled="loading">
+            <el-button type="primary" @click="submit()" :disabled="loading || !hasManagePermission">
                 {{ $t('commons.button.save') }}
             </el-button>
         </div>
@@ -13,10 +13,12 @@ import { onMounted, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { getSupervisorConfig, updateSupervisorConfig } from '@/api/modules/host-tool';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 let data = ref();
 let content = ref('');
 let loading = ref(false);
+const { hasManagePermission } = useMenuManagePermission();
 
 const submit = () => {
     loading.value = true;
diff --git a/frontend/src/views/toolbox/supervisor/create/index.vue b/frontend/src/views/toolbox/supervisor/create/index.vue
index 5b80770bfb86..3f143f84c5ee 100644
--- a/frontend/src/views/toolbox/supervisor/create/index.vue
+++ b/frontend/src/views/toolbox/supervisor/create/index.vue
@@ -22,7 +22,11 @@
             <el-form-item :label="$t('tool.supervisor.dir')" prop="dir">
                 <el-input v-model.trim="process.dir">
                     <template #prepend>
-                        <el-button icon="Folder" @click="fileRef.acceptParams({ dir: true })" />
+                        <el-button
+                            icon="Folder"
+                            :disabled="!hasManagePermission"
+                            @click="fileRef.acceptParams({ dir: true })"
+                        />
                     </template>
                 </el-input>
             </el-form-item>
@@ -47,7 +51,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="submit(processForm)" :disabled="loading">
+                <el-button type="primary" @click="submit(processForm)" :disabled="loading || !hasManagePermission">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -65,8 +69,10 @@ import { FormInstance } from 'element-plus';
 import { ref } from 'vue';
 import { MsgSuccess } from '@/utils/message';
 import { HostTool } from '@/api/interface/host-tool';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const open = ref(false);
+const { hasManagePermission } = useMenuManagePermission();
 const loading = ref(false);
 const fileRef = ref();
 const processForm = ref<FormInstance>();
diff --git a/frontend/src/views/toolbox/supervisor/file/index.vue b/frontend/src/views/toolbox/supervisor/file/index.vue
index 9e9f1e7bd700..a351beb218e2 100644
--- a/frontend/src/views/toolbox/supervisor/file/index.vue
+++ b/frontend/src/views/toolbox/supervisor/file/index.vue
@@ -15,7 +15,7 @@
         <template #footer>
             <span>
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" :disabled="loading" @click="submit()">
+                <el-button type="primary" :disabled="loading || !hasManagePermission" @click="submit()">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -28,7 +28,9 @@ import { getSupervisorProcessFile, operateSupervisorProcessFile } from '@/api/mo
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { GlobalStore } from '@/store';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 const content = ref('');
diff --git a/frontend/src/views/toolbox/supervisor/index.vue b/frontend/src/views/toolbox/supervisor/index.vue
index fd28d612f5d5..e9bac8b893c2 100644
--- a/frontend/src/views/toolbox/supervisor/index.vue
+++ b/frontend/src/views/toolbox/supervisor/index.vue
@@ -23,7 +23,7 @@
                 />
             </template>
             <template v-if="showTable" #leftToolBar>
-                <el-button type="primary" @click="openCreate" :disabled="showStopped">
+                <el-button type="primary" @click="openCreate" :disabled="showStopped || !hasManagePermission">
                     {{ $t('commons.button.create') }}
                 </el-button>
             </template>
@@ -76,14 +76,21 @@
                                 <Status
                                     v-if="checkStatus(row.status) === 'RUNNING'"
                                     status="running"
+                                    :disabled="!hasManagePermission"
                                     @click="operate('stop', row.name)"
                                 />
                                 <Status
                                     v-else-if="checkStatus(row.status) === 'WARNING'"
                                     status="unhealthy"
+                                    :disabled="!hasManagePermission"
                                     @click="operate('restart', row.name)"
                                 />
-                                <Status v-else status="stopped" @click="operate('start', row.name)" />
+                                <Status
+                                    v-else
+                                    status="stopped"
+                                    :disabled="!hasManagePermission"
+                                    @click="operate('start', row.name)"
+                                />
                             </div>
                             <div v-if="!row.hasLoad">
                                 <el-button link loading></el-button>
@@ -182,6 +189,7 @@ import { useGlobalStore } from '@/composables/useGlobalStore';
 
 const { isMobile } = useGlobalStore();
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 const setSuperVisor = ref(false);
@@ -341,12 +349,14 @@ const edit = (row: HostTool.SupervisorProcess) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: !hasManagePermission.value,
         click: function (row: HostTool.SupervisorProcess) {
             edit(row);
         },
     },
     {
         label: i18n.global.t('website.sourceFile'),
+        disabled: !hasManagePermission.value,
         click: function (row: HostTool.SupervisorProcess) {
             getFile(row.name, 'config');
         },
@@ -359,12 +369,14 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.restart'),
+        disabled: !hasManagePermission.value,
         click: function (row: HostTool.SupervisorProcess) {
             operate('restart', row.name);
         },
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: !hasManagePermission.value,
         click: function (row: HostTool.SupervisorProcess) {
             operate('delete', row.name);
         },
diff --git a/frontend/src/views/toolbox/supervisor/log/index.vue b/frontend/src/views/toolbox/supervisor/log/index.vue
index f360cb5fbe94..d1d99dd16fdd 100644
--- a/frontend/src/views/toolbox/supervisor/log/index.vue
+++ b/frontend/src/views/toolbox/supervisor/log/index.vue
@@ -22,7 +22,7 @@
                 :height-diff="300"
             >
                 <template #button>
-                    <el-button @click="cleanLog" icon="Delete" :disabled="hasContent === false">
+                    <el-button @click="cleanLog" icon="Delete" :disabled="hasContent === false || !hasManagePermission">
                         {{ $t('commons.button.clean') }}
                     </el-button>
                 </template>
@@ -45,7 +45,9 @@ import { GlobalStore } from '@/store';
 import { operateSupervisorProcessFile } from '@/api/modules/host-tool';
 import i18n from '@/lang';
 import { TabsPaneContext } from 'element-plus';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 
 const logConfig = reactive({
     type: 'supervisor',
diff --git a/frontend/src/views/toolbox/supervisor/status/index.vue b/frontend/src/views/toolbox/supervisor/status/index.vue
index 2a7ae7a22476..f35fa2846c6f 100644
--- a/frontend/src/views/toolbox/supervisor/status/index.vue
+++ b/frontend/src/views/toolbox/supervisor/status/index.vue
@@ -9,23 +9,35 @@
                         <el-tag>{{ $t('app.version') }}: {{ $t('commons.colon') }}{{ data.version }}</el-tag>
                     </div>
                     <div class="mt-0.5" v-if="!data.init">
-                        <el-button type="primary" v-if="data.status != 'running'" link @click="onOperate('start')">
+                        <el-button
+                            type="primary"
+                            v-if="data.status != 'running'"
+                            link
+                            :disabled="!hasManagePermission"
+                            @click="onOperate('start')"
+                        >
                             {{ $t('commons.operate.start') }}
                         </el-button>
-                        <el-button type="primary" v-if="data.status == 'running'" link @click="onOperate('stop')">
+                        <el-button
+                            type="primary"
+                            v-if="data.status == 'running'"
+                            link
+                            :disabled="!hasManagePermission"
+                            @click="onOperate('stop')"
+                        >
                             {{ $t('commons.operate.stop') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button type="primary" link @click="onOperate('restart')">
+                        <el-button type="primary" link :disabled="!hasManagePermission" @click="onOperate('restart')">
                             {{ $t('commons.button.restart') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button type="primary" link @click="setting">
+                        <el-button type="primary" link :disabled="!hasManagePermission" @click="setting">
                             {{ $t('commons.button.set') }}
                         </el-button>
                     </div>
                     <div class="mt-0.5" v-else>
-                        <el-button type="primary" link @click="init">
+                        <el-button type="primary" link :disabled="!hasManagePermission" @click="init">
                             {{ $t('commons.button.init') }}
                         </el-button>
                     </div>
@@ -89,8 +101,10 @@ import { HostTool } from '@/api/interface/host-tool';
 import InitPage from './init/index.vue';
 import { GlobalStore } from '@/store';
 import { routerToNameWithQuery } from '@/utils/router';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const globalStore = GlobalStore();
+const { hasManagePermission } = useMenuManagePermission();
 
 let operateReq = reactive({
     installId: 0,
diff --git a/frontend/src/views/toolbox/supervisor/status/init/index.vue b/frontend/src/views/toolbox/supervisor/status/init/index.vue
index 55c40603fe95..8b3ec6adcc97 100644
--- a/frontend/src/views/toolbox/supervisor/status/init/index.vue
+++ b/frontend/src/views/toolbox/supervisor/status/init/index.vue
@@ -28,7 +28,7 @@
                 <el-button @click="handleClose()" :disabled="loading">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
-                <el-button type="primary" @click="openSubmit(initForm)" :disabled="loading">
+                <el-button type="primary" @click="openSubmit(initForm)" :disabled="loading || !hasManagePermission">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -44,8 +44,10 @@ import i18n from '@/lang';
 import { FormInstance } from 'element-plus';
 import { ref } from 'vue';
 import { MsgSuccess } from '@/utils/message';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const open = ref(false);
+const { hasManagePermission } = useMenuManagePermission();
 const loading = ref(false);
 const initForm = ref<FormInstance>();
 const rules = ref({
diff --git a/frontend/src/views/website/runtime/dotnet/index.vue b/frontend/src/views/website/runtime/dotnet/index.vue
index 115c0b225734..9d6b181d4b8d 100644
--- a/frontend/src/views/website/runtime/dotnet/index.vue
+++ b/frontend/src/views/website/runtime/dotnet/index.vue
@@ -4,7 +4,7 @@
         <DockerStatus v-model:isActive="isActive" v-model:isExist="isExist" />
         <LayoutContent v-loading="loading" v-if="isExist" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" @click="openCreate">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
                     {{ $t('commons.button.create') }}
                 </el-button>
             </template>
@@ -29,7 +29,12 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.runDir')" prop="codeDir" min-width="120px">
                         <template #default="{ row }">
-                            <el-button type="primary" link @click="routerToFileWithPath(row.codeDir)">
+                            <el-button
+                                :disabled="!hasFilePermission"
+                                type="primary"
+                                link
+                                @click="routerToFileWithPath(row.codeDir)"
+                            >
                                 <el-icon>
                                     <FolderOpened />
                                 </el-icon>
@@ -57,12 +62,16 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.remark')" prop="remark" min-width="150px">
                         <template #default="{ row }">
-                            <fu-read-write-switch>
+                            <fu-read-write-switch :write-trigger="hasManagePermission ? 'onClick' : 'disabled'">
                                 <template #read>
                                     <MsgInfo :info="row.remark" :width="'150'" />
                                 </template>
                                 <template #default="{ read }">
-                                    <el-input v-model="row.remark" @blur="updateRuntimeRemark(row, read)" />
+                                    <el-input
+                                        v-model="row.remark"
+                                        :disabled="!hasManagePermission"
+                                        @blur="updateRuntimeRemark(row, read)"
+                                    />
                                 </template>
                             </fu-read-write-switch>
                         </template>
diff --git a/frontend/src/views/website/runtime/go/index.vue b/frontend/src/views/website/runtime/go/index.vue
index 42950ca2ff00..6c63fce96e7c 100644
--- a/frontend/src/views/website/runtime/go/index.vue
+++ b/frontend/src/views/website/runtime/go/index.vue
@@ -4,7 +4,7 @@
         <DockerStatus v-model:isActive="isActive" v-model:isExist="isExist" />
         <LayoutContent v-loading="loading" v-if="isExist" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" @click="openCreate">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
                     {{ $t('commons.button.create') }}
                 </el-button>
             </template>
@@ -57,12 +57,16 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.remark')" prop="remark" min-width="150px">
                         <template #default="{ row }">
-                            <fu-read-write-switch>
+                            <fu-read-write-switch :write-trigger="hasManagePermission ? 'onClick' : 'disabled'">
                                 <template #read>
                                     <MsgInfo :info="row.remark" :width="'150'" />
                                 </template>
                                 <template #default="{ read }">
-                                    <el-input v-model="row.remark" @blur="updateRuntimeRemark(row, read)" />
+                                    <el-input
+                                        v-model="row.remark"
+                                        :disabled="!hasManagePermission"
+                                        @blur="updateRuntimeRemark(row, read)"
+                                    />
                                 </template>
                             </fu-read-write-switch>
                         </template>
@@ -97,6 +101,7 @@
 
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Runtime } from '@/api/interface/runtime';
 import { RuntimeDeleteCheck, SearchRuntimes, SyncRuntime } from '@/api/modules/runtime';
 import { dateFormat } from '@/utils/date';
diff --git a/frontend/src/views/website/runtime/java/index.vue b/frontend/src/views/website/runtime/java/index.vue
index c5b06dcc4dcb..228c7bd9615b 100644
--- a/frontend/src/views/website/runtime/java/index.vue
+++ b/frontend/src/views/website/runtime/java/index.vue
@@ -4,7 +4,7 @@
         <DockerStatus v-model:isActive="isActive" v-model:isExist="isExist" />
         <LayoutContent v-loading="loading" v-if="isExist" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" @click="openCreate">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
                     {{ $t('commons.button.create') }}
                 </el-button>
             </template>
@@ -29,7 +29,12 @@
                     </el-table-column>
                     <el-table-column :label="$t('runtime.codeDir')" prop="codeDir" min-width="120px">
                         <template #default="{ row }">
-                            <el-button type="primary" link @click="routerToFileWithPath(row.codeDir)">
+                            <el-button
+                                :disabled="!hasFilePermission"
+                                type="primary"
+                                link
+                                @click="routerToFileWithPath(row.codeDir)"
+                            >
                                 <el-icon>
                                     <FolderOpened />
                                 </el-icon>
@@ -57,12 +62,16 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.remark')" prop="remark" min-width="150px">
                         <template #default="{ row }">
-                            <fu-read-write-switch>
+                            <fu-read-write-switch :write-trigger="hasManagePermission ? 'onClick' : 'disabled'">
                                 <template #read>
                                     <MsgInfo :info="row.remark" :width="'150'" />
                                 </template>
                                 <template #default="{ read }">
-                                    <el-input v-model="row.remark" @blur="updateRuntimeRemark(row, read)" />
+                                    <el-input
+                                        v-model="row.remark"
+                                        :disabled="!hasManagePermission"
+                                        @blur="updateRuntimeRemark(row, read)"
+                                    />
                                 </template>
                             </fu-read-write-switch>
                         </template>
@@ -97,6 +106,7 @@
 
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Runtime } from '@/api/interface/runtime';
 import { RuntimeDeleteCheck, SearchRuntimes, SyncRuntime } from '@/api/modules/runtime';
 import { dateFormat } from '@/utils/date';
diff --git a/frontend/src/views/website/runtime/node/index.vue b/frontend/src/views/website/runtime/node/index.vue
index a4e4f321a261..cc3b911c3d4f 100644
--- a/frontend/src/views/website/runtime/node/index.vue
+++ b/frontend/src/views/website/runtime/node/index.vue
@@ -4,7 +4,7 @@
         <DockerStatus v-model:isActive="isActive" v-model:isExist="isExist" />
         <LayoutContent v-loading="loading" v-if="isExist" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" @click="openCreate">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
                     {{ $t('commons.button.create') }}
                 </el-button>
             </template>
@@ -29,7 +29,12 @@
                     </el-table-column>
                     <el-table-column :label="$t('runtime.codeDir')" prop="codeDir" min-width="120px">
                         <template #default="{ row }">
-                            <el-button type="primary" link @click="routerToFileWithPath(row.codeDir)">
+                            <el-button
+                                :disabled="!hasFilePermission"
+                                type="primary"
+                                link
+                                @click="routerToFileWithPath(row.codeDir)"
+                            >
                                 <el-icon>
                                     <FolderOpened />
                                 </el-icon>
@@ -57,12 +62,16 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.remark')" prop="remark" min-width="150px">
                         <template #default="{ row }">
-                            <fu-read-write-switch>
+                            <fu-read-write-switch :write-trigger="hasManagePermission ? 'onClick' : 'disabled'">
                                 <template #read>
                                     <MsgInfo :info="row.remark" :width="'150'" />
                                 </template>
                                 <template #default="{ read }">
-                                    <el-input v-model="row.remark" @blur="updateRuntimeRemark(row, read)" />
+                                    <el-input
+                                        v-model="row.remark"
+                                        :disabled="!hasManagePermission"
+                                        @blur="updateRuntimeRemark(row, read)"
+                                    />
                                 </template>
                             </fu-read-write-switch>
                         </template>
@@ -98,6 +107,7 @@
 
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Runtime } from '@/api/interface/runtime';
 import { RuntimeDeleteCheck, SearchRuntimes, SyncRuntime } from '@/api/modules/runtime';
 import { dateFormat } from '@/utils/date';
diff --git a/frontend/src/views/website/runtime/php/extension-template/index.vue b/frontend/src/views/website/runtime/php/extension-template/index.vue
index 841e45b979f9..e0e5bb6faffd 100644
--- a/frontend/src/views/website/runtime/php/extension-template/index.vue
+++ b/frontend/src/views/website/runtime/php/extension-template/index.vue
@@ -3,7 +3,9 @@
         <template #content>
             <ComplexTable :data="data" @search="search()" :pagination-config="paginationConfig">
                 <template #toolbar>
-                    <el-button type="primary" @click="openCreate">{{ $t('commons.button.create') }}</el-button>
+                    <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
+                        {{ $t('commons.button.create') }}
+                    </el-button>
                 </template>
                 <el-table-column :label="$t('commons.table.name')" width="150px" prop="name"></el-table-column>
                 <el-table-column :label="$t('php.extension')" fix prop="extensions"></el-table-column>
@@ -24,9 +26,11 @@
 <script lang="ts" setup>
 import { DeletePHPExtensions, SearchPHPExtensions } from '@/api/modules/runtime';
 import { reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import Create from './operate/index.vue';
 import { Runtime } from '@/api/interface/runtime';
 import i18n from '@/lang';
+const { hasManagePermission } = useMenuManagePermission();
 
 const open = ref(false);
 const data = ref();
@@ -43,6 +47,7 @@ const paginationConfig = reactive({
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value,
         click: function (row: Runtime.PHPExtensions) {
             openUpdate(row);
         },
diff --git a/frontend/src/views/website/runtime/php/index.vue b/frontend/src/views/website/runtime/php/index.vue
index 23d385d81362..51f04211dcf4 100644
--- a/frontend/src/views/website/runtime/php/index.vue
+++ b/frontend/src/views/website/runtime/php/index.vue
@@ -4,7 +4,7 @@
         <DockerStatus v-model:isActive="isActive" v-model:isExist="isExist" />
         <LayoutContent v-loading="loading" v-if="isExist" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" @click="openCreate">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
                     {{ $t('commons.button.create') }}
                 </el-button>
 
@@ -45,7 +45,12 @@
                     </el-table-column>
                     <el-table-column :label="$t('home.dir')" prop="codeDir" width="100px">
                         <template #default="{ row }">
-                            <el-button type="primary" link @click="routerToFileWithPath(row.path)">
+                            <el-button
+                                :disabled="!hasFilePermission"
+                                type="primary"
+                                link
+                                @click="routerToFileWithPath(row.path)"
+                            >
                                 <el-icon>
                                     <FolderOpened />
                                 </el-icon>
@@ -85,12 +90,16 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.remark')" prop="remark" min-width="150px">
                         <template #default="{ row }">
-                            <fu-read-write-switch>
+                            <fu-read-write-switch :write-trigger="hasManagePermission ? 'onClick' : 'disabled'">
                                 <template #read>
                                     <MsgInfo :info="row.remark" :width="'150'" />
                                 </template>
                                 <template #default="{ read }">
-                                    <el-input v-model="row.remark" @blur="updateRuntimeRemark(row, read)" />
+                                    <el-input
+                                        v-model="row.remark"
+                                        :disabled="!hasManagePermission"
+                                        @blur="updateRuntimeRemark(row, read)"
+                                    />
                                 </template>
                             </fu-read-write-switch>
                         </template>
@@ -131,6 +140,7 @@
 
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Runtime } from '@/api/interface/runtime';
 import { DeleteRuntime, RuntimeDeleteCheck, SearchRuntimes } from '@/api/modules/runtime';
 import { dateFormat } from '@/utils/date';
diff --git a/frontend/src/views/website/runtime/php/supervisor/index.vue b/frontend/src/views/website/runtime/php/supervisor/index.vue
index 88e56d7cade8..4160ab0fb5f7 100644
--- a/frontend/src/views/website/runtime/php/supervisor/index.vue
+++ b/frontend/src/views/website/runtime/php/supervisor/index.vue
@@ -3,7 +3,7 @@
         <template #content>
             <ComplexTable :data="data" v-loading="loading" v-model:selects="selects">
                 <template #toolbar>
-                    <el-button type="primary" @click="openCreate">
+                    <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
                         {{ $t('commons.button.create') }}
                     </el-button>
                     <el-button
@@ -127,7 +127,6 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-
 import Create from './create/index.vue';
 import File from './file/index.vue';
 import { GetSupervisorProcess, operateSupervisorProcess } from '@/api/modules/runtime';
diff --git a/frontend/src/views/website/runtime/python/index.vue b/frontend/src/views/website/runtime/python/index.vue
index ed0fa45438c0..4e7db4f3d165 100644
--- a/frontend/src/views/website/runtime/python/index.vue
+++ b/frontend/src/views/website/runtime/python/index.vue
@@ -4,7 +4,7 @@
         <DockerStatus v-model:isActive="isActive" v-model:isExist="isExist" />
         <LayoutContent v-loading="loading" v-if="isExist" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" @click="openCreate">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
                     {{ $t('commons.button.create') }}
                 </el-button>
             </template>
@@ -29,7 +29,12 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.runDir')" prop="codeDir" min-width="120px">
                         <template #default="{ row }">
-                            <el-button type="primary" link @click="routerToFileWithPath(row.codeDir)">
+                            <el-button
+                                :disabled="!hasFilePermission"
+                                type="primary"
+                                link
+                                @click="routerToFileWithPath(row.codeDir)"
+                            >
                                 <el-icon>
                                     <FolderOpened />
                                 </el-icon>
@@ -57,12 +62,16 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.remark')" prop="remark" min-width="150px">
                         <template #default="{ row }">
-                            <fu-read-write-switch>
+                            <fu-read-write-switch :write-trigger="hasManagePermission ? 'onClick' : 'disabled'">
                                 <template #read>
                                     <MsgInfo :info="row.remark" :width="'150'" />
                                 </template>
                                 <template #default="{ read }">
-                                    <el-input v-model="row.remark" @blur="updateRuntimeRemark(row, read)" />
+                                    <el-input
+                                        v-model="row.remark"
+                                        :disabled="!hasManagePermission"
+                                        @blur="updateRuntimeRemark(row, read)"
+                                    />
                                 </template>
                             </fu-read-write-switch>
                         </template>
@@ -97,6 +106,7 @@
 
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Runtime } from '@/api/interface/runtime';
 import { RuntimeDeleteCheck, SearchRuntimes, SyncRuntime } from '@/api/modules/runtime';
 import { dateFormat } from '@/utils/date';
diff --git a/frontend/src/views/website/ssl/acme-account/index.vue b/frontend/src/views/website/ssl/acme-account/index.vue
index 360b7e42f424..8388466dfbff 100644
--- a/frontend/src/views/website/ssl/acme-account/index.vue
+++ b/frontend/src/views/website/ssl/acme-account/index.vue
@@ -6,7 +6,9 @@
             </div>
             <ComplexTable :data="data" :pagination-config="paginationConfig" v-loading="loading">
                 <template #toolbar>
-                    <el-button type="primary" @click="openCreate">{{ $t('commons.button.create') }}</el-button>
+                    <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
+                        {{ $t('commons.button.create') }}
+                    </el-button>
                 </template>
                 <el-table-column
                     :label="$t('website.email')"
diff --git a/frontend/src/views/website/ssl/ca/index.vue b/frontend/src/views/website/ssl/ca/index.vue
index 18856ebcd88b..90e0f8cddcd6 100644
--- a/frontend/src/views/website/ssl/ca/index.vue
+++ b/frontend/src/views/website/ssl/ca/index.vue
@@ -3,7 +3,9 @@
         <template #content>
             <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()" v-loading="loading">
                 <template #toolbar>
-                    <el-button type="primary" @click="openCreate">{{ $t('commons.button.create') }}</el-button>
+                    <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
+                        {{ $t('commons.button.create') }}
+                    </el-button>
                 </template>
                 <el-table-column :label="$t('commons.table.name')" show-overflow-tooltip prop="name"></el-table-column>
                 <el-table-column :label="$t('website.keyType')" show-overflow-tooltip prop="keyType">
@@ -38,11 +40,13 @@ import { Website } from '@/api/interface/website';
 import { deleteCA, searchCAs, downloadCAFile } from '@/api/modules/website';
 import i18n from '@/lang';
 import { reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import Create from './create/index.vue';
 import Detail from './detail/index.vue';
 import { getKeyName } from '@/utils/ssl';
 import { dateFormat } from '@/utils/date';
 import Obtain from './obtain/index.vue';
+const { hasManagePermission } = useMenuManagePermission();
 
 const open = ref(false);
 const loading = ref(false);
diff --git a/frontend/src/views/website/ssl/dns-account/index.vue b/frontend/src/views/website/ssl/dns-account/index.vue
index 732dde5a9ef8..378f7dda3f41 100644
--- a/frontend/src/views/website/ssl/dns-account/index.vue
+++ b/frontend/src/views/website/ssl/dns-account/index.vue
@@ -3,7 +3,7 @@
         <template #content>
             <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()">
                 <template #toolbar>
-                    <el-button type="primary" @click="openCreate">
+                    <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
                         {{ $t('commons.button.create') }}
                     </el-button>
                 </template>
@@ -37,8 +37,10 @@ import Create from './create/index.vue';
 import { Website } from '@/api/interface/website';
 import { deleteDnsAccount, searchDnsAccount } from '@/api/modules/website';
 import { onMounted, reactive, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { getDNSName } from '@/utils/ssl';
+const { hasManagePermission } = useMenuManagePermission();
 const paginationConfig = reactive({
     cacheSizeKey: 'dns-account-page-size',
     currentPage: 1,
@@ -53,6 +55,7 @@ const opRef = ref();
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value,
         click: function (row: Website.DnsAccount) {
             openEdit(row);
         },
diff --git a/frontend/src/views/website/ssl/index.vue b/frontend/src/views/website/ssl/index.vue
index 753cf04e07cf..a5c6b54fbb44 100644
--- a/frontend/src/views/website/ssl/index.vue
+++ b/frontend/src/views/website/ssl/index.vue
@@ -3,22 +3,22 @@
         <RouterButton :buttons="routerButton" />
         <LayoutContent :title="$t('website.ssl', 2)">
             <template #leftToolBar>
-                <el-button type="primary" @click="openSSL()">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="openSSL()">
                     {{ $t('ssl.create') }}
                 </el-button>
-                <el-button type="primary" @click="openUpload()">
+                <el-button type="primary" :disabled="!hasManagePermission" @click="openUpload()">
                     {{ $t('ssl.upload') }}
                 </el-button>
-                <el-button type="primary" plain @click="openCA()">
+                <el-button type="primary" plain :disabled="!hasManagePermission" @click="openCA()">
                     {{ $t('ssl.selfSigned') }}
                 </el-button>
-                <el-button type="primary" plain @click="openAcmeAccount()">
+                <el-button type="primary" plain :disabled="!hasManagePermission" @click="openAcmeAccount()">
                     {{ $t('website.acmeAccountManage') }}
                 </el-button>
-                <el-button type="primary" plain @click="openDnsAccount()">
+                <el-button type="primary" plain :disabled="!hasManagePermission" @click="openDnsAccount()">
                     {{ $t('website.dnsAccountManage') }}
                 </el-button>
-                <el-button plain @click="deletessl(null)" :disabled="selects.length === 0">
+                <el-button plain @click="deletessl(null)" :disabled="selects.length === 0 || !hasManagePermission">
                     {{ $t('commons.button.delete') }}
                 </el-button>
             </template>
@@ -117,12 +117,16 @@
                     ></el-table-column>
                     <el-table-column :label="$t('website.remark')" prop="description" width="100px">
                         <template #default="{ row }">
-                            <fu-read-write-switch>
+                            <fu-read-write-switch :write-trigger="hasManagePermission ? 'onClick' : 'disabled'">
                                 <template #read>
                                     <MsgInfo :info="row.description" width="200" />
                                 </template>
                                 <template #default="{ read }">
-                                    <el-input v-model="row.description" @blur="updateDesc(row, read)" />
+                                    <el-input
+                                        v-model="row.description"
+                                        :disabled="!hasManagePermission"
+                                        @blur="updateDesc(row, read)"
+                                    />
                                 </template>
                             </fu-read-write-switch>
                         </template>
@@ -131,6 +135,7 @@
                         <template #default="{ row }">
                             <el-switch
                                 :disabled="
+                                    !hasManagePermission ||
                                     row.provider === 'dnsManual' ||
                                     row.provider === 'manual' ||
                                     row.provider === 'fromMaster'
@@ -239,7 +244,12 @@ const buttons = [
     {
         label: i18n.global.t('ssl.apply'),
         disabled: function (row: Website.SSLDTO) {
-            return row.status === 'applying' || row.provider === 'manual' || row.provider === 'fromMaster';
+            return (
+                row.status === 'applying' ||
+                row.provider === 'manual' ||
+                row.provider === 'fromMaster' ||
+                !hasManagePermission.value
+            );
         },
         click: function (row: Website.SSLDTO) {
             if (row.provider === 'dnsManual') {
@@ -254,6 +264,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.update'),
+        disabled: () => !hasManagePermission.value,
         click: function (row: Website.SSLDTO) {
             sslUploadRef.value.acceptParams(row);
         },
@@ -264,7 +275,7 @@ const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
         disabled: function (row: Website.SSLDTO) {
-            return row.provider === 'fromMaster';
+            return row.provider === 'fromMaster' || !hasManagePermission.value;
         },
         click: function (row: Website.SSLDTO) {
             onEdit(row);
@@ -281,6 +292,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => !hasManagePermission.value,
         click: function (row: Website.SSLDTO) {
             deletessl(row);
         },
diff --git a/frontend/src/views/website/website/config/basic/auth-basic/index.vue b/frontend/src/views/website/website/config/basic/auth-basic/index.vue
index e34a92b5e133..8d5c5dbbf8a5 100644
--- a/frontend/src/views/website/website/config/basic/auth-basic/index.vue
+++ b/frontend/src/views/website/website/config/basic/auth-basic/index.vue
@@ -3,7 +3,7 @@
         <el-tab-pane :label="$t('website.global')">
             <ComplexTable :data="data" @search="search" v-loading="loading" :heightDiff="420">
                 <template #toolbar>
-                    <el-button type="primary" plain @click="openCreate('root')">
+                    <el-button type="primary" plain :disabled="!hasManagePermission" @click="openCreate('root')">
                         {{ $t('commons.button.create') }}
                     </el-button>
                     <el-switch
@@ -28,7 +28,7 @@
         <el-tab-pane :label="$t('website.path')" v-if="showPath">
             <ComplexTable :data="pathData" @search="searchPath" v-loading="loading" :heightDiff="420">
                 <template #toolbar>
-                    <el-button type="primary" plain @click="openCreate('path')">
+                    <el-button type="primary" plain :disabled="!hasManagePermission" @click="openCreate('path')">
                         {{ $t('commons.button.create') }}
                     </el-button>
                 </template>
@@ -89,6 +89,7 @@ const showPath = ref(false);
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value,
         click: function (row: Website.NginxAuthConfig) {
             row.scope = 'root';
             openEdit(row);
@@ -105,6 +106,7 @@ const buttons = [
 const pathButtons = [
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value,
         click: function (row: Website.NginxAuthConfig) {
             row.scope = 'path';
             openEdit(row);
diff --git a/frontend/src/views/website/website/config/basic/load-balance/index.vue b/frontend/src/views/website/website/config/basic/load-balance/index.vue
index 82bf00f5ecda..612bdc5e0917 100644
--- a/frontend/src/views/website/website/config/basic/load-balance/index.vue
+++ b/frontend/src/views/website/website/config/basic/load-balance/index.vue
@@ -2,7 +2,7 @@
     <div>
         <ComplexTable :data="data" @search="search" v-loading="loading" :heightDiff="420">
             <template #toolbar>
-                <el-button type="primary" plain @click="create()">
+                <el-button type="primary" plain :disabled="!hasManagePermission" @click="create()">
                     {{ $t('commons.button.create') }}
                 </el-button>
                 <el-alert :closable="false" class="!mt-2">
@@ -72,11 +72,13 @@
 <script setup lang="ts">
 import { deleteLoadBalance, getLoadBalances } from '@/api/modules/website';
 import { onMounted, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import Operate from './operate/index.vue';
 import i18n from '@/lang';
 import { Website } from '@/api/interface/website';
 import { getAlgorithms } from '@/global/mimetype';
 import File from './file/index.vue';
+const { hasManagePermission } = useMenuManagePermission();
 
 const props = defineProps({
     id: {
@@ -101,6 +103,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value,
         click: (row: any) => {
             update(row);
         },
diff --git a/frontend/src/views/website/website/config/basic/proxy/index.vue b/frontend/src/views/website/website/config/basic/proxy/index.vue
index acb03dc4580d..1a8a84eb50f5 100644
--- a/frontend/src/views/website/website/config/basic/proxy/index.vue
+++ b/frontend/src/views/website/website/config/basic/proxy/index.vue
@@ -1,9 +1,11 @@
 <template>
     <ComplexTable :data="data" @search="search" v-loading="loading">
         <template #toolbar>
-            <el-button type="primary" plain @click="openCreate">{{ $t('commons.button.create') }}</el-button>
-            <el-button @click="openCache">{{ $t('website.proxyCache') }}</el-button>
-            <el-button type="primary" @click="clear" link>
+            <el-button type="primary" plain :disabled="!hasManagePermission" @click="openCreate">
+                {{ $t('commons.button.create') }}
+            </el-button>
+            <el-button :disabled="!hasManagePermission" @click="openCache">{{ $t('website.proxyCache') }}</el-button>
+            <el-button type="primary" :disabled="!hasManagePermission" @click="clear" link>
                 {{ $t('nginx.clearProxyCache') }}
             </el-button>
         </template>
@@ -24,7 +26,12 @@
         </el-table-column>
         <el-table-column :label="$t('commons.table.status')" prop="enable" width="100">
             <template #default="{ row }">
-                <Status :status="row.enable ? 'enable' : 'disable'" @click="opProxy(row)" :operate="true" />
+                <Status
+                    :status="row.enable ? 'enable' : 'disable'"
+                    :disabled="!hasManagePermission"
+                    @click="opProxy(row)"
+                    :operate="true"
+                />
             </template>
         </el-table-column>
         <fu-table-operations
@@ -47,6 +54,7 @@
 import { Website } from '@/api/interface/website';
 import { getProxyConfig, deleteProxyConfig, updateProxyConfigStatus, clearProxyCache } from '@/api/modules/website';
 import { computed, onMounted, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox } from 'element-plus';
@@ -87,15 +95,16 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: (row: Website.ProxyConfig) => {
+            return !row.enable || !hasManagePermission.value;
+        },
         click: function (row: Website.ProxyConfig) {
             openEdit(row);
         },
-        disabled: (row: Website.ProxyConfig) => {
-            return !row.enable;
-        },
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => !hasManagePermission.value,
         click: function (row: Website.ProxyConfig) {
             deleteProxy(row);
         },
diff --git a/frontend/src/views/website/website/config/basic/redirect/index.vue b/frontend/src/views/website/website/config/basic/redirect/index.vue
index 478830989325..c4fe0e80c720 100644
--- a/frontend/src/views/website/website/config/basic/redirect/index.vue
+++ b/frontend/src/views/website/website/config/basic/redirect/index.vue
@@ -1,7 +1,7 @@
 <template>
     <ComplexTable :data="data" @search="search" v-loading="loading">
         <template #toolbar>
-            <el-button type="primary" plain @click="openCreate">
+            <el-button type="primary" plain :disabled="!hasManagePermission" @click="openCreate">
                 {{ $t('commons.button.create') }}
             </el-button>
         </template>
@@ -52,6 +52,7 @@
 import { Website } from '@/api/interface/website';
 import { operateRedirectConfig, getRedirectConfig } from '@/api/modules/website';
 import { computed, onMounted, ref } from 'vue';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import Create from './create/index.vue';
 import File from './file/index.vue';
 import i18n from '@/lang';
@@ -89,12 +90,12 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: (row: Website.ProxyConfig) => {
+            return !row.enable || !hasManagePermission.value;
+        },
         click: function (row: Website.RedirectConfig) {
             openEdit(row);
         },
-        disabled: (row: Website.ProxyConfig) => {
-            return !row.enable;
-        },
     },
     {
         label: i18n.global.t('commons.button.delete'),
diff --git a/frontend/src/views/website/website/index.vue b/frontend/src/views/website/website/index.vue
index 83eb32e4095d..57f864af0be4 100644
--- a/frontend/src/views/website/website/index.vue
+++ b/frontend/src/views/website/website/index.vue
@@ -20,16 +20,21 @@
                 ></AppStatus>
             </template>
             <template v-if="!openNginxConfig && nginxIsExist" #leftToolBar>
-                <el-button type="primary" @click="openCreate" :disabled="disabledConfig">
+                <el-button type="primary" @click="openCreate" :disabled="disabledConfig || !hasManagePermission">
                     {{ $t('commons.button.create') }}
                 </el-button>
-                <el-button type="primary" plain @click="openGroup" :disabled="disabledConfig">
+                <el-button type="primary" plain @click="openGroup" :disabled="disabledConfig || !hasManagePermission">
                     {{ $t('commons.table.group') }}
                 </el-button>
-                <el-button type="primary" plain @click="openDefault" :disabled="disabledConfig">
+                <el-button type="primary" plain @click="openDefault" :disabled="disabledConfig || !hasManagePermission">
                     {{ $t('website.defaultServer') }}
                 </el-button>
-                <el-button type="primary" plain @click="openDefaultHtml" :disabled="disabledConfig">
+                <el-button
+                    type="primary"
+                    plain
+                    @click="openDefaultHtml"
+                    :disabled="disabledConfig || !hasManagePermission"
+                >
                     {{ $t('website.defaultHtml') }}
                 </el-button>
             </template>
@@ -121,7 +126,12 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.sitePath')" prop="sitePath" width="90px">
                         <template #default="{ row }">
-                            <el-button type="primary" link @click="routerToFileWithPath(row.sitePath + '/index')">
+                            <el-button
+                                type="primary"
+                                :disabled="!hasFilePermission"
+                                link
+                                @click="routerToFileWithPath(row.sitePath + '/index')"
+                            >
                                 <el-icon>
                                     <FolderOpened />
                                 </el-icon>
@@ -144,6 +154,7 @@
                             <span v-else>
                                 <Status
                                     v-if="row.status === 'Running'"
+                                    :disabled="!hasManagePermission"
                                     :operate="true"
                                     :status="row.status"
                                     @click="operateWebsite('stop', row)"
@@ -151,6 +162,7 @@
                                 <Status
                                     v-else
                                     :status="row.status"
+                                    :disabled="!hasManagePermission"
                                     :operate="true"
                                     @click="operateWebsite('start', row)"
                                 />
@@ -208,12 +220,16 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.remark')" prop="remark" min-width="150px">
                         <template #default="{ row }">
-                            <fu-read-write-switch>
+                            <fu-read-write-switch :write-trigger="hasManagePermission ? 'onClick' : 'disabled'">
                                 <template #read>
                                     <MsgInfo :info="row.remark" :width="'150'" />
                                 </template>
                                 <template #default="{ read }">
-                                    <el-input v-model="row.remark" @blur="updateRemark(row, read)" />
+                                    <el-input
+                                        v-model="row.remark"
+                                        :disabled="!hasManagePermission"
+                                        @blur="updateRemark(row, read)"
+                                    />
                                 </template>
                             </fu-read-write-switch>
                         </template>
@@ -253,7 +269,7 @@
                             <el-button
                                 class="ml-2"
                                 type="primary"
-                                :disabled="selects.length == 0 || batchReq.operate == ''"
+                                :disabled="selects.length == 0 || batchReq.operate == '' || !hasManagePermission"
                                 @click="batchOp"
                             >
                                 {{ $t('website.batchOperate') }}
diff --git a/frontend/src/views/website/website/nginx/module/index.vue b/frontend/src/views/website/website/nginx/module/index.vue
index fb03787e109f..1b458b81645c 100644
--- a/frontend/src/views/website/website/nginx/module/index.vue
+++ b/frontend/src/views/website/website/nginx/module/index.vue
@@ -2,15 +2,19 @@
     <div>
         <ComplexTable :data="data" @search="search()" :heightDiff="350" v-loading="loading">
             <template #toolbar>
-                <el-button type="primary" @click="openOperate">{{ $t('commons.button.create') }}</el-button>
-                <el-button type="primary" plain @click="buildNginx">{{ $t('nginx.build') }}</el-button>
+                <el-button type="primary" :disabled="!hasManagePermission" @click="openOperate">
+                    {{ $t('commons.button.create') }}
+                </el-button>
+                <el-button type="primary" plain :disabled="!hasManagePermission" @click="buildNginx">
+                    {{ $t('nginx.build') }}
+                </el-button>
                 <el-text type="warning" class="!ml-2">{{ $t('nginx.buildHelper') }}</el-text>
             </template>
             <el-table-column prop="name" :label="$t('commons.table.name')" />
             <el-table-column prop="params" :label="$t('nginx.params')" />
             <el-table-column :label="$t('commons.table.status')" fix>
                 <template #default="{ row }">
-                    <el-switch v-model="row.enable" @click="updateModule(row)" />
+                    <el-switch v-model="row.enable" :disabled="!hasManagePermission" @click="updateModule(row)" />
                 </template>
             </el-table-column>
             <fu-table-operations
@@ -29,23 +33,27 @@
 </template>
 <script lang="ts" setup>
 import { getNginxModules, updateNginxModule } from '@/api/modules/nginx';
+import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { Nginx } from '@/api/interface/nginx';
 import { MsgSuccess } from '@/utils/message';
 import Operate from './operate/index.vue';
 import Build from './build/index.vue';
+const { hasManagePermission } = useMenuManagePermission();
 
 const data = ref([]);
 const loading = ref(false);
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
+        disabled: () => !hasManagePermission.value,
         click: function (row: Nginx.NginxModule) {
             openEdit(row);
         },
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        disabled: () => !hasManagePermission.value,
         click: function (row: Nginx.NginxModule) {
             deleteModule(row);
         },

From 4f2b8cdaab43799b0dd196784c6bd9dcbd2bad0b Mon Sep 17 00:00:00 2001
From: ssongliu <sloooop1x@gmail.com>
Date: Wed, 13 May 2026 09:37:15 +0800
Subject: [PATCH 2/3] feat: add permission directive coverage

---
 frontend/src/components/fu/FuDropdownItem.vue |  38 +++++
 .../src/components/fu/FuInputRwSwitch.vue     |  20 ++-
 .../src/components/fu/FuReadWriteSwitch.vue   |  15 +-
 .../src/components/fu/FuSelectRwSwitch.vue    |  18 ++-
 .../src/components/fu/FuTableOperations.vue   |   6 +-
 frontend/src/components/fu/index.ts           |   2 +
 frontend/src/components/fu/shared.ts          |   2 +
 frontend/src/components/status/index.vue      |  16 ++-
 .../composables/useMenuManagePermission.ts    |  34 +----
 frontend/src/directives/index.ts              |   2 +
 frontend/src/directives/modules/permission.ts | 134 ++++++++++++++++++
 .../src/layout/components/Sidebar/index.vue   |  17 ++-
 frontend/src/utils/permission.ts              |  66 +++++++++
 .../src/views/ai/agents/agent/add/index.vue   |  12 +-
 .../agents/agent/components/hermes-chat.vue   |  10 +-
 .../config/tabs/agents/binding/index.vue      |  14 +-
 .../agent/config/tabs/agents/create/index.vue |   9 +-
 .../agent/config/tabs/agents/detail/index.vue |   9 +-
 .../agents/agent/config/tabs/agents/index.vue |  30 ++--
 .../tabs/channels/components/channel-bots.vue |  54 +++----
 .../channels/components/plugin-install.vue    |  21 +--
 .../config/tabs/channels/hermes/dingtalk.vue  |  14 +-
 .../config/tabs/channels/hermes/discord.vue   |  14 +-
 .../config/tabs/channels/hermes/feishu.vue    |  14 +-
 .../agent/config/tabs/channels/hermes/qq.vue  |  14 +-
 .../config/tabs/channels/hermes/telegram.vue  |  14 +-
 .../config/tabs/channels/hermes/wecom.vue     |  14 +-
 .../config/tabs/channels/hermes/weixin.vue    |   6 +-
 .../tabs/channels/openclaw/dingtalk.vue       |  10 +-
 .../config/tabs/channels/openclaw/discord.vue |   3 +-
 .../config/tabs/channels/openclaw/feishu.vue  |   9 +-
 .../config/tabs/channels/openclaw/qq.vue      |   9 +-
 .../tabs/channels/openclaw/telegram.vue       |   3 +-
 .../config/tabs/channels/openclaw/wecom.vue   |  12 +-
 .../config/tabs/channels/openclaw/weixin.vue  |   5 +-
 .../ai/agents/agent/config/tabs/model.vue     |  18 +--
 .../config/tabs/settings/config-file.vue      |   4 +-
 .../agent/config/tabs/settings/other.vue      |   4 +-
 .../agent/config/tabs/settings/security.vue   |   4 +-
 .../agent/config/tabs/skills/hermes.vue       |   7 +-
 .../agent/config/tabs/skills/openclaw.vue     |   7 +-
 .../views/ai/agents/agent/delete/index.vue    |   4 +-
 frontend/src/views/ai/agents/agent/index.vue  |  75 +++++-----
 .../views/ai/agents/agent/website/index.vue   |   4 +-
 .../src/views/ai/agents/model/add/index.vue   |   4 +-
 frontend/src/views/ai/agents/model/index.vue  |   8 +-
 .../src/views/ai/agents/model/pool/index.vue  |  10 +-
 .../src/views/ai/mcp/server/bind/index.vue    |   4 +-
 .../src/views/ai/mcp/server/import/index.vue  |   4 +-
 frontend/src/views/ai/mcp/server/index.vue    |  18 +--
 .../src/views/ai/mcp/server/operate/index.vue |  16 +--
 .../src/views/ai/mcp/server/volume/index.vue  |  12 +-
 .../src/views/ai/model/ollama/add/index.vue   |   4 +-
 .../src/views/ai/model/ollama/del/index.vue   |   5 +-
 .../views/ai/model/ollama/domain/index.vue    |   4 +-
 frontend/src/views/ai/model/ollama/index.vue  |  25 ++--
 .../src/views/ai/model/tensorrt/index.vue     |  15 +-
 .../views/ai/model/tensorrt/operate/index.vue |   4 +-
 .../src/views/app-store/apps/app/index.vue    |   8 +-
 frontend/src/views/app-store/apps/index.vue   |  10 +-
 frontend/src/views/app-store/detail/index.vue |   4 +-
 .../views/app-store/installed/app/header.vue  |  22 +--
 .../src/views/app-store/installed/index.vue   |  22 ++-
 .../src/views/app-store/setting/index.vue     |  10 +-
 .../src/views/container/compose/index.vue     |  50 +++----
 .../src/views/container/container/index.vue   | 103 +++++++-------
 .../src/views/container/dashboard/index.vue   |  10 +-
 frontend/src/views/container/image/index.vue  |  24 ++--
 .../src/views/container/network/index.vue     |  11 +-
 frontend/src/views/container/repo/index.vue   |  13 +-
 .../src/views/container/setting/index.vue     |  78 +++-------
 .../src/views/container/template/index.vue    |  17 +--
 frontend/src/views/container/volume/index.vue |  10 +-
 frontend/src/views/cronjob/cronjob/index.vue  |  35 +++--
 .../views/cronjob/cronjob/record/index.vue    |  11 +-
 frontend/src/views/cronjob/library/index.vue  |  34 ++---
 .../src/views/database/mongodb/conn/index.vue |   5 +-
 frontend/src/views/database/mongodb/index.vue |  23 +--
 .../views/database/mongodb/remote/index.vue   |   8 +-
 .../src/views/database/mysql/conn/index.vue   |   8 +-
 frontend/src/views/database/mysql/index.vue   |  23 +--
 .../src/views/database/mysql/remote/index.vue |   9 +-
 .../views/database/mysql/setting/index.vue    |   6 +-
 .../database/mysql/setting/slow-log/index.vue |   4 +-
 .../mysql/setting/variables/index.vue         |   8 +-
 .../views/database/postgresql/conn/index.vue  |   5 +-
 .../src/views/database/postgresql/index.vue   |  23 +--
 .../database/postgresql/remote/index.vue      |   8 +-
 .../database/postgresql/setting/index.vue     |   6 +-
 .../views/database/redis/command/index.vue    |  12 +-
 .../src/views/database/redis/conn/index.vue   |   5 +-
 frontend/src/views/database/redis/index.vue   |  16 +--
 .../src/views/database/redis/remote/index.vue |   8 +-
 .../views/database/redis/setting/index.vue    |  16 +--
 .../redis/setting/persistence/index.vue       |  28 ++--
 frontend/src/views/home/app/index.vue         |  14 +-
 frontend/src/views/home/index.vue             |  22 +--
 .../disk-management/components/disk-card.vue  |  19 +--
 .../views/host/disk-management/disk/index.vue |   4 -
 .../host/disk-management/partition/index.vue  |  15 +-
 .../host/file-management/favorite/index.vue   |   5 +-
 .../src/views/host/file-management/index.vue  |  81 ++++++-----
 .../file-management/recycle-bin/index.vue     |  19 +--
 .../host/file-management/share-list/index.vue |   5 +-
 .../host/file-management/share/index.vue      |   6 +-
 .../src/views/host/firewall/advance/index.vue |  18 +--
 .../src/views/host/firewall/forward/index.vue |  18 +--
 frontend/src/views/host/firewall/ip/index.vue |  24 ++--
 .../src/views/host/firewall/port/index.vue    |  24 ++--
 .../src/views/host/firewall/status/index.vue  |  34 +----
 .../src/views/host/monitor/setting/index.vue  |  26 +---
 .../src/views/host/process/process/index.vue  |  24 ++--
 frontend/src/views/host/ssh/log/log.vue       |   6 +-
 frontend/src/views/host/ssh/session/index.vue |   4 +-
 .../host/ssh/ssh/certification/index.vue      |  12 +-
 frontend/src/views/host/ssh/ssh/index.vue     |  57 ++------
 frontend/src/views/log/login/index.vue        |   4 +-
 frontend/src/views/log/operation/index.vue    |   4 +-
 frontend/src/views/log/website/index.vue      |   6 +-
 frontend/src/views/toolbox/clam/index.vue     |  19 +--
 .../src/views/toolbox/clam/operate/index.vue  |  12 +-
 .../src/views/toolbox/clam/record/index.vue   |  16 +--
 .../src/views/toolbox/clam/setting/index.vue  |  10 +-
 .../src/views/toolbox/clam/status/index.vue   |  26 +---
 frontend/src/views/toolbox/clean/index.vue    |   7 +-
 .../src/views/toolbox/device/dns/index.vue    |   4 +-
 .../views/toolbox/device/hostname/index.vue   |   4 +-
 .../src/views/toolbox/device/hosts/index.vue  |   6 +-
 frontend/src/views/toolbox/device/index.vue   |  41 ++----
 .../src/views/toolbox/device/ntp/index.vue    |  28 +---
 .../src/views/toolbox/device/passwd/index.vue |   8 +-
 .../src/views/toolbox/device/swap/index.vue   |   5 +-
 .../toolbox/fail2ban/ban-action/index.vue     |   4 +-
 .../views/toolbox/fail2ban/ban-time/index.vue |   4 +-
 .../toolbox/fail2ban/find-time/index.vue      |   4 +-
 frontend/src/views/toolbox/fail2ban/index.vue |  71 ++--------
 .../src/views/toolbox/fail2ban/ips/index.vue  |   4 +-
 .../views/toolbox/fail2ban/log-path/index.vue |   6 +-
 .../toolbox/fail2ban/max-retry/index.vue      |   4 +-
 .../src/views/toolbox/fail2ban/port/index.vue |   4 +-
 frontend/src/views/toolbox/ftp/index.vue      |  33 ++---
 .../src/views/toolbox/ftp/operate/index.vue   |  12 +-
 frontend/src/views/toolbox/index.vue          |   6 +-
 .../toolbox/supervisor/config/basic/index.vue |   4 +-
 .../supervisor/config/source/index.vue        |   4 +-
 .../views/toolbox/supervisor/create/index.vue |  10 +-
 .../views/toolbox/supervisor/file/index.vue   |   4 +-
 .../src/views/toolbox/supervisor/index.vue    |  22 ++-
 .../views/toolbox/supervisor/log/index.vue    |   4 +-
 .../views/toolbox/supervisor/status/index.vue |  12 +-
 .../toolbox/supervisor/status/init/index.vue  |   4 +-
 .../views/website/runtime/dotnet/index.vue    |  12 +-
 .../src/views/website/runtime/go/index.vue    |  11 +-
 .../src/views/website/runtime/java/index.vue  |  13 +-
 .../src/views/website/runtime/node/index.vue  |  13 +-
 .../runtime/php/extension-template/index.vue  |   6 +-
 .../src/views/website/runtime/php/index.vue   |  13 +-
 .../website/runtime/php/supervisor/index.vue  |   2 +-
 .../views/website/runtime/python/index.vue    |  13 +-
 .../views/website/ssl/acme-account/index.vue  |   2 +-
 frontend/src/views/website/ssl/ca/index.vue   |   4 +-
 .../views/website/ssl/dns-account/index.vue   |   6 +-
 frontend/src/views/website/ssl/index.vue      |  37 ++---
 .../website/config/basic/auth-basic/index.vue |   8 +-
 .../config/basic/load-balance/index.vue       |   6 +-
 .../website/config/basic/proxy/index.vue      |  14 +-
 .../website/config/basic/redirect/index.vue   |   6 +-
 frontend/src/views/website/website/index.vue  |  30 ++--
 .../website/website/nginx/module/index.vue    |  12 +-
 169 files changed, 1120 insertions(+), 1564 deletions(-)
 create mode 100644 frontend/src/components/fu/FuDropdownItem.vue
 create mode 100644 frontend/src/directives/modules/permission.ts
 create mode 100644 frontend/src/utils/permission.ts

diff --git a/frontend/src/components/fu/FuDropdownItem.vue b/frontend/src/components/fu/FuDropdownItem.vue
new file mode 100644
index 000000000000..a7c7cd7a882d
--- /dev/null
+++ b/frontend/src/components/fu/FuDropdownItem.vue
@@ -0,0 +1,38 @@
+<template>
+    <el-dropdown-item v-bind="$attrs" :disabled="computedDisabled">
+        <slot></slot>
+    </el-dropdown-item>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { hasManagePermissionAccess, type PermissionBindingValue } from '@/utils/permission';
+
+defineOptions({
+    name: 'FuDropdownItem',
+    inheritAttrs: false,
+});
+
+const props = defineProps({
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    permission: {
+        type: [String, Array],
+        default: undefined,
+    },
+});
+
+const permissionDisabled = ref(false);
+
+const hasPermission = computed(() => hasManagePermissionAccess(props.permission as PermissionBindingValue));
+
+const computedDisabled = computed(() => props.disabled || permissionDisabled.value || !hasPermission.value);
+
+defineExpose({
+    setPermissionDisabled: (disabled: boolean) => {
+        permissionDisabled.value = disabled;
+    },
+});
+</script>
diff --git a/frontend/src/components/fu/FuInputRwSwitch.vue b/frontend/src/components/fu/FuInputRwSwitch.vue
index d33226355ccf..fcdf8e675f08 100644
--- a/frontend/src/components/fu/FuInputRwSwitch.vue
+++ b/frontend/src/components/fu/FuInputRwSwitch.vue
@@ -42,6 +42,11 @@ const emit = defineEmits(['update:modelValue', 'input', 'blur', 'enter']);
 
 const inputRef = ref();
 const isWrite = ref(false);
+const permissionDisabled = ref(false);
+
+const effectiveWriteTrigger = computed(() => {
+    return permissionDisabled.value ? 'disabled' : props.writeTrigger;
+});
 
 const displayValue = computed(() => {
     return props.modelValue === '' || props.modelValue === undefined || props.modelValue === null
@@ -61,13 +66,13 @@ const closeWrite = () => {
 };
 
 const handleReadClick = () => {
-    if (props.writeTrigger === 'onClick') {
+    if (effectiveWriteTrigger.value === 'onClick') {
         openWrite();
     }
 };
 
 const handleReadDblClick = () => {
-    if (props.writeTrigger === 'onDblclick') {
+    if (effectiveWriteTrigger.value === 'onDblclick') {
         openWrite();
     }
 };
@@ -89,4 +94,15 @@ const handleEnter = (event: KeyboardEvent) => {
     emit('enter', event);
     closeWrite();
 };
+
+defineExpose({
+    setPermissionDisabled: (disabled: boolean) => {
+        permissionDisabled.value = disabled;
+        if (disabled) {
+            isWrite.value = false;
+        }
+    },
+    write: openWrite,
+    read: closeWrite,
+});
 </script>
diff --git a/frontend/src/components/fu/FuReadWriteSwitch.vue b/frontend/src/components/fu/FuReadWriteSwitch.vue
index e10293514e86..b03f90dbe70c 100644
--- a/frontend/src/components/fu/FuReadWriteSwitch.vue
+++ b/frontend/src/components/fu/FuReadWriteSwitch.vue
@@ -39,6 +39,11 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue', 'change']);
 
 const isWrite = ref(false);
+const permissionDisabled = ref(false);
+
+const effectiveWriteTrigger = computed(() => {
+    return permissionDisabled.value ? 'disabled' : props.writeTrigger;
+});
 
 const displayValue = computed(() => {
     const value = props.modelValue !== '' && props.modelValue !== undefined ? props.modelValue : props.data;
@@ -58,18 +63,24 @@ const closeWrite = (value?: any) => {
 };
 
 const handleReadClick = () => {
-    if (props.writeTrigger === 'onClick') {
+    if (effectiveWriteTrigger.value === 'onClick') {
         openWrite();
     }
 };
 
 const handleReadDblClick = () => {
-    if (props.writeTrigger === 'onDblclick') {
+    if (effectiveWriteTrigger.value === 'onDblclick') {
         openWrite();
     }
 };
 
 defineExpose({
+    setPermissionDisabled: (disabled: boolean) => {
+        permissionDisabled.value = disabled;
+        if (disabled) {
+            isWrite.value = false;
+        }
+    },
     write: openWrite,
     read: closeWrite,
 });
diff --git a/frontend/src/components/fu/FuSelectRwSwitch.vue b/frontend/src/components/fu/FuSelectRwSwitch.vue
index 8ac5a94e64b0..b7a280df73cb 100644
--- a/frontend/src/components/fu/FuSelectRwSwitch.vue
+++ b/frontend/src/components/fu/FuSelectRwSwitch.vue
@@ -50,6 +50,20 @@ const emit = defineEmits(['update:modelValue', 'input', 'blur', 'change']);
 
 const selectRef = ref();
 const isWrite = ref(false);
+const permissionDisabled = ref(false);
+
+defineExpose({
+    setPermissionDisabled: (disabled: boolean) => {
+        permissionDisabled.value = disabled;
+        if (disabled) {
+            isWrite.value = false;
+        }
+    },
+});
+
+const effectiveWriteTrigger = computed(() => {
+    return permissionDisabled.value ? 'disabled' : props.writeTrigger;
+});
 
 const displayValue = computed(() => {
     return props.modelValue === '' || props.modelValue === undefined || props.modelValue === null
@@ -70,13 +84,13 @@ const closeWrite = () => {
 };
 
 const handleReadClick = () => {
-    if (props.writeTrigger === 'onClick') {
+    if (effectiveWriteTrigger.value === 'onClick') {
         openWrite();
     }
 };
 
 const handleReadDblClick = () => {
-    if (props.writeTrigger === 'onDblclick') {
+    if (effectiveWriteTrigger.value === 'onDblclick') {
         openWrite();
     }
 };
diff --git a/frontend/src/components/fu/FuTableOperations.vue b/frontend/src/components/fu/FuTableOperations.vue
index 55c9e598edcd..0dbe06f8a883 100644
--- a/frontend/src/components/fu/FuTableOperations.vue
+++ b/frontend/src/components/fu/FuTableOperations.vue
@@ -59,6 +59,7 @@ import { computed, type PropType } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { resolveMaybeFn, type FuTableOperationButton } from './shared';
+import { hasManagePermissionAccess } from '@/utils/permission';
 
 defineOptions({ name: 'FuTableOperations' });
 
@@ -204,7 +205,10 @@ const getMoreButtons = (row: any) => {
 };
 
 const isButtonDisabled = (button: FuTableOperationButton, row: any) => {
-    return Boolean(resolveMaybeFn(button.disabled ?? false, row));
+    const permissionDisabled =
+        button.permission !== undefined &&
+        !hasManagePermissionAccess(button.permission === true ? undefined : button.permission);
+    return permissionDisabled || Boolean(resolveMaybeFn(button.disabled ?? false, row));
 };
 
 const handleButtonClick = (button: FuTableOperationButton, row: any) => {
diff --git a/frontend/src/components/fu/index.ts b/frontend/src/components/fu/index.ts
index e2ab9f74c248..0a1ebe0cc974 100644
--- a/frontend/src/components/fu/index.ts
+++ b/frontend/src/components/fu/index.ts
@@ -1,6 +1,7 @@
 import { type App } from 'vue';
 
 import FuInputRwSwitch from './FuInputRwSwitch.vue';
+import FuDropdownItem from './FuDropdownItem.vue';
 import FuReadWriteSwitch from './FuReadWriteSwitch.vue';
 import FuSelectRwSwitch from './FuSelectRwSwitch.vue';
 import FuStep from './FuStep';
@@ -14,6 +15,7 @@ const components = [
     FuTable,
     FuTableOperations,
     FuTablePagination,
+    FuDropdownItem,
     FuInputRwSwitch,
     FuReadWriteSwitch,
     FuSelectRwSwitch,
diff --git a/frontend/src/components/fu/shared.ts b/frontend/src/components/fu/shared.ts
index e612a3065ad1..c063d3ec014f 100644
--- a/frontend/src/components/fu/shared.ts
+++ b/frontend/src/components/fu/shared.ts
@@ -1,4 +1,5 @@
 import { Comment, Fragment, Text, type VNode } from 'vue';
+import type { PermissionBindingValue } from '@/utils/permission';
 
 export interface FuTableColumnConfig {
     key: string;
@@ -12,6 +13,7 @@ export interface FuTableOperationButton {
     label?: string | number;
     click?: (row: any) => void;
     disabled?: boolean | ((row: any) => boolean);
+    permission?: true | PermissionBindingValue;
     show?: boolean | ((row: any) => boolean);
     type?: string;
     icon?: any;
diff --git a/frontend/src/components/status/index.vue b/frontend/src/components/status/index.vue
index 10d887d32a0e..528c245cfcc8 100644
--- a/frontend/src/components/status/index.vue
+++ b/frontend/src/components/status/index.vue
@@ -21,7 +21,7 @@
                 </el-icon>
             </span>
         </el-tag>
-        <el-button size="small" v-else :type="getType(statusItem)" plain round :disabled="props.disabled">
+        <el-button size="small" v-else :type="getType(statusItem)" plain round :disabled="isDisabled">
             <span v-if="statusItem != ''">{{ $t('commons.status.' + statusItem) }}</span>
             <el-icon v-if="loadingIcon(statusItem)" class="is-loading">
                 <Loading />
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 const props = defineProps({
     status: String,
@@ -47,10 +47,22 @@ const props = defineProps({
     },
 });
 
+const permissionDisabled = ref(false);
+
+defineExpose({
+    setPermissionDisabled: (disabled: boolean) => {
+        permissionDisabled.value = disabled;
+    },
+});
+
 const statusItem = computed(() => {
     return props.status?.toLowerCase() || '';
 });
 
+const isDisabled = computed(() => {
+    return !!props.disabled || permissionDisabled.value;
+});
+
 const getType = (status: string) => {
     if (status.includes('error') || status.includes('err')) {
         return 'danger';
diff --git a/frontend/src/composables/useMenuManagePermission.ts b/frontend/src/composables/useMenuManagePermission.ts
index 310f10aa1f68..50525ab601b6 100644
--- a/frontend/src/composables/useMenuManagePermission.ts
+++ b/frontend/src/composables/useMenuManagePermission.ts
@@ -1,6 +1,7 @@
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { GlobalStore } from '@/store';
+import { hasManagePermissionAccess, hasPermissionAccess, toManagePermission } from '@/utils/permission';
 
 const getRoutePermission = (route: ReturnType<typeof useRoute>) => {
     const metaPermission = route.meta?.permission;
@@ -18,13 +19,6 @@ const getRoutePermission = (route: ReturnType<typeof useRoute>) => {
     return '';
 };
 
-const toManagePermission = (permission: string) => {
-    if (!permission) {
-        return '';
-    }
-    return permission.endsWith('_view') ? permission.replace(/_view$/, '_manage') : permission;
-};
-
 export const useMenuManagePermission = (permission?: string) => {
     const route = useRoute();
     const globalStore = GlobalStore();
@@ -40,28 +34,10 @@ export const useMenuManagePermission = (permission?: string) => {
     });
     const hasAdminManagePermission = computed(() => globalStore.isAdmin || globalStore.isNodeAdmin);
     const hasPermission = computed(() => {
-        if (hasAdminManagePermission.value) {
-            return true;
-        }
-        if (!sourcePermission.value) {
-            return false;
-        }
-        if (sourcePermission.value.endsWith('_view')) {
-            return (
-                globalStore.hasPermission(sourcePermission.value) ||
-                globalStore.hasPermission(toManagePermission(sourcePermission.value))
-            );
-        }
-        return globalStore.hasPermission(sourcePermission.value);
+        return hasPermissionAccess(sourcePermission.value || []);
     });
     const hasManagePermission = computed(() => {
-        if (hasAdminManagePermission.value) {
-            return true;
-        }
-        if (!managePermission.value) {
-            return false;
-        }
-        return globalStore.hasPermission(managePermission.value);
+        return hasManagePermissionAccess(managePermission.value || []);
     });
 
     return {
@@ -71,3 +47,7 @@ export const useMenuManagePermission = (permission?: string) => {
         hasManagePermission,
     };
 };
+
+export const useCan = (permission?: string) => {
+    return useMenuManagePermission(permission).hasPermission;
+};
diff --git a/frontend/src/directives/index.ts b/frontend/src/directives/index.ts
index 3720e7e3e0cb..9038cfa4a0b9 100644
--- a/frontend/src/directives/index.ts
+++ b/frontend/src/directives/index.ts
@@ -1,8 +1,10 @@
 import { App, Directive } from 'vue';
 import integerInput from './modules/integer';
+import permission from './modules/permission';
 
 const directivesList: { [key: string]: Directive } = {
     'integer-input': integerInput,
+    permission,
 };
 
 const directives = {
diff --git a/frontend/src/directives/modules/permission.ts b/frontend/src/directives/modules/permission.ts
new file mode 100644
index 000000000000..0b67dfb37b75
--- /dev/null
+++ b/frontend/src/directives/modules/permission.ts
@@ -0,0 +1,134 @@
+import type { Directive, DirectiveBinding, VNode } from 'vue';
+import {
+    hasManagePermissionAccess,
+    hasPermissionAccess,
+    type PermissionBindingValue,
+    type PermissionMode,
+} from '@/utils/permission';
+
+type PermissionControlledComponent = {
+    setPermissionDisabled?: (disabled: boolean) => void;
+};
+
+const PERMISSION_DISABLED_ATTR = 'data-permission-disabled';
+const PERMISSION_POINTER_EVENTS_ATTR = 'data-permission-pointer-events';
+const PERMISSION_NATIVE_DISABLED_ATTR = 'data-permission-native-disabled';
+const PERMISSION_TABINDEX_ATTR = 'data-permission-tabindex';
+
+const getDisableTargets = (el: HTMLElement) => {
+    const targets = [el, ...Array.from(el.querySelectorAll<HTMLElement>('button, input, select, textarea'))];
+    return Array.from(new Set(targets));
+};
+
+const disableNativeControls = (el: HTMLElement) => {
+    for (const target of getDisableTargets(el)) {
+        if (
+            target instanceof HTMLButtonElement ||
+            target instanceof HTMLInputElement ||
+            target instanceof HTMLSelectElement ||
+            target instanceof HTMLTextAreaElement
+        ) {
+            if (!target.hasAttribute(PERMISSION_NATIVE_DISABLED_ATTR)) {
+                target.setAttribute(PERMISSION_NATIVE_DISABLED_ATTR, target.disabled ? 'true' : 'false');
+            }
+            target.disabled = true;
+            continue;
+        }
+
+        if (!target.hasAttribute(PERMISSION_TABINDEX_ATTR)) {
+            const tabindex = target.getAttribute('tabindex');
+            target.setAttribute(PERMISSION_TABINDEX_ATTR, tabindex ?? '');
+        }
+        target.setAttribute('tabindex', '-1');
+    }
+};
+
+const enableNativeControls = (el: HTMLElement) => {
+    for (const target of getDisableTargets(el)) {
+        if (
+            target instanceof HTMLButtonElement ||
+            target instanceof HTMLInputElement ||
+            target instanceof HTMLSelectElement ||
+            target instanceof HTMLTextAreaElement
+        ) {
+            const previousDisabled = target.getAttribute(PERMISSION_NATIVE_DISABLED_ATTR);
+            if (previousDisabled !== null) {
+                target.disabled = previousDisabled === 'true';
+                target.removeAttribute(PERMISSION_NATIVE_DISABLED_ATTR);
+            }
+            continue;
+        }
+
+        const previousTabindex = target.getAttribute(PERMISSION_TABINDEX_ATTR);
+        if (previousTabindex !== null) {
+            if (previousTabindex === '') {
+                target.removeAttribute('tabindex');
+            } else {
+                target.setAttribute('tabindex', previousTabindex);
+            }
+            target.removeAttribute(PERMISSION_TABINDEX_ATTR);
+        }
+    }
+};
+
+const disableElement = (el: HTMLElement) => {
+    if (!el.hasAttribute(PERMISSION_POINTER_EVENTS_ATTR)) {
+        el.setAttribute(PERMISSION_POINTER_EVENTS_ATTR, el.style.pointerEvents || '');
+    }
+    el.style.pointerEvents = 'none';
+    el.setAttribute('aria-disabled', 'true');
+    el.setAttribute(PERMISSION_DISABLED_ATTR, 'true');
+    el.classList.add('is-disabled');
+    disableNativeControls(el);
+};
+
+const enableElement = (el: HTMLElement) => {
+    if (!el.hasAttribute(PERMISSION_DISABLED_ATTR)) {
+        return;
+    }
+    el.style.pointerEvents = el.getAttribute(PERMISSION_POINTER_EVENTS_ATTR) || '';
+    el.removeAttribute('aria-disabled');
+    el.removeAttribute(PERMISSION_DISABLED_ATTR);
+    el.removeAttribute(PERMISSION_POINTER_EVENTS_ATTR);
+    el.classList.remove('is-disabled');
+    enableNativeControls(el);
+};
+
+const getComponentPermissionController = (vnode: VNode): PermissionControlledComponent | undefined => {
+    return vnode.component?.exposed as PermissionControlledComponent | undefined;
+};
+
+const getPermissionMode = (binding: DirectiveBinding<PermissionBindingValue>): PermissionMode => {
+    return binding.arg === 'view' ? 'view' : 'manage';
+};
+
+const applyPermission = (el: HTMLElement, binding: DirectiveBinding<PermissionBindingValue>, vnode: VNode) => {
+    const disabled =
+        getPermissionMode(binding) === 'view'
+            ? !hasPermissionAccess(binding.value)
+            : !hasManagePermissionAccess(binding.value);
+    const controller = getComponentPermissionController(vnode);
+
+    if (controller?.setPermissionDisabled) {
+        enableElement(el);
+        controller.setPermissionDisabled(disabled);
+        return;
+    }
+
+    if (disabled) {
+        disableElement(el);
+        return;
+    }
+    enableElement(el);
+};
+
+const permissionDirective: Directive<HTMLElement, PermissionBindingValue> = {
+    mounted(el, binding, vnode) {
+        applyPermission(el, binding, vnode);
+    },
+    updated(el, binding, vnode) {
+        applyPermission(el, binding, vnode);
+    },
+};
+
+export default permissionDirective;
diff --git a/frontend/src/layout/components/Sidebar/index.vue b/frontend/src/layout/components/Sidebar/index.vue
index ad41ff7643e7..238ba8e95d5c 100644
--- a/frontend/src/layout/components/Sidebar/index.vue
+++ b/frontend/src/layout/components/Sidebar/index.vue
@@ -96,15 +96,18 @@ const search = async () => {
         version.value = '';
     }
 
+    if (!settingInfo?.hideMenu) {
+        setFallbackMenuListIfEmpty();
+        return;
+    }
+
     try {
-        const rstMenuList = buildMenuListFromSettings(settingInfo?.hideMenu);
+        const rstMenuList = buildMenuListFromSettings(settingInfo.hideMenu);
         if (!isSameMenuList(menuStore.menuList as RouteRecordRaw[], rstMenuList)) {
             menuStore.setMenuList(rstMenuList);
         }
     } catch (error) {
-        if (!menuStore.menuList || menuStore.menuList.length === 0) {
-            menuStore.setMenuList(buildAuthVisibleMenuList(menuList));
-        }
+        setFallbackMenuListIfEmpty();
     }
 };
 
@@ -112,6 +115,12 @@ function isSameMenuList(source: RouteRecordRaw[], target: RouteRecordRaw[]) {
     return JSON.stringify(source) === JSON.stringify(target);
 }
 
+function setFallbackMenuListIfEmpty() {
+    if (!menuStore.menuList || menuStore.menuList.length === 0) {
+        menuStore.setMenuList(buildAuthVisibleMenuList(menuList));
+    }
+}
+
 function allowMenuItem(item: RouteRecordRaw) {
     if (globalStore.isAdmin) {
         return true;
diff --git a/frontend/src/utils/permission.ts b/frontend/src/utils/permission.ts
new file mode 100644
index 000000000000..a82bcb7b923f
--- /dev/null
+++ b/frontend/src/utils/permission.ts
@@ -0,0 +1,66 @@
+import router from '@/routers';
+import { GlobalStore } from '@/store';
+
+export type PermissionBindingValue = string | string[] | undefined;
+export type PermissionMode = 'manage' | 'view';
+
+const getRoutePermission = () => {
+    const route = router.currentRoute.value;
+    const metaPermission = route.meta?.permission;
+    if (typeof metaPermission === 'string' && metaPermission) {
+        return metaPermission;
+    }
+
+    for (const record of [...route.matched].reverse()) {
+        const permission = record.meta?.permission;
+        if (typeof permission === 'string' && permission) {
+            return permission;
+        }
+    }
+
+    return '';
+};
+
+export const toManagePermission = (permission: string) => {
+    if (!permission) {
+        return '';
+    }
+    return permission.endsWith('_view') ? permission.replace(/_view$/, '_manage') : permission;
+};
+
+export const toPermissionList = (value: PermissionBindingValue) => {
+    if (Array.isArray(value)) {
+        return value.filter(
+            (permission): permission is string => typeof permission === 'string' && !!permission.trim(),
+        );
+    }
+    if (typeof value === 'string' && value.trim()) {
+        return [value];
+    }
+    const routePermission = getRoutePermission();
+    return routePermission ? [routePermission] : [];
+};
+
+export const hasManagePermissionAccess = (value?: PermissionBindingValue) => {
+    const globalStore = GlobalStore();
+    if (globalStore.isAdmin || globalStore.isNodeAdmin) {
+        return true;
+    }
+    const permissions = toPermissionList(value).map(toManagePermission).filter(Boolean);
+    if (permissions.length === 0) {
+        return false;
+    }
+    return permissions.every((permission) => globalStore.hasPermission(permission));
+};
+
+export const hasPermissionAccess = (value?: PermissionBindingValue) => {
+    const globalStore = GlobalStore();
+    if (globalStore.isAdmin || globalStore.isNodeAdmin) {
+        return true;
+    }
+    const permissions = toPermissionList(value);
+    if (permissions.length === 0) {
+        return false;
+    }
+    return permissions.every((permission) => globalStore.hasPermission(permission));
+};
diff --git a/frontend/src/views/ai/agents/agent/add/index.vue b/frontend/src/views/ai/agents/agent/add/index.vue
index 483ac88b0f87..df3aa87e35d3 100644
--- a/frontend/src/views/ai/agents/agent/add/index.vue
+++ b/frontend/src/views/ai/agents/agent/add/index.vue
@@ -66,13 +66,7 @@
                     </el-select>
                     <span class="input-help">
                         {{ $t('aiTools.agents.noAccountHint') }}
-                        <el-button
-                            type="primary"
-                            link
-                            class="inline-link"
-                            :disabled="!hasManagePermission"
-                            @click="openAccountCreate"
-                        >
+                        <el-button v-permission type="primary" link class="inline-link" @click="openAccountCreate">
                             {{ $t('commons.button.create') }}
                         </el-button>
                     </span>
@@ -101,7 +95,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="open = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="submit">
+                <el-button v-permission type="primary" @click="submit">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -113,7 +107,6 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue';
 import { FormInstance } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { checkNumberRange, Rules } from '@/global/form-rules';
 import { createAgent, getAgentProviders, pageAgentAccounts } from '@/api/modules/ai';
 import { AI } from '@/api/interface/ai';
@@ -132,7 +125,6 @@ import AccountAddDialog from '@/views/ai/agents/model/add/index.vue';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 
 const emit = defineEmits(['search', 'task']);
-const { hasManagePermission } = useMenuManagePermission();
 
 const open = ref(false);
 const formRef = ref<FormInstance>();
diff --git a/frontend/src/views/ai/agents/agent/components/hermes-chat.vue b/frontend/src/views/ai/agents/agent/components/hermes-chat.vue
index 2156a0e05b15..d7e62ba8a555 100644
--- a/frontend/src/views/ai/agents/agent/components/hermes-chat.vue
+++ b/frontend/src/views/ai/agents/agent/components/hermes-chat.vue
@@ -45,8 +45,9 @@
                                     <template v-if="editingSessionId === item.id">
                                         <el-button
                                             link
+                                            v-permission
                                             type="primary"
-                                            :disabled="!canSaveSessionTitle || !hasManagePermission"
+                                            :disabled="!canSaveSessionTitle"
                                             @click.stop="saveSessionTitle(item)"
                                         >
                                             {{ $t('commons.button.save') }}
@@ -58,18 +59,19 @@
                                     <el-button
                                         v-else-if="!terminalOpen"
                                         link
+                                        v-permission
                                         icon="Edit"
                                         class="hermes-chat-dialog__edit-button"
-                                        :disabled="!hasManagePermission"
                                         @mousedown.stop
                                         @click.stop="startEditSessionTitle(item)"
                                     />
                                     <el-button
                                         v-if="editingSessionId !== item.id"
                                         link
+                                        v-permission
                                         type="danger"
                                         icon="Delete"
-                                        :disabled="isDeleteDisabled(item) || !hasManagePermission"
+                                        :disabled="isDeleteDisabled(item)"
                                         :loading="deletingSessionId === item.id"
                                         @mousedown.stop
                                         @click.stop="deleteSession(item)"
@@ -98,7 +100,6 @@
 <script setup lang="ts">
 import { ElMessageBox } from 'element-plus';
 import { computed, nextTick, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import DialogPro from '@/components/dialog-pro/index.vue';
 import Terminal from '@/components/terminal/index.vue';
@@ -114,7 +115,6 @@ import { MsgError, MsgSuccess } from '@/utils/message';
 
 const { currentNode } = useGlobalStore();
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 
 interface HermesChatDialogParams {
     agentId: number;
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/agents/binding/index.vue b/frontend/src/views/ai/agents/agent/config/tabs/agents/binding/index.vue
index 5b6610f059a1..92ee7e6f15c5 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/agents/binding/index.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/agents/binding/index.vue
@@ -35,7 +35,7 @@
                 </el-table-column>
                 <el-table-column :label="$t('commons.table.operate')" width="100" align="right">
                     <template #default="{ $index }">
-                        <el-button link :disabled="!hasManagePermission" @click="removeBinding($index)">
+                        <el-button v-permission link @click="removeBinding($index)">
                             {{ $t('commons.button.delete') }}
                         </el-button>
                     </template>
@@ -45,12 +45,7 @@
                 <el-empty :description="$t('commons.msg.noneData')" :image-size="60" />
             </div>
             <div class="binding-dialog__actions">
-                <el-button
-                    type="primary"
-                    link
-                    :disabled="loading || submitting || !hasManagePermission"
-                    @click="addBinding"
-                >
+                <el-button v-permission type="primary" link :disabled="loading || submitting" @click="addBinding">
                     {{ $t('commons.button.add') }}
                 </el-button>
             </div>
@@ -62,7 +57,8 @@
             <el-button
                 type="primary"
                 :loading="submitting"
-                :disabled="loading || !form.bindings.length || !hasManagePermission"
+                v-permission
+                :disabled="loading || !form.bindings.length"
                 @click="submitBind"
             >
                 {{ $t('commons.button.bind') }}
@@ -73,12 +69,10 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { bindAgentRole, getAgentRoleChannels } from '@/api/modules/ai';
 import { AI } from '@/api/interface/ai';
 import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
-const { hasManagePermission } = useMenuManagePermission();
 
 interface SelectOption {
     label: string;
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/agents/create/index.vue b/frontend/src/views/ai/agents/agent/config/tabs/agents/create/index.vue
index 5bd56c57b936..3e413a69b108 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/agents/create/index.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/agents/create/index.vue
@@ -51,7 +51,7 @@
                         </el-table-column>
                         <el-table-column :label="$t('commons.table.operate')" width="90" align="center">
                             <template #default="{ $index }">
-                                <el-button link :disabled="!hasManagePermission" @click="removeBinding($index)">
+                                <el-button v-permission link @click="removeBinding($index)">
                                     {{ $t('commons.button.delete') }}
                                 </el-button>
                             </template>
@@ -59,7 +59,7 @@
                     </el-table>
                     <el-empty v-else :description="$t('commons.msg.noneData')" :image-size="60" />
                     <div class="bindings-footer">
-                        <el-button type="primary" link :disabled="!hasManagePermission" @click="addBinding">
+                        <el-button v-permission type="primary" link @click="addBinding">
                             {{ $t('commons.button.add') }}
                         </el-button>
                     </div>
@@ -68,7 +68,7 @@
         </div>
         <template #footer>
             <el-button :disabled="loading" @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
-            <el-button type="primary" :loading="loading" :disabled="!hasManagePermission" @click="submit">
+            <el-button v-permission type="primary" :loading="loading" @click="submit">
                 {{ $t('commons.button.confirm') }}
             </el-button>
         </template>
@@ -78,7 +78,6 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { createAgentRole, getAgentRoleChannels, pageAgentAccounts } from '@/api/modules/ai';
 import { AI } from '@/api/interface/ai';
 import { Rules } from '@/global/form-rules';
@@ -86,8 +85,6 @@ import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const { hasManagePermission } = useMenuManagePermission();
-
 interface SelectOption {
     label: string;
     value: string;
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/agents/detail/index.vue b/frontend/src/views/ai/agents/agent/config/tabs/agents/detail/index.vue
index 2b9540b092ec..29e507060089 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/agents/detail/index.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/agents/detail/index.vue
@@ -28,12 +28,7 @@
                 <el-button :loading="loading" :disabled="saving || !agentId || !workspace" @click="reloadFiles">
                     {{ $t('commons.button.refresh') }}
                 </el-button>
-                <el-button
-                    type="primary"
-                    :loading="saving"
-                    :disabled="!currentFile || !hasManagePermission"
-                    @click="saveAllFiles"
-                >
+                <el-button v-permission type="primary" :loading="saving" :disabled="!currentFile" @click="saveAllFiles">
                     {{ $t('aiTools.agents.saveAllMd') }}
                 </el-button>
             </span>
@@ -44,12 +39,10 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { ElMessageBox } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { AI } from '@/api/interface/ai';
 import { getAgentRoleMarkdownFiles, updateAgentRoleMarkdownFile } from '@/api/modules/ai';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-const { hasManagePermission } = useMenuManagePermission();
 
 interface DialogParams {
     name: string;
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/agents/index.vue b/frontend/src/views/ai/agents/agent/config/tabs/agents/index.vue
index 27a11dcfb027..bff2da37bf86 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/agents/index.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/agents/index.vue
@@ -8,7 +8,7 @@
         />
         <template v-else>
             <div class="role-toolbar">
-                <el-button type="primary" :disabled="!hasManagePermission" @click="openCreateDialog">
+                <el-button v-permission type="primary" @click="openCreateDialog">
                     {{ $t('commons.button.add') }}
                 </el-button>
             </div>
@@ -49,13 +49,7 @@
                                     {{ $t('aiTools.agents.agentDir') }}
                                 </el-button>
                             </el-tooltip>
-                            <el-button
-                                plain
-                                size="small"
-                                round
-                                :disabled="!hasManagePermission"
-                                @click="handleDelete(row)"
-                            >
+                            <el-button plain size="small" round v-permission @click="handleDelete(row)">
                                 {{ $t('commons.button.delete') }}
                             </el-button>
                         </div>
@@ -70,25 +64,17 @@
                                 <el-tag
                                     v-for="item in row.bindings"
                                     :key="`${item.channel}-${item.accountId || 'default'}`"
-                                    :closable="hasManagePermission"
+                                    :closable="canManageCurrentAgent"
                                     @close="handleUnbind(row, item)"
                                 >
                                     {{ item.accountId ? `${item.channel}:${item.accountId}` : item.channel }}
                                 </el-tag>
-                                <el-button
-                                    size="small"
-                                    :disabled="!hasManagePermission"
-                                    @click="openBindingDialog(row)"
-                                >
+                                <el-button v-permission size="small" @click="openBindingDialog(row)">
                                     + {{ $t('commons.button.add') }}
                                 </el-button>
                             </div>
                             <div v-else class="role-card__tags">
-                                <el-button
-                                    size="small"
-                                    :disabled="!hasManagePermission"
-                                    @click="openBindingDialog(row)"
-                                >
+                                <el-button v-permission size="small" @click="openBindingDialog(row)">
                                     + {{ $t('commons.button.add') }}
                                 </el-button>
                             </div>
@@ -106,17 +92,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
+import { computed, ref } from 'vue';
 import { deleteAgentRole, getConfiguredAgentRoles, unbindAgentRole } from '@/api/modules/ai';
 import { AI } from '@/api/interface/ai';
 import i18n from '@/lang';
 import { routerToFileWithPath } from '@/utils/router';
+import { hasManagePermissionAccess } from '@/utils/permission';
 import { MsgSuccess } from '@/utils/message';
 import CreateDialog from './create/index.vue';
 import BindingDialog from './binding/index.vue';
 import DetailDrawer from './detail/index.vue';
-const { hasManagePermission } = useMenuManagePermission();
 
 interface AgentRoleLoadParams {
     agentId: number;
@@ -136,6 +121,7 @@ const agentType = ref<AI.AgentType>('openclaw');
 const accountId = ref(0);
 const currentModel = ref('');
 const configuredAgents = ref<AI.AgentConfiguredAgentItem[]>([]);
+const canManageCurrentAgent = computed(() => hasManagePermissionAccess());
 
 const loadConfiguredAgents = async (id: number) => {
     const res = await getConfiguredAgentRoles({ agentId: id });
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/components/channel-bots.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/components/channel-bots.vue
index d5d76360e44c..6614b4cf7bfd 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/components/channel-bots.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/components/channel-bots.vue
@@ -2,7 +2,7 @@
     <div class="channel-bots">
         <div class="channel-bots__header">
             <span class="channel-bots__title">{{ title || t('aiTools.agents.bots') }}</span>
-            <el-button type="primary" link :disabled="addDisabled || !hasManagePermission" @click="openCreate">
+            <el-button v-permission type="primary" link :disabled="addDisabled" @click="openCreate">
                 {{ t('aiTools.agents.addBot') }}
             </el-button>
         </div>
@@ -32,8 +32,9 @@
             >
                 <template #default="{ row, $index }">
                     <el-switch
+                        v-permission
                         :model-value="row.enabled"
-                        :disabled="disabled || isBotActionDisabled(row) || !hasManagePermission"
+                        :disabled="disabled || isBotActionDisabled(row)"
                         @change="updateEnabled($index, $event)"
                     />
                 </template>
@@ -41,21 +42,16 @@
             <el-table-column :label="t('commons.table.operate')" width="240" fixed="right">
                 <template #default="{ row, $index }">
                     <div class="channel-bots__actions">
-                        <el-button
-                            link
-                            type="primary"
-                            :disabled="disabled || !hasManagePermission"
-                            @click="openEdit(row, $index)"
-                        >
+                        <el-button v-permission link type="primary" :disabled="disabled" @click="openEdit(row, $index)">
                             {{ t('commons.button.edit') }}
                         </el-button>
                         <el-button
                             v-if="approvable"
+                            v-permission
                             link
                             type="primary"
                             :disabled="
                                 disabled ||
-                                !hasManagePermission ||
                                 !row.enabled ||
                                 isBotActionDisabled(row) ||
                                 (approveDisabled ? approveDisabled(row) : false)
@@ -65,9 +61,8 @@
                             {{ t('aiTools.agents.approvePairing') }}
                         </el-button>
                         <el-button
-                            :disabled="
-                                disabled || !hasManagePermission || undeletableAccountIds.includes(row.accountId)
-                            "
+                            v-permission
+                            :disabled="disabled || undeletableAccountIds.includes(row.accountId)"
                             link
                             type="primary"
                             @click="removeBot($index)"
@@ -79,18 +74,19 @@
                             trigger="hover"
                             @command="handleMoreCommand(row, $index, $event)"
                         >
-                            <el-button link type="primary" :disabled="disabled || !hasManagePermission">
+                            <el-button v-permission link type="primary" :disabled="disabled">
                                 {{ t('tabs.more') }}
                             </el-button>
                             <template #dropdown>
                                 <el-dropdown-menu>
-                                    <el-dropdown-item
+                                    <fu-dropdown-item
                                         v-if="defaultable && !row.isDefault"
+                                        v-permission
                                         command="default"
-                                        :disabled="disabled || !hasManagePermission || isBotActionDisabled(row)"
+                                        :disabled="disabled || isBotActionDisabled(row)"
                                     >
                                         {{ t('aiTools.agents.setDefaultBot') }}
-                                    </el-dropdown-item>
+                                    </fu-dropdown-item>
                                 </el-dropdown-menu>
                             </template>
                         </el-dropdown>
@@ -102,23 +98,25 @@
         <DialogPro v-model="dialogVisible" :title="dialogTitle">
             <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
                 <el-form-item v-if="showNameField" :label="t('commons.table.name')" prop="name">
-                    <el-input v-model="form.name" :disabled="disabled || !hasManagePermission" />
+                    <el-input v-permission v-model="form.name" :disabled="disabled" />
                 </el-form-item>
                 <el-form-item :label="t('aiTools.agents.accountId')" prop="accountId">
                     <el-input
+                        v-permission
                         v-model="form.accountId"
-                        :disabled="disabled || !hasManagePermission || accountIdLocked"
+                        :disabled="disabled || accountIdLocked"
                         :placeholder="t('aiTools.agents.accountIdPlaceholder')"
                     />
                 </el-form-item>
                 <el-form-item :label="t('commons.table.status')">
-                    <el-switch v-model="form.enabled" :disabled="disabled || !hasManagePermission" />
+                    <el-switch v-permission v-model="form.enabled" :disabled="disabled" />
                 </el-form-item>
                 <el-form-item v-for="field in fields" :key="field.prop" :label="field.label" :prop="field.prop">
                     <el-select
                         v-if="field.type === 'select'"
+                        v-permission
                         v-model="form[field.prop]"
-                        :disabled="disabled || !hasManagePermission"
+                        :disabled="disabled"
                         :placeholder="field.placeholder"
                     >
                         <el-option
@@ -130,31 +128,34 @@
                     </el-select>
                     <el-input
                         v-else-if="field.type === 'password'"
+                        v-permission
                         v-model="form[field.prop]"
                         type="password"
                         show-password
-                        :disabled="disabled || !hasManagePermission"
+                        :disabled="disabled"
                         :placeholder="field.placeholder"
                     />
                     <el-input
                         v-else-if="field.type === 'textarea'"
+                        v-permission
                         v-model="form[field.prop]"
                         type="textarea"
                         :rows="3"
-                        :disabled="disabled || !hasManagePermission"
+                        :disabled="disabled"
                         :placeholder="field.placeholder"
                     />
                     <el-input
                         v-else
+                        v-permission
                         v-model="form[field.prop]"
-                        :disabled="disabled || !hasManagePermission"
+                        :disabled="disabled"
                         :placeholder="field.placeholder"
                     />
                 </el-form-item>
             </el-form>
             <template #footer>
                 <el-button @click="dialogVisible = false">{{ t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" :disabled="disabled || !hasManagePermission" @click="saveBot">
+                <el-button v-permission type="primary" :disabled="disabled" @click="saveBot">
                     {{ t('commons.button.save') }}
                 </el-button>
             </template>
@@ -166,11 +167,9 @@
 import { computed, reactive, ref } from 'vue';
 import type { FormInstance, FormRules } from 'element-plus';
 import type { PropType } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { Rules } from '@/global/form-rules';
 import { MsgWarning } from '@/utils/message';
-const { hasManagePermission } = useMenuManagePermission();
 
 interface ChannelBotField {
     prop: string;
@@ -311,8 +310,9 @@ const rules = computed<FormRules>(() => {
         config[field.prop] = [Rules.requiredInput];
     }
     if (props.uniqueFieldProp) {
+        const existingRules = config[props.uniqueFieldProp];
         config[props.uniqueFieldProp] = [
-            ...(config[props.uniqueFieldProp] || []),
+            ...(Array.isArray(existingRules) ? existingRules : existingRules ? [existingRules] : []),
             {
                 validator: (_rule, value, callback) => {
                     const exists = props.bots.some(
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/components/plugin-install.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/components/plugin-install.vue
index 370f5dbf6282..b35926998057 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/components/plugin-install.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/components/plugin-install.vue
@@ -8,7 +8,7 @@
         :description="t('aiTools.agents.pluginInstallNPMRegistryHelper')"
     />
     <el-form-item v-if="!installed" class="mt-4">
-        <el-button type="primary" :loading="installing" :disabled="!hasManagePermission" @click="handleInstall">
+        <el-button v-permission type="primary" :loading="installing" @click="handleInstall">
             {{ t('commons.button.install') }}
         </el-button>
     </el-form-item>
@@ -18,14 +18,7 @@
                 <span class="plugin-install-status__label">{{ t('app.version') }}</span>
                 <span class="plugin-install-status__value">{{ currentVersion || '-' }}</span>
             </div>
-            <el-button
-                type="danger"
-                plain
-                size="small"
-                :loading="uninstalling"
-                :disabled="!hasManagePermission"
-                @click="handleUninstall"
-            >
+            <el-button type="danger" plain size="small" :loading="uninstalling" v-permission @click="handleUninstall">
                 {{ t('commons.button.uninstall') }}
             </el-button>
         </div>
@@ -34,13 +27,7 @@
                 <span class="plugin-install-status__label">{{ t('app.newVersion') }}</span>
                 <span class="plugin-install-status__value">{{ latestVersion || '-' }}</span>
             </div>
-            <el-button
-                type="primary"
-                size="small"
-                :loading="upgrading"
-                :disabled="!hasManagePermission"
-                @click="handleUpgrade"
-            >
+            <el-button type="primary" size="small" :loading="upgrading" v-permission @click="handleUpgrade">
                 {{ t('commons.button.upgrade') }}
             </el-button>
         </div>
@@ -50,7 +37,6 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import TaskLog from '@/components/log/task/index.vue';
 
@@ -69,7 +55,6 @@ const props = defineProps<{
 }>();
 
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 const taskLogRef = ref();
 
 const openTaskLog = (taskID: string) => {
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/dingtalk.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/dingtalk.vue
index 97b38b781fd6..3fbbed2fdb52 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/dingtalk.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/dingtalk.vue
@@ -1,7 +1,7 @@
 <template>
     <el-form ref="formRef" v-loading="deleting" :model="form" :rules="rules" label-position="top">
         <el-form-item v-if="configured">
-            <el-button type="danger" plain :loading="deleting" :disabled="!hasManagePermission" @click="deleteChannel">
+            <el-button v-permission type="danger" plain :loading="deleting" @click="deleteChannel">
                 {{ t('commons.button.delete') }}
             </el-button>
         </el-form-item>
@@ -19,7 +19,7 @@
             </el-select>
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="save">
+            <el-button v-permission type="primary" :loading="saving" @click="save">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -29,13 +29,7 @@
                 <el-input v-model="pairingCode" :placeholder="t('aiTools.agents.pairingCodePlaceholder')" />
             </el-form-item>
             <el-form-item>
-                <el-button
-                    type="primary"
-                    plain
-                    :loading="approving"
-                    :disabled="!hasManagePermission"
-                    @click="approvePairing"
-                >
+                <el-button v-permission type="primary" plain :loading="approving" @click="approvePairing">
                     {{ t('aiTools.agents.approvePairing') }}
                 </el-button>
             </el-form-item>
@@ -46,7 +40,6 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import { ElMessageBox, type FormInstance } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import {
     approveAgentChannelPairing,
@@ -64,7 +57,6 @@ interface DingTalkForm {
 }
 
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 const formRef = ref<FormInstance>();
 const saving = ref(false);
 const approving = ref(false);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/discord.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/discord.vue
index f30dea2792d4..1f3272e203f0 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/discord.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/discord.vue
@@ -1,7 +1,7 @@
 <template>
     <el-form ref="formRef" v-loading="deleting" :model="form" :rules="rules" label-position="top">
         <el-form-item v-if="configured">
-            <el-button type="danger" plain :loading="deleting" :disabled="!hasManagePermission" @click="deleteChannel">
+            <el-button v-permission type="danger" plain :loading="deleting" @click="deleteChannel">
                 {{ t('commons.button.delete') }}
             </el-button>
         </el-form-item>
@@ -18,7 +18,7 @@
             <el-switch v-model="form.requireMention" />
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="save">
+            <el-button v-permission type="primary" :loading="saving" @click="save">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -28,13 +28,7 @@
                 <el-input v-model="pairingCode" :placeholder="t('aiTools.agents.pairingCodePlaceholder')" />
             </el-form-item>
             <el-form-item>
-                <el-button
-                    type="primary"
-                    plain
-                    :loading="approving"
-                    :disabled="!hasManagePermission"
-                    @click="approvePairing"
-                >
+                <el-button v-permission type="primary" plain :loading="approving" @click="approvePairing">
                     {{ t('aiTools.agents.approvePairing') }}
                 </el-button>
             </el-form-item>
@@ -45,7 +39,6 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import { ElMessageBox, type FormInstance } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import {
     approveAgentChannelPairing,
@@ -63,7 +56,6 @@ interface DiscordForm {
 }
 
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 const formRef = ref<FormInstance>();
 const saving = ref(false);
 const approving = ref(false);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/feishu.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/feishu.vue
index da9990838d2b..c5f699f12bae 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/feishu.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/feishu.vue
@@ -1,7 +1,7 @@
 <template>
     <el-form ref="formRef" v-loading="deleting" :model="form" :rules="rules" label-position="top">
         <el-form-item v-if="configured">
-            <el-button type="danger" plain :loading="deleting" :disabled="!hasManagePermission" @click="deleteChannel">
+            <el-button v-permission type="danger" plain :loading="deleting" @click="deleteChannel">
                 {{ t('commons.button.delete') }}
             </el-button>
         </el-form-item>
@@ -24,7 +24,7 @@
             </el-select>
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="save">
+            <el-button v-permission type="primary" :loading="saving" @click="save">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -34,13 +34,7 @@
                 <el-input v-model="pairingCode" :placeholder="t('aiTools.agents.pairingCodePlaceholder')" />
             </el-form-item>
             <el-form-item>
-                <el-button
-                    type="primary"
-                    plain
-                    :loading="approving"
-                    :disabled="!hasManagePermission"
-                    @click="approvePairing"
-                >
+                <el-button v-permission type="primary" plain :loading="approving" @click="approvePairing">
                     {{ t('aiTools.agents.approvePairing') }}
                 </el-button>
             </el-form-item>
@@ -51,7 +45,6 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import { ElMessageBox, type FormInstance } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import {
     approveAgentChannelPairing,
@@ -70,7 +63,6 @@ interface FeishuForm {
 }
 
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 const formRef = ref<FormInstance>();
 const saving = ref(false);
 const approving = ref(false);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/qq.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/qq.vue
index c2dfa3a9896e..43b745d7e873 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/qq.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/qq.vue
@@ -1,7 +1,7 @@
 <template>
     <el-form ref="formRef" v-loading="deleting" :model="form" :rules="rules" label-position="top">
         <el-form-item v-if="configured">
-            <el-button type="danger" plain :loading="deleting" :disabled="!hasManagePermission" @click="deleteChannel">
+            <el-button v-permission type="danger" plain :loading="deleting" @click="deleteChannel">
                 {{ t('commons.button.delete') }}
             </el-button>
         </el-form-item>
@@ -25,7 +25,7 @@
             </el-select>
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="save">
+            <el-button v-permission type="primary" :loading="saving" @click="save">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -35,13 +35,7 @@
                 <el-input v-model="pairingCode" :placeholder="t('aiTools.agents.pairingCodePlaceholder')" />
             </el-form-item>
             <el-form-item>
-                <el-button
-                    type="primary"
-                    plain
-                    :loading="approving"
-                    :disabled="!hasManagePermission"
-                    @click="approvePairing"
-                >
+                <el-button v-permission type="primary" plain :loading="approving" @click="approvePairing">
                     {{ t('aiTools.agents.approvePairing') }}
                 </el-button>
             </el-form-item>
@@ -52,7 +46,6 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import { ElMessageBox, type FormInstance } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import {
     approveAgentChannelPairing,
@@ -71,7 +64,6 @@ interface QQBotForm {
 }
 
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 const formRef = ref<FormInstance>();
 const saving = ref(false);
 const approving = ref(false);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/telegram.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/telegram.vue
index 156361916b9d..213c51e7ba27 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/telegram.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/telegram.vue
@@ -1,7 +1,7 @@
 <template>
     <el-form ref="formRef" v-loading="deleting" :model="form" :rules="rules" label-position="top">
         <el-form-item v-if="configured">
-            <el-button type="danger" plain :loading="deleting" :disabled="!hasManagePermission" @click="deleteChannel">
+            <el-button v-permission type="danger" plain :loading="deleting" @click="deleteChannel">
                 {{ t('commons.button.delete') }}
             </el-button>
         </el-form-item>
@@ -18,7 +18,7 @@
             <el-switch v-model="form.requireMention" />
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="save">
+            <el-button v-permission type="primary" :loading="saving" @click="save">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -28,13 +28,7 @@
                 <el-input v-model="pairingCode" :placeholder="t('aiTools.agents.pairingCodePlaceholder')" />
             </el-form-item>
             <el-form-item>
-                <el-button
-                    type="primary"
-                    plain
-                    :loading="approving"
-                    :disabled="!hasManagePermission"
-                    @click="approvePairing"
-                >
+                <el-button v-permission type="primary" plain :loading="approving" @click="approvePairing">
                     {{ t('aiTools.agents.approvePairing') }}
                 </el-button>
             </el-form-item>
@@ -45,7 +39,6 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import { ElMessageBox, type FormInstance } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import {
     approveAgentChannelPairing,
@@ -63,7 +56,6 @@ interface TelegramForm {
 }
 
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 const formRef = ref<FormInstance>();
 const saving = ref(false);
 const approving = ref(false);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/wecom.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/wecom.vue
index 43fc364dea21..e709e18754c1 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/wecom.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/wecom.vue
@@ -1,7 +1,7 @@
 <template>
     <el-form ref="formRef" v-loading="deleting" :model="form" :rules="rules" label-position="top">
         <el-form-item v-if="configured">
-            <el-button type="danger" plain :loading="deleting" :disabled="!hasManagePermission" @click="deleteChannel">
+            <el-button v-permission type="danger" plain :loading="deleting" @click="deleteChannel">
                 {{ t('commons.button.delete') }}
             </el-button>
         </el-form-item>
@@ -25,7 +25,7 @@
             </el-select>
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="save">
+            <el-button v-permission type="primary" :loading="saving" @click="save">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -35,13 +35,7 @@
                 <el-input v-model="pairingCode" :placeholder="t('aiTools.agents.pairingCodePlaceholder')" />
             </el-form-item>
             <el-form-item>
-                <el-button
-                    type="primary"
-                    plain
-                    :loading="approving"
-                    :disabled="!hasManagePermission"
-                    @click="approvePairing"
-                >
+                <el-button v-permission type="primary" plain :loading="approving" @click="approvePairing">
                     {{ t('aiTools.agents.approvePairing') }}
                 </el-button>
             </el-form-item>
@@ -52,7 +46,6 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import { ElMessageBox, type FormInstance } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import {
     approveAgentChannelPairing,
@@ -71,7 +64,6 @@ interface WecomForm {
 }
 
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 const formRef = ref<FormInstance>();
 const saving = ref(false);
 const approving = ref(false);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/weixin.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/weixin.vue
index 802a29904537..d4888a6430c5 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/weixin.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/hermes/weixin.vue
@@ -1,12 +1,12 @@
 <template>
     <el-form v-loading="deleting" label-position="top">
         <el-form-item v-if="configured">
-            <el-button type="danger" plain :loading="deleting" :disabled="!hasManagePermission" @click="deleteChannel">
+            <el-button v-permission type="danger" plain :loading="deleting" @click="deleteChannel">
                 {{ t('commons.button.delete') }}
             </el-button>
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="loggingIn" :disabled="!hasManagePermission" @click="loginChannel">
+            <el-button v-permission type="primary" :loading="loggingIn" @click="loginChannel">
                 {{ t('aiTools.agents.scanConnect') }}
             </el-button>
         </el-form-item>
@@ -18,7 +18,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { ElMessageBox } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { deleteAgentChannelConfig, getAgentWeixinConfig, loginAgentWeixinChannel } from '@/api/modules/ai';
 import TaskLog from '@/components/log/task/index.vue';
@@ -29,7 +28,6 @@ const props = defineProps<{
     agentId: number;
 }>();
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 const loggingIn = ref(false);
 const deleting = ref(false);
 const loginTaskLogRef = ref();
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/dingtalk.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/dingtalk.vue
index c7aee824b7fe..a42e930b94f9 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/dingtalk.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/dingtalk.vue
@@ -93,12 +93,7 @@
                 @save="saveChannel"
             />
             <el-form-item class="mt-4">
-                <el-button
-                    type="primary"
-                    :loading="saving"
-                    :disabled="!installed || !hasManagePermission"
-                    @click="saveChannel"
-                >
+                <el-button v-permission type="primary" :loading="saving" :disabled="!installed" @click="saveChannel">
                     {{ t('commons.button.save') }}
                 </el-button>
             </el-form-item>
@@ -109,7 +104,6 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue';
 import type { FormInstance, FormRules } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { AI } from '@/api/interface/ai';
 import { getAgentDingTalkConfig, updateAgentDingTalkConfig } from '@/api/modules/ai';
@@ -121,8 +115,6 @@ import VersionSupport from '../../components/version-support.vue';
 import { useAgentPluginChannel } from './useAgentPluginChannel';
 import ChannelBots from '../components/channel-bots.vue';
 
-const { hasManagePermission } = useMenuManagePermission();
-
 interface DingTalkForm extends Omit<AI.AgentDingTalkConfig, 'installed' | 'allowFrom' | 'groupAllowFrom'> {
     allowFromText: string;
     groupAllowFromText: string;
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/discord.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/discord.vue
index 950ee242be5e..19901ff1c43f 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/discord.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/discord.vue
@@ -33,7 +33,7 @@
             @approve="approvePairing"
         />
         <el-form-item class="mt-4">
-            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="saveChannel">
+            <el-button v-permission type="primary" :loading="saving" @click="saveChannel">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -53,7 +53,6 @@ import { Rules } from '@/global/form-rules';
 import ChannelBots from '../components/channel-bots.vue';
 
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 type BotField = {
     prop: string;
     label: string;
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/feishu.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/feishu.vue
index a4c081aaafe9..7bce8b28e4f8 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/feishu.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/feishu.vue
@@ -75,12 +75,7 @@
                 @approve="approvePairing"
             />
             <el-form-item class="mt-4">
-                <el-button
-                    type="primary"
-                    :loading="saving"
-                    :disabled="!installed || !hasManagePermission"
-                    @click="saveChannel"
-                >
+                <el-button v-permission type="primary" :loading="saving" :disabled="!installed" @click="saveChannel">
                     {{ t('commons.button.save') }}
                 </el-button>
             </el-form-item>
@@ -92,7 +87,6 @@
 import { computed, reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
 import { ElMessageBox } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { AI } from '@/api/interface/ai';
 import { approveAgentChannelPairing, getAgentFeishuConfig, updateAgentFeishuConfig } from '@/api/modules/ai';
@@ -103,7 +97,6 @@ import { useAgentPluginChannel } from './useAgentPluginChannel';
 import ChannelBots from '../components/channel-bots.vue';
 
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 
 type BotField = {
     prop: string;
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/qq.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/qq.vue
index 05620c7cce71..c71391355b10 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/qq.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/qq.vue
@@ -34,12 +34,7 @@
                 @save="saveChannel"
             />
             <el-form-item class="mt-4">
-                <el-button
-                    type="primary"
-                    :loading="saving"
-                    :disabled="!installed || !hasManagePermission"
-                    @click="saveChannel"
-                >
+                <el-button v-permission type="primary" :loading="saving" :disabled="!installed" @click="saveChannel">
                     {{ t('commons.button.save') }}
                 </el-button>
             </el-form-item>
@@ -49,7 +44,6 @@
 
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { AI } from '@/api/interface/ai';
 import { getAgentQQBotConfig, updateAgentQQBotConfig } from '@/api/modules/ai';
@@ -76,7 +70,6 @@ interface QQBotForm {
 }
 
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 const saving = ref(false);
 const {
     agentId,
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/telegram.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/telegram.vue
index 0431d777f249..6d12dd46db68 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/telegram.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/telegram.vue
@@ -67,7 +67,7 @@
             @approve="approvePairing"
         />
         <el-form-item class="mt-4">
-            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="saveChannel">
+            <el-button v-permission type="primary" :loading="saving" @click="saveChannel">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -87,7 +87,6 @@ import { Rules } from '@/global/form-rules';
 import ChannelBots from '../components/channel-bots.vue';
 
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 
 type BotField = {
     prop: string;
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/wecom.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/wecom.vue
index f2ef9867dd7a..d040b29138e5 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/wecom.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/wecom.vue
@@ -65,12 +65,7 @@
                 <el-input v-model="form.secret" type="password" show-password />
             </el-form-item>
             <el-form-item>
-                <el-button
-                    type="primary"
-                    :loading="saving"
-                    :disabled="!installed || !hasManagePermission"
-                    @click="saveChannel"
-                >
+                <el-button v-permission type="primary" :loading="saving" :disabled="!installed" @click="saveChannel">
                     {{ t('commons.button.save') }}
                 </el-button>
             </el-form-item>
@@ -83,9 +78,10 @@
                 </el-form-item>
                 <el-form-item>
                     <el-button
+                        v-permission
                         type="primary"
                         :loading="approving"
-                        :disabled="!installed || !hasManagePermission"
+                        :disabled="!installed"
                         @click="approvePairing"
                     >
                         {{ t('aiTools.agents.approvePairing') }}
@@ -99,7 +95,6 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { AI } from '@/api/interface/ai';
 import { approveAgentChannelPairing, getAgentWecomConfig, updateAgentWecomConfig } from '@/api/modules/ai';
@@ -114,7 +109,6 @@ interface WecomForm extends Omit<AI.AgentWecomConfig, 'installed' | 'allowFrom'
 }
 
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 const saving = ref(false);
 const approving = ref(false);
 const pairingCode = ref('');
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/weixin.vue b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/weixin.vue
index 40533ef8a61d..59d5c72db93a 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/weixin.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/channels/openclaw/weixin.vue
@@ -17,9 +17,10 @@
         <template v-if="installed">
             <el-form-item class="mt-4">
                 <el-button
+                    v-permission
                     type="primary"
                     :loading="loggingIn"
-                    :disabled="!installed || !hasManagePermission"
+                    :disabled="!installed"
                     @click="loginChannel"
                 >
                     {{ t('aiTools.agents.scanConnect') }}
@@ -33,7 +34,6 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { loginAgentWeixinChannel } from '@/api/modules/ai';
 import { newUUID } from '@/utils/id';
@@ -49,7 +49,6 @@ const props = defineProps<{
 }>();
 
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 const loggingIn = ref(false);
 const loginTaskLogRef = ref();
 const {
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/model.vue b/frontend/src/views/ai/agents/agent/config/tabs/model.vue
index f3a7e1b8eb73..f4cfe4f7194e 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/model.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/model.vue
@@ -22,12 +22,7 @@
                             :value="item.id"
                         />
                     </el-select>
-                    <el-button
-                        type="primary"
-                        plain
-                        :disabled="!fallbackCandidate || !hasManagePermission"
-                        @click="addFallback"
-                    >
+                    <el-button v-permission type="primary" plain :disabled="!fallbackCandidate" @click="addFallback">
                         {{ t('aiTools.agents.addFallbackModel') }}
                     </el-button>
                 </div>
@@ -51,12 +46,7 @@
                                 :disabled="$index === fallbackRows.length - 1"
                                 @click="moveFallback($index, 1)"
                             />
-                            <el-button
-                                link
-                                :icon="Delete"
-                                :disabled="!hasManagePermission"
-                                @click="removeFallback($index)"
-                            />
+                            <el-button v-permission link :icon="Delete" @click="removeFallback($index)" />
                         </template>
                     </el-table-column>
                     <template #empty>
@@ -66,7 +56,7 @@
             </div>
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="saveModel">
+            <el-button v-permission type="primary" :loading="saving" @click="saveModel">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -77,7 +67,6 @@
 import { computed, reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
 import { ArrowDown, ArrowUp, Delete } from '@element-plus/icons-vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { AI } from '@/api/interface/ai';
 import { getAgentModelConfig, pageAgentAccounts, updateAgentModelConfig } from '@/api/modules/ai';
@@ -87,7 +76,6 @@ import { useGlobalStore } from '@/composables/useGlobalStore';
 
 const emit = defineEmits(['updated']);
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 const saving = ref(false);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/settings/config-file.vue b/frontend/src/views/ai/agents/agent/config/tabs/settings/config-file.vue
index 1be08f5aa1f6..aa0cccc804b1 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/settings/config-file.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/settings/config-file.vue
@@ -9,7 +9,7 @@
             :placeholder="t('commons.msg.noneData')"
         />
         <div class="mt-4">
-            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="confirmSave">
+            <el-button v-permission type="primary" :loading="saving" @click="confirmSave">
                 {{ t('commons.button.save') }}
             </el-button>
         </div>
@@ -19,7 +19,6 @@
 
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
@@ -28,7 +27,6 @@ import { getAgentConfigFile, updateAgentConfigFile } from '@/api/modules/ai';
 import { MsgSuccess } from '@/utils/message';
 
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 const loading = ref(false);
 const saving = ref(false);
 const agentId = ref(0);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/settings/other.vue b/frontend/src/views/ai/agents/agent/config/tabs/settings/other.vue
index 258ead08b22e..21169a380dd4 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/settings/other.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/settings/other.vue
@@ -13,7 +13,7 @@
             <el-input v-model="form.userTimezone" />
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="saveConfig">
+            <el-button v-permission type="primary" :loading="saving" @click="saveConfig">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -24,7 +24,6 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { Rules } from '@/global/form-rules';
 import { AI } from '@/api/interface/ai';
@@ -32,7 +31,6 @@ import { getAgentOtherConfig, updateAgentOtherConfig } from '@/api/modules/ai';
 import { MsgSuccess } from '@/utils/message';
 
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 const loading = ref(false);
 const saving = ref(false);
 const agentId = ref(0);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/settings/security.vue b/frontend/src/views/ai/agents/agent/config/tabs/settings/security.vue
index 32206e870225..f59b00d2c280 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/settings/security.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/settings/security.vue
@@ -9,7 +9,7 @@
             />
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" :loading="saving" :disabled="!hasManagePermission" @click="saveConfig">
+            <el-button v-permission type="primary" :loading="saving" @click="saveConfig">
                 {{ t('commons.button.save') }}
             </el-button>
         </el-form-item>
@@ -19,14 +19,12 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { getAgentSecurityConfig, updateAgentSecurityConfig } from '@/api/modules/ai';
 import { MsgSuccess } from '@/utils/message';
 import { buildDefaultAllowedOrigin, parseAllowedOriginsInput, validateAllowedOriginsInput } from '@/utils/agent';
 
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 const loading = ref(false);
 const saving = ref(false);
 const agentId = ref(0);
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/skills/hermes.vue b/frontend/src/views/ai/agents/agent/config/tabs/skills/hermes.vue
index f2f4186e61d4..37fe35e30627 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/skills/hermes.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/skills/hermes.vue
@@ -56,10 +56,10 @@
                                 <div class="skill-head">
                                     <div class="skill-name">{{ skill.name }}</div>
                                     <el-button
+                                        v-permission
                                         v-if="skill.uninstallable"
                                         link
                                         type="danger"
-                                        :disabled="!hasManagePermission"
                                         :loading="uninstallingSkill === skill.name"
                                         @click="uninstallSkill(skill)"
                                     >
@@ -98,9 +98,9 @@
                                 <div class="skill-slug">{{ skill.identifier || skill.slug }}</div>
                             </div>
                             <el-button
+                                v-permission
                                 type="primary"
                                 link
-                                :disabled="!hasManagePermission"
                                 :loading="installingSkill === (skill.identifier || skill.slug)"
                                 @click="installSkill(skill)"
                             >
@@ -136,7 +136,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { Refresh, Search } from '@element-plus/icons-vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { AI } from '@/api/interface/ai';
 import { installAgentSkill, listAgentSkills, searchAgentSkills, uninstallAgentSkill } from '@/api/modules/ai';
@@ -148,7 +147,6 @@ type SkillViewMode = 'installed' | 'market';
 type HermesSkillMarketSource = 'official' | 'skills-sh';
 
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 const loading = ref(false);
 const searching = ref(false);
 const mode = ref<SkillViewMode>('market');
@@ -391,6 +389,7 @@ defineExpose({
     display: -webkit-box;
     overflow: hidden;
     text-overflow: ellipsis;
+    line-clamp: 2;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }
diff --git a/frontend/src/views/ai/agents/agent/config/tabs/skills/openclaw.vue b/frontend/src/views/ai/agents/agent/config/tabs/skills/openclaw.vue
index f2c83d574b8f..f4da3c1d577c 100644
--- a/frontend/src/views/ai/agents/agent/config/tabs/skills/openclaw.vue
+++ b/frontend/src/views/ai/agents/agent/config/tabs/skills/openclaw.vue
@@ -61,8 +61,8 @@
                                 <div class="skill-head">
                                     <div class="skill-name">{{ skill.name }}</div>
                                     <el-switch
+                                        v-permission
                                         :model-value="!skill.disabled"
-                                        :disabled="!hasManagePermission"
                                         :loading="updatingSkill === skill.name"
                                         @change="(value) => toggleSkill(skill, Boolean(value))"
                                     />
@@ -100,9 +100,9 @@
                                 <div class="skill-slug">{{ skill.slug }}</div>
                             </div>
                             <el-button
+                                v-permission
                                 type="primary"
                                 link
-                                :disabled="!hasManagePermission"
                                 :loading="installingSkill === skill.slug"
                                 @click="installSkill(skill)"
                             >
@@ -144,7 +144,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { Refresh, Search } from '@element-plus/icons-vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { useI18n } from 'vue-i18n';
 import { AI } from '@/api/interface/ai';
 import { installAgentSkill, listAgentSkills, searchAgentSkills, updateAgentSkill } from '@/api/modules/ai';
@@ -165,7 +164,6 @@ const props = defineProps<{
 }>();
 
 const { t } = useI18n();
-const { hasManagePermission } = useMenuManagePermission();
 const { isIntl } = useGlobalStore();
 const loading = ref(false);
 const searching = ref(false);
@@ -434,6 +432,7 @@ defineExpose({
     display: -webkit-box;
     overflow: hidden;
     text-overflow: ellipsis;
+    line-clamp: 2;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     color: var(--el-text-color-secondary);
diff --git a/frontend/src/views/ai/agents/agent/delete/index.vue b/frontend/src/views/ai/agents/agent/delete/index.vue
index 39593938e24a..c2d60f43989d 100644
--- a/frontend/src/views/ai/agents/agent/delete/index.vue
+++ b/frontend/src/views/ai/agents/agent/delete/index.vue
@@ -16,7 +16,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="submit" :loading="loading" :disabled="!hasManagePermission">
+                <el-button v-permission type="primary" @click="submit" :loading="loading">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -28,14 +28,12 @@
 <script setup lang="ts">
 import { FormInstance } from 'element-plus';
 import { ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { deleteAgent } from '@/api/modules/ai';
 import { newUUID } from '@/utils/id';
 import TaskLog from '@/components/log/task/index.vue';
 
 const open = ref(false);
 const loading = ref(false);
-const { hasManagePermission } = useMenuManagePermission();
 const taskLogRef = ref();
 const agentName = ref('');
 const deleteForm = ref<FormInstance>();
diff --git a/frontend/src/views/ai/agents/agent/index.vue b/frontend/src/views/ai/agents/agent/index.vue
index ddf616a27575..fb6395e5c6b7 100644
--- a/frontend/src/views/ai/agents/agent/index.vue
+++ b/frontend/src/views/ai/agents/agent/index.vue
@@ -4,7 +4,7 @@
         <DockerStatus v-model:isActive="isActive" v-model:isExist="isExist" />
         <LayoutContent v-loading="loading" v-if="isExist" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" @click="openCreate" :disabled="noApp || !hasManagePermission">
+                <el-button v-permission type="primary" @click="openCreate" :disabled="noApp">
                     {{ $t('commons.button.create') }}
                 </el-button>
             </template>
@@ -36,27 +36,30 @@
                     <el-table-column :label="$t('commons.table.status')" prop="status" width="120">
                         <template #default="{ row }">
                             <el-dropdown placement="bottom">
-                                <Status :status="row.status" :disabled="!hasManagePermission" :operate="true" />
+                                <Status v-permission :status="row.status" :operate="true" />
                                 <template #dropdown>
                                     <el-dropdown-menu>
-                                        <el-dropdown-item
-                                            :disabled="checkStatus('start', row) || !hasManagePermission"
+                                        <fu-dropdown-item
+                                            v-permission
+                                            :disabled="checkStatus('start', row)"
                                             @click="onOperate(row, 'start')"
                                         >
                                             {{ $t('commons.operate.start') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item
-                                            :disabled="checkStatus('stop', row) || !hasManagePermission"
+                                        </fu-dropdown-item>
+                                        <fu-dropdown-item
+                                            v-permission
+                                            :disabled="checkStatus('stop', row)"
                                             @click="onOperate(row, 'stop')"
                                         >
                                             {{ $t('commons.operate.stop') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item
-                                            :disabled="checkStatus('restart', row) || !hasManagePermission"
+                                        </fu-dropdown-item>
+                                        <fu-dropdown-item
+                                            v-permission
+                                            :disabled="checkStatus('restart', row)"
                                             @click="onOperate(row, 'restart')"
                                         >
                                             {{ $t('commons.button.restart') }}
-                                        </el-dropdown-item>
+                                        </fu-dropdown-item>
                                     </el-dropdown-menu>
                                 </template>
                             </el-dropdown>
@@ -67,7 +70,7 @@
                             <div class="version-cell">
                                 <span>{{ row.appVersion }}</span>
                                 <el-button
-                                    :disabled="!hasManagePermission"
+                                    v-permission
                                     v-if="row.upgradable"
                                     link
                                     type="primary"
@@ -140,42 +143,37 @@
                                     link
                                     type="primary"
                                     class="website-link-cell__unbind"
-                                    :disabled="!hasManagePermission"
+                                    v-permission
                                     @click="onUnbindWebsite(row)"
                                 >
                                     {{ $t('commons.button.unbind') }}
                                 </el-button>
                             </div>
-                            <el-button
-                                v-else
-                                link
-                                type="primary"
-                                :disabled="!hasManagePermission"
-                                @click="openBindWebsite(row)"
-                            >
+                            <el-button v-else link type="primary" v-permission @click="openBindWebsite(row)">
                                 {{ $t('commons.button.bind') }}
                             </el-button>
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('website.remark')" prop="remark" min-width="150">
                         <template #default="{ row }">
-                            <fu-read-write-switch :write-trigger="hasManagePermission ? 'onClick' : 'disabled'">
+                            <fu-read-write-switch v-permission>
                                 <template #read>
                                     <MsgInfo :info="row.remark" :width="'150'" />
                                 </template>
                                 <template #default="{ read }">
-                                    <el-input
-                                        v-model="row.remark"
-                                        :disabled="!hasManagePermission"
-                                        @blur="handleUpdateRemark(row, read)"
-                                    />
+                                    <el-input v-model="row.remark" @blur="handleUpdateRemark(row, read)" />
                                 </template>
                             </fu-read-write-switch>
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('runtime.workDir')" min-width="90">
                         <template #default="{ row }">
-                            <el-button :disabled="!hasFilePermission" type="primary" link @click="openWorkDir(row)">
+                            <el-button
+                                v-permission:view="'host_file_view'"
+                                type="primary"
+                                link
+                                @click="openWorkDir(row)"
+                            >
                                 <el-icon>
                                     <FolderOpened />
                                 </el-icon>
@@ -186,12 +184,7 @@
                         <template #default="{ row }">
                             <el-space v-if="supportsAgentToken(row.agentType)">
                                 <CopyButton :content="row.token" />
-                                <el-button
-                                    :disabled="!hasManagePermission"
-                                    link
-                                    type="primary"
-                                    @click="onResetToken(row)"
-                                >
+                                <el-button v-permission link type="primary" @click="onResetToken(row)">
                                     {{ $t('commons.button.reset') }}
                                 </el-button>
                             </el-space>
@@ -233,7 +226,6 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { deleteAgentCheck, pageAgents, resetAgentToken, unbindAgentWebsite, updateAgentRemark } from '@/api/modules/ai';
 import { checkAppInstalled, installedOp, searchApp, searchAppInstalled } from '@/api/modules/app';
 import { AI } from '@/api/interface/ai';
@@ -288,8 +280,6 @@ const hermesChatRef = ref();
 const dialogPortJumpRef = ref();
 const route = useRoute();
 const router = useRouter();
-const { hasManagePermission } = useMenuManagePermission();
-const { hasPermission: hasFilePermission } = useMenuManagePermission('host_file_view');
 const isActive = ref(false);
 const isExist = ref(false);
 const noApp = ref(false);
@@ -335,28 +325,31 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.operate.start'),
+        permission: true,
         click: (row: AI.AgentItem) => onOperate(row, 'start'),
-        disabled: (row: AI.AgentItem) => row.status === 'Running' || !hasManagePermission.value,
+        disabled: (row: AI.AgentItem) => row.status === 'Running',
     },
     {
         label: i18n.global.t('commons.operate.stop'),
+        permission: true,
         click: (row: AI.AgentItem) => onOperate(row, 'stop'),
-        disabled: (row: AI.AgentItem) => row.status !== 'Running' || !hasManagePermission.value,
+        disabled: (row: AI.AgentItem) => row.status !== 'Running',
     },
     {
         label: i18n.global.t('commons.operate.restart'),
+        permission: true,
         click: (row: AI.AgentItem) => onOperate(row, 'restart'),
-        disabled: () => !hasManagePermission.value,
     },
     {
         label: i18n.global.t('commons.button.upgrade'),
+        permission: true,
         click: (row: AI.AgentItem) => openUpgrade(row),
-        disabled: (row: AI.AgentItem) => !row.upgradable || !hasManagePermission.value,
+        disabled: (row: AI.AgentItem) => !row.upgradable,
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        permission: true,
         click: (row: AI.AgentItem) => onDelete(row),
-        disabled: () => !hasManagePermission.value,
     },
 ];
 
diff --git a/frontend/src/views/ai/agents/agent/website/index.vue b/frontend/src/views/ai/agents/agent/website/index.vue
index 0b378870549e..3a928c598025 100644
--- a/frontend/src/views/ai/agents/agent/website/index.vue
+++ b/frontend/src/views/ai/agents/agent/website/index.vue
@@ -22,7 +22,7 @@
             <el-button @click="open = false" :disabled="loading">
                 {{ $t('commons.button.cancel') }}
             </el-button>
-            <el-button type="primary" @click="submit" :disabled="loading || !hasManagePermission">
+            <el-button v-permission type="primary" @click="submit" :disabled="loading">
                 {{ $t('commons.button.confirm') }}
             </el-button>
         </template>
@@ -32,7 +32,6 @@
 <script setup lang="ts">
 import { FormInstance, FormRules } from 'element-plus';
 import { reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { AI } from '@/api/interface/ai';
 import { Website } from '@/api/interface/website';
 import { bindAgentWebsite } from '@/api/modules/ai';
@@ -43,7 +42,6 @@ import i18n from '@/lang';
 
 const open = ref(false);
 const loading = ref(false);
-const { hasManagePermission } = useMenuManagePermission();
 const agentName = ref('');
 const websites = ref<Website.WebsiteOption[]>([]);
 const formRef = ref<FormInstance>();
diff --git a/frontend/src/views/ai/agents/model/add/index.vue b/frontend/src/views/ai/agents/model/add/index.vue
index be50cb3181b4..f9ea5fb56409 100644
--- a/frontend/src/views/ai/agents/model/add/index.vue
+++ b/frontend/src/views/ai/agents/model/add/index.vue
@@ -70,7 +70,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button :disabled="loading" @click="open = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="submit">
+                <el-button v-permission :disabled="loading" type="primary" @click="submit">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -81,7 +81,6 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue';
 import { FormInstance } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { AI } from '@/api/interface/ai';
 import { Rules } from '@/global/form-rules';
 import { createAgentAccount, getAgentProviders, updateAgentAccount } from '@/api/modules/ai';
@@ -91,7 +90,6 @@ import { MsgError } from '@/utils/message';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 
 const emit = defineEmits(['search']);
-const { hasManagePermission } = useMenuManagePermission();
 
 const open = ref(false);
 const formRef = ref<FormInstance>();
diff --git a/frontend/src/views/ai/agents/model/index.vue b/frontend/src/views/ai/agents/model/index.vue
index 6ba377622757..0e8a0cf788e6 100644
--- a/frontend/src/views/ai/agents/model/index.vue
+++ b/frontend/src/views/ai/agents/model/index.vue
@@ -2,7 +2,7 @@
     <div>
         <LayoutContent>
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
+                <el-button v-permission type="primary" @click="openCreate">
                     {{ $t('commons.button.create') }}
                 </el-button>
             </template>
@@ -53,7 +53,6 @@
 
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { deleteAgentAccount, pageAgentAccounts } from '@/api/modules/ai';
 import { AI } from '@/api/interface/ai';
 import AddDialog from '@/views/ai/agents/model/add/index.vue';
@@ -67,12 +66,11 @@ const items = ref<AI.AgentAccountItem[]>([]);
 const addRef = ref();
 const modelPoolRef = ref();
 const searchName = ref('');
-const { hasManagePermission } = useMenuManagePermission();
 
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: AI.AgentAccountItem) => onEdit(row),
     },
     {
@@ -81,7 +79,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: AI.AgentAccountItem) => onDelete(row),
     },
 ];
diff --git a/frontend/src/views/ai/agents/model/pool/index.vue b/frontend/src/views/ai/agents/model/pool/index.vue
index 1ceb823e7904..ce934c1d46af 100644
--- a/frontend/src/views/ai/agents/model/pool/index.vue
+++ b/frontend/src/views/ai/agents/model/pool/index.vue
@@ -3,7 +3,7 @@
         <template #content>
             <div v-loading="loading">
                 <div class="toolbar">
-                    <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
+                    <el-button v-permission type="primary" @click="openCreate">
                         {{ $t('commons.button.add') }}
                     </el-button>
                 </div>
@@ -62,7 +62,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button :disabled="saving" @click="editorOpen = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="saving || !hasManagePermission" type="primary" @click="submit">
+                <el-button v-permission :disabled="saving" type="primary" @click="submit">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -74,7 +74,6 @@
 import { computed, reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
 import { ElMessageBox } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import {
     createAgentAccountModel,
     deleteAgentAccountModel,
@@ -86,7 +85,6 @@ import i18n from '@/lang';
 import { MsgError } from '@/utils/message';
 import { getAgentProviderDisplayName } from '@/utils/agent';
 import { Rules } from '@/global/form-rules';
-const { hasManagePermission } = useMenuManagePermission();
 
 const emit = defineEmits(['updated']);
 
@@ -133,12 +131,12 @@ const rules = reactive({
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: AI.AgentAccountModel) => openEdit(row),
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: AI.AgentAccountModel) => onDelete(row),
     },
 ];
diff --git a/frontend/src/views/ai/mcp/server/bind/index.vue b/frontend/src/views/ai/mcp/server/bind/index.vue
index c34bd538b45c..b30bb61f3d60 100644
--- a/frontend/src/views/ai/mcp/server/bind/index.vue
+++ b/frontend/src/views/ai/mcp/server/bind/index.vue
@@ -80,7 +80,7 @@
             <el-button @click="handleClose">
                 {{ $t('commons.button.cancel') }}
             </el-button>
-            <el-button type="primary" :disabled="!hasManagePermission" @click="onSubmit(formRef)">
+            <el-button v-permission type="primary" @click="onSubmit(formRef)">
                 {{ $t('commons.button.add') }}
             </el-button>
         </template>
@@ -90,7 +90,6 @@
 <script lang="ts" setup>
 import { Website } from '@/api/interface/website';
 import { listSSL, searchAcmeAccount } from '@/api/modules/website';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Rules } from '@/global/form-rules';
 import { FormInstance, FormRules } from 'element-plus';
 import { reactive, ref } from 'vue';
@@ -99,7 +98,6 @@ import { dateFormatSimple } from '@/utils/date';
 import { bindMcpDomain, getMcpDomain, updateMcpDomain } from '@/api/modules/ai';
 import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
-const { hasManagePermission } = useMenuManagePermission();
 
 type SSLItem = Website.SSL & { organization?: string };
 
diff --git a/frontend/src/views/ai/mcp/server/import/index.vue b/frontend/src/views/ai/mcp/server/import/index.vue
index 50d84d499290..696f6c77f320 100644
--- a/frontend/src/views/ai/mcp/server/import/index.vue
+++ b/frontend/src/views/ai/mcp/server/import/index.vue
@@ -27,7 +27,7 @@
                 <el-button @click="onCancel">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="onConfirm">
+                <el-button v-permission type="primary" @click="onConfirm">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -38,10 +38,8 @@
 <script lang="ts" setup>
 import i18n from '@/lang';
 import { ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const submitVisible = ref(false);
-const { hasManagePermission } = useMenuManagePermission();
 const mcpServerJson = ref();
 const mcpServerConfig = ref();
 
diff --git a/frontend/src/views/ai/mcp/server/index.vue b/frontend/src/views/ai/mcp/server/index.vue
index 02053b299ec3..742f76d03c72 100644
--- a/frontend/src/views/ai/mcp/server/index.vue
+++ b/frontend/src/views/ai/mcp/server/index.vue
@@ -4,10 +4,10 @@
         <LayoutContent :title="'Servers'" v-loading="loading">
             <template #leftToolBar>
                 <div class="flex flex-wrap gap-3">
-                    <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
+                    <el-button v-permission type="primary" @click="openCreate">
                         {{ $t('commons.button.create') }}
                     </el-button>
-                    <el-button type="primary" plain :disabled="!hasManagePermission" @click="openDomain">
+                    <el-button v-permission type="primary" plain @click="openDomain">
                         {{ $t('aiTools.mcp.bindDomain') }}
                     </el-button>
                 </div>
@@ -136,46 +136,48 @@ const getUrl = (row: AI.McpServer) => {
 const buttons = [
     {
         label: i18n.global.t('menu.config'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: AI.McpServer) => {
             openConfig(row);
         },
     },
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: AI.McpServer) => {
             openDetail(row);
         },
     },
     {
         label: i18n.global.t('commons.button.start'),
+        permission: true,
         click: (row: AI.McpServer) => {
             opServer(row, 'start');
         },
         disabled: (row: AI.McpServer) => {
-            return row.status === 'Running' || !hasManagePermission.value;
+            return row.status === 'Running';
         },
     },
     {
         label: i18n.global.t('commons.button.stop'),
+        permission: true,
         click: (row: AI.McpServer) => {
             opServer(row, 'stop');
         },
         disabled: (row: AI.McpServer) => {
-            return row.status === 'Stopped' || !hasManagePermission.value;
+            return row.status === 'Stopped';
         },
     },
     {
         label: i18n.global.t('commons.button.restart'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: AI.McpServer) => {
             opServer(row, 'restart');
         },
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: AI.McpServer) => {
             deleteServer(row);
         },
diff --git a/frontend/src/views/ai/mcp/server/operate/index.vue b/frontend/src/views/ai/mcp/server/operate/index.vue
index 1e8f04251f55..48149df4ba7b 100644
--- a/frontend/src/views/ai/mcp/server/operate/index.vue
+++ b/frontend/src/views/ai/mcp/server/operate/index.vue
@@ -15,7 +15,7 @@
             v-loading="loading"
         >
             <el-form-item>
-                <el-button :disabled="!hasManagePermission" @click="importRef.acceptParams()" type="primary" plain>
+                <el-button v-permission @click="importRef.acceptParams()" type="primary" plain>
                     {{ $t('aiTools.mcp.importMcpJson') }}
                 </el-button>
             </el-form-item>
@@ -60,13 +60,7 @@
                         </el-col>
                         <el-col :span="4">
                             <el-form-item>
-                                <el-button
-                                    type="primary"
-                                    :disabled="!hasManagePermission"
-                                    @click="removeEnv(index)"
-                                    link
-                                    class="mt-1"
-                                >
+                                <el-button v-permission type="primary" @click="removeEnv(index)" link class="mt-1">
                                     {{ $t('commons.button.delete') }}
                                 </el-button>
                             </el-form-item>
@@ -74,7 +68,7 @@
                     </el-row>
                     <el-row :gutter="20">
                         <el-col :span="4">
-                            <el-button class="mb-2" :disabled="!hasManagePermission" @click="addEnv">
+                            <el-button v-permission class="mb-2" @click="addEnv">
                                 {{ $t('commons.button.add') }}
                             </el-button>
                         </el-col>
@@ -136,7 +130,7 @@
         <template #footer>
             <span>
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="submit(mcpServerForm)" :disabled="loading || !hasManagePermission">
+                <el-button v-permission type="primary" @click="submit(mcpServerForm)" :disabled="loading">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -148,7 +142,6 @@
 <script lang="ts" setup>
 import { AI } from '@/api/interface/ai';
 import { createMcpServer, getMcpDomain, updateMcpServer } from '@/api/modules/ai';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
@@ -156,7 +149,6 @@ import { FormInstance } from 'element-plus';
 import { ref, watch } from 'vue';
 import Volumes from '../volume/index.vue';
 import Import from '../import/index.vue';
-const { hasManagePermission } = useMenuManagePermission();
 
 const open = ref(false);
 const mode = ref('create');
diff --git a/frontend/src/views/ai/mcp/server/volume/index.vue b/frontend/src/views/ai/mcp/server/volume/index.vue
index 883bd8add20e..7653118e6796 100644
--- a/frontend/src/views/ai/mcp/server/volume/index.vue
+++ b/frontend/src/views/ai/mcp/server/volume/index.vue
@@ -15,13 +15,7 @@
                 </el-col>
                 <el-col :span="4">
                     <el-form-item>
-                        <el-button
-                            type="primary"
-                            :disabled="!hasManagePermission"
-                            @click="removeEnv(index)"
-                            link
-                            class="mt-1"
-                        >
+                        <el-button v-permission type="primary" @click="removeEnv(index)" link class="mt-1">
                             {{ $t('commons.button.delete') }}
                         </el-button>
                     </el-form-item>
@@ -29,7 +23,7 @@
             </el-row>
             <el-row :gutter="20">
                 <el-col :span="4">
-                    <el-button :disabled="!hasManagePermission" @click="addEnv">
+                    <el-button v-permission @click="addEnv">
                         {{ $t('commons.button.add') }}
                     </el-button>
                 </el-col>
@@ -41,7 +35,6 @@
 <script setup lang="ts">
 import { reactive } from 'vue';
 import { FormRules } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Rules } from '@/global/form-rules';
 import { AI } from '@/api/interface/ai';
 
@@ -51,7 +44,6 @@ const props = defineProps({
         required: true,
     },
 });
-const { hasManagePermission } = useMenuManagePermission();
 
 const rules = reactive<FormRules>({
     value: [Rules.requiredInput],
diff --git a/frontend/src/views/ai/model/ollama/add/index.vue b/frontend/src/views/ai/model/ollama/add/index.vue
index 4a5d9c32c765..29a046239ef5 100644
--- a/frontend/src/views/ai/model/ollama/add/index.vue
+++ b/frontend/src/views/ai/model/ollama/add/index.vue
@@ -27,7 +27,7 @@
                 <el-button @click="drawerVisible = false">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="onSubmit(formRef)">
+                <el-button v-permission type="primary" @click="onSubmit(formRef)">
                     {{ $t('commons.button.add') }}
                 </el-button>
             </span>
@@ -37,7 +37,6 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
@@ -45,7 +44,6 @@ import { MsgSuccess } from '@/utils/message';
 import { createOllamaModel } from '@/api/modules/ai';
 import { newUUID } from '@/utils/id';
 const drawerVisible = ref(false);
-const { hasManagePermission } = useMenuManagePermission();
 const form = reactive({
     name: '',
 });
diff --git a/frontend/src/views/ai/model/ollama/del/index.vue b/frontend/src/views/ai/model/ollama/del/index.vue
index de5ca2703dc6..d08b186de68f 100644
--- a/frontend/src/views/ai/model/ollama/del/index.vue
+++ b/frontend/src/views/ai/model/ollama/del/index.vue
@@ -26,9 +26,10 @@
                     {{ $t('commons.button.cancel') }}
                 </el-button>
                 <el-button
+                    v-permission
                     type="primary"
                     @click="onConfirm"
-                    :disabled="loading || checkedItems.length === 0 || !hasManagePermission"
+                    :disabled="loading || checkedItems.length === 0"
                 >
                     {{ $t('commons.button.confirm') }}
                 </el-button>
@@ -40,7 +41,6 @@
 <script setup lang="ts">
 import { AI } from '@/api/interface/ai';
 import { deleteOllamaModel } from '@/api/modules/ai';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { CheckboxValueType } from 'element-plus';
@@ -49,7 +49,6 @@ import { ref } from 'vue';
 defineOptions({ name: 'OpDialog' });
 
 const checkAll = ref();
-const { hasManagePermission } = useMenuManagePermission();
 const isIndeterminate = ref(false);
 const checkedItems = ref([]);
 const list = ref([]);
diff --git a/frontend/src/views/ai/model/ollama/domain/index.vue b/frontend/src/views/ai/model/ollama/domain/index.vue
index c312ad28488f..cf78ef0d602b 100644
--- a/frontend/src/views/ai/model/ollama/domain/index.vue
+++ b/frontend/src/views/ai/model/ollama/domain/index.vue
@@ -85,7 +85,7 @@
             <el-button @click="handleClose">
                 {{ $t('commons.button.cancel') }}
             </el-button>
-            <el-button type="primary" :disabled="!hasManagePermission" @click="onSubmit(formRef)">
+            <el-button v-permission type="primary" @click="onSubmit(formRef)">
                 {{ $t('commons.button.add') }}
             </el-button>
         </template>
@@ -95,7 +95,6 @@
 <script lang="ts" setup>
 import { Website } from '@/api/interface/website';
 import { listSSL, searchAcmeAccount } from '@/api/modules/website';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Rules } from '@/global/form-rules';
 import { FormInstance, FormRules } from 'element-plus';
 import { reactive, ref } from 'vue';
@@ -110,7 +109,6 @@ type SSLItem = Website.SSL & { organization?: string };
 const open = ref(false);
 const operate = ref('create');
 const loading = ref(false);
-const { hasManagePermission } = useMenuManagePermission();
 const ssls = ref<SSLItem[]>([]);
 const websiteSSL = ref<Website.SSL>();
 const acmeAccounts = ref();
diff --git a/frontend/src/views/ai/model/ollama/index.vue b/frontend/src/views/ai/model/ollama/index.vue
index be9907bbcad3..4a4a9e32011a 100644
--- a/frontend/src/views/ai/model/ollama/index.vue
+++ b/frontend/src/views/ai/model/ollama/index.vue
@@ -20,17 +20,14 @@
                 </el-alert>
             </template>
             <template #leftToolBar>
-                <el-button
-                    :disabled="!hasManagePermission || modelInfo.status !== 'Running'"
-                    type="primary"
-                    @click="onCreate()"
-                >
+                <el-button v-permission :disabled="modelInfo.status !== 'Running'" type="primary" @click="onCreate()">
                     {{ $t('commons.button.add') }}
                 </el-button>
                 <el-button
+                    v-permission
                     plain
                     type="primary"
-                    :disabled="modelInfo.status !== 'Running' || !hasManagePermission"
+                    :disabled="modelInfo.status !== 'Running'"
                     @click="bindDomain"
                 >
                     {{ $t('aiTools.proxy.proxy') }}
@@ -39,7 +36,8 @@
                     {{ $t('database.databaseConnInfo') }}
                 </el-button>
                 <el-button
-                    :disabled="modelInfo.status !== 'Running' || !hasManagePermission"
+                    v-permission
+                    :disabled="modelInfo.status !== 'Running'"
                     type="primary"
                     plain
                     @click="onSync()"
@@ -56,12 +54,7 @@
                     OpenWebUI
                 </el-button>
 
-                <el-button
-                    plain
-                    :disabled="selects.length === 0 || !hasManagePermission"
-                    type="primary"
-                    @click="onDelete(null)"
-                >
+                <el-button v-permission plain :disabled="selects.length === 0" type="primary" @click="onDelete(null)">
                     {{ $t('commons.button.delete') }}
                 </el-button>
             </template>
@@ -433,20 +426,22 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.retry'),
+        permission: true,
         click: (row: AI.OllamaModelInfo) => {
             onReCreate(row.name);
         },
         disabled: (row: any) => {
-            return row.status === 'Success' || row.status === 'Waiting' || !hasManagePermission.value;
+            return row.status === 'Success' || row.status === 'Waiting';
         },
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        permission: true,
         click: (row: AI.OllamaModelInfo) => {
             onDelete(row);
         },
         disabled: (row: any) => {
-            return row.status === 'Waiting' || !hasManagePermission.value;
+            return row.status === 'Waiting';
         },
     },
 ];
diff --git a/frontend/src/views/ai/model/tensorrt/index.vue b/frontend/src/views/ai/model/tensorrt/index.vue
index c7ffb4582cda..54bb633dc608 100644
--- a/frontend/src/views/ai/model/tensorrt/index.vue
+++ b/frontend/src/views/ai/model/tensorrt/index.vue
@@ -3,7 +3,7 @@
         <LayoutContent>
             <template #leftToolBar>
                 <div class="flex flex-wrap gap-3">
-                    <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
+                    <el-button v-permission type="primary" @click="openCreate">
                         {{ $t('commons.button.create') }}
                     </el-button>
                 </div>
@@ -83,7 +83,6 @@ import PortJumpDialog from '@/components/port-jump/index.vue';
 import PortJump from '@/views/website/runtime/components/port-jump.vue';
 
 import { reactive, onMounted, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { dateFormat } from '@/utils/date';
 import { AI } from '@/api/interface/ai';
 import { deleteTensorRTLLM, operateTensorRTLLM, pageTensorRTLLM } from '@/api/modules/ai';
@@ -181,15 +180,16 @@ const deleteLLM = async (row: AI.TensorRTLLM) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value || !hasManagePermission.value,
+        permission: true,
         click: (row: AI.TensorRTLLM) => {
             openEdit(row);
         },
     },
     {
         label: i18n.global.t('commons.button.start'),
+        permission: true,
         disabled: (row: AI.TensorRTLLM) => {
-            return row.status === 'Running' || !hasManagePermission.value;
+            return row.status === 'Running';
         },
         click: (row: AI.TensorRTLLM) => {
             operate(row, 'start');
@@ -197,8 +197,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.stop'),
+        permission: true,
         disabled: (row: AI.TensorRTLLM) => {
-            return row.status !== 'Running' || !hasManagePermission.value;
+            return row.status !== 'Running';
         },
         click: (row: AI.TensorRTLLM) => {
             operate(row, 'stop');
@@ -206,14 +207,14 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.restart'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: AI.TensorRTLLM) => {
             operate(row, 'restart');
         },
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: AI.TensorRTLLM) => {
             deleteLLM(row);
         },
diff --git a/frontend/src/views/ai/model/tensorrt/operate/index.vue b/frontend/src/views/ai/model/tensorrt/operate/index.vue
index 7e058a9de2a6..7c512aa09599 100644
--- a/frontend/src/views/ai/model/tensorrt/operate/index.vue
+++ b/frontend/src/views/ai/model/tensorrt/operate/index.vue
@@ -46,7 +46,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSubmit">
+                <el-button v-permission :disabled="loading" type="primary" @click="onSubmit">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -61,7 +61,6 @@ import DrawerPro from '@/components/drawer-pro/index.vue';
 import FileList from '@/components/file-list/index.vue';
 
 import { reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm, FormInstance } from 'element-plus';
@@ -69,7 +68,6 @@ import { createTensorRTLLM, updateTensorRTLLM } from '@/api/modules/ai';
 import { MsgSuccess } from '@/utils/message';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 const { isFxplay } = useGlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 const mode = ref('create');
diff --git a/frontend/src/views/app-store/apps/app/index.vue b/frontend/src/views/app-store/apps/app/index.vue
index 230d8762c19b..2458cf9582c6 100644
--- a/frontend/src/views/app-store/apps/app/index.vue
+++ b/frontend/src/views/app-store/apps/app/index.vue
@@ -31,13 +31,12 @@
                             </el-tag>
                         </div>
                         <el-button
+                            v-permission
                             type="primary"
                             size="small"
                             plain
                             round
-                            :disabled="
-                                (app.installed && app.limit == 1) || app.status === 'TakeDown' || !hasManagePermission
-                            "
+                            :disabled="(app.installed && app.limit == 1) || app.status === 'TakeDown'"
                             @click.stop="openInstall(app)"
                         >
                             {{ $t('commons.button.install') }}
@@ -52,7 +51,6 @@
 <script lang="ts" setup>
 import { getAppIconUrl } from '@/api/modules/app';
 import { useGlobalStore } from '@/composables/useGlobalStore';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const { currentNode } = useGlobalStore();
 
 defineProps({
@@ -62,8 +60,6 @@ defineProps({
     },
 });
 
-const { hasManagePermission } = useMenuManagePermission();
-
 const em = defineEmits(['openDetail', 'openInstall']);
 
 const openDetail = (key: string) => {
diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue
index b521c03d894f..f3ccfff08c51 100644
--- a/frontend/src/views/app-store/apps/index.vue
+++ b/frontend/src/views/app-store/apps/index.vue
@@ -6,16 +6,10 @@
                 <Tags @change="changeTag" />
             </template>
             <template #leftToolBar>
-                <el-button @click="sync" type="primary" plain :disabled="syncing || !hasManagePermission">
+                <el-button v-permission @click="sync" type="primary" plain :disabled="syncing">
                     <span>{{ syncCustomAppstore || isOffline ? $t('app.syncCustomApp') : $t('app.syncAppList') }}</span>
                 </el-button>
-                <el-button
-                    @click="syncLocal"
-                    type="primary"
-                    plain
-                    :disabled="syncing || !hasManagePermission"
-                    class="ml-2"
-                >
+                <el-button v-permission @click="syncLocal" type="primary" plain :disabled="syncing" class="ml-2">
                     {{ $t('app.syncLocalApp') }}
                 </el-button>
             </template>
diff --git a/frontend/src/views/app-store/detail/index.vue b/frontend/src/views/app-store/detail/index.vue
index 1c71210b0db1..4b4a40f0ec15 100644
--- a/frontend/src/views/app-store/detail/index.vue
+++ b/frontend/src/views/app-store/detail/index.vue
@@ -33,7 +33,7 @@
                         <el-button
                             round
                             v-if="appDetail.enable && operate === 'install'"
-                            :disabled="!hasManagePermission"
+                            v-permission
                             @click="openInstall"
                             type="primary"
                             class="brief-button"
@@ -82,9 +82,7 @@ import Install from './install/index.vue';
 import { computeSizeFromMB } from '@/utils/size';
 import { jumpToInstall } from '@/utils/app';
 import { useGlobalStore } from '@/composables/useGlobalStore';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const { currentNode } = useGlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 
 const app = ref<any>({});
 const appDetail = ref<any>({});
diff --git a/frontend/src/views/app-store/installed/app/header.vue b/frontend/src/views/app-store/installed/app/header.vue
index a01bb37fb2f9..0003830a2aa2 100644
--- a/frontend/src/views/app-store/installed/app/header.vue
+++ b/frontend/src/views/app-store/installed/app/header.vue
@@ -32,8 +32,8 @@
                 <span class="ml-1">
                     <el-tooltip effect="dark" :content="$t('app.toFolder')" placement="top">
                         <el-button
+                            v-permission:view="'host_file_view'"
                             type="primary"
-                            :disabled="!hasFilePermission"
                             link
                             @click="$emit('toFolder')"
                             icon="FolderOpened"
@@ -88,20 +88,22 @@
                         v-if="installed.favorite"
                     >
                         <el-button
+                            v-permission
                             link
                             size="large"
                             icon="StarFilled"
                             type="warning"
-                            :disabled="sortMode || !hasManagePermission"
+                            :disabled="sortMode"
                             @click="$emit('favoriteInstall')"
                         ></el-button>
                     </el-tooltip>
                     <el-tooltip effect="dark" :content="$t('website.favorite')" placement="top-start" v-else>
                         <el-button
+                            v-permission
                             link
                             icon="Star"
                             type="info"
-                            :disabled="sortMode || !hasManagePermission"
+                            :disabled="sortMode"
                             @click="$emit('favoriteInstall')"
                         ></el-button>
                     </el-tooltip>
@@ -115,7 +117,7 @@
                     size="small"
                     @click="$emit('openUploads')"
                     v-if="mode === 'installed'"
-                    :disabled="!hasManagePermission"
+                    v-permission
                 >
                     {{ $t('database.loadBackup') }}
                 </el-button>
@@ -126,7 +128,7 @@
                     size="small"
                     @click="$emit('openBackups')"
                     v-if="mode === 'installed'"
-                    :disabled="!hasManagePermission"
+                    v-permission
                 >
                     {{ $t('commons.button.backup') }}
                 </el-button>
@@ -135,21 +137,22 @@
                     plain
                     round
                     size="small"
-                    :disabled="installed.status === 'Upgrading' || !hasManagePermission"
+                    v-permission
+                    :disabled="installed.status === 'Upgrading'"
                     @click="$emit('ignoreApp')"
                     v-if="mode === 'upgrade'"
                 >
                     {{ $t('commons.button.ignore') }}
                 </el-button>
                 <el-button
+                    v-permission
                     class="h-button"
                     plain
                     round
                     size="small"
                     :disabled="
                         (installed.status !== 'Running' && installed.status !== 'UpgradeErr') ||
-                        installed.appStatus === 'TakeDown' ||
-                        !hasManagePermission
+                        installed.appStatus === 'TakeDown'
                     "
                     @click="$emit('openOperate')"
                     v-if="mode === 'upgrade'"
@@ -163,12 +166,9 @@
 
 <script lang="ts" setup>
 import { App } from '@/api/interface/app';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { GlobalStore } from '@/store';
 
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
-const { hasPermission: hasFilePermission } = useMenuManagePermission('host_file_view');
 
 interface Props {
     installed: App.AppInstalled;
diff --git a/frontend/src/views/app-store/installed/index.vue b/frontend/src/views/app-store/installed/index.vue
index adb5a4b42972..126f620ca7f6 100644
--- a/frontend/src/views/app-store/installed/index.vue
+++ b/frontend/src/views/app-store/installed/index.vue
@@ -160,9 +160,7 @@ import { MsgSuccess } from '@/utils/message';
 import { getAgentSettingInfo } from '@/api/modules/setting';
 import { routerToFileWithPath, routerToNameWithQuery } from '@/utils/router';
 import { useGlobalStore } from '@/composables/useGlobalStore';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const { currentNode, isMaster, currentNodeAddr, isIntl } = useGlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 
 const data = ref<any>();
 const loading = ref(false);
@@ -321,13 +319,13 @@ const buttons = [
         click: (row: any) => {
             openOperate(row, 'rebuild');
         },
+        permission: true,
         disabled: (row: any) => {
             return (
                 row.status === 'DownloadErr' ||
                 row.status === 'Upgrading' ||
                 row.status === 'Rebuilding' ||
-                row.status === 'Uninstalling' ||
-                !hasManagePermission.value
+                row.status === 'Uninstalling'
             );
         },
     },
@@ -336,13 +334,13 @@ const buttons = [
         click: (row: any) => {
             openOperate(row, 'restart');
         },
+        permission: true,
         disabled: (row: any) => {
             return (
                 row.status === 'DownloadErr' ||
                 row.status === 'Upgrading' ||
                 row.status === 'Rebuilding' ||
-                row.status === 'Uninstalling' ||
-                !hasManagePermission.value
+                row.status === 'Uninstalling'
             );
         },
     },
@@ -351,6 +349,7 @@ const buttons = [
         click: (row: any) => {
             openOperate(row, 'start');
         },
+        permission: true,
         disabled: (row: any) => {
             return (
                 row.status === 'Running' ||
@@ -358,8 +357,7 @@ const buttons = [
                 row.status === 'DownloadErr' ||
                 row.status === 'Upgrading' ||
                 row.status === 'Rebuilding' ||
-                row.status === 'Uninstalling' ||
-                !hasManagePermission.value
+                row.status === 'Uninstalling'
             );
         },
     },
@@ -368,14 +366,14 @@ const buttons = [
         click: (row: any) => {
             openOperate(row, 'stop');
         },
+        permission: true,
         disabled: (row: any) => {
             return (
                 row.status !== 'Running' ||
                 row.status === 'DownloadErr' ||
                 row.status === 'Upgrading' ||
                 row.status === 'Rebuilding' ||
-                row.status === 'Uninstalling' ||
-                !hasManagePermission.value
+                row.status === 'Uninstalling'
             );
         },
     },
@@ -384,9 +382,7 @@ const buttons = [
         click: (row: any) => {
             openOperate(row, 'delete');
         },
-        disabled: () => {
-            return !hasManagePermission.value;
-        },
+        permission: true,
     },
     {
         label: i18n.global.t('app.params'),
diff --git a/frontend/src/views/app-store/setting/index.vue b/frontend/src/views/app-store/setting/index.vue
index 223af541d9f6..2e610b43c9db 100644
--- a/frontend/src/views/app-store/setting/index.vue
+++ b/frontend/src/views/app-store/setting/index.vue
@@ -14,8 +14,8 @@
                     <el-col :xs="24" :sm="20" :md="15" :lg="12" :xl="12">
                         <el-form-item :label="$t('app.uninstallDeleteBackup')" prop="uninstallDeleteBackup">
                             <el-switch
+                                v-permission
                                 v-model="config.uninstallDeleteBackup"
-                                :disabled="!hasManagePermission"
                                 active-value="Enable"
                                 inactive-value="Disable"
                                 :loading="loading"
@@ -24,8 +24,8 @@
                         </el-form-item>
                         <el-form-item :label="$t('app.uninstallDeleteImage')" prop="uninstallDeleteImage">
                             <el-switch
+                                v-permission
                                 v-model="config.uninstallDeleteImage"
-                                :disabled="!hasManagePermission"
                                 active-value="Enable"
                                 inactive-value="Disable"
                                 :loading="loading"
@@ -34,8 +34,8 @@
                         </el-form-item>
                         <el-form-item :label="$t('app.upgradeBackup')" prop="upgradeBackup">
                             <el-switch
+                                v-permission
                                 v-model="config.upgradeBackup"
-                                :disabled="!hasManagePermission"
                                 active-value="Enable"
                                 inactive-value="Disable"
                                 :loading="loading"
@@ -44,8 +44,8 @@
                         </el-form-item>
                         <el-form-item :label="$t('app.installAllowPort')" prop="installAllowPort">
                             <el-switch
+                                v-permission
                                 v-model="config.installAllowPort"
-                                :disabled="!hasManagePermission"
                                 active-value="Enable"
                                 inactive-value="Disable"
                                 :loading="loading"
@@ -76,8 +76,6 @@ import i18n from '@/lang';
 import { defineAsyncComponent } from 'vue';
 import { loadOptionalComponent } from '@/extensions/optional';
 import { GlobalStore } from '@/store';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
-const { hasManagePermission } = useMenuManagePermission();
 const globalStore = GlobalStore();
 
 const CustomSetting = defineAsyncComponent(() => loadOptionalComponent('/src/xpack/views/appstore/index.vue'));
diff --git a/frontend/src/views/container/compose/index.vue b/frontend/src/views/container/compose/index.vue
index b7ec903475f2..d104d467e869 100644
--- a/frontend/src/views/container/compose/index.vue
+++ b/frontend/src/views/container/compose/index.vue
@@ -9,10 +9,10 @@
 
         <LayoutContent v-if="isExist" :title="$t('container.compose', 2)" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog()">
+                <el-button v-permission type="primary" @click="onOpenDialog()">
                     {{ $t('commons.button.create') }}
                 </el-button>
-                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onImportCompose()">
+                <el-button v-permission type="primary" plain @click="onImportCompose()">
                     {{ $t('commons.button.import') }}
                 </el-button>
             </template>
@@ -81,45 +81,45 @@
                                             <div class="compose-actions" @click.stop>
                                                 <el-dropdown placement="bottom">
                                                     <Status
+                                                        v-permission
                                                         :status="getComposeStatus(row)"
-                                                        :disabled="!hasManagePermission"
                                                         :operate="true"
                                                     />
                                                     <template #dropdown>
                                                         <el-dropdown-menu>
-                                                            <el-dropdown-item
+                                                            <fu-dropdown-item
+                                                                v-permission
                                                                 :disabled="
-                                                                    !hasManagePermission ||
-                                                                    (row.containerCount === row.runningCount &&
-                                                                        row.runningCount > 0)
+                                                                    row.containerCount === row.runningCount &&
+                                                                    row.runningCount > 0
                                                                 "
                                                                 @click="handleComposeOperate('up', row)"
                                                             >
                                                                 {{ $t('commons.operate.start') }}
-                                                            </el-dropdown-item>
-                                                            <el-dropdown-item
-                                                                :disabled="
-                                                                    row.runningCount === 0 || !hasManagePermission
-                                                                "
+                                                            </fu-dropdown-item>
+                                                            <fu-dropdown-item
+                                                                v-permission
+                                                                :disabled="row.runningCount === 0"
                                                                 @click="handleComposeOperate('stop', row)"
                                                             >
                                                                 {{ $t('commons.operate.stop') }}
-                                                            </el-dropdown-item>
-                                                            <el-dropdown-item
-                                                                :disabled="!hasManagePermission"
+                                                            </fu-dropdown-item>
+                                                            <fu-dropdown-item
+                                                                v-permission
                                                                 @click="handleComposeOperate('restart', row)"
                                                             >
                                                                 {{ $t('commons.button.restart') }}
-                                                            </el-dropdown-item>
+                                                            </fu-dropdown-item>
                                                         </el-dropdown-menu>
                                                     </template>
                                                 </el-dropdown>
                                                 <el-button
+                                                    v-permission:view="'host_file_view'"
                                                     plain
                                                     round
                                                     size="small"
                                                     class="round-btn ml-3"
-                                                    :disabled="!row?.workdir || !hasFilePermission"
+                                                    :disabled="!row?.workdir"
                                                     @click="openComposeFolder(row)"
                                                 >
                                                     {{ $t('home.dir') }}
@@ -129,7 +129,7 @@
                                                     round
                                                     size="small"
                                                     class="round-btn"
-                                                    :disabled="!hasManagePermission"
+                                                    v-permission
                                                     @click="onBackupList(row)"
                                                 >
                                                     {{ $t('commons.button.backup') }}
@@ -139,7 +139,7 @@
                                                     round
                                                     size="small"
                                                     class="round-btn"
-                                                    :disabled="!hasManagePermission"
+                                                    v-permission
                                                     @click="onDelete(row)"
                                                 >
                                                     {{ $t('commons.operate.delete') }}
@@ -316,8 +316,8 @@
                                 </el-radio-group>
                                 <el-button
                                     v-if="showType !== 'log' && !(showType === 'env' && isAppStoreCompose)"
+                                    v-permission
                                     type="primary"
-                                    :disabled="!hasManagePermission"
                                     @click="onSubmitEdit"
                                 >
                                     {{ $t('commons.button.save') }}
@@ -452,12 +452,7 @@
                                 </el-form-item>
                             </el-form>
 
-                            <el-button
-                                type="primary"
-                                class="mt-2"
-                                :disabled="!hasManagePermission"
-                                @click="onSubmit(formRef)"
-                            >
+                            <el-button v-permission type="primary" class="mt-2" @click="onSubmit(formRef)">
                                 {{ $t('commons.button.save') }}
                             </el-button>
                         </el-card>
@@ -485,7 +480,6 @@
 
 <script lang="ts" setup>
 import { computed, h, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
 import ContainerLog from '@/components/log/container/index.vue';
 import TaskLog from '@/components/log/task/index.vue';
@@ -521,8 +515,6 @@ import { ElCheckbox, ElForm } from 'element-plus';
 import { GlobalStore } from '@/store';
 
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
-const { hasPermission: hasFilePermission } = useMenuManagePermission('host_file_view');
 
 const data = ref<any[]>([]);
 const loading = ref(false);
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index 5675095a14cb..d8091220fe66 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -22,56 +22,43 @@
             </template>
 
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="onContainerOperate('')">
+                <el-button v-permission type="primary" @click="onContainerOperate('')">
                     {{ $t('commons.button.create') }}
                 </el-button>
-                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onImportCreate()">
+                <el-button v-permission type="primary" plain @click="onImportCreate()">
                     {{ $t('commons.button.import') }}
                 </el-button>
-                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onClean()">
+                <el-button v-permission type="primary" plain @click="onClean()">
                     {{ $t('container.containerPrune') }}
                 </el-button>
                 <el-button-group class="button-group">
-                    <el-button
-                        :disabled="!hasManagePermission || checkStatus('start', null)"
-                        @click="onOperate('start', null)"
-                    >
+                    <el-button v-permission :disabled="checkStatus('start', null)" @click="onOperate('start', null)">
                         {{ $t('commons.operate.start') }}
                     </el-button>
-                    <el-button
-                        :disabled="!hasManagePermission || checkStatus('stop', null)"
-                        @click="onOperate('stop', null)"
-                    >
+                    <el-button v-permission :disabled="checkStatus('stop', null)" @click="onOperate('stop', null)">
                         {{ $t('commons.operate.stop') }}
                     </el-button>
                     <el-button
-                        :disabled="!hasManagePermission || checkStatus('restart', null)"
+                        v-permission
+                        :disabled="checkStatus('restart', null)"
                         @click="onOperate('restart', null)"
                     >
                         {{ $t('commons.button.restart') }}
                     </el-button>
-                    <el-button
-                        :disabled="!hasManagePermission || checkStatus('kill', null)"
-                        @click="onOperate('kill', null)"
-                    >
+                    <el-button v-permission :disabled="checkStatus('kill', null)" @click="onOperate('kill', null)">
                         {{ $t('container.kill') }}
                     </el-button>
-                    <el-button
-                        :disabled="!hasManagePermission || checkStatus('pause', null)"
-                        @click="onOperate('pause', null)"
-                    >
+                    <el-button v-permission :disabled="checkStatus('pause', null)" @click="onOperate('pause', null)">
                         {{ $t('container.pause') }}
                     </el-button>
                     <el-button
-                        :disabled="!hasManagePermission || checkStatus('unpause', null)"
+                        v-permission
+                        :disabled="checkStatus('unpause', null)"
                         @click="onOperate('unpause', null)"
                     >
                         {{ $t('container.unpause') }}
                     </el-button>
-                    <el-button
-                        :disabled="!hasManagePermission || checkStatus('remove', null)"
-                        @click="onOperate('remove', null)"
-                    >
+                    <el-button v-permission :disabled="checkStatus('remove', null)" @click="onOperate('remove', null)">
                         {{ $t('commons.button.delete') }}
                     </el-button>
                 </el-button-group>
@@ -138,7 +125,7 @@
                                         size="large"
                                         :icon="row.isPinned ? 'StarFilled' : 'Star'"
                                         type="warning"
-                                        :disabled="!hasManagePermission"
+                                        v-permission
                                         @click="changePinned(row, true)"
                                     />
                                 </el-tooltip>
@@ -159,45 +146,51 @@
                                     (visible) => handleStatusDropdownVisibleChange(row.containerID, visible)
                                 "
                             >
-                                <Status :status="row.state" :disabled="!hasManagePermission" :operate="true" />
+                                <Status v-permission :status="row.state" :operate="true" />
                                 <template #dropdown>
                                     <el-dropdown-menu v-if="activeDropdownContainerId === row.containerID">
-                                        <el-dropdown-item
-                                            :disabled="!hasManagePermission || checkStatus('start', row)"
+                                        <fu-dropdown-item
+                                            v-permission
+                                            :disabled="checkStatus('start', row)"
                                             @click="onOperate('start', row)"
                                         >
                                             {{ $t('commons.operate.start') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item
-                                            :disabled="!hasManagePermission || checkStatus('stop', row)"
+                                        </fu-dropdown-item>
+                                        <fu-dropdown-item
+                                            v-permission
+                                            :disabled="checkStatus('stop', row)"
                                             @click="onOperate('stop', row)"
                                         >
                                             {{ $t('commons.operate.stop') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item
-                                            :disabled="!hasManagePermission || checkStatus('restart', row)"
+                                        </fu-dropdown-item>
+                                        <fu-dropdown-item
+                                            v-permission
+                                            :disabled="checkStatus('restart', row)"
                                             @click="onOperate('restart', row)"
                                         >
                                             {{ $t('commons.button.restart') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item
-                                            :disabled="!hasManagePermission || checkStatus('kill', row)"
+                                        </fu-dropdown-item>
+                                        <fu-dropdown-item
+                                            v-permission
+                                            :disabled="checkStatus('kill', row)"
                                             @click="onOperate('kill', row)"
                                         >
                                             {{ $t('container.kill') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item
-                                            :disabled="!hasManagePermission || checkStatus('pause', row)"
+                                        </fu-dropdown-item>
+                                        <fu-dropdown-item
+                                            v-permission
+                                            :disabled="checkStatus('pause', row)"
                                             @click="onOperate('pause', row)"
                                         >
                                             {{ $t('container.pause') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item
-                                            :disabled="!hasManagePermission || checkStatus('unpause', row)"
+                                        </fu-dropdown-item>
+                                        <fu-dropdown-item
+                                            v-permission
+                                            :disabled="checkStatus('unpause', row)"
                                             @click="onOperate('unpause', row)"
                                         >
                                             {{ $t('container.unpause') }}
-                                        </el-dropdown-item>
+                                        </fu-dropdown-item>
                                     </el-dropdown-menu>
                                 </template>
                             </el-dropdown>
@@ -371,7 +364,7 @@
                         <template #default="{ row }">
                             <fu-input-rw-switch
                                 v-model="row.description"
-                                :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
+                                v-permission
                                 @enter="changePinned(row, false)"
                                 @blur="changePinned(row, false)"
                             />
@@ -454,8 +447,7 @@ import { useGlobalStore } from '@/composables/useGlobalStore';
 
 const { isMobile } = useGlobalStore();
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
-const { hasPermission: hasFilePermission } = useMenuManagePermission('host_file_view');
+const hasFilePermission = useCan('host_file_view');
 
 const isActive = ref(false);
 const isExist = ref(false);
@@ -879,21 +871,21 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Container.ContainerInfo) => {
             onContainerOperate(row.name);
         },
     },
     {
         label: i18n.global.t('commons.button.upgrade'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Container.ContainerInfo) => {
             dialogUpgradeRef.value!.acceptParams({ container: row.name, image: row.imageName, fromApp: row.isFromApp });
         },
     },
     {
         label: i18n.global.t('commons.button.backup'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Container.ContainerInfo) => {
             onBackup(row);
         },
@@ -909,29 +901,32 @@ const buttons = [
     },
     {
         label: i18n.global.t('container.rename'),
+        permission: true,
         click: (row: Container.ContainerInfo) => {
             dialogRenameRef.value!.acceptParams({ container: row.name });
         },
         disabled: (row: any) => {
-            return row.isFromCompose || !hasManagePermission.value;
+            return row.isFromCompose;
         },
     },
     {
         label: i18n.global.t('container.makeImage'),
+        permission: true,
         click: (row: Container.ContainerInfo) => {
             dialogCommitRef.value!.acceptParams({ containerID: row.containerID, containerName: row.name });
         },
         disabled: (row: any) => {
-            return checkStatus('commit', row) || !hasManagePermission.value;
+            return checkStatus('commit', row);
         },
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        permission: true,
         click: (row: Container.ContainerInfo) => {
             onOperate('remove', row);
         },
         disabled: (row: any) => {
-            return checkStatus('remove', row) || !hasManagePermission.value;
+            return checkStatus('remove', row);
         },
     },
 ];
diff --git a/frontend/src/views/container/dashboard/index.vue b/frontend/src/views/container/dashboard/index.vue
index faef7011a64f..1c34a8ef64a5 100644
--- a/frontend/src/views/container/dashboard/index.vue
+++ b/frontend/src/views/container/dashboard/index.vue
@@ -107,7 +107,7 @@
                             <el-button
                                 v-if="countItem.imageReclaimable"
                                 class="-mt-0.5"
-                                :disabled="!hasManagePermission"
+                                v-permission
                                 @click="onClean('image', true)"
                                 link
                                 type="primary"
@@ -125,7 +125,7 @@
                             <el-button
                                 v-if="countItem.containerReclaimable"
                                 class="-mt-0.5"
-                                :disabled="!hasManagePermission"
+                                v-permission
                                 @click="onClean('container', false)"
                                 link
                                 type="primary"
@@ -143,7 +143,7 @@
                             <el-button
                                 v-if="countItem.volumeReclaimable"
                                 class="-mt-0.5"
-                                :disabled="!hasManagePermission"
+                                v-permission
                                 @click="onClean('volume', false)"
                                 link
                                 type="primary"
@@ -161,7 +161,7 @@
                             <el-button
                                 v-if="countItem.buildCacheUsage"
                                 class="-mt-0.5"
-                                :disabled="!hasManagePermission"
+                                v-permission
                                 @click="onClean('buildcache', false)"
                                 link
                                 type="primary"
@@ -206,11 +206,9 @@ import { newUUID } from '@/utils/id';
 import TaskLog from '@/components/log/task/index.vue';
 import { routerToName } from '@/utils/router';
 import { onMounted, reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 
 const taskLogRef = ref();
-const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref();
 const usageLoading = ref(false);
diff --git a/frontend/src/views/container/image/index.vue b/frontend/src/views/container/image/index.vue
index 0dbfd4d670b3..93cd86dd616a 100644
--- a/frontend/src/views/container/image/index.vue
+++ b/frontend/src/views/container/image/index.vue
@@ -10,19 +10,19 @@
 
         <LayoutContent v-if="isExist" :title="$t('container.image', 2)" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onOpenPull">
+                <el-button v-permission type="primary" plain @click="onOpenPull">
                     {{ $t('container.imagePull') }}
                 </el-button>
-                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onOpenLoad">
+                <el-button v-permission type="primary" plain @click="onOpenLoad">
                     {{ $t('container.importImage') }}
                 </el-button>
-                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onOpenBuild">
+                <el-button v-permission type="primary" plain @click="onOpenBuild">
                     {{ $t('container.imageBuild') }}
                 </el-button>
-                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onOpenBuildCache()">
+                <el-button v-permission type="primary" plain @click="onOpenBuildCache()">
                     {{ $t('container.cleanBuildCache') }}
                 </el-button>
-                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onOpenPrune()">
+                <el-button v-permission type="primary" plain @click="onOpenPrune()">
                     {{ $t('container.imagePrune') }}
                 </el-button>
             </template>
@@ -57,7 +57,7 @@
                                         size="large"
                                         :icon="row.isPinned ? 'StarFilled' : 'Star'"
                                         type="warning"
-                                        :disabled="!hasManagePermission"
+                                        v-permission
                                         @click="changePinned(row, true)"
                                     />
                                 </el-tooltip>
@@ -136,7 +136,7 @@
                     <el-button @click="handleUpdateDialogClose">
                         {{ $t('commons.button.cancel') }}
                     </el-button>
-                    <el-button type="primary" :disabled="!hasManagePermission" @click="submitUpdateSelection">
+                    <el-button v-permission type="primary" @click="submitUpdateSelection">
                         {{ $t('commons.button.confirm') }}
                     </el-button>
                 </span>
@@ -421,7 +421,7 @@ const submitUpdateSelection = async () => {
 const buttons = [
     {
         label: i18n.global.t('container.push'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Container.ImageInfo) => {
             let params = {
                 repos: repos.value,
@@ -432,7 +432,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('container.export'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Container.ImageInfo) => {
             let params = {
                 repos: repos.value,
@@ -443,14 +443,14 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.update'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Container.ImageInfo) => {
             onUpdate(row);
         },
     },
     {
         label: i18n.global.t('container.tag'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Container.ImageInfo) => {
             let params = {
                 repos: repos.value,
@@ -462,7 +462,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: async (row: Container.ImageInfo) => {
             if (row.tags && row.tags.length > 1) {
                 let params = {
diff --git a/frontend/src/views/container/network/index.vue b/frontend/src/views/container/network/index.vue
index a72e5913baee..1330311ffe91 100644
--- a/frontend/src/views/container/network/index.vue
+++ b/frontend/src/views/container/network/index.vue
@@ -9,13 +9,13 @@
 
         <LayoutContent v-if="isExist" :title="$t('container.network', 2)" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="onCreate()">
+                <el-button v-permission type="primary" @click="onCreate()">
                     {{ $t('commons.button.create') }}
                 </el-button>
-                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onClean()">
+                <el-button v-permission type="primary" plain @click="onClean()">
                     {{ $t('container.networkPrune') }}
                 </el-button>
-                <el-button :disabled="selects.length === 0 || !hasManagePermission" @click="batchDelete(null)">
+                <el-button v-permission :disabled="selects.length === 0" @click="batchDelete(null)">
                     {{ $t('commons.button.delete') }}
                 </el-button>
             </template>
@@ -96,7 +96,6 @@
 import CreateDialog from '@/views/container/network/create/index.vue';
 import DetailDrawer from '@/views/container/network/detail/index.vue';
 import { reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { dateFormat } from '@/utils/date';
 import { newUUID } from '@/utils/id';
 import { deleteNetwork, searchNetwork, inspect, containerPrune } from '@/api/modules/container';
@@ -119,7 +118,6 @@ const paginationConfig = reactive({
     total: 0,
 });
 const searchName = ref();
-const { hasManagePermission } = useMenuManagePermission();
 
 const opRef = ref();
 const isActive = ref(false);
@@ -230,11 +228,12 @@ function isSystem(val: string) {
 const buttons = [
     {
         label: i18n.global.t('commons.button.delete'),
+        permission: true,
         click: (row: Container.NetworkInfo) => {
             batchDelete(row);
         },
         disabled: (row: any) => {
-            return row.isSystem || !hasManagePermission.value;
+            return row.isSystem;
         },
     },
 ];
diff --git a/frontend/src/views/container/repo/index.vue b/frontend/src/views/container/repo/index.vue
index 34a895e76d93..f62480762a81 100644
--- a/frontend/src/views/container/repo/index.vue
+++ b/frontend/src/views/container/repo/index.vue
@@ -9,7 +9,7 @@
 
         <LayoutContent v-if="isExist" :title="$t('container.repo', 2)" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('add')">
+                <el-button v-permission type="primary" @click="onOpenDialog('add')">
                     {{ $t('commons.button.add') }}
                 </el-button>
             </template>
@@ -61,13 +61,11 @@
 <script lang="ts" setup>
 import OperatorDialog from '@/views/container/repo/operator/index.vue';
 import { reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { dateFormat } from '@/utils/date';
 import { Container } from '@/api/interface/container';
 import { checkRepoStatus, deleteImageRepo, searchImageRepo } from '@/api/modules/container';
 import DockerStatus from '@/views/container/docker-status/index.vue';
 import i18n from '@/lang';
-const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref();
 const data = ref();
@@ -172,8 +170,9 @@ const onCheckConn = async (row: Container.RepoInfo) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.sync'),
+        permission: true,
         disabled: (row: Container.RepoInfo) => {
-            return row.id === 1 || !hasManagePermission.value;
+            return row.id === 1;
         },
         click: (row: Container.RepoInfo) => {
             onCheckConn(row);
@@ -181,8 +180,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.edit'),
+        permission: true,
         disabled: (row: Container.RepoInfo) => {
-            return row.id === 1 || !hasManagePermission.value;
+            return row.id === 1;
         },
         click: (row: Container.RepoInfo) => {
             onOpenDialog('edit', row);
@@ -190,8 +190,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        permission: true,
         disabled: (row: Container.RepoInfo) => {
-            return row.id === 1 || !hasManagePermission.value;
+            return row.id === 1;
         },
         click: (row: Container.RepoInfo) => {
             onDelete(row);
diff --git a/frontend/src/views/container/setting/index.vue b/frontend/src/views/container/setting/index.vue
index 08508d44997d..d17c20c9cb18 100644
--- a/frontend/src/views/container/setting/index.vue
+++ b/frontend/src/views/container/setting/index.vue
@@ -17,26 +17,14 @@
                         <el-tag>{{ $t('app.version') }}: {{ form.version }}</el-tag>
                     </div>
                     <div class="mt-0.5">
-                        <el-button
-                            v-if="isActive"
-                            type="primary"
-                            :disabled="!hasManagePermission"
-                            @click="onOperator('stop')"
-                            link
-                        >
+                        <el-button v-if="isActive" type="primary" v-permission @click="onOperator('stop')" link>
                             {{ $t('commons.operate.stop') }}
                         </el-button>
-                        <el-button
-                            v-if="!isActive"
-                            type="primary"
-                            :disabled="!hasManagePermission"
-                            @click="onOperator('start')"
-                            link
-                        >
+                        <el-button v-if="!isActive" type="primary" v-permission @click="onOperator('start')" link>
                             {{ $t('commons.operate.start') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button type="primary" :disabled="!hasManagePermission" @click="onOperator('restart')" link>
+                        <el-button v-permission type="primary" @click="onOperator('restart')" link>
                             {{ $t('commons.button.restart') }}
                         </el-button>
                     </div>
@@ -70,7 +58,7 @@
                                         style="width: calc(100% - 80px)"
                                     />
                                     <el-button
-                                        :disabled="!hasManagePermission"
+                                        v-permission
                                         @click="onChangeMirrors"
                                         icon="Setting"
                                         class="custom-input-textarea"
@@ -80,11 +68,7 @@
                                 </div>
                                 <el-input disabled v-if="!form.mirrors" v-model="unset">
                                     <template #append>
-                                        <el-button
-                                            :disabled="!hasManagePermission"
-                                            @click="onChangeMirrors"
-                                            icon="Setting"
-                                        >
+                                        <el-button v-permission @click="onChangeMirrors" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -106,21 +90,13 @@
                                         v-model="form.registries"
                                         style="width: calc(100% - 80px)"
                                     />
-                                    <el-button
-                                        :disabled="!hasManagePermission"
-                                        @click="onChangeRegistries"
-                                        icon="Setting"
-                                    >
+                                    <el-button v-permission @click="onChangeRegistries" icon="Setting">
                                         {{ $t('commons.button.set') }}
                                     </el-button>
                                 </div>
                                 <el-input disabled v-if="!form.registries" v-model="unset">
                                     <template #append>
-                                        <el-button
-                                            :disabled="!hasManagePermission"
-                                            @click="onChangeRegistries"
-                                            icon="Setting"
-                                        >
+                                        <el-button v-permission @click="onChangeRegistries" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -128,11 +104,7 @@
                             </el-form-item>
 
                             <el-form-item label="IPv6" prop="ipv6">
-                                <el-switch
-                                    :disabled="!hasManagePermission"
-                                    v-model="form.ipv6"
-                                    @change="handleIPv6"
-                                ></el-switch>
+                                <el-switch v-permission v-model="form.ipv6" @change="handleIPv6"></el-switch>
                                 <span class="input-help"></span>
                                 <div v-if="ipv6OptionShow">
                                     <el-tag>{{ $t('container.subnet') }}: {{ form.fixedCidrV6 }}</el-tag>
@@ -146,7 +118,7 @@
 
                             <el-form-item :label="$t('container.cutLog')" prop="hasLogOption">
                                 <el-switch
-                                    :disabled="!hasManagePermission"
+                                    v-permission
                                     v-model="form.logOptionShow"
                                     @change="handleLogOption"
                                 ></el-switch>
@@ -163,16 +135,13 @@
                             </el-form-item>
 
                             <el-form-item label="iptables" prop="iptables">
-                                <el-switch
-                                    :disabled="!hasManagePermission"
-                                    v-model="form.iptables"
-                                    @change="handleIptables"
-                                ></el-switch>
+                                <el-switch v-permission v-model="form.iptables" @change="handleIptables"></el-switch>
                                 <span class="input-help">{{ $t('container.iptablesHelper1') }}</span>
                             </el-form-item>
                             <el-form-item label="Live restore" prop="liveRestore">
                                 <el-switch
-                                    :disabled="form.isSwarm || !hasManagePermission"
+                                    v-permission
+                                    :disabled="form.isSwarm"
                                     v-model="form.liveRestore"
                                     @change="handleLive"
                                 ></el-switch>
@@ -182,11 +151,7 @@
                                 </span>
                             </el-form-item>
                             <el-form-item label="Cgroup Driver" prop="cgroupDriver">
-                                <el-radio-group
-                                    :disabled="!hasManagePermission"
-                                    v-model="form.cgroupDriver"
-                                    @change="handleCgroup"
-                                >
+                                <el-radio-group v-permission v-model="form.cgroupDriver" @change="handleCgroup">
                                     <el-radio value="cgroupfs">cgroupfs</el-radio>
                                     <el-radio value="systemd">systemd</el-radio>
                                 </el-radio-group>
@@ -194,11 +159,7 @@
                             <el-form-item :label="$t('container.sockPath')" prop="dockerSockPath">
                                 <el-input disabled v-model="form.dockerSockPath">
                                     <template #append>
-                                        <el-button
-                                            :disabled="!hasManagePermission"
-                                            @click="onChangeSockPath"
-                                            icon="Setting"
-                                        >
+                                        <el-button v-permission @click="onChangeSockPath" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -218,12 +179,7 @@
                         mode="json"
                         placeholder="# The Docker configuration file does not exist or is empty"
                     ></CodemirrorPro>
-                    <el-button
-                        :disabled="loading || !hasManagePermission"
-                        type="primary"
-                        @click="onSaveFile"
-                        class="mt-2.5"
-                    >
+                    <el-button v-permission :disabled="loading" type="primary" @click="onSaveFile" class="mt-2.5">
                         {{ $t('commons.button.save') }}
                     </el-button>
                 </div>
@@ -253,7 +209,8 @@
                         {{ $t('commons.button.cancel') }}
                     </el-button>
                     <el-button
-                        :disabled="submitInput !== $t('database.restartNow') || !hasManagePermission"
+                        v-permission
+                        :disabled="submitInput !== $t('database.restartNow')"
                         type="primary"
                         @click="onSubmitCloseIPtable"
                     >
@@ -305,7 +262,6 @@ import { useGlobalStore } from '@/composables/useGlobalStore';
 
 const { isMobile } = useGlobalStore();
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 
 const unset = ref(i18n.global.t('setting.unSetting'));
 const submitInput = ref();
diff --git a/frontend/src/views/container/template/index.vue b/frontend/src/views/container/template/index.vue
index e6998204281c..2d7b2716d559 100644
--- a/frontend/src/views/container/template/index.vue
+++ b/frontend/src/views/container/template/index.vue
@@ -9,23 +9,24 @@
 
         <LayoutContent v-if="isExist" :title="$t('container.composeTemplate', 2)" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
+                <el-button v-permission type="primary" @click="onOpenDialog('create')">
                     {{ $t('commons.button.create') }}
                 </el-button>
                 <el-button
+                    v-permission
                     type="primary"
                     plain
-                    :disabled="selects.length === 0 || !hasManagePermission"
+                    :disabled="selects.length === 0"
                     @click="onBatchDelete(null)"
                 >
                     {{ $t('commons.button.delete') }}
                 </el-button>
 
                 <el-button-group>
-                    <el-button :disabled="!hasManagePermission" @click="onImport">
+                    <el-button v-permission @click="onImport">
                         {{ $t('commons.button.import') }}
                     </el-button>
-                    <el-button :disabled="selects.length === 0 || !hasManagePermission" @click="onExport">
+                    <el-button v-permission :disabled="selects.length === 0" @click="onExport">
                         {{ $t('commons.button.export') }}
                     </el-button>
                 </el-button-group>
@@ -79,7 +80,6 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { dateFormat, getCurrentDateFormatted } from '@/utils/date';
 import { downloadWithContent } from '@/utils/file';
 import { Container } from '@/api/interface/container';
@@ -93,7 +93,6 @@ import i18n from '@/lang';
 const loading = ref();
 const data = ref();
 const selects = ref<any>([]);
-const { hasManagePermission } = useMenuManagePermission();
 
 const dialogImportRef = ref();
 const detailRef = ref();
@@ -201,8 +200,9 @@ const onBatchDelete = async (row: Container.RepoInfo | null) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
+        permission: true,
         disabled: (row: Container.RepoInfo) => {
-            return row.downloadUrl === 'docker.io' || !hasManagePermission.value;
+            return row.downloadUrl === 'docker.io';
         },
         click: (row: Container.RepoInfo) => {
             onOpenDialog('edit', row);
@@ -210,8 +210,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        permission: true,
         disabled: (row: Container.RepoInfo) => {
-            return row.downloadUrl === 'docker.io' || !hasManagePermission.value;
+            return row.downloadUrl === 'docker.io';
         },
         click: (row: Container.RepoInfo) => {
             onBatchDelete(row);
diff --git a/frontend/src/views/container/volume/index.vue b/frontend/src/views/container/volume/index.vue
index 3a8f519f6a2b..59f951acdcea 100644
--- a/frontend/src/views/container/volume/index.vue
+++ b/frontend/src/views/container/volume/index.vue
@@ -9,13 +9,13 @@
 
         <LayoutContent v-if="isExist" :title="$t('container.volume', 2)" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="onCreate()">
+                <el-button v-permission type="primary" @click="onCreate()">
                     {{ $t('commons.button.create') }}
                 </el-button>
-                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onClean()">
+                <el-button v-permission type="primary" plain @click="onClean()">
                     {{ $t('container.volumePrune') }}
                 </el-button>
-                <el-button :disabled="selects.length === 0 || !hasManagePermission" @click="batchDelete(null)">
+                <el-button v-permission :disabled="selects.length === 0" @click="batchDelete(null)">
                     {{ $t('commons.button.delete') }}
                 </el-button>
             </template>
@@ -87,10 +87,10 @@
                         <template #default="{ row }">
                             <el-tooltip :content="row.mountpoint">
                                 <el-button
+                                    v-permission:view="'host_file_view'"
                                     type="primary"
                                     icon="FolderOpened"
                                     link
-                                    :disabled="!hasFilePermission"
                                     @click="routerToFileWithPath(row.mountpoint)"
                                 />
                             </el-tooltip>
@@ -259,7 +259,7 @@ const batchDelete = async (row: Container.VolumeInfo | null) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Container.VolumeInfo) => {
             batchDelete(row);
         },
diff --git a/frontend/src/views/cronjob/cronjob/index.vue b/frontend/src/views/cronjob/cronjob/index.vue
index 377ed5ee9338..822fd3475caf 100644
--- a/frontend/src/views/cronjob/cronjob/index.vue
+++ b/frontend/src/views/cronjob/cronjob/index.vue
@@ -2,37 +2,39 @@
     <div>
         <LayoutContent v-loading="loading" v-if="!isRecordShow" :title="$t('menu.cronjob')">
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('')">
+                <el-button v-permission type="primary" @click="onOpenDialog('')">
                     {{ $t('commons.button.create') }}
                 </el-button>
-                <el-button :disabled="!hasManagePermission" @click="onOpenGroupDialog()">
+                <el-button v-permission @click="onOpenGroupDialog()">
                     {{ $t('commons.table.group') }}
                 </el-button>
                 <el-button-group>
                     <el-button
+                        v-permission
                         plain
-                        :disabled="selects.length === 0 || !hasManagePermission"
+                        :disabled="selects.length === 0"
                         @click="onBatchChangeStatus('enable')"
                     >
                         {{ $t('commons.button.enable') }}
                     </el-button>
                     <el-button
+                        v-permission
                         plain
-                        :disabled="selects.length === 0 || !hasManagePermission"
+                        :disabled="selects.length === 0"
                         @click="onBatchChangeStatus('disable')"
                     >
                         {{ $t('commons.button.disable') }}
                     </el-button>
-                    <el-button plain :disabled="selects.length === 0 || !hasManagePermission" @click="onDelete(null)">
+                    <el-button v-permission plain :disabled="selects.length === 0" @click="onDelete(null)">
                         {{ $t('commons.button.delete') }}
                     </el-button>
                 </el-button-group>
 
                 <el-button-group>
-                    <el-button :disabled="!hasManagePermission" @click="onImport">
+                    <el-button v-permission @click="onImport">
                         {{ $t('commons.button.import') }}
                     </el-button>
-                    <el-button :disabled="selects.length === 0 || !hasManagePermission" @click="onExport">
+                    <el-button v-permission :disabled="selects.length === 0" @click="onExport">
                         {{ $t('commons.button.export') }}
                     </el-button>
                 </el-button-group>
@@ -78,11 +80,7 @@
                     </el-table-column>
                     <el-table-column :label="$t('commons.table.group')" min-width="120" prop="group">
                         <template #default="{ row }">
-                            <fu-select-rw-switch
-                                v-model="row.groupID"
-                                :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
-                                @change="updateGroup(row)"
-                            >
+                            <fu-select-rw-switch v-permission v-model="row.groupID" @change="updateGroup(row)">
                                 <template #read>
                                     {{ row.groupBelong === 'Default' ? $t('commons.table.default') : row.groupBelong }}
                                 </template>
@@ -100,17 +98,17 @@
                     <el-table-column :label="$t('commons.table.status')" :min-width="90" prop="status" sortable>
                         <template #default="{ row }">
                             <Status
+                                v-permission
                                 v-if="row.status === 'Enable'"
                                 @click="onChangeStatus(row.id, 'disable')"
                                 :status="row.status"
-                                :disabled="!hasManagePermission"
                                 :operate="true"
                             />
                             <Status
+                                v-permission
                                 v-if="row.status === 'Disable'"
                                 @click="onChangeStatus(row.id, 'enable')"
                                 :status="row.status"
-                                :disabled="!hasManagePermission"
                                 :operate="true"
                             />
                             <Status v-if="row.status === 'Pending'" :status="row.status" />
@@ -140,7 +138,7 @@
                     <el-table-column :label="$t('cronjob.retainCopies')" :min-width="120" prop="retainCopies">
                         <template #default="{ row }">
                             <el-button
-                                :disabled="!hasManagePermission"
+                                v-permission
                                 v-if="hasBackup(row.type)"
                                 @click="loadBackups(row)"
                                 plain
@@ -510,11 +508,12 @@ const loadDetail = (row: any) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.handle'),
+        permission: true,
         click: (row: Cronjob.CronjobInfo) => {
             onHandle(row);
         },
         disabled: (row: any) => {
-            return row.status === 'Pending' || !hasManagePermission.value;
+            return row.status === 'Pending';
         },
     },
     {
@@ -525,14 +524,14 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Cronjob.CronjobInfo) => {
             onOpenDialog(row.id + '');
         },
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Cronjob.CronjobInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/cronjob/cronjob/record/index.vue b/frontend/src/views/cronjob/cronjob/record/index.vue
index 42631ca2fe2f..9733dec86676 100644
--- a/frontend/src/views/cronjob/cronjob/record/index.vue
+++ b/frontend/src/views/cronjob/cronjob/record/index.vue
@@ -32,7 +32,8 @@
                     <div class="mt-0.5">
                         <el-button
                             type="primary"
-                            :disabled="dialogData.rowData.status === 'Pending' || !hasManagePermission"
+                            v-permission
+                            :disabled="dialogData.rowData.status === 'Pending'"
                             @click="onHandle(dialogData.rowData)"
                             link
                         >
@@ -42,7 +43,7 @@
                         <el-button
                             type="primary"
                             v-if="dialogData.rowData.status === 'Enable'"
-                            :disabled="!hasManagePermission"
+                            v-permission
                             @click="onChangeStatus(dialogData.rowData.id, 'disable')"
                             link
                         >
@@ -51,14 +52,14 @@
                         <el-button
                             type="primary"
                             v-if="dialogData.rowData.status === 'Disable'"
-                            :disabled="!hasManagePermission"
+                            v-permission
                             @click="onChangeStatus(dialogData.rowData.id, 'enable')"
                             link
                         >
                             {{ $t('commons.button.enable') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button :disabled="!hasRecords || !hasManagePermission" type="primary" @click="onClean" link>
+                        <el-button v-permission :disabled="!hasRecords" type="primary" @click="onClean" link>
                             {{ $t('commons.button.clean') }}
                         </el-button>
                     </div>
@@ -263,8 +264,6 @@ import { listDbItems } from '@/api/modules/database';
 import { listAppInstalled } from '@/api/modules/app';
 import { shortcuts } from '@/utils/shortcuts';
 import { hasBackup } from '../helper';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
-const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref();
 const hasRecords = ref();
diff --git a/frontend/src/views/cronjob/library/index.vue b/frontend/src/views/cronjob/library/index.vue
index 3916e31e611f..8c2d1700a6fa 100644
--- a/frontend/src/views/cronjob/library/index.vue
+++ b/frontend/src/views/cronjob/library/index.vue
@@ -2,7 +2,7 @@
     <div>
         <LayoutContent v-loading="loading" :title="$t('logs.login')">
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
+                <el-button v-permission type="primary" @click="onOpenDialog('create')">
                     {{ $t('commons.button.create') }}
                 </el-button>
                 <el-dropdown @command="handleSyncOp" class="mr-2.5">
@@ -12,23 +12,15 @@
                     </el-button>
                     <template #dropdown>
                         <el-dropdown-menu>
-                            <el-dropdown-item command="sync" :disabled="!hasManagePermission">
+                            <fu-dropdown-item v-permission command="sync">
                                 {{ $t('cronjob.library.syncNow') }}
-                            </el-dropdown-item>
-                            <el-dropdown-item
-                                v-if="scriptSync === 'Disable'"
-                                command="turnOnSync"
-                                :disabled="!hasManagePermission"
-                            >
+                            </fu-dropdown-item>
+                            <fu-dropdown-item v-permission v-if="scriptSync === 'Disable'" command="turnOnSync">
                                 {{ $t('cronjob.library.turnOnSync') }}
-                            </el-dropdown-item>
-                            <el-dropdown-item
-                                v-if="scriptSync === 'Enable'"
-                                command="turnOffSync"
-                                :disabled="!hasManagePermission"
-                            >
+                            </fu-dropdown-item>
+                            <fu-dropdown-item v-permission v-if="scriptSync === 'Enable'" command="turnOffSync">
                                 {{ $t('cronjob.library.turnOffSync') }}
-                            </el-dropdown-item>
+                            </fu-dropdown-item>
                         </el-dropdown-menu>
                     </template>
                 </el-dropdown>
@@ -36,7 +28,7 @@
                 <el-button type="primary" plain @click="onOpenGroupDialog()">
                     {{ $t('commons.table.group') }}
                 </el-button>
-                <el-button plain :disabled="selects.length === 0 || !hasManagePermission" @click="onDelete(null)">
+                <el-button v-permission plain :disabled="selects.length === 0" @click="onDelete(null)">
                     {{ $t('commons.button.delete') }}
                 </el-button>
             </template>
@@ -137,7 +129,6 @@ import OperateDialog from '@/views/cronjob/library/operate/index.vue';
 import TerminalDialog from '@/views/cronjob/library/run/index.vue';
 import { deleteScript, searchScript, syncScript } from '@/api/modules/cronjob';
 import { onMounted, reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Cronjob } from '@/api/interface/cronjob';
 import i18n from '@/lang';
 import { GlobalStore } from '@/store';
@@ -336,8 +327,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.clone'),
+        permission: true,
         disabled: (row: any) => {
-            return !row.isSystem || !hasManagePermission.value;
+            return !row.isSystem;
         },
         click: (row: Cronjob.ScriptInfo) => {
             let item = deepCopy(row) as Cronjob.ScriptInfo;
@@ -350,8 +342,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.edit'),
+        permission: true,
         disabled: (row: any) => {
-            return row.isSystem || !hasManagePermission.value;
+            return row.isSystem;
         },
         click: (row: Cronjob.ScriptInfo) => {
             onOpenDialog('edit', row);
@@ -359,8 +352,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
+        permission: true,
         disabled: (row: any) => {
-            return row.isSystem || !hasManagePermission.value;
+            return row.isSystem;
         },
         click: (row: Cronjob.ScriptInfo) => {
             onDelete(row);
diff --git a/frontend/src/views/database/mongodb/conn/index.vue b/frontend/src/views/database/mongodb/conn/index.vue
index fb46c5e54073..5a8c7b33cf2f 100644
--- a/frontend/src/views/database/mongodb/conn/index.vue
+++ b/frontend/src/views/database/mongodb/conn/index.vue
@@ -118,7 +118,8 @@
                     {{ $t('commons.button.cancel') }}
                 </el-button>
                 <el-button
-                    :disabled="loading || form.status !== 'Running' || !hasManagePermission"
+                    v-permission
+                    :disabled="loading || form.status !== 'Running'"
                     type="primary"
                     @click="onSave(formRef)"
                 >
@@ -131,7 +132,6 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Rules } from '@/global/form-rules';
 import { ElForm } from 'element-plus';
 import { getDatabase, updateMongodbRootPassword } from '@/api/modules/database';
@@ -144,7 +144,6 @@ import i18n from '@/lang';
 import { GlobalStore } from '@/store';
 
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 const loading = ref(false);
 const dialogVisible = ref(false);
 
diff --git a/frontend/src/views/database/mongodb/index.vue b/frontend/src/views/database/mongodb/index.vue
index 926df91932fc..e199721d9d00 100644
--- a/frontend/src/views/database/mongodb/index.vue
+++ b/frontend/src/views/database/mongodb/index.vue
@@ -26,7 +26,7 @@
             <template #leftToolBar>
                 <el-button
                     v-if="currentDB && (currentDB.from !== 'local' || mongodbStatus === 'Running')"
-                    :disabled="!hasManagePermission"
+                    v-permission
                     type="primary"
                     @click="openCreateDrawer"
                 >
@@ -39,7 +39,7 @@
                     v-if="currentDB && (currentDB.from !== 'local' || mongodbStatus === 'Running')"
                     type="primary"
                     plain
-                    :disabled="!hasManagePermission"
+                    v-permission
                     @click="onLoadFromRemote"
                 >
                     {{ $t('database.loadFromRemote') }}
@@ -203,8 +203,7 @@
                         <template #default="{ row }">
                             <fu-input-rw-switch
                                 v-model="row.description"
-                                :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
-                                :disabled="!hasManagePermission"
+                                v-permission
                                 @enter="onChange(row)"
                                 @blur="onChange(row)"
                             />
@@ -544,8 +543,9 @@ const search = (column?: { prop?: string; order?: string }) => {
 const buttons = [
     {
         label: i18n.global.t('database.changePassword'),
+        permission: true,
         disabled: (row: Database.MongodbDBInfo) => {
-            return !row.username || row.isDelete || !hasManagePermission.value;
+            return !row.username || row.isDelete;
         },
         click: (row: Database.MongodbDBInfo) => {
             onChangePassword(row);
@@ -553,8 +553,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('database.permission'),
+        permission: true,
         disabled: (row: Database.MongodbDBInfo) => {
-            return !row.username || row.isDelete || !hasManagePermission.value;
+            return !row.username || row.isDelete;
         },
         click: (row: Database.MongodbDBInfo) => {
             let param = {
@@ -567,8 +568,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('database.backupList'),
+        permission: true,
         disabled: (row: Database.MongodbDBInfo) => {
-            return row.isDelete || !hasManagePermission.value;
+            return row.isDelete;
         },
         click: (row: Database.MongodbDBInfo) => {
             openBackupList(row);
@@ -576,8 +578,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('database.loadBackup'),
+        permission: true,
         disabled: (row: Database.MongodbDBInfo) => {
-            return row.isDelete || !hasManagePermission.value;
+            return row.isDelete;
         },
         click: (row: Database.MongodbDBInfo) => {
             openUploadDialog(row);
@@ -585,9 +588,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => {
-            return !hasManagePermission.value;
-        },
+        permission: true,
         click: (row: Database.MongodbDBInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/database/mongodb/remote/index.vue b/frontend/src/views/database/mongodb/remote/index.vue
index 65a1b35cf128..08f242f20d9d 100644
--- a/frontend/src/views/database/mongodb/remote/index.vue
+++ b/frontend/src/views/database/mongodb/remote/index.vue
@@ -2,7 +2,7 @@
     <div v-loading="loading">
         <LayoutContent :title="$t('database.remoteDB', 2)" backName="MongoDB">
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
+                <el-button v-permission type="primary" @click="onOpenDialog('create')">
                     {{ $t('database.createRemoteDB') }}
                 </el-button>
             </template>
@@ -77,7 +77,6 @@
 <script lang="ts" setup>
 import { dateFormat } from '@/utils/date';
 import { onMounted, reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { deleteCheckDatabase, searchDatabases } from '@/api/modules/database';
 import AppResources from '@/views/database/postgresql/check/index.vue';
 import OperateDialog from '@/views/database/mongodb/remote/operate/index.vue';
@@ -86,7 +85,6 @@ import i18n from '@/lang';
 import { Database } from '@/api/interface/database';
 
 const loading = ref(false);
-const { hasManagePermission } = useMenuManagePermission();
 
 const dialogRef = ref();
 const checkRef = ref();
@@ -156,14 +154,14 @@ const onDelete = async (row: Database.DatabaseInfo) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Database.DatabaseInfo) => {
             onOpenDialog('edit', row);
         },
     },
     {
         label: i18n.global.t('commons.button.unbind'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Database.DatabaseInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/database/mysql/conn/index.vue b/frontend/src/views/database/mysql/conn/index.vue
index 7965c3c7d43c..2b31da071f07 100644
--- a/frontend/src/views/database/mysql/conn/index.vue
+++ b/frontend/src/views/database/mysql/conn/index.vue
@@ -74,8 +74,9 @@
             <div v-if="form.from === 'local'">
                 <el-form-item :label="$t('database.remoteAccess')" prop="privilege">
                     <el-switch
+                        v-permission
                         v-model="form.privilege"
-                        :disabled="form.status !== 'Running' || !hasManagePermission"
+                        :disabled="form.status !== 'Running'"
                         @change="onSaveAccess"
                     />
                     <span class="input-help">{{ $t('database.remoteConnHelper') }}</span>
@@ -114,7 +115,8 @@
                     {{ $t('commons.button.cancel') }}
                 </el-button>
                 <el-button
-                    :disabled="loading || form.status !== 'Running' || !hasManagePermission"
+                    v-permission
+                    :disabled="loading || form.status !== 'Running'"
                     type="primary"
                     @click="onSave(formRef)"
                 >
@@ -137,9 +139,7 @@ import { getRandomStr } from '@/utils/id';
 import { copyText } from '@/utils/clipboard';
 import { getAgentSettingInfo } from '@/api/modules/setting';
 import { GlobalStore } from '@/store';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index 4bbdf12c6510..8f2f2737007b 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -27,7 +27,7 @@
             <template #leftToolBar>
                 <el-button
                     v-if="currentDB && (currentDB.from !== 'local' || mysqlStatus === 'Running')"
-                    :disabled="!hasManagePermission"
+                    v-permission
                     type="primary"
                     @click="onOpenDialog()"
                 >
@@ -38,7 +38,7 @@
                 </el-button>
                 <el-button
                     v-if="currentDB && (currentDB.from !== 'local' || mysqlStatus === 'Running')"
-                    :disabled="!hasManagePermission"
+                    v-permission
                     @click="loadDB"
                     type="primary"
                     plain
@@ -201,8 +201,7 @@
                         <template #default="{ row }">
                             <fu-input-rw-switch
                                 v-model="row.description"
-                                :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
-                                :disabled="!hasManagePermission"
+                                v-permission
                                 @enter="onChange(row)"
                                 @blur="onChange(row)"
                             />
@@ -610,8 +609,9 @@ const onChangePassword = async (row: Database.MysqlDBInfo) => {
 const buttons = [
     {
         label: i18n.global.t('database.changePassword'),
+        permission: true,
         disabled: (row: Database.MysqlDBInfo) => {
-            return !row.username || row.isDelete || !hasManagePermission.value;
+            return !row.username || row.isDelete;
         },
         click: (row: Database.MysqlDBInfo) => {
             onChangePassword(row);
@@ -619,8 +619,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('database.permission'),
+        permission: true,
         disabled: (row: Database.MysqlDBInfo) => {
-            return !row.password || row.isDelete || !hasManagePermission.value;
+            return !row.password || row.isDelete;
         },
         click: (row: Database.MysqlDBInfo) => {
             let param = {
@@ -645,8 +646,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('database.backupList'),
+        permission: true,
         disabled: (row: Database.MysqlDBInfo) => {
-            return row.isDelete || !hasManagePermission.value;
+            return row.isDelete;
         },
         click: (row: Database.MysqlDBInfo) => {
             let params = {
@@ -659,8 +661,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('database.loadBackup'),
+        permission: true,
         disabled: (row: Database.MysqlDBInfo) => {
-            return row.isDelete || !hasManagePermission.value;
+            return row.isDelete;
         },
         click: (row: Database.MysqlDBInfo) => {
             let params = {
@@ -674,9 +677,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => {
-            return !hasManagePermission.value;
-        },
+        permission: true,
         click: (row: Database.MysqlDBInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/database/mysql/remote/index.vue b/frontend/src/views/database/mysql/remote/index.vue
index e1bf809eff7c..93aea4e3dcbe 100644
--- a/frontend/src/views/database/mysql/remote/index.vue
+++ b/frontend/src/views/database/mysql/remote/index.vue
@@ -2,7 +2,7 @@
     <div v-loading="loading">
         <LayoutContent backName="MySQL" :title="$t('database.remoteDB')">
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
+                <el-button v-permission type="primary" @click="onOpenDialog('create')">
                     {{ $t('database.createRemoteDB') }}
                 </el-button>
             </template>
@@ -82,9 +82,6 @@ import OperateDialog from '@/views/database/mysql/remote/operate/index.vue';
 import DeleteDialog from '@/views/database/mysql/remote/delete/index.vue';
 import i18n from '@/lang';
 import { Database } from '@/api/interface/database';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
-
-const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 
@@ -155,14 +152,14 @@ const onDelete = async (row: Database.DatabaseInfo) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Database.DatabaseInfo) => {
             onOpenDialog('edit', row);
         },
     },
     {
         label: i18n.global.t('commons.button.unbind'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Database.DatabaseInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/database/mysql/setting/index.vue b/frontend/src/views/database/mysql/setting/index.vue
index 4181a802998e..47ccee00d826 100644
--- a/frontend/src/views/database/mysql/setting/index.vue
+++ b/frontend/src/views/database/mysql/setting/index.vue
@@ -57,7 +57,7 @@
                     <el-button class="mt-2.5" @click="getDefaultConfig()">
                         {{ $t('app.defaultConfig') }}
                     </el-button>
-                    <el-button :disabled="!hasManagePermission" type="primary" class="mt-2.5" @click="onSaveConf">
+                    <el-button v-permission type="primary" class="mt-2.5" @click="onSaveConf">
                         {{ $t('commons.button.save') }}
                     </el-button>
                     <el-row>
@@ -84,8 +84,8 @@
                                 </el-form-item>
                                 <el-form-item>
                                     <el-button
+                                        v-permission
                                         type="primary"
-                                        :disabled="!hasManagePermission"
                                         @click="onSavePort(panelFormRef)"
                                         icon="Collection"
                                     >
@@ -139,8 +139,6 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
 import { routerToName } from '@/utils/router';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
-const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 
diff --git a/frontend/src/views/database/mysql/setting/slow-log/index.vue b/frontend/src/views/database/mysql/setting/slow-log/index.vue
index 8bf99c91f389..98006042b046 100644
--- a/frontend/src/views/database/mysql/setting/slow-log/index.vue
+++ b/frontend/src/views/database/mysql/setting/slow-log/index.vue
@@ -3,7 +3,7 @@
         <el-form label-position="left" label-width="80px" @submit.prevent>
             <el-form-item :label="$t('database.isOn')">
                 <el-switch
-                    :disabled="!hasManagePermission"
+                    v-permission
                     v-model="variables.slow_query_log"
                     active-value="ON"
                     inactive-value="OFF"
@@ -31,8 +31,6 @@ import { updateMysqlVariables } from '@/api/modules/database';
 import LogFile from '@/components/log/file/index.vue';
 import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
-const { hasManagePermission } = useMenuManagePermission();
 
 const detailShow = ref();
 const currentStatus = ref();
diff --git a/frontend/src/views/database/mysql/setting/variables/index.vue b/frontend/src/views/database/mysql/setting/variables/index.vue
index fb6390453ff9..724d4d164af8 100644
--- a/frontend/src/views/database/mysql/setting/variables/index.vue
+++ b/frontend/src/views/database/mysql/setting/variables/index.vue
@@ -63,11 +63,7 @@
                     </el-form-item>
 
                     <el-form-item>
-                        <el-button
-                            :disabled="!hasManagePermission"
-                            @click="onSaveStart(variableFormRef)"
-                            type="primary"
-                        >
+                        <el-button v-permission @click="onSaveStart(variableFormRef)" type="primary">
                             {{ $t('commons.button.save') }}
                         </el-button>
                     </el-form-item>
@@ -127,8 +123,6 @@ import { updateMysqlVariables } from '@/api/modules/database';
 import i18n from '@/lang';
 import { planOptions } from './../helper';
 import { MsgSuccess } from '@/utils/message';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
-const { hasManagePermission } = useMenuManagePermission();
 
 const plan = ref();
 const confirmDialogRef = ref();
diff --git a/frontend/src/views/database/postgresql/conn/index.vue b/frontend/src/views/database/postgresql/conn/index.vue
index 9574a149cada..7d49ead69785 100644
--- a/frontend/src/views/database/postgresql/conn/index.vue
+++ b/frontend/src/views/database/postgresql/conn/index.vue
@@ -112,7 +112,8 @@
                     {{ $t('commons.button.cancel') }}
                 </el-button>
                 <el-button
-                    :disabled="loading || form.status !== 'Running' || !hasManagePermission"
+                    v-permission
+                    :disabled="loading || form.status !== 'Running'"
                     type="primary"
                     @click="onSave(formRef)"
                 >
@@ -125,7 +126,6 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
@@ -137,7 +137,6 @@ import { copyText } from '@/utils/clipboard';
 import { getAgentSettingInfo } from '@/api/modules/setting';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 
diff --git a/frontend/src/views/database/postgresql/index.vue b/frontend/src/views/database/postgresql/index.vue
index 169af4d7acba..8d3c7c77fdd5 100644
--- a/frontend/src/views/database/postgresql/index.vue
+++ b/frontend/src/views/database/postgresql/index.vue
@@ -25,7 +25,7 @@
             <template #leftToolBar>
                 <el-button
                     v-if="currentDB && (currentDB.from !== 'local' || postgresqlStatus === 'Running')"
-                    :disabled="!hasManagePermission"
+                    v-permission
                     type="primary"
                     @click="onOpenDialog()"
                 >
@@ -36,7 +36,7 @@
                 </el-button>
                 <el-button
                     v-if="currentDB && (currentDB.from !== 'local' || postgresqlStatus === 'Running')"
-                    :disabled="!hasManagePermission"
+                    v-permission
                     @click="loadDB"
                     type="primary"
                     plain
@@ -167,8 +167,7 @@
                         <template #default="{ row }">
                             <fu-input-rw-switch
                                 v-model="row.description"
-                                :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
-                                :disabled="!hasManagePermission"
+                                v-permission
                                 @enter="onChange(row)"
                                 @blur="onChange(row)"
                             />
@@ -549,8 +548,9 @@ const onChangePassword = async (row: Database.PostgresqlDBInfo) => {
 const buttons = [
     {
         label: i18n.global.t('database.changePassword'),
+        permission: true,
         disabled: (row: Database.PostgresqlDBInfo) => {
-            return !row.username || row.isDelete || !hasManagePermission.value;
+            return !row.username || row.isDelete;
         },
         click: (row: Database.PostgresqlDBInfo) => {
             onChangePassword(row);
@@ -558,8 +558,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('database.permission'),
+        permission: true,
         disabled: (row: Database.PostgresqlDBInfo) => {
-            return !row.username || row.isDelete || !hasManagePermission.value;
+            return !row.username || row.isDelete;
         },
         click: (row: Database.PostgresqlDBInfo) => {
             let param = {
@@ -573,8 +574,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('database.backupList'),
+        permission: true,
         disabled: (row: Database.PostgresqlDBInfo) => {
-            return row.isDelete || !hasManagePermission.value;
+            return row.isDelete;
         },
         click: (row: Database.PostgresqlDBInfo) => {
             let params = {
@@ -587,8 +589,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('database.loadBackup'),
+        permission: true,
         disabled: (row: Database.PostgresqlDBInfo) => {
-            return row.isDelete || !hasManagePermission.value;
+            return row.isDelete;
         },
         click: (row: Database.PostgresqlDBInfo) => {
             let params = {
@@ -602,9 +605,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => {
-            return !hasManagePermission.value;
-        },
+        permission: true,
         click: (row: Database.PostgresqlDBInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/database/postgresql/remote/index.vue b/frontend/src/views/database/postgresql/remote/index.vue
index 177ce3960a0c..918f24a9a3ed 100644
--- a/frontend/src/views/database/postgresql/remote/index.vue
+++ b/frontend/src/views/database/postgresql/remote/index.vue
@@ -2,7 +2,7 @@
     <div v-loading="loading">
         <LayoutContent :title="$t('database.remoteDB', 2)" backName="PostgreSQL">
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
+                <el-button v-permission type="primary" @click="onOpenDialog('create')">
                     {{ $t('database.createRemoteDB') }}
                 </el-button>
             </template>
@@ -76,7 +76,6 @@
 <script lang="ts" setup>
 import { dateFormat } from '@/utils/date';
 import { onMounted, reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { deleteCheckDatabase, searchDatabases } from '@/api/modules/database';
 import AppResources from '@/views/database/postgresql/check/index.vue';
 import OperateDialog from '@/views/database/postgresql/remote/operate/index.vue';
@@ -85,7 +84,6 @@ import i18n from '@/lang';
 import { Database } from '@/api/interface/database';
 
 const loading = ref(false);
-const { hasManagePermission } = useMenuManagePermission();
 
 const dialogRef = ref();
 const checkRef = ref();
@@ -154,14 +152,14 @@ const onDelete = async (row: Database.DatabaseInfo) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Database.DatabaseInfo) => {
             onOpenDialog('edit', row);
         },
     },
     {
         label: i18n.global.t('commons.button.unbind'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Database.DatabaseInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/database/postgresql/setting/index.vue b/frontend/src/views/database/postgresql/setting/index.vue
index 348912cc8408..49b7b6215779 100644
--- a/frontend/src/views/database/postgresql/setting/index.vue
+++ b/frontend/src/views/database/postgresql/setting/index.vue
@@ -29,7 +29,7 @@
             <template #main>
                 <div v-if="activeName === 'conf'">
                     <CodemirrorPro :heightDiff="320" v-model="postgresqlConf"></CodemirrorPro>
-                    <el-button :disabled="!hasManagePermission" type="primary" class="mt-5" @click="onSaveConf">
+                    <el-button v-permission type="primary" class="mt-5" @click="onSaveConf">
                         {{ $t('commons.button.save') }}
                     </el-button>
                 </div>
@@ -43,8 +43,8 @@
                                 </el-form-item>
                                 <el-form-item>
                                     <el-button
+                                        v-permission
                                         type="primary"
-                                        :disabled="!hasManagePermission"
                                         @click="onSavePort(panelFormRef)"
                                         icon="Collection"
                                     >
@@ -82,7 +82,6 @@ import { FormInstance } from 'element-plus';
 import ContainerLog from '@/components/log/container/index.vue';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import { onMounted, reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { loadDBFile, loadDBBaseInfo, updateDBFile } from '@/api/modules/database';
 import { changePort, checkAppInstalled } from '@/api/modules/app';
 import { Rules } from '@/global/form-rules';
@@ -92,7 +91,6 @@ import CodemirrorPro from '@/components/codemirror-pro/index.vue';
 import { routerToName } from '@/utils/router';
 
 const loading = ref(false);
-const { hasManagePermission } = useMenuManagePermission();
 
 const activeName = ref('conf');
 
diff --git a/frontend/src/views/database/redis/command/index.vue b/frontend/src/views/database/redis/command/index.vue
index 50219059bd71..6938acde63a7 100644
--- a/frontend/src/views/database/redis/command/index.vue
+++ b/frontend/src/views/database/redis/command/index.vue
@@ -1,10 +1,10 @@
 <template>
     <DrawerPro v-model="drawerVisible" :header="$t('database.redisQuickCmd')" @close="handleClose" size="large">
         <template #content>
-            <el-button type="primary" :disabled="!hasManagePermission" @click="handleCmdAdd()">
+            <el-button v-permission type="primary" @click="handleCmdAdd()">
                 {{ $t('commons.button.add') }}
             </el-button>
-            <el-button :disabled="!hasManagePermission" @click="batchDelete(null)">
+            <el-button v-permission @click="batchDelete(null)">
                 {{ $t('commons.button.delete') }}
             </el-button>
             <el-table :data="data" class="mt-5" @selection-change="handleSelectionChange">
@@ -30,7 +30,7 @@
                             v-if="scope.row.lineStatus === 'create' || scope.row.lineStatus === 'edit'"
                             link
                             type="primary"
-                            :disabled="!hasManagePermission"
+                            v-permission
                             @click="handleCmdSave(scope.row)"
                         >
                             {{ $t('commons.button.save') }}
@@ -39,7 +39,7 @@
                             v-if="!scope.row.lineStatus || scope.row.lineStatus === 'saved'"
                             link
                             type="primary"
-                            :disabled="!hasManagePermission"
+                            v-permission
                             @click="scope.row.lineStatus = 'edit'"
                         >
                             {{ $t('commons.button.edit') }}
@@ -56,7 +56,7 @@
                             v-if="scope.row.lineStatus !== 'create' && scope.row.lineStatus !== 'edit'"
                             link
                             type="primary"
-                            :disabled="!hasManagePermission"
+                            v-permission
                             @click="handleCmdDelete(scope.$index)"
                         >
                             {{ $t('commons.button.delete') }}
@@ -78,10 +78,8 @@
 import { Command } from '@/api/interface/command';
 import { deleteCommand, getCommandPage, addCommand, editCommand } from '@/api/modules/command';
 import { reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
-const { hasManagePermission } = useMenuManagePermission();
 
 const drawerVisible = ref();
 const loading = ref();
diff --git a/frontend/src/views/database/redis/conn/index.vue b/frontend/src/views/database/redis/conn/index.vue
index 019a1e306edc..53dec1bcd9ac 100644
--- a/frontend/src/views/database/redis/conn/index.vue
+++ b/frontend/src/views/database/redis/conn/index.vue
@@ -103,7 +103,8 @@
                     {{ $t('commons.button.cancel') }}
                 </el-button>
                 <el-button
-                    :disabled="loading || form.status !== 'Running' || !hasManagePermission"
+                    v-permission
+                    :disabled="loading || form.status !== 'Running'"
                     type="primary"
                     @click="onSave(formRef)"
                 >
@@ -116,7 +117,6 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { changeRedisPassword, getDatabase } from '@/api/modules/database';
@@ -128,7 +128,6 @@ import { copyText } from '@/utils/clipboard';
 import { getAgentSettingInfo } from '@/api/modules/setting';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 
diff --git a/frontend/src/views/database/redis/index.vue b/frontend/src/views/database/redis/index.vue
index e5b45806df3d..a67bd66c99ab 100644
--- a/frontend/src/views/database/redis/index.vue
+++ b/frontend/src/views/database/redis/index.vue
@@ -81,12 +81,7 @@
                         :style="{ height: `calc(100vh - ${loadHeight()})`, 'background-color': '#000' }"
                         :description="loadErrMsg()"
                     >
-                        <el-button
-                            v-if="currentDB.from === 'remote'"
-                            :disabled="!hasManagePermission"
-                            type="primary"
-                            @click="installCli"
-                        >
+                        <el-button v-if="currentDB.from === 'remote'" v-permission type="primary" @click="installCli">
                             {{ $t('commons.button.enable') }}
                         </el-button>
                     </el-empty>
@@ -100,12 +95,7 @@
                                 :value="cmd.command"
                             />
                         </el-select>
-                        <el-button
-                            :disabled="!hasManagePermission"
-                            @click="onSetQuickCmd"
-                            icon="Setting"
-                            style="width: 10%"
-                        >
+                        <el-button v-permission @click="onSetQuickCmd" icon="Setting" style="width: 10%">
                             {{ $t('commons.button.set') }}
                         </el-button>
                     </div>
@@ -154,7 +144,6 @@ import Terminal from '@/components/terminal/index.vue';
 import AppStatus from '@/components/app-status/index.vue';
 import QuickCmd from '@/views/database/redis/command/index.vue';
 import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { checkAppInstalled } from '@/api/modules/app';
 import { GlobalStore } from '@/store';
 import { listDatabases, checkRedisCli, installRedisCli } from '@/api/modules/database';
@@ -164,7 +153,6 @@ import i18n from '@/lang';
 import { getCommandList } from '@/api/modules/command';
 import { routerToName, routerToNameWithQuery } from '@/utils/router';
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 
diff --git a/frontend/src/views/database/redis/remote/index.vue b/frontend/src/views/database/redis/remote/index.vue
index 7b4527d93b68..df34adf96542 100644
--- a/frontend/src/views/database/redis/remote/index.vue
+++ b/frontend/src/views/database/redis/remote/index.vue
@@ -2,7 +2,7 @@
     <div v-loading="loading">
         <LayoutContent :title="$t('database.remoteDB', 2)" backName="Redis">
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
+                <el-button v-permission type="primary" @click="onOpenDialog('create')">
                     {{ $t('database.createRemoteDB') }}
                 </el-button>
             </template>
@@ -75,7 +75,6 @@
 <script lang="ts" setup>
 import { dateFormat } from '@/utils/date';
 import { onMounted, reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { deleteCheckDatabase, searchDatabases } from '@/api/modules/database';
 import AppResources from '@/views/database/redis/check/index.vue';
 import OperateDialog from '@/views/database/redis/remote/operate/index.vue';
@@ -84,7 +83,6 @@ import i18n from '@/lang';
 import { Database } from '@/api/interface/database';
 
 const loading = ref(false);
-const { hasManagePermission } = useMenuManagePermission();
 
 const dialogRef = ref();
 const checkRef = ref();
@@ -154,14 +152,14 @@ const onDelete = async (row: Database.DatabaseInfo) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Database.DatabaseInfo) => {
             onOpenDialog('edit', row);
         },
     },
     {
         label: i18n.global.t('commons.button.unbind'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Database.DatabaseInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/database/redis/setting/index.vue b/frontend/src/views/database/redis/setting/index.vue
index 2e918683f15c..2e6e38db3cb3 100644
--- a/frontend/src/views/database/redis/setting/index.vue
+++ b/frontend/src/views/database/redis/setting/index.vue
@@ -47,7 +47,7 @@
                     <el-button class="mt-5" @click="getDefaultConfig()">
                         {{ $t('app.defaultConfig') }}
                     </el-button>
-                    <el-button :disabled="!hasManagePermission" type="primary" @click="onSaveFile" class="mt-5">
+                    <el-button v-permission type="primary" @click="onSaveFile" class="mt-5">
                         {{ $t('commons.button.save') }}
                     </el-button>
                     <el-row>
@@ -87,11 +87,7 @@
                                     <span class="input-help">{{ $t('database.maxmemoryHelper') }}</span>
                                 </el-form-item>
                                 <el-form-item>
-                                    <el-button
-                                        :disabled="!hasManagePermission"
-                                        type="primary"
-                                        @click="onSubmitForm(formRef)"
-                                    >
+                                    <el-button v-permission type="primary" @click="onSubmitForm(formRef)">
                                         {{ $t('commons.button.save') }}
                                     </el-button>
                                 </el-form-item>
@@ -108,11 +104,7 @@
                                     <el-input clearable type="number" v-model.number="form.port" />
                                 </el-form-item>
                                 <el-form-item>
-                                    <el-button
-                                        :disabled="!hasManagePermission"
-                                        @click="onSavePort(portRef)"
-                                        icon="Collection"
-                                    >
+                                    <el-button v-permission @click="onSavePort(portRef)" icon="Collection">
                                         {{ $t('commons.button.save') }}
                                     </el-button>
                                 </el-form-item>
@@ -136,7 +128,6 @@
 <script lang="ts" setup>
 import { FormInstance } from 'element-plus';
 import { reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import Status from '@/views/database/redis/setting/status/index.vue';
 import Persistence from '@/views/database/redis/setting/persistence/index.vue';
@@ -147,7 +138,6 @@ import { changePort, getAppDefaultConfig } from '@/api/modules/app';
 import { MsgSuccess } from '@/utils/message';
 
 const loading = ref(false);
-const { hasManagePermission } = useMenuManagePermission();
 
 const form = reactive({
     name: '',
diff --git a/frontend/src/views/database/redis/setting/persistence/index.vue b/frontend/src/views/database/redis/setting/persistence/index.vue
index 837ac1d17c27..a94bb001e85e 100644
--- a/frontend/src/views/database/redis/setting/persistence/index.vue
+++ b/frontend/src/views/database/redis/setting/persistence/index.vue
@@ -27,11 +27,7 @@
                                     </el-radio-group>
                                 </el-form-item>
                                 <el-form-item>
-                                    <el-button
-                                        :disabled="!hasManagePermission"
-                                        type="primary"
-                                        @click="onSave(formRef, 'aof')"
-                                    >
+                                    <el-button v-permission type="primary" @click="onSave(formRef, 'aof')">
                                         {{ $t('commons.button.save') }}
                                     </el-button>
                                 </el-form-item>
@@ -66,7 +62,7 @@
                                     link
                                     type="primary"
                                     style="font-size: 10px"
-                                    :disabled="!hasManagePermission"
+                                    v-permission
                                     @click="handleDelete(index)"
                                 >
                                     {{ $t('commons.button.delete') }}
@@ -75,7 +71,7 @@
                         </tr>
                         <tr>
                             <td align="left">
-                                <el-button :disabled="!hasManagePermission" @click="handleAdd()">
+                                <el-button v-permission @click="handleAdd()">
                                     {{ $t('commons.button.add') }}
                                 </el-button>
                             </td>
@@ -84,12 +80,7 @@
                     <div>
                         <span style="margin-left: 2px; margin-top: 5px">{{ $t('database.rdbHelper3') }}</span>
                     </div>
-                    <el-button
-                        :disabled="!hasManagePermission"
-                        type="primary"
-                        @click="onSave(undefined, 'rbd')"
-                        style="margin-top: 10px"
-                    >
+                    <el-button v-permission type="primary" @click="onSave(undefined, 'rbd')" style="margin-top: 10px">
                         {{ $t('commons.button.save') }}
                     </el-button>
                 </el-card>
@@ -98,13 +89,14 @@
         <el-card style="margin-top: 20px">
             <ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" @search="search" :data="data">
                 <template #toolbar>
-                    <el-button :disabled="!hasManagePermission" type="primary" @click="onBackup">
+                    <el-button v-permission type="primary" @click="onBackup">
                         {{ $t('commons.button.backup') }}
                     </el-button>
                     <el-button
+                        v-permission
                         type="primary"
                         plain
-                        :disabled="selects.length === 0 || !hasManagePermission"
+                        :disabled="selects.length === 0"
                         @click="onBatchDelete(null)"
                     >
                         {{ $t('commons.button.delete') }}
@@ -145,7 +137,6 @@ import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import { Database } from '@/api/interface/database';
 import { redisPersistenceConf, updateRedisPersistenceConf } from '@/api/modules/database';
 import { deleteBackupRecord, handleBackup, handleRecover, searchBackupRecords } from '@/api/modules/backup';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Rules } from '@/global/form-rules';
 import { dateFormat } from '@/utils/date';
 import { newUUID } from '@/utils/id';
@@ -154,7 +145,6 @@ import { FormInstance } from 'element-plus';
 import { reactive, ref } from 'vue';
 import { MsgInfo, MsgSuccess } from '@/utils/message';
 import { Backup } from '@/api/interface/backup';
-const { hasManagePermission } = useMenuManagePermission();
 
 interface saveStruct {
     second: number;
@@ -285,7 +275,7 @@ const onBatchDelete = async (row: Backup.RecordInfo | null) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.recover'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Backup.RecordInfo) => {
             currentRow.value = row;
             let params = {
@@ -298,7 +288,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Backup.RecordInfo) => {
             onBatchDelete(row);
         },
diff --git a/frontend/src/views/home/app/index.vue b/frontend/src/views/home/app/index.vue
index 8464119f4a00..9c7004895a36 100644
--- a/frontend/src/views/home/app/index.vue
+++ b/frontend/src/views/home/app/index.vue
@@ -79,7 +79,7 @@
                                             type="primary"
                                             link
                                             v-if="app.currentRow.status !== 'Running'"
-                                            :disabled="!hasManagePermission"
+                                            v-permission="'app_manage'"
                                             @click="onOperate('start', app.currentRow)"
                                         >
                                             {{ $t('commons.button.start') }}
@@ -90,7 +90,7 @@
                                             type="primary"
                                             link
                                             v-else
-                                            :disabled="!hasManagePermission"
+                                            v-permission="'app_manage'"
                                             @click="onOperate('stop', app.currentRow)"
                                         >
                                             {{ $t('commons.button.stop') }}
@@ -100,7 +100,7 @@
                                             size="small"
                                             type="primary"
                                             link
-                                            :disabled="!hasManagePermission"
+                                            v-permission="'app_manage'"
                                             @click="onOperate('restart', app.currentRow)"
                                         >
                                             {{ $t('commons.button.restart') }}
@@ -110,7 +110,7 @@
                                             size="small"
                                             type="primary"
                                             link
-                                            :disabled="!hasManagePermission"
+                                            v-permission="'app_manage'"
                                             @click="routerToName('AppInstalled')"
                                         >
                                             {{ $t('tabs.more') }}
@@ -124,11 +124,9 @@
                                     type="primary"
                                     plain
                                     round
+                                    v-permission="'app_manage'"
                                     size="small"
-                                    :disabled="
-                                        (app.limit == 1 && app.detail && app.detail.length !== 0) ||
-                                        !hasManagePermission
-                                    "
+                                    :disabled="app.limit == 1 && app.detail && app.detail.length !== 0"
                                     @click="goInstall(app.key, app.appType)"
                                 >
                                     {{ $t('commons.button.install') }}
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index dd3dbc5e8e31..c716b3d65681 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -492,7 +492,7 @@ import {
     setDashboardCache,
 } from '@/utils/dashboardCache';
 import { MsgSuccess } from '@/utils/message';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
+import { useCan } from '@/composables/useMenuManagePermission';
 const router = useRouter();
 const globalStore = GlobalStore();
 
@@ -576,17 +576,19 @@ const hasRefreshedOptionsOnHover = ref(false);
 const licenseRef = ref();
 const quickJumpRef = ref();
 const { isProductPro, isEnterprise, isOffline } = storeToRefs(globalStore);
-const quickJumpPermissionMap = {
-    Agent: useMenuManagePermission('ai_agent_view').hasPermission,
-    Website: useMenuManagePermission('website_view').hasPermission,
-    Database: useMenuManagePermission('database_view').hasPermission,
-    Cronjob: useMenuManagePermission('cronjob_view').hasPermission,
-    AppInstalled: useMenuManagePermission('app_view').hasPermission,
-    File: useMenuManagePermission('host_file_view').hasPermission,
-} as const;
+const quickJumpPermissionMap = Object.fromEntries(
+    [
+        ['Agent', 'ai_agent_view'],
+        ['Website', 'website_view'],
+        ['Database', 'database_view'],
+        ['Cronjob', 'cronjob_view'],
+        ['AppInstalled', 'app_view'],
+        ['File', 'host_file_view'],
+    ].map(([name, permission]) => [name, useCan(permission)]),
+) as Record<string, ReturnType<typeof useCan>>;
 
 const checkPermission = (item: string) => {
-    return quickJumpPermissionMap[item as keyof typeof quickJumpPermissionMap]?.value ?? true;
+    return quickJumpPermissionMap[item]?.value ?? true;
 };
 
 const searchInfo = reactive({
diff --git a/frontend/src/views/host/disk-management/components/disk-card.vue b/frontend/src/views/host/disk-management/components/disk-card.vue
index 047b04c69a7f..f6d967d51202 100644
--- a/frontend/src/views/host/disk-management/components/disk-card.vue
+++ b/frontend/src/views/host/disk-management/components/disk-card.vue
@@ -48,12 +48,7 @@
                                 diskInfo.mountPoint == ''
                             "
                         >
-                            <el-button
-                                type="primary"
-                                size="small"
-                                :disabled="!hasManagePermission"
-                                @click="handlePartition(diskInfo)"
-                            >
+                            <el-button v-permission type="primary" size="small" @click="handlePartition(diskInfo)">
                                 {{ $t('disk.handlePartition') }}
                             </el-button>
                         </div>
@@ -98,15 +93,15 @@
                     <template #default="{ row }">
                         <el-text type="info" v-if="scope === 'system'">{{ $t('disk.cannotOperate') }}</el-text>
                         <el-button
+                            v-permission
                             type="primary"
                             link
                             v-else-if="row.mountPoint != ''"
-                            :disabled="!hasManagePermission"
                             @click="unmount(row)"
                         >
                             {{ $t('disk.unmount') }}
                         </el-button>
-                        <el-button type="primary" link v-else :disabled="!hasManagePermission" @click="mount(row)">
+                        <el-button v-permission type="primary" link v-else @click="mount(row)">
                             {{ $t('disk.mount') }}
                         </el-button>
                     </template>
@@ -151,15 +146,15 @@
                     <template #default="{ row }">
                         <el-text type="info" v-if="scope === 'system'">{{ $t('disk.cannotOperate') }}</el-text>
                         <el-button
+                            v-permission
                             type="primary"
                             link
                             v-else-if="row.mountPoint != ''"
-                            :disabled="!hasManagePermission"
                             @click="unmount(row)"
                         >
                             {{ $t('disk.unmount') }}
                         </el-button>
-                        <el-button type="primary" link v-else :disabled="!hasManagePermission" @click="mount(row)">
+                        <el-button v-permission type="primary" link v-else @click="mount(row)">
                             {{ $t('disk.mount') }}
                         </el-button>
                     </template>
@@ -186,10 +181,6 @@ defineProps({
         type: String,
         required: false,
     },
-    hasManagePermission: {
-        type: Boolean,
-        default: true,
-    },
 });
 
 const handlePartition = (diskInfo: Host.DiskInfo) => {
diff --git a/frontend/src/views/host/disk-management/disk/index.vue b/frontend/src/views/host/disk-management/disk/index.vue
index d3e08b2cb332..c3a1b73659fc 100644
--- a/frontend/src/views/host/disk-management/disk/index.vue
+++ b/frontend/src/views/host/disk-management/disk/index.vue
@@ -17,7 +17,6 @@
                     v-for="(disk, index) in diskInfo.unpartitionedDisks"
                     :key="index"
                     :diskInfo="disk"
-                    :has-manage-permission="hasManagePermission"
                     scope="unpartitioned"
                     @partition="(diskInfo) => partitionRef.acceptParams(diskInfo, 'partition')"
                     @search="() => getDisk()"
@@ -29,7 +28,6 @@
                     v-for="(disk, index) in diskInfo.disks"
                     :key="index"
                     :diskInfo="disk"
-                    :has-manage-permission="hasManagePermission"
                     @mount="(diskInfo) => partitionRef.acceptParams(diskInfo, 'mount')"
                     scope="normal"
                     @search="() => getDisk()"
@@ -45,10 +43,8 @@ import { listDisks } from '@/api/modules/host';
 import DiskRouter from '@/views/host/disk-management/index.vue';
 import DiskCard from '@/views/host/disk-management/components/disk-card.vue';
 import Partition from '@/views/host/disk-management/partition/index.vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const loading = ref(false);
-const { hasManagePermission } = useMenuManagePermission();
 const partitionRef = ref();
 const diskInfo = ref<Host.CompleteDiskInfo>();
 
diff --git a/frontend/src/views/host/disk-management/partition/index.vue b/frontend/src/views/host/disk-management/partition/index.vue
index b183161d5b01..6cc3fc159f48 100644
--- a/frontend/src/views/host/disk-management/partition/index.vue
+++ b/frontend/src/views/host/disk-management/partition/index.vue
@@ -30,24 +30,20 @@
             <el-form-item :label="$t('disk.mountPoint')" prop="mountPoint">
                 <el-input v-model="form.mountPoint">
                     <template #prepend>
-                        <el-button
-                            icon="Folder"
-                            :disabled="!hasManagePermission"
-                            @click="fileRef.acceptParams({ dir: true })"
-                        />
+                        <el-button icon="Folder" v-permission @click="fileRef.acceptParams({ dir: true })" />
                     </template>
                 </el-input>
             </el-form-item>
             <el-form-item :label="$t('disk.autoMount')" prop="autoMount">
-                <el-switch :disabled="!hasManagePermission" v-model="form.autoMount" />
+                <el-switch v-permission v-model="form.autoMount" />
             </el-form-item>
             <el-form-item :label="$t('disk.noFail')" prop="noFail" v-if="form.autoMount">
-                <el-switch :disabled="!hasManagePermission" v-model="form.noFail" />
+                <el-switch v-permission v-model="form.noFail" />
             </el-form-item>
         </el-form>
         <template #footer>
             <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
-            <el-button type="primary" @click="submit" :disabled="loading || !hasManagePermission">
+            <el-button v-permission type="primary" @click="submit" :disabled="loading">
                 {{ $t('commons.button.confirm') }}
             </el-button>
         </template>
@@ -61,9 +57,6 @@ import { mountDisk, partitionDisk } from '@/api/modules/host';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
-
-const { hasManagePermission } = useMenuManagePermission();
 
 const rules = ref<any>({
     filesystem: [Rules.requiredInput],
diff --git a/frontend/src/views/host/file-management/favorite/index.vue b/frontend/src/views/host/file-management/favorite/index.vue
index 26e980dc3a44..9982da015579 100644
--- a/frontend/src/views/host/file-management/favorite/index.vue
+++ b/frontend/src/views/host/file-management/favorite/index.vue
@@ -24,9 +24,6 @@ import { searchFavorite, removeFavorite } from '@/api/modules/files';
 import i18n from '@/lang';
 import { reactive, ref } from 'vue';
 import { File } from '@/api/interface/file';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
-
-const { hasManagePermission } = useMenuManagePermission();
 
 const paginationConfig = reactive({
     cacheSizeKey: 'favorite-page-size',
@@ -92,7 +89,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: any) => {
             singleDel(row.id);
         },
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index 7b5aa606950c..87ce7c532fe4 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -223,14 +223,14 @@
                                 </el-button>
                                 <template #dropdown>
                                     <el-dropdown-menu>
-                                        <el-dropdown-item command="dir" :disabled="!hasManagePermission">
+                                        <fu-dropdown-item v-permission command="dir">
                                             <svg-icon iconName="p-file-folder"></svg-icon>
                                             {{ $t('file.dir') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item command="file" :disabled="!hasManagePermission">
+                                        </fu-dropdown-item>
+                                        <fu-dropdown-item v-permission command="file">
                                             <svg-icon iconName="p-file-normal"></svg-icon>
                                             {{ $t('menu.files') }}
-                                        </el-dropdown-item>
+                                        </fu-dropdown-item>
                                     </el-dropdown-menu>
                                 </template>
                             </el-dropdown>
@@ -241,14 +241,14 @@
                                 </el-button>
                                 <template #dropdown>
                                     <el-dropdown-menu>
-                                        <el-dropdown-item @click="openUpload" :disabled="!hasManagePermission">
+                                        <fu-dropdown-item v-permission @click="openUpload">
                                             <el-icon><ElUpload /></el-icon>
                                             {{ $t('commons.button.upload') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item @click="openWget" :disabled="!hasManagePermission">
+                                        </fu-dropdown-item>
+                                        <fu-dropdown-item v-permission @click="openWget">
                                             <el-icon><ElDownload /></el-icon>
                                             {{ $t('file.remoteFile') }}
-                                        </el-dropdown-item>
+                                        </fu-dropdown-item>
                                     </el-dropdown-menu>
                                 </template>
                             </el-dropdown>
@@ -386,14 +386,15 @@
                                         </el-button>
                                         <template #dropdown>
                                             <el-dropdown-menu>
-                                                <el-dropdown-item
+                                                <fu-dropdown-item
+                                                    v-permission
                                                     v-for="btn in moreButtons"
                                                     :key="btn.label"
                                                     @click="btn.action"
                                                     :disabled="selects.length === 0"
                                                 >
                                                     {{ $t(btn.label) }}
-                                                </el-dropdown-item>
+                                                </fu-dropdown-item>
                                             </el-dropdown-menu>
                                         </template>
                                     </el-dropdown>
@@ -402,9 +403,10 @@
                                     <el-button-group class="flex items-center">
                                         <template v-for="btn in visibleButtons" :key="btn.label">
                                             <el-button
+                                                v-permission
                                                 plain
                                                 @click="btn.action"
-                                                :disabled="selects.length === 0 || !hasManagePermission"
+                                                :disabled="selects.length === 0"
                                             >
                                                 {{ $t(btn.label) }}
                                             </el-button>
@@ -417,14 +419,15 @@
                                             </el-button>
                                             <template #dropdown>
                                                 <el-dropdown-menu>
-                                                    <el-dropdown-item
+                                                    <fu-dropdown-item
+                                                        v-permission
                                                         v-for="btn in moreButtons"
                                                         :key="btn.label"
                                                         @click="btn.action"
                                                         :disabled="selects.length === 0"
                                                     >
                                                         {{ $t(btn.label) }}
-                                                    </el-dropdown-item>
+                                                    </fu-dropdown-item>
                                                 </el-dropdown-menu>
                                             </template>
                                         </el-dropdown>
@@ -438,7 +441,7 @@
                                     :content="$t('file.paste')"
                                     placement="bottom"
                                 >
-                                    <el-button plain :disabled="!hasManagePermission" @click="openPaste">
+                                    <el-button v-permission plain @click="openPaste">
                                         {{ $t('file.paste') }}({{ fileMove.count }})
                                     </el-button>
                                 </el-tooltip>
@@ -477,12 +480,7 @@
                                         </template>
                                     </el-input>
                                 </div>
-                                <el-button
-                                    plain
-                                    type="primary"
-                                    :disabled="!hasManagePermission"
-                                    @click="openAiSearchDrawer"
-                                >
+                                <el-button v-permission plain type="primary" @click="openAiSearchDrawer">
                                     {{ $t('file.aiSearch') }}
                                 </el-button>
                             </div>
@@ -548,30 +546,30 @@
                                         <div>
                                             <el-button
                                                 v-if="row.shareCode"
+                                                v-permission
                                                 link
                                                 type="primary"
                                                 size="large"
                                                 icon="Share"
-                                                :disabled="!hasManagePermission"
                                                 @click="openShareFile(row)"
                                             ></el-button>
                                         </div>
                                         <div>
                                             <el-button
                                                 v-if="row.favoriteID > 0"
+                                                v-permission
                                                 link
                                                 type="warning"
                                                 size="large"
                                                 icon="StarFilled"
-                                                :disabled="!hasManagePermission"
                                                 @click="remove(row.favoriteID)"
                                             ></el-button>
                                             <div v-else>
                                                 <el-button
                                                     v-if="hoveredRowPath === row.path"
+                                                    v-permission
                                                     link
                                                     icon="Star"
-                                                    :disabled="!hasManagePermission"
                                                     @click="addToFavorite(row)"
                                                 ></el-button>
                                             </div>
@@ -581,7 +579,7 @@
                             </el-table-column>
                             <el-table-column :label="$t('file.mode')" prop="mode" width="80">
                                 <template #default="{ row }">
-                                    <el-link underline="never" :disabled="!hasManagePermission" @click="openMode(row)">
+                                    <el-link v-permission underline="never" @click="openMode(row)">
                                         {{ row.mode }}
                                     </el-link>
                                 </template>
@@ -593,7 +591,7 @@
                                 width="200"
                             >
                                 <template #default="{ row }">
-                                    <el-link underline="never" :disabled="!hasManagePermission" @click="openChown(row)">
+                                    <el-link v-permission underline="never" @click="openChown(row)">
                                         {{ row.user ? row.user : '-' }} ({{ row.uid }}) /
                                         {{ row.group ? row.group : '-' }} ({{ row.gid }})
                                     </el-link>
@@ -772,7 +770,6 @@ import TerminalDialog from './terminal/index.vue';
 import { Dashboard } from '@/api/interface/dashboard';
 import { CompressExtension, MimetypeByExtensionObject } from '@/enums/files';
 import type { TabPaneName } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { getComponentInfo } from '@/api/modules/host';
 import { routerToNameWithQuery } from '@/utils/router';
 import { loadBaseDir } from '@/api/modules/setting';
@@ -782,7 +779,6 @@ import { useGlobalStore } from '@/composables/useGlobalStore';
 const { isMobile } = useGlobalStore();
 
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 
 interface FilePaths {
     url: string;
@@ -1788,24 +1784,25 @@ const beforeButtons = [
     },
     {
         label: i18n.global.t('commons.button.copy'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: File.File) => openMoveBtn('copy', row),
     },
     {
         label: i18n.global.t('file.move'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: File.File) => openMoveBtn('cut', row),
     },
     {
         label: i18n.global.t('file.paste'),
+        permission: true,
         click: openPaste,
         disabled: () => {
-            return !moveOpen.value || !hasManagePermission.value;
+            return !moveOpen.value;
         },
     },
     {
         label: i18n.global.t('file.compress'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: File.File) => {
             openCompress([row]);
         },
@@ -1819,7 +1816,7 @@ const beforeButtons = [
     },
     {
         label: i18n.global.t('file.editPermissions'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: File.File) => {
             openBatchRole([row]);
         },
@@ -1827,7 +1824,7 @@ const beforeButtons = [
     {
         label: i18n.global.t('file.setRemark'),
         hideOnRemarkBlackList: true,
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: File.File) => {
             openRemark(row);
         },
@@ -1836,8 +1833,9 @@ const beforeButtons = [
 const afterButtons = [
     {
         label: i18n.global.t('commons.button.delete'),
+        permission: true,
         disabled: (row: File.File) => {
-            return row.name == '.1panel_clash' || !hasManagePermission.value;
+            return row.name == '.1panel_clash';
         },
         click: delFile,
         divided: true,
@@ -1848,7 +1846,7 @@ const afterButtons = [
     },
     {
         label: i18n.global.t('file.addFavoriteAction'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: File.File) => {
             addToFavorite(row);
         },
@@ -1856,7 +1854,7 @@ const afterButtons = [
     },
     {
         label: i18n.global.t('file.removeFavoriteAction'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: File.File) => {
             remove(row?.favoriteID);
         },
@@ -1864,7 +1862,7 @@ const afterButtons = [
     },
     {
         label: i18n.global.t('file.shareFile'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: openShareFile,
         show: (row: File.File) => {
             return !row?.isDir && !row?.shareCode;
@@ -1872,7 +1870,7 @@ const afterButtons = [
     },
     {
         label: i18n.global.t('file.shareCancel'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: File.File) => {
             removeShareByPath(row.path);
         },
@@ -1882,11 +1880,12 @@ const afterButtons = [
     },
     {
         label: i18n.global.t('file.convert'),
+        permission: true,
         click: (row: File.File) => {
             openConvert(row);
         },
         disabled: (row: File.File) => {
-            return row?.isDir || !isConvertible(row?.extension, row?.mimeType) || !hasManagePermission.value;
+            return row?.isDir || !isConvertible(row?.extension, row?.mimeType);
         },
     },
     {
@@ -1903,7 +1902,7 @@ const afterButtons = [
 const rightBtnRename = [
     {
         label: i18n.global.t('file.rename'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: File.File) => {
             openRename(row, 'right');
         },
@@ -1912,7 +1911,7 @@ const rightBtnRename = [
 const moreBtnRename = [
     {
         label: i18n.global.t('file.rename'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: File.File) => {
             openRename(row, 'more');
         },
diff --git a/frontend/src/views/host/file-management/recycle-bin/index.vue b/frontend/src/views/host/file-management/recycle-bin/index.vue
index 2be6134a56d4..7d3e2b0d03f0 100644
--- a/frontend/src/views/host/file-management/recycle-bin/index.vue
+++ b/frontend/src/views/host/file-management/recycle-bin/index.vue
@@ -2,25 +2,21 @@
     <DrawerPro v-model="open" :header="$t('file.recycleBin')" @close="handleClose" size="large">
         <template #content>
             <div class="flex space-x-4">
-                <el-button
-                    @click="clear"
-                    type="primary"
-                    :disabled="data == null || data.length == 0 || !hasManagePermission"
-                >
+                <el-button v-permission @click="clear" type="primary" :disabled="data == null || data.length == 0">
                     {{ $t('file.clearRecycleBin') }}
                 </el-button>
-                <el-button @click="patchDelete" :disabled="data == null || selects.length == 0 || !hasManagePermission">
+                <el-button v-permission @click="patchDelete" :disabled="data == null || selects.length == 0">
                     {{ $t('commons.button.delete') }}
                 </el-button>
-                <el-button @click="patchReduce" :disabled="data == null || selects.length == 0 || !hasManagePermission">
+                <el-button v-permission @click="patchReduce" :disabled="data == null || selects.length == 0">
                     {{ $t('file.reduce') }}
                 </el-button>
                 <el-form-item :label="$t('file.fileRecycleBin')">
                     <el-switch
+                        v-permission
                         v-model="status"
                         active-value="Enable"
                         inactive-value="Disable"
-                        :disabled="!hasManagePermission"
                         @change="changeStatus"
                     />
                 </el-form-item>
@@ -78,9 +74,6 @@ import Delete from './delete/index.vue';
 import Reduce from './reduce/index.vue';
 import { MsgSuccess } from '@/utils/message';
 import { updateAgentSetting } from '@/api/modules/setting';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
-
-const { hasManagePermission } = useMenuManagePermission();
 
 const open = ref(false);
 const req = reactive({
@@ -194,12 +187,12 @@ const clear = async () => {
 const buttons = [
     {
         label: i18n.global.t('file.reduce'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: rdFile,
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: singleDel,
     },
 ];
diff --git a/frontend/src/views/host/file-management/share-list/index.vue b/frontend/src/views/host/file-management/share-list/index.vue
index 89db764396a9..4b0b2087d6ea 100644
--- a/frontend/src/views/host/file-management/share-list/index.vue
+++ b/frontend/src/views/host/file-management/share-list/index.vue
@@ -29,9 +29,6 @@ import { File } from '@/api/interface/file';
 import i18n from '@/lang';
 import { dateFormat as formatDateTime } from '@/utils/date';
 import { computed, reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
-
-const { hasManagePermission } = useMenuManagePermission();
 
 const paginationConfig = reactive({
     cacheSizeKey: 'share-page-size',
@@ -92,7 +89,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('file.shareClose'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: File.FileShareInfo) => {
             closeShare(row.path);
         },
diff --git a/frontend/src/views/host/file-management/share/index.vue b/frontend/src/views/host/file-management/share/index.vue
index 7dd693e4ad6d..5ff582bce104 100644
--- a/frontend/src/views/host/file-management/share/index.vue
+++ b/frontend/src/views/host/file-management/share/index.vue
@@ -63,13 +63,13 @@
                 <el-button :disabled="loading" @click="handleClose">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
-                <el-button v-if="shareInfo" :disabled="loading || !hasManagePermission" @click="cancelShare">
+                <el-button v-permission v-if="shareInfo" :disabled="loading" @click="cancelShare">
                     {{ $t('file.shareClose') }}
                 </el-button>
                 <el-button v-if="shareInfo" :disabled="loading" @click="copyLink">
                     {{ $t('file.shareCopyLink') }}
                 </el-button>
-                <el-button type="primary" :disabled="loading || !hasManagePermission" @click="generate">
+                <el-button v-permission type="primary" :disabled="loading" @click="generate">
                     {{ shareInfo ? $t('file.shareRegenerate') : $t('file.shareGenerate') }}
                 </el-button>
             </span>
@@ -105,14 +105,12 @@ import { copyText } from '@/utils/clipboard';
 import { dateFormat as formatDateTime } from '@/utils/date';
 import type { FormInstance, FormRules } from 'element-plus';
 import { computed, reactive, ref, watch } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 interface ShareProps {
     path: string;
 }
 
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 const open = ref(false);
 const loading = ref(false);
 const changed = ref(false);
diff --git a/frontend/src/views/host/firewall/advance/index.vue b/frontend/src/views/host/firewall/advance/index.vue
index cc9808c29bea..b9b5eef2a45a 100644
--- a/frontend/src/views/host/firewall/advance/index.vue
+++ b/frontend/src/views/host/firewall/advance/index.vue
@@ -36,20 +36,16 @@
                         <el-alert type="info" :closable="false" :title="loadPrompt()" />
                     </template>
                     <template #leftToolBar>
-                        <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
+                        <el-button v-permission type="primary" @click="onOpenDialog('create')">
                             {{ $t('firewall.create') }}
                         </el-button>
-                        <el-button v-if="isBind" plain :disabled="!hasManagePermission" @click="onUnBind">
+                        <el-button v-if="isBind" v-permission plain @click="onUnBind">
                             {{ $t('commons.button.unbind') }}
                         </el-button>
-                        <el-button v-if="!isBind" plain :disabled="!hasManagePermission" @click="onBind">
+                        <el-button v-if="!isBind" v-permission plain @click="onBind">
                             {{ $t('commons.button.bind') }}
                         </el-button>
-                        <el-button
-                            @click="onDelete(null)"
-                            plain
-                            :disabled="selects.length === 0 || !hasManagePermission"
-                        >
+                        <el-button v-permission @click="onDelete(null)" plain :disabled="selects.length === 0">
                             {{ $t('commons.button.delete') }}
                         </el-button>
                     </template>
@@ -121,7 +117,7 @@
                                 <template #default="{ row }">
                                     <fu-input-rw-switch
                                         v-model="row.description"
-                                        :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
+                                        v-permission
                                         @enter="onChange(row)"
                                         @blur="onChange(row)"
                                     />
@@ -158,12 +154,10 @@ import {
     updateFirewallDescription,
 } from '@/api/modules/host';
 import { Host } from '@/api/interface/host';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 
 const loading = ref();
-const { hasManagePermission } = useMenuManagePermission();
 const selects = ref<any>([]);
 const selectedChain = ref('1PANEL_INPUT');
 const defaultStrategy = ref('ACCEPT');
@@ -344,7 +338,7 @@ const onChange = async (row: any) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Host.IptablesRules) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/host/firewall/forward/index.vue b/frontend/src/views/host/firewall/forward/index.vue
index afcc073b9ab6..5804a93cfa03 100644
--- a/frontend/src/views/host/firewall/forward/index.vue
+++ b/frontend/src/views/host/firewall/forward/index.vue
@@ -19,21 +19,17 @@
 
                 <LayoutContent :title="$t('firewall.forwardRule', 2)" :class="{ mask: !isActive }">
                     <template #leftToolBar>
-                        <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
+                        <el-button v-permission type="primary" @click="onOpenDialog('create')">
                             {{ $t('commons.button.create') }}
                         </el-button>
-                        <el-button
-                            @click="onDelete(null)"
-                            plain
-                            :disabled="selects.length === 0 || !hasManagePermission"
-                        >
+                        <el-button v-permission @click="onDelete(null)" plain :disabled="selects.length === 0">
                             {{ $t('commons.button.delete') }}
                         </el-button>
                         <el-button-group>
-                            <el-button :disabled="!hasManagePermission" @click="onImport">
+                            <el-button v-permission @click="onImport">
                                 {{ $t('commons.button.import') }}
                             </el-button>
-                            <el-button :disabled="selects.length === 0 || !hasManagePermission" @click="onExport">
+                            <el-button v-permission :disabled="selects.length === 0" @click="onExport">
                                 {{ $t('commons.button.export') }}
                             </el-button>
                         </el-button-group>
@@ -107,13 +103,11 @@ import FireStatus from '@/views/host/firewall/status/index.vue';
 import { onMounted, reactive, ref } from 'vue';
 import { operateForwardRule, searchFireRule } from '@/api/modules/host';
 import { Host } from '@/api/interface/host';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { downloadWithContent } from '@/utils/file';
 import { getCurrentDateFormatted } from '@/utils/date';
 const loading = ref();
-const { hasManagePermission } = useMenuManagePermission();
 const activeTag = ref('forward');
 const selects = ref<any>([]);
 const searchName = ref();
@@ -260,14 +254,14 @@ const onExport = () => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Host.RuleForward) => {
             onOpenDialog('edit', row);
         },
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Host.RuleForward) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/host/firewall/ip/index.vue b/frontend/src/views/host/firewall/ip/index.vue
index 6d90bf654fbf..09178cd957fa 100644
--- a/frontend/src/views/host/firewall/ip/index.vue
+++ b/frontend/src/views/host/firewall/ip/index.vue
@@ -29,21 +29,17 @@
                         </div>
                     </template>
                     <template #leftToolBar>
-                        <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
+                        <el-button v-permission type="primary" @click="onOpenDialog('create')">
                             {{ $t('commons.button.create') }}
                         </el-button>
-                        <el-button
-                            @click="onDelete(null)"
-                            plain
-                            :disabled="selects.length === 0 || !hasManagePermission"
-                        >
+                        <el-button v-permission @click="onDelete(null)" plain :disabled="selects.length === 0">
                             {{ $t('commons.button.delete') }}
                         </el-button>
                         <el-button-group>
-                            <el-button :disabled="!hasManagePermission" @click="onImport">
+                            <el-button v-permission @click="onImport">
                                 {{ $t('commons.button.import') }}
                             </el-button>
-                            <el-button :disabled="selects.length === 0 || !hasManagePermission" @click="onExport">
+                            <el-button v-permission :disabled="selects.length === 0" @click="onExport">
                                 {{ $t('commons.button.export') }}
                             </el-button>
                         </el-button-group>
@@ -78,7 +74,7 @@
                                 <template #default="{ row }">
                                     <el-button
                                         v-if="row.strategy === 'accept'"
-                                        :disabled="!hasManagePermission"
+                                        v-permission
                                         @click="onChangeStatus(row, 'drop')"
                                         link
                                         type="success"
@@ -89,7 +85,7 @@
                                         v-else
                                         link
                                         type="danger"
-                                        :disabled="!hasManagePermission"
+                                        v-permission
                                         @click="onChangeStatus(row, 'accept')"
                                     >
                                         {{ $t('firewall.deny') }}
@@ -105,7 +101,7 @@
                                 <template #default="{ row }">
                                     <fu-input-rw-switch
                                         v-model="row.description"
-                                        :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
+                                        v-permission
                                         @enter="onChange(row)"
                                         @blur="onChange(row)"
                                     />
@@ -139,13 +135,11 @@ import { onMounted, reactive, ref } from 'vue';
 import { batchOperateRule, searchFireRule, updateAddrRule, updateFirewallDescription } from '@/api/modules/host';
 import { Host } from '@/api/interface/host';
 import { ElMessageBox } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { downloadWithContent } from '@/utils/file';
 import { getCurrentDateFormatted } from '@/utils/date';
 const loading = ref();
-const { hasManagePermission } = useMenuManagePermission();
 const activeTag = ref('address');
 const selects = ref<any>([]);
 const searchName = ref();
@@ -328,14 +322,14 @@ const onExport = () => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Host.RuleIP) => {
             onOpenDialog('edit', row);
         },
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Host.RuleIP) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/host/firewall/port/index.vue b/frontend/src/views/host/firewall/port/index.vue
index 78c6e638224a..77cd1070b0e4 100644
--- a/frontend/src/views/host/firewall/port/index.vue
+++ b/frontend/src/views/host/firewall/port/index.vue
@@ -43,21 +43,17 @@
                         </el-alert>
                     </template>
                     <template #leftToolBar>
-                        <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('create')">
+                        <el-button v-permission type="primary" @click="onOpenDialog('create')">
                             {{ $t('commons.button.create') }}
                         </el-button>
-                        <el-button
-                            @click="onDelete(null)"
-                            plain
-                            :disabled="selects.length === 0 || !hasManagePermission"
-                        >
+                        <el-button v-permission @click="onDelete(null)" plain :disabled="selects.length === 0">
                             {{ $t('commons.button.delete') }}
                         </el-button>
                         <el-button-group>
-                            <el-button :disabled="!hasManagePermission" @click="onImport">
+                            <el-button v-permission @click="onImport">
                                 {{ $t('commons.button.import') }}
                             </el-button>
-                            <el-button :disabled="selects.length === 0 || !hasManagePermission" @click="onExport">
+                            <el-button v-permission :disabled="selects.length === 0" @click="onExport">
                                 {{ $t('commons.button.export') }}
                             </el-button>
                         </el-button-group>
@@ -106,7 +102,7 @@
                                 <template #default="{ row }">
                                     <el-button
                                         v-if="row.strategy === 'accept'"
-                                        :disabled="!hasManagePermission"
+                                        v-permission
                                         @click="onChangeStatus(row, 'drop')"
                                         link
                                         type="success"
@@ -117,7 +113,7 @@
                                         v-else
                                         link
                                         type="danger"
-                                        :disabled="!hasManagePermission"
+                                        v-permission
                                         @click="onChangeStatus(row, 'accept')"
                                     >
                                         {{ $t('firewall.drop') }}
@@ -139,7 +135,7 @@
                                 <template #default="{ row }">
                                     <fu-input-rw-switch
                                         v-model="row.description"
-                                        :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
+                                        v-permission
                                         @enter="onChange(row)"
                                         @blur="onChange(row)"
                                     />
@@ -176,7 +172,6 @@ import { batchOperateRule, searchFireRule, updateFirewallDescription, updatePort
 import { getListeningProcess } from '@/api/modules/process';
 import { Host } from '@/api/interface/host';
 import { Process } from '@/api/interface/process';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox } from 'element-plus';
@@ -185,7 +180,6 @@ import { routerToName } from '@/utils/router';
 import { downloadWithContent } from '@/utils/file';
 import { getCurrentDateFormatted } from '@/utils/date';
 const loading = ref();
-const { hasManagePermission } = useMenuManagePermission();
 const activeTag = ref('port');
 const selects = ref<any>([]);
 const searchName = ref();
@@ -434,14 +428,14 @@ const showProcessDetail = (pid: number) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Host.RulePort) => {
             onOpenDialog('edit', row);
         },
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Host.RuleInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/host/firewall/status/index.vue b/frontend/src/views/host/firewall/status/index.vue
index 6785c400c39f..1489ae4984cc 100644
--- a/frontend/src/views/host/firewall/status/index.vue
+++ b/frontend/src/views/host/firewall/status/index.vue
@@ -11,57 +11,40 @@
                     <div class="mt-0.5">
                         <template v-if="baseInfo.name !== 'iptables'">
                             <el-button
+                                v-permission
                                 type="primary"
                                 v-if="baseInfo.isActive"
-                                :disabled="!hasManagePermission"
                                 @click="onOperate('stop')"
                                 link
                             >
                                 {{ $t('commons.button.stop') }}
                             </el-button>
                             <el-button
+                                v-permission
                                 type="primary"
                                 v-if="!baseInfo.isActive"
-                                :disabled="!hasManagePermission"
                                 @click="onOperate('start')"
                                 link
                             >
                                 {{ $t('commons.button.start') }}
                             </el-button>
                             <el-divider direction="vertical" />
-                            <el-button
-                                type="primary"
-                                :disabled="!hasManagePermission"
-                                @click="onOperate('restart')"
-                                link
-                            >
+                            <el-button v-permission type="primary" @click="onOperate('restart')" link>
                                 {{ $t('commons.button.restart') }}
                             </el-button>
                         </template>
                         <template v-if="!baseInfo.isInit || (props.currentTab === 'forward' && !baseInfo.isBind)">
                             <el-divider direction="vertical" />
-                            <el-button type="primary" link :disabled="!hasManagePermission" @click="onInit">
+                            <el-button v-permission type="primary" link @click="onInit">
                                 {{ $t('commons.button.init') }}
                             </el-button>
                         </template>
                         <template v-if="baseInfo.name === 'iptables' && baseInfo.isInit && props.currentTab == 'base'">
                             <el-divider direction="vertical" />
-                            <el-button
-                                v-if="baseInfo.isBind"
-                                type="primary"
-                                link
-                                :disabled="!hasManagePermission"
-                                @click="onUnBind"
-                            >
+                            <el-button v-if="baseInfo.isBind" v-permission type="primary" link @click="onUnBind">
                                 {{ $t('commons.button.unbind') }}
                             </el-button>
-                            <el-button
-                                v-if="!baseInfo.isBind"
-                                type="primary"
-                                link
-                                :disabled="!hasManagePermission"
-                                @click="onBind"
-                            >
+                            <el-button v-if="!baseInfo.isBind" v-permission type="primary" link @click="onBind">
                                 {{ $t('commons.button.bind') }}
                             </el-button>
                         </template>
@@ -69,11 +52,11 @@
                             <el-divider direction="vertical" />
                             <el-button type="primary" link>{{ $t('firewall.noPing') }}</el-button>
                             <el-switch
+                                v-permission
                                 size="small"
                                 class="ml-2"
                                 inactive-value="Disable"
                                 active-value="Enable"
-                                :disabled="!hasManagePermission"
                                 @change="onPingOperate"
                                 v-model="onPing"
                             />
@@ -120,9 +103,6 @@ import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox } from 'element-plus';
 import { ref } from 'vue';
 import { loadDockerStatus } from '@/api/modules/container';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
-
-const { hasManagePermission } = useMenuManagePermission();
 
 const props = defineProps({
     currentTab: String,
diff --git a/frontend/src/views/host/monitor/setting/index.vue b/frontend/src/views/host/monitor/setting/index.vue
index e6168aad0127..0d3d3d476fde 100644
--- a/frontend/src/views/host/monitor/setting/index.vue
+++ b/frontend/src/views/host/monitor/setting/index.vue
@@ -10,7 +10,7 @@
                         <el-col :span="12">
                             <el-form-item :label="$t('monitor.enableMonitor')" prop="monitorStatus">
                                 <el-switch
-                                    :disabled="!hasManagePermission"
+                                    v-permission
                                     @change="onSaveStatus"
                                     v-model="form.monitorStatus"
                                     active-value="Enable"
@@ -20,11 +20,7 @@
                             <el-form-item :label="$t('monitor.storeDays')" prop="monitorStoreDays">
                                 <el-input disabled v-model="form.monitorStoreDays">
                                     <template #append>
-                                        <el-button
-                                            :disabled="!hasManagePermission"
-                                            @click="onChangeStoreDays"
-                                            icon="Setting"
-                                        >
+                                        <el-button v-permission @click="onChangeStoreDays" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -33,11 +29,7 @@
                             <el-form-item :label="$t('monitor.interval')" prop="monitorIntervalItem">
                                 <el-input disabled v-model="form.monitorIntervalItem">
                                     <template #append>
-                                        <el-button
-                                            :disabled="!hasManagePermission"
-                                            @click="onChangeInterval"
-                                            icon="Setting"
-                                        >
+                                        <el-button v-permission @click="onChangeInterval" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -46,11 +38,7 @@
                             <el-form-item :label="$t('monitor.defaultNetwork')">
                                 <el-input disabled v-model="form.defaultNetwork">
                                     <template #append>
-                                        <el-button
-                                            :disabled="!hasManagePermission"
-                                            @click="onChangeNetwork"
-                                            icon="Setting"
-                                        >
+                                        <el-button v-permission @click="onChangeNetwork" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -60,7 +48,7 @@
                             <el-form-item :label="$t('monitor.defaultIO')">
                                 <el-input disabled v-model="form.defaultIO">
                                     <template #append>
-                                        <el-button :disabled="!hasManagePermission" @click="onChangeIO" icon="Setting">
+                                        <el-button v-permission @click="onChangeIO" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -68,7 +56,7 @@
                                 <span class="input-help">{{ $t('monitor.defaultIOHelper') }}</span>
                             </el-form-item>
                             <el-form-item>
-                                <el-button :disabled="!hasManagePermission" @click="onClean()" icon="Delete">
+                                <el-button v-permission @click="onClean()" icon="Delete">
                                     {{ $t('monitor.cleanMonitor') }}
                                 </el-button>
                             </el-form-item>
@@ -97,9 +85,7 @@ import IO from '@/views/host/monitor/setting/default-io/index.vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { splitTimeFromSecond, transTimeUnit } from '@/utils/validate';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const loading = ref();
-const { hasManagePermission } = useMenuManagePermission();
 const form = reactive({
     monitorStatus: 'Disable',
     monitorStoreDays: 30,
diff --git a/frontend/src/views/host/process/process/index.vue b/frontend/src/views/host/process/process/index.vue
index d5cf2e65e112..717fde488812 100644
--- a/frontend/src/views/host/process/process/index.vue
+++ b/frontend/src/views/host/process/process/index.vue
@@ -64,17 +64,16 @@
 
 <script setup lang="ts">
 import FireRouter from '@/views/host/process/index.vue';
-import { ref, onMounted, onUnmounted, computed, watch, h } from 'vue';
+import { ref, onMounted, onUnmounted, computed, watch, h, resolveDirective, withDirectives } from 'vue';
 import ProcessDetail from './detail/index.vue';
 import i18n from '@/lang';
 import { stopProcess } from '@/api/modules/process';
 import { GlobalStore, ProcessStore } from '@/store';
 import { SortBy, TableV2SortOrder, ElButton } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const globalStore = GlobalStore();
 const processStore = ProcessStore();
-const { hasManagePermission } = useMenuManagePermission();
+const permissionDirective = resolveDirective('permission');
 
 const statusOptions = computed(() => [
     { text: i18n.global.t('process.running'), value: 'running' },
@@ -188,6 +187,15 @@ const columns = ref([
         dataKey: 'actions',
         width: 300,
         cellRenderer: ({ rowData }) => {
+            const stopButton = h(
+                ElButton,
+                {
+                    type: 'text',
+                    onClick: () => stop(rowData),
+                },
+                () => i18n.global.t('process.stopProcess'),
+            );
+
             return h('div', { class: 'action-buttons' }, [
                 h(
                     ElButton,
@@ -197,15 +205,7 @@ const columns = ref([
                     },
                     () => i18n.global.t('process.viewDetails'),
                 ),
-                h(
-                    ElButton,
-                    {
-                        type: 'text',
-                        disabled: !hasManagePermission.value,
-                        onClick: () => stop(rowData),
-                    },
-                    () => i18n.global.t('process.stopProcess'),
-                ),
+                permissionDirective ? withDirectives(stopButton, [[permissionDirective]]) : stopButton,
             ]);
         },
     },
diff --git a/frontend/src/views/host/ssh/log/log.vue b/frontend/src/views/host/ssh/log/log.vue
index 5107cf9ac232..94fbd5ec5fb9 100644
--- a/frontend/src/views/host/ssh/log/log.vue
+++ b/frontend/src/views/host/ssh/log/log.vue
@@ -6,7 +6,7 @@
                 <div class="mt-2"><el-alert type="info" :title="$t('ssh.sshAlert')" :closable="false" /></div>
             </template>
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="onExport">
+                <el-button v-permission type="primary" @click="onExport">
                     {{ $t('commons.button.export') }}
                 </el-button>
             </template>
@@ -79,7 +79,7 @@
                     <el-button @click="open = false" :disabled="loading">
                         {{ $t('commons.button.cancel') }}
                     </el-button>
-                    <el-button type="primary" @click="onSubmitExport" :disabled="loading || !hasManagePermission">
+                    <el-button v-permission type="primary" @click="onSubmitExport" :disabled="loading">
                         {{ $t('commons.button.confirm') }}
                     </el-button>
                 </span>
@@ -94,9 +94,7 @@ import { downloadFile } from '@/utils/file';
 import { onMounted, reactive, ref } from 'vue';
 import { exportSSHLogs, loadSSHLogs } from '@/api/modules/host';
 import { GlobalStore } from '@/store';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref();
 const data = ref();
diff --git a/frontend/src/views/host/ssh/session/index.vue b/frontend/src/views/host/ssh/session/index.vue
index 89c2b1a239b4..3412c381525d 100644
--- a/frontend/src/views/host/ssh/session/index.vue
+++ b/frontend/src/views/host/ssh/session/index.vue
@@ -31,9 +31,7 @@ import { stopProcess } from '@/api/modules/process';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { GlobalStore } from '@/store';
 import { checkStreamAuth } from '@/utils/stream-auth';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 
 const sshSearch = reactive({
     type: 'ssh',
@@ -43,7 +41,7 @@ const sshSearch = reactive({
 const buttons = [
     {
         label: i18n.global.t('commons.button.disConn'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: function (row: any) {
             stop(row.PID);
         },
diff --git a/frontend/src/views/host/ssh/ssh/certification/index.vue b/frontend/src/views/host/ssh/ssh/certification/index.vue
index 71074e7958b0..9b8f5afe3657 100644
--- a/frontend/src/views/host/ssh/ssh/certification/index.vue
+++ b/frontend/src/views/host/ssh/ssh/certification/index.vue
@@ -4,13 +4,13 @@
             <div class="mb-4">
                 <el-alert :closable="false">{{ $t('ssh.pubKeyHelper', [currentUser]) }}</el-alert>
             </div>
-            <el-button type="primary" plain :disabled="!hasManagePermission" @click="onOpenDialog('create')">
+            <el-button v-permission type="primary" plain @click="onOpenDialog('create')">
                 {{ $t('commons.button.create') }}
             </el-button>
-            <el-button plain :disabled="!hasManagePermission" @click="onSync()">
+            <el-button v-permission plain @click="onSync()">
                 {{ $t('commons.button.sync') }}
             </el-button>
-            <el-button plain :disabled="selects.length === 0 || !hasManagePermission" @click="onDelete(null)">
+            <el-button v-permission plain :disabled="selects.length === 0" @click="onDelete(null)">
                 {{ $t('commons.button.delete') }}
             </el-button>
             <ComplexTable
@@ -101,10 +101,8 @@ import Operate from '@/views/host/ssh/ssh/certification/operate/index.vue';
 import { copyText } from '@/utils/clipboard';
 import { Base64 } from 'js-base64';
 import { reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const loading = ref();
-const { hasManagePermission } = useMenuManagePermission();
 const drawerVisible = ref();
 const data = ref();
 const selects = ref<any>([]);
@@ -263,7 +261,7 @@ const handleClose = () => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Host.RootCertInfo) => {
             onOpenDialog('edit', row);
         },
@@ -277,7 +275,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Host.RootCertInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/host/ssh/ssh/index.vue b/frontend/src/views/host/ssh/ssh/index.vue
index 052e63de30f5..bb9c287678b6 100644
--- a/frontend/src/views/host/ssh/ssh/index.vue
+++ b/frontend/src/views/host/ssh/ssh/index.vue
@@ -10,26 +10,14 @@
                         <Status class="mt-0.5" :status="form.isActive ? 'enable' : 'disable'" :msg="form.message" />
                     </div>
                     <div class="mt-0.5">
-                        <el-button
-                            v-if="form.isActive"
-                            type="primary"
-                            :disabled="!hasManagePermission"
-                            @click="onOperate('stop')"
-                            link
-                        >
+                        <el-button v-if="form.isActive" type="primary" v-permission @click="onOperate('stop')" link>
                             {{ $t('commons.button.stop') }}
                         </el-button>
-                        <el-button
-                            v-if="!form.isActive"
-                            type="primary"
-                            :disabled="!hasManagePermission"
-                            @click="onOperate('start')"
-                            link
-                        >
+                        <el-button v-if="!form.isActive" type="primary" v-permission @click="onOperate('start')" link>
                             {{ $t('commons.button.start') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button type="primary" :disabled="!hasManagePermission" @click="onOperate('restart')" link>
+                        <el-button v-permission type="primary" @click="onOperate('restart')" link>
                             {{ $t('commons.button.restart') }}
                         </el-button>
                         <el-divider direction="vertical" />
@@ -37,11 +25,11 @@
                             {{ $t('ssh.autoStart') }}
                         </el-button>
                         <el-switch
+                            v-permission
                             size="small"
                             class="ml-2"
                             inactive-value="disable"
                             active-value="enable"
-                            :disabled="!hasManagePermission"
                             @change="onOperate(autoStart)"
                             v-model="autoStart"
                         />
@@ -57,8 +45,8 @@
                     <el-radio-button value="all">{{ $t('database.allConf') }}</el-radio-button>
                 </el-radio-group>
 
-                <el-button :disabled="!hasManagePermission" @click="onOpenDrawer">{{ $t('ssh.pubkey') }}</el-button>
-                <el-button :disabled="!hasManagePermission" @click="onOpenAuthKeys">{{ $t('ssh.authKeys') }}</el-button>
+                <el-button v-permission @click="onOpenDrawer">{{ $t('ssh.pubkey') }}</el-button>
+                <el-button v-permission @click="onOpenAuthKeys">{{ $t('ssh.authKeys') }}</el-button>
             </template>
             <template #main>
                 <el-row class="mt-10" v-if="confShowType === 'base'">
@@ -67,11 +55,7 @@
                             <el-form-item :label="$t('ssh.port')" prop="port">
                                 <el-input disabled v-model="form.port">
                                     <template #append>
-                                        <el-button
-                                            :disabled="!hasManagePermission"
-                                            @click="onChangePort"
-                                            icon="Setting"
-                                        >
+                                        <el-button v-permission @click="onChangePort" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -81,11 +65,7 @@
                             <el-form-item :label="$t('ssh.listenAddress')" prop="listenAddress">
                                 <el-input disabled v-model="form.listenAddressItem">
                                     <template #append>
-                                        <el-button
-                                            :disabled="!hasManagePermission"
-                                            @click="onChangeAddress"
-                                            icon="Setting"
-                                        >
+                                        <el-button v-permission @click="onChangeAddress" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -95,11 +75,7 @@
                             <el-form-item :label="$t('ssh.permitRootLogin')" prop="permitRootLoginItem">
                                 <el-input disabled v-model="form.permitRootLoginItem">
                                     <template #append>
-                                        <el-button
-                                            :disabled="!hasManagePermission"
-                                            @click="onChangeRoot"
-                                            icon="Setting"
-                                        >
+                                        <el-button v-permission @click="onChangeRoot" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -108,9 +84,9 @@
                             </el-form-item>
                             <el-form-item :label="$t('ssh.passwordAuthentication')" prop="passwordAuthentication">
                                 <el-switch
+                                    v-permission
                                     active-value="yes"
                                     inactive-value="no"
-                                    :disabled="!hasManagePermission"
                                     @change="onSave(formRef, 'PasswordAuthentication', form.passwordAuthentication)"
                                     v-model="form.passwordAuthentication"
                                 ></el-switch>
@@ -118,9 +94,9 @@
                             </el-form-item>
                             <el-form-item :label="$t('ssh.pubkeyAuthentication')" prop="pubkeyAuthentication">
                                 <el-switch
+                                    v-permission
                                     active-value="yes"
                                     inactive-value="no"
-                                    :disabled="!hasManagePermission"
                                     @change="onSave(formRef, 'PubkeyAuthentication', form.pubkeyAuthentication)"
                                     v-model="form.pubkeyAuthentication"
                                 ></el-switch>
@@ -128,9 +104,9 @@
                             </el-form-item>
                             <el-form-item :label="$t('ssh.useDNS')" prop="useDNS">
                                 <el-switch
+                                    v-permission
                                     active-value="yes"
                                     inactive-value="no"
-                                    :disabled="!hasManagePermission"
                                     @change="onSave(formRef, 'UseDNS', form.useDNS)"
                                     v-model="form.useDNS"
                                 ></el-switch>
@@ -158,12 +134,7 @@
                         mode="nginx"
                         placeholder="# The SSH configuration file does not exist or is empty (/etc/ssh/sshd_config)"
                     ></CodemirrorPro>
-                    <el-button
-                        :disabled="loading || !hasManagePermission"
-                        type="primary"
-                        @click="onSaveFile"
-                        class="mt-2.5"
-                    >
+                    <el-button v-permission :disabled="loading" type="primary" @click="onSaveFile" class="mt-2.5">
                         {{ $t('commons.button.save') }}
                     </el-button>
                 </div>
@@ -191,10 +162,8 @@ import { MsgSuccess } from '@/utils/message';
 import { loadSSHFile, getSSHInfo, operateSSH, updateSSH, updateSSHByFile } from '@/api/modules/host';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const loading = ref(false);
-const { hasManagePermission } = useMenuManagePermission();
 const formRef = ref();
 const confShowType = ref('base');
 const pubKeyRef = ref();
diff --git a/frontend/src/views/log/login/index.vue b/frontend/src/views/log/login/index.vue
index b6a8f2fcfa53..23562fa29d4f 100644
--- a/frontend/src/views/log/login/index.vue
+++ b/frontend/src/views/log/login/index.vue
@@ -5,7 +5,7 @@
                 <LogRouter current="LoginLog" />
             </template>
             <template #leftToolBar>
-                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onClean()">
+                <el-button v-permission type="primary" plain @click="onClean()">
                     {{ $t('logs.deleteLogs') }}
                 </el-button>
             </template>
@@ -51,10 +51,8 @@ import { cleanLogs, getLoginLogs } from '@/api/modules/log';
 import { onMounted, reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const loading = ref();
-const { hasManagePermission } = useMenuManagePermission();
 const data = ref();
 const confirmDialogRef = ref();
 const paginationConfig = reactive({
diff --git a/frontend/src/views/log/operation/index.vue b/frontend/src/views/log/operation/index.vue
index 2dd1de047507..9e7d8a1ed797 100644
--- a/frontend/src/views/log/operation/index.vue
+++ b/frontend/src/views/log/operation/index.vue
@@ -5,7 +5,7 @@
                 <LogRouter current="OperationLog" />
             </template>
             <template #leftToolBar>
-                <el-button type="primary" plain :disabled="!hasManagePermission" @click="onClean()">
+                <el-button v-permission type="primary" plain @click="onClean()">
                     {{ $t('logs.deleteLogs') }}
                 </el-button>
             </template>
@@ -103,10 +103,8 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { GlobalStore } from '@/store';
 import { listNodes } from '@/utils/node';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const loading = ref();
-const { hasManagePermission } = useMenuManagePermission();
 const data = ref();
 const confirmDialogRef = ref();
 const paginationConfig = reactive({
diff --git a/frontend/src/views/log/website/index.vue b/frontend/src/views/log/website/index.vue
index 36add3ea4477..d992ef9790da 100644
--- a/frontend/src/views/log/website/index.vue
+++ b/frontend/src/views/log/website/index.vue
@@ -34,10 +34,10 @@
                         {{ $t('commons.button.watch') }}
                     </el-checkbox>
                 </el-button>
-                <el-button @click="onDownload" icon="Download" :disabled="!hasContent || !hasManagePermission">
+                <el-button v-permission @click="onDownload" icon="Download" :disabled="!hasContent">
                     {{ $t('commons.button.download') }}
                 </el-button>
-                <el-button type="primary" plain @click="onClean()" :disabled="!hasContent || !hasManagePermission">
+                <el-button v-permission type="primary" plain @click="onClean()" :disabled="!hasContent">
                     {{ $t('logs.deleteLogs') }}
                 </el-button>
             </template>
@@ -66,7 +66,6 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import LogFile from '@/components/log/file/index.vue';
 import MainDiv from '@/components/main-div/index.vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const logConfig = reactive({
     type: 'website',
@@ -81,7 +80,6 @@ const confirmDialogRef = ref();
 const tailLog = ref(false);
 const logRef = ref();
 const hasContent = ref(false);
-const { hasManagePermission } = useMenuManagePermission();
 
 const searchLog = () => {
     showLog.value = false;
diff --git a/frontend/src/views/toolbox/clam/index.vue b/frontend/src/views/toolbox/clam/index.vue
index 8ad02c848c2b..02e919d691c9 100644
--- a/frontend/src/views/toolbox/clam/index.vue
+++ b/frontend/src/views/toolbox/clam/index.vue
@@ -20,16 +20,13 @@
                 />
             </template>
             <template #leftToolBar v-if="clamStatus.isExist">
-                <el-button
-                    type="primary"
-                    :disabled="!clamStatus.isRunning || !hasManagePermission"
-                    @click="onOpenDialog('add')"
-                >
+                <el-button v-permission type="primary" :disabled="!clamStatus.isRunning" @click="onOpenDialog('add')">
                     {{ $t('toolbox.clam.clamCreate') }}
                 </el-button>
                 <el-button
+                    v-permission
                     plain
-                    :disabled="selects.length === 0 || !clamStatus.isRunning || !hasManagePermission"
+                    :disabled="selects.length === 0 || !clamStatus.isRunning"
                     @click="onDelete(null)"
                 >
                     {{ $t('commons.button.delete') }}
@@ -147,7 +144,7 @@
                         <template #default="{ row }">
                             <fu-input-rw-switch
                                 v-model="row.description"
-                                :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
+                                v-permission
                                 @enter="onChange(row)"
                                 @blur="onChange(row)"
                             />
@@ -194,11 +191,9 @@ import { transSpecToStr } from '@/views/cronjob/cronjob/helper';
 import { GlobalStore } from '@/store';
 import { storeToRefs } from 'pinia';
 import { routerToFileWithPath, routerToName } from '@/utils/router';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const loading = ref();
 const selects = ref<any>([]);
-const { hasManagePermission } = useMenuManagePermission();
 
 const globalStore = GlobalStore();
 const { isProductPro } = storeToRefs(globalStore);
@@ -350,7 +345,7 @@ const onChangeStatus = async (id: number, status: string) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.handle'),
-        disabled: !hasManagePermission.value,
+        permission: true,
         click: async (row: Toolbox.ClamInfo) => {
             loading.value = true;
             await handleClamScan(row.id)
@@ -366,7 +361,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: !hasManagePermission.value,
+        permission: true,
         click: (row: Toolbox.ClamInfo) => {
             onOpenDialog('edit', row);
         },
@@ -379,7 +374,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: !hasManagePermission.value,
+        permission: true,
         click: (row: Toolbox.ClamInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/toolbox/clam/operate/index.vue b/frontend/src/views/toolbox/clam/operate/index.vue
index e4c05ee47f8e..0ac83f83b5d8 100644
--- a/frontend/src/views/toolbox/clam/operate/index.vue
+++ b/frontend/src/views/toolbox/clam/operate/index.vue
@@ -19,11 +19,7 @@
                     <el-form-item :label="$t('toolbox.clam.scanDir')" prop="path">
                         <el-input v-model="dialogData.rowData!.path">
                             <template #prepend>
-                                <el-button
-                                    icon="Folder"
-                                    :disabled="!hasManagePermission"
-                                    @click="scanDirRef.acceptParams({ dir: true })"
-                                />
+                                <el-button icon="Folder" v-permission @click="scanDirRef.acceptParams({ dir: true })" />
                             </template>
                         </el-input>
                     </el-form-item>
@@ -44,7 +40,7 @@
                             <template #prepend>
                                 <el-button
                                     icon="Folder"
-                                    :disabled="!hasManagePermission"
+                                    v-permission
                                     @click="infectedDirRef.acceptParams({ dir: true })"
                                 />
                             </template>
@@ -225,7 +221,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSubmit(formRef)">
+                <el-button v-permission :disabled="loading" type="primary" @click="onSubmit(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -250,9 +246,7 @@ import { storeToRefs } from 'pinia';
 import { GlobalStore } from '@/store';
 import { specOptions, transObjToSpec, transSpecToObj, weekOptions } from '@/views/cronjob/cronjob/helper';
 import { splitTimeFromSecond, transferTimeToSecond } from '@/utils/validate';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 const licenseRef = ref();
 const scanDirRef = ref();
 const infectedDirRef = ref();
diff --git a/frontend/src/views/toolbox/clam/record/index.vue b/frontend/src/views/toolbox/clam/record/index.vue
index c428e3cea6a6..5a7d02a5d6b2 100644
--- a/frontend/src/views/toolbox/clam/record/index.vue
+++ b/frontend/src/views/toolbox/clam/record/index.vue
@@ -30,21 +30,11 @@
                         </el-tag>
 
                         <span class="mt-0.5">
-                            <el-button
-                                type="primary"
-                                :disabled="!hasManagePermission"
-                                @click="onHandle(dialogData.rowData)"
-                                link
-                            >
+                            <el-button type="primary" v-permission @click="onHandle(dialogData.rowData)" link>
                                 {{ $t('commons.button.handle') }}
                             </el-button>
                             <el-divider direction="vertical" />
-                            <el-button
-                                :disabled="!hasRecords || !hasManagePermission"
-                                type="primary"
-                                @click="onClean"
-                                link
-                            >
+                            <el-button v-permission :disabled="!hasRecords" type="primary" @click="onClean" link>
                                 {{ $t('commons.button.clean') }}
                             </el-button>
                         </span>
@@ -200,12 +190,10 @@ import { Toolbox } from '@/api/interface/toolbox';
 import LogFile from '@/components/log/file/index.vue';
 import { cleanClamRecord, handleClamScan, searchClamRecord } from '@/api/modules/toolbox';
 import { routerToFileWithPath } from '@/utils/router';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const loading = ref();
 const refresh = ref(false);
 const hasRecords = ref();
-const { hasManagePermission } = useMenuManagePermission();
 
 const recordShow = ref(false);
 interface DialogProps {
diff --git a/frontend/src/views/toolbox/clam/setting/index.vue b/frontend/src/views/toolbox/clam/setting/index.vue
index d1eddf608f0f..a870d474f345 100644
--- a/frontend/src/views/toolbox/clam/setting/index.vue
+++ b/frontend/src/views/toolbox/clam/setting/index.vue
@@ -37,13 +37,7 @@
                         :disabled="!canUpdate()"
                         :placeholder="$t('commons.msg.noneData')"
                     ></CodemirrorPro>
-                    <el-button
-                        type="primary"
-                        class="mt-5"
-                        v-if="canUpdate()"
-                        :disabled="!hasManagePermission"
-                        @click="onSave"
-                    >
+                    <el-button type="primary" class="mt-5" v-if="canUpdate()" v-permission @click="onSave">
                         {{ $t('commons.button.save') }}
                     </el-button>
                 </div>
@@ -61,10 +55,8 @@ import { searchClamFile, updateClamFile } from '@/api/modules/toolbox';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const loading = ref(false);
-const { hasManagePermission } = useMenuManagePermission();
 
 const activeName = ref('clamd');
 const tail = ref(200);
diff --git a/frontend/src/views/toolbox/clam/status/index.vue b/frontend/src/views/toolbox/clam/status/index.vue
index a36bfc056c5a..c7723625b75a 100644
--- a/frontend/src/views/toolbox/clam/status/index.vue
+++ b/frontend/src/views/toolbox/clam/status/index.vue
@@ -13,7 +13,7 @@
                             type="primary"
                             v-if="!data.isActive"
                             link
-                            :disabled="!hasManagePermission"
+                            v-permission
                             @click="onOperate('ClamAV', 'start')"
                         >
                             {{ $t('commons.operate.start') }}
@@ -22,22 +22,17 @@
                             type="primary"
                             v-if="data.isActive"
                             link
-                            :disabled="!hasManagePermission"
+                            v-permission
                             @click="onOperate('ClamAV', 'stop')"
                         >
                             {{ $t('commons.operate.stop') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button
-                            type="primary"
-                            link
-                            :disabled="!hasManagePermission"
-                            @click="onOperate('ClamAV', 'restart')"
-                        >
+                        <el-button type="primary" link v-permission @click="onOperate('ClamAV', 'restart')">
                             {{ $t('commons.button.restart') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button type="primary" link :disabled="!hasManagePermission" @click="setting">
+                        <el-button v-permission type="primary" link @click="setting">
                             {{ $t('commons.button.set') }}
                         </el-button>
                         <el-divider direction="vertical" />
@@ -60,7 +55,7 @@
                             type="primary"
                             v-if="!data.freshIsActive"
                             link
-                            :disabled="!hasManagePermission"
+                            v-permission
                             @click="onOperate('FreshClam', 'start')"
                         >
                             {{ $t('commons.operate.start') }}
@@ -69,18 +64,13 @@
                             type="primary"
                             v-if="data.freshIsActive"
                             link
-                            :disabled="!hasManagePermission"
+                            v-permission
                             @click="onOperate('FreshClam', 'stop')"
                         >
                             {{ $t('commons.operate.stop') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button
-                            type="primary"
-                            link
-                            :disabled="!hasManagePermission"
-                            @click="onOperate('FreshClam', 'restart')"
-                        >
+                        <el-button type="primary" link v-permission @click="onOperate('FreshClam', 'restart')">
                             {{ $t('commons.button.restart') }}
                         </el-button>
                     </div>
@@ -97,7 +87,6 @@ import { onMounted, ref } from 'vue';
 import { ElMessageBox } from 'element-plus';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const data = ref({
     isExist: true,
@@ -110,7 +99,6 @@ const data = ref({
 });
 const loading = ref(false);
 const showFresh = ref(localStorage.getItem('clam-fresh-show') !== 'hide');
-const { hasManagePermission } = useMenuManagePermission();
 
 const em = defineEmits(['setting', 'getStatus', 'update:loading', 'update:maskShow']);
 
diff --git a/frontend/src/views/toolbox/clean/index.vue b/frontend/src/views/toolbox/clean/index.vue
index 25eff3571caf..919eb758a754 100644
--- a/frontend/src/views/toolbox/clean/index.vue
+++ b/frontend/src/views/toolbox/clean/index.vue
@@ -2,7 +2,7 @@
     <div v-loading="loading">
         <LayoutContent :title="$t('setting.diskClean')" :divider="true">
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="scanData">
+                <el-button v-permission type="primary" @click="scanData">
                     {{ $t('clean.scan') }}
                 </el-button>
             </template>
@@ -78,9 +78,10 @@
                     <div>
                         <el-text class="clean_title">{{ $t('clean.totalScan') }} {{ computeSize(totalSize) }}</el-text>
                         <el-button
+                            v-permission
                             type="primary"
                             class="-mt-2 ml-20"
-                            :disabled="selectSize <= 0 || !hasManagePermission"
+                            :disabled="selectSize <= 0"
                             @click="onSubmitClean"
                         >
                             {{ $t('clean.clean') }}
@@ -261,10 +262,8 @@ import { getAgentSettingInfo } from '@/api/modules/setting';
 import { clean, scan } from '@/api/modules/toolbox';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const loading = ref();
-const { hasManagePermission } = useMenuManagePermission();
 const totalSize = ref<number>(0);
 const selectSize = ref<number>(0);
 
diff --git a/frontend/src/views/toolbox/device/dns/index.vue b/frontend/src/views/toolbox/device/dns/index.vue
index 148e5694cc89..c5942631206a 100644
--- a/frontend/src/views/toolbox/device/dns/index.vue
+++ b/frontend/src/views/toolbox/device/dns/index.vue
@@ -31,7 +31,7 @@
                 <el-button :disabled="loading" @click="onTest()">
                     {{ $t('toolbox.device.dnsCheck') }}
                 </el-button>
-                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSave()">
+                <el-button v-permission :disabled="loading" type="primary" @click="onSave()">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -43,10 +43,8 @@ import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { loadDeviceConf, checkDNS, updateDevice, updateDeviceByConf } from '@/api/modules/toolbox';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
-const { hasManagePermission } = useMenuManagePermission();
 
 const confShowType = ref('form');
 const dnsConf = ref();
diff --git a/frontend/src/views/toolbox/device/hostname/index.vue b/frontend/src/views/toolbox/device/hostname/index.vue
index a47ff2e49cd5..abd03c9f3e6e 100644
--- a/frontend/src/views/toolbox/device/hostname/index.vue
+++ b/frontend/src/views/toolbox/device/hostname/index.vue
@@ -9,7 +9,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSaveHostname(formRef)">
+                <el-button v-permission :disabled="loading" type="primary" @click="onSaveHostname(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -23,10 +23,8 @@ import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { updateDevice } from '@/api/modules/toolbox';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
-const { hasManagePermission } = useMenuManagePermission();
 
 interface DialogProps {
     hostname: string;
diff --git a/frontend/src/views/toolbox/device/hosts/index.vue b/frontend/src/views/toolbox/device/hosts/index.vue
index ec5e17e48157..182d180b1e3a 100644
--- a/frontend/src/views/toolbox/device/hosts/index.vue
+++ b/frontend/src/views/toolbox/device/hosts/index.vue
@@ -24,7 +24,7 @@
                     </template>
                 </el-table-column>
             </el-table>
-            <el-button class="ml-3 mt-2" :disabled="!hasManagePermission" @click="handleHostsAdd()">
+            <el-button v-permission class="ml-3 mt-2" @click="handleHostsAdd()">
                 {{ $t('commons.button.add') }}
             </el-button>
         </div>
@@ -39,7 +39,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSave()">
+                <el-button v-permission :disabled="loading" type="primary" @click="onSave()">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -52,10 +52,8 @@ import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { loadDeviceConf, updateDeviceByConf, updateDeviceHost } from '@/api/modules/toolbox';
 import { Toolbox } from '@/api/interface/toolbox';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
-const { hasManagePermission } = useMenuManagePermission();
 
 const confShowType = ref('base');
 const hostsConf = ref();
diff --git a/frontend/src/views/toolbox/device/index.vue b/frontend/src/views/toolbox/device/index.vue
index d5576b4134e8..c921f98df962 100644
--- a/frontend/src/views/toolbox/device/index.vue
+++ b/frontend/src/views/toolbox/device/index.vue
@@ -14,7 +14,7 @@
                             <el-form-item label="DNS" prop="dnsItem">
                                 <el-input disabled v-model="form.dnsItem">
                                     <template #append>
-                                        <el-button :disabled="!hasManagePermission" @click="onChangeDNS" icon="Setting">
+                                        <el-button v-permission @click="onChangeDNS" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -23,11 +23,7 @@
                             <el-form-item label="Hosts" prop="hosts">
                                 <el-input disabled v-model="form.hostItem">
                                     <template #append>
-                                        <el-button
-                                            :disabled="!hasManagePermission"
-                                            @click="onChangeHost"
-                                            icon="Setting"
-                                        >
+                                        <el-button v-permission @click="onChangeHost" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -36,11 +32,7 @@
                             <el-form-item label="Swap" prop="swap">
                                 <el-input disabled v-model="form.swapItem">
                                     <template #append>
-                                        <el-button
-                                            :disabled="!hasManagePermission"
-                                            @click="onChangeSwap"
-                                            icon="Setting"
-                                        >
+                                        <el-button v-permission @click="onChangeSwap" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -49,11 +41,7 @@
                             <el-form-item :label="$t('toolbox.device.hostname')" prop="hostname">
                                 <el-input disabled v-model="form.hostname">
                                     <template #append>
-                                        <el-button
-                                            :disabled="!hasManagePermission"
-                                            @click="onChangeHostname"
-                                            icon="Setting"
-                                        >
+                                        <el-button v-permission @click="onChangeHostname" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -62,11 +50,7 @@
                             <el-form-item :label="$t('toolbox.device.passwd')" prop="passwd">
                                 <el-input disabled v-model="form.passwd" type="password">
                                     <template #append>
-                                        <el-button
-                                            :disabled="!hasManagePermission"
-                                            @click="onChangePasswd"
-                                            icon="Setting"
-                                        >
+                                        <el-button v-permission @click="onChangePasswd" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -75,7 +59,7 @@
                             <el-form-item :label="$t('toolbox.device.syncSite')" prop="ntp">
                                 <el-input disabled v-model="form.ntp">
                                     <template #append>
-                                        <el-button :disabled="!hasManagePermission" @click="onChangeNtp" icon="Setting">
+                                        <el-button v-permission @click="onChangeNtp" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -84,11 +68,7 @@
                             <el-form-item :label="$t('toolbox.device.timeZone')" prop="timeZone">
                                 <el-input disabled v-model="form.timeZone">
                                     <template #append>
-                                        <el-button
-                                            :disabled="!hasManagePermission"
-                                            @click="onChangeTimeZone"
-                                            icon="Setting"
-                                        >
+                                        <el-button v-permission @click="onChangeTimeZone" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -97,12 +77,7 @@
                             <el-form-item :label="$t('toolbox.device.localTime')" prop="localTime">
                                 <el-input disabled v-model="form.localTime">
                                     <template #append>
-                                        <el-button
-                                            :disabled="!hasManagePermission"
-                                            @click="onChangeLocalTime"
-                                            icon="Refresh"
-                                            width="150px"
-                                        >
+                                        <el-button v-permission @click="onChangeLocalTime" icon="Refresh" width="150px">
                                             {{ $t('commons.button.sync') }}
                                         </el-button>
                                     </template>
diff --git a/frontend/src/views/toolbox/device/ntp/index.vue b/frontend/src/views/toolbox/device/ntp/index.vue
index c607e39b4f58..f86a25cd98cb 100644
--- a/frontend/src/views/toolbox/device/ntp/index.vue
+++ b/frontend/src/views/toolbox/device/ntp/index.vue
@@ -3,31 +3,13 @@
         <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
             <el-form-item :label="$t('toolbox.device.syncSite')" prop="ntpSite" :rules="Rules.domain">
                 <el-input v-model="form.ntpSite" />
-                <el-button
-                    type="primary"
-                    link
-                    class="tagClass"
-                    :disabled="!hasManagePermission"
-                    @click="form.ntpSite = 'pool.ntp.org'"
-                >
+                <el-button type="primary" link class="tagClass" v-permission @click="form.ntpSite = 'pool.ntp.org'">
                     {{ $t('commons.table.default') }}
                 </el-button>
-                <el-button
-                    type="primary"
-                    link
-                    class="tagClass"
-                    :disabled="!hasManagePermission"
-                    @click="form.ntpSite = 'ntp.aliyun.com'"
-                >
+                <el-button type="primary" link class="tagClass" v-permission @click="form.ntpSite = 'ntp.aliyun.com'">
                     {{ $t('toolbox.device.ntpALi') }}
                 </el-button>
-                <el-button
-                    type="primary"
-                    link
-                    class="tagClass"
-                    :disabled="!hasManagePermission"
-                    @click="form.ntpSite = 'time.google.com'"
-                >
+                <el-button type="primary" link class="tagClass" v-permission @click="form.ntpSite = 'time.google.com'">
                     {{ $t('toolbox.device.ntpGoogle') }}
                 </el-button>
             </el-form-item>
@@ -35,7 +17,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSyncTime(formRef)">
+                <el-button v-permission :disabled="loading" type="primary" @click="onSyncTime(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -49,10 +31,8 @@ import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { updateDevice } from '@/api/modules/toolbox';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
-const { hasManagePermission } = useMenuManagePermission();
 
 interface DialogProps {
     ntpSite: string;
diff --git a/frontend/src/views/toolbox/device/passwd/index.vue b/frontend/src/views/toolbox/device/passwd/index.vue
index c884a95b6920..d274a734abea 100644
--- a/frontend/src/views/toolbox/device/passwd/index.vue
+++ b/frontend/src/views/toolbox/device/passwd/index.vue
@@ -23,11 +23,7 @@
                 <el-button :disabled="loading" @click="passwordVisible = false">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
-                <el-button
-                    :disabled="loading || !hasManagePermission"
-                    type="primary"
-                    @click="submitChangePassword(formRef)"
-                >
+                <el-button v-permission :disabled="loading" type="primary" @click="submitChangePassword(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -42,10 +38,8 @@ import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { reactive, ref } from 'vue';
 import { updateDevicePasswd } from '@/api/modules/toolbox';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const formRef = ref<FormInstance>();
-const { hasManagePermission } = useMenuManagePermission();
 const passRules = reactive({
     user: Rules.requiredInput,
     newPassword: [Rules.requiredInput, Rules.noSpace, { validator: checkPassword, trigger: 'blur' }],
diff --git a/frontend/src/views/toolbox/device/swap/index.vue b/frontend/src/views/toolbox/device/swap/index.vue
index 9150a2172ddb..9f71e9c8e205 100644
--- a/frontend/src/views/toolbox/device/swap/index.vue
+++ b/frontend/src/views/toolbox/device/swap/index.vue
@@ -67,7 +67,7 @@
             </el-table-column>
             <el-table-column min-width="70">
                 <template #default="scope">
-                    <el-button link type="primary" :disabled="!hasManagePermission" @click="onSave(scope.row)">
+                    <el-button v-permission link type="primary" @click="onSave(scope.row)">
                         {{ $t('commons.button.save') }}
                     </el-button>
                 </template>
@@ -91,9 +91,6 @@ import { computeSize, splitSize } from '@/utils/size';
 import { newUUID } from '@/utils/id';
 import TaskLog from '@/components/log/task/index.vue';
 import { loadBaseDir } from '@/api/modules/setting';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
-
-const { hasManagePermission } = useMenuManagePermission();
 
 const form = reactive({
     swapMemoryTotal: '',
diff --git a/frontend/src/views/toolbox/fail2ban/ban-action/index.vue b/frontend/src/views/toolbox/fail2ban/ban-action/index.vue
index 53ad767caf74..4f658af366b2 100644
--- a/frontend/src/views/toolbox/fail2ban/ban-action/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/ban-action/index.vue
@@ -33,7 +33,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSave(formRef)">
+                <el-button v-permission :disabled="loading" type="primary" @click="onSave(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -47,10 +47,8 @@ import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { updateFail2ban } from '@/api/modules/toolbox';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
-const { hasManagePermission } = useMenuManagePermission();
 
 interface DialogProps {
     banAction: string;
diff --git a/frontend/src/views/toolbox/fail2ban/ban-time/index.vue b/frontend/src/views/toolbox/fail2ban/ban-time/index.vue
index 2798d153b558..f442fa06f518 100644
--- a/frontend/src/views/toolbox/fail2ban/ban-time/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/ban-time/index.vue
@@ -18,7 +18,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSave(formRef)">
+                <el-button v-permission :disabled="loading" type="primary" @click="onSave(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -32,9 +32,7 @@ import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { updateFail2ban } from '@/api/modules/toolbox';
 import { splitTime, transTimeUnit } from '@/utils/validate';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const emit = defineEmits<{ (e: 'search'): void }>();
-const { hasManagePermission } = useMenuManagePermission();
 
 interface DialogProps {
     banTime: string;
diff --git a/frontend/src/views/toolbox/fail2ban/find-time/index.vue b/frontend/src/views/toolbox/fail2ban/find-time/index.vue
index 1eaca9112847..b57acf7ff935 100644
--- a/frontend/src/views/toolbox/fail2ban/find-time/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/find-time/index.vue
@@ -18,7 +18,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSave(formRef)">
+                <el-button v-permission :disabled="loading" type="primary" @click="onSave(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -33,9 +33,7 @@ import { FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { updateFail2ban } from '@/api/modules/toolbox';
 import { splitTime, transTimeUnit } from '@/utils/validate';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const emit = defineEmits<{ (e: 'search'): void }>();
-const { hasManagePermission } = useMenuManagePermission();
 
 interface DialogProps {
     findTime: string;
diff --git a/frontend/src/views/toolbox/fail2ban/index.vue b/frontend/src/views/toolbox/fail2ban/index.vue
index 818bf8b0b396..c6e95b3e7095 100644
--- a/frontend/src/views/toolbox/fail2ban/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/index.vue
@@ -9,26 +9,14 @@
                         <el-tag>{{ form.version }}</el-tag>
                     </div>
                     <div class="mt-0.5">
-                        <el-button
-                            v-if="form.isActive"
-                            type="primary"
-                            :disabled="!hasManagePermission"
-                            @click="onOperate('stop')"
-                            link
-                        >
+                        <el-button v-if="form.isActive" v-permission type="primary" @click="onOperate('stop')" link>
                             {{ $t('commons.button.stop') }}
                         </el-button>
-                        <el-button
-                            v-if="!form.isActive"
-                            type="primary"
-                            :disabled="!hasManagePermission"
-                            @click="onOperate('start')"
-                            link
-                        >
+                        <el-button v-if="!form.isActive" v-permission type="primary" @click="onOperate('start')" link>
                             {{ $t('commons.button.start') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button type="primary" :disabled="!hasManagePermission" @click="onOperate('restart')" link>
+                        <el-button v-permission type="primary" @click="onOperate('restart')" link>
                             {{ $t('commons.button.restart') }}
                         </el-button>
                         <el-divider direction="vertical" />
@@ -36,9 +24,9 @@
                             {{ $t('ssh.autoStart') }}
                         </el-button>
                         <el-switch
+                            v-permission
                             size="small"
                             class="ml-2"
-                            :disabled="!hasManagePermission"
                             inactive-value="disable"
                             active-value="enable"
                             @change="onOperate(autoStart)"
@@ -63,7 +51,8 @@
                 </template>
                 <template #leftToolBar>
                     <el-button
-                        :disabled="!form.isActive || !hasManagePermission"
+                        v-permission
+                        :disabled="!form.isActive"
                         type="primary"
                         plain
                         @click="onLoadList('ignore')"
@@ -71,7 +60,8 @@
                         {{ $t('toolbox.fail2ban.ignoreIP') }}
                     </el-button>
                     <el-button
-                        :disabled="!form.isActive || !hasManagePermission"
+                        v-permission
+                        :disabled="!form.isActive"
                         type="primary"
                         plain
                         @click="onLoadList('banned')"
@@ -91,11 +81,7 @@
                                 <el-form-item :label="$t('toolbox.fail2ban.sshPort')" prop="port">
                                     <el-input disabled v-model="form.port">
                                         <template #append>
-                                            <el-button
-                                                :disabled="!hasManagePermission"
-                                                @click="onChangePort"
-                                                icon="Setting"
-                                            >
+                                            <el-button v-permission @click="onChangePort" icon="Setting">
                                                 {{ $t('commons.button.set') }}
                                             </el-button>
                                         </template>
@@ -105,11 +91,7 @@
                                 <el-form-item :label="$t('toolbox.fail2ban.maxRetry')" prop="maxRetry">
                                     <el-input disabled v-model="form.maxRetry">
                                         <template #append>
-                                            <el-button
-                                                :disabled="!hasManagePermission"
-                                                @click="onChangeMaxRetry"
-                                                icon="Setting"
-                                            >
+                                            <el-button v-permission @click="onChangeMaxRetry" icon="Setting">
                                                 {{ $t('commons.button.set') }}
                                             </el-button>
                                         </template>
@@ -118,11 +100,7 @@
                                 <el-form-item :label="$t('toolbox.fail2ban.banTime')" prop="banTime">
                                     <el-input disabled v-model="form.banTimeItem">
                                         <template #append>
-                                            <el-button
-                                                :disabled="!hasManagePermission"
-                                                @click="onChangeBanTime"
-                                                icon="Setting"
-                                            >
+                                            <el-button v-permission @click="onChangeBanTime" icon="Setting">
                                                 {{ $t('commons.button.set') }}
                                             </el-button>
                                         </template>
@@ -132,11 +110,7 @@
                                 <el-form-item :label="$t('toolbox.fail2ban.findTime')" prop="findTime">
                                     <el-input disabled v-model="form.findTimeItem">
                                         <template #append>
-                                            <el-button
-                                                :disabled="!hasManagePermission"
-                                                @click="onChangeFindTime"
-                                                icon="Setting"
-                                            >
+                                            <el-button v-permission @click="onChangeFindTime" icon="Setting">
                                                 {{ $t('commons.button.set') }}
                                             </el-button>
                                         </template>
@@ -145,11 +119,7 @@
                                 <el-form-item :label="$t('toolbox.fail2ban.banAction')" prop="banAction">
                                     <el-input disabled v-model="form.banAction">
                                         <template #append>
-                                            <el-button
-                                                :disabled="!hasManagePermission"
-                                                @click="onChangeBanAction"
-                                                icon="Setting"
-                                            >
+                                            <el-button v-permission @click="onChangeBanAction" icon="Setting">
                                                 {{ $t('commons.button.set') }}
                                             </el-button>
                                         </template>
@@ -158,11 +128,7 @@
                                 <el-form-item :label="$t('toolbox.fail2ban.logPath')" prop="logPath">
                                     <el-input disabled v-model="form.logPath">
                                         <template #append>
-                                            <el-button
-                                                :disabled="!hasManagePermission"
-                                                @click="onChangeLogPath"
-                                                icon="Setting"
-                                            >
+                                            <el-button v-permission @click="onChangeLogPath" icon="Setting">
                                                 {{ $t('commons.button.set') }}
                                             </el-button>
                                         </template>
@@ -179,12 +145,7 @@
                             v-model="fail2banConf"
                             :heightDiff="460"
                         ></CodemirrorPro>
-                        <el-button
-                            :disabled="loading || !hasManagePermission"
-                            type="primary"
-                            @click="onSaveFile"
-                            class="mt-2.5"
-                        >
+                        <el-button v-permission :disabled="loading" type="primary" @click="onSaveFile" class="mt-2.5">
                             {{ $t('commons.button.save') }}
                         </el-button>
                     </div>
@@ -220,10 +181,8 @@ import { getFail2banConf, getFail2banBase, operateFail2ban, updateFail2banByFile
 import { ElMessageBox } from 'element-plus';
 import { transTimeUnit } from '@/utils/validate';
 import { GlobalStore } from '@/store';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 const formRef = ref();
diff --git a/frontend/src/views/toolbox/fail2ban/ips/index.vue b/frontend/src/views/toolbox/fail2ban/ips/index.vue
index 54c76823d1d3..8a0fb775375c 100644
--- a/frontend/src/views/toolbox/fail2ban/ips/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/ips/index.vue
@@ -13,7 +13,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSave(formRef)">
+                <el-button v-permission :disabled="loading" type="primary" @click="onSave(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -27,9 +27,7 @@ import { FormInstance } from 'element-plus';
 import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
 import { checkCidr, checkIpV4V6 } from '@/utils/validate';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const emit = defineEmits<{ (e: 'search'): void }>();
-const { hasManagePermission } = useMenuManagePermission();
 
 const drawerVisible = ref(false);
 const loading = ref();
diff --git a/frontend/src/views/toolbox/fail2ban/log-path/index.vue b/frontend/src/views/toolbox/fail2ban/log-path/index.vue
index f448d2dcbd18..189462f6ad23 100644
--- a/frontend/src/views/toolbox/fail2ban/log-path/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/log-path/index.vue
@@ -4,7 +4,7 @@
             <el-form-item :label="$t('toolbox.fail2ban.logPath')" prop="logPath" :rules="Rules.requiredInput">
                 <el-input v-model="form.logPath">
                     <template #prepend>
-                        <el-button icon="Folder" :disabled="!hasManagePermission" @click="fileRef.acceptParams({})" />
+                        <el-button v-permission icon="Folder" @click="fileRef.acceptParams({})" />
                     </template>
                 </el-input>
                 <span class="input-help">{{ $t('toolbox.fail2ban.logPathHelper') }}</span>
@@ -13,7 +13,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSave(formRef)">
+                <el-button v-permission :disabled="loading" type="primary" @click="onSave(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -29,10 +29,8 @@ import FileList from '@/components/file-list/index.vue';
 import { updateFail2ban } from '@/api/modules/toolbox';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
-const { hasManagePermission } = useMenuManagePermission();
 
 interface DialogProps {
     logPath: string;
diff --git a/frontend/src/views/toolbox/fail2ban/max-retry/index.vue b/frontend/src/views/toolbox/fail2ban/max-retry/index.vue
index 24380ed365d3..cdcdd2047ce8 100644
--- a/frontend/src/views/toolbox/fail2ban/max-retry/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/max-retry/index.vue
@@ -10,7 +10,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSave(formRef)">
+                <el-button v-permission :disabled="loading" type="primary" @click="onSave(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -24,10 +24,8 @@ import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { Rules, checkNumberRange } from '@/global/form-rules';
 import { updateFail2ban } from '@/api/modules/toolbox';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
-const { hasManagePermission } = useMenuManagePermission();
 
 interface DialogProps {
     maxRetry: string;
diff --git a/frontend/src/views/toolbox/fail2ban/port/index.vue b/frontend/src/views/toolbox/fail2ban/port/index.vue
index 9000c4e12840..da244ee57bc7 100644
--- a/frontend/src/views/toolbox/fail2ban/port/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/port/index.vue
@@ -8,7 +8,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSave(formRef)">
+                <el-button v-permission :disabled="loading" type="primary" @click="onSave(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -22,10 +22,8 @@ import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { Rules, checkNumberRange } from '@/global/form-rules';
 import { updateFail2ban } from '@/api/modules/toolbox';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
-const { hasManagePermission } = useMenuManagePermission();
 
 interface DialogProps {
     port: string;
diff --git a/frontend/src/views/toolbox/ftp/index.vue b/frontend/src/views/toolbox/ftp/index.vue
index fa11f269b3e4..e157d4e7d38a 100644
--- a/frontend/src/views/toolbox/ftp/index.vue
+++ b/frontend/src/views/toolbox/ftp/index.vue
@@ -8,26 +8,14 @@
                         <Status class="mt-0.5" :status="form.isActive ? 'enable' : 'disable'" />
                     </div>
                     <div class="mt-0.5">
-                        <el-button
-                            v-if="form.isActive"
-                            type="primary"
-                            :disabled="!hasManagePermission"
-                            @click="onOperate('stop')"
-                            link
-                        >
+                        <el-button v-if="form.isActive" v-permission type="primary" @click="onOperate('stop')" link>
                             {{ $t('commons.button.stop') }}
                         </el-button>
-                        <el-button
-                            v-if="!form.isActive"
-                            type="primary"
-                            :disabled="!hasManagePermission"
-                            @click="onOperate('start')"
-                            link
-                        >
+                        <el-button v-if="!form.isActive" v-permission type="primary" @click="onOperate('start')" link>
                             {{ $t('commons.button.start') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button type="primary" :disabled="!hasManagePermission" @click="onOperate('restart')" link>
+                        <el-button v-permission type="primary" @click="onOperate('restart')" link>
                             {{ $t('commons.button.restart') }}
                         </el-button>
                     </div>
@@ -47,13 +35,13 @@
                     </el-alert>
                 </template>
                 <template #leftToolBar>
-                    <el-button type="primary" :disabled="!hasManagePermission" @click="onOpenDialog('add')">
+                    <el-button v-permission type="primary" @click="onOpenDialog('add')">
                         {{ $t('commons.button.add') }}
                     </el-button>
-                    <el-button :disabled="!hasManagePermission" @click="onSync()">
+                    <el-button v-permission @click="onSync()">
                         {{ $t('commons.button.sync') }}
                     </el-button>
-                    <el-button plain :disabled="selects.length === 0 || !hasManagePermission" @click="onDelete(null)">
+                    <el-button v-permission plain :disabled="selects.length === 0" @click="onDelete(null)">
                         {{ $t('commons.button.delete') }}
                     </el-button>
                 </template>
@@ -137,7 +125,7 @@
                             <template #default="{ row }">
                                 <fu-input-rw-switch
                                     v-model="row.description"
-                                    :write-trigger="hasManagePermission ? 'onClick' : 'disabled'"
+                                    v-permission
                                     @enter="onChange(row)"
                                     @blur="onChange(row)"
                                 />
@@ -177,9 +165,7 @@ import { Toolbox } from '@/api/interface/toolbox';
 import { GlobalStore } from '@/store';
 import { routerToFileWithPath } from '@/utils/router';
 import { getRandomStr } from '@/utils/id';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref();
 const selects = ref<any>([]);
@@ -350,8 +336,9 @@ const onSubmitDelete = async () => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
+        permission: true,
         disabled: (row: Toolbox.FtpInfo) => {
-            return row.status === 'deleted' || !hasManagePermission.value;
+            return row.status === 'deleted';
         },
         click: (row: Toolbox.FtpInfo) => {
             onOpenDialog('edit', row);
@@ -368,7 +355,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: Toolbox.FtpInfo) => {
             onDelete(row);
         },
diff --git a/frontend/src/views/toolbox/ftp/operate/index.vue b/frontend/src/views/toolbox/ftp/operate/index.vue
index c6b41ef07caf..bf2bd983365d 100644
--- a/frontend/src/views/toolbox/ftp/operate/index.vue
+++ b/frontend/src/views/toolbox/ftp/operate/index.vue
@@ -13,7 +13,7 @@
             <el-form-item :label="$t('commons.login.password')" prop="password">
                 <el-input type="password" clearable v-model="dialogData.rowData!.password" show-password>
                     <template #append>
-                        <el-button :disabled="!hasManagePermission" @click="random">
+                        <el-button v-permission @click="random">
                             {{ $t('commons.button.random') }}
                         </el-button>
                     </template>
@@ -22,11 +22,7 @@
             <el-form-item :label="$t('file.root')" prop="path">
                 <el-input v-model="dialogData.rowData!.path">
                     <template #prepend>
-                        <el-button
-                            icon="Folder"
-                            :disabled="!hasManagePermission"
-                            @click="fileRef.acceptParams({ dir: true })"
-                        />
+                        <el-button v-permission icon="Folder" @click="fileRef.acceptParams({ dir: true })" />
                     </template>
                 </el-input>
                 <span class="input-help">{{ $t('toolbox.ftp.dirHelper') }}</span>
@@ -38,7 +34,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button :disabled="loading || !hasManagePermission" type="primary" @click="onSubmit(formRef)">
+                <el-button v-permission :disabled="loading" type="primary" @click="onSubmit(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -58,14 +54,12 @@ import { Toolbox } from '@/api/interface/toolbox';
 import { createFtp, updateFtp } from '@/api/modules/toolbox';
 import { getRandomStr } from '@/utils/id';
 import { isSensitiveLinuxPath } from '@/utils/file';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 interface DialogProps {
     title: string;
     rowData?: Toolbox.FtpInfo;
     getTableList?: () => Promise<any>;
 }
 const loading = ref();
-const { hasManagePermission } = useMenuManagePermission();
 const title = ref<string>('');
 const drawerVisible = ref(false);
 const fileRef = ref();
diff --git a/frontend/src/views/toolbox/index.vue b/frontend/src/views/toolbox/index.vue
index 72dcb91b6176..ab8e4321324e 100644
--- a/frontend/src/views/toolbox/index.vue
+++ b/frontend/src/views/toolbox/index.vue
@@ -3,11 +3,11 @@
         <RouterButton :buttons="buttons">
             <template #route-button>
                 <div class="router-button">
-                    <el-button link type="primary" :disabled="!hasManagePermission" @click="onRestart('1panel')">
+                    <el-button v-permission link type="primary" @click="onRestart('1panel')">
                         {{ $t('home.restart_1panel') }}
                     </el-button>
                     <el-divider direction="vertical" />
-                    <el-button link type="primary" :disabled="!hasManagePermission" @click="onRestart('system')">
+                    <el-button v-permission link type="primary" @click="onRestart('system')">
                         {{ $t('home.restart_system') }}
                     </el-button>
                 </div>
@@ -28,12 +28,10 @@ import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import { GlobalStore } from '@/store';
 import { MsgSuccess } from '@/utils/message';
 import { systemRestart } from '@/api/modules/dashboard';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const restartType = ref();
 const confirmDialogRef = ref();
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 
 const onRestart = (type: string) => {
     let header = i18n.global.t('home.restart_' + type);
diff --git a/frontend/src/views/toolbox/supervisor/config/basic/index.vue b/frontend/src/views/toolbox/supervisor/config/basic/index.vue
index c0c55cc3c77e..60c9bd030f8f 100644
--- a/frontend/src/views/toolbox/supervisor/config/basic/index.vue
+++ b/frontend/src/views/toolbox/supervisor/config/basic/index.vue
@@ -10,7 +10,7 @@
                     <span class="input-help">{{ $t('tool.supervisor.serviceNameHelper') }}</span>
                 </el-form-item>
                 <el-form-item>
-                    <el-button type="primary" @click="submit(initForm)" :disabled="loading || !hasManagePermission">
+                    <el-button v-permission type="primary" @click="submit(initForm)" :disabled="loading">
                         {{ $t('commons.button.confirm') }}
                     </el-button>
                 </el-form-item>
@@ -27,9 +27,7 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { onMounted, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const loading = ref(false);
-const { hasManagePermission } = useMenuManagePermission();
 const initForm = ref<FormInstance>();
 const rules = ref({
     configPath: [Rules.requiredInput],
diff --git a/frontend/src/views/toolbox/supervisor/config/source/index.vue b/frontend/src/views/toolbox/supervisor/config/source/index.vue
index dcfb585dee11..df545f5c2fbb 100644
--- a/frontend/src/views/toolbox/supervisor/config/source/index.vue
+++ b/frontend/src/views/toolbox/supervisor/config/source/index.vue
@@ -2,7 +2,7 @@
     <div v-loading="loading">
         <CodemirrorPro class="mt-5" v-model="content" :heightDiff="375"></CodemirrorPro>
         <div class="mt-5">
-            <el-button type="primary" @click="submit()" :disabled="loading || !hasManagePermission">
+            <el-button v-permission type="primary" @click="submit()" :disabled="loading">
                 {{ $t('commons.button.save') }}
             </el-button>
         </div>
@@ -13,12 +13,10 @@ import { onMounted, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { getSupervisorConfig, updateSupervisorConfig } from '@/api/modules/host-tool';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 let data = ref();
 let content = ref('');
 let loading = ref(false);
-const { hasManagePermission } = useMenuManagePermission();
 
 const submit = () => {
     loading.value = true;
diff --git a/frontend/src/views/toolbox/supervisor/create/index.vue b/frontend/src/views/toolbox/supervisor/create/index.vue
index 3f143f84c5ee..40a19a049c85 100644
--- a/frontend/src/views/toolbox/supervisor/create/index.vue
+++ b/frontend/src/views/toolbox/supervisor/create/index.vue
@@ -22,11 +22,7 @@
             <el-form-item :label="$t('tool.supervisor.dir')" prop="dir">
                 <el-input v-model.trim="process.dir">
                     <template #prepend>
-                        <el-button
-                            icon="Folder"
-                            :disabled="!hasManagePermission"
-                            @click="fileRef.acceptParams({ dir: true })"
-                        />
+                        <el-button v-permission icon="Folder" @click="fileRef.acceptParams({ dir: true })" />
                     </template>
                 </el-input>
             </el-form-item>
@@ -51,7 +47,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="submit(processForm)" :disabled="loading || !hasManagePermission">
+                <el-button v-permission type="primary" @click="submit(processForm)" :disabled="loading">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -69,10 +65,8 @@ import { FormInstance } from 'element-plus';
 import { ref } from 'vue';
 import { MsgSuccess } from '@/utils/message';
 import { HostTool } from '@/api/interface/host-tool';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const open = ref(false);
-const { hasManagePermission } = useMenuManagePermission();
 const loading = ref(false);
 const fileRef = ref();
 const processForm = ref<FormInstance>();
diff --git a/frontend/src/views/toolbox/supervisor/file/index.vue b/frontend/src/views/toolbox/supervisor/file/index.vue
index a351beb218e2..fa69fc1ac776 100644
--- a/frontend/src/views/toolbox/supervisor/file/index.vue
+++ b/frontend/src/views/toolbox/supervisor/file/index.vue
@@ -15,7 +15,7 @@
         <template #footer>
             <span>
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" :disabled="loading || !hasManagePermission" @click="submit()">
+                <el-button v-permission type="primary" :disabled="loading" @click="submit()">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -28,9 +28,7 @@ import { getSupervisorProcessFile, operateSupervisorProcessFile } from '@/api/mo
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { GlobalStore } from '@/store';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 const content = ref('');
diff --git a/frontend/src/views/toolbox/supervisor/index.vue b/frontend/src/views/toolbox/supervisor/index.vue
index e9bac8b893c2..18c281c2450f 100644
--- a/frontend/src/views/toolbox/supervisor/index.vue
+++ b/frontend/src/views/toolbox/supervisor/index.vue
@@ -23,7 +23,7 @@
                 />
             </template>
             <template v-if="showTable" #leftToolBar>
-                <el-button type="primary" @click="openCreate" :disabled="showStopped || !hasManagePermission">
+                <el-button v-permission type="primary" @click="openCreate" :disabled="showStopped">
                     {{ $t('commons.button.create') }}
                 </el-button>
             </template>
@@ -74,23 +74,18 @@
                         <template #default="{ row }">
                             <div v-if="row.status && row.status.length > 0 && row.hasLoad">
                                 <Status
+                                    v-permission
                                     v-if="checkStatus(row.status) === 'RUNNING'"
                                     status="running"
-                                    :disabled="!hasManagePermission"
                                     @click="operate('stop', row.name)"
                                 />
                                 <Status
+                                    v-permission
                                     v-else-if="checkStatus(row.status) === 'WARNING'"
                                     status="unhealthy"
-                                    :disabled="!hasManagePermission"
                                     @click="operate('restart', row.name)"
                                 />
-                                <Status
-                                    v-else
-                                    status="stopped"
-                                    :disabled="!hasManagePermission"
-                                    @click="operate('start', row.name)"
-                                />
+                                <Status v-else v-permission status="stopped" @click="operate('start', row.name)" />
                             </div>
                             <div v-if="!row.hasLoad">
                                 <el-button link loading></el-button>
@@ -189,7 +184,6 @@ import { useGlobalStore } from '@/composables/useGlobalStore';
 
 const { isMobile } = useGlobalStore();
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 
 const loading = ref(false);
 const setSuperVisor = ref(false);
@@ -349,14 +343,14 @@ const edit = (row: HostTool.SupervisorProcess) => {
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: !hasManagePermission.value,
+        permission: true,
         click: function (row: HostTool.SupervisorProcess) {
             edit(row);
         },
     },
     {
         label: i18n.global.t('website.sourceFile'),
-        disabled: !hasManagePermission.value,
+        permission: true,
         click: function (row: HostTool.SupervisorProcess) {
             getFile(row.name, 'config');
         },
@@ -369,14 +363,14 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.restart'),
-        disabled: !hasManagePermission.value,
+        permission: true,
         click: function (row: HostTool.SupervisorProcess) {
             operate('restart', row.name);
         },
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: !hasManagePermission.value,
+        permission: true,
         click: function (row: HostTool.SupervisorProcess) {
             operate('delete', row.name);
         },
diff --git a/frontend/src/views/toolbox/supervisor/log/index.vue b/frontend/src/views/toolbox/supervisor/log/index.vue
index d1d99dd16fdd..13859a805407 100644
--- a/frontend/src/views/toolbox/supervisor/log/index.vue
+++ b/frontend/src/views/toolbox/supervisor/log/index.vue
@@ -22,7 +22,7 @@
                 :height-diff="300"
             >
                 <template #button>
-                    <el-button @click="cleanLog" icon="Delete" :disabled="hasContent === false || !hasManagePermission">
+                    <el-button v-permission @click="cleanLog" icon="Delete" :disabled="hasContent === false">
                         {{ $t('commons.button.clean') }}
                     </el-button>
                 </template>
@@ -45,9 +45,7 @@ import { GlobalStore } from '@/store';
 import { operateSupervisorProcessFile } from '@/api/modules/host-tool';
 import i18n from '@/lang';
 import { TabsPaneContext } from 'element-plus';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 
 const logConfig = reactive({
     type: 'supervisor',
diff --git a/frontend/src/views/toolbox/supervisor/status/index.vue b/frontend/src/views/toolbox/supervisor/status/index.vue
index f35fa2846c6f..40f46257affc 100644
--- a/frontend/src/views/toolbox/supervisor/status/index.vue
+++ b/frontend/src/views/toolbox/supervisor/status/index.vue
@@ -10,34 +10,34 @@
                     </div>
                     <div class="mt-0.5" v-if="!data.init">
                         <el-button
+                            v-permission
                             type="primary"
                             v-if="data.status != 'running'"
                             link
-                            :disabled="!hasManagePermission"
                             @click="onOperate('start')"
                         >
                             {{ $t('commons.operate.start') }}
                         </el-button>
                         <el-button
+                            v-permission
                             type="primary"
                             v-if="data.status == 'running'"
                             link
-                            :disabled="!hasManagePermission"
                             @click="onOperate('stop')"
                         >
                             {{ $t('commons.operate.stop') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button type="primary" link :disabled="!hasManagePermission" @click="onOperate('restart')">
+                        <el-button v-permission type="primary" link @click="onOperate('restart')">
                             {{ $t('commons.button.restart') }}
                         </el-button>
                         <el-divider direction="vertical" />
-                        <el-button type="primary" link :disabled="!hasManagePermission" @click="setting">
+                        <el-button v-permission type="primary" link @click="setting">
                             {{ $t('commons.button.set') }}
                         </el-button>
                     </div>
                     <div class="mt-0.5" v-else>
-                        <el-button type="primary" link :disabled="!hasManagePermission" @click="init">
+                        <el-button v-permission type="primary" link @click="init">
                             {{ $t('commons.button.init') }}
                         </el-button>
                     </div>
@@ -101,10 +101,8 @@ import { HostTool } from '@/api/interface/host-tool';
 import InitPage from './init/index.vue';
 import { GlobalStore } from '@/store';
 import { routerToNameWithQuery } from '@/utils/router';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const globalStore = GlobalStore();
-const { hasManagePermission } = useMenuManagePermission();
 
 let operateReq = reactive({
     installId: 0,
diff --git a/frontend/src/views/toolbox/supervisor/status/init/index.vue b/frontend/src/views/toolbox/supervisor/status/init/index.vue
index 8b3ec6adcc97..1e48e637d45a 100644
--- a/frontend/src/views/toolbox/supervisor/status/init/index.vue
+++ b/frontend/src/views/toolbox/supervisor/status/init/index.vue
@@ -28,7 +28,7 @@
                 <el-button @click="handleClose()" :disabled="loading">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
-                <el-button type="primary" @click="openSubmit(initForm)" :disabled="loading || !hasManagePermission">
+                <el-button v-permission type="primary" @click="openSubmit(initForm)" :disabled="loading">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -44,10 +44,8 @@ import i18n from '@/lang';
 import { FormInstance } from 'element-plus';
 import { ref } from 'vue';
 import { MsgSuccess } from '@/utils/message';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 
 const open = ref(false);
-const { hasManagePermission } = useMenuManagePermission();
 const loading = ref(false);
 const initForm = ref<FormInstance>();
 const rules = ref({
diff --git a/frontend/src/views/website/runtime/dotnet/index.vue b/frontend/src/views/website/runtime/dotnet/index.vue
index 9d6b181d4b8d..3bb51e1e0568 100644
--- a/frontend/src/views/website/runtime/dotnet/index.vue
+++ b/frontend/src/views/website/runtime/dotnet/index.vue
@@ -4,7 +4,7 @@
         <DockerStatus v-model:isActive="isActive" v-model:isExist="isExist" />
         <LayoutContent v-loading="loading" v-if="isExist" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
+                <el-button v-permission type="primary" @click="openCreate">
                     {{ $t('commons.button.create') }}
                 </el-button>
             </template>
@@ -30,7 +30,7 @@
                     <el-table-column :label="$t('website.runDir')" prop="codeDir" min-width="120px">
                         <template #default="{ row }">
                             <el-button
-                                :disabled="!hasFilePermission"
+                                v-permission:view="'host_file_view'"
                                 type="primary"
                                 link
                                 @click="routerToFileWithPath(row.codeDir)"
@@ -62,16 +62,12 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.remark')" prop="remark" min-width="150px">
                         <template #default="{ row }">
-                            <fu-read-write-switch :write-trigger="hasManagePermission ? 'onClick' : 'disabled'">
+                            <fu-read-write-switch v-permission>
                                 <template #read>
                                     <MsgInfo :info="row.remark" :width="'150'" />
                                 </template>
                                 <template #default="{ read }">
-                                    <el-input
-                                        v-model="row.remark"
-                                        :disabled="!hasManagePermission"
-                                        @blur="updateRuntimeRemark(row, read)"
-                                    />
+                                    <el-input v-model="row.remark" @blur="updateRuntimeRemark(row, read)" />
                                 </template>
                             </fu-read-write-switch>
                         </template>
diff --git a/frontend/src/views/website/runtime/go/index.vue b/frontend/src/views/website/runtime/go/index.vue
index 6c63fce96e7c..7dda886a24d4 100644
--- a/frontend/src/views/website/runtime/go/index.vue
+++ b/frontend/src/views/website/runtime/go/index.vue
@@ -4,7 +4,7 @@
         <DockerStatus v-model:isActive="isActive" v-model:isExist="isExist" />
         <LayoutContent v-loading="loading" v-if="isExist" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
+                <el-button v-permission type="primary" @click="openCreate">
                     {{ $t('commons.button.create') }}
                 </el-button>
             </template>
@@ -57,16 +57,12 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.remark')" prop="remark" min-width="150px">
                         <template #default="{ row }">
-                            <fu-read-write-switch :write-trigger="hasManagePermission ? 'onClick' : 'disabled'">
+                            <fu-read-write-switch v-permission>
                                 <template #read>
                                     <MsgInfo :info="row.remark" :width="'150'" />
                                 </template>
                                 <template #default="{ read }">
-                                    <el-input
-                                        v-model="row.remark"
-                                        :disabled="!hasManagePermission"
-                                        @blur="updateRuntimeRemark(row, read)"
-                                    />
+                                    <el-input v-model="row.remark" @blur="updateRuntimeRemark(row, read)" />
                                 </template>
                             </fu-read-write-switch>
                         </template>
@@ -101,7 +97,6 @@
 
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Runtime } from '@/api/interface/runtime';
 import { RuntimeDeleteCheck, SearchRuntimes, SyncRuntime } from '@/api/modules/runtime';
 import { dateFormat } from '@/utils/date';
diff --git a/frontend/src/views/website/runtime/java/index.vue b/frontend/src/views/website/runtime/java/index.vue
index 228c7bd9615b..0a1ed8b2938b 100644
--- a/frontend/src/views/website/runtime/java/index.vue
+++ b/frontend/src/views/website/runtime/java/index.vue
@@ -4,7 +4,7 @@
         <DockerStatus v-model:isActive="isActive" v-model:isExist="isExist" />
         <LayoutContent v-loading="loading" v-if="isExist" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
+                <el-button v-permission type="primary" @click="openCreate">
                     {{ $t('commons.button.create') }}
                 </el-button>
             </template>
@@ -30,7 +30,7 @@
                     <el-table-column :label="$t('runtime.codeDir')" prop="codeDir" min-width="120px">
                         <template #default="{ row }">
                             <el-button
-                                :disabled="!hasFilePermission"
+                                v-permission:view="'host_file_view'"
                                 type="primary"
                                 link
                                 @click="routerToFileWithPath(row.codeDir)"
@@ -62,16 +62,12 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.remark')" prop="remark" min-width="150px">
                         <template #default="{ row }">
-                            <fu-read-write-switch :write-trigger="hasManagePermission ? 'onClick' : 'disabled'">
+                            <fu-read-write-switch v-permission>
                                 <template #read>
                                     <MsgInfo :info="row.remark" :width="'150'" />
                                 </template>
                                 <template #default="{ read }">
-                                    <el-input
-                                        v-model="row.remark"
-                                        :disabled="!hasManagePermission"
-                                        @blur="updateRuntimeRemark(row, read)"
-                                    />
+                                    <el-input v-model="row.remark" @blur="updateRuntimeRemark(row, read)" />
                                 </template>
                             </fu-read-write-switch>
                         </template>
@@ -106,7 +102,6 @@
 
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Runtime } from '@/api/interface/runtime';
 import { RuntimeDeleteCheck, SearchRuntimes, SyncRuntime } from '@/api/modules/runtime';
 import { dateFormat } from '@/utils/date';
diff --git a/frontend/src/views/website/runtime/node/index.vue b/frontend/src/views/website/runtime/node/index.vue
index cc3b911c3d4f..49daf4b98006 100644
--- a/frontend/src/views/website/runtime/node/index.vue
+++ b/frontend/src/views/website/runtime/node/index.vue
@@ -4,7 +4,7 @@
         <DockerStatus v-model:isActive="isActive" v-model:isExist="isExist" />
         <LayoutContent v-loading="loading" v-if="isExist" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
+                <el-button v-permission type="primary" @click="openCreate">
                     {{ $t('commons.button.create') }}
                 </el-button>
             </template>
@@ -30,7 +30,7 @@
                     <el-table-column :label="$t('runtime.codeDir')" prop="codeDir" min-width="120px">
                         <template #default="{ row }">
                             <el-button
-                                :disabled="!hasFilePermission"
+                                v-permission:view="'host_file_view'"
                                 type="primary"
                                 link
                                 @click="routerToFileWithPath(row.codeDir)"
@@ -62,16 +62,12 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.remark')" prop="remark" min-width="150px">
                         <template #default="{ row }">
-                            <fu-read-write-switch :write-trigger="hasManagePermission ? 'onClick' : 'disabled'">
+                            <fu-read-write-switch v-permission>
                                 <template #read>
                                     <MsgInfo :info="row.remark" :width="'150'" />
                                 </template>
                                 <template #default="{ read }">
-                                    <el-input
-                                        v-model="row.remark"
-                                        :disabled="!hasManagePermission"
-                                        @blur="updateRuntimeRemark(row, read)"
-                                    />
+                                    <el-input v-model="row.remark" @blur="updateRuntimeRemark(row, read)" />
                                 </template>
                             </fu-read-write-switch>
                         </template>
@@ -107,7 +103,6 @@
 
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Runtime } from '@/api/interface/runtime';
 import { RuntimeDeleteCheck, SearchRuntimes, SyncRuntime } from '@/api/modules/runtime';
 import { dateFormat } from '@/utils/date';
diff --git a/frontend/src/views/website/runtime/php/extension-template/index.vue b/frontend/src/views/website/runtime/php/extension-template/index.vue
index e0e5bb6faffd..4e7b8720af1c 100644
--- a/frontend/src/views/website/runtime/php/extension-template/index.vue
+++ b/frontend/src/views/website/runtime/php/extension-template/index.vue
@@ -3,7 +3,7 @@
         <template #content>
             <ComplexTable :data="data" @search="search()" :pagination-config="paginationConfig">
                 <template #toolbar>
-                    <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
+                    <el-button v-permission type="primary" @click="openCreate">
                         {{ $t('commons.button.create') }}
                     </el-button>
                 </template>
@@ -26,11 +26,9 @@
 <script lang="ts" setup>
 import { DeletePHPExtensions, SearchPHPExtensions } from '@/api/modules/runtime';
 import { reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import Create from './operate/index.vue';
 import { Runtime } from '@/api/interface/runtime';
 import i18n from '@/lang';
-const { hasManagePermission } = useMenuManagePermission();
 
 const open = ref(false);
 const data = ref();
@@ -47,7 +45,7 @@ const paginationConfig = reactive({
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: function (row: Runtime.PHPExtensions) {
             openUpdate(row);
         },
diff --git a/frontend/src/views/website/runtime/php/index.vue b/frontend/src/views/website/runtime/php/index.vue
index 51f04211dcf4..ec0f8eee5faf 100644
--- a/frontend/src/views/website/runtime/php/index.vue
+++ b/frontend/src/views/website/runtime/php/index.vue
@@ -4,7 +4,7 @@
         <DockerStatus v-model:isActive="isActive" v-model:isExist="isExist" />
         <LayoutContent v-loading="loading" v-if="isExist" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
+                <el-button v-permission type="primary" @click="openCreate">
                     {{ $t('commons.button.create') }}
                 </el-button>
 
@@ -46,7 +46,7 @@
                     <el-table-column :label="$t('home.dir')" prop="codeDir" width="100px">
                         <template #default="{ row }">
                             <el-button
-                                :disabled="!hasFilePermission"
+                                v-permission:view="'host_file_view'"
                                 type="primary"
                                 link
                                 @click="routerToFileWithPath(row.path)"
@@ -90,16 +90,12 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.remark')" prop="remark" min-width="150px">
                         <template #default="{ row }">
-                            <fu-read-write-switch :write-trigger="hasManagePermission ? 'onClick' : 'disabled'">
+                            <fu-read-write-switch v-permission>
                                 <template #read>
                                     <MsgInfo :info="row.remark" :width="'150'" />
                                 </template>
                                 <template #default="{ read }">
-                                    <el-input
-                                        v-model="row.remark"
-                                        :disabled="!hasManagePermission"
-                                        @blur="updateRuntimeRemark(row, read)"
-                                    />
+                                    <el-input v-model="row.remark" @blur="updateRuntimeRemark(row, read)" />
                                 </template>
                             </fu-read-write-switch>
                         </template>
@@ -140,7 +136,6 @@
 
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Runtime } from '@/api/interface/runtime';
 import { DeleteRuntime, RuntimeDeleteCheck, SearchRuntimes } from '@/api/modules/runtime';
 import { dateFormat } from '@/utils/date';
diff --git a/frontend/src/views/website/runtime/php/supervisor/index.vue b/frontend/src/views/website/runtime/php/supervisor/index.vue
index 4160ab0fb5f7..7f4b92acf0aa 100644
--- a/frontend/src/views/website/runtime/php/supervisor/index.vue
+++ b/frontend/src/views/website/runtime/php/supervisor/index.vue
@@ -3,7 +3,7 @@
         <template #content>
             <ComplexTable :data="data" v-loading="loading" v-model:selects="selects">
                 <template #toolbar>
-                    <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
+                    <el-button v-permission type="primary" @click="openCreate">
                         {{ $t('commons.button.create') }}
                     </el-button>
                     <el-button
diff --git a/frontend/src/views/website/runtime/python/index.vue b/frontend/src/views/website/runtime/python/index.vue
index 4e7db4f3d165..0263d12a33b5 100644
--- a/frontend/src/views/website/runtime/python/index.vue
+++ b/frontend/src/views/website/runtime/python/index.vue
@@ -4,7 +4,7 @@
         <DockerStatus v-model:isActive="isActive" v-model:isExist="isExist" />
         <LayoutContent v-loading="loading" v-if="isExist" :class="{ mask: !isActive }">
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
+                <el-button v-permission type="primary" @click="openCreate">
                     {{ $t('commons.button.create') }}
                 </el-button>
             </template>
@@ -30,7 +30,7 @@
                     <el-table-column :label="$t('website.runDir')" prop="codeDir" min-width="120px">
                         <template #default="{ row }">
                             <el-button
-                                :disabled="!hasFilePermission"
+                                v-permission:view="'host_file_view'"
                                 type="primary"
                                 link
                                 @click="routerToFileWithPath(row.codeDir)"
@@ -62,16 +62,12 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.remark')" prop="remark" min-width="150px">
                         <template #default="{ row }">
-                            <fu-read-write-switch :write-trigger="hasManagePermission ? 'onClick' : 'disabled'">
+                            <fu-read-write-switch v-permission>
                                 <template #read>
                                     <MsgInfo :info="row.remark" :width="'150'" />
                                 </template>
                                 <template #default="{ read }">
-                                    <el-input
-                                        v-model="row.remark"
-                                        :disabled="!hasManagePermission"
-                                        @blur="updateRuntimeRemark(row, read)"
-                                    />
+                                    <el-input v-model="row.remark" @blur="updateRuntimeRemark(row, read)" />
                                 </template>
                             </fu-read-write-switch>
                         </template>
@@ -106,7 +102,6 @@
 
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import { Runtime } from '@/api/interface/runtime';
 import { RuntimeDeleteCheck, SearchRuntimes, SyncRuntime } from '@/api/modules/runtime';
 import { dateFormat } from '@/utils/date';
diff --git a/frontend/src/views/website/ssl/acme-account/index.vue b/frontend/src/views/website/ssl/acme-account/index.vue
index 8388466dfbff..f50e013bf254 100644
--- a/frontend/src/views/website/ssl/acme-account/index.vue
+++ b/frontend/src/views/website/ssl/acme-account/index.vue
@@ -6,7 +6,7 @@
             </div>
             <ComplexTable :data="data" :pagination-config="paginationConfig" v-loading="loading">
                 <template #toolbar>
-                    <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
+                    <el-button v-permission type="primary" @click="openCreate">
                         {{ $t('commons.button.create') }}
                     </el-button>
                 </template>
diff --git a/frontend/src/views/website/ssl/ca/index.vue b/frontend/src/views/website/ssl/ca/index.vue
index 90e0f8cddcd6..a19f5a0c8ce2 100644
--- a/frontend/src/views/website/ssl/ca/index.vue
+++ b/frontend/src/views/website/ssl/ca/index.vue
@@ -3,7 +3,7 @@
         <template #content>
             <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()" v-loading="loading">
                 <template #toolbar>
-                    <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
+                    <el-button v-permission type="primary" @click="openCreate">
                         {{ $t('commons.button.create') }}
                     </el-button>
                 </template>
@@ -40,13 +40,11 @@ import { Website } from '@/api/interface/website';
 import { deleteCA, searchCAs, downloadCAFile } from '@/api/modules/website';
 import i18n from '@/lang';
 import { reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import Create from './create/index.vue';
 import Detail from './detail/index.vue';
 import { getKeyName } from '@/utils/ssl';
 import { dateFormat } from '@/utils/date';
 import Obtain from './obtain/index.vue';
-const { hasManagePermission } = useMenuManagePermission();
 
 const open = ref(false);
 const loading = ref(false);
diff --git a/frontend/src/views/website/ssl/dns-account/index.vue b/frontend/src/views/website/ssl/dns-account/index.vue
index 378f7dda3f41..29c0420f22eb 100644
--- a/frontend/src/views/website/ssl/dns-account/index.vue
+++ b/frontend/src/views/website/ssl/dns-account/index.vue
@@ -3,7 +3,7 @@
         <template #content>
             <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()">
                 <template #toolbar>
-                    <el-button type="primary" :disabled="!hasManagePermission" @click="openCreate">
+                    <el-button v-permission type="primary" @click="openCreate">
                         {{ $t('commons.button.create') }}
                     </el-button>
                 </template>
@@ -37,10 +37,8 @@ import Create from './create/index.vue';
 import { Website } from '@/api/interface/website';
 import { deleteDnsAccount, searchDnsAccount } from '@/api/modules/website';
 import { onMounted, reactive, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { getDNSName } from '@/utils/ssl';
-const { hasManagePermission } = useMenuManagePermission();
 const paginationConfig = reactive({
     cacheSizeKey: 'dns-account-page-size',
     currentPage: 1,
@@ -55,7 +53,7 @@ const opRef = ref();
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: function (row: Website.DnsAccount) {
             openEdit(row);
         },
diff --git a/frontend/src/views/website/ssl/index.vue b/frontend/src/views/website/ssl/index.vue
index a5c6b54fbb44..9b0205484445 100644
--- a/frontend/src/views/website/ssl/index.vue
+++ b/frontend/src/views/website/ssl/index.vue
@@ -3,22 +3,22 @@
         <RouterButton :buttons="routerButton" />
         <LayoutContent :title="$t('website.ssl', 2)">
             <template #leftToolBar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="openSSL()">
+                <el-button v-permission type="primary" @click="openSSL()">
                     {{ $t('ssl.create') }}
                 </el-button>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="openUpload()">
+                <el-button v-permission type="primary" @click="openUpload()">
                     {{ $t('ssl.upload') }}
                 </el-button>
-                <el-button type="primary" plain :disabled="!hasManagePermission" @click="openCA()">
+                <el-button v-permission type="primary" plain @click="openCA()">
                     {{ $t('ssl.selfSigned') }}
                 </el-button>
-                <el-button type="primary" plain :disabled="!hasManagePermission" @click="openAcmeAccount()">
+                <el-button v-permission type="primary" plain @click="openAcmeAccount()">
                     {{ $t('website.acmeAccountManage') }}
                 </el-button>
-                <el-button type="primary" plain :disabled="!hasManagePermission" @click="openDnsAccount()">
+                <el-button v-permission type="primary" plain @click="openDnsAccount()">
                     {{ $t('website.dnsAccountManage') }}
                 </el-button>
-                <el-button plain @click="deletessl(null)" :disabled="selects.length === 0 || !hasManagePermission">
+                <el-button v-permission plain @click="deletessl(null)" :disabled="selects.length === 0">
                     {{ $t('commons.button.delete') }}
                 </el-button>
             </template>
@@ -117,16 +117,12 @@
                     ></el-table-column>
                     <el-table-column :label="$t('website.remark')" prop="description" width="100px">
                         <template #default="{ row }">
-                            <fu-read-write-switch :write-trigger="hasManagePermission ? 'onClick' : 'disabled'">
+                            <fu-read-write-switch v-permission>
                                 <template #read>
                                     <MsgInfo :info="row.description" width="200" />
                                 </template>
                                 <template #default="{ read }">
-                                    <el-input
-                                        v-model="row.description"
-                                        :disabled="!hasManagePermission"
-                                        @blur="updateDesc(row, read)"
-                                    />
+                                    <el-input v-model="row.description" @blur="updateDesc(row, read)" />
                                 </template>
                             </fu-read-write-switch>
                         </template>
@@ -134,8 +130,8 @@
                     <el-table-column :label="$t('ssl.autoRenew')" prop="autoRenew" width="200px">
                         <template #default="{ row }">
                             <el-switch
+                                v-permission
                                 :disabled="
-                                    !hasManagePermission ||
                                     row.provider === 'dnsManual' ||
                                     row.provider === 'manual' ||
                                     row.provider === 'fromMaster'
@@ -243,13 +239,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('ssl.apply'),
+        permission: true,
         disabled: function (row: Website.SSLDTO) {
-            return (
-                row.status === 'applying' ||
-                row.provider === 'manual' ||
-                row.provider === 'fromMaster' ||
-                !hasManagePermission.value
-            );
+            return row.status === 'applying' || row.provider === 'manual' || row.provider === 'fromMaster';
         },
         click: function (row: Website.SSLDTO) {
             if (row.provider === 'dnsManual') {
@@ -264,7 +256,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.update'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: function (row: Website.SSLDTO) {
             sslUploadRef.value.acceptParams(row);
         },
@@ -274,8 +266,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.edit'),
+        permission: true,
         disabled: function (row: Website.SSLDTO) {
-            return row.provider === 'fromMaster' || !hasManagePermission.value;
+            return row.provider === 'fromMaster';
         },
         click: function (row: Website.SSLDTO) {
             onEdit(row);
@@ -292,7 +285,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: function (row: Website.SSLDTO) {
             deletessl(row);
         },
diff --git a/frontend/src/views/website/website/config/basic/auth-basic/index.vue b/frontend/src/views/website/website/config/basic/auth-basic/index.vue
index 8d5c5dbbf8a5..006eb9846254 100644
--- a/frontend/src/views/website/website/config/basic/auth-basic/index.vue
+++ b/frontend/src/views/website/website/config/basic/auth-basic/index.vue
@@ -3,7 +3,7 @@
         <el-tab-pane :label="$t('website.global')">
             <ComplexTable :data="data" @search="search" v-loading="loading" :heightDiff="420">
                 <template #toolbar>
-                    <el-button type="primary" plain :disabled="!hasManagePermission" @click="openCreate('root')">
+                    <el-button v-permission type="primary" plain @click="openCreate('root')">
                         {{ $t('commons.button.create') }}
                     </el-button>
                     <el-switch
@@ -28,7 +28,7 @@
         <el-tab-pane :label="$t('website.path')" v-if="showPath">
             <ComplexTable :data="pathData" @search="searchPath" v-loading="loading" :heightDiff="420">
                 <template #toolbar>
-                    <el-button type="primary" plain :disabled="!hasManagePermission" @click="openCreate('path')">
+                    <el-button v-permission type="primary" plain @click="openCreate('path')">
                         {{ $t('commons.button.create') }}
                     </el-button>
                 </template>
@@ -89,7 +89,7 @@ const showPath = ref(false);
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: function (row: Website.NginxAuthConfig) {
             row.scope = 'root';
             openEdit(row);
@@ -106,7 +106,7 @@ const buttons = [
 const pathButtons = [
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: function (row: Website.NginxAuthConfig) {
             row.scope = 'path';
             openEdit(row);
diff --git a/frontend/src/views/website/website/config/basic/load-balance/index.vue b/frontend/src/views/website/website/config/basic/load-balance/index.vue
index 612bdc5e0917..de4499151773 100644
--- a/frontend/src/views/website/website/config/basic/load-balance/index.vue
+++ b/frontend/src/views/website/website/config/basic/load-balance/index.vue
@@ -2,7 +2,7 @@
     <div>
         <ComplexTable :data="data" @search="search" v-loading="loading" :heightDiff="420">
             <template #toolbar>
-                <el-button type="primary" plain :disabled="!hasManagePermission" @click="create()">
+                <el-button v-permission type="primary" plain @click="create()">
                     {{ $t('commons.button.create') }}
                 </el-button>
                 <el-alert :closable="false" class="!mt-2">
@@ -72,13 +72,11 @@
 <script setup lang="ts">
 import { deleteLoadBalance, getLoadBalances } from '@/api/modules/website';
 import { onMounted, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import Operate from './operate/index.vue';
 import i18n from '@/lang';
 import { Website } from '@/api/interface/website';
 import { getAlgorithms } from '@/global/mimetype';
 import File from './file/index.vue';
-const { hasManagePermission } = useMenuManagePermission();
 
 const props = defineProps({
     id: {
@@ -103,7 +101,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: (row: any) => {
             update(row);
         },
diff --git a/frontend/src/views/website/website/config/basic/proxy/index.vue b/frontend/src/views/website/website/config/basic/proxy/index.vue
index 1a8a84eb50f5..5fb3fd21236f 100644
--- a/frontend/src/views/website/website/config/basic/proxy/index.vue
+++ b/frontend/src/views/website/website/config/basic/proxy/index.vue
@@ -1,11 +1,11 @@
 <template>
     <ComplexTable :data="data" @search="search" v-loading="loading">
         <template #toolbar>
-            <el-button type="primary" plain :disabled="!hasManagePermission" @click="openCreate">
+            <el-button v-permission type="primary" plain @click="openCreate">
                 {{ $t('commons.button.create') }}
             </el-button>
-            <el-button :disabled="!hasManagePermission" @click="openCache">{{ $t('website.proxyCache') }}</el-button>
-            <el-button type="primary" :disabled="!hasManagePermission" @click="clear" link>
+            <el-button v-permission @click="openCache">{{ $t('website.proxyCache') }}</el-button>
+            <el-button v-permission type="primary" @click="clear" link>
                 {{ $t('nginx.clearProxyCache') }}
             </el-button>
         </template>
@@ -27,8 +27,8 @@
         <el-table-column :label="$t('commons.table.status')" prop="enable" width="100">
             <template #default="{ row }">
                 <Status
+                    v-permission
                     :status="row.enable ? 'enable' : 'disable'"
-                    :disabled="!hasManagePermission"
                     @click="opProxy(row)"
                     :operate="true"
                 />
@@ -54,7 +54,6 @@
 import { Website } from '@/api/interface/website';
 import { getProxyConfig, deleteProxyConfig, updateProxyConfigStatus, clearProxyCache } from '@/api/modules/website';
 import { computed, onMounted, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox } from 'element-plus';
@@ -95,8 +94,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.edit'),
+        permission: true,
         disabled: (row: Website.ProxyConfig) => {
-            return !row.enable || !hasManagePermission.value;
+            return !row.enable;
         },
         click: function (row: Website.ProxyConfig) {
             openEdit(row);
@@ -104,7 +104,7 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: function (row: Website.ProxyConfig) {
             deleteProxy(row);
         },
diff --git a/frontend/src/views/website/website/config/basic/redirect/index.vue b/frontend/src/views/website/website/config/basic/redirect/index.vue
index c4fe0e80c720..e3b71b508c07 100644
--- a/frontend/src/views/website/website/config/basic/redirect/index.vue
+++ b/frontend/src/views/website/website/config/basic/redirect/index.vue
@@ -1,7 +1,7 @@
 <template>
     <ComplexTable :data="data" @search="search" v-loading="loading">
         <template #toolbar>
-            <el-button type="primary" plain :disabled="!hasManagePermission" @click="openCreate">
+            <el-button v-permission type="primary" plain @click="openCreate">
                 {{ $t('commons.button.create') }}
             </el-button>
         </template>
@@ -52,7 +52,6 @@
 import { Website } from '@/api/interface/website';
 import { operateRedirectConfig, getRedirectConfig } from '@/api/modules/website';
 import { computed, onMounted, ref } from 'vue';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import Create from './create/index.vue';
 import File from './file/index.vue';
 import i18n from '@/lang';
@@ -90,8 +89,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('commons.button.edit'),
+        permission: true,
         disabled: (row: Website.ProxyConfig) => {
-            return !row.enable || !hasManagePermission.value;
+            return !row.enable;
         },
         click: function (row: Website.RedirectConfig) {
             openEdit(row);
diff --git a/frontend/src/views/website/website/index.vue b/frontend/src/views/website/website/index.vue
index 57f864af0be4..bb20ec4020f1 100644
--- a/frontend/src/views/website/website/index.vue
+++ b/frontend/src/views/website/website/index.vue
@@ -20,21 +20,16 @@
                 ></AppStatus>
             </template>
             <template v-if="!openNginxConfig && nginxIsExist" #leftToolBar>
-                <el-button type="primary" @click="openCreate" :disabled="disabledConfig || !hasManagePermission">
+                <el-button v-permission type="primary" @click="openCreate" :disabled="disabledConfig">
                     {{ $t('commons.button.create') }}
                 </el-button>
-                <el-button type="primary" plain @click="openGroup" :disabled="disabledConfig || !hasManagePermission">
+                <el-button v-permission type="primary" plain @click="openGroup" :disabled="disabledConfig">
                     {{ $t('commons.table.group') }}
                 </el-button>
-                <el-button type="primary" plain @click="openDefault" :disabled="disabledConfig || !hasManagePermission">
+                <el-button v-permission type="primary" plain @click="openDefault" :disabled="disabledConfig">
                     {{ $t('website.defaultServer') }}
                 </el-button>
-                <el-button
-                    type="primary"
-                    plain
-                    @click="openDefaultHtml"
-                    :disabled="disabledConfig || !hasManagePermission"
-                >
+                <el-button v-permission type="primary" plain @click="openDefaultHtml" :disabled="disabledConfig">
                     {{ $t('website.defaultHtml') }}
                 </el-button>
             </template>
@@ -127,8 +122,8 @@
                     <el-table-column :label="$t('website.sitePath')" prop="sitePath" width="90px">
                         <template #default="{ row }">
                             <el-button
+                                v-permission:view="'host_file_view'"
                                 type="primary"
-                                :disabled="!hasFilePermission"
                                 link
                                 @click="routerToFileWithPath(row.sitePath + '/index')"
                             >
@@ -154,7 +149,7 @@
                             <span v-else>
                                 <Status
                                     v-if="row.status === 'Running'"
-                                    :disabled="!hasManagePermission"
+                                    v-permission
                                     :operate="true"
                                     :status="row.status"
                                     @click="operateWebsite('stop', row)"
@@ -162,7 +157,7 @@
                                 <Status
                                     v-else
                                     :status="row.status"
-                                    :disabled="!hasManagePermission"
+                                    v-permission
                                     :operate="true"
                                     @click="operateWebsite('start', row)"
                                 />
@@ -220,16 +215,12 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.remark')" prop="remark" min-width="150px">
                         <template #default="{ row }">
-                            <fu-read-write-switch :write-trigger="hasManagePermission ? 'onClick' : 'disabled'">
+                            <fu-read-write-switch v-permission>
                                 <template #read>
                                     <MsgInfo :info="row.remark" :width="'150'" />
                                 </template>
                                 <template #default="{ read }">
-                                    <el-input
-                                        v-model="row.remark"
-                                        :disabled="!hasManagePermission"
-                                        @blur="updateRemark(row, read)"
-                                    />
+                                    <el-input v-model="row.remark" @blur="updateRemark(row, read)" />
                                 </template>
                             </fu-read-write-switch>
                         </template>
@@ -269,7 +260,8 @@
                             <el-button
                                 class="ml-2"
                                 type="primary"
-                                :disabled="selects.length == 0 || batchReq.operate == '' || !hasManagePermission"
+                                v-permission
+                                :disabled="selects.length == 0 || batchReq.operate == ''"
                                 @click="batchOp"
                             >
                                 {{ $t('website.batchOperate') }}
diff --git a/frontend/src/views/website/website/nginx/module/index.vue b/frontend/src/views/website/website/nginx/module/index.vue
index 1b458b81645c..a48e502d8b7c 100644
--- a/frontend/src/views/website/website/nginx/module/index.vue
+++ b/frontend/src/views/website/website/nginx/module/index.vue
@@ -2,10 +2,10 @@
     <div>
         <ComplexTable :data="data" @search="search()" :heightDiff="350" v-loading="loading">
             <template #toolbar>
-                <el-button type="primary" :disabled="!hasManagePermission" @click="openOperate">
+                <el-button v-permission type="primary" @click="openOperate">
                     {{ $t('commons.button.create') }}
                 </el-button>
-                <el-button type="primary" plain :disabled="!hasManagePermission" @click="buildNginx">
+                <el-button v-permission type="primary" plain @click="buildNginx">
                     {{ $t('nginx.build') }}
                 </el-button>
                 <el-text type="warning" class="!ml-2">{{ $t('nginx.buildHelper') }}</el-text>
@@ -14,7 +14,7 @@
             <el-table-column prop="params" :label="$t('nginx.params')" />
             <el-table-column :label="$t('commons.table.status')" fix>
                 <template #default="{ row }">
-                    <el-switch v-model="row.enable" :disabled="!hasManagePermission" @click="updateModule(row)" />
+                    <el-switch v-permission v-model="row.enable" @click="updateModule(row)" />
                 </template>
             </el-table-column>
             <fu-table-operations
@@ -33,27 +33,25 @@
 </template>
 <script lang="ts" setup>
 import { getNginxModules, updateNginxModule } from '@/api/modules/nginx';
-import { useMenuManagePermission } from '@/composables/useMenuManagePermission';
 import i18n from '@/lang';
 import { Nginx } from '@/api/interface/nginx';
 import { MsgSuccess } from '@/utils/message';
 import Operate from './operate/index.vue';
 import Build from './build/index.vue';
-const { hasManagePermission } = useMenuManagePermission();
 
 const data = ref([]);
 const loading = ref(false);
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: function (row: Nginx.NginxModule) {
             openEdit(row);
         },
     },
     {
         label: i18n.global.t('commons.button.delete'),
-        disabled: () => !hasManagePermission.value,
+        permission: true,
         click: function (row: Nginx.NginxModule) {
             deleteModule(row);
         },

From 543355f73beac10a79d6621b90d0f3368a53a4d9 Mon Sep 17 00:00:00 2001
From: ssongliu <sloooop1x@gmail.com>
Date: Wed, 13 May 2026 12:03:33 +0800
Subject: [PATCH 3/3] refactor frontend global store usage

---
 frontend/src/App.vue                          |  24 ++--
 frontend/src/api/helper/check-status.ts       |   8 +-
 frontend/src/api/index.ts                     |  34 +++---
 frontend/src/api/modules/backup.ts            |  11 +-
 .../src/components/complex-table/index.vue    |   9 +-
 frontend/src/components/drawer-pro/index.vue  |  17 ++-
 .../src/components/license-import/index.vue   |  16 +--
 frontend/src/components/log/compose/index.vue |  12 +-
 .../components/log/container-drawer/index.vue |  14 +--
 .../src/components/log/container/index.vue    |   8 +-
 .../src/components/log/file-drawer/index.vue  |  12 +-
 frontend/src/components/log/file/index.vue    |   8 +-
 frontend/src/components/port-jump/index.vue   |   8 +-
 .../src/components/system-upgrade/index.vue   |  26 ++--
 .../system-upgrade/upgrade/index.vue          |   8 +-
 frontend/src/components/task-list/index.vue   |   6 +-
 frontend/src/components/terminal/index.vue    |   7 +-
 .../components/v-charts/components/Line.vue   |   8 +-
 .../components/v-charts/components/Pie.vue    |   8 +-
 frontend/src/components/vscode-open/index.vue |  12 +-
 .../composables/useMenuManagePermission.ts    |   6 +-
 frontend/src/edition/community/index.ts       |   9 --
 frontend/src/edition/load.ts                  |  17 ---
 frontend/src/edition/provider.ts              |   7 --
 frontend/src/global/use-logo.ts               |  28 ++---
 frontend/src/global/use-theme.ts              |  18 +--
 frontend/src/layout/components/AppFooter.vue  |   7 +-
 .../Sidebar/components/Collapse.vue           |  35 +++---
 .../components/Sidebar/components/Logo.vue    |   8 +-
 .../Sidebar/components/user-info/index.vue    |  14 +--
 .../src/layout/components/Sidebar/index.vue   |  13 +-
 frontend/src/layout/hooks/useResize.ts        |   4 +-
 frontend/src/layout/index.vue                 |  67 ++++++-----
 frontend/src/main.ts                          |   2 +-
 frontend/src/routers/index.ts                 |  31 ++---
 frontend/src/routers/modules/container.ts     |   1 +
 frontend/src/routers/modules/cronjob.ts       |   1 +
 frontend/src/routers/modules/database.ts      |   1 +
 frontend/src/routers/modules/website.ts       |   1 +
 frontend/src/store/modules/global.ts          |  15 +--
 frontend/src/utils/app.ts                     |   3 +-
 frontend/src/utils/auth-response.ts           |   8 +-
 frontend/src/utils/node.ts                    |  26 ++--
 frontend/src/utils/permission.ts              |  11 +-
 frontend/src/utils/rbac.ts                    |  19 +--
 frontend/src/utils/stream-auth.ts             |   8 +-
 frontend/src/utils/xpack.ts                   | 112 +++++++++---------
 .../ai/agents/agent/components/terminal.vue   |   4 +-
 frontend/src/views/ai/agents/agent/index.vue  |   8 +-
 .../src/views/ai/model/ollama/conn/index.vue  |   8 +-
 .../src/views/app-store/detail/form/index.vue |   8 +-
 .../views/app-store/installed/app/header.vue  |   6 +-
 .../src/views/app-store/setting/index.vue     |   8 +-
 .../src/views/container/compose/index.vue     |  10 +-
 .../src/views/container/container/index.vue   |  14 +--
 .../container/container/operate/index.vue     |   6 +-
 .../src/views/container/setting/index.vue     |  10 +-
 .../views/container/setting/ipv6/index.vue    |   8 +-
 .../views/cronjob/cronjob/backup/index.vue    |   6 +-
 .../views/cronjob/cronjob/operate/index.vue   |  16 ++-
 frontend/src/views/cronjob/library/index.vue  |  10 +-
 .../src/views/cronjob/library/run/index.vue   |   6 +-
 .../src/views/database/mongodb/conn/index.vue |   6 +-
 frontend/src/views/database/mongodb/index.vue |  22 ++--
 .../src/views/database/mysql/conn/index.vue   |   6 +-
 frontend/src/views/database/mysql/index.vue   |  18 ++-
 .../views/database/postgresql/conn/index.vue  |   6 +-
 .../src/views/database/postgresql/index.vue   |  18 ++-
 .../src/views/database/redis/conn/index.vue   |   6 +-
 frontend/src/views/database/redis/index.vue   |  14 +--
 frontend/src/views/home/app/index.vue         |   4 +-
 frontend/src/views/home/index.vue             |  59 ++++-----
 .../ai-search/file-ai-search-drawer.vue       |   4 +-
 .../host/file-management/compress/index.vue   |   8 +-
 .../host/file-management/convert/index.vue    |   6 +-
 .../host/file-management/decompress/index.vue |   8 +-
 .../src/views/host/file-management/index.vue  |  31 +++--
 .../host/file-management/process/index.vue    |   6 +-
 .../host/file-management/share/index.vue      |   8 +-
 .../file-management/text-preview/index.vue    |   6 +-
 .../src/views/host/monitor/monitor/index.vue  |  11 +-
 .../host/monitor/setting/default-io/index.vue |   6 +-
 .../monitor/setting/default-network/index.vue |   6 +-
 .../src/views/host/process/network/index.vue  |   7 +-
 .../src/views/host/process/process/index.vue  |   7 +-
 frontend/src/views/host/ssh/log/log.vue       |   6 +-
 frontend/src/views/host/ssh/session/index.vue |   6 +-
 frontend/src/views/log/operation/index.vue    |  18 +--
 frontend/src/views/log/system/index.vue       |  11 +-
 .../src/views/login/components/login-form.vue |  94 ++++++++-------
 frontend/src/views/login/index.vue            |  16 ++-
 frontend/src/views/setting/about/index.vue    |  10 +-
 .../src/views/setting/alert/dash/index.vue    |   9 +-
 .../src/views/setting/alert/setting/index.vue |  10 +-
 .../setting/backup-account/operate/index.vue  |  15 +--
 .../views/setting/license-required/index.vue  |  56 +++++----
 .../src/views/setting/license/bind/xpack.vue  |   6 +-
 frontend/src/views/setting/license/index.vue  |   4 +-
 .../src/views/setting/panel/edition/index.vue |   8 +-
 .../views/setting/panel/hidemenu/index.vue    |   6 +-
 frontend/src/views/setting/panel/index.vue    |  69 +++++------
 .../src/views/setting/panel/name/index.vue    |   9 +-
 .../src/views/setting/panel/proxy/index.vue   |   8 +-
 .../views/setting/panel/theme-color/index.vue |  16 +--
 .../views/setting/panel/watermark/index.vue   |  14 +--
 .../src/views/setting/safe/bind/index.vue     |  10 +-
 .../src/views/setting/safe/entrance/index.vue |  10 +-
 frontend/src/views/setting/safe/index.vue     |  10 +-
 .../src/views/setting/safe/port/index.vue     |  13 +-
 frontend/src/views/setting/safe/ssl/index.vue |  10 +-
 .../views/setting/snapshot/import/index.vue   |   6 +-
 .../src/views/terminal/terminal/index.vue     |  23 ++--
 frontend/src/views/toolbox/clam/index.vue     |  10 +-
 .../src/views/toolbox/clam/operate/index.vue  |  18 ++-
 .../views/toolbox/device/time-zone/index.vue  |   8 +-
 frontend/src/views/toolbox/fail2ban/index.vue |   8 +-
 frontend/src/views/toolbox/ftp/index.vue      |   8 +-
 frontend/src/views/toolbox/index.vue          |   8 +-
 .../views/toolbox/supervisor/file/index.vue   |   6 +-
 .../src/views/toolbox/supervisor/index.vue    |  10 +-
 .../views/toolbox/supervisor/log/index.vue    |   6 +-
 .../views/toolbox/supervisor/status/index.vue |  12 +-
 .../website/runtime/components/terminal.vue   |   6 +-
 .../website/runtime/php/create/index.vue      |  14 +--
 .../php/extension-template/operate/index.vue  |   8 +-
 .../src/views/website/ssl/create/index.vue    |   6 +-
 126 files changed, 826 insertions(+), 904 deletions(-)
 delete mode 100644 frontend/src/edition/community/index.ts
 delete mode 100644 frontend/src/edition/load.ts
 delete mode 100644 frontend/src/edition/provider.ts

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7abba6f42bde..7316b9586ba7 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import { reactive, computed, ref, nextTick, provide } from 'vue';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import zhCn from 'element-plus/es/locale/lang/zh-cn';
 import zhTw from 'element-plus/es/locale/lang/zh-tw';
 import en from 'element-plus/es/locale/lang/en';
@@ -20,22 +20,22 @@ import esES from 'element-plus/es/locale/lang/es';
 import { useTheme } from '@/global/use-theme';
 useTheme();
 
-const globalStore = GlobalStore();
+const { language } = useGlobalStore();
 const config = reactive({
     autoInsertSpace: false,
 });
 
 const i18nLocale = computed(() => {
-    if (globalStore.language === 'zh') return zhCn;
-    if (globalStore.language === 'zh-Hant') return zhTw;
-    if (globalStore.language === 'en') return en;
-    if (globalStore.language === 'ja') return ja;
-    if (globalStore.language === 'ms') return ms;
-    if (globalStore.language === 'ru') return ru;
-    if (globalStore.language === 'pt-BR') return ptBR;
-    if (globalStore.language === 'ko') return ko;
-    if (globalStore.language === 'tr') return tr;
-    if (globalStore.language === 'es-ES') return esES;
+    if (language.value === 'zh') return zhCn;
+    if (language.value === 'zh-Hant') return zhTw;
+    if (language.value === 'en') return en;
+    if (language.value === 'ja') return ja;
+    if (language.value === 'ms') return ms;
+    if (language.value === 'ru') return ru;
+    if (language.value === 'pt-BR') return ptBR;
+    if (language.value === 'ko') return ko;
+    if (language.value === 'tr') return tr;
+    if (language.value === 'es-ES') return esES;
     return zhCn;
 });
 
diff --git a/frontend/src/api/helper/check-status.ts b/frontend/src/api/helper/check-status.ts
index e61aac37df30..5cd2b61e1cfe 100644
--- a/frontend/src/api/helper/check-status.ts
+++ b/frontend/src/api/helper/check-status.ts
@@ -1,10 +1,10 @@
 import i18n from '@/lang';
 import router from '@/routers';
 import { MsgError } from '@/utils/message';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
 export const checkStatus = (status: number, msg: string): void => {
-    const globalStore = GlobalStore();
+    const { entrance, isLogin } = useGlobalStore();
     switch (status) {
         case 400:
             MsgError(msg ? msg : i18n.global.t('commons.res.paramError'));
@@ -13,8 +13,8 @@ export const checkStatus = (status: number, msg: string): void => {
             MsgError(msg ? msg : i18n.global.t('commons.res.notFound'));
             break;
         case 403:
-            globalStore.isLogin = false;
-            router.replace({ name: 'entrance', params: { code: globalStore.entrance } });
+            isLogin.value = false;
+            router.replace({ name: 'entrance', params: { code: entrance.value } });
             MsgError(msg ? msg : i18n.global.t('commons.res.forbidden'));
             break;
         case 500:
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index 491f54369de3..e0a2be69494c 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -3,7 +3,7 @@ import { ResultData } from '@/api/interface';
 import { ResultEnum } from '@/enums/http-enum';
 import { checkStatus } from './helper/check-status';
 import router from '@/routers';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { MsgError } from '@/utils/message';
 import { encodeBase64 } from '@/utils/base64';
 import i18n from '@/lang';
@@ -11,8 +11,6 @@ import { changeToLocal } from '@/utils/node';
 import { getCookie } from '@/utils/auth';
 import { handleAuthResponseCode } from '@/utils/auth-response';
 
-const getGlobalStore = () => GlobalStore();
-
 const config = {
     baseURL: import.meta.env.VITE_API_URL as string,
     timeout: ResultEnum.TIMEOUT as number,
@@ -30,14 +28,13 @@ class RequestHttp {
         this.service = axios.create(config);
         this.service.interceptors.request.use(
             (config: AxiosRequestConfig) => {
-                const globalStore = getGlobalStore();
-                let language = globalStore.language;
+                const { csrfToken: csrfTokenRef, currentNode, entrance, language } = useGlobalStore();
                 config.headers = {
-                    'Accept-Language': language,
+                    'Accept-Language': language.value,
                     ...config.headers,
                 };
                 if (config.headers.CurrentNode == undefined) {
-                    config.headers.CurrentNode = encodeURIComponent(globalStore.currentNode);
+                    config.headers.CurrentNode = encodeURIComponent(currentNode.value);
                 } else {
                     config.headers.CurrentNode = encodeURIComponent(String(config.headers.CurrentNode));
                 }
@@ -47,8 +44,7 @@ class RequestHttp {
                     config.url === '/core/auth/passkey/begin' ||
                     config.url === '/core/auth/passkey/finish'
                 ) {
-                    let entrance = encodeBase64(globalStore.entrance);
-                    config.headers.EntranceCode = entrance;
+                    config.headers.EntranceCode = encodeBase64(entrance.value);
                 }
                 const method = (config.method || 'get').toUpperCase();
                 const requiresToken = !['GET', 'HEAD', 'OPTIONS', 'TRACE'].includes(method);
@@ -56,7 +52,7 @@ class RequestHttp {
                     const csrfToken = getCookie('pcsrftoken');
                     if (csrfToken) {
                         config.headers['X-CSRF-Token'] = csrfToken;
-                        globalStore.csrfToken = csrfToken;
+                        csrfTokenRef.value = csrfToken;
                     }
                 }
                 return {
@@ -70,7 +66,7 @@ class RequestHttp {
 
         this.service.interceptors.response.use(
             (response: AxiosResponse) => {
-                const globalStore = getGlobalStore();
+                const { isEnterpriseLicensed, isLoading, isLogin, isProductPro, loadingText } = useGlobalStore();
                 const { data } = response;
                 const authResult = handleAuthResponseCode(data, { showRBACMessage: true });
                 if (authResult.handled) {
@@ -80,14 +76,14 @@ class RequestHttp {
                     return Promise.reject(data);
                 }
                 if (data.code == ResultEnum.ERR_XPACK) {
-                    globalStore.isProductPro = false;
+                    isProductPro.value = false;
                     window.location.reload();
                     return Promise.reject(data);
                 }
                 if (data.code == ResultEnum.ERR_ENTERPRISE) {
-                    globalStore.isEnterpriseLicensed = false;
+                    isEnterpriseLicensed.value = false;
                     const routeName = router.currentRoute.value.name;
-                    if (globalStore.isLogin && routeName !== 'EnterpriseLicenseRequired') {
+                    if (isLogin.value && routeName !== 'EnterpriseLicenseRequired') {
                         router.push({ name: 'EnterpriseLicenseRequired' });
                     }
                     return Promise.reject(data);
@@ -98,14 +94,12 @@ class RequestHttp {
                     return;
                 }
                 if (data.code == ResultEnum.ERR_GLOBAL_LOADING) {
-                    globalStore.$patch({
-                        isLoading: true,
-                        loadingText: data.message,
-                    });
+                    isLoading.value = true;
+                    loadingText.value = data.message;
                     return;
                 } else {
-                    if (globalStore.isLoading) {
-                        globalStore.isLoading = false;
+                    if (isLoading.value) {
+                        isLoading.value = false;
                     }
                 }
                 if (data.code == ResultEnum.ERR_AUTH) {
diff --git a/frontend/src/api/modules/backup.ts b/frontend/src/api/modules/backup.ts
index 4a44c38e56e2..de6424bc4781 100644
--- a/frontend/src/api/modules/backup.ts
+++ b/frontend/src/api/modules/backup.ts
@@ -4,8 +4,7 @@ import { encodeBase64Fields } from '@/utils/base64';
 import { ResPage } from '../interface';
 import { Backup } from '../interface/backup';
 import { TimeoutEnum } from '@/enums/http-enum';
-import { GlobalStore } from '@/store';
-const getGlobalStore = () => GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
 // backup-agent
 export const getLocalBackupDir = (node?: string) => {
@@ -16,19 +15,19 @@ export const searchBackup = (params: Backup.SearchWithType) => {
     return http.post<ResPage<Backup.BackupInfo>>(`/backups/search`, params);
 };
 export const checkBackup = (params: Backup.BackupOperate) => {
-    const globalStore = getGlobalStore();
+    const { isProductPro } = useGlobalStore();
     let request = deepCopy(params) as Backup.BackupOperate;
     encodeBase64Fields(request, ['accessKey', 'credential']);
-    if (!params.isPublic || !globalStore.isProductPro) {
+    if (!params.isPublic || !isProductPro.value) {
         return http.postLocalNode<Backup.CheckResult>(`/backups/conn/check`, request);
     }
     return http.post<Backup.CheckResult>(`/backups/conn/check`, request);
 };
 export const listBucket = (params: Backup.ForBucket) => {
-    const globalStore = getGlobalStore();
+    const { isProductPro } = useGlobalStore();
     let request = deepCopy(params) as Backup.BackupOperate;
     encodeBase64Fields(request, ['accessKey', 'credential']);
-    if (!params.isPublic || !globalStore.isProductPro) {
+    if (!params.isPublic || !isProductPro.value) {
         return http.postLocalNode('/backups/buckets', request, TimeoutEnum.T_40S);
     }
     return http.post('/backups/buckets', request, TimeoutEnum.T_40S);
diff --git a/frontend/src/components/complex-table/index.vue b/frontend/src/components/complex-table/index.vue
index b9279281799e..0fd757d3fe4f 100644
--- a/frontend/src/components/complex-table/index.vue
+++ b/frontend/src/components/complex-table/index.vue
@@ -75,11 +75,10 @@
 </template>
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
-import { GlobalStore } from '@/store';
-const slots = useSlots();
 import { useGlobalStore } from '@/composables/useGlobalStore';
+const slots = useSlots();
 
-const { isMobile } = useGlobalStore();
+const { isMobile, openMenuTabs } = useGlobalStore();
 
 defineOptions({ name: 'ComplexTable' });
 export interface DropdownProps {
@@ -108,7 +107,7 @@ const props = defineProps({
     },
 });
 const emit = defineEmits(['search', 'update:selects', 'update:paginationConfig']);
-const globalStore = GlobalStore();
+
 const tableRef = ref();
 const tableHeight = ref<number | string>('');
 const menuRef = ref<HTMLElement | null>(null);
@@ -280,7 +279,7 @@ defineExpose({
 
 function calcHeight() {
     let heightDiff = props.heightDiff ?? 320;
-    let tabHeight = globalStore.openMenuTabs ? 48 : 0;
+    let tabHeight = openMenuTabs.value ? 48 : 0;
 
     if (props.height) {
         tableHeight.value = props.height - tabHeight;
diff --git a/frontend/src/components/drawer-pro/index.vue b/frontend/src/components/drawer-pro/index.vue
index 1291b0fe7317..7fb12a8d435b 100644
--- a/frontend/src/components/drawer-pro/index.vue
+++ b/frontend/src/components/drawer-pro/index.vue
@@ -59,9 +59,8 @@
 import { computed, useSlots, ref } from 'vue';
 defineOptions({ name: 'DrawerPro' });
 import i18n from '@/lang';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
-const drawerContent = ref();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { isFullScreen } = useGlobalStore();
 
 const isFull = ref();
 
@@ -132,7 +131,7 @@ const handleBack = () => {
                 props.back();
             } else {
                 localOpenPage.value = false;
-                globalStore.isFullScreen = false;
+                isFullScreen.value = false;
             }
         };
         emit('beforeClose', done);
@@ -141,14 +140,14 @@ const handleBack = () => {
             props.back();
         } else {
             localOpenPage.value = false;
-            globalStore.isFullScreen = false;
+            isFullScreen.value = false;
         }
     }
 };
 
 const handleClose = () => {
     localOpenPage.value = false;
-    globalStore.isFullScreen = false;
+    isFullScreen.value = false;
     emit('close');
 };
 
@@ -161,10 +160,10 @@ const beforeClose = (done: () => void) => {
 };
 
 function toggleFullscreen() {
-    globalStore.isFullScreen = !globalStore.isFullScreen;
-    isFull.value = globalStore.isFullScreen;
+    isFullScreen.value = !isFullScreen.value;
+    isFull.value = isFullScreen.value;
 }
 const loadTooltip = () => {
-    return i18n.global.t('commons.button.' + (globalStore.isFullScreen ? 'quitFullscreen' : 'fullscreen'));
+    return i18n.global.t('commons.button.' + (isFullScreen.value ? 'quitFullscreen' : 'fullscreen'));
 };
 </script>
diff --git a/frontend/src/components/license-import/index.vue b/frontend/src/components/license-import/index.vue
index ec9629a05893..7fefabd04b97 100644
--- a/frontend/src/components/license-import/index.vue
+++ b/frontend/src/components/license-import/index.vue
@@ -61,10 +61,10 @@ import { ref } from 'vue';
 import { MsgSuccess } from '@/utils/message';
 import { uploadLicense, uploadEnterpriseLicense } from '@/api/modules/setting';
 import DockerProxy from '@/components/docker-proxy/index.vue';
-import { GlobalStore } from '@/store';
 import { UploadFile, UploadFiles, UploadInstance, UploadProps, UploadRawFile, genFileId } from 'element-plus';
 import { getXpackSettingForTheme, loadMasterProductProFromDB, loadProductProFromDB } from '@/utils/xpack';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { isIntl, isEnterprise, currentNode, isProductPro, isMasterProductPro, isEnterpriseLicensed } = useGlobalStore();
 
 const em = defineEmits(['search']);
 
@@ -112,7 +112,7 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
 };
 
 const toLxware = () => {
-    if (!globalStore.isIntl) {
+    if (!isIntl.value) {
         window.open('https://www.lxware.cn/1panel' + '', '_blank', 'noopener,noreferrer');
     } else {
         window.open('https://1panel.pro/pricing' + '', '_blank', 'noopener,noreferrer');
@@ -126,7 +126,7 @@ const submit = async () => {
     const file = uploaderFiles.value[0];
     const formData = new FormData();
     formData.append('file', file.raw);
-    if (globalStore.isEnterprise) {
+    if (isEnterprise.value) {
         loading.value = true;
         await uploadEnterpriseLicense(formData)
             .then(async () => {
@@ -143,7 +143,7 @@ const submit = async () => {
         formData.append('oldLicenseName', oldLicense.value);
     }
     if (!isImport.value) {
-        formData.append('currentNode', globalStore.currentNode);
+        formData.append('currentNode', currentNode.value);
         formData.append('withDockerRestart', withDockerRestart.value);
     }
     formData.append('isForce', isForce.value);
@@ -166,10 +166,10 @@ const handleAfterSubmit = () => {
     open.value = false;
     MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
     if (!isImport.value) {
-        if (!globalStore.isEnterprise) globalStore.isProductPro = true;
-        globalStore.isMasterProductPro = true;
+        if (!isEnterprise.value) isProductPro.value = true;
+        isMasterProductPro.value = true;
     } else {
-        globalStore.isEnterpriseLicensed = true;
+        isEnterpriseLicensed.value = true;
     }
     if (!withoutReload.value) {
         loadMasterProductProFromDB();
diff --git a/frontend/src/components/log/compose/index.vue b/frontend/src/components/log/compose/index.vue
index 0af49a0eb2a3..90ee7cf1845e 100644
--- a/frontend/src/components/log/compose/index.vue
+++ b/frontend/src/components/log/compose/index.vue
@@ -3,7 +3,7 @@
         v-model="open"
         :header="resource"
         @close="handleClose"
-        :size="globalStore.isFullScreen ? 'full' : '60%'"
+        :size="isFullScreen ? 'full' : '60%'"
         :resource="container"
     >
         <template #extra v-if="!isMobile">
@@ -26,16 +26,14 @@
 <script lang="ts" setup>
 import i18n from '@/lang';
 import { onBeforeUnmount, ref, watch } from 'vue';
-import { GlobalStore } from '@/store';
 import screenfull from 'screenfull';
 import ContainerLog from '@/components/log/container/index.vue';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const { isMobile } = useGlobalStore();
+const { isMobile, isFullScreen } = useGlobalStore();
 const open = ref(false);
 const resource = ref('');
 const container = ref('');
-const globalStore = GlobalStore();
 const logVisible = ref(false);
 const compose = ref('');
 const highlightDiff = ref(150);
@@ -57,14 +55,14 @@ const defaultProps = defineProps({
 
 const handleClose = () => {
     open.value = false;
-    globalStore.isFullScreen = false;
+    isFullScreen.value = false;
 };
 
 function toggleFullscreen() {
-    globalStore.isFullScreen = !globalStore.isFullScreen;
+    isFullScreen.value = !isFullScreen.value;
 }
 const loadTooltip = () => {
-    return i18n.global.t('commons.button.' + (globalStore.isFullScreen ? 'quitFullscreen' : 'fullscreen'));
+    return i18n.global.t('commons.button.' + (isFullScreen.value ? 'quitFullscreen' : 'fullscreen'));
 };
 
 watch(logVisible, (val) => {
diff --git a/frontend/src/components/log/container-drawer/index.vue b/frontend/src/components/log/container-drawer/index.vue
index 2da3ec6cdbd8..d878e77c2fb3 100644
--- a/frontend/src/components/log/container-drawer/index.vue
+++ b/frontend/src/components/log/container-drawer/index.vue
@@ -4,7 +4,7 @@
         :header="$t('commons.button.log')"
         @close="handleClose"
         :resource="logSearch.container"
-        :size="globalStore.isFullScreen ? 'full' : '60%'"
+        :size="isFullScreen ? 'full' : '60%'"
     >
         <template #extra v-if="!isMobile">
             <el-tooltip :content="loadTooltip()" placement="top">
@@ -26,14 +26,12 @@
 import i18n from '@/lang';
 import { onBeforeUnmount, reactive, ref, watch } from 'vue';
 import screenfull from 'screenfull';
-import { GlobalStore } from '@/store';
 import ContainerLog from '@/components/log/container/index.vue';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const { isMobile } = useGlobalStore();
+const { isMobile, isFullScreen } = useGlobalStore();
 
 const logVisible = ref(false);
-const globalStore = GlobalStore();
 const logSearch = reactive({
     isWatch: true,
     container: '',
@@ -50,16 +48,16 @@ defineProps({
 });
 
 function toggleFullscreen() {
-    globalStore.isFullScreen = !globalStore.isFullScreen;
+    isFullScreen.value = !isFullScreen.value;
 }
 
 const loadTooltip = () => {
-    return i18n.global.t('commons.button.' + (globalStore.isFullScreen ? 'quitFullscreen' : 'fullscreen'));
+    return i18n.global.t('commons.button.' + (isFullScreen.value ? 'quitFullscreen' : 'fullscreen'));
 };
 
 const handleClose = async () => {
     logVisible.value = false;
-    globalStore.isFullScreen = false;
+    isFullScreen.value = false;
 };
 
 watch(logVisible, (val) => {
@@ -84,7 +82,7 @@ const acceptParams = (props: DialogProps): void => {
 
     if (!isMobile.value) {
         screenfull.on('change', () => {
-            globalStore.isFullScreen = screenfull.isFullscreen;
+            isFullScreen.value = screenfull.isFullscreen;
         });
     }
 };
diff --git a/frontend/src/components/log/container/index.vue b/frontend/src/components/log/container/index.vue
index a865b2fca228..59324662a5c4 100644
--- a/frontend/src/components/log/container/index.vue
+++ b/frontend/src/components/log/container/index.vue
@@ -79,9 +79,9 @@ import { dateFormatForName } from '@/utils/date';
 import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
 import { ElMessageBox } from 'element-plus';
 import { MsgError, MsgSuccess } from '@/utils/message';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { checkStreamAuth } from '@/utils/stream-auth';
-const globalStore = GlobalStore();
+const { currentNode: globalCurrentNode } = useGlobalStore();
 
 const em = defineEmits(['update:loading']);
 
@@ -239,7 +239,7 @@ const searchLogs = async () => {
     stopListening();
     clearTerminal();
 
-    let currentNode = globalStore.currentNode;
+    let currentNode = globalCurrentNode.value;
     if (props.node && props.node !== '') {
         currentNode = props.node;
     }
@@ -311,7 +311,7 @@ const onClean = async () => {
         cancelButtonText: i18n.global.t('commons.button.cancel'),
         type: 'info',
     }).then(async () => {
-        let currentNode = globalStore.currentNode;
+        let currentNode = globalCurrentNode.value;
         if (props.node && props.node !== '') {
             currentNode = props.node;
         }
diff --git a/frontend/src/components/log/file-drawer/index.vue b/frontend/src/components/log/file-drawer/index.vue
index 54b63b48a4b1..b27dc5056951 100644
--- a/frontend/src/components/log/file-drawer/index.vue
+++ b/frontend/src/components/log/file-drawer/index.vue
@@ -3,7 +3,7 @@
         v-model="open"
         :header="$t('commons.button.log')"
         @close="handleClose"
-        :size="globalStore.isFullScreen ? 'full' : 'large'"
+        :size="isFullScreen ? 'full' : 'large'"
     >
         <template #extra v-if="!isMobile">
             <el-tooltip :content="loadTooltip()" placement="top">
@@ -18,14 +18,12 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import LogFile from '@/components/log/file/index.vue';
-import { GlobalStore } from '@/store';
 import i18n from '@/lang';
 import screenfull from 'screenfull';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const { isMobile } = useGlobalStore();
+const { isMobile, isFullScreen } = useGlobalStore();
 
-const globalStore = GlobalStore();
 interface LogProps {
     id: number;
     type: string;
@@ -50,15 +48,15 @@ const em = defineEmits(['close']);
 
 const handleClose = () => {
     open.value = false;
-    globalStore.isFullScreen = false;
+    isFullScreen.value = false;
     em('close', false);
 };
 
 function toggleFullscreen() {
-    globalStore.isFullScreen = !globalStore.isFullScreen;
+    isFullScreen.value = !isFullScreen.value;
 }
 const loadTooltip = () => {
-    return i18n.global.t('commons.button.' + (globalStore.isFullScreen ? 'quitFullscreen' : 'fullscreen'));
+    return i18n.global.t('commons.button.' + (isFullScreen.value ? 'quitFullscreen' : 'fullscreen'));
 };
 
 watch(open, (val) => {
diff --git a/frontend/src/components/log/file/index.vue b/frontend/src/components/log/file/index.vue
index f8f0ae4ca69d..aa10c9d1a24a 100644
--- a/frontend/src/components/log/file/index.vue
+++ b/frontend/src/components/log/file/index.vue
@@ -53,10 +53,10 @@ import { nextTick, onMounted, onUnmounted, reactive, ref, computed } from 'vue';
 import { downloadFile } from '@/utils/file';
 import { readByLine } from '@/api/modules/files';
 import { readTaskLogByLine } from '@/api/modules/log';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import bus from '@/global/bus';
 import Highlight from '@/components/log/custom-highlight/index.vue';
-const globalStore = GlobalStore();
+const { currentNode } = useGlobalStore();
 
 interface LogProps {
     id?: number;
@@ -233,7 +233,7 @@ const changeLoading = () => {
 
 const onDownload = async () => {
     changeLoading();
-    downloadFile(logPath.value, props.config.operateNode || globalStore.currentNode);
+    downloadFile(logPath.value, props.config.operateNode || currentNode.value);
     changeLoading();
 };
 
@@ -269,7 +269,7 @@ const getContent = async (pre: boolean) => {
 
     let res;
     try {
-        const operateNode = props.config.operateNode || globalStore.currentNode;
+        const operateNode = props.config.operateNode || currentNode.value;
         if (readReq.type === 'task') {
             res = await readTaskLogByLine(readReq, operateNode);
         } else {
diff --git a/frontend/src/components/port-jump/index.vue b/frontend/src/components/port-jump/index.vue
index c6a7f3088a9e..bb9c996b0920 100644
--- a/frontend/src/components/port-jump/index.vue
+++ b/frontend/src/components/port-jump/index.vue
@@ -21,8 +21,8 @@ import i18n from '@/lang';
 import { MsgError, MsgWarning } from '@/utils/message';
 import { jumpToPath } from '@/utils/router';
 import { useRouter } from 'vue-router';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { currentNodeAddr, isMaster } = useGlobalStore();
 const router = useRouter();
 
 const open = ref();
@@ -44,8 +44,8 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
     let protocol = params.protocol === 'https' ? 'https' : 'http';
     const res = await getAgentSettingInfo();
     if (!res.data.systemIP) {
-        if (!globalStore.isMaster || globalStore.currentNodeAddr != '127.0.0.1') {
-            res.data.systemIP = globalStore.currentNodeAddr;
+        if (!isMaster.value || currentNodeAddr.value != '127.0.0.1') {
+            res.data.systemIP = currentNodeAddr.value;
         } else {
             open.value = true;
             return;
diff --git a/frontend/src/components/system-upgrade/index.vue b/frontend/src/components/system-upgrade/index.vue
index afb53dbd3811..6d7450209911 100644
--- a/frontend/src/components/system-upgrade/index.vue
+++ b/frontend/src/components/system-upgrade/index.vue
@@ -18,7 +18,7 @@
                 </span>
                 <div class="flex flex-wrap items-center">
                     <el-link underline="never" type="primary" @click="toLxware">
-                        <span v-if="isEnterprise">
+                        <span v-if="isEE">
                             {{ $t('license.ee') }}
                         </span>
                         <span v-else-if="isMasterPro">
@@ -36,9 +36,9 @@
                     </el-link>
                     <el-badge
                         is-dot
-                        v-if="globalStore.isAdmin && !globalStore.isOffline"
+                        v-if="isAdmin && !isOffline"
                         class="-mt-0.5"
-                        :hidden="version === 'Waiting' || !globalStore.hasNewVersion"
+                        :hidden="version === 'Waiting' || !hasNewVersion"
                     >
                         <el-link class="ml-2" underline="never" type="primary" @click="onLoadUpgradeInfo">
                             {{ $t('commons.button.update') }}
@@ -61,19 +61,11 @@ import Releases from '@/components/system-upgrade/releases/index.vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { onMounted, ref } from 'vue';
-import { GlobalStore } from '@/store';
-import { storeToRefs } from 'pinia';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const globalStore = GlobalStore();
-const { docsUrl, isOffline, isFxplay } = storeToRefs(globalStore);
+const { docsUrl, isOffline, isFxplay, isMasterPro, isEE, isIntl, isAdmin, hasNewVersion } = useGlobalStore();
 const upgradeRef = ref();
 const releasesRef = ref();
-const isMasterPro = computed(() => {
-    return globalStore.isMasterPro();
-});
-const isEnterprise = computed(() => {
-    return globalStore.isEE();
-});
 
 const version = ref<string>('');
 const loading = ref(false);
@@ -103,7 +95,7 @@ const toLxware = () => {
         to1Panel();
         return;
     }
-    if (!globalStore.isIntl) {
+    if (!isIntl.value) {
         window.open('https://www.lxware.cn/1panel' + '', '_blank', 'noopener,noreferrer');
     } else {
         window.open('https://1panel.pro/pricing' + '', '_blank', 'noopener,noreferrer');
@@ -111,7 +103,7 @@ const toLxware = () => {
 };
 
 const to1Panel = () => {
-    let url = globalStore.isIntl ? 'https://1panel.pro' : 'https://1panel.cn';
+    let url = isIntl.value ? 'https://1panel.pro' : 'https://1panel.cn';
     window.open(url, '_blank', 'noopener,noreferrer');
 };
 
@@ -120,9 +112,7 @@ const toDoc = () => {
 };
 
 const toForum = () => {
-    let url = globalStore.isIntl
-        ? 'https://github.com/1Panel-dev/1Panel/discussions'
-        : 'https://bbs.fit2cloud.com/c/1p/7';
+    let url = isIntl.value ? 'https://github.com/1Panel-dev/1Panel/discussions' : 'https://bbs.fit2cloud.com/c/1p/7';
     window.open(url, '_blank', 'noopener,noreferrer');
 };
 
diff --git a/frontend/src/components/system-upgrade/upgrade/index.vue b/frontend/src/components/system-upgrade/upgrade/index.vue
index a0de805369c9..bccc9df87c0f 100644
--- a/frontend/src/components/system-upgrade/upgrade/index.vue
+++ b/frontend/src/components/system-upgrade/upgrade/index.vue
@@ -35,10 +35,10 @@ import { loadReleaseNotes, upgrade } from '@/api/modules/setting';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ref } from 'vue';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { ElMessageBox } from 'element-plus';
 
-const globalStore = GlobalStore();
+const { isLoading, isOnRestart } = useGlobalStore();
 
 const drawerVisible = ref(false);
 const upgradeInfo = ref();
@@ -80,8 +80,8 @@ const onUpgrade = async () => {
         type: 'info',
     }).then(async () => {
         await upgrade(upgradeVersion.value);
-        globalStore.isLoading = true;
-        globalStore.isOnRestart = true;
+        isLoading.value = true;
+        isOnRestart.value = true;
         drawerVisible.value = false;
         MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
         emit('search');
diff --git a/frontend/src/components/task-list/index.vue b/frontend/src/components/task-list/index.vue
index 9e90d26442c6..b455a7df8aae 100644
--- a/frontend/src/components/task-list/index.vue
+++ b/frontend/src/components/task-list/index.vue
@@ -55,8 +55,8 @@ import { searchTasks } from '@/api/modules/log';
 import { reactive, ref } from 'vue';
 import { Log } from '@/api/interface/log';
 import bus from '@/global/bus';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { currentNode } = useGlobalStore();
 
 const open = ref(false);
 const handleClose = () => {
@@ -101,7 +101,7 @@ const openTaskLog = (row: Log.Task) => {
 };
 
 const acceptParams = () => {
-    targeNode.value = globalStore.currentNode;
+    targeNode.value = currentNode.value;
     search();
     open.value = true;
 };
diff --git a/frontend/src/components/terminal/index.vue b/frontend/src/components/terminal/index.vue
index 81d79878f307..083aba9c558d 100644
--- a/frontend/src/components/terminal/index.vue
+++ b/frontend/src/components/terminal/index.vue
@@ -22,10 +22,11 @@ import { Terminal } from '@xterm/xterm';
 import '@xterm/xterm/css/xterm.css';
 import { FitAddon } from '@xterm/addon-fit';
 import { decodeBase64, encodeBase64 } from '@/utils/base64';
-import { GlobalStore, TerminalStore } from '@/store';
+import { TerminalStore } from '@/store';
 import { MsgError } from '@/utils/message';
 import { checkStreamAuth } from '@/utils/stream-auth';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { currentNode } = useGlobalStore();
 
 const terminalElement = ref<HTMLDivElement | null>(null);
 const fitAddon = new FitAddon();
@@ -252,7 +253,7 @@ const initWebSocket = async (endpoint_: string, args: string = '') => {
     const protocol = href.split('//')[0] === 'http:' ? 'ws' : 'wss';
     const host = href.split('//')[1].split('/')[0];
     const endpoint = endpoint_.replace(/^\/+/, '');
-    let node = args.indexOf('id=') !== -1 ? 'local' : globalStore.currentNode;
+    let node = args.indexOf('id=') !== -1 ? 'local' : currentNode.value;
     let conn = `${protocol}://${host}/${endpoint}?cols=${term.value.cols}&rows=${term.value.rows}&${args}&operateNode=${node}`;
     if (args.indexOf('operateNode=') !== -1) {
         conn = `${protocol}://${host}/${endpoint}?cols=${term.value.cols}&rows=${term.value.rows}&${args}`;
diff --git a/frontend/src/components/v-charts/components/Line.vue b/frontend/src/components/v-charts/components/Line.vue
index 04e827d9b7ce..9099f0d5015b 100644
--- a/frontend/src/components/v-charts/components/Line.vue
+++ b/frontend/src/components/v-charts/components/Line.vue
@@ -4,10 +4,10 @@
 <script lang="ts" setup>
 import { onMounted, nextTick, watch, onBeforeUnmount, ref } from 'vue';
 import echarts from '@/utils/echarts';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { computeSizeFromKBs, computeSizeFromKB, computeSizeFromMB } from '@/utils/size';
 import i18n from '@/lang';
-const globalStore = GlobalStore();
+const { themeConfig } = useGlobalStore();
 const isDarkTheme = ref(false);
 let mediaQuery: MediaQueryList;
 const props = defineProps({
@@ -99,10 +99,10 @@ const seriesStyle = [
 ];
 
 function initChart() {
-    if (globalStore.themeConfig.theme === 'auto') {
+    if (themeConfig.value.theme === 'auto') {
         isDarkTheme.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
     } else {
-        isDarkTheme.value = globalStore.themeConfig.theme === 'dark';
+        isDarkTheme.value = themeConfig.value.theme === 'dark';
     }
     let itemChart = echarts?.getInstanceByDom(document.getElementById(props.id) as HTMLElement);
     const optionItem = itemChart?.getOption();
diff --git a/frontend/src/components/v-charts/components/Pie.vue b/frontend/src/components/v-charts/components/Pie.vue
index 770b532e4928..d023db6e8f13 100644
--- a/frontend/src/components/v-charts/components/Pie.vue
+++ b/frontend/src/components/v-charts/components/Pie.vue
@@ -4,8 +4,8 @@
 <script lang="ts" setup>
 import { onMounted, nextTick, watch, onBeforeUnmount, ref } from 'vue';
 import echarts from '@/utils/echarts';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { themeConfig } = useGlobalStore();
 const isDarkTheme = ref(false);
 let mediaQuery: MediaQueryList;
 
@@ -45,10 +45,10 @@ function getThemeColors() {
 }
 
 function initChart() {
-    if (globalStore.themeConfig.theme === 'auto') {
+    if (themeConfig.value.theme === 'auto') {
         isDarkTheme.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
     } else {
-        isDarkTheme.value = globalStore.themeConfig.theme === 'dark';
+        isDarkTheme.value = themeConfig.value.theme === 'dark';
     }
     let myChart = echarts?.getInstanceByDom(document.getElementById(props.id) as HTMLElement);
     if (myChart === null || myChart === undefined) {
diff --git a/frontend/src/components/vscode-open/index.vue b/frontend/src/components/vscode-open/index.vue
index 8d66c0b88bac..2d694968b61b 100644
--- a/frontend/src/components/vscode-open/index.vue
+++ b/frontend/src/components/vscode-open/index.vue
@@ -154,7 +154,7 @@ import { computed, reactive, ref } from 'vue';
 import type { FormInstance, FormItemRule, FormRules } from 'element-plus';
 import { Base64 } from 'js-base64';
 import i18n from '@/lang';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { getSSHInfo, searchCert } from '@/api/modules/host';
 import { loadLocalConn } from '@/api/modules/terminal';
 import { Host } from '@/api/interface/host';
@@ -162,7 +162,7 @@ import { Rules } from '@/global/form-rules';
 import { copyText } from '@/utils/clipboard';
 import { MsgError } from '@/utils/message';
 
-const globalStore = GlobalStore();
+const { currentNode, currentNodeAddr } = useGlobalStore();
 const open = ref(false);
 const loading = ref(false);
 const showScriptPreview = ref(false);
@@ -190,7 +190,7 @@ const defaultForm = () => ({
 
 const addForm = reactive(defaultForm());
 
-const getStorageKey = () => `${STORAGE_KEY}:${globalStore.currentNode}:${globalStore.currentNodeAddr || 'local'}`;
+const getStorageKey = () => `${STORAGE_KEY}:${currentNode.value}:${currentNodeAddr.value || 'local'}`;
 
 const isKeyMode = computed(() => addForm.authMode === 'key');
 const selectedCert = computed(() => certOptions.value.find((item) => String(item.id) === String(addForm.certID)));
@@ -376,11 +376,11 @@ const restoreDraft = () => {
 };
 
 const loadConnectionInfo = async () => {
-    if (globalStore.currentNode === 'local') {
+    if (currentNode.value === 'local') {
         try {
             const res = await loadLocalConn();
             if (res.data) {
-                addForm.host = res.data.addr || globalStore.currentNodeAddr || '127.0.0.1';
+                addForm.host = res.data.addr || currentNodeAddr.value || '127.0.0.1';
                 addForm.port = Number(res.data.port) || 22;
                 addForm.username = res.data.user || 'root';
                 return;
@@ -396,7 +396,7 @@ const loadConnectionInfo = async () => {
         }
     } catch {}
 
-    addForm.host = globalStore.currentNodeAddr || addForm.host || '127.0.0.1';
+    addForm.host = currentNodeAddr.value || addForm.host || '127.0.0.1';
 };
 
 const loadCertOptions = async () => {
diff --git a/frontend/src/composables/useMenuManagePermission.ts b/frontend/src/composables/useMenuManagePermission.ts
index 50525ab601b6..fdad60e05dd9 100644
--- a/frontend/src/composables/useMenuManagePermission.ts
+++ b/frontend/src/composables/useMenuManagePermission.ts
@@ -1,6 +1,6 @@
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { hasManagePermissionAccess, hasPermissionAccess, toManagePermission } from '@/utils/permission';
 
 const getRoutePermission = (route: ReturnType<typeof useRoute>) => {
@@ -21,7 +21,7 @@ const getRoutePermission = (route: ReturnType<typeof useRoute>) => {
 
 export const useMenuManagePermission = (permission?: string) => {
     const route = useRoute();
-    const globalStore = GlobalStore();
+    const { isAdmin, isNodeAdmin } = useGlobalStore();
 
     const sourcePermission = computed(() => {
         if (permission) {
@@ -32,7 +32,7 @@ export const useMenuManagePermission = (permission?: string) => {
     const managePermission = computed(() => {
         return toManagePermission(sourcePermission.value);
     });
-    const hasAdminManagePermission = computed(() => globalStore.isAdmin || globalStore.isNodeAdmin);
+    const hasAdminManagePermission = computed(() => isAdmin.value || isNodeAdmin.value);
     const hasPermission = computed(() => {
         return hasPermissionAccess(sourcePermission.value || []);
     });
diff --git a/frontend/src/edition/community/index.ts b/frontend/src/edition/community/index.ts
deleted file mode 100644
index 483512e79135..000000000000
--- a/frontend/src/edition/community/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { EditionFrontendProvider } from '../provider';
-
-const communityProvider: EditionFrontendProvider = {
-    name: 'community',
-    routes: [],
-    loadStyles: async () => {},
-};
-
-export default communityProvider;
diff --git a/frontend/src/edition/load.ts b/frontend/src/edition/load.ts
deleted file mode 100644
index c07133f6d4d1..000000000000
--- a/frontend/src/edition/load.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import communityProvider from './community';
-import type { EditionFrontendProvider } from './provider';
-import proProvider from '@xpack-pro/edition';
-import eeProvider from '@enterprise/edition';
-
-const edition = (import.meta.env.VITE_FRONTEND_EDITION || 'community').toLowerCase();
-
-export function loadEditionProvider(): EditionFrontendProvider {
-    switch (edition) {
-        case 'pro':
-            return proProvider;
-        case 'ee':
-            return eeProvider;
-        default:
-            return communityProvider;
-    }
-}
diff --git a/frontend/src/edition/provider.ts b/frontend/src/edition/provider.ts
deleted file mode 100644
index 953c044c55cf..000000000000
--- a/frontend/src/edition/provider.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-
-export interface EditionFrontendProvider {
-    name: string;
-    routes: RouteRecordRaw[];
-    loadStyles?: () => Promise<void>;
-}
diff --git a/frontend/src/global/use-logo.ts b/frontend/src/global/use-logo.ts
index 5cf1a83fe2b3..806bb97e9566 100644
--- a/frontend/src/global/use-logo.ts
+++ b/frontend/src/global/use-logo.ts
@@ -1,30 +1,30 @@
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { getXpackSetting } from '@/utils/xpack';
 
 export const useLogo = async () => {
-    const globalStore = GlobalStore();
+    const { themeConfig, watermark, watermarkShow } = useGlobalStore();
     const res = await getXpackSetting();
     if (res) {
         localStorage.setItem('1p-favicon', res.data.logo);
-        globalStore.themeConfig.title = res.data.title;
-        globalStore.themeConfig.logo = res.data.logo;
-        globalStore.themeConfig.logoWithText = res.data.logoWithText;
-        globalStore.themeConfig.loginImage = res.data?.loginImage;
-        globalStore.themeConfig.loginBgType = res.data?.loginBgType;
-        globalStore.themeConfig.loginBackground = res.data?.loginBackground;
-        globalStore.themeConfig.loginBtnLinkColor = res.data?.loginBtnLinkColor;
-        globalStore.themeConfig.favicon = res.data.favicon;
-        globalStore.watermarkShow = res.data.watermarkShow === 'Enable';
+        themeConfig.value.title = res.data.title;
+        themeConfig.value.logo = res.data.logo;
+        themeConfig.value.logoWithText = res.data.logoWithText;
+        themeConfig.value.loginImage = res.data?.loginImage;
+        themeConfig.value.loginBgType = res.data?.loginBgType;
+        themeConfig.value.loginBackground = res.data?.loginBackground;
+        themeConfig.value.loginBtnLinkColor = res.data?.loginBtnLinkColor;
+        themeConfig.value.favicon = res.data.favicon;
+        watermarkShow.value = res.data.watermarkShow === 'Enable';
         try {
-            globalStore.watermark = JSON.parse(res.data.watermark);
+            watermark.value = JSON.parse(res.data.watermark);
         } catch {
-            globalStore.watermark = null;
+            watermark.value = null;
         }
     }
 
     const link = (document.querySelector("link[rel*='icon']") || document.createElement('link')) as HTMLLinkElement;
     link.type = 'image/x-icon';
     link.rel = 'shortcut icon';
-    link.href = globalStore.themeConfig.favicon ? `/api/v2/images/favicon?t=${Date.now()}` : '/public/favicon.png';
+    link.href = themeConfig.value.favicon ? `/api/v2/images/favicon?t=${Date.now()}` : '/public/favicon.png';
     document.getElementsByTagName('head')[0].appendChild(link);
 };
diff --git a/frontend/src/global/use-theme.ts b/frontend/src/global/use-theme.ts
index d371044d704b..0a12b4d7e138 100644
--- a/frontend/src/global/use-theme.ts
+++ b/frontend/src/global/use-theme.ts
@@ -1,24 +1,23 @@
 import { getCurrentScope, onScopeDispose } from 'vue';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { setPrimaryColor } from '@/utils/theme';
 
 export const useTheme = () => {
     const switchTheme = () => {
-        const globalStore = GlobalStore();
-        const themeConfig = globalStore.themeConfig;
-        let itemTheme = themeConfig.theme;
+        const { isXpackOrEE, themeConfig } = useGlobalStore();
+        let itemTheme = themeConfig.value.theme;
         if (itemTheme === 'auto') {
             const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
             itemTheme = prefersDark ? 'dark' : 'light';
         }
         document.documentElement.className = itemTheme === 'dark' ? 'dark' : 'light';
-        if (globalStore.isXpackOrEE() && themeConfig.themeColor) {
+        if (isXpackOrEE.value && themeConfig.value.themeColor) {
             try {
-                const themeColor = JSON.parse(themeConfig.themeColor);
+                const themeColor = JSON.parse(themeConfig.value.themeColor);
                 const color = itemTheme === 'dark' ? themeColor.dark : themeColor.light;
 
                 if (color) {
-                    themeConfig.primary = color;
+                    themeConfig.value.primary = color;
                     setPrimaryColor(color);
                 }
             } catch (e) {
@@ -29,8 +28,9 @@ export const useTheme = () => {
 
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     const onSystemThemeChange = () => {
-        const globalStore = GlobalStore();
-        if (globalStore.themeConfig.theme === 'auto') {
+        const { themeConfig } = useGlobalStore();
+
+        if (themeConfig.value.theme === 'auto') {
             switchTheme();
         }
     };
diff --git a/frontend/src/layout/components/AppFooter.vue b/frontend/src/layout/components/AppFooter.vue
index cf3d8a9c45e0..787a9c2e5b90 100644
--- a/frontend/src/layout/components/AppFooter.vue
+++ b/frontend/src/layout/components/AppFooter.vue
@@ -2,7 +2,7 @@
     <div class="footer" :style="{ height: isMobile ? '108px' : '48px' }">
         <div class="flex w-full flex-col gap-4 md:justify-between md:flex-row">
             <div class="flex flex-wrap gap-4">
-                <a v-if="!globalStore.isIntl && !globalStore.isFxplay" href="https://fit2cloud.com/" target="_blank">
+                <a v-if="!isIntl && !isFxplay" href="https://fit2cloud.com/" target="_blank">
                     Copyright © 2014-{{ year }} {{ $t('commons.fit2cloud') }}
                 </a>
                 <a v-else href="https://1panel.pro/" target="_blank">
@@ -18,11 +18,10 @@
 
 <script setup lang="ts">
 import SystemUpgrade from '@/components/system-upgrade/index.vue';
-import { GlobalStore } from '@/store';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const { isMobile } = useGlobalStore();
-const globalStore = GlobalStore();
+const { isFxplay, isIntl, isMobile } = useGlobalStore();
+
 const year = new Date().getFullYear();
 </script>
 
diff --git a/frontend/src/layout/components/Sidebar/components/Collapse.vue b/frontend/src/layout/components/Sidebar/components/Collapse.vue
index d30a81dc173e..ff17ae7f3a17 100644
--- a/frontend/src/layout/components/Sidebar/components/Collapse.vue
+++ b/frontend/src/layout/components/Sidebar/components/Collapse.vue
@@ -87,12 +87,12 @@
 </template>
 
 <script setup lang="ts">
-import { GlobalStore, MenuStore } from '@/store';
+import { MenuStore } from '@/store';
 import { countExecutingTask } from '@/api/modules/log';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
 import { getAgentSettingInfo } from '@/api/modules/setting';
-import { computed, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import bus from '@/global/bus';
 import { logOutApi } from '@/api/modules/auth';
 import router from '@/routers';
@@ -102,10 +102,12 @@ import { changeToLocal, listNodes, setDefaultNodeInfo } from '@/utils/node';
 import { Login } from '@/api/interface/auth';
 import { syncAuthInfo } from '@/utils/rbac';
 import UserInfo from './user-info/index.vue';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
 const filter = ref();
 const currentUser = ref<Login.AuthInfo>();
-const globalStore = GlobalStore();
+const { globalStore, currentNode, currentNodeAddr, defaultNetwork, entrance, isEnterprise, isXpackOrEE } =
+    useGlobalStore();
 const menuStore = MenuStore();
 const nodes = ref([]);
 const nodeOptions = ref([]);
@@ -115,9 +117,6 @@ const userInfoRef = ref();
 const props = defineProps({
     version: String,
 });
-const isXpackOrEE = computed(() => {
-    return globalStore.isXpackOrEE();
-});
 
 const emit = defineEmits(['openTask', 'refresh']);
 bus.on('refreshTask', () => {
@@ -125,11 +124,11 @@ bus.on('refreshTask', () => {
 });
 
 const loadCurrentName = () => {
-    if (globalStore.currentNode) {
-        if (globalStore.currentNode === 'local') {
+    if (currentNode.value) {
+        if (currentNode.value === 'local') {
             return globalStore.getMasterAlias();
         }
-        return globalStore.currentNode;
+        return currentNode.value;
     }
     return globalStore.getMasterAlias();
 };
@@ -177,7 +176,7 @@ const loadNodes = async () => {
         });
 };
 const changeNode = async (command: string) => {
-    if (globalStore.currentNode === command || switchingNode.value) {
+    if (currentNode.value === command || switchingNode.value) {
         return;
     }
     switchingNode.value = true;
@@ -185,12 +184,12 @@ const changeNode = async (command: string) => {
         for (const item of nodes.value) {
             if (item.name == command) {
                 if (command == 'local') {
-                    if (globalStore.isEnterprise) {
+                    if (isEnterprise.value) {
                         await loadCurrentUser('local');
                     }
                     await loadGlobalSetting('local');
-                    globalStore.currentNode = 'local';
-                    globalStore.currentNodeAddr = item.addr;
+                    currentNode.value = 'local';
+                    currentNodeAddr.value = item.addr;
                     localStorage.removeItem('dashboardCache');
                     localStorage.removeItem('upgradeChecked');
                     menuStore.setMenuList([]);
@@ -214,9 +213,9 @@ const changeNode = async (command: string) => {
                 await loadGlobalSetting(command);
                 localStorage.removeItem('dashboardCache');
                 localStorage.removeItem('upgradeChecked');
-                globalStore.currentNode = command;
-                globalStore.currentNodeAddr = item.addr;
-                if (globalStore.isEnterprise) {
+                currentNode.value = command;
+                currentNodeAddr.value = item.addr;
+                if (isEnterprise.value) {
                     await loadCurrentUser(command);
                 }
                 menuStore.setMenuList([]);
@@ -233,7 +232,7 @@ const changeNode = async (command: string) => {
 
 const loadGlobalSetting = async (currentNode?: string) => {
     await getAgentSettingInfo(currentNode).then((res) => {
-        globalStore.defaultNetwork = res.data.defaultNetwork;
+        defaultNetwork.value = res.data.defaultNetwork;
     });
 };
 
@@ -267,7 +266,7 @@ const logout = () => {
             await logOutApi();
             globalStore.setLogStatus(false);
             globalStore.clearAuthInfo();
-            router.push({ name: 'entrance', params: { code: globalStore.entrance } });
+            router.push({ name: 'entrance', params: { code: entrance.value } });
             MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
         })
         .catch(() => {});
diff --git a/frontend/src/layout/components/Sidebar/components/Logo.vue b/frontend/src/layout/components/Sidebar/components/Logo.vue
index ea036220eaae..fdc027998ae1 100644
--- a/frontend/src/layout/components/Sidebar/components/Logo.vue
+++ b/frontend/src/layout/components/Sidebar/components/Logo.vue
@@ -2,7 +2,7 @@
     <div class="logo" style="cursor: pointer" @click="goHome">
         <template v-if="isCollapse">
             <img
-                v-if="globalStore.themeConfig.logo && !logoLoadFailed"
+                v-if="themeConfig.logo && !logoLoadFailed"
                 :src="`/api/v2/images/logo?t=${Date.now()}`"
                 style="cursor: pointer"
                 alt="logo"
@@ -12,7 +12,7 @@
         </template>
         <template v-else>
             <img
-                v-if="globalStore.themeConfig.logoWithText && !logoWithTextLoadFailed"
+                v-if="themeConfig.logoWithText && !logoWithTextLoadFailed"
                 :src="`/api/v2/images/logoWithText?t=${Date.now()}`"
                 style="cursor: pointer"
                 alt="logo"
@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import PrimaryLogo from '@/assets/images/1panel-logo.svg?component';
 import MenuLogo from '@/assets/images/1panel-menu-logo.svg?component';
 import { ref } from 'vue';
@@ -34,7 +34,7 @@ defineProps<{ isCollapse: boolean }>();
 
 const logoLoadFailed = ref(false);
 const logoWithTextLoadFailed = ref(false);
-const globalStore = GlobalStore();
+const { themeConfig } = useGlobalStore();
 
 const goHome = () => {
     routerToNameWithQuery('home', { t: Date.now() });
diff --git a/frontend/src/layout/components/Sidebar/components/user-info/index.vue b/frontend/src/layout/components/Sidebar/components/user-info/index.vue
index da92de4519ef..7d0491745249 100644
--- a/frontend/src/layout/components/Sidebar/components/user-info/index.vue
+++ b/frontend/src/layout/components/Sidebar/components/user-info/index.vue
@@ -116,8 +116,8 @@
                 </el-form-item>
             </el-form>
 
-            <el-form v-if="globalStore.isAdmin" label-position="top" :model="form" class="setting-section">
-                <el-form-item v-if="globalStore.isAdmin">
+            <el-form v-if="isAdmin" label-position="top" :model="form" class="setting-section">
+                <el-form-item v-if="isAdmin">
                     <template #label>
                         <span class="label-with-help">
                             {{ $t('setting.apiInterface') }}
@@ -135,7 +135,7 @@
                                                 {{ $t('setting.apiInterfaceAlert3') }}
                                             </el-link>
                                         </li>
-                                        <li v-if="!globalStore.isFxplay">
+                                        <li v-if="!isFxplay">
                                             <el-link :href="panelURL" target="_blank" class="tooltip-help-link">
                                                 {{ $t('setting.apiInterfaceAlert4') }}
                                             </el-link>
@@ -407,7 +407,7 @@ import {
 import { Setting } from '@/api/interface/setting';
 import { getSettingBaseInfo, getSettingInfo, updateSetting } from '@/api/modules/setting';
 import i18n from '@/lang';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { base64UrlToBuffer, bufferToBase64Url } from '@/utils/auth';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { checkNumberRange, Rules } from '@/global/form-rules';
@@ -417,7 +417,7 @@ const props = defineProps<{ currentUser?: Login.AuthInfo }>();
 const emit = defineEmits<{ (e: 'search'): void }>();
 
 const complexityVerification = ref(false);
-const globalStore = GlobalStore();
+const { globalStore, docsUrl, entrance, isAdmin, isFxplay } = useGlobalStore();
 const router = useRouter();
 const open = ref(false);
 const loading = ref(false);
@@ -443,7 +443,7 @@ const passkeyMaxCount = 5;
 const apiURL = `${window.location.protocol}//${window.location.hostname}${
     window.location.port ? `:${window.location.port}` : ''
 }/1panel/swagger/index.html`;
-const panelURL = `${globalStore.docsUrl}/dev_manual/api_manual/`;
+const panelURL = `${docsUrl.value}/dev_manual/api_manual/`;
 const form = reactive({
     id: 0,
     name: '',
@@ -875,7 +875,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
             if (needReLogin) {
                 globalStore.setLogStatus(false);
                 globalStore.clearAuthInfo();
-                router.push({ name: 'entrance', params: { code: globalStore.entrance } });
+                router.push({ name: 'entrance', params: { code: entrance.value } });
                 return;
             }
             emit('search');
diff --git a/frontend/src/layout/components/Sidebar/index.vue b/frontend/src/layout/components/Sidebar/index.vue
index 238ba8e95d5c..77d12188311d 100644
--- a/frontend/src/layout/components/Sidebar/index.vue
+++ b/frontend/src/layout/components/Sidebar/index.vue
@@ -35,14 +35,15 @@ import Logo from './components/Logo.vue';
 import Collapse from './components/Collapse.vue';
 import SubItem from './components/SubItem.vue';
 import { menuList } from '@/routers/router';
-import { GlobalStore, MenuStore } from '@/store';
+import { MenuStore } from '@/store';
 import { getSettingBaseInfo } from '@/api/modules/setting';
 import PrimaryMenu from '@/assets/images/menu-bg.svg?component';
 import { hasPermission, hasRouteRoleAccess } from '@/utils/rbac';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
 const route = useRoute();
 const menuStore = MenuStore();
-const globalStore = GlobalStore();
+const { currentNode, isAdmin, isEE, isIntl, permissions } = useGlobalStore();
 const version = ref();
 
 const activeMenu = computed(() => {
@@ -122,7 +123,7 @@ function setFallbackMenuListIfEmpty() {
 }
 
 function allowMenuItem(item: RouteRecordRaw) {
-    if (globalStore.isAdmin) {
+    if (isAdmin.value) {
         return true;
     }
     if (!hasRouteRoleAccess(item.meta)) {
@@ -199,7 +200,7 @@ function buildVisibleMenu(menu: RouteRecordRaw, showSet: Set<string>): RouteReco
 
     const visibleChildren = children
         .map((item) => {
-            if (item.name === 'Upage' && (globalStore.isIntl || globalStore.isEE())) {
+            if (item.name === 'Upage' && (isIntl.value || isEE.value)) {
                 return null;
             }
             return buildVisibleMenu(item, showSet);
@@ -277,13 +278,13 @@ function adjustAndCleanMenu(menuItem, list) {
 
 onMounted(() => {
     if (!menuStore.menuList || menuStore.menuList.length === 0) {
-        menuStore.setMenuList(globalStore.isAdmin ? menuList : buildAuthVisibleMenuList(menuList));
+        menuStore.setMenuList(isAdmin.value ? menuList : buildAuthVisibleMenuList(menuList));
     }
     search();
 });
 
 watch(
-    () => [globalStore.currentNode, globalStore.permissions.join('|')],
+    () => [currentNode.value, permissions.value.join('|')],
     () => {
         search();
     },
diff --git a/frontend/src/layout/hooks/useResize.ts b/frontend/src/layout/hooks/useResize.ts
index 977669ae0649..cd10db747671 100644
--- a/frontend/src/layout/hooks/useResize.ts
+++ b/frontend/src/layout/hooks/useResize.ts
@@ -1,6 +1,6 @@
 import { watch, onBeforeMount, onMounted, onBeforeUnmount } from 'vue';
 import { useRoute } from 'vue-router';
-import { GlobalStore, MenuStore } from '@/store';
+import { MenuStore } from '@/store';
 import { DeviceType } from '@/enums/app';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 /** 参考 Bootstrap 的响应式设计 WIDTH = 600 */
@@ -9,7 +9,7 @@ const WIDTH = 600;
 /** 根据大小变化重新布局 */
 export default () => {
     const route = useRoute();
-    const globalStore = GlobalStore();
+    const { globalStore } = useGlobalStore();
     const menuStore = MenuStore();
     const { isMobile } = useGlobalStore();
     const _isMobile = () => {
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index 7fb138a316e2..108e6c3b310a 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -19,33 +19,33 @@
                 ></el-button>
             </el-tooltip>
         </el-affix>
-        <div class="app-sidebar" v-if="!globalStore.isFullScreen">
+        <div class="app-sidebar" v-if="!isFullScreen">
             <Sidebar @menu-click="handleMenuClick" :menu-router="!classObj.openMenuTabs" @open-task="openTask" />
         </div>
 
         <el-watermark
-            v-if="globalStore.isXpackOrEE() && globalStore.watermarkShow && globalStore.watermark"
+            v-if="isXpackOrEE && watermarkShow && watermark"
             :content="loadContent()"
             :font="{
-                fontSize: globalStore.watermark.fontSize,
-                color: globalStore.isDarkTheme ? globalStore.watermark.darkColor : globalStore.watermark.lightColor,
+                fontSize: watermark.fontSize,
+                color: isDarkTheme ? watermark.darkColor : watermark.lightColor,
                 textBaseline: 'top',
             }"
-            :rotate="globalStore.watermark.rotate"
-            :gap="[globalStore.watermark.gap, globalStore.watermark.gap]"
+            :rotate="watermark.rotate"
+            :gap="[watermark.gap, watermark.gap]"
         >
             <div class="main-container">
                 <mobile-header v-if="classObj.mobile" />
                 <Tabs v-if="classObj.openMenuTabs" />
                 <app-main :keep-alive="classObj.openMenuTabs ? tabsStore.cachedTabs : null" class="app-main" />
-                <Footer class="app-footer" v-if="!globalStore.isFullScreen" />
+                <Footer class="app-footer" v-if="!isFullScreen" />
             </div>
         </el-watermark>
         <div class="main-container" v-else>
             <mobile-header v-if="classObj.mobile" />
             <Tabs v-if="classObj.openMenuTabs" />
             <app-main :keep-alive="classObj.openMenuTabs ? tabsStore.cachedTabs : null" class="app-main" />
-            <Footer class="app-footer" v-if="!globalStore.isFullScreen" />
+            <Footer class="app-footer" v-if="!isFullScreen" />
         </div>
         <TaskList ref="taskListRef" />
     </div>
@@ -55,7 +55,7 @@
 import { onMounted, computed, ref, watch, onBeforeUnmount } from 'vue';
 import { Sidebar, Footer, AppMain, MobileHeader, Tabs } from './components';
 import useResize from './hooks/useResize';
-import { GlobalStore, MenuStore, TabsStore } from '@/store';
+import { MenuStore, TabsStore } from '@/store';
 import { getSystemAvailable } from '@/api/modules/setting';
 import { useRoute, useRouter } from 'vue-router';
 import { loadMasterProductProFromDB, loadProductProFromDB } from '@/utils/xpack';
@@ -64,7 +64,21 @@ import TaskList from '@/components/task-list/index.vue';
 import i18n from '@/lang';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const { isMobile } = useGlobalStore();
+const {
+    globalStore,
+    currentNode,
+    currentNodeAddr,
+    entrance,
+    isDarkTheme,
+    isFullScreen,
+    isLoading,
+    isMobile,
+    isXpackOrEE,
+    loadingText: globalLoadingText,
+    openMenuTabs,
+    watermark,
+    watermarkShow,
+} = useGlobalStore();
 const { switchTheme } = useTheme();
 
 useResize();
@@ -79,23 +93,23 @@ const openTask = () => {
 const router = useRouter();
 const route = useRoute();
 const menuStore = MenuStore();
-const globalStore = GlobalStore();
+
 const tabsStore = TabsStore();
 
 const loading = ref(false);
 const loadingText = computed(() =>
-    globalStore.loadingText ? i18n.global.t(`commons.loadingText.${globalStore.loadingText}`) : '',
+    globalLoadingText.value ? i18n.global.t(`commons.loadingText.${globalLoadingText.value}`) : '',
 );
 
 let timer: NodeJS.Timer | null = null;
 
 const classObj = computed(() => {
     return {
-        fullScreen: globalStore.isFullScreen,
+        fullScreen: isFullScreen.value,
         hideSidebar: menuStore.isCollapse,
         openSidebar: !menuStore.isCollapse,
         mobile: isMobile.value,
-        openMenuTabs: globalStore.openMenuTabs,
+        openMenuTabs: openMenuTabs.value,
         withoutAnimation: menuStore.withoutAnimation,
     };
 });
@@ -108,26 +122,25 @@ const handleCollapse = () => {
 };
 
 const loadContent = () => {
-    const watermark = globalStore.watermark;
-    if (!watermark) {
+    if (!watermark.value) {
         return '';
     }
 
-    let itemName = watermark.content.replaceAll(
+    let itemName = watermark.value.content.replaceAll(
         '${nodeName}',
-        globalStore.currentNode === 'local' ? globalStore.getMasterAlias() : globalStore.currentNode,
+        currentNode.value === 'local' ? globalStore.getMasterAlias() : currentNode.value,
     );
-    itemName = itemName.replaceAll('${nodeAddr}', globalStore.currentNodeAddr || '127.0.0.1');
+    itemName = itemName.replaceAll('${nodeAddr}', currentNodeAddr.value || '127.0.0.1');
     return itemName;
 };
 
 watch(
-    () => globalStore.isLoading,
+    () => isLoading.value,
     () => {
-        if (globalStore.isLoading) {
+        if (isLoading.value) {
             loadStatus();
         } else {
-            loading.value = globalStore.isLoading;
+            loading.value = isLoading.value;
         }
     },
 );
@@ -140,8 +153,8 @@ const handleMenuClick = async (path) => {
 const toLogin = () => {
     let baseUrl = window.location.origin;
     let newUrl = '';
-    if (globalStore.entrance) {
-        newUrl = baseUrl + '/' + globalStore.entrance;
+    if (entrance.value) {
+        newUrl = baseUrl + '/' + entrance.value;
     } else {
         newUrl = baseUrl + '/login';
     }
@@ -149,7 +162,7 @@ const toLogin = () => {
 };
 
 const loadStatus = async () => {
-    loading.value = globalStore.isLoading;
+    loading.value = isLoading.value;
     if (loading.value) {
         timer = setInterval(async () => {
             await getSystemAvailable()
@@ -173,14 +186,14 @@ onBeforeUnmount(() => {
     timer = null;
 });
 onMounted(() => {
-    if (globalStore.openMenuTabs && !tabsStore.activeTabPath) {
+    if (openMenuTabs.value && !tabsStore.activeTabPath) {
         handleMenuClick('/');
     }
 
     loadStatus();
     loadProductProFromDB();
     loadMasterProductProFromDB();
-    globalStore.isFullScreen = false;
+    isFullScreen.value = false;
 
     const mqList = window.matchMedia('(prefers-color-scheme: dark)');
     if (mqList.addEventListener) {
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index c2e8398d43a5..3b6832c4c14f 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -35,9 +35,9 @@ const bootstrap = async () => {
         app.component(key, Icons[key as keyof typeof Icons]);
     });
 
+    app.use(pinia);
     app.use(router);
     app.use(i18n);
-    app.use(pinia);
     app.use(Components);
     app.use(directives);
 
diff --git a/frontend/src/routers/index.ts b/frontend/src/routers/index.ts
index 6ccf056f117c..90fd9437cf0c 100644
--- a/frontend/src/routers/index.ts
+++ b/frontend/src/routers/index.ts
@@ -1,6 +1,6 @@
 import router from '@/routers/router';
 import NProgress from '@/config/nprogress';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { AxiosCanceler } from '@/api/helper/axios-cancel';
 import { hasRouteAccess } from '@/utils/rbac';
 import { loadProductProFromDB } from '@/utils/xpack';
@@ -13,26 +13,27 @@ let isRedirecting = false;
 const enterpriseLicenseCheckWhiteList = ['EnterpriseLicenseRequired', 'entrance', 'login', 'Expired'];
 
 const clearLicenseStatus = () => {
-    const globalStore = GlobalStore();
-    globalStore.isEnterpriseLicensed = false;
-    globalStore.isEnterpriseLicenseLoaded = false;
+    const { isEnterpriseLicenseLoaded, isEnterpriseLicensed } = useGlobalStore();
+    isEnterpriseLicensed.value = false;
+    isEnterpriseLicenseLoaded.value = false;
 };
 
 const clearLoginStatus = () => {
-    const globalStore = GlobalStore();
+    const { globalStore } = useGlobalStore();
     globalStore.setLogStatus(false);
     globalStore.clearAuthInfo();
     clearLicenseStatus();
 };
 
 router.beforeEach(async (to, from, next) => {
+    const { entrance, isEnterprise, isEnterpriseLicenseLoaded, isEnterpriseLicensed, isLogin } = useGlobalStore();
     NProgress.start();
     axiosCanceler.removeAllPending();
-    const globalStore = GlobalStore();
-    if (!globalStore.isLogin) {
+
+    if (!isLogin.value) {
         clearLoginStatus();
     }
-    if (to.name !== 'entrance' && !globalStore.isLogin) {
+    if (to.name !== 'entrance' && !isLogin.value) {
         next({
             name: 'entrance',
             params: to.params,
@@ -40,8 +41,8 @@ router.beforeEach(async (to, from, next) => {
         NProgress.done();
         return;
     }
-    if (to.name === 'entrance' && globalStore.isLogin) {
-        if (to.params.code === globalStore.entrance) {
+    if (to.name === 'entrance' && isLogin.value) {
+        if (to.params.code === entrance.value) {
             next({
                 name: 'home',
             });
@@ -52,18 +53,18 @@ router.beforeEach(async (to, from, next) => {
         NProgress.done();
         return;
     }
-    if (globalStore.isLogin && globalStore.isEnterprise && !enterpriseLicenseCheckWhiteList.includes(String(to.name))) {
-        if (!globalStore.isEnterpriseLicenseLoaded) {
+    if (isLogin.value && isEnterprise.value && !enterpriseLicenseCheckWhiteList.includes(String(to.name))) {
+        if (!isEnterpriseLicenseLoaded.value) {
             await loadProductProFromDB();
         }
-        if (!globalStore.isEnterpriseLicensed) {
+        if (!isEnterpriseLicensed.value) {
             next({ name: 'EnterpriseLicenseRequired', query: { code: String(to.params.code || '') } });
             NProgress.done();
             return;
         }
     }
     if (to.name === 'EnterpriseLicenseRequired') {
-        if (!globalStore.isLogin) {
+        if (!isLogin.value) {
             next({
                 name: 'entrance',
                 params: to.params,
@@ -71,7 +72,7 @@ router.beforeEach(async (to, from, next) => {
             NProgress.done();
             return;
         }
-        if (!globalStore.isEnterprise || globalStore.isEnterpriseLicensed) {
+        if (!isEnterprise.value || isEnterpriseLicensed.value) {
             next({ name: 'home' });
             NProgress.done();
             return;
diff --git a/frontend/src/routers/modules/container.ts b/frontend/src/routers/modules/container.ts
index 547957570f44..6512043e36d9 100644
--- a/frontend/src/routers/modules/container.ts
+++ b/frontend/src/routers/modules/container.ts
@@ -9,6 +9,7 @@ const containerRouter = {
     meta: {
         icon: 'p-docker1',
         title: 'menu.container',
+        permission: 'container_view',
     },
     children: [
         {
diff --git a/frontend/src/routers/modules/cronjob.ts b/frontend/src/routers/modules/cronjob.ts
index a4909b33e402..e1ba5be4ee57 100644
--- a/frontend/src/routers/modules/cronjob.ts
+++ b/frontend/src/routers/modules/cronjob.ts
@@ -9,6 +9,7 @@ const cronRouter = {
     meta: {
         icon: 'p-plan',
         title: 'menu.cronjob',
+        permission: 'cronjob_view',
     },
     children: [
         {
diff --git a/frontend/src/routers/modules/database.ts b/frontend/src/routers/modules/database.ts
index a65ddafed9d2..c4fe35661b37 100644
--- a/frontend/src/routers/modules/database.ts
+++ b/frontend/src/routers/modules/database.ts
@@ -9,6 +9,7 @@ const databaseRouter = {
     meta: {
         icon: 'p-database',
         title: 'menu.database',
+        permission: 'database_view',
     },
     children: [
         {
diff --git a/frontend/src/routers/modules/website.ts b/frontend/src/routers/modules/website.ts
index ef061d71b846..6e3c777317ad 100644
--- a/frontend/src/routers/modules/website.ts
+++ b/frontend/src/routers/modules/website.ts
@@ -9,6 +9,7 @@ const webSiteRouter = {
     meta: {
         icon: 'p-website',
         title: 'menu.website',
+        permission: 'website_view',
     },
     children: [
         {
diff --git a/frontend/src/store/modules/global.ts b/frontend/src/store/modules/global.ts
index f1306e3793af..614cd1d72cac 100644
--- a/frontend/src/store/modules/global.ts
+++ b/frontend/src/store/modules/global.ts
@@ -91,6 +91,12 @@ const GlobalStore = defineStore({
         },
         isMaster: (state) => state.currentNode === 'local',
         isMobile: (state) => state.device === DeviceType.Mobile,
+
+        isXpackOrEE: (state) => {
+            return (state.isEnterprise && state.isEnterpriseLicensed) || state.isMasterProductPro;
+        },
+        isEE: (state) => state.isEnterprise && state.isEnterpriseLicensed,
+        isMasterPro: (state) => state.isMasterProductPro,
     },
     actions: {
         setScreenFull() {
@@ -147,15 +153,6 @@ const GlobalStore = defineStore({
         getMasterAlias() {
             return this.masterAlias || i18n.global.t('xpack.node.master');
         },
-        isEE() {
-            return this.isEnterprise && this.isEnterpriseLicensed;
-        },
-        isXpackOrEE() {
-            return (this.isEnterprise && this.isEnterpriseLicensed) || this.isMasterProductPro;
-        },
-        isMasterPro() {
-            return this.isMasterProductPro;
-        },
     },
     persist: piniaPersistConfig('GlobalState'),
 });
diff --git a/frontend/src/utils/app.ts b/frontend/src/utils/app.ts
index 4f3faa25281d..b96421a6e122 100644
--- a/frontend/src/utils/app.ts
+++ b/frontend/src/utils/app.ts
@@ -2,9 +2,8 @@ import { jumpToPath } from './router';
 import router from '@/routers';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const { isProductPro } = useGlobalStore();
-
 export const jumpToInstall = (type: string, key: string) => {
+    const { isProductPro } = useGlobalStore();
     switch (type) {
         case 'php':
         case 'node':
diff --git a/frontend/src/utils/auth-response.ts b/frontend/src/utils/auth-response.ts
index e2f3d597f872..051b05829825 100644
--- a/frontend/src/utils/auth-response.ts
+++ b/frontend/src/utils/auth-response.ts
@@ -1,7 +1,7 @@
 import { ResultEnum } from '@/enums/http-enum';
 import i18n from '@/lang';
 import router from '@/routers';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { MsgError } from '@/utils/message';
 
 export type AuthResponseAction = 'reject' | 'return';
@@ -19,11 +19,11 @@ interface AuthResponseOptions {
 const forbiddenMessage = () => i18n.global.t('commons.res.forbidden');
 
 export const redirectToEntrance = () => {
-    const globalStore = GlobalStore();
-    globalStore.isLogin = false;
+    const { entrance, isLogin } = useGlobalStore();
+    isLogin.value = false;
     router.push({
         name: 'entrance',
-        params: { code: globalStore.entrance },
+        params: { code: entrance.value },
     });
 };
 
diff --git a/frontend/src/utils/node.ts b/frontend/src/utils/node.ts
index 4febf3113384..48a0f74e2409 100644
--- a/frontend/src/utils/node.ts
+++ b/frontend/src/utils/node.ts
@@ -1,33 +1,31 @@
 import { Setting } from '@/api/interface/setting';
 import { listNodeOptions, loadNodeByUser } from '@/api/modules/setting';
-import { GlobalStore } from '@/store';
-
-const getGlobalStore = () => GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
 export const changeToLocal = async () => {
-    const globalStore = getGlobalStore();
+    const { currentNode, currentNodeAddr, isAdmin } = useGlobalStore();
     let nodes = await listNodes('all');
     if (nodes.length === 0) {
         setDefaultNodeInfo();
         return;
     }
-    if (globalStore.isAdmin) {
+    if (isAdmin.value) {
         for (const item of nodes) {
             if (item.name === 'local') {
-                globalStore.currentNode = 'local';
-                globalStore.currentNodeAddr = item.addr;
+                currentNode.value = 'local';
+                currentNodeAddr.value = item.addr;
                 return;
             }
         }
     }
-    globalStore.currentNode = nodes[0].name;
-    globalStore.currentNodeAddr = nodes[0].addr;
+    currentNode.value = nodes[0].name;
+    currentNodeAddr.value = nodes[0].addr;
 };
 
 export async function listNodes(type: string): Promise<Array<Setting.NodeItem>> {
-    const globalStore = getGlobalStore();
+    const { isAdmin } = useGlobalStore();
     try {
-        if (globalStore.isAdmin) {
+        if (isAdmin.value) {
             const res = await listNodeOptions(type);
             return res.data || [];
         } else {
@@ -40,7 +38,7 @@ export async function listNodes(type: string): Promise<Array<Setting.NodeItem>>
 }
 
 export const setDefaultNodeInfo = () => {
-    const globalStore = getGlobalStore();
-    globalStore.currentNode = 'local';
-    globalStore.currentNodeAddr = '127.0.0.1';
+    const { currentNode, currentNodeAddr } = useGlobalStore();
+    currentNode.value = 'local';
+    currentNodeAddr.value = '127.0.0.1';
 };
diff --git a/frontend/src/utils/permission.ts b/frontend/src/utils/permission.ts
index a82bcb7b923f..e52f6e77eb74 100644
--- a/frontend/src/utils/permission.ts
+++ b/frontend/src/utils/permission.ts
@@ -1,5 +1,5 @@
 import router from '@/routers';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
 export type PermissionBindingValue = string | string[] | undefined;
 export type PermissionMode = 'manage' | 'view';
@@ -42,8 +42,8 @@ export const toPermissionList = (value: PermissionBindingValue) => {
 };
 
 export const hasManagePermissionAccess = (value?: PermissionBindingValue) => {
-    const globalStore = GlobalStore();
-    if (globalStore.isAdmin || globalStore.isNodeAdmin) {
+    const { globalStore, isAdmin, isNodeAdmin } = useGlobalStore();
+    if (isAdmin.value || isNodeAdmin.value) {
         return true;
     }
     const permissions = toPermissionList(value).map(toManagePermission).filter(Boolean);
@@ -54,8 +54,9 @@ export const hasManagePermissionAccess = (value?: PermissionBindingValue) => {
 };
 
 export const hasPermissionAccess = (value?: PermissionBindingValue) => {
-    const globalStore = GlobalStore();
-    if (globalStore.isAdmin || globalStore.isNodeAdmin) {
+    const { globalStore, isAdmin, isNodeAdmin } = useGlobalStore();
+
+    if (isAdmin.value || isNodeAdmin.value) {
         return true;
     }
     const permissions = toPermissionList(value);
diff --git a/frontend/src/utils/rbac.ts b/frontend/src/utils/rbac.ts
index 30aa87769554..8ccee43da3d5 100644
--- a/frontend/src/utils/rbac.ts
+++ b/frontend/src/utils/rbac.ts
@@ -1,6 +1,6 @@
 import { getUserInfo } from '@/api/modules/auth';
 import { getEnterpriseUserInfo } from '@/extensions/xpack';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import type { RouteMeta } from 'vue-router';
 
 type RouteAccessMeta = {
@@ -17,12 +17,12 @@ type RouteAccessTarget = {
 };
 
 export const syncAuthInfo = async (currentNode?: string) => {
-    const globalStore = GlobalStore();
-    if (!globalStore.isEnterprise) {
+    const { globalStore, currentNode: storeCurrentNode, isEnterprise } = useGlobalStore();
+    if (!isEnterprise.value) {
         const res = await getUserInfo();
         return res.data;
     }
-    const res = await getEnterpriseUserInfo(currentNode ?? globalStore.currentNode);
+    const res = await getEnterpriseUserInfo(currentNode ?? storeCurrentNode.value);
     globalStore.setAuthInfo({
         isAdmin: res.data.role === 'ADMIN',
         permissions: res.data.permissions || [],
@@ -32,22 +32,23 @@ export const syncAuthInfo = async (currentNode?: string) => {
 };
 
 export const hasPermission = (permission: string) => {
-    return GlobalStore().hasPermission(permission);
+    return useGlobalStore().globalStore.hasPermission(permission);
 };
 
 export const hasRouteRoleAccess = (meta?: RouteMeta & RouteAccessMeta) => {
-    const globalStore = GlobalStore();
+    const { isAdmin, isNodeAdmin } = useGlobalStore();
+
     if (!meta) {
         return true;
     }
-    if (globalStore.isAdmin) {
+    if (isAdmin.value) {
         return true;
     }
-    if (meta.adminOnly && !globalStore.isAdmin) {
+    if (meta.adminOnly && !isAdmin.value) {
         return false;
     }
     if (meta.protectedRoleOnly) {
-        return globalStore.isNodeAdmin;
+        return isNodeAdmin.value;
     }
     return true;
 };
diff --git a/frontend/src/utils/stream-auth.ts b/frontend/src/utils/stream-auth.ts
index ace03a923053..1edc45bb4dbb 100644
--- a/frontend/src/utils/stream-auth.ts
+++ b/frontend/src/utils/stream-auth.ts
@@ -1,16 +1,16 @@
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { handleAuthResponseCode, handleAuthResponseStatus } from '@/utils/auth-response';
 
 export const checkStreamAuth = async (url: string, currentNode?: string) => {
-    const globalStore = GlobalStore();
+    const { currentNode: storeCurrentNode, language } = useGlobalStore();
     const controller = new AbortController();
     const timeout = window.setTimeout(() => controller.abort(), 5000);
     try {
         const res = await fetch(url.replace(/^ws/, 'http'), {
             credentials: 'include',
             headers: {
-                'Accept-Language': globalStore.language,
-                CurrentNode: encodeURIComponent(currentNode || globalStore.currentNode),
+                'Accept-Language': language.value,
+                CurrentNode: encodeURIComponent(currentNode || storeCurrentNode.value),
             },
             signal: controller.signal,
         });
diff --git a/frontend/src/utils/xpack.ts b/frontend/src/utils/xpack.ts
index 7fdd55fb66b2..2ffd5e9a77a3 100644
--- a/frontend/src/utils/xpack.ts
+++ b/frontend/src/utils/xpack.ts
@@ -9,21 +9,18 @@ import {
     searchXpackSetting,
     updateXpackSettingByKey as updateXpackSettingByKeyFromExtension,
 } from '@/extensions/xpack';
-import { GlobalStore } from '@/store';
-const { switchTheme } = useTheme();
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import faviconUrl from '@/assets/images/favicon.svg';
 
-const getGlobalStore = () => GlobalStore();
-
 export function resetXSetting() {
-    const globalStore = getGlobalStore();
-    globalStore.themeConfig.title = '';
-    globalStore.themeConfig.logo = '';
-    globalStore.themeConfig.logoWithText = '';
-    globalStore.themeConfig.favicon = '';
-    globalStore.watermark = null;
-    globalStore.watermarkShow = false;
-    globalStore.masterAlias = '';
+    const { masterAlias, themeConfig, watermark, watermarkShow } = useGlobalStore();
+    themeConfig.value.title = '';
+    themeConfig.value.logo = '';
+    themeConfig.value.logoWithText = '';
+    themeConfig.value.favicon = '';
+    watermark.value = null;
+    watermarkShow.value = false;
+    masterAlias.value = '';
 }
 
 async function getColoredFavicon(url: string, color: string) {
@@ -34,11 +31,11 @@ async function getColoredFavicon(url: string, color: string) {
 }
 
 export async function initFavicon() {
-    const globalStore = getGlobalStore();
-    document.title = globalStore.themeConfig.panelName;
-    const favicon = globalStore.themeConfig.favicon;
-    const isPro = globalStore.isXpackOrEE();
-    const themeColor = globalStore.themeConfig.primary;
+    const { isXpackOrEE, themeConfig } = useGlobalStore();
+    document.title = themeConfig.value.panelName;
+    const favicon = themeConfig.value.favicon;
+    const isPro = isXpackOrEE.value;
+    const themeColor = themeConfig.value.primary;
     const customFaviconUrl = `/api/v2/images/favicon?t=${Date.now()}`;
     const fallbackSvg = isPro ? await getColoredFavicon(faviconUrl, themeColor) : '/public/favicon.png';
     const setLink = (href: string) => {
@@ -74,90 +71,91 @@ export async function getXpackSetting() {
 }
 
 const loadDataFromDB = async () => {
-    const globalStore = getGlobalStore();
+    const { entrance, openMenuTabs } = useGlobalStore();
     const res = await getSettingBaseInfo();
     document.title = res.data.panelName;
-    globalStore.entrance = res.data.securityEntrance;
-    globalStore.openMenuTabs = res.data.menuTabs === 'Enable';
+    entrance.value = res.data.securityEntrance;
+    openMenuTabs.value = res.data.menuTabs === 'Enable';
 };
 
 export async function loadProductProFromDB() {
-    const globalStore = getGlobalStore();
-    if (!globalStore.isEnterprise) {
-        globalStore.isEnterpriseLicenseLoaded = true;
+    const { isEnterprise, isEnterpriseLicenseLoaded, isEnterpriseLicensed, isProductPro, productProExpires } =
+        useGlobalStore();
+    if (!isEnterprise.value) {
+        isEnterpriseLicenseLoaded.value = true;
         const res = await getLicenseStatus();
         if (!res || !res.data) {
-            globalStore.isProductPro = false;
+            isProductPro.value = false;
         } else {
-            globalStore.isProductPro = res.data.status === 'Bound';
-            if (globalStore.isProductPro) {
-                globalStore.productProExpires = Number(res.data.productPro);
+            isProductPro.value = res.data.status === 'Bound';
+            if (isProductPro.value) {
+                productProExpires.value = Number(res.data.productPro);
             }
         }
         return;
     }
     const res = await getEnterpriseLicenseStatus();
-    globalStore.isEnterpriseLicenseLoaded = true;
+    isEnterpriseLicenseLoaded.value = true;
     if (!res || !res.data) {
-        globalStore.isEnterpriseLicensed = false;
+        isEnterpriseLicensed.value = false;
     } else {
-        globalStore.isEnterpriseLicensed = res.data.status === 'Bound';
-        globalStore.isProductPro = globalStore.isEnterpriseLicensed;
+        isEnterpriseLicensed.value = res.data.status === 'Bound';
+        isProductPro.value = isEnterpriseLicensed.value;
     }
 }
 
 export async function loadMasterProductProFromDB() {
-    const globalStore = getGlobalStore();
-    if (!globalStore.isEnterprise) {
-        globalStore.isEnterpriseLicenseLoaded = true;
+    const { isEnterprise, isEnterpriseLicenseLoaded, isEnterpriseLicensed, isMasterProductPro } = useGlobalStore();
+    if (!isEnterprise.value) {
+        isEnterpriseLicenseLoaded.value = true;
         const res = await getMasterLicenseStatus();
         if (!res || !res.data) {
-            globalStore.isMasterProductPro = false;
+            isMasterProductPro.value = false;
         } else {
-            globalStore.isMasterProductPro = res.data.status === 'Bound';
+            isMasterProductPro.value = res.data.status === 'Bound';
         }
     } else {
         const res = await getEnterpriseLicenseStatus();
-        globalStore.isEnterpriseLicenseLoaded = true;
+        isEnterpriseLicenseLoaded.value = true;
         if (!res || !res.data) {
-            globalStore.isEnterpriseLicensed = false;
+            isEnterpriseLicensed.value = false;
         } else {
-            globalStore.isEnterpriseLicensed = res.data.status === 'Bound';
-            globalStore.isMasterProductPro = res.data.status === 'Bound';
+            isEnterpriseLicensed.value = res.data.status === 'Bound';
+            isMasterProductPro.value = res.data.status === 'Bound';
         }
     }
-    switchTheme();
+    useTheme().switchTheme();
     initFavicon();
     loadDataFromDB();
 }
 
 export async function getXpackSettingForTheme() {
-    const globalStore = getGlobalStore();
+    const { masterAlias, themeConfig, watermark, watermarkShow } = useGlobalStore();
     const res2 = await searchXpackSetting();
     if (res2) {
-        globalStore.themeConfig.title = res2.data?.title;
-        globalStore.themeConfig.logo = res2.data?.logo;
-        globalStore.themeConfig.logoWithText = res2.data?.logoWithText;
-        globalStore.themeConfig.favicon = res2.data?.favicon;
-        globalStore.themeConfig.loginImage = res2.data?.loginImage;
-        globalStore.themeConfig.loginBgType = res2.data?.loginBgType;
-        globalStore.themeConfig.loginBackground = res2.data?.loginBackground;
-        globalStore.themeConfig.loginBtnLinkColor = res2.data?.loginBtnLinkColor;
-        globalStore.themeConfig.themeColor = res2.data?.themeColor;
-        globalStore.masterAlias = res2.data.masterAlias;
+        themeConfig.value.title = res2.data?.title;
+        themeConfig.value.logo = res2.data?.logo;
+        themeConfig.value.logoWithText = res2.data?.logoWithText;
+        themeConfig.value.favicon = res2.data?.favicon;
+        themeConfig.value.loginImage = res2.data?.loginImage;
+        themeConfig.value.loginBgType = res2.data?.loginBgType;
+        themeConfig.value.loginBackground = res2.data?.loginBackground;
+        themeConfig.value.loginBtnLinkColor = res2.data?.loginBtnLinkColor;
+        themeConfig.value.themeColor = res2.data?.themeColor;
+        masterAlias.value = res2.data.masterAlias;
         if (res2.data?.theme) {
-            globalStore.themeConfig.theme = res2.data.theme;
+            themeConfig.value.theme = res2.data.theme;
         }
-        globalStore.watermarkShow = res2.data.watermarkShow === 'Enable';
+        watermarkShow.value = res2.data.watermarkShow === 'Enable';
         try {
-            globalStore.watermark = JSON.parse(res2.data.watermark);
+            watermark.value = JSON.parse(res2.data.watermark);
         } catch {
-            globalStore.watermark = null;
+            watermark.value = null;
         }
     } else {
         resetXSetting();
     }
-    switchTheme();
+    useTheme().switchTheme();
     initFavicon();
 }
 
diff --git a/frontend/src/views/ai/agents/agent/components/terminal.vue b/frontend/src/views/ai/agents/agent/components/terminal.vue
index e8d455265acc..c074c6e69cc7 100644
--- a/frontend/src/views/ai/agents/agent/components/terminal.vue
+++ b/frontend/src/views/ai/agents/agent/components/terminal.vue
@@ -5,7 +5,7 @@
         @close="handleClose"
         :resource="title"
         fullScreen
-        :size="globalStore.isFullScreen ? 'full' : 'large'"
+        :size="isFullScreen ? 'full' : 'large'"
         :autoClose="false"
     >
         <template #content>
@@ -33,7 +33,7 @@ import { nextTick, reactive, ref } from 'vue';
 import Terminal from '@/components/terminal/index.vue';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const { globalStore, currentNode } = useGlobalStore();
+const { currentNode, isFullScreen } = useGlobalStore();
 
 const title = ref('');
 const terminalVisible = ref(false);
diff --git a/frontend/src/views/ai/agents/agent/index.vue b/frontend/src/views/ai/agents/agent/index.vue
index fb6395e5c6b7..410fdd49148f 100644
--- a/frontend/src/views/ai/agents/agent/index.vue
+++ b/frontend/src/views/ai/agents/agent/index.vue
@@ -262,7 +262,7 @@ import NoApp from '@/views/app-store/apps/no-app/index.vue';
 import openclawIcon from '@/assets/images/ai-agent-openclaw.svg';
 import copawIcon from '@/assets/images/ai-agent-copaw.svg';
 import hermesIcon from '@/assets/images/ai-agent-hermes-agent.svg';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
 const items = ref<AI.AgentItem[]>([]);
 const loading = ref(false);
@@ -287,7 +287,7 @@ const searchName = ref('');
 const defaultHttpsPort = ref(443);
 const openrestyPortLoaded = ref(false);
 const websiteDomainsMap = ref<Record<number, Website.Domain[]>>({});
-const globalStore = GlobalStore();
+const { isAdminOrNodeAdmin } = useGlobalStore();
 
 const headerButtons = [
     {
@@ -306,7 +306,7 @@ const buttons = [
     {
         label: i18n.global.t('aiTools.agents.hermesChatAction'),
         click: (row: AI.AgentItem) => openHermesChat(row),
-        disabled: () => !globalStore.isAdminOrNodeAdmin,
+        disabled: () => !isAdminOrNodeAdmin.value,
         show: (row: AI.AgentItem) => row.agentType === 'hermes-agent' && row.status === 'Running',
     },
     {
@@ -316,7 +316,7 @@ const buttons = [
     {
         label: i18n.global.t('menu.terminal'),
         click: (row: AI.AgentItem) => openTerminal(row),
-        disabled: () => !globalStore.isAdminOrNodeAdmin,
+        disabled: () => !isAdminOrNodeAdmin.value,
     },
     {
         label: i18n.global.t('menu.home'),
diff --git a/frontend/src/views/ai/model/ollama/conn/index.vue b/frontend/src/views/ai/model/ollama/conn/index.vue
index ef324b41d957..c607916424b9 100644
--- a/frontend/src/views/ai/model/ollama/conn/index.vue
+++ b/frontend/src/views/ai/model/ollama/conn/index.vue
@@ -70,8 +70,8 @@ import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { getAgentSettingInfo } from '@/api/modules/setting';
 import { getBindDomain } from '@/api/modules/ai';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { currentNode } = useGlobalStore();
 
 const loading = ref(false);
 
@@ -106,8 +106,8 @@ const handleClose = () => {
 };
 
 const loadSystemIP = async () => {
-    if (globalStore.currentNode !== 'local') {
-        form.systemIP = globalStore.currentNode || i18n.global.t('database.localIP');
+    if (currentNode.value !== 'local') {
+        form.systemIP = currentNode.value || i18n.global.t('database.localIP');
         return;
     }
     const res = await getAgentSettingInfo();
diff --git a/frontend/src/views/app-store/detail/form/index.vue b/frontend/src/views/app-store/detail/form/index.vue
index 04220d5b81da..0963d3757744 100644
--- a/frontend/src/views/app-store/detail/form/index.vue
+++ b/frontend/src/views/app-store/detail/form/index.vue
@@ -123,7 +123,7 @@
                 </el-form-item>
 
                 <PushToNode
-                    v-if="globalStore.isMaster && globalStore.isXpackOrEE() && batchInstallSupport"
+                    v-if="isMaster && isXpackOrEE && batchInstallSupport"
                     :push-node="formData.pushNode"
                     :nodes="formData.nodes"
                     type="app"
@@ -156,8 +156,8 @@ import { Container } from '@/api/interface/container';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
 import { computeSizeFromMB } from '@/utils/size';
 import { loadResourceLimit } from '@/api/modules/container';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { isMaster, isOffline, isXpackOrEE } = useGlobalStore();
 
 const PushToNode = defineAsyncComponent(async () => {
     const modules = import.meta.glob('@/xpack/views/ssl/index.vue');
@@ -322,7 +322,7 @@ const initForm = async (appKey: string) => {
         formData.value.version = defaultVersion;
         getVersionDetail(defaultVersion);
     }
-    if (globalStore.isOffline) {
+    if (isOffline.value) {
         formData.value.pullImage = false;
     }
 };
diff --git a/frontend/src/views/app-store/installed/app/header.vue b/frontend/src/views/app-store/installed/app/header.vue
index 0003830a2aa2..2cb3ea92c67e 100644
--- a/frontend/src/views/app-store/installed/app/header.vue
+++ b/frontend/src/views/app-store/installed/app/header.vue
@@ -63,7 +63,7 @@
                             type="primary"
                             link
                             @click="$emit('openTerminal')"
-                            :disabled="installed.status !== 'Running' || !globalStore.isAdminOrNodeAdmin"
+                            :disabled="installed.status !== 'Running' || !isAdminOrNodeAdmin"
                         >
                             <el-icon>
                                 <SvgIcon iconName="p-terminal2" />
@@ -166,9 +166,9 @@
 
 <script lang="ts" setup>
 import { App } from '@/api/interface/app';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const globalStore = GlobalStore();
+const { isAdminOrNodeAdmin } = useGlobalStore();
 
 interface Props {
     installed: App.AppInstalled;
diff --git a/frontend/src/views/app-store/setting/index.vue b/frontend/src/views/app-store/setting/index.vue
index 2e610b43c9db..a83ad2bbe6b9 100644
--- a/frontend/src/views/app-store/setting/index.vue
+++ b/frontend/src/views/app-store/setting/index.vue
@@ -52,7 +52,7 @@
                                 @change="updateConfig('InstallAllowPort', config.installAllowPort)"
                             />
                         </el-form-item>
-                        <CustomSetting v-if="globalStore.isXpackOrEE()" />
+                        <CustomSetting v-if="isXpackOrEE" />
                         <span class="input-help logText" v-else>
                             {{ $t('xpack.customApp.licenseHelper') }}
                             <el-link class="link" @click="toUpload" type="primary">
@@ -75,8 +75,8 @@ import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
 import { defineAsyncComponent } from 'vue';
 import { loadOptionalComponent } from '@/extensions/optional';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { isXpackOrEE } = useGlobalStore();
 
 const CustomSetting = defineAsyncComponent(() => loadOptionalComponent('/src/xpack/views/appstore/index.vue'));
 
@@ -115,7 +115,7 @@ const toUpload = () => {
 };
 
 const getNodeConfig = async () => {
-    if (globalStore.isXpackOrEE()) {
+    if (isXpackOrEE.value) {
         return;
     }
     const res = await getCurrentNodeCustomAppConfig();
diff --git a/frontend/src/views/container/compose/index.vue b/frontend/src/views/container/compose/index.vue
index d104d467e869..bc3fa75478ee 100644
--- a/frontend/src/views/container/compose/index.vue
+++ b/frontend/src/views/container/compose/index.vue
@@ -294,7 +294,7 @@
                                         <el-button
                                             type="primary"
                                             link
-                                            :disabled="!globalStore.isAdminOrNodeAdmin"
+                                            :disabled="!isAdminOrNodeAdmin"
                                             @click="onOpenTerminal(row)"
                                         >
                                             {{ $t('menu.terminal') }}
@@ -512,9 +512,9 @@ import { newUUID } from '@/utils/id';
 import { Rules } from '@/global/form-rules';
 import { loadBaseDir } from '@/api/modules/setting';
 import { ElCheckbox, ElForm } from 'element-plus';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const globalStore = GlobalStore();
+const { currentNode, isAdminOrNodeAdmin } = useGlobalStore();
 
 const data = ref<any[]>([]);
 const loading = ref(false);
@@ -783,7 +783,7 @@ const onBackupList = (row: Container.ComposeInfo) => {
         type: 'compose',
         name: row.name,
         detailName: '',
-        node: globalStore.currentNode,
+        node: currentNode.value,
     });
 };
 
@@ -793,7 +793,7 @@ const onImportCompose = () => {
         name: '',
         detailName: '',
         remark: '.tar.gz',
-        node: globalStore.currentNode,
+        node: currentNode.value,
     });
 };
 
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index d8091220fe66..ec45a97069b5 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -437,17 +437,14 @@ import {
 import { Container } from '@/api/interface/container';
 import i18n from '@/lang';
 import { MsgSuccess, MsgWarning } from '@/utils/message';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { routerToName, routerToNameWithQuery } from '@/utils/router';
 import router from '@/routers';
 import { computeSize2, computeSizeForDocker, computeCPU } from '@/utils/size';
 import { newUUID } from '@/utils/id';
 import { updateCommonDescription } from '@/api/modules/setting';
-import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const { isMobile } = useGlobalStore();
-const globalStore = GlobalStore();
-const hasFilePermission = useCan('host_file_view');
+const { currentNode, isAdminOrNodeAdmin, isMobile } = useGlobalStore();
 
 const isActive = ref(false);
 const isExist = ref(false);
@@ -724,7 +721,7 @@ const onImportCreate = () => {
         name: '',
         detailName: '',
         remark: '.tar.gz',
-        node: globalStore.currentNode,
+        node: currentNode.value,
     });
 };
 
@@ -848,7 +845,7 @@ const buttons = [
     {
         label: i18n.global.t('menu.terminal'),
         disabled: (row: Container.ContainerInfo) => {
-            return row.state !== 'running' || !globalStore.isAdminOrNodeAdmin;
+            return row.state !== 'running' || !isAdminOrNodeAdmin.value;
         },
         click: (row: Container.ContainerInfo) => {
             onTerminal(row);
@@ -862,8 +859,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('home.dir'),
+        permission: 'host_file_view',
         disabled: (row: Container.ContainerInfo) => {
-            return row.state !== 'running' || !hasFilePermission.value;
+            return row.state !== 'running';
         },
         click: (row: Container.ContainerInfo) => {
             onOpenFileBrowser(row);
diff --git a/frontend/src/views/container/container/operate/index.vue b/frontend/src/views/container/container/operate/index.vue
index edc6a0cdbe2a..305fccdfd03e 100644
--- a/frontend/src/views/container/container/operate/index.vue
+++ b/frontend/src/views/container/container/operate/index.vue
@@ -25,7 +25,7 @@
 
                                 <el-button
                                     v-if="isCreate"
-                                    :disabled="!globalStore.isAdminOrNodeAdmin"
+                                    :disabled="!isAdminOrNodeAdmin"
                                     type="primary"
                                     icon="EditPen"
                                     plain
@@ -369,9 +369,9 @@ import { newUUID } from '@/utils/id';
 import router from '@/routers';
 import TerminalDialog from '@/views/host/file-management/terminal/index.vue';
 import { routerToName, routerToNameWithQuery } from '@/utils/router';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const globalStore = GlobalStore();
+const { isAdminOrNodeAdmin } = useGlobalStore();
 
 const loading = ref(false);
 const isCreate = ref();
diff --git a/frontend/src/views/container/setting/index.vue b/frontend/src/views/container/setting/index.vue
index d17c20c9cb18..dcbe5e5a0e11 100644
--- a/frontend/src/views/container/setting/index.vue
+++ b/frontend/src/views/container/setting/index.vue
@@ -74,7 +74,7 @@
                                     </template>
                                 </el-input>
                                 <span class="input-help">{{ $t('container.mirrorsHelper') }}</span>
-                                <span class="input-help flex flx-align-center" v-if="!globalStore.isFxplay">
+                                <span class="input-help flex flx-align-center" v-if="!isFxplay">
                                     {{ $t('container.mirrorsHelper2') }}
                                     <el-link class="p-ml-5 text-xs" icon="Position" @click="toDoc()" type="primary">
                                         {{ $t('firewall.quickJump') }}
@@ -257,11 +257,9 @@ import {
 import { getAgentSettingInfo } from '@/api/modules/setting';
 import { MsgSuccess } from '@/utils/message';
 import { checkNumberRange } from '@/global/form-rules';
-import { GlobalStore } from '@/store';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const { isMobile } = useGlobalStore();
-const globalStore = GlobalStore();
+const { docsUrl, isFxplay, isMobile, openMenuTabs } = useGlobalStore();
 
 const unset = ref(i18n.global.t('setting.unSetting'));
 const submitInput = ref();
@@ -327,7 +325,7 @@ const onSaveFile = async () => {
 };
 
 const loadHeight = () => {
-    return globalStore.openMenuTabs ? 450 : 430;
+    return openMenuTabs.value ? 450 : 430;
 };
 
 const onChangeMirrors = () => {
@@ -436,7 +434,7 @@ const save = async (key: string, value: string) => {
 };
 
 const toDoc = () => {
-    window.open(globalStore.docsUrl + '/user_manual/containers/setting/', '_blank', 'noopener,noreferrer');
+    window.open(docsUrl.value + '/user_manual/containers/setting/', '_blank', 'noopener,noreferrer');
 };
 
 const onOperator = async (operation: string) => {
diff --git a/frontend/src/views/container/setting/ipv6/index.vue b/frontend/src/views/container/setting/ipv6/index.vue
index 212c508c0677..076a65132841 100644
--- a/frontend/src/views/container/setting/ipv6/index.vue
+++ b/frontend/src/views/container/setting/ipv6/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <DrawerPro v-model="drawerVisible" header="IPv6" @close="handleClose" size="small">
-            <el-alert class="common-prompt" :closable="false" type="warning" v-if="!globalStore.isFxplay">
+            <el-alert class="common-prompt" :closable="false" type="warning" v-if="!isFxplay">
                 <template #default>
                     <span class="input-help">
                         {{ $t('container.ipv6Helper') }}
@@ -54,8 +54,8 @@ import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { updateIpv6Option } from '@/api/modules/container';
 import { checkIpV6 } from '@/utils/validate';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { docsUrl, isFxplay } = useGlobalStore();
 
 const loading = ref();
 const drawerVisible = ref();
@@ -93,7 +93,7 @@ function checkFixedCidrV6(rule: any, value: any, callback: any) {
 }
 
 const toDoc = () => {
-    window.open(globalStore.docsUrl + '/user_manual/containers/setting/', '_blank', 'noopener,noreferrer');
+    window.open(docsUrl.value + '/user_manual/containers/setting/', '_blank', 'noopener,noreferrer');
 };
 
 const emit = defineEmits<{ (e: 'search'): void }>();
diff --git a/frontend/src/views/cronjob/cronjob/backup/index.vue b/frontend/src/views/cronjob/cronjob/backup/index.vue
index 23b42590a8b6..ad2d17f7bb3c 100644
--- a/frontend/src/views/cronjob/cronjob/backup/index.vue
+++ b/frontend/src/views/cronjob/cronjob/backup/index.vue
@@ -61,8 +61,8 @@ import i18n from '@/lang';
 import { downloadBackupRecord, loadRecordSize, searchBackupRecordsByCronjob } from '@/api/modules/backup';
 import { Backup } from '@/api/interface/backup';
 import { MsgError } from '@/utils/message';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { currentNode } = useGlobalStore();
 
 const selects = ref<any>([]);
 const loading = ref();
@@ -148,7 +148,7 @@ const onDownload = async (row: Backup.RecordInfo) => {
     await downloadBackupRecord(params)
         .then(async (res) => {
             loading.value = false;
-            downloadFile(res.data, globalStore.currentNode);
+            downloadFile(res.data, currentNode.value);
         })
         .catch(() => {
             loading.value = false;
diff --git a/frontend/src/views/cronjob/cronjob/operate/index.vue b/frontend/src/views/cronjob/cronjob/operate/index.vue
index c5f57b9be0d1..95573c092272 100644
--- a/frontend/src/views/cronjob/cronjob/operate/index.vue
+++ b/frontend/src/views/cronjob/cronjob/operate/index.vue
@@ -724,19 +724,19 @@
                                             />
                                             <el-option
                                                 value="weCom"
-                                                v-if="!globalStore.isIntl"
+                                                v-if="!isIntl"
                                                 :disabled="!form.hasAlert || !isProductPro"
                                                 :label="$t('xpack.alert.weCom')"
                                             />
                                             <el-option
                                                 value="dingTalk"
-                                                v-if="!globalStore.isIntl"
+                                                v-if="!isIntl"
                                                 :disabled="!form.hasAlert || !isProductPro"
                                                 :label="$t('xpack.alert.dingTalk')"
                                             />
                                             <el-option
                                                 value="feiShu"
-                                                v-if="!globalStore.isIntl"
+                                                v-if="!isIntl"
                                                 :disabled="!form.hasAlert || !isProductPro"
                                                 :label="$t('xpack.alert.feiShu')"
                                             />
@@ -747,7 +747,7 @@
                                             />
                                             <el-option
                                                 value="sms"
-                                                v-if="!globalStore.isIntl"
+                                                v-if="!isIntl"
                                                 :disabled="!form.hasAlert || !isProductPro"
                                                 :label="$t('xpack.alert.sms')"
                                             />
@@ -863,8 +863,7 @@ import {
 } from '../helper';
 import { loadUsers } from '@/api/modules/toolbox';
 import { loadContainerUsers } from '@/api/modules/container';
-import { storeToRefs } from 'pinia';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import LicenseImport from '@/components/license-import/index.vue';
 import { splitTimeFromSecond, transferTimeToSecond } from '@/utils/validate';
 import { getGroupList } from '@/api/modules/group';
@@ -872,12 +871,11 @@ import { routerToName, routerToPath } from '@/utils/router';
 import { loadBaseDir } from '@/api/modules/setting';
 const router = useRouter();
 
-const globalStore = GlobalStore();
+const { docsUrl, isFxplay, isIntl, isProductPro } = useGlobalStore();
 const licenseRef = ref();
 const scriptFileRef = ref();
 const dirRef = ref();
 const fileRef = ref();
-const { isProductPro, isFxplay } = storeToRefs(globalStore);
 const loading = ref();
 const nextTimes = ref([]);
 
@@ -1260,7 +1258,7 @@ type FormInstance = InstanceType<typeof ElForm>;
 const formRef = ref<FormInstance>();
 
 const toDoc = () => {
-    window.open(globalStore.docsUrl + '/user_manual/cronjobs/', '_blank', 'noopener,noreferrer');
+    window.open(docsUrl.value + '/user_manual/cronjobs/', '_blank', 'noopener,noreferrer');
 };
 
 const loadDir = async (path: string) => {
diff --git a/frontend/src/views/cronjob/library/index.vue b/frontend/src/views/cronjob/library/index.vue
index 8c2d1700a6fa..0483e61bd3fb 100644
--- a/frontend/src/views/cronjob/library/index.vue
+++ b/frontend/src/views/cronjob/library/index.vue
@@ -131,16 +131,14 @@ import { deleteScript, searchScript, syncScript } from '@/api/modules/cronjob';
 import { onMounted, reactive, ref } from 'vue';
 import { Cronjob } from '@/api/interface/cronjob';
 import i18n from '@/lang';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { getGroupList } from '@/api/modules/group';
 import CodemirrorDrawer from '@/components/codemirror-pro/drawer.vue';
 import { MsgSuccess } from '@/utils/message';
 import { getSettingBaseInfo, updateSetting } from '@/api/modules/setting';
-import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const { isMobile } = useGlobalStore();
+const { globalStore, currentNode, isAdminOrNodeAdmin, isMobile } = useGlobalStore();
 
-const globalStore = GlobalStore();
 const myDetail = ref();
 
 const loading = ref();
@@ -306,12 +304,12 @@ const buttons = [
     {
         label: i18n.global.t('commons.button.handle'),
         disabled: () => {
-            return !globalStore.isAdminOrNodeAdmin;
+            return !isAdminOrNodeAdmin.value;
         },
         click: (row: Cronjob.ScriptInfo) => {
             ElMessageBox.confirm(
                 i18n.global.t('cronjob.library.handleHelper', [
-                    globalStore.currentNode === 'local' ? globalStore.getMasterAlias() : globalStore.currentNode,
+                    currentNode.value === 'local' ? globalStore.getMasterAlias() : currentNode.value,
                     row.name,
                 ]),
                 i18n.global.t('commons.button.handle'),
diff --git a/frontend/src/views/cronjob/library/run/index.vue b/frontend/src/views/cronjob/library/run/index.vue
index d9fb24350b82..84c393655d8e 100644
--- a/frontend/src/views/cronjob/library/run/index.vue
+++ b/frontend/src/views/cronjob/library/run/index.vue
@@ -22,9 +22,9 @@
 <script lang="ts" setup>
 import { ref, nextTick } from 'vue';
 import Terminal from '@/components/terminal/index.vue';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const globalStore = GlobalStore();
+const { currentNode } = useGlobalStore();
 const terminalVisible = ref(false);
 const terminalRef = ref<InstanceType<typeof Terminal> | null>(null);
 const scriptID = ref();
@@ -45,7 +45,7 @@ const initTerm = async () => {
     await nextTick();
     terminalRef.value!.acceptParams({
         endpoint: '/api/v2/core/script/run',
-        args: `script_id=${scriptID.value}&current_node=${globalStore.currentNode}`,
+        args: `script_id=${scriptID.value}&current_node=${currentNode.value}`,
         error: '',
         initCmd: '',
     });
diff --git a/frontend/src/views/database/mongodb/conn/index.vue b/frontend/src/views/database/mongodb/conn/index.vue
index 5a8c7b33cf2f..cd502066759d 100644
--- a/frontend/src/views/database/mongodb/conn/index.vue
+++ b/frontend/src/views/database/mongodb/conn/index.vue
@@ -141,9 +141,9 @@ import { getRandomStr } from '@/utils/id';
 import { getAgentSettingInfo } from '@/api/modules/setting';
 import { copyText } from '@/utils/clipboard';
 import i18n from '@/lang';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const globalStore = GlobalStore();
+const { currentNodeAddr } = useGlobalStore();
 const loading = ref(false);
 const dialogVisible = ref(false);
 
@@ -193,7 +193,7 @@ const random = () => {
 
 const loadSystemIP = async () => {
     const res = await getAgentSettingInfo();
-    form.systemIP = res.data.systemIP || globalStore.currentNodeAddr || i18n.global.t('database.localIP');
+    form.systemIP = res.data.systemIP || currentNodeAddr.value || i18n.global.t('database.localIP');
 };
 
 const loadConnInfo = async () => {
diff --git a/frontend/src/views/database/mongodb/index.vue b/frontend/src/views/database/mongodb/index.vue
index e199721d9d00..d15653bf0a3f 100644
--- a/frontend/src/views/database/mongodb/index.vue
+++ b/frontend/src/views/database/mongodb/index.vue
@@ -51,10 +51,7 @@
                     type="primary"
                     plain
                     :disabled="
-                        !currentDB ||
-                        currentDB.from !== 'local' ||
-                        mongodbStatus !== 'Running' ||
-                        !globalStore.isAdminOrNodeAdmin
+                        !currentDB || currentDB.from !== 'local' || mongodbStatus !== 'Running' || !isAdminOrNodeAdmin
                     "
                     @click="goTerminal"
                 >
@@ -357,13 +354,10 @@ import {
 } from '@/api/modules/database';
 import { MsgSuccess } from '@/utils/message';
 import { routerToName, routerToNameWithQuery } from '@/utils/router';
-import { GlobalStore } from '@/store';
-import Tooltip from '@/components/tooltip/index.vue';
 import { useGlobalStore } from '@/composables/useGlobalStore';
+import Tooltip from '@/components/tooltip/index.vue';
 
-const { isMobile } = useGlobalStore();
-
-const globalStore = GlobalStore();
+const { currentMongodbDB, isAdminOrNodeAdmin, isMobile } = useGlobalStore();
 
 const loading = ref(false);
 const maskShow = ref(true);
@@ -488,7 +482,7 @@ const loadMongoExpressPort = async () => {
 
 const goRemoteDB = async () => {
     if (currentDB.value) {
-        globalStore.currentMongodbDB = currentDBName.value;
+        currentMongodbDB.value = currentDBName.value;
     }
     routerToName('MongoDB-Remote');
 };
@@ -619,7 +613,7 @@ const changeDatabase = async () => {
         if (item.database === currentDBName.value) {
             currentDB.value = item;
             appName.value = item.database;
-            globalStore.currentMongodbDB = item.database;
+            currentMongodbDB.value = item.database;
             await nextTick();
             appStatusRef.value?.onCheck('mongodb', item.database);
             return;
@@ -631,7 +625,7 @@ const changeDatabase = async () => {
             appName.value = '';
             mongodbStatus.value = '';
             maskShow.value = false;
-            globalStore.currentMongodbDB = item.database;
+            currentMongodbDB.value = item.database;
             await loadData(true);
             return;
         }
@@ -645,7 +639,7 @@ const loadDBOptions = async () => {
         dbOptionsLocal.value = [];
         dbOptionsRemote.value = [];
         currentDB.value = undefined;
-        currentDBName.value = globalStore.currentMongodbDB;
+        currentDBName.value = currentMongodbDB.value;
         for (const item of datas) {
             if (currentDBName.value && item.database === currentDBName.value) {
                 currentDB.value = item;
@@ -670,7 +664,7 @@ const loadDBOptions = async () => {
             appName.value = '';
         }
         if (currentDB.value) {
-            globalStore.currentMongodbDB = currentDBName.value;
+            currentMongodbDB.value = currentDBName.value;
             if (currentDB.value.from === 'remote') {
                 maskShow.value = false;
                 await loadData(true);
diff --git a/frontend/src/views/database/mysql/conn/index.vue b/frontend/src/views/database/mysql/conn/index.vue
index 2b31da071f07..cfb2b103f705 100644
--- a/frontend/src/views/database/mysql/conn/index.vue
+++ b/frontend/src/views/database/mysql/conn/index.vue
@@ -138,8 +138,8 @@ import { MsgSuccess } from '@/utils/message';
 import { getRandomStr } from '@/utils/id';
 import { copyText } from '@/utils/clipboard';
 import { getAgentSettingInfo } from '@/api/modules/setting';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { currentNodeAddr } = useGlobalStore();
 
 const loading = ref(false);
 
@@ -217,7 +217,7 @@ const loadAccess = async () => {
 
 const loadSystemIP = async () => {
     const res = await getAgentSettingInfo();
-    form.systemIP = res.data.systemIP || globalStore.currentNodeAddr || i18n.global.t('database.localIP');
+    form.systemIP = res.data.systemIP || currentNodeAddr.value || i18n.global.t('database.localIP');
 };
 
 const loadPassword = async () => {
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index 8f2f2737007b..006c1748946d 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -50,7 +50,7 @@
                 </el-button>
                 <el-button
                     @click="goTerminal()"
-                    :disabled="currentDB?.from !== 'local' || !globalStore.isAdminOrNodeAdmin"
+                    :disabled="currentDB?.from !== 'local' || !isAdminOrNodeAdmin"
                     type="primary"
                     plain
                 >
@@ -301,12 +301,10 @@ import { Database } from '@/api/interface/database';
 import { App } from '@/api/interface/app';
 import { getAppPort } from '@/api/modules/app';
 import { MsgSuccess } from '@/utils/message';
-import { GlobalStore } from '@/store';
-import { routerToName, routerToNameWithParams, routerToNameWithQuery } from '@/utils/router';
 import { useGlobalStore } from '@/composables/useGlobalStore';
+import { routerToName, routerToNameWithParams, routerToNameWithQuery } from '@/utils/router';
 
-const { isMobile } = useGlobalStore();
-const globalStore = GlobalStore();
+const { currentDB: globalCurrentDB, isAdminOrNodeAdmin, isMobile } = useGlobalStore();
 
 const loading = ref(false);
 const maskShow = ref(true);
@@ -383,7 +381,7 @@ const mysqlName = (appType: string) => {
 
 const goRemoteDB = async () => {
     if (currentDB.value) {
-        globalStore.currentDB = currentDB.value.database;
+        globalCurrentDB.value = currentDB.value.database;
     }
     routerToName('MySQL-Remote');
 };
@@ -396,7 +394,7 @@ const passwordRef = ref();
 
 const onSetting = async () => {
     if (currentDB.value) {
-        globalStore.currentDB = currentDB.value.database;
+        globalCurrentDB.value = currentDB.value.database;
     }
     routerToNameWithParams('MySQL-Setting', { type: currentDB.value.type, database: currentDB.value.database });
 };
@@ -405,7 +403,7 @@ const changeDatabase = async () => {
     for (const item of dbOptionsLocal.value) {
         if (item.database == currentDBName.value) {
             currentDB.value = item;
-            globalStore.currentDB = currentDB.value.database;
+            globalCurrentDB.value = currentDB.value.database;
             appKey.value = item.type;
             appName.value = item.database;
             search();
@@ -417,7 +415,7 @@ const changeDatabase = async () => {
         if (item.database == currentDBName.value) {
             maskShow.value = false;
             currentDB.value = item;
-            globalStore.currentDB = currentDB.value.database;
+            globalCurrentDB.value = currentDB.value.database;
             break;
         }
     }
@@ -522,7 +520,7 @@ const loadDBOptions = async () => {
         let datas = res.data || [];
         dbOptionsLocal.value = [];
         dbOptionsRemote.value = [];
-        currentDBName.value = globalStore.currentDB;
+        currentDBName.value = globalCurrentDB.value;
         for (const item of datas) {
             if (currentDBName.value && item.database === currentDBName.value) {
                 currentDB.value = item;
diff --git a/frontend/src/views/database/postgresql/conn/index.vue b/frontend/src/views/database/postgresql/conn/index.vue
index 7d49ead69785..89c29186fcf8 100644
--- a/frontend/src/views/database/postgresql/conn/index.vue
+++ b/frontend/src/views/database/postgresql/conn/index.vue
@@ -135,8 +135,8 @@ import { MsgSuccess } from '@/utils/message';
 import { getRandomStr } from '@/utils/id';
 import { copyText } from '@/utils/clipboard';
 import { getAgentSettingInfo } from '@/api/modules/setting';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { currentNodeAddr } = useGlobalStore();
 
 const loading = ref(false);
 
@@ -210,7 +210,7 @@ const loadAccess = async () => {
 
 const loadSystemIP = async () => {
     const res = await getAgentSettingInfo();
-    form.systemIP = res.data.systemIP || globalStore.currentNodeAddr || i18n.global.t('database.localIP');
+    form.systemIP = res.data.systemIP || currentNodeAddr.value || i18n.global.t('database.localIP');
 };
 
 const loadPassword = async () => {
diff --git a/frontend/src/views/database/postgresql/index.vue b/frontend/src/views/database/postgresql/index.vue
index 8d3c7c77fdd5..67d0eb58054c 100644
--- a/frontend/src/views/database/postgresql/index.vue
+++ b/frontend/src/views/database/postgresql/index.vue
@@ -48,7 +48,7 @@
                 </el-button>
                 <el-button
                     @click="goTerminal()"
-                    :disabled="currentDB?.from !== 'local' || !globalStore.isAdminOrNodeAdmin"
+                    :disabled="currentDB?.from !== 'local' || !isAdminOrNodeAdmin"
                     type="primary"
                     plain
                 >
@@ -268,12 +268,10 @@ import { Database } from '@/api/interface/database';
 import { App } from '@/api/interface/app';
 import { getAppPort } from '@/api/modules/app';
 import { MsgSuccess } from '@/utils/message';
-import { GlobalStore } from '@/store';
-import { routerToName, routerToNameWithParams, routerToNameWithQuery } from '@/utils/router';
 import { useGlobalStore } from '@/composables/useGlobalStore';
+import { routerToName, routerToNameWithParams, routerToNameWithQuery } from '@/utils/router';
 
-const { isMobile } = useGlobalStore();
-const globalStore = GlobalStore();
+const { currentPgDB, isAdminOrNodeAdmin, isMobile } = useGlobalStore();
 
 const loading = ref(false);
 const maskShow = ref(true);
@@ -342,7 +340,7 @@ const onChangeConn = async () => {
 
 const goRemoteDB = async () => {
     if (currentDB.value) {
-        globalStore.currentPgDB = currentDB.value.database;
+        currentPgDB.value = currentDB.value.database;
     }
     routerToName('PostgreSQL-Remote');
 };
@@ -355,7 +353,7 @@ const passwordRef = ref();
 
 const onSetting = async () => {
     if (currentDB.value) {
-        globalStore.currentPgDB = currentDB.value.database;
+        currentPgDB.value = currentDB.value.database;
     }
     routerToNameWithParams('PostgreSQL-Setting', { type: currentDB.value.type, database: currentDB.value.database });
 };
@@ -364,7 +362,7 @@ const changeDatabase = async () => {
     for (const item of dbOptionsLocal.value) {
         if (item.database == currentDBName.value) {
             currentDB.value = item;
-            globalStore.currentPgDB = currentDB.value.database;
+            currentPgDB.value = currentDB.value.database;
             appKey.value = item.type;
             appName.value = item.database;
             search();
@@ -376,7 +374,7 @@ const changeDatabase = async () => {
         if (item.database == currentDBName.value) {
             maskShow.value = false;
             currentDB.value = item;
-            globalStore.currentPgDB = currentDB.value.database;
+            currentPgDB.value = currentDB.value.database;
             break;
         }
     }
@@ -470,7 +468,7 @@ const loadDBOptions = async () => {
         let datas = res.data || [];
         dbOptionsLocal.value = [];
         dbOptionsRemote.value = [];
-        currentDBName.value = globalStore.currentPgDB;
+        currentDBName.value = currentPgDB.value;
         for (const item of datas) {
             if (currentDBName.value && item.database === currentDBName.value) {
                 currentDB.value = item;
diff --git a/frontend/src/views/database/redis/conn/index.vue b/frontend/src/views/database/redis/conn/index.vue
index 53dec1bcd9ac..12c80ebe3fb9 100644
--- a/frontend/src/views/database/redis/conn/index.vue
+++ b/frontend/src/views/database/redis/conn/index.vue
@@ -126,8 +126,8 @@ import { MsgSuccess } from '@/utils/message';
 import { getRandomStr } from '@/utils/id';
 import { copyText } from '@/utils/clipboard';
 import { getAgentSettingInfo } from '@/api/modules/setting';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { currentNodeAddr } = useGlobalStore();
 
 const loading = ref(false);
 
@@ -194,7 +194,7 @@ const loadPassword = async () => {
 
 const loadSystemIP = async () => {
     const res = await getAgentSettingInfo();
-    form.systemIP = res.data.systemIP || globalStore.currentNodeAddr || i18n.global.t('database.localIP');
+    form.systemIP = res.data.systemIP || currentNodeAddr.value || i18n.global.t('database.localIP');
 };
 
 function loadRedisInfo(isContainer: boolean) {
diff --git a/frontend/src/views/database/redis/index.vue b/frontend/src/views/database/redis/index.vue
index a67bd66c99ab..c9bce01d5e29 100644
--- a/frontend/src/views/database/redis/index.vue
+++ b/frontend/src/views/database/redis/index.vue
@@ -145,14 +145,14 @@ import AppStatus from '@/components/app-status/index.vue';
 import QuickCmd from '@/views/database/redis/command/index.vue';
 import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
 import { checkAppInstalled } from '@/api/modules/app';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { listDatabases, checkRedisCli, installRedisCli } from '@/api/modules/database';
 import { Database } from '@/api/interface/database';
 import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
 import { getCommandList } from '@/api/modules/command';
 import { routerToName, routerToNameWithQuery } from '@/utils/router';
-const globalStore = GlobalStore();
+const { currentRedisDB, openMenuTabs } = useGlobalStore();
 
 const loading = ref(false);
 
@@ -192,7 +192,7 @@ const onSetting = async () => {
 };
 
 const loadHeight = () => {
-    return globalStore.openMenuTabs ? '470px' : '380px';
+    return openMenuTabs.value ? '470px' : '380px';
 };
 
 const getAppDetail = (key: string) => {
@@ -200,7 +200,7 @@ const getAppDetail = (key: string) => {
 };
 const goRemoteDB = async () => {
     if (currentDB.value) {
-        globalStore.currentRedisDB = currentDBName.value;
+        currentRedisDB.value = currentDBName.value;
     }
     routerToName('Redis-Remote');
 };
@@ -226,7 +226,7 @@ const changeDatabase = async () => {
     for (const item of dbOptionsLocal.value) {
         if (item.database == currentDBName.value) {
             currentDB.value = item;
-            globalStore.currentRedisDB = currentDB.value.database;
+            currentRedisDB.value = currentDB.value.database;
             appKey.value = item.type;
             appName.value = item.database;
             appStatusRef.value?.onCheck(appKey.value, appName.value);
@@ -237,7 +237,7 @@ const changeDatabase = async () => {
     for (const item of dbOptionsRemote.value) {
         if (item.database == currentDBName.value) {
             currentDB.value = item;
-            globalStore.currentRedisDB = currentDB.value.database;
+            currentRedisDB.value = currentDB.value.database;
             break;
         }
     }
@@ -250,7 +250,7 @@ const loadDBOptions = async () => {
         let datas = res.data || [];
         dbOptionsLocal.value = [];
         dbOptionsRemote.value = [];
-        currentDBName.value = globalStore.currentRedisDB;
+        currentDBName.value = currentRedisDB.value;
         for (const item of datas) {
             if (currentDBName.value && item.database === currentDBName.value) {
                 currentDB.value = item;
diff --git a/frontend/src/views/home/app/index.vue b/frontend/src/views/home/app/index.vue
index 9c7004895a36..dc834f424252 100644
--- a/frontend/src/views/home/app/index.vue
+++ b/frontend/src/views/home/app/index.vue
@@ -20,7 +20,7 @@
                     <template #reference>
                         <el-button
                             class="h-button-setting"
-                            :disabled="!globalStore.isAdminOrNodeAdmin"
+                            :disabled="!isAdminOrNodeAdmin"
                             link
                             icon="Setting"
                         ></el-button>
@@ -150,7 +150,7 @@ import { jumpToInstall } from '@/utils/app';
 import { routerToName, routerToNameWithQuery } from '@/utils/router';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const { isMobile } = useGlobalStore();
+const { isMobile, isAdminOrNodeAdmin } = useGlobalStore();
 let loading = ref(false);
 let apps = ref([]);
 const options = ref([]);
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index c716b3d65681..4a57c6a864f5 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -19,19 +19,14 @@
             </template>
         </RouterButton>
 
-        <el-alert
-            v-if="!isSafety && globalStore.showEntranceWarn"
-            class="card-interval"
-            type="warning"
-            @close="hideEntrance"
-        >
+        <el-alert v-if="!isSafety && showEntranceWarn" class="card-interval" type="warning" @close="hideEntrance">
             <template #title>
                 <span class="flx-align-center">
                     <span>{{ $t('home.entranceHelper') }}</span>
                     <el-link
                         style="font-size: 12px; margin-left: 5px"
                         icon="Position"
-                        v-if="globalStore.isAdmin"
+                        v-if="isAdmin"
                         @click="jumpToPath(router, '/settings/safe')"
                         type="primary"
                     >
@@ -47,7 +42,7 @@
                     <template #header-r>
                         <el-button
                             class="h-button-setting"
-                            :disabled="!globalStore.isAdminOrNodeAdmin"
+                            :disabled="!isAdminOrNodeAdmin"
                             @click="quickJumpRef.acceptParams()"
                             link
                             icon="Setting"
@@ -235,7 +230,7 @@
                                     <template #reference>
                                         <el-button
                                             class="h-button-setting"
-                                            :disabled="!globalStore.isAdminOrNodeAdmin"
+                                            :disabled="!isAdminOrNodeAdmin"
                                             link
                                             icon="Setting"
                                         />
@@ -349,7 +344,7 @@
                                 <el-tooltip v-if="!memoEditing" :content="$t('commons.button.edit')" placement="top">
                                     <el-button
                                         class="h-button-setting"
-                                        :disabled="!globalStore.isAdminOrNodeAdmin"
+                                        :disabled="!isAdminOrNodeAdmin"
                                         @click="startMemoEdit"
                                         link
                                         icon="Edit"
@@ -481,8 +476,6 @@ import {
     updateMemo,
     updateSetting,
 } from '@/api/modules/setting';
-import { GlobalStore } from '@/store';
-import { storeToRefs } from 'pinia';
 import { routerToFileWithPath, routerToNameWithQuery, routerToPath } from '@/utils/router';
 import { getWelcomePage } from '@/api/modules/auth';
 import {
@@ -494,7 +487,20 @@ import {
 import { MsgSuccess } from '@/utils/message';
 import { useCan } from '@/composables/useMenuManagePermission';
 const router = useRouter();
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const {
+    isProductPro,
+    isEnterprise,
+    isOffline,
+    showEntranceWarn,
+    defaultNetwork,
+    defaultIO,
+    isAdmin,
+    isOnRestart,
+    hasNewVersion,
+    isAdminOrNodeAdmin,
+    isXpackOrEE,
+} = useGlobalStore();
 
 const DASHBOARD_CACHE_TTL = {
     safeStatus: 10 * 60 * 1000,
@@ -575,7 +581,6 @@ const hasRefreshedOptionsOnHover = ref(false);
 
 const licenseRef = ref();
 const quickJumpRef = ref();
-const { isProductPro, isEnterprise, isOffline } = storeToRefs(globalStore);
 const quickJumpPermissionMap = Object.fromEntries(
     [
         ['Agent', 'ai_agent_view'],
@@ -710,7 +715,7 @@ const changeOption = async () => {
 
 const applyDefaultNetOption = () => {
     if (!netOptions.value || netOptions.value.length === 0) return;
-    const defaultNet = globalStore.defaultNetwork || netOptions.value[0];
+    const defaultNet = defaultNetwork.value || netOptions.value[0];
     if (defaultNet && searchInfo.netOption !== defaultNet) {
         searchInfo.netOption = defaultNet;
     }
@@ -718,8 +723,8 @@ const applyDefaultNetOption = () => {
 
 const onLoadAgentSettingInfo = async () => {
     await getAgentSettingInfo().then((res) => {
-        globalStore.defaultIO = res.data.defaultIO;
-        globalStore.defaultNetwork = res.data.defaultNetwork;
+        defaultIO.value = res.data.defaultIO;
+        defaultNetwork.value = res.data.defaultNetwork;
     });
 };
 
@@ -739,7 +744,7 @@ const onLoadNetworkOptions = async (force?: boolean) => {
 };
 
 const onLoadSimpleNode = async () => {
-    if (!globalStore.isAdmin) {
+    if (!isAdmin.value) {
         simpleNodes.value = [];
         return;
     }
@@ -749,9 +754,9 @@ const onLoadSimpleNode = async () => {
 
 const applyDefaultIOOption = async () => {
     if (!ioOptions.value || ioOptions.value.length === 0) return;
-    const defaultIO = globalStore.defaultIO || ioOptions.value[0];
-    if (defaultIO && searchInfo.ioOption !== defaultIO) {
-        searchInfo.ioOption = defaultIO;
+    const defaultIOOption = defaultIO.value || ioOptions.value[0];
+    if (defaultIOOption && searchInfo.ioOption !== defaultIOOption) {
+        searchInfo.ioOption = defaultIOOption;
     }
 };
 
@@ -802,7 +807,7 @@ const onLoadBaseInfo = async (isInit: boolean, range: string) => {
                 if (!isCurrentActive.value) {
                     throw new Error('jump out');
                 }
-                if (isActive.value && !globalStore.isOnRestart) {
+                if (isActive.value && !isOnRestart.value) {
                     await onLoadCurrentInfo();
                     await onLoadSimpleNode();
                 }
@@ -821,7 +826,7 @@ const quickJump = (item: any) => {
 };
 
 const showSimpleNode = () => {
-    return simpleNodeCarouselSetting.value === 'Enable' && globalStore.isXpackOrEE() && simpleNodes.value?.length !== 0;
+    return simpleNodeCarouselSetting.value === 'Enable' && isXpackOrEE.value && simpleNodes.value?.length !== 0;
 };
 
 const toggleSensitiveInfo = () => {
@@ -1013,18 +1018,18 @@ const loadData = async () => {
 };
 
 const hideEntrance = () => {
-    globalStore.showEntranceWarn = false;
+    showEntranceWarn.value = false;
 };
 
 const loadUpgradeStatus = async () => {
-    if (!globalStore.isAdmin) {
+    if (!isAdmin.value) {
         return;
     }
     const res = await loadUpgradeInfo();
     if (res && (res.data.testVersion || res.data.newVersion || res.data.latestVersion)) {
-        globalStore.hasNewVersion = true;
+        hasNewVersion.value = true;
     } else {
-        globalStore.hasNewVersion = false;
+        hasNewVersion.value = false;
     }
 };
 
diff --git a/frontend/src/views/host/file-management/ai-search/file-ai-search-drawer.vue b/frontend/src/views/host/file-management/ai-search/file-ai-search-drawer.vue
index af1dae38d4b9..0ef38cc4b3e5 100644
--- a/frontend/src/views/host/file-management/ai-search/file-ai-search-drawer.vue
+++ b/frontend/src/views/host/file-management/ai-search/file-ai-search-drawer.vue
@@ -515,7 +515,7 @@ const props = defineProps<{
     listPath: string;
 }>();
 
-const { globalStore } = useGlobalStore();
+const { language } = useGlobalStore();
 
 const emit = defineEmits<{
     (e: 'update:modelValue', v: boolean): void;
@@ -809,7 +809,7 @@ const submitAiSearch = async () => {
         const payload: File.FileAISearchReq = {
             path: rootPath,
             query: q,
-            responseLanguage: globalStore.language,
+            responseLanguage: language.value,
             containSub: aiSearchContainSub.value,
             matchCase: aiSearchMatchCase.value,
             wholeWord: aiSearchWholeWord.value,
diff --git a/frontend/src/views/host/file-management/compress/index.vue b/frontend/src/views/host/file-management/compress/index.vue
index 0e156bf09ea1..b9b830af57ec 100644
--- a/frontend/src/views/host/file-management/compress/index.vue
+++ b/frontend/src/views/host/file-management/compress/index.vue
@@ -110,9 +110,9 @@ import TaskLog from '@/components/log/task/index.vue';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { getErrorMessage } from '@/utils/misc';
 import { newUUID } from '@/utils/id';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const globalStore = GlobalStore();
+const { currentNode } = useGlobalStore();
 
 interface CompressProps {
     files: Array<any>;
@@ -199,7 +199,7 @@ const loadTaskInfo = async () => {
                 page: 1,
                 pageSize: 1,
             },
-            globalStore.currentNode,
+            currentNode.value,
         );
         taskInfo.value = res.data.items?.[0] || null;
         emitTaskChange();
@@ -291,7 +291,7 @@ const openTaskLog = () => {
     if (!currentTaskID.value) {
         return;
     }
-    taskLogRef.value?.openWithTaskID(currentTaskID.value, true, globalStore.currentNode);
+    taskLogRef.value?.openWithTaskID(currentTaskID.value, true, currentNode.value);
 };
 
 const getLinkPath = (path: string) => {
diff --git a/frontend/src/views/host/file-management/convert/index.vue b/frontend/src/views/host/file-management/convert/index.vue
index d70cea5f8b07..2dace5816bff 100644
--- a/frontend/src/views/host/file-management/convert/index.vue
+++ b/frontend/src/views/host/file-management/convert/index.vue
@@ -143,8 +143,8 @@ import { getFileType, isConvertible } from '@/utils/file';
 import { v4 as uuidv4 } from 'uuid';
 import TaskLog from '@/components/log/task/index.vue';
 import { TabsPaneContext } from 'element-plus';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { currentNode } = useGlobalStore();
 
 const activeName = ref('convert');
 const open = ref(false);
@@ -159,7 +159,7 @@ let selects = ref<any>([]);
 const taskLogRef = ref();
 const logs = ref([]);
 
-const CONVERT_KEY = 'convert-files:' + globalStore.currentNode;
+const CONVERT_KEY = 'convert-files:' + currentNode.value;
 const handleClose = () => {
     open.value = false;
     handleOutputFile.value = 'png';
diff --git a/frontend/src/views/host/file-management/decompress/index.vue b/frontend/src/views/host/file-management/decompress/index.vue
index 7611ac077efc..e44890c1f4bd 100644
--- a/frontend/src/views/host/file-management/decompress/index.vue
+++ b/frontend/src/views/host/file-management/decompress/index.vue
@@ -99,9 +99,9 @@ import TaskLog from '@/components/log/task/index.vue';
 import { MsgError } from '@/utils/message';
 import { getErrorMessage } from '@/utils/misc';
 import { newUUID } from '@/utils/id';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const globalStore = GlobalStore();
+const { currentNode } = useGlobalStore();
 
 interface DecompressProps {
     dst: string;
@@ -181,7 +181,7 @@ const loadTaskInfo = async () => {
                 page: 1,
                 pageSize: 1,
             },
-            globalStore.currentNode,
+            currentNode.value,
         );
         taskInfo.value = res.data.items?.[0] || null;
         emitTaskChange();
@@ -272,7 +272,7 @@ const openTaskLog = () => {
     if (!currentTaskID.value) {
         return;
     }
-    taskLogRef.value?.openWithTaskID(currentTaskID.value, true, globalStore.currentNode);
+    taskLogRef.value?.openWithTaskID(currentTaskID.value, true, currentNode.value);
 };
 
 const getLinkPath = (path: string) => {
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index 87ce7c532fe4..0372e4dbac47 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -256,7 +256,7 @@
                                 <el-button class="btn" @click="openRecycleBin">
                                     {{ $t('file.recycleBin') }}
                                 </el-button>
-                                <el-button class="btn" @click="toTerminal" :disabled="!globalStore.isAdminOrNodeAdmin">
+                                <el-button class="btn" @click="toTerminal" :disabled="!isAdminOrNodeAdmin">
                                     {{ $t('menu.terminal') }}
                                 </el-button>
                                 <el-popover
@@ -736,7 +736,7 @@ import { useRouter } from 'vue-router';
 import { MsgSuccess, MsgWarning } from '@/utils/message';
 import { useMultipleSearchable } from './hooks/searchable';
 import { ResultData } from '@/api/interface';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { Download as ElDownload, Upload as ElUpload, View, Hide } from '@element-plus/icons-vue';
 
 import i18n from '@/lang';
@@ -774,11 +774,8 @@ import { getComponentInfo } from '@/api/modules/host';
 import { routerToNameWithQuery } from '@/utils/router';
 import { loadBaseDir } from '@/api/modules/setting';
 import FileList from '@/components/file-list/index.vue';
-import { useGlobalStore } from '@/composables/useGlobalStore';
-
-const { isMobile } = useGlobalStore();
 
-const globalStore = GlobalStore();
+const { currentNode, isAdminOrNodeAdmin, isMobile, lastFilePath, openMenuTabs } = useGlobalStore();
 
 interface FilePaths {
     url: string;
@@ -1166,12 +1163,12 @@ const jump = async (url: string) => {
     let searchResult = await searchFile();
     if (!searchResult.data.path) {
         req.path = oldUrl;
-        globalStore.lastFilePath = req.path;
+        lastFilePath.value = req.path;
         MsgWarning(i18n.global.t('commons.res.notFound'));
         return;
     }
     req.path = searchResult.data.path;
-    globalStore.lastFilePath = req.path;
+    lastFilePath.value = req.path;
     handleSearchResult(searchResult);
     getPaths(req.path);
     updateTab(req.path);
@@ -1411,7 +1408,7 @@ const openPreview = (item: File.File, fileType: string) => {
     filePreview.extension = item.extension;
     filePreview.fileType = fileType;
     filePreview.imageFiles = imageFiles.value;
-    filePreview.currentNode = globalStore.currentNode;
+    filePreview.currentNode = currentNode.value;
 
     previewRef.value.acceptParams(filePreview);
 };
@@ -1621,7 +1618,7 @@ function onLoading(isLoading: boolean) {
 }
 
 const openDownload = (file: File.File) => {
-    downloadFile(file.path, globalStore.currentNode);
+    downloadFile(file.path, currentNode.value);
 };
 
 const fileShareRef = ref<InstanceType<typeof FileShare> | null>(null);
@@ -2091,18 +2088,18 @@ function getInitialPath(): string {
     if (routePath && typeof routePath === 'string') {
         const p = routePath.trim();
         if (p !== '') {
-            globalStore.lastFilePath = p;
+            lastFilePath.value = p;
             return p;
         }
     }
     const tab = editableTabs.value.find((t) => t.id === editableTabsKey.value);
     if (tab && typeof tab.path === 'string' && tab.path.trim() !== '') {
         const p = tab.path.trim();
-        globalStore.lastFilePath = p;
+        lastFilePath.value = p;
         return p;
     }
-    if (typeof globalStore.lastFilePath === 'string' && globalStore.lastFilePath.trim() !== '') {
-        return globalStore.lastFilePath;
+    if (typeof lastFilePath.value === 'string' && lastFilePath.value.trim() !== '') {
+        return lastFilePath.value;
     }
 
     return '/';
@@ -2193,7 +2190,7 @@ const changeTab = (targetPath: TabPaneName) => {
     saveStorageTabs();
     saveStorageTabsKey();
     req.path = current ? current.path : '';
-    globalStore.lastFilePath = req.path;
+    lastFilePath.value = req.path;
     getPaths(req.path);
     search();
 };
@@ -2218,7 +2215,7 @@ const removeTab = (targetId: TabPaneName) => {
 };
 
 const checkFFmpeg = () => {
-    getComponentInfo('ffmpeg', globalStore.currentNode).then((res) => {
+    getComponentInfo('ffmpeg', currentNode.value).then((res) => {
         ffmpegExist.value = res.data.exists ?? false;
     });
 };
@@ -2226,7 +2223,7 @@ const checkFFmpeg = () => {
 const updateHeight = () => {
     const el = fileTableRef.value;
     if (!el) return;
-    let tabHeight = globalStore.openMenuTabs ? 40 : -4;
+    let tabHeight = openMenuTabs.value ? 40 : -4;
     const half = (el.offsetHeight + tabHeight) / 2;
     dropdownMaxHeight.value = Math.max(half, 300);
 };
diff --git a/frontend/src/views/host/file-management/process/index.vue b/frontend/src/views/host/file-management/process/index.vue
index f6bad0d71158..15f0558de22d 100644
--- a/frontend/src/views/host/file-management/process/index.vue
+++ b/frontend/src/views/host/file-management/process/index.vue
@@ -65,12 +65,12 @@ import { fileWgetKeys, stopWgetFile } from '@/api/modules/files';
 import { computeSize } from '@/utils/size';
 import { onBeforeUnmount, ref } from 'vue';
 import MsgInfo from '@/components/msg-info/index.vue';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { ElMessageBox } from 'element-plus';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
 import { checkStreamAuth } from '@/utils/stream-auth';
-const globalStore = GlobalStore();
+const { currentNode: globalCurrentNode } = useGlobalStore();
 
 let processSocket: WebSocket | null = null;
 let sendTimer: ReturnType<typeof setInterval> | null = null;
@@ -116,7 +116,7 @@ const initProcess = async () => {
     let href = window.location.href;
     let protocol = href.split('//')[0] === 'http:' ? 'ws' : 'wss';
     let ipLocal = href.split('//')[1].split('/')[0];
-    let currentNode = globalStore.currentNode;
+    let currentNode = globalCurrentNode.value;
     const url = `${protocol}://${ipLocal}/api/v2/files/wget/process?operateNode=${currentNode}`;
     const authError = await checkStreamAuth(url, currentNode);
     if (token !== initProcessToken || !open.value) {
diff --git a/frontend/src/views/host/file-management/share/index.vue b/frontend/src/views/host/file-management/share/index.vue
index 5ff582bce104..2883fb7cda8d 100644
--- a/frontend/src/views/host/file-management/share/index.vue
+++ b/frontend/src/views/host/file-management/share/index.vue
@@ -99,7 +99,7 @@ import { createFileShare, getFileShareDetail, removeFileShare } from '@/api/modu
 import { File } from '@/api/interface/file';
 import { CopyDocument, Download, Picture } from '@element-plus/icons-vue';
 import i18n from '@/lang';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { buildFileSharePageUrl, buildFileShareQrCodeUrl } from '@/utils/file';
 import { copyText } from '@/utils/clipboard';
 import { dateFormat as formatDateTime } from '@/utils/date';
@@ -110,7 +110,7 @@ interface ShareProps {
     path: string;
 }
 
-const globalStore = GlobalStore();
+const { currentNode } = useGlobalStore();
 const open = ref(false);
 const loading = ref(false);
 const changed = ref(false);
@@ -194,8 +194,8 @@ const applyShareInfo = (info: File.FileShareInfo | null) => {
         syncingPassword.value = false;
         return;
     }
-    shareUrl.value = buildFileSharePageUrl(info.code, globalStore.currentNode);
-    qrCodeUrl.value = buildFileShareQrCodeUrl(info.code, globalStore.currentNode);
+    shareUrl.value = buildFileSharePageUrl(info.code, currentNode.value);
+    qrCodeUrl.value = buildFileShareQrCodeUrl(info.code, currentNode.value);
     expiresAtText.value = info.permanent
         ? i18n.global.t('website.ever')
         : formatDateTime(null, null, info.expiresAt * 1000);
diff --git a/frontend/src/views/host/file-management/text-preview/index.vue b/frontend/src/views/host/file-management/text-preview/index.vue
index 0d919cc8b62c..5e6a0983f629 100644
--- a/frontend/src/views/host/file-management/text-preview/index.vue
+++ b/frontend/src/views/host/file-management/text-preview/index.vue
@@ -33,10 +33,10 @@
 import { ref, computed, nextTick } from 'vue';
 import { getPreviewContent } from '@/api/modules/files';
 import { downloadFile } from '@/utils/file';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import i18n from '@/lang';
 
-const globalStore = GlobalStore();
+const { currentNode } = useGlobalStore();
 
 interface PreviewProps {
     path: string;
@@ -91,7 +91,7 @@ const handleClose = () => {
 };
 
 const onDownload = () => {
-    downloadFile(filePath.value, globalStore.currentNode);
+    downloadFile(filePath.value, currentNode.value);
 };
 
 const acceptParams = async (props: PreviewProps) => {
diff --git a/frontend/src/views/host/monitor/monitor/index.vue b/frontend/src/views/host/monitor/monitor/index.vue
index 707d4ef65768..ba817b2e7499 100644
--- a/frontend/src/views/host/monitor/monitor/index.vue
+++ b/frontend/src/views/host/monitor/monitor/index.vue
@@ -224,14 +224,11 @@ import { computeSize, computeSizeFromKBs } from '@/utils/size';
 import { dateFormatWithoutYear } from '@/utils/date';
 import i18n from '@/lang';
 import MonitorRouter from '@/views/host/monitor/index.vue';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { shortcuts } from '@/utils/shortcuts';
 import { Host } from '@/api/interface/host';
-import { useGlobalStore } from '@/composables/useGlobalStore';
-
-const { isMobile } = useGlobalStore();
 
-const globalStore = GlobalStore();
+const { defaultIO, defaultNetwork, isMobile } = useGlobalStore();
 
 const monitorBase = ref();
 const timeRangeGlobal = ref<[Date, Date]>([new Date(new Date().setHours(0, 0, 0, 0)), new Date()]);
@@ -356,12 +353,12 @@ const changeIO = (item: string) => {
 const loadOptions = async () => {
     const res = await getNetworkOptions();
     netOptions.value = res.data;
-    searchInfo.network = globalStore.defaultNetwork || (netOptions.value && netOptions.value[0]);
+    searchInfo.network = defaultNetwork.value || (netOptions.value && netOptions.value[0]);
     networkChoose.value = searchInfo.network;
 
     const res1 = await getIOOptions();
     ioOptions.value = res1.data;
-    searchInfo.io = globalStore.defaultIO || (ioOptions.value && ioOptions.value[0]);
+    searchInfo.io = defaultIO.value || (ioOptions.value && ioOptions.value[0]);
     ioChoose.value = searchInfo.io;
 
     search('all');
diff --git a/frontend/src/views/host/monitor/setting/default-io/index.vue b/frontend/src/views/host/monitor/setting/default-io/index.vue
index 613e7d9869e2..8e7a5f6eae38 100644
--- a/frontend/src/views/host/monitor/setting/default-io/index.vue
+++ b/frontend/src/views/host/monitor/setting/default-io/index.vue
@@ -29,8 +29,8 @@ import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { getIOOptions, updateMonitorSetting } from '@/api/modules/host';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { defaultIO } = useGlobalStore();
 
 const emit = defineEmits<{ (e: 'search'): void }>();
 
@@ -64,7 +64,7 @@ const onSave = async (formEl: FormInstance | undefined) => {
         if (!valid) return;
         await updateMonitorSetting('DefaultIO', form.defaultIO)
             .then(async () => {
-                globalStore.defaultIO = form.defaultIO;
+                defaultIO.value = form.defaultIO;
                 MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
                 loading.value = false;
                 drawerVisible.value = false;
diff --git a/frontend/src/views/host/monitor/setting/default-network/index.vue b/frontend/src/views/host/monitor/setting/default-network/index.vue
index 2d8cca854950..155424cfa70d 100644
--- a/frontend/src/views/host/monitor/setting/default-network/index.vue
+++ b/frontend/src/views/host/monitor/setting/default-network/index.vue
@@ -29,8 +29,8 @@ import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { getNetworkOptions, updateMonitorSetting } from '@/api/modules/host';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { defaultNetwork } = useGlobalStore();
 
 const emit = defineEmits<{ (e: 'search'): void }>();
 
@@ -64,7 +64,7 @@ const onSave = async (formEl: FormInstance | undefined) => {
         if (!valid) return;
         await updateMonitorSetting('DefaultNetwork', form.defaultNetwork)
             .then(async () => {
-                globalStore.defaultNetwork = form.defaultNetwork;
+                defaultNetwork.value = form.defaultNetwork;
                 MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
                 loading.value = false;
                 drawerVisible.value = false;
diff --git a/frontend/src/views/host/process/network/index.vue b/frontend/src/views/host/process/network/index.vue
index 5d7590a4f96c..c0afb032f26b 100644
--- a/frontend/src/views/host/process/network/index.vue
+++ b/frontend/src/views/host/process/network/index.vue
@@ -63,10 +63,11 @@
 <script setup lang="ts">
 import FireRouter from '@/views/host/process/index.vue';
 import { ref, onMounted, onUnmounted, watch, h } from 'vue';
-import { GlobalStore, ProcessStore } from '@/store';
+import { ProcessStore } from '@/store';
 import { SortBy, TableV2SortOrder, ElIcon } from 'element-plus';
 import { Filter } from '@element-plus/icons-vue';
 import i18n from '@/lang';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
 const statusOptions = [
     { text: 'LISTEN', value: 'LISTEN' },
@@ -76,7 +77,7 @@ const statusOptions = [
     { text: 'NONE', value: 'NONE' },
 ];
 
-const globalStore = GlobalStore();
+const { currentNode } = useGlobalStore();
 const processStore = ProcessStore();
 
 const quickSearchName = (name: string) => {
@@ -236,7 +237,7 @@ const search = () => {
 };
 
 onMounted(() => {
-    processStore.connect(globalStore.currentNode);
+    processStore.connect(currentNode.value);
     const initialDelay = processStore.netData.length > 0 ? 500 : 0;
     processStore.startPolling('net', 3000, initialDelay);
 });
diff --git a/frontend/src/views/host/process/process/index.vue b/frontend/src/views/host/process/process/index.vue
index 717fde488812..369410ae6dc8 100644
--- a/frontend/src/views/host/process/process/index.vue
+++ b/frontend/src/views/host/process/process/index.vue
@@ -68,10 +68,11 @@ import { ref, onMounted, onUnmounted, computed, watch, h, resolveDirective, with
 import ProcessDetail from './detail/index.vue';
 import i18n from '@/lang';
 import { stopProcess } from '@/api/modules/process';
-import { GlobalStore, ProcessStore } from '@/store';
+import { ProcessStore } from '@/store';
 import { SortBy, TableV2SortOrder, ElButton } from 'element-plus';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const globalStore = GlobalStore();
+const { currentNode } = useGlobalStore();
 const processStore = ProcessStore();
 const permissionDirective = resolveDirective('permission');
 
@@ -273,7 +274,7 @@ const stop = async (row: any) => {
 };
 
 onMounted(() => {
-    processStore.connect(globalStore.currentNode);
+    processStore.connect(currentNode.value);
     const initialDelay = processStore.psData.length > 0 ? 500 : 0;
     processStore.startPolling('ps', 3000, initialDelay);
 });
diff --git a/frontend/src/views/host/ssh/log/log.vue b/frontend/src/views/host/ssh/log/log.vue
index 94fbd5ec5fb9..20fc93bf923d 100644
--- a/frontend/src/views/host/ssh/log/log.vue
+++ b/frontend/src/views/host/ssh/log/log.vue
@@ -93,8 +93,8 @@ import { dateFormat } from '@/utils/date';
 import { downloadFile } from '@/utils/file';
 import { onMounted, reactive, ref } from 'vue';
 import { exportSSHLogs, loadSSHLogs } from '@/api/modules/host';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { currentNode } = useGlobalStore();
 
 const loading = ref();
 const data = ref();
@@ -148,7 +148,7 @@ const onSubmitExport = async () => {
     await exportSSHLogs(params)
         .then((res) => {
             if (res.data) {
-                downloadFile(res.data, globalStore.currentNode);
+                downloadFile(res.data, currentNode.value);
             }
             open.value = false;
         })
diff --git a/frontend/src/views/host/ssh/session/index.vue b/frontend/src/views/host/ssh/session/index.vue
index 3412c381525d..81f66a1b76f4 100644
--- a/frontend/src/views/host/ssh/session/index.vue
+++ b/frontend/src/views/host/ssh/session/index.vue
@@ -29,9 +29,9 @@ import { ref, onMounted, onUnmounted, reactive } from 'vue';
 import i18n from '@/lang';
 import { stopProcess } from '@/api/modules/process';
 import { MsgError, MsgSuccess } from '@/utils/message';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { checkStreamAuth } from '@/utils/stream-auth';
-const globalStore = GlobalStore();
+const { currentNode: globalCurrentNode } = useGlobalStore();
 
 const sshSearch = reactive({
     type: 'ssh',
@@ -89,7 +89,7 @@ const initProcess = async () => {
     let href = window.location.href;
     let protocol = href.split('//')[0] === 'http:' ? 'ws' : 'wss';
     let ipLocal = href.split('//')[1].split('/')[0];
-    let currentNode = globalStore.currentNode;
+    let currentNode = globalCurrentNode.value;
     const url = `${protocol}://${ipLocal}/api/v2/process/ws?operateNode=${currentNode}`;
     const authError = await checkStreamAuth(url, currentNode);
     if (token !== initProcessToken) {
diff --git a/frontend/src/views/log/operation/index.vue b/frontend/src/views/log/operation/index.vue
index 9e7d8a1ed797..e3eda990b139 100644
--- a/frontend/src/views/log/operation/index.vue
+++ b/frontend/src/views/log/operation/index.vue
@@ -42,7 +42,7 @@
                     <el-option :label="$t('commons.status.success')" value="Success" />
                     <el-option :label="$t('commons.status.failed')" value="Failed" />
                 </el-select>
-                <el-select v-if="globalStore.isAdmin" v-model="searchNode" @change="search()" clearable class="p-w-200">
+                <el-select v-if="isAdmin" v-model="searchNode" @change="search()" clearable class="p-w-200">
                     <template #prefix>{{ $t('xpack.node.node') }}</template>
                     <el-option :label="$t('commons.table.all')" value="" />
                     <el-option v-for="(node, index) in nodes" :key="index" :label="node.name" :value="node.name" />
@@ -63,13 +63,13 @@
                     <el-table-column :label="$t('commons.table.user')" prop="user" show-overflow-tooltip />
                     <el-table-column :label="$t('commons.table.operate')" min-width="150px" prop="detailZH">
                         <template #default="{ row }">
-                            <span v-if="globalStore.language === 'zh' || globalStore.language === 'zh-Hant'">
+                            <span v-if="language === 'zh' || language === 'zh-Hant'">
                                 {{ row.detailZH }}
                             </span>
-                            <span v-if="globalStore.language === 'en'">{{ row.detailEN }}</span>
+                            <span v-if="language === 'en'">{{ row.detailEN }}</span>
                         </template>
                     </el-table-column>
-                    <el-table-column v-if="globalStore.isXpackOrEE()" :label="$t('xpack.node.node')" prop="node">
+                    <el-table-column v-if="isXpackOrEE" :label="$t('xpack.node.node')" prop="node">
                         <template #default="{ row }">
                             <span>{{ row.node === 'local' ? globalStore.getMasterAlias() : row.node }}</span>
                         </template>
@@ -101,7 +101,7 @@ import { cleanLogs, getOperationLogs } from '@/api/modules/log';
 import { onMounted, reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { listNodes } from '@/utils/node';
 
 const loading = ref();
@@ -119,7 +119,7 @@ const searchStatus = ref<string>('');
 const searchNode = ref<string>('');
 const nodes = ref();
 
-const globalStore = GlobalStore();
+const { globalStore, currentNode, isAdmin, isXpackOrEE, language } = useGlobalStore();
 
 const search = async () => {
     let params = {
@@ -135,7 +135,7 @@ const search = async () => {
         .then((res) => {
             loading.value = false;
             data.value = res.data.items || [];
-            if (globalStore.language === 'zh' || globalStore.language === 'zh-Hant') {
+            if (language.value === 'zh' || language.value === 'zh-Hant') {
                 for (const item of data.value) {
                     item.detailZH = loadDetail(item.detailZH);
                 }
@@ -284,10 +284,10 @@ const onSubmitClean = async () => {
 };
 
 onMounted(() => {
-    if (globalStore.isAdmin && globalStore.isXpackOrEE()) {
+    if (isAdmin.value && isXpackOrEE.value) {
         loadNodes();
     }
-    searchNode.value = globalStore.isAdmin ? '' : globalStore.currentNode;
+    searchNode.value = isAdmin.value ? '' : currentNode.value;
     search();
 });
 </script>
diff --git a/frontend/src/views/log/system/index.vue b/frontend/src/views/log/system/index.vue
index afcec6f81e26..41face13ffe1 100644
--- a/frontend/src/views/log/system/index.vue
+++ b/frontend/src/views/log/system/index.vue
@@ -14,12 +14,7 @@
                         {{ $t('commons.button.watch') }}
                     </el-checkbox>
                 </el-button>
-                <el-radio-group
-                    v-if="globalStore.currentNode === 'local'"
-                    class="ml-2"
-                    @change="search()"
-                    v-model="itemType"
-                >
+                <el-radio-group v-if="currentNode === 'local'" class="ml-2" @change="search()" v-model="itemType">
                     <el-radio-button :label="$t('logs.agent')" value="Agent" />
                     <el-radio-button :label="$t('logs.core')" value="Core" />
                 </el-radio-group>
@@ -44,8 +39,8 @@ import LogFile from '@/components/log/file/index.vue';
 import LogRouter from '@/views/log/router/index.vue';
 import { nextTick, onMounted, reactive, ref } from 'vue';
 import { getSystemFiles } from '@/api/modules/log';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { currentNode } = useGlobalStore();
 
 const loading = ref();
 const isWatch = ref();
diff --git a/frontend/src/views/login/components/login-form.vue b/frontend/src/views/login/components/login-form.vue
index 5c189d30d48e..4f5cf935320c 100644
--- a/frontend/src/views/login/components/login-form.vue
+++ b/frontend/src/views/login/components/login-form.vue
@@ -52,10 +52,10 @@
                             </span>
                             <template #dropdown>
                                 <el-dropdown-menu>
-                                    <el-dropdown-item v-if="globalStore.isIntl" command="en">English</el-dropdown-item>
+                                    <el-dropdown-item v-if="isIntl" command="en">English</el-dropdown-item>
                                     <el-dropdown-item command="zh">中文(简体)</el-dropdown-item>
                                     <el-dropdown-item command="zh-Hant">中文(繁體)</el-dropdown-item>
-                                    <el-dropdown-item v-if="!globalStore.isIntl" command="en">English</el-dropdown-item>
+                                    <el-dropdown-item v-if="!isIntl" command="en">English</el-dropdown-item>
                                     <el-dropdown-item command="ja">日本語</el-dropdown-item>
                                     <el-dropdown-item command="pt-BR">Português (Brasil)</el-dropdown-item>
                                     <el-dropdown-item command="ko">한국어</el-dropdown-item>
@@ -110,10 +110,10 @@
                             </span>
                             <template #dropdown>
                                 <el-dropdown-menu>
-                                    <el-dropdown-item v-if="globalStore.isIntl" command="en">English</el-dropdown-item>
+                                    <el-dropdown-item v-if="isIntl" command="en">English</el-dropdown-item>
                                     <el-dropdown-item command="zh">中文(简体)</el-dropdown-item>
                                     <el-dropdown-item command="zh-Hant">中文(繁體)</el-dropdown-item>
-                                    <el-dropdown-item v-if="!globalStore.isIntl" command="en">English</el-dropdown-item>
+                                    <el-dropdown-item v-if="!isIntl" command="en">English</el-dropdown-item>
                                     <el-dropdown-item command="ja">日本語</el-dropdown-item>
                                     <el-dropdown-item command="pt-BR">Português (Brasil)</el-dropdown-item>
                                     <el-dropdown-item command="ko">한국어</el-dropdown-item>
@@ -151,7 +151,7 @@
                             ></el-input>
                         </el-form-item>
                         <el-row :gutter="10">
-                            <el-col :span="12" v-if="!globalStore.ignoreCaptcha">
+                            <el-col :span="12" v-if="!ignoreCaptcha">
                                 <el-form-item prop="captcha">
                                     <el-input
                                         v-model.trim="loginForm.captcha"
@@ -160,7 +160,7 @@
                                     ></el-input>
                                 </el-form-item>
                             </el-col>
-                            <el-col :span="12" v-if="!globalStore.ignoreCaptcha">
+                            <el-col :span="12" v-if="!ignoreCaptcha">
                                 <img
                                     class="w-full h-10"
                                     v-if="captcha.imagePath"
@@ -248,7 +248,7 @@ import {
     passkeyBeginApi,
     passkeyFinishApi,
 } from '@/api/modules/auth';
-import { GlobalStore, MenuStore, TabsStore } from '@/store';
+import { MenuStore, TabsStore } from '@/store';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { useI18n } from 'vue-i18n';
 import { encryptPassword, base64UrlToBuffer, bufferToBase64Url } from '@/utils/auth';
@@ -258,10 +258,25 @@ import { Key } from '@element-plus/icons-vue';
 import { changeToLocal } from '@/utils/node';
 import { syncAuthInfo } from '@/utils/rbac';
 import { adjustColorToRGBA } from '@/utils/color';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
 const i18n = useI18n();
-const themeConfig = computed(() => globalStore.themeConfig);
-const globalStore = GlobalStore();
+const {
+    globalStore,
+    agreeLicense,
+    currentNode,
+    ignoreCaptcha,
+    isAdmin,
+    isEnterprise,
+    isEnterpriseLicenseLoaded,
+    isFxplay,
+    isIntl,
+    isLogin,
+    isOffline,
+    isOnRestart,
+    openMenuTabs,
+    themeConfig,
+} = useGlobalStore();
 const menuStore = MenuStore();
 const tabsStore = TabsStore();
 
@@ -273,8 +288,6 @@ const passkeySupported = ref(false);
 const autoPasskeyEnabledKey = '1panel-passkey-auto-enabled';
 const showPasswordLogin = ref(false);
 const isDemo = ref(false);
-const isIntl = ref(true);
-const isFxplay = ref(false);
 const open = ref(false);
 const loginBtnLinkColor = ref<string | null>(null);
 
@@ -425,7 +438,7 @@ const login = (formEl: FormInstance | undefined) => {
             authMethod: 'session',
             language: loginForm.language,
         };
-        if (!globalStore.ignoreCaptcha && requestLoginForm.captcha == '') {
+        if (!ignoreCaptcha.value && requestLoginForm.captcha == '') {
             errCaptcha.value = true;
             return;
         }
@@ -433,7 +446,7 @@ const login = (formEl: FormInstance | undefined) => {
             isLoggingIn = true;
             loading.value = true;
             const res = await loginApi(requestLoginForm);
-            globalStore.ignoreCaptcha = true;
+            ignoreCaptcha.value = true;
             if (res.data.mfaStatus === 'Enable') {
                 mfaLoginForm.sessionId = res.data.mfaSession || '';
                 mfaLoginForm.code = '';
@@ -445,13 +458,13 @@ const login = (formEl: FormInstance | undefined) => {
                 });
                 return;
             }
-            globalStore.isLogin = true;
-            globalStore.agreeLicense = true;
+            isLogin.value = true;
+            agreeLicense.value = true;
             menuStore.setMenuList([]);
             tabsStore.removeAllTabs();
-            globalStore.isAdmin = res.data.role === 'ADMIN';
+            isAdmin.value = res.data.role === 'ADMIN';
             await changeToLocal();
-            await syncAuthInfo(globalStore.currentNode);
+            await syncAuthInfo(currentNode.value);
             MsgSuccess(i18n.t('commons.msg.loginSuccess'));
             localStorage.removeItem('dashboardCache');
             localStorage.removeItem('upgradeChecked');
@@ -460,7 +473,7 @@ const login = (formEl: FormInstance | undefined) => {
         } catch (res) {
             if (res.code === 401) {
                 if (res.message === 'ErrCaptchaCode') {
-                    globalStore.ignoreCaptcha = false;
+                    ignoreCaptcha.value = false;
                     loginForm.captcha = '';
                     errCaptcha.value = true;
                     errAuthInfo.value = false;
@@ -468,7 +481,7 @@ const login = (formEl: FormInstance | undefined) => {
                     return;
                 }
                 if (res.message === 'ErrAuth') {
-                    globalStore.ignoreCaptcha = false;
+                    ignoreCaptcha.value = false;
                     errCaptcha.value = false;
                     errAuthInfo.value = true;
                     loginVerify();
@@ -491,13 +504,13 @@ const mfaLogin = async (auto: boolean) => {
         try {
             errMfaInfo.value = false;
             const res = await mfaLoginApi(mfaLoginForm);
-            globalStore.isLogin = true;
+            isLogin.value = true;
             menuStore.setMenuList([]);
             tabsStore.removeAllTabs();
             MsgSuccess(i18n.t('commons.msg.loginSuccess'));
-            globalStore.isAdmin = res.data.role === 'ADMIN';
+            isAdmin.value = res.data.role === 'ADMIN';
             await changeToLocal();
-            await syncAuthInfo(globalStore.currentNode);
+            await syncAuthInfo(currentNode.value);
             localStorage.removeItem('dashboardCache');
             localStorage.removeItem('upgradeChecked');
             routerToName('home');
@@ -505,7 +518,7 @@ const mfaLogin = async (auto: boolean) => {
         } catch (res) {
             if (res.code === 401) {
                 if (res.message === 'ErrCaptchaCode') {
-                    globalStore.ignoreCaptcha = false;
+                    ignoreCaptcha.value = false;
                     mfaLoginForm.code = '';
                     mfaShow.value = false;
                     loginVerify();
@@ -557,14 +570,14 @@ const passkeyLogin = async () => {
         const payload = buildPasskeyAssertion(credential);
         const loginRes = await passkeyFinishApi(payload, res.data.sessionId);
         enableAutoPasskey();
-        globalStore.ignoreCaptcha = true;
-        globalStore.isLogin = true;
-        globalStore.agreeLicense = true;
+        ignoreCaptcha.value = true;
+        isLogin.value = true;
+        agreeLicense.value = true;
         menuStore.setMenuList([]);
         tabsStore.removeAllTabs();
-        globalStore.isAdmin = loginRes.data.role === 'ADMIN';
+        isAdmin.value = loginRes.data.role === 'ADMIN';
         await changeToLocal();
-        await syncAuthInfo(globalStore.currentNode);
+        await syncAuthInfo(currentNode.value);
         MsgSuccess(i18n.t('commons.msg.loginSuccess'));
         localStorage.removeItem('dashboardCache');
         localStorage.removeItem('upgradeChecked');
@@ -627,20 +640,19 @@ const getSetting = async () => {
         await handleCommand(language);
         isIntl.value = res.data.isIntl;
         isFxplay.value = res.data.isFxplay;
-        globalStore.isFxplay = isFxplay.value;
-        globalStore.isOffline = res.data.isOffline;
-        globalStore.isEnterprise = res.data.isEnterprise;
-        globalStore.isEnterpriseLicenseLoaded = !res.data.isEnterprise;
-        globalStore.ignoreCaptcha = !res.data.needCaptcha;
+        isOffline.value = res.data.isOffline;
+        isEnterprise.value = res.data.isEnterprise;
+        isEnterpriseLicenseLoaded.value = !res.data.isEnterprise;
+        ignoreCaptcha.value = !res.data.needCaptcha;
         passkeySetting.value = res.data.passkeySetting;
-        if (!globalStore.ignoreCaptcha) {
+        if (!ignoreCaptcha.value) {
             loginVerify();
         }
 
         document.title = res.data.panelName;
         i18n.warnHtmlMessage = false;
-        globalStore.openMenuTabs = res.data.menuTabs === 'Enable';
-        globalStore.themeConfig = { ...themeConfig.value, theme: res.data.theme, panelName: res.data.panelName };
+        openMenuTabs.value = res.data.menuTabs === 'Enable';
+        themeConfig.value = { ...themeConfig.value, theme: res.data.theme, panelName: res.data.panelName };
 
         if (res.data.passkeySetting && !isIntl.value && !isFxplay.value) {
             loginForm.agreeLicense = true;
@@ -652,15 +664,15 @@ const getSetting = async () => {
 };
 
 onMounted(() => {
-    globalStore.isOnRestart = false;
+    isOnRestart.value = false;
     passkeySupported.value = !!window.PublicKeyCredential && window.isSecureContext;
     getSetting();
     getXpackSettingForTheme();
-    if (!globalStore.ignoreCaptcha) {
+    if (!ignoreCaptcha.value) {
         loginVerify();
     }
-    document.title = globalStore.themeConfig.panelName;
-    loginBtnLinkColor.value = globalStore.themeConfig.loginBtnLinkColor || '#005eeb';
+    document.title = themeConfig.value.panelName;
+    loginBtnLinkColor.value = themeConfig.value.loginBtnLinkColor || '#005eeb';
     document.documentElement.style.setProperty('--login-btn-link-color', loginBtnLinkColor.value);
     document.documentElement.style.setProperty(
         '--login-btn-link-hover-color',
@@ -673,7 +685,7 @@ onMounted(() => {
     nextTick(() => {
         userNameRef.value?.focus();
     });
-    loginForm.agreeLicense = globalStore.agreeLicense;
+    loginForm.agreeLicense = agreeLicense.value;
     document.onkeydown = (e: any) => {
         e = window.event || e;
         if (e.keyCode === 13) {
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index e86d729fdbbb..5210f7f32237 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -28,10 +28,10 @@
 <script setup lang="ts">
 import LoginForm from './components/login-form.vue';
 import { ref, onMounted } from 'vue';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { preloadImage } from '@/utils/browser';
 defineOptions({ name: 'Login' });
-const globalStore = GlobalStore();
+const { entrance, isEnterprise, themeConfig } = useGlobalStore();
 const backgroundOpacity = ref(1);
 const defaultLoginImage = new URL('@/assets/images/1panel-login.jpg', import.meta.url).href;
 const defaultEnterpriseLoginImage = new URL('@/assets/images/1panel-login-enterprise.png', import.meta.url).href;
@@ -40,9 +40,7 @@ const loadedLoginImage = ref<string | null>(null);
 const loadedBackgroundImage = ref<string | null>(null);
 const backgroundStyle = ref<{ backgroundImage?: string; backgroundColor?: string }>({});
 const imgLoaded = ref(false);
-const currentDefaultLoginImage = computed(() =>
-    globalStore.isEnterprise ? defaultEnterpriseLoginImage : defaultLoginImage,
-);
+const currentDefaultLoginImage = computed(() => (isEnterprise.value ? defaultEnterpriseLoginImage : defaultLoginImage));
 
 function onImgLoad() {
     imgLoaded.value = true;
@@ -57,12 +55,12 @@ const mySafetyCode = defineProps({
 const getStatus = async () => {
     let code = mySafetyCode.code;
     if (code != '') {
-        globalStore.entrance = code;
+        entrance.value = code;
     }
 };
 
 const loadImage = (name: string) => {
-    const { loginImage, loginBackground, loginBgType } = globalStore.themeConfig;
+    const { loginImage, loginBackground, loginBgType } = themeConfig.value;
     if (name === 'loginImage') {
         return loginImage === 'loginImage' ? loadedLoginImage.value : currentDefaultLoginImage.value;
     }
@@ -89,9 +87,9 @@ onMounted(async () => {
     const backgroundImageUrl = `/api/v2/images/loginBackground?t=${Date.now()}`;
     loadedLoginImage.value = await preloadImage(loginImageUrl);
     loadedBackgroundImage.value = await preloadImage(backgroundImageUrl);
-    if (globalStore.themeConfig.loginBgType === 'color') {
+    if (themeConfig.value.loginBgType === 'color') {
         backgroundStyle.value = {
-            backgroundColor: globalStore.themeConfig.loginBackground,
+            backgroundColor: themeConfig.value.loginBackground,
         };
     } else {
         const img = new Image();
diff --git a/frontend/src/views/setting/about/index.vue b/frontend/src/views/setting/about/index.vue
index aee2835966c8..4f4f5d6ff259 100644
--- a/frontend/src/views/setting/about/index.vue
+++ b/frontend/src/views/setting/about/index.vue
@@ -5,7 +5,7 @@
                 <div style="text-align: center; margin-top: 20px">
                     <div style="justify-self: center" class="logo">
                         <img
-                            v-if="globalStore.themeConfig.logo && !logoLoadFailed"
+                            v-if="themeConfig.logo && !logoLoadFailed"
                             style="width: 80px"
                             :src="`/api/v2/images/logo?t=${Date.now()}`"
                             @error="logoLoadFailed = true"
@@ -13,7 +13,7 @@
                         />
                         <PrimaryLogo v-else />
                     </div>
-                    <h3 class="description">{{ globalStore.themeConfig.title || $t('setting.description') }}</h3>
+                    <h3 class="description">{{ themeConfig.title || $t('setting.description') }}</h3>
                     <div class="flex justify-center">
                         <SystemUpgrade class="upgrade" />
                     </div>
@@ -45,11 +45,9 @@
 import { getSystemAvailable } from '@/api/modules/setting';
 import { onMounted, ref } from 'vue';
 import SystemUpgrade from '@/components/system-upgrade/index.vue';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import PrimaryLogo from '@/assets/images/1panel-logo.svg?component';
-import { storeToRefs } from 'pinia';
-const globalStore = GlobalStore();
-const { docsUrl } = storeToRefs(globalStore);
+const { docsUrl, themeConfig } = useGlobalStore();
 const loading = ref();
 const logoLoadFailed = ref(false);
 
diff --git a/frontend/src/views/setting/alert/dash/index.vue b/frontend/src/views/setting/alert/dash/index.vue
index 59a36f76abb5..dd858c4162e8 100644
--- a/frontend/src/views/setting/alert/dash/index.vue
+++ b/frontend/src/views/setting/alert/dash/index.vue
@@ -140,20 +140,15 @@
 
 <script lang="ts" setup>
 import { onMounted, reactive, ref } from 'vue';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
 import { ElMessageBox } from 'element-plus';
 import AddTask from '@/views/setting/alert/dash/task/index.vue';
 import { Alert } from '@/api/interface/alert';
 import { UpdateAlertStatus, SearchAlerts, DeleteAlert } from '@/api/modules/alert';
-import { storeToRefs } from 'pinia';
-import { useGlobalStore } from '@/composables/useGlobalStore';
-
-const { isMobile } = useGlobalStore();
 
-const globalStore = GlobalStore();
-const { isMaster, isProductPro } = storeToRefs(globalStore);
+const { isMobile, isMaster, isProductPro } = useGlobalStore();
 
 const { t } = i18n.global;
 const loading = ref(false);
diff --git a/frontend/src/views/setting/alert/setting/index.vue b/frontend/src/views/setting/alert/setting/index.vue
index 684904783b44..d473c7180268 100644
--- a/frontend/src/views/setting/alert/setting/index.vue
+++ b/frontend/src/views/setting/alert/setting/index.vue
@@ -51,7 +51,7 @@
                                 class="ml-1 text-xs"
                                 type="primary"
                                 target="_blank"
-                                :href="globalStore.docsUrl + '/user_manual/settings/#3'"
+                                :href="docsUrl + '/user_manual/settings/#3'"
                             >
                                 {{ $t('commons.button.helpDoc') }}
                             </el-link>
@@ -379,7 +379,7 @@
                     </el-card>
                     <el-card
                         class="rounded-2xl shadow hover:shadow-md transition-all"
-                        v-if="globalStore.isMasterPro() && !isIntl && !globalStore.isEE()"
+                        v-if="isMasterPro && !isIntl && !isEE"
                     >
                         <div class="flex items-center justify-between mb-2">
                             <div class="text-lg font-semibold">
@@ -428,7 +428,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref, Ref } from 'vue';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { ListAlertConfigs, DeleteAlertConfig, UpdateAlertConfig } from '@/api/modules/alert';
 import { ElMessageBox } from 'element-plus';
 import { View, Hide } from '@element-plus/icons-vue';
@@ -440,11 +440,9 @@ import EmailDrawer from '@/views/setting/alert/setting/email/index.vue';
 import WebhookDrawer from '@/views/setting/alert/setting/webhook/index.vue';
 import { Alert } from '@/api/interface/alert';
 import { getLicenseSmsInfo } from '@/api/modules/setting';
-import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const { isMobile, isProductPro, isMaster, isIntl } = useGlobalStore();
+const { docsUrl, isEE, isIntl, isMaster, isMasterPro, isMobile, isProductPro } = useGlobalStore();
 
-const globalStore = GlobalStore();
 const loading = ref(false);
 const phoneRef = ref();
 const emailRef = ref();
diff --git a/frontend/src/views/setting/backup-account/operate/index.vue b/frontend/src/views/setting/backup-account/operate/index.vue
index b7760f1a8749..4314b96bd7e8 100644
--- a/frontend/src/views/setting/backup-account/operate/index.vue
+++ b/frontend/src/views/setting/backup-account/operate/index.vue
@@ -40,7 +40,7 @@
                     <el-option :label="$t('setting.UPYUN')" value="UPYUN"></el-option>
                 </el-select>
                 <span v-if="isALIYUNYUN()" class="input-help">{{ $t('setting.ALIYUNHelper') }}</span>
-                <span v-if="dialogData.rowData?.type === 'GoogleDrive' && !globalStore.isFxplay" class="input-help">
+                <span v-if="dialogData.rowData?.type === 'GoogleDrive' && !isFxplay" class="input-help">
                     {{ $t('setting.googleHelper', [$t('setting.' + dialogData.rowData?.type)]) }}
                     <el-link
                         style="font-size: 12px; margin-left: 5px"
@@ -84,7 +84,7 @@
                 :rules="Rules.requiredInput"
             >
                 <el-input v-model="dialogData.rowData!.varsJson['address']" />
-                <span class="input-help" v-if="!globalStore.isFxplay">
+                <span class="input-help" v-if="!isFxplay">
                     {{ $t('setting.WebDAVAlist') }}
                     <el-link
                         style="font-size: 12px; margin-left: 5px"
@@ -300,7 +300,7 @@
                         <el-button class="append-button" @click="loadFromTokenForAliyun()">
                             {{ $t('setting.analysis') }}
                         </el-button>
-                        <span class="input-help" v-if="!globalStore.isFxplay">
+                        <span class="input-help" v-if="!isFxplay">
                             {{ $t('setting.analysisHelper') }}
                             <el-link
                                 style="font-size: 12px; margin-left: 5px"
@@ -327,7 +327,7 @@
                         <el-radio-button :value="false">{{ $t('setting.isNotCN') }}</el-radio-button>
                         <el-radio-button :value="true">{{ $t('setting.isCN') }}</el-radio-button>
                     </el-radio-group>
-                    <span class="input-help" v-if="!globalStore.isFxplay">
+                    <span class="input-help" v-if="!isFxplay">
                         {{ $t('setting.onedrive_helper') }}
                         <el-link
                             style="font-size: 12px; margin-left: 5px"
@@ -424,11 +424,8 @@ import { deepCopy } from '@/utils/misc';
 import { spliceHttp, splitHttp } from '@/utils/validate';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { Base64 } from 'js-base64';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
 import { useGlobalStore } from '@/composables/useGlobalStore';
-
-const { isProductPro } = useGlobalStore();
+const { docsUrl, isFxplay, isProductPro } = useGlobalStore();
 
 const loading = ref(false);
 type FormInstance = InstanceType<typeof ElForm>;
@@ -530,7 +527,7 @@ const toDoc = (type: string) => {
             uri = '#46-webdav-alist';
             break;
     }
-    window.open(globalStore.docsUrl + '/user_manual/settings/' + uri, '_blank', 'noopener,noreferrer');
+    window.open(docsUrl.value + '/user_manual/settings/' + uri, '_blank', 'noopener,noreferrer');
 };
 const jumpForCode = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
diff --git a/frontend/src/views/setting/license-required/index.vue b/frontend/src/views/setting/license-required/index.vue
index 55ba50ea62eb..da18a46188ac 100644
--- a/frontend/src/views/setting/license-required/index.vue
+++ b/frontend/src/views/setting/license-required/index.vue
@@ -67,7 +67,7 @@ import type { UploadFile, UploadFiles, UploadInstance, UploadProps, UploadRawFil
 import { genFileId } from 'element-plus';
 import { getEnterpriseLicense, uploadEnterpriseLicense } from '@/api/modules/setting';
 import { getLoginSetting } from '@/api/modules/auth';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { MsgSuccess } from '@/utils/message';
 import { preloadImage } from '@/utils/browser';
 import { adjustColorToRGBA } from '@/utils/color';
@@ -76,7 +76,19 @@ import { copyText } from '@/utils/clipboard';
 import i18n from '@/lang';
 
 const router = useRouter();
-const globalStore = GlobalStore();
+const {
+    entrance,
+    isEnterprise,
+    isEnterpriseLicenseLoaded,
+    isEnterpriseLicensed,
+    isFxplay,
+    isIntl,
+    isLogin,
+    isMasterProductPro,
+    isOffline,
+    openMenuTabs,
+    themeConfig,
+} = useGlobalStore();
 const loading = ref(false);
 const uploadRef = ref<UploadInstance>();
 const uploaderFiles = ref<UploadFiles>([]);
@@ -117,7 +129,7 @@ const onImgError = (event: Event) => {
 };
 
 const loadImage = (name: string) => {
-    const { loginImage, loginBackground, loginBgType } = globalStore.themeConfig;
+    const { loginImage, loginBackground, loginBgType } = themeConfig.value;
     if (name === 'loginImage') {
         return loginImage === 'loginImage' ? loadedLoginImage.value : defaultLoginImage;
     }
@@ -134,7 +146,7 @@ const loadImage = (name: string) => {
 };
 
 const applyLoginThemeColor = () => {
-    const loginBtnLinkColor = globalStore.themeConfig.loginBtnLinkColor || '#005eeb';
+    const loginBtnLinkColor = themeConfig.value.loginBtnLinkColor || '#005eeb';
     document.documentElement.style.setProperty('--login-btn-link-color', loginBtnLinkColor);
     document.documentElement.style.setProperty(
         '--login-btn-link-hover-color',
@@ -148,23 +160,21 @@ const applyLoginThemeColor = () => {
 
 const loadLoginTheme = async () => {
     const res = await getLoginSetting();
-    globalStore.isEnterprise = res.data.isEnterprise;
-    globalStore.isEnterpriseLicenseLoaded = !res.data.isEnterprise;
-    globalStore.isIntl = res.data.isIntl;
-    globalStore.isFxplay = res.data.isFxplay;
-    globalStore.isOffline = res.data.isOffline;
-    globalStore.openMenuTabs = res.data.menuTabs === 'Enable';
-    globalStore.themeConfig = {
-        ...globalStore.themeConfig,
+    isEnterprise.value = res.data.isEnterprise;
+    isEnterpriseLicenseLoaded.value = !res.data.isEnterprise;
+    isIntl.value = res.data.isIntl;
+    isFxplay.value = res.data.isFxplay;
+    isOffline.value = res.data.isOffline;
+    openMenuTabs.value = res.data.menuTabs === 'Enable';
+    themeConfig.value = {
+        ...themeConfig.value,
         theme: res.data.theme,
         panelName: res.data.panelName,
     };
     document.title = res.data.panelName;
     applyLoginThemeColor();
-    if (!globalStore.isEnterprise) {
-        router.replace(
-            globalStore.isLogin ? { name: 'home' } : { name: 'entrance', params: { code: globalStore.entrance } },
-        );
+    if (!isEnterprise.value) {
+        router.replace(isLogin.value ? { name: 'home' } : { name: 'entrance', params: { code: entrance.value } });
         return false;
     }
     return true;
@@ -186,9 +196,9 @@ const loadBackground = async () => {
         preloadImage(loginImageUrl),
         preloadImage(backgroundImageUrl),
     ]);
-    if (globalStore.themeConfig.loginBgType === 'color') {
+    if (themeConfig.value.loginBgType === 'color') {
         backgroundStyle.value = {
-            backgroundColor: globalStore.themeConfig.loginBackground,
+            backgroundColor: themeConfig.value.loginBackground,
         };
         return;
     }
@@ -209,14 +219,14 @@ const loadBackground = async () => {
 
 const loadLicenseInfo = async () => {
     const res = await getEnterpriseLicense();
-    globalStore.isEnterpriseLicenseLoaded = true;
+    isEnterpriseLicenseLoaded.value = true;
     licenseInfo.deviceID = res.data.deviceID;
     if (res.data.status === 'Bound') {
-        globalStore.isEnterpriseLicensed = true;
+        isEnterpriseLicensed.value = true;
         router.replace({ name: 'home' });
         return;
     }
-    globalStore.isEnterpriseLicensed = false;
+    isEnterpriseLicensed.value = false;
 };
 
 const fileOnChange = (_uploadFile: UploadFile, uploadFiles: UploadFiles) => {
@@ -250,8 +260,8 @@ const submit = async () => {
     loading.value = true;
     await uploadEnterpriseLicense(formData)
         .then(() => {
-            globalStore.isEnterpriseLicensed = true;
-            globalStore.isMasterProductPro = true;
+            isEnterpriseLicensed.value = true;
+            isMasterProductPro.value = true;
             MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
             router.replace({ name: 'home' });
         })
diff --git a/frontend/src/views/setting/license/bind/xpack.vue b/frontend/src/views/setting/license/bind/xpack.vue
index c977f913a7bd..52b5eca1edb8 100644
--- a/frontend/src/views/setting/license/bind/xpack.vue
+++ b/frontend/src/views/setting/license/bind/xpack.vue
@@ -52,9 +52,9 @@ import { MsgSuccess } from '@/utils/message';
 import { bindLicense, listNodeOptions } from '@/api/modules/setting';
 import DockerProxyDialog from '@/components/docker-proxy/dialog.vue';
 import { FormInstance } from 'element-plus';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { Rules } from '@/global/form-rules';
-const globalStore = GlobalStore();
+const { globalStore, isMasterProductPro } = useGlobalStore();
 
 interface DialogProps {
     licenseName: string;
@@ -112,7 +112,7 @@ const submit = async () => {
 };
 
 const loadNodes = async () => {
-    if (!globalStore.isMasterProductPro) {
+    if (!isMasterProductPro.value) {
         freeNodes.value = [{ id: 0, name: globalStore.getMasterAlias() }];
         return;
     }
diff --git a/frontend/src/views/setting/license/index.vue b/frontend/src/views/setting/license/index.vue
index cdd151865670..411c55b93a92 100644
--- a/frontend/src/views/setting/license/index.vue
+++ b/frontend/src/views/setting/license/index.vue
@@ -108,8 +108,8 @@ import BindXpack from '@/views/setting/license/bind/xpack.vue';
 import { dateFormat } from '@/utils/date';
 import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { globalStore } = useGlobalStore();
 
 const loading = ref();
 const licenseRef = ref();
diff --git a/frontend/src/views/setting/panel/edition/index.vue b/frontend/src/views/setting/panel/edition/index.vue
index af308e7572bf..d00d0476b550 100644
--- a/frontend/src/views/setting/panel/edition/index.vue
+++ b/frontend/src/views/setting/panel/edition/index.vue
@@ -38,8 +38,8 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { updateSetting } from '@/api/modules/setting';
 import { FormInstance } from 'element-plus';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { docWithRegion, isIntl } = useGlobalStore();
 
 interface DialogProps {
     edition: string;
@@ -92,11 +92,11 @@ const onSaveEdition = async () => {
     try {
         if (editionChanged) {
             await updateSetting({ key: 'Edition', value: form.edition });
-            globalStore.isIntl = form.edition === 'intl';
+            isIntl.value = form.edition === 'intl';
         }
         if (docSourceChanged) {
             await updateSetting({ key: 'DocSource', value: form.docSource });
-            globalStore.docWithRegion = form.docSource === 'withByRegion';
+            docWithRegion.value = form.docSource === 'withByRegion';
         }
         MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
         if (editionChanged) {
diff --git a/frontend/src/views/setting/panel/hidemenu/index.vue b/frontend/src/views/setting/panel/hidemenu/index.vue
index 6a0e19a4c244..d53e8be8167a 100644
--- a/frontend/src/views/setting/panel/hidemenu/index.vue
+++ b/frontend/src/views/setting/panel/hidemenu/index.vue
@@ -53,10 +53,10 @@ import { AllowDropType, ElMessageBox, RenderContentContext } from 'element-plus'
 import i18n from '@/lang';
 import { defaultMenu, updateMenu } from '@/api/modules/setting';
 import { MsgSuccess } from '@/utils/message';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { ArrowRight } from '@element-plus/icons-vue';
 import { sortMenu } from '@/utils/misc';
-const globalStore = GlobalStore();
+const { isEE, isIntl } = useGlobalStore();
 
 const drawerVisible = ref();
 const loading = ref();
@@ -69,7 +69,7 @@ const acceptParams = (params: DialogProps): void => {
     let hideMenu = JSON.parse(params.hideMenu);
     sortMenu(hideMenu);
     treeData.hideMenu = hideMenu;
-    if (globalStore.isIntl || globalStore.isEE()) {
+    if (isIntl.value || isEE.value) {
         treeData.hideMenu = removeUpage(treeData.hideMenu);
     }
 };
diff --git a/frontend/src/views/setting/panel/index.vue b/frontend/src/views/setting/panel/index.vue
index 70fa5fd2838c..fd496725eca8 100644
--- a/frontend/src/views/setting/panel/index.vue
+++ b/frontend/src/views/setting/panel/index.vue
@@ -36,7 +36,7 @@
                                     </div>
                                     <div>
                                         <el-button
-                                            v-if="globalStore.isXpackOrEE()"
+                                            v-if="isXpackOrEE"
                                             @click="onChangeThemeColor"
                                             icon="Setting"
                                             class="!h-[32px] sm:!h-[33.5px]"
@@ -58,11 +58,7 @@
                                 </el-radio-group>
                             </el-form-item>
 
-                            <el-form-item
-                                :label="$t('setting.watermark')"
-                                v-if="globalStore.isXpackOrEE()"
-                                prop="watermark"
-                            >
+                            <el-form-item :label="$t('setting.watermark')" v-if="isXpackOrEE" prop="watermark">
                                 <el-radio-group class="w-full" @change="onChangeWatermark" v-model="form.watermarkShow">
                                     <el-radio-button value="Enable">
                                         <span>{{ $t('commons.button.enable') }}</span>
@@ -156,11 +152,7 @@
                                 </el-button>
                             </el-form-item>
 
-                            <el-form-item
-                                :label="$t('setting.offlineEnv')"
-                                v-if="globalStore.isEnterprise"
-                                prop="isOffline"
-                            >
+                            <el-form-item :label="$t('setting.offlineEnv')" v-if="isEnterprise" prop="isOffline">
                                 <el-switch
                                     v-model="form.isOffline"
                                     active-value="Enable"
@@ -195,7 +187,7 @@
 import { ref, reactive, onMounted } from 'vue';
 import { ElForm, ElMessageBox } from 'element-plus';
 import { getSettingInfo, updateSetting, getSystemAvailable, getAgentSettingInfo } from '@/api/modules/setting';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { useTheme } from '@/global/use-theme';
 import { MsgSuccess } from '@/utils/message';
 import ThemeColor from '@/views/setting/panel/theme-color/index.vue';
@@ -209,12 +201,21 @@ import { getXpackProxyDocker } from '@/extensions/xpack';
 import { getXpackSetting, updateXpackSettingByKey } from '@/utils/xpack';
 import { setPrimaryColor } from '@/utils/theme';
 import i18n from '@/lang';
-import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const { isMobile } = useGlobalStore();
+const {
+    globalStore,
+    isEnterprise,
+    isIntl,
+    isMobile,
+    isOffline,
+    isXpackOrEE,
+    openMenuTabs,
+    themeConfig,
+    watermark,
+    watermarkShow,
+} = useGlobalStore();
 
 const loading = ref(false);
-const globalStore = GlobalStore();
 
 const { switchTheme } = useTheme();
 
@@ -267,7 +268,7 @@ const unset = ref(i18n.global.t('setting.unSetting'));
 const languageOptions = ref([
     { value: 'zh', label: '中文(简体)' },
     { value: 'zh-Hant', label: '中文(繁體)' },
-    ...(!globalStore.isIntl ? [{ value: 'en', label: 'English' }] : []),
+    ...(!isIntl.value ? [{ value: 'en', label: 'English' }] : []),
     { value: 'ja', label: '日本語' },
     { value: 'pt-BR', label: 'Português (Brasil)' },
     { value: 'ko', label: '한국어' },
@@ -277,7 +278,7 @@ const languageOptions = ref([
     { value: 'es-ES', label: 'España - Español' },
 ]);
 
-if (globalStore.isIntl) {
+if (isIntl.value) {
     languageOptions.value.unshift({ value: 'en', label: 'English' });
 }
 
@@ -305,29 +306,29 @@ const search = async () => {
     form.developerMode = res.data.developerMode;
     form.hideMenu = res.data.hideMenu;
 
-    if (globalStore.isXpackOrEE()) {
+    if (isXpackOrEE.value) {
         const [xpackRes, proxyDockerRes] = await Promise.all([
             getXpackSetting(),
             getXpackProxyDocker().catch(() => null),
         ]);
         if (xpackRes) {
-            form.theme = xpackRes.data.theme || globalStore.themeConfig.theme || 'light';
+            form.theme = xpackRes.data.theme || themeConfig.value.theme || 'light';
             form.themeColor = JSON.parse(xpackRes.data.themeColor || '{"light":"#005eeb","dark":"#F0BE96"}');
-            globalStore.themeConfig.themeColor = xpackRes.data.themeColor
+            themeConfig.value.themeColor = xpackRes.data.themeColor
                 ? xpackRes.data.themeColor
                 : '{"light":"#005eeb","dark":"#F0BE96"}';
-            globalStore.themeConfig.theme = form.theme;
+            themeConfig.value.theme = form.theme;
             form.watermark = xpackRes.data.watermark;
             form.watermarkShow = xpackRes.data.watermarkShow;
             try {
-                globalStore.watermark = JSON.parse(xpackRes.data.watermark);
+                watermark.value = JSON.parse(xpackRes.data.watermark);
             } catch {
-                globalStore.watermark = null;
+                watermark.value = null;
             }
         }
         form.proxyDocker = proxyDockerRes?.data?.proxyDocker || '';
     } else {
-        globalStore.themeConfig.theme = form.theme;
+        themeConfig.value.theme = form.theme;
     }
 };
 
@@ -364,8 +365,8 @@ const runtimeEnvLabel = () => {
 };
 
 const onChangeThemeColor = () => {
-    const themeColor: ThemeColor = JSON.parse(globalStore.themeConfig.themeColor);
-    themeColorRef.value.acceptParams({ themeColor: themeColor, theme: globalStore.themeConfig.theme });
+    const themeColor: ThemeColor = JSON.parse(themeConfig.value.themeColor);
+    themeColorRef.value.acceptParams({ themeColor: themeColor, theme: themeConfig.value.theme });
 };
 
 const onChangeWatermark = async () => {
@@ -382,8 +383,8 @@ const onChangeWatermark = async () => {
             await updateXpackSettingByKey('WatermarkShow', 'Disable')
                 .then(() => {
                     loading.value = false;
-                    globalStore.watermark = null;
-                    globalStore.watermarkShow = false;
+                    watermark.value = null;
+                    watermarkShow.value = false;
                     search();
                     MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
                 })
@@ -418,19 +419,19 @@ const onChangeOfflineEnv = async (val: string | number | boolean) => {
 };
 
 const handleThemeChange = async (val: string) => {
-    globalStore.themeConfig.theme = val;
+    themeConfig.value.theme = val;
     switchTheme();
-    if (globalStore.isXpackOrEE()) {
+    if (isXpackOrEE.value) {
         await updateXpackSettingByKey('Theme', val);
         let color: string;
-        const themeColor: ThemeColor = JSON.parse(globalStore.themeConfig.themeColor);
+        const themeColor: ThemeColor = JSON.parse(themeConfig.value.themeColor);
         if (val === 'auto') {
             const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
             color = prefersDark.matches ? themeColor.dark : themeColor.light;
         } else {
             color = val === 'dark' ? themeColor.dark : themeColor.light;
         }
-        globalStore.themeConfig.primary = color;
+        themeConfig.value.primary = color;
         setPrimaryColor(color);
     }
 };
@@ -447,14 +448,14 @@ const onSave = async (key: string, val: any) => {
                 handleThemeChange(val);
                 break;
             case 'MenuTabs':
-                globalStore.openMenuTabs = val === 'Enable';
+                openMenuTabs.value = val === 'Enable';
                 break;
             case 'Language':
                 await globalStore.updateLanguage(val);
                 location.reload();
                 break;
             case 'IsOffline':
-                globalStore.isOffline = val === 'Enable';
+                isOffline.value = val === 'Enable';
                 break;
         }
         MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
diff --git a/frontend/src/views/setting/panel/name/index.vue b/frontend/src/views/setting/panel/name/index.vue
index 8a00499800ee..62d1029f3e5e 100644
--- a/frontend/src/views/setting/panel/name/index.vue
+++ b/frontend/src/views/setting/panel/name/index.vue
@@ -14,14 +14,13 @@
     </DrawerPro>
 </template>
 <script lang="ts" setup>
-import { computed, reactive, ref } from 'vue';
+import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { updateSetting } from '@/api/modules/setting';
 import { FormInstance } from 'element-plus';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
-const themeConfig = computed(() => globalStore.themeConfig);
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { themeConfig } = useGlobalStore();
 
 const emit = defineEmits<{ (e: 'search'): void }>();
 
@@ -62,7 +61,7 @@ const onSavePanelName = async (formEl: FormInstance | undefined) => {
         if (!valid) return;
         await updateSetting({ key: 'PanelName', value: form.panelName })
             .then(async () => {
-                globalStore.themeConfig = { ...themeConfig.value, panelName: form.panelName };
+                themeConfig.value = { ...themeConfig.value, panelName: form.panelName };
                 document.title = form.panelName;
                 MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
                 loading.value = false;
diff --git a/frontend/src/views/setting/panel/proxy/index.vue b/frontend/src/views/setting/panel/proxy/index.vue
index 403e2d840adf..9ba55ffa68f3 100644
--- a/frontend/src/views/setting/panel/proxy/index.vue
+++ b/frontend/src/views/setting/panel/proxy/index.vue
@@ -47,7 +47,7 @@
                 <el-form-item>
                     <el-checkbox v-model="form.proxyPasswdKeepItem" :label="$t('setting.proxyPasswdKeep')" />
                 </el-form-item>
-                <el-form-item v-if="globalStore.isXpackOrEE()" :label="$t('setting.proxyDocker')" prop="proxyDocker">
+                <el-form-item v-if="isXpackOrEE" :label="$t('setting.proxyDocker')" prop="proxyDocker">
                     <el-checkbox v-model="form.proxyDocker" :label="$t('setting.proxyDocker')" />
                     <span class="input-help">{{ $t('setting.proxyDockerHelper') }}</span>
                 </el-form-item>
@@ -74,12 +74,12 @@ import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { reactive, ref } from 'vue';
 import { updateProxy } from '@/api/modules/setting';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import DockerProxyDialog from '@/components/docker-proxy/dialog.vue';
 import { loadDockerStatus } from '@/api/modules/container';
 
-const globalStore = GlobalStore();
+const { isXpackOrEE } = useGlobalStore();
 const emit = defineEmits<{ (e: 'search'): void }>();
 
 const confirmDialogRef = ref();
@@ -164,7 +164,7 @@ const submitChangePassword = async (formEl: FormInstance | undefined) => {
         if (form.proxyType === 'http' || form.proxyType === 'https') {
             params.proxyUrl = form.proxyUrl;
         }
-        if (dockerStatus.value && globalStore.isXpackOrEE() && (params.proxyDocker || proxyDockerVisible.value)) {
+        if (dockerStatus.value && isXpackOrEE.value && (params.proxyDocker || proxyDockerVisible.value)) {
             dockerProxyRef.value.acceptParams({
                 syncList: 'SyncSystemProxy',
                 open: true,
diff --git a/frontend/src/views/setting/panel/theme-color/index.vue b/frontend/src/views/setting/panel/theme-color/index.vue
index ab1d4f571bc4..4ace1449e37f 100644
--- a/frontend/src/views/setting/panel/theme-color/index.vue
+++ b/frontend/src/views/setting/panel/theme-color/index.vue
@@ -75,8 +75,8 @@ import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { initFavicon, updateXpackSettingByKey } from '@/utils/xpack';
 import { setPrimaryColor } from '@/utils/theme';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { isXpackOrEE, themeConfig } = useGlobalStore();
 const emit = defineEmits<(e: 'search') => void>();
 const drawerVisible = ref();
 const loading = ref();
@@ -247,10 +247,10 @@ const onSave = async (formEl: FormInstance | undefined) => {
         await formEl.validate(async (valid) => {
             if (!valid) return;
             form.themeColor = { light: form.light, dark: form.dark, themePredefineColors: themeColors.value };
-            if (globalStore.isXpackOrEE()) {
+            if (isXpackOrEE.value) {
                 await updateXpackSettingByKey('ThemeColor', JSON.stringify(form.themeColor));
                 MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-                globalStore.themeConfig.themeColor = JSON.stringify(form.themeColor);
+                themeConfig.value.themeColor = JSON.stringify(form.themeColor);
                 loading.value = false;
                 let color: string;
                 if (form.theme === 'auto') {
@@ -259,7 +259,7 @@ const onSave = async (formEl: FormInstance | undefined) => {
                 } else {
                     color = form.theme === 'dark' ? form.dark : form.light;
                 }
-                globalStore.themeConfig.primary = color;
+                themeConfig.value.primary = color;
                 setPrimaryColor(color);
                 initFavicon();
                 drawerVisible.value = false;
@@ -275,7 +275,7 @@ const onReSet = async () => {
         type: 'info',
     }).then(async () => {
         form.themeColor = { light: '#005eeb', dark: '#F0BE96', themePredefineColors: themeColors.value };
-        if (globalStore.isXpackOrEE()) {
+        if (isXpackOrEE.value) {
             localStorage.setItem(STORAGE_KEY, JSON.stringify(defaultColors));
             themeColors.value = { ...defaultColors };
             darkColors = [...defaultDarkColors];
@@ -283,7 +283,7 @@ const onReSet = async () => {
             await updateXpackSettingByKey('ThemeColor', JSON.stringify(form.themeColor));
             MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
             loading.value = false;
-            globalStore.themeConfig.themeColor = JSON.stringify(form.themeColor);
+            themeConfig.value.themeColor = JSON.stringify(form.themeColor);
             let color: string;
             if (form.theme === 'auto') {
                 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
@@ -291,7 +291,7 @@ const onReSet = async () => {
             } else {
                 color = form.theme === 'dark' ? '#F0BE96' : '#005eeb';
             }
-            globalStore.themeConfig.primary = color;
+            themeConfig.value.primary = color;
             setPrimaryColor(color);
             initFavicon();
             drawerVisible.value = false;
diff --git a/frontend/src/views/setting/panel/watermark/index.vue b/frontend/src/views/setting/panel/watermark/index.vue
index e574cefccab8..a7e4d4d3f6ee 100644
--- a/frontend/src/views/setting/panel/watermark/index.vue
+++ b/frontend/src/views/setting/panel/watermark/index.vue
@@ -5,7 +5,7 @@
             :content="loadContent()"
             :font="{
                 fontSize: form.fontSize,
-                color: globalStore.isDarkTheme ? form.darkColor : form.lightColor,
+                color: isDarkTheme ? form.darkColor : form.lightColor,
                 textBaseline: 'top',
             }"
             :rotate="form.rotate"
@@ -55,9 +55,9 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { updateXpackSettingByKey } from '@/utils/xpack';
-const globalStore = GlobalStore();
+const { globalStore, currentNode, currentNodeAddr, isDarkTheme, watermark, watermarkShow } = useGlobalStore();
 
 const emit = defineEmits<{ (e: 'search'): void }>();
 
@@ -89,9 +89,9 @@ const acceptParams = (watermark: string): void => {
 const loadContent = () => {
     let itemName = form.content.replaceAll(
         '${nodeName}',
-        globalStore.currentNode === 'local' ? globalStore.getMasterAlias() : globalStore.currentNode,
+        currentNode.value === 'local' ? globalStore.getMasterAlias() : currentNode.value,
     );
-    itemName = itemName.replaceAll('${nodeAddr}', globalStore.currentNodeAddr);
+    itemName = itemName.replaceAll('${nodeAddr}', currentNodeAddr.value);
     return itemName;
 };
 
@@ -119,7 +119,7 @@ const onSave = async (formEl: FormInstance | undefined) => {
                 .then(() => {
                     loading.value = false;
                     MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-                    globalStore.watermark = {
+                    watermark.value = {
                         lightColor: form.lightColor,
                         darkColor: form.darkColor,
                         fontSize: form.fontSize,
@@ -127,7 +127,7 @@ const onSave = async (formEl: FormInstance | undefined) => {
                         rotate: form.rotate,
                         gap: form.gap,
                     };
-                    globalStore.watermarkShow = true;
+                    watermarkShow.value = true;
                     handleClose();
                     return;
                 })
diff --git a/frontend/src/views/setting/safe/bind/index.vue b/frontend/src/views/setting/safe/bind/index.vue
index d7b8f8a75c1d..05eb786a47a2 100644
--- a/frontend/src/views/setting/safe/bind/index.vue
+++ b/frontend/src/views/setting/safe/bind/index.vue
@@ -50,8 +50,8 @@ import { MsgSuccess } from '@/utils/message';
 import { updateBindInfo, loadInterfaceAddr } from '@/api/modules/setting';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { entrance, isLogin } = useGlobalStore();
 
 interface DialogProps {
     ipv6: string;
@@ -99,11 +99,11 @@ const onSavePort = async (formEl: FormInstance | undefined) => {
                 .then(() => {
                     loading.value = false;
                     MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-                    globalStore.isLogin = false;
+                    isLogin.value = false;
                     let href = window.location.href;
                     let address = '';
-                    if (globalStore.entrance) {
-                        address = href.replaceAll('settings/safe', globalStore.entrance);
+                    if (entrance.value) {
+                        address = href.replaceAll('settings/safe', entrance.value);
                     } else {
                         address = href.replaceAll('settings/safe', 'login');
                     }
diff --git a/frontend/src/views/setting/safe/entrance/index.vue b/frontend/src/views/setting/safe/entrance/index.vue
index 6211d301b842..60a20c317642 100644
--- a/frontend/src/views/setting/safe/entrance/index.vue
+++ b/frontend/src/views/setting/safe/entrance/index.vue
@@ -28,11 +28,11 @@ import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { updateSetting } from '@/api/modules/setting';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { getRandomStr } from '@/utils/id';
 import { FormInstance } from 'element-plus';
 import { clearDashboardCacheByPrefix } from '@/utils/dashboardCache';
-const globalStore = GlobalStore();
+const { entrance, showEntranceWarn } = useGlobalStore();
 
 const emit = defineEmits<{ (e: 'search'): void }>();
 
@@ -64,7 +64,7 @@ function checkSecurityEntrance(rule: any, value: any, callback: any) {
 
 const acceptParams = (params: DialogProps): void => {
     form.securityEntrance = params.securityEntrance;
-    show.value = globalStore.showEntranceWarn;
+    show.value = showEntranceWarn.value;
     drawerVisible.value = true;
 };
 
@@ -84,8 +84,8 @@ const submitEntrance = async (formEl: FormInstance | undefined) => {
         await updateSetting(param)
             .then(() => {
                 clearDashboardCacheByPrefix(['safeStatus']);
-                globalStore.showEntranceWarn = show.value;
-                globalStore.entrance = form.securityEntrance;
+                showEntranceWarn.value = show.value;
+                entrance.value = form.securityEntrance;
                 loading.value = false;
                 drawerVisible.value = false;
                 MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
diff --git a/frontend/src/views/setting/safe/index.vue b/frontend/src/views/setting/safe/index.vue
index 50a947deb017..daccfdbc56fe 100644
--- a/frontend/src/views/setting/safe/index.vue
+++ b/frontend/src/views/setting/safe/index.vue
@@ -164,11 +164,9 @@ import { updateSetting, getSettingInfo, getSystemAvailable, updateSSL, loadSSLIn
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { Setting } from '@/api/interface/setting';
-import { GlobalStore } from '@/store';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const { isMobile } = useGlobalStore();
-const globalStore = GlobalStore();
+const { entrance, isLogin, isMobile } = useGlobalStore();
 
 const loading = ref(false);
 const entranceRef = ref();
@@ -278,10 +276,10 @@ const handleSSL = async () => {
             MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
             lastSSL.value = 'Disable';
             let href = window.location.href;
-            globalStore.isLogin = false;
+            isLogin.value = false;
             let address = href.split('://')[1];
-            if (globalStore.entrance) {
-                address = address.replaceAll('settings/safe', globalStore.entrance);
+            if (entrance.value) {
+                address = address.replaceAll('settings/safe', entrance.value);
             } else {
                 address = address.replaceAll('settings/safe', 'login');
             }
diff --git a/frontend/src/views/setting/safe/port/index.vue b/frontend/src/views/setting/safe/port/index.vue
index 79bef80b8127..1fa495288111 100644
--- a/frontend/src/views/setting/safe/port/index.vue
+++ b/frontend/src/views/setting/safe/port/index.vue
@@ -20,8 +20,8 @@ import { MsgSuccess } from '@/utils/message';
 import { updatePort } from '@/api/modules/setting';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { entrance, isLogin } = useGlobalStore();
 
 interface DialogProps {
     serverPort: number;
@@ -57,14 +57,11 @@ const onSavePort = async (formEl: FormInstance | undefined) => {
                 .then(() => {
                     loading.value = false;
                     MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-                    globalStore.isLogin = false;
+                    isLogin.value = false;
                     let href = window.location.href;
                     let ip = href.split('//')[1].split(':')[0];
-                    if (globalStore.entrance) {
-                        window.open(
-                            `${href.split('//')[0]}//${ip}:${form.serverPort}/${globalStore.entrance}`,
-                            '_self',
-                        );
+                    if (entrance.value) {
+                        window.open(`${href.split('//')[0]}//${ip}:${form.serverPort}/${entrance.value}`, '_self');
                     } else {
                         window.open(`${href.split('//')[0]}//${ip}:${form.serverPort}/login`, '_self');
                     }
diff --git a/frontend/src/views/setting/safe/ssl/index.vue b/frontend/src/views/setting/safe/ssl/index.vue
index 4966e7bb43ec..907b32e43e56 100644
--- a/frontend/src/views/setting/safe/ssl/index.vue
+++ b/frontend/src/views/setting/safe/ssl/index.vue
@@ -128,8 +128,8 @@ import { downloadSSL, updateSSL } from '@/api/modules/setting';
 import { Rules } from '@/global/form-rules';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { Setting } from '@/api/interface/setting';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { entrance, isLogin } = useGlobalStore();
 
 const loading = ref();
 const drawerVisible = ref();
@@ -251,10 +251,10 @@ const onSaveSSL = async (formEl: FormInstance | undefined) => {
             await updateSSL(param).then(() => {
                 MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
                 let href = window.location.href;
-                globalStore.isLogin = false;
+                isLogin.value = false;
                 let address = href.split('://')[1];
-                if (globalStore.entrance) {
-                    address = address.replaceAll('settings/safe', globalStore.entrance);
+                if (entrance.value) {
+                    address = address.replaceAll('settings/safe', entrance.value);
                 } else {
                     address = address.replaceAll('settings/safe', '');
                 }
diff --git a/frontend/src/views/setting/snapshot/import/index.vue b/frontend/src/views/setting/snapshot/import/index.vue
index 737f865e738f..6082226f054f 100644
--- a/frontend/src/views/setting/snapshot/import/index.vue
+++ b/frontend/src/views/setting/snapshot/import/index.vue
@@ -52,8 +52,8 @@ import { Rules } from '@/global/form-rules';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { checkFile } from '@/api/modules/files';
 import { routerToFileWithPath } from '@/utils/router';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { currentNode } = useGlobalStore();
 
 const drawerVisible = ref(false);
 const loading = ref();
@@ -112,7 +112,7 @@ const toFolder = async () => {
 };
 
 const loadBackupDir = async () => {
-    const res = await getLocalBackupDir(globalStore.currentNode);
+    const res = await getLocalBackupDir(currentNode.value);
     backupPath.value = res.data;
 };
 
diff --git a/frontend/src/views/terminal/terminal/index.vue b/frontend/src/views/terminal/terminal/index.vue
index 8e41f477f897..18968ff92bbf 100644
--- a/frontend/src/views/terminal/terminal/index.vue
+++ b/frontend/src/views/terminal/terminal/index.vue
@@ -234,7 +234,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, getCurrentInstance, watch, nextTick, computed, onMounted, onBeforeUnmount } from 'vue';
+import { ref, getCurrentInstance, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
 import Terminal from '@/components/terminal/index.vue';
 import HostDialog from '@/views/terminal/terminal/host-create.vue';
 import type Node from 'element-plus/es/components/tree/src/model/node';
@@ -243,20 +243,17 @@ import screenfull from 'screenfull';
 import i18n from '@/lang';
 import { Host } from '@/api/interface/host';
 import { getHostTree, testByID, testLocalConn } from '@/api/modules/terminal';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import router from '@/routers';
 import { getCommandTree } from '@/api/modules/command';
 import { getAgentSettingInfo } from '@/api/modules/setting';
 import AiSetting from '@/views/terminal/setting/ai/index.vue';
 import { MsgWarning } from '@/utils/message';
-import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const { isMobile } = useGlobalStore();
+const { isFullScreen, isMobile, isNodeAdmin, openMenuTabs } = useGlobalStore();
 
 const dialogRef = ref();
 const ctx = getCurrentInstance() as any;
-const globalStore = GlobalStore();
-const isNodeAdmin = computed(() => globalStore.isNodeAdmin);
 
 const toggleFullscreen = () => {
     if (screenfull.isEnabled) {
@@ -264,7 +261,7 @@ const toggleFullscreen = () => {
     }
 };
 const loadTooltip = () => {
-    return i18n.global.t('commons.button.' + (globalStore.isFullScreen ? 'quitFullscreen' : 'fullscreen'));
+    return i18n.global.t('commons.button.' + (isFullScreen.value ? 'quitFullscreen' : 'fullscreen'));
 };
 
 let timer: ReturnType<typeof setInterval> | null = null;
@@ -297,7 +294,7 @@ interface Tree {
 const initCmd = ref('');
 
 const acceptParams = async () => {
-    globalStore.isFullScreen = false;
+    isFullScreen.value = false;
     loadCommandTree();
     if (!isNodeAdmin.value) {
         loadHostTree();
@@ -320,7 +317,7 @@ const acceptParams = async () => {
     }, 1000 * 5);
     if (!isMobile.value) {
         screenfull.on('change', () => {
-            globalStore.isFullScreen = screenfull.isFullscreen;
+            isFullScreen.value = screenfull.isFullscreen;
         });
     }
 };
@@ -336,13 +333,13 @@ const cleanTimer = () => {
 };
 
 const loadHeight = () => {
-    return globalStore.openMenuTabs ? '250px' : '210px';
+    return openMenuTabs.value ? '250px' : '210px';
 };
 const loadEmptyHeight = () => {
-    return globalStore.openMenuTabs ? '201px' : '156px';
+    return openMenuTabs.value ? '201px' : '156px';
 };
 const loadFullScreenHeight = () => {
-    return globalStore.openMenuTabs ? '105px' : '60px';
+    return openMenuTabs.value ? '105px' : '60px';
 };
 
 const handleTabsRemove = (targetName: string, action: 'remove' | 'add') => {
@@ -546,7 +543,7 @@ function syncTerminal() {
 }
 
 const changeFullScreen = () => {
-    globalStore.isFullScreen = screenfull.isFullscreen;
+    isFullScreen.value = screenfull.isFullscreen;
 };
 
 defineExpose({
diff --git a/frontend/src/views/toolbox/clam/index.vue b/frontend/src/views/toolbox/clam/index.vue
index 02e919d691c9..d2027c1fc287 100644
--- a/frontend/src/views/toolbox/clam/index.vue
+++ b/frontend/src/views/toolbox/clam/index.vue
@@ -5,7 +5,7 @@
                 <el-alert type="info" :closable="false">
                     <template #title>
                         {{ $t('toolbox.clam.clamHelper') }}
-                        <el-link class="ml-1 text-xs" v-if="!globalStore.isFxplay" @click="toDoc()" type="primary">
+                        <el-link class="ml-1 text-xs" v-if="!isFxplay" @click="toDoc()" type="primary">
                             {{ $t('commons.button.helpDoc') }}
                         </el-link>
                     </template>
@@ -188,15 +188,13 @@ import ClamStatus from '@/views/toolbox/clam/status/index.vue';
 import SettingDialog from '@/views/toolbox/clam/setting/index.vue';
 import { Toolbox } from '@/api/interface/toolbox';
 import { transSpecToStr } from '@/views/cronjob/cronjob/helper';
-import { GlobalStore } from '@/store';
-import { storeToRefs } from 'pinia';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { routerToFileWithPath, routerToName } from '@/utils/router';
 
 const loading = ref();
 const selects = ref<any>([]);
 
-const globalStore = GlobalStore();
-const { isProductPro } = storeToRefs(globalStore);
+const { docsUrl, isFxplay, isProductPro } = useGlobalStore();
 const data = ref();
 const paginationConfig = reactive({
     cacheSizeKey: 'clam-page-size',
@@ -254,7 +252,7 @@ const getStatus = (status: any) => {
 };
 
 const toDoc = () => {
-    window.open(globalStore.docsUrl + '/user_manual/toolbox/clam/', '_blank', 'noopener,noreferrer');
+    window.open(docsUrl.value + '/user_manual/toolbox/clam/', '_blank', 'noopener,noreferrer');
 };
 
 const onChange = async (row: any) => {
diff --git a/frontend/src/views/toolbox/clam/operate/index.vue b/frontend/src/views/toolbox/clam/operate/index.vue
index 0ac83f83b5d8..9ebc9c8274e9 100644
--- a/frontend/src/views/toolbox/clam/operate/index.vue
+++ b/frontend/src/views/toolbox/clam/operate/index.vue
@@ -121,7 +121,7 @@
                             </el-input>
                         </div>
                     </el-form-item>
-                    <div v-if="globalStore.isIntl">
+                    <div v-if="isIntl">
                         <el-form-item v-if="dialogData.rowData!.hasSpec && !isProductPro">
                             <span class="input-help logText">
                                 {{ $t('toolbox.clam.alertHelper') }}
@@ -131,7 +131,7 @@
                             </span>
                         </el-form-item>
                     </div>
-                    <div v-if="!globalStore.isIntl">
+                    <div v-if="!isIntl">
                         <el-form-item prop="hasAlert">
                             <el-checkbox v-model="dialogData.rowData!.hasAlert" :label="$t('xpack.alert.isAlert')" />
                             <span class="input-help">{{ $t('xpack.alert.clamHelper') }}</span>
@@ -161,26 +161,26 @@
                                 <el-option v-if="!isProductPro" value="bark" :label="$t('xpack.alert.bark')" />
                                 <el-option
                                     value="weCom"
-                                    v-if="!globalStore.isIntl"
+                                    v-if="!isIntl"
                                     :disabled="!dialogData.rowData!.hasAlert || !isProductPro"
                                     :label="$t('xpack.alert.weCom')"
                                 />
                                 <el-option
                                     value="dingTalk"
-                                    v-if="!globalStore.isIntl"
+                                    v-if="!isIntl"
                                     :disabled="!dialogData.rowData!.hasAlert || !isProductPro"
                                     :label="$t('xpack.alert.dingTalk')"
                                 />
                                 <el-option
                                     value="feiShu"
-                                    v-if="!globalStore.isIntl"
+                                    v-if="!isIntl"
                                     :disabled="!dialogData.rowData!.hasAlert || !isProductPro"
                                     :label="$t('xpack.alert.feiShu')"
                                 />
                                 <el-option v-if="isProductPro" value="bark" :label="$t('xpack.alert.bark')" />
                                 <el-option
                                     value="sms"
-                                    v-if="!globalStore.isIntl"
+                                    v-if="!isIntl"
                                     :disabled="!dialogData.rowData!.hasAlert || !isProductPro"
                                     :label="$t('xpack.alert.sms')"
                                 />
@@ -242,15 +242,13 @@ import LicenseImport from '@/components/license-import/index.vue';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { Toolbox } from '@/api/interface/toolbox';
 import { createClam, updateClam } from '@/api/modules/toolbox';
-import { storeToRefs } from 'pinia';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { specOptions, transObjToSpec, transSpecToObj, weekOptions } from '@/views/cronjob/cronjob/helper';
 import { splitTimeFromSecond, transferTimeToSecond } from '@/utils/validate';
-const globalStore = GlobalStore();
+const { isIntl, isProductPro } = useGlobalStore();
 const licenseRef = ref();
 const scanDirRef = ref();
 const infectedDirRef = ref();
-const { isProductPro } = storeToRefs(globalStore);
 interface DialogProps {
     title: string;
     rowData?: Toolbox.ClamInfo;
diff --git a/frontend/src/views/toolbox/device/time-zone/index.vue b/frontend/src/views/toolbox/device/time-zone/index.vue
index cbfa1bde6ce4..dc3a232d42e6 100644
--- a/frontend/src/views/toolbox/device/time-zone/index.vue
+++ b/frontend/src/views/toolbox/device/time-zone/index.vue
@@ -51,10 +51,10 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { loadTimeZoneOptions, updateDevice } from '@/api/modules/toolbox';
 import { changeToLocal } from '@/utils/node';
-const globalStore = GlobalStore();
+const { currentNode, isLogin } = useGlobalStore();
 
 interface DialogProps {
     timeZone: string;
@@ -101,8 +101,8 @@ const onSave = async (formEl: FormInstance | undefined) => {
                 .then(async () => {
                     loading.value = false;
                     MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-                    if (globalStore.currentNode === 'local') {
-                        globalStore.isLogin = false;
+                    if (currentNode.value === 'local') {
+                        isLogin.value = false;
                         let href = window.location.href;
                         window.open(href, '_self');
                     } else {
diff --git a/frontend/src/views/toolbox/fail2ban/index.vue b/frontend/src/views/toolbox/fail2ban/index.vue
index c6e95b3e7095..782e1d4c2862 100644
--- a/frontend/src/views/toolbox/fail2ban/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/index.vue
@@ -39,7 +39,7 @@
 
         <div v-if="form.isExist">
             <LayoutContent title="Fail2ban" :divider="true">
-                <template #promp v-if="!globalStore.isFxplay">
+                <template #promp v-if="!isFxplay">
                     <el-alert type="info" :closable="false">
                         <template #title>
                             {{ $t('toolbox.common.toolboxHelper') }}
@@ -180,9 +180,9 @@ import { MsgSuccess } from '@/utils/message';
 import { getFail2banConf, getFail2banBase, operateFail2ban, updateFail2banByFile } from '@/api/modules/toolbox';
 import { ElMessageBox } from 'element-plus';
 import { transTimeUnit } from '@/utils/validate';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const globalStore = GlobalStore();
+const { docsUrl, isFxplay } = useGlobalStore();
 
 const loading = ref(false);
 const formRef = ref();
@@ -313,7 +313,7 @@ const search = async () => {
 };
 
 const toDoc = () => {
-    window.open(globalStore.docsUrl + '/user_manual/toolbox/fail2ban/', '_blank', 'noopener,noreferrer');
+    window.open(docsUrl.value + '/user_manual/toolbox/fail2ban/', '_blank', 'noopener,noreferrer');
 };
 
 onMounted(() => {
diff --git a/frontend/src/views/toolbox/ftp/index.vue b/frontend/src/views/toolbox/ftp/index.vue
index e157d4e7d38a..541082f5b5b0 100644
--- a/frontend/src/views/toolbox/ftp/index.vue
+++ b/frontend/src/views/toolbox/ftp/index.vue
@@ -24,7 +24,7 @@
         </div>
         <div v-if="form.isExist">
             <LayoutContent v-loading="loading" :title="$t('toolbox.ftp.ftp', 2)" :class="{ mask: !form.isActive }">
-                <template #prompt v-if="!globalStore.isFxplay">
+                <template #prompt v-if="!isFxplay">
                     <el-alert type="info" :closable="false">
                         <template #title>
                             {{ $t('toolbox.common.toolboxHelper') }}
@@ -162,10 +162,10 @@ import { deleteFtp, searchFtp, updateFtp, syncFtp, operateFtp, getFtpBase } from
 import OperateDialog from '@/views/toolbox/ftp/operate/index.vue';
 import LogDialog from '@/views/toolbox/ftp/log/index.vue';
 import { Toolbox } from '@/api/interface/toolbox';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { routerToFileWithPath } from '@/utils/router';
 import { getRandomStr } from '@/utils/id';
-const globalStore = GlobalStore();
+const { docsUrl, isFxplay } = useGlobalStore();
 
 const loading = ref();
 const selects = ref<any>([]);
@@ -363,7 +363,7 @@ const buttons = [
 ];
 
 const toDoc = () => {
-    window.open(globalStore.docsUrl + '/user_manual/toolbox/ftp/', '_blank', 'noopener,noreferrer');
+    window.open(docsUrl.value + '/user_manual/toolbox/ftp/', '_blank', 'noopener,noreferrer');
 };
 
 onMounted(() => {
diff --git a/frontend/src/views/toolbox/index.vue b/frontend/src/views/toolbox/index.vue
index ab8e4321324e..da7f009fa822 100644
--- a/frontend/src/views/toolbox/index.vue
+++ b/frontend/src/views/toolbox/index.vue
@@ -25,17 +25,17 @@
 import i18n from '@/lang';
 import { ref } from 'vue';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { MsgSuccess } from '@/utils/message';
 import { systemRestart } from '@/api/modules/dashboard';
 
 const restartType = ref();
 const confirmDialogRef = ref();
-const globalStore = GlobalStore();
+const { currentNode, isOnRestart } = useGlobalStore();
 
 const onRestart = (type: string) => {
     let header = i18n.global.t('home.restart_' + type);
-    if (globalStore.currentNode != 'local' && type === '1panel') {
+    if (currentNode.value != 'local' && type === '1panel') {
         type = '1panel-agent';
     }
     restartType.value = type;
@@ -47,7 +47,7 @@ const onRestart = (type: string) => {
     confirmDialogRef.value!.acceptParams(params);
 };
 const onSave = async () => {
-    globalStore.isOnRestart = true;
+    isOnRestart.value = true;
     MsgSuccess(i18n.global.t('home.operationSuccess'));
     await systemRestart(restartType.value);
 };
diff --git a/frontend/src/views/toolbox/supervisor/file/index.vue b/frontend/src/views/toolbox/supervisor/file/index.vue
index fa69fc1ac776..162bab79a171 100644
--- a/frontend/src/views/toolbox/supervisor/file/index.vue
+++ b/frontend/src/views/toolbox/supervisor/file/index.vue
@@ -3,7 +3,7 @@
         v-model="open"
         :header="$t('website.source')"
         @close="handleClose"
-        :size="globalStore.isFullScreen ? 'full' : 'large'"
+        :size="isFullScreen ? 'full' : 'large'"
         :fullScreen="true"
     >
         <template #content>
@@ -27,8 +27,8 @@ import { onUnmounted, reactive, ref } from 'vue';
 import { getSupervisorProcessFile, operateSupervisorProcessFile } from '@/api/modules/host-tool';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { isFullScreen } = useGlobalStore();
 
 const loading = ref(false);
 const content = ref('');
diff --git a/frontend/src/views/toolbox/supervisor/index.vue b/frontend/src/views/toolbox/supervisor/index.vue
index 18c281c2450f..3cd3124b43fb 100644
--- a/frontend/src/views/toolbox/supervisor/index.vue
+++ b/frontend/src/views/toolbox/supervisor/index.vue
@@ -4,7 +4,7 @@
             <span>{{ $t('tool.supervisor.notStartWarn') }}</span>
         </el-card>
         <LayoutContent :title="$t(' tool.supervisor.list', 2)" v-loading="loading">
-            <template #prompt v-if="!globalStore.isFxplay">
+            <template #prompt v-if="!isFxplay">
                 <el-alert type="info" :closable="false">
                     <template #title>
                         {{ $t('toolbox.common.toolboxHelper') }}
@@ -175,15 +175,13 @@ import Create from './create/index.vue';
 import File from './file/index.vue';
 import ProcessDetail from '@/views/host/process/process/detail/index.vue';
 import { getSupervisorProcess, operateSupervisorProcess } from '@/api/modules/host-tool';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import i18n from '@/lang';
 import { HostTool } from '@/api/interface/host-tool';
 import { MsgSuccess } from '@/utils/message';
 import { routerToFileWithPath } from '@/utils/router';
-import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const { isMobile } = useGlobalStore();
-const globalStore = GlobalStore();
+const { docsUrl, isFxplay, isMobile } = useGlobalStore();
 
 const loading = ref(false);
 const setSuperVisor = ref(false);
@@ -378,7 +376,7 @@ const buttons = [
 ];
 
 const toDoc = () => {
-    window.open(globalStore.docsUrl + '/user_manual/toolbox/supervisor/', '_blank', 'noopener,noreferrer');
+    window.open(docsUrl.value + '/user_manual/toolbox/supervisor/', '_blank', 'noopener,noreferrer');
 };
 
 onMounted(() => {
diff --git a/frontend/src/views/toolbox/supervisor/log/index.vue b/frontend/src/views/toolbox/supervisor/log/index.vue
index 13859a805407..d65685114061 100644
--- a/frontend/src/views/toolbox/supervisor/log/index.vue
+++ b/frontend/src/views/toolbox/supervisor/log/index.vue
@@ -3,7 +3,7 @@
         v-model="open"
         :header="$t('commons.button.log') + ' - ' + supervisorName"
         @close="handleClose"
-        :size="globalStore.isFullScreen ? 'full' : 'large'"
+        :size="isFullScreen ? 'full' : 'large'"
         :fullScreen="true"
     >
         <template #content>
@@ -41,11 +41,11 @@
 import LogFile from '@/components/log/file/index.vue';
 
 import { onUnmounted, reactive, ref } from 'vue';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { operateSupervisorProcessFile } from '@/api/modules/host-tool';
 import i18n from '@/lang';
 import { TabsPaneContext } from 'element-plus';
-const globalStore = GlobalStore();
+const { isFullScreen } = useGlobalStore();
 
 const logConfig = reactive({
     type: 'supervisor',
diff --git a/frontend/src/views/toolbox/supervisor/status/index.vue b/frontend/src/views/toolbox/supervisor/status/index.vue
index 40f46257affc..52e725e02760 100644
--- a/frontend/src/views/toolbox/supervisor/status/index.vue
+++ b/frontend/src/views/toolbox/supervisor/status/index.vue
@@ -63,11 +63,7 @@
 
                         <template v-else-if="data.init">
                             <span>{{ $t('tool.supervisor.initHelper') }}</span>
-                            <span
-                                v-if="!globalStore.isFxplay"
-                                class="flex items-center justify-center gap-0.5"
-                                @click="toDoc()"
-                            >
+                            <span v-if="!isFxplay" class="flex items-center justify-center gap-0.5" @click="toDoc()">
                                 <el-icon><Position /></el-icon>
                                 {{ $t('commons.button.helpDoc') }}
                             </span>
@@ -99,10 +95,10 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { HostTool } from '@/api/interface/host-tool';
 import InitPage from './init/index.vue';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 import { routerToNameWithQuery } from '@/utils/router';
 
-const globalStore = GlobalStore();
+const { docsUrl, isFxplay } = useGlobalStore();
 
 let operateReq = reactive({
     installId: 0,
@@ -131,7 +127,7 @@ const toLibrary = () => {
 };
 
 const toDoc = () => {
-    window.open(globalStore.docsUrl + '/user_manual/toolbox/supervisor/', '_blank', 'noopener,noreferrer');
+    window.open(docsUrl.value + '/user_manual/toolbox/supervisor/', '_blank', 'noopener,noreferrer');
 };
 
 const init = async () => {
diff --git a/frontend/src/views/website/runtime/components/terminal.vue b/frontend/src/views/website/runtime/components/terminal.vue
index b7794e6b690b..18b30c8fcc53 100644
--- a/frontend/src/views/website/runtime/components/terminal.vue
+++ b/frontend/src/views/website/runtime/components/terminal.vue
@@ -5,7 +5,7 @@
         @close="handleClose"
         :resource="title"
         fullScreen
-        :size="globalStore.isFullScreen ? 'full' : 'large'"
+        :size="isFullScreen ? 'full' : 'large'"
         :autoClose="false"
     >
         <template #content>
@@ -33,9 +33,9 @@
 <script lang="ts" setup>
 import { reactive, ref, nextTick } from 'vue';
 import Terminal from '@/components/terminal/index.vue';
-import { GlobalStore } from '@/store';
+import { useGlobalStore } from '@/composables/useGlobalStore';
 
-const globalStore = GlobalStore();
+const { isFullScreen } = useGlobalStore();
 const title = ref();
 const terminalVisible = ref(false);
 const terminalOpen = ref(false);
diff --git a/frontend/src/views/website/runtime/php/create/index.vue b/frontend/src/views/website/runtime/php/create/index.vue
index 16b735c542b5..c780eefe3000 100644
--- a/frontend/src/views/website/runtime/php/create/index.vue
+++ b/frontend/src/views/website/runtime/php/create/index.vue
@@ -24,7 +24,7 @@
                     v-model="runtime.resource"
                     @change="changeResource(runtime.resource)"
                 >
-                    <el-radio :value="'appstore'" v-if="!globalStore.isOffline">
+                    <el-radio :value="'appstore'" v-if="!isOffline">
                         {{ $t('menu.apps') }}
                     </el-radio>
                     <el-radio :value="'local'">
@@ -150,9 +150,9 @@
                                     </span>
                                     <div>
                                         <span
-                                            v-if="!globalStore.isFxplay"
+                                            v-if="!isFxplay"
                                             class="custom-link"
-                                            @click="openLink(globalStore.docsUrl + '/user_manual/websites/php/#php_1')"
+                                            @click="openLink(docsUrl + '/user_manual/websites/php/#php_1')"
                                         >
                                             {{ $t('php.toExtensionsList') }}
                                         </span>
@@ -179,7 +179,7 @@
                                     class="ml-1 text-xs"
                                     type="primary"
                                     target="_blank"
-                                    :href="globalStore.docsUrl + '/user_manual/websites/php/'"
+                                    :href="docsUrl + '/user_manual/websites/php/'"
                                 >
                                     {{ $t('commons.button.helpDoc') }}
                                 </el-link>
@@ -215,7 +215,7 @@ import { FormInstance } from 'element-plus';
 import { reactive, ref } from 'vue';
 import { getLabel } from '@/utils/app-store';
 import { useGlobalStore } from '@/composables/useGlobalStore';
-const { globalStore } = useGlobalStore();
+const { docsUrl, isFxplay, isIntl, isOffline } = useGlobalStore();
 
 interface OperateRrops {
     id?: number;
@@ -238,7 +238,7 @@ const appReq = reactive({
     page: 1,
     pageSize: 20,
 });
-const phpSources = globalStore.isIntl
+const phpSources = isIntl.value
     ? [
           {
               label: i18n.global.t('runtime.default'),
@@ -491,7 +491,7 @@ const acceptParams = async (props: OperateRrops) => {
     initParam.value = false;
     if (props.mode === 'create') {
         Object.assign(runtime, initData(props.type));
-        if (globalStore.isOffline) {
+        if (isOffline.value) {
             runtime.resource = 'local';
         } else {
             searchAppList(null);
diff --git a/frontend/src/views/website/runtime/php/extension-template/operate/index.vue b/frontend/src/views/website/runtime/php/extension-template/operate/index.vue
index 8658a1b24a1b..76f4ea3afaf3 100644
--- a/frontend/src/views/website/runtime/php/extension-template/operate/index.vue
+++ b/frontend/src/views/website/runtime/php/extension-template/operate/index.vue
@@ -22,8 +22,8 @@
                     <el-link
                         target="_blank"
                         type="primary"
-                        v-if="!globalStore.isFxplay"
-                        :href="globalStore.docsUrl + '/user_manual/websites/php/#php_1'"
+                        v-if="!isFxplay"
+                        :href="docsUrl + '/user_manual/websites/php/#php_1'"
                     >
                         {{ $t('php.toExtensionsList') }}
                     </el-link>
@@ -51,8 +51,8 @@ import { MsgSuccess } from '@/utils/message';
 import { CreatePHPExtensions, UpdatePHPExtensions } from '@/api/modules/runtime';
 import i18n from '@/lang';
 import { Runtime } from '@/api/interface/runtime';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { docsUrl, isFxplay } = useGlobalStore();
 
 const open = ref(false);
 const operate = ref('create');
diff --git a/frontend/src/views/website/ssl/create/index.vue b/frontend/src/views/website/ssl/create/index.vue
index 5dff5a96687b..ede874bbe002 100644
--- a/frontend/src/views/website/ssl/create/index.vue
+++ b/frontend/src/views/website/ssl/create/index.vue
@@ -146,7 +146,7 @@
                     </span>
                 </el-form-item>
                 <PushToNode
-                    v-if="globalStore.isMaster && globalStore.isXpackOrEE()"
+                    v-if="isMaster && isXpackOrEE"
                     :push-node="ssl.pushNode"
                     :nodes="ssl.pushNodes"
                     type="ssl"
@@ -179,8 +179,8 @@ import { MsgSuccess } from '@/utils/message';
 import { KeyTypes } from '@/global/mimetype';
 import { getDNSName, getAccountName } from '@/utils/ssl';
 import { defineAsyncComponent } from 'vue';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+import { useGlobalStore } from '@/composables/useGlobalStore';
+const { isMaster, isXpackOrEE } = useGlobalStore();
 
 const PushToNode = defineAsyncComponent(async () => {
     const modules = import.meta.glob('@/xpack/views/ssl/index.vue');