@quicktvui/ai 1.0.0

package/rules/.docs/zh-CN/guide/slot/install.md

@@ -0,0 +1,59 @@
+# 集成
+
+## 第1步：`package.json`引入库
+
+```
+"@extscreen/es3-core": "1.1.12",
+"@extscreen/es3-router": "^1.1.0"
+```
+
+## 第2步：创建`RouteMap`
+
+创建`routes.ts`加入页面路由配置。
+
+下面以`index.vue`页面为例：
+
+```js
+import index from "./views/index.vue";
+
+const routes = [
+	{
+		path: '/index',
+		name: 'index',
+		component: index,
+	}
+]
+```
+
+## 第3步：`main.ts`中初始化
+
+```js
+
+import {createESSlot} from '@extscreen/es3-router'
+import routes from "./routes.ts";
+import type { Router} from '@extscreen/es3-router';
+
+const routerOptions = {
+	routes,
+}
+
+//创建slot router
+const router: Router = createESSlot(routerOptions)
+const app: ESApp = createESApp(application, router);
+app.use(install);
+
+```
+
+## 第4步：`App.vue`中初始化
+
+使用`es-slot-view`轻卡路由标签
+
+``` js
+<template>
+  <div id="root">
+    <es-slot-view/>
+  </div>
+</template>
+```
+
+配置完成，并且初始化成功后就可以进行轻卡的开发了。

package/rules/.docs/zh-CN/guide/slot/introduction.md

@@ -0,0 +1,45 @@
+# 简介
+
+::: warning sdk >= 2.9
+:::
+
+快应用[轻卡](/zh-CN/sdk/light-card)是专为原生应用与快应用混合开发的解决方案。
+
+[点击查看轻卡详细信息](/zh-CN/sdk/light-card)
+
+轻卡路由和页面路由相同，都使用`ESRouter`。
+
+::: warning 注意：显示轻卡和关闭轻卡，不需要业务项目调用。
+
+框架层默认接收来自安卓端的指令进行轻卡的显示和关闭。
+
+:::
+
+## 显示轻卡
+
+示例代码
+
+```js
+const router = useESRouter()
+router.push({
+  name: 'router/router_zero_page',
+  params: {
+    from: 'router_first'
+  },
+});
+```
+
+## 关闭轻卡
+
+示例代码
+
+```js
+const router = useESRouter()
+router.splice({
+  name: 'router/router_zero_page',
+  params: {
+    from: 'router_first'
+  },
+});
+```
+

package/rules/.docs/zh-CN/guide/slot/lifecycle.md

@@ -0,0 +1,18 @@
+# 轻卡生命周期
+
+轻卡和[`页面生命周期周期`](/zh-CN/guide/page/lifecycle) 类似。
+
+相比页面生命周期相比：
+
+* 添加了`onESBind`、`onESRecycle`、`onESAttached`、`onESDetached`生命周期。
+* 去掉了`onESNewIntent`、`onESSaveInstanceState`、`onESRestoreInstanceState`
+* 添加了`onESSlotEvent` 轻卡事件方法。
+
+::: warning 注意：onESBind、onESRecycle、onESAttached、onESDetached 生命周期只会在瀑布流里面使用轻卡被调用。
+:::
+
+:::demo ## 生命周期示例
+
+guide/slot/lifecycle
+
+:::

package/rules/.docs/zh-CN/guide/slot/project.md

@@ -0,0 +1,22 @@
+# 创建轻卡项目
+
+## 方式一、 用[`@quicktvui/cli`](/zh-CN/tool/cli/introduction)创建应用
+`App type` 选择 `quick slot`
+
+```shell
+qui create @quicktvui/quicktvui-slot
+```
+
+<img src="/tool/cli/cli-create-slot.jpg" />
+
+::: tip 提示：查看 qui create 详细内容
+[点击查看 qui create 详细内容。](/zh-CN/tool/cli/create)
+:::
+
+## 方式二、 以模板项目创建轻卡
+
+```shell
+git clone https://github.com/quicktvui/quicktvui-slot-template.git
+```
+
+

package/rules/.docs/zh-CN/guide/test.md

