@quicktvui/ai 1.0.0

package/rules/.docs/zh-CN/component/list-view.md

@@ -0,0 +1,233 @@
+---
+title: ListView
+lang: zh-CN
+---
+
+# ListView
+
+`qt-list-view` 是同 `ul` 一样注册的用于多功能的列表组件，增加数据代理，常用于单行多列的内容排版。支持横向纵向排列滚动，支持数据分页。
+
+特点：初始化组件返回数据代理值，直接操作返回值更新ui视图，减少冗余api，降低开发成本。
+
+
+::: warning 注意：
+
+* 最低支持SDK版本`2.1`。
+* 当前文档demo中默认item样式使用 qt-poster，在构建数据中可查看其使用方式。也可自定义item。
+* 自定义item样式中文本标签仅支持 text-view。
+:::
+
+
+:::demo ## 基础用法
+
+component/list-view/basic
+
+:::
+<img src="/component/list-view/list_view_basic.gif" />
+
+## 分页效果
+
+<img src="/component/list-view/list_view_page.gif" />
+
+
+::: warning 注意：
+* `listenBoundEvent` 属性必须设置为true `@item-bind` 方法必须添加 可以不做任何处理 `openPage` 属性值为true
+* `qt-list-view` 嵌套时，分页仅支持最外层
+* `loading` `type` 必须设置为1002
+* `stopPage()` 分页结束后调用该方法停止分页
+*  分页结束后重新开启分页可v-if刷新组件
+:::
+
+## 设置滑动方向
+
+<img src="/component/list-view/list_view_orientation.gif" />
+
+
+::: warning 注意：
+* horizontal属性：切换列表为横向滑动（注意：不可动态改变此属性，纵向滑动时不需要配置此属性）
+* list-view中每个item样式的margin无效，需要数据中decoration的值来设置外边距
+:::
+
+
+## 数据双向绑定用法
+
+:::demo ## 基础用法
+
+component/list-view/ref-basic
+
+:::
+
+:::demo ## 使用分页加载
+
+component/list-view/ref-page
+
+:::
+
+:::demo ## 增删改查操作示例
+
+component/list-view/ref-operations
+
+:::
+
+
+::: tip Q&A
+* `horizontal`、`advancedFocusSearchSpan`、`padding`属性不可动态改变，这三个在list-view初始化时就确定
+* 要实现`onItemClick`和`onItemFocus`回调，需要在item中加上属性`eventClick`和`eventFocus`，这样才能让item响应点击和焦点事件
+* `:scrollThresholdHorizontal`和`:scrollThresholdVertical`属性的生效条件是`:makeChildVisibleType='center'`
+:::
+
+## API
+
+### Attributes
+
+| Name                               | Description                                                                                                  | Type                                                                                                                             | Default                        |
+|------------------------------------|--------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------|--------------------------------|
+| loadMore                           | 加载更多                                                                                                         | ^[Function]`(pageNo: number) => void`                                                                                            | -                              |
+| openPage                           | 是否分页加载数据                                                                                                     | ^[boolean]                                                                                                                       | false                          |
+| preloadNo                          | 预加载的页码数                                                                                                      | ^[number]                                                                                                                        | 0                              |
+| defaultFocus                       | 默认焦点                                                                                                         | ^[number]                                                                                                                        | -                              |
+| loadingDecoration                  | 加载组件的装饰                                                                                                      | ^[object]`{ up: string, left: string, right: string, bottom: string, }`                                                          | `{bottom:18,right:30,left:30}` |
+| focusable                          | 是否可以获得焦点                                                                                                     | ^[boolean]                                                                                                                       | false                          |
+| clipChildren                       | 裁剪子布局                                                                                                        | ^[boolean]                                                                                                                       | false                          |
+| clipPadding                        | 从padding区域向外裁剪                                                                                               | ^[boolean]                                                                                                                       | false                          |
+| nextFocusDownSID ^(2.7)            | 向下时指定下一个焦点sid                                                                                                | ^[string]                                                                                                                        | -                              |
+| nextFocusUpSID ^(2.7)              | 向上时指定下一个焦点sid                                                                                                | ^[string]                                                                                                                        | -                              |
+| nextFocusLeftSID ^(2.7)            | 向左时指定下一个焦点sid                                                                                                | ^[string]                                                                                                                        | -                              |
+| nextFocusRightSID ^(2.7)           | 向右时指定下一个焦点sid                                                                                                | ^[string]                                                                                                                        | -                              |
+| nextFocusSID ^(2.7)                | 指定各方向下一个焦点sid                                                                                                | ^[object]`'{left : string, right: string, up: string, down: string}'`                                                            | -                              |
+| sid ^(2.7)                         | 给一个元素标记一个`string id`，可随意赋值，需确保唯一                                                                             | ^[string]                                                                                                                        | -                              |
+| fadingEdgeLength ^(2.5)            | 淡出效果长度                                                                                                       | ^[number]                                                                                                                        | 0                              |
+| horizontalFadingEdgeEnabled ^(2.5) | 开启横向淡出效果                                                                                                     | ^[boolean]                                                                                                                       | false                          |
+| verticalFadingEdgeEnabled ^(2.5)   | 开启纵向淡出效果                                                                                                     | ^[boolean]                                                                                                                       | false                          |
+| autofocus ^(2.7)                   | 组件内根据状态（`初始化、可见性改变、尺寸改变`)变化自动获焦,focusable为true时自己获焦                                                          | ^[boolean]                                                                                                                       | false                          |
+| renderToHardwareTextureAndroid     | 设置`layerType`为`LAYER_TYPE_HARDWARE`                                                                          | ^[boolean]                                                                                                                       | false                          |
+| viewLayerType                      | 设置`layerType`                                                                                                | ^[enum]`'hardware' \| 'soft' \| 'none'`                                                                                          | -                              |
+| clipBounds                         | 设置裁剪区域                                                                                                       | ^[object]`'{left : number, right: number, top: number, bottom: number}'`                                                         | -                              |
+| descendantFocusability             | 设置子孙组件的可聚焦性策略                                                                                                | ^[enum]`'0：先于子孙' \| '1：子孙之后' \| '2：阻止所有'`                                                                                        | -                              |
+| name                               | 指定元素的`name`                                                                                                  | ^[string]                                                                                                                        | -                              |
+| nextFocusName                      | 指定各方向下一个焦点元素的`name`                                                                                          | ^[object]`'{left : string, right: string, up: string, down: string}'`                                                            | -                              |
+| visible                            | 是否可见                                                                                                         | ^[boolean]                                                                                                                       | false                          |
+| visibility                         | 可见性                                                                                                          | ^[enum]`'visible' \| 'invisible' \| 'gone'`                                                                                      | visible                        |
+| size                               | 设置元素大小                                                                                                       | ^[array]`[width : number,height : number]`                                                                                       | -                              |
+| layout                             | 设置元素位置及大小                                                                                                    | ^[array]`[x : number, y : number, width : number,height : number]`                                                               | -                              |
+| selectChildPosition                | 设置选中子元素位置                                                                                                    | ^[number]                                                                                                                        | -1                             |
+| enableSelectOnFocus                | 开启当焦点时自动设置选中子元素位置                                                                                            | ^[number]                                                                                                                        | -1                             |
+| focusMemory                        | 开启子元素焦点记忆                                                                                                    | ^[boolean]                                                                                                                       | false                          |
+| useDiff                            | 开启时更新diff算法，提高性能，解决多次刷新问题 ^(beta)                                                                            | ^[boolean]                                                                                                                       | false                          |
+| initPosition                       | 列表初始化时一些滚动位置、初始化焦点等设置 ^(deprecated) 使用`autofocus、autoscroll替代`                                               | ^[object]`{focusPosition : number(默认焦点位置), scrollToPosition: number(默认定位位置), scrollOffset: number(滚动offset), force: true(强制刷新)}` | -                              |
+| listenBoundEvent                   | 开启监听`item-focused`等事件                                                                                        | ^[boolean]                                                                                                                       | false                          |
+| enableItemAnimator                 | 开启item加载动画                                                                                                   | ^[boolean]                                                                                                                       | false                          |
+| disableScrollOnFirstScreen         | 首屏时焦点切换不滚动 ^(beta)                                                                                           | ^[boolean]                                                                                                                       | false                          |
+| skipFocusOnPause                   | `pause`状态时不可获焦                                                                                               | ^[boolean]                                                                                                                       | false                          |
+| taskPaused                         | 将组件`活动`（如创建item等,`postDelay`的组件）暂停                                                                           | ^[boolean]                                                                                                                       | false                          |
+| pauseTaskOnHide                    | 组件不可见时`pause`                                                                                                | ^[boolean]                                                                                                                       | false                          |
+| resetOnDetach                      | 开启时自动在离开屏幕时重置状态、滚动到头部                                                                                        | ^[boolean]                                                                                                                       | false                          |
+| touchScrollEnabled                 | 开启触屏时滚动                                                                                                      | ^[boolean]                                                                                                                       | true                           |
+| firstFocusChild ^(2.87)            | 指定从各方向获焦时，首个获焦对象，由`child`的`position`或`sid`指定                                                                 | ^[object]`{left : number \| string,right : number \| string,up : number \| string,down : number \| string}`                      | -                              |
+| enableFirstFocusAtStart ^(2.87)    | 开启首个获焦对象为头部`child`                                                                                           | ^[boolean]                                                                                                                       | false                          |
+| enablePlaceholder ^(2.5)           | 加载时是否先展示`placeholder`                                                                                        | ^[boolean]                                                                                                                       | false                          |
+| checkScrollOffsetOnStateChanged    | 是否在滚动事件时触发事件监听                                                                                               | ^[boolean]                                                                                                                       | false                          |
+| onScrollEnable                     | 开启`scroll`事件监听                                                                                               | ^[boolean]                                                                                                                       | true                           |
+| makeChildVisibleType               | 列表随焦点变化滚动方式                                                                                                  | ^[enum]`center \| normal`                                                                                                        | center                         |
+| makeChildVisibleClampBackward      | 列表向后滚动时的留白^(beta)                                                                                            | ^[number]                                                                                                                        | 0                              |
+| makeChildVisibleClampForward       | 列表向后滚动时的留白^(beta)                                                                                            | ^[number]                                                                                                                        | 0                              |
+| scrollThresholdHorizontal          | 横向焦点触发滚动的阈值                                                                                                  | ^[number]                                                                                                                        | 0                              |
+| scrollThresholdVertical            | 纵向焦点触发滚动的阈值                                                                                                  | ^[number]                                                                                                                        | 0                              |
+| cachePool                          | `item`缓存池，可以设置缓存池`name`,指定不同`type`类型`item`的数量，以优化性能                                                          | ^[object]`{name : string,size : object({type : number...}) }`                                                                    | -                              |
+| cachePoolName                      | `cachePool`简化版，只可指定缓存池`name`,不同实例，相同`name`使用同一缓存池                                                            | ^[string]                                                                                                                        | -                              |
+| selectChildPosition                | 选中子item位置                                                                                                    | ^[number]                                                                                                                        | -1                             |
+| shakePreCheckNumber                | 到底抖动提示提前位置                                                                                                   | ^[number]                                                                                                                        | 2                              |
+| placeholderFocusScale ^(2.7)      | `placeholder`焦点放大倍数                                                                                          | ^[number]                                                                                                                        | 1.1                            |
+| placeholderColorString ^(2.7)    | `placeholder`背景颜色(`#RRGGBBAA`)                                                                               | ^[string]                                                                                                                        | #FFFFFF1A                      |
+| placeholderColor ^(2.7)         | `placeholder`背景颜色                                                                                            | ^[number]                                                                                                                        | (255,255,255,0.1)              |
+| placeholderBorderRadius ^(2.7)  | `placeholder`圆角                                                                                              | ^[number]                                                                                                                        | 8                              |
+| endShakeEnabled                    | 到底反馈                                                                                                         | ^[boolean]                                                                                                                       | true                           |
+| listenFocusSearchOnFail            | 监听内部寻焦失败                                                                                                     | ^[boolean]                                                                                                                       | false                          |
+| enableStatesOnFocus                | 子item获焦时自动改变`自定义`名称的状态                                                                                       | ^[array]`[selected,customxx...]`                                                                                                 | false                          |
+| placeholderPostDelay ^(2.5)       | `placeholder`变为真实内容的delay时间                                                                                  | ^[number]                                                                                                                        | 100ms                          |
+| enableKeepFocus                    | 保持焦点在内部                                                                                                      | ^[boolean]                                                                                                                       | false                          |
+| scrollFactor                       | 滚动速度参数                                                                                                       | ^[number]                                                                                                                        | 1                              |
+| autofocusPosition ^(2.7)          | 自动焦点位置                                                                                                       | ^[number]                                                                                                                        | -1                             |
+| autofocusSID ^(2.8)          | 自动焦点位置                                                                                                       | ^[string]                                                                                                                     |                             |
+| autoscroll ^(2.7)                 | 自动滚动参数`[position,offset]`                                                                                    | ^[array]                                                                                                                         | -                              |
+| autoSelectPosition ^(2.7)         | 自动选择位置^(beta)                                                                                                | ^[number]                                                                                                                        | -1                             |
+| infiniteMode ^(2.87)              | 循环模式                                                                                                         | ^[boolean]                                                                                                                       | false                          |
+| infiniteParams ^(2.87)            | 循环模式参数 | ^[object]`{autoscroll:array,scrollOffset:number, itemSize : number,selectPosition:number,minChildScale:number}`    -                                                                                                                    | -                              |
+| listData ^(beta) | 双向绑定数据集 | ^[Array] | `[]` |
+
+### Events
+
+| Name                    | Description   | Type                                         |
+| ------------------------| ------------- | -------------------------------------------- |
+| item-click              | 条目点击事件    | ^[Function]`(event: QTListViewEvent) => void` |
+| scroll                  | 滚动事件       | ^[Function]`(event: QTListViewEvent) => void` |
+| item-focused            | 条目焦点事件    | ^[Function]`(event: QTListViewEvent) => void` |
+| item-attached           | 条目连接事件    | ^[Function]`(event: QTListViewEvent) => void` |
+| item-detached           | 条目断开连接事件 | ^[Function]`(event: QTListViewEvent) => void` |
+| item-bind               | 条目绑定事件    | ^[Function]`(event: QTListViewEvent) => void` |
+| item-unbind             | 条目取消绑定事件 | ^[Function]`(event: QTListViewEvent) => void` |
+| load-more               | 加载更多数据事件 | ^[Function]`(event: QTListViewEvent) => void` |
+| scroll-state-changed    | 滚动状态变化事件 | ^[Function]`(event: QTListViewEvent) => void` |
+| focus-search-failed     | 寻找焦点失败事件 | ^[Function]`(event: QTListViewEvent) => void` |
+| scrollYGreaterReference | Y轴滚动增加事件  | ^[Function]`(event: QTListViewEvent) => void` |
+| scrollYLesserReference  | Y轴滚动减少事件  | ^[Function]`(event: QTListViewEvent) => void` |
+
+### Slots
+
+| Name        | Description             |
+| ----------- | ----------------------- |
+| default     | 自定义默认内容             |
+
+### Exposes
+
+| Method                       | Description                    | Type                                                                          |
+|------------------------------|--------------------------------|-------------------------------------------------------------------------------|
+| init                         | 初始化                           | ^[Function]`(target: Array<QTListViewItem>, isInit?: boolean) => void`   |
+| stopPage                     | 停止分页                         | ^[Function]`() => void`   |
+| setItemFocused               | 设置条目焦点                      | ^[Function]`(position: number) => void`   |
+| scrollToFocused              | 滚动到焦点位置                    | ^[Function]`(position: number) => void`   |
+| setItemSelected              | 选中条目                         | ^[Function]`(position: number, requestFocus: boolean) => void`   |
+| scrollToSelected             | 滚动到选中位置                    | ^[Function]`(position: number, requestFocus: boolean) => void`   |
+| deleteItem                   | 删除条目                         | ^[Function]`(position: number, count: number) => void`   |
+| updateItemList               | 更新条目列表                      | ^[Function]`(position: number, count: number, data: Array<QTListViewItem>) => void`   |
+| scrollToIndex                             | 滚动到指定位置                    | ^[Function]`(x: number, y: number, animated?: boolean, duration?: number, offset?: number) => void`   |
+| startScroll                               | 开始滚动                         | ^[Function]`(position: QTListInitPosition) => void`   |
+| setSelectChildPosition                    | 选中指定位置的条目                 | ^[Function]`(position: number, changeTargetFocusChild?: boolean) => void`   |
+| scrollToPositionWithOffset                | 滚动到指定的位置                   | ^[Function]`(position: number, offset: number, animated: boolean) => void`   |
+| scrollToPositionWithOffsetInfiniteMode    | 滚动到指定的位置                   | ^[Function]`(position: number, offset: number, animated: boolean) => void`   |
+| scrollToPosition                          | 滚动到指定的位置                   | ^[Function]`(position: number, offset?: number) => void`   |
+| refreshListData                           | 刷新列表数据                      | ^[Function]`() => void`   |
+| updateItemTraverse                        | 更新条目                         | ^[Function]`(position: number, data?: QTListViewItem, traverse?: boolean) => void`   |
+| requestItemLayout                         | 条目刷新布局                      | ^[Function]`(position: number) => void`   |
+| updateItemRange                           | 更新条目                         | ^[Function]`(position: number, count: number, itemList: Array<QTListViewItem>) => void`   |
+| insertItemRange                           | 插入条目                         | ^[Function]`(position: number, itemList: Array<QTListViewItem>) => void`   |
+| updateItemMatched                         | 更新条目                         | ^[Function]`(params: QTNativeParams, data: QTListViewItem) => void`   |
+| updateItemMatchedByKey                    | 更新条目                         | ^[Function]`(idKey: string, params: QTNativeParams, data: QTListViewItem) => void`   |
+| deleteItemRange                           | 删除条目                         | ^[Function]`(position: number, count: number) => void`   |
+| setListData                               | 设置列表数据                      | ^[Function]`(itemList: Array<QTListViewItem>) => void`   |
+| setListDataWithParams                     | 设置列表数据                      | ^[Function]`(itemList: Array<QTListViewItem>, autoChangeVisible: boolean, useDiff: boolean) => void`   |
+| addListData                               | 添加数据                         | ^[Function]`(itemList: Array<QTListViewItem>) => void`   |
+| addListDataWithParams                     | 添加数据                         | ^[Function]`(itemList: Array<QTListViewItem>, deleteCount: number) => void`   |
+| destroy                                   | 销毁                            | ^[Function]`() => void`   |
+| recycle                                   | 回收                            | ^[Function]`() => void`   |
+| scrollToTop                               | 滚动到顶部                       | ^[Function]`() => void`   |
+| scrollToFocus                             | 滚动到焦点                       | ^[Function]`(position: number, scrollOffset: number, delay: number, target: string) => void`   |
+| prepareForRecycle                         | 准备回收                         | ^[Function]`() => void`   |
+| setDisplay                                | 是否显示                         | ^[Function]`(display: boolean) => void`   |
+| changeDisplayState                        | 改变显示状态                      | ^[Function]`(display: boolean, autoDataState: boolean) => void`   |
+| notifySaveInstance                        | 请求保存状态                      | ^[Function]`() => void`   |
+| updateItemProps                           | 更新条目属性                      | ^[Function]`(name: string, position: number, dataToUpdate: QTNativeMap, updateView: boolean) => void`   |
+| updateItem                                | 更新条目                         | ^[Function]`(position: number, data: QTListViewItem) => void`   |
+| dispatchItemFunction                      | 执行条目方法                      | ^[Function]`(params: QTNativeArray) => void`   |
+| clearPostTask                             | 清空任务                         | ^[Function]`() => void`   |
+| clearPostTaskByCate                       | 清空任务                         | ^[Function]`(data: Array<number>) => void`   |
+| clearData                                 | 清空数据                         | ^[Function]`() => void`   |
+| pausePostTask                             | 暂停任务                         | ^[Function]`() => void`   |
+| resumePostTask                            | 恢复任务                         | ^[Function]`() => void`   |
+| requestLayoutManual                       | 手动刷新布局                      | ^[Function]`() => void`   |
+| setSpanCount                              | 设置格子数量                      | ^[Function]`(spanCount: number) => void`   |
+| searchReplaceItem                         | 请求替换条目                      | ^[Function]`(id: string, item: QTListViewItem) => void`   |
+| setCustomStateEnableOnFocus               | 设置自定义状态在焦点时是否可用        | ^[Function]`(id: string, params: Array<Array<string>>) => void`   |
+| setItemCustomState                        | 设置条目自定义状态                  | ^[Function]`(position: number, state: string, on: boolean) => void`   |
+| dispatchItemFunctionWithPromise           | 执行条目的方法                     | ^[Function]`(position: number, targetName: string, functionTargetName: string, params: Array<QTNativeParams>) => Promise<QTNativeParams>`   |
+| getScrollOffset                           | 获取滚动的偏移量                    | ^[Function]`() => Promise<QTPosition>`   |

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

