#

Junjie

5 天以前 b37e141c00a123cf362fae00c1e63175d41c4bbe

 src/main/webapp/views/ai/llm_config.html

@@ -8,6 +8,7 @@
  <style>
    body {
      margin: 0;
      font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
      background:
        radial-gradient(1200px 500px at 10% -10%, rgba(26, 115, 232, 0.14), transparent 50%),
        radial-gradient(900px 450px at 100% 0%, rgba(38, 166, 154, 0.11), transparent 55%),
@@ -46,6 +47,13 @@
      font-size: 12px;
      opacity: 0.9;
    }
    .hero-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .summary-grid {
      margin-top: 10px;
      display: grid;
@@ -70,12 +78,171 @@
      font-weight: 700;
      line-height: 1.1;
    }
    .table-shell {
      border-radius: 12px;
    .route-board {
      border-radius: 14px;
      border: 1px solid #dbe5f2;
      background:
        radial-gradient(800px 200px at -10% 0, rgba(52, 119, 201, 0.06), transparent 55%),
        radial-gradient(700px 220px at 110% 20%, rgba(39, 154, 136, 0.08), transparent 58%),
        #f9fbff;
      box-shadow: 0 8px 30px rgba(26, 53, 84, 0.10);
      padding: 12px;
      min-height: 64vh;
    }
    .route-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
      gap: 12px;
    }
    .route-card {
      border-radius: 14px;
      border: 1px solid #e4ebf5;
      background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
      box-shadow: 0 10px 24px rgba(14, 38, 68, 0.08);
      padding: 12px;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      animation: card-in 0.24s ease both;
    }
    .route-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 26px rgba(14, 38, 68, 0.12);
      border-color: #d4e2f2;
    }
    .route-card.cooling {
      border-color: #f2d8a2;
      background: linear-gradient(180deg, #fffdf6 0%, #fffaf0 100%);
    }
    .route-card.disabled {
      opacity: 0.84;
    }
    .route-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
    }
    .route-title {
      display: flex;
      flex-direction: column;
      gap: 5px;
      min-width: 0;
      flex: 1;
    }
    .route-id-line {
      color: #8294aa;
      font-size: 11px;
      white-space: nowrap;
      overflow: hidden;
      box-shadow: 0 6px 22px rgba(15, 28, 48, 0.08);
      border: 1px solid #e8edf5;
      text-overflow: ellipsis;
    }
    .route-state {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
      max-width: 46%;
    }
    .route-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .field-full {
      grid-column: 1 / -1;
    }
    .field-label {
      font-size: 11px;
      color: #6f8094;
      margin-bottom: 4px;
    }
    .switch-line {
      margin-top: 10px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .switch-item {
      border: 1px solid #e7edf7;
      border-radius: 10px;
      padding: 6px 8px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: #2f3f53;
    }
    .stats-box {
      margin-top: 10px;
      border: 1px solid #e8edf6;
      border-radius: 10px;
      background: linear-gradient(180deg, #fcfdff 0%, #f7faff 100%);
      padding: 8px 10px;
      font-size: 12px;
      color: #4c5f76;
      line-height: 1.6;
    }
    .stats-box .light {
      color: #7f91a8;
    }
    .route-actions {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .action-left, .action-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .empty-shell {
      min-height: 48vh;
      border-radius: 12px;
      border: 1px dashed #cfd8e5;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #7d8ea4;
      gap: 8px;
      background: rgba(255, 255, 255, 0.55);
    }
    .log-toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }
    .log-text {
      max-width: 360px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #6c7f95;
      font-size: 12px;
    }
    .log-detail-body {
      max-height: 62vh;
      overflow: auto;
      border: 1px solid #dfe8f3;
      border-radius: 8px;
      background: #f8fbff;
      padding: 10px 12px;
      white-space: pre-wrap;
      word-break: break-word;
      line-height: 1.55;
      color: #2e3c4f;
      font-size: 12px;
      font-family: Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    }
    @keyframes card-in {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .mono {
      font-family: Menlo, Monaco, Consolas, "Liberation Mono", monospace;
@@ -83,6 +250,9 @@
    }
    @media (max-width: 1280px) {
      .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .route-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
      .route-fields { grid-template-columns: 1fr; }
      .switch-line { grid-template-columns: 1fr; }
    }
  </style>
</head>
@@ -97,9 +267,12 @@
          <div class="sub">支持多API、多模型、多Key，额度耗尽或故障自动切换</div>
        </div>
      </div>
      <div>
      <div class="hero-actions">
        <el-button type="primary" size="mini" @click="addRoute">新增路由</el-button>
        <el-button size="mini" @click="exportRoutes">导出JSON</el-button>
        <el-button size="mini" @click="triggerImport">导入JSON</el-button>
        <el-button size="mini" @click="loadRoutes">刷新</el-button>
        <el-button size="mini" @click="openLogDialog">调用日志</el-button>
      </div>
    </div>
    <div class="summary-grid">
@@ -125,101 +298,181 @@
      </div>
    </div>
  </div>
  <input ref="importFileInput" type="file" accept="application/json,.json" style="display:none;" @change="handleImportFileChange" />

  <div class="table-shell">
    <el-table :data="routes" stripe height="72vh" v-loading="loading" :header-cell-style="{background:'#f7f9fc', color:'#2e3a4d', fontWeight:600}">
      <el-table-column label="名称" width="170">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" size="mini"></el-input>
        </template>
      </el-table-column>
  <div class="route-board" v-loading="loading">
    <div v-if="!routes || routes.length === 0" class="empty-shell">
      <div style="font-size:14px;font-weight:600;">暂无路由配置</div>
      <div style="font-size:12px;">点击右上角“新增路由”创建第一条配置</div>
    </div>
    <div v-else class="route-grid">
      <div class="route-card" :class="routeCardClass(route)" v-for="(route, idx) in routes" :key="route.id ? ('route_' + route.id) : ('new_' + idx)">
        <div class="route-head">
          <div class="route-title">
            <el-input
              :value="displayRouteName(route)"
              size="mini"
              placeholder="路由名称"
              @input="handleRouteNameInput(route, $event)"></el-input>
            <div class="route-id-line">#{{ route.id || 'new' }} · 优先级 {{ route.priority || 0 }}</div>
          </div>
          <div class="route-state">
            <el-tag size="mini" :type="route.status === 1 ? 'success' : 'info'">{{ route.status === 1 ? '启用' : '禁用' }}</el-tag>
            <el-tag size="mini" type="warning" v-if="isRouteCooling(route)">冷却中</el-tag>
          </div>
        </div>

      <el-table-column label="Base URL" min-width="220">
        <template slot-scope="scope">
          <el-input v-model="scope.row.baseUrl" class="mono" size="mini" placeholder="必填，例如: https://api.deepseek.com"></el-input>
        </template>
      </el-table-column>
        <div class="route-fields">
          <div class="field-full">
            <div class="field-label">Base URL</div>
            <el-input v-model="route.baseUrl" class="mono" size="mini" placeholder="必填，例如: https://dashscope.aliyuncs.com/compatible-mode/v1"></el-input>
          </div>
          <div>
            <div class="field-label">模型</div>
            <el-input v-model="route.model" class="mono" size="mini" placeholder="必填"></el-input>
          </div>
          <div>
            <div class="field-label">优先级（越小越优先）</div>
            <el-input-number v-model="route.priority" size="mini" :min="0" :max="99999" :controls="false" style="width:100%;"></el-input-number>
          </div>
          <div class="field-full">
            <div class="field-label">API Key</div>
            <el-input v-model="route.apiKey" class="mono" type="password" size="mini" placeholder="必填">
              <template slot="append">
                <el-button type="text" style="padding:0 8px;" @click="copyApiKey(route)">复制</el-button>
              </template>
            </el-input>
          </div>
          <div>
            <div class="field-label">冷却秒数</div>
            <el-input-number v-model="route.cooldownSeconds" size="mini" :min="0" :max="86400" :controls="false" style="width:100%;"></el-input-number>
          </div>
        </div>

      <el-table-column label="模型" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.model" class="mono" size="mini" placeholder="必填，例如: deepseek-chat"></el-input>
        </template>
      </el-table-column>
        <div class="switch-line">
          <div class="switch-item">
            <span>状态</span>
            <el-switch v-model="route.status" :active-value="1" :inactive-value="0"></el-switch>
          </div>
          <div class="switch-item">
            <span>思考</span>
            <el-switch v-model="route.thinking" :active-value="1" :inactive-value="0"></el-switch>
          </div>
          <div class="switch-item">
            <span>额度切换</span>
            <el-switch v-model="route.switchOnQuota" :active-value="1" :inactive-value="0"></el-switch>
          </div>
          <div class="switch-item">
            <span>故障切换</span>
            <el-switch v-model="route.switchOnError" :active-value="1" :inactive-value="0"></el-switch>
          </div>
        </div>

      <el-table-column label="API Key" min-width="220">
        <template slot-scope="scope">
          <el-input v-model="scope.row.apiKey" class="mono" type="password" size="mini" placeholder="必填"></el-input>
        </template>
      </el-table-column>
        <div class="stats-box">
          <div>成功 {{ route.successCount || 0 }} / 失败 {{ route.failCount || 0 }} / 连续失败 {{ route.consecutiveFailCount || 0 }}</div>
          <div class="light">冷却到: {{ formatDateTime(route.cooldownUntil) }}</div>
          <div class="light">最近错误: {{ route.lastError || '-' }}</div>
        </div>

      <el-table-column label="优先级" width="90">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.priority" size="mini" :min="0" :max="99999" :controls="false" style="width:80px;"></el-input-number>
        </template>
      </el-table-column>

      <el-table-column label="状态" width="70">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="思考" width="70">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.thinking" :active-value="1" :inactive-value="0"></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="额度切换" width="90">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.switchOnQuota" :active-value="1" :inactive-value="0"></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="故障切换" width="90">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.switchOnError" :active-value="1" :inactive-value="0"></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="冷却秒数" width="100">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.cooldownSeconds" size="mini" :min="0" :max="86400" :controls="false" style="width:90px;"></el-input-number>
        </template>
      </el-table-column>

      <el-table-column label="统计" min-width="220">
        <template slot-scope="scope">
          <div>成功: {{ scope.row.successCount || 0 }} / 失败: {{ scope.row.failCount || 0 }} / 连续失败: {{ scope.row.consecutiveFailCount || 0 }}</div>
          <div style="color:#909399;">冷却到: {{ scope.row.cooldownUntil || '-' }}</div>
          <div style="color:#909399;">最近错误: {{ scope.row.lastError || '-' }}</div>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="120" fixed="right" align="center">
        <template slot-scope="scope">
          <el-dropdown trigger="click" @command="function(cmd){ handleRouteCommand(cmd, scope.row, scope.$index); }">
            <el-button size="mini" type="primary" plain>
              操作<i class="el-icon-arrow-down el-icon--right"></i>
        <div class="route-actions">
          <div class="action-left">
            <el-button type="primary" size="mini" @click="saveRoute(route)">保存</el-button>
            <el-button size="mini" :loading="route.__testing === true" @click="testRoute(route)">
              {{ route.__testing === true ? '测试中...' : '测试' }}
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="test" :disabled="scope.row.__testing === true">
                {{ scope.row.__testing === true ? '测试中...' : '测试' }}
              </el-dropdown-item>
              <el-dropdown-item command="save">保存</el-dropdown-item>
              <el-dropdown-item command="cooldown">清冷却</el-dropdown-item>
              <el-dropdown-item command="delete" divided>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          </div>
          <div class="action-right">
            <el-dropdown trigger="click" @command="function(cmd){ handleRouteCommand(cmd, route, idx); }">
              <el-button size="mini" plain>
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="cooldown" :disabled="!route.id">清冷却</el-dropdown-item>
                <el-dropdown-item command="delete" divided>删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
  </div>

  <el-dialog :title="i18n('llm.logsTitle', 'LLM调用日志')" :visible.sync="logDialogVisible" width="88%" :close-on-click-modal="false">
    <div class="log-toolbar">
      <el-select v-model="logQuery.scene" size="mini" clearable placeholder="场景" style="width:180px;">
        <el-option label="chat" value="chat"></el-option>
        <el-option label="chat_completion" value="chat_completion"></el-option>
        <el-option label="chat_completion_tools" value="chat_completion_tools"></el-option>
        <el-option label="chat_stream" value="chat_stream"></el-option>
        <el-option label="chat_stream_tools" value="chat_stream_tools"></el-option>
      </el-select>
      <el-select v-model="logQuery.success" size="mini" clearable placeholder="结果" style="width:120px;">
        <el-option label="成功" :value="1"></el-option>
        <el-option label="失败" :value="0"></el-option>
      </el-select>
      <el-input v-model="logQuery.traceId" size="mini" placeholder="traceId" style="width:260px;"></el-input>
      <el-button type="primary" size="mini" @click="loadLogs(1)">查询</el-button>
      <el-button size="mini" @click="resetLogQuery">重置</el-button>
      <el-button type="danger" plain size="mini" @click="clearLogs">清空日志</el-button>
    </div>

    <el-table :data="logPage.records" border stripe height="56vh" v-loading="logLoading" :header-cell-style="{background:'#f7f9fc', color:'#2e3a4d', fontWeight:600}">
      <el-table-column label="时间" width="165">
        <template slot-scope="scope">
          {{ formatDateTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="scene" label="场景" width="165"></el-table-column>
      <el-table-column prop="attemptNo" label="尝试" width="70"></el-table-column>
      <el-table-column prop="routeName" label="路由" width="170"></el-table-column>
      <el-table-column prop="model" label="模型" width="150"></el-table-column>
      <el-table-column label="结果" width="85">
        <template slot-scope="scope">
          <el-tag size="mini" :type="scope.row.success === 1 ? 'success' : 'danger'">
            {{ scope.row.success === 1 ? '成功' : '失败' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="httpStatus" label="状态码" width="90"></el-table-column>
      <el-table-column prop="latencyMs" label="耗时(ms)" width="95"></el-table-column>
      <el-table-column prop="traceId" label="TraceId" width="230"></el-table-column>
      <el-table-column label="错误" min-width="220">
        <template slot-scope="scope">
          <div class="log-text">{{ scope.row.errorMessage || '-' }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="showLogDetail(scope.row)">详情</el-button>
          <el-button type="text" size="mini" style="color:#F56C6C;" @click="deleteLog(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

    <div style="margin-top:10px;text-align:right;">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :current-page="logPage.curr"
        :page-size="logPage.limit"
        :total="logPage.total"
        @current-change="loadLogs">
      </el-pagination>
    </div>
  </el-dialog>

  <el-dialog :title="logDetailTitle || i18n('llm.logDetailTitle', '日志详情')" :visible.sync="logDetailVisible" width="82%" :close-on-click-modal="false" append-to-body>
    <div class="log-detail-body">{{ logDetailText || '-' }}</div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="copyText(logDetailText)">复制全文</el-button>
      <el-button type="primary" size="mini" @click="logDetailVisible = false">关闭</el-button>
    </span>
  </el-dialog>
</div>

<script type="text/javascript" src="../../static/vue/js/vue.min.js"></script>
<script type="text/javascript" src="../../static/vue/element/element.js"></script>
<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../static/js/common.js?v=20260309_i18n_fix1" charset="utf-8"></script>
<script>
  new Vue({
    el: '#app',
@@ -227,7 +480,23 @@
      return {
        headerIcon: getAiIconHtml(34, 34),
        loading: false,
        routes: []
        routes: [],
        logDialogVisible: false,
        logLoading: false,
        logDetailVisible: false,
        logDetailTitle: '',
        logDetailText: '',
        logQuery: {
          scene: '',
          success: '',
          traceId: ''
        },
        logPage: {
          records: [],
          curr: 1,
          limit: 20,
          total: 0
        }
      };
    },
    computed: {
@@ -246,14 +515,367 @@
      }
    },
    methods: {
      i18n: function(key, fallback, params) {
        if (window.WCS_I18N && typeof window.WCS_I18N.t === 'function') {
          var translated = window.WCS_I18N.t(key, params);
          if (translated && translated !== key) {
            return translated;
          }
        }
        return fallback || key;
      },
      translateLegacyText: function(text) {
        if (window.WCS_I18N && typeof window.WCS_I18N.tl === 'function') {
          return window.WCS_I18N.tl(text);
        }
        return text;
      },
      displayRouteName: function(route) {
        var value = route && route.name ? String(route.name) : '';
        return this.translateLegacyText(value);
      },
      handleRouteNameInput: function(route, value) {
        if (!route) {
          return;
        }
        route.name = value;
      },
      formatDateTime: function(input) {
        if (!input) return '-';
        var d = input instanceof Date ? input : new Date(input);
        if (isNaN(d.getTime())) return String(input);
        var pad = function(n) { return n < 10 ? ('0' + n) : String(n); };
        var y = d.getFullYear();
        var m = pad(d.getMonth() + 1);
        var day = pad(d.getDate());
        var h = pad(d.getHours());
        var mm = pad(d.getMinutes());
        var s = pad(d.getSeconds());
        return y + '-' + m + '-' + day + ' ' + h + ':' + mm + ':' + s;
      },
      isRouteCooling: function(route) {
        if (!route || !route.cooldownUntil) return false;
        var x = new Date(route.cooldownUntil).getTime();
        return !isNaN(x) && x > Date.now();
      },
      routeCardClass: function(route) {
        return {
          cooling: this.isRouteCooling(route),
          disabled: route && route.status !== 1
        };
      },
      copyApiKey: function(route) {
        var self = this;
        var text = route && route.apiKey ? String(route.apiKey) : '';
        if (!text) {
          self.$message.warning('API Key 为空');
          return;
        }

        var afterCopy = function(ok) {
          if (ok) self.$message.success('API Key 已复制');
          else self.$message.error('复制失败，请手动复制');
        };

        if (navigator && navigator.clipboard && window.isSecureContext) {
          navigator.clipboard.writeText(text)
            .then(function(){ afterCopy(true); })
            .catch(function(){ afterCopy(false); });
          return;
        }

        var ta = document.createElement('textarea');
        ta.value = text;
        ta.setAttribute('readonly', 'readonly');
        ta.style.position = 'fixed';
        ta.style.left = '-9999px';
        document.body.appendChild(ta);
        ta.focus();
        ta.select();
        var ok = false;
        try {
          ok = document.execCommand('copy');
        } catch (e) {
          ok = false;
        }
        document.body.removeChild(ta);
        afterCopy(ok);
      },
      copyText: function(text) {
        var self = this;
        var val = text ? String(text) : '';
        if (!val) {
          self.$message.warning('没有可复制内容');
          return;
        }
        var done = function(ok) {
          if (ok) self.$message.success('已复制');
          else self.$message.error('复制失败，请手动复制');
        };
        if (navigator && navigator.clipboard && window.isSecureContext) {
          navigator.clipboard.writeText(val).then(function(){ done(true); }).catch(function(){ done(false); });
          return;
        }
        var ta = document.createElement('textarea');
        ta.value = val;
        ta.setAttribute('readonly', 'readonly');
        ta.style.position = 'fixed';
        ta.style.left = '-9999px';
        document.body.appendChild(ta);
        ta.focus();
        ta.select();
        var ok = false;
        try {
          ok = document.execCommand('copy');
        } catch (e) {
          ok = false;
        }
        document.body.removeChild(ta);
        done(ok);
      },
      authHeaders: function() {
        return { 'token': localStorage.getItem('token') };
      },
      exportRoutes: function() {
        var self = this;
        fetch(baseUrl + '/ai/llm/config/export/auth', { headers: self.authHeaders() })
          .then(function(r){ return r.json(); })
          .then(function(res){
            if (!res || res.code !== 200) {
              self.$message.error((res && res.msg) ? res.msg : '导出失败');
              return;
            }
            var payload = res.data || {};
            var text = JSON.stringify(payload, null, 2);
            var name = 'llm_routes_' + self.buildExportTimestamp() + '.json';
            var blob = new Blob([text], { type: 'application/json;charset=utf-8' });
            var a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = name;
            document.body.appendChild(a);
            a.click();
            setTimeout(function() {
              URL.revokeObjectURL(a.href);
              document.body.removeChild(a);
            }, 0);
            self.$message.success('导出成功');
          })
          .catch(function(){
            self.$message.error('导出失败');
          });
      },
      buildExportTimestamp: function() {
        var d = new Date();
        var pad = function(n) { return n < 10 ? ('0' + n) : String(n); };
        return d.getFullYear()
          + pad(d.getMonth() + 1)
          + pad(d.getDate())
          + '_'
          + pad(d.getHours())
          + pad(d.getMinutes())
          + pad(d.getSeconds());
      },
      triggerImport: function() {
        var input = this.$refs.importFileInput;
        if (!input) return;
        input.value = '';
        input.click();
      },
      handleImportFileChange: function(evt) {
        var self = this;
        var files = evt && evt.target && evt.target.files ? evt.target.files : null;
        var file = files && files.length > 0 ? files[0] : null;
        if (!file) return;
        var reader = new FileReader();
        reader.onload = function(e) {
          var text = e && e.target ? e.target.result : '';
          var parsed;
          try {
            parsed = JSON.parse(text || '{}');
          } catch (err) {
            self.$message.error('JSON 格式不正确');
            return;
          }
          var routes = self.extractImportRoutes(parsed);
          if (!routes || routes.length === 0) {
            self.$message.warning('未找到可导入的 routes');
            return;
          }
          self.$confirm(
            '请选择导入方式：覆盖导入会先清空现有路由；点击“合并导入”则按ID更新或新增。',
            '导入确认',
            {
              type: 'warning',
              distinguishCancelAndClose: true,
              confirmButtonText: '覆盖导入',
              cancelButtonText: '合并导入',
              closeOnClickModal: false
            }
          ).then(function() {
            self.doImportRoutes(routes, true);
          }).catch(function(action) {
            if (action === 'cancel') {
              self.doImportRoutes(routes, false);
            }
          });
        };
        reader.onerror = function() {
          self.$message.error('读取文件失败');
        };
        reader.readAsText(file, 'utf-8');
      },
      extractImportRoutes: function(parsed) {
        if (Array.isArray(parsed)) return parsed;
        if (!parsed || typeof parsed !== 'object') return [];
        if (Array.isArray(parsed.routes)) return parsed.routes;
        if (parsed.data && Array.isArray(parsed.data.routes)) return parsed.data.routes;
        if (Array.isArray(parsed.data)) return parsed.data;
        return [];
      },
      doImportRoutes: function(routes, replace) {
        var self = this;
        fetch(baseUrl + '/ai/llm/config/import/auth', {
          method: 'POST',
          headers: Object.assign({ 'Content-Type': 'application/json' }, self.authHeaders()),
          body: JSON.stringify({
            replace: replace === true,
            routes: routes
          })
        })
          .then(function(r){ return r.json(); })
          .then(function(res){
            if (!res || res.code !== 200) {
              self.$message.error((res && res.msg) ? res.msg : '导入失败');
              return;
            }
            var d = res.data || {};
            var msg = '导入完成：新增 ' + (d.inserted || 0)
              + '，更新 ' + (d.updated || 0)
              + '，跳过 ' + (d.skipped || 0);
            if (d.errorCount && d.errorCount > 0) {
              msg += '，异常 ' + d.errorCount;
            }
            self.$message.success(msg);
            if (Array.isArray(d.errors) && d.errors.length > 0) {
              self.$alert(d.errors.join('\n'), '导入异常明细（最多20条）', {
                confirmButtonText: '确定',
                type: 'warning'
              });
            }
            self.loadRoutes();
          })
          .catch(function(){
            self.$message.error('导入失败');
          });
      },
      handleRouteCommand: function(command, route, idx) {
        if (command === 'test') return this.testRoute(route);
        if (command === 'save') return this.saveRoute(route);
        if (command === 'cooldown') return this.clearCooldown(route);
        if (command === 'delete') return this.deleteRoute(route, idx);
      },
      openLogDialog: function() {
        this.logDialogVisible = true;
        this.loadLogs(1);
      },
      resetLogQuery: function() {
        this.logQuery.scene = '';
        this.logQuery.success = '';
        this.logQuery.traceId = '';
        this.loadLogs(1);
      },
      buildLogQuery: function(curr) {
        var q = [];
        q.push('curr=' + encodeURIComponent(curr || 1));
        q.push('limit=' + encodeURIComponent(this.logPage.limit));
        if (this.logQuery.scene) q.push('scene=' + encodeURIComponent(this.logQuery.scene));
        if (this.logQuery.success !== '' && this.logQuery.success !== null && this.logQuery.success !== undefined) {
          q.push('success=' + encodeURIComponent(this.logQuery.success));
        }
        if (this.logQuery.traceId) q.push('traceId=' + encodeURIComponent(this.logQuery.traceId));
        return q.join('&');
      },
      loadLogs: function(curr) {
        var self = this;
        self.logLoading = true;
        fetch(baseUrl + '/ai/llm/log/list/auth?' + self.buildLogQuery(curr), { headers: self.authHeaders() })
          .then(function(r){ return r.json(); })
          .then(function(res){
            self.logLoading = false;
            if (!res || res.code !== 200) {
              self.$message.error((res && res.msg) ? res.msg : '日志加载失败');
              return;
            }
            var p = res.data || {};
            self.logPage.records = Array.isArray(p.records) ? p.records : [];
            self.logPage.curr = p.current || curr || 1;
            self.logPage.limit = p.size || self.logPage.limit;
            self.logPage.total = p.total || 0;
          })
          .catch(function(){
            self.logLoading = false;
            self.$message.error('日志加载失败');
          });
      },
      showLogDetail: function(row) {
        var text = ''
          + '时间: ' + this.formatDateTime(row.createTime) + '\n'
          + 'TraceId: ' + (row.traceId || '-') + '\n'
          + '场景: ' + (row.scene || '-') + '\n'
          + '路由: ' + (row.routeName || '-') + '\n'
          + '模型: ' + (row.model || '-') + '\n'
          + '状态码: ' + (row.httpStatus != null ? row.httpStatus : '-') + '\n'
          + '耗时: ' + (row.latencyMs != null ? row.latencyMs : '-') + ' ms\n'
          + '结果: ' + (row.success === 1 ? '成功' : '失败') + '\n'
          + '错误: ' + (row.errorMessage || '-') + '\n\n'
          + '请求:\n' + (row.requestContent || '-') + '\n\n'
          + '响应:\n' + (row.responseContent || '-');
        this.logDetailTitle = this.i18n('llm.logDetailPrefix', '日志详情 - ') + (row.traceId || row.id || '');
        this.logDetailText = text;
        this.logDetailVisible = true;
      },
      deleteLog: function(row) {
        var self = this;
        if (!row || !row.id) return;
        self.$confirm('确定删除该日志吗？', '提示', { type: 'warning' }).then(function() {
          fetch(baseUrl + '/ai/llm/log/delete/auth?id=' + encodeURIComponent(row.id), {
            method: 'POST',
            headers: self.authHeaders()
          })
            .then(function(r){ return r.json(); })
            .then(function(res){
              if (res && res.code === 200) {
                self.$message.success('删除成功');
                self.loadLogs(self.logPage.curr);
              } else {
                self.$message.error((res && res.msg) ? res.msg : '删除失败');
              }
            })
            .catch(function(){
              self.$message.error('删除失败');
            });
        }).catch(function(){});
      },
      clearLogs: function() {
        var self = this;
        self.$confirm('确定清空全部LLM调用日志吗？', '提示', { type: 'warning' }).then(function() {
          fetch(baseUrl + '/ai/llm/log/clear/auth', {
            method: 'POST',
            headers: self.authHeaders()
          })
            .then(function(r){ return r.json(); })
            .then(function(res){
              if (res && res.code === 200) {
                self.$message.success('已清空');
                self.loadLogs(1);
              } else {
                self.$message.error((res && res.msg) ? res.msg : '清空失败');
              }
            })
            .catch(function(){
              self.$message.error('清空失败');
            });
        }).catch(function(){});
      },
      loadRoutes: function() {
        var self = this;
@@ -413,6 +1035,12 @@
      }
    },
    mounted: function() {
      var self = this;
      if (window.WCS_I18N && typeof window.WCS_I18N.onReady === 'function') {
        window.WCS_I18N.onReady(function() {
          self.$forceUpdate();
        });
      }
      this.loadRoutes();
    }
  });