1. 调整菜单与路由:重命名客户信息/客户账号为客户档案管理/客户小程序授权管理,移除客户建筑/房间路由,新增空间拓扑路由 2. 后端新增客户统计接口`/customers/stats`,前端同步API与类型定义 3. 重构客户档案与小程序授权页面,仅保留数据库支持字段,移除无支撑功能 4. 新增空间拓扑页面,合并建筑与房间管理为树形拓扑视图 5. 更新数据库种子数据与权限配置,清理废弃菜单与绑定关系 6. 补充UI设计文档与规范说明
107 lines
55 KiB
HTML
107 lines
55 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="zh-CN"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0" name="viewport"/><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=hankenGrotesk:wght@100..900&display=swap" rel="stylesheet"/><style>@layer base{html,body{margin:0;padding:0;}body{overscroll-behavior:none;}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}</style><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config={"darkMode":"class","theme":{"extend":{"colors":{"secondary-fixed-dim":"#d2bbff","secondary":"#712ae2","secondary-fixed":"#eaddff","on-primary":"#ffffff","surface-container-lowest":"#ffffff","error":"#ba1a1a","on-error":"#ffffff","on-surface":"#0d1c2c","on-primary-fixed-variant":"#0040a1","outline-variant":"#c2c6d8","tertiary-fixed-dim":"#6bd8cb","on-secondary-fixed-variant":"#5a00c6","tertiary-container":"#008378","primary-container":"#136bfb","secondary-container":"#8a4cfc","tertiary":"#00685f","on-tertiary-fixed-variant":"#005049","on-secondary-fixed":"#25005a","surface-container-highest":"#d5e4fa","surface-container-low":"#eef4ff","background":"#f8f9ff","on-error-container":"#93000a","inverse-primary":"#b2c5ff","surface-dim":"#ccdbf1","on-primary-fixed":"#001847","surface-container-high":"#dbe9ff","outline":"#727787","status-warn":"#e0852b","on-secondary":"#ffffff","surface-tint":"#0056d2","bg-page":"#eef3f8","surface-variant":"#d5e4fa","primary":"#0054cd","on-tertiary-container":"#f4fffc","inverse-surface":"#233142","text-muted":"#5b6b7e","on-tertiary":"#ffffff","accent-subtle":"rgba(29,111,255,0.08)","primary-fixed":"#dae2ff","tertiary-fixed":"#89f5e7","surface-bright":"#f8f9ff","on-primary-container":"#fefcff","on-background":"#0d1c2c","primary-fixed-dim":"#b2c5ff","border-rule":"#dbe4ee","status-error":"#dc2626","inverse-on-surface":"#e9f1ff","error-container":"#ffdad6","on-tertiary-fixed":"#00201d","on-secondary-container":"#fffbff","on-surface-variant":"#424655","surface":"#ffffff","surface-container":"#e5efff"},"borderRadius":{"DEFAULT":"0.25rem","lg":"0.5rem","xl":"0.75rem","full":"9999px"},"spacing":{"md":"16px","sm":"12px","xl":"40px","container-max":"1200px","base":"4px","xs":"8px","gutter":"16px","lg":"24px"},"fontFamily":{"body-md":["hankenGrotesk"],"headline-md-mobile":["hankenGrotesk"],"caption-sm":["hankenGrotesk"],"label-bold":["hankenGrotesk"],"headline-md":["hankenGrotesk"],"title-sm":["hankenGrotesk"],"data-mono":["jetbrainsMono"],"display-lg":["hankenGrotesk"]},"fontSize":{"body-md":["15px",{"lineHeight":"24px","fontWeight":"400"}],"headline-md-mobile":["20px",{"lineHeight":"26px","fontWeight":"700"}],"caption-sm":["12px",{"lineHeight":"14px","fontWeight":"700"}],"label-bold":["13px",{"lineHeight":"16px","fontWeight":"700"}],"headline-md":["23px",{"lineHeight":"28px","fontWeight":"700"}],"title-sm":["17px",{"lineHeight":"24px","fontWeight":"700"}],"data-mono":["12px",{"lineHeight":"16px","fontWeight":"500"}],"display-lg":["32px",{"lineHeight":"40px","fontWeight":"700"}]}}}}</script></head><body class="bg-background font-body-md text-body-md text-on-surface antialiased"><aside class="fixed left-0 top-0 h-full w-72 bg-inverse-surface text-inverse-on-surface z-50 flex flex-col justify-between shadow-[0_1px_8px_rgba(0,0,0,0.04)]"><div class="flex flex-col flex-1 min-h-0"><div class="h-16 px-md flex items-center gap-sm bg-inverse-surface"><div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-on-primary shadow-sm"><span class="material-symbols-outlined text-[24px]">bolt</span></div><div class="flex flex-col"><div class="flex items-center gap-xs"><span class="font-headline-md text-headline-md text-white tracking-wide">XT-POWER</span><span class="font-caption-sm text-caption-sm bg-primary px-xs py-0.5 rounded text-white">OS</span></div><span class="font-caption-sm text-caption-sm text-outline-variant tracking-wider">鑫潼智电 · 智能配用电中枢</span></div></div><div class="flex-1 overflow-y-auto px-xs py-md"><nav class="flex flex-col gap-1" data-active-classes="bg-primary text-white font-label-bold rounded-lg shadow-sm"><a class="flex items-center gap-sm px-md py-sm rounded-lg text-outline-variant hover:bg-surface-container-highest/10 hover:text-white transition-colors" data-path="workbench" href="#"><span class="material-symbols-outlined text-[20px]">dashboard</span><span class="font-label-bold text-label-bold">运营工作台</span></a><div class="flex flex-col"><a class="flex items-center justify-between px-md py-sm rounded-lg bg-primary text-white font-label-bold shadow-sm transition-colors" data-path="customer-management" href="#"><div class="flex items-center gap-sm"><span class="material-symbols-outlined text-[20px]">apartment</span><span class="font-label-bold text-label-bold">客户管理</span></div><span class="material-symbols-outlined text-[16px]">expand_more</span></a><div class="flex flex-col ml-lg pl-md mt-1 mb-1 gap-1 border-l border-outline/30"><a class="px-sm py-1.5 rounded text-white font-label-bold text-caption-sm bg-white/10 transition-colors flex items-center gap-xs" data-path="customer-profiles" href="#"><span class="w-1.5 h-1.5 rounded-full bg-tertiary-fixed"></span>客户档案列表</a><a class="px-sm py-1.5 rounded text-outline-variant hover:text-white font-label-bold text-caption-sm transition-colors flex items-center gap-xs" data-path="electrical-topology" href="#"><span class="w-1.5 h-1.5 rounded-full bg-outline-variant/40"></span>空间拓扑与用电架构</a><a aria-current="page" class="px-sm py-1.5 transition-colors flex items-center gap-xs bg-primary text-white font-label-bold rounded-lg shadow-sm" data-path="wechat-app-authorization" href="#"><span class="w-1.5 h-1.5 rounded-full bg-outline-variant/40"></span>微信小程序授权</a></div></div><a class="flex items-center gap-sm px-md py-sm rounded-lg text-outline-variant hover:bg-surface-container-highest/10 hover:text-white transition-colors" data-path="project-management" href="#"><span class="material-symbols-outlined text-[20px]">assignment</span><span class="font-label-bold text-label-bold">项目管理</span></a><a class="flex items-center gap-sm px-md py-sm rounded-lg text-outline-variant hover:bg-surface-container-highest/10 hover:text-white transition-colors" data-path="work-orders" href="#"><span class="material-symbols-outlined text-[20px]">send_time_extension</span><span class="font-label-bold text-label-bold">运营派单</span></a><a class="flex items-center gap-sm px-md py-sm rounded-lg text-outline-variant hover:bg-surface-container-highest/10 hover:text-white transition-colors" data-path="device-monitoring" href="#"><span class="material-symbols-outlined text-[20px]">sensors</span><span class="font-label-bold text-label-bold">设备监控</span></a><a class="flex items-center gap-sm px-md py-sm rounded-lg text-outline-variant hover:bg-surface-container-highest/10 hover:text-white transition-colors" data-path="analytics-reports" href="#"><span class="material-symbols-outlined text-[20px]">query_stats</span><span class="font-label-bold text-label-bold">统计报表</span></a><a class="flex items-center gap-sm px-md py-sm rounded-lg text-outline-variant hover:bg-surface-container-highest/10 hover:text-white transition-colors" data-path="system-settings" href="#"><span class="material-symbols-outlined text-[20px]">settings</span><span class="font-label-bold text-label-bold">系统管理</span></a></nav></div></div><div class="p-md m-sm rounded-lg bg-surface-container-highest/5 backdrop-blur-sm border border-outline/20"><div class="flex items-center justify-between mb-xs"><div class="flex items-center gap-xs"><span class="relative flex h-2 w-2"><span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-tertiary-fixed opacity-75"></span><span class="relative inline-flex rounded-full h-2 w-2 bg-tertiary-container"></span></span><span class="font-caption-sm text-caption-sm text-white">边缘网关通信链路</span></div><span class="font-data-mono text-data-mono text-tertiary-fixed">在线 24/24</span></div><div class="flex items-center justify-between font-data-mono text-data-mono text-outline-variant"><span>时延: 14ms</span><span>丢包: 0.00%</span></div></div></aside><div class="pl-72 min-h-screen flex flex-col"><header class="fixed top-0 left-72 right-0 h-16 bg-surface/90 backdrop-blur-md z-40 shadow-[0_1px_8px_rgba(0,0,0,0.04)] px-lg flex items-center justify-between gap-md"><div class="flex items-center gap-lg flex-1 max-w-2xl"><div class="flex items-center gap-xs px-sm py-1 rounded-full bg-tertiary-container/10 border border-tertiary-container/20"><span class="material-symbols-outlined text-tertiary text-[16px]">sync</span><span class="font-caption-sm text-caption-sm text-tertiary font-bold">ICC 实时数据正常同步</span><span class="font-data-mono text-data-mono text-text-muted">120FPS</span></div><div class="relative flex-1"><span class="material-symbols-outlined absolute left-sm top-1/2 -translate-y-1/2 text-text-muted text-[18px]">search</span><input class="w-full pl-9 pr-sm py-1.5 rounded-lg bg-background border border-border-rule text-body-md font-body-md text-on-surface placeholder:text-text-muted focus:outline-none focus:border-primary transition-colors" placeholder="按变电所编码、变压器回路或客户名称全局检索 (Ctrl + K)..." type="text"/></div></div><div class="flex items-center gap-md"><button class="relative p-sm rounded-lg hover:bg-surface-container text-on-surface-variant hover:text-on-surface transition-colors"><span class="material-symbols-outlined text-[22px]">notifications</span><span class="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-status-error"></span></button><button class="p-sm rounded-lg hover:bg-surface-container text-on-surface-variant hover:text-on-surface transition-colors"><span class="material-symbols-outlined text-[22px]">apps</span></button><div class="h-5 w-[1px] bg-border-rule"></div><div class="flex items-center gap-sm pl-xs"><div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center shadow-sm"><span class="material-symbols-outlined text-on-primary text-[18px]">person</span></div><div class="flex flex-col text-left"><span class="font-label-bold text-label-bold text-on-surface leading-tight">李工</span><span class="font-data-mono text-data-mono text-text-muted leading-tight">主控工程师 · 调度中心</span></div><span class="material-symbols-outlined text-text-muted text-[16px]">keyboard_arrow_down</span></div></div></header><main class="w-full pt-16 px-lg py-lg flex-1 bg-background"><div class="flex flex-col w-full">
|
|
<!-- Top Navigation Bar & Action Header -->
|
|
<div class="flex flex-col gap-sm mb-lg">
|
|
<!-- Breadcrumb & Architecture Tag -->
|
|
<div class="flex items-center justify-between"><div class="flex items-center gap-xs font-caption-sm text-caption-sm text-text-muted"><span>运营管控体系</span><span class="material-symbols-outlined text-[14px]">chevron_right</span><span>客户管理</span><span class="material-symbols-outlined text-[14px]">chevron_right</span><span class="text-primary font-bold">客户小程序邀请与账号绑定</span></div><div class="flex items-center gap-xs px-sm py-0.5 rounded-full bg-surface-container-high text-on-surface-variant font-data-mono text-data-mono"><span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span><span>Invitation-Token Engine · 72h Dynamic Signed</span></div></div>
|
|
<!-- Page Title & CTA Controls -->
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between gap-md mt-1"><div class="flex flex-col"><div class="flex items-center gap-sm"><h1 class="font-headline-md text-headline-md text-on-surface tracking-tight">客户小程序邀请与账号绑定</h1><span class="px-xs py-0.5 rounded font-data-mono text-caption-sm bg-primary/10 text-primary uppercase font-bold">定向邀请准入制</span></div><p class="font-caption-sm text-caption-sm text-text-muted mt-0.5">基于定向邀请制 · 运营后台生成带签名专属激活链接与二维码 · 客户受邀扫码绑定微信 OpenID 与 customer_id 硬隔离</p></div><div class="flex flex-wrap items-center gap-xs"><button class="flex items-center gap-xs px-md py-2 rounded-full bg-surface-container-low text-on-surface-variant hover:bg-surface-container hover:text-on-surface transition-all font-label-bold text-label-bold shadow-sm" id="btn-export-records" onclick="showToast('正在导出全部有效邀请码、二维码与凭证时效明细清单...')"><span class="material-symbols-outlined text-[18px]">qr_code_scanner</span><span>导出邀请凭证与二维码</span></button><button class="flex items-center gap-xs px-md py-2 rounded-full bg-surface-container text-primary hover:bg-primary/10 transition-all font-label-bold text-label-bold shadow-sm" id="btn-batch-sms" onclick="showToast('已向 27 位待激活受邀客户批量重发短信邀请通知')"><span class="material-symbols-outlined text-[18px]">forward_to_inbox</span><span>批量发送邀请短信</span></button><button class="flex items-center gap-xs px-lg py-2 rounded-full bg-primary text-on-primary hover:bg-primary-container transition-all font-label-bold text-label-bold shadow-sm" id="btn-add-account" onclick="openAccountModal()"><span class="material-symbols-outlined text-[18px]">share</span><span>发起客户邀请 (Generate Invitation)</span></button></div></div>
|
|
<!-- Guiding Protocol Banner -->
|
|
<div class="mt-2 p-md rounded-lg bg-surface-container-low flex items-start gap-md shadow-sm"><div class="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center text-primary shrink-0"><span class="material-symbols-outlined text-[22px]">mark_email_read</span></div><div class="flex-1 min-w-0"><div class="flex items-center gap-xs"><span class="font-label-bold text-label-bold text-on-surface">严格实行定向邀请制安全机制 (客户小程序不设公开注册)</span><span class="px-1.5 py-0.2 rounded font-data-mono text-[10px] bg-tertiary-container/10 text-tertiary font-bold">一客一码防冒领</span></div><p class="font-body-md text-body-md text-text-muted mt-0.5 leading-relaxed text-sm">运营方通过录入托管客户单位、受邀人姓名与联系手机发起邀请,系统自动生成具 72 小时安全签名的专属激活链接与小程序太阳码。受邀客户微信扫码授权或点击短信链接后,平台秒级完成 <code class="font-data-mono text-data-mono bg-surface px-1 py-0.5 rounded text-primary">customer_id</code> 逻辑租户隔离与 OpenID 唯一映射,未经邀请的外部人员无法接入。</p></div><div class="hidden lg:flex flex-col gap-1 shrink-0 font-data-mono text-data-mono text-right text-text-muted"><div class="flex items-center justify-end gap-1.5"><span class="px-2 py-0.5 rounded bg-tertiary/10 text-tertiary font-bold text-[11px] flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span>72小时凭证时效</span><span class="px-2 py-0.5 rounded bg-primary/10 text-primary font-bold text-[11px]">端上免复杂配置</span></div><div class="text-[11px] text-text-muted">支持未激活一键重发 · 随时作废失效</div></div></div>
|
|
</div>
|
|
<!-- KPI Metric Strip (4 Cards) -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-md mb-lg"><!-- KPI 1 --><div class="p-lg rounded-lg bg-surface shadow-sm flex flex-col justify-between relative overflow-hidden group hover:shadow-md transition-shadow"><div class="flex items-center justify-between"><span class="font-label-bold text-label-bold text-text-muted">已发出邀请总数</span><div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary"><span class="material-symbols-outlined text-[20px]">outgoing_mail</span></div></div><div class="mt-md flex items-baseline gap-xs"><span class="font-display-lg text-display-lg text-on-surface tracking-tight font-bold">216</span><span class="font-caption-sm text-caption-sm text-text-muted">人次邀请</span></div><div class="mt-sm flex items-center justify-between font-caption-sm text-caption-sm text-text-muted"><span>覆盖托管客户单位</span><span class="font-data-mono text-data-mono font-bold text-on-surface">128 家</span></div><div class="w-full bg-surface-container h-1 rounded-full mt-xs overflow-hidden"><div class="bg-primary h-full rounded-full" style="width: 100%"></div></div></div><!-- KPI 2 --><div class="p-lg rounded-lg bg-surface shadow-sm flex flex-col justify-between relative overflow-hidden group hover:shadow-md transition-shadow"><div class="flex items-center justify-between"><span class="font-label-bold text-label-bold text-text-muted">已接受邀请并绑定微信</span><div class="w-8 h-8 rounded-lg bg-tertiary/10 flex items-center justify-center text-tertiary"><span class="material-symbols-outlined text-[20px]">verified_user</span></div></div><div class="mt-md flex items-baseline gap-xs"><span class="font-display-lg text-display-lg text-tertiary tracking-tight font-bold">189</span><span class="font-caption-sm text-caption-sm text-text-muted">人成功受邀</span></div><div class="mt-sm flex items-center justify-between font-caption-sm text-caption-sm text-text-muted"><span>微信 OpenID 绑定率</span><span class="font-data-mono text-data-mono font-bold text-tertiary">87.5%</span></div><div class="w-full bg-surface-container h-1 rounded-full mt-xs overflow-hidden"><div class="bg-tertiary h-full rounded-full" style="width: 87.5%"></div></div></div><!-- KPI 3 --><div class="p-lg rounded-lg bg-surface shadow-sm flex flex-col justify-between relative overflow-hidden group hover:shadow-md transition-shadow"><div class="flex items-center justify-between"><span class="font-label-bold text-label-bold text-text-muted">待扫码激活 / 邀请中</span><div class="w-8 h-8 rounded-lg bg-status-warn/10 flex items-center justify-center text-status-warn"><span class="material-symbols-outlined text-[20px]">hourglass_top</span></div></div><div class="mt-md flex items-baseline gap-xs"><span class="font-display-lg text-display-lg text-status-warn tracking-tight font-bold">27</span><span class="font-caption-sm text-caption-sm text-text-muted">人待激活</span></div><div class="mt-sm flex items-center justify-between font-caption-sm text-caption-sm"><span class="text-text-muted"><span class="text-status-warn font-bold">5人</span> 凭证即将超期</span><button class="text-primary font-bold hover:underline" onclick="showToast('已向5位即将超期客户发送催办提醒')">批量催办</button></div><div class="w-full bg-surface-container h-1 rounded-full mt-xs overflow-hidden"><div class="bg-status-warn h-full rounded-full" style="width: 12.5%"></div></div></div><!-- KPI 4 --><div class="p-lg rounded-lg bg-surface shadow-sm flex flex-col justify-between relative overflow-hidden group hover:shadow-md transition-shadow"><div class="flex items-center justify-between"><span class="font-label-bold text-label-bold text-text-muted">已失效 / 已撤回邀请</span><div class="w-8 h-8 rounded-lg bg-outline/10 flex items-center justify-center text-outline"><span class="material-symbols-outlined text-[20px]">cancel_presentation</span></div></div><div class="mt-md flex items-baseline gap-xs"><span class="font-display-lg text-display-lg text-text-muted tracking-tight font-bold">8</span><span class="font-caption-sm text-caption-sm text-text-muted">条失效凭证</span></div><div class="mt-sm flex items-center justify-between font-caption-sm text-caption-sm text-text-muted"><span>超期自动阻断率</span><span class="font-data-mono text-data-mono font-bold text-text-muted">100%</span></div><div class="w-full bg-surface-container h-1 rounded-full mt-xs overflow-hidden"><div class="bg-outline/40 h-full rounded-full" style="width: 100%"></div></div></div></div>
|
|
<!-- Main Workstation Layout: Left Filtering & Accounts Table, Right Detail Drawer/Drawer Shell -->
|
|
<div class="flex flex-col gap-md">
|
|
<!-- Multi-dimensional Filter Bar -->
|
|
<div class="p-md rounded-lg bg-surface shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-md"><div class="flex flex-wrap items-center gap-sm flex-1"><div class="relative min-w-[220px]"><select class="w-full pl-sm pr-8 py-2 rounded-lg bg-background text-body-md font-body-md text-on-surface appearance-none focus:outline-none focus:border-primary border border-border-rule" id="filter-client"><option value="ALL">全部托管客户 (128家)</option><option value="WH_EDU_01">武汉软件工程职业学院</option><option value="WH_HOSP_01">武汉市第一人民医院</option><option value="OPTICS_PARK_04">光谷生物城创新基地</option><option value="HSR_STATION_E">武汉高铁东站枢纽</option></select><span class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none text-[18px]">unfold_more</span></div><div class="relative min-w-[180px]"><select class="w-full pl-sm pr-8 py-2 rounded-lg bg-background text-body-md font-body-md text-on-surface appearance-none focus:outline-none focus:border-primary border border-border-rule" id="filter-status"><option value="ALL">全部邀请状态</option><option value="PENDING">待微信扫码激活 (27)</option><option value="BOUND">已绑定正常运行 (189)</option><option value="EXPIRED">邀请凭证已过期 (5)</option><option value="REVOKED">已作废 / 已解绑 (3)</option></select><span class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none text-[18px]">unfold_more</span></div><div class="relative flex-1 min-w-[240px]"><span class="material-symbols-outlined absolute left-2.5 top-1/2 -translate-y-1/2 text-text-muted text-[18px]">search</span><input class="w-full pl-8 pr-sm py-2 rounded-lg bg-background text-body-md font-body-md text-on-surface placeholder:text-text-muted focus:outline-none focus:border-primary border border-border-rule" placeholder="输入受邀人姓名、手机号、邀请凭证号或单位检索..." type="text"/></div></div><div class="flex items-center gap-xs shrink-0"><button class="px-md py-2 rounded-lg bg-surface-container text-on-surface-variant font-label-bold text-caption-sm hover:bg-surface-container-high transition-colors" onclick="showToast('已重置筛选条件')">重置</button><button class="px-lg py-2 rounded-lg bg-primary text-on-primary font-label-bold text-caption-sm hover:bg-primary-container transition-colors shadow-sm" onclick="showToast('已按当前条件刷新邀请记录')">查询</button></div></div>
|
|
<!-- Account Table Card (Full Width Ant-Design style) -->
|
|
<div class="rounded-lg bg-surface shadow-sm overflow-hidden flex flex-col border border-border-rule/40">
|
|
<!-- Table Header Info Bar -->
|
|
<div class="p-md bg-surface-container-low/40 flex items-center justify-between border-b border-border-rule/40"><div class="flex items-center gap-sm"><span class="font-title-sm text-title-sm text-on-surface">受邀客户名单与微信绑定凭证台账</span><span class="px-2 py-0.5 rounded-full font-data-mono text-caption-sm bg-primary/10 text-primary font-bold">共 216 项邀请记录</span><span class="text-caption-sm text-text-muted hidden sm:inline-block">(凭证均含数字防伪签名,扫码自动绑定 customer_id 隔离空间)</span></div><div class="flex items-center gap-xs font-caption-sm text-text-muted"><span class="w-2 h-2 rounded-full bg-tertiary"></span><span class="font-data-mono">邀请制数字签名链正常</span></div></div>
|
|
<!-- Table Content -->
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse"><thead><tr class="bg-surface-container-low/60 font-caption-sm text-caption-sm text-text-muted tracking-wide border-b border-border-rule/40"><th class="py-sm px-md font-bold">所属托管客户单位</th><th class="py-sm px-md font-bold">受邀人姓名与联系手机</th><th class="py-sm px-md font-bold">业务角色 / 岗位</th><th class="py-sm px-md font-bold">邀请方式与凭证状态</th><th class="py-sm px-md font-bold">微信绑定状态</th><th class="py-sm px-md font-bold">账号状态</th><th class="py-sm px-md font-bold">邀请 / 绑定时间</th><th class="py-sm px-md font-bold text-right">操作</th></tr></thead><tbody class="divide-y divide-border-rule/40 font-body-md text-body-md text-on-surface"><!-- Row 1: Bound User --><tr class="hover:bg-surface-container-low/50 transition-colors group"><td class="py-md px-md"><div class="flex flex-col"><span class="font-label-bold text-label-bold text-on-surface">武汉软件工程职业学院</span><span class="font-data-mono text-[11px] text-text-muted">ID: WH_EDU_01 · 高校科研</span></div></td><td class="py-md px-md"><div class="flex items-center gap-sm"><div class="w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-sm">德</div><div class="flex flex-col"><span class="font-label-bold text-label-bold text-on-surface">张德全</span><span class="font-data-mono text-data-mono text-text-muted">139-8821-9901</span></div></div></td><td class="py-md px-md"><span class="px-2 py-0.5 rounded font-caption-sm text-caption-sm bg-surface-container text-on-surface-variant font-medium">总务处主任 / 负责人</span></td><td class="py-md px-md"><div class="flex flex-col"><span class="font-caption-sm text-caption-sm text-on-surface flex items-center gap-1"><span class="material-symbols-outlined text-[15px] text-tertiary">qr_code_2</span>扫码激活成功</span><span class="font-data-mono text-[11px] text-text-muted">凭证号: INV-EDU-9901</span></div></td><td class="py-md px-md"><div class="flex items-center gap-xs"><span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span><span class="font-label-bold text-label-bold text-tertiary">已绑定</span><span class="text-text-muted font-caption-sm text-caption-sm">(德全-后勤)</span></div></td><td class="py-md px-md"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full font-caption-sm text-caption-sm bg-tertiary/10 text-tertiary font-bold"><span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span>正常</span></td><td class="py-md px-md font-data-mono text-caption-sm text-text-muted"><div>发: 03-22 09:15</div><div class="text-tertiary">绑: 03-22 09:30</div></td><td class="py-md px-md text-right"><div class="flex items-center justify-end gap-xs"><button class="px-2 py-1 rounded hover:bg-surface-container text-primary font-label-bold text-caption-sm transition-colors" onclick="showInvitePreviewModal('张德全', '139-8821-9901', '武汉软件工程职业学院', 'INV-EDU-9901', '已核销已绑定')">查看凭证</button><button class="px-2 py-1 rounded hover:bg-surface-container text-on-surface-variant font-label-bold text-caption-sm transition-colors" onclick="openAccountModal('武汉软件工程职业学院', '张德全', '139-8821-9901', '总务处主任 / 负责人')">重新邀请</button><button class="px-2 py-1 rounded hover:bg-status-error/10 text-status-error font-label-bold text-caption-sm transition-colors" onclick="showToast('已解除张德全的微信关联并重置邀请凭证')">解绑微信</button></div></td></tr><!-- Row 2: Hospital Lead (Bound) --><tr class="hover:bg-surface-container-low/50 transition-colors group"><td class="py-md px-md"><div class="flex flex-col"><span class="font-label-bold text-label-bold text-on-surface">武汉市第一人民医院</span><span class="font-data-mono text-[11px] text-text-muted">ID: WH_HOSP_01 · 三甲医疗</span></div></td><td class="py-md px-md"><div class="flex items-center gap-sm"><div class="w-8 h-8 rounded-full bg-secondary/10 text-secondary flex items-center justify-center font-bold text-sm">李</div><div class="flex flex-col"><span class="font-label-bold text-label-bold text-on-surface">李晓明</span><span class="font-data-mono text-data-mono text-text-muted">135-4491-0283</span></div></div></td><td class="py-md px-md"><span class="px-2 py-0.5 rounded font-caption-sm text-caption-sm bg-surface-container text-on-surface-variant font-medium">动力科班长 / 运维主管</span></td><td class="py-md px-md"><div class="flex flex-col"><span class="font-caption-sm text-caption-sm text-on-surface flex items-center gap-1"><span class="material-symbols-outlined text-[15px] text-tertiary">sms</span>短信专属链接</span><span class="font-data-mono text-[11px] text-text-muted">凭证号: INV-HOSP-0283</span></div></td><td class="py-md px-md"><div class="flex items-center gap-xs"><span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span><span class="font-label-bold text-label-bold text-tertiary">已绑定</span><span class="text-text-muted font-caption-sm text-caption-sm">(xm_power)</span></div></td><td class="py-md px-md"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full font-caption-sm text-caption-sm bg-tertiary/10 text-tertiary font-bold"><span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span>正常</span></td><td class="py-md px-md font-data-mono text-caption-sm text-text-muted"><div>发: 03-23 16:20</div><div class="text-tertiary">绑: 03-23 16:45</div></td><td class="py-md px-md text-right"><div class="flex items-center justify-end gap-xs"><button class="px-2 py-1 rounded hover:bg-surface-container text-primary font-label-bold text-caption-sm transition-colors" onclick="showInvitePreviewModal('李晓明', '135-4491-0283', '武汉市第一人民医院', 'INV-HOSP-0283', '已核销已绑定')">查看凭证</button><button class="px-2 py-1 rounded hover:bg-surface-container text-on-surface-variant font-label-bold text-caption-sm transition-colors" onclick="openAccountModal('武汉市第一人民医院', '李晓明', '135-4491-0283', '动力科班长 / 运维主管')">重新邀请</button><button class="px-2 py-1 rounded hover:bg-status-error/10 text-status-error font-label-bold text-caption-sm transition-colors" onclick="showToast('已停用李晓明受邀账号')">停用</button></div></td></tr><!-- Row 3: Pending Activation (Urgent 48h left) --><tr class="hover:bg-surface-container-low/50 transition-colors group bg-status-warn/5"><td class="py-md px-md"><div class="flex flex-col"><span class="font-label-bold text-label-bold text-on-surface">武汉软件工程职业学院</span><span class="font-data-mono text-[11px] text-text-muted">ID: WH_EDU_01 · 高校科研</span></div></td><td class="py-md px-md"><div class="flex items-center gap-sm"><div class="w-8 h-8 rounded-full bg-status-warn/10 text-status-warn flex items-center justify-center font-bold text-sm">王</div><div class="flex flex-col"><span class="font-label-bold text-label-bold text-on-surface">王建国</span><span class="font-data-mono text-data-mono text-text-muted">186-1102-7734</span></div></div></td><td class="py-md px-md"><span class="px-2 py-0.5 rounded font-caption-sm text-caption-sm bg-surface-container text-on-surface-variant font-medium">楼宇报修员 / 宿管组长</span></td><td class="py-md px-md"><div class="flex flex-col"><span class="font-caption-sm text-caption-sm text-status-warn font-bold flex items-center gap-1"><span class="material-symbols-outlined text-[15px]">timer</span>有效剩余 48h</span><span class="font-data-mono text-[11px] text-text-muted">凭证号: INV-EDU-7734</span></div></td><td class="py-md px-md"><div class="flex items-center gap-xs"><span class="w-1.5 h-1.5 rounded-full bg-status-warn"></span><span class="font-label-bold text-label-bold text-status-warn">待微信首次授权绑定</span></div></td><td class="py-md px-md"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full font-caption-sm text-caption-sm bg-status-warn/10 text-status-warn font-bold">待激活</span></td><td class="py-md px-md font-data-mono text-caption-sm text-text-muted"><div>发: 03-24 10:00</div><div class="text-status-warn">待扫码验证</div></td><td class="py-md px-md text-right"><div class="flex items-center justify-end gap-xs"><button class="px-2 py-1 rounded bg-primary/10 text-primary font-label-bold text-caption-sm hover:bg-primary/20 transition-colors" onclick="showInvitePreviewModal('王建国', '186-1102-7734', '武汉软件工程职业学院', 'INV-EDU-7734', '待微信授权绑定 (剩余48小时)')">邀请码/二维码</button><button class="px-2 py-1 rounded hover:bg-surface-container text-on-surface-variant font-label-bold text-caption-sm transition-colors" onclick="navigator.clipboard ? navigator.clipboard.writeText('https://xtpower.cn/invite?token=INV-EDU-7734') : null; showToast('已复制王建国的专属激活链接至剪贴板')">复制链接</button><button class="px-2 py-1 rounded hover:bg-surface-container text-primary font-label-bold text-caption-sm transition-colors" onclick="showToast('已向王建国 (186-1102-7734) 重新补发邀请短信')">重发短信</button><button class="px-2 py-1 rounded hover:bg-status-error/10 text-status-error font-label-bold text-caption-sm transition-colors" onclick="showToast('已作废该条邀请凭证 INV-EDU-7734')">作废</button></div></td></tr><!-- Row 4: Science Park Property Lead (Bound) --><tr class="hover:bg-surface-container-low/50 transition-colors group"><td class="py-md px-md"><div class="flex flex-col"><span class="font-label-bold text-label-bold text-on-surface">光谷生物城创新基地</span><span class="font-data-mono text-[11px] text-text-muted">ID: OPTICS_PARK_04 · 科技园区</span></div></td><td class="py-md px-md"><div class="flex items-center gap-sm"><div class="w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-sm">陈</div><div class="flex flex-col"><span class="font-label-bold text-label-bold text-on-surface">陈丽</span><span class="font-data-mono text-data-mono text-text-muted">150-9928-3419</span></div></div></td><td class="py-md px-md"><span class="px-2 py-0.5 rounded font-caption-sm text-caption-sm bg-surface-container text-on-surface-variant font-medium">园区节能管理工程师</span></td><td class="py-md px-md"><div class="flex flex-col"><span class="font-caption-sm text-caption-sm text-on-surface flex items-center gap-1"><span class="material-symbols-outlined text-[15px] text-tertiary">qr_code_2</span>扫码激活成功</span><span class="font-data-mono text-[11px] text-text-muted">凭证号: INV-BIO-3419</span></div></td><td class="py-md px-md"><div class="flex items-center gap-xs"><span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span><span class="font-label-bold text-label-bold text-tertiary">已绑定</span><span class="text-text-muted font-caption-sm text-caption-sm">(chenli_bio)</span></div></td><td class="py-md px-md"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full font-caption-sm text-caption-sm bg-tertiary/10 text-tertiary font-bold"><span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span>正常</span></td><td class="py-md px-md font-data-mono text-caption-sm text-text-muted"><div>发: 03-24 14:00</div><div class="text-tertiary">绑: 03-24 14:10</div></td><td class="py-md px-md text-right"><div class="flex items-center justify-end gap-xs"><button class="px-2 py-1 rounded hover:bg-surface-container text-primary font-label-bold text-caption-sm transition-colors" onclick="showInvitePreviewModal('陈丽', '150-9928-3419', '光谷生物城创新基地', 'INV-BIO-3419', '已核销已绑定')">查看凭证</button><button class="px-2 py-1 rounded hover:bg-surface-container text-on-surface-variant font-label-bold text-caption-sm transition-colors" onclick="openAccountModal('光谷生物城创新基地', '陈丽', '150-9928-3419', '园区节能管理工程师')">重新邀请</button><button class="px-2 py-1 rounded hover:bg-status-error/10 text-status-error font-label-bold text-caption-sm transition-colors" onclick="showToast('已解除陈丽的微信关联绑定')">解绑微信</button></div></td></tr><!-- Row 5: Expired/Revoked Invitation --><tr class="hover:bg-surface-container-low/50 transition-colors opacity-75 group bg-surface-container-low/20"><td class="py-md px-md"><div class="flex flex-col"><span class="font-label-bold text-label-bold text-on-surface line-through text-text-muted">武汉高铁东站枢纽</span><span class="font-data-mono text-[11px] text-text-muted">ID: HSR_STATION_E · 离职已移交</span></div></td><td class="py-md px-md"><div class="flex items-center gap-sm"><div class="w-8 h-8 rounded-full bg-outline/10 text-outline flex items-center justify-center font-bold text-sm">宋</div><div class="flex flex-col"><span class="font-label-bold text-label-bold text-text-muted line-through">宋志强</span><span class="font-data-mono text-data-mono text-text-muted">131-0023-8890</span></div></div></td><td class="py-md px-md"><span class="px-2 py-0.5 rounded font-caption-sm text-caption-sm bg-surface-container text-outline font-medium">原站房电气值班员</span></td><td class="py-md px-md"><div class="flex flex-col"><span class="font-caption-sm text-caption-sm text-status-error flex items-center gap-1"><span class="material-symbols-outlined text-[15px]">error</span>凭证已超期失效</span><span class="font-data-mono text-[11px] text-text-muted">凭证号: INV-HSR-8890</span></div></td><td class="py-md px-md"><span class="font-caption-sm text-caption-sm text-text-muted">未绑定 / 凭证已过期</span></td><td class="py-md px-md"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full font-caption-sm text-caption-sm bg-outline/20 text-outline font-bold">已作废</span></td><td class="py-md px-md font-data-mono text-caption-sm text-text-muted"><div>发: 2024-12-01</div><div class="text-status-error">超期: 12-04</div></td><td class="py-md px-md text-right"><div class="flex items-center justify-end gap-xs"><button class="px-2 py-1 rounded bg-surface-container text-primary font-label-bold text-caption-sm hover:bg-surface-container-high transition-colors" onclick="openAccountModal('武汉高铁东站枢纽', '宋志强', '131-0023-8890', '原站房电气值班员')">重新发起邀请</button><button class="px-2 py-1 rounded hover:bg-status-error/10 text-status-error font-label-bold text-caption-sm transition-colors" onclick="showToast('已彻底清除该历史过期凭证')">清除记录</button></div></td></tr></tbody></table>
|
|
</div>
|
|
<!-- Table Pagination -->
|
|
<div class="p-md bg-surface-container-low/40 flex flex-col sm:flex-row items-center justify-between gap-sm border-t border-border-rule/40">
|
|
<div class="font-caption-sm text-caption-sm text-text-muted">
|
|
显示第 1 至 5 条,共计 <span class="font-data-mono font-bold text-on-surface">216</span> 条小程序客户记录
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<button class="w-7 h-7 rounded flex items-center justify-center bg-surface hover:bg-surface-container text-text-muted shadow-sm border border-border-rule/40">
|
|
<span class="material-symbols-outlined text-[16px]">chevron_left</span>
|
|
</button>
|
|
<button class="w-7 h-7 rounded flex items-center justify-center bg-primary text-on-primary font-data-mono text-caption-sm font-bold shadow-sm">1</button>
|
|
<button class="w-7 h-7 rounded flex items-center justify-center bg-surface hover:bg-surface-container text-on-surface font-data-mono text-caption-sm shadow-sm border border-border-rule/40">2</button>
|
|
<button class="w-7 h-7 rounded flex items-center justify-center bg-surface hover:bg-surface-container text-on-surface font-data-mono text-caption-sm shadow-sm border border-border-rule/40">3</button>
|
|
<span class="px-1 text-text-muted">...</span>
|
|
<button class="w-7 h-7 rounded flex items-center justify-center bg-surface hover:bg-surface-container text-on-surface font-data-mono text-caption-sm shadow-sm border border-border-rule/40">44</button>
|
|
<button class="w-7 h-7 rounded flex items-center justify-center bg-surface hover:bg-surface-container text-text-muted shadow-sm border border-border-rule/40">
|
|
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Simplified Modal for Add/Edit Account (Coarse-Grained customer_id scoping) -->
|
|
<div class="fixed inset-0 z-50 flex items-center justify-center bg-inverse-surface/40 backdrop-blur-sm hidden" id="account-edit-modal"><div class="w-full max-w-2xl bg-surface rounded-xl shadow-xl overflow-hidden border border-border-rule/50 mx-4"><!-- Modal Header --><div class="px-lg py-md bg-surface-container-low flex items-center justify-between border-b border-border-rule/40"><div class="flex items-center gap-sm"><div class="w-8 h-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center"><span class="material-symbols-outlined text-[20px]">forward_to_inbox</span></div><div class="flex flex-col"><h3 class="font-title-sm text-title-sm text-on-surface" id="modal-title">发起客户小程序定向邀请</h3><span class="font-caption-sm text-caption-sm text-text-muted">后台录入单位与联系人 · 生成专属扫码凭证绑定微信</span></div></div><button class="p-1 rounded-lg text-text-muted hover:text-on-surface hover:bg-surface-container transition-colors" onclick="closeAccountModal()"><span class="material-symbols-outlined text-[20px]">close</span></button></div><!-- Modal Body --><div class="p-lg flex flex-col gap-md"><!-- Process Steps Breadcrumb --><div class="p-sm rounded-lg bg-surface-container-low/60 border border-border-rule/40"><div class="grid grid-cols-4 gap-2 text-center text-caption-sm"><div class="flex flex-col items-center gap-1"><span class="w-5 h-5 rounded-full bg-primary text-white flex items-center justify-center font-bold text-[11px]">1</span><span class="font-bold text-primary">录入客户单位</span></div><div class="flex flex-col items-center gap-1"><span class="w-5 h-5 rounded-full bg-surface-container text-on-surface-variant flex items-center justify-center font-bold text-[11px]">2</span><span class="text-text-muted">生成带签名凭证</span></div><div class="flex flex-col items-center gap-1"><span class="w-5 h-5 rounded-full bg-surface-container text-on-surface-variant flex items-center justify-center font-bold text-[11px]">3</span><span class="text-text-muted">短信/二维码通知</span></div><div class="flex flex-col items-center gap-1"><span class="w-5 h-5 rounded-full bg-surface-container text-on-surface-variant flex items-center justify-center font-bold text-[11px]">4</span><span class="text-text-muted">扫码秒级开通</span></div></div></div><!-- Customer ID Assignment --><div class="flex flex-col gap-1"><label class="font-label-bold text-caption-sm text-on-surface flex items-center gap-1"><span>受邀客户归属用电单位</span><span class="text-status-error">*</span></label><div class="relative"><select class="w-full pl-sm pr-8 py-2 rounded-lg bg-background text-body-md font-body-md text-on-surface appearance-none focus:outline-none focus:border-primary border border-border-rule" id="modal-input-org"><option value="WH_EDU_01">武汉软件工程职业学院 (WH_EDU_01)</option><option value="WH_HOSP_01">武汉市第一人民医院 (WH_HOSP_01)</option><option value="OPTICS_PARK_04">光谷生物城创新基地 (OPTICS_PARK_04)</option><option value="HSR_STATION_E">武汉高铁东站枢纽 (HSR_STATION_E)</option></select><span class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none text-[18px]">unfold_more</span></div><span class="font-caption-sm text-[11px] text-text-muted">受邀人员扫码后将严格绑定该单位的客端数据边界 (customer_id 隔离)。</span></div><!-- User Name & Phone Number --><div class="grid grid-cols-1 sm:grid-cols-2 gap-md"><div class="flex flex-col gap-1"><label class="font-label-bold text-caption-sm text-on-surface flex items-center gap-1"><span>受邀客户联系人</span><span class="text-status-error">*</span></label><input class="w-full px-sm py-2 rounded-lg bg-background text-body-md font-body-md text-on-surface focus:outline-none focus:border-primary border border-border-rule" id="modal-input-name" placeholder="例如:张德全" type="text" value="李晓明"/></div><div class="flex flex-col gap-1"><label class="font-label-bold text-caption-sm text-on-surface flex items-center gap-1"><span>受邀人手机号</span><span class="text-status-error">*</span></label><input class="w-full px-sm py-2 rounded-lg bg-background text-body-md font-body-md text-on-surface focus:outline-none focus:border-primary border border-border-rule font-data-mono" id="modal-input-phone" placeholder="用于下发短信激活链接" type="text" value="135-4491-0283"/></div></div><!-- Role & Token Validity Duration --><div class="grid grid-cols-1 sm:grid-cols-2 gap-md"><div class="flex flex-col gap-1"><label class="font-label-bold text-caption-sm text-on-surface">业务岗位 / 职责备注</label><input class="w-full px-sm py-2 rounded-lg bg-background text-body-md font-body-md text-on-surface focus:outline-none focus:border-primary border border-border-rule" id="modal-input-role" placeholder="例如:动力科班长 / 总务主任" type="text" value="动力科班长"/></div><div class="flex flex-col gap-1"><label class="font-label-bold text-caption-sm text-on-surface flex items-center gap-1"><span>邀请凭证有效期限</span><span class="text-primary font-bold font-data-mono">72 小时</span></label><select class="w-full pl-sm pr-8 py-2 rounded-lg bg-background text-body-md font-body-md text-on-surface appearance-none focus:outline-none focus:border-primary border border-border-rule"><option value="72">标准时效 (72 小时,推荐)</option><option value="24">紧急开通 (24 小时)</option><option value="168">长期项目 (7 天)</option></select></div></div><!-- Protocol note --><div class="p-sm rounded-lg bg-surface-container-low border border-border-rule/30 flex items-start gap-sm"><span class="material-symbols-outlined text-primary text-[18px] shrink-0 mt-0.5">shield</span><p class="font-caption-sm text-[11px] text-text-muted leading-relaxed"><strong class="text-on-surface">定向邀请机制:</strong>系统将生成防伪加密签名 Token。客户可通过微信扫码或短信点击链接,一键调起小程序完成微信 OpenID 与手机号的绑定,未绑定的非法请求将自动被安全引擎拦截。</p></div></div><!-- Modal Footer Actions --><div class="px-lg py-md bg-surface-container-low flex items-center justify-between border-t border-border-rule/40"><div class="flex items-center gap-2"><input checked="" class="rounded text-primary" id="modal-send-sms" type="checkbox"/><label class="text-caption-sm text-text-muted" for="modal-send-sms">生成后立即发送邀请通知短信</label></div><div class="flex items-center gap-sm"><button class="px-md py-2 rounded-lg bg-surface text-on-surface-variant font-label-bold text-caption-sm hover:bg-surface-container transition-colors border border-border-rule/60" onclick="closeAccountModal()">取消</button><button class="px-lg py-2 rounded-lg bg-primary text-on-primary font-label-bold text-caption-sm hover:bg-primary-container transition-colors shadow-sm flex items-center gap-1" onclick="handleGenerateInvitation()"><span class="material-symbols-outlined text-[16px]">send</span><span>生成邀请凭证并下发</span></button></div></div></div></div><!-- Dedicated Invitation Token & QR Code Preview Dialog --><div class="fixed inset-0 z-50 flex items-center justify-center bg-inverse-surface/40 backdrop-blur-sm hidden" id="invite-preview-modal"><div class="w-full max-w-md bg-surface rounded-xl shadow-xl overflow-hidden border border-border-rule/50 mx-4"><div class="px-lg py-md bg-surface-container-low flex items-center justify-between border-b border-border-rule/40"><div class="flex items-center gap-sm"><div class="w-8 h-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center"><span class="material-symbols-outlined text-[20px]">qr_code_2</span></div><div><h3 class="font-title-sm text-title-sm text-on-surface">客户小程序专属邀请凭证</h3><span class="font-caption-sm text-caption-sm text-text-muted" id="preview-modal-token">凭证号: INV-EDU-7734</span></div></div><button class="p-1 rounded-lg text-text-muted hover:text-on-surface hover:bg-surface-container transition-colors" onclick="closeInvitePreviewModal()"><span class="material-symbols-outlined text-[20px]">close</span></button></div><div class="p-lg flex flex-col items-center gap-md text-center"><div class="p-3 bg-surface rounded-xl border border-border-rule/60 shadow-sm flex flex-col items-center justify-center"><!-- SVG Mini-Program QR Code Simulation --><svg class="w-44 h-44" viewbox="0 0 160 160"><rect fill="#ffffff" height="160" rx="12" width="160"></rect><g fill="#0054cd"><rect height="40" rx="6" width="40" x="16" y="16"></rect><rect height="40" rx="6" width="40" x="104" y="16"></rect><rect height="40" rx="6" width="40" x="16" y="104"></rect><rect fill="#ffffff" height="24" rx="4" width="24" x="24" y="24"></rect><rect fill="#ffffff" height="24" rx="4" width="24" x="112" y="24"></rect><rect fill="#ffffff" height="24" rx="4" width="24" x="24" y="112"></rect><rect height="12" rx="2" width="12" x="30" y="30"></rect><rect height="12" rx="2" width="12" x="118" y="30"></rect><rect height="12" rx="2" width="12" x="30" y="118"></rect><rect height="12" rx="2" width="12" x="68" y="16"></rect><rect height="12" rx="2" width="12" x="84" y="28"></rect><rect height="12" rx="2" width="12" x="68" y="44"></rect><rect height="12" rx="2" width="12" x="84" y="60"></rect><rect height="12" rx="2" width="12" x="16" y="68"></rect><rect height="12" rx="2" width="12" x="32" y="84"></rect><rect height="12" rx="2" width="12" x="48" y="68"></rect><rect height="24" rx="3" width="24" x="68" y="80"></rect><rect height="12" rx="2" width="12" x="104" y="68"></rect><rect height="12" rx="2" width="12" x="120" y="84"></rect><rect height="12" rx="2" width="12" x="136" y="68"></rect><rect height="12" rx="2" width="12" x="68" y="116"></rect><rect height="12" rx="2" width="12" x="84" y="132"></rect><rect height="12" rx="2" width="12" x="104" y="116"></rect><rect height="12" rx="2" width="12" x="120" y="132"></rect><rect height="12" rx="2" width="12" x="136" y="104"></rect></g></svg><span class="font-caption-sm text-[11px] text-text-muted mt-2">微信客户端扫一扫即可自动完成授权绑定</span></div><div class="flex flex-col gap-1 w-full text-left"><div class="p-sm rounded bg-surface-container-low text-caption-sm flex items-center justify-between"><span class="text-text-muted">受邀客户:</span><span class="font-bold text-on-surface" id="preview-modal-name">王建国 (186-1102-7734)</span></div><div class="p-sm rounded bg-surface-container-low text-caption-sm flex items-center justify-between"><span class="text-text-muted">归属客户单位:</span><span class="font-bold text-on-surface" id="preview-modal-org">武汉软件工程职业学院</span></div><div class="p-sm rounded bg-surface-container-low text-caption-sm flex items-center justify-between"><span class="text-text-muted">凭证状态与时效:</span><span class="font-bold text-status-warn" id="preview-modal-status">待微信授权绑定 (剩余48小时)</span></div></div><div class="flex flex-col gap-1 w-full"><span class="font-caption-sm text-[11px] text-text-muted text-left">专属激活短链接</span><div class="flex items-center gap-xs"><input class="flex-1 px-sm py-1.5 rounded bg-background border border-border-rule font-data-mono text-caption-sm text-text-muted" id="preview-modal-url" readonly="" type="text" value="https://xtpower.cn/wx/i?token=INV-EDU-7734"/><button class="px-sm py-1.5 rounded bg-primary text-white font-label-bold text-caption-sm hover:bg-primary-container shrink-0" onclick="navigator.clipboard ? navigator.clipboard.writeText(document.getElementById('preview-modal-url').value) : null; showToast('已复制专属邀请激活链接!')">复制链接</button></div></div></div><div class="px-lg py-md bg-surface-container-low flex items-center justify-between border-t border-border-rule/40"><button class="px-md py-1.5 rounded bg-surface text-on-surface-variant font-label-bold text-caption-sm hover:bg-surface-container border border-border-rule/60" onclick="showToast('已生成高清小程序太阳码海报 (PNG)')"><span class="material-symbols-outlined text-[16px] inline-block -mt-0.5 mr-1">download</span>下载二维码</button><div class="flex items-center gap-xs"><button class="px-md py-1.5 rounded bg-surface-container text-primary font-label-bold text-caption-sm hover:bg-primary/10" onclick="showToast('已向客户重新补发短信邀请通知')">重发短信</button><button class="px-md py-1.5 rounded bg-primary text-on-primary font-label-bold text-caption-sm hover:bg-primary-container" onclick="closeInvitePreviewModal()">完成</button></div></div></div></div>
|
|
</div>
|
|
<!-- Notification Toast Modal Simulation Container (Dynamic via JS) -->
|
|
<div class="fixed bottom-6 right-6 z-50 transform translate-y-20 opacity-0 transition-all duration-300 pointer-events-none" id="toast-message">
|
|
<div class="px-md py-sm rounded-lg bg-inverse-surface text-inverse-on-surface shadow-xl flex items-center gap-sm">
|
|
<span class="material-symbols-outlined text-tertiary-fixed text-[20px]">check_circle</span>
|
|
<span class="font-body-md text-caption-sm" id="toast-text">授权策略已生效,API网关已同步刷新该OpenID权限缓存。</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// Micro-interaction handlers for client-side feedback
|
|
function showToast(text) {
|
|
const toast = document.getElementById('toast-message');
|
|
const toastText = document.getElementById('toast-text');
|
|
if (toast && toastText) {
|
|
toastText.innerText = text;
|
|
toast.classList.remove('translate-y-20', 'opacity-0', 'pointer-events-none');
|
|
setTimeout(() => {
|
|
toast.classList.add('translate-y-20', 'opacity-0', 'pointer-events-none');
|
|
}, 3200);
|
|
}
|
|
}
|
|
|
|
function selectAccountForEdit(name, role, phone, org, scope) {
|
|
const nameEl = document.getElementById('drawer-user-name');
|
|
const roleEl = document.getElementById('drawer-user-role');
|
|
const phoneEl = document.getElementById('drawer-user-phone');
|
|
const orgEl = document.getElementById('drawer-user-org');
|
|
|
|
if (nameEl) nameEl.innerText = name;
|
|
if (roleEl) roleEl.innerText = role;
|
|
if (phoneEl) phoneEl.innerText = '关联手机号: ' + phone;
|
|
if (orgEl) orgEl.innerText = org;
|
|
|
|
showToast(`已载入 ${name} (${role}) 的RBAC权限配置`);
|
|
}
|
|
|
|
document.getElementById('btn-save-policy')?.addEventListener('click', () => {
|
|
showToast('策略保存成功:已热更新 Redis 缓存与 L2 访问契约!');
|
|
});
|
|
|
|
document.getElementById('btn-notify-wechat')?.addEventListener('click', () => {
|
|
showToast('微信服务号模板消息已推送至用户手机终端!');
|
|
});
|
|
|
|
document.getElementById('btn-batch-sms')?.addEventListener('click', () => {
|
|
showToast('已向待初登的 27 位客户工程师发送一次性激活凭证短信。');
|
|
});
|
|
|
|
document.getElementById('btn-export-records')?.addEventListener('click', () => {
|
|
showToast('正在生成客户小程序 RBAC 权限矩阵报告 (.xlsx)...');
|
|
});
|
|
|
|
document.getElementById('btn-add-account')?.addEventListener('click', () => {
|
|
showToast('已唤起快速新建客户小程序账号向导。');
|
|
});
|
|
</script></main></div></body></html> |