139 lines
6.8 KiB
HTML
139 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ccSparkle Agent · 智能体中台</title>
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%9A%87%3C/text%3E%3C/svg%3E">
|
||
<link rel="stylesheet" href="styles.css?v=20260723-think-h72">
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar">
|
||
<div class="navbar-brand">
|
||
<!--<img src="assets/logo.png" alt="ccSparkle Logo" class="navbar-logo">不让用集团logo，后续可以自行去除-->
|
||
<h1 class="navbar-title">ccSparkle Agent<span class="navbar-subtitle">智能体中台</span></h1>
|
||
</div>
|
||
|
||
<div class="navbar-status">
|
||
<div class="metrics-badges" id="metrics-badges">
|
||
<span class="badge badge-model" id="badge-model" title="模型状态">未加载</span>
|
||
<span class="badge badge-cache" id="badge-cache" title="Prompt 缓存命中率" style="display:none">命中 -</span>
|
||
<span class="badge badge-tokens" id="badge-tokens" title="Token 速率" style="display:none">速率 - tok/s</span>
|
||
<span class="badge badge-mem" id="badge-mem" title="统一内存" style="display:none">内存/显存 - / - GB</span>
|
||
<span class="badge badge-cpu" id="badge-cpu" title="CPU 使用率" style="display:none">CPU - %</span>
|
||
</div>
|
||
|
||
<button class="btn-clear" id="btn-clear" type="button" title="清空对话">清空</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主体:左侧 sidebar + 右侧 chat -->
|
||
<div class="app-body">
|
||
<!-- 左侧控制面板 -->
|
||
<aside class="sidebar" id="sidebar">
|
||
<div class="sidebar-header">
|
||
<span class="sidebar-title">控制台</span>
|
||
<button class="sidebar-toggle" id="sidebar-toggle" type="button" title="折叠/展开">≪</button>
|
||
</div>
|
||
|
||
<div class="sidebar-body">
|
||
<!-- 模型源 -->
|
||
<div class="sidebar-section">
|
||
<div class="sidebar-section-title">
|
||
模型源
|
||
<span class="title-actions">
|
||
<button class="think-btn" id="btn-thinking-toggle" type="button" title="显示模型思考过程(默认关)">思考</button>
|
||
<button class="think-btn" id="btn-model-config" type="button" title="配置">配置</button>
|
||
</span>
|
||
</div>
|
||
<div class="source-toggle">
|
||
<button class="source-btn active" data-source="ollama" type="button">Ollama</button>
|
||
<button class="source-btn" data-source="omlx" type="button">oMLX</button>
|
||
<button class="source-btn" data-source="sparkle" type="button">Sparkle</button>
|
||
<button class="source-btn" data-source="anthropic" type="button">云端 API</button>
|
||
</div>
|
||
<div class="source-info" id="source-info">-</div>
|
||
</div>
|
||
|
||
<!-- 子系统(可折叠,含工具列表) -->
|
||
<div class="sidebar-section subsystems-section">
|
||
<div class="sidebar-section-title sidebar-collapsible-title" id="subsystems-title">
|
||
<span>子系统 <span class="subsystem-summary" id="subsystem-summary">0/5</span></span>
|
||
<button class="collapse-btn" type="button" title="折叠/展开">▼</button>
|
||
</div>
|
||
<div class="subsystems-list" id="subsystems-list">
|
||
<!-- 子系统卡片由 sidebar.js 动态渲染 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 预设场景(用户自定义,可折叠) -->
|
||
<div class="sidebar-section presets-section section-collapsed">
|
||
<div class="sidebar-section-title sidebar-collapsible-title" id="presets-title">
|
||
<span>预设场景</span>
|
||
<button class="collapse-btn" type="button" title="折叠/展开">▶</button>
|
||
</div>
|
||
<div class="presets-body" id="presets-body">
|
||
<div class="presets-actions">
|
||
<button class="config-btn" id="btn-save-preset" type="button" title="保存当前勾选为预设">+</button>
|
||
<button class="restore-default-btn" id="btn-restore-presets" type="button" title="恢复默认预设">恢复默认</button>
|
||
</div>
|
||
<div class="custom-presets" id="custom-presets">
|
||
<div class="preset-empty">勾选工具后点 + 保存</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 审计日志(点击打开弹窗) -->
|
||
<div class="sidebar-section">
|
||
<button class="audit-open-btn" id="btn-open-audit" type="button">
|
||
<div class="audit-open-text">
|
||
<div class="audit-open-title">审计日志</div>
|
||
<div class="audit-open-sub"><span id="audit-count">0</span> 条操作记录</div>
|
||
</div>
|
||
<span class="audit-open-arrow">›</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 脱敏会话状态(占位符协议 v3.1 TTL,纯底部状态文字,不随滚动) -->
|
||
<div class="masking-status" id="masking-status" title="点击重新更新映射表(历史将变密文)">
|
||
<span class="masking-status-dot" id="masking-status-dot">⚪</span>
|
||
<span class="masking-status-text" id="masking-status-text">脱敏:未启用</span>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 右侧聊天 -->
|
||
<main class="chat-area">
|
||
<div class="messages" id="messages">
|
||
<div class="empty-hint" id="empty-hint">
|
||
<img src="assets/logo.png" class="empty-logo" alt="ccSparkle">
|
||
<div class="empty-title">ccSparkle Agent · 智能体中台</div>
|
||
<div class="empty-sub">基于 MCP 协议的地铁乘务智能助手</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="input-area">
|
||
<div class="input-row">
|
||
<textarea id="input" class="input" rows="1" placeholder="对 ccSparkle Agent 说点什么... (Enter 发送,Shift+Enter 换行)"></textarea>
|
||
<button id="send" class="btn-send" type="button" title="发送 (Enter)" aria-label="发送">
|
||
<svg class="icon-send" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M22 2L11 13"/>
|
||
<path d="M22 2L15 22L11 13L2 9L22 2Z"/>
|
||
</svg>
|
||
<svg class="icon-stop" viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true">
|
||
<rect x="6" y="6" width="12" height="12" rx="1.5"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="input-hint" id="input-hint">就绪</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="module" src="app.js?v=20260720-stop-icon"></script>
|
||
</body>
|
||
</html>
|