# CG创作约束

* CG目前不支持Script脚本，只用 HTML + CSS / Tailwind：禁止脚本。
* 能用 Tailwind 的场景优先用 `flex`、`grid`、`peer-checked:`、`transition-*`；
* 需要动画或复杂状态时再写局部 CSS。
* 交互模式推荐：
  * 使用 `input[type=checkbox/radio] + label + ~` 兄弟选择器来实现折叠、轮播、切换；不1要使用 `:has()`。
  * 展开/收起动画用 `max-height + opacity + transition`，不要期望 `display` 过渡。
  * Tailwind 的 `peer` 只能影响后续兄弟节点，如果结构不满足，请切换到 CSS 选择器。
* 资源与安全:
  * 图片、字体、音视频都需走 HTTPS，可优先使用官方静态域名或角色内上传资源。
  * 图片占位建议 `img + fallback div`，用 CSS 控制显隐，不许 `onerror`。
  * 避免 `iframe/object/embed/video/audio`，审核会直接拒绝。
* 白名单参考

  任何未在白名单内的属性或标签都会被清洗，确保最终 HTML/CSS 能在沙箱稳定运行，开放的白名单主要包括：

  ```jsx
    - **文本/语义结构**：`p/span/strong/em`，所有标题 `h1-h6`，`blockquote`、`div`、`section/article/nav/aside/header/footer/main`、`ul/ol/li`、`table/thead/tbody/tr/th/td` 等都放开，足够搭建多层级模块。
    - **交互/布局标签**：白名单支持 `input`（radio/checkbox/text 等）、`label`、`button`、`details/summary`，还可以用 `table`、`svg`、`path/rect/circle/linearGradient/stop` 等组件来绘制装饰图形或进度条。
    - **媒体/链接**：`img` 必须绑定 HTTPS 静态地址，无法拼接变量；`a` 标签会保留样式但 `href` 会被移除，不允许跳出沙箱；`svg` 的 `viewBox/width/height/fill/stroke` 等属性均可用。
    - **属性白名单**：所有标签默认只保留 `class/id/title/style`；`input` 额外支持 `type/placeholder/value/checked/disabled/name`，`label` 支持 `for`；`img` 保留 `src/alt/width/height`；`details` 可用 `open`；`svg/path/rect/circle` 允许 `fill/stroke/opacity/transform` 等安全属性。
    - **CSS 能力范围**：颜色、渐变、字体、Flex/Grid 布局、`gap`、`position`（支持 `static/relative/absolute`）、`z-index`、`opacity`、`transform/transition/animation`、`clip-path`、`filter/backdrop-filter`、`mask`、`pointer-events`、`mix-blend-mode` 等主流属性均可使用；`cursor:none` 等危险值会被过滤，URL 只允许 HTTPS，`javascript:`/`data:` 会直接删除。
    - **内联样式与 class**：`style` 属性会自动重写，只保留安全声明；`class` 会过滤非法字符并阻止自定义脚本注入。
    - **全局属性**：系统只保留 `class/id/title/style` 这几个基础属性，`class`/`id` 会自动做合法性校验；`style` 会被过滤为安全 CSS，非法声明会被丢弃。
    - **CSS 白名单**：颜色、字体、布局（Flex/Grid）、动画（transition/animation）、滤镜（filter/backdrop-filter）等主流属性都已放开；`position` 仅支持 `static/relative/absolute`，`cursor:none` 等危险值会被移除；URL 只能引用 HTTPS，本地 `javascript:` / `data:` 会被拦截。
  ```
* LLM 与输入：
  * 只允许一个 `{llm_content}`，Prompt 中鼓励引用结构化变量、样式名称、HTML结构和示例指导模型。
  * 为了给会话上下文保留空间，对Prompt长度进行了限制，预览面板会显示用量，需要按量调整，以满足渲染要求。
* 变量列表（不断迭代中）

```
{char} - 角色的名称
{user} - 用户的名称
{user_persona} - 用户的人设描述
{round} - 当前的对话轮次编号
{latest_1_round} - 获取最近的对话内容
{latest_2_round} - 获取最近的对话内容
{latest_3_round} - 获取最近的对话内容
{latest_character_message} - 角色发送的最新消息内容
{latest_user_message} - 用户发送的最新消息内容
{memory_change} - 本轮对话中记忆的变化内容
{memory} - 角色的完整记忆内容
{time} - 当前 UTC 时间，例如 2025-11-05T12:05:00Z
{yy} - 当前 UTC 年份（YYYY）
{mm} - 当前 UTC 月份（MM）
{dd} - 当前 UTC 日期（DD）
{h} - 当前 UTC 小时（24 小时制 HH）
{m} - 当前 UTC 分钟（mm）
{s} - 当前 UTC 秒（ss）
{random_result} - 0-1 之间的随机小数，保留六位小数
{random_result_int} - 0-100 之间的随机整数
{random_result_percentage} - 0-100 之间的随机百分比数值
{llm_content} - 由 AI 模型生成的动态内容，使用时会消费积分
```