安全承诺弹窗

src/views/console/components/token.vue

@@ -27,6 +27,34 @@
       </el-form>
       </el-form>
     </div>
     </div>
 
 
+    <!-- 安全使用承诺弹窗 -->
+    <el-dialog
+        title="安全使用承诺"
+        v-model="safetyDialog.visible"
+        width="500px"
+        append-to-body
+        :align-center="true"
+        :close-on-click-modal="false"
+    >
+      <div class="safety-content">
+        <h4>合规使用告知</h4>
+        <div class="safety-text">
+          <p>1. 本平台仅提供大模型API调用服务，不得用于任何违法违规用途。</p>
+          <p>2. 使用本服务即表示您承诺遵守当地法律法规，不得利用本服务从事违规违法活动。</p>
+          <p>3. 您承诺不会使用本服务进行网络攻击、恶意爬虫、欺诈或其他有害行为。</p>
+          <p>4. 如发现违规使用行为，平台有权立即终止服务并追究相关责任。</p>
+          <p>5. 请妥善保管您的API Key，因个人保管不当导致的损失由用户自行承担。</p>
+        </div>
+        <el-checkbox v-model="safetyDialog.checked" class="safety-checkbox">
+          我已阅读并同意以上安全使用条款，承诺合规使用
+        </el-checkbox>
+      </div>
+      <template #footer>
+        <el-button @click="safetyDialog.visible = false">取消</el-button>
+        <el-button type="primary" :disabled="!safetyDialog.checked" @click="confirmRecharge">确认充值</el-button>
+      </template>
+    </el-dialog>
+
     <!-- 支付二维码弹窗 -->
     <!-- 支付二维码弹窗 -->
     <el-dialog
     <el-dialog
         :title="qrCode.title"
         :title="qrCode.title"
@@ -77,6 +105,18 @@ const qrCode = ref({
   visible: false
   visible: false
 });
 });
 
 
+const STORAGE_KEY_SAFETY_AGREED = 'safety_agreement_agreed';
+
+const safetyDialog = ref({
+  visible: false,
+  checked: false
+});
+
+// 检查是否已同意过安全承诺
+function hasSafetyAgreement() {
+  return localStorage.getItem(STORAGE_KEY_SAFETY_AGREED) === 'true';
+}
+
 function maskKey(key) {
 function maskKey(key) {
   if (!key || key.length < 12) return key;
   if (!key || key.length < 12) return key;
   return key.substring(0, 6) + "****" + key.substring(key.length - 6);
   return key.substring(0, 6) + "****" + key.substring(key.length - 6);
@@ -127,6 +167,32 @@ function handleRecharge() {
     return;
     return;
   }
   }
 
 
+  // 若用户已同意过安全承诺，直接充值
+  if (hasSafetyAgreement()) {
+    doRecharge();
+    return;
+  }
+
+  // 重置勾选状态并弹出安全承诺弹窗
+  safetyDialog.value.checked = false;
+  safetyDialog.value.visible = true;
+}
+
+// 确认充值
+function confirmRecharge() {
+  if (!safetyDialog.value.checked) {
+    proxy.$modal.msgError("请先勾选同意安全使用条款");
+    return;
+  }
+
+  // 记录用户已同意安全承诺
+  localStorage.setItem(STORAGE_KEY_SAFETY_AGREED, 'true');
+
+  safetyDialog.value.visible = false;
+  doRecharge();
+}
+
+function doRecharge() {
   rechargeLoading.value = true;
   rechargeLoading.value = true;
   qrCode.value.url = "";
   qrCode.value.url = "";
 
 
@@ -232,4 +298,29 @@ onUnmounted(() => {
   font-size: 12px;
   font-size: 12px;
   cursor: pointer;
   cursor: pointer;
 }
 }
+
+.safety-content {
+  h4 {
+    margin: 0 0 12px 0;
+    color: #303133;
+  }
+}
+
+.safety-text {
+  background: #f5f7fa;
+  padding: 16px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+
+  p {
+    margin: 8px 0;
+    color: #606266;
+    font-size: 14px;
+    line-height: 1.6;
+  }
+}
+
+.safety-checkbox {
+  font-weight: 500;
+}
 </style>
 </style>