<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta name="theme-color" content="#111412" />
    <title>配库 · 电脑配件库存管理</title>
        <link rel="stylesheet" href="styles.css?v=20260907-13" />
  </head>
  <body>
    <section class="auth-screen" id="auth-screen" aria-live="polite">
      <div class="auth-masthead">
        <span class="auth-brand-mark">P</span>
        <div><strong>配库</strong><small>PARTS LEDGER</small></div>
      </div>
      <div class="auth-copy">
        <span>STAFF ACCESS</span>
        <h1>库存从登录开始。</h1>
        <p>电脑配件库存与销售管理</p>
      </div>
      <form class="login-form" id="login-form">
        <label><span>登录账号</span><input name="username" autocomplete="username" required placeholder="请输入账号" /></label>
        <label><span>登录密码</span><input name="password" type="password" autocomplete="current-password" required placeholder="请输入密码" /></label>
        <p class="form-error" id="login-error" role="alert"></p>
        <button class="submit-button" type="submit">登录系统</button>
      </form>
      <p class="auth-status" id="auth-status">正在连接账户服务</p>
    </section>

    <div class="app-shell is-locked" id="app-shell">
      <aside class="sidebar" aria-label="主导航">
        <div class="brand">
          <span class="brand-mark">P</span>
          <div>
            <strong>配库</strong>
            <small>PARTS LEDGER</small>
          </div>
        </div>
        <nav class="side-nav">
          <button class="nav-item active" data-page="dashboard"><span>⌂</span>首页看板</button>
          <button class="nav-item" data-page="inventory"><span>▦</span>配件库存</button>
          <button class="nav-item" data-page="inbound-log"><span>↧</span>入库流水</button>
          <button class="nav-item" data-page="sales" data-permission="sales:write"><span>↑</span>销售出库</button>
          <button class="nav-item" data-page="profile"><span>●</span>我的账户</button>
        </nav>
      </aside>

      <main class="main-content">
        <header class="topbar">
          <div>
            <p class="eyebrow" id="page-eyebrow">2026年7月29日 · 星期三</p>
            <h1 id="page-title">库存总览</h1>
          </div>
          <div class="top-actions">
            <label class="global-search">
              <span>⌕</span>
              <input id="global-search" type="search" placeholder="姓名 / 型号 / 序列号" />
            </label>
            <button class="icon-button mobile-search-button" id="mobile-search-button" aria-label="搜索配件" title="搜索">⌕</button>
            <button class="icon-button sync-button syncing" id="sync-button" aria-label="同步云端数据" title="同步云端数据">↻</button>
            <button class="icon-button" id="notification-button" aria-label="查看提醒" title="库存提醒">!</button>
            <button class="user-button" id="current-user-button" data-page="profile" aria-label="打开个人中心">·</button>
          </div>
        </header>

        <section class="page active" id="dashboard-page">
          <div class="hero-strip">
            <div>
              <span class="status-label">今日经营状态</span>
              <h2>库存清楚，利润有数。</h2>
              <p id="hero-summary">正在核算今日库存...</p>
            </div>
            <button class="primary-button" data-open="inbound" data-permission="inbound:write"><span>＋</span>登记入库</button>
          </div>

          <div class="metrics-grid" id="metrics-grid"></div>

          <section class="dashboard-insights" data-permission="finance:read">
            <section class="content-block trend-block">
              <div class="section-head">
                <div><span class="section-kicker">TREND</span><h3>近 7 日销售趋势</h3></div>
                <div class="trend-legend" aria-label="图例"><span><i class="revenue"></i>销售额</span><span><i class="profit"></i>利润</span></div>
              </div>
              <div class="trend-summary"><span>近 7 日销售<strong id="week-revenue">¥0</strong></span><span>近 7 日利润<strong id="week-profit">¥0</strong></span></div>
              <div class="weekly-trend-chart" id="weekly-trend-chart" role="img" aria-label="近 7 日销售额与利润趋势"></div>
            </section>

            <section class="content-block daily-goal-block">
              <div class="section-head">
                <div><span class="section-kicker">SALES FORECAST</span><h3>每日预期售卖额</h3></div>
                <button class="text-button" id="daily-goal-edit" data-permission="users:manage" type="button">调整系数</button>
              </div>
              <div class="daily-goal-body">
                <span class="daily-goal-label" id="forecast-target-date">明日目标售卖额</span>
                <strong class="daily-goal-value" id="daily-goal-value">¥0</strong>
                <div class="daily-goal-metrics"><span>预测售卖额 P<strong id="forecast-prediction">¥0</strong></span><span>星期基准 Pbase<strong id="forecast-base-average">¥0</strong></span><span>趋势比 r<strong id="forecast-trend-ratio">1.00</strong></span><span>上浮系数 k<strong id="forecast-multiplier">1.10</strong></span></div>
                <p class="forecast-method-note" id="forecast-method-note">正在计算预测结果</p>
              </div>
              <form class="daily-goal-form" id="daily-goal-form" hidden>
                <label><span>目标上浮系数 k</span><div class="factor-input"><input name="goalMultiplier" type="number" min="0" max="10" step="0.01" required inputmode="decimal" /><b>倍</b></div></label>
                <div><button class="outline-button" id="daily-goal-cancel" type="button">取消</button><button class="primary-button" type="submit">保存系数</button></div>
              </form>
            </section>
          </section>

          <div class="dashboard-grid">
            <section class="content-block stock-block">
              <div class="section-head">
                <div><span class="section-kicker">STOCK</span><h3>最近入库</h3></div>
                <button class="text-button" data-page="inventory">查看全部 →</button>
              </div>
              <div class="compact-list" id="recent-stock"></div>
            </section>

            <section class="content-block profit-block" data-permission="finance:read">
              <div class="section-head">
                <div><span class="section-kicker">PROFIT</span><h3>销售利润</h3></div>
                <span class="period-pill">本月</span>
              </div>
              <div class="profit-highlight">
                <small>本月已实现利润</small>
                <strong id="month-profit">¥0</strong>
                <span id="month-margin">毛利率 0%</span>
              </div>
              <div class="seller-list" id="seller-list"></div>
            </section>
          </div>

          <section class="content-block alert-block">
            <div class="section-head">
              <div><span class="section-kicker">ATTENTION</span><h3>需要处理</h3></div>
              <span class="count-badge" id="attention-count">0</span>
            </div>
            <div class="alert-list" id="attention-list"></div>
          </section>
        </section>

        <section class="page" id="inventory-page">
          <div class="page-actions">
            <div class="filter-row">
              <button class="filter-chip active" data-filter="全部">全部</button>
              <button class="filter-chip" data-filter="在库">在库</button>
              <button class="filter-chip" data-filter="低库存">低库存</button>
              <button class="filter-chip" data-filter="整机">整机</button>
            </div>
            <div class="page-action-buttons">
              <button class="primary-button assembly-button" type="button" data-open-assembly data-permission="inbound:write"><span class="button-code" aria-hidden="true">PC</span>组合整机</button>
              <button class="primary-button" type="button" data-open="inbound" data-permission="inbound:write"><span>＋</span>登记入库</button>
            </div>
          </div>
          <div class="catalog-filter-bar inventory-filter-bar" aria-label="库存筛选">
            <label><span>商品分类</span><select id="inventory-category-filter"><option value="">全部分类</option></select></label>
            <label class="date-range-filter"><span>入库日期范围</span><div><input id="inventory-date-filter" type="date" aria-label="入库开始日期" /><b>至</b><input id="inventory-date-filter-end" type="date" aria-label="入库结束日期" /></div></label>
            <label><span>来源</span><input id="inventory-source-type-filter" type="search" placeholder="输入来源" autocomplete="off" /></label>
            <label><span>付款状态</span><select id="inventory-payment-status-filter"><option value="">全部付款状态</option><option>已付款</option><option>未付款</option><option>未登记</option></select></label>
          </div>
          <div class="inventory-summary" id="inventory-summary"></div>
          <section class="content-block table-block">
            <div class="inventory-table-wrap">
              <table class="inventory-table">
                <thead><tr><th>入库日期 / 来源 / 收货人 / 仓位</th><th>型号</th><th>成色</th><th>单价</th><th>数量</th><th>金额</th><th>付款状态</th><th>操作</th></tr></thead>
                <tbody id="inventory-table-body"></tbody>
              </table>
            </div>
            <div class="inventory-cards" id="inventory-cards"></div>
          </section>
        </section>

        <section class="page" id="inbound-log-page">
          <div class="page-actions">
            <div><p class="eyebrow">INBOUND LOG</p><h2 class="page-heading">入库流水</h2></div>
            <span class="privacy-note">记录所有历史入库</span>
          </div>
          <div class="catalog-filter-bar inbound-log-filter-bar" aria-label="入库流水筛选">
            <label><span>搜索入库记录</span><input id="inbound-log-search" type="search" placeholder="型号、批次、件号、来源或收货人" autocomplete="off" /></label>
            <label><span>商品分类</span><select id="inbound-log-category-filter"><option value="">全部分类</option></select></label>
            <label class="date-range-filter"><span>入库日期范围</span><div><input id="inbound-log-date-filter" type="date" aria-label="入库开始日期" /><b>至</b><input id="inbound-log-date-filter-end" type="date" aria-label="入库结束日期" /></div></label>
            <label><span>来源</span><input id="inbound-log-source-type-filter" type="search" placeholder="输入来源" autocomplete="off" /></label>
            <label><span>付款状态</span><select id="inbound-log-payment-status-filter"><option value="">全部付款状态</option><option>已付款</option><option>未付款</option><option>未登记</option></select></label>
          </div>
          <div class="inventory-summary inbound-log-summary" id="inbound-log-summary"></div>
          <section class="content-block">
            <div class="section-head"><div><span class="section-kicker">INBOUND HISTORY</span><h3>入库记录</h3></div><span class="privacy-note" id="inbound-log-count">0 条</span></div>
            <div class="timeline" id="inbound-timeline"></div>
          </section>
        </section>

        <section class="page" id="sales-page">
          <div class="page-actions">
            <div class="sales-tabs" role="tablist">
              <button class="active" data-sales-tab="all">全部销售</button>
              <button data-sales-tab="single">散件</button>
              <button data-sales-tab="build">整机</button>
            </div>
            <button class="primary-button accent" data-open="sale" data-permission="sales:write"><span>↑</span>销售开单</button>
          </div>
          <div class="catalog-filter-bar sales-record-filter-bar" aria-label="销售记录筛选">
            <label><span>搜索销售记录</span><input id="sales-record-search" type="search" placeholder="商品、编号、客户或销售人" autocomplete="off" /></label>
            <label><span>商品分类</span><select id="sales-record-category-filter"><option value="">全部分类</option></select></label>
            <label class="date-range-filter"><span>销售日期范围</span><div><input id="sales-record-date-filter" type="date" aria-label="销售开始日期" /><b>至</b><input id="sales-record-date-filter-end" type="date" aria-label="销售结束日期" /></div></label>
            <label><span>来源</span><input id="sales-record-source-type-filter" type="search" placeholder="输入来源" autocomplete="off" /></label>
            <label><span>付款状态</span><select id="sales-record-payment-status-filter"><option value="">全部付款状态</option><option>已付款</option><option>未付款</option><option>未登记</option></select></label>
          </div>
          <div class="sales-metrics" id="sales-metrics"></div>
          <section class="content-block">
            <div class="section-head">
              <div><span class="section-kicker">SALES LOG</span><h3>销售记录</h3></div>
              <span class="privacy-note">机主资料完整显示</span>
            </div>
            <div id="sales-list">
              <div class="sales-table-wrap" tabindex="0" role="region" aria-label="销售记录">
                <table class="sales-table">
                  <thead><tr><th>销售日期 / 来源 / 销售人 / 购买人</th><th>型号</th><th>成色</th><th>单价</th><th>数量</th><th>金额</th><th>利润</th><th>操作</th></tr></thead>
                  <tbody id="sales-table-body"></tbody>
                </table>
              </div>
              <div class="sales-cards" id="sales-cards"></div>
            </div>
          </section>
        </section>

        <section class="page" id="profile-page">
          <div class="profile-header">
            <div class="profile-avatar" id="current-avatar">·</div>
            <div><span class="role-badge" id="current-role">账户</span><h2 id="current-name">正在读取</h2><p id="current-summary">—</p></div>
          </div>
          <div class="profile-grid">
            <section class="content-block">
              <div class="section-head"><div><span class="section-kicker">ACCOUNT</span><h3>账户安全</h3></div></div>
              <div class="settings-list">
                <div><span>登录账号</span><strong id="current-username">—</strong></div>
                <div><span>最近登录</span><strong id="current-last-login">—</strong></div>
                <div><span>身份证与手机号</span><strong>库存列表完整显示</strong></div>
              </div>
              <div class="account-actions"><button class="outline-button" id="change-password-button">修改密码</button><button class="danger-text-button" id="logout-button">退出登录</button></div>
            </section>
            <section class="content-block">
              <div class="section-head"><div><span class="section-kicker">DATA</span><h3>数据管理</h3></div></div>
              <div class="data-actions">
                <button class="outline-button" id="backup-button" data-permission="data:export">导出云端备份</button>
              </div>
              <p class="data-tip">库存与销售记录以服务器数据为准，在电脑和手机登录同一系统即可自动同步。首次启用时，管理员需核对本机数据并点击同步按钮确认初始化。</p>
            </section>
            <section class="content-block account-admin-block" data-permission="users:manage">
              <div class="section-head"><div><span class="section-kicker">TEAM</span><h3>员工账号</h3></div><button class="primary-button compact" id="add-user-button">＋ 新增</button></div>
              <div class="user-list" id="user-list"><div class="empty-state">正在读取账号</div></div>
            </section>
          </div>
        </section>
      </main>

      <nav class="bottom-nav" aria-label="手机端主导航">
        <button class="active" data-page="dashboard"><span>⌂</span><small>首页</small></button>
        <button data-page="inventory"><span>▦</span><small>库存</small></button>
        <button data-page="inbound-log"><span>↧</span><small>流水</small></button>
        <button data-page="sales" data-permission="sales:write"><span>↑</span><small>销售</small></button>
        <button data-page="profile"><span>●</span><small>我的</small></button>
      </nav>
    </div>

    <div class="drawer-backdrop" id="drawer-backdrop"></div>

    <aside class="drawer inbound-drawer" id="inbound-drawer" aria-hidden="true">
      <div class="drawer-head"><div><span class="section-kicker" id="inbound-drawer-kicker">NEW INBOUND</span><h2 id="inbound-drawer-title">登记入库</h2></div><div class="inbound-drawer-actions"><button class="drawer-draft-button" id="inbound-draft-button" type="button">暂存</button><button class="drawer-exit-button" id="inbound-exit-button" type="button">退出</button></div></div>
      <form id="inbound-form" class="drawer-form">
        <div class="mode-switch inbound-mode-switch" role="tablist" aria-label="入库模式"><button type="button" class="active" data-inbound-mode="stock" aria-selected="true">配件入库</button><button type="button" data-inbound-mode="assembly" aria-selected="false">组合整机</button></div>
        <fieldset><legend>机主信息</legend><div class="form-grid">
          <label><span>机主姓名</span><input name="ownerName" placeholder="请输入姓名" /></label>
          <label><span>联系电话</span><input name="phone" inputmode="tel" maxlength="11" placeholder="11位手机号" /></label>
          <label class="full"><span>身份证号</span><input name="idNumber" maxlength="18" placeholder="请输入身份证号" /></label>
        </div></fieldset>
        <fieldset class="inbound-info-fieldset"><legend>入库信息</legend><div class="form-grid">
          <label><span>入库日期 *</span><input name="inDate" required type="date" value="2026-07-29" /></label>
          <input name="sourceType" type="hidden" value="未登记" />
          <label><span>来源</span><input name="source" maxlength="100" placeholder="例如 散客、商家、同行调货" /></label>
          <label><span>仓位</span><input name="location" placeholder="例如 A-01-03" /></label>
          <label><span>付款状态</span><select name="paymentStatus"><option value="未登记" selected>未登记</option><option>已付款</option><option>未付款</option></select></label>
          <label><span>收货人 *</span><select name="receiver" required><option>当前账号</option></select></label>
          <label class="full"><span>备注</span><textarea name="note" rows="3" placeholder="包装、附件或质保说明"></textarea></label>
        </div></fieldset>
        <fieldset class="inbound-lines-fieldset" id="inbound-lines-fieldset"><legend>配件明细</legend>
          <div class="inbound-lines-summary" data-part-only>
            <div><strong id="inbound-line-count">1 种配件</strong><small>不同型号分行登记</small></div>
            <div class="inbound-lines-total"><strong id="inbound-total-cost">入库总价 ¥0</strong><small>单位成本 × 数量</small></div>
          </div>
          <div class="inbound-part-lines" id="inbound-part-lines">
            <section class="inbound-part-line" data-part-line>
              <div class="inbound-line-head"><strong>配件 1</strong></div>
              <div class="inbound-line-entry">
              <div class="form-grid">
                <label class="inbound-field-category"><span>商品类别 *</span><select name="category" required data-line-field="category"><option>CPU</option><option>主板</option><option>内存</option><option>硬盘</option><option>显卡</option><option>电源</option><option>机箱</option><option>散热器</option><option>风扇</option><option>显示器</option><option>外设</option><option value="整机">整机（组合已有散件）</option><option>笔记本</option><option>其他</option></select></label>
                <label data-part-only data-accessory-only hidden><span>品牌</span><input name="brand" data-line-field="brand" placeholder="例如 AMD" /></label>
                <label class="inbound-field-model full" data-part-only><span>型号名称 *</span><input name="model" data-line-field="model" required placeholder="例如 Ryzen 7 7800X3D" /></label>
                <label data-part-only data-accessory-only hidden><span>序列号</span><input name="serial" data-line-field="serial" placeholder="SN / Serial Number" /></label>
                <label class="inbound-field-quantity" data-part-only><span>数量 *</span><input name="quantity" data-line-field="quantity" required type="number" min="1" max="1000" value="1" /></label>
                <label data-part-only data-accessory-only hidden><span>包装状态</span><select name="packaging" data-line-field="packaging"><option value="">未登记</option><option>原盒完整</option><option>仅有盒子</option><option>无盒</option><option>散片</option></select></label>
                <label class="inbound-field-condition" data-part-only><span>成色</span><select name="condition" data-line-field="condition"><option>二手</option><option>全新</option></select></label>
                <div class="notebook-fields" data-notebook-fields hidden>
                  <div class="notebook-fields-head"><strong>笔记本配置</strong><small>每台设备独立登记，数量固定为 1</small></div>
                  <div class="form-grid notebook-fields-grid">
                    <label><span>CPU 型号 *</span><input name="notebookCpu" data-line-field="notebookCpu" data-notebook-required maxlength="100" placeholder="例如 Intel Core i7-13620H" /></label>
                    <label><span>显卡型号</span><input name="notebookGpu" data-line-field="notebookGpu" maxlength="100" placeholder="核显 / RTX 4060" /></label>
                    <label><span>内存容量 *</span><input name="notebookMemory" data-line-field="notebookMemory" data-notebook-required maxlength="80" placeholder="例如 16GB DDR5" /></label>
                    <label><span>硬盘容量 *</span><input name="notebookStorage" data-line-field="notebookStorage" data-notebook-required maxlength="80" placeholder="例如 1TB SSD" /></label>
                    <label><span>屏幕尺寸</span><input name="notebookScreenSize" data-line-field="notebookScreenSize" maxlength="40" placeholder="例如 15.6 英寸" /></label>
                    <label><span>屏幕分辨率</span><input name="notebookResolution" data-line-field="notebookResolution" maxlength="40" placeholder="例如 2560 × 1440" /></label>
                    <label><span>充电器状态 *</span><select name="notebookCharger" data-line-field="notebookCharger" data-notebook-required><option value="">请选择</option><option>原装充电器</option><option>兼容充电器</option><option>无充电器</option></select></label>
                    <label><span>保修状态</span><select name="notebookWarranty" data-line-field="notebookWarranty"><option>未知</option><option>在保</option><option>已过保</option><option>无保修</option></select></label>
                    <label class="full"><span>外观 / 故障说明</span><textarea name="notebookAppearance" data-line-field="notebookAppearance" maxlength="500" rows="2" placeholder="划痕、磕碰、维修或功能异常"></textarea></label>
                  </div>
                </div>
                <label class="inbound-field-cost" data-part-only><span>单位成本 *</span><div class="money-input"><b>¥</b><input name="cost" data-line-field="cost" required type="number" min="0" step="0.01" placeholder="0.00" /></div></label>
                <label class="inbound-field-market" data-part-only><span>市场价格</span><div class="money-input"><b>¥</b><input name="marketPrice" data-line-field="marketPrice" type="number" min="0" step="0.01" placeholder="可不填" /></div></label>
              </div>
              <button class="remove-inbound-line" type="button" data-remove-inbound-line aria-label="删除配件">×</button>
              </div>
            </section>
          </div>
          <div class="inbound-line-actions" data-part-only>
            <button class="outline-button inbound-add-line-button" id="add-inbound-line" type="button">＋ 添加配件</button>
            <button class="outline-button inbound-copy-line-button" id="copy-inbound-line" type="button">复制配件</button>
          </div>
        </fieldset>
        <fieldset class="batch-assembly-fieldset" id="inbound-destination-option" data-part-only hidden><legend>入库去向</legend>
          <div class="batch-destination-options">
            <label class="batch-destination-option">
              <input name="inboundDestination" type="radio" value="stock" checked />
              <span class="batch-destination-body"><span class="batch-destination-radio" aria-hidden="true"><i></i></span><span class="batch-assembly-copy"><strong>仅入库为配件</strong><small>各配件独立进入库存，可单独销售</small></span></span>
            </label>
            <label class="batch-destination-option">
              <input name="inboundDestination" type="radio" value="existing" />
              <span class="batch-destination-body"><span class="batch-destination-radio" aria-hidden="true"><i></i></span><span class="batch-assembly-copy"><strong>加入已有整机</strong><small>全部实物编号归入所选在库整机</small></span></span>
            </label>
            <label class="batch-destination-option">
              <input name="inboundDestination" type="radio" value="new" />
              <span class="batch-destination-body"><span class="batch-destination-radio" aria-hidden="true"><i></i></span><span class="batch-assembly-copy"><strong>创建新的整机</strong><small>按一台配置复制为多台新整机</small></span></span>
            </label>
          </div>
          <div class="batch-assembly-name" id="existing-assembly-target-field" hidden>
            <label class="standalone-label"><span>选择整机 *</span><select name="targetAssemblyId" id="target-assembly-select"></select></label>
          </div>
          <div class="batch-assembly-name" id="batch-assembly-name-field" hidden>
            <label class="standalone-label"><span>整机名称 *</span><input name="batchAssemblyName" maxlength="100" placeholder="例如 客户主机 A01" /></label>
            <label class="standalone-label"><span>整机数量 *</span><input name="batchAssemblyQuantity" type="number" min="1" max="1000" step="1" value="1" required /><small class="field-hint">配件明细按一台整机填写，系统会按数量复制整套配置。</small></label>
          </div>
        </fieldset>
        <div id="assembly-fields" hidden>
          <fieldset><legend>整机组合</legend>
            <label class="standalone-label"><span>整机名称 *</span><input name="assemblyName" maxlength="100" placeholder="例如 直播主机 A01" /></label>
            <label class="standalone-label"><span>整机数量 *</span><input name="assemblyQuantity" type="number" min="1" max="1000" step="1" value="1" required /></label>
            <label class="standalone-label assembly-search-field"><span>搜索可用配件</span><input id="assembly-part-search" type="search" placeholder="型号、分类、批次或实物编号" autocomplete="off" /></label>
            <div class="assembly-selection-summary" id="assembly-selection-summary">已选 0 件散件 · 每台需要 0 件</div>
            <div class="parts-checklist assembly-parts-checklist" id="assembly-parts-checklist"></div>
          </fieldset>
        </div>
        <div class="numbering-preview"><span id="numbering-preview-label">每件自动编号</span><strong id="unit-code-preview">提交后自动生成</strong></div>
        <button class="submit-button" id="inbound-submit-button" type="submit">确认入库</button>
      </form>
    </aside>

    <aside class="drawer" id="edit-inbound-drawer" aria-hidden="true">
      <div class="drawer-head"><div><span class="section-kicker">EDIT INBOUND</span><h2>编辑入库记录</h2></div><button class="close-button" data-close aria-label="关闭">×</button></div>
      <form id="edit-inbound-form" class="drawer-form">
        <div class="numbering-preview"><span>批次 / 实物编号</span><strong id="edit-inbound-numbering">—</strong></div>
        <fieldset><legend>机主信息</legend><div class="form-grid">
          <label><span>机主姓名</span><input name="ownerName" maxlength="50" /></label>
          <label><span>联系电话</span><input name="phone" inputmode="tel" maxlength="32" /></label>
          <label class="full"><span>身份证号</span><input name="idNumber" maxlength="32" /></label>
        </div></fieldset>
        <fieldset><legend>配件明细</legend><div class="form-grid">
          <label><span>商品类别 *</span><select name="category" id="edit-inbound-category" required><option>CPU</option></select></label>
          <label data-accessory-only hidden><span>品牌</span><input name="brand" maxlength="50" /></label>
          <label class="full"><span>型号名称 *</span><input name="model" maxlength="120" required /></label>
          <label data-accessory-only hidden><span>序列号</span><input name="serial" maxlength="100" /></label>
          <label><span>原始入库数量</span><input name="quantity" readonly /></label>
          <label data-accessory-only hidden><span>包装状态</span><select name="packaging" id="edit-inbound-packaging"></select></label>
          <label><span>成色</span><select name="condition"><option value="">未登记</option><option>二手</option><option>全新</option></select></label>
          <div class="notebook-fields" id="edit-notebook-fields" hidden>
            <div class="notebook-fields-head"><strong>笔记本配置</strong><small>按单台设备维护</small></div>
            <div class="form-grid notebook-fields-grid">
              <label><span>CPU 型号 *</span><input name="notebookCpu" data-edit-notebook-required maxlength="100" /></label>
              <label><span>显卡型号</span><input name="notebookGpu" maxlength="100" /></label>
              <label><span>内存容量 *</span><input name="notebookMemory" data-edit-notebook-required maxlength="80" /></label>
              <label><span>硬盘容量 *</span><input name="notebookStorage" data-edit-notebook-required maxlength="80" /></label>
              <label><span>屏幕尺寸</span><input name="notebookScreenSize" maxlength="40" /></label>
              <label><span>屏幕分辨率</span><input name="notebookResolution" maxlength="40" /></label>
              <label><span>充电器状态 *</span><select name="notebookCharger" data-edit-notebook-required><option value="">请选择</option><option>原装充电器</option><option>兼容充电器</option><option>无充电器</option></select></label>
              <label><span>保修状态</span><select name="notebookWarranty"><option>未知</option><option>在保</option><option>已过保</option><option>无保修</option></select></label>
              <label class="full"><span>外观 / 故障说明</span><textarea name="notebookAppearance" maxlength="500" rows="2"></textarea></label>
            </div>
          </div>
        </div></fieldset>
        <fieldset id="edit-inbound-finance" data-permission="finance:read"><legend>价格信息</legend><div class="form-grid">
          <label><span>单位成本 *</span><div class="money-input"><b>¥</b><input name="cost" required type="number" min="0" step="0.01" /></div></label>
          <label><span>市场价格</span><div class="money-input"><b>¥</b><input name="marketPrice" type="number" min="0" step="0.01" placeholder="可不填" /></div></label>
        </div></fieldset>
        <fieldset><legend>入库信息</legend><div class="form-grid">
          <label><span>入库日期 *</span><input name="inDate" required type="date" /></label>
          <label><span>收货人 *</span><input name="receiver" maxlength="50" required /></label>
          <input name="sourceType" type="hidden" value="未登记" />
          <label><span>付款状态</span><select name="paymentStatus"><option>未登记</option><option>已付款</option><option>未付款</option></select></label>
          <label><span>仓位</span><input name="location" maxlength="50" /></label>
          <label><span>来源</span><input name="source" maxlength="100" placeholder="例如 散客、商家、同行调货" /></label>
          <label class="full"><span>备注</span><textarea name="note" rows="3" maxlength="500"></textarea></label>
        </div></fieldset>
        <button class="submit-button" type="submit">保存修改</button>
      </form>
    </aside>

    <aside class="drawer" id="edit-assembly-drawer" aria-hidden="true">
      <div class="drawer-head"><div><span class="section-kicker">EDIT ASSEMBLY</span><h2>编辑整机组合</h2></div><button class="close-button" data-close aria-label="关闭">×</button></div>
      <form id="edit-assembly-form" class="drawer-form">
        <div class="numbering-preview"><span>整机编号</span><strong id="edit-assembly-numbering">—</strong></div>
        <fieldset><legend>机主信息</legend><div class="form-grid">
          <label><span>机主姓名</span><input name="ownerName" maxlength="50" /></label>
          <label><span>联系电话</span><input name="phone" inputmode="tel" maxlength="32" /></label>
          <label class="full"><span>身份证号</span><input name="idNumber" maxlength="32" /></label>
        </div></fieldset>
        <fieldset><legend>整机组成</legend>
          <label class="standalone-label"><span>整机名称 *</span><input name="name" maxlength="100" required /></label>
          <label class="standalone-label assembly-search-field"><span>搜索整机配件</span><input id="edit-assembly-part-search" type="search" placeholder="型号、分类、批次或实物编号" autocomplete="off" /></label>
          <div class="parts-checklist assembly-parts-checklist" id="edit-assembly-parts-checklist"></div>
        </fieldset>
        <div class="assembly-edit-summary">
          <div><span>已选配件</span><strong id="edit-assembly-count">0 件</strong></div>
          <div data-permission="finance:read"><span>组合成本 / 市场参考</span><strong id="edit-assembly-price-preview">¥0 / ¥0</strong></div>
        </div>
        <fieldset><legend>组合信息</legend><div class="form-grid">
          <label><span>组合日期 *</span><input name="inDate" required type="date" /></label>
          <label><span>组合人 *</span><input name="receiver" maxlength="50" required /></label>
          <input name="sourceType" type="hidden" value="未登记" />
          <label><span>付款状态</span><select name="paymentStatus"><option>未登记</option><option>已付款</option><option>未付款</option></select></label>
          <label><span>仓位</span><input name="location" maxlength="50" /></label>
          <label><span>来源</span><input name="source" maxlength="100" placeholder="例如 散客、商家、同行调货" /></label>
          <label class="full"><span>备注</span><textarea name="note" rows="3" maxlength="500"></textarea></label>
        </div></fieldset>
        <button class="submit-button" type="submit">保存整机修改</button>
      </form>
    </aside>

    <aside class="drawer" id="sale-drawer" aria-hidden="true">
      <div class="drawer-head"><div><span class="section-kicker">NEW SALE</span><h2>销售开单</h2></div><button class="close-button" data-close aria-label="关闭">×</button></div>
      <form id="sale-form" class="drawer-form">
        <div class="mode-switch"><button type="button" class="active" data-sale-mode="single">散件销售</button><button type="button" data-sale-mode="build">整机销售</button></div>
        <div id="single-fields">
          <fieldset><legend>选择配件</legend><div class="form-grid">
            <div class="catalog-filter-tools full">
              <label><span>搜索销售商品</span><input id="sale-item-search" type="search" placeholder="品牌、型号或实物编号" autocomplete="off" /></label>
              <label><span>商品分类</span><select id="sale-item-category-filter"><option value="">全部分类</option></select></label>
            </div>
          </div></fieldset>
          <div class="sale-unit-options" id="sale-unit-options" role="group" aria-label="可售散件"></div>
          <div class="sale-selection-head"><strong id="sale-selection-count" aria-live="polite">已选 0 件</strong><button type="button" class="mini-button" id="sale-clear-selection" disabled>清空已选</button></div>
          <div class="sale-selected-lines" id="sale-selected-lines"></div>
        </div>
        <div id="build-fields" hidden>
          <fieldset><legend>整机配置</legend>
            <label class="standalone-label"><span>销售已入库整机</span><select name="assemblyId" id="sale-assembly-select"><option value="">不选择，临时挑选配件组装</option></select></label>
            <div class="sale-assembly-details" id="sale-assembly-details" aria-live="polite" hidden></div>
            <div id="custom-build-fields">
              <label class="standalone-label"><span>配置名称</span><input name="buildName" placeholder="例如 游戏主机 A01" /></label>
              <div class="parts-checklist" id="parts-checklist"></div>
            </div>
          </fieldset>
        </div>
        <fieldset><legend>销售信息</legend><div class="form-grid">
          <label class="full" id="total-price-field" hidden><span>整机成交价</span><div class="money-input"><b>¥</b><input name="totalSalePrice" type="number" min="0" step="0.01" /></div></label>
          <label><span>邮费</span><div class="money-input"><b>¥</b><input name="shippingCost" type="number" min="0" step="0.01" value="0" /></div></label>
          <label><span>其他费用</span><div class="money-input"><b>¥</b><input name="extraCost" type="number" min="0" step="0.01" value="0" /></div></label>
          <label><span>销售日期 *</span><input name="saleDate" required type="date" value="2026-07-29" /></label>
          <label><span>销售人 *</span><select name="seller" required><option>当前账号</option></select></label>
          <label><span>当前经办人</span><select name="dispatcher" disabled><option>当前账号</option></select></label>
          <label><span>购买人</span><input name="buyer" placeholder="客户姓名" /></label>
          <label class="full"><span>备注</span><textarea name="note" rows="3" maxlength="500" placeholder="物流信息或售后约定"></textarea></label>
        </div></fieldset>
        <div class="profit-preview-grid" data-permission="finance:read"><div><span>销售收入</span><strong id="sale-revenue-preview">¥0.00</strong></div><div><span>预计利润</span><strong id="sale-profit-preview">¥0.00</strong></div><div><span>毛利率</span><strong id="sale-margin-preview">0%</strong></div></div>
        <button class="submit-button accent" type="submit">确认销售并出库</button>
      </form>
    </aside>

    <aside class="drawer sale-edit-drawer" id="edit-sale-drawer" aria-hidden="true">
      <div class="drawer-head"><div><span class="section-kicker">EDIT SALE</span><h2>修改销售人</h2></div><button class="close-button" data-close aria-label="关闭">×</button></div>
      <form id="edit-sale-form" class="drawer-form">
        <div class="sale-edit-summary"><strong id="edit-sale-name">销售记录</strong><small id="edit-sale-meta"></small></div>
        <fieldset><legend>销售归属</legend>
          <label class="standalone-label"><span>销售人 *</span><select name="seller" required></select></label>
          <p class="field-hint">修改后会同步该销售单及对应已售实物的销售人，出库经办人保持不变。</p>
        </fieldset>
        <button class="submit-button accent" type="submit">保存销售人</button>
      </form>
    </aside>

    <aside class="drawer return-drawer" id="return-drawer" aria-hidden="true">
      <div class="drawer-head"><div><span class="section-kicker">SALES RETURN</span><h2>办理退货</h2></div><button class="close-button" data-close aria-label="关闭">×</button></div>
      <form id="return-form" class="drawer-form">
        <div class="return-sale-summary"><strong id="return-sale-name">销售记录</strong><small id="return-sale-meta"></small></div>
        <fieldset class="return-items-fieldset"><legend>选择退货配件</legend>
          <div class="return-selection-bar"><span>本次选择 <strong id="return-selected-count">0 件</strong></span><button class="outline-button" id="return-select-all" type="button">全选</button></div>
          <div class="return-unit-list" id="return-unit-list"></div>
        </fieldset>
        <fieldset><legend>退货信息</legend><div class="form-grid">
          <label><span>本次退货总价 *</span><div class="money-input"><b>¥</b><input name="returnPrice" type="number" min="0" step="0.01" required /></div></label>
          <label><span>退货日期 *</span><input name="returnDate" type="date" required /></label>
        </div></fieldset>
        <div class="return-preview"><span>选中配件成本</span><strong id="return-cost-preview">¥0</strong><span>退货后销售收入</span><strong id="return-revenue-preview">¥0</strong><span>退货后销售利润</span><strong id="return-profit-preview">+¥0</strong></div>
        <button class="submit-button accent" type="submit">确认退货</button>
      </form>
    </aside>

    <aside class="drawer" id="password-drawer" aria-hidden="true">
      <div class="drawer-head"><div><span class="section-kicker">SECURITY</span><h2>修改密码</h2></div><button class="close-button password-close" data-close aria-label="关闭">×</button></div>
      <form id="password-form" class="drawer-form auth-form">
        <p class="force-password-note" id="force-password-note" hidden>首次登录需要设置新密码。</p>
        <label><span>当前密码</span><input name="oldPassword" type="password" autocomplete="current-password" required /></label>
        <label><span>新密码</span><input name="newPassword" type="password" autocomplete="new-password" minlength="8" required /></label>
        <label><span>确认新密码</span><input name="confirmPassword" type="password" autocomplete="new-password" minlength="8" required /></label>
        <p class="field-hint">至少 8 位，同时包含字母和数字或符号</p>
        <p class="form-error" id="password-error" role="alert"></p>
        <button class="submit-button" type="submit">保存新密码</button>
        <button class="danger-text-button" id="password-logout-button" type="button">退出登录</button>
      </form>
    </aside>

    <aside class="drawer" id="user-drawer" aria-hidden="true">
      <div class="drawer-head"><div><span class="section-kicker">TEAM</span><h2 id="user-drawer-title">新增员工账号</h2></div><button class="close-button" data-close aria-label="关闭">×</button></div>
      <form id="user-form" class="drawer-form auth-form">
        <input type="hidden" name="userId" />
        <div id="new-user-fields">
          <label><span>员工姓名</span><input name="displayName" maxlength="24" autocomplete="off" /></label>
          <label><span>登录账号</span><input name="username" maxlength="32" autocomplete="off" /></label>
          <label><span>岗位角色</span><select name="role"><option value="employee">员工</option><option value="admin">管理员</option></select></label>
        </div>
        <label><span id="user-password-label">初始密码</span><input name="password" type="password" autocomplete="new-password" minlength="8" required /></label>
        <label><span>确认密码</span><input name="confirmPassword" type="password" autocomplete="new-password" minlength="8" required /></label>
        <p class="field-hint">员工首次登录后必须修改密码</p>
        <p class="form-error" id="user-form-error" role="alert"></p>
        <button class="submit-button" type="submit" id="user-submit-button">创建账号</button>
      </form>
    </aside>

    <div class="toast" id="toast" role="status"></div>
    <script src="app.js?v=20260907-13"></script>
  </body>
</html>
