diff --git a/webui/src/components/ab-label.vue b/webui/src/components/ab-label.vue
index 0601bf56..1eaa20af 100644
--- a/webui/src/components/ab-label.vue
+++ b/webui/src/components/ab-label.vue
@@ -8,13 +8,13 @@ const props = withDefaults(
   }
 );
 
-const abLabel = () => {
+function abLabel() {
   if (typeof props.label === 'function') {
     return props.label();
   } else {
     return props.label;
   }
-};
+}
 </script>
 
 <template>
diff --git a/webui/src/components/ab-status-bar.vue b/webui/src/components/ab-status-bar.vue
index 0e7832f1..400d014f 100644
--- a/webui/src/components/ab-status-bar.vue
+++ b/webui/src/components/ab-status-bar.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
-import { AddOne, More, International } from '@icon-park/vue-next';
+import { AddOne, International, More } from '@icon-park/vue-next';
 
 withDefaults(
   defineProps<{
@@ -8,7 +8,7 @@ withDefaults(
     items: {
       id: number;
       icon: any;
-      label: string;
+      label: string | (() => string);
       handle?: () => void | Promise<void>;
     }[];
   }>(),
@@ -21,6 +21,14 @@ defineEmits<{
   (e: 'changeLang'): void;
   (e: 'clickAdd'): void;
 }>();
+
+function abLabel(label: string | (() => string)) {
+  if (typeof label === 'function') {
+    return label();
+  } else {
+    return label;
+  }
+}
 </script>
 
 <template>
@@ -76,7 +84,7 @@ defineEmits<{
             :class="[active ? 'text-white bg-theme-row' : 'text-black']"
             @click="() => i.handle && i.handle()"
           >
-            <div text-main>{{ i.label }}</div>
+            <div text-main>{{ abLabel(i.label) }}</div>
 
             <div
               class="group-hover:text-white"