tyapi-frontend/src/pages/api/ApiDebugger.vue

<template>
  <div class="debugger-page flex flex-col h-screen bg-gray-50 overflow-hidden">
    <!-- 主要内容区域 -->
    <div class="debugger-main flex gap-3 flex-1 p-3 overflow-hidden min-h-0">
      <!-- 左侧产品选择区域 -->
      <div class="panel-left bg-white rounded-lg shadow-sm overflow-hidden flex flex-col h-full w-72 flex-shrink-0">
        <div class="p-3 flex flex-col h-full">
          <div class="flex justify-between items-center mb-3 flex-wrap gap-2 flex-shrink-0">
            <h3 class="text-base font-semibold text-gray-800 m-0">产品选择</h3>
            <el-input v-model="searchKeyword" placeholder="搜索产品..." clearable size="default"
              class="w-full min-w-[180px]">
              <template #prefix>
                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
              </template>
            </el-input>
          </div>

          <div class="flex-1 overflow-y-auto mt-0">
            <div v-if="productsLoading" class="p-3">
              <el-skeleton :rows="3" animated />
            </div>

            <div v-else-if="userProducts.length === 0" class="flex items-center justify-center h-24 text-gray-400">
              <el-empty description="暂无订阅产品">
                <template #description>
                  <div class="text-center">
                    <p class="text-gray-500 mb-2">您还没有订阅任何产品</p>
                    <p class="text-gray-400 text-sm">请先订阅产品后再使用调试功能</p>
                  </div>
                </template>
              </el-empty>
            </div>

            <div v-else class="flex flex-col gap-1.5">
              <div v-for="product in filteredProducts" :key="product.id"
                class="p-2.5 border border-gray-200 rounded cursor-pointer transition-all duration-150 flex justify-between items-start bg-gray-50 hover:border-indigo-400 hover:bg-gray-100 hover:-translate-y-px hover:shadow-sm"
                :class="{ 'border-indigo-400 bg-gray-100 shadow-sm': selectedProduct?.id === product.id }"
                @click="selectProduct(product)">
                <div class="flex-1">
                  <h4 class="text-sm font-semibold text-gray-800 m-0 mb-1">{{ product.name }}</h4>
                  <p class="text-xs text-gray-500 m-0 mb-1 font-mono">{{ product.code }}</p>
                  <div class="flex items-center gap-1">
                    <span class="text-xs text-gray-500">价格:</span>
                    <span class="text-xs font-semibold text-red-600">¥{{ product.price }}</span>
                  </div>
                </div>
                <div class="mt-0.5">
                  <el-tag type="success" size="small">已订阅</el-tag>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间调试配置区域 -->
      <div class="panel-center bg-white rounded-lg shadow-sm overflow-hidden flex flex-col h-full flex-1 min-w-0">
        <div class="p-3 flex flex-col h-full">
          <div class="flex justify-between items-center mb-3 flex-wrap gap-2 flex-shrink-0 actions-header">
            <h3 class="text-base font-semibold text-gray-800 m-0">调试配置</h3>
            <div class="actions-bar flex gap-1.5 items-center flex-wrap">
              <el-button @click="goToProductDetail" size="default" type="primary" plain>
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
                  </path>
                </svg>
                产品文档
              </el-button>
              <el-button @click="showExampleCode" size="default" type="success" plain>
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
                </svg>
                示例代码
              </el-button>
              <el-button @click="resetForm" size="default" plain>
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
                  </path>
                </svg>
                重置
              </el-button>
              <el-button type="warning" size="default" @click="handleDebug" :loading="debugging" :disabled="!canDebug"
                class="bg-gradient-to-r from-orange-500 to-red-500 border-none text-white font-semibold px-4 py-2 h-8 text-sm shadow-lg transition-all duration-200 hover:-translate-y-px hover:shadow-xl disabled:bg-gray-300 disabled:transform-none disabled:shadow-none disabled:cursor-not-allowed">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8">
                  </path>
                </svg>
                发起请求
              </el-button>
            </div>
          </div>

          <div v-if="!selectedProduct" class="flex items-center justify-center h-24 text-gray-400">
            <el-empty description="请先选择左侧产品开始配置" />
          </div>

          <div v-else class="p-3 flex-1 overflow-y-auto">
            <!-- 产品基本信息和API密钥 -->
            <div class="grid grid-cols-2 gap-3 mb-3">
              <div class="bg-white rounded-lg border border-gray-200">
                <div class="px-3 py-2 bg-gray-50 border-b border-gray-200">
                  <h4 class="text-sm font-semibold text-gray-800 m-0">产品信息</h4>
                </div>
                <div class="p-3 grid grid-cols-2 gap-2">
                  <div class="flex flex-col gap-0.5">
                    <span class="font-medium text-gray-500 text-xs mb-0.5">产品名称</span>
                    <span class="text-gray-800 font-medium text-xs break-all">{{ selectedProduct.name }}</span>
                  </div>
                  <div class="flex flex-col gap-0.5">
                    <span class="font-medium text-gray-500 text-xs mb-0.5">产品代码</span>
                    <span class="font-mono bg-blue-50 px-1.5 py-0.5 rounded text-blue-700 text-xs">{{
                      selectedProduct.code
                      }}</span>
                  </div>
                  <div class="flex flex-col gap-0.5">
                    <span class="font-medium text-gray-500 text-xs mb-0.5">请求方法</span>
                    <span class="text-gray-800 font-medium text-xs break-all">{{ apiConfig?.method || 'POST' }}</span>
                  </div>
                  <div class="flex flex-col gap-0.5 col-span-2">
                    <span class="font-medium text-gray-500 text-xs mb-0.5">接口地址</span>
                    <span class="font-mono bg-gray-100 px-1.5 py-0.5 rounded text-gray-500 text-xs break-all">{{
                      getRequestUrl() }}</span>
                  </div>
                </div>
              </div>

              <div class="bg-white rounded-lg border border-gray-200">
                <div class="px-3 py-2 bg-gray-50 border-b border-gray-200">
                  <h4 class="text-sm font-semibold text-gray-800 m-0">API 密钥</h4>
                </div>
                <div class="p-3 flex flex-col gap-2">
                  <div class="flex flex-col gap-1">
                    <span class="font-medium text-gray-500 text-xs">Access ID</span>
                    <div class="flex gap-1 items-center">
                      <el-input v-model="debugForm.accessId" size="default" class="flex-1" placeholder="请输入Access ID" />
                      <el-button type="info" size="default" @click="copyToClipboard(debugForm.accessId)">
                        复制
                      </el-button>
                    </div>
                  </div>
                  <div class="flex flex-col gap-1">
                    <span class="font-medium text-gray-500 text-xs">Secret Key</span>
                    <div class="flex gap-1 items-center">
                      <el-input v-model="debugForm.secretKey" type="password" size="default" class="flex-1"
                        placeholder="请输入Secret Key" show-password />
                      <el-button type="info" size="default" @click="copyToClipboard(debugForm.secretKey)">
                        复制
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 请求参数配置和参数加密对比 - 横向并排 -->
            <div class="grid grid-cols-2 gap-3 mb-3">
              <!-- 请求参数配置 -->
              <div v-if="apiConfig" class="bg-white rounded-lg border border-gray-200">
                <div class="px-3 py-2 bg-gray-50 border-b border-gray-200">
                  <h4 class="text-sm font-semibold text-gray-800 m-0">请求参数</h4>
                </div>

                <!-- 动态表单 -->
                <div v-if="formFields.length > 0" class="p-3 space-y-2">
                  <div v-for="field in formFields" :key="field.name"
                    class="py-2 border-b border-gray-100 last:border-b-0 hover:bg-gray-50 hover:px-2 hover:-mx-2 hover:rounded transition-all duration-200">
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                      {{ field.label }}
                      <span v-if="field.required" class="text-red-500 ml-1">*</span>
                    </label>

                    <!-- 图片上传字段（photo_data） -->
                    <div v-if="field.name === 'photo_data' || field.name === 'vlphoto_data' && field.type === 'textarea'" class="space-y-2">
                      <div class="flex gap-2 mb-2">
                        <el-upload
                          :auto-upload="false"
                          :show-file-list="false"
                          accept="image/jpeg,image/jpg,image/png,image/bmp"
                          :on-change="(file) => handleImageUpload(file, field.name)"
                          class="flex-1">
                          <el-button type="primary" size="small">
                            <i class="el-icon-upload"></i> 上传图片（JPG/BMP/PNG）
                          </el-button>
                        </el-upload>
                        <el-button v-if="formData[field.name]" type="danger" size="small" @click="clearImageData(field.name)">
                          清空
                        </el-button>
                      </div>
                      <el-input
                        v-model="formData[field.name]"
                        type="textarea"
                        :rows="6"
                        :placeholder="field.placeholder || field.example"
                        size="default"
                        class="w-full mb-1"
                        :show-word-limit="false" />
                    </div>

                    <!-- 普通文本域 -->
                    <el-input
                      v-else-if="field.type === 'textarea'"
                      v-model="formData[field.name]"
                      type="textarea"
                      :rows="4"
                      :placeholder="field.placeholder || field.example"
                      size="default"
                      class="w-full mb-1" />

                    <!-- 普通输入框 -->
                    <el-input
                      v-else
                      v-model="formData[field.name]"
                      :placeholder="field.placeholder || field.example"
                      :type="field.type"
                      size="default"
                      class="w-full mb-1" />

                    <div class="mt-1 text-xs text-gray-500 space-y-0.5">
                      <p v-if="field.description" class="text-gray-600">{{ field.description }}</p>
                      <p v-if="field.example && field.name !== 'photo_data'" class="text-blue-600 font-medium">示例: {{ field.example }}</p>
                      <p v-if="field.validation" class="text-orange-600 font-medium">验证: {{ field.validation }}</p>
                    </div>
                  </div>
                </div>

                <!-- 备选JSON输入模式 -->
                <div v-else class="p-3">
                  <div class="flex items-center gap-2 mb-2">
                    <span class="text-xs text-gray-600">请输入JSON格式的请求参数：</span>
                    <el-button type="info" size="small" @click="loadExampleParams" class="text-xs">
                      加载示例
                    </el-button>
                    <el-button type="warning" size="small" @click="validateJsonParams" class="text-xs">
                      验证JSON
                    </el-button>
                  </div>
                  <el-input v-model="debugForm.params" type="textarea" :rows="5"
                    placeholder='请输入JSON格式参数，例如：{"param1": "value1", "param2": "value2"}'
                    class="font-mono text-xs leading-relaxed [&_.el-textarea__inner]:font-mono [&_.el-textarea__inner]:text-xs [&_.el-textarea__inner]:leading-relaxed [&_.el-textarea__inner]:p-2.5 [&_.el-textarea__inner]:border-none [&_.el-textarea__inner]:bg-gray-50 [&_.el-textarea__inner]:text-gray-800 [&_.el-textarea__inner]:focus:bg-white [&_.el-textarea__inner]:focus:ring-2 [&_.el-textarea__inner]:focus:ring-blue-500/20"
                    :class="{ '[&_.el-textarea__inner]:border-red-500 [&_.el-textarea__inner]:ring-red-500/20': hasJsonError }"
                    @input="checkJsonFormat" />
                  <div class="mt-2 text-xs text-gray-500">
                    <p>💡 提示：请确保JSON格式正确，必填字段已填写</p>
                  </div>
                </div>

                <!-- 移除开始调试按钮区域 -->
              </div>

              <!-- 参数加密对比 - 一直显示 -->
              <div class="bg-white rounded-lg border border-gray-200">
                <div class="px-3 py-2 bg-gray-50 border-b border-gray-200">
                  <h4 class="text-sm font-semibold text-gray-800 m-0">参数加密与请求体构建</h4>
                </div>

                <div class="p-3 space-y-3">
                  <div class="p-3 bg-blue-50 rounded border border-blue-200">
                    <div class="flex items-start gap-2">
                      <svg class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                      </svg>
                      <div class="text-sm text-blue-800">
                        <p class="font-medium mb-1">加密流程说明：</p>
                        <ol class="list-decimal list-inside space-y-1 text-xs">
                          <li>用户输入的JSON参数 → AES-CBC加密 → Base64编码</li>
                          <li>Base64字符串放入请求体的 <code class="bg-blue-100 px-1 rounded">data</code> 字段</li>
                          <li>最终HTTP请求体格式：<code class="bg-blue-100 px-1 rounded">{"data": "base64字符串"}</code></li>
                        </ol>
                        <div class="mt-2">
                          <el-button type="primary" size="small" @click="showEncryptionDetails = true" class="text-xs">
                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                              xmlns="http://www.w3.org/2000/svg">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            查看加密详情
                          </el-button>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="flex justify-between items-center flex-wrap gap-2">
                    <p class="text-xs text-gray-500 mr-2 flex-1 min-w-[180px]">点击下方按钮对参数进行加密，查看最终请求体</p>
                    <el-button type="primary" size="default" @click="encryptParams" :loading="encrypting">
                      <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                        </path>
                      </svg>
                      加密参数
                    </el-button>
                  </div>

                  <!-- 原始参数 -->
                  <div class="p-3 bg-gray-50 rounded border border-gray-200">
                    <h5 class="text-xs font-semibold text-gray-800 m-0 mb-1.5 pb-0.5 border-b border-gray-200">原始参数
                      (JSON)
                    </h5>
                    <pre
                      class="bg-gray-100 p-2 rounded text-xs overflow-x-auto max-h-20 m-0 border border-gray-200 font-mono text-gray-800">
                {{ JSON.stringify(debugForm.params, null, 2) }}</pre>
                    <p class="text-xs text-gray-500 text-center mt-1">用户输入的原始参数</p>
                  </div>

                  <!-- 最终请求体 -->
                  <div class="p-3 bg-green-50 rounded border border-green-200">
                    <h5 class="text-xs font-semibold text-green-800 m-0 mb-1.5 pb-0.5 border-b border-green-200">最终请求体
                      (HTTP)
                    </h5>
                    <pre
                      class="bg-gray-100 p-2 rounded text-xs overflow-x-auto max-h-20 m-0 border border-green-200 font-mono text-green-800">
                {{ getFinalRequestBody() }}</pre>
                    <p class="text-xs text-green-600 text-center font-medium mt-1">实际发送给API的HTTP请求体</p>
                    <el-button type="success" size="default" @click="copyToClipboard(getFinalRequestBody())"
                      class="w-full mt-2">
                      复制请求体
                    </el-button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 移除原来的调试操作按钮区域 -->
          </div>
        </div>
      </div>

      <!-- 右侧调试结果区域 -->
      <div class="flex flex-col gap-3 h-full w-96 flex-shrink-0">
        <!-- 调试结果 -->
        <div class="bg-white rounded-lg shadow-sm overflow-hidden flex flex-col h-full">
          <div class="p-3 flex flex-col h-full">
            <div
              class="flex justify-between items-center mb-3 pb-1.5 border-b border-gray-200 flex-wrap gap-2 flex-shrink-0">
              <h3 class="text-base font-semibold text-gray-800 m-0">调试结果</h3>
              <el-button v-if="debugResult" @click="debugResult = null" size="default" plain>
                清空
              </el-button>
            </div>

            <div v-if="!debugResult" class="flex items-center justify-center h-24 text-gray-400">
              <el-empty description="调试结果将在这里显示" />
            </div>

            <div v-else class="p-3 flex-1 overflow-y-auto">
              <div class="flex justify-between items-center mb-3 pb-1.5 border-b border-gray-200 flex-wrap gap-2">
                <div class="text-base font-semibold text-gray-800">
                  <el-tag :type="debugResult.success ? 'success' : 'danger'" size="default">
                    {{ debugResult.success ? '调试成功' : '调试失败' }}
                  </el-tag>
                </div>
                <div class="flex gap-2 text-xs text-gray-500 flex-wrap">
                  <span class="flex items-center gap-1">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                      xmlns="http://www.w3.org/2000/svg">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    {{ debugResult.responseTime }}
                  </span>
                  <span v-if="debugResult.transactionId" class="flex items-center gap-1">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                      xmlns="http://www.w3.org/2000/svg">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
                      </path>
                    </svg>
                    {{ debugResult.transactionId }}
                  </span>
                </div>
              </div>

              <div class="mt-3">
                <h4 class="text-sm font-semibold text-gray-800 mb-1.5 pb-0.5 border-b border-gray-200">请求信息</h4>
                <div class="bg-white rounded border border-gray-200 p-2 mb-3">
                  <h5 class="text-xs font-semibold text-gray-700 mb-1">请求体</h5>
                  <pre
                    class="bg-gray-100 p-2 rounded text-xs overflow-x-auto m-0 mb-1.5 max-h-32 border border-gray-200 font-mono text-gray-800">
              {{ JSON.stringify(getUserVisibleRequestBody(debugResult.requestBody), null, 2) }}</pre>
                  <el-button type="info" size="default"
                    @click="copyToClipboard(JSON.stringify(getUserVisibleRequestBody(debugResult.requestBody), null, 2))"
                    class="w-full">
                    复制请求体
                  </el-button>
                </div>

                <h4 class="text-sm font-semibold text-gray-800 mb-1.5 pb-0.5 border-b border-gray-200">响应内容</h4>
                <div class="bg-white rounded border border-gray-200 p-2">
                  <pre
                    class="bg-gray-100 p-2 rounded text-xs overflow-x-auto m-0 mb-1.5 max-h-45 border border-gray-200 font-mono text-gray-800">
              {{ JSON.stringify(debugResult.response, null, 2) }}</pre>
                  <el-button type="info" size="default"
                    @click="copyToClipboard(JSON.stringify(debugResult.response, null, 2))" class="w-full">
                    复制响应
                  </el-button>

                  <!-- 解密后的内容 -->
                  <div v-if="decryptedData" class="mt-3 pt-3 border-t border-gray-200">
                    <h5 class="text-xs font-semibold text-gray-700 mb-1">解密后的内容</h5>
                    <pre
                      class="bg-green-50 p-2 rounded text-xs overflow-x-auto m-0 mb-1.5 max-h-45 border border-green-200 font-mono text-green-800"
                      :key="`decrypted-${Date.now()}`">
                {{ JSON.stringify(decryptedData, null, 2) }}</pre>
                    <el-button type="success" size="default"
                      @click="copyToClipboard(JSON.stringify(decryptedData, null, 2))" class="w-full">
                      复制解密内容
                    </el-button>
                  </div>
                  <!-- 解密加载状态 -->
                  <div v-else-if="debugging && debugResult && debugResult.success && debugResult.response?.data?.data" 
                       class="mt-3 pt-3 border-t border-gray-200">
                    <div class="flex items-center gap-2 text-sm text-gray-500">
                      <svg class="animate-spin h-4 w-4 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                      </svg>
                      <span>正在解密响应数据...</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 加密详情弹窗 -->
  <el-dialog v-model="showEncryptionDetails" title="AES-CBC 加密机制详解" width="800px" :close-on-click-modal="false"
    :close-on-press-escape="true">
    <div class="space-y-6">
      <!-- 加密和解密机制 -->
      <div class="bg-gray-50 p-5 rounded-lg border border-gray-200">
        <h3 class="text-lg font-semibold text-gray-800 mb-3">加密和解密机制</h3>
        <p class="text-sm text-gray-700 leading-relaxed">
          账户获得的密钥（Access Key）是一个 16 进制字符串，使用 AES-128 加密算法。
        </p>
      </div>

      <!-- 加密过程 -->
      <div class="bg-gray-50 p-5 rounded-lg border border-gray-200">
        <h4 class="text-base font-semibold text-gray-800 mb-4">加密过程</h4>
        <ul class="space-y-3 text-sm text-gray-700">
          <li class="flex items-start gap-3">
            <span class="bg-gray-300 text-gray-700 px-2.5 py-1 rounded text-xs font-mono font-semibold">1</span>
            <span><strong>加密模式：</strong>AES-CBC 模式</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="bg-gray-300 text-gray-700 px-2.5 py-1 rounded text-xs font-mono font-semibold">2</span>
            <span><strong>密钥长度：</strong>128 位（16 字节）</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="bg-gray-300 text-gray-700 px-2.5 py-1 rounded text-xs font-mono font-semibold">3</span>
            <span><strong>填充方式：</strong>PKCS7 填充</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="bg-gray-300 text-gray-700 px-2.5 py-1 rounded text-xs font-mono font-semibold">4</span>
            <span><strong>IV（初始化向量）：</strong>IV 长度为 16 字节（128 位），每次加密时随机生成</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="bg-gray-300 text-gray-700 px-2.5 py-1 rounded text-xs font-mono font-semibold">5</span>
            <span><strong>数据拼接：</strong>加密后，将 IV 和密文拼接在一起进行传输</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="bg-gray-300 text-gray-700 px-2.5 py-1 rounded text-xs font-mono font-semibold">6</span>
            <span><strong>Base64编码：</strong>最后，将拼接了 IV 的密文通过 Base64 编码，方便在网络或文件中传输</span>
          </li>
        </ul>
      </div>

      <!-- 解密过程 -->
      <div class="bg-gray-50 p-5 rounded-lg border border-gray-200">
        <h4 class="text-base font-semibold text-gray-800 mb-4">解密过程</h4>
        <ul class="space-y-3 text-sm text-gray-700">
          <li class="flex items-start gap-3">
            <span class="bg-gray-300 text-gray-700 px-2.5 py-1 rounded text-xs font-mono font-semibold">1</span>
            <span><strong>Base64解码：</strong>解密时，首先从 Base64 解码后的数据中提取前 16 字节作为 IV</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="bg-gray-300 text-gray-700 px-2.5 py-1 rounded text-xs font-mono font-semibold">2</span>
            <span><strong>AES解密：</strong>然后使用提取的 IV，通过 AES-CBC 模式解密剩余部分的密文</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="bg-gray-300 text-gray-700 px-2.5 py-1 rounded text-xs font-mono font-semibold">3</span>
            <span><strong>去除填充：</strong>解密后去除 PKCS7 填充，即可得到原始明文</span>
          </li>
        </ul>
      </div>


    </div>

    <template #footer>
      <div class="flex justify-end">
        <el-button @click="showEncryptionDetails = false" type="primary">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 示例代码弹窗 -->
  <el-dialog v-model="showExampleCodeDialog" title="示例代码" width="1000px" :close-on-click-modal="false"
    :close-on-press-escape="true" class="example-code-dialog">
    <div class="h-[600px]">
      <CodeDisplay :product-code="selectedProduct?.code || ''" />
    </div>

    <template #footer>
      <div class="flex justify-end">
        <el-button @click="showExampleCodeDialog = false" type="primary">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
