@quicktvui/ai 1.0.0

package/rules/.docs/zh-CN/component/animation/props.md

@@ -0,0 +1,76 @@
+---
+title: Animation
+lang: zh-CN
+---
+
+# 使用属性
+
+## 第一步、注册动画组件
+
+```vue
+
+<qt-animation
+  ref='animationRef'
+  class='animation-view-css'
+  :animator='animator'>
+<!-- 包裹需要执行动画的vue组件-->
+<div class='animation-inner-view-class' />
+</qt-animation>
+```
+
+## 第二步、创建动画
+
+```ts
+ animator.value = {
+  type: QTAnimationType.ALPHA,
+  values: [0, 1],
+  duration: 1000,
+}
+```
+
+## 第三步、执行动画
+
+### 开始动画
+
+`animationViewRef.value?.start();`
+
+### 延迟开始动画
+
+`animationViewRef.value?.startDelay(2000);`
+
+### 暂停动画
+
+`animationViewRef.value?.pause();`
+
+### 恢复动画
+
+`animationViewRef.value?.resume();`
+
+### 取消动画
+
+`animationViewRef.value?.cancel();`
+
+### 翻转动画
+
+`animationViewRef.value?.reverse();`
+
+### 重置所有动画
+
+`animationViewRef.value?.reset();`
+
+
+## 完整示例：使用属性创建动画
+
+:::demo
+
+component/animation/animator-props
+
+:::
+
+## 完整示例：使用属性创建动画合集
+
+:::demo
+
+component/animation/animators-props
+
+:::

package/rules/.docs/zh-CN/component/animation/repeat.md

@@ -0,0 +1,46 @@
+---
+title: Animation
+lang: zh-CN
+---
+
+# 重复模式
+
+## 属性动画重复模式
+
+`Defines what this animation should do when it reaches the end. This setting is applied only when the repeat count is either greater than 0 or INFINITE. Defaults to RESTART.`
+
+* `restart`
+* `reverse`
+* `infinite`
+
+属性动画重复模式`QTAnimationRepeatMode`的值定义：
+
+* `QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_RESTART`
+* `QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_REVERSE`
+* `QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_INFINITE`
+
+## 属性动画重复次数：
+
+`Sets how many times the animation should be repeated. If the repeat count is 0, the animation is never repeated. If the repeat count is greater than 0 or INFINITE, the repeat mode will be taken into account. The repeat count is 0 by default.`
+
+示例代码
+
+```js
+ animationViewRef.value?.animator(
+  "2",//自定义id
+  QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+  QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_Y,
+  [0, 300, 0, -300, 0],
+  1000,
+  QTAnimationRepeatMode.QT_ANIMATION_REPEAT_MODE_REVERSE,
+  2,
+  false,
+  false,
+);
+```
+
+:::demo ## 完整示例
+
+component/animation/repeat
+
+:::

package/rules/.docs/zh-CN/component/animation/rotation-xy.md

@@ -0,0 +1,17 @@
+---
+title: Animation
+lang: zh-CN
+---
+
+# 旋转动画XY
+
+## 效果预览
+
+<img src="/component/animation/animation_rotation.gif" />
+
+
+:::demo ## 完整示例
+
+component/animation/rotation-xy
+
+:::

package/rules/.docs/zh-CN/component/animation/rotation.md

@@ -0,0 +1,23 @@
+---
+title: Animation
+lang: zh-CN
+---
+
+# 旋转动画
+
+## 效果预览
+
+<img src="/component/animation/animation_rotation.gif" />
+
+
+:::demo ## 属性实现
+
+component/animation/rotation-props
+
+:::
+
+:::demo ## 方法实现
+
+component/animation/rotation
+
+:::

package/rules/.docs/zh-CN/component/animation/scale.md

