@quicktvui/ai 1.0.3 → 1.0.5

package/rules/.docs/examples/module/page/es-app-lifecycle-hooks.vue

@@ -0,0 +1,85 @@
+<template>
+  <div id="root">
+    <es-router-view />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+import { ESLogLevel, useESLog } from "@extscreen/es3-core";
+import {
+  onESCreate,
+  onESCreated,
+  onESDestroy,
+  onESNewIntent,
+  onESPause,
+  onESRestart,
+  onESRestoreInstanceState,
+  onESResume,
+  onESSaveInstanceState,
+  onESStart,
+  onESStop,
+} from "@extscreen/es3-vue";
+
+const TAG = "Application";
+
+export default defineComponent({
+  name: "App",
+  emits: [],
+  setup() {
+    const log = useESLog();
+
+    onESCreate((app, params) => {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, "-------onESCreate------->>>>", app, params);
+      }
+    });
+
+    onESCreated((success) => {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, "-------onESCreated------->>>>", success);
+      }
+    });
+
+    onESStart(() => {
+      //
+    });
+
+    onESNewIntent((intent) => {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, "-------onESNewIntent------->>>>", intent);
+      }
+    });
+
+    onESRestart(() => {
+      //
+    });
+
+    onESResume(() => {
+      //
+    });
+
+    onESPause(() => {
+      //
+    });
+
+    onESStop(() => {
+      //
+    });
+
+    onESDestroy(() => {
+      //
+    });
+  },
+});
+</script>
+
+<style scoped>
+#root {
+  width: 1920px;
+  height: 1080px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/rules/.docs/examples/module/page/es-page-lifecycle-hooks.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="es-sdk-root-css">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+    <div class="es-sdk-content-row-css">
+      <s-text-view :text="textRef" />
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent, ref } from "@vue/runtime-core";
+import {
+  onESCreate,
+  onESDestroy,
+  onESNewIntent,
+  onESPause,
+  onESRestart,
+  onESRestoreInstanceState,
+  onESResume,
+  onESSaveInstanceState,
+  onESStart,
+  onESStop,
+} from "@extscreen/es3-vue";
+
+export default defineComponent({
+  name: "使用初探",
+  setup() {
+    const textRef = ref("");
+
+    onESCreate((params) => {
+      textRef.value =
+        `${textRef.value} --> ` + `onESCreate${JSON.stringify(params)}`;
+    });
+
+    onESStart(() => {
+      textRef.value = `${textRef.value} --> ` + `onESStart`;
+    });
+
+    onESNewIntent((intent) => {
+      textRef.value =
+        `${textRef.value} --> ` + `onESNewIntent${JSON.stringify(params)}`;
+    });
+
+    onESRestart(() => {
+      textRef.value = `${textRef.value} --> ` + `onESRestart`;
+    });
+
+    onESRestoreInstanceState((savedInstanceState) => {
+      textRef.value =
+        `${textRef.value} --> ` +
+        `onESRestoreInstanceState${JSON.stringify(params)}`;
+    });
+
+    onESResume(() => {
+      textRef.value = `${textRef.value} --> ` + `onESResume`;
+    });
+
+    onESPause(() => {
+      textRef.value = `${textRef.value} --> ` + `onESPause`;
+    });
+
+    onESStop(() => {
+      textRef.value = `${textRef.value} --> ` + `onESStop`;
+    });
+
+    onESSaveInstanceState((savedInstanceState) => {
+      textRef.value =
+        `${textRef.value} --> ` +
+        `onESSaveInstanceState${JSON.stringify(params)}`;
+    });
+
+    onESDestroy(() => {
+      textRef.value = `${textRef.value} --> ` + `onESDestroy`;
+    });
+  },
+});
+</script>
+<style></style>

package/rules/.docs/examples/module/page/es-page-state-hooks.vue

@@ -0,0 +1,35 @@
+<script>
+import { defineComponent } from "@vue/runtime-core";
+import { ESLogLevel, useESLog } from "@extscreen/es3-core";
+import {
+  onESRestoreInstanceState,
+  onESSaveInstanceState,
+} from "@extscreen/es3-vue";
+
+export default defineComponent({
+  name: "Page状态管理",
+  setup() {
+    const log = useESLog();
+
+    onESRestoreInstanceState((savedInstanceState) => {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(
+          TAG,
+          "-------onESRestoreInstanceState------->>>>",
+          savedInstanceState,
+        );
+      }
+    });
+
+    onESSaveInstanceState((savedInstanceState) => {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(
+          TAG,
+          "-------onESSaveInstanceState------->>>>",
+          savedInstanceState,
+        );
+      }
+    });
+  },
+});
+</script>

