1Panel-dev · wanghe-fit2cloud · May 13, 2026 · May 12, 2026 · May 13, 2026 · May 13, 2026
diff --git 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
@@ -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
@@ -3,16 +3,14 @@ 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';
 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,16 +44,15 @@ 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);
                 if (requiresToken) {
                     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
@@ -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
@@ -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
@@ -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/fu/FuDropdownItem.vue 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
@@ -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>