@@ -0,0 +1,22 @@
+---
+title: Loading
+lang: zh-CN
+---
+
+# Loading
+
+:::demo ## 基础用法
+
+component/loading/basic
+
+:::
+
+<img src="/component/loading/loading_component.gif" />
+
+## API
+
+### Attributes
+
+| Name                 | Description       | Type       | Default |
+| -------------------- | ----------------- | -----------| ------- |
+| color                | 颜色               | ^[string]  | —       |

package/rules/.docs/zh-CN/component/lottie/assets.md

@@ -0,0 +1,19 @@
+---
+title: Lottie
+lang: zh-CN
+---
+
+# 本地资源
+
+::: warning 注意：d05079474695b25d2078.json 文件的路径问题
+
+* 示例中代码路径： `d05079474695b25d2078.json` 文件路径为 `ProjectPath/src/assets/d05079474695b25d2078.json`。
+* 打包 rpk 路径为： `/android/assets/d05079474695b25d2078.json`。
+* 运行时存储路径： AppRuntimePath + `/assets/d05079474695b25d2078.json`，使用`es.getESAppRuntimePath()` 获取运行时路径。
+  :::
+
+:::demo ## 完整示例
+
+component/lottie/local
+
+:::

package/rules/.docs/zh-CN/component/lottie/basic.md

