fix: UI tab active icon wrong position (#416)

frontend/src/api/index.js

@@ -96,6 +96,8 @@ const getOpenSettings = async (message) => {
         }
     } catch (error) {
         message.error(error.message || "error");
+    } finally {
+        openSettings.value.fetched = true;
     }
 }
 
@@ -122,6 +124,8 @@ const getUserOpenSettings = async (message) => {
         Object.assign(userOpenSettings.value, res);
     } catch (error) {
         message.error(error.message || "fetch settings failed");
+    } finally {
+        userOpenSettings.value.fetched = true;
     }
 }
 

frontend/src/store/index.js

@@ -8,6 +8,7 @@ export const useGlobalState = createGlobalState(
         const loading = ref(false);
         const announcement = useLocalStorage('announcement', '');
         const openSettings = ref({
+            fetched: false,
             title: '',
             announcement: '',
             prefix: '',
@@ -67,6 +68,7 @@ export const useGlobalState = createGlobalState(
         const globalTabplacement = useStorage('globalTabplacement', 'top');
         const useSideMargin = useStorage('useSideMargin', true);
         const userOpenSettings = ref({
+            fetched: false,
             enable: false,
             enableMailVerify: false,
         });

frontend/src/views/admin/UserSettings.vue

@@ -92,8 +92,8 @@ onMounted(async () => {
                         <n-checkbox v-model:checked="userSettings.enableMailVerify" style="width: 20%;">
                             {{ t('enable') }}
                         </n-checkbox>
-                        <n-input v-model:value="userSettings.verifyMailSender" style="width: 80%;"
-                            :placeholder="t('verifyMailSender')" />
+                        <n-input v-model:value="userSettings.verifyMailSender" v-if="userSettings.enableMailVerify"
+                            style="width: 80%;" :placeholder="t('verifyMailSender')" />
                     </n-input-group>
                 </n-form-item-row>
                 <n-form-item-row :label="t('enableMailAllowList')">
@@ -101,8 +101,9 @@ onMounted(async () => {
                         <n-checkbox v-model:checked="userSettings.enableMailAllowList" style="width: 20%;">
                             {{ t('enable') }}
                         </n-checkbox>
-                        <n-select v-model:value="userSettings.mailAllowList" filterable multiple tag style="width: 80%;"
-                            :options="mailAllowOptions" :placeholder="t('mailAllowList')" />
+                        <n-select v-model:value="userSettings.mailAllowList" v-if="userSettings.enableMailAllowList"
+                            filterable multiple tag style="width: 80%;" :options="mailAllowOptions"
+                            :placeholder="t('mailAllowList')" />
                     </n-input-group>
                 </n-form-item-row>
                 <n-form-item-row :label="t('maxAddressCount')">

frontend/src/views/admin/Webhook.vue

@@ -15,11 +15,13 @@ const { t } = useI18n({
             successTip: 'Success',
             webhookAllowList: 'Webhook Allow List(Enter the address that is allowed to use webhook)',
             save: 'Save',
+            notEnabled: 'Webhook is not enabled',
         },
         zh: {
             successTip: '成功',
             webhookAllowList: 'Webhook 白名单(请输入允许使用webhook 的地址)',
             save: '保存',
+            notEnabled: 'Webhook 未开启',
         }
     }
 });
@@ -33,11 +35,13 @@ class WebhookSettings {
 }
 
 const webhookSettings = ref(new WebhookSettings([]))
+const webhookEnabled = ref(false)
 
 const getSettings = async () => {
     try {
         const res = await api.fetch(`/admin/webhook/settings`)
         Object.assign(webhookSettings.value, res)
+        webhookEnabled.value = true
     } catch (error) {
         message.error((error as Error).message || "error");
     }
@@ -62,7 +66,7 @@ onMounted(async () => {
 
 <template>
     <div class="center">
-        <n-card :bordered="false" embedded style="max-width: 800px; overflow: auto;">
+        <n-card v-if="webhookEnabled" :bordered="false" embedded style="max-width: 800px; overflow: auto;">
             <n-form-item-row :label="t('webhookAllowList')">
                 <n-select v-model:value="webhookSettings.allowList" filterable multiple tag
                     :placeholder="t('webhookAllowList')" />
@@ -71,6 +75,7 @@ onMounted(async () => {
                 {{ t('save') }}
             </n-button>
         </n-card>
+        <n-result v-else status="404" :title="t('notEnabled')" />
     </div>
 </template>
 

frontend/src/views/common/Login.vue

@@ -193,7 +193,7 @@ onMounted(async () => {
         <n-alert v-if="userSettings.user_email" :show-icon="false" :bordered="false" closable>
             <span>{{ t('bindUserInfo') }}</span>
         </n-alert>
-        <n-tabs v-model:value="tabValue" size="large" justify-content="space-evenly">
+        <n-tabs v-if="openSettings.fetched" v-model:value="tabValue" size="large" justify-content="space-evenly">
             <n-tab-pane name="signin" :tab="t('login')">
                 <n-form>
                     <n-form-item-row :label="t('credential')" required>

frontend/src/views/user/UserLogin.vue

@@ -191,7 +191,7 @@ onMounted(async () => {
 
 <template>
     <div class="center">
-        <n-tabs v-model:value="tabValue" size="large" justify-content="space-evenly">
+        <n-tabs v-model:value="tabValue" size="large" v-if="userOpenSettings.fetched" justify-content="space-evenly">
             <n-tab-pane name="signin" :tab="t('login')">
                 <n-form>
                     <n-form-item-row :label="t('email')" required>