@doubao-dev/plugin-app-dev 0.0.0-stage → 0.0.40-canary-dea0ddc73-20261026073950

package/dist/skills/doubao-plugin-app/references/frontend/lynx/css/pseudo-classes.md

@@ -0,0 +1,149 @@
+# 伪类和伪元素
+
+Lynx 支持的伪类和伪元素。
+
+## 伪类
+
+### 状态伪类
+
+#### :active
+
+元素被点击时的状态。
+
+```css
+.button:active {
+  opacity: 0.8;
+  transform: scale(0.98);
+}
+```
+
+#### :focus
+
+元素获得焦点时的状态。
+
+```css
+input:focus {
+  border-color: #ff351a;
+}
+```
+
+#### :hover
+
+鼠标悬停状态（部分平台支持）。
+
+```css
+.button:hover {
+  background-color: #e63016;
+}
+```
+
+> **注意**：`:disabled` 和 `:enabled` 虽能被 CSS 解析器识别，但 Lynx 的 DOM 层并未实现这些伪类的匹配逻辑，因此实际上无法使用。建议通过添加/移除 class 来实现禁用样式。
+>
+> ```css
+> /* 推荐做法 */
+> .button.disabled {
+>   opacity: 0.5;
+>   background-color: #ccc;
+> }
+> ```
+
+### 否定伪类
+
+#### :not()
+
+排除选择器。
+
+```css
+/* 排除特定类 */
+.item:not(.exclude) {
+  color: black;
+}
+```
+
+## 伪元素
+
+> **注意**：`::before` 和 `::after` **不支持**。虽然 CSS 解析器可以识别这些伪元素，但选择器匹配器和渲染引擎并未实现它们，使用它们不会有任何效果。
+
+### ::placeholder
+
+输入框占位符样式。
+
+```css
+input::placeholder {
+  color: #999;
+  font-size: 14px;
+}
+```
+
+### ::selection
+
+选中文本的样式。
+
+```css
+::selection {
+  background-color: #1890ff;
+  color: #fff;
+}
+```
+
+## 使用示例
+
+### 按钮状态
+
+```css
+.button {
+  background-color: #ff351a;
+  color: #fff;
+  padding: 12px 24px;
+}
+
+/* 点击效果 */
+.button:active {
+  background-color: #e63016;
+  transform: scale(0.98);
+}
+
+/* 禁用状态 - 使用 class 实现 */
+.button.disabled {
+  background-color: #ccc;
+  opacity: 0.6;
+}
+```
+
+### 表单输入
+
+```css
+.input {
+  border: 1px solid #ddd;
+  padding: 8px 12px;
+}
+
+/* 聚焦状态 */
+.input:focus {
+  border-color: #ff351a;
+  outline: none;
+}
+
+/* 占位符样式 */
+.input::placeholder {
+  color: #999;
+}
+```
+
+## 不支持的伪类/伪元素
+
+- ❌ `:first-child` / `:last-child` / `:nth-child()` - 结构伪类
+- ❌ `:nth-of-type()` / `:only-child` / `:empty` - 结构伪类
+- ❌ `:is()` - 较新的选择器
+- ❌ `:where()` - 较新的选择器
+- ❌ `:has()` - 父选择器
+- ❌ `:target` - 目标伪类
+- ❌ `:disabled` / `:enabled` - 表单状态（虽能解析但无法匹配）
+- ❌ `:checked` - 表单选中状态（虽能解析但无法匹配）
+- ❌ `:valid`, `:invalid` - 表单验证
+- ❌ `:required`, `:optional`
+- ❌ `::before` / `::after` - 伪元素（不支持）
+- ❌ `::first-line` - 首行
+- ❌ `::first-letter` - 首字母
+
+**注意**: 以上标记为 ❌ 的伪类和伪元素均不支持。

package/dist/skills/doubao-plugin-app/references/frontend/lynx/css/selectors.md