@@ -0,0 +1,8 @@
+---
+title: Test
+lang: zh-CN
+---
+
+# Test
+
+## Test

package/rules/.docs/zh-CN/guide/theming.md

@@ -0,0 +1,254 @@
+---
+title: Theming
+lang: zh-CN
+---
+
+# Custom theme
+
+QuickTVUI uses BEM-styled CSS so that you can override styles easily. But if
+you need to replace styles at a large scale, e.g. change the theme color from
+blue to orange or green, maybe overriding them one by one is not a good idea.
+
+We provide four ways to change the style variables.
+
+## Change theme color
+
+These are examples about custom theme.
+
+- Full import: [element-plus-vite-starter](https://github.com/element-plus/element-plus-vite-starter)
+- On demand: [unplugin-element-plus/examples/vite](https://github.com/element-plus/unplugin-element-plus)
+
+### By SCSS variables
+
+`theme-chalk` is written in SCSS.
+You can find SCSS variables in [`packages/theme-chalk/src/common/var.scss`](https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss).
+
+:::warning
+
+We use sass modules ([sass:map](https://sass-lang.com/documentation/values/maps)...) and `@use` to refactor all SCSS variables. And by using `@use` to all SCSS variables, it solves the duplicate output problem caused by `@import`.
+
+> [Introducing Sass Modules | CSS-TRICKS](https://css-tricks.com/introducing-sass-modules/)
+
+For example, We use `$colors` as a map to preserve different types of colors.
+
+`$notification` is a map where all variables of the `notification` component at.
+
+In the future, we will write documentation for variables that can be customized for each component. You can also directly checkout the source [var.scss](https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss).
+
+:::
+
+```scss
+$colors: () !default;
+$colors: map.deep-merge(
+  (
+    'white': #ffffff,
+    'black': #000000,
+    'primary': (
+      'base': #409eff,
+    ),
+    'success': (
+      'base': #67c23a,
+    ),
+    'warning': (
+      'base': #e6a23c,
+    ),
+    'danger': (
+      'base': #f56c6c,
+    ),
+    'error': (
+      'base': #f56c6c,
+    ),
+    'info': (
+      'base': #909399,
+    ),
+  ),
+  $colors
+);
+```
+
+### How to override it?
+
+If your project also uses SCSS, you can directly change QuickTVUI style variables. Create a new style file, e.g. `styles/element/index.scss`:
+
+:::warning
+
+You should use `@use 'xxx.scss' as *;` instead of `@import 'xxx.scss';`.
+
+Because the sass team said they will remove `@import` eventually.
+
+> [Sass: @use](https://sass-lang.com/documentation/at-rules/use) vs [Sass: @import](https://sass-lang.com/documentation/at-rules/import)
+
+:::
+
+```scss
+// styles/element/index.scss
+/* just override what you need */
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': green,
+    ),
+  )
+);
+
+// If you just import on demand, you can ignore the following content.
+// if you want to import all styles:
+// @use "element-plus/theme-chalk/src/index.scss" as *;
+```
+
+Then in the entry file of your project, import this style file instead of Element's built CSS:
+
+:::tip
+
+Import `element/index.scss` before scss of element-plus to avoid the problem of sass mixed variables, because we need generate light-x by your custom variables.
+
+:::
+
+Create a `element/index.scss` to combine your variables and variables of element-plus. (If you import them in ts, they will not be combined.)
+
+:::tip
+
+In addition, you should distinguish your scss from the element variable scss.
+If they are mixed together, each hot update of `element-plus` needs to compile a large number of scss files, resulting in slow speed.
+
+:::
+
+```ts
+import { createApp } from 'vue'
+import './styles/element/index.scss'
+import ElementPlus from 'element-plus'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(ElementPlus)
+```
+
+If you are using vite, and you want to custom theme when importing on demand.
+
+Use `scss.additionalData` to compile variables with scss of every component.
+
+```ts
+import path from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+// You can also use unplugin-vue-components
+// import Components from 'unplugin-vue-components/vite'
+// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+
+// or use unplugin-element-plus
+import ElementPlus from 'unplugin-element-plus/vite'
+
+// vite.config.ts
+export default defineConfig({
+  resolve: {
+    alias: {
+      '~/': `${path.resolve(__dirname, 'src')}/`,
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@use "~/styles/element/index.scss" as *;`,
+      },
+    },
+  },
+  plugins: [
+    vue(),
+    // use unplugin-vue-components
+    // Components({
+    //   resolvers: [
+    //     ElementPlusResolver({
+    //       importStyle: "sass",
+    //       // directives: true,
+    //       // version: "2.1.5",
+    //     }),
+    //   ],
+    // }),
+    // or use unplugin-element-plus
+    ElementPlus({
+      useSource: true,
+    }),
+  ],
+})
+```
+
+If you are using webpack, and you want to custom theme when importing on demand.
+
+```ts
+// webpack.config.ts
+// use unplugin-element-plus
+
+import ElementPlus from 'unplugin-element-plus/webpack'
+
+export default defineConfig({
+  css: {
+    loaderOptions: {
+      scss: {
+        additionalData: `@use "~/styles/element/index.scss" as *;`,
+      },
+    },
+  },
+  plugins: [
+    ElementPlus({
+      useSource: true,
+    }),
+  ],
+})
+```
+
+### By CSS Variable
+
+CSS Variables is a very useful feature, already supported by almost all browsers. (IE: Wait?)
+
+> Learn more from [Using CSS custom properties (variables) | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)
+
+We have used css variables to reconstruct the style system of almost all components.
+
+:::tip
+
+It is compatible with the SCSS variable system. We use the function of SCSS to automatically generate css variables for use.
+
+:::
+
+This means you can dynamically change individual variables inside the component to better customize it without having to modify scss and recompile it.
+
+> In the future, the css variable names and role documentation for each component will be written to each component.
+
+Like this:
+
+```css
+:root {
+  --el-color-primary: green;
+}
+```
+
+If you just want to customize a particular component, just add inline styles for certain components individually.
+
+```html
+<el-tag style="--el-tag-bg-color: red">Tag</el-tag>
+```
+
+For performance reasons, it is more recommended to custom css variables under a class rather than the global `:root`.
+
+```css
+.custom-class {
+  --el-tag-bg-color: red;
+}
+```
+
+If you want to control css var by script, try this:
+
+```ts
+// document.documentElement is global
+const el = document.documentElement
+// const el = document.getElementById('xxx')
+
+// get css var
+getComputedStyle(el).getPropertyValue(`--el-color-primary`)
+
+// set css var
+el.style['--el-color-primary'] = 'red'
+```
+
+If you want a more elegant way, check this out.
+[useCssVar | VueUse](https://vueuse.org/core/usecssvar/)

package/rules/.docs/zh-CN/guide/translation.md

@@ -0,0 +1,39 @@
+---
+title: Translation
+lang: zh-CN
+---
+
+# Translation
+
+## Documentation
+
+In this chapter, we will discuss how to help translating the documentation of QuickTVUI.
+
+### Background
+
+Before we did the upgrade of the documentation architecture, each documentation update needs 5 languages,
+which most of the contributors use online translator for their non-native languages,
+sometimes it would be not only inaccurate but also stressful to them.
+
+So we decided to give the documentation site an upgrade.
+
+- From webpack to Vite
+- From manually maintained to automated
+
+We took [Crowdin](https://crowdin.com) as our first step to make the documentation site more automated.
+
+### How do I translate the documentation?
+
+1. Create an account on [Crowdin](https://crowdin.com), it is recommended that you use your GitHub account to authorize Crowdin.
+2. Go to [QuickTVUI](https://crowdin.com/project/element-plus) project.
+3. Choose the language you want to contribute to.
+4. Find the file you want to translate.
+5. Do the translation.
+
+That simple, and the UI is very intuitive to use, you should have no trouble using it.
+After you submit your work, it would be online once the translation is approved by proofreader.
+
+### How can I become a proofreader?
+
+You can [raise an issue](https://crowdin.com/project/element-plus/discussions) on Crowdin to us for
+becoming a proofreader of the language you wish to be.

package/rules/.docs/zh-CN/index.md

@@ -0,0 +1,9 @@
+---
+title: A Vue 3 UI Framework
+page: true
+lang: zh-CN
+---
+
+<ClientOnly>
+  <ParallaxHome />
+</ClientOnly>

package/rules/.docs/zh-CN/module/action-bar.md

@@ -0,0 +1,32 @@
+---
+title: ActionBar
+lang: zh-CN
+---
+
+# 工具栏模块
+
+控制显示容器内置的工具栏
+
+<img src="/module/action-bar/action_bar.png" />
+
+:::demo ## 基础用法
+
+module/action-bar/es-basic
+
+:::
+
+:::demo ## qt.actionBar 用法 ^(alpha)
+
+module/action-bar/qt-basic
+
+:::
+
+## API
+
+### Exposes
+
+| Name                             | Description                 | Type                                |
+| -------------------------------- | --------------------------- | ------------------------------------|
+| show                             | 显示工具栏                    | ^[Function]`() => void`               |
+| dismiss                          | 隐藏工具栏                    | ^[Function]`() => void`               |
+| isShowing                        | 判断工具栏是否显示              | ^[Function]`() => Promise<boolean>`   |

package/rules/.docs/zh-CN/module/app-list.md

@@ -0,0 +1,57 @@
+---
+title: 应用列表模块
+lang: zh-CN
+---
+
+# 应用列表模块
+
+此模块用来获取系统预装的应用和用户自己安装的应用列表。
+
+:::demo ## 基础用法
+
+module/app-list/es-basic
+
+:::
+
+:::demo ## qt.appList 用法 ^(alpha)
+
+module/app-list/qt-basic
+
+:::
+
+## API
+
+### DataStructure
+
+#### ESAppInfo
+
+应用信息
+
+| Name          | Description                | Type                          |   Default   |
+| -------------- | ------------------| ----------------------------|---------|
+| name          | 应用名称           | ^[string]                      |   -    |
+| pkg           | 应用包名           |  ^[string]                      |   -    |
+| verCode       | 应用版本号         | ^[number]                      |   -    |
+| verName       | 应用版本名称        |  ^[string]                      |   -    |
+| installTime   | 应用安装时间        | ^[number]                      |   -    |
+| updateTime    | 应用更新时间        | ^[number]                      |   -    |
+| isSystemApp   | 是否是系统应用      |  ^[boolean]                     |   -    |
+
+#### ESAppInfoList
+
+应用列表
+
+| Name          | Description                | Type                          |   Default   |
+| -------------- | ------------------| ----------------------------|---------|
+| system         | 系统应用列表        | ^[Array<ESAppInfo>]           |   -    |
+| user           | 用户应用列表        | ^[Array<ESAppInfo>]           |   -    |
+
+### Exposes
+
+| Name                             | Description                 | Type                                           |
+| -------------------------------- | --------------------------- | -----------------------------------------------|
+| isAppInstalled                   | 该方法根据应用包名判断应用是否安装       | ^[Function]`isAppInstalled(packageName: string) => Promise<boolean>`   |
+| isSystemApp                      | 该方法根据应用包名判断应用是否是系统应用   | ^[Function]`isSystemApp(packageName: string) => Promise<boolean>`   |
+| getAppList                       | 该方法获取系统应用列表                 | ^[Function]`getAppList() => Promise<ESAppInfoList>`   |
+| getAppInfo                       | 该方法获取应用信息                    | ^[Function]`getAppInfo(packageName: string) => Promise<ESAppInfo>`   |
+| getAutoStartAppList              | 该方法获取系统开机启动应用列表          | ^[Function]`getAutoStartAppList() => Promise<Array<ESAppInfo>>`   |

package/rules/.docs/zh-CN/module/audio.md

@@ -0,0 +1,45 @@
+---
+title: 音量模块
+lang: zh-CN
+---
+
+# 音量模块
+
+使用此模块可以控制`android`系统的音量。
+
+:::demo ## 基础用法
+
+module/audio/es-basic
+
+:::
+
+:::demo ## qt.audio 用法 ^(alpha)
+
+module/audio/qt-basic
+
+:::
+
+## API
+
+### Exposes
+
+| Name                             | Description                 | Type                                           |
+| -------------------------------- | --------------------------- | -----------------------------------------------|
+| requestAudioFocus                 | 该方法请求音频焦点     | ^[Function]`requestAudioFocus(streamType: ESAudioStreamType, durationHint: ESAudioDurationHint) => Promise<number>`   |
+| abandonAudioFocus                 | 该方法释放音频焦点     | ^[Function]`abandonAudioFocus() => Promise<number>`   |
+| getStreamVoiceCallMaxVolume       | 该方法获取最大通话音量  | ^[Function]`getStreamVoiceCallMaxVolume() => Promise<number>`   |
+| getStreamVoiceCallVolume       | 该方法获取当前通话音量  | ^[Function]`getStreamVoiceCallVolume() => Promise<number>`   |
+| getStreamSystemMaxVolume       | 该方法获取最大系统音量  | ^[Function]`getStreamSystemMaxVolume() => Promise<number>`   |
+| getStreamSystemVolume       | 该方法获取当前系统音量  | ^[Function]`getStreamSystemVolume() => Promise<number>`   |
+| getStreamRingMaxVolume       | 该方法获取铃声最大音量  | ^[Function]`getStreamRingMaxVolume() => Promise<number>`   |
+| getStreamRingVolume       | 该方法获取铃声当前音量  | ^[Function]`getStreamRingVolume() => Promise<number>`   |
+| getStreamMusicMaxVolume       | 该方法获取最大音乐音量  | ^[Function]`getStreamMusicMaxVolume() => Promise<number>`   |
+| getStreamMusicVolume       | 该方法获取当前音乐音量  | ^[Function]`getStreamMusicVolume() => Promise<number>`   |
+| getStreamAlarmMaxVolume       | 该方法获取最大提示音音量  | ^[Function]`getStreamAlarmMaxVolume() => Promise<number>`   |
+| getStreamAlarmVolume       | 该方法获取当前提示音音量  | ^[Function]`getStreamAlarmVolume() => Promise<number>`   |
+| getStreamMaxVolume       | 该方法获最大音量  | ^[Function]`getStreamMaxVolume(streamType: ESAudioStreamType) => Promise<number>`   |
+| getStreamVolume       | 该方法获当前音量  | ^[Function]`getStreamVolume(streamType: ESAudioStreamType) => Promise<number>`   |
+| adjustStreamVolume       | 该方法调整音量  | ^[Function]`adjustStreamVolume(streamType: ESAudioStreamType, direction: ESAudioDirection, flags: ESAudioManagerFlag) => void`   |
+| setStreamVolume       | 该方法调整音量  | ^[Function]`setStreamVolume(streamType: ESAudioStreamType, volume: number, flags: ESAudioManagerFlag) => void`   |
+| setStreamMute       | 该方法设置静音  | ^[Function]`setStreamMute(streamType: ESAudioStreamType, state: boolean) => void`   |
+

package/rules/.docs/zh-CN/module/brightness.md

@@ -0,0 +1,33 @@
+---
+title: Brightness
+lang: zh-CN
+---
+
+# 屏幕亮度模块
+
+使用此模块可以调节`android`系统的屏幕亮度。
+
+:::demo ## 基础用法
+
+module/brightness/es-basic
+
+:::
+
+:::demo ## qt.brightness 用法 ^(alpha)
+
+module/brightness/qt-basic
+
+:::
+
+## API
+
+### Exposes
+
+| Name                             | Description                 | Type                                           |
+| -------------------------------- | --------------------------- | -----------------------------------------------|
+| getScreenBrightness              | 获取屏幕亮度                   | ^[Function]`() => Promise<ESBrightnessInfo>`   |
+| getWindowBrightness              | 获取窗口亮度                   | ^[Function]`() => Promise<ESBrightnessInfo>`   |
+| getScreenBrightnessMode          | 获取屏幕亮度模式                | ^[Function]`() => Promise<ESBrightnessInfo>`   |
+| getMaxBrightness                 | 获取最大亮度                   | ^[Function]`() => Promise<ESBrightnessInfo>`   |
+| changeWindowBrightness           | 改变窗口亮度                   | ^[Function]`(brightness: number) => void`      |
+| changeScreenBrightness           | 改变屏幕亮度                   | ^[Function]`(systemBrightness: number) => void`|