package/rules/.docs/zh-CN/component/button.md

@@ -100,9 +100,9 @@ component/button/custom-icon-style
 | icon                            | 标准状态图标         | ^[string]                                                      | -       |
 | focusIcon                       | 焦点状态图标         | ^[string]                                                      | -       |
 | text                            | 按钮的文本           | ^[string]                                                      | -       |
-| gradientFocusBackground         | 焦点状态背景颜色      | ^[QTGradient]                                                  | -       |
-| gradientSelectedBackground      | 选中状态背景颜色      | ^[QTGradient]                                                  | -       |
-| gradientBackground              | 标准背景颜色         | ^[QTGradient]                                                  | -       |
+| gradientFocusBackground         | 焦点状态背景颜色      | [`QTGradient`](/zh-CN/css/color/gradient)                                                   | -       |
+| gradientSelectedBackground      | 选中状态背景颜色      | [`QTGradient`](/zh-CN/css/color/gradient)                                                   | -       |
+| gradientBackground              | 标准背景颜色         | [`QTGradient`](/zh-CN/css/color/gradient)                                                   | -       |
 | disabled                        | 是否显示可用样式      | ^[boolean]                                                     | false   |
 | round                           | 是否显示圆角样式      | ^[boolean]                                                     | false   | | -       |
 

package/rules/.docs/zh-CN/component/column.md

@@ -5,6 +5,9 @@ lang: zh-CN
 
 # Column
 
+<img src="/component/column/column.png" />
+
+
 :::demo ## 基础用法
 
 component/column/basic

package/rules/.docs/zh-CN/component/html/installation.md

@@ -18,18 +18,21 @@ lang: zh-CN
 在`main.ts`中集成
 
 ```ts
+
 //1.集成 ESPlayer
 import { createESPlayer } from "@extscreen/es3-player";
 
 //2.集成 ESVideoPlayer
 import { createESVideoPlayer } from '@extscreen/es3-video-player'
-
 //3.集成 ESSoundPoolPlayer
 import { createESSoundPoolPlayer } from '@extscreen/es3-soundpool-player'
-
 //4.集成 ESAudioPlayer
 import { createESAudioPlayer } from '@extscreen/es3-audio-player'
 
+//5.集成 QuickTVHtml
+import QuickTVHtml from '@quicktvui/html-core'
+import '@quicktvui/html-core/dist/index.css'
+
 const player = createESPlayer();
 app.use(player);
 
@@ -41,6 +44,9 @@ app.use(soundPlayer)
 
 const audioPlayer = createESAudioPlayer()
 app.use(audioPlayer)
+
+app.use(QuickTVHtml)
+
 ```
 
 ### 第三步、初始化

package/rules/.docs/zh-CN/component/html/video.md

@@ -35,5 +35,6 @@ component/html/video
 |------------------------------|--------------------------------|-------------------------------------------------------------------------------|
 | play                      | 播放                         | ^[Function]`() => void` |
 | pause                  | 暂停                         | ^[Function]`() => void` |
+| start                      | 暂停后开始播放                         | ^[Function]`() => void` |
 | load                 | 加载                         | ^[Function]`() => void` |
 | stop                     | 停止                         | ^[Function]`() => void` |

package/rules/.docs/zh-CN/component/media-series.md

@@ -11,9 +11,9 @@ lang: zh-CN
 
 | Name                    | Description       | Type                  | Default              |
 | ----------------------- | ----------------- | --------------------- | -------------------- |