/* 响应式优化 */
@media (max-width: 1024px) {
  .debugger-page {
    height: auto;
    min-height: 100vh;
    overflow: auto;
  }

  .debugger-main {
    flex-direction: column;
    overflow: visible;
  }

  .panel-left {
    width: 100%;
    max-height: 360px;
    overflow: auto;
  }

  .panel-center {
    width: 100%;
    min-height: auto;
    overflow: visible;
  }

  .panel-center .grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }

  .panel-center .grid.grid-cols-2 > * {
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .debugger-main {
    gap: 12px;
    padding: 12px;
  }

  .panel-left {
    max-height: 320px;
  }

  .panel-center {
    padding: 0;
  }

  .actions-header {
    align-items: flex-start;
  }

  /* 按钮区域：两列折行，避免超出屏幕 */
  .actions-bar {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }

  .actions-bar .el-button {
    flex: 1 1 48%;
    min-width: 140px;
  }

  /* 主要按钮独占一行，保证可点 */
  .actions-bar .el-button:last-child {
    flex: 1 1 100%;
  }

  /* 操作按钮区域允许换行且间距更紧凑 */
  .panel-center .flex-wrap {
    gap: 8px;
  }

  /* 表单输入区域保持可读性 */
  .panel-center :deep(.el-input),
  .panel-center :deep(.el-select) {
    width: 100%;
  }
}
</style>

