现象威胁度评级 组件
注意：
此页为于后室维基内部所使用的组件页面。该页面内容可在其它页面中被使用或引用。
哦,
嗨!
概要
现象威胁度评级（Phenomenon Threat Scale，简称 PTS）是一套简洁而优雅的展示 UI，可用于介绍现象的基本特征，同时具备高度的灵活性与修改空间。
如何使用
[[include :backrooms-wiki-cn:component:pts
|number=评级数字
|class=评级名称
|aoe=作用范围
|frequency=发生频率
|duration=持续时间
|intensity=剧烈程度
|dropdown=下拉动画
|dropdownnum=下拉数字
|title-component=组件标题
|title-class=评级标题
|title-sub=次级指标标题
|title-one=第一下拉标题
|title-two=第二下拉标题
|title-three=第三下拉标题
|title-four=第四下拉标题
|value-four=第四下拉内容
|theme-font=使用版式字体
]]
| 变量名 | 值 | 可选与否 | 描述 |
|---|---|---|---|
| 评级数字 | {$number} | 评级的数字或者索引。可使用两个字符，如果字体窄的话三个也可以。 | |
| 评级名称 | {$class} | ✓* | 分级的名称。如果你使用了预设，填写此变量将覆写预设的分级名。 *这通常是自动填写的，所以当且仅当你使用了下方的预设时，可以不用填写；否则必填。 |
| 作用范围 | {$aoe} | 该现象作用的物品 / 实体 / 地区类型。 | |
| 发生频率 | {$frequency} | 现象有多频繁。 | |
| 持续时间 | {$duration} | 现象持续多久。 | |
| 剧烈程度 | {$intensity} | 现象对于作用对象的剧烈程度 / 危险度 / 灾害程度。 | |
| 下拉动画 | {$dropdown} | ✓ | 如果在这一栏填写 false 则会使三项细节栏默认展开。覆写了 CSS 的 —dropdown-hide-distance 变量。 |
| 下拉个数 | {$dropdownnum} | ✓ | 可填 0-4，表示了组件中下拉指标的个数，默认为 3。 |
| 组件标题 | {$title-component} | ✓ | 设置组件菱形部分的标题，默认为 “PTS：”。 |
| 评级标题 | {$title-class} | ✓ | 设置组件评级的标题，默认为“评级：”。 |
| 次要指标标题 | {$title-sub} | ✓ | 设置次要指标的标题，默认为“作用范围：”。 |
| 第一下拉标题 | {$title-one} | ✓ | 设置首个下拉指标的标题，默认为发生频率。 |
| 第二下拉标题 | {$title-two} | ✓ | 设置第二个下拉指标的标题，默认为持续时间。 |
| 第三下拉标题 | {$title-three} | ✓ | 设置第三个下拉指标的标题，默认为剧烈程度。 |
| 第四下拉标题 | {$title-four} | ✓* | 设置第四个下拉指标的标题。 *仅在将 {$dropdownnum} 设置为 4 时可生效。 |
| 第四下拉内容 | {$value-four} | ✓* | 设置第四个下拉指标的内容。 *仅在将 {$dropdownnum} 设置为 4 时可生效。 |
| 使用版式字体 | {$theme-font} | ✓ | 将此变量设置为 a 即可将字体修改为版式的字体，默认为 Poppins / 思源黑体。覆写了 CSS 的 --pts-title-font 与 --pts-body-font 变量。 |
内置评级数字
将 {$number} 设置为以下内容将会自动填写 {$class} 的值。注意区分大小写。| 后缀 V | 后缀 E | 后缀 M | 后缀 P | ||
|---|---|---|---|---|---|
| 0 | 0 | 0 级 多变 | 0 级 环境影响 | 0 级 精神影响 | 0 级 物质转化 |
| 1 | 1 | 1 级 多变 | 1 级 环境影响 | 1 级 精神影响 | 1 级 物质转化 |
| 2 | 2 | 2 级 多变 | 2 级 环境影响 | 2 级 精神影响 | 2 级 物质转化 |
| 3 | 3 | 3 级 多变 | 3 级 环境影响 | 3 级 精神影响 | 3 级 物质转化 |
| 4 | 4 | 4 级 多变 | 4 级 环境影响 | 4 级 精神影响 | 4 级 物质转化 |
| 5 | 5 | 5 级 多变 | 5 级 环境影响 | 5 级 精神影响 | 5 级 物质转化 |
| UD | 不明 | ||||
| PD | 待定 | ||||
| NA | 分级失效 |
语法： 先写竖着的分级，再跟上横轴的后缀；例如，填写 3E 可以获得 3 级 环境影响 的评级，但填写 E3 没有默认分级。
示例
预设评级
自定义评级
可选变量效果预览
版式兼容
这个组件会从版式提取颜色，所以你可以用很少的 CSS 调整来适应版式（其实大部分时候压根不需要！）；这里是一些示例（使用预设评级示例）：
使用 CSS 修改
以下是你可以用 CSS 进行的额外修改，既可以用 [[module CSS]] 来实现，也可以把代码写入你的版式。把 [[module css]] 放在 [[include]] 的外面，把它们放置于页面的顶部或底部。
将以下代码添加至你的页面 / 版式来修改全局颜色：
[[module css]] .pts-container { /* 字体 */ --pts-font: Poppins, "Noto Sans SC", sans-serif; /* 组件整体的字体 */ --pts-title-font: var(--pts-font); /* 组件标题（菱形、评级与下拉指标）的字体 */ --pts-title-weight: 700; /* 组件标题（菱形、评级与下拉指标）的字重 */ --pts-body-font: var(--pts-font); /* 组件各项内容的字体 */ --pts-body-weight: 500; /* 组件各项内容的字重 */ /* 边框颜色 */ --pts-border: var(--gray-monochrome); /* 组件边框的颜色 */ /* 文字颜色 */ --pts-text: var(--swatch-text-general); /* 组件整体的文本颜色；是 --pts-class-text 与 --pts-dropdown-text 的首选值 */ --pts-diamond-text: var(--swatch-text-secondary-color); /* 组件菱形中文字的颜色 */ --pts-class-text: var(--swatch-text-general); /* 组件评级文本的颜色 */ --pts-subtitle-text: var(-swatch-text-secondary-color); /* 组件次要指标文字的颜色 */ --pts-dropdown-text: var(--swatch-text-general); /* 组件下拉指标文字的颜色 */ /* 背景颜色 */ --pts-background: var(--swatch-secondary-color); /* 组件整体的背景颜色；是 --pts-class-background 与 --pts-dropdown-background 的首选值 */ --pts-diamond-background: var(--swatch-primary-darker); /* 组件菱形的背景色 */ --pts-class-background: var(--swatch-secondary-color); /* 组件评级的背景色 */ --pts-subtitle-background: var(--gray-monochrome); /* 次要指标的背景色 */ --pts-dropdown-background: var(--swatch-secondary-color); /* 下拉指标的背景色 */ /* 动画 */ --pts-animation-speed: 2000ms; /* 初始动画的常 */ --pts-animation-easing: cubic-bezier(1,0,0,1); /* 初始动画设置 */ --pts-animation-delay: 0s; /* 初始动画延迟 */ --pts-dropdown-speed: 300ms; /* 下拉动画时常 */ --pts-dropdown-easing: ease-out; /* 下拉动画设置 */ --pts-dropdown-hide-distance: -65%; /* 下拉动画默认收起的长度。设置为 -2px 即可禁用下拉动画。将 {$dropdown} 设置为 false 将覆写该变量 */ } [[/module]]
页面版本: 5, 最后编辑于: 10 Aug 2025 12:16