@@ -0,0 +1,51 @@
+---
+title: Lottie
+lang: zh-CN
+---
+
+# 基础用法
+
+## 第一步、注册动画组件
+
+```vue
+
+<qt-lottie-view
+  ref='lottieRef'
+  class='lottie-view-root-css'
+  :lottie_loop='true'
+  :lottie_speed='10'
+  :lottie_autoPlay='true'
+  :lottie_url="'https://extcdn.hsrc.tv/channelzero_image/web_static/extend_screen/mood/lottie1.json'"
+/>
+```
+
+## 第二步、执行动画
+
+### 开始动画
+
+`lottieRef.value?.playAnimation()`
+
+### 暂停动画
+
+`lottieRef.value?.pauseAnimation()`
+
+### 恢复动画
+
+`lottieRef.value?.resumeAnimation()`
+
+### 取消动画
+
+`lottieRef.value?.cancelAnimation()`
+
+### 设置进度
+
+```ts
+lottieRef.value?.setProgress('0.5')
+lottieRef.value?.resumeAnimation()
+```
+
+:::demo ## 完整示例
+
+component/lottie/basic
+
+:::

package/rules/.docs/zh-CN/component/lottie/event.md

@@ -0,0 +1,23 @@
+---
+title: Lottie
+lang: zh-CN
+---
+
+# 事件
+
+::: warning 注意：监听事件需要 animationListenerState="true"
+:::
+
+* `onAnimationStart`：动画开始
+* `onAnimationEnd`：动画结束
+* `onAnimationCancel`：动画取消
+* `onAnimationRepeat`：动画重复执行
+* `onAnimationPause`：动画暂停
+* `onAnimationResume`：动画恢复
+* `onAnimationUpdate`：动画变化
+
+:::demo ## 完整示例
+
+component/lottie/event
+
+:::