@@ -0,0 +1,224 @@
+# CSS 选择器
+
+Lynx 支持大部分常用的 CSS 选择器。
+
+## 基本选择器
+
+### 标签选择器
+
+```css
+view {
+  background-color: #fff;
+}
+
+text {
+  color: #333;
+}
+
+image {
+  border-radius: 8px;
+}
+```
+
+### 类选择器
+
+```css
+.container {
+  padding: 16px;
+}
+
+.button-primary {
+  background-color: #ff351a;
+  color: #fff;
+}
+```
+
+### ID 选择器
+
+```css
+#header {
+  position: sticky;
+  top: 0;
+}
+
+#main-content {
+  flex: 1;
+}
+```
+
+### 通用选择器
+
+```css
+* {
+  box-sizing: border-box;
+}
+```
+
+## 组合选择器
+
+### 后代选择器
+
+```css
+.container .item {
+  /* 选择 .container 内的所有 .item */
+  margin-bottom: 12px;
+}
+```
+
+### 子选择器
+
+```css
+.list > .list-item {
+  /* 选择直接子元素 */
+  border-bottom: 1px solid #eee;
+}
+```
+
+### 相邻兄弟选择器
+
+```css
+.title + .subtitle {
+  /* 紧跟在 .title 后面的 .subtitle */
+  margin-top: 8px;
+}
+```
+
+### 通用兄弟选择器
+
+```css
+.header ~ .content {
+  /* .header 后面的所有 .content */
+  padding-top: 16px;
+}
+```
+
+### 群组选择器
+
+```css
+h1,
+h2,
+h3 {
+  font-weight: bold;
+}
+```
+
+## 属性选择器
+
+```css
+/* 有该属性 */
+[disabled] {
+  opacity: 0.5;
+}
+
+/* 精确匹配 */
+[type='text'] {
+  border: 1px solid #ccc;
+}
+
+/* 包含某值（部分支持） */
+[class*='active'] {
+  color: red;
+}
+```
+
+> **注意**：`[class~='val']`（空格分隔的值列表匹配）不被支持。请使用 `[class*='val']`（子串匹配）代替。
+
+## 伪类
+
+### 状态伪类
+
+```css
+/* 点击状态 */
+:active
+
+/* 聚焦状态 */
+:focus
+
+/* 悬停状态（部分平台支持） */
+:hover
+
+/* 根元素 */
+:root
+```
+
+> **注意**：`:disabled` 和 `:enabled` 虽能被 CSS 解析器识别，但 Lynx 的 DOM 层并未实现这些伪类的匹配逻辑，因此实际上无法使用。建议通过添加/移除 class 来实现禁用样式。
+>
+> ```css
+> /* 推荐做法 */
+> .button.disabled {
+>   opacity: 0.5;
+>   background-color: #ccc;
+> }
+> ```
+
+### 否定伪类
+
+```css
+/* 排除某些元素 */
+:not(.exclude) {
+  /* 选择没有 .exclude 类的元素 */
+}
+
+.item:not(:last-child) {
+  /* 选择非最后一个的 .item */
+  border-bottom: 1px solid #eee;
+}
+```
+
+## 伪元素
+
+```css
+/* 输入框 placeholder */
+input::placeholder {
+  color: #999;
+}
+
+/* 选中文本 */
+::selection {
+  background-color: #1890ff;
+  color: #fff;
+}
+```
+
+> **注意**：`::before` 和 `::after` **不支持**。虽然 CSS 解析器可以识别这些伪元素，但选择器匹配器和渲染引擎并未实现它们，使用它们不会有任何效果。
+
+## 选择器优先级
+
+优先级从高到低：
+
+1. **内联样式** - `style="..."`（最高）
+2. **ID 选择器** - `#id`
+3. **类/属性/伪类** - `.class`, `[attr]`, `:hover`
+4. **标签** - `tag`
+5. **通用选择器** - `*`（最低）
+
+### 计算示例
+
+```css
+/* 0-1-0-1 = 101 */
+#nav .menu {
+}
+
+/* 0-0-2-1 = 21 */
+.nav .menu-item {
+}
+
+/* 0-0-1-2 = 12 */
+.nav a:hover {
+}
+```
+
+## 选择器限制
+
+不支持的选择器：
+
+- ❌ `:is()` - 较新的选择器
+- ❌ `:where()` - 较新的选择器
+- ❌ `:has()` - 较新的选择器
+- ❌ `:first-child` / `:last-child` / `:nth-child()` - 结构伪类
+- ❌ `:nth-of-type()` / `:only-child` / `:empty` - 结构伪类
+- ❌ `:disabled` / `:enabled` - 表单状态伪类（不支持）
+- ❌ `::before` / `::after` - 伪元素（不支持）
+- ❌ 复杂属性选择器如 `[attr~="val"]`（空格分隔列表匹配）
+
+**注意**: 以上标记为 ❌ 的选择器均不支持。

package/dist/skills/doubao-plugin-app/references/frontend/lynx/css/supported-properties.md

