init: 2026Technology-Competition initial commit
This commit is contained in:
xunhe
@@ -0,0 +1,726 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||
<title>Agent 管理 - AI指摘管理系统</title>
|
||||
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
|
||||
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
|
||||
<script src="https://modao.cc/agent-py/static/source/js/echarts.min.js"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.sidebar-active {
|
||||
background-color: rgba(26, 115, 232, 0.1);
|
||||
color: #1a73e8;
|
||||
border-right: 4px solid #1a73e8;
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
border-bottom: 3px solid #1a73e8;
|
||||
color: #1a73e8;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.approval-pulse {
|
||||
animation: approvalPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes approvalPulse {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.2); }
|
||||
50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-50 text-gray-800 flex overflow-hidden h-screen">
|
||||
<!-- Sidebar (Shared) -->
|
||||
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col flex-none">
|
||||
<div class="p-6 flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-200">
|
||||
<iconify-icon class="text-white text-2xl" icon="lucide:shield-check"></iconify-icon>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="font-bold text-lg leading-none text-gray-900">IMS</h1>
|
||||
<p class="text-[10px] text-gray-400 mt-1 uppercase tracking-widest font-semibold">AI Assistant</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 mt-4 px-3 space-y-1 overflow-y-auto">
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group"
|
||||
href="dashboard.html">
|
||||
<iconify-icon class="text-xl" icon="lucide:layout-dashboard"></iconify-icon>
|
||||
<span class="font-medium text-sm">工作台</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group"
|
||||
href="issues.html">
|
||||
<iconify-icon class="text-xl" icon="lucide:list-todo"></iconify-icon>
|
||||
<span class="font-medium text-sm">指摘列表</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group"
|
||||
href="batch-input.html">
|
||||
<iconify-icon class="text-xl" icon="lucide:file-up"></iconify-icon>
|
||||
<span class="font-medium text-sm">批量录入</span>
|
||||
</a>
|
||||
<div class="pt-4 pb-2 px-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest">AI 智能分析</div>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group" href="ai-analysis.html">
|
||||
<iconify-icon class="text-xl" icon="lucide:brain-circuit"></iconify-icon>
|
||||
<span class="font-medium text-sm">AI分析记录</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group"
|
||||
href="knowledge-base.html">
|
||||
<iconify-icon class="text-xl" icon="lucide:database"></iconify-icon>
|
||||
<span class="font-medium text-sm">知识库管理</span>
|
||||
</a>
|
||||
<div class="pt-4 pb-2 px-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest">系统设置</div>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group"
|
||||
href="users.html">
|
||||
<iconify-icon class="text-xl" icon="lucide:users"></iconify-icon>
|
||||
<span class="font-medium text-sm">用户管理</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group"
|
||||
href="roles.html">
|
||||
<iconify-icon class="text-xl" icon="lucide:key-round"></iconify-icon>
|
||||
<span class="font-medium text-sm">角色权限</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg sidebar-active transition-all group"
|
||||
href="agent-management.html">
|
||||
<iconify-icon class="text-xl" icon="lucide:bot"></iconify-icon>
|
||||
<span class="font-medium text-sm">Agent管理</span>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 flex flex-col min-w-0 overflow-hidden">
|
||||
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-8 flex-none">
|
||||
<h2 class="text-lg font-semibold text-gray-800">Agent 监控与管理</h2>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs font-bold text-gray-400">全局自动执行</span>
|
||||
<div class="w-12 h-6 bg-green-500 rounded-full relative cursor-pointer shadow-inner">
|
||||
<div class="absolute right-1 top-1 w-4 h-4 bg-white rounded-full shadow-sm"></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="bg-white border-b border-gray-200 px-8 flex-none">
|
||||
<div class="flex gap-8">
|
||||
<button class="pb-3 text-sm font-medium text-gray-500 hover:text-gray-700 tab-active" data-tab="overview" onclick="switchTab('overview')">
|
||||
<iconify-icon icon="lucide:activity" class="inline mr-1"></iconify-icon> 运行概览
|
||||
</button>
|
||||
<button class="pb-3 text-sm font-medium text-gray-500 hover:text-gray-700" data-tab="approval" onclick="switchTab('approval')">
|
||||
<iconify-icon icon="lucide:shield-alert" class="inline mr-1"></iconify-icon> 待审批队列
|
||||
<span class="ml-1 px-1.5 py-0.5 bg-red-500 text-white text-[10px] rounded-full font-bold">3</span>
|
||||
</button>
|
||||
<button class="pb-3 text-sm font-medium text-gray-500 hover:text-gray-700" data-tab="config" onclick="switchTab('config')">
|
||||
<iconify-icon icon="lucide:settings" class="inline mr-1"></iconify-icon> 全局配置
|
||||
</button>
|
||||
<button class="pb-3 text-sm font-medium text-gray-500 hover:text-gray-700" data-tab="tools" onclick="switchTab('tools')">
|
||||
<iconify-icon icon="lucide:wrench" class="inline mr-1"></iconify-icon> 工具管理
|
||||
</button>
|
||||
<button class="pb-3 text-sm font-medium text-gray-500 hover:text-gray-700" data-tab="memory" onclick="switchTab('memory')">
|
||||
<iconify-icon icon="lucide:brain" class="inline mr-1"></iconify-icon> 记忆库
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto p-8 space-y-8">
|
||||
<!-- Tab: 运行概览 -->
|
||||
<div id="tab-overview" class="space-y-8">
|
||||
<!-- Overall Stats -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||||
<div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase mb-4">当前运行状态</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 bg-green-50 rounded-xl flex items-center justify-center text-green-600">
|
||||
<iconify-icon class="text-2xl" icon="lucide:activity"></iconify-icon>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-gray-900 leading-tight">健康</h3>
|
||||
<p class="text-xs text-green-600 font-medium italic">响应延迟 240ms</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase mb-4">今日调用次数</p>
|
||||
<h3 class="text-3xl font-bold text-gray-900">4,821</h3>
|
||||
<p class="text-xs text-gray-400 mt-2"><span class="text-blue-600 font-bold">+15%</span> 较昨日平均</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase mb-4">工具执行成功率</p>
|
||||
<h3 class="text-3xl font-bold text-gray-900">99.2%</h3>
|
||||
<div class="w-full h-1.5 bg-gray-100 rounded-full mt-4 overflow-hidden">
|
||||
<div class="h-full bg-green-500 w-[99.2%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase mb-4">人工介入请求</p>
|
||||
<h3 class="text-3xl font-bold text-gray-900">12</h3>
|
||||
<p class="text-xs text-gray-400 mt-2">待处理 <span class="text-red-500 font-bold">3</span> 条</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Exec Records -->
|
||||
<div class="lg:col-span-2 bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden flex flex-col">
|
||||
<div class="p-6 border-b border-gray-100 flex justify-between items-center bg-gray-50/30">
|
||||
<h4 class="font-bold text-gray-800">Agent 执行日志记录</h4>
|
||||
<div class="flex gap-2">
|
||||
<button class="p-2 hover:bg-white rounded-lg border border-transparent hover:border-gray-200 text-gray-400 transition-all"><iconify-icon icon="lucide:filter"></iconify-icon></button>
|
||||
<button class="p-2 hover:bg-white rounded-lg border border-transparent hover:border-gray-200 text-gray-400 transition-all"><iconify-icon icon="lucide:refresh-cw"></iconify-icon></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left">
|
||||
<thead class="bg-gray-50/50 border-b border-gray-100">
|
||||
<tr>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase">时间</th>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase">工具名称</th>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase">执行结果</th>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase">耗时</th>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase text-right">详情</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-50 text-xs">
|
||||
<tr>
|
||||
<td class="px-6 py-4 text-gray-400 mono">10:32:15</td>
|
||||
<td class="px-6 py-4 font-bold text-blue-600 mono">search_knowledge</td>
|
||||
<td class="px-6 py-4"><span class="px-2 py-0.5 bg-green-50 text-green-700 rounded-full font-bold">SUCCESS</span></td>
|
||||
<td class="px-6 py-4 text-gray-500">850ms</td>
|
||||
<td class="px-6 py-4 text-right"><iconify-icon class="text-gray-400 cursor-pointer hover:text-blue-600" icon="lucide:eye"></iconify-icon></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 text-gray-400 mono">10:30:02</td>
|
||||
<td class="px-6 py-4 font-bold text-orange-600 mono">send_reminder</td>
|
||||
<td class="px-6 py-4"><span class="px-2 py-0.5 bg-orange-50 text-orange-700 rounded-full font-bold">WAIT_HUMAN</span></td>
|
||||
<td class="px-6 py-4 text-gray-500">-</td>
|
||||
<td class="px-6 py-4 text-right"><iconify-icon class="text-gray-400 cursor-pointer hover:text-blue-600" icon="lucide:eye"></iconify-icon></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 text-gray-400 mono">10:28:45</td>
|
||||
<td class="px-6 py-4 font-bold text-blue-600 mono">update_metadata</td>
|
||||
<td class="px-6 py-4"><span class="px-2 py-0.5 bg-green-50 text-green-700 rounded-full font-bold">SUCCESS</span></td>
|
||||
<td class="px-6 py-4 text-gray-500">120ms</td>
|
||||
<td class="px-6 py-4 text-right"><iconify-icon class="text-gray-400 cursor-pointer hover:text-blue-600" icon="lucide:eye"></iconify-icon></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 text-gray-400 mono">10:25:12</td>
|
||||
<td class="px-6 py-4 font-bold text-red-600 mono">delete_issue</td>
|
||||
<td class="px-6 py-4"><span class="px-2 py-0.5 bg-red-50 text-red-700 rounded-full font-bold">REJECTED</span></td>
|
||||
<td class="px-6 py-4 text-gray-500">-</td>
|
||||
<td class="px-6 py-4 text-right"><iconify-icon class="text-gray-400 cursor-pointer hover:text-blue-600" icon="lucide:eye"></iconify-icon></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Exec Trend -->
|
||||
<div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
|
||||
<h4 class="font-bold text-gray-800 mb-6">工具调用频率趋势</h4>
|
||||
<div id="execChart" style="height: 350px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: 待审批队列 -->
|
||||
<div id="tab-approval" class="hidden space-y-6">
|
||||
<div class="bg-red-50 border border-red-100 rounded-2xl p-6 flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center text-red-600 approval-pulse">
|
||||
<iconify-icon class="text-2xl" icon="lucide:shield-alert"></iconify-icon>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-red-800">待审批操作提醒</h4>
|
||||
<p class="text-xs text-red-600 mt-1">当前有 <span class="font-bold">3</span> 个 Agent 发起的操作等待人工审批，超时 48 小时将自动触发通知升级。</p>
|
||||
</div>
|
||||
<button class="ml-auto px-4 py-2 bg-red-600 text-white rounded-lg text-xs font-bold hover:bg-red-700 transition-all">一键处理</button>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
|
||||
<div class="p-6 border-b border-gray-100 bg-gray-50/30 flex justify-between items-center">
|
||||
<h4 class="font-bold text-gray-800">审批队列</h4>
|
||||
<div class="flex gap-2">
|
||||
<select class="bg-white border border-gray-200 rounded-lg px-3 py-1.5 text-xs focus:outline-none">
|
||||
<option>全部类型</option>
|
||||
<option>删除指摘</option>
|
||||
<option>跨部门分配</option>
|
||||
<option>状态强制流转</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-50">
|
||||
<!-- Approval Item 1 -->
|
||||
<div class="p-6 hover:bg-gray-50 transition-colors">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-10 h-10 bg-red-100 rounded-xl flex items-center justify-center text-red-600 flex-none">
|
||||
<iconify-icon class="text-xl" icon="lucide:trash-2"></iconify-icon>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<span class="text-sm font-bold text-gray-900">删除指摘请求</span>
|
||||
<span class="px-2 py-0.5 bg-red-100 text-red-700 rounded-full text-[10px] font-bold">高风险</span>
|
||||
<span class="text-[10px] text-gray-400">10:30:02</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600 mb-3">Agent 准备调用 <code class="bg-gray-100 px-1 rounded font-mono text-red-600">delete_issue</code> 删除指摘 <span class="font-mono text-blue-600">ISSUE-2026-085</span></p>
|
||||
<div class="bg-gray-50 rounded-lg p-3 text-xs text-gray-500 mb-3">
|
||||
<span class="font-bold text-gray-700">原因：</span>用户指令 "清理已关闭超过3个月的测试数据"，Agent 识别到 ISSUE-2026-085 为测试阶段产生的废弃指摘，建议删除。
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-[10px] text-gray-400">
|
||||
<iconify-icon icon="lucide:user" width="12"></iconify-icon>
|
||||
发起人：张明亮 · 发起方式：Agent自动执行
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 flex-none">
|
||||
<button class="px-4 py-2 bg-red-600 text-white rounded-lg text-xs font-bold hover:bg-red-700 transition-all shadow-sm">批准</button>
|
||||
<button class="px-4 py-2 bg-white border border-gray-200 text-gray-600 rounded-lg text-xs font-bold hover:bg-gray-50 transition-all">拒绝</button>
|
||||
<button class="px-4 py-2 bg-white border border-gray-200 text-gray-400 rounded-lg text-xs font-bold hover:bg-gray-50 transition-all">查看详情</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Approval Item 2 -->
|
||||
<div class="p-6 hover:bg-gray-50 transition-colors">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center text-orange-600 flex-none">
|
||||
<iconify-icon class="text-xl" icon="lucide:shuffle"></iconify-icon>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<span class="text-sm font-bold text-gray-900">跨部门分配请求</span>
|
||||
<span class="px-2 py-0.5 bg-orange-100 text-orange-700 rounded-full text-[10px] font-bold">中风险</span>
|
||||
<span class="text-[10px] text-gray-400">09:15:33</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600 mb-3">Agent 准备调用 <code class="bg-gray-100 px-1 rounded font-mono text-orange-600">assign_issue</code> 将指摘 <span class="font-mono text-blue-600">ISSUE-2026-092</span> 分配给品质部</p>
|
||||
<div class="bg-gray-50 rounded-lg p-3 text-xs text-gray-500 mb-3">
|
||||
<span class="font-bold text-gray-700">原因：</span>当前担当者所属部门（研发中心）无相关处理权限，Agent 建议跨部门分配至品质部。
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-[10px] text-gray-400">
|
||||
<iconify-icon icon="lucide:user" width="12"></iconify-icon>
|
||||
发起人：李志强 · 发起方式：Agent自动执行
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 flex-none">
|
||||
<button class="px-4 py-2 bg-orange-600 text-white rounded-lg text-xs font-bold hover:bg-orange-700 transition-all shadow-sm">批准</button>
|
||||
<button class="px-4 py-2 bg-white border border-gray-200 text-gray-600 rounded-lg text-xs font-bold hover:bg-gray-50 transition-all">拒绝</button>
|
||||
<button class="px-4 py-2 bg-white border border-gray-200 text-gray-400 rounded-lg text-xs font-bold hover:bg-gray-50 transition-all">查看详情</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Approval Item 3 -->
|
||||
<div class="p-6 hover:bg-gray-50 transition-colors">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-10 h-10 bg-yellow-100 rounded-xl flex items-center justify-center text-yellow-600 flex-none">
|
||||
<iconify-icon class="text-xl" icon="lucide:git-compare"></iconify-icon>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<span class="text-sm font-bold text-gray-900">状态强制流转请求</span>
|
||||
<span class="px-2 py-0.5 bg-yellow-100 text-yellow-700 rounded-full text-[10px] font-bold">中风险</span>
|
||||
<span class="text-[10px] text-gray-400">08:42:18</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600 mb-3">Agent 准备调用 <code class="bg-gray-100 px-1 rounded font-mono text-yellow-600">update_status</code> 将指摘 <span class="font-mono text-blue-600">ISSUE-2026-088</span> 从"待确认"强制改为"已关闭"</p>
|
||||
<div class="bg-gray-50 rounded-lg p-3 text-xs text-gray-500 mb-3">
|
||||
<span class="font-bold text-gray-700">原因：</span>验证人员超过7天未响应，且整改内容已通过自动化测试验证。
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-[10px] text-gray-400">
|
||||
<iconify-icon icon="lucide:user" width="12"></iconify-icon>
|
||||
发起人：系统定时任务 · 发起方式：自动触发
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 flex-none">
|
||||
<button class="px-4 py-2 bg-yellow-600 text-white rounded-lg text-xs font-bold hover:bg-yellow-700 transition-all shadow-sm">批准</button>
|
||||
<button class="px-4 py-2 bg-white border border-gray-200 text-gray-600 rounded-lg text-xs font-bold hover:bg-gray-50 transition-all">拒绝</button>
|
||||
<button class="px-4 py-2 bg-white border border-gray-200 text-gray-400 rounded-lg text-xs font-bold hover:bg-gray-50 transition-all">查看详情</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: 全局配置 -->
|
||||
<div id="tab-config" class="hidden space-y-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- AI模型配置 -->
|
||||
<div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-6">
|
||||
<iconify-icon class="text-blue-600 text-xl" icon="lucide:cpu"></iconify-icon>
|
||||
<h4 class="font-bold text-gray-800">AI 模型配置</h4>
|
||||
</div>
|
||||
<div class="space-y-5">
|
||||
<div>
|
||||
<label class="block text-[10px] font-bold text-gray-400 uppercase mb-2">推理模型</label>
|
||||
<select class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">
|
||||
<option selected>deepseek-v4-pro（推荐）</option>
|
||||
<option>deepseek-v4-flash（快速响应）</option>
|
||||
</select>
|
||||
<p class="text-[10px] text-gray-400 mt-1.5">Pro 模型推理能力更强，适合复杂任务；Flash 模型响应更快。</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[10px] font-bold text-gray-400 uppercase mb-2">Embedding 模型</label>
|
||||
<select class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">
|
||||
<option selected>text-embedding-3-small</option>
|
||||
<option>text-embedding-3-large</option>
|
||||
</select>
|
||||
<p class="text-[10px] text-gray-400 mt-1.5">用于知识库文档向量化，Large 模型精度更高但耗时更长。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Agent行为配置 -->
|
||||
<div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-6">
|
||||
<iconify-icon class="text-blue-600 text-xl" icon="lucide:settings-2"></iconify-icon>
|
||||
<h4 class="font-bold text-gray-800">Agent 行为配置</h4>
|
||||
</div>
|
||||
<div class="space-y-5">
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label class="text-[10px] font-bold text-gray-400 uppercase">最大推理步数</label>
|
||||
<span class="text-sm font-bold text-blue-600">10</span>
|
||||
</div>
|
||||
<input type="range" min="5" max="20" value="10" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600" />
|
||||
<p class="text-[10px] text-gray-400 mt-1.5">超过最大步数后 Agent 任务将自动终止并记录错误。</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-4 bg-red-50 rounded-xl border border-red-100">
|
||||
<div>
|
||||
<p class="text-sm font-bold text-red-800">允许自动执行高风险操作</p>
|
||||
<p class="text-[10px] text-red-600/70 mt-1">开启后，Agent 可在不经过人工审批的情况下执行 delete_issue、跨部门分配等敏感操作。</p>
|
||||
</div>
|
||||
<div class="w-12 h-6 bg-gray-300 rounded-full relative cursor-pointer transition-colors">
|
||||
<div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full shadow-sm"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div>
|
||||
<p class="text-sm font-bold text-gray-700">单用户 Agent 调用限流</p>
|
||||
<p class="text-[10px] text-gray-500 mt-1">每分钟最多 10 个 Agent 目标请求</p>
|
||||
</div>
|
||||
<div class="w-12 h-6 bg-green-500 rounded-full relative cursor-pointer">
|
||||
<div class="absolute right-1 top-1 w-4 h-4 bg-white rounded-full shadow-sm"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 知识库切片配置 -->
|
||||
<div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-6">
|
||||
<iconify-icon class="text-blue-600 text-xl" icon="lucide:scissors"></iconify-icon>
|
||||
<h4 class="font-bold text-gray-800">知识库切片配置</h4>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-[10px] font-bold text-gray-400 uppercase mb-2">切片大小 (Token)</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="number" value="500" class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[10px] font-bold text-gray-400 uppercase mb-2">重叠比例 (%)</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="number" value="10" class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[10px] font-bold text-gray-400 uppercase mb-2">最大上传大小 (MB)</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="number" value="50" class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button class="px-8 py-3 bg-blue-600 text-white rounded-xl font-bold hover:bg-blue-700 transition-all shadow-lg shadow-blue-200">保存配置</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: 工具管理 -->
|
||||
<div id="tab-tools" class="hidden space-y-6">
|
||||
<div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
|
||||
<div class="p-6 border-b border-gray-100 bg-gray-50/30 flex justify-between items-center">
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-800">已注册工具列表</h4>
|
||||
<p class="text-xs text-gray-400 mt-1">管理 Agent 可调用的原子工具，敏感工具建议设为"需审批"</p>
|
||||
</div>
|
||||
</div>
|
||||
<table class="w-full text-left">
|
||||
<thead class="bg-gray-50/50 border-b border-gray-100">
|
||||
<tr>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase">工具名称</th>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase">描述</th>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase text-center">状态</th>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase text-center">风险等级</th>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase text-right">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-50 text-xs">
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-mono font-bold text-blue-600">assign_issue</td>
|
||||
<td class="px-6 py-4 text-gray-600">将指摘分配给指定负责人</td>
|
||||
<td class="px-6 py-4 text-center"><span class="px-2 py-0.5 bg-green-50 text-green-700 rounded-full font-bold">启用</span></td>
|
||||
<td class="px-6 py-4 text-center"><span class="px-2 py-0.5 bg-yellow-100 text-yellow-700 rounded-full font-bold">中风险</span></td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-400 hover:text-blue-600 mr-3"><iconify-icon icon="lucide:settings" width="16"></iconify-icon></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-mono font-bold text-blue-600">send_reminder</td>
|
||||
<td class="px-6 py-4 text-gray-600">发送催办通知</td>
|
||||
<td class="px-6 py-4 text-center"><span class="px-2 py-0.5 bg-green-50 text-green-700 rounded-full font-bold">启用</span></td>
|
||||
<td class="px-6 py-4 text-center"><span class="px-2 py-0.5 bg-green-100 text-green-700 rounded-full font-bold">低风险</span></td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-400 hover:text-blue-600 mr-3"><iconify-icon icon="lucide:settings" width="16"></iconify-icon></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-mono font-bold text-blue-600">close_issue</td>
|
||||
<td class="px-6 py-4 text-gray-600">关闭指摘</td>
|
||||
<td class="px-6 py-4 text-center"><span class="px-2 py-0.5 bg-orange-50 text-orange-700 rounded-full font-bold">需审批</span></td>
|
||||
<td class="px-6 py-4 text-center"><span class="px-2 py-0.5 bg-red-100 text-red-700 rounded-full font-bold">高风险</span></td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-400 hover:text-blue-600 mr-3"><iconify-icon icon="lucide:settings" width="16"></iconify-icon></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-mono font-bold text-blue-600">delete_issue</td>
|
||||
<td class="px-6 py-4 text-gray-600">删除指摘（不可逆）</td>
|
||||
<td class="px-6 py-4 text-center"><span class="px-2 py-0.5 bg-orange-50 text-orange-700 rounded-full font-bold">需审批</span></td>
|
||||
<td class="px-6 py-4 text-center"><span class="px-2 py-0.5 bg-red-100 text-red-700 rounded-full font-bold">高风险</span></td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-400 hover:text-blue-600 mr-3"><iconify-icon icon="lucide:settings" width="16"></iconify-icon></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-mono font-bold text-blue-600">search_knowledge</td>
|
||||
<td class="px-6 py-4 text-gray-600">在本地知识库中检索相关文档片段</td>
|
||||
<td class="px-6 py-4 text-center"><span class="px-2 py-0.5 bg-green-50 text-green-700 rounded-full font-bold">启用</span></td>
|
||||
<td class="px-6 py-4 text-center"><span class="px-2 py-0.5 bg-green-100 text-green-700 rounded-full font-bold">低风险</span></td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-400 hover:text-blue-600 mr-3"><iconify-icon icon="lucide:settings" width="16"></iconify-icon></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-mono font-bold text-blue-600">create_comment</td>
|
||||
<td class="px-6 py-4 text-gray-600">创建评论/备注</td>
|
||||
<td class="px-6 py-4 text-center"><span class="px-2 py-0.5 bg-green-50 text-green-700 rounded-full font-bold">启用</span></td>
|
||||
<td class="px-6 py-4 text-center"><span class="px-2 py-0.5 bg-green-100 text-green-700 rounded-full font-bold">低风险</span></td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-400 hover:text-blue-600 mr-3"><iconify-icon icon="lucide:settings" width="16"></iconify-icon></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-mono font-bold text-blue-600">request_human_approval</td>
|
||||
<td class="px-6 py-4 text-gray-600">请求人工审批</td>
|
||||
<td class="px-6 py-4 text-center"><span class="px-2 py-0.5 bg-green-50 text-green-700 rounded-full font-bold">启用</span></td>
|
||||
<td class="px-6 py-4 text-center"><span class="px-2 py-0.5 bg-blue-100 text-blue-700 rounded-full font-bold">系统</span></td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-400 hover:text-blue-600 mr-3"><iconify-icon icon="lucide:settings" width="16"></iconify-icon></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-mono font-bold text-blue-600">export_excel</td>
|
||||
<td class="px-6 py-4 text-gray-600">导出 Excel 报表</td>
|
||||
<td class="px-6 py-4 text-center"><span class="px-2 py-0.5 bg-green-50 text-green-700 rounded-full font-bold">启用</span></td>
|
||||
<td class="px-6 py-4 text-center"><span class="px-2 py-0.5 bg-yellow-100 text-yellow-700 rounded-full font-bold">中风险</span></td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-gray-400 hover:text-blue-600 mr-3"><iconify-icon icon="lucide:settings" width="16"></iconify-icon></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: 记忆库 -->
|
||||
<div id="tab-memory" class="hidden space-y-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase">记忆条目总数</p>
|
||||
<h3 class="text-3xl font-bold text-gray-900 mt-2">1,247</h3>
|
||||
<p class="text-xs text-gray-400 mt-1"><span class="text-blue-600 font-bold">+23</span> 本周新增</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase">平均有效性评分</p>
|
||||
<h3 class="text-3xl font-bold text-gray-900 mt-2">4.2<span class="text-lg text-gray-400">/5.0</span></h3>
|
||||
<div class="w-full h-1.5 bg-gray-100 rounded-full mt-3 overflow-hidden">
|
||||
<div class="h-full bg-blue-500 w-[84%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase">被引用次数</p>
|
||||
<h3 class="text-3xl font-bold text-gray-900 mt-2">3,856</h3>
|
||||
<p class="text-xs text-gray-400 mt-1">本周被 Agent 检索 <span class="text-blue-600 font-bold">412</span> 次</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
|
||||
<div class="p-6 border-b border-gray-100 bg-gray-50/30 flex justify-between items-center">
|
||||
<h4 class="font-bold text-gray-800">记忆条目列表</h4>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-xs font-bold hover:bg-blue-700 transition-all flex items-center gap-1">
|
||||
<iconify-icon icon="lucide:plus" width="14"></iconify-icon> 新增记忆
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<table class="w-full text-left">
|
||||
<thead class="bg-gray-50/50 border-b border-gray-100">
|
||||
<tr>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase">问题摘要</th>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase">解决方案步骤</th>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase text-center">有效性评分</th>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase text-center">引用次数</th>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase text-right">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-50 text-xs">
|
||||
<tr class="hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<p class="font-bold text-gray-900 text-sm">4K屏幕下侧边栏高度适配问题</p>
|
||||
<p class="text-gray-400 mt-1">前端布局 · CSS · 响应式设计</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-gray-600 max-w-xs">
|
||||
<ol class="list-decimal list-inside space-y-0.5">
|
||||
<li>使用 min-h-screen 替代 100vh</li>
|
||||
<li>开启 flex-grow 属性</li>
|
||||
<li>添加媒体查询适配 4K</li>
|
||||
</ol>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<iconify-icon class="text-yellow-400" icon="lucide:star" width="14"></iconify-icon>
|
||||
<iconify-icon class="text-yellow-400" icon="lucide:star" width="14"></iconify-icon>
|
||||
<iconify-icon class="text-yellow-400" icon="lucide:star" width="14"></iconify-icon>
|
||||
<iconify-icon class="text-yellow-400" icon="lucide:star" width="14"></iconify-icon>
|
||||
<iconify-icon class="text-yellow-400" icon="lucide:star" width="14"></iconify-icon>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-400">5.0</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center font-bold text-blue-600">42</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<div class="flex justify-end gap-2">
|
||||
<button class="text-gray-400 hover:text-blue-600"><iconify-icon icon="lucide:thumbs-up" width="16"></iconify-icon></button>
|
||||
<button class="text-gray-400 hover:text-red-600"><iconify-icon icon="lucide:thumbs-down" width="16"></iconify-icon></button>
|
||||
<button class="text-gray-400 hover:text-blue-600"><iconify-icon icon="lucide:pencil" width="16"></iconify-icon></button>
|
||||
<button class="text-gray-400 hover:text-red-600"><iconify-icon icon="lucide:trash-2" width="16"></iconify-icon></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<p class="font-bold text-gray-900 text-sm">数据库连接池泄漏排查</p>
|
||||
<p class="text-gray-400 mt-1">后端 · 数据库 · 性能优化</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-gray-600 max-w-xs">
|
||||
<ol class="list-decimal list-inside space-y-0.5">
|
||||
<li>检查连接是否正确关闭</li>
|
||||
<li>调整连接池最大连接数</li>
|
||||
<li>启用连接泄漏检测日志</li>
|
||||
</ol>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<iconify-icon class="text-yellow-400" icon="lucide:star" width="14"></iconify-icon>
|
||||
<iconify-icon class="text-yellow-400" icon="lucide:star" width="14"></iconify-icon>
|
||||
<iconify-icon class="text-yellow-400" icon="lucide:star" width="14"></iconify-icon>
|
||||
<iconify-icon class="text-yellow-400" icon="lucide:star" width="14"></iconify-icon>
|
||||
<iconify-icon class="text-gray-300" icon="lucide:star" width="14"></iconify-icon>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-400">4.0</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center font-bold text-blue-600">28</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<div class="flex justify-end gap-2">
|
||||
<button class="text-gray-400 hover:text-blue-600"><iconify-icon icon="lucide:thumbs-up" width="16"></iconify-icon></button>
|
||||
<button class="text-gray-400 hover:text-red-600"><iconify-icon icon="lucide:thumbs-down" width="16"></iconify-icon></button>
|
||||
<button class="text-gray-400 hover:text-blue-600"><iconify-icon icon="lucide:pencil" width="16"></iconify-icon></button>
|
||||
<button class="text-gray-400 hover:text-red-600"><iconify-icon icon="lucide:trash-2" width="16"></iconify-icon></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<p class="font-bold text-gray-900 text-sm">API 接口参数校验缺失</p>
|
||||
<p class="text-gray-400 mt-1">后端 · API · 安全</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-gray-600 max-w-xs">
|
||||
<ol class="list-decimal list-inside space-y-0.5">
|
||||
<li>添加 @Valid 注解</li>
|
||||
<li>配置全局异常处理器</li>
|
||||
<li>补充参数校验规则</li>
|
||||
</ol>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<iconify-icon class="text-yellow-400" icon="lucide:star" width="14"></iconify-icon>
|
||||
<iconify-icon class="text-yellow-400" icon="lucide:star" width="14"></iconify-icon>
|
||||
<iconify-icon class="text-yellow-400" icon="lucide:star" width="14"></iconify-icon>
|
||||
<iconify-icon class="text-yellow-400" icon="lucide:star" width="14"></iconify-icon>
|
||||
<iconify-icon class="text-gray-300" icon="lucide:star" width="14"></iconify-icon>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-400">4.5</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center font-bold text-blue-600">15</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<div class="flex justify-end gap-2">
|
||||
<button class="text-gray-400 hover:text-blue-600"><iconify-icon icon="lucide:thumbs-up" width="16"></iconify-icon></button>
|
||||
<button class="text-gray-400 hover:text-red-600"><iconify-icon icon="lucide:thumbs-down" width="16"></iconify-icon></button>
|
||||
<button class="text-gray-400 hover:text-blue-600"><iconify-icon icon="lucide:pencil" width="16"></iconify-icon></button>
|
||||
<button class="text-gray-400 hover:text-red-600"><iconify-icon icon="lucide:trash-2" width="16"></iconify-icon></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
function switchTab(tab) {
|
||||
document.querySelectorAll('[data-tab]').forEach(btn => btn.classList.remove('tab-active'));
|
||||
document.querySelector(`[data-tab="${tab}"]`).classList.add('tab-active');
|
||||
['overview', 'approval', 'config', 'tools', 'memory'].forEach(t => {
|
||||
document.getElementById(`tab-${t}`).classList.toggle('hidden', t !== tab);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const execChart = echarts.init(document.getElementById('execChart'));
|
||||
execChart.setOption({
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['08:00', '09:00', '10:00', '11:00', '12:00'],
|
||||
axisLine: { lineStyle: { color: '#eee' } }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: { lineStyle: { type: 'dashed', color: '#f5f5f5' } }
|
||||
},
|
||||
series: [{
|
||||
name: '调用次数',
|
||||
type: 'bar',
|
||||
barWidth: '20%',
|
||||
data: [120, 450, 890, 520, 300],
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#1a73e8' },
|
||||
{ offset: 1, color: '#60a5fa' }
|
||||
]),
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
}
|
||||
}]
|
||||
});
|
||||
window.addEventListener('resize', () => execChart.resize());
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user