YwxAppThink/app/backend/view/hook/index.html

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">模板钩子（共 {$total} 个埋点）</div>
        <div class="layui-card-body">
            <blockquote class="layui-elem-quote layui-quote-nm">
                模板里 <code>{:hook('钩子名', $vars)}</code> 是埋点；插件用
                <code>HookService::mount()</code> / <code>register()</code> 或监听
                <code>HookRender</code> 事件挂内容。本页只做诊断：埋点是否存在、挂了谁。
                <br>
                收集型事件监听：{if $hasListener}<span class="layui-badge layui-bg-green">已注册</span>{else}<span class="layui-badge">无</span>{/if}
                （事件方式无法枚举到具体插件，排查时优先看「已挂载」列）
            </blockquote>

            <div style="margin-bottom:12px;">
                <button class="layui-btn layui-btn-sm {if $devOn}layui-btn-danger{else /}layui-btn-normal{/if}"
                        id="btnDevMode" data-on="{if $devOn}0{else /}1{/if}">
                    <i class="layui-icon layui-icon-template-1"></i>
                    {if $devOn}关闭钩点标注{else /}开启钩点标注{/if}
                </button>
                <span class="layui-word-aux" style="margin-left:8px;">
                    开启后打开任意后台页面：每个 hook() 埋点会显示蓝色虚线框 + 「⟡ 钩子名」标签（灰色「（空）」表示尚无插件挂载）。
                    仅在本机浏览器生效（cookie），不会随前台页面暴露给访客。
                </span>
            </div>

            <table class="layui-table" lay-skin="line">
                <colgroup>
                    <col width="240">
                    <col width="240">
                    <col>
                </colgroup>
                <thead>
                    <tr>
                        <th>钩子名</th>
                        <th>已挂载</th>
                        <th>埋点位置</th>
                    </tr>
                </thead>
                <tbody>
                    {empty name="rows"}
                    <tr>
                        <td colspan="3" style="text-align:center;">暂无埋点</td>
                    </tr>
                    {/empty}
                    {volist name="rows" id="row"}
                    <tr>
                        <td><code>{$row.name}</code></td>
                        <td>
                            {empty name="row.mounts"}
                            <span class="layui-badge">未挂载</span>
                            {else /}
                            {volist name="row.mounts" id="m"}
                            <div style="margin-bottom:4px;">
                                <span class="layui-badge layui-bg-cyan">{$m.addon ?: '核心'}</span>
                                <span class="layui-badge layui-bg-gray">w{$m.weight}</span>
                                <span style="font-size:12px;">{$m.target}</span>
                            </div>
                            {/volist}
                            {/empty}
                        </td>
                        <td style="font-size:12px;color:#666;">
                            {volist name="row.files" id="f"}
                            <div>{$f}</div>
                            {/volist}
                        </td>
                    </tr>
                    {/volist}
                </tbody>
            </table>
        </div>
    </div>
</div>
<script>
    layui.use(['jquery', 'layer', 'http'], function () {
        var $ = layui.jquery, layer = layui.layer, http = layui.http;
        $('#btnDevMode').on('click', function () {
            var btn = $(this);
            http.post('{:url("devMode")}', { on: btn.data('on') }).then(function (r) {
                if (r && r.code === 0) {
                    layer.msg(r.msg || '已切换', { icon: 1 });
                    setTimeout(function () { location.reload(); }, 800);
                } else {
                    layer.msg((r && r.msg) || '切换失败', { icon: 2 });
                }
            }).catch(function (err) {
                layer.msg('请求失败：' + (err && err.message ? err.message : '网络异常'), { icon: 2 });
            });
        });
    });
</script>