refactor(客户管理): 完成客户管理模块UI与架构全面调整
1. 调整菜单与路由:重命名客户信息/客户账号为客户档案管理/客户小程序授权管理,移除客户建筑/房间路由,新增空间拓扑路由 2. 后端新增客户统计接口`/customers/stats`,前端同步API与类型定义 3. 重构客户档案与小程序授权页面,仅保留数据库支持字段,移除无支撑功能 4. 新增空间拓扑页面,合并建筑与房间管理为树形拓扑视图 5. 更新数据库种子数据与权限配置,清理废弃菜单与绑定关系 6. 补充UI设计文档与规范说明
This commit is contained in:
1 parent
2a06cfea6d
commit
c60caa4770
35 files changed
+7524
-1961
No files matched your search
@@ -0,0 +1,107 @@
|
||||
<!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-Line truncated
|
||||
<!-- 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><sLine truncated
|
||||
</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="动力科班Line truncated
|
||||
</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>
|
||||
Reference in new issue
Block a user