<script setup>
import { apiApi, apiKeysApi, consoleApi, formConfigApi, productApi, subscriptionApi } from '@/api'
import { ElMessage } from 'element-plus'
import { marked } from 'marked'
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import CodeDisplay from '@/components/common/CodeDisplay.vue'


const router = useRouter()
const route = useRoute()


// 响应式数据
const loading = ref(false)
const productsLoading = ref(false)
const debugging = ref(false)
const encrypting = ref(false)
const autoSelecting = ref(false) // 新增：自动选择状态
const isSelectingProduct = ref(false) // 防止重复选择产品的标志
const lastSelectedProductId = ref(null) // 记录最后选择的产品ID
const userProducts = ref([])
const apiConfig = ref(null)
const selectedProduct = ref(null)
const searchKeyword = ref('')
const encryptedData = ref('')
const activeTab = ref('basic_info') // 控制文档内容的Tab
const productDocumentation = ref(null) // 存储产品文档
const showEncryptionDetails = ref(false) // 新增：加密详情弹窗状态
const showExampleCodeDialog = ref(false) // 新增：示例代码弹窗状态
const hasJsonError = ref(false) // JSON格式错误状态
const decryptedData = ref(null) // 解密后的数据

// 新增：动态表单相关数据
const formFields = ref([])
const formData = ref({})

