butubb/auto_control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: AI 控制台升级为顶级 Tab——DeepSeek 风格聊天界面（气泡+流式渲染+思考折叠），实时 MCP 步骤卡片（工具/参数/截图缩略），SSE 流式输出（delta/step/done/error 事件），配置模态（模型/Key/设备前端可配）；工具页旧子栏移除

Browse Source
This commit is contained in:
butubb
2026-09-04 13:09:34 +08:00
parent 25ef7e7746
commit e24458a085
6 changed files with 442 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/admin/monitor.html
+63 -31
View File
@@ -303,6 +303,27 @@ body{background:var(--bg);font-family:var(--body);color:var(--text);font-size:14
.el-picker-item .ep-info .ep-attrs{color:var(--text-light);font-size:11px;margin-top:2px;word-break:break-all}
.el-picker-item .ep-info .ep-attrs span{margin-right:8px}
.el-picker-item .ep-sel{font-size:10px;color:#fff;background:var(--primary);padding:1px 7px;border-radius:99px;flex-shrink:0;font-weight:600}
/* ===== AI 控制台（聊天界面） ===== */
.agent-shell{display:flex;flex-direction:column;height:calc(100vh - 150px);min-height:480px;border:1px solid var(--card-line);border-radius:14px;overflow:hidden;background:#0d1117}
.agent-topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--ink-line);background:#11151c}
.agent-title{font-size:14px;font-weight:700}
.agent-model-tag{margin-left:8px;font-size:11px;color:var(--teal);font-family:var(--mono);background:rgba(45,212,191,.08);padding:2px 8px;border-radius:10px}
.agent-running-tag{color:#f87171;font-size:12px;margin-right:8px}
.agent-top-actions{display:flex;align-items:center;gap:6px}
.agent-chat{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.agent-msg{max-width:78%;padding:10px 14px;border-radius:12px;font-size:13.5px;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.agent-msg.user{align-self:flex-end;background:#155e63;color:#e6fffb;border-bottom-right-radius:3px}
.agent-msg.assistant{align-self:flex-start;background:#161c26;border:1px solid var(--card-line);border-bottom-left-radius:3px;color:var(--text)}
.agent-msg .reasoning{color:#8b95a7;font-size:12.5px;border-left:2px solid #2b3441;padding-left:8px;margin:6px 0}
.agent-toolcards{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.agent-toolcard{display:flex;align-items:center;gap:8px;background:#0d1117;border:1px solid #232936;border-radius:8px;padding:5px 10px;font-size:12px;font-family:var(--mono);flex-wrap:wrap}
.agent-toolcard .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none}
.agent-toolcard img{max-width:130px;border-radius:6px;margin-top:3px}
.agent-inputbar{display:flex;gap:10px;padding:12px 14px;border-top:1px solid var(--ink-line);background:#11151c}
.agent-inputbar textarea{flex:1;resize:none;background:#0d1117;border:1px solid var(--card-line);border-radius:10px;padding:9px 12px;color:var(--text);font-size:13.5px;outline:none;line-height:1.5}
.agent-inputbar textarea:focus{border-color:var(--teal)}
.agent-empty{color:#4b5563;font-size:13px;text-align:center;padding:40px 0}
</style>
</head>
<body>
@@ -316,6 +337,7 @@ body{background:var(--bg);font-family:var(--body);color:var(--text);font-size:14
<button class="tab" data-tab="logs" onclick="showTab('logs')" data-perm="logs">日志</button>
<button class="tab" data-tab="users" onclick="showTab('users')" data-perm="admin">用户</button>
<button class="tab" data-tab="tools" onclick="showTab('tools')" data-perm="admin">工具</button>
<button class="tab" data-tab="agent" onclick="showTab('agent')" data-perm="admin">AI 控制台</button>
</div>
<div class="user-info">
<span id="me-username">...</span>
@@ -422,6 +444,45 @@ body{background:var(--bg);font-family:var(--body);color:var(--text);font-size:14
</div>
<!-- ========== Tab 3: 分组 ========== -->
<!-- ========== Tab: AI 控制台（DeepSeek 风格聊天 + 实时 MCP 步骤） ========== -->
<div id="tab-agent" class="tab-panel">
<div class="agent-shell">
<div class="agent-topbar">
<div class="agent-title">🤖 AI 控制台<span id="agent-model-tag" class="agent-model-tag"></span></div>
<div class="agent-top-actions">
<span id="agent-running-tag" class="agent-running-tag" style="display:none">● 运行中</span>
<button class="btn btn-xs" onclick="clearAgentChat()">清空对话</button>
<button class="btn btn-xs" onclick="openAgentConfig()">⚙ 配置</button>
</div>
</div>
<div id="agent-chat" class="agent-chat"></div>
<div class="agent-inputbar">
<textarea id="agent-input" rows="2"
placeholder="给 AI 下达指令，例如：打开抖音搜索奚学东，把第一个视频标题告诉我…（Enter 发送，Shift+Enter 换行）"></textarea>
<button class="btn btn-primary" id="btn-agent-send" onclick="sendAgentMsg()">发送</button>
</div>
</div>
</div>
<!-- ========== 配置模态框 ========== -->
<div id="agent-cfg-overlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1300;align-items:center;justify-content:center">
<div style="background:#11151c;border:1px solid var(--card-line);border-radius:14px;padding:22px;width:460px;max-width:92vw">
<div style="font-size:15px;font-weight:700;margin-bottom:14px">模型配置（OpenAI 兼容 API）</div>
<div class="form-group"><label>API Base</label>
<input type="text" id="acfg-base" class="form-control" placeholder="https://api.deepseek.com" style="font-family:monospace"></div>
<div class="form-group"><label>模型名</label>
<input type="text" id="acfg-model" class="form-control" placeholder="deepseek-v4-flash-vision-exp"></div>
<div class="form-group"><label>API Key <span class="text-muted" id="acfg-key-hint"></span></label>
<input type="password" id="acfg-key" class="form-control" placeholder="留空则不修改"></div>
<div class="form-group"><label>默认设备 serial（可选）</label>
<input type="text" id="acfg-serial" class="form-control" placeholder="192.168.20.66:5555" style="font-family:monospace"></div>
<div style="display:flex;justify-content:flex-end;gap:8px;margin-top:6px">
<button class="btn" onclick="closeAgentConfig()">取消</button>
<button class="btn btn-primary" onclick="saveAgentConfig()">保存</button>
</div>
</div>
</div>
<!-- ========== Tab 4: 日志 ========== -->
<div id="tab-logs" class="tab-panel">
<div class="page-title">日志查看</div>
@@ -480,7 +541,6 @@ body{background:var(--bg);font-family:var(--body);color:var(--text);font-size:14
<button class="sub-tab" data-sub="devapps" onclick="showSubTab('tools','devapps')">设备已装应用</button>
<button class="sub-tab" data-sub="devpool" onclick="showSubTab('tools','devpool')">设备池管理</button>
<button class="sub-tab" data-sub="groups" onclick="showSubTab('tools','groups')">设备分组</button>
<button class="sub-tab" data-sub="agent" onclick="showSubTab('tools','agent')">AI 控制台</button>
</div>
<!-- 子分栏 1：剪贴板注入 -->
@@ -703,36 +763,7 @@ body{background:var(--bg);font-family:var(--body);color:var(--text);font-size:14
<div class="help">管理设备分组，用于任务按分组执行。分组内的设备需先在<b>设备池管理</b>中确认（不在池内的设备不参与调度）。</div>
</div>
<!-- 子分栏：AI 控制台（第三方模型经 Agent 控制手机） -->
<div class="sub-panel" id="tools-sub-agent">
<details style="margin-bottom:10px">
<summary style="cursor:pointer;color:var(--muted)">⚙ 模型配置（OpenAI 兼容 API）</summary>
<div style="padding:10px 0 4px;display:flex;flex-wrap:wrap;gap:8px;align-items:center">
<input type="text" id="agent-api-base" class="form-control" style="width:260px;font-family:monospace"
placeholder="API Base，如 https://api.deepseek.com">
<input type="text" id="agent-model" class="form-control" style="width:220px"
placeholder="模型名，如 deepseek-v4-flash-vision-exp">
<input type="password" id="agent-api-key" class="form-control" style="width:260px"
placeholder="API Key（留空不改）">
<input type="text" id="agent-default-serial" class="form-control" style="width:220px;font-family:monospace"
placeholder="默认设备 serial（可选）">
<button class="btn btn-primary" onclick="saveAgentConfig()">保存配置</button>
<span id="agent-key-hint" class="text-muted"></span>
</div>
</details>
<div class="toolbar" style="flex-wrap:wrap">
<textarea id="agent-prompt" class="form-control" rows="2" style="flex:1;min-width:300px"
placeholder="指令：如「打开抖音搜索奚学东，截个图描述结果」"></textarea>
<button class="btn btn-primary" id="btn-agent-run" onclick="runAgent()">▶ 执行</button>
<span id="agent-status" class="text-muted"></span>
</div>
<div id="agent-steps" style="margin-top:10px"></div>
<div id="agent-answer-wrap" style="display:none;margin-top:12px">
<div class="section-title">回答</div>
<div id="agent-answer" style="white-space:pre-wrap;line-height:1.7;background:#0d1117;border:1px solid var(--card-line);border-radius:10px;padding:12px"></div>
</div>
<div class="help">AI 通过截图观察屏幕并执行操作（元素定位优先，坐标兜底）。模型与 Key 配置保存在平台（管理员可见），请勿填他人密钥。</div>
</div>
</div>
@@ -798,5 +829,6 @@ body{background:var(--bg);font-family:var(--body);color:var(--text);font-size:14
<script src="/static/admin/tools.js"></script>
<script src="/static/admin/apps.js"></script>
<script src="/static/admin/admin.js"></script>
<script src="/static/admin/agent.js"></script>
</body>
</html>