视图与前端资源

07 · 视图与前端资源

1. 视图层（app/Views）

渲染机制见 [02 § View](02-核心框架.md#view)。约定：

• 视图即 PHP 模板：`View::render` 先 `extract($vars, EXTR_SKIP)` 再 include；输出一律经 `e()` 转义防 XSS。
• 布局：前台 `Views/layout.php`、后台 `Views/admin/layout.php`；`View::display` 自动把视图结果塞进布局的 `$content`。
• 插件视图走 `View::renderFile(绝对路径)`（见 [06](06-插件系统.md)）。

前台视图清单

partials 复用组件

后台视图

[admin/layout.php](../app/Views/admin/layout.php)（六组菜单 + flash + 确认弹窗 + `window.CLARA_ADMIN`）+ 各管理页（users / user-edit / forums / forum-edit / settings / tools / plugins / plugin-settings / dashboard / threads / groups / group-edit / currencies / currency-logs / cards / cards-view / invites / memberships / membership-edit / medals / medal-edit / frames / frame-edit / gifts / gift-logs / announcements / announcement-edit / links / link-edit / mail / audit / reports / login-logs / ip-bans / attach-buys / credit-rules / restore）。

2. layout.php 与前端桥接

前台布局向 JS 注入全局对象：

<script>
window.CLARA = {
  base: '站点根URL',
  csrf: 'CSRF令牌',
  user: 当前uid或0,
  notifyRemindMin: 通知轮询提醒分钟数,
  notifySound: 提示音URL,
  pwa: PWA配置
};
</script>

app.js 全部能力基于 `window.CLARA` 初始化；后台同理注入 `window.CLARA_ADMIN = { csrf, iconUpload }`。

3. 前端 JS（assets/js）

app.js（约 64KB，无依赖原生 JS）

admin.js（约 13KB）

后台交互：统一确认弹窗、图标/图片上传（走 `CLARA_ADMIN.iconUpload`）、列表批量勾选、tab 切换记忆等。

editor.js（前后台共享）

编辑器交互逻辑（自 app.js 抽取为独立文件）：工具栏插入语法、`[em]` 表情镜像层渲染（自定义光标 / 输入法组词跟随）、表情面板懒构建、图片上传（容器级 change 事件委托 + doingUpload 防重，规避 hidden input change 被浏览器吞的间歇性问题）、附件面板（双模式 tab + POST /upload/file）、实时预览（POST /preview 走 md_render）。CSRF 自愈：AJAX 遇 `csrf_expired` 自动 `GET /csrf/token` 拉新 token 重试一次。配置自适应：前台读 `window.CLARA`、后台读 `EDITOR_CFG`（注入 base + csrf，上传/预览走前台路由）。

4. CSS 体系（assets/css）

| [theme-trae.css](../assets/css/theme-trae.css) | 深色主题换肤层（`body.theme-trae` 覆盖 CSS 变量；判定链：访客 cookie > `theme_auto_current()` 时段自动（默认 07:00 亮 / 18:00 暗，可配）> 后台默认；含「绿底组件文字改深色」复合选择器组——新增纯 `--ac` 底组件需核对入组条件，下划线/描边式激活态禁止入组） |

样式约定：插件/模块页面级样式用内联 `<style>` 输出并加前缀类名，复用 app.css 的 CSS 变量保证主题一致。

5. 静态资源目录

资源引用一律走 `asset('css/app.css')`：自动追加 mtime md5 版本号破缓存。