better-staridc-MNBT
1---
2title: 视图清单
3description: 主题开发必选/可选视图清单:用户端、管理端、Docker 控制台、主页四套 scope 与不走主题的路径
4---
5
6# 必选 / 可选视图清单
7
8本文是 [主题开发手册](./guide.md) §3 的完整视图清单,共四套 scope 与"不走主题的路径"说明。核心原则:**不提供的文件会回退 `default`,不必一次抄全**。
9
10## 3.1 用户端 `templates/{theme}/user/`
11
12| 视图文件 | 说明 | 建议 |
13|----------|------|------|
14| `head.php` | 公共 `<head>` + 公共 CSS/JS | 改整体风格必改 |
15| `login.php` | 登录页 | 强烈建议覆盖 |
16| `index.php` | 框架壳(侧栏 + 多标签 iframe) | 强烈建议覆盖 |
17| `sy.php` | 仪表盘 | 建议 |
18| `set.php` | 站点设置(PHP/SSL/Gzip 等) | 建议 |
19| `site_stats.php` | 站点统计 | 可选 |
20| `monitor.php` | 监控任务 | 可选 |
21| `monitor_log.php` | 监控日志 | 可选 |
22| `notice.php` | 通知日志 | 可选 |
23| `webgl.php` | 一键部署 | 可选 |
24| `sqlgl.php` | 数据库备份 | 可选 |
25| `ftp.php` | 在线文件管理 | 复杂,可不覆盖 |
26
27## 3.2 管理端 `templates/{theme}/admin/`
28
29| 视图文件 | 说明 | 建议 |
30|----------|------|------|
31| `head.php` | 公共头 | 改整体风格必改 |
32| `login.php` | 后台登录 | 强烈建议 |
33| `index.php` | 后台框架壳 | 强烈建议 |
34| `sy.php` | 仪表盘 | 建议 |
35| `set.php` | 系统设置(含前端模板页) | 建议 |
36| `list.php` | 列表(宝塔/主机/域名/日志等) | 可选(体积大) |
37| `add.php` | 添加页 | 可选 |
38| `node.php` | 节点管理 | 可选 |
39| `tutorial.php` | 教程与监控说明 | 可选 |
40| `update.php` | 系统更新 | 可选 |
41
42## 3.3 Docker 控制台 `templates/{theme}/docker/`(V1.83 新增)
43
44Docker 控制台是独立于用户端/管理端的第三套视图体系,有独立的认证机制(`docker_token` cookie)。
45
46| 视图文件 | 说明 | 建议 |
47|----------|------|------|
48| `head.php` | 公共引导文件(主题配置、节点信息、用户信息、导航菜单) | 改整体风格必改 |
49| `foot.php` | 公共尾部(Toast/Modal 容器、HTML 文档闭合) | 改整体风格必改 |
50| `login.php` | Docker 登录页 | 强烈建议覆盖 |
51| `console.php` | 我的容器(单容器详情页,含磁盘用量/配额显示) | 建议 |
52| `appstore.php` | 应用商店(含配额展示条:CPU/内存/磁盘/代理数) | 建议 |
53| `proxy.php` | 反向代理管理(列表/添加/删除,端口从容器端口选择,IP 锁定 127.0.0.1) | 建议 |
54| `image.php` | 镜像管理 | 可选 |
55| `volume.php` | 数据卷管理 | 可选 |
56| `compose.php` | Compose 模板 | 可选 |
57
58**静态资源**:`templates/{theme}/docker/assets/`(CSS、JS、图片、SVG),使用 `mnbt_theme_asset('docker.css', 'docker')` 引用。
59
60**Docker 视图依赖的公共 JS 函数**(在 `head.php` 中加载):
61
62| 函数 | 用途 |
63|------|------|
64| `dkAjax(gn, data, opts)` | Docker AJAX 请求(自动附带 CSRF token) |
65| `dkToast(msg, type)` | 消息提示(`info` / `success` / `error`) |
66| `dkModal(html, title)` | 模态框(html 为内容,title 为标题) |
67| `dkCloseModal()` | 关闭模态框 |
68| `dockerLogout()` | 退出登录 |
69| `dkContainerOp(gn)` | 容器操作(`container_start` / `container_stop` / `container_restart`) |
70| `dkContainerRemove()` | 删除容器(带确认弹窗,调用 `remove_app` 卸载) |
71| `dkProxyAdd()` | 打开反向代理添加弹窗(先加载容器端口列表) |
72| `dkProxyDel(id, name)` | 删除反向代理规则 |
73
74**Docker 视图可用的 PHP 变量**(由控制器传入):
75
76| 变量 | 说明 |
77|------|------|
78| `$me` | 当前 Docker 用户(`MN_docker_user` 行) |
79| `$plan` | 用户套餐(`MN_docker_plan` 行,含 `cpu_max`/`mem_max`/`disk_max`/`proxy_max`) |
80| `$node` | 所属节点信息(`MN_docker_node` 行) |
81| `$title` | 页面标题 |
82| `$active` | 当前激活的导航项(`console`/`appstore`/`proxy`/`image`/`volume`/`compose`) |
83
84**Docker 关键 CSS 类**:
85
86| 类名 | 用途 |
87|------|------|
88| `.dk-card` / `.dk-card-head` / `.dk-card-body` | 卡片容器 |
89| `.dk-btn` / `.dk-btn-sm` / `.dk-btn-primary` / `.dk-btn-danger` / `.dk-btn-warning` / `.dk-btn-success` / `.dk-btn-ghost` / `.dk-btn-block` | 按钮 |
90| `.dk-tag` / `.dk-tag-running` / `.dk-tag-stopped` / `.dk-tag-creating` / `.dk-tag-none` / `.dk-tag-expired` / `.dk-tag-paused` | 状态标签 |
91| `.dk-quota-bar` / `.dk-quota-item` / `.dk-quota-label` / `.dk-quota-val` | 安装弹窗中的配额展示条(蓝色底,三列居中) |
92| `.dk-alert` / `.dk-alert-info` / `.dk-alert-warn` / `.dk-alert-danger` | 提示条 |
93| `.dk-form-grid` / `.dk-field` / `.dk-field-full` | 表单布局 |
94| `.dk-metrics` / `.dk-metric` / `.dk-m-label` / `.dk-m-value` | 指标卡片(容器详情页) |
95| `.dk-empty` / `.dk-empty-ico` | 空状态提示 |
96| `.dk-spinner-overlay` / `.dk-spin` | 加载动画 |
97| `.dk-app-card` / `.dk-app-head` / `.dk-app-icon` / `.dk-app-desc` | 应用卡片(应用商店列表) |
98| `.dk-modal` / `.dk-modal-head` / `.dk-modal-body` / `.dk-modal-foot` / `.dk-modal-close` | 模态框 |
99| `.dk-toast` | Toast 消息 |
100| `.dk-sidebar` / `.dk-nav` / `.dk-nav-section` | 侧栏导航 |
101| `.dk-topbar` / `.dk-badges` | 顶栏 |
102| `.dk-mono` | 等宽字体 |
103
104**Docker 控制器路径**:
105
106| 控制器 | 路径 |
107|--------|------|
108| 页面入口 | `docker/console.php`、`docker/appstore.php` 等 |
109| AJAX 后端 | `docker/ajax.php` |
110| CSS 样式 | `templates/default/docker/assets/docker.css` |
111
112**主题 scope 注册**:`docker` scope 在 `MPHX/theme.php` 中注册,与 `user`/`admin` 独立。`theme.json` 可声明 `"scope": ["user", "admin", "docker"]`。
113
114## 3.5 主页 `templates/{theme}/home/`(V1.84 新增)
115
116独立主页系统是 V1.84 新增的第四个 scope,拥有独立的主题切换(与用户端/管理端分开选)。主页主题开发的完整说明见 [主页主题开发](./home.md)。
117
118| 视图文件 | 说明 | 建议 |
119|----------|------|------|
120| `home/index.php` | 主页落地页(站点根路径 `/` 的渲染模板) | 必选 |
121
122**模板可用变量**(由 `MPHX/frontend.php` 注入,详见该文件 `mnbt_home_data()`):
123
124| 变量 | 说明 |
125|------|------|
126| `$site_title` | 站点标题 |
127| `$site_logo` | Logo URL |
128| `$site_primary` | 主色调(`#4f46e5`) |
129| `$site_hero` | Hero 标语 |
130| `$site_footer` | 底部版权 |
131| `$favicon` | Favicon URL |
132| `$notice` | 网站公告内容 |
133| `$show_notice` | 是否显示公告区 |
134| `$show_plans` | 是否显示套餐区 |
135| `$logged_in` | 当前访问者是否已登录 |
136| `$has_shop` | hosting_shop 插件是否启用 |
137| `$has_user` | user_info 插件是否启用 |
138| `$plans` | 套餐列表(`[['id','name','desc','price','feats'], ...]`) |
139| `$blocks` | 插件扩展区块(`[['id','title','html','order'], ...]`) |
140| `$url($path)` | 生成插件路由 URL(`index.php?_r=/shop`) |
141| `$coreUrl($path)` | 生成核心物理文件 URL(`user/login.php`) |
142
143**读取主题自定义设置**(由 `theme.php` 注册的字段):
144
145```php
146<?= htmlspecialchars(mnbt_home_theme_setting('bg_color', '#fff')) ?>
147```
148
149**静态资源**:放 `templates/{theme}/home/assets/`,用 `mnbt_theme_asset('bg.webp', 'home')` 引用。
150
151## 3.6 不走主题的路径(一般不要动)
152
153| 路径 | 原因 |
154|------|------|
155| `user/ajax.php`、`user/api/*` | JSON API |
156| `admin/ajax.php`、`admin/api/*` | JSON API |
157| `user/pay.php` 等 | 支付跳转(V1.81 P3 起回调由支付插件路由处理) |
158| `user/mysql.php` | 跳转 phpMyAdmin |
159| `user/amftp/*` | 独立文件管理器 |