chat.html 27.4 KB

Edit Raw Blame History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小羚羊 AI 助手</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.1/markdown-it.min.js"></script>
<style>
:root {
    --bg: #f7f7f8;
    --panel: #ffffff;
    --border: #e5e5e7;
    --text: #1d1d1f;
    --text2: #6e6e73;
    --accent: #0a7d50;
    --accent-weak: #e6f4ee;
    --danger: #c0392b;
    --radius: 10px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font: 14px/1.6 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--text);
    background: var(--bg);
    display: flex;
    overflow: hidden;
}

/* ---------- 侧栏 ---------- */
#sidebar {
    width: 250px;
    min-width: 250px;
    background: var(--panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transition: margin-left .2s ease;
}
#sidebar.hidden { margin-left: -250px; }
#sidebar .side-head {
    padding: 14px 14px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#sidebar .side-head .brand { font-size: 15px; font-weight: 600; }
#newConvBtn {
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 8px;
    padding: 4px 10px;
    cursor: pointer;
    color: var(--accent);
}
#newConvBtn:hover { background: var(--accent-weak); }
#convList { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
.conv-item {
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text2);
}
.conv-item:hover { background: var(--bg); }
.conv-item.active { background: var(--accent-weak); color: var(--text); }
.conv-item .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item .del { visibility: hidden; border: 0; background: none; cursor: pointer; color: var(--text2); }
.conv-item:hover .del { visibility: visible; }

/* ---------- 主区 ---------- */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#topbar {
    height: 52px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
}
#toggleSide {
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: var(--text2);
}
#topbar .title { font-weight: 600; }
#topbar .sub { color: var(--text2); font-size: 12px; }

#scroll { flex: 1; overflow-y: auto; }
#messages { max-width: 860px; margin: 0 auto; padding: 24px 20px 12px; }

.msg { display: flex; margin-bottom: 18px; }
.msg.user { justify-content: flex-end; }
.bubble {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: var(--radius);
    word-break: break-word;
}
.msg.user .bubble { background: var(--accent); color: #fff; white-space: pre-wrap; }
.msg.ai .bubble { background: var(--panel); border: 1px solid var(--border); }
.msg.ai .bubble.thinking { color: var(--text2); }

/* markdown 内容 */
.bubble p { margin: 4px 0; }
.bubble h1, .bubble h2, .bubble h3 { margin: 8px 0 4px; font-size: 15px; }
.bubble ul, .bubble ol { padding-left: 20px; margin: 4px 0; }
.bubble code { background: var(--bg); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.bubble pre { background: var(--bg); padding: 10px; border-radius: 8px; overflow-x: auto; margin: 6px 0; }
.bubble table { border-collapse: collapse; margin: 8px 0; max-width: 100%; display: block; overflow-x: auto; }
.bubble th, .bubble td { border: 1px solid var(--border); padding: 5px 10px; white-space: nowrap; }
.bubble th { background: var(--bg); }

/* 卡片（提议 / 表单 / 追问）*/
.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin: 0 0 18px;
    max-width: 82%;
}
.card .card-title { font-weight: 600; margin-bottom: 8px; }
.card .muted { color: var(--text2); font-size: 13px; }
.btn {
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 8px;
    padding: 6px 16px;
    cursor: pointer;
    font-size: 14px;
}
.btn:hover { background: var(--bg); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: default; }
.card .actions { display: flex; gap: 10px; margin-top: 10px; }
.card .result { margin-top: 10px; font-size: 13px; }
.card .result.ok { color: var(--accent); }
.card .result.bad { color: var(--danger); }

/* 追问选项片 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip {
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 16px;
    padding: 5px 14px;
    cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip-free { display: flex; gap: 6px; margin-top: 10px; }
.chip-free input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 14px;
}

/* collectForm 表单 */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px 16px;
    margin-top: 10px;
}
.ffield label { display: block; font-size: 12px; color: var(--text2); margin-bottom: 3px; }
.ffield label .req { color: var(--danger); margin-left: 2px; }
.ffield input, .ffield select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 14px;
    background: var(--panel);
}
.ffield input:focus, .ffield select:focus { outline: none; border-color: var(--accent); }
.ffield .fkrow { display: flex; gap: 6px; }
.ffield .fkrow input { flex: 1; background: var(--bg); }
.ffield .hint { font-size: 12px; color: var(--text2); margin-top: 2px; }

