zhensolid
/
keyissue-prototype


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A+在建客户动态管理系统</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <section class="login-screen" id="loginScreen" aria-label="系统登录">
    <div class="login-card">
      <div class="login-copy">
        <p class="eyebrow">正式运行版</p>
        <h1>A+在建客户动态管理系统</h1>
        <p>通过后台账号密码登录，权限由服务器统一校验。账号信息由系统管理员统一发放和维护。</p>
      </div>
      <div class="login-panel">
        <form class="login-form" id="loginForm">
          <label>
            <span>账号</span>
            <input id="loginUsername" name="username" type="text" autocomplete="username" placeholder="输入后台账号" required>
          </label>
          <label>
            <span>密码</span>
            <input id="loginPassword" name="password" type="password" autocomplete="current-password" placeholder="输入密码" required>
          </label>
          <button class="primary-button" type="submit">登录系统</button>
          <p class="login-message" id="loginMessage" role="status"></p>
        </form>
        <form class="login-form register-form" id="registerForm">
          <div class="form-heading">
            <strong>名册注册</strong>
            <small>仅限花名册内姓名与手机号一致的人员注册</small>
          </div>
          <label>
            <span>姓名</span>
            <input id="registerName" name="name" type="text" autocomplete="name" placeholder="输入花名册姓名" required>
          </label>
          <label>
            <span>手机号</span>
            <input id="registerPhone" name="phone" type="tel" inputmode="numeric" autocomplete="tel" placeholder="输入花名册手机号" required>
          </label>
          <div class="register-password-grid">
            <label>
              <span>设置密码</span>
              <input id="registerPassword" name="password" type="password" autocomplete="new-password" placeholder="至少 6 位" minlength="6" required>
            </label>
            <label>
              <span>确认密码</span>
              <input id="registerPasswordConfirm" name="confirmPassword" type="password" autocomplete="new-password" placeholder="再次输入密码" minlength="6" required>
            </label>
          </div>
          <button class="ghost-button" type="submit">注册并进入系统</button>
          <p class="login-message" id="registerMessage" role="status"></p>
        </form>
      </div>
    </div>
  </section>

  <div class="app-shell" id="appShell" hidden>
    <aside class="sidebar" aria-label="主导航">
      <div class="brand">
        <span class="brand-mark">KI</span>
        <div>
          <strong>A+在建客户</strong>
          <small>动态管理系统</small>
        </div>
      </div>

      <nav class="nav-list">
        <button class="nav-item active" type="button" data-page="dashboard"><span>动态驾驶舱</span><b>01</b></button>
        <button class="nav-item" type="button" data-page="customers"><span>A/A+客户库</span><b>02</b></button>
        <button class="nav-item" type="button" data-page="inspections"><span>每日线上巡查</span><b>03</b></button>
        <button class="nav-item" type="button" data-page="issues"><span>问题反馈池</span><b>04</b></button>
        <button class="nav-item" type="button" data-page="audit"><span>监察核查</span><b>05</b></button>
        <button class="nav-item" type="button" data-page="analysis"><span>问题分析</span><b>06</b></button>
        <button class="nav-item" type="button" data-page="rules"><span>预警规则</span><b>07</b></button>
        <button class="nav-item" type="button" data-page="admin"><span>系统后台</span><b>08</b></button>
      </nav>

      <div class="sidebar-card">
        <span class="status-dot"></span>
        <p>今日需高层关注</p>
        <strong id="sideAlertCount">5 件</strong>
      </div>
    </aside>

    <main class="main">
      <header class="topbar">
        <div>
          <p class="eyebrow">监察部 / 交付中心</p>
          <h1 id="pageTitle">A+在建客户动态管理驾驶舱</h1>
        </div>
        <div class="top-actions">
          <div class="user-panel" aria-label="当前登录人">
            <span>当前登录</span>
            <strong id="currentUserName">未登录</strong>
            <em id="currentRoleName">-</em>
            <button class="small-button" type="button" id="logoutBtn">退出</button>
          </div>
          <button class="ghost-button" type="button" data-open-modal="customerModal" data-requires="customer:submit">新增客户</button>
          <button class="ghost-button" type="button" data-open-modal="inspectionModal" data-requires="inspection:create">每日巡查</button>
          <button class="primary-button" type="button" data-open-modal="issueModal" data-requires="issue:create">新增问题反馈</button>
        </div>
      </header>

      <section class="filter-bar" aria-label="筛选条件">
        <label>
          <span>时间范围</span>
          <select id="periodFilter">
            <option>本周</option>
            <option>本月</option>
            <option>近 30 天</option>
            <option>全年</option>
          </select>
        </label>
        <label>
          <span>客户等级</span>
          <select id="tierFilter">
            <option value="all">全部等级</option>
            <option value="A">A 客户</option>
            <option value="A+">A+ 客户</option>
          </select>
        </label>
        <label>
          <span>责任部门</span>
          <select id="departmentFilter">
            <option value="all">全部部门</option>
            <option value="光宸">光宸</option>
            <option value="澜光">澜光</option>
            <option value="蘭堂">蘭堂</option>
            <option value="焕境">焕境</option>
          </select>
        </label>
        <label class="search-field">
          <span>搜索</span>
          <input id="searchInput" type="search" placeholder="客户、地址、问题关键词">
        </label>
      </section>

      <section class="page-section active" data-section="dashboard">
        <div class="kpi-grid" aria-label="核心指标">
          <article class="metric-card">
            <span>今日已巡查</span>
            <strong id="kpiInspectionDone">0</strong>
            <em>每日线上巡查覆盖</em>
          </article>
          <article class="metric-card">
            <span>异常巡查</span>
            <strong id="kpiAbnormalInspections">0</strong>
            <em>需转入问题处置</em>
          </article>
          <article class="metric-card">
            <span>红色预警问题</span>
            <strong id="kpiRedIssues">0</strong>
            <em>需管理层介入</em>
          </article>
          <article class="metric-card">
            <span>待监察核查</span>
            <strong id="kpiAuditIssues">0</strong>
            <em>处置后等待复核</em>
          </article>
        </div>

        <div class="insight-grid">
          <article class="panel">
            <div class="panel-heading">
              <div>
                <p class="eyebrow">问题分层</p>
                <h2>预警级别分布</h2>
              </div>
              <button class="ghost-button" type="button" data-page-jump="rules" data-requires="page:rules">查看规则</button>
            </div>
            <div class="funnel">
              <div class="funnel-row tier-a" style="--w: 100%;"><span>红色预警</span><strong id="funnelRed">0 件</strong></div>
              <div class="funnel-row tier-b" style="--w: 78%;"><span>橙色预警</span><strong id="funnelOrange">0 件</strong></div>
              <div class="funnel-row tier-c" style="--w: 52%;"><span>蓝色关注</span><strong id="funnelBlue">0 件</strong></div>
            </div>
          </article>

          <article class="panel">
            <div class="panel-heading">
              <div>
                <p class="eyebrow">问题归因</p>
                <h2>高频问题类型</h2>
              </div>
            </div>
            <div class="bar-list" id="issueTypeBars" aria-label="问题类型分布"></div>
          </article>

          <article class="panel">
            <div class="panel-heading">
              <div>
                <p class="eyebrow">预警雷达</p>
                <h2>今日需关注</h2>
              </div>
            </div>
            <div class="risk-list">
              <div class="risk-item danger">
                <b>重复反馈未解决</b>
                <span>同一客户同类问题超过 2 次自动升级红色预警。</span>
              </div>
              <div class="risk-item warning">
                <b>满意度下滑</b>
                <span>满意度低于 3 分进入管理层关注池。</span>
              </div>
              <div class="risk-item info">
                <b>核查待确认</b>
                <span>处置完成后必须经监察部核查才可标记已处理。</span>
              </div>
            </div>
          </article>
        </div>

        <article class="panel">
          <div class="panel-heading">
            <div>
              <p class="eyebrow">重点问题</p>
              <h2>高优先级问题清单</h2>
            </div>
            <button class="primary-button" type="button" data-page-jump="issues" data-requires="page:issues">进入问题池</button>
          </div>
          <div class="table-wrap">
            <table>
              <thead>
                <tr>
                  <th>客户</th>
                  <th>等级</th>
                  <th>部门</th>
                  <th>问题来源</th>
                  <th>问题类型</th>
                  <th>预警状态</th>
                  <th>责任人</th>
                  <th>当前处置</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="dashboardRows"></tbody>
            </table>
          </div>
        </article>
      </section>

      <section class="page-section" data-section="customers">
        <div class="section-grid">
          <article class="panel">
            <div class="panel-heading">
              <div>
                <p class="eyebrow">客户库</p>
                <h2>A/A+ 客户动态库</h2>
              </div>
              <button class="primary-button" type="button" data-open-modal="customerModal" data-requires="customer:submit">新增客户</button>
            </div>
            <div class="table-wrap">
              <table>
                <thead>
                  <tr>
                    <th>客户</th>
                    <th>等级</th>
                    <th>新居地址</th>
                    <th>客管负责人</th>
                    <th>入选说明</th>
                    <th>部门</th>
                    <th>设计师</th>
                    <th>项目经理</th>
                    <th>施工阶段</th>
                    <th>开工日期</th>
                    <th>计划完工日期</th>
                    <th>当前进度</th>
                    <th>巡查与否</th>
                    <th>巡查状态</th>
                    <th>最近巡查</th>
                    <th>问题数</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody id="customerRows"></tbody>
              </table>
            </div>
          </article>
        </div>
      </section>

      <section class="page-section" data-section="inspections">
        <article class="panel">
          <div class="panel-heading">
            <div>
              <p class="eyebrow">每日线上巡查</p>
              <h2>A/A+ 客户日查情况</h2>
            </div>
            <button class="primary-button" type="button" data-open-modal="inspectionModal" data-requires="inspection:create">提交巡查</button>
          </div>
          <div class="inspection-summary" id="inspectionSummaryCards"></div>
          <div class="table-wrap">
            <table>
              <thead>
                <tr>
                  <th>巡查编号</th>
                  <th>客户</th>
                  <th>巡查与否</th>
                  <th>巡查状态</th>
                  <th>巡查人</th>
                  <th>巡查时间</th>
                  <th>施工质量</th>
                  <th>文明施工</th>
                  <th>客户群反馈</th>
                  <th>巡查结论</th>
                </tr>
              </thead>
              <tbody id="inspectionRows"></tbody>
            </table>
          </div>
        </article>
      </section>

      <section class="page-section" data-section="issues">
        <article class="panel">
          <div class="panel-heading">
            <div>
              <p class="eyebrow">反馈池</p>
              <h2>问题反馈与预警清单</h2>
            </div>
            <div class="segmented" role="tablist" aria-label="预警状态">
              <button class="active" type="button" data-status="all">全部</button>
              <button type="button" data-status="红色预警">红色</button>
              <button type="button" data-status="处理中">处理中</button>
              <button type="button" data-status="待核查">待核查</button>
            </div>
          </div>
          <div class="table-wrap">
            <table>
              <thead>
                <tr>
                  <th>反馈编号</th>
                  <th>客户</th>
                  <th>问题来源</th>
                  <th>问题类型</th>
                  <th>问题描述</th>
                  <th>预警状态</th>
                  <th>责任人</th>
                  <th>根因</th>
                  <th>当前处置</th>
                  <th>处置后满意度</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="issueRows"></tbody>
            </table>
          </div>
        </article>
      </section>

      <section class="page-section" data-section="audit">
        <div class="section-grid two">
          <article class="panel">
            <div class="panel-heading">
              <div>
                <p class="eyebrow">监察核查</p>
                <h2>待核查问题</h2>
              </div>
              <span class="panel-chip" id="auditCount">0 件</span>
            </div>
            <div class="table-wrap">
              <table>
                <thead>
                  <tr>
                    <th>客户</th>
                    <th>问题</th>
                    <th>处置说明</th>
                    <th>提交人</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody id="auditRows"></tbody>
              </table>
            </div>
          </article>

          <article class="panel">
            <div class="panel-heading">
              <div>
                <p class="eyebrow">闭环标准</p>
                <h2>核查判定</h2>
              </div>
            </div>
            <div class="checklist">
              <label><input type="checkbox" checked> 客户反馈的问题点已逐项回应</label>
              <label><input type="checkbox" checked> 现场整改或解释材料已上传</label>
              <label><input type="checkbox"> 客户满意度回升到 4 分以上</label>
              <label><input type="checkbox"> 同类问题 7 天内未复发</label>
            </div>
          </article>
        </div>
      </section>

      <section class="page-section" data-section="analysis">
        <div class="analysis-grid">
          <article class="panel">
            <div class="panel-heading">
              <div>
                <p class="eyebrow">趋势</p>
                <h2>近 7 日反馈趋势</h2>
              </div>
            </div>
            <div class="trend" aria-label="近 7 日反馈趋势">
              <span style="--h: 44%"><b>周一</b></span>
              <span style="--h: 62%"><b>周二</b></span>
              <span style="--h: 48%"><b>周三</b></span>
              <span style="--h: 78%"><b>周四</b></span>
              <span style="--h: 70%"><b>周五</b></span>
              <span style="--h: 36%"><b>周六</b></span>
              <span style="--h: 52%"><b>周日</b></span>
            </div>
          </article>

          <article class="panel">
            <div class="panel-heading">
              <div>
                <p class="eyebrow">部门</p>
                <h2>部门预警排行</h2>
              </div>
            </div>
            <div id="departmentRanks" class="rank-list"></div>
          </article>

          <article class="panel">
            <div class="panel-heading">
              <div>
                <p class="eyebrow">复盘</p>
                <h2>本周问题洞察</h2>
              </div>
            </div>
            <div class="insight-note">
              <p>施工质量、文明施工和客户群反馈是每日线上巡查的三个重点观察项。</p>
              <p>建议把“日查异常转问题反馈”和“处置后满意度回访”作为下周重点动作。</p>
            </div>
          </article>
        </div>
      </section>

      <section class="page-section" data-section="rules">
        <div class="section-grid two">
          <article class="panel">
            <div class="panel-heading">
              <div>
                <p class="eyebrow">规则配置</p>
                <h2>预警触发条件</h2>
              </div>
              <button class="primary-button" type="button" id="saveRulesBtn" data-requires="rules:edit">保存规则</button>
            </div>
            <form class="settings-form">
              <label>
                <span>红色预警条件</span>
                <select>
                  <option>A/A+ 客户重复反馈 2 次以上</option>
                  <option>满意度低于 3 分</option>
                  <option>客户明确投诉或停工风险</option>
                </select>
              </label>
              <label>
                <span>橙色预警条件</span>
                <select>
                  <option>同类问题未形成处置方案</option>
                  <option>材料/设计变更影响节点</option>
                </select>
              </label>
              <label>
                <span>核查要求</span>
                <select>
                  <option>所有红色预警必须监察部核查</option>
                  <option>A/A+ 客户所有反馈必须核查</option>
                </select>
              </label>
            </form>
          </article>

          <article class="panel">
            <div class="panel-heading">
              <div>
                <p class="eyebrow">后台权限</p>
                <h2>角色操作授权</h2>
              </div>
            </div>
            <div class="permission-list">
              <div><strong>管理层</strong><span>查看全局、督办、指派责任人</span></div>
              <div><strong>交付助理</strong><span>提交反馈、上传现场证据</span></div>
              <div><strong>项目经理</strong><span>补充根因、提交处置完成</span></div>
              <div><strong>监察部</strong><span>通过/驳回核查、标记已处理</span></div>
            </div>
          </article>
        </div>
      </section>

      <section class="page-section" data-section="admin">
        <div class="kpi-grid admin-kpis" aria-label="后台管理指标">
          <article class="metric-card">
            <span>后台账号</span>
            <strong id="adminUserCount">0</strong>
            <em>可登录系统账号</em>
          </article>
          <article class="metric-card">
            <span>启用账号</span>
            <strong id="adminActiveUserCount">0</strong>
            <em>当前允许登录</em>
          </article>
          <article class="metric-card">
            <span>角色数量</span>
            <strong id="adminRoleCount">0</strong>
            <em>后台权限角色</em>
          </article>
          <article class="metric-card">
            <span>操作权限</span>
            <strong id="adminPermissionCount">0</strong>
            <em>由服务器统一校验</em>
          </article>
          <article class="metric-card">
            <span>待审核客户</span>
            <strong id="adminPendingCustomerCount">0</strong>
            <em>非管理员提交后进入审核池</em>
          </article>
        </div>

        <article class="panel">
          <div class="panel-heading">
            <div>
              <p class="eyebrow">客户入池审核</p>
              <h2>管理员审核池</h2>
            </div>
            <span class="panel-chip" id="adminCustomerReviewCount">0 单待审核</span>
          </div>
          <div class="table-wrap admin-review-wrap">
            <table class="admin-review-table">
              <thead>
                <tr>
                  <th>审核单</th>
                  <th>客户</th>
                  <th>等级</th>
                  <th>提交人</th>
                  <th>客管负责人</th>
                  <th>入选说明</th>
                  <th>提交时间</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="customerReviewRows"></tbody>
            </table>
          </div>
        </article>

        <div class="section-grid two admin-grid">
          <article class="panel">
            <div class="panel-heading">
              <div>
                <p class="eyebrow">账号管理</p>
                <h2>登录账号与角色</h2>
              </div>
            </div>
            <form class="settings-form compact-form" id="adminUserForm">
              <label><span>登录账号</span><input name="username" type="text" placeholder="例如：service01" required></label>
              <label><span>登录密码</span><input name="password" type="password" placeholder="初始密码" required></label>
              <label><span>姓名/显示名</span><input name="displayName" type="text" placeholder="例如：服务部主管" required></label>
              <label><span>手机号</span><input name="phone" type="tel" inputmode="numeric" placeholder="用于名册匹配，可选"></label>
              <label><span>所属部门</span><input name="department" type="text" placeholder="例如：光宸筑境设计工作室"></label>
              <label><span>岗位</span><input name="position" type="text" placeholder="例如：设计经理"></label>
              <label><span>角色</span><select name="role" id="adminUserRoleSelect"></select></label>
              <label><span>状态</span><select name="status"><option>启用</option><option>停用</option></select></label>
              <div class="form-actions">
                <button class="primary-button" type="submit">新增账号</button>
              </div>
            </form>
            <div class="table-wrap admin-table-wrap">
              <table class="admin-table">
                <thead>
                  <tr>
                    <th>账号</th>
                    <th>姓名</th>
                    <th>手机号</th>
                    <th>部门</th>
                    <th>岗位</th>
                    <th>角色</th>
                    <th>状态</th>
                    <th>重置密码</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody id="adminUserRows"></tbody>
              </table>
            </div>
          </article>

          <article class="panel">
            <div class="panel-heading">
              <div>
                <p class="eyebrow">后台权限</p>
                <h2>角色页面与操作授权</h2>
              </div>
            </div>
            <div class="role-card-list" id="adminRoleCards"></div>
          </article>
        </div>

        <article class="panel">
          <div class="panel-heading">
            <div>
              <p class="eyebrow">基础配置</p>
              <h2>字典与下拉项</h2>
            </div>
            <button class="primary-button" type="submit" form="adminDictionaryForm">保存字典</button>
          </div>
          <form class="dictionary-form" id="adminDictionaryForm">
            <label>
              <span>责任部门</span>
              <textarea name="departments" rows="5" placeholder="每行一个部门"></textarea>
            </label>
            <label>
              <span>客户来源</span>
              <textarea name="customerSources" rows="5" placeholder="每行一个来源"></textarea>
            </label>
            <label>
              <span>问题来源</span>
              <textarea name="issueSources" rows="5" placeholder="线下巡检&#10;客户群反馈"></textarea>
            </label>
            <label>
              <span>问题类型</span>
              <textarea name="issueTypes" rows="5" placeholder="每行一个问题类型"></textarea>
            </label>
            <label>
              <span>当前进度</span>
              <textarea name="progressStatuses" rows="5" placeholder="正常&#10;延期"></textarea>
            </label>
          </form>
        </article>
      </section>
    </main>
  </div>

  <div class="drawer-backdrop" id="drawerBackdrop" hidden></div>
  <aside class="detail-drawer" id="detailDrawer" aria-label="问题详情" aria-hidden="true">
    <div class="drawer-header">
      <div>
        <p class="eyebrow">问题详情</p>
        <h2 id="drawerName">客户姓名</h2>
      </div>
      <button class="icon-button" type="button" data-close-drawer aria-label="关闭详情">×</button>
    </div>
    <div class="drawer-body">
      <div class="detail-score">
        <span>问题影响评分</span>
        <strong id="drawerScore">88</strong>
      </div>
      <dl class="detail-list">
        <div><dt>预警状态</dt><dd id="drawerStatus"></dd></div>
        <div><dt>责任部门</dt><dd id="drawerDepartment"></dd></div>
        <div><dt>问题类型</dt><dd id="drawerType"></dd></div>
        <div><dt>责任人</dt><dd id="drawerOwner"></dd></div>
        <div><dt>处置后满意度</dt><dd id="drawerPostSatisfaction"></dd></div>
        <div><dt>最近处置</dt><dd id="drawerLatestHandle"></dd></div>
      </dl>
      <section class="detail-block">
        <h3>问题描述</h3>
        <p id="drawerSummary"></p>
      </section>
      <section class="detail-block">
        <h3>处置记录</h3>
        <div class="record-list" id="drawerHandlingRecords"></div>
      </section>
      <section class="timeline">
        <h3>问题链路与分析</h3>
        <ol id="drawerTimeline"></ol>
      </section>
      <div class="drawer-actions">
        <button class="ghost-button" type="button" data-drawer-action="assign" data-requires="issue:assign">指派责任人</button>
        <button class="primary-button" type="button" data-drawer-action="handle" data-requires="issue:handle">提交处置</button>
        <button class="success-button" type="button" data-drawer-action="approve" data-requires="audit:review">核查通过</button>
        <button class="danger-button" type="button" data-drawer-action="reject" data-requires="audit:review">驳回整改</button>
      </div>
    </div>
  </aside>

  <aside class="detail-drawer" id="customerDrawer" aria-label="客户详情" aria-hidden="true">
    <div class="drawer-header">
      <div>
        <p class="eyebrow">客户详情</p>
        <h2 id="customerDrawerName">客户姓名</h2>
      </div>
      <button class="icon-button" type="button" data-close-customer-drawer aria-label="关闭客户详情">×</button>
    </div>
    <div class="drawer-body">
      <div class="detail-score">
        <span>巡查与否</span>
        <strong id="customerDrawerInspectionFlag">未巡查</strong>
      </div>
      <dl class="detail-list">
        <div><dt>客户等级</dt><dd id="customerDrawerTier"></dd></div>
        <div><dt>客户来源</dt><dd id="customerDrawerSource"></dd></div>
        <div><dt>客管负责人</dt><dd id="customerDrawerCustomerOwner"></dd></div>
        <div><dt>责任部门</dt><dd id="customerDrawerDepartment"></dd></div>
        <div><dt>设计师</dt><dd id="customerDrawerDesigner"></dd></div>
        <div><dt>项目经理</dt><dd id="customerDrawerManager"></dd></div>
        <div><dt>施工阶段</dt><dd id="customerDrawerStage"></dd></div>
        <div><dt>开工日期</dt><dd id="customerDrawerStartDate"></dd></div>
        <div><dt>计划完工日期</dt><dd id="customerDrawerPlannedFinishDate"></dd></div>
        <div><dt>当前进度</dt><dd id="customerDrawerProgressStatus"></dd></div>
        <div><dt>满意度</dt><dd id="customerDrawerSatisfaction"></dd></div>
        <div><dt>巡查状态</dt><dd id="customerDrawerInspectionStatus"></dd></div>
        <div><dt>巡查人</dt><dd id="customerDrawerInspector"></dd></div>
        <div><dt>最近巡查</dt><dd id="customerDrawerInspectionAt"></dd></div>
      </dl>
      <section class="detail-block">
        <h3>新居地址</h3>
        <p id="customerDrawerAddress"></p>
      </section>
      <section class="detail-block">
        <h3>重点客户入选说明</h3>
        <p id="customerDrawerKeyReason"></p>
      </section>
      <section class="detail-block">
        <h3>巡查结论</h3>
        <p id="customerDrawerInspectionSummary"></p>
      </section>
      <section class="detail-block">
        <h3>关联问题</h3>
        <div class="record-list" id="customerDrawerIssues"></div>
      </section>
      <div class="drawer-actions">
        <button class="ghost-button" type="button" data-customer-drawer-action="inspection" data-requires="inspection:create">提交日查</button>
        <button class="primary-button" type="button" data-customer-drawer-action="feedback" data-requires="issue:create">提交反馈</button>
      </div>
    </div>
  </aside>

  <div class="modal-backdrop" id="modalBackdrop" hidden></div>

  <section class="modal" id="inspectionModal" aria-label="每日线上巡查" aria-hidden="true">
    <div class="modal-header">
      <div>
        <p class="eyebrow">内部巡查入口</p>
        <h2>提交每日线上巡查</h2>
      </div>
      <button class="icon-button" type="button" data-close-modal aria-label="关闭">×</button>
    </div>
    <form id="inspectionForm" class="modal-form">
      <label>
        <span>巡查客户</span>
        <select name="customerId" id="inspectionCustomerSelect"></select>
      </label>
      <label>
        <span>巡查状态</span>
        <select name="status">
          <option>已巡查</option>
          <option>异常</option>
          <option>未巡查</option>
        </select>
      </label>
      <label>
        <span>巡查人</span>
        <input name="inspector" type="text" placeholder="默认使用当前登录人">
      </label>
      <label>
        <span>施工质量</span>
        <select name="siteQuality">
          <option>正常</option>
          <option>存在施工质量疑问</option>
          <option>需现场复核</option>
        </select>
      </label>
      <label>
        <span>文明施工</span>
        <select name="civility">
          <option>现场整洁</option>
          <option>现场杂乱</option>
          <option>材料堆放需整改</option>
          <option>抽烟/卫生问题</option>
        </select>
      </label>
      <label>
        <span>客户群反馈</span>
        <select name="groupFeedback">
          <option>暂无新增反馈</option>
          <option>客户群有疑问待回复</option>
          <option>客户明确表达不满</option>
          <option>需设计师/项目经理介入</option>
        </select>
      </label>
      <label class="full">
        <span>巡查结论</span>
        <textarea name="summary" rows="3" placeholder="记录线上巡查看到的客户群情况、现场照片反馈、需要转办的问题"></textarea>
      </label>
      <div class="form-actions full">
        <button class="ghost-button" type="button" data-close-modal>取消</button>
        <button class="primary-button" type="submit">保存日查情况</button>
      </div>
    </form>
  </section>

  <section class="modal" id="issueModal" aria-label="新增问题反馈" aria-hidden="true">
    <div class="modal-header">
      <div>
        <p class="eyebrow">表单提交界面</p>
        <h2>新增问题反馈</h2>
      </div>
      <button class="icon-button" type="button" data-close-modal aria-label="关闭">×</button>
    </div>
    <form id="issueForm" class="modal-form">
      <label>
        <span>客户搜索</span>
        <input id="issueCustomerSearch" type="search" placeholder="输入客户姓名或地址">
      </label>
      <label>
        <span>关联客户</span>
        <select name="customerId" id="issueCustomerSelect"></select>
      </label>
      <label>
        <span>问题来源</span>
        <select name="source">
          <option>线下巡检</option>
          <option>客户群反馈</option>
          <option>每日线上巡查</option>
          <option>客户主动反馈</option>
          <option>管理层转办</option>
          <option>监察部发现</option>
        </select>
      </label>
      <label>
        <span>问题类型</span>
        <select name="type">
          <option>施工质量</option>
          <option>设计变更</option>
          <option>沟通响应</option>
          <option>材料交付</option>
          <option>客户满意度</option>
        </select>
      </label>
      <label>
        <span>预警级别</span>
        <select name="status">
          <option>红色预警</option>
          <option>橙色预警</option>
          <option>蓝色关注</option>
        </select>
      </label>
      <label>
        <span>责任人</span>
        <input name="owner" type="text" placeholder="输入责任人姓名" required>
      </label>
      <label>
        <span>预计核查时间</span>
        <input name="auditDue" type="date" required>
      </label>
      <label class="full">
        <span>问题描述 / 客户反馈原文</span>
        <textarea name="summary" rows="3" placeholder="记录客户原话、现场情况、影响程度" required></textarea>
      </label>
      <label class="full">
        <span>初步根因分析</span>
        <textarea name="rootCause" rows="3" placeholder="例如：设计交底不清、材料延期、现场沟通断点"></textarea>
      </label>
      <div class="form-actions full">
        <button class="ghost-button" type="button" data-close-modal>取消</button>
        <button class="primary-button" type="submit">提交并进入预警池</button>
      </div>
    </form>
  </section>

  <section class="modal" id="handleModal" aria-label="提交处置记录" aria-hidden="true">
    <div class="modal-header">
      <div>
        <p class="eyebrow">处置流水</p>
        <h2>提交处置记录</h2>
      </div>
      <button class="icon-button" type="button" data-close-modal aria-label="关闭">×</button>
    </div>
    <form id="handleForm" class="modal-form">
      <label class="full">
        <span>处置说明</span>
        <textarea name="handlerNote" rows="3" placeholder="记录处理方案、已完成动作、下一步安排" required></textarea>
      </label>
      <label>
        <span>处置后满意度</span>
        <select name="satisfaction">
          <option>满意</option>
          <option>一般</option>
          <option>不满意</option>
          <option>待回访</option>
        </select>
      </label>
      <label>
        <span>客户回访结果</span>
        <input name="customerFeedback" type="text" placeholder="例如：客户认可整改，要求持续观察">
      </label>
      <div class="form-actions full">
        <button class="ghost-button" type="button" data-close-modal>取消</button>
        <button class="primary-button" type="submit">提交并转监察核查</button>
      </div>
    </form>
  </section>

  <section class="modal" id="customerModal" aria-label="新增客户" aria-hidden="true">
    <div class="modal-header">
      <div>
        <p class="eyebrow">客户录入</p>
        <h2>新增重要客户</h2>
      </div>
      <button class="icon-button" type="button" data-close-modal aria-label="关闭">×</button>
    </div>
    <form id="customerForm" class="modal-form">
      <label><span>客户姓名</span><input name="name" type="text" placeholder="例如：李女士" required></label>
      <label><span>客户等级</span><select name="tier"><option>A</option><option>A+</option></select></label>
      <label><span>客户来源</span><select name="source"><option>转介绍</option><option>公司特殊关系</option><option>标杆项目</option><option>风险关注</option></select></label>
      <label><span>责任部门</span><select name="department"><option>光宸</option><option>澜光</option><option>蘭堂</option><option>焕境</option></select></label>
      <label><span>客管人员负责人</span><input name="customerOwner" type="text" placeholder="例如：客管负责人姓名" required></label>
      <label><span>设计师</span><input name="designer" type="text" required></label>
      <label><span>项目经理</span><input name="manager" type="text" required></label>
      <label class="full"><span>新居地址</span><input name="address" type="text" placeholder="楼盘/楼栋/房号" required></label>
      <label><span>施工阶段</span><input name="stage" type="text" placeholder="例如：木作安装"></label>
      <label><span>开工日期</span><input name="startDate" type="date"></label>
      <label><span>计划完工日期</span><input name="plannedFinishDate" type="date"></label>
      <label><span>当前进度</span><select name="progressStatus"><option>正常</option><option>延期</option></select></label>
      <label><span>满意度</span><select name="satisfaction"><option>5</option><option>4</option><option>3</option><option>2</option><option>1</option></select></label>
      <label class="full"><span>重点客户入选说明</span><textarea name="keyCustomerReason" rows="3" placeholder="说明推荐关系、标杆价值、特殊关注原因或问题风险" required></textarea></label>
      <div class="form-actions full">
        <button class="ghost-button" type="button" data-close-modal>取消</button>
        <button class="primary-button" type="submit">提交客户入池</button>
      </div>
    </form>
  </section>

  <div class="toast" id="toast" role="status" aria-live="polite"></div>

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