@@ -0,0 +1,24 @@
+---
+title: Animation
+lang: zh-CN
+---
+
+# 变形动画
+
+## 效果预览
+
+<img src="/component/animation/animation_scale.gif" />
+
+:::demo ## 属性实现
+
+component/animation/scale-props
+
+:::
+
+:::demo ## 方法实现
+
+component/animation/scale
+
+:::
+
+

package/rules/.docs/zh-CN/component/animation/translation.md

@@ -0,0 +1,22 @@
+---
+title: Animation
+lang: zh-CN
+---
+
+# 平移动画
+
+## 效果预览
+
+<img src="/component/animation/animation_translation.gif" />
+
+:::demo ## 属性实现
+
+component/animation/translation-props
+
+:::
+
+:::demo ## 方法实现
+
+component/animation/translation
+
+:::

package/rules/.docs/zh-CN/component/app-icon.md

@@ -0,0 +1,22 @@
+---
+title: AppIcon
+lang: zh-CN
+---
+
+# AppIcon
+
+## API
+
+### Attributes
+
+| Name                 | Description       | Type       | Default |
+| -------------------- | ----------------- | -----------| ------- |
+| roundingRadius       | 应用图标圆角         | ^[string]  | —       |
+| packageName          | 应用包名            | ^[string]  | —       |
+
+### Exposes
+
+| Name              | Description       | Type                                          |
+| ----------------- | ----------------- | --------------------------------------------- |
+| setPackageName    | 设置应用包名        | ^[Function]`(packageName: string) => void`     |
+| setRoundingRadius | 设置应用图标的圆角度数 | ^[Function]`(roundingRadius: number) => void` |

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

@@ -0,0 +1,14 @@
+---
+title: Aside
+lang: zh-CN
+---
+
+# Aside ^(2.9)^(alpha)
+
+在[`Container`](/zh-CN/component/container)组件中使用。位于`Container`中的左侧栏。
+
+:::demo ## 基础用法
+
+component/aside/basic
+
+:::

package/rules/.docs/zh-CN/component/audio-player/basic.md

@@ -0,0 +1,52 @@
+---
+title: AudioPlayer
+lang: zh-CN
+---
+
+# 基础用法
+
+#### 第一步、引入`ESAudioPlayer`组件，并声明在`<template>`
+
+```vue
+
+<es-audio-player
+  ref='audioPlayer'
+  class='es-audio-player-page-css'
+  @onPlayerInitialized='onPlayerInitialized'
+/>
+```
+
+#### 第二步、调用`initialize`方法进行初始化。
+
+`audioPlayer.value?.initialize()`
+
+#### 第三步、在播放器`onPlayerInitialized`初始化成功回调事件中设置播放数据。
+
+```ts
+const onPlayerInitialized = (playerType) => {
+  const mediaSource: ESMediaSource = {
+    uri: 'http://qcloudcdn.a311.ottcn.com/data_center/audios/ifengfm/1898049/9644712/2ff957624598b7b105d5c86b809c854c.mp3',
+  }
+  const position: ESPlayerPosition = {
+    support: true,
+    position: 20000,
+  }
+  const mediaSourceList: ESMediaSourceList = {
+    index: 0,
+    list: [mediaSource],
+    position,
+  }
+  audioPlayer.value?.playMediaSourceList(mediaSourceList)
+}
+
+```
+
+#### 第四步、调用`start`方法开始播放。
+
+`audioPlayer.value?.start(0)`
+
+:::demo
+
+component/audio-player/basic
+
+:::

package/rules/.docs/zh-CN/component/audio-player/installation.md