/* 输入区 */
#inputbar { background: var(--bg); padding: 8px 20px 16px; }
#inputbox {
    max-width: 860px;
    margin: 0 auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    align-items: flex-end;
    padding: 8px 10px;
    gap: 8px;
}
#inputbox:focus-within { border-color: var(--accent); }
#messageInput {
    flex: 1;
    border: 0;
    resize: none;
    font: inherit;
    max-height: 140px;
    outline: none;
    background: transparent;
}
#sendBtn {
    border: 0;
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    padding: 7px 18px;
    cursor: pointer;
    font-size: 14px;
}
#sendBtn:disabled { opacity: .5; cursor: default; }

/* FK 选择器弹层 */
#modalMask {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
}
#modalMask.show { display: flex; }
#fkModal {
    background: var(--panel);
    border-radius: 12px;
    width: min(720px, 92vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
#fkModal .m-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}
#fkModal .m-head .m-title { font-weight: 600; flex: 1; }
#fkSearch {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    width: 220px;
    font-size: 14px;
}
#fkClose { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--text2); }
#fkBody { flex: 1; overflow: auto; padding: 0 16px; }
#fkBody table { width: 100%; border-collapse: collapse; }
#fkBody th, #fkBody td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
#fkBody th { position: sticky; top: 0; background: var(--panel); color: var(--text2); font-weight: 500; }
#fkBody tbody tr { cursor: pointer; }
#fkBody tbody tr:hover { background: var(--accent-weak); }
#fkModal .m-foot {
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: var(--text2);
    font-size: 13px;
}
#fkModal .m-foot button { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); cursor: pointer; }
#fkModal .m-foot button:disabled { opacity: .4; cursor: default; }

/* 提示条 */
#toast {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    display: none;
    z-index: 99;
}
</style>
</head>
<body>

<aside id="sidebar">
    <div class="side-head">
        <span class="brand">小羚羊 AI</span>
        <button id="newConvBtn" title="新会话">＋ 新会话</button>
    </div>
    <div id="convList"></div>
</aside>

<div id="main">
    <div id="topbar">
        <button id="toggleSide" title="收起/展开会话栏">☰</button>
        <span class="title">小羚羊印刷 ERP 智能助手</span>
        <span class="sub" id="convTitle"></span>
    </div>
    <div id="scroll">
        <div id="messages"></div>
    </div>
    <div id="inputbar">
        <div id="inputbox">
            <textarea id="messageInput" rows="1" placeholder="输入消息，如：查一下这个月的报价单 / 给必胜客报价5000个纸盒…"></textarea>
            <button id="sendBtn">发送</button>
        </div>
    </div>
</div>

<div id="modalMask">
    <div id="fkModal">
        <div class="m-head">
            <span class="m-title" id="fkTitle">选择</span>
            <input id="fkSearch" placeholder="输入名称搜索…">
            <button id="fkClose" title="关闭">✕</button>
        </div>
        <div id="fkBody"></div>
        <div class="m-foot">
            <span id="fkPageInfo"></span>
            <button id="fkPrev">‹</button>
            <button id="fkNext">›</button>
        </div>
    </div>
</div>

<div id="toast"></div>

<script>
/* ================= 身份（生产环境由 ERP 外壳注入真实值 + 用户 token；token 绝不进 prompt） ================= */
let userid = "17522967560005776104370282597000";
let brandsid = "1111111111";
let subsidiaryid = "1111111111";
let usertype = "sysadmin";
let authorization = ""; // 本地留空 → 后端回退 dev-login；生产注入用户实时 ERP token
const BASE = window.location.origin + "/xlyAi";

const md = window.markdownit({ html: false, linkify: true, breaks: true });

