47 lines
4.4 KiB
Markdown
47 lines
4.4 KiB
Markdown
|
# SiteForge V8.21.3 — 四套主题移动端统一优化说明
|
||
|
|
|
||
|
|
## 当前基线结论
|
||
|
|
|
||
|
|
原 V8.21.2 的 automotive、industrial、corporate、minimal 四套内置专业主题具有基本响应式 CSS（移动端单列卡片、缩小标题、部分间距调整），但原导航在手机上是页眉下方的纵向展开列表，**不是独立抽屉**；没有底部快捷 Tabs 配置；因此不能将旧版称为全面完成移动端优化。V8.21.3 针对这些明确缺口做了源码级修改，并完成指定场景的浏览器验收。不能把 4 种代表页的验收当成所有页面和所有机型的充分验收。
|
||
|
|
|
||
|
|
## 新版功能
|
||
|
|
|
||
|
|
- 四套主题在 1024px 及以下使用右侧抽屉，点击汉堡按钮展开，多级目录可单独展开；移动端原“分类 Mega 菜单”链接合并进入抽屉。
|
||
|
|
- 抽屉支持关闭按钮、遮罩、Escape、Tab 焦点约束以及关闭时焦点返回；支持页面跳转时关闭菜单。桌面导航保持原有样式。
|
||
|
|
- 手机 767px 及以下可显示可选底部 Tabs，**默认关闭**，无任何按钮时也无需配置。启用后可添加 1–5 项，删除、上下排序、选择标题和预置图标、填写 URL，也可以配置一个“打开菜单”操作。
|
||
|
|
- 链接允许站内路径（`/products/`）、`https://` 安全外链（如 WhatsApp）、`tel:` 与 `mailto:`；不允许 `javascript:`、`data:`、`http:`、协议相对地址或带用户名/密码的 HTTPS URL。存入数据库前全部由服务端校验。
|
||
|
|
- 底栏自动适配设备安全区，启用时为页面底部预留空间以免遮挡内容；停用后没有额外留白。
|
||
|
|
- 手机端卡片、图片、标题和文字区域增强窄屏 CSS；保留桌面模板、页面路径、SEO 数据、全站设计版本及发布审批模型。
|
||
|
|
|
||
|
|
## 管理后台操作
|
||
|
|
|
||
|
|
1. 进入目标网站的“可视化编辑器”，打开“全站页眉与页脚”。
|
||
|
|
2. 找到“手机底部快捷导航 Tabs（可选）”。不开启时，手机页面**不显示**底栏。
|
||
|
|
3. 开启后添加 1–5 个项目，分别填写文字、选择图标和点击操作；可上移、下移和删除。
|
||
|
|
4. 可点击“预览草稿”查看当前编辑器预览；“保存全站草稿”**不会**修改已生成的网站；“发布全站设计”后，还需要重新构建网站并按既有流程部署。
|
||
|
|
5. 手机菜单仍使用全站导航树，并继承二级、三级菜单结构。高级导航树的内容编辑入口仍保留原有 JSON 编辑方式；本轮重点是手机导航呈现，不是完全替换所有导航的配置方式。
|
||
|
|
|
||
|
|
## 实现文件
|
||
|
|
|
||
|
|
- `app/site_design_v87.py`：增加 `mobile_tabs` 配置、默认关闭、链接与图标字段校验、草稿隔离。
|
||
|
|
- `app/theme_pro.py`：四套主题渲染上下文与预置图标。
|
||
|
|
- `themes/{automotive,industrial,corporate,minimal}/pro.html`：按配置渲染底部栏与激活态。
|
||
|
|
- `app/static/commercial.css`：统一右侧抽屉、遮罩、Tabs、手机端布局。
|
||
|
|
- `app/static/pro.js`：菜单打开/关闭、焦点管理、Esc、滚动锁定、抽屉分类链接及底部菜单按钮。
|
||
|
|
- `app/templates/editor.html`、`app/static/editor.js`：非 JSON 的 Tabs 增删、排序、名称、图标、路径配置。
|
||
|
|
- `tests/test_mobile_tabs_v8213.py`、`scripts/browser_mobile_v8213.py`：专项验证。
|
||
|
|
|
||
|
|
## 验证范围
|
||
|
|
|
||
|
|
- Python：四个内置主题的真实静态构建、草稿隔离、发布生效、关闭后无 Tabs、非法链接与数据结构拦截。
|
||
|
|
- Chromium：利用实际模板 HTML/CSS/JS 在 `page.set_content` 离线渲染，验证抽屉、遮罩、Esc、底栏菜单、桌面隐藏、脚本错误。对首页、产品列表、产品详情、文章详情分别用 375/390/430px 宽度检测水平溢出。
|
||
|
|
- HTTP+Worker：原有登录、CSRF、建站、后台任务、构建、ZIP 和预览链路再次通过。
|
||
|
|
- 浏览器执行环境不允许 Chrome 导航到 `file://` 和 localhost，因此浏览器检查采用 HTML/CSS/JS 内联加载方式；这**不等于**真实域名/CDN/移动设备端到端验收。
|
||
|
|
|
||
|
|
## 未关闭事项
|
||
|
|
|
||
|
|
- 用户上传的自定义第三方主题不在本轮四套内置主题的统一抽屉改造范围内。
|
||
|
|
- 真实 iOS Safari、Android Chrome 实机和全部内页（如询盘、搜索、案例、FAQ）仍需专项验收。
|
||
|
|
- Art Design Pro 官方完整工程的构建验证、正式 PostgreSQL/Redis/Docker 生产环境验收沿用前一版未关闭项。
|
||
|
|
- 本版本只是开发集成版；发布静态站不会自动覆盖线上生产数据。
|