// 表单引用
const paramFormRef = ref(null)

// 调试表单
const debugForm = reactive({
  accessId: '',
  secretKey: '',
  params: {}
})

// 调试结果
const debugResult = ref(null)

// 参数验证规则 - 现在直接验证JSON格式
const validateJsonParams = () => {
  try {
    if (typeof debugForm.params === 'string') {
      JSON.parse(debugForm.params)
    }
    hasJsonError.value = false
    ElMessage.success('JSON格式正确')
    return true
  } catch (error) {
    hasJsonError.value = true
    ElMessage.error('JSON格式错误：' + error.message)
    return false
  }
}

// 实时JSON格式检查
const checkJsonFormat = () => {
  if (!debugForm.params || typeof debugForm.params !== 'string') {
    hasJsonError.value = false
    return
  }

  try {
    JSON.parse(debugForm.params)
    hasJsonError.value = false
  } catch (error) {
    hasJsonError.value = true
  }
}

// 计算属性
const filteredProducts = computed(() => {
  if (!searchKeyword.value) {
    return userProducts.value
  }
  return userProducts.value.filter(product =>
    product.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
    product.code.toLowerCase().includes(searchKeyword.value.toLowerCase())
  )
})

const canDebug = computed(() => {
  if (!selectedProduct.value || !debugForm.accessId || !debugForm.secretKey) {
    return false
  }

  if (!apiConfig.value || !apiConfig.value.request_params) {
    return false
  }

  // 如果有动态表单字段，检查必填字段是否填写
  if (formFields.value.length > 0) {
    const hasRequiredFields = formFields.value.some(field => field.required)
    if (hasRequiredFields) {
      // 检查所有必填字段是否已填写
      return formFields.value.every(field => !field.required || formData.value[field.name])
    }
    // 如果没有必填字段，只要有字段就可以调试
    return formFields.value.length > 0
  }

  // 如果没有动态表单，回退到JSON验证
  return !hasJsonError.value && debugForm.params && typeof debugForm.params === 'string' && debugForm.params.trim() !== ''
})