let conversationId = null;
let sending = false;

const $ = (sel) => document.querySelector(sel);
const messagesEl = $("#messages");
const scrollEl = $("#scroll");

function toast(msg) {
    const t = $("#toast");
    t.textContent = msg;
    t.style.display = "block";
    clearTimeout(t._h);
    t._h = setTimeout(() => { t.style.display = "none"; }, 2600);
}

function scrollBottom() {
    scrollEl.scrollTop = scrollEl.scrollHeight;
}

function el(tag, cls, text) {
    const e = document.createElement(tag);
    if (cls) e.className = cls;
    if (text !== undefined) e.textContent = text;
    return e;
}

/* ================= 消息渲染 ================= */
function addUserMsg(text) {
    const row = el("div", "msg user");
    row.appendChild(el("div", "bubble", text));
    messagesEl.appendChild(row);
    scrollBottom();
}

function addAiBubble() {
    const row = el("div", "msg ai");
    const b = el("div", "bubble thinking", "…");
    row.appendChild(b);
    messagesEl.appendChild(row);
    scrollBottom();
    return b;
}

function renderMd(bubble, text) {
    bubble.classList.remove("thinking");
    bubble.innerHTML = md.render(text || "");
}

function addAiMd(text) {
    const b = addAiBubble();
    renderMd(b, text);
    return b;
}

/* ================= 会话管理 ================= */
async function loadConvs() {
    try {
        const r = await fetch(BASE + "/api/agent/conversations?userid=" + encodeURIComponent(userid));
        const list = await r.json();
        const box = $("#convList");
        box.innerHTML = "";
        list.forEach(c => {
            const item = el("div", "conv-item" + (c.id === conversationId ? " active" : ""));
            const t = el("span", "t", c.title || "新会话");
            const del = el("button", "del", "✕");
            del.title = "删除会话";
            del.onclick = async (e) => {
                e.stopPropagation();
                await fetch(BASE + "/api/agent/conversations/" + encodeURIComponent(c.id) + "?userid=" + encodeURIComponent(userid), { method: "DELETE" });
                if (c.id === conversationId) newConv();
                loadConvs();
            };
            item.appendChild(t);
            item.appendChild(del);
            item.onclick = () => switchConv(c.id, c.title);
            box.appendChild(item);
        });
    } catch (e) { /* 静默：侧栏失败不影响聊天 */ }
}

async function newConv() {
    try {
        const r = await fetch(BASE + "/api/agent/conversations", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ userid: userid })
        });
        conversationId = (await r.json()).conversationId;
    } catch (e) {
        conversationId = "c-" + Date.now() + "-" + Math.random().toString(36).slice(2, 8);
    }
    $("#convTitle").textContent = "";
    messagesEl.innerHTML = "";
    addAiMd("你好，我是小羚羊 AI 助手。可以帮你查询业务数据、新建报价、修改/作废/审核单据。");
    loadConvs();
}

async function switchConv(id, title) {
    conversationId = id;
    $("#convTitle").textContent = title || "";
    messagesEl.innerHTML = "";
    try {
        const r = await fetch(BASE + "/api/agent/conversations/" + encodeURIComponent(id) + "/messages");
        const hist = await r.json();
        hist.forEach(m => {
            if (m.role === "user") addUserMsg(m.content);
            else addAiMd(m.content);
        });
    } catch (e) { }
    loadConvs();
    scrollBottom();
}

