TakeoutSaaS.Prototypes/Tenant-Admin-UI-Prototype/pages/sys-subaccount.html

<!-- 子账号管理 -->
<style>
  .ssa-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px 16px;background:#fff;border-radius:10px;box-shadow:var(--g-shadow-sm);flex-wrap:wrap;}
  .ssa-toolbar .g-input,.ssa-toolbar .g-select{height:36px;font-size:13px;}
  .ssa-toolbar .g-input{width:220px;}
  .ssa-toolbar .g-select{width:140px;}
  .ssa-spacer{flex:1;}
  .ssa-name-cell{display:flex;align-items:center;gap:8px;}
  .ssa-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:600;flex-shrink:0;}
  .ssa-row-disabled{opacity:0.5;}
  .ssa-store-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
</style>

<!-- 工具栏 -->
<div class="ssa-toolbar">
  <input class="g-input" placeholder="搜索姓名/手机号">
  <select class="g-select">
    <option>全部角色</option><option>管理员</option><option>店长</option><option>收银员</option><option>配送员</option>
  </select>
  <select class="g-select">
    <option>全部状态</option><option>启用</option><option>禁用</option>
  </select>
  <div class="ssa-spacer"></div>
  <button class="g-btn g-btn-primary" onclick="ssaOpenDrawer()"><i data-lucide="plus" style="width:15px;height:15px;margin-right:4px;vertical-align:-2px;"></i>添加账号</button>
</div>

<!-- 表格 -->
<div class="g-card" style="padding:0;overflow:hidden;">
  <table class="g-table">
    <thead><tr><th>姓名</th><th>手机号</th><th>角色</th><th>所属门店</th><th>状态</th><th>最后登录</th><th>操作</th></tr></thead>
    <tbody>
      <tr>
        <td><div class="ssa-name-cell"><div class="ssa-avatar" style="background:#3b82f6;">张</div>张伟</div></td>
        <td>138****1001</td><td><span class="g-tag g-tag-blue">管理员</span></td><td>全部门店</td><td><span class="g-tag g-tag-green">启用</span></td><td>2026-02-13 09:30</td>
        <td><a class="g-action">编辑</a><a class="g-action">禁用</a><a class="g-action g-action-danger">删除</a></td>
      </tr>
      <tr>
        <td><div class="ssa-name-cell"><div class="ssa-avatar" style="background:#22c55e;">李</div>李娜</div></td>
        <td>139****2002</td><td><span class="g-tag g-tag-green">店长</span></td><td>朝阳店</td><td><span class="g-tag g-tag-green">启用</span></td><td>2026-02-13 08:15</td>
        <td><a class="g-action">编辑</a><a class="g-action">禁用</a><a class="g-action g-action-danger">删除</a></td>
      </tr>
      <tr>
        <td><div class="ssa-name-cell"><div class="ssa-avatar" style="background:#f59e0b;">王</div>王磊</div></td>
        <td>137****3003</td><td><span class="g-tag g-tag-orange">收银员</span></td><td>海淀店</td><td><span class="g-tag g-tag-green">启用</span></td><td>2026-02-12 18:40</td>
        <td><a class="g-action">编辑</a><a class="g-action">禁用</a><a class="g-action g-action-danger">删除</a></td>
      </tr>
      <tr>
        <td><div class="ssa-name-cell"><div class="ssa-avatar" style="background:#9ca3af;">赵</div>赵敏</div></td>
        <td>136****4004</td><td><span class="g-tag g-tag-gray">配送员</span></td><td>望京店</td><td><span class="g-tag g-tag-green">启用</span></td><td>2026-02-12 14:20</td>
        <td><a class="g-action">编辑</a><a class="g-action">禁用</a><a class="g-action g-action-danger">删除</a></td>
      </tr>
      <tr class="ssa-row-disabled">
        <td><div class="ssa-name-cell"><div class="ssa-avatar" style="background:#6b7280;">刘</div>刘洋</div></td>
        <td>135****5005</td><td><span class="g-tag g-tag-green">店长</span></td><td>通州店</td><td><span class="g-tag g-tag-gray">禁用</span></td><td>2026-01-15 10:00</td>
        <td><a class="g-action">编辑</a><a class="g-action">启用</a><a class="g-action g-action-danger">删除</a></td>
      </tr>
    </tbody>
  </table>
</div>

<!-- 分页 -->
<div class="g-pagination" style="margin-top:16px;">
  <span style="color:var(--g-text-secondary);font-size:13px;margin-right:12px;">共 5 条</span>
  <button class="g-page-btn active">1</button>
</div>

<!-- 抽屉 -->
<div class="g-drawer-mask" id="ssaDrawerMask" onclick="ssaCloseDrawer()"></div>
<div class="g-drawer" id="ssaDrawer" style="width:520px;">
  <div class="g-drawer-hd">
    <span class="g-drawer-title">添加账号</span>
    <button class="g-drawer-close" onclick="ssaCloseDrawer()"><i data-lucide="x"></i></button>
  </div>
  <div class="g-drawer-bd">
    <div class="g-form-group"><label class="g-form-label required">姓名</label><input class="g-input" placeholder="请输入员工姓名"></div>
    <div class="g-form-group"><label class="g-form-label required">手机号</label><input class="g-input" placeholder="请输入手机号"></div>
    <div class="g-form-group"><label class="g-form-label required">角色</label>
      <select class="g-select"><option value="">请选择角色</option><option>管理员</option><option>店长</option><option>收银员</option><option>配送员</option></select>
    </div>
    <div class="g-form-group"><label class="g-form-label required">所属门店</label>
      <div class="ssa-store-pills">
        <span class="g-pill checked" onclick="togglePill(event.currentTarget)">朝阳店</span>
        <span class="g-pill" onclick="togglePill(event.currentTarget)">海淀店</span>
        <span class="g-pill" onclick="togglePill(event.currentTarget)">望京店</span>
        <span class="g-pill" onclick="togglePill(event.currentTarget)">通州店</span>
        <span class="g-pill" onclick="togglePill(event.currentTarget)">丰台店</span>
      </div>
      <p class="g-hint">可多选，点击切换选中状态</p>
    </div>
    <div class="g-form-group"><label class="g-form-label required">初始密码</label><input class="g-input" type="password" placeholder="请设置初始密码"></div>
    <div class="g-form-group"><label class="g-form-label">备注</label><textarea class="g-textarea" placeholder="选填，如入职日期、特殊说明等"></textarea></div>
  </div>
  <div class="g-drawer-ft">
    <button class="g-btn" onclick="ssaCloseDrawer()">取消</button>
    <button class="g-btn g-btn-primary" onclick="ssaCloseDrawer()">确认添加</button>
  </div>
</div>

<script>
function ssaOpenDrawer(){
  document.getElementById('ssaDrawerMask').classList.add('open');
  document.getElementById('ssaDrawer').classList.add('open');
}
function ssaCloseDrawer(){
  document.getElementById('ssaDrawerMask').classList.remove('open');
  document.getElementById('ssaDrawer').classList.remove('open');
}
function togglePill(el){el.classList.toggle('checked');}
if(typeof lucide!=='undefined'){lucide.createIcons();}
</script>