huangyang
/
smqjh-agent


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
							<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>市民请集合智能助手 Web 测试版</title>
    <link rel="stylesheet" href="/styles.css?v=wabi-sabi-2" />
  </head>
  <body>
    <div class="paper-grain"></div>
    <header class="top-nav">
      <div class="brand">
        <img src="/assets/logo.png" alt="" />
        <div>
          <strong>市民请集合</strong>
          <span>Python LangGraph Agent</span>
        </div>
      </div>
      <nav class="nav">
        <button class="nav-item active" type="button">对话</button>
        <button class="nav-item" type="button" data-scroll-tools>工具</button>
        <button class="nav-item" type="button" data-scroll-trace>轨迹</button>
      </nav>
      <div class="session-card">
        <span class="status-dot" id="statusDot"></span>
        <div>
          <strong id="sessionStatus">检查中</strong>
          <span id="mcpStatus">MCP 连接检测中</span>
        </div>
      </div>
    </header>

    <main class="shell">
      <section class="hero">
        <div class="hero-copy">
          <span class="eyebrow">静默业务智能体</span>
          <h1>市民请集合智能助手</h1>
          <p>以 Python + LangGraph 编排后台业务 Agent。通过 MCP 调用 DeepSeek、只读数据库和 smqjh 业务工具，把管理员的问题整理成结论、依据与表格。</p>
          <div class="hero-actions">
            <button id="refreshBtn" class="chrome-button" type="button" title="刷新状态">刷新状态</button>
            <span class="system-pill">MCP · 只读数据库 · DeepSeek</span>
          </div>
        </div>
        <div class="hero-panel" aria-hidden="true">
          <div class="seal-mark">
            <img src="/assets/logo.png" alt="" />
          </div>
          <div class="brush-line"></div>
          <div class="mini-display">
            <span>运行中</span>
            <strong>可用</strong>
          </div>
        </div>
      </section>

      <section class="feature-strip" aria-label="Agent capabilities">
        <article class="feature-card">
          <strong>智能查询</strong>
          <p>商品、订单、会员、物流与经营数据自动判断工具。</p>
        </article>
        <article class="feature-card">
          <strong>只读安全</strong>
          <p>数据库查询走 MCP 白名单和 SELECT 校验。</p>
        </article>
        <article class="feature-card">
          <strong>表格输出</strong>
          <p>结构化 rows/columns 直接渲染，可下载 CSV。</p>
        </article>
        <article class="feature-card">
          <strong>月结扩展</strong>
          <p>企业月结、核对、人工确认流程继续接入。</p>
        </article>
      </section>

      <section class="workspace">
        <section class="chat-card retro-window">
          <div class="window-bar">
            <span></span>
            <strong>业务对话室</strong>
          </div>
          <div id="messages" class="messages"></div>
          <form id="chatForm" class="composer">
            <textarea
              id="messageInput"
              rows="3"
              placeholder="输入管理员想完成的操作，例如：当前百事可乐 500ml 的商品描述是什么，或生成铜仁移动 2026-05 月结报告"
            ></textarea>
            <div class="composer-footer">
              <span id="inputCount">0 字</span>
              <button id="sendBtn" class="send-button" type="submit">
                <span class="send-icon">↗</span>
                <span class="send-text">发送</span>
              </button>
            </div>
          </form>
        </section>

        <aside class="inspector">
          <section class="panel player-panel">
            <div class="panel-title">
              <h2>执行上下文</h2>
            </div>
            <div class="player-screen">
              <span>Runtime</span>
              <strong>Python + LangGraph</strong>
            </div>
            <dl class="kv">
              <div><dt>运行模式</dt><dd>Web 测试</dd></div>
              <div><dt>框架</dt><dd>Python + LangGraph</dd></div>
              <div><dt>MCP</dt><dd id="mcpEndpoint">-</dd></div>
              <div><dt>工具</dt><dd id="toolCount">-</dd></div>
            </dl>
          </section>
          <section class="panel" id="toolsPanel">
            <div class="panel-title">
              <h2>可用工具</h2>
            </div>
            <div id="toolList" class="tool-list"></div>
          </section>
          <section class="panel" id="tracePanel">
            <div class="panel-title">
              <h2>执行轨迹</h2>
            </div>
            <div id="traceList" class="trace-list"></div>
          </section>
        </aside>
      </section>
    </main>

    <script src="/app.js" type="module"></script>
  </body>
</html>