/* ================= 发送 & SSE ================= */
async function sendMessage(text) {
    text = (text || "").trim();
    if (!text || sending) return;
    sending = true;
    $("#sendBtn").disabled = true;
    addUserMsg(text);
    const bubble = addAiBubble();
    let buf = "";
    try {
        const resp = await fetch(BASE + "/api/agent/chat", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
                text: text,
                userid: userid,
                conversationId: conversationId,
                authorization: authorization,
                brandsid: brandsid,
                subsidiaryid: subsidiaryid,
                usertype: usertype
            })
        });
        const reader = resp.body.getReader();
        const dec = new TextDecoder();
        let pending = "";
        for (;;) {
            const { done, value } = await reader.read();
            if (done) break;
            pending += dec.decode(value, { stream: true });
            let idx;
            while ((idx = pending.indexOf("\n\n")) >= 0) {
                const frame = pending.slice(0, idx);
                pending = pending.slice(idx + 2);
                const line = frame.split("\n").find(l => l.startsWith("data:"));
                if (!line) continue;
                let ev;
                try { ev = JSON.parse(line.slice(5)); } catch (e) { continue; }
                buf = handleEvent(ev, bubble, buf);
            }
        }
    } catch (e) {
        renderMd(bubble, "⚠️ 连接失败：" + e.message);
    }
    if (bubble.classList.contains("thinking")) {
        bubble.closest(".msg").remove(); // 本轮只有卡片/表单，无正文
    }
    sending = false;
    $("#sendBtn").disabled = false;
    loadConvs(); // 刷新标题
}

function handleEvent(ev, bubble, buf) {
    switch (ev.type) {
        case "token":
            buf += ev.content || "";
            renderMd(bubble, buf);
            scrollBottom();
            return buf;
        case "reset":
            renderMd(bubble, "");
            bubble.classList.add("thinking");
            bubble.textContent = "…";
            return "";
        case "write_proposal":
            addProposalCard(ev.opId, ev.summary);
            return buf;
        case "question":
            addQuestionCard(ev.question, ev.options || [], ev.allowFree !== false);
            return buf;
        case "form_collect":
            addFormCard(ev);
            return buf;
        case "error":
            renderMd(bubble, (buf ? buf + "\n\n" : "") + "⚠️ " + (ev.content || "服务异常"));
            return buf;
        case "done":
        default:
            return buf;
    }
}

/* ================= 写提议卡 ================= */
function addProposalCard(opId, summary) {
    const card = el("div", "card");
    card.appendChild(el("div", "card-title", "待确认操作"));
    card.appendChild(el("div", "muted", summary || ""));
    const actions = el("div", "actions");
    const ok = el("button", "btn primary", "确认执行");
    const no = el("button", "btn", "取消");
    actions.appendChild(ok);
    actions.appendChild(no);
    card.appendChild(actions);
    const result = el("div", "result");
    card.appendChild(result);
    messagesEl.appendChild(card);
    scrollBottom();

    const finish = (cls, text) => {
        ok.disabled = no.disabled = true;
        result.className = "result " + cls;
        result.textContent = text;
        scrollBottom();
    };
    ok.onclick = async () => {
        ok.disabled = no.disabled = true;
        try {
            const r = await fetch(BASE + "/api/agent/op/" + encodeURIComponent(opId) + "/confirm",
                { method: "POST", headers: { "Authorization": authorization } });
            const d = await r.json();
            finish(d.status === "executed" ? "ok" : "bad", d.msg || d.status);
        } catch (e) {
            finish("bad", "执行请求失败：" + e.message);
        }
    };
    no.onclick = async () => {
        ok.disabled = no.disabled = true;
        try {
            await fetch(BASE + "/api/agent/op/" + encodeURIComponent(opId) + "/cancel", { method: "POST" });
        } catch (e) { }
        finish("bad", "已取消");
    };
}

/* ================= askUser 追问卡（选项片 + 永远保留自由输入） ================= */
function addQuestionCard(question, options, allowFree) {
    const card = el("div", "card");
    card.appendChild(el("div", "card-title", question || "请补充信息"));
    const chips = el("div", "chips");
    options.forEach(o => {
        const c = el("button", "chip", o);
        c.onclick = () => { card.remove(); sendMessage(o); };
        chips.appendChild(c);
    });
    if (options.length) card.appendChild(chips);
    if (allowFree) {
        const free = el("div", "chip-free");
        const inp = el("input");
        inp.placeholder = options.length ? "或输入其他答案…" : "输入你的回答…";
        const go = el("button", "btn", "回复");
        const submit = () => {
            const v = inp.value.trim();
            if (!v) return;
            card.remove();
            sendMessage(v);
        };
        go.onclick = submit;
        inp.onkeydown = (e) => { if (e.key === "Enter") submit(); };
        free.appendChild(inp);
        free.appendChild(go);
        card.appendChild(free);
    }
    messagesEl.appendChild(card);
    scrollBottom();
}

