风格与场景接入

先想清楚要做什么页面，再选风格。官网、后台、数据大屏和演示页面都有对应模板，可以在官网“模板”页预览、复制提示词或下载。模板里的数据是示例，接入项目时请换成实际数据。

选择场景

序号	场景	建议模板	风格选择
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/。玻璃样式需要额外文件，加载顺序如下：

<!doctype html>
<html lang="zh-CN" data-mode="light" data-audience="b" data-density="standard">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="vendor/zhaoui/zhaoui.min.css">
  <link rel="stylesheet" href="vendor/zhaoui/zhaoui-style-glass.min.css">
  <link rel="stylesheet" href="vendor/zhaoui/zhaoui-template-styles.min.css">
</head>
<body>
  <main><button class="zh-btn primary">保存</button></main>
  <script src="vendor/zhaoui/zhaoui.min.js"></script>
  <script src="vendor/zhaoui/zhaoui-template-styles.min.js"></script>
  <script>ZhaoUI.applyStyle('editorial');</script>
</body>
</html>

脚本默认只提供 API。需要模板里的风格选择栏时，在 body 上加 data-zh-style-picker。选择栏包含同目录下的 scifi-dashboard.html 链接，应用项目通常直接调用 API 即可。

调用和调整

ZhaoUI.applyStyle('business'); // 专业商务
ZhaoUI.applyStyle('editorial'); // 暖白编辑
ZhaoUI.applyStyle('glass'); // 通透玻璃
ZhaoUI.applyStyle('night'); // 深夜工作台
// 风格预设会设置亮暗和品牌色，自定义调整放在预设之后。
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，然后使用专用作用域与组件类：

<section class="zh-sci">
  <div class="sci-panel sci-energy">
    <h2>系统核心</h2>
    <div class="sci-core" role="img" aria-label="装饰性动态能量核心">
      <span class="sci-orbit"></span>
      <span class="sci-mechanics"></span>
      <span class="sci-core-label">SYSTEM ONLINE</span>
    </div>
    <div class="sci-flow" aria-hidden="true"></div>
  </div>
</section>

在 .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 动画。