diff --git a/frontend/src/views/setting/panel/api-interface/index.vue b/frontend/src/views/setting/panel/api-interface/index.vue
index 6588b3863..07b2ade90 100644
--- a/frontend/src/views/setting/panel/api-interface/index.vue
+++ b/frontend/src/views/setting/panel/api-interface/index.vue
@@ -6,7 +6,7 @@
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             @close="handleClose"
-            size="35%"
+            size="40%"
         >
             <template #header>
                 <DrawerHeader :header="$t('setting.apiInterface')" :back="handleClose" />
@@ -89,6 +89,7 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import DrawerHeader from '@/components/drawer-header/index.vue';
+import { checkCidr, checkIp } from '@/utils/util';
 
 const loading = ref();
 const drawerVisible = ref();
@@ -105,7 +106,7 @@ const form = reactive({
 });
 
 const rules = reactive({
-    ipWhiteList: [Rules.requiredInput],
+    ipWhiteList: [Rules.requiredInput, { validator: checkIPs, trigger: 'blur' }],
     apiKey: [Rules.requiredInput],
 });
 
@@ -114,7 +115,28 @@ interface DialogProps {
     apiKey: string;
     ipWhiteList: string;
 }
+
+function checkIPs(rule: any, value: any, callback: any) {
+    if (form.ipWhiteList !== '') {
+        let addr = form.ipWhiteList.split('\n');
+        for (const item of addr) {
+            if (item === '') {
+                continue;
+            }
+            if (item.indexOf('/') !== -1) {
+                if (checkCidr(item)) {
+                    return callback(new Error(i18n.global.t('firewall.addressFormatError')));
+                }
+            } else if (checkIp(item)) {
+                return callback(new Error(i18n.global.t('firewall.addressFormatError')));
+            }
+        }
+    }
+    callback();
+}
+
 const emit = defineEmits<{ (e: 'search'): void }>();
+
 const acceptParams = async (params: DialogProps): Promise<void> => {
     form.apiInterfaceStatus = params.apiInterfaceStatus;
     form.apiKey = params.apiKey;
@@ -128,12 +150,12 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
 };
 
 const resetApiKey = async () => {
-    loading.value = true;
     ElMessageBox.confirm(i18n.global.t('setting.apiKeyResetHelper'), i18n.global.t('setting.apiKeyReset'), {
         confirmButtonText: i18n.global.t('commons.button.confirm'),
         cancelButtonText: i18n.global.t('commons.button.cancel'),
     })
         .then(async () => {
+            loading.value = true;
             await generateApiKey()
                 .then((res) => {
                     loading.value = false;
diff --git a/frontend/src/views/setting/panel/index.vue b/frontend/src/views/setting/panel/index.vue
index b55ed6a62..caa481444 100644
--- a/frontend/src/views/setting/panel/index.vue
+++ b/frontend/src/views/setting/panel/index.vue
@@ -141,6 +141,13 @@
                                     inactive-value="disable"
                                 />
                                 <span class="input-help">{{ $t('setting.apiInterfaceHelper') }}</span>
+                                <div v-if="form.apiInterfaceStatus === 'enable'">
+                                    <div>
+                                        <el-button link type="primary" @click="onChangeApiInterfaceStatus">
+                                            {{ $t('commons.button.view') }}
+                                        </el-button>
+                                    </div>
+                                </div>
                             </el-form-item>
 
                             <el-form-item :label="$t('setting.developerMode')" prop="developerMode">
@@ -382,13 +389,21 @@ const onChangeProxy = () => {
     });
 };
 
-const onChangeApiInterfaceStatus = () => {
+const onChangeApiInterfaceStatus = async () => {
     if (form.apiInterfaceStatus === 'enable') {
-        apiInterfaceRef.value.acceptParams({
-            apiInterfaceStatus: form.apiInterfaceStatus,
-            apiKey: form.apiKey,
-            ipWhiteList: form.ipWhiteList,
-        });
+        loading.value = true;
+        await updateSetting({ key: 'ApiInterfaceStatus', value: form.apiInterfaceStatus })
+            .then(() => {
+                loading.value = false;
+                apiInterfaceRef.value.acceptParams({
+                    apiInterfaceStatus: form.apiInterfaceStatus,
+                    apiKey: form.apiKey,
+                    ipWhiteList: form.ipWhiteList,
+                });
+            })
+            .catch(() => {
+                loading.value = false;
+            });
         return;
     }
     ElMessageBox.confirm(i18n.t('setting.apiInterfaceClose'), i18n.t('setting.apiInterface'), {
@@ -397,6 +412,7 @@ const onChangeApiInterfaceStatus = () => {
     })
         .then(async () => {
             loading.value = true;
+            form.apiInterfaceStatus = 'disable';
             await updateSetting({ key: 'ApiInterfaceStatus', value: 'disable' })
                 .then(() => {
                     loading.value = false;
@@ -408,12 +424,7 @@ const onChangeApiInterfaceStatus = () => {
                 });
         })
         .catch(() => {
-            apiInterfaceRef.value.acceptParams({
-                apiInterfaceStatus: 'enable',
-                apiKey: form.apiKey,
-                ipWhiteList: form.ipWhiteList,
-            });
-            return;
+            form.apiInterfaceStatus = 'enable';
         });
 };
 const onChangeNetwork = () => {