| | |
| | | <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%), |
| | |
| | | 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; |
| | |
| | | } |
| | | @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> |
| | |
| | | <div> |
| | | <el-button type="primary" size="mini" @click="addRoute">新增路由</el-button> |
| | | <el-button size="mini" @click="loadRoutes">刷新</el-button> |
| | | <el-button size="mini" @click="openLogDialog">调用日志</el-button> |
| | | </div> |
| | | </div> |
| | | <div class="summary-grid"> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <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 v-model="route.name" size="mini" placeholder="路由名称"></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="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 || '日志详情'" :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> |
| | |
| | | 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: { |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | 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') }; |
| | | }, |
| | |
| | | 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 = '日志详情 - ' + (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; |
| | | self.loading = true; |