npm - @deppon/deppon-skills - Versions diffs - 2.4.16 → 2.4.20 - Mend

@deppon/deppon-skills 2.4.16 → 2.4.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/dist/deppon-prd-generator/examples/list-crud/prototype.html ADDED Viewed

@@ -0,0 +1,1339 @@
+<!--
+  用户管理高保真可交互原型（技能内置参考示例：examples/list-crud/）
+  对应文档：同目录 prd.md（§3 列表、§4 详情、§5 表单、§6 删除、§9 对照表）
+  技术：Tailwind Play CDN + marked（Markdown）+ 原生 JS；业务数据为 mock。
+  需求标注：运行时 fetch 同目录 prd.md，按章节切片渲染进标注弹框（与 PRD 联动）；请用本地 HTTP 打开本目录，勿依赖 file://。
+  弹层内长表格/长文：纵向 + 横向可滚动（见样式 #annoDlgBody .prd-md）。
+-->
+<!DOCTYPE html>
+<html lang="zh-CN">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>用户管理 — 原型</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+        <script>
+            tailwind.config = {
+                theme: {
+                    extend: {
+                        fontFamily: { sans: ['system-ui', 'Segoe UI', 'PingFang SC', 'sans-serif'] },
+                    },
+                },
+            };
+        </script>
+        <style>
+            .anno-trigger {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 0.375rem;
+                border: 1px solid rgba(217, 119, 6, 0.85);
+                background: rgba(254, 243, 199, 0.95);
+                padding: 0.15rem 0.5rem;
+                font-size: 0.625rem;
+                font-weight: 700;
+                letter-spacing: 0.04em;
+                color: rgb(69 26 3);
+                line-height: 1.2;
+                white-space: nowrap;
+                cursor: pointer;
+            }
+            .anno-trigger:hover {
+                background: rgb(253 230 138);
+            }
+            .anno-trigger:focus-visible {
+                outline: 2px solid rgb(217 119 6);
+                outline-offset: 2px;
+            }
+            /* 标注弹框内：Markdown 渲染区，表格过宽时可横向滚动 */
+            #annoDlgBody .prd-md {
+                max-width: none;
+            }
+            #annoDlgBody .prd-md table {
+                width: 100%;
+                border-collapse: collapse;
+                font-size: 0.75rem;
+                line-height: 1.35;
+            }
+            #annoDlgBody .prd-md th,
+            #annoDlgBody .prd-md td {
+                border: 1px solid rgb(226 232 240);
+                padding: 0.35rem 0.5rem;
+                vertical-align: top;
+            }
+            #annoDlgBody .prd-md th {
+                background: rgb(248 250 252);
+                font-weight: 600;
+                text-align: left;
+            }
+            #annoDlgBody .prd-md h2 {
+                font-size: 1rem;
+                font-weight: 700;
+                margin: 0.75rem 0 0.5rem;
+                color: rgb(15 23 42);
+            }
+            #annoDlgBody .prd-md h3 {
+                font-size: 0.875rem;
+                font-weight: 600;
+                margin: 0.65rem 0 0.35rem;
+                color: rgb(30 41 59);
+            }
+            #annoDlgBody .prd-md ul {
+                margin: 0.35rem 0 0.35rem 1.1rem;
+                list-style: disc;
+            }
+            #annoDlgBody .prd-md p {
+                margin: 0.35rem 0;
+            }
+            #annoDlgBody .prd-md code {
+                font-size: 0.7rem;
+                border-radius: 0.25rem;
+                background: rgb(241 245 249);
+                padding: 0.1rem 0.3rem;
+            }
+        </style>
+    </head>
+    <body class="min-h-screen bg-slate-100 text-slate-800 antialiased">
+        <div
+            id="prdLoadBanner"
+            class="hidden border-b border-amber-300 bg-amber-100 px-4 py-2 text-center text-xs text-amber-950"
+            role="status"
+        ></div>
+        <div
+            id="toast"
+            class="fixed top-4 right-4 z-[60] hidden max-w-sm rounded-lg bg-slate-900 px-4 py-3 text-sm text-white shadow-lg"
+            role="status"
+        ></div>
+        <button
+            type="button"
+            id="btnAnnoLegend"
+            class="fixed bottom-5 left-5 z-[65] flex items-center gap-2 rounded-full border border-amber-400 bg-white px-3 py-2 text-xs font-medium text-amber-950 shadow-lg hover:bg-amber-50 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2"
+            title="需求标注说明"
+        >
+            <span
+                class="flex h-6 w-6 items-center justify-center rounded-full bg-amber-500 text-xs font-bold text-white"
+                aria-hidden="true"
+                >?</span
+            >
+            标注说明
+        </button>
+        <header class="border-b border-slate-200 bg-white">
+            <div class="mx-auto flex max-w-6xl items-center px-4 py-4">
+                <div class="flex items-start gap-2">
+                    <div>
+                        <h1 class="text-lg font-semibold text-slate-900">用户管理</h1>
+                        <p class="mt-0.5 text-xs text-slate-500">原型 · 与 prd.md 对齐</p>
+                    </div>
+                    <button
+                        type="button"
+                        class="anno-trigger mt-0.5 shrink-0"
+                        data-anno-key="s1"
+                        aria-label="查看 PRD 标注：引言与菜单"
+                    >
+                        PRD §1
+                    </button>
+                </div>
+            </div>
+        </header>
+        <main class="mx-auto max-w-6xl px-4 py-6">
+            <!-- §3.1 筛选 -->
+            <section
+                class="mb-6 rounded-xl border border-slate-200 bg-white p-4 shadow-sm"
+                aria-labelledby="filter-title"
+            >
+                <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
+                    <h2 id="filter-title" class="text-sm font-semibold text-slate-900">筛选条件</h2>
+                    <button
+                        type="button"
+                        class="anno-trigger"
+                        data-anno-key="s31"
+                        aria-label="查看 PRD 标注：筛选查询区"
+                    >
+                        PRD §3.1
+                    </button>
+                </div>
+                <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                    <label class="block text-xs font-medium text-slate-600"
+                        >用户名
+                        <input
+                            type="text"
+                            id="fUsername"
+                            class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                            placeholder="模糊匹配"
+                            autocomplete="off"
+                        />
+                    </label>
+                    <label class="block text-xs font-medium text-slate-600"
+                        >姓名
+                        <input
+                            type="text"
+                            id="fName"
+                            class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                            placeholder="模糊匹配"
+                            autocomplete="off"
+                        />
+                    </label>
+                    <label class="block text-xs font-medium text-slate-600"
+                        >手机号
+                        <input
+                            type="text"
+                            id="fPhone"
+                            class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                            placeholder="精准"
+                            inputmode="numeric"
+                            autocomplete="off"
+                        />
+                    </label>
+                    <label class="block text-xs font-medium text-slate-600"
+                        >用户状态
+                        <select
+                            id="fStatus"
+                            class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                        >
+                            <option value="">全部</option>
+                            <option value="启用">启用</option>
+                            <option value="禁用">禁用</option>
+                        </select>
+                    </label>
+                </div>
+                <div class="mt-4 flex flex-wrap gap-2">
+                    <button
+                        type="button"
+                        id="btnQuery"
+                        class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                    >
+                        查询
+                    </button>
+                    <button
+                        type="button"
+                        id="btnReset"
+                        class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2"
+                    >
+                        重置
+                    </button>
+                </div>
+            </section>
+            <!-- §3.2 列表 -->
+            <section
+                class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm"
+                aria-labelledby="table-title"
+            >
+                <div class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-100 px-4 py-3">
+                    <div class="flex items-center gap-2">
+                        <h2 id="table-title" class="text-sm font-semibold text-slate-900">用户列表</h2>
+                        <button
+                            type="button"
+                            class="anno-trigger"
+                            data-anno-key="s32"
+                            aria-label="查看 PRD 标注：数据列表"
+                        >
+                            PRD §3.2
+                        </button>
+                    </div>
+                    <div class="flex flex-wrap items-center gap-2">
+                        <button
+                            type="button"
+                            class="anno-trigger"
+                            data-anno-key="s2_toolbar"
+                            aria-label="查看 PRD 标注：工具栏与新增"
+                        >
+                            PRD §2·§3.1
+                        </button>
+                        <button
+                            type="button"
+                            id="btnAdd"
+                            class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                        >
+                            新增用户
+                        </button>
+                    </div>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="min-w-full divide-y divide-slate-200 text-left text-sm">
+                        <thead class="bg-slate-50 text-xs font-medium uppercase tracking-wide text-slate-600">
+                            <tr>
+                                <th class="px-4 py-3">用户名</th>
+                                <th class="px-4 py-3">姓名</th>
+                                <th class="px-4 py-3">手机号</th>
+                                <th class="px-4 py-3">部门</th>
+                                <th class="px-4 py-3">状态</th>
+                                <th class="px-4 py-3">创建时间</th>
+                                <th class="px-4 py-3 text-right">操作</th>
+                            </tr>
+                        </thead>
+                        <tbody id="tbody" class="divide-y divide-slate-100 bg-white"></tbody>
+                    </table>
+                </div>
+                <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 px-4 py-3">
+                    <div class="flex flex-wrap items-center gap-4 text-xs text-slate-600">
+                        <span id="totalHint" class="shrink-0 text-slate-500"></span>
+                        <span>每页</span>
+                        <select id="pageSize" class="rounded border border-slate-300 px-2 py-1 text-sm">
+                            <option value="5">5</option>
+                            <option value="10" selected>10</option>
+                            <option value="20">20</option>
+                        </select>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <button
+                            type="button"
+                            id="btnPrev"
+                            class="rounded border border-slate-300 px-3 py-1.5 text-xs font-medium hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        >
+                            上一页
+                        </button>
+                        <span id="pageInfo" class="text-xs text-slate-600"></span>
+                        <button
+                            type="button"
+                            id="btnNext"
+                            class="rounded border border-slate-300 px-3 py-1.5 text-xs font-medium hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        >
+                            下一页
+                        </button>
+                    </div>
+                </div>
+            </section>
+        </main>
+        <!-- §4 详情 -->
+        <div
+            id="modalDetail"
+            class="fixed inset-0 z-40 hidden items-center justify-center bg-black/40 p-4"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="detailTitle"
+        >
+            <div
+                class="max-h-[90vh] w-full max-w-md overflow-y-auto rounded-xl bg-white p-6 shadow-xl"
+                onclick="event.stopPropagation()"
+            >
+                <div class="flex flex-wrap items-start justify-between gap-2">
+                    <h3 id="detailTitle" class="text-base font-semibold text-slate-900">用户详情</h3>
+                    <button
+                        type="button"
+                        class="anno-trigger shrink-0"
+                        data-anno-key="s4"
+                        aria-label="查看 PRD 标注：用户详情"
+                    >
+                        PRD §4
+                    </button>
+                </div>
+                <dl id="detailBody" class="mt-4 space-y-3 text-sm"></dl>
+                <div class="mt-6 flex justify-end">
+                    <button
+                        type="button"
+                        class="btn-close-detail rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400"
+                    >
+                        关闭
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- §5 新增/编辑 -->
+        <div
+            id="modalForm"
+            class="fixed inset-0 z-40 hidden items-center justify-center bg-black/40 p-4"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="formTitle"
+        >
+            <div
+                class="max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-xl bg-white p-6 shadow-xl"
+                onclick="event.stopPropagation()"
+            >
+                <div class="flex flex-wrap items-start justify-between gap-2">
+                    <h3 id="formTitle" class="text-base font-semibold text-slate-900">新增用户</h3>
+                    <button
+                        type="button"
+                        class="anno-trigger shrink-0"
+                        data-anno-key="s5"
+                        aria-label="查看 PRD 标注：新增编辑表单"
+                    >
+                        PRD §5
+                    </button>
+                </div>
+                <form id="userForm" class="mt-4 space-y-4">
+                    <input type="hidden" id="formId" />
+                    <div>
+                        <label class="text-xs font-medium text-slate-600"
+                            >用户名 <span class="text-red-500">*</span></label
+                        >
+                        <input
+                            name="username"
+                            id="formUsername"
+                            class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                            autocomplete="off"
+                        />
+                        <p id="errUsername" class="mt-1 hidden text-xs text-red-600"></p>
+                    </div>
+                    <div>
+                        <label class="text-xs font-medium text-slate-600"
+                            >姓名 <span class="text-red-500">*</span></label
+                        >
+                        <input
+                            name="name"
+                            id="formName"
+                            class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                            autocomplete="off"
+                        />
+                        <p id="errName" class="mt-1 hidden text-xs text-red-600"></p>
+                    </div>
+                    <div>
+                        <label class="text-xs font-medium text-slate-600"
+                            >手机号 <span class="text-red-500">*</span></label
+                        >
+                        <input
+                            name="phone"
+                            id="formPhone"
+                            class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                            inputmode="numeric"
+                            autocomplete="off"
+                        />
+                        <p id="errPhone" class="mt-1 hidden text-xs text-red-600"></p>
+                    </div>
+                    <div>
+                        <label class="text-xs font-medium text-slate-600">邮箱</label>
+                        <input
+                            name="email"
+                            id="formEmail"
+                            type="email"
+                            class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                            autocomplete="off"
+                        />
+                        <p id="errEmail" class="mt-1 hidden text-xs text-red-600"></p>
+                    </div>
+                    <div>
+                        <label class="text-xs font-medium text-slate-600"
+                            >部门 <span class="text-red-500">*</span></label
+                        >
+                        <select
+                            id="formDept"
+                            class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                        >
+                            <option value="">请选择</option>
+                            <option value="研发中心">研发中心</option>
+                            <option value="运营中心">运营中心</option>
+                            <option value="财务部">财务部</option>
+                        </select>
+                        <p id="errDept" class="mt-1 hidden text-xs text-red-600"></p>
+                    </div>
+                    <fieldset>
+                        <legend class="text-xs font-medium text-slate-600">
+                            角色 <span class="text-red-500">*</span>（至少选一项）
+                        </legend>
+                        <div class="mt-2 flex flex-wrap gap-3 text-sm">
+                            <label class="inline-flex items-center gap-2"
+                                ><input
+                                    type="checkbox"
+                                    name="role"
+                                    value="管理员"
+                                    class="rounded border-slate-300 text-blue-600 focus:ring-blue-500"
+                                />
+                                管理员</label
+                            >
+                            <label class="inline-flex items-center gap-2"
+                                ><input
+                                    type="checkbox"
+                                    name="role"
+                                    value="开发"
+                                    class="rounded border-slate-300 text-blue-600 focus:ring-blue-500"
+                                />
+                                开发</label
+                            >
+                            <label class="inline-flex items-center gap-2"
+                                ><input
+                                    type="checkbox"
+                                    name="role"
+                                    value="运营"
+                                    class="rounded border-slate-300 text-blue-600 focus:ring-blue-500"
+                                />
+                                运营</label
+                            >
+                        </div>
+                        <p id="errRoles" class="mt-1 hidden text-xs text-red-600"></p>
+                    </fieldset>
+                    <div>
+                        <label class="text-xs font-medium text-slate-600">用户状态</label>
+                        <div class="mt-2 flex gap-4 text-sm">
+                            <label class="inline-flex items-center gap-2"
+                                ><input
+                                    type="radio"
+                                    name="status"
+                                    value="启用"
+                                    checked
+                                    class="text-blue-600 focus:ring-blue-500"
+                                />
+                                启用</label
+                            >
+                            <label class="inline-flex items-center gap-2"
+                                ><input
+                                    type="radio"
+                                    name="status"
+                                    value="禁用"
+                                    class="text-blue-600 focus:ring-blue-500"
+                                />
+                                禁用</label
+                            >
+                        </div>
+                    </div>
+                    <div class="flex justify-end gap-2 border-t border-slate-100 pt-4">
+                        <button
+                            type="button"
+                            id="btnFormCancel"
+                            class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400"
+                        >
+                            取消
+                        </button>
+                        <button
+                            type="submit"
+                            class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                        >
+                            保存
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <!-- §6 删除确认 -->
+        <div
+            id="modalDelete"
+            class="fixed inset-0 z-50 hidden items-center justify-center bg-black/40 p-4"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="delTitle"
+        >
+            <div class="w-full max-w-sm rounded-xl bg-white p-6 shadow-xl" onclick="event.stopPropagation()">
+                <div class="flex flex-wrap items-start justify-between gap-2">
+                    <h3 id="delTitle" class="text-base font-semibold text-slate-900">确认删除</h3>
+                    <button
+                        type="button"
+                        class="anno-trigger shrink-0"
+                        data-anno-key="s6"
+                        aria-label="查看 PRD 标注：删除"
+                    >
+                        PRD §6
+                    </button>
+                </div>
+                <p id="delMsg" class="mt-2 text-sm text-slate-600"></p>
+                <div class="mt-6 flex justify-end gap-2">
+                    <button
+                        type="button"
+                        id="btnDelCancel"
+                        class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400"
+                    >
+                        取消
+                    </button>
+                    <button
+                        type="button"
+                        id="btnDelOk"
+                        class="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+                    >
+                        删除
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- 关闭表单二次确认（页面内弹层，非浏览器原生 confirm） -->
+        <div
+            id="modalFormLeave"
+            class="fixed inset-0 z-[55] hidden items-center justify-center bg-black/45 p-4"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="formLeaveTitle"
+        >
+            <div class="w-full max-w-sm rounded-xl bg-white p-6 shadow-xl" onclick="event.stopPropagation()">
+                <h3 id="formLeaveTitle" class="text-base font-semibold text-slate-900">关闭表单</h3>
+                <p class="mt-2 text-sm text-slate-600">确定关闭表单？未保存的修改将丢失。</p>
+                <div class="mt-6 flex justify-end gap-2">
+                    <button
+                        type="button"
+                        id="btnFormLeaveCancel"
+                        class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400"
+                    >
+                        返回编辑
+                    </button>
+                    <button
+                        type="button"
+                        id="btnFormLeaveOk"
+                        class="rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+                    >
+                        确定离开
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- PRD 需求标注弹框（走查用，非业务功能；z-index 高于业务弹层） -->
+        <div
+            id="modalAnno"
+            class="fixed inset-0 z-[70] hidden items-center justify-center bg-slate-900/55 p-4 backdrop-blur-[1px]"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="annoDlgTitle"
+        >
+            <div
+                class="flex max-h-[88vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl border-2 border-amber-400 bg-white shadow-2xl ring-4 ring-amber-300/30"
+                role="document"
+            >
+                <div
+                    class="flex shrink-0 items-center justify-between border-b border-amber-200 bg-amber-50 px-4 py-2"
+                >
+                    <div class="min-w-0 pr-2">
+                        <p class="text-[10px] font-bold uppercase tracking-wider text-amber-900">
+                            需求标注 · 非业务弹窗
+                        </p>
+                        <h3 id="annoDlgTitle" class="mt-0.5 truncate text-sm font-semibold text-slate-900"></h3>
+                    </div>
+                    <button
+                        type="button"
+                        id="btnAnnoClose"
+                        class="shrink-0 rounded-md p-1.5 text-slate-600 hover:bg-amber-200/60 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-amber-600"
+                        aria-label="关闭标注"
+                    >
+                        ✕
+                    </button>
+                </div>
+                <div
+                    id="annoDlgBody"
+                    class="min-h-0 flex-1 overflow-y-auto overflow-x-auto p-4 text-sm leading-relaxed text-slate-700"
+                    tabindex="-1"
+                ></div>
+            </div>
+        </div>
+        <script src="https://cdn.jsdelivr.net/npm/marked@12.0.2/marked.min.js"></script>
+        <script>
+            function runPrototype(prdMd, prdLoadError) {
+                const MOCK = [
+                    {
+                        id: '10001',
+                        username: 'zhangsan',
+                        name: '张三',
+                        phone: '13812345678',
+                        dept: '研发中心',
+                        status: '启用',
+                        email: 'zs@example.com',
+                        roles: ['管理员', '开发'],
+                        createdAt: '2025-01-10 09:00',
+                    },
+                    {
+                        id: '10002',
+                        username: 'lisi',
+                        name: '李四',
+                        phone: '13987654321',
+                        dept: '运营中心',
+                        status: '启用',
+                        email: 'ls@example.com',
+                        roles: ['运营'],
+                        createdAt: '2025-01-12 14:20',
+                    },
+                    {
+                        id: '10003',
+                        username: 'wangwu',
+                        name: '王五',
+                        phone: '13600001111',
+                        dept: '财务部',
+                        status: '禁用',
+                        email: '',
+                        roles: ['管理员'],
+                        createdAt: '2025-02-01 11:05',
+                    },
+                    {
+                        id: '10004',
+                        username: 'zhaoliu',
+                        name: '赵六',
+                        phone: '13522223333',
+                        dept: '研发中心',
+                        status: '启用',
+                        email: 'zl@example.com',
+                        roles: ['开发'],
+                        createdAt: '2025-02-15 16:40',
+                    },
+                    {
+                        id: '10005',
+                        username: 'sunqi',
+                        name: '孙七',
+                        phone: '18800009999',
+                        dept: '运营中心',
+                        status: '启用',
+                        email: 'sq@example.com',
+                        roles: ['运营', '开发'],
+                        createdAt: '2025-03-02 08:30',
+                    },
+                ];
+                let allUsers = MOCK.map(function (u) {
+                    return Object.assign({}, u, { roles: u.roles.slice() });
+                });
+                let applied = { username: '', name: '', phone: '', status: '' };
+                let page = 1;
+                let pageSize = 10;
+                let deleteTarget = null;
+                let nextId = 10006;
+                /** 打开表单时的快照 JSON，用于判断是否有未保存修改 */
+                var formSnapshotJson = null;
+                const $ = function (id) {
+                    return document.getElementById(id);
+                };
+                function escapeHtml(s) {
+                    return String(s)
+                        .replace(/&/g, '&amp;')
+                        .replace(/</g, '&lt;')
+                        .replace(/>/g, '&gt;')
+                        .replace(/"/g, '&quot;');
+                }
+                if (typeof marked !== 'undefined' && marked.use) {
+                    marked.use({ gfm: true, breaks: true });
+                }
+                (function showPrdBanner() {
+                    var el = $('prdLoadBanner');
+                    if (!el) return;
+                    if (prdLoadError || !prdMd) {
+                        el.textContent =
+                            '未加载到同目录 prd.md：需求标注仅显示兜底摘要。请在本文件所在目录启动本地静态服务后刷新页面（勿直接 file:// 双击打开）。';
+                        el.classList.remove('hidden');
+                    }
+                })();
+                function sliceBetween(md, startRe, endRe) {
+                    if (!md) return '';
+                    var m = md.match(startRe);
+                    if (!m || m.index === undefined) return '';
+                    var i0 = m.index;
+                    if (!endRe) return md.slice(i0).trim();
+                    var tail = md.slice(i0 + m[0].length);
+                    var j = tail.search(endRe);
+                    if (j === -1) return md.slice(i0).trim();
+                    return md.slice(i0, i0 + m[0].length + j).trim();
+                }
+                function mdToHtml(src) {
+                    if (!src)
+                        return '<p class="text-slate-500 text-xs">（在 prd.md 中未匹配到对应章节，请检查标题层级是否与 ANNO_EXTRACT 正则一致。）</p>';
+                    if (typeof marked !== 'undefined' && typeof marked.parse === 'function') {
+                        return '<div class="prd-md">' + marked.parse(src) + '</div>';
+                    }
+                    return (
+                        '<pre class="max-h-[60vh] overflow-auto whitespace-pre-wrap rounded border border-slate-200 bg-slate-50 p-3 font-mono text-[11px] leading-snug">' +
+                        escapeHtml(src) +
+                        '</pre>'
+                    );
+                }
+                var LEGEND_INTRO =
+                    '<ul class="list-disc space-y-2 pl-4 text-slate-700"><li>琥珀色顶栏弹框为 <strong>PRD 走查标注</strong>，正文由<strong>同目录 prd.md</strong>按章节切片后经 Markdown 渲染得到；修改 prd.md 后<strong>刷新页面</strong>即可同步。</li><li>表格或章节较长时，可在本弹框内<strong>上下左右滚动</strong>查看。</li><li>按 <kbd class="rounded border border-slate-300 bg-slate-50 px-1 text-xs">Esc</kbd>、点遮罩或 ✕ 关闭；本层 z-index 高于业务弹窗。</li></ul>';
+                var ANNO_EXTRACT = {
+                    s1: { start: /^## 1\./m, end: /^## 2\./m, title: 'prd.md §1 引言（原文）' },
+                    s2_toolbar: {
+                        start: /^## 2\./m,
+                        end: /^### 3\.2/m,
+                        title: 'prd.md §2·§3.1 原文（菜单权限至 §3.2 之前）',
+                    },
+                    s31: { start: /^### 3\.1/m, end: /^### 3\.2/m, title: 'prd.md §3.1 筛选查询区（原文）' },
+                    s32: { start: /^### 3\.2/m, end: /^## 4\./m, title: 'prd.md §3.2 数据列表（原文）' },
+                    s4: { start: /^## 4\./m, end: /^## 5\./m, title: 'prd.md §4 用户详情（原文）' },
+                    s5: { start: /^## 5\./m, end: /^## 6\./m, title: 'prd.md §5 新增/编辑表单（原文）' },
+                    s6: { start: /^## 6\./m, end: /^## 7\./m, title: 'prd.md §6 删除与审计（原文）' },
+                };
+                var ANNO_FALLBACK = {
+                    s1: {
+                        title: 'prd.md §1 引言（兜底）',
+                        html: '<ul class="list-disc space-y-2 pl-4"><li>定位：后台用户账号统一管理（查、增、改、删）。</li><li>功能清单见 PRD §1.2；本原型用 mock 数据演示主路径。</li><li>请用 HTTP 打开同目录以加载 prd.md 全文联动。</li></ul>',
+                    },
+                    s2_toolbar: {
+                        title: 'prd.md §2·§3.1（兜底）',
+                        html: '<ul class="list-disc space-y-2 pl-4"><li><strong>新增用户</strong>需「编辑」类权限（PRD §2.2）。</li><li>「新增用户」位于列表标题行右侧。</li></ul>',
+                    },
+                    s31: {
+                        title: 'prd.md §3.1（兜底）',
+                        html: '<ul class="list-disc space-y-2 pl-4"><li>变更条件后须点击<strong>查询</strong>才刷新列表。</li><li><strong>重置</strong>恢复默认。</li></ul>',
+                    },
+                    s32: {
+                        title: 'prd.md §3.2（兜底）',
+                        html: '<ul class="list-disc space-y-2 pl-4"><li>列字段、分页以 PRD 表格为准。</li><li>行操作：查看 / 编辑 / 删除。</li></ul>',
+                    },
+                    s4: {
+                        title: 'prd.md §4（兜底）',
+                        html: '<ul class="list-disc space-y-2 pl-4"><li>只读详情弹层；字段见 PRD §4。</li></ul>',
+                    },
+                    s5: {
+                        title: 'prd.md §5（兜底）',
+                        html: '<ul class="list-disc space-y-2 pl-4"><li>新增与编辑校验见 PRD §5 表格。</li></ul>',
+                    },
+                    s6: {
+                        title: 'prd.md §6（兜底）',
+                        html: '<ul class="list-disc space-y-2 pl-4"><li>删除须二次确认；建议审计日志。</li></ul>',
+                    },
+                };
+                function openAnno(key) {
+                    var warn =
+                        !prdMd || prdLoadError
+                            ? '<div class="mb-3 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900"><strong>prd.md 未联动：</strong>请用本地静态服务打开与本文件同级目录（勿 file://），以下为兜底摘要。</div>'
+                            : '';
+                    if (key === 'legend') {
+                        $('annoDlgTitle').textContent = '需求标注说明（附录 · prd.md §9）';
+                        var s9 = prdMd ? sliceBetween(prdMd, /^## 9\./m, /^## 10\./m) : '';
+                        $('annoDlgBody').innerHTML =
+                            warn +
+                            LEGEND_INTRO +
+                            (s9
+                                ? '<div class="mt-4 border-t border-amber-100 pt-3"><p class="mb-2 text-xs font-semibold text-slate-700">prd.md · §9 原型与 PRD 对应关系（原文）</p>' +
+                                  mdToHtml(s9) +
+                                  '</div>'
+                                : '');
+                        $('modalAnno').classList.remove('hidden');
+                        $('modalAnno').classList.add('flex');
+                        $('annoDlgBody').scrollTop = 0;
+                        $('annoDlgBody').focus({ preventScroll: true });
+                        return;
+                    }
+                    var spec = ANNO_EXTRACT[key];
+                    if (!spec) return;
+                    var slice = prdMd ? sliceBetween(prdMd, spec.start, spec.end) : '';
+                    if (slice) {
+                        $('annoDlgTitle').textContent = spec.title;
+                        $('annoDlgBody').innerHTML = warn + mdToHtml(slice);
+                    } else if (ANNO_FALLBACK[key]) {
+                        $('annoDlgTitle').textContent = ANNO_FALLBACK[key].title;
+                        $('annoDlgBody').innerHTML = warn + ANNO_FALLBACK[key].html;
+                    } else {
+                        return;
+                    }
+                    $('modalAnno').classList.remove('hidden');
+                    $('modalAnno').classList.add('flex');
+                    $('annoDlgBody').scrollTop = 0;
+                    $('annoDlgBody').focus({ preventScroll: true });
+                }
+                function closeAnno() {
+                    $('modalAnno').classList.add('hidden');
+                    $('modalAnno').classList.remove('flex');
+                }
+                function isAnnoOpen() {
+                    return $('modalAnno') && !$('modalAnno').classList.contains('hidden');
+                }
+                function getFormStateJson() {
+                    var roles = [];
+                    document.querySelectorAll('input[name="role"]:checked').forEach(function (c) {
+                        roles.push(c.value);
+                    });
+                    roles.sort();
+                    var statusEl = document.querySelector('input[name="status"]:checked');
+                    return JSON.stringify({
+                        username: $('formUsername').value.trim(),
+                        name: $('formName').value.trim(),
+                        phone: $('formPhone').value.trim(),
+                        email: $('formEmail').value.trim(),
+                        dept: $('formDept').value,
+                        roles: roles,
+                        status: statusEl ? statusEl.value : '启用',
+                    });
+                }
+                function captureFormSnapshot() {
+                    formSnapshotJson = getFormStateJson();
+                }
+                function isFormDirty() {
+                    return formSnapshotJson !== null && getFormStateJson() !== formSnapshotJson;
+                }
+                function isFormModalOpen() {
+                    return $('modalForm') && !$('modalForm').classList.contains('hidden');
+                }
+                function isFormLeaveModalOpen() {
+                    return $('modalFormLeave') && !$('modalFormLeave').classList.contains('hidden');
+                }
+                function openFormLeaveConfirm() {
+                    $('modalFormLeave').classList.remove('hidden');
+                    $('modalFormLeave').classList.add('flex');
+                }
+                function closeFormLeaveConfirm() {
+                    $('modalFormLeave').classList.add('hidden');
+                    $('modalFormLeave').classList.remove('flex');
+                }
+                document.addEventListener(
+                    'click',
+                    function (e) {
+                        var t = e.target.closest('[data-anno-key]');
+                        if (!t) return;
+                        var key = t.getAttribute('data-anno-key');
+                        if (!key) return;
+                        e.preventDefault();
+                        e.stopPropagation();
+                        openAnno(key);
+                    },
+                    true,
+                );
+                $('btnAnnoClose').addEventListener('click', closeAnno);
+                $('modalAnno').addEventListener('click', function (e) {
+                    if (e.target === $('modalAnno')) closeAnno();
+                });
+                $('btnAnnoLegend').addEventListener('click', function () {
+                    openAnno('legend');
+                });
+                function toast(msg) {
+                    var el = $('toast');
+                    el.textContent = msg;
+                    el.classList.remove('hidden');
+                    clearTimeout(el._t);
+                    el._t = setTimeout(function () {
+                        el.classList.add('hidden');
+                    }, 2600);
+                }
+                function maskPhone(p) {
+                    if (!p || p.length < 7) return p;
+                    return p.slice(0, 3) + '****' + p.slice(-4);
+                }
+                function getFiltered() {
+                    return allUsers.filter(function (u) {
+                        if (applied.username && u.username.indexOf(applied.username.trim()) === -1) return false;
+                        if (applied.name && u.name.indexOf(applied.name.trim()) === -1) return false;
+                        if (applied.phone && u.phone !== applied.phone.trim()) return false;
+                        if (applied.status && u.status !== applied.status) return false;
+                        return true;
+                    });
+                }
+                function renderTable() {
+                    var list = getFiltered();
+                    var total = list.length;
+                    var ps = parseInt($('pageSize').value, 10);
+                    pageSize = ps;
+                    var pages = Math.max(1, Math.ceil(total / pageSize));
+                    if (page > pages) page = pages;
+                    var start = (page - 1) * pageSize;
+                    var slice = list.slice(start, start + pageSize);
+                    $('totalHint').textContent = '共 ' + total + ' 条';
+                    $('pageInfo').textContent = '第 ' + page + ' / ' + pages + ' 页';
+                    var tb = $('tbody');
+                    tb.innerHTML = '';
+                    if (slice.length === 0) {
+                        var tr = document.createElement('tr');
+                        tr.innerHTML =
+                            '<td colspan="7" class="px-4 py-12 text-center text-sm text-slate-500">暂无数据</td>';
+                        tb.appendChild(tr);
+                        return;
+                    }
+                    slice.forEach(function (u) {
+                        var tr = document.createElement('tr');
+                        tr.className = 'hover:bg-slate-50';
+                        var stCls = u.status === '启用' ? 'text-emerald-600' : 'text-slate-400';
+                        tr.innerHTML =
+                            '<td class="whitespace-nowrap px-4 py-3 font-mono text-xs">' +
+                            escapeHtml(u.username) +
+                            '</td>' +
+                            '<td class="whitespace-nowrap px-4 py-3">' +
+                            escapeHtml(u.name) +
+                            '</td>' +
+                            '<td class="whitespace-nowrap px-4 py-3 font-mono text-xs">' +
+                            escapeHtml(maskPhone(u.phone)) +
+                            '</td>' +
+                            '<td class="whitespace-nowrap px-4 py-3">' +
+                            escapeHtml(u.dept) +
+                            '</td>' +
+                            '<td class="whitespace-nowrap px-4 py-3 ' +
+                            stCls +
+                            '">' +
+                            escapeHtml(u.status) +
+                            '</td>' +
+                            '<td class="whitespace-nowrap px-4 py-3 text-xs text-slate-500">' +
+                            escapeHtml(u.createdAt) +
+                            '</td>' +
+                            '<td class="whitespace-nowrap px-4 py-3 text-right text-xs">' +
+                            '<button type="button" data-a="view" data-id="' +
+                            u.id +
+                            '" class="mr-2 text-blue-600 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded px-1">查看</button>' +
+                            '<button type="button" data-a="edit" data-id="' +
+                            u.id +
+                            '" class="mr-2 text-blue-600 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded px-1">编辑</button>' +
+                            '<button type="button" data-a="del" data-id="' +
+                            u.id +
+                            '" class="text-red-600 hover:underline focus:outline-none focus:ring-2 focus:ring-red-500 rounded px-1">删除</button>' +
+                            '</td>';
+                        tb.appendChild(tr);
+                    });
+                }
+                function openDetail(u) {
+                    var body = $('detailBody');
+                    body.innerHTML =
+                        '<div class="flex justify-between gap-4"><dt class="text-slate-500">用户 ID</dt><dd class="font-mono text-slate-900">' +
+                        escapeHtml(u.id) +
+                        '</dd></div>' +
+                        '<div class="flex justify-between gap-4"><dt class="text-slate-500">用户名</dt><dd>' +
+                        escapeHtml(u.username) +
+                        '</dd></div>' +
+                        '<div class="flex justify-between gap-4"><dt class="text-slate-500">姓名</dt><dd>' +
+                        escapeHtml(u.name) +
+                        '</dd></div>' +
+                        '<div class="flex justify-between gap-4"><dt class="text-slate-500">手机号</dt><dd class="font-mono">' +
+                        escapeHtml(u.phone) +
+                        '</dd></div>' +
+                        '<div class="flex justify-between gap-4"><dt class="text-slate-500">邮箱</dt><dd>' +
+                        escapeHtml(u.email || '—') +
+                        '</dd></div>' +
+                        '<div class="flex justify-between gap-4"><dt class="text-slate-500">部门</dt><dd>' +
+                        escapeHtml(u.dept) +
+                        '</dd></div>' +
+                        '<div class="flex justify-between gap-4"><dt class="text-slate-500">角色</dt><dd>' +
+                        escapeHtml(u.roles.join('、')) +
+                        '</dd></div>' +
+                        '<div class="flex justify-between gap-4"><dt class="text-slate-500">状态</dt><dd>' +
+                        escapeHtml(u.status) +
+                        '</dd></div>' +
+                        '<div class="flex justify-between gap-4"><dt class="text-slate-500">创建时间</dt><dd class="text-xs">' +
+                        escapeHtml(u.createdAt) +
+                        '</dd></div>';
+                    $('modalDetail').classList.remove('hidden');
+                    $('modalDetail').classList.add('flex');
+                }
+                function closeDetail() {
+                    $('modalDetail').classList.add('hidden');
+                    $('modalDetail').classList.remove('flex');
+                }
+                function clearFormErrors() {
+                    ['errUsername', 'errName', 'errPhone', 'errEmail', 'errDept', 'errRoles'].forEach(function (id) {
+                        var el = $(id);
+                        el.classList.add('hidden');
+                        el.textContent = '';
+                    });
+                }
+                function openFormAdd() {
+                    clearFormErrors();
+                    $('formTitle').textContent = '新增用户';
+                    $('formId').value = '';
+                    $('formUsername').value = '';
+                    $('formUsername').disabled = false;
+                    $('formName').value = '';
+                    $('formPhone').value = '';
+                    $('formEmail').value = '';
+                    $('formDept').value = '';
+                    document.querySelectorAll('input[name="role"]').forEach(function (c) {
+                        c.checked = false;
+                    });
+                    document.querySelector('input[name="status"][value="启用"]').checked = true;
+                    $('modalForm').classList.remove('hidden');
+                    $('modalForm').classList.add('flex');
+                    $('formUsername').focus();
+                    captureFormSnapshot();
+                }
+                function openFormEdit(u) {
+                    clearFormErrors();
+                    $('formTitle').textContent = '编辑用户';
+                    $('formId').value = u.id;
+                    $('formUsername').value = u.username;
+                    $('formUsername').disabled = true;
+                    $('formName').value = u.name;
+                    $('formPhone').value = u.phone;
+                    $('formEmail').value = u.email || '';
+                    $('formDept').value = u.dept;
+                    document.querySelectorAll('input[name="role"]').forEach(function (c) {
+                        c.checked = u.roles.indexOf(c.value) !== -1;
+                    });
+                    document.querySelectorAll('input[name="status"]').forEach(function (r) {
+                        r.checked = r.value === u.status;
+                    });
+                    $('modalForm').classList.remove('hidden');
+                    $('modalForm').classList.add('flex');
+                    $('formName').focus();
+                    captureFormSnapshot();
+                }
+                function closeForm() {
+                    closeFormLeaveConfirm();
+                    formSnapshotJson = null;
+                    $('modalForm').classList.add('hidden');
+                    $('modalForm').classList.remove('flex');
+                }
+                function validateForm() {
+                    clearFormErrors();
+                    var ok = true;
+                    var username = $('formUsername').value.trim();
+                    var isEdit = !!$('formId').value;
+                    if (!isEdit) {
+                        if (!username) {
+                            showErr('errUsername', '请输入用户名');
+                            ok = false;
+                        } else if (!/^[a-zA-Z0-9_]{4,64}$/.test(username)) {
+                            showErr('errUsername', '4～64 位字母数字下划线');
+                            ok = false;
+                        }
+                    }
+                    var name = $('formName').value.trim();
+                    if (!name) {
+                        showErr('errName', '请输入姓名');
+                        ok = false;
+                    } else if (name.length > 64) {
+                        showErr('errName', '姓名过长');
+                        ok = false;
+                    }
+                    var phone = $('formPhone').value.trim();
+                    if (!/^1[3-9]\d{9}$/.test(phone)) {
+                        showErr('errPhone', '请输入合法手机号');
+                        ok = false;
+                    }
+                    var email = $('formEmail').value.trim();
+                    if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+                        showErr('errEmail', '邮箱格式不正确');
+                        ok = false;
+                    }
+                    if (!$('formDept').value) {
+                        showErr('errDept', '请选择部门');
+                        ok = false;
+                    }
+                    var roles = [];
+                    document.querySelectorAll('input[name="role"]:checked').forEach(function (c) {
+                        roles.push(c.value);
+                    });
+                    if (roles.length === 0) {
+                        showErr('errRoles', '至少选择一个角色');
+                        ok = false;
+                    }
+                    if (!isEdit) {
+                        var dup = allUsers.some(function (x) {
+                            return x.username === username;
+                        });
+                        if (dup) {
+                            showErr('errUsername', '用户名已存在');
+                            ok = false;
+                        }
+                    }
+                    var dupPhone = allUsers.some(function (x) {
+                        if (isEdit && x.id === $('formId').value) return false;
+                        return x.phone === phone;
+                    });
+                    if (dupPhone) {
+                        showErr('errPhone', '手机号已被占用');
+                        ok = false;
+                    }
+                    return ok;
+                }
+                function showErr(id, msg) {
+                    var el = $(id);
+                    el.textContent = msg;
+                    el.classList.remove('hidden');
+                }
+                $('btnQuery').addEventListener('click', function () {
+                    applied = {
+                        username: $('fUsername').value.trim(),
+                        name: $('fName').value.trim(),
+                        phone: $('fPhone').value.trim(),
+                        status: $('fStatus').value,
+                    };
+                    page = 1;
+                    renderTable();
+                    toast('已按条件查询（前端 mock 过滤）');
+                });
+                $('btnReset').addEventListener('click', function () {
+                    $('fUsername').value = '';
+                    $('fName').value = '';
+                    $('fPhone').value = '';
+                    $('fStatus').value = '';
+                    applied = { username: '', name: '', phone: '', status: '' };
+                    page = 1;
+                    renderTable();
+                    toast('已重置筛选');
+                });
+                $('pageSize').addEventListener('change', function () {
+                    page = 1;
+                    renderTable();
+                });
+                $('btnPrev').addEventListener('click', function () {
+                    if (page > 1) {
+                        page--;
+                        renderTable();
+                    }
+                });
+                $('btnNext').addEventListener('click', function () {
+                    var list = getFiltered();
+                    var pages = Math.max(1, Math.ceil(list.length / pageSize));
+                    if (page < pages) {
+                        page++;
+                        renderTable();
+                    }
+                });
+                $('tbody').addEventListener('click', function (e) {
+                    var btn = e.target.closest('button[data-a]');
+                    if (!btn) return;
+                    var id = btn.getAttribute('data-id');
+                    var u = allUsers.find(function (x) {
+                        return x.id === id;
+                    });
+                    if (!u) return;
+                    if (btn.getAttribute('data-a') === 'view') openDetail(u);
+                    if (btn.getAttribute('data-a') === 'edit') openFormEdit(u);
+                    if (btn.getAttribute('data-a') === 'del') {
+                        deleteTarget = u;
+                        $('delMsg').textContent =
+                            '确定删除用户「' + u.name + '」吗？删除后不可恢复。（原型：仅从列表移除）';
+                        $('modalDelete').classList.remove('hidden');
+                        $('modalDelete').classList.add('flex');
+                    }
+                });
+                document.querySelectorAll('.btn-close-detail').forEach(function (b) {
+                    b.addEventListener('click', closeDetail);
+                });
+                $('modalDetail').addEventListener('click', function (e) {
+                    if (e.target === $('modalDetail')) closeDetail();
+                });
+                $('btnAdd').addEventListener('click', openFormAdd);
+                $('btnFormCancel').addEventListener('click', function () {
+                    if (!isFormDirty()) {
+                        closeForm();
+                        return;
+                    }
+                    openFormLeaveConfirm();
+                });
+                $('btnFormLeaveCancel').addEventListener('click', closeFormLeaveConfirm);
+                $('btnFormLeaveOk').addEventListener('click', function () {
+                    closeFormLeaveConfirm();
+                    closeForm();
+                });
+                $('modalFormLeave').addEventListener('click', function (e) {
+                    if (e.target === $('modalFormLeave')) closeFormLeaveConfirm();
+                });
+                $('userForm').addEventListener('submit', function (e) {
+                    e.preventDefault();
+                    if (!validateForm()) return;
+                    var id = $('formId').value;
+                    var status = document.querySelector('input[name="status"]:checked').value;
+                    var roles = [];
+                    document.querySelectorAll('input[name="role"]:checked').forEach(function (c) {
+                        roles.push(c.value);
+                    });
+                    if (id) {
+                        var u = allUsers.find(function (x) {
+                            return x.id === id;
+                        });
+                        if (u) {
+                            u.name = $('formName').value.trim();
+                            u.phone = $('formPhone').value.trim();
+                            u.email = $('formEmail').value.trim();
+                            u.dept = $('formDept').value;
+                            u.roles = roles;
+                            u.status = status;
+                        }
+                        toast('保存成功（模拟）：已更新用户');
+                    } else {
+                        var nu = {
+                            id: String(nextId++),
+                            username: $('formUsername').value.trim(),
+                            name: $('formName').value.trim(),
+                            phone: $('formPhone').value.trim(),
+                            email: $('formEmail').value.trim(),
+                            dept: $('formDept').value,
+                            roles: roles,
+                            status: status,
+                            createdAt: new Date().toISOString().slice(0, 16).replace('T', ' '),
+                        };
+                        allUsers.push(nu);
+                        toast('创建成功（模拟）：已加入列表');
+                    }
+                    closeForm();
+                    renderTable();
+                });
+                $('btnDelCancel').addEventListener('click', function () {
+                    $('modalDelete').classList.add('hidden');
+                    $('modalDelete').classList.remove('flex');
+                    deleteTarget = null;
+                });
+                $('btnDelOk').addEventListener('click', function () {
+                    if (!deleteTarget) return;
+                    allUsers = allUsers.filter(function (x) {
+                        return x.id !== deleteTarget.id;
+                    });
+                    $('modalDelete').classList.add('hidden');
+                    $('modalDelete').classList.remove('flex');
+                    deleteTarget = null;
+                    renderTable();
+                    toast('已删除（模拟）');
+                });
+                document.addEventListener('keydown', function (e) {
+                    if (e.key !== 'Escape') return;
+                    if (isAnnoOpen()) {
+                        closeAnno();
+                        return;
+                    }
+                    if (isFormLeaveModalOpen()) {
+                        closeFormLeaveConfirm();
+                        return;
+                    }
+                    var delOpen = $('modalDelete') && !$('modalDelete').classList.contains('hidden');
+                    if (delOpen) {
+                        $('modalDelete').classList.add('hidden');
+                        $('modalDelete').classList.remove('flex');
+                        deleteTarget = null;
+                        return;
+                    }
+                    if (isFormModalOpen()) {
+                        if (isFormDirty()) openFormLeaveConfirm();
+                        else closeForm();
+                        return;
+                    }
+                    if ($('modalDetail') && !$('modalDetail').classList.contains('hidden')) {
+                        closeDetail();
+                    }
+                });
+                renderTable();
+            }
+            fetch('prd.md', { cache: 'no-store' })
+                .then(function (r) {
+                    if (!r.ok) throw new Error('HTTP ' + r.status);
+                    return r.text();
+                })
+                .then(function (text) {
+                    runPrototype(text, null);
+                })
+                .catch(function () {
+                    runPrototype('', new Error('fetch'));
+                });
+        </script>
+    </body>
+</html>