# 风格与场景接入
先想清楚要做什么页面，再选风格。官网、后台、数据大屏和演示页面都有对应模板，可以在官网“模板”页预览、复制提示词或下载。模板里的数据是示例，接入项目时请换成实际数据。
## 选择场景
| 序号 | 场景 | 建议模板 | 风格选择 |
| --- | --- | --- | --- |
| 1 | 官网、产品介绍 | landing.html | 专业商务、暖白编辑、通透玻璃 |
| 2 | 方案与价格 | pricing.html | 专业商务、暖白编辑 |
| 3 | 登录入口 | login.html | 专业商务、通透玻璃、深夜工作台 |
| 4 | 日常业务管理 | dashboard.html | 专业商务、深夜工作台 |
| 5 | 数据大屏、监控 | scifi-dashboard.html | 科幻专用组件 |
| 6 | 汇报与展示 | scifi-presentation.html | 科幻演示，HTML / 打印 PDF |
## 引入通用风格
从官网下载全部文件，或安装时指定 `--with templates`。下面假设文件放在 `vendor/zhaoui/`。玻璃样式需要额外文件，加载顺序如下：
```html
```
脚本默认只提供 API。需要模板里的风格选择栏时，在 body 上加 `data-zh-style-picker`。选择栏包含同目录下的 `scifi-dashboard.html` 链接，应用项目通常直接调用 API 即可。
## 调用和调整
```js
ZhaoUI.applyStyle('business'); // 专业商务
ZhaoUI.applyStyle('editorial'); // 暖白编辑
ZhaoUI.applyStyle('glass'); // 通透玻璃
ZhaoUI.applyStyle('night'); // 深夜工作台
ZhaoUI.applyStyle('workbench'); // 轻透工作台，需额外引入 zhaoui-style-workbench.min.css
// 风格预设会设置亮暗和品牌色，自定义调整放在预设之后。
ZhaoUI.setBrand('#087f78');
ZhaoUI.setTheme({ audience: 'b', density: 'comfortable' });
document.addEventListener('zh:stylechange', function (event) {
console.log(event.detail.style);
});
```
`applyStyle` 作用于整个页面，不保存到浏览器。可以在应用自己的设置中保存风格名，在页面初始化后恢复。重复调用会切换同一页面，业务数据和组件实例仍由原有组件管理。暖白编辑风格固定了页面和卡片的暖色表面；深夜使用 `night` 预设。
## 科幻组件调用
额外引入 `zhaoui-style-scifi.min.css`，然后使用专用作用域与组件类：
```html
```
在 `.zh-sci` 容器上调整 `--sci-accent`、`--sci-bg`、`--sci-panel`、`--sci-text` 等变量。部分装饰性光环有专用青蓝配色；整体换色还需修改对应装饰样式。科幻样式只覆盖 `sci-*` 组件，不会自动给全部 `zh-*` 组件套上科幻外观。图表目前是模板中的 SVG 示例，接入真实数据时使用图表组件或更新 SVG，并同步可访问名称。
## 设备与兼容
模板包含 viewport 设置、手机到桌面的响应式布局。后台导航在窄屏保留横向滚动入口，表格在容器内处理宽内容。数据表应保留序号列；分页序号按当前排序与筛选后的顺序连续计算。
核心库目标版本为 Chrome / Edge 111+、Safari 16.4+、Firefox 113+。目标版本不代表每台真机已验证。交付前检查 320、390、768、1440 像素宽度，键盘操作、触屏、长文本、空状态、系统减少动态效果和打印。玻璃效果不支持时仍应保留可读底色。科幻动画遵循减少动态效果设置，打印时静止。
演示模板是 HTML，支持浏览器打印 PDF。需要可编辑 PPTX 时应另做文稿转换；动态网页效果不会自动成为 PowerPoint 动画。
## 轻透工作台
参考 AImini 浅色工作台提炼的可选样式：浅灰底、半透面板、蓝色操作和圆角控件。引入 `zhaoui-style-workbench.min.css` 后调用 `ZhaoUI.applyStyle('workbench')`。切换为深色时可调用 `ZhaoUI.setTheme({mode:'dark'})`。这份风格包只处理通用组件外观，聊天、任务和项目目录布局仍由应用负责。
## 科幻主题与圆角
科幻模板提供深空青蓝、星云紫、极地冰蓝、熔岩橙、翡翠矩阵、赛博霓虹六组配色。容器使用 `data-sci-theme="azure|nebula|ice|solar|jade|cyberpunk"` 切换，面板圆角由 `--sci-radius` 控制，默认为 20px。引入 `zhaoui-scifi.min.js` 后，可用带 `data-sci-theme-picker` 的 select 和带 `data-sci-motion-picker` 的复选框控制同一 `.zh-sci` 容器；系统减少动态效果设置始终优先。
适合科幻化的组件包括指标面板、趋势与占比图、雷达、关联网络、数据流、任务表、告警、加载状态和弹窗。各主题配有不同运动方式：青蓝流光连线、紫色旋涡、冰蓝冰晶、橙色余烬、绿色数字雨，以及赛博电路光点；同时提供光环、方向箭头和 SVG 动态示例。余烬和冰晶是二维粒子表达，尚不包含流体火焰、风场或三维大脑。
科幻模板的主题选择与开关复用 ZhaoUI 组件，加载顺序为主库 CSS、科幻 CSS、主库 JS、科幻 JS。主题 select 加 `data-zh-select`，动效复选框使用 `class="zh-switch" role="switch"`，标签和控件保持关联。粒子层使用 ``，放在有定位的容器中；关闭动效、减少动态效果、切换后台或离开可见区域时暂停。
粒子组件支持 `ZhaoUI.scifi.init(container)`，可重复调用；`ZhaoUI.scifi.setTheme(root, 'cyberpunk')` 同步主题控件与粒子配色；移除区域前调用 `ZhaoUI.scifi.destroy(container)` 释放动画与观察器。引入主库后，带 `data-sci-particles` 的新增元素也会自动初始化。