xianjing-ai/engine/app/static/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>鲜境智能客服</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="/static/styles.css" />
</head>
<body>
  <div class="shell">
    <header class="top">
      <div>
        <p class="brand">鲜境物联</p>
        <h1>方案型智能客服</h1>
      </div>
      <div class="status" id="status">正在检查知识库…</div>
    </header>

    <nav class="tabs">
      <button type="button" class="tab active" data-tab="consult">线上咨询</button>
      <button type="button" class="tab" data-tab="knowledge">知识库</button>
      <button type="button" class="tab" data-tab="leads">留资</button>
    </nav>

    <section id="consult" class="pane active">
      <div class="layout">
        <section class="panel chat">
          <div id="log" class="log" aria-live="polite"></div>
          <form id="form" class="composer">
            <input id="input" type="text" placeholder="描述现场需求，或回答追问" autocomplete="off" required />
            <button type="submit">发送</button>
          </form>
          <div class="toolbar">
            <button type="button" id="reset" class="ghost">新会话</button>
            <span id="meta" class="meta"></span>
          </div>
        </section>
        <aside class="panel side">
          <h2>已收集信息</h2>
          <pre id="slots">{}</pre>
          <h2>方案草稿</h2>
          <pre id="scheme">还没到出方案这一步</pre>
          <h2>转人工留资</h2>
          <form id="handoff" class="stack">
            <input name="name" placeholder="称呼" required />
            <input name="phone" placeholder="电话" required />
            <textarea name="note" rows="2" placeholder="补充说明，可选"></textarea>
            <button type="submit">提交给销售</button>
            <p id="handoff-msg" class="meta"></p>
          </form>
        </aside>
      </div>
    </section>

    <section id="knowledge" class="pane">
      <div class="panel pad">
        <h2>Ragflow 知识库</h2>
        <p class="lede">检索走自托管 Ragflow。控制台可改文档、看召回；这里只看接入状态。示例资料待甲方替换。</p>
        <p><a id="ragflow-link" href="http://127.0.0.1:18080" target="_blank" rel="noreferrer">打开 Ragflow 控制台</a></p>
        <pre id="ragflow-status">加载中</pre>
        <h2>本地语料（灌库来源）</h2>
        <ul id="files"></ul>
      </div>
    </section>

    <section id="leads" class="pane">
      <div class="panel pad">
        <h2>已留资</h2>
        <p class="lede">演示库存在本机 SQLite，不是正式 CRM。</p>
        <div id="lead-list" class="lead-list">暂无</div>
      </div>
    </section>
  </div>
  <script src="/static/app.js"></script>
</body>
</html>