@fenglimg/cocos-state-controller 0.1.0

package/packages/state-controller-v2-panel/panel/template.html

@@ -0,0 +1,296 @@
+<div class="panel-shell" id="app">
+    <!-- ===== 顶部导航条 ===== -->
+    <header class="top-nav">
+        <div class="nav-tabs">
+            <button id="tab-overview" class="tab-btn is-active">场景观测总览</button>
+            <button id="tab-editor" class="tab-btn">单控制器编辑</button>
+            <button id="tab-bindings" class="tab-btn">联动关系</button>
+        </div>
+        <div class="nav-actions">
+            <!-- 观测模式操作 -->
+            <div id="overview-actions" class="actions-group">
+                <select id="filter-level" class="nb-select" title="过滤级别">
+                    <option value="default">默认 (变化/异常)</option>
+                    <option value="abnormal">只看异常</option>
+                    <option value="all">显示全部</option>
+                </select>
+                <input type="text" id="search-input" class="nb-input" placeholder="搜索节点 / 属性…">
+            </div>
+            <!-- 编辑模式操作 (inspector 增强 flags) -->
+            <div id="editor-actions" class="actions-group" style="display:none;">
+                <span class="field-label">Inspector 增强</span>
+                <label class="toggle-label"><input type="checkbox" id="chk-inspector-master"> 总开关</label>
+                <div class="toggle-group" id="inspector-sub-toggles">
+                    <label class="toggle-label"><input type="checkbox" id="chk-inspector-viz"> 可视化</label>
+                    <label class="toggle-label"><input type="checkbox" id="chk-inspector-dirty"> 脏值</label>
+                    <label class="toggle-label"><input type="checkbox" id="chk-inspector-exclude"> 排除徽标</label>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <!-- ===== 视图 1: 场景观测总览 ===== -->
+    <div id="view-overview" class="view-container">
+        <!-- 仪表盘: 每个控制器当前所在状态 -->
+        <section id="dashboard-grid" class="dashboard-grid"></section>
+
+        <div id="overview-body" class="overview-body">
+            <!-- 左: 拓扑树 -->
+            <aside class="topology-panel">
+                <div class="panel-cap">拓扑树</div>
+                <div id="topology-tree" class="topology-tree"></div>
+            </aside>
+
+            <!-- 中: 值矩阵 -->
+            <main class="matrix-container">
+                <div class="matrix-title-bar">
+                    <h2 id="matrix-title">选择一个成员节点</h2>
+                    <span class="matrix-hint">💥 跨状态有变动高亮</span>
+                </div>
+                <div class="matrix-scroll">
+                    <table id="value-matrix" class="matrix-table">
+                        <thead><tr id="matrix-head"></tr></thead>
+                        <tbody id="matrix-body"></tbody>
+                    </table>
+                    <div id="matrix-empty" class="matrix-empty">
+                        <p>在左侧拓扑树点选一个<strong>成员节点</strong>,这里铺出它在各状态的属性值矩阵。</p>
+                    </div>
+                </div>
+            </main>
+
+            <!-- 右: 体检 / 问题清单 -->
+            <aside class="issues-panel">
+                <div class="issues-header">
+                    <h2>异常清单</h2>
+                    <span id="issues-count" class="issues-count">0</span>
+                </div>
+                <div id="issues-list" class="issue-list"></div>
+            </aside>
+        </div>
+
+        <div id="overview-empty" class="empty-tip" style="display:none;">
+            <h3>场景里还没有控制器</h3>
+            <p>给节点挂上 StateControllerV2 并接入控制后, 这里会列出全部观测信息。</p>
+        </div>
+    </div>
+
+    <!-- ===== 视图 2: 单控制器编辑 (保留既有能力) ===== -->
+    <div id="view-editor" class="view-container" style="display:none;">
+        <aside class="sidebar">
+            <div id="states-list" class="states-list"></div>
+            <!-- 回收站: 暂存被移除的状态, 可恢复或彻底删除 (硬删数据) -->
+            <div id="recycle-bin" class="recycle-bin is-collapsed">
+                <div id="bin-header" class="bin-header" title="展开/折叠回收站">
+                    <span class="bin-caret">▸</span>
+                    <span class="bin-title">🗑 回收站</span>
+                    <span id="bin-count" class="bin-count">0</span>
+                </div>
+                <div id="bin-body" class="bin-body">
+                    <div id="bin-list" class="bin-list"></div>
+                    <button id="btn-purge-all" class="nb-btn btn-wide btn-danger">清空回收站</button>
+                </div>
+            </div>
+            <div class="sidebar-footer">
+                <button id="btn-add-state" class="nb-btn nb-btn-primary btn-wide">+ 新增状态</button>
+            </div>
+        </aside>
+
+        <main class="main-content">
+            <!-- 回收态只读预览横幅 (强表现): 预览中叠加到节点查看, 场景只读, 出口=恢复/退出 -->
+            <div id="preview-banner" class="preview-banner" style="display:none;">
+                <span class="pv-icon">👁</span>
+                <span class="pv-text">正在预览回收状态 <b id="pv-name">--</b> · 只读叠加, 不影响当前激活状态</span>
+                <span class="pv-spacer"></span>
+                <button id="btn-preview-restore" class="nb-btn btn-small btn-primary">↩ 恢复到列表</button>
+                <button id="btn-preview-exit" class="nb-btn btn-small btn-danger">⏹ 退出预览</button>
+            </div>
+            <div class="main-toolbar">
+                <span class="field-label">当前控制器</span>
+                <div id="ctrl-switch-wrap" class="ctrl-switch-wrap">
+                    <button id="btn-prev-ctrl" class="nb-btn btn-icon" title="上一个">‹</button>
+                    <select id="ctrl-switch-select" class="nb-select ctrl-switch" title="选择控制器"></select>
+                    <button id="btn-next-ctrl" class="nb-btn btn-icon" title="下一个">›</button>
+                </div>
+            </div>
+
+            <section id="state-detail" class="state-detail" style="display:none;">
+                <div class="shared-strip">
+                    <div class="strip-field">
+                        <span class="field-label">state</span>
+                        <select id="state-pick-select" class="nb-select state-pick" title="选择状态"></select>
+                    </div>
+                    <div class="record-actions">
+                        <button id="btn-start-record" class="nb-btn btn-record">🔴 录制</button>
+                        <button id="btn-stop-record" class="nb-btn btn-stop" style="display:none;">⏹ 停止并保存</button>
+                        <button id="btn-cancel-record" class="nb-btn btn-cancel" style="display:none;">⤺ 撤销本次录制</button>
+                    </div>
+                </div>
+
+                <div class="detail-head">
+                    <div>
+                        <div class="eyebrow">当前详情</div>
+                        <h2 id="state-title" class="state-title">--</h2>
+                    </div>
+                    <div id="record-badge" class="record-badge">Idle</div>
+                </div>
+
+                <div class="editor-matrix-cap">
+                    <span>受控属性 · 各状态值</span>
+                    <label class="toggle-label em-showall"><input type="checkbox" id="chk-show-all-props"> 显示全部受控属性</label>
+                    <span class="cap-hint">💥 跨状态变动高亮 · 点属性看详情 · ✕ 取消跟随</span>
+                </div>
+                <div id="editor-matrix" class="editor-matrix"></div>
+            </section>
+
+            <section id="empty-tip" class="empty-tip">
+                <h3 id="empty-tip-title">请在场景中选中带 StateControllerV2 的节点</h3>
+                <p id="ctrl-list-hint">或从下方列表选择:</p>
+                <div id="ctrl-list" class="ctrl-list"></div>
+            </section>
+        </main>
+    </div>
+
+    <!-- ===== 视图 3: 控制器联动关系图 ===== -->
+    <div id="view-bindings" class="view-container" style="display:none;">
+        <div id="bindings-form" class="bindings-form">
+            <span class="field-label">新增联动</span>
+            <select id="bind-source-ctrl" class="nb-select"></select>
+            <span class="bind-sep">切到</span>
+            <select id="bind-source-state" class="nb-select"></select>
+            <span class="bind-sep">触发 ▶</span>
+            <select id="bind-target-ctrl" class="nb-select"></select>
+            <span class="bind-sep">切到</span>
+            <select id="bind-target-state" class="nb-select"></select>
+            <button id="btn-add-binding" class="nb-btn nb-btn-primary">+ 添加联动</button>
+        </div>
+        <div id="bindings-graph" class="bindings-graph"></div>
+        <div id="bindings-empty" class="empty-tip" style="display:none;">
+            <h3>还没有任何跨控制器联动</h3>
+            <p>用上方表单建立「A 切到某状态 → B 自动切到某状态」的声明式联动。</p>
+        </div>
+    </div>
+
+    <!-- ===== 属性详情抽屉 (点矩阵属性行展开, 逐状态看全值) ===== -->
+    <div id="prop-detail" class="prop-detail" style="display:none;">
+        <div class="pd-backdrop" id="pd-backdrop"></div>
+        <aside class="pd-panel">
+            <div class="pd-head">
+                <div class="pd-titles">
+                    <div id="pd-name" class="pd-name"></div>
+                    <div id="pd-type" class="pd-type"></div>
+                </div>
+                <button id="pd-close" class="nb-btn btn-small">✕</button>
+            </div>
+            <div id="pd-body" class="pd-body"></div>
+        </aside>
+    </div>
+</div>
+
+<!-- ===== 可复用模板 ===== -->
+
+<!-- 联动关系边 -->
+<template id="tpl-binding-edge">
+    <div class="bind-edge">
+        <span class="bind-node bind-src"><span class="bind-ctrl"></span><span class="bind-state"></span></span>
+        <span class="bind-arrow">──▶</span>
+        <span class="bind-node bind-tgt"><span class="bind-ctrl"></span><span class="bind-state"></span></span>
+        <button class="nb-btn btn-small btn-del-binding">✕</button>
+    </div>
+</template>
+
+<!-- 仪表盘卡片 -->
+<template id="tpl-dashboard-card">
+    <div class="db-card">
+        <div class="db-title"></div>
+        <div class="db-value"><span class="status-dot"></span><span class="db-state-name"></span></div>
+    </div>
+</template>
+
+<!-- 拓扑树: 控制器头 -->
+<template id="tpl-tree-ctrl">
+    <div class="tree-ctrl"><span class="tree-caret">▾</span><span class="tree-ctrl-icon">🎮</span><span class="tree-ctrl-name"></span></div>
+</template>
+
+<!-- 拓扑树: 成员节点 -->
+<template id="tpl-tree-node">
+    <div class="tree-node"><span class="tree-node-icon">📦</span><span class="tree-node-name"></span></div>
+</template>
+
+<!-- 拓扑树: 受控属性行 -->
+<template id="tpl-tree-prop">
+    <div class="tree-prop">
+        <span class="tree-prop-name"></span>
+        <span class="kind-badge"></span>
+    </div>
+</template>
+
+<!-- 矩阵: 表头状态列 -->
+<template id="tpl-matrix-th"><th class="state-col"></th></template>
+
+<!-- 矩阵: 属性行 -->
+<template id="tpl-matrix-row">
+    <tr>
+        <td class="matrix-prop"><div class="prop-name"></div><div class="prop-type"></div></td>
+    </tr>
+</template>
+
+<!-- 矩阵: 值格 -->
+<template id="tpl-matrix-cell"><td class="matrix-cell"></td></template>
+
+<!-- 问题清单条目 -->
+<template id="tpl-issue-item">
+    <div class="issue-item">
+        <div class="issue-title"><span class="badge-type"></span><span class="issue-prop"></span></div>
+        <div class="issue-desc"><span class="issue-node"></span></div>
+        <button class="nb-btn btn-issue-jump">定位 →</button>
+    </div>
+</template>
+
+<!-- ===== 编辑视图既有模板 (保留) ===== -->
+<template id="tpl-state-item">
+    <div class="state-item">
+        <div class="state-thumb"></div>
+        <div class="state-meta">
+            <div class="state-name"></div>
+            <div class="state-sub"></div>
+        </div>
+        <span class="record-dot" style="display:none;">●</span>
+        <button class="nb-btn btn-small btn-del-state">✕</button>
+    </div>
+</template>
+
+<template id="tpl-ctrl-item">
+    <div class="ctrl-item">
+        <span class="ctrl-name"></span>
+        <button class="nb-btn btn-small btn-use-ctrl">选择</button>
+    </div>
+</template>
+
+<!-- 回收站条目 -->
+<template id="tpl-bin-item">
+    <div class="bin-item">
+        <div class="bin-meta">
+            <div class="bin-name"></div>
+            <div class="bin-sub"></div>
+        </div>
+        <button class="nb-btn btn-small btn-bin-preview" title="只读预览: 把该状态叠加到节点查看 (不改当前选中)">👁</button>
+        <button class="nb-btn btn-small btn-bin-restore" title="恢复到状态列表尾部">恢复</button>
+        <button class="nb-btn btn-small btn-danger btn-bin-purge" title="彻底删除数据, 不可恢复">彻底删除</button>
+    </div>
+</template>
+
+<!-- ===== 自定义确认弹窗 (不可恢复操作专用) ===== -->
+<div id="confirm-modal" class="confirm-modal" style="display:none;">
+    <div class="cm-backdrop" id="cm-backdrop"></div>
+    <div class="cm-dialog">
+        <div class="cm-head">
+            <span class="cm-icon">⚠️</span>
+            <span id="cm-title" class="cm-title">彻底删除？</span>
+        </div>
+        <div id="cm-body" class="cm-body"></div>
+        <div class="cm-actions">
+            <button id="cm-cancel" class="nb-btn">取消</button>
+            <button id="cm-confirm" class="nb-btn btn-danger">彻底删除</button>
+        </div>
+    </div>
+</div>