# 红色现代模板（Red Modern Theme）
InnoShop CE 京东风格主题 · 主题代码：`redmodern` · 版本：v1.0.1
一款以京东 App / PC 设计语言为蓝本的 InnoShop 主题：红色主视觉、卡片化布局、HTMX 无刷新交互、手机端全 APP 化。**不修改任何核心文件**，全部能力通过主题覆写与 Hook 实现。
演示地址 shop.maileshop.com
后台地址 账号542889972@qq.com 密码123456
## 环境要求
| 项 | 要求 |
|---|---|
| InnoShop | CE v0.9.0+ |
| PHP | 8.3+ |
| Node.js | 18+（仅重新编译样式时需要） |
## 安装
1. 将 `redmodern` 整个目录放入 `themes/`；
2. 后台「模板管理」选择本主题并启用；
3. 完成（编译产物已随包附带，无需现场编译）。
## 功能特性
### 商品详情页
- **PC**：左图 + 右信息卡 sticky 跟随；右栏底部固定购买条（数量步进器 + 加入购物车/立即购买，扁平红按钮）；
- **手机**：APP 化布局——隐藏站点头部/页脚，底部操作栏（客服 / 购物车 / 加入购物车 / 立即购买，等高单行，适配安全区）；
- 图上悬浮钮：**返回 + 收藏**（半透明圆钮，收藏与标题收藏状态双向同步）；
- **京东式吸顶 Tab 条**：下滑越过商品图后从顶部滑入，点击切换面板并滚动定位；
- 立即购买直通结算（加购 → 勾选本商品 → 结算页）。
### 商品列表 / 分类
- 京东式排序胶囊：默认排序 / 销量 / 价格⌄ / 区间⌄ / 新品 / 品牌⌄ / 仅显示有货；
- HTMX 无刷新筛选、排序、分页、每页数量切换（URL 同步，可分享/回退）；
- 分类宫格浏览（手机端分类页 APP 化）。
### 首页
- 轮播横幅（Swiper，箭头/圆点/自动播放，加载失败有可观测提示）；
- 双标签信息流（猜你喜欢 / 新品上市）+ 无限滚动加载，楼层名称全语言化；
- 页脚栏目居中排列，随后台「页脚菜单」自动更新。
### 购物车 / 结算
- 购物车手机端 APP 化：商品卡 + 全选 + 底部结算栏（合计/去结算）；
- **结算页京东确认单式**：返回+标题顶条、灰底白卡片分区、底部固定结算栏（合计实时联动 + 提交订单，唯一提交入口）、主按钮京东红、TabBar 自动隐藏；
- 余额抵扣、订单备注、订阅开关等核心能力原样保留。
### 多语言 / 多货币
- **20 个语言完整主题包**：zh-cn / zh-hk / en / vi / ja / ko / km / ar / de / es / fr / id / it / ms / nl / pt-br / pt-pt / ru / th / tr；
- RTL 全适配（阿拉伯语：布局镜像、下拉菜单方向、用户内容自动定向）；
- 其余系统文案复用 InnoShop 系统语言键，多货币随系统切换。
### 后台扩展
- 主题设置新增「客服」页签：JS 代码注入开关 + 代码框（独立保存路由，不影响楼层等其它设置）；
## 目录结构
```
redmodern/
├── config.json # 主题配置（code 与目录同名、全部小写）
├── README.md
├── setup/
│ ├── boot.php # Hook 注册、视图 Composer、客服设置路由
│ └── helpers.php # redmoderns_* 助手（首页信息流、分类宫格等）
├── routes/front.php # 主题路由（redmodern.buy-now、floors.guess 等）
├── Controllers/ # 主题控制器
├── views/ # 覆写视图（首页/商品/列表/购物车/结算/页脚等）
│ └── checkout/ # 结算页京东式覆写（Vue 逻辑与核心一致）
├── lang/ # 20 语言主题包
├── assets/scss/app.scss # 样式源码（唯一需要编译的文件）
├── public/ # 编译产物 + preview.png / icon.png
└── Controllers/
```
## 开发与编译
```bash
# 修改 assets/scss/app.scss 后重新编译（在项目根目录或主题目录执行）
THEME=redmodern npm run build
# 产物
# public/static/themes/redmodern/css/app.css （站点引用）
# themes/redmodern/public/css/app.css （随包分发副本）
```
| 改动类型 | 是否需要编译 |
|---|---|
| SCSS 样式 | 需要（上述命令） |
| Blade 视图 / 语言包 / 后台设置 | 不需要，即时生效 |
## 首页楼层 / 信息流配置
首页「猜你喜欢 / 新品上市」商品来自后台主题设置（存储键 `home_hot_products`），楼层名称支持多语言（`{locale: 值}` 对象）。注意：在后台保存其它主题设置表单时请确认楼层字段完整，避免楼层配置被重置。
## 版本记录
### v1.0.4
- 修复首页信息流区块丢失（猜你喜欢/新品上市 Tab + 无限滚动恢复）；
- 繁体搜索键规范化：搜尋商品 / 搜尋（原为简体）；
- 配套系统级修复（不在包内，随核心交付）：new_arrival 中英互换、km 高棉语回退、Empty Cart 硬编码英文。
### v1.0.3
- 新增后台「主题配色」切换：8 套配色方案（京东红/海蓝/活力橙/少女粉/青碧/翠绿/优雅紫/金黄），色卡选择一键换装；
- 配色覆盖层自动生成架构：主样式新增强调色规则后重跑脚本即自动纳入，无漏网；
- 修复保存路由类名反斜杠缺失导致的 500（配色保存/客服开关保存均受影响）。
### v1.0.2
- 新增后台「客服按钮」显隐开关（PC 悬浮条 + 手机操作栏客服入口一键开关）；
- 移除手机首页分类横滑条与重复楼层（信息流保留）；
- 楼层名称全语言化（20 语言）。
### v1.0.1
- 主题更名「红色现代模板」，补充 preview.png（1350×900）与 icon.png（60×60）；
- 手机端：吸顶 Tab 条、图上返回/收藏悬浮钮、底部操作栏等高单行（长语言自适应）；
- 结算页京东确认单式改版（返回顶条 / 灰底白卡 / 底部结算栏 / 唯一提交入口）；
- 修复列表排序/筛选/分页失效（视图孤儿闭合标签）；
- 多语言：补齐 13 个语言包（合计 20 语言）、RTL 适配、搜索按钮与 TabBar 长标签适配；
- 配套 AddressDivisions 插件 zh-hk / vi / ar 语言包。
### v1.0.0
- 首个版本：京东风格双端布局、HTMX 无刷新交互、首页信息流、客服 JS 注入开关。
---