456 lines
27 KiB
HTML
456 lines
27 KiB
HTML
<!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>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
||
|
||
body {
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
}
|
||
|
||
.mono {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
.thought-card {
|
||
border-left: 4px solid #1a73e8;
|
||
background: #f0f7ff;
|
||
}
|
||
|
||
.action-card {
|
||
border-left: 4px solid #f59e0b;
|
||
background: #fffbeb;
|
||
}
|
||
|
||
.observation-card {
|
||
border-left: 4px solid #10b981;
|
||
background: #f0fdf4;
|
||
}
|
||
|
||
.approval-card {
|
||
border: 2px solid #ef4444;
|
||
background: #fef2f2;
|
||
animation: pulse-border 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse-border {
|
||
|
||
0%,
|
||
100% {
|
||
border-color: #ef4444;
|
||
}
|
||
|
||
50% {
|
||
border-color: #fee2e2;
|
||
}
|
||
}
|
||
|
||
.chat-container::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
|
||
.chat-container::-webkit-scrollbar-thumb {
|
||
background: #e2e8f0;
|
||
border-radius: 10px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="bg-gray-50 text-gray-800 flex overflow-hidden h-screen">
|
||
<!-- Sidebar (Same as Dashboard) -->
|
||
<aside class="w-20 lg:w-64 bg-white border-r border-gray-200 flex flex-col flex-none transition-all">
|
||
<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 class="hidden lg:block">
|
||
<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="hidden lg:block 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="issues.html">
|
||
<iconify-icon class="text-xl" icon="lucide:list-todo"></iconify-icon>
|
||
<span class="hidden lg:block 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="hidden lg:block 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="hidden lg:block 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="hidden lg:block 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="agent-management.html">
|
||
<iconify-icon class="text-xl" icon="lucide:bot"></iconify-icon>
|
||
<span class="hidden lg:block font-medium text-sm">Agent管理</span>
|
||
</a>
|
||
</nav>
|
||
</aside>
|
||
<!-- Main Content -->
|
||
<main class="flex-1 flex overflow-hidden">
|
||
<!-- Left: Issue Details (60%) -->
|
||
<div class="w-3/5 flex flex-col border-r border-gray-200 bg-white overflow-hidden">
|
||
<!-- Top bar -->
|
||
<div class="h-16 px-8 border-b border-gray-100 flex items-center justify-between flex-none bg-white z-10">
|
||
<div class="flex items-center gap-4">
|
||
<a class="p-2 hover:bg-gray-50 rounded-lg text-gray-400 hover:text-gray-900 transition-colors"
|
||
href="issues.html">
|
||
<iconify-icon icon="lucide:arrow-left"></iconify-icon>
|
||
</a>
|
||
<div>
|
||
<span class="text-[10px] font-bold text-blue-600 uppercase">ISSUE-2026-089</span>
|
||
<h2 class="text-sm font-bold text-gray-900 leading-tight">UI 适配在大屏幕（4K）下出现布局错位</h2>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<button
|
||
class="px-3 py-1.5 border border-gray-200 rounded-lg text-xs font-bold text-gray-600 hover:bg-gray-50 transition-colors">编辑</button>
|
||
<button
|
||
class="px-3 py-1.5 bg-gray-900 text-white rounded-lg text-xs font-bold hover:bg-black transition-colors">更改状态</button>
|
||
</div>
|
||
</div>
|
||
<!-- Detail Scroll Area -->
|
||
<div class="flex-1 overflow-y-auto p-8 space-y-8">
|
||
<!-- Status Row -->
|
||
<div class="flex items-center gap-6 pb-6 border-b border-gray-50">
|
||
<div>
|
||
<p class="text-[10px] font-bold text-gray-400 uppercase mb-1">当前状态</p>
|
||
<span
|
||
class="px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-xs font-bold border border-blue-100">对应中</span>
|
||
</div>
|
||
<div>
|
||
<p class="text-[10px] font-bold text-gray-400 uppercase mb-1">优先级</p>
|
||
<span
|
||
class="px-3 py-1 bg-red-50 text-red-600 rounded-full text-xs font-bold border border-red-100 text-center">紧急</span>
|
||
</div>
|
||
<div>
|
||
<p class="text-[10px] font-bold text-gray-400 uppercase mb-1">对应者</p>
|
||
<div class="flex items-center gap-2">
|
||
<img alt="Avatar" class="w-5 h-5 rounded-full"
|
||
src="https://modao.cc/agent-py/media/generated_images/2026-06-30/377a3b1a44d74771b013c6d95f8e7be0.jpg" />
|
||
<span class="text-xs font-bold text-gray-700">陈志伟</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-[10px] font-bold text-gray-400 uppercase mb-1">创建日期</p>
|
||
<span class="text-xs font-bold text-gray-700">2026-07-17</span>
|
||
</div>
|
||
</div>
|
||
<!-- Info Grid -->
|
||
<div class="grid grid-cols-2 gap-x-12 gap-y-6 text-sm">
|
||
<div class="space-y-1">
|
||
<label class="text-xs font-bold text-gray-400 uppercase">工程阶段</label>
|
||
<p class="font-medium text-gray-900">结合测试 (IT)</p>
|
||
</div>
|
||
<div class="space-y-1">
|
||
<label class="text-xs font-bold text-gray-400 uppercase">子工程</label>
|
||
<p class="font-medium text-gray-900">用户管理子系统</p>
|
||
</div>
|
||
<div class="space-y-1">
|
||
<label class="text-xs font-bold text-gray-400 uppercase">影响度</label>
|
||
<p class="font-medium text-gray-900">较高 - 影响高分屏用户体验</p>
|
||
</div>
|
||
<div class="space-y-1">
|
||
<label class="text-xs font-bold text-gray-400 uppercase">关联 PGM</label>
|
||
<p class="font-medium text-blue-600 hover:underline cursor-pointer">PGM_AUTH_VIEW_001</p>
|
||
</div>
|
||
</div>
|
||
<!-- Content Area -->
|
||
<div class="space-y-3">
|
||
<label class="text-xs font-bold text-gray-400 uppercase tracking-wider">指摘内容</label>
|
||
<div class="bg-gray-50 rounded-xl p-5 border border-gray-100 leading-relaxed text-gray-800 text-sm">
|
||
在分辨率达到 3840x2160 (4K) 及以上时，侧边栏导航的高度未能撑满全屏，底部的用户信息区域会出现悬浮空隙。同时，主看板的统计卡片在超宽比例下没有自动换行，导致右侧溢出。
|
||
</div>
|
||
</div>
|
||
<!-- Attachments -->
|
||
<div class="space-y-3">
|
||
<div class="flex justify-between items-center">
|
||
<label class="text-xs font-bold text-gray-400 uppercase tracking-wider">附件 (2)</label>
|
||
<button class="text-xs font-bold text-blue-600 hover:text-blue-800">+ 添加附件</button>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div
|
||
class="flex items-center justify-between p-3 border border-gray-100 rounded-xl hover:border-blue-200 transition-colors group">
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-10 h-10 bg-gray-50 rounded-lg flex items-center justify-center text-red-500">
|
||
<iconify-icon class="text-2xl" icon="lucide:file-image"></iconify-icon>
|
||
</div>
|
||
<div class="min-w-0">
|
||
<p class="text-xs font-bold text-gray-900 truncate">bug_screenshot_01.png</p>
|
||
<p class="text-[10px] text-gray-400">2.4 MB</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||
<iconify-icon class="text-gray-400 hover:text-blue-600 cursor-pointer p-1"
|
||
icon="lucide:download"></iconify-icon>
|
||
<iconify-icon class="text-gray-400 hover:text-red-600 cursor-pointer p-1"
|
||
icon="lucide:trash-2"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="flex items-center justify-between p-3 border border-gray-100 rounded-xl hover:border-blue-200 transition-colors group">
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-10 h-10 bg-gray-50 rounded-lg flex items-center justify-center text-blue-500">
|
||
<iconify-icon class="text-2xl" icon="lucide:file-text"></iconify-icon>
|
||
</div>
|
||
<div class="min-w-0">
|
||
<p class="text-xs font-bold text-gray-900 truncate">error_logs.txt</p>
|
||
<p class="text-[10px] text-gray-400">12 KB</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||
<iconify-icon class="text-gray-400 hover:text-blue-600 cursor-pointer p-1"
|
||
icon="lucide:download"></iconify-icon>
|
||
<iconify-icon class="text-gray-400 hover:text-red-600 cursor-pointer p-1"
|
||
icon="lucide:trash-2"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Timeline -->
|
||
<div class="space-y-4">
|
||
<div class="flex justify-between items-center">
|
||
<label class="text-xs font-bold text-gray-400 uppercase tracking-wider">状态流转历史</label>
|
||
<iconify-icon class="text-gray-400 cursor-pointer" icon="lucide:chevron-up"></iconify-icon>
|
||
</div>
|
||
<div class="space-y-4 pl-3 border-l-2 border-gray-100">
|
||
<div class="relative pl-6 pb-2">
|
||
<div
|
||
class="absolute -left-[31px] top-0 w-4 h-4 rounded-full bg-blue-600 border-4 border-white shadow-sm">
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<p class="text-xs font-bold text-gray-900">状态更新：对应中</p>
|
||
<span class="text-[10px] text-gray-400">今天 10:20</span>
|
||
</div>
|
||
<p class="text-xs text-gray-500 mt-1">陈志伟 开始处理此指摘，正在分析 CSS Grid 适配问题。</p>
|
||
</div>
|
||
<div class="relative pl-6">
|
||
<div
|
||
class="absolute -left-[31px] top-0 w-4 h-4 rounded-full bg-gray-300 border-4 border-white shadow-sm">
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<p class="text-xs font-bold text-gray-900">指摘创建</p>
|
||
<span class="text-[10px] text-gray-400">今天 09:45</span>
|
||
</div>
|
||
<p class="text-xs text-gray-500 mt-1">张明亮 通过系统录入了此条指摘。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Right: AI Agent Cockpit (40%) -->
|
||
<div class="w-2/5 flex flex-col bg-[#fcfdfe]">
|
||
<!-- Agent Header -->
|
||
<div class="h-16 px-6 border-b border-gray-200 flex items-center justify-between flex-none bg-white">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
|
||
<iconify-icon class="text-blue-600 text-xl" icon="lucide:bot"></iconify-icon>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-sm font-bold text-gray-900">IMS Agent 驾驶舱</h3>
|
||
<p class="text-[10px] text-green-600 font-bold flex items-center gap-1">
|
||
<span class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span> 在线 · 实时分析中
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<div class="flex items-center gap-2 px-2 py-1 bg-gray-50 rounded-lg">
|
||
<span class="text-[10px] font-bold text-gray-400 uppercase">时间线</span>
|
||
<div class="w-8 h-4 bg-blue-600 rounded-full relative cursor-pointer">
|
||
<div class="absolute right-0.5 top-0.5 w-3 h-3 bg-white rounded-full"></div>
|
||
</div>
|
||
</div>
|
||
<button class="p-2 hover:bg-gray-100 rounded-lg text-gray-400 transition-colors">
|
||
<iconify-icon icon="lucide:settings-2"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- Chat Area -->
|
||
<div class="flex-1 overflow-y-auto p-6 space-y-6 chat-container" id="agentChat">
|
||
<!-- Agent Intro -->
|
||
<div class="flex gap-4">
|
||
<div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center flex-none">
|
||
<iconify-icon class="text-white text-sm" icon="lucide:bot"></iconify-icon>
|
||
</div>
|
||
<div class="bg-white border border-gray-100 rounded-2xl rounded-tl-none p-4 shadow-sm max-w-[90%]">
|
||
<p class="text-sm leading-relaxed text-gray-800">
|
||
你好！我是您的指摘处理助手。我已经分析了这条指摘的内容。它涉及到前端适配问题。
|
||
<br /><br />
|
||
我可以帮您<b>催办担当者</b>、<b>查找知识库中的相似案例</b>，或者<b>根据附件日志自动推断错误原因</b>。您想怎么做？
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- User Message -->
|
||
<div class="flex gap-4 justify-end">
|
||
<div class="bg-blue-600 text-white rounded-2xl rounded-tr-none p-4 shadow-md max-w-[90%]">
|
||
<p class="text-sm">查找知识库中的相似案例，并询问陈志伟是否需要技术支持。</p>
|
||
</div>
|
||
<div
|
||
class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center flex-none border border-white overflow-hidden shadow-sm">
|
||
<img alt="User" class="w-full h-full object-cover"
|
||
src="https://modao.cc/agent-py/media/generated_images/2026-06-26/1e6c3700aaed4eeab622a5493b909edf.jpg" />
|
||
</div>
|
||
</div>
|
||
<!-- AI Thinking Chain -->
|
||
<div class="space-y-4">
|
||
<!-- Thought -->
|
||
<div class="thought-card rounded-xl p-4 shadow-sm">
|
||
<div class="flex items-center gap-2 mb-2">
|
||
<iconify-icon class="text-blue-600" icon="lucide:brain"></iconify-icon>
|
||
<span class="text-xs font-bold text-blue-700 uppercase tracking-wider">[思考]</span>
|
||
</div>
|
||
<p class="text-xs text-blue-900/70 leading-relaxed italic">
|
||
用户要求查找知识库相似案例。我需要调用 `search_knowledge` 工具，关键词为 "4K 适配", "侧边栏高度", "超宽屏 布局错位"。
|
||
同时需要调用 `send_reminder` 工具给担当者陈志伟。
|
||
</p>
|
||
</div>
|
||
<!-- Action -->
|
||
<div class="action-card rounded-xl p-4 shadow-sm">
|
||
<div class="flex items-center gap-2 mb-2">
|
||
<iconify-icon class="text-orange-600" icon="lucide:terminal"></iconify-icon>
|
||
<span class="text-xs font-bold text-orange-700 uppercase tracking-wider">[行动]</span>
|
||
</div>
|
||
<div
|
||
class="mono text-[11px] text-orange-900 bg-orange-100/50 p-3 rounded-lg border border-orange-200">
|
||
call: <span class="font-bold">search_knowledge</span>({ <br />
|
||
query: <span class="text-blue-700">"4K screen layout sidebar bug"</span>, <br />
|
||
project: <span class="text-blue-700">"FRONTEND_CORE"</span> <br />
|
||
})
|
||
</div>
|
||
</div>
|
||
<!-- Observation -->
|
||
<div class="observation-card rounded-xl p-4 shadow-sm">
|
||
<div class="flex items-center gap-2 mb-2">
|
||
<iconify-icon class="text-green-600" icon="lucide:eye"></iconify-icon>
|
||
<span class="text-xs font-bold text-green-700 uppercase tracking-wider">[观察]</span>
|
||
</div>
|
||
<p class="text-xs text-green-900/70 leading-relaxed">
|
||
找到 1 条相似记录：<b>#KB-2025-042</b> "Flex容器在超高分辨率下的 100vh 兼容性修正"。方案：建议使用 `min-h-screen`
|
||
代替固定高度，并开启 `flex-grow`。
|
||
</p>
|
||
</div>
|
||
<!-- Approval Request -->
|
||
<div class="approval-card rounded-xl p-5 shadow-lg">
|
||
<div class="flex items-center gap-2 mb-3">
|
||
<iconify-icon class="text-red-600 text-xl" icon="lucide:shield-alert"></iconify-icon>
|
||
<span class="text-sm font-bold text-red-700">需要您的审批</span>
|
||
</div>
|
||
<p class="text-xs text-gray-700 leading-relaxed mb-4">
|
||
Agent 准备调用 <code
|
||
class="bg-gray-100 px-1 rounded text-red-600 font-bold">send_reminder</code> 给
|
||
<b>陈志伟</b>。
|
||
<br /><br />
|
||
<b>内容：</b> "陈工您好，系统检测到您的 ISSUE-089 与已知案例 #KB-042 相似，推荐方案已发送至您的工作台。如有技术困难，请联系架构组支持。"
|
||
</p>
|
||
<div class="flex gap-2">
|
||
<button
|
||
class="flex-1 bg-red-600 text-white text-xs font-bold py-2 rounded-lg hover:bg-red-700 transition-colors shadow-md shadow-red-100"
|
||
onclick="alert('已批准发送催办')">批准发送</button>
|
||
<button
|
||
class="flex-1 bg-white border border-gray-200 text-gray-600 text-xs font-bold py-2 rounded-lg hover:bg-gray-50 transition-colors">修改建议</button>
|
||
<button
|
||
class="px-3 bg-white border border-gray-200 text-gray-400 rounded-lg hover:bg-gray-50 transition-colors">
|
||
<iconify-icon icon="lucide:x"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Final Response -->
|
||
<div class="flex gap-4">
|
||
<div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center flex-none">
|
||
<iconify-icon class="text-white text-sm" icon="lucide:bot"></iconify-icon>
|
||
</div>
|
||
<div class="bg-white border border-gray-100 rounded-2xl rounded-tl-none p-4 shadow-sm max-w-[90%]">
|
||
<p class="text-sm leading-relaxed text-gray-800">
|
||
知识库检索完成！已为您锁定历史解决方案。我已准备好向陈工发送提醒并提供该方案。请在上方点击“批准”以继续。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Input Area -->
|
||
<div class="p-6 bg-white border-t border-gray-200 flex-none space-y-4">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex gap-4">
|
||
<button
|
||
class="flex items-center gap-1.5 text-xs font-bold text-gray-400 hover:text-blue-600 transition-colors">
|
||
<iconify-icon class="text-lg" icon="lucide:mic"></iconify-icon>
|
||
语音输入
|
||
</button>
|
||
<button
|
||
class="flex items-center gap-1.5 text-xs font-bold text-gray-400 hover:text-blue-600 transition-colors">
|
||
<iconify-icon class="text-lg" icon="lucide:file-text"></iconify-icon>
|
||
选择模板
|
||
</button>
|
||
</div>
|
||
<button
|
||
class="flex items-center gap-1.5 text-xs font-bold text-red-500 hover:text-red-700 transition-colors border border-red-100 px-3 py-1 rounded-full bg-red-50">
|
||
<iconify-icon class="text-lg" icon="lucide:user-cog"></iconify-icon>
|
||
转人工模式
|
||
</button>
|
||
</div>
|
||
<div class="relative group">
|
||
<textarea
|
||
class="w-full bg-gray-50 border border-gray-200 rounded-2xl p-4 pr-16 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all resize-none shadow-inner"
|
||
placeholder="给 Agent 下达指令，如：“将状态改为待确认，并通知验证人员。”" rows="3"></textarea>
|
||
<button
|
||
class="absolute right-3 bottom-3 w-10 h-10 bg-blue-600 text-white rounded-xl flex items-center justify-center hover:bg-blue-700 transition-all shadow-lg shadow-blue-200 active:scale-95 group-focus-within:rotate-12">
|
||
<iconify-icon class="text-xl" icon="lucide:send-horizontal"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-[10px] font-bold text-gray-400 uppercase">Agent 工具可用:</span>
|
||
<div class="flex gap-1">
|
||
<span class="px-2 py-0.5 bg-gray-100 rounded text-[9px] font-bold text-gray-500">知识库查询</span>
|
||
<span class="px-2 py-0.5 bg-gray-100 rounded text-[9px] font-bold text-gray-500">催办通知</span>
|
||
<span class="px-2 py-0.5 bg-gray-100 rounded text-[9px] font-bold text-gray-500">状态流转</span>
|
||
<span class="px-2 py-0.5 bg-gray-100 rounded text-[9px] font-bold text-gray-500">+4</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<script>
|
||
// Simple chat auto-scroll
|
||
const chat = document.getElementById('agentChat');
|
||
chat.scrollTop = chat.scrollHeight;
|
||
|
||
// Toggle Timeline Simulation
|
||
function toggleTimeline() {
|
||
const history = document.getElementById('issueHistory');
|
||
// Mock logic
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |