@quicktvui/ai 1.0.3 → 1.0.5

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

@@ -0,0 +1,27 @@
+---
+title: Color
+lang: zh-CN
+---
+
+# 函数
+
+## CSS 函数速查表
+
+| 函数名           | 说明                                               | 示例                                    | 是否支持 |
+|------------------|----------------------------------------------------|-----------------------------------------|----------|
+| `calc()`         | 动态计算长度值                                     | `width: calc(100% - 50px)`              | ✅       |
+| `var()`          | 使用 CSS 自定义变量                                 | `color: var(--main-color)`              | ✅       |
+| `url()`          | 引用资源（如图片、字体）                            | `background-image: url('img.png')`      | ❌       |
+| `rgb()`          | 设置 RGB 颜色值                                     | `color: rgb(255, 0, 0)`                 | ✅       |
+| `rgba()`         | 设置 RGBA 颜色值，支持透明度                        | `color: rgba(255, 0, 0, 0.5)`           | ✅       |
+| `hsl()`          | 设置 HSL 色彩值                                     | `color: hsl(120, 100%, 50%)`            | ✅       |
+| `hsla()`         | 设置 HSLA 色彩值，支持透明度                        | `color: hsla(120, 100%, 50%, 0.3)`      | ✅       |
+| `min()`          | 返回最小值，用于响应式布局                           | `width: min(100%, 600px)`               | ✅       |
+| `max()`          | 返回最大值                                           | `width: max(300px, 50%)`                | ✅       |
+| `clamp()`        | 设置一个值的最小、首选和最大范围                    | `width: clamp(300px, 50%, 600px)`       | ✅       |
+| `attr()`         | 获取 HTML 属性值，用于 `content` 中                 | `content: attr(data-label)`             | ❌） |
+| `env()`          | 用于读取环境变量（如 `safe-area-inset-*`）         | `padding: env(safe-area-inset-bottom)`  | ❌       |
+| `repeat()`       | 在 `grid-template-columns` 等中重复模板             | `repeat(3, 1fr)`                         | ❌       |
+| `linear-gradient()` | 创建线性渐变                                   | `background: linear-gradient(red, blue)`| ✅       |
+| `radial-gradient()` | 创建放射状渐变                                  | `background: radial-gradient(red, blue)`| ❌       |
+| `conic-gradient()`  | 创建圆锥渐变                                    | `background: conic-gradient(red, blue)` | ❌ |

package/rules/.docs/zh-CN/css/installation.md

