# 规则面板 [← 返回 README](../README.md) · [文档索引](./index.md) 编辑器里的**选择器本身就是按钮**（`.cm-peak-strip` 这样的选择器带悬停底色与指针光标）， 点它在编辑器下方展开面板。面板是「这条规则现在是什么样的」摘要，不是一张空白表单。 它由三段组成：**顶部**选择器字段、**中间**已声明的属性、**底部**声明模板。 --- ## 顶部：选择器字段 可重命名，铺满面板宽度。**关闭按钮 `×` 在字段内部**、靠右。 - 改名会**原地改写**样式表里的选择器，注释与缩进不受影响。 - 整个字段获得焦点时统一显示 `brand-primary` 聚焦环。 ## 中间：已声明的属性 - 解析规则块里**真实存在**的声明并逐条列出。枚举型属性显示**中文名 + 中文值下拉** （`flex-direction: row` → 「主轴方向：水平排列」）；非枚举型（`gap`、`margin-top`、`min-width`…） 显示属性名 + **值输入框**，可以直接改。 - **值写错了会当场说**：输入框在**失焦时**判断这个值是不是合法 CSS，不合法就描红并把提示换成 一句说明（「这个值 notacolor 不是合法的 color 值」）。 判据取**失焦时**的值，不是边打边判 —— 半输入的值按定义就是非法的 （实测 `re`、`rgb(`、`calc(`、一个光秃秃的 `8` 都会被引擎判否）， 边打边判会让字段几乎每次按键都变红。**空值不算错**：清空一个字段不该变红。 - 下拉里可选「（删除此项）」移除该声明；**手工写的、不在选项里的值会被保留为当前选项**， 不会被静默改掉。 - **未设置的属性不占行** —— 它们收在属性列表下方的「**＋ 添加属性…**」菜单里（只列当前还没设的）。 - 规则里一条声明都没有时，面板显示「这条规则还没有声明」。 ### 「＋ 添加属性…」菜单 - 控件铺满面板宽度、文案靠左箭头靠右；按用途分成 **布局 / 弹性与对齐 / 网格 / 尺寸 / 间距 / 文本 / 背景 / 描边与圆角 / 效果与动效 / 交互** 十组（**整组都被设完时该组自动隐藏**）。 - 这是一个长列表：**约 4000px 内容装在 260px 的滚动框里**，分组标题**黏顶**、 黏住时显示一块不透明底色（否则标题会压在下面的行上看不清）。 - **所有下拉都是插件自绘的菜单**（DSH 原生菜单的底色 + 阴影 + 20px 圆角，与文件下拉同一套）： 原生 `