package/rules/.docs/zh-CN/component/lottie/introduction.md

@@ -0,0 +1,93 @@
+---
+title: Lottie
+lang: zh-CN
+---
+
+# [Lottie](http://airbnb.io/lottie/)
+
+Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，设计师可以使用 Adobe After Effects 设计出漂亮的动画之后，使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON
+格式，就可以直接运用在 iOS、Android、Web 和 React Native之上，无需其他额外操作。
+
+[点击查看详细](http://airbnb.io/lottie/)
+
+::: warning 注意： QuickTVUI lottie 暂时只支持 json 格式动画文件。
+:::
+
+## API
+
+### Attributes
+
+| Name                              | Description       | Type                 | Default |
+| --------------------------------- | ----------------- | ---------------------| ------- |
+| rawResource                       |                   | ^[string]            | -   |
+| fileName                          |                   | ^[string]            | -   |
+| localResource                     |                   | ^[string]            | -   |
+| url                               |                   | ^[string]            | -   |
+| fallbackResource                  |                   | ^[string]            | -   |
+| autoPlay                          |                   | ^[boolean]           | -   |
+| loop                              |                   | ^[boolean]           | -   |
+| repeatMode                        |                   | ^[number]            | -   |
+| repeatCount                       |                   | ^[number]            | 0   |
+| speed                             |                   | ^[string]            | -   |
+| clipToCompositionBounds           |                   | ^[boolean]           | false   |
+| defaultFontFileExtension          |                   | ^[string]            | -   |
+| imageAssetsFolder                 |                   | ^[string]            | -   |
+| progress                          |                   | ^[string]            | -   |
+| enableMergePathsForKitKatAndAbove |                   | ^[boolean]           | false   |
+| colorFilter                       |                   | ^[string]            | -   |
+| renderMode                        |                   | ^[number]            | 0   |
+| asyncUpdates                      |                   | ^[number]            | 0   |
+| ignoreDisabledSystemAnimations    |                   | ^[boolean]           | false   |
+| useCompositionFrameRate           |                   | ^[boolean]           | false   |
+| cacheComposition                  |                   | ^[boolean]           | false   |
+| animationListenerState            |                   | ^[boolean]           | false   |
+| animationUpdateState              |                   | ^[boolean]           | false   |
+
+### Events
+
+| Name           | Description                          | Type                                                                |
+| ----------------- | --------------------------------- | ------------------------------------------------------------------- |
+| onAnimationEnd    | 动画结束事件                         | ^[Function]`() => void`                               |
+| onAnimationCancel | 动画取消事件                         | ^[Function]`() => void`                               |
+| onAnimationStart  | 动画开始事件                         | ^[Function]`() => void`                               |
+| onAnimationRepeat | 动画重复执行事件                      | ^[Function]`() => void`                               |
+| onAnimationPause  | 动画暂停事件                         | ^[Function]`() => void`                               |
+| onAnimationResume | 动画恢复事件                         | ^[Function]`() => void`                               |
+| onAnimationUpdate | 动画更新事件                         | ^[Function]`(value: string) => void`                  |
+
+### Slots
+
+| Name        | Description             |
+| ----------- | ----------------------- |
+| default     | 自定义默认内容             |
+
+### Exposes
+
+| Name                                | Description                 | Type                                           |
+| ----------------------------------- | --------------------------- | -----------------------------------------------|
+| loadRaw                             |           | ^[Function]`(rawRes: string) => void`   |
+| loadFile                            |           | ^[Function]`(fileName: string) => void`   |
+| loadUrl                             |           | ^[Function]`(url: string) => void`   |
+| loadCacheUrl                        |           | ^[Function]`(url: string, cacheKey: string) => void`   |
+| setFallbackResource                 |           | ^[Function]`(res: number) => void`   |
+| setAutoPlay                         |           | ^[Function]`(auto: boolean) => void`   |
+| setLottieLoop                       |           | ^[Function]`(loop: boolean) => void`   |
+| setRepeatMode                       |           | ^[Function]`(mode: QTLottieRepeatMode) => void`   |
+| setRepeatCount                      |           | ^[Function]`(repeatCount: number) => void`   |
+| setSpeed                            |           | ^[Function]`(speed: string) => void`   |
+| setClipToCompositionBounds          |           | ^[Function]`(clipToCompositionBounds: boolean) => void`   |
+| setDefaultFontFileExtension         |           | ^[Function]`(extension: string) => void`   |
+| setImageAssetsFolder                |           | ^[Function]`(imageAssetsFolder: string) => void`   |
+| setProgress                         |           | ^[Function]`(progress: string) => void`   |
+| enableMergePathsForKitKatAndAbove   |           | ^[Function]`(enable: boolean) => void`   |
+| setColorFilter                      |           | ^[Function]`(colorRes: string) => void`   |
+| setRenderMode                       |           | ^[Function]`(renderModeOrdinal: QTLottieRenderMode) => void`   |
+| setAsyncUpdate                      |           | ^[Function]`(asyncUpdatesOrdinal: QTLottieAsyncUpdates) => void`   |
+| setIgnoreDisabledSystemAnimations   |           | ^[Function]`(ignore: boolean) => void`   |
+| setUseCompositionFrameRate          |           | ^[Function]`(useCompositionFrameRate: boolean) => void`   |
+| playAnimation                       |           | ^[Function]`() => void`   |
+| resumeAnimation                     |           | ^[Function]`() => void`   |
+| pauseAnimation                      |           | ^[Function]`() => void`   |
+| cancelAnimation                     |           | ^[Function]`() => void`   |
+| cacheComposition                    |           | ^[Function]`(cache: boolean) => void`   |
+| removeAllListener                   |           | ^[Function]`() => void`   |

package/rules/.docs/zh-CN/component/lottie/network.md

@@ -0,0 +1,12 @@
+---
+title: Lottie
+lang: zh-CN
+---
+
+# 网络资源
+
+:::demo ## 完整示例
+
+component/lottie/network
+
+:::

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

@@ -0,0 +1,14 @@
+---
+title: Main
+lang: zh-CN
+---
+
+# Main ^(2.9)^(alpha)
+
+在[`Container`](/zh-CN/component/container)组件中使用。
+
+:::demo ## 基础用法
+
+component/main/basic
+
+:::

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

@@ -0,0 +1,44 @@
+---
+title: MediaSeries
+lang: zh-CN
+---
+
+# MediaSeries
+
+## API
+
+### Attributes
+
+| 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}`|
+| 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)'}`|
+| textVipColors           | VIP文字颜色         | ^[QTStateListColor]  | `{color:'#FFD97C',focusColor:'#B67827',selectColor:'#B67827'}'}` |
+| itemDivWidth            | 选集条目的宽度       | ^[number]            | 490                    |
+| itemDivHeight           | 选集条目的高度       | ^[number]            | 100                    |
+
+### Events
+
+| Name               | Description         | Type                                             |
+| -------------------| ------------------- | ------------------------------------------------ |
+| item-focused       | 选集条目焦点变化事件    | ^[Function]`(event: QTMediaSeriesEvent) => void` |
+| item-click         | 选集条目点击事件       | ^[Function]`(event: QTMediaSeriesEvent) => void` |
+| load-data          | 加载数据              | ^[Function]`(event: QTMediaSeriesEvent) => void` |
+| group-item-focused | 选集分组条目焦点变化事件 | ^[Function]`(event: QTMediaSeriesEvent) => void` |
+
+### Exposes
+
+| Method                       | Description                    | Type                                                                          |
+|------------------------------|--------------------------------|-------------------------------------------------------------------------------|
+| setup                        | 设置                            | ^[Function]`() => void`  |
+| setInitData                  | 设置初始化数据                    | ^[Function]`(type: QTMediaSeriesType, group: QTMediaSeriesGroup, styleType: QTMediaSeriesStyleType, data: QTMediaSeriesData) => void`  |
+| setPageData                  | 设置页面数据                      | ^[Function]`(page: number, data: Array<any>) => void`  |
+| scrollTo                     | 滚动到指定位置                    | ^[Function]`(position: number) => void`  |
+| scrollToWithOffset           | 滚动到指定位置并偏移               | ^[Function]`(position: number, offset: number, anim: boolean) => void`  |
+| setSelected                  | 设置选中位置                      | ^[Function]`(position: number) => void`  |
+| setGroupSelected             | 设置选中组位置                    | ^[Function]`(position: number) => void`  |
+| release                      | 回收                            | ^[Function]`() => void`  |

package/rules/.docs/zh-CN/component/nav-bar.md

@@ -0,0 +1,51 @@
+---
+title: NavBar
+lang: zh-CN
+---
+
+# NavBar
+
+<img src="/component/nav-bar/nav_bar.gif" />
+
+:::demo ## 基础用法
+
+component/nav-bar/basic
+
+:::
+
+## API
+
+### Attributes
+
+| Name                        | Description       | Type                     | Default  |
+| --------------------------- | ----------------- | -----------------------  | -------- |
+| itemGap                     | 导航栏条目的间距     | ^[number]                | 0        |
+| horizontal                  | 是否横向            | ^[boolean]               | true     |
+| initSelect                  | 初始化选中位置       | ^[number]                | 0        |
+| navs                        | 导航栏条目列表       | ^[object]`QTNavBarItem[]`| -        |
+| tabNavBarClass              | 样式               | ^[string]                | -        |
+| horizontalFadingEdgeEnabled | 启用横向边缘消失     | ^[boolean]                | false    |
+| verticalFadingEdgeEnabled   | 启用竖向边缘消失     | ^[boolean]                | false    |
+| fadingEdgeLength            | 消失边缘的长度       | ^[number]                 | 0        |
+
+### Events
+
+| Name      | Description      | Type                                        |
+| --------- | ---------------- | ------------------------------------------- |
+| tab-focus | 导航条目焦点变化事件 | ^[Function]`(isFocused: boolean) => void`   |
+| tab-click | 导航条目点击事件    | ^[Function]`(item: QTNavBarItem) => void`   |
+| tab-select| 导航条目选中事件    | ^[Function]`(item: QTNavBarItem) => void`   |
+
+### Slots
+
+| Name        | Description             |
+| ----------- | ----------------------- |
+| default     | 自定义默认内容             |
+
+### Exposes
+
+| Method                       | Description                    | Type                                                                          |
+|------------------------------|--------------------------------|-------------------------------------------------------------------------------|
+| init                         | 初始化                         | ^[Function]`(navBar: QTNavBar) => void`      |
+| scrollToPosition             | 滚动到指定位置                   | ^[Function]`(index: number) => void`      |
+| scrollToTop                  | 滚动到顶                         | ^[Function]`() => void`      |

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

@@ -0,0 +1,20 @@
+---
+title: Overview
+lang: zh-CN
+---
+
+# 概述
+
+QuickTVUI组件分为两大类：
+
+* 标准 web 组件，例如：div、img、p
+* 针对电视定制开发的组件，例如：qt-view、qt-image、qt-loading
+
+## 开发者必读
+
+::: warning 注意：
+
+***1、组件必须设置宽（[width](/zh-CN/css/layout/width)）高（[height](/zh-CN/css/layout/height)）属性***
+
+***2、推荐使用针对电视定制开发的组件`qt-xx`***
+:::