feat:在用户未为服务商配置key时添加二次警告确认

dashboard/src/views/ProviderPage.vue

@@ -306,6 +306,24 @@
     </v-snackbar>
 
     <WaitingForRestart ref="wfr"></WaitingForRestart>
+
+    <!-- Key为空的确认对话框 -->
+    <v-dialog v-model="showKeyConfirm" max-width="450" persistent>
+      <v-card>
+        <v-card-title class="text-h6 bg-error d-flex align-center">
+          <v-icon start class="me-2">mdi-alert-circle-outline</v-icon>
+          确认保存
+        </v-card-title>
+        <v-card-text class="py-4 text-body-1 text-medium-emphasis">
+          您没有填写 API Key，确定要保存吗？这可能会导致该服务提供商无法正常工作。
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="grey" variant="text" @click="handleKeyConfirm(false)">取消</v-btn>
+          <v-btn color="error" variant="flat" @click="handleKeyConfirm(true)">确定</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
@@ -336,6 +354,10 @@ export default {
       sessionSeparationEnabled: false,
       sessionSettingLoading: false,
 
+      // Key确认对话框
+      showKeyConfirm: false,
+      keyConfirmResolve: null,
+
       newSelectedProviderName: '',
       newSelectedProviderConfig: {},
       updatingMode: false,
@@ -563,32 +585,37 @@ export default {
       this.updatingMode = true;
     },
 
-    newProvider() {
+    async newProvider() {
+      // 检查 key 是否为空
+      if (
+        'key' in this.newSelectedProviderConfig &&
+        (!this.newSelectedProviderConfig.key || this.newSelectedProviderConfig.key.length === 0)
+      ) {
+        const confirmed = await this.confirmEmptyKey();
+        if (!confirmed) {
+          return; // 如果用户取消，则中止保存
+        }
+      }
+
       this.loading = true;
-      if (this.updatingMode) {
-        axios.post('/api/config/provider/update', {
-          id: this.newSelectedProviderName,
-          config: this.newSelectedProviderConfig
-        }).then((res) => {
-          this.loading = false;
-          this.showProviderCfg = false;
-          this.getConfig();
+      try {
+        if (this.updatingMode) {
+          const res = await axios.post('/api/config/provider/update', {
+            id: this.newSelectedProviderName,
+            config: this.newSelectedProviderConfig
+          });
           this.showSuccess(res.data.message || "更新成功!");
-        }).catch((err) => {
-          this.loading = false;
-          this.showError(err.response?.data?.message || err.message);
-        });
-        this.updatingMode = false;
-      } else {
-        axios.post('/api/config/provider/new', this.newSelectedProviderConfig).then((res) => {
-          this.loading = false;
-          this.showProviderCfg = false;
-          this.getConfig();
+          this.updatingMode = false;
+        } else {
+          const res = await axios.post('/api/config/provider/new', this.newSelectedProviderConfig);
           this.showSuccess(res.data.message || "添加成功!");
-        }).catch((err) => {
-          this.loading = false;
-          this.showError(err.response?.data?.message || err.message);
-        });
+        }
+        this.showProviderCfg = false;
+        this.getConfig();
+      } catch (err) {
+        this.showError(err.response?.data?.message || err.message);
+      } finally {
+        this.loading = false;
       }
     },
 
@@ -670,7 +697,21 @@ export default {
         this.loadingStatus = false;
         this.showError(err.response?.data?.message || err.message);
       });
-    }
+    },
+
+    confirmEmptyKey() {
+      this.showKeyConfirm = true;
+      return new Promise((resolve) => {
+        this.keyConfirmResolve = resolve;
+      });
+    },
+
+    handleKeyConfirm(confirmed) {
+      if (this.keyConfirmResolve) {
+        this.keyConfirmResolve(confirmed);
+      }
+      this.showKeyConfirm = false;
+    },
   }
 }
 </script>