-| gradientBackground      | 背景颜色            | ^[QTGradient]        | `{colors:['#1AFFFFFF','#1AFFFFFF'],orientation:6,cornerRadius:8}`|
-| gradientFocusBackground | 焦点状态背景颜色      | ^[QTGradient]        | `{colors:['#FFFFFF','#FFFFFF'],orientation:6,cornerRadius:8}`    |
-| iconGradientBackground  | 图标背景颜色         | ^[QTGradient]        | `{colors:['#FFB67827','#FFDBAF5C'],cornerRadius:4,orientation:6}`|
+| gradientBackground      | 背景颜色            | [`QTGradient`](/zh-CN/css/color/gradient)         | `{colors:['#1AFFFFFF','#1AFFFFFF'],orientation:6,cornerRadius:8}`|
+| gradientFocusBackground | 焦点状态背景颜色      | [`QTGradient`](/zh-CN/css/color/gradient)         | `{colors:['#FFFFFF','#FFFFFF'],orientation:6,cornerRadius:8}`    |
+| iconGradientBackground  | 图标背景颜色         | [`QTGradient`](/zh-CN/css/color/gradient)         | `{colors:['#FFB67827','#FFDBAF5C'],cornerRadius:4,orientation:6}`|
 | markColor               | 角标颜色            | ^[string]            | #FF4E46               |
 | markVipColor            | VIP角标颜色         | ^[string]            | #FFD97C               |
 | textColors              | 文字颜色            | ^[QTStateListColor]  | `{color:'rgba(255, 255, 255, .5)',focusColor:'rgba(0, 0, 0, 1)',selectColor:'rgba(255, 255, 255, .5)'}`|

package/rules/.docs/zh-CN/component/overview.md

@@ -14,7 +14,5 @@ QuickTVUI组件分为两大类：
 
 ::: warning 注意：
 
-***1、组件必须设置宽（[width](/zh-CN/css/layout/width)）高（[height](/zh-CN/css/layout/height)）属性***
-
-***2、推荐使用针对电视定制开发的组件`qt-xx`***
+***推荐使用针对电视定制开发的组件`qt-xx`***
 :::

package/rules/.docs/zh-CN/component/poster.md

@@ -96,7 +96,7 @@ component/poster/ripple
 | type                            | 类型                | ^[number]            | 10001   |
 | borderRadius                    | 圆角                | ^[number]            | 8       |
 | rippleColor                     | 水波纹颜色           | ^[string]            | -       |
-| focusBgColor                    | 焦点背景色           | ^[QTGradient]        | -       |
+| focusBgColor                    | 焦点背景色           | [`QTGradient`](/zh-CN/css/color/gradient)         | -       |
 | focusTitleColor                 | 标题焦点色           | ^[string]            | -       |
 | focusSubTitleColor              | 副标题焦点色         | ^[string]            | -       |
 | floatTitleBgColor               | 浮动标题背景色       | ^[object]`string[]`            | -       |

package/rules/.docs/zh-CN/component/row.md

@@ -5,6 +5,8 @@ lang: zh-CN
 
 # Row
 
+<img src="/component/row/row.png" />
+
 :::demo ## 基础用法
 
 component/row/basic

package/rules/.docs/zh-CN/component/text.md

@@ -88,7 +88,7 @@ component/text/ellipsize-mode
 | autoHeight ^(virtual dom组件中使用)                    | 高度自适应                                               | ^[boolean]                                                                                           | false   |
 | focusable                      | 是否可以获得焦点      | ^[boolean]                                                                                           | false   |
 | duplicateParentState           | 继承父类的状态        | ^[boolean]                                                                                           | false   |
-| gradientBackground             | 渐变背景色           | ^[QTGradient]                                                                                        | false   |
+| gradientBackground             | 渐变背景色           | [`QTGradient`](/zh-CN/css/color/gradient) | false   |
 | showOnState                    | 在指定状态显示        | ^[enum]`'normal' \| 'selected' \| 'focused'`                                                         | normal  |
 | nextFocusDownSID ^(2.7)        | 向下时指定下一个焦点sid                                       | ^[string]                                                                                            | -       |
 | nextFocusUpSID ^(2.7)          | 向上时指定下一个焦点sid                                       | ^[string]                                                                                            | -       |

package/rules/.docs/zh-CN/component/waterfall_structure.md