// 生命周期
onMounted(async () => {
  await loadApiKeys()
  await loadUserProducts()
  // 自动选择产品的逻辑已在 loadUserProducts 中处理
  console.log("route", route.params)
})

// 监听路由参数变化，自动选择产品
watch(
  () => route.query.productId || route.params.productId,
  async (newProductId, oldProductId) => {
    // 防止重复触发：如果产品ID没有变化，不执行
    if (newProductId === oldProductId) {
      return
    }
    
    // 如果正在选择产品，不重复执行
    if (isSelectingProduct.value) {
      return
    }
    
    if (newProductId && userProducts.value.length > 0) {
      await autoSelectProduct(newProductId)
    } else if (!newProductId && userProducts.value.length > 0 && !selectedProduct.value) {
      // 如果没有指定产品且当前没有选中产品，选择第一个
      await selectProduct(userProducts.value[0])
    }
  }
)

// 自动选择产品
const autoSelectProduct = async (productId) => {
  // 防止重复执行
  if (isSelectingProduct.value) {
    console.log('正在选择产品，跳过重复请求')
    return
  }
  
  // 如果已经选择了相同的产品，不重复选择
  if (lastSelectedProductId.value === productId && selectedProduct.value) {
    console.log('产品已选择，跳过重复选择:', productId)
    return
  }
  
  // 如果用户产品列表为空，等待加载完成
  if (!userProducts.value.length) {
    console.log('等待用户产品列表加载完成...')
    // 等待一段时间后重试
    await new Promise(resolve => setTimeout(resolve, 1000))

    // 如果仍然为空，说明加载失败
    if (!userProducts.value.length) {
      console.warn('用户产品列表加载失败或为空')
      ElMessage.warning('产品列表加载失败，请刷新页面重试')
      return
    }
  }

  // 查找目标产品
  const targetProduct = userProducts.value.find(p =>
    p.id == productId ||
    p.product_id == productId ||
    p.code === productId
  )

  if (targetProduct) {
    console.log('自动选择产品:', targetProduct)
    isSelectingProduct.value = true
    try {
      await selectProduct(targetProduct)
      lastSelectedProductId.value = productId
    } finally {
      isSelectingProduct.value = false
    }
  } else {
    console.warn('未找到指定的产品:', productId)
    ElMessage.warning(`未找到产品ID为 ${productId} 的产品，请手动选择`)
  }
}