/* ================= collectForm 表单卡 ================= */
function addFormCard(ev) {
    const card = el("div", "card");
    card.appendChild(el("div", "card-title", ev.title || ("新建" + (ev.entity || ""))));
    if (ev.message) card.appendChild(el("div", "muted", ev.message));
    const grid = el("div", "form-grid");
    const controls = []; // {label, required, get()}

    (ev.fields || []).forEach(f => {
        const wrap = el("div", "ffield");
        const lab = el("label");
        lab.textContent = f.label || f.name;
        if (f.required) lab.appendChild(el("span", "req", "*"));
        wrap.appendChild(lab);

        let getter;
        if (f.type === "fkselect") {
            const row = el("div", "fkrow");
            const inp = el("input");
            inp.readOnly = true;
            inp.placeholder = "点击选择…";
            if (f.default) inp.value = f.default;
            const pick = el("button", "btn", "选择");
            pick.onclick = () => openFkPicker(f.fkTable, f.label || f.name, (name) => { inp.value = name; });
            row.appendChild(inp);
            row.appendChild(pick);
            wrap.appendChild(row);
            getter = () => inp.value.trim();
        } else if (f.type === "select" && Array.isArray(f.options) && f.options.length) {
            const sel = el("select");
            sel.appendChild(el("option", null, ""));
            f.options.forEach(o => {
                const op = el("option", null, o);
                op.value = o;
                sel.appendChild(op);
            });
            if (f.default) sel.value = f.default;
            wrap.appendChild(sel);
            getter = () => sel.value;
        } else {
            const inp = el("input");
            if (f.type === "number") { inp.type = "text"; inp.inputMode = "decimal"; }
            else if (f.type === "date") inp.type = "date";
            if (f.default) inp.value = f.default;
            wrap.appendChild(inp);
            getter = () => inp.value.trim();
        }
        if (f.hint) wrap.appendChild(el("div", "hint", f.hint));
        grid.appendChild(wrap);
        controls.push({ label: f.label || f.name, required: !!f.required, get: getter });
    });
    card.appendChild(grid);

    const actions = el("div", "actions");
    const submit = el("button", "btn primary", "提交");
    const result = el("div", "result");
    actions.appendChild(submit);
    card.appendChild(actions);
    card.appendChild(result);
    messagesEl.appendChild(card);
    scrollBottom();

    submit.onclick = async () => {
        const fields = {};
        for (const c of controls) {
            const v = c.get();
            if (c.required && !v) {
                result.className = "result bad";
                result.textContent = "「" + c.label + "」为必填项。";
                return;
            }
            if (v) fields[c.label] = v;
        }
        if (!Object.keys(fields).length) {
            result.className = "result bad";
            result.textContent = "请至少填写一个字段。";
            return;
        }
        submit.disabled = true;
        result.className = "result";
        result.textContent = "提交中…";
        try {
            // 确定性提交：结构化字段直达 proposeWrite(action=create)，不经 LLM 再编码
            const r = await fetch(BASE + "/api/agent/form/submit", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    entity: ev.entity,
                    fields: fields,
                    userid: userid,
                    conversationId: conversationId,
                    authorization: authorization,
                    brandsid: brandsid,
                    subsidiaryid: subsidiaryid,
                    usertype: usertype
                })
            });
            const d = await r.json();
            if (d.opId) {
                result.className = "result ok";
                result.textContent = "已生成待确认提议。";
                addProposalCard(d.opId, d.summary);
            } else {
                submit.disabled = false;
                result.className = "result bad";
                result.textContent = d.error || "提交失败。";
            }
        } catch (e) {
            submit.disabled = false;
            result.className = "result bad";
            result.textContent = "提交失败：" + e.message;
        }
        loadConvs();
    };
}