@@ -0,0 +1,26 @@
+---
+title: AudioPlayer
+lang: zh-CN
+---
+
+# 集成
+
+## 第一步、`package.json`添加依赖库
+
+* `@extscreen/es3-player`![NPM Version](https://img.shields.io/npm/v/@extscreen/es3-player)
+* `@extscreen/es3-audio-player`![NPM Version](https://img.shields.io/npm/v/@extscreen/es3-audio-player)
+
+## 第二步、集成`ESPlayer`
+
+[点击查看详细](/zh-CN/component/player/player#集成)
+
+## 第三步、集成`ESAudioPlayer`
+
+在`main.ts`中集成
+
+```ts
+import { createESAudioPlayer } from "@extscreen/es3-audio-player";
+
+const audioPlayer = createESAudioPlayer();
+app.use(audioPlayer);
+```

package/rules/.docs/zh-CN/component/audio-player/introduction.md

@@ -0,0 +1,12 @@
+---
+title: AudioPlayer
+lang: zh-CN
+---
+
+# AudioPlayer 简介
+
+通用音频播放器。封装了音频播放常用功能
+
+`ESAudioPlayer`实现了[`ESIPlayer`](/zh-CN/component/player/player)接口。
+
+`ESAudioPlayer`和[`ESIPlayer`](/zh-CN/component/player/player)有相同的数据结构，事件，接口，属性。

package/rules/.docs/zh-CN/component/audio-player/player-manager.md

@@ -0,0 +1,72 @@
+---
+title: AudioPlayer
+lang: zh-CN
+---
+
+# 播放管理器
+
+::: tip ESPlayerManager 集成
+[点击查看详细](/zh-CN/component/player-manager/installation)
+:::
+
+#### 第一步、引入`ESPlayerManager`组件，并声明在`<template>`
+
+```vue
+
+<es-player-manager
+  ref='playerManager'
+  :playerList='playerListRef'
+  class='es-player-manager-page-css'
+/>
+```
+
+#### 第二步、集成并注册`ESAudioPlayer`音频播放组件。
+
+```ts
+import { ESAudioPlayer } from '@extscreen/es3-audio-player'
+
+const playerList = [markRaw(ESAudioPlayer)]
+const playerListRef = ref(playerList)
+```
+
+#### 第三步、调用`initialize`方法进行初始化。
+
+`playerManager.value?.initialize()`
+
+#### 第四步、设置播放数据。
+
+::: tip 注意：ESMediaItem 中播放器类型 type 需要设置为 4
+[点击查看播放器类型](/zh-CN/component/player-manager/player-type)
+:::
+
+```ts
+
+//1.拼装 ESMediaSource 数据
+const mediaSource: ESMediaSource = {
+  uri: 'http://qcloudcdn.a311.ottcn.com/data_center/audios/ifengfm/1898049/9644712/2ff957624598b7b105d5c86b809c854c.mp3',
+}
+//2.拼装 ESMediaSourceList 数据
+const mediaSourceList: ESMediaSourceList = {
+  index: 0,
+  list: [mediaSource],
+}
+//3.拼装 ESMediaItem 数据，类型为4
+const mediaItem: ESMediaItem = {
+  mediaSourceList,
+  playerType: 4, //TODO 类型为4
+}
+//4.拼装 ESMediaItemList 数据
+const playList: ESMediaItemList = {
+  index: 0,
+  list: [mediaItem],
+}
+playerManager.value?.playMediaList(playList)
+```
+
+#### 第五步、默认自动进行播放。
+
+:::demo ## 完整示例
+
+component/audio-player/player-manager
+
+:::

package/rules/.docs/zh-CN/component/audio-service-player/basic.md

@@ -0,0 +1,52 @@
+---
+title: AudioPlayerService
+lang: zh-CN
+---
+
+# 基础用法
+
+#### 第一步、引入`ESAudioServicePlayer`组件，并声明在`<template>`
+
+```vue
+
+<es-audio-service-player
+  ref='audioServicePlayer'
+  class='es-audio-player-page-css'
+  @onPlayerInitialized='onPlayerInitialized'
+/>
+```
+
+#### 第二步、调用`initialize`方法进行初始化。
+
+`audioServicePlayer.value?.initialize()`
+
+#### 第三步、在播放器`onPlayerInitialized`初始化成功回调事件中设置播放数据。
+
+```ts
+const onPlayerInitialized = (playerType) => {
+  const mediaSource: ESMediaSource = {
+    uri: 'http://qcloudcdn.a311.ottcn.com/data_center/audios/ifengfm/1898049/9644712/2ff957624598b7b105d5c86b809c854c.mp3',
+  }
+  const position: ESPlayerPosition = {
+    support: true,
+    position: 20000,
+  }
+  const mediaSourceList: ESMediaSourceList = {
+    index: 0,
+    list: [mediaSource],
+    position,
+  }
+  audioServicePlayer.value?.playMediaSourceList(mediaSourceList)
+}
+
+```
+
+#### 第四步、调用`start`方法开始播放。
+
+`audioServicePlayer.value?.start(0)`
+
+:::demo ## 基础用法
+
+component/audio-player-service/basic
+
+:::

package/rules/.docs/zh-CN/component/audio-service-player/installation.md

@@ -0,0 +1,26 @@
+---
+title: AudioPlayerService
+lang: zh-CN
+---
+
+# 集成
+
+## 第一步、`package.json`添加依赖库
+
+* `@extscreen/es3-player`![NPM Version](https://img.shields.io/npm/v/@extscreen/es3-player)
+* `@extscreen/es3-audio-service-player`![NPM Version](https://img.shields.io/npm/v/@extscreen/es3-audio-service-player)
+
+## 第二步、集成`ESPlayer`
+
+[点击查看详细](/zh-CN/component/player/player#集成)
+
+## 第三步、集成`ESAudioServicePlayer`
+
+在`main.ts`中集成
+
+```ts
+import { createESAudioServicePlayer } from "@extscreen/es3-audio-service-player";
+
+const audioServicePlayer = createESAudioServicePlayer();
+app.use(audioServicePlayer);
+```

package/rules/.docs/zh-CN/component/audio-service-player/introduction.md

@@ -0,0 +1,13 @@
+---
+title: AudioPlayerService
+lang: zh-CN
+---
+
+# AudioPlayerService 简介
+
+通用音频播放服务。支持后台播放音频。
+
+`ESAudioPlayerService`实现了[`ESIPlayer`](/zh-CN/component/player/player)接口。
+
+`ESAudioPlayerService`和[`ESIPlayer`](/zh-CN/component/player/player)有相同的数据结构，事件，接口，属性。
+

package/rules/.docs/zh-CN/component/audio-service-player/player-manager.md

@@ -0,0 +1,71 @@
+---
+title: AudioPlayerService
+lang: zh-CN
+---
+
+# 播放管理器
+
+::: tip ESPlayerManager 集成
+[点击查看详细](/zh-CN/component/player-manager/installation)
+:::
+
+#### 第一步、引入`ESPlayerManager`组件，并声明在`<template>`
+
+```vue
+
+<es-player-manager
+  ref='playerManager'
+  :playerList='playerListRef'
+  class='es-player-manager-page-css'
+/>
+```
+
+#### 第二步、集成并注册`ESAudioServicePlayer`音频播放组件。
+
+```ts
+import { ESAudioServicePlayer } from '@extscreen/es3-audio-service-player'
+
+const playerList = [markRaw(ESAudioServicePlayer)]
+const playerListRef = ref(playerList)
+```
+
+#### 第三步、调用`initialize`方法进行初始化。
+
+`playerManager.value?.initialize()`
+
+#### 第四步、设置播放数据。
+
+::: tip 注意：ESMediaItem 中播放器类型 type 需要设置为 5
+[点击查看播放器类型](/zh-CN/component/player-manager/player-type)
+:::
+
+```ts
+
+//1.拼装 ESMediaSource 数据
+const mediaSource: ESMediaSource = {
+  uri: 'http://qcloudcdn.a311.ottcn.com/data_center/audios/ifengfm/1898049/9644712/2ff957624598b7b105d5c86b809c854c.mp3',
+}
+//2.拼装 ESMediaSourceList 数据
+const mediaSourceList: ESMediaSourceList = {
+  index: 0,
+  list: [mediaSource],
+}
+//3.拼装 ESMediaItem 数据，类型为4
+const mediaItem: ESMediaItem = {
+  mediaSourceList,
+  playerType: 5, //TODO 类型为5
+}
+//4.拼装 ESMediaItemList 数据
+const playList: ESMediaItemList = {
+  index: 0,
+  list: [mediaItem],
+}
+playerManager.value?.playMediaList(playList)
+```
+
+#### 第五步、默认自动进行播放。
+
+:::demo ## 完整示例
+
+component/audio-player-service/player-manager
+

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

@@ -0,0 +1,120 @@
+---
+title: Button
+lang: zh-CN
+---
+
+# Button
+
+<img src="/component/button/button_component.png" />
+
+:::demo ## 基础用法
+
+component/button/basic
+
+:::
+
+:::demo ## 不同尺寸
+
+component/button/size
+
+:::
+
+:::demo ## 自定义按钮样式
+
+component/button/custom-style
+
+:::
+
+:::demo ## 禁用状态
+
+component/button/disabled
+
+:::
+
+:::demo ## 圆角按钮
+
+component/button/round
+
+:::
+
+:::demo ## 正方形按钮
+
+component/button/square
+
+:::
+
+:::demo ## 渐变背景
+
+component/button/background
+
+:::
+
+:::demo ## 自定义文字样式
+
+component/button/custom-text
+
+:::
+
+:::demo ## 自定义按钮内容
+
+component/button/custom-content
+
+:::
+
+:::demo ## 自定义本地图标
+
+component/button/custom-icon
+
+:::
+
+:::demo ## 自定义网络图标
+
+component/button/custom-net-icon
+
+:::
+
+:::demo ## 带边框
+
+component/button/border
+
+:::
+
+:::demo ## 自定义图标样式
+
+component/button/custom-icon-style
+
+:::
+
+## API
+
+### Attributes
+
+| Name                            | Description       | Type                                                           | Default  |
+| ------------------------------- | ----------------- | --------------------------------------------------------------  | ------- |
+| size                            | 尺寸               | ^[enum]`'default' \| 'large' \| 'medium' \| 'small'\| 'mini'`  | default  |
+| itemType                        | 类型               | ^[number]                                                      | 20000    |
+| focusBorder                     | 是否显示边框         | ^[boolean]                                                     | false   |
+| focusScale                      | 焦点放大倍数         | ^[number]                                                      | 1.08    |
+| focusable                       | 是否可以获得焦点      | ^[boolean]                                                     | true    |
+| enableFlexStyle                 | 是否支持flex样式     | ^[boolean]                                                     | false   |
+| icon                            | 标准状态图标         | ^[string]                                                      | -       |
+| focusIcon                       | 焦点状态图标         | ^[string]                                                      | -       |
+| text                            | 按钮的文本           | ^[string]                                                      | -       |
+| gradientFocusBackground         | 焦点状态背景颜色      | ^[QTGradient]                                                  | -       |
+| gradientSelectedBackground      | 选中状态背景颜色      | ^[QTGradient]                                                  | -       |
+| gradientBackground              | 标准背景颜色         | ^[QTGradient]                                                  | -       |
+| disabled                        | 是否显示可用样式      | ^[boolean]                                                     | false   |
+| round                           | 是否显示圆角样式      | ^[boolean]                                                     | false   | | -       |
+
+### Events
+
+| Name  | Description      | Type                                        |
+| ------| ---------------- | ------------------------------------------- |
+| focus | 焦点变化事件       | ^[Function]`(isFocused: boolean) => void`   |
+| click | 点击事件          | ^[Function]`() => void`                     |
+
+### Slots
+
+| Name        | Description             |
+| ----------- | ----------------------- |
+| default     | 自定义默认内容             |