// 加载用户订阅的产品
const loadUserProducts = async () => {
  productsLoading.value = true
  try {
    const response = await subscriptionApi.getMySubscriptions({
      page: 1,
      page_size: 1000
    })

    if (response.success && response.data?.items) {
      userProducts.value = response.data.items.map(item => ({
        id: item.id,
        product_id: item.product_id || item.product?.id, // 确保获取product_id
        name: item.product?.name || '未知产品',
        code: item.product?.code || '',
        price: item.price || 0
      }))
      console.log("route.params", route)

      // 检查是否有query或params参数指定产品
      const productId = route.query.productId || route.params.productId
      if (productId && userProducts.value.length > 0) {
        await nextTick()
        // 使用 autoSelectProduct 会自动处理防重复逻辑
        await autoSelectProduct(productId)
      } else if (userProducts.value.length > 0 && !selectedProduct.value) {
        // 没有指定产品时，默认选择第一个（仅在未选择产品时）
        autoSelecting.value = true
        isSelectingProduct.value = true
        try {
          await selectProduct(userProducts.value[0])
          lastSelectedProductId.value = userProducts.value[0].id || userProducts.value[0].product_id
        } finally {
          isSelectingProduct.value = false
          autoSelecting.value = false
        }
      }
    } else {
      // 如果没有订阅产品，显示提示信息
      userProducts.value = []
      ElMessage.info('您还没有订阅任何产品，请先订阅产品后再使用调试功能')
    }
  } catch (error) {
    console.error('加载用户产品失败:', error)
    ElMessage.error('加载用户产品失败，请稍后重试')
    userProducts.value = []
  } finally {
    productsLoading.value = false
  }
}

// 加载API密钥
const loadApiKeys = async () => {
  try {
    const response = await apiKeysApi.getUserApiKeys()
    if (response.success && response.data) {
      debugForm.accessId = response.data.access_id || ''
      debugForm.secretKey = response.data.secret_key || ''
    }
  } catch (error) {
    console.error('加载API密钥失败:', error)
    ElMessage.error('加载API密钥失败')
  }
}

// 选择产品
const selectProduct = async (product) => {
  // 防止重复选择相同产品
  const productId = product.product_id || product.id
  if (selectedProduct.value && 
      (selectedProduct.value.id === productId || selectedProduct.value.product_id === productId) &&
      !isSelectingProduct.value) {
    console.log('产品已选择，跳过重复加载:', productId)
    return
  }
  
  // 确保API密钥已经加载
  if (!debugForm.accessId || !debugForm.secretKey) {
    ElMessage.warning('正在加载API密钥，请稍候...')
    return
  }

  selectedProduct.value = product
  // 重置参数
  debugForm.params = {}
  debugResult.value = null
  encryptedData.value = null
  decryptedData.value = null
  activeTab.value = 'basic_info' // 重置Tab
  productDocumentation.value = null // 重置文档

  // 加载产品详情和API配置
  await loadProductDetail(product.product_id || product.id)

  // 新增：加载表单配置
  await loadFormConfig(product.code)
}

// 新增：加载表单配置
const loadFormConfig = async (apiCode) => {
  try {
    const response = await formConfigApi.getFormConfig(apiCode)
    if (response.success && response.data) {
      formFields.value = response.data.fields

      // 初始化表单数据
      formData.value = {}
      formFields.value.forEach(field => {
        formData.value[field.name] = ''
      })

    }
  } catch (error) {
    console.error('加载表单配置失败:', error)
    // 如果加载失败，清空表单字段，回退到JSON输入模式
    formFields.value = []
    formData.value = {}
  }
}

// 处理图片上传并转换为base64
const handleImageUpload = (file, fieldName) => {
  const fileObj = file.raw || file
  
  // 验证文件类型
  const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/bmp']
  if (!allowedTypes.includes(fileObj.type)) {
    ElMessage.error('只支持 JPG、BMP、PNG 格式的图片')
    return false
  }
  
  // 验证文件大小（限制为5MB）
  const maxSize = 5 * 1024 * 1024 // 5MB
  if (fileObj.size > maxSize) {
    ElMessage.error('图片大小不能超过 5MB')
    return false
  }
  
  // 读取文件并转换为base64
  const reader = new FileReader()
  reader.onload = (e) => {
    const base64String = e.target.result
    // 移除 data:image/xxx;base64, 前缀，只保留纯base64数据
    const base64Data = base64String.includes(',') ? base64String.split(',')[1] : base64String
    formData.value[fieldName] = base64Data
    ElMessage.success('图片上传成功，已转换为base64')
  }
  reader.onerror = () => {
    ElMessage.error('图片读取失败，请重试')
  }
  reader.readAsDataURL(fileObj)
  
  return false // 阻止自动上传
}

// 清空图片数据
const clearImageData = (fieldName) => {
  formData.value[fieldName] = ''
  ElMessage.success('已清空图片数据')
}

// 加载示例参数
const loadExampleParams = () => {
  if (!apiConfig.value?.request_params) {
    ElMessage.warning('暂无API配置信息')
    return
  }

  const exampleParams = {}
  apiConfig.value.request_params.forEach(param => {
    if (param.example) {
      exampleParams[param.field] = param.example
    } else {
      // 根据类型设置默认示例值
      switch (param.type) {
        case 'string':
          exampleParams[param.field] = '示例值'
          break
        case 'number':
          exampleParams[param.field] = 123
          break
        case 'boolean':
          exampleParams[param.field] = true
          break
        case 'password':
          exampleParams[param.field] = 'password123'
          break
        default:
          exampleParams[param.field] = '示例值'
      }
    }
  })

  debugForm.params = JSON.stringify(exampleParams, null, 2)
  hasJsonError.value = false
  ElMessage.success('已加载示例参数')
}

