编辑页面

HTML内容
<!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>
<style>
  * { margin:0; padding:0; box-sizing:border-box; font-family:"Microsoft YaHei", -apple-system, "Segoe UI", sans-serif; }
  :root{
    --bg:#f0f4fa; --card:#ffffff; --line:#e4e9f2;
    --primary:#2563eb; --primary-d:#1d4ed8; --primary-l:#eaf1ff;
    --ok:#16a34a; --ok-l:#e8f7ee;
    --warn:#f59e0b; --warn-l:#fef3e2;
    --danger:#dc2626; --danger-l:#fdecec;
    --text:#1e293b; --text2:#64748b; --text3:#94a3b8;
    --radius:14px;
  }
  body{ background:var(--bg); color:var(--text); display:flex; height:100vh; overflow:hidden; }

  /* ---------- 侧边栏 ---------- */
  .sidebar{ width:232px; background:#0f1f3d; color:#cbd5e1; display:flex; flex-direction:column; flex-shrink:0; }
  .logo{ display:flex; align-items:center; gap:10px; padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
  .logo .mark{ width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#3b82f6,#8b5cf6); display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; }
  .logo b{ color:#fff; font-size:15px; display:block; }
  .logo span{ font-size:11px; color:#8aa0c8; }
  .nav{ flex:1; padding:14px 10px; overflow-y:auto; }
  .nav .group{ font-size:11px; color:#6b82a8; padding:10px 12px 6px; letter-spacing:1px; }
  .nav a{ display:flex; align-items:center; gap:10px; padding:10px 12px; margin:2px 0; border-radius:10px; color:#cbd5e1; text-decoration:none; font-size:13.5px; cursor:pointer; transition:.15s; }
  .nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
  .nav a.active{ background:var(--primary); color:#fff; box-shadow:0 4px 14px rgba(37,99,235,.4); }
  .nav a .ico{ width:18px; text-align:center; }
  .badge{ margin-left:auto; background:var(--danger); color:#fff; font-size:10px; padding:1px 7px; border-radius:20px; }
  .sidebar .foot{ padding:14px; border-top:1px solid rgba(255,255,255,.08); font-size:11px; color:#6b82a8; text-align:center; }

  /* ---------- 主区 ---------- */
  .main{ flex:1; display:flex; flex-direction:column; overflow:hidden; }
  .topbar{ height:58px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 24px; gap:16px; flex-shrink:0; }
  .topbar h1{ font-size:16px; font-weight:600; }
  .topbar .crumb{ color:var(--text3); font-size:12px; }
  .topbar .right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
  .search{ background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:7px 14px; font-size:12.5px; color:var(--text2); width:230px; }
  .avatar{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; }
  .content{ flex:1; overflow-y:auto; padding:22px 24px; }

  /* ---------- 卡片 ---------- */
  .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; }
  .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:18px; }
  .stat{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
  .stat .t{ font-size:12px; color:var(--text2); }
  .stat .v{ font-size:22px; font-weight:700; margin-top:6px; }
  .stat .s{ font-size:11px; color:var(--text3); margin-top:4px; }
  .stat.blue{ border-top:3px solid var(--primary); } .stat.blue .v{ color:var(--primary); }
  .stat.green{ border-top:3px solid var(--ok); } .stat.green .v{ color:var(--ok); }
  .stat.orange{ border-top:3px solid var(--warn); } .stat.orange .v{ color:var(--warn); }
  .stat.red{ border-top:3px solid var(--danger); } .stat.red .v{ color:var(--danger); }

  .sec{ margin-bottom:20px; }
  .sec h3{ font-size:14px; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
  .sec h3 .tag{ font-size:11px; font-weight:400; color:var(--text2); background:var(--bg); border:1px solid var(--line); padding:1px 8px; border-radius:20px; }

  /* 表格 */
  table{ width:100%; border-collapse:collapse; font-size:12.5px; }
  th{ text-align:left; color:var(--text2); font-weight:500; padding:8px 10px; border-bottom:1px solid var(--line); }
  td{ padding:9px 10px; border-bottom:1px solid #f1f4f9; }
  tr:hover td{ background:#f8fbff; }
  .company{ display:flex; align-items:center; gap:8px; }
  .av{ width:26px; height:26px; border-radius:8px; background:var(--primary-l); color:var(--primary); font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; }

  /* 按钮 */
  .btn{ border:none; border-radius:9px; padding:8px 16px; font-size:12.5px; cursor:pointer; transition:.15s; font-weight:500; }
  .btn.p{ background:var(--primary); color:#fff; } .btn.p:hover{ background:var(--primary-d); }
  .btn.g{ background:var(--ok-l); color:var(--ok); } .btn.g:hover{ background:#d9f0e3; }
  .btn.o{ background:var(--warn-l); color:var(--warn); } .btn.o:hover{ background:#fbe8c8; }
  .btn.r{ background:var(--danger-l); color:var(--danger); } .btn.r:hover{ background:#fbdada; }
  .btn.gray{ background:#eef2f8; color:var(--text2); } .btn.gray:hover{ background:#e2e8f2; }
  .btn:disabled{ opacity:.5; cursor:not-allowed; }

  /* 状态徽章 */
  .st{ font-size:11px; padding:2px 10px; border-radius:20px; font-weight:500; }
  .st.done{ background:var(--ok-l); color:var(--ok); }
  .st.run{ background:var(--primary-l); color:var(--primary); }
  .st.wait{ background:var(--warn-l); color:var(--warn); }
  .st.err{ background:var(--danger-l); color:var(--danger); }
  .st.gray{ background:#eef2f8; color:var(--text2); }

  /* 流程步骤 */
  .flow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0 6px; }
  .step{ display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:7px 12px; font-size:12px; color:var(--text2); }
  .step .num{ width:20px; height:20px; border-radius:50%; background:#cbd5e1; color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; }
  .step.done .num{ background:var(--ok); } .step.done{ border-color:#bfe3cd; background:var(--ok-l); color:var(--ok); }
  .step.run .num{ background:var(--primary); } .step.run{ border-color:#b8cdff; background:var(--primary-l); color:var(--primary); }
  .step.wait .num{ background:var(--warn); }
  .arrow{ color:var(--text3); }

  /* 日志 / 终端 */
  .log{ background:#0f1f3d; border-radius:12px; color:#9fd0a4; font-size:12px; padding:14px 16px; font-family:Consolas, monospace; line-height:1.9; max-height:230px; overflow-y:auto; margin-top:12px; }
  .log .dim{ color:#5b7196; }
  .log .ok{ color:#7ee787; }
  .log .cur{ color:#ffd9a0; }
  .log .err{ color:#ff7b72; }

  /* AI 对话 */
  .chat{ position:fixed; right:26px; bottom:26px; width:360px; height:480px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 50px rgba(15,31,61,.22); display:flex; flex-direction:column; overflow:hidden; transform:translateY(20px); opacity:0; pointer-events:none; transition:.25s; z-index:50; }
  .chat.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .chat .hd{ background:linear-gradient(135deg,#2563eb,#7c3aed); color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px; }
  .chat .hd .mark{ width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:15px; }
  .chat .hd b{ font-size:13.5px; } .chat .hd span{ font-size:10.5px; opacity:.8; display:block; }
  .chat .hd .x{ margin-left:auto; cursor:pointer; opacity:.8; font-size:18px; }
  .chat .body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:#f7f9fc; }
  .msg{ max-width:86%; padding:10px 13px; border-radius:12px; font-size:12.5px; line-height:1.7; }
  .msg.ai{ background:#fff; border:1px solid var(--line); border-bottom-left-radius:3px; align-self:flex-start; }
  .msg.me{ background:var(--primary); color:#fff; border-bottom-right-radius:3px; align-self:flex-end; }
  .msg.sys{ background:var(--ok-l); color:var(--ok); align-self:center; font-size:11.5px; border:1px solid #bfe3cd; }
  .chat .in{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
  .chat .in input{ flex:1; border:1px solid var(--line); border-radius:20px; padding:9px 14px; font-size:12.5px; outline:none; }
  .chat .in input:focus{ border-color:var(--primary); }
  .fab{ position:fixed; right:26px; bottom:26px; width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,#2563eb,#7c3aed); color:#fff; font-size:22px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 26px rgba(37,99,235,.45); z-index:49; transition:.2s; }
  .fab:hover{ transform:scale(1.06); }

  .tip{ font-size:12px; color:var(--text3); background:var(--bg); border:1px dashed var(--line); border-radius:10px; padding:9px 13px; margin-bottom:14px; }
  .tip b{ color:var(--primary); }
  .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .split{ display:flex; gap:16px; }
  .split .grow{ flex:1; min-width:0; }
  .filebox{ border:2px dashed var(--line); border-radius:12px; padding:22px; text-align:center; color:var(--text2); font-size:12.5px; cursor:pointer; transition:.15s; background:#fbfcfe; }
  .filebox:hover{ border-color:var(--primary); background:var(--primary-l); }
  .filebox .up{ font-size:22px; }
  .kv{ display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px dashed var(--line); font-size:12.5px; }
  .kv:last-child{ border:none; }
  .kv .k{ color:var(--text2); }
  .progress{ height:7px; background:#e6ebf4; border-radius:10px; overflow:hidden; margin-top:8px; }
  .progress .bar{ height:100%; background:linear-gradient(90deg,#3b82f6,#8b5cf6); width:0%; transition:.3s; border-radius:10px; }
  .mt10{ margin-top:10px; } .mt16{ margin-top:16px; }
  .right{ text-align:right; }
  .hide{ display:none !important; }
  .flex{ display:flex; align-items:center; gap:10px; }
  .ghost{ color:var(--text3); font-size:11px; }
  .center{ text-align:center; }
</style>
</head>
<body>

<!-- ===================== 侧边栏 ===================== -->
<aside class="sidebar">
  <div class="logo">
    <div class="mark">AI</div>
    <div><b>AI 记账助手</b><span>记账报税智能工作台</span></div>
  </div>
  <nav class="nav">
    <div class="group">工作台</div>
    <a data-page="overview" class="active">总览看板</a>
    <div class="group">自动化记账</div>
    <a data-page="recur">重复分录模板</a>
    <a data-page="invoice">发票取票·生成凭证</a>
    <a data-page="bank">银行流水导入</a>
    <a data-page="invoice_issue">网页代开发票</a>
  </nav>
  <div class="foot">产品演示原型 · 用于需求沟通</div>
</aside>

<!-- ===================== 主区 ===================== -->
<main class="main">
  <div class="topbar">
    <h1 id="pageTitle">总览看板</h1>
    <span class="crumb" id="pageCrumb">AI记账助手 / 总览</span>
    <div class="right">
      <div class="search">搜索客户 / 凭证 / 任务...</div>
      <span class="ghost">2026-08</span>
      <div class="avatar">会</div>
    </div>
  </div>

  <div class="content">

    <!-- ========== 总览 ========== -->
    <div id="page-overview">
      <div class="stats">
        <div class="stat blue"><div class="t">服务记账客户</div><div class="v">200</div><div class="s">家 · 本月已处理 186 家</div></div>
        <div class="stat green"><div class="t">AI 已生成凭证</div><div class="v">3,842</div><div class="s">张 · 通过率 97%</div></div>
        <div class="stat orange"><div class="t">待人工确认</div><div class="v">36</div><div class="s">凭证 28 · 代开票 8</div></div>
        <div class="stat red"><div class="t">异常待处理</div><div class="v">5</div><div class="s">发票缺信息 3 · 流水不匹配 2</div></div>
      </div>

      <div class="grid2">
        <div class="sec">
          <h3>今日自动化任务 <span class="tag">定时触发 · 每小时自动检查</span></h3>
          <div class="card">
            <table>
              <tr><th>任务</th><th>客户数</th><th>状态</th><th>操作</th></tr>
              <tr><td><b>工资计提（6月）</b><div class="ghost">模板：工资计提 · 自动生成</div></td><td>45 户</td><td><span class="st done">已完成</span></td><td class="right"><button class="btn gray" onclick="go('recur')">查看</button></td></tr>
              <tr><td><b>进项发票取票 + 生成凭证</b><div class="ghost">365云财税 · 自动取票</div></td><td>120 户</td><td><span class="st run">执行中</span></td><td class="right"><button class="btn gray" onclick="go('invoice')">查看</button></td></tr>
              <tr><td><b>银行流水导入金账师</b><div class="ghost">待网银导出</div></td><td>68 户</td><td><span class="st wait">等待中</span></td><td class="right"><button class="btn gray" onclick="go('bank')">查看</button></td></tr>
              <tr><td><b>代开发票</b><div class="ghost">电子税务局 · 需人工确认</div></td><td>8 户</td><td><span class="st wait">待确认</span></td><td class="right"><button class="btn gray" onclick="go('invoice_issue')">查看</button></td></tr>
            </table>
          </div>
        </div>

        <div class="sec">
          <h3>本月效率对比 <span class="tag">AI 上线前后</span></h3>
          <div class="card">
            <div class="kv"><span class="k">记账凭证处理时长</span><span><b>8-10 小时/户·月</b> → <b style="color:var(--ok)">40 分钟</b></span></div>
            <div class="kv"><span class="k">取票 + 生成凭证</span><span>人工 2 天/月 → <b style="color:var(--ok)">2 小时</b></span></div>
            <div class="kv"><span class="k">银行流水录入</span><span>人工 1 天 → <b style="color:var(--ok)">10 分钟</b></span></div>
            <div class="kv"><span class="k">发票信息录入</span><span>人工 3 分钟/张 → <b style="color:var(--ok)">自动</b></span></div>
            <div class="kv"><span class="k">手工重复分录</span><span>每月人工重录 → <b style="color:var(--ok)">模板一键生成</b></span></div>
          </div>
        </div>
      </div>

      <div class="sec">
        <h3>流程示意 <span class="tag">系统如何工作</span></h3>
        <div class="card">
          <div class="flow">
            <div class="step done"><span class="num">1</span>取票 / 导流水</div><span class="arrow">→</span>
            <div class="step done"><span class="num">2</span>AI 识别并生成凭证</div><span class="arrow">→</span>
            <div class="step done"><span class="num">3</span>同单位合并凭证</div><span class="arrow">→</span>
            <div class="step done"><span class="num">4</span>自动导入记账软件</div><span class="arrow">→</span>
            <div class="step done"><span class="num">5</span>会计审批确认</div>
          </div>
          <div class="tip mt10"><b>边界说明：</b>会计与税务核心逻辑由客户现有记账软件（365云财税 / 金账师 / 亿企财税）负责，随税局政策实时更新；本系统只做"自动化操作 + AI 辅助判断"，不承担会计合规责任。</div>
        </div>
      </div>
    </div>

    <!-- ========== 重复分录模板 ========== -->
    <div id="page-recur" class="hide">
      <div class="tip"> <b>痛点1：重复分录</b>——工资计提、工资支付、折旧、房租等每月重复的业务，做成"模板"，每月 1 号自动为所有客户生成，AI 自动套用上月数据。</div>
      <div class="sec">
        <h3>重复分录模板 <button class="btn p" style="margin-left:10px">＋ 新建模板</button></h3>
        <div class="card">
          <table>
            <tr><th>模板名称</th><th>业务类型</th><th>覆盖客户</th><th>上月凭证数</th><th>状态</th><th>操作</th></tr>
            <tr><td><b>工资计提</b></td><td>计提 · 每月1日</td><td>45 户</td><td>45 张</td><td><span class="st done">本月已生成</span></td><td class="right"><button class="btn gray">编辑</button> <button class="btn p" onclick="runRecur()">重新生成</button></td></tr>
            <tr><td><b>工资支付</b></td><td>支付 · 每月5日</td><td>45 户</td><td>45 张</td><td><span class="st run">本月待生成</span></td><td class="right"><button class="btn gray">编辑</button> <button class="btn p" onclick="runRecur()">生成</button></td></tr>
            <tr><td><b>固定资产折旧</b></td><td>计提 · 月末</td><td>12 户</td><td>12 张</td><td><span class="st wait">待执行</span></td><td class="right"><button class="btn gray">编辑</button> <button class="btn p" onclick="runRecur()">生成</button></td></tr>
            <tr><td><b>房租水电</b></td><td>计提 · 月末</td><td>9 户</td><td>9 张</td><td><span class="st wait">待执行</span></td><td class="right"><button class="btn gray">编辑</button> <button class="btn p" onclick="runRecur()">生成</button></td></tr>
          </table>
        </div>
      </div>
      <div class="sec" id="recurDemo">
        <h3>AI 批量生成演示 <span class="tag">点击上方"生成"试试</span></h3>
        <div class="card">
          <div class="flex"><span class="st gray">未开始</span><span class="ghost">演示：点击"工资计提 → 生成"，看 AI 逐户自动生成凭证</span></div>
          <div class="log hide" id="recurLog"></div>
          <div class="mt16" id="recurResult"></div>
        </div>
      </div>
    </div>

    <!-- ========== 发票取票·生成凭证 ========== -->
    <div id="page-invoice" class="hide">
      <div class="tip"> <b>痛点2：取票 + 生成凭证</b>——进入记账软件取票 → 发票识别 → AI 按单位生成凭证 → <b>同单位名称自动合并</b>，全程自动化。</div>
      <div class="sec">
        <h3>取票任务 <button class="btn p" onclick="startInvoice()" id="invBtn">▶ 开始自动取票</button></h3>
        <div class="card">
          <div class="flow" id="invFlow">
            <div class="step wait"><span class="num">1</span>登录 365云财税 取票</div><span class="arrow">→</span>
            <div class="step wait"><span class="num">2</span>发票 OCR 识别</div><span class="arrow">→</span>
            <div class="step wait"><span class="num">3</span>AI 生成凭证</div><span class="arrow">→</span>
            <div class="step wait"><span class="num">4</span>同单位合并</div><span class="arrow">→</span>
            <div class="step wait"><span class="num">5</span>导入生成凭证</div>
          </div>
          <div class="log hide" id="invLog"></div>
        </div>
      </div>
      <div class="sec">
        <h3>已生成凭证 <span class="tag">演示数据 · 同单位已合并</span></h3>
        <div class="card">
          <table id="invTable">
            <tr><th>单位</th><th>发票数</th><th>凭证摘要</th><th>金额</th><th>合并前凭证数</th><th>状态</th></tr>
            <tr><td><div class="company"><div class="av">A</div>安徽某贸易有限公司</div></td><td>6</td><td>采购办公用品</td><td>¥12,600.00</td><td>6 → <b style="color:var(--ok)">1</b></td><td><span class="st done">已生成</span></td></tr>
            <tr><td><div class="company"><div class="av">B</div>合肥某信息科技公司</div></td><td>4</td><td>服务费</td><td>¥8,400.00</td><td>4 → <b style="color:var(--ok)">1</b></td><td><span class="st done">已生成</span></td></tr>
            <tr><td><div class="company"><div class="av">C</div>芜湖某制造有限公司</div></td><td>9</td><td>原材料采购</td><td>¥45,200.00</td><td>9 → <b style="color:var(--ok)">1</b></td><td><span class="st done">已生成</span></td></tr>
            <tr><td><div class="company"><div class="av">D</div>安徽某商贸股份公司</div></td><td>3</td><td>差旅费报销</td><td>¥3,150.00</td><td>3 → <b style="color:var(--ok)">1</b></td><td><span class="st wait">待审批</span></td></tr>
          </table>
        </div>
      </div>
    </div>

    <!-- ========== 银行流水 ========== -->
    <div id="page-bank" class="hide">
      <div class="tip"> <b>痛点3：银行回单与流水</b>——网银导出 → 自动识别文件 → 按单位对应文件导入金账师账套 → 自动生成收款/付款凭证。</div>
      <div class="sec">
        <h3>流水导入</h3>
        <div class="grid2">
          <div class="card">
            <div class="filebox" onclick="startBank()">
              <div class="up"></div>
              <div>拖拽或点击上传银行流水文件（.xlsx / .csv / .pdf）</div>
              <div class="ghost mt10">支持：网银导出 Excel、回单 PDF、对账单</div>
            </div>
            <div class="log hide mt10" id="bankLog"></div>
          </div>
          <div class="card">
            <h3 style="margin-bottom:4px">自动匹配规则</h3>
            <div class="kv"><span class="k">文件名识别单位</span><span>“安徽某某-2026-06-流水.xlsx” → 自动匹配账套</span></div>
            <div class="kv"><span class="k">金额 + 日期匹配</span><span>与账套核对，差异项单独列出</span></div>
            <div class="kv"><span class="k">导入位置</span><span>自动导入金账师对应账套</span></div>
            <div class="kv"><span class="k">凭证生成</span><span>收款/付款按对方户名 AI 生成</span></div>
            <div class="progress"><div class="bar" id="bankBar" style="width:0%"></div></div>
            <div class="right ghost" id="bankPct">0%</div>
          </div>
        </div>
      </div>
      <div class="sec">
        <h3>本月导入记录</h3>
        <div class="card">
          <table>
            <tr><th>单位</th><th>文件</th><th>笔数</th><th>金额合计</th><th>状态</th></tr>
            <tr><td><div class="company"><div class="av">A</div>安徽某贸易有限公司</div></td><td>流水_2026-07.xlsx</td><td>132</td><td>¥268,400.00</td><td><span class="st done">已导入</span></td></tr>
            <tr><td><div class="company"><div class="av">E</div>阜阳某农产品公司</div></td><td>回单_2026-07.pdf</td><td>58</td><td>¥96,750.00</td><td><span class="st done">已导入</span></td></tr>
            <tr><td><div class="company"><div class="av">F</div>蚌埠某建材公司</div></td><td>流水_2026-07.xlsx</td><td>—</td><td>—</td><td><span class="st wait">待上传</span></td></tr>
          </table>
        </div>
      </div>
    </div>

    <!-- ========== 代开发票 ========== -->
    <div id="page-invoice_issue" class="hide">
      <div class="tip"> <b>痛点4：网页代开发票</b>——AI 自动填好开票信息，登录电子税务局，<b>但"提交开票"保留人工确认</b>（涉及税务责任，不做全自动）。</div>
      <div class="sec">
        <h3>待开票任务 <button class="btn p" onclick="startIssue()">▶ AI 自动填写</button></h3>
        <div class="card">
          <div class="flow" id="issueFlow">
            <div class="step wait"><span class="num">1</span>读取客户开票需求</div><span class="arrow">→</span>
            <div class="step wait"><span class="num">2</span>AI 填写发票信息</div><span class="arrow">→</span>
            <div class="step wait"><span class="num">3</span>登录电子税务局</div><span class="arrow">→</span>
            <div class="step wait"><span class="num">4</span> 人工确认后开票</div>
          </div>
          <div class="log hide" id="issueLog"></div>
        </div>
      </div>
      <div class="sec">
        <h3>待确认列表</h3>
        <div class="card">
          <table>
            <tr><th>购方</th><th>发票类型</th><th>项目</th><th>金额</th><th>状态</th><th>操作</th></tr>
            <tr><td>XX 科技有限公司</td><td>增值税专票</td><td>软件开发服务</td><td>¥50,000.00</td><td><span class="st wait">AI 已填写 · 待确认</span></td><td class="right"><button class="btn o">核对</button> <button class="btn g">确认开票</button></td></tr>
            <tr><td>YY 广告传媒公司</td><td>增值税普票</td><td>广告服务费</td><td>¥12,000.00</td><td><span class="st wait">AI 已填写 · 待确认</span></td><td class="right"><button class="btn o">核对</button> <button class="btn g">确认开票</button></td></tr>
            <tr><td>ZZ 教育咨询公司</td><td>增值税普票</td><td>咨询服务费</td><td>¥8,800.00</td><td><span class="st wait">AI 已填写 · 待确认</span></td><td class="right"><button class="btn o">核对</button> <button class="btn g">确认开票</button></td></tr>
          </table>
        </div>
      </div>
    </div>

    </div>
  </div>
</main>

<script>
  // ---------- 页面切换 ----------
  const titles={overview:['总览看板','AI记账助手 / 总览'],recur:['重复分录模板','AI记账助手 / 自动化记账'],invoice:['发票取票·生成凭证','AI记账助手 / 自动化记账'],bank:['银行流水导入','AI记账助手 / 自动化记账'],invoice_issue:['网页代开发票','AI记账助手 / 自动化记账']};
  function go(page){
    document.querySelectorAll('.nav a').forEach(a=>a.classList.remove('active'));
    document.querySelector(`.nav a[data-page="${page}"]`).classList.add('active');
    document.querySelectorAll('.content>div').forEach(d=>d.classList.add('hide'));
    document.getElementById('page-'+page).classList.remove('hide');
    const t=titles[page]; document.getElementById('pageTitle').textContent=t[0]; document.getElementById('pageCrumb').textContent=t[1];
  }
  document.querySelectorAll('.nav a').forEach(a=>a.onclick=()=>go(a.dataset.page));

  // ---------- 日志工具 ----------
  function makeLog(el){
    el.classList.remove('hide'); el.innerHTML='';
    const add=(txt,cls)=>{ const d=document.createElement('div'); d.className=cls||''; d.textContent=txt; el.appendChild(d); el.scrollTop=el.scrollHeight; };
    const wait=ms=>new Promise(r=>setTimeout(r,ms));
    return {add,wait,el};
  }

  // ---------- 重复分录 ----------
  async function runRecur(){
    const box=document.getElementById('recurResult'); box.innerHTML='';
    const L=makeLog(document.getElementById('recurLog'));
    L.add('$ AI 批量生成任务启动 · 工资计提模板', 'dim');
    await L.wait(400);
    for(let i=1;i<=6;i++){
      L.add(`▶ 处理第 ${i} 户：安徽某某${i}号客户 ...`, '');
      await L.wait(320);
      L.add('  ✔ 已读取上月计提数据（12,600.00）', 'ok');
      await L.wait(220);
      L.add('  ✔ 生成凭证：借 管理费用-工资  /  贷 应付职工薪酬', 'ok');
    }
    L.add('✔ 完成：45 户工资计提凭证全部生成，0 异常', 'ok');
    await L.wait(300);
    box.innerHTML=`
      <div style="background:var(--ok-l);border:1px solid #bfe3cd;border-radius:12px;padding:14px">
        <b style="color:var(--ok)"> 批量生成完成</b>
        <div class="mt10" style="font-size:12.5px;color:var(--text2)">已为 <b>45</b> 户生成 <b>45</b> 张工资计提凭证，平均每户 <b>1.5 秒</b>，全部借贷平衡、通过 AI 校验。<br>人工原耗时：约 3 小时 → 现耗时：<b>约 1 分钟</b>。</div>
      </div>`;
  }

  // ---------- 发票取票 ----------
  async function startInvoice(){
    const btn=document.getElementById('invBtn'); btn.disabled=true; btn.textContent='⏳ 取票中...';
    const L=makeLog(document.getElementById('invLog'));
    const steps=document.querySelectorAll('#invFlow .step');
    const logs=[
      ['$ 登录 365云财税，开始自动取票', 'dim'],
      ['✔ 已进入发票管理，检测到本月进项发票 22 户 / 286 张', 'ok'],
      ['▶ OCR 识别发票信息（票号 / 金额 / 税额 / 销方）...', ''],
      ['✔ 286 张发票识别完成，识别率 99.3%', 'ok'],
      ['▶ AI 根据发票内容判断科目并生成凭证...', ''],
      ['✔ 已生成凭证 286 张，借贷平衡校验通过', 'ok'],
      ['▶ 按单位名称合并凭证...', ''],
      ['✔ 合并完成：286 张 → 178 张（同单位多张发票合并为一张）', 'ok'],
      ['✔ 凭证已自动导入记账软件，等待会计审批', 'ok']];
    for(let i=0;i<steps.length;i++){
      steps[i].classList.remove('wait'); steps[i].classList.add('run');
      L.add(logs[i][0], logs[i][1]);
      if(i===2){const el=L.el; await L.wait(600); el.scrollTop=el.scrollHeight;}
      await L.wait(550);
      steps[i].classList.remove('run'); steps[i].classList.add('done');
    }
    btn.disabled=false; btn.textContent='▶ 重新取票';
    const t=document.getElementById('invTable');
    t.insertAdjacentHTML('beforeend',`
      <tr style="background:var(--ok-l)"><td colspan="6" style="color:var(--ok);font-weight:600"> 本次自动取票完成：22 户 286 张发票 → 178 张合并凭证 · 全部导入成功（演示结果）</td></tr>`);
  }

  // ---------- 银行流水 ----------
  async function startBank(){
    const L=makeLog(document.getElementById('bankLog'));
    const bar=document.getElementById('bankBar'), pct=document.getElementById('bankPct');
    L.add('$ 检测到上传文件：银行流水_2026-07.xlsx（安徽某贸易有限公司）', 'dim');
    await L.wait(400);
    L.add('✔ 文件名匹配账套：安徽某贸易有限公司', 'ok');
    const logs=['✔ 读取流水 132 笔，金额合计 ¥268,400.00','▶ 与账套逐笔核对...','✔ 核对完成，差异 0 笔','✔ 正在导入金账师账套...','✔ 导入成功，已生成收款/付款凭证 96 张'];
    for(const s of logs){
      L.add(s, s.startsWith('✔')?'ok':'');
      await L.wait(500);
    }
    L.add('✔ 完成：流水导入 + 凭证生成全部自动完成', 'ok');
    let w=0; const iv=setInterval(()=>{ w+=8; bar.style.width=Math.min(100,w)+'%'; pct.textContent=Math.min(100,w)+'%'; if(w>=100)clearInterval(iv); },60);
  }

  // ---------- 代开发票 ----------
  async function startIssue(){
    const btn=document.querySelector('#page-invoice_issue .btn.p'); if(btn.disabled)return; btn.disabled=true; btn.textContent='⏳ AI 填写中...';
    const L=makeLog(document.getElementById('issueLog'));
    const steps=document.querySelectorAll('#issueFlow .step');
    const logs=[
      ['$ 读取客户开票需求（待开票 8 户）...', 'dim'],
      ['✔ 已获取：购方名称 / 税号 / 金额 / 项目', 'ok'],
      ['▶ AI 生成开票信息并填写...', ''],
      ['✔ 8 张发票信息填写完成，税额计算正确', 'ok'],
      ['▶ 登录电子税务局，进入开票页面...', ''],
      ['✔ 已定位待开票界面，信息核对无误', 'ok'],
      [' 已暂停：等待会计人工确认后提交开票（安全模式）', '']];
    for(let i=0;i<steps.length;i++){
      steps[i].classList.remove('wait'); steps[i].classList.add(i===steps.length-1?'wait':'run');
      L.add(logs[i][0], i===steps.length-1?'err':logs[i][1]);
      await L.wait(600);
      if(i!==steps.length-1){ steps[i].classList.remove('run'); steps[i].classList.add('done'); }
    }
    btn.disabled=false; btn.textContent='▶ AI 自动填写';
  }


</script>
</body>
</html>