@@ -0,0 +1,266 @@
+---
+title: Waterfall Structure (AI)
+lang: zh-CN
+---
+
+# Waterfall 结构（AI可读版）
+
+本文将 `waterfall_structure.jpg` 转为文本结构，方便 AI 理解层级、字段和布局规则。
+
+## 1. 层级关系
+
+```text
+Waterfall
+└── Section[]
+    ├── SectionTitle
+    └── SectionContent
+        └── Item[]
+```
+
+说明：
+- `Waterfall` 是根容器。
+- 每个 `Section` 至少包含 `style`、`itemList`，可选 `title`、`titleStyle`、`decoration`。
+- `SectionContent` 中放置多个 `Item`。
+
+## 2. 图中视觉层与语义映射
+
+图中从外到内可理解为：
+
+```text
+Section Decoration (红色虚线)
+  -> Item Decoration (黑色点虚线)
+    -> Item Margin (紫色虚线)
+      -> Item Padding (蓝色点线)
+        -> Item Content (灰色块)
+```
+
+方向统一为四边：`top / right / bottom / left`。
+
+## 3. 字段映射（与代码一致）
+
+| 图中概念 | 代码字段 | 备注 |
+| --- | --- | --- |
+| Waterfall | `QTWaterfall` | `width`, `height`, `visibleType` |
+| Section | `QTWaterfallSection` | `type`, `style`, `itemList`, `title`, `titleStyle`, `decoration` |
+| Item | `QTWaterfallItem` | `type`, `style`, `decoration` |
+| Section Decoration | `section.decoration.{left,top,right,bottom}` | 四边装饰间距 |
+| Item Decoration | `item.decoration.{left,top,right,bottom}` | 四边装饰间距（参与布局计算） |
+| Item Margin | `item.style.margin*` | `margin`, `marginTop` 等 |
+| Item Padding | `item.style.padding*` | `padding`, `paddingTop` 等 |
+| Section 间距 | `section.style.spacing` | 行内/条目间距（layout 计算使用） |
+
+相关类型定义来源：
+- `packages/components/waterfall/src/waterfall-types.ts`
+- `packages/components/flex/src/flex-types.ts`
+
+## 4. 布局规则（Flex Section）
+
+`QT_WATERFALL_SECTION_TYPE_FLEX` 的核心布局逻辑在：
+- `packages/components/waterfall/src/QTWaterfallDataAdapter.ts`
+
+可简化为：
+
+```text
+for each item in section.itemList:
+  width  = item.style.width
+  height = item.style.height
+
+  if item.style.x and item.style.y are defined:
+    item.layout = [x, y, width, height]
+  else:
+    deco = item.decoration (left/top/right/bottom)
+
+    if rightMost + width + deco.right > sectionWidth:
+      wrap to next line
+      downMost += lineHeight + section.style.spacing
+      rightMost = 0
+      lineHeight = 0
+
+    item.layout.x = rightMost + deco.left
+    item.layout.y = downMost + deco.top
+
+    lineHeight = max(lineHeight, height + deco.top + deco.bottom)
+    sectionHeight = max(sectionHeight, item.layout.y + height + deco.bottom)
+    rightMost += width + section.style.spacing + deco.left + deco.right
+
+final section height =
+  sectionHeight
+  + titleStyle.height
+  + titleStyle.marginTop + titleStyle.marginBottom
+  + titleStyle.paddingTop + titleStyle.paddingBottom
+```
+
+注意：
+- 当前 `layoutItem` 中，`section.decoration` 相关计算是注释状态；`item.decoration` 会参与布局。
+- 若 `item.style.x/y` 存在，则该条目走绝对布局坐标，不参与自动排布。
+
+## 5. 关键约束（AI 必须遵守）
+
+这是最容易被忽略、但会直接导致 UI 错误的规则。
+
+### 5.1 默认语境
+
+- `qt-waterfall` 的 `#item` 插槽是在 `flex-section` 内渲染的。
+- 因此自定义 `item` 默认要按 `QT_WATERFALL_SECTION_TYPE_FLEX` 的布局规则处理。
+
+### 5.2 自定义 Item 根节点硬约束
+
+自定义 `item` 根节点必须透传这两个属性：
+
+```vue
+layout="${layout}"
+flexStyle="${style}"
+```
+
+推荐最小写法：
+
+```vue
+<template>
+  <div
+    layout="${layout}"
+    flexStyle="${style}"
+    :focusable="true"
+    eventClick
+    eventFocus
+  >
+    <!-- 内容 -->
+  </div>
+</template>
+```
+
+### 5.3 不写会发生什么（根因）
+
+- 缺少 `layout="${layout}"`：
+  `x/y/width/height` 不能按 Waterfall 计算结果落到 item 上，多个 item 往往出现在相同起点（常见为左上角），表现为“堆叠到一块”。
+- 缺少 `flexStyle="${style}"`：
+  item 的动态样式上下文无法完整透传，样式与数据可能脱节（尺寸、间距、焦点态等），在复杂场景下同样会放大重叠/错位问题。
+
+### 5.4 AI 生成代码检查清单
+
+AI 生成自定义 `item` 代码时，必须逐条检查：
+
+- 根节点是否包含 `layout="${layout}"`。
+- 根节点是否包含 `flexStyle="${style}"`。
+- 根节点是否可聚焦（按业务需要设置 `:focusable`、`eventFocus`、`eventClick`）。
+- `section.type` 是否为 `QT_WATERFALL_SECTION_TYPE_FLEX`（或与插槽语义一致）。
+- 未用纯 CSS 定位替代 `layout` 绑定。
+
+### 5.5 本地图片必须加 `file://`（Waterfall / Tabs-Waterfall）
+
+当图片来源是本地资源（例如 `import icon from '...png'`）且该值进入 Waterfall/Tabs-Waterfall 的数据对象时，必须补协议头：
+
+```ts
+const localIcon = `file://${icon}`
+```
+
+错误写法（容易在瀑布流条目里不显示或显示异常）：
+
+```ts
+icon
+```
+
+正确写法：
+
+```ts
+`file://${icon}`
+```
+
+推荐应用位置：
+- `item.image.normal / focused`
+- `item.corner`
+- `item.icon / iconFocus`
+- 其他最终喂给 `src` 的数据字段（通过 `${...}` 绑定到 `img` / `qt-image`）
+
+## 6. AI可解析数据结构（YAML）
+
+```yaml
+waterfall:
+  width: number
+  height: number
+  visibleType: none|normal|center
+  sectionList:
+    - _id: string
+      type: number
+      title: string
+      style:
+        width: number
+        height: number
+        spacing: number
+        left: number
+        top: number
+        right: number
+        bottom: number
+      decoration:
+        left: number
+        top: number
+        right: number
+        bottom: number
+      itemList:
+        - _id: string
+          type: number
+          style:
+            width: number
+            height: number
+            x: number
+            y: number
+            margin: number
+            marginTop: number
+            marginRight: number
+            marginBottom: number
+            marginLeft: number
+            padding: number
+            paddingTop: number
+            paddingRight: number
+            paddingBottom: number
+            paddingLeft: number
+          decoration:
+            left: number
+            top: number
+            right: number
+            bottom: number
+```
+
+## 7. 最小示例（JSON）
+
+```json
+{
+  "width": 1920,
+  "height": 1080,
+  "sectionList": [
+    {
+      "_id": "sec-1",
+      "type": 1002,
+      "title": "SectionTitle",
+      "style": {
+        "width": 1800,
+        "height": 0,
+        "spacing": 20
+      },
+      "decoration": {
+        "left": 24,
+        "top": 16,
+        "right": 24,
+        "bottom": 16
+      },
+      "itemList": [
+        {
+          "_id": "item-1",
+          "type": 10001,
+          "style": {
+            "width": 280,
+            "height": 360,
+            "padding": 8,
+            "margin": 6
+          },
+          "decoration": {
+            "left": 8,
+            "top": 8,
+            "right": 8,
+            "bottom": 8
+          }
+        }
+      ]
+    }
+  ]
+}
+```

package/rules/.docs/zh-CN/css/animation-transition/overview.md

@@ -0,0 +1,23 @@
+---
+title: AnimationTransition
+lang: zh-CN
+---
+
+# 动画与过渡
+
+## CSS 动画与过渡速查表
+
+| 属性           | 说明                                 | 示例                         | 是否支持 |
+|----------------|--------------------------------------|------------------------------|----------|
+| animation-name | 指定动画名称                         | `animation-name: slideIn;`    | ❌       |
+| animation-duration | 动画持续时间                      | `animation-duration: 2s;`     | ❌       |
+| animation-timing-function | 动画速度曲线               | `animation-timing-function: ease-in-out;` | ❌       |
+| animation-delay | 动画延迟开始时间                    | `animation-delay: 1s;`        | ❌       |
+| animation-iteration-count | 动画重复次数              | `animation-iteration-count: infinite;` | ❌       |
+| animation-direction | 动画播放方向                    | `animation-direction: alternate;` | ❌       |
+| animation-fill-mode | 动画结束后的状态               | `animation-fill-mode: forwards;` | ❌       |
+| animation-play-state | 动画播放状态                  | `animation-play-state: paused;` | ❌       |
+| transition-property | 指定过渡动画影响的属性           | `transition-property: opacity;` | ❌       |
+| transition-duration | 过渡动画持续时间               | `transition-duration: 0.3s;`  | ❌       |
+| transition-timing-function | 过渡动画速度曲线          | `transition-timing-function: ease;` | ❌       |
+| transition-delay | 过渡动画延迟                   | `transition-delay: 0.5s;`     | ❌       |

package/rules/.docs/zh-CN/css/auto/overview.md

@@ -0,0 +1,18 @@
+---
+title: Auto
+lang: zh-CN
+---
+
+# auto
+
+## CSS auto 速查表
+
+| 用途领域        | 属性                  | 含义说明                                      | 是否支持  |
+|-----------------|-----------------------|-----------------------------------------------|-----------|
+| 布局宽高        | `width`, `height`      | 由浏览器根据内容或父元素自动计算尺寸          | ✅      |
+| 外边距          | `margin`               | `margin: auto` 通常用于水平居中                | ✅      |
+| 定位            | `top`, `left`, `right`, `bottom` | 该方向上的值由浏览器自动决定（不强制定位）     | ✅      |
+| Flexbox 布局    | `flex-basis`           | 由内容大小决定初始尺寸                         | ❌      |
+| Grid 布局       | `grid-template-columns` 等 | 轨道尺寸根据内容自动生成                       | ❌      |
+| 内容溢出控制    | `overflow`             | `overflow: auto` 表示内容溢出时显示滚动条      | ❌      |
+| 堆叠顺序        | `z-index`              | `auto` 表示由文档流决定层级                    | ❌     |

package/rules/.docs/zh-CN/css/cheat-sheet.md

@@ -0,0 +1,19 @@
+---
+title: CheatSheet
+lang: zh-CN
+---
+
+# CSS 速查表
+
+*  [尺寸单位速查表](/zh-CN/css/size/overview)
+*  [伪类速查表](/zh-CN/css/pseudo-classes/overview)
+*  [选择器速查表](/zh-CN/css/selector/overview)
+*  [变量速查表](/zh-CN/css/variable/overview)
+*  [auto速查表](/zh-CN/css/auto/overview)
+*  [布局模型速查表](/zh-CN/css/layout-model/overview)
+*  [媒体速查表](/zh-CN/css/media/overview)
+*  [优先级和继承速查表](/zh-CN/css/specificity-inheritance/overview)
+*  [动画与过渡速查表](/zh-CN/css/animation-transition/overview)
+*  [颜色速查表](/zh-CN/css/color/overview)
+*  [函数速查表](/zh-CN/css/function/overview)
+*  [变换速查表](/zh-CN/css/transform/overview)

package/rules/.docs/zh-CN/css/color/overview.md

@@ -0,0 +1,20 @@
+---
+title: Color
+lang: zh-CN
+---
+
+# 颜色
+
+## CSS 颜色速查表
+
+
+| 颜色类型          | 说明                            | 示例                           | 是否支持 |
+|-------------------|---------------------------------|--------------------------------|----------|
+| 关键字颜色        | CSS 预定义颜色关键字             | `red`, `blue`, `transparent`   | ✅       |
+| 十六进制颜色       | 以 # 开头的六位或三位十六进制值  | `#FF0000`, `#0F0`              | ✅       |
+| RGB              | 使用 rgb() 函数定义颜色          | `rgb(255, 0, 0)`               | ✅       |
+| RGBA             | 带透明度的 rgb() 函数            | `rgba(255, 0, 0, 0.5)`         | ✅       |
+| HSL              | 使用 hsl() 定义色相、饱和度、亮度 | `hsl(120, 100%, 50%)`          | ✅       |
+| HSLA             | 带透明度的 hsl() 函数            | `hsla(120, 100%, 50%, 0.3)`    | ✅       |
+| 透明色            | 透明关键字                      | `transparent`                  | ✅       |
+| 当前颜色关键字    | 使用当前文本颜色（inherit）      | `currentColor`                 | ❌       |