// 加载产品详情
const loadProductDetail = async (productId) => {
  try {
    // 添加 with_document 参数获取文档信息
    const response = await productApi.getProductDetail(productId, { with_document: true })
    if (response.success && response.data) {
      const productData = response.data

      // 构建API配置
      apiConfig.value = {
        request_params: productData.api_config?.request_params || [],
        response_fields: productData.api_config?.response_fields || [],
        response_example: productData.api_config?.response_example || {}
      }

      // 初始化参数表单
      if (apiConfig.value.request_params && apiConfig.value.request_params.length > 0) {
        // 使用JSON文本输入，初始化为空字符串
        debugForm.params = ''
        // 同时更新动态表单数据
        formFields.value = apiConfig.value.request_params.map(param => ({
          name: param.name,
          label: param.name,
          field: param.field,
          type: param.type,
          required: param.required,
          description: param.description,
          example: param.example,
          validation: param.validation
        }))
        formData.value = {} // 清空表单数据
      } else {
        // 如果没有API配置，使用默认配置
        apiConfig.value = {
          request_params: [
            {
              field: 'param1',
              name: '参数1',
              type: 'text',
              required: true,
              description: '请输入参数1',
              example: '示例值1'
            }
          ],
          response_fields: [
            {
              name: '状态码',
              path: 'code',
              type: 'integer',
              description: '响应状态码',
              required: true,
              example: '0'
            }
          ],
          response_example: {
            code: 0,
            message: "请求成功",
            data: {}
          }
        }
        debugForm.params = ''
        formFields.value = [] // 清空动态表单
        formData.value = {} // 清空表单数据
      }

      // 保存文档内容
      productDocumentation.value = {
        basic_info: productData.documentation?.basic_info || '',
        request_params: productData.documentation?.request_params || '',
        response_fields: productData.documentation?.response_fields || '',
        response_example: productData.documentation?.response_example || '',
        error_codes: productData.documentation?.error_codes || ''
      }
    }
  } catch (error) {
    console.error('加载产品详情失败:', error)
    ElMessage.error('加载产品详情失败')

    // 如果加载失败，使用默认配置
    apiConfig.value = {
      request_params: [
        {
          field: 'param1',
          name: '参数1',
          type: 'text',
          required: true,
          description: '请输入参数1',
          example: '示例值1'
        }
      ],
      response_fields: [
        {
          name: '状态码',
          path: 'code',
          type: 'integer',
          description: '响应状态码',
          required: true,
          example: '0'
        }
      ],
      response_example: {
        code: 0,
        message: "请求成功",
        data: {}
      }
    }
    debugForm.params = { param1: '' }
    formFields.value = [] // 清空动态表单
    formData.value = {} // 清空表单数据
    productDocumentation.value = null // 清除文档
  }
}

// 搜索处理
const handleSearch = () => {
  // 搜索逻辑已在计算属性中处理
}

// 获取请求URL
const getRequestUrl = () => {
  if (!selectedProduct.value) return ''
  const baseUrl = import.meta.env.VITE_API_URL
  return `${baseUrl}/api/v1/${selectedProduct.value.code}`
}

// 根据字段类型转换数据
const convertFieldTypes = (data) => {
  if (!formFields.value || formFields.value.length === 0) {
    return data
  }
  
  const processedData = { ...data }
  formFields.value.forEach(field => {
    const value = processedData[field.name]
    // 如果字段值为空字符串、null 或 undefined，跳过转换
    if (value === '' || value === null || value === undefined) {
      return
    }
    
    // 根据字段类型进行转换
    if (field.type === 'number') {
      // 将字符串转换为数字（整数）
      const numValue = parseInt(value, 10)
      if (!isNaN(numValue)) {
        processedData[field.name] = numValue
      }
    }
  })
  
  return processedData
}

// 加密参数
const encryptParams = async () => {
  if (!canDebug.value) {
    ElMessage.warning('请先填写完整的必填参数')
    return
  }

  encrypting.value = true
  try {
    // 使用后端加密接口
    const encryptedResult = await encryptWithAES(debugForm.params, debugForm.secretKey)
    console.log('encryptedResult', encryptedResult)
    if (encryptedResult) {
      encryptedData.value = encryptedResult
      ElMessage.success('参数加密成功')
    } else {
      throw new Error('加密失败')
    }
  } catch (error) {
    console.error('加密失败:', error)
    ElMessage.error('参数加密失败')
  } finally {
    encrypting.value = false
  }
}

// 调用后端加密接口
const encryptWithAES = async (data, secretKey) => {
  try {
    console.log('开始调用后端加密接口，参数:', data, '密钥:', secretKey)

    // 解析JSON字符串（如果是字符串）
    let parsedData = typeof data === 'string' ? JSON.parse(data) : data
    
    // 根据字段类型进行类型转换
    parsedData = convertFieldTypes(parsedData)

    // 使用项目的标准API调用方式，传递密钥参数
    const result = await apiApi.encryptParams(parsedData, secretKey)

    console.log('加密接口响应数据:', result)

    // 根据项目的响应结构，result 就是 EncryptResponse
    if (!result || !result.data?.encrypted_data) {
      throw new Error('加密响应数据格式错误')
    }

    console.log('加密成功，返回数据:', result.data.encrypted_data)
    return result.data.encrypted_data
  } catch (error) {
    console.error('调用后端加密接口失败:', error)
    throw new Error('加密失败: ' + error.message)
  }
}

// 复制到剪贴板
const copyToClipboard = async (text) => {
  if (!text) return

  try {
    await navigator.clipboard.writeText(text)
    ElMessage.success('复制成功')
  } catch (error) {
    console.error('复制失败:', error)
    ElMessage.error('复制失败')
  }
}

// 重置表单
const resetForm = () => {
  selectedProduct.value = null
  debugForm.params = ''
  hasJsonError.value = false
  debugResult.value = null
  apiConfig.value = null
  encryptedData.value = null
  decryptedData.value = null // 重置解密数据
  activeTab.value = 'basic_info' // 重置Tab
  productDocumentation.value = null // 重置文档
  formFields.value = [] // 清空动态表单
  formData.value = {} // 清空表单数据
  showExampleCodeDialog.value = false // 重置示例代码弹窗状态
  showEncryptionDetails.value = false // 重置加密详情弹窗状态
}