@@ -0,0 +1,53 @@
+---
+title: 集成
+lang: zh-CN
+---
+
+# 集成
+
+::: warning 注意
+
+以下依赖包需要 2.0.0 或更高版本，请确认已正确安装：
+
+***@extscreen/es3-vue ≥ 2.0.0***
+
+***@extscreen/es3-vue-style-parser ≥ 2.0.0***
+
+***@extscreen/es3-vue-css-loader ≥ 2.0.0***
+
+:::
+
+## 第一步、`package.json` `dependencies` 添加运行时依赖库
+
+* `@extscreen/es3-vue`![NPM Version](https://img.shields.io/npm/v/@extscreen/es3-vue)
+* `@extscreen/es3-vue-style-parser`![NPM Version](https://img.shields.io/npm/v/@extscreen/es3-vue-style-parser)
+
+## 第二步、`package.json` `devDependencies` 添加编译时依赖库
+
+* `@extscreen/es3-vue-css-loader`![NPM Version](https://img.shields.io/npm/v/@extscreen/es3-vue-css-loader)
+
+## 第三步、集成`@extscreen/es3-vue-css-loader`
+
+Webpack配置文件中需要添加`@extscreen/es3-vue-css-loader`做为css loader。
+
+```ts
+const cssLoader = "@extscreen/es3-vue-css-loader";
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(le|c)ss$/,
+        use: [
+          {
+            loader: cssLoader,
+          },
+          {
+            loader: "less-loader",
+          },
+        ],
+      }
+    ],
+  },
+}
+
+```

package/rules/.docs/zh-CN/css/introduction.md

@@ -0,0 +1,33 @@
+---
+title: 简介
+lang: zh-CN
+---
+
+# 简介
+
+***快应用涉及到 CSS 样式的库有3个：***
+
+
+::: warning 注意
+
+以下依赖包需要 2.0.0 或更高版本，请确认已正确安装：
+
+***@extscreen/es3-vue ≥ 2.0.0***
+
+***@extscreen/es3-vue-style-parser ≥ 2.0.0***
+
+***@extscreen/es3-vue-css-loader ≥ 2.0.0***
+
+:::
+
+
+***运行时依赖库***
+
+* `@extscreen/es3-vue`![NPM Version](https://img.shields.io/npm/v/@extscreen/es3-vue)
+* `@extscreen/es3-vue-style-parser`![NPM Version](https://img.shields.io/npm/v/@extscreen/es3-vue-style-parser)
+
+***编译依赖库***
+
+* `@extscreen/es3-vue-css-loader`![NPM Version](https://img.shields.io/npm/v/@extscreen/es3-vue-css-loader)
+
+

package/rules/.docs/zh-CN/css/layout/background.md

@@ -0,0 +1,21 @@
+---
+title: Background
+lang: zh-CN
+---
+
+# background
+
+## 一、CSS background 速查表
+
+| 属性名               | 中文名称             | 描述                                                         | 是否支持 |
+|----------------------|----------------------|--------------------------------------------------------------|----------|
+| `background`         | 背景                 | 设置所有背景属性的简写方式                                  | ✅        |
+| `background-color`   | 背景颜色             | 设置元素的背景颜色                                          | ✅        |
+| `background-image`   | 背景图像             | 设置元素的背景图像                                          | ❌        |
+| `background-repeat`  | 背景重复             | 定义背景图像的重复方式                                      | ❌        |
+| `background-position`| 背景位置             | 定义背景图像的初始位置                                      | ✅        |
+| `background-size`    | 背景尺寸             | 指定背景图像的尺寸                                          | ❌        |
+| `background-attachment` | 背景附着         | 指定背景图像是否随滚动条滚动                               | ❌        |
+| `background-origin`  | 背景定位区域         | 定义背景图像的定位区域                                      | ❌        |
+| `background-clip`    | 背景裁剪区域         | 决定背景绘制的区域                                          | ❌        |
+| `background-blend-mode` | 背景混合模式      | 设置背景图像与背景颜色的混合模式                           | ❌        |

package/rules/.docs/zh-CN/css/layout/display.md

@@ -5,8 +5,7 @@ lang: zh-CN
 
 # display
 
-QuickTVUI 默认采用 Flex 布局。同时， 因为仅支持 Flex 布局，所以必须手写 `display: flex` 才能生效。
-
+QuickTVUI 默认采用 Flex 布局。同时，因为仅支持 Flex 布局，所以不需要手写 `display: flex` 即可使用。
 
 | Name               | Description      | Type                         | Default |
 |--------------------|------------------|------------------------------| ------- |

package/rules/.docs/zh-CN/css/layout-model/overview.md

@@ -0,0 +1,21 @@
+---
+title: LayoutModel
+lang: zh-CN
+---
+
+# 布局模型
+
+## CSS 布局模型速查表
+
+| Layout Model         | 说明                                                       | 典型属性/用法                                          | 是否支持     |
+|----------------------|------------------------------------------------------------|------------------------------------------------------|------------|
+| 块级布局（Block）      | 元素在垂直方向排列，宽度默认撑满父元素                     | `display: block;`                                     | ❌         |
+| 内联布局（Inline）     | 元素水平排列，占据内容宽度，不换行                         | `display: inline;`                                    | ❌         |
+| 内联块布局（Inline-Block） | 行内元素特性，支持宽高和边距设置                            | `display: inline-block;`                              | ❌         |
+| 弹性盒布局（Flexbox）  | 一维布局，灵活分配空间和对齐                               | `display: flex;`, `justify-content`, `align-items`  | ✅         |
+| 网格布局（Grid）       | 二维布局，支持行和列同时控制                               | `display: grid;`, `grid-template-columns`             | ❌         |
+| 定位布局（Positioning）| 通过 `position` 属性控制元素相对或绝对定位                 | `position: static/relative/absolute/fixed/sticky;`   | ✅         |
+| 浮动布局（Float）      | 利用浮动实现文本环绕或元素排布                            | `float: left/right;`, `clear`                         | ❌         |
+| 多列布局（Multi-column）| 将内容分割成多列显示                                       | `column-count`, `column-gap`                          | ❌         |
+| 表格布局（Table）      | 使用表格样式进行布局                                       | `display: table`, `table-row`, `table-cell`          | ❌         |
+| 粘性布局（Sticky）     | 元素根据滚动位置在 `relative` 和 `fixed` 之间切换           | `position: sticky;`                                   | ❌         |

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

@@ -0,0 +1,27 @@
+---
+title: Media
+lang: zh-CN
+---
+
+# 媒体查询
+
+## CSS 媒体查询速查表
+
+
+| 媒体查询类型 / 特性         | 说明                                   | 典型用法示例                        | 是否支持 |
+|----------------------------|--------------------------------------|-----------------------------------|----------|
+| all                        | 适用于所有设备                         | `@media all { ... }`               | ❌       |
+| print                      | 打印设备                             | `@media print { ... }`             | ❌       |
+| screen                     | 屏幕显示设备                         | `@media screen { ... }`            | ❌       |
+| speech                     | 语音合成设备                         | `@media speech { ... }`            | ❌  |
+| width                      | 设备视口宽度                        | `@media (width: 768px) { ... }`   | ❌       |
+| min-width                  | 设备视口最小宽度                    | `@media (min-width: 768px) { ... }` | ❌     |
+| max-width                  | 设备视口最大宽度                    | `@media (max-width: 1024px) { ... }` | ❌     |
+| height                     | 设备视口高度                        | `@media (height: 600px) { ... }`  | ❌       |
+| orientation                | 设备方向（portrait / landscape）  | `@media (orientation: portrait) { ... }` | ❌   |
+| resolution                 | 设备分辨率                         | `@media (resolution: 2dppx) { ... }` | ❌     |
+| aspect-ratio               | 设备宽高比                         | `@media (aspect-ratio: 16/9) { ... }` | ❌     |
+| prefers-color-scheme       | 用户偏好的配色方案（light/dark）    | `@media (prefers-color-scheme: dark) { ... }` | ❌   |
+| pointer                    | 指针设备的精确度                   | `@media (pointer: fine) { ... }`  | ❌       |
+| hover                      | 设备是否支持悬停                   | `@media (hover: hover) { ... }`   | ❌       |
+| any-pointer                | 任意指针设备的精确度               | `@media (any-pointer: coarse) { ... }` | ❌    |

package/rules/.docs/zh-CN/css/pseudo-classes/overview.md

@@ -0,0 +1,79 @@
+---
+title: PseudoClasses
+lang: zh-CN
+---
+
+# 伪类
+
+## CSS 伪类速查表
+
+| 伪类名称             | 中文名称         | 说明                                                                 | 是否支持 |
+|----------------------|------------------|----------------------------------------------------------------------|-----------|
+| `:focus`             | 获取焦点         | 元素获得焦点时触发（如输入框）                                      | ✅        |
+| `:first-child`       | 第一个子元素     | 父元素下的第一个子元素                                               | ✅        |
+| `:last-child`        | 最后一个子元素   | 父元素下的最后一个子元素                                             | ✅        |
+| `:nth-child(n)`      | 第 n 个子元素    | 匹配父元素下第 n 个子元素                                            | ✅        |
+| `:empty`             | 空元素           | 没有子元素（不含文本/空格）的元素                                   | ✅        |
+| `:not(selector)`     | 非某类选择器     | 匹配不符合选择器的元素                                               | ✅        |
+| `:hover`             | 悬停状态         | 鼠标悬停在元素上时触发                                               | ❌        |
+| `:active`            | 激活状态         | 元素被激活（如按钮点击中）时触发                                    | ❌        |
+| `:visited`           | 已访问链接       | 表示用户访问过的链接                                                 | ❌        |
+| `:link`              | 未访问链接       | 表示尚未访问的链接                                                   | ❌        |
+| `:checked`           | 选中状态         | 复选框或单选框被选中时                                                | ❌        |
+| `:disabled`          | 禁用状态         | 表示元素被禁用                                                       | ❌        |
+| `:enabled`           | 启用状态         | 表示元素处于启用状态                                                 | ❌        |
+| `:nth-last-child(n)` | 倒数第 n 个子元素| 匹配父元素下倒数第 n 个子元素                                        | ❌        |
+| `:first-of-type`     | 类型中第一个     | 同类型元素中的第一个                                                 | ❌        |
+| `:last-of-type`      | 类型中最后一个   | 同类型元素中的最后一个                                               | ❌        |
+| `:nth-of-type(n)`    | 类型中第 n 个    | 同类型元素中的第 n 个                                                | ❌        |
+| `:root`              | 根元素           | HTML 文档中的 `<html>` 元素                                          | ❌        |
+| `:target`            | URL 目标元素     | 当前 URL 哈希值匹配的元素（如锚点跳转）                              | ❌        |
+| `:required`          | 必填字段         | 表单中设置了 `required` 属性的字段                                   | ❌        |
+| `:optional`          | 非必填字段       | 表单中未设置 `required` 的字段                                       | ❌        |
+| `:valid`             | 有效字段         | 表单字段通过验证                                                     | ❌        |
+| `:invalid`           | 无效字段         | 表单字段未通过验证                                                   | ❌        |
+| `:in-range`          | 范围内字段       | 输入值在设定范围内                                                   | ❌        |
+| `:out-of-range`      | 范围外字段       | 输入值超出设定范围                                                   | ❌        |
+| `:read-only`         | 只读元素         | 表示不可编辑的输入元素                                               | ❌        |
+| `:read-write`        | 可读写元素       | 表示可编辑的输入元素                                                 | ❌        |
+| `:is()`              | 多选择器匹配     | 接受多个选择器，匹配任一即可（CSS4 新增）                            | ❌ |
+| `:where()`           | 不影响权重匹配   | 类似 `:is()`，但不增加 specificity                                   | ❌ |
+| `:has()`             | 父级选择器       | 选择包含某些子元素的父元素（CSS4 特性）                              | ❌ |
+
+
+## 二、伪类指令`v-pseudo`
+
+`v-pseudo`是元素标签上用来控制是否启用对应的伪类的指令。
+
+### 1、自定义伪类指令`test`
+
+`v-pseudo:test="value"`
+
+```vue
+
+<div
+  v-pseudo:test='value'
+  class='div-v-pseudo-css'
+  :focusable='true'
+  :enableFocusBorder='true'
+  :focusScale='1'
+  @focus='onFocus'
+/>
+```
+
+### 2、编写伪类`test`
+
+```css
+.div-v-pseudo-css:test {
+  width: 384px;
+  height: 216px;
+  margin: 20px;
+  background: palevioletred;
+}
+```
+
+:::demo ## 完整示例
+
+css/pseudo-classes/v-pseudo
+
+:::

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

@@ -0,0 +1,90 @@
+---
+title: Selector
+lang: zh-CN
+---
+
+# 选择器
+
+## 一、CSS 选择器速查表
+
+### 基础选择器
+
+| 名称       | 选择器            | 描述                                 | 支持情况 |
+|----------------|-------------------|--------------------------------------|----------|
+| 通配选择器     | `*`               | 选择所有元素                         | ✅       |
+| 元素选择器     | `element`         | 选择所有指定元素（如 `div`, `p`）     | ✅       |
+| ID选择器       | `#id`             | 选择具有指定 `id` 的元素             | ✅       |
+| 类选择器       | `.class`          | 选择具有指定 `class` 的元素          | ✅       |
+| 组合类选择器   | `element.class`   | 特定类型且具有指定 class 的元素      | ✅       |
+| 分组选择器     | `element1, element2` | 选择多个元素（并集）               | ✅       |
+
+### 组合选择器
+
+| 名称         | 选择器    | 描述                             | 支持情况 |
+|------------------|-----------|----------------------------------|----------|
+| 后代选择器       | `A B`     | 选择 A 内所有 B                  | ✅       |
+| 子元素选择器     | `A > B`   | 选择 A 的直接子元素 B            | ✅       |
+| 相邻兄弟选择器   | `A + B`   | 选择紧跟在 A 后的 B              | ✅       |
+| 普通兄弟选择器   | `A ~ B`   | 选择 A 后的所有同级 B           | ✅       |
+
+### 属性选择器
+
+| 名称             | 选择器            | 描述                                            | 支持情况 |
+|----------------------|-------------------|-------------------------------------------------|----------|
+| 存在属性选择器       | `[attr]`          | 选择包含该属性的元素                           | ✅       |
+| 属性等于             | `[attr="value"]`  | 属性值等于指定值                               | ✅       |
+| 属性包含某词         | `[attr~="value"]` | 属性值中包含空格分隔的某值                    | ✅       |
+| 属性以值开头（连字符） | `[attr\|="value"]` | 属性是以 `value` 开头的连字符值              | ✅       |
+| 属性前缀匹配         | `[attr^="value"]` | 属性值以指定值开头                            | ✅       |
+| 属性后缀匹配         | `[attr$="value"]` | 属性值以指定值结尾                            | ✅       |
+| 属性包含值           | `[attr*="value"]` | 属性值中包含指定值                            | ✅       |
+
+### 伪类选择器
+
+| 名称           | 选择器              | 描述                                   | 支持情况 |
+|--------------------|---------------------|----------------------------------------|----------|
+| 鼠标悬停           | `:hover`            | 鼠标悬停时触发                         | ❌        |
+| 激活状态           | `:active`           | 鼠标点击激活状态                       | ❌        |
+| 获得焦点           | `:focus`            | 元素获得焦点                           | ✅       |
+| 第一个子元素       | `:first-child`      | 父元素的第一个子元素                   | ✅       |
+| 最后一个子元素     | `:last-child`       | 父元素的最后一个子元素                 | ✅       |
+| 第 n 个子元素      | `:nth-child(n)`     | 父元素中第 n 个子元素                  | ❌        |
+| 第 n 个类型子元素  | `:nth-of-type(n)`   | 类型匹配的第 n 个子元素                | ❌        |
+| 否定选择器         | `:not(selector)`    | 排除选择器                             | ✅       |
+| 勾选状态           | `:checked`          | 勾选的表单元素（checkbox, radio）     | ❌        |
+| 禁用 / 启用        | `:disabled` / `:enabled` | 控件禁用或启用状态                | ❌        |
+
+### 伪元素选择器
+
+| 名称         | 选择器           | 描述                                | 支持情况 |
+|------------------|------------------|-------------------------------------|----------|
+| 内容前插入       | `::before`       | 元素内容前插入                      | ❌        |
+| 内容后插入       | `::after`        | 元素内容后插入                      | ❌        |
+| 首行样式         | `::first-line`   | 段落首行样式                        | ❌        |
+| 首字母样式       | `::first-letter` | 首字母样式                          | ❌        |
+| 文本选中样式     | `::selection`    | 文本被选中时的样式                  | ❌  |
+
+
+## 二、CSS 选择器优先级速查表
+
+
+| 选择器示例             | 选择器类型     | 优先级（Specificity） | 描述                                           |
+|------------------------|----------------|------------------------|------------------------------------------------|
+| `#id`                  | ID             | 0,1,0,0                | ID 选择器，优先级高                             |
+| `.class`, `[attr]`, `:hover` | Class/属性/伪类 | 0,0,1,0                | 类选择器、属性选择器、伪类等                  |
+| `div`, `h1`, `p`, `:before` | 元素/伪元素    | 0,0,0,1                | 元素选择器和伪元素                             |
+| `*`                    | 通配选择器     | 0,0,0,0                | 权重最低                                       |
+| `#id .class`           | 混合选择器     | 0,1,1,0                | ID + 类选择器组合                              |
+| `div .class span`      | 后代组合       | 0,0,1,2                | 类选择器和两个元素选择器                      |
+| `ul li.active a:hover` | 混合复杂选择器 | 0,0,2,3                | 多个类和伪类、元素组合                         |
+| `style=""`             | 内联样式       | 1,0,0,0                | 写在 HTML 标签内的样式，优先级比选择器更高     |
+| `!important`           | 强制声明       | -                      | 不属于 specificity，但会覆盖所有非重要规则    |
+
+
+简单规则说明
+
+*	优先级格式：a,b,c,d
+*	a：是否为内联样式（只有 style="" 是）
+*	b：ID 选择器数量
+*	c：类、属性选择器、伪类数量
+*	d：元素、伪元素数量

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

@@ -0,0 +1,28 @@
+---
+title: Size
+lang: zh-CN
+---
+
+# 尺寸单位
+
+## CSS 尺寸速查表
+
+| 单位    | 中文名称         | 类型       | 说明                                                                 | 是否支持 |
+|---------|------------------|------------|----------------------------------------------------------------------|-----------|
+| `px`    | 像素             | 绝对单位   | 屏幕像素，最常用的单位，1px = 一个逻辑像素点                        | ✅        |
+| `%`     | 百分比           | 相对单位   | 相对父元素的尺寸，适用于宽高、字体等                                 | ✅        |
+| `vw`    | 视口宽度单位     | 相对单位   | 1vw = 1% 的视口宽度                                                   | ✅        |
+| `vh`    | 视口高度单位     | 相对单位   | 1vh = 1% 的视口高度                                                   | ✅        |
+| `em`    | 相对当前字体     | 相对单位   | 相对当前元素的 `font-size`（默认1em=16px）                                           | ✅        |
+| `rem`   | 相对根字体       | 相对单位   | 相对 `<html>` 的 `font-size`，常用于响应式布局  （默认1em=16px）       | ✅        |
+| `vmin`  | 视口最小边单位   | 相对单位   | 1vmin = 视口宽高较小者的 1%                                           | ❌        |
+| `vmax`  | 视口最大边单位   | 相对单位   | 1vmax = 视口宽高较大者的 1%                                           | ❌        |
+| `ex`    | 小写字母 x 高度  | 相对单位   | 相对当前字体中 `x` 字符的高度（较少用）                              | ❌        |
+| `ch`    | 字符宽度         | 相对单位   | 相对于数字 `0` 的宽度，等宽字体下效果明显                            | ❌        |
+| `lh`    | 行高单位         | 相对单位   | 相对元素自身的 `line-height`                                          | ❌        |
+| `rlh`   | 根行高单位       | 相对单位   | 相对根元素的 `line-height`，CSS4 新增，兼容性有限                    | ❌ |
+| `pt`    | 点               | 绝对单位   | 1pt = 1/72 英寸，常用于打印                                          | ❌        |
+| `pc`    | 派卡             | 绝对单位   | 1pc = 12pt，印刷行业使用                                              | ❌        |
+| `in`    | 英寸             | 绝对单位   | 1in = 2.54cm = 96px（在标准屏幕上）                                   | ❌        |
+| `cm`    | 厘米             | 绝对单位   | 1cm = 10mm                                                            | ❌        |
+| `mm`    | 毫米             | 绝对单位   | 1mm = 1/10cm                                                          | ❌        |

package/rules/.docs/zh-CN/css/specificity-inheritance/overview.md

@@ -0,0 +1,21 @@
+---
+title: 优先级和继承
+lang: zh-CN
+---
+
+# 优先级和继承
+
+## CSS 优先级和继承速查表
+
+| 规则类型           | 说明                                             | 示例                      | 是否支持 |
+|--------------------|--------------------------------------------------|---------------------------|----------|
+| 内联样式           | 直接写在元素上的 style 属性，优先级最高          | `<div style="color:red">` | ✅       |
+| ID 选择器           | 使用 ID 选择器，优先级高                          | `#header {}`              | ✅       |
+| 类选择器、属性选择器、伪类 | 优先级次于 ID 选择器                           | `.btn {}`, `[type="text"] {}`, `:hover {}` | ✅       |
+| 元素选择器、伪元素  | 优先级最低                                       | `div {}`, `p::before {}`  | ✅       |
+| !important          | 覆盖所有优先级，即使内联样式                      | `color: red !important;`  | ✅       |
+| 继承               | 某些属性会从父元素自动继承                        | `color`, `font-family` 等 | ❌       |
+| 继承失败属性        | 大多数盒模型属性不继承，如 margin、padding        | `margin`, `padding`       | ❌       |
+| 样式来源顺序        | 后定义的样式会覆盖先定义的样式                      | 两个同级样式，后一个生效  | ✅       |
+| !important 冲突     | 当两个规则都使用 !important 时，优先级高的选择器生效 | `#id !important` > `.class !important` | ✅       |
+

package/rules/.docs/zh-CN/css/style/font-family.md

@@ -3,8 +3,17 @@ title: FontFamily
 lang: zh-CN
 ---
 
-# fontFamily
+# fontFamily（不支持）
 
-| Name               | Description      | Type                         | Default |
-|--------------------|------------------|------------------------------| ------- |
-| fontFamily        |   字体名，如 `PingFangSC-Regular`        | ^[string]  |- |
+| 字体名           | 说明                 | 类型       | 是否系统默认 |
+|------------------|----------------------|------------|--------------|
+| Arial            | 无衬线，常用英文正文字体 | sans-serif | ❌            |
+| Helvetica        | 苹果系统默认 sans    | sans-serif | ❌     |
+| "Segoe UI"       | Windows UI 字体       | sans-serif | ❌   |
+| Roboto           | Android 系统字体     | sans-serif | ❌   |
+| "PingFang SC"    | 苹果中文系统字体     | sans-serif | ❌  |
+| "Microsoft YaHei"| Windows 中文默认字体 | sans-serif | ❌    |
+| SimSun           | 宋体，老版中文正文字体 | serif      | ❌    |
+| "Times New Roman"| 英文衬线体           | serif      | ❌           |
+| Courier New      | 等宽字体（代码用）    | monospace  | ❌            |
+| monospace        | 系统等宽字体         | monospace  | ❌            |

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

@@ -0,0 +1,23 @@
+---
+title: transform
+lang: zh-CN
+---
+
+# Transform
+
+## CSS Transform 函数速查表
+
+| 函数名              | 描述                            | 示例                                   | 是否支持 |
+|---------------------|---------------------------------|----------------------------------------|----------|
+| `translate(x, y)`   | 沿 X 和 Y 轴平移元素             | `transform: translate(50px, 20px);`    | ✅       |
+| `translateX(x)`     | 沿 X 轴平移                     | `transform: translateX(50px);`         | ✅       |
+| `translateY(y)`     | 沿 Y 轴平移                     | `transform: translateY(20px);`         | ✅       |
+| `scale(x, y)`       | 沿 X 和 Y 轴缩放                | `transform: scale(1.5, 2);`            | ✅       |
+| `scaleX(x)`         | 沿 X 轴缩放                     | `transform: scaleX(2);`                | ✅       |
+| `scaleY(y)`         | 沿 Y 轴缩放                     | `transform: scaleY(0.5);`              | ✅       |
+| `rotate(angle)`     | 旋转元素（单位为 deg 或 rad）   | `transform: rotate(45deg);`            | ✅       |
+| `skew(x-angle, y)`  | 倾斜元素                        | `transform: skew(30deg, 20deg);`       | ❌       |
+| `skewX(angle)`      | 沿 X 轴倾斜                    | `transform: skewX(30deg);`             | ❌       |
+| `skewY(angle)`      | 沿 Y 轴倾斜                    | `transform: skewY(20deg);`             | ❌       |
+| `matrix(a, b, c, d, e, f)` | 以 2D 矩阵形式定义变换     | `transform: matrix(1, 0, 0, 1, 30, 20);` | ❌     |
+| `perspective(n)`    | 设置透视距离（3D 变换）         | `transform: perspective(500px);`       | ❌       |

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

@@ -0,0 +1,21 @@
+---
+title: Variable
+lang: zh-CN
+---
+
+# 变量
+
+## CSS 变量速查表
+
+| 名称           | 示例                                                                 | 描述                                  | 支持情况 |
+|----------------|----------------------------------------------------------------------|---------------------------------------|-----------|
+| 定义变量       | `--main-color: #3498db;`                                             | 在某个选择器（如 `:root`）中定义变量 | ✅        |
+| 使用变量       | `color: var(--main-color);`                                          | 使用 `var()` 调用已定义的变量         | ✅        |
+| 作用域         | `:root { --a: 1px } .box { var(--a) }`                               | 变量在定义它的选择器及子元素中有效   | ❌        |
+| 继承性         | 父元素设置 `--x: 10px`，子元素自动继承                               | CSS 变量支持继承                      | ❌        |
+| fallback 默认值| `var(--not-exist, red)`                                              | 若变量不存在，使用备用值              | ❌        |
+| JavaScript 读取| `element.style.getPropertyValue('--main-color')`                    | 用 JS 获取变量值                      | ❌        |
+| JavaScript 设置| `element.style.setProperty('--main-color', '#000')`                 | 用 JS 设置变量值                      | ❌        |
+| 嵌套函数中使用 | `padding: calc(var(--space) * 2);`                                   | 可配合 `calc()` 使用                  | ✅        |
+| 响应式应用     | 可根据主题类修改 `--变量`，实现样式切换                             | 支持响应式主题                        | ✅        |
+| 动画中使用     | `@keyframes { from { color: var(--start) } to { color: var(--end) } }` | 动画属性中也可使用变量               | ❌        |

package/rules/.docs/zh-CN/guide/ai/ai-assistant.md

@@ -0,0 +1,74 @@
+# @quicktvui/ai 开发者使用指南
+
+本指南将帮助你利用 AI 助手高效地开发 QuickTVUI 应用。
+
+## 1. 快速上手
+
+### 第一步：安装规范包
+
+在你的 QuickTVUI 项目（建议使用 `quicktvui-template` 创建）中安装：
+
+```bash
+npm install @quicktvui/ai --save-dev
+```
+
+### 第二步：配置并开启推荐模型
+
+为了达到最佳辅助效果，请在你的 AI 工具中优先选择以下模型：
+
+- **Claude**
+- **Codex**
+- **Gemini**
+
+AI 助手将自动读取项目根目录下的 `.cursorrules`, `GEMINI.md`, `CLAUDE.md` 等文件中的指令。
+
+## 2. 常见场景 AI 辅助示例
+
+### 场景 A：创建新页面
+
+**输入：** `创建一个页面 首页`
+**AI 将生成：** 包含 `onESCreate`, `onBackPressed`, `:autofocus="true"` 以及正确 CSS（kebab-case + px 单位）的代码。
+
+### 场景 B：API 查询
+
+**输入：** “qt-image 支持哪些属性？”
+**AI 将检索：** 它会查阅 `node_modules/@quicktvui/ai/rules/.docs/component/image.md` 并返回：`src`, `enableFade`,
+`resizeMode` 等原生支持的属性。
+
+### 场景 C：样式纠错
+
+**输入：** “这段样式哪里不对？ `.box { margin: 10px; width: 100%; }`”
+**AI 将纠错：** “在 QuickTVUI 中不能使用 `margin` 简写，必须拆写为 `margin-top` 等；且不能使用 `100%`，必须使用具体的 `px`
+值。”
+
+## 3. 开发检查清单 (Checklist)
+
+当 AI 为你生成代码后，请务必核对以下关键点：
+
+- **标签检查**：是否误用了 `p`, `img`, `h1`？（必须是 `qt-text`, `qt-image`）
+- **生命周期**：入口函数是否叫 `onESCreate(params)`？
+- **返回键**：处理函数是否叫 `onBackPressed()` 且已 `return`？
+- **焦点系统**：页面是否至少有一个元素设置了 `:autofocus="true"`？
+- **样式单位**：是否所有数值都带 `px`？是否误用了 `auto` 或 `%`？
+- **属性命名**：`<template>` 标签属性用 `camelCase`，`<style>` 样式名用 `kebab-case`。
+
+## 4. 如何使用 AI 反馈框架问题 (Bug Reporting)
+
+如果你在开发中发现框架可能存在 Bug（例如 AI 生成的代码符合规范但仍运行报错），你可以直接通过 AI 进行上报：
+
+1. **触发上报**：你可以直接对 AI 说：“我想上报一个 Bug”、“这段代码运行报错，帮我反馈给官方”。
+2. **AI 自动诊断**：
+
+- AI 会自动检测你的运行环境和报错日志。
+- 它会尝试编写一个**脱敏后的最小可复现 Demo**。
+
+3. **寻求授权**：AI 会询问你：“检测到该问题可能属于框架缺陷，是否允许我协助将其上报到 GitHub 官方仓库？”
+4. **快速提交**：获得授权后，AI 会自动尝试在你的电脑上**打开浏览器并预填充 GitHub Issue 内容**，你只需核对后点击提交即可。
+
+## 5. 故障排除
+
+如果 AI 生成了错误的代码（例如使用了 Web 标签）：
+
+1. **重新引用规则**：告诉它：“请参考项目根目录下的 `.cursorrules` (或 `GEMINI.md`) 重新检查规范。”
+2. **强制读取文档**：告诉它：“请读取 `node_modules/@quicktvui/ai/rules/.docs/` 下的相关组件文档后再回答。”
+

package/rules/.docs/zh-CN/guide/faq/layout-style-faq.md

@@ -11,13 +11,13 @@ lang: zh-CN
 
 ## 二、仅支持部分 css 样式
 
-* [点击查看支持的css列表](/zh-CN/css/overview)
-* [点击查看不支持的css列表](/zh-CN/guide/layout/style#只支持部分CSS样式)
+[点击查看 CSS 速查表](/zh-CN/css/cheat-sheet)
 
 ## 三、背景色
 
+* [点击查看background](/zh-CN/css/layout/background)
+
 * 支持`background-color: red;`
-* 不支持`background: red;`
 * 建议非`qt`组件，例如：`div`、`span`标签，样式上添加`background-color: transparent;`
 
 ## 四、背景图

package/rules/.docs/zh-CN/guide/key/back.md

@@ -13,6 +13,8 @@ lang: zh-CN
 
 ## 一、基础用法
 
+### 1、普通函数用法
+
 在`setup`中编写 `onBackPressed`方法，并在`return`中返回此方法。
 
 ```ts
@@ -32,6 +34,35 @@ module/key/es-back
 
 :::
 
+### 2、Hooks 函数用法
+::: warning 注意
+
+***@extscreen/es3-core" ≥ 1.2.6***
+
+***@extscreen/es3-router ≥ 1.2.3***
+
+***@extscreen/es3-vue ≥ 2.0.11***
+
+***@extscreen/es3-vue-style-parser ≥ 2.0.0***
+
+***@extscreen/es3-vue-css-loader ≥ 2.0.0***
+
+:::
+```ts
+import { onBackPressed } from "@extscreen/es3-vue";
+
+onBackPressed(() => {
+  //
+});
+
+```
+
+:::demo
+
+module/key/es-back-hooks
+
+:::
+
 ## 二、拦截返回键
 
 `onBackPressed`方法中编写业务逻辑