/* ================= FK 二级选择器（列表/搜索/分页/选择） ================= */
const fk = { table: null, q: "", page: 1, pageSize: 20, total: 0, onPick: null };

function openFkPicker(table, title, onPick) {
    fk.table = table;
    fk.q = "";
    fk.page = 1;
    fk.onPick = onPick;
    $("#fkTitle").textContent = "选择" + (title || "");
    $("#fkSearch").value = "";
    $("#modalMask").classList.add("show");
    loadFkPage();
    $("#fkSearch").focus();
}

async function loadFkPage() {
    const body = $("#fkBody");
    body.innerHTML = '<div style="padding:20px;color:#888">加载中…</div>';
    try {
        const url = BASE + "/api/agent/form/options?table=" + encodeURIComponent(fk.table)
            + "&brandsid=" + encodeURIComponent(brandsid)
            + "&q=" + encodeURIComponent(fk.q)
            + "&page=" + fk.page + "&pageSize=" + fk.pageSize;
        const d = await (await fetch(url)).json();
        fk.total = d.total || 0;
        const cols = d.columns || [];
        const rows = d.rows || [];
        const table = el("table");
        const thead = el("thead");
        const trh = el("tr");
        cols.forEach(c => trh.appendChild(el("th", null, c.label)));
        thead.appendChild(trh);
        table.appendChild(thead);
        const tbody = el("tbody");
        const nameCol = cols.length ? cols[0].col : null;
        rows.forEach(r => {
            const tr = el("tr");
            cols.forEach(c => tr.appendChild(el("td", null, r[c.col] == null ? "" : String(r[c.col]))));
            tr.onclick = () => {
                $("#modalMask").classList.remove("show");
                if (fk.onPick && nameCol) fk.onPick(String(r[nameCol] || ""));
            };
            tbody.appendChild(tr);
        });
        table.appendChild(tbody);
        body.innerHTML = "";
        if (!rows.length) {
            body.innerHTML = '<div style="padding:20px;color:#888">没有匹配的记录</div>';
        } else {
            body.appendChild(table);
        }
        const pages = Math.max(1, Math.ceil(fk.total / fk.pageSize));
        $("#fkPageInfo").textContent = "共 " + fk.total + " 条 · 第 " + fk.page + "/" + pages + " 页";
        $("#fkPrev").disabled = fk.page <= 1;
        $("#fkNext").disabled = fk.page >= pages;
    } catch (e) {
        body.innerHTML = '<div style="padding:20px;color:#c0392b">加载失败：' + e.message + "</div>";
    }
}

$("#fkClose").onclick = () => $("#modalMask").classList.remove("show");
$("#modalMask").onclick = (e) => { if (e.target === $("#modalMask")) $("#modalMask").classList.remove("show"); };
$("#fkPrev").onclick = () => { if (fk.page > 1) { fk.page--; loadFkPage(); } };
$("#fkNext").onclick = () => { fk.page++; loadFkPage(); };
let fkSearchTimer;
$("#fkSearch").oninput = (e) => {
    clearTimeout(fkSearchTimer);
    fkSearchTimer = setTimeout(() => { fk.q = e.target.value.trim(); fk.page = 1; loadFkPage(); }, 300);
};

/* ================= 输入框 & 初始化 ================= */
const input = $("#messageInput");
input.addEventListener("keydown", (e) => {
    if (e.key === "Enter" && !e.shiftKey) {
        e.preventDefault();
        const v = input.value;
        input.value = "";
        input.style.height = "auto";
        sendMessage(v);
    }
});
input.addEventListener("input", () => {
    input.style.height = "auto";
    input.style.height = Math.min(input.scrollHeight, 140) + "px";
});
$("#sendBtn").onclick = () => {
    const v = input.value;
    input.value = "";
    input.style.height = "auto";
    sendMessage(v);
};
$("#toggleSide").onclick = () => $("#sidebar").classList.toggle("hidden");
$("#newConvBtn").onclick = newConv;

newConv();
</script>
</body>
</html>