4.9 KiB
4.9 KiB
很好，这一步可以正式收口 head 模块了。 我先确认并记录你刚提的最后一个工程问题，然后给你一份**《站群差异化方法 · 母上下文协议（Head 最终版）》，这份可以直接作为以后所有 head 新增 / 回滚 / 评审的唯一标准**。
一、最后一个问题的确认与记录（已纳入协议）
❗ 问题：分类层级不够（被遮挡）
你说得完全对，这是站群环境下非常典型的真实问题。
问题描述：
- 抽屉 / 下拉 / 浮层类分类导航
- 在部分主题、广告位、播放器层级下
- 会被覆盖，导致“能点但看不见 / 半遮挡”
✅ 统一工程修复规则（已冻结）
凡是“可展开 / 浮层 / 抽屉 / 下拉”的分类或搜索容器，必须显式设置高层级
强制规则：
z-index: 999;
适用范围：
- 分类 nav
- 分类 drawer / panel / sheet
- 搜索浮层
- mask / overlay（通常 998）
👉 这一条我已经写入最终母协议，后续不再遗漏。
二、《站群差异化方法 · 母上下文协议（Head 最终版 vHead-1.0）》
适用范围：
- 现有 head_1 – head_100
- 所有未来新增 head 模块
- 所有 head 的回滚 / 重构 / 扩展
1️⃣ Head 模块的最终定位
-
Head 不再是“顶部导航”
-
Head 是：
- 品牌入口
- 搜索入口
- 分类入口
- 行为入口
-
允许 head 不是 header 标签（section / nav / aside 均可）
2️⃣ 必须存在的功能模块（但允许隐藏）
2.1 必须存在（HTML 中不能删除）
- 站点名称（品牌）
- 搜索表单
- 分类列表
- 首页入口（含 info_id 判断）
👉 可以隐藏、折叠、抽屉化 👉 不允许删除 DOM
3️⃣ 首页判断与高亮（强制）
3.1 首页 / 影视首页逻辑（不可删除）
{if $DomainModel->info_id > 0}
<li class="{if $strPageCode == 'info'}active{/if}">
<a href="/">首页</a>
</li>
<li class="{if $strPageCode == 'home'}active{/if}">
<a href="/vindex">影视首页</a>
</li>
{else}
<li class="{if $strPageCode == 'home'}active{/if}">
<a href="/">首页</a>
</li>
{/if}
- 此结构 必须存在于分类体系内
- active 高亮 不得删除
4️⃣ 分类渲染的硬性规范（不可变）
- 分类 必须使用
<a> - 分类高亮必须使用：
class="{if $val.v_category_en==$Request.route.strParentCategory}active{/if}"
-
不允许使用：
- span
- div 点击
- JS 伪导航
5️⃣ PC / Mobile 行为分离（最终定版）
5.1 PC（>=861px）
- ❌ 不做隐藏
- ❌ 不做折叠
- 搜索 / 分类 直接展示
- 所有 toggle / 按钮隐藏
5.2 Mobile
-
允许：
- 抽屉（左 / 右 / 上 / 下）
- 下拉
- 折叠
- 分区展开
-
必须：
- 可展开
- 可关闭（按钮 + mask）
6️⃣ 抽屉 / 浮层 / 下拉的统一工程模型（强制）
6.1 状态控制
- 只允许 class 切换
- 推荐形式：
document.body.classList.toggle('xxx-open')
document.body.classList.remove('xxx-open')
6.2 必须包含 mask
- mask 点击 = 强制关闭
- 不允许“只能点按钮关闭”
6.3 层级（新增最终规则）
分类 / 搜索浮层：z-index: 999;
mask：z-index: 998;
7️⃣ CSS 主题色规则（已冻结）
7.1 禁止写死颜色
❌ 禁止：
color:#fff;
background:#000;
7.2 必须使用主题变量
--primary-color
--secondary-color
--accent-color
--bg-color
--bg-soft-color
--text-color
--border-color
允许在其基础上：
- rgba
- gradient
- overlay
8️⃣ 视觉差异化的最终标准（Head 专用）
每一个 head 必须至少满足 3 条：
- 不同背景结构（色块 / 叠层 / 放射 / 玻璃）
- 不同信息优先级（搜索主 / 分类主 / 品牌主）
- 不同交互方式（抽屉 / 折叠 / 直显）
- 不同 DOM 骨架（header / section / 多层嵌套）
- 不同高度策略（极瘦 / 功能型 / 视觉型）
👉 禁止：
- 仅换颜色
- 仅换 class
- 仅换顺序
9️⃣ Head 模板规模策略（已完成）
-
当前 head 数量：100 套
-
已覆盖：
- 强色块型
- 抽屉型
- 极瘦型
- 搜索主导型
- 分类主导型
- 视觉层叠型
👉 短期内不需要再新增 head
🔚 结论（非常重要）
Head 模块已进入“冻结 + 可维护”状态
后续你只需要：
- 复用
- 按母型扩展
- 不再推翻规则
如果你愿意，下一步我可以帮你做两件更有价值的事之一：
- List / Recommend 模块的母型协议
- 站群整体“模板指纹去重策略”（跨模块）
你现在这套体系，已经是工程级站群方案了。