// 开始调试
const handleDebug = async () => {
  if (!canDebug.value) return

  // 新增：验证动态表单
  if (formFields.value.length > 0) {
    const errors = []
    formFields.value.forEach(field => {
      if (field.required && !formData.value[field.name]) {
        errors.push(`${field.label}是必填字段`)
      }
    })

    if (errors.length > 0) {
      ElMessage.error(errors.join('、'))
      return
    }

    // 将表单数据转换为JSON格式，并根据字段类型进行类型转换
    const processedData = convertFieldTypes(formData.value)
    debugForm.params = JSON.stringify(processedData, null, 2)
  } else {
    // 原有的JSON验证逻辑
    if (!validateJsonParams()) {
      return
    }
  }

  debugging.value = true
  // 清空之前的调试结果，确保UI实时更新
  debugResult.value = null
  decryptedData.value = null
  await nextTick() // 确保DOM更新
  
  const startTime = new Date()

  try {
    // 1. 解析JSON参数
    let parsedParams
    try {
      parsedParams = JSON.parse(debugForm.params)
    } catch (error) {
      ElMessage.error('JSON格式错误，无法解析参数')
      return
    }

    // 2. 加密参数
    const encryptedParams = await encryptWithAES(parsedParams, debugForm.secretKey)
    if (!encryptedParams) {
      ElMessage.error('参数加密失败')
      return
    }

    // 更新加密数据，用于显示最终请求体
    encryptedData.value = encryptedParams

    // 3. 构建请求体
    const requestBody = {
      data: encryptedParams,
      options: {
        is_debug: true  // 标识为调试调用
      }
    }

    // 4. 调用API
    try {
      console.log('准备调用产品API:', selectedProduct.value.code)
      const responseData = await consoleApi.callProductAPI(selectedProduct.value.code, requestBody, debugForm.accessId)
      console.log('产品API调用成功:', responseData)
      const endTime = new Date()

      // 5. 保存调试结果 - 立即更新，确保UI实时显示
      debugResult.value = createDebugResult(
        selectedProduct.value,
        requestBody,
        encryptedParams,
        responseData,
        startTime,
        endTime,
        responseData.success && responseData.data?.code === 0
      )

      // 确保DOM更新后再进行解密操作
      await nextTick()

      // 6. 如果响应成功且包含加密数据，自动解密
      console.log('responseData', responseData)
      if (responseData.success && responseData.data?.code === 0 && responseData.data?.data && typeof responseData.data.data === 'string') {
        try {
          const decryptResult = await apiApi.decryptParams(
            responseData.data.data,
            debugForm.secretKey
          )

          if (decryptResult.success) {
            // 使用 nextTick 确保响应式更新
            decryptedData.value = decryptResult.data
            await nextTick()
            ElMessage.success('调试完成，数据已自动解密')
          } else {
            ElMessage.warning('调试完成，但数据解密失败：' + (decryptResult.message || '未知错误'))
          }
        } catch (decryptError) {
          console.error('自动解密失败:', decryptError)
          ElMessage.warning('调试完成，但数据解密失败：' + (decryptError.message || '未知错误'))
        }
      } else {
        ElMessage.success('调试完成')
      }
    } catch (apiError) {
      console.error('API调用失败:', apiError)
      console.error('错误详情:', {
        message: apiError.message,
        stack: apiError.stack,
        name: apiError.name
      })
      const apiEndTime = new Date()

      // 构建错误响应结构，保持与成功响应一致
      const errorResponse = {
        success: false,
        data: {
          code: -1,
          message: apiError.message || 'API调用失败',
          transaction_id: '',
          data: null
        },
        message: '请求失败'
      }

      debugResult.value = createDebugResult(
        selectedProduct.value,
        requestBody,
        encryptedParams,
        errorResponse,
        startTime,
        apiEndTime,
        false
      )

      // 确保DOM更新
      await nextTick()

      ElMessage.error('API调用失败：' + apiError.message)
    }
  } catch (error) {
    console.error('调试失败:', error)
    ElMessage.error('调试失败，请检查网络连接')

    const endTime = new Date()
    debugResult.value = createDebugResult(
      selectedProduct.value,
      {},
      '',
      { error: error.message },
      startTime,
      endTime,
      false
    )

    // 确保DOM更新
    await nextTick()
  } finally {
    debugging.value = false
  }
}



// 渲染Markdown
const renderMarkdown = (markdown) => {
  if (!markdown) {
    return ''
  }
  return marked(markdown)
}

// 跳转到产品详情页面
const goToProductDetail = () => {
  if (selectedProduct.value) {
    // 在新标签页中打开产品详情页面
    const productId = selectedProduct.value.product_id || selectedProduct.value.id
    const url = `/products/${productId}`
    window.open(url, '_blank')
  } else {
    ElMessage.warning('请先选择一个产品')
  }
}

// 显示示例代码弹窗
const showExampleCode = () => {
  if (!selectedProduct.value) {
    ElMessage.warning('请先选择一个产品')
    return
  }
  showExampleCodeDialog.value = true
}

// 调用产品API进行调试
// 现在使用 consoleApi.callProductAPI，此函数已删除

// 创建调试结果对象
const createDebugResult = (product, requestBody, encryptedParams, responseData, startTime, endTime, success = true) => {
  return {
    productName: product.name,
    apiCode: product.code,
    transactionId: responseData?.data?.transaction_id || '',
    requestTime: startTime.toLocaleString('zh-CN'),
    responseTime: endTime.toLocaleString('zh-CN'),
    success: success,
    requestBody: requestBody,
    encryptedParams: encryptedParams,
    response: responseData
  }
}

// 获取最终请求体（用户可见版本，不显示调试标识）
const getFinalRequestBody = () => {
  if (!encryptedData.value) {
    return JSON.stringify({ data: "请先加密参数" }, null, 2)
  }

  const requestBody = {
    data: encryptedData.value
  }

  return JSON.stringify(requestBody, null, 2)
}

// 获取用户可见的请求体（过滤掉调试标识）
const getUserVisibleRequestBody = (requestBody) => {
  if (!requestBody) return {}

  // 创建请求体的副本，移除调试标识
  const visibleBody = { ...requestBody }

  // 如果存在options且包含is_debug，则移除
  if (visibleBody.options && visibleBody.options.is_debug !== undefined) {
    delete visibleBody.options.is_debug

    // 如果options为空对象，则完全移除options
    if (Object.keys(visibleBody.options).length === 0) {
      delete visibleBody.options
    }
  }

  return visibleBody
}
</script>