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