@@ -0,0 +1,269 @@
+# 支持的 CSS 属性
+
+Lynx 支持大部分常用的 CSS 属性，同时也有一些 Lynx 特有的扩展。
+
+## 布局属性
+
+### Display
+
+| 值                  | 说明                             | 版本 |
+| ------------------- | -------------------------------- | ---- |
+| `display: none`     | 隐藏元素                         | 1.0  |
+| `display: flex`     | Flexbox 布局                     | 1.0  |
+| `display: grid`     | Grid 布局                        | 1.0  |
+| `display: linear`   | Linear 布局（Lynx 特有，默认）   | 1.0  |
+| `display: relative` | Relative 布局（Lynx 特有）       | 2.0  |
+| `display: block`    | Block 布局（回退到 Flex/Linear） | 2.0  |
+| `display: auto`     | 自动选择布局                     | 2.0  |
+
+### Flex 相关
+
+- `flex-direction`
+- `flex-wrap`
+- `flex-flow` - 简写属性
+- `justify-content`
+- `align-items`
+- `align-self`
+- `align-content`
+- `flex-grow`
+- `flex-shrink`
+- `flex-basis`
+- `flex`（简写）
+- `order`
+- `gap`, `row-gap`, `column-gap`
+
+### Grid 相关
+
+- `grid-template-columns`
+- `grid-template-rows`
+- `grid-auto-columns`
+- `grid-auto-rows`
+- `grid-column-start`, `grid-column-end`
+- `grid-row-start`, `grid-row-end`
+- `grid-column-span`, `grid-row-span` - Lynx 特有
+- `grid-auto-flow`
+- `justify-items`
+- `justify-self`
+- `align-items`
+- `align-self`
+- `gap`, `row-gap`, `column-gap`
+
+### Linear 相关（Lynx 特有）
+
+- `linear-orientation`
+- `linear-direction` - Lynx 2.2+
+- `linear-gravity`
+- `linear-layout-gravity`
+- `linear-cross-gravity` - Lynx 1.6+
+- `linear-weight`
+- `linear-weight-sum`
+
+### Relative 相关（Lynx 特有）
+
+- `relative-id`
+- `relative-align-top`, `relative-align-bottom`
+- `relative-align-left`, `relative-align-right`
+- `relative-align-inline-start`, `relative-align-inline-end` - RTL 支持
+- `relative-top-of`, `relative-bottom-of`
+- `relative-left-of`, `relative-right-of`
+- `relative-inline-start-of`, `relative-inline-end-of` - RTL 支持
+- `relative-center`
+- `relative-layout-once` - 内部优化属性
+
+### Position 相关
+
+- `position: relative | absolute | fixed | sticky`
+- `top`, `right`, `bottom`, `left`
+- `z-index`
+- `inset-inline-start`, `inset-inline-end` - RTL 支持
+
+## 盒模型属性
+
+### 尺寸
+
+- `width`, `height`
+- `min-width`, `min-height`
+- `max-width`, `max-height`
+- `aspect-ratio`
+
+### 外边距
+
+- `margin`
+- `margin-top`, `margin-right`, `margin-bottom`, `margin-left`
+- `margin-inline-start`, `margin-inline-end`（LTR/RTL 自适应）
+
+### 内边距
+
+- `padding`
+- `padding-top`, `padding-right`, `padding-bottom`, `padding-left`
+- `padding-inline-start`, `padding-inline-end`（LTR/RTL 自适应）
+
+### 边框
+
+- `border`
+- `border-top`, `border-right`, `border-bottom`, `border-left`
+- `border-width`, `border-style`, `border-color`
+- `border-radius`
+- `border-top-left-radius`, `border-top-right-radius`
+- `border-bottom-left-radius`, `border-bottom-right-radius`
+- `border-start-start-radius`, `border-start-end-radius` - RTL 支持
+- `border-end-start-radius`, `border-end-end-radius` - RTL 支持
+- `box-shadow`
+
+### 盒模型
+
+- `box-sizing: border-box | content-box | auto`（默认 `border-box`）
+  - 显式 `border-box` 和 `content-box` 可用；迁移 Web 布局时不要只看 `box-sizing` 本身。若原页面同时依赖 `float`、浏览器默认 body margin/line-height、绝对定位包含块或 min/max 尺寸夹取，Lynx 与 Web 可能仍出现像素级差异。
+- `overflow: visible | hidden | scroll`（部分支持）
+- `clip-path`
+
+## 视觉属性
+
+### 背景
+
+- `background`
+- `background-color`
+- `background-image`
+- `background-size`
+- `background-position`
+- `background-repeat`
+- `background-origin`
+- `background-clip`
+
+**兼容性注意**：
+
+- `background-color` 适合直接用于普通 `view` / `page` 背景；常见命名色、透明色以及 `inherit` 继承值均受支持。
+- `background` 简写支持常见背景值。迁移包含多个槽位的 Web 简写时，可以拆成已支持的长属性，便于确认每个槽位是否有 Lynx 对应能力。
+- `background-attachment` 不在当前支持列表中。Web 简写里如果带有 `fixed` / `scroll` 等 attachment 关键字，迁移时应先评估是否真的需要该滚动绑定语义；仅需要颜色、图片、repeat、position 时，建议显式写出对应长属性：
+
+  ```css
+  .box {
+    background-image: url('bg.png');
+    background-repeat: repeat;
+    background-position: 0 0;
+    background-color: transparent;
+  }
+  ```
+
+- Web 对 `html` / `body` 背景有特殊的 canvas 绘制和传播规则；Lynx 的 `page` 是页面根节点和全页背景承载面。需要整页背景时，请优先在 `page` 上设置背景；只有需要内容容器背景时，才把 Web `body` 的背景迁移到根 `view`。
+- `background-image: url(...)` 可配合 `background-size`、`background-position`、`background-repeat` 控制背景图尺寸、位置和重复方式。迁移逗号分隔的多图层背景时，不建议混用 `none` 作为透明占位层。Web 会让 `none` 继续参与其它 `background-*` 图层列表的索引对齐：
+
+  ```css
+  /* Web: 中间的 none 是一个透明占位层，第三个 position 仍对应 bottom.png */
+  .panel {
+    background-image: url(top.png), none, url(bottom.png);
+    background-position: left top, center, right bottom;
+  }
+  ```
+
+  在 Lynx 中需要相同视觉效果时，删除空图层，并同步删除其它 `background-*` 列表中对应位置的值；如果确实需要保留独立图层索引，使用嵌套 `<view>` 拆分背景层：
+
+  ```css
+  /* Lynx: 删除空图层，并保持其它背景列表的顺序一致 */
+  .panel {
+    background-image: url(top.png), url(bottom.png);
+    background-position: left top, right bottom;
+  }
+  ```
+
+### 颜色与透明度
+
+- `color`
+- `opacity`
+
+### 变换
+
+- `transform: translate, translateX, translateY, translate3d`
+- `transform: scale, scaleX, scaleY, scale3d`
+- `transform: rotate, rotateX, rotateY, rotateZ, rotate3d`
+- `transform-origin`
+
+### 过渡与动画
+
+- `transition`
+- `transition-property`
+- `transition-duration`
+- `transition-timing-function`
+- `transition-delay`
+- `animation`
+- `animation-name`
+- `animation-duration`
+- `animation-timing-function`
+- `animation-delay`
+- `animation-iteration-count`
+- `animation-direction`
+- `animation-fill-mode`
+
+**动画时间函数支持详情**：关键字 `ease`、`linear`、`ease-in`、`ease-out`、`ease-in-out`、`ease-in-ease-out` 均受支持；此外支持 `cubic-bezier(...)`、`steps(...)` 以及 Lynx 特有的 `square-bezier(...)`。详见 [CSS 值和单位](./values-and-units.md#动画时间函数)。
+
+## 文本属性
+
+### 字体
+
+- `font-size`
+- `font-weight`
+- `font-family`
+- `font-style`
+- `line-height`
+
+### 文本样式
+
+- `color`
+- `text-align`
+- `text-decoration`
+- `text-overflow: clip | ellipsis`
+- `white-space: normal | nowrap`
+
+### Lynx 文本特有
+
+- `-x-auto-font-size`
+- `-x-auto-font-size-preset-sizes`
+
+## 其他属性
+
+### 可见性
+
+- `visibility: visible | hidden`
+- `display: none`（完全移除）
+
+### 内容裁剪
+
+- `clip-path`
+- `mask-image`（部分支持）
+
+### Lynx 特有属性
+
+- `-x-handle-color`
+- `-x-handle-size`
+- `-x-app-region`
+- `-x-overlay`（iOS 特有）
+
+## 不支持的属性
+
+以下 Web CSS 属性在 Lynx 中**不支持**：
+
+- ❌ `display: inline`（使用 `<text>` 组件）
+- ❌ `display: inline-block`
+- ❌ `float`
+- ❌ `clear`
+- ❌ `position: static`
+- ❌ `table-*` 相关属性
+- ❌ `list-style-*` 相关属性
+- ❌ `writing-mode`
+- ✅ `direction` — 支持 `ltr`, `rtl`, `normal`
+
+### Grid 不支持的属性
+
+- ❌ `grid-column`（简写属性，请使用 `grid-column-start/end`）
+- ❌ `grid-row`（简写属性，请使用 `grid-row-start/end`）
+- ❌ `grid-area`
+- ❌ 命名网格线: `[name] 1fr`
+- ❌ `subgrid`
+
+## 版本说明
+
+- **1.0**: 基础布局系统（Linear, Flex, Grid）
+- **1.6**: 新增 `linear-cross-gravity`, `stretch` 值
+- **2.0**: 新增 Relative 布局，`display: block/auto`
+- **2.1**: 新增 `justify-content: stretch`, Grid 完善
+- **2.2**: 新增 `linear-direction` 作为 `linear-orientation` 的替代