@quicktvui/ai 1.0.0

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

@@ -0,0 +1,179 @@
+---
+title: 'NodeInstall'
+lang: zh-CN
+---
+
+# Node 升级与降级
+
+在 Node.js 开发中，有时需要切换不同的 Node.js 版本以满足不同项目的需求。以下是一些常用的方法来管理和切换 Node.js 版本：
+
+### 一、使用 `nvm`（Node Version Manager）
+
+`nvm` 是一个流行的 Node.js 版本管理工具，允许你在同一台机器上安装和切换多个 Node.js 版本。
+
+#### 安装 `nvm`
+
+- **在 macOS 或 Linux 上**： 你可以通过以下命令安装 `nvm`（假设你使用的是 Bash shell）：
+
+  ```sh
+  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
+  ```
+
+  或者，使用 `wget`：
+
+  ```sh
+  wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
+  ```
+
+  安装完成后，重新加载 shell 配置文件（例如 `.bashrc`、`.zshrc` 等）：
+
+  ```sh
+  source ~/.bashrc
+  ```
+
+  或者：
+
+  ```sh
+  source ~/.zshrc
+  ```
+
+- **在 Windows 上**： 你可以从 [nvm-windows GitHub 仓库](https://github.com/coreybutler/nvm-windows/releases) 下载并安装 `nvm-windows`
+  。
+
+#### 使用 `nvm` 安装和切换 Node.js 版本
+
+- **列出所有可用的 Node.js 版本**：
+
+  ```sh
+  nvm ls-remote
+  ```
+
+- **安装特定版本的 Node.js**：
+
+  ```sh
+  nvm install <version>
+  ```
+
+  例如，安装 Node.js 14.17.0：
+
+  ```sh
+  nvm install 14.17.0
+  ```
+
+- **使用特定版本的 Node.js**：
+
+  ```sh
+  nvm use <version>
+  ```
+
+  例如，使用 Node.js 14.17.0：
+
+  ```sh
+  nvm use 14.17.0
+  ```
+
+- **设置默认版本的 Node.js**：
+
+  ```sh
+  nvm alias default <version>
+  ```
+
+  例如，将默认版本设置为 Node.js 14.17.0：
+
+  ```sh
+  nvm alias default 14.17.0
+  ```
+
+### 二、使用 `n`（Node Version Manager）
+
+`n` 是另一个 Node.js 版本管理工具，它允许你安装、卸载和切换不同的 Node.js 版本。
+
+#### 安装 `n`
+
+你可以通过 npm 安装 `n`：
+
+```sh
+npm install -g n
+```
+
+#### 使用 `n` 安装和切换 Node.js 版本
+
+- **列出所有可用的 Node.js 版本**：
+
+  ```sh
+  n ls
+  ```
+
+- **安装特定版本的 Node.js**：
+
+  ```sh
+  n <version>
+  ```
+
+  例如，安装 Node.js 14.17.0：
+
+  ```sh
+  n 14.17.0
+  ```
+
+- **切换到已安装的版本**（`n` 会自动管理已安装的版本）：
+
+  ```sh
+  n use <version>
+  ```
+
+  例如，使用 Node.js 14.17.0：
+
+  ```sh
+  n use 14.17.0
+  ```
+
+### 三、使用 `fnm`（Fast and Simple Node Version Manager）
+
+`fnm` 是一个快速且简单的 Node.js 版本管理工具。
+
+#### 安装 `fnm`
+
+你可以通过以下命令安装 `fnm`：
+
+```sh
+curl -fsSL https://github.com/Schniz/fnm/releases/download/v1.23.3/fnm_linux_amd64.tar.gz | tar xz -C /tmp && sudo mv /tmp/fnm /usr/local/bin
+```
+
+（注意：根据你的操作系统和架构，下载链接可能会有所不同）
+
+#### 使用 `fnm` 安装和切换 Node.js 版本
+
+- **列出所有可用的 Node.js 版本**：
+
+  ```sh
+  fnm ls-remote
+  ```
+
+- **安装特定版本的 Node.js**：
+
+  ```sh
+  fnm install <version>
+  ```
+
+  例如，安装 Node.js 14.17.0：
+
+  ```sh
+  fnm install 14.17.0
+  ```
+
+- **使用特定版本的 Node.js**：
+
+  ```sh
+  fnm use <version>
+  ```
+
+  例如，使用 Node.js 14.17.0：
+
+  ```sh
+  fnm use 14.17.0
+  ```
+
+### 四、总结
+
+根据你的需求和操作系统，选择适合你的 Node.js 版本管理工具。`nvm` 是最流行和功能最强大的工具之一，但 `n` 和 `fnm` 也提供了简单和快速的解决方案。

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

@@ -0,0 +1,74 @@
+---
+title: 'NpmInstall'
+lang: zh-CN
+---
+
+# npm 升级与降级
+
+要切换`npm`（Node Package Manager）的版本，可以按照以下步骤进行操作：
+
+***一、检查当前`npm`版本***
+
+首先，打开终端或命令提示符窗口，输入以下命令来检查当前安装的版本：
+
+```shell
+npm -v
+```
+
+**二、卸载当前`npm`版本 在降低`npm`版本之前，需要先卸载当前安装的`npm`版本。**
+
+可以使用以下命令全局卸载`npm`。
+
+::: warning 注意： 此步骤在某些情况下可能不是必需的，因为安装指定版本的 npm 时会自动覆盖旧版本。 但为了确保操作的干净性，建议执行此步骤。
+:::
+
+```shell
+npm uninstall npm -g
+```
+
+***三、安装指定版本的`npm`***
+
+接下来，使用以下命令全局安装指定版本的`npm`
+
+* 将 version 替换为你想要安装的`npm`版本号，例如5.6.0：
+
+```shell
+npm install -g npm@<version>
+```
+
+例如，要安装`npm`的5.6.0版本，可以使用以下命令：
+
+```shell
+npm install -g npm@5.6.0
+```
+
+* @后跟版本号，若跟的是大版本，则更新到对应大版本最新的小版本
+
+```shell
+npm install -g npm@6
+```
+
+***四、安装最新版本`npm`***
+
+接下来，使用以下命令全局安装最新版本的`npm`
+
+```shell
+npm install -g npm
+```
+
+***五、验证安装的`npm`版本***
+
+安装完成后，再次使用`npm -v`命令来验证已安装的`npm`版本是否正确。
+
+如果输出的版本号是你指定的版本号，说明降级成功。
+
+***六、注意事项***
+
+* 权限问题：在某些系统上，卸载和安装`npm`可能需要管理员权限。如果遇到权限问题，请尝试使用管理员权限运行命令提示符或终端。
+
+* Node.js版本兼容性：`npm`版本与`Node.js`版本之间存在一定的兼容性关系。在降低`npm`版本之前，请确保所选的npm版本与你的`Node.js`版本兼容。
+
+* 依赖包兼容性：降低npm版本可能会导致某些依赖包不再兼容。因此，在降低版本之前，请确保你已经了解了可能的风险，并做好备份工作。
+
+* 使用`cnpm`或`nvm`：在某些情况下，你可以使用`cnpm`（npm的中国镜像）或`nvm`（Node Version Manager）来更方便地管理`npm`版本和`Node.js`版本。 例如，使用`cnpm`
+  可以加速`npm`包的下载和安装；使用nvm可以轻松切换和管理不同的`Node.js`和`npm`版本。

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

@@ -0,0 +1,41 @@
+---
+title: Overview
+lang: zh-CN
+---
+
+# 概述
+
+## QuickTVUI是什么？
+
+QuickTVUI是一个使用 Vue3、JavaScript、TypeScript 和 CSS 构建安卓电视应用程序的框架。
+使用QuickTVUI可快速创建在安卓电视上运行的应用，不需要安卓开发经验。
+
+
+## 基本要求
+
+本教程假设您已经对前端 Web 开发和`Vue3`开发有一定地了解。
+
+如果您还需要了解一些背景知识，我们推荐您阅读：
+
+* [Web 入门 (MDN Web Docs)](https://developer.mozilla.org/en-US/docs/Learn/)
+* [Vue.js](https://vuejs.org)
+
+## 开发者必读
+
+::: warning 注意：QuickTVUI 和传统 Vue3 前端开发有部分差异
+:::
+
+点击下方链接快速了解 QuickTVUI 开发和 Vue3 前端开发的***相同和差异***。
+
+* [开发工具](/zh-CN/guide/basic/dev-tools)
+* [开发语言](/zh-CN/guide/basic/language)
+* [编译和打包工具](/zh-CN/guide/compile/pack)
+* [布局](/zh-CN/guide/layout/layout)
+* [样式](/zh-CN/guide/layout/style)
+* [适配](/zh-CN/guide/layout/adapter)
+* [焦点](/zh-CN/guide/focus/basic)
+* [网络请求](/zh-CN/guide/network/fetch)
+* [开发相关问题](/zh-CN/guide/faq/develop-faq)
+* [布局样式相关问题](/zh-CN/guide/faq/layout-style-faq)
+
+

package/rules/.docs/zh-CN/guide/page/application-lifecycle.md

@@ -0,0 +1,37 @@
+---
+title: App生命周期
+lang: zh-CN
+---
+
+# App生命周期
+
+在`main.ts`中创建Application
+
+```ts
+import application from './App.vue';
+
+const app: ESApp = createESApp(application, routerOptions);
+```
+
+::: warning 注意：
+
+生命周期方法前面不能添加`async`关键字。
+
+下面的方法使用错误
+```js
+async function onESCreate(){
+  //
+}
+```
+
+:::
+
+在`App.vue`中监听Application生命周期。
+
+:::demo ## 基础用法
+
+module/page/es-app-lifecycle
+
+:::
+
+

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

@@ -0,0 +1,32 @@
+---
+title: 生命周期简介
+lang: zh-CN
+---
+
+# 生命周期简介
+
+## 生命周期图解
+
+<img src="/guide/page/lifecycle.png" />
+
+## 生命周期详解
+
+* `onESCreate(params)`
+  在`ESPage`被创建时候进行回调，第一个生命周期。
+  在该方法中主要进行初始化操作，设置界面布局资源，初始化界面的组件信息等。
+  `params`中存放的是启动此页面的参数。
+
+* `onESRestart()`
+  当`ESPage`已经停止然后重新被启动时会调用`onESRestart()`。
+* `onESStart()`
+  当`ESPage`可见未获得用户焦点不能交互时会调用`onESStart()`。
+* `onESResume()`
+  当`ESPage`可见且获得用户焦点能交互时会调用`onESResume()`。
+* `onESPause()`
+  此方法调用后，`ESPage`正在停止，其后会调用`onESStop()`方法。
+* `onESStop()`
+  当`ESPage`被新的`ESPage`完全覆盖不可见时会调用`onESStop()`。
+* `onESDestroy()`
+  当`ESPage`被销毁时调用`onESDestroy()`。
+* `onESNewIntent()`
+  当`ESPage`设置启动模式为`SingleTask`。用户打开之前已经打开过的相同的页面，会调用此页面`onESNewIntent()`。

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

@@ -0,0 +1,35 @@
+---
+title: 生命周期简介
+lang: zh-CN
+---
+
+# Page生命周期
+
+::: warning 注意：
+
+1、声明在路由表 routes.ts 里面的组件才能作为快应用的 Page 。
+
+2、生命周期方法前面不能添加`async`关键字。
+
+下面的方法使用错误
+```js
+async function onESCreate(){
+  //
+}
+```
+:::
+
+::: tip 提示：Page 生命周期只能触发在 “ 声明在 routes.ts 路由表里面的 Page 组件 ”
+
+* `home.vue`声明在了`routes.ts`，所以`home.vue`是快应用的页面，可以监听生命周期。
+* `home-child-component.vue`没有声明在`routes.ts`，不是快应用的页面，不可以监听生命周期。
+
+<img src="/guide/page/page_lifecycle_warning.png" />
+
+:::
+
+:::demo ## 基础用法
+
+module/page/es-page-lifecycle
+
+:::

package/rules/.docs/zh-CN/guide/page/page-state.md

@@ -0,0 +1,31 @@
+---
+title: Page状态管理
+lang: zh-CN
+---
+
+# Page状态管理
+
+`ES运行环境`根据所需会销毁和重新创建`ESRouter`堆栈中的页面。 这个时候就需要根据所需在销毁的保存页面状态。 在重新创建页面的时候恢复页面状态。
+
+## 保存页面状态
+
+`ES运行环境`在销毁页面之前会调用页面方法`onESSaveInstanceState(savedInstanceState)`
+开发者可以在`savedInstanceState`对象中保存数据。
+
+调用顺序为`onESPause()` ==> `onESSaveInstanceState(savedInstanceState)`
+==> `onESStop()` ==> `onESDestroy()`
+
+## 恢复页面状态
+
+`ES运行环境`在重新创建页面之前会调用页面方法`onESRestoreInstanceState(savedInstanceState)`
+开发者可以在`savedInstanceState`获取在页面销毁时保存的数据。
+
+调用顺序为`onESStart()` ==> `onESRestoreInstanceState(savedInstanceState)`
+==> `onESResume()`
+
+:::demo ## 代码示例
+
+module/page/es-page-state
+
+:::
+

package/rules/.docs/zh-CN/guide/page/type.md

@@ -0,0 +1,49 @@
+---
+title: Page状态管理
+lang: zh-CN
+---
+
+# 页面类型
+
+::: warning 注意：声明在路由表 routes.ts 里面的组件才能作为快应用的 Page 或者 Dialog。
+`routes.ts`配置的路由，如果不添加类型，则默认是 Page 类型。
+:::
+
+
+## 页面类型
+
+路由配置中添加类型：`type: ESRouteType.ES_ROUTE_TYPE_PAGE`
+
+下面以`index.vue`页面为例：
+
+```ts
+import index from "./views/index.vue";
+
+const routes = [
+  {
+    path: '/index',
+    name: 'index',
+    component: index,
+    type: ESRouteType.ES_ROUTE_TYPE_PAGE
+  },
+]
+```
+
+## 对话框类型
+
+下面以`index.vue`页面为例：
+
+路由配置中添加类型：`type: ESRouteType.ES_ROUTE_TYPE_DIALOG`
+
+```ts
+import index from "./views/index.vue";
+
+const routes = [
+  {
+    path: '/index',
+    name: 'index',
+    component: index,
+    type: ESRouteType.ES_ROUTE_TYPE_DIALOG
+  },
+]
+```

package/rules/.docs/zh-CN/guide/publish/hub.md

@@ -0,0 +1,31 @@
+---
+title: 'Hub'
+lang: zh-CN
+---
+
+# 发布
+## 中心仓库
+[QuickTV中心仓库](http://hub.quicktv.net/)是官方提供的公共资源仓库，你可以在这里发布你的快应用。它主要功能有：
+* 注册、登录
+* 创建组织
+* 创建快应用
+* 管理发布
+* 资源管理
+
+<img src="/guide/publish/hub.png">
+
+## 发布
+
+项目开发完成后，可以使用`qui publish`命令发布你的快应用。
+
+具体步骤请参考[QuickTV中心仓库](http://hub.quicktv.net/)。
+
+完成后，试着使用`qui start @你的组织@你的包名`命令打开应用,例如
+```shell
+qui start @quicktvui/api-demo
+```
+当在`Runtime`上成功运行后，恭喜你，你的应用已经成功发布！
+
+以后，它将可以在任意集成快应用`Runtime SDK`的应用上运行！
+
+

package/rules/.docs/zh-CN/guide/publish/release-apk.md

@@ -0,0 +1,51 @@
+---
+title: 'ReleaseAPK'
+lang: zh-CN
+---
+
+# 打包 APK
+
+如果你有了一个成功发布的快应用，你可以将它们打包成自己的APK，并且可以通过[QuickTV中心仓库](http://hub.quicktv.net/)来随时更新你的快应用。
+
+## 一、克隆打包项目
+
+```shell
+git clone https://github.com/quicktvui/quicktvui-apk-builder.git
+```
+
+## 二、配置
+
+### 1、 配置打包环境
+
+进入`quicktvui-apk-builder` 项目根目录，修改`app/local.properties`文件:
+
+::: tip
+***AndroidSDK路径修改为自己电脑的SDK路径***
+***sdk.dir=AndroidSDK路径***
+:::
+
+### 2、 配置打包信息
+
+进入`quicktvui-apk-builder` 项目根目录，修改`app.json`:
+
+```
+{
+  "_load_app": "@quicktvui/api-demo"        // 指定的快应用
+  "_app_package": "com.quicktv.sample",     // 输出APK的包名
+  "_app_name": "QuickTV-Sample",            // 输出APK的名称
+  "_version_code": 1,                       // 输出APK的版本号
+  "_version_name": "1.0.0",                 // 输出APK的版本名称
+  "_repository": "http://hub.quicktvui.com/repository/rpk", // 默认app加载源地
+}
+```
+
+## 三、打包
+
+进入`quicktvui-apk-builder` 项目根目录下面执行如下命令：
+
+``` bash
+# 生成debug包
+./gradlew app:assembleDebug
+# 生成release包
+./gradlew app:assembleRelease
+```

package/rules/.docs/zh-CN/guide/publish/release-rpk.md

@@ -0,0 +1,45 @@
+---
+title: 'ReleaseRPK'
+lang: zh-CN
+---
+
+# 打包 RPK
+
+
+## 打包 RPK 方式
+
+### 一、使用 [`qui pack`](/zh-CN/tool/cli/pack) 命令打包
+
+项目根目录下，执行`qui pack`命令。 执行完毕，打包好的`rpk`在`dist`目录下。
+
+### 二、使用 [`qui build`](/zh-CN/tool/cli/build) 命令打包
+
+项目根目录下，执行`qui build`命令。 执行完毕，打包好的`rpk`在`dist`目录下。
+
+### 三、使用 `npm pack`命令打包
+
+执行`package.json`中的`pack`命令
+
+```json
+{
+  "scripts": {
+    "pack": "tsx ./scripts/pack.ts"
+  }
+}
+```
+
+### 四、手动打包
+
+1. 执行`npm build`命令后，在根目录下生成`dist`文件夹。`./dist`中的`android`目录里面是编译产物。`.dist/android`文件夹一般包含：
+
+- `vendor.android.js`
+- `index.android.js`
+- 其他
+
+::: warning 注意：vendor.android.js 和 index.android.js 为固定名称，不能更改。
+:::
+
+2. 手动压缩`android`文件夹为`android.zip`。
+
+::: warning 注意：压缩目录为 android 文件夹，即 android/* 。不能是 dist/android 文件夹，也不能去掉 android 目录。
+:::

package/rules/.docs/zh-CN/guide/router/async.md

@@ -0,0 +1,25 @@
+---
+title: 异步路由
+lang: zh-CN
+---
+# 异步路由
+
+::: warning 注意：异步路由前提必须使用异步加载机制。
+[点击查看编译分包和异步加载](/zh-CN/guide/compile/split-chunks)
+:::
+
+`routes.ts`引入异步组件 引入方式：
+`() => import('xxx.vue')`
+
+```ts
+const routes = [
+  {
+    path: '/async-component',
+    name: 'async-component',
+    //示例如下：
+    component: () => import('./views/async/index.vue')
+  }
+]
+```
+
+配置完成，路由会异步加载此路由。

package/rules/.docs/zh-CN/guide/router/entry.md

@@ -0,0 +1,60 @@
+---
+title: 应用入口
+lang: zh-CN
+---
+
+# 应用入口
+
+## 自动打开入口页面（默认）
+
+应用的入口需要配置在`RouterOptions`中。以`main`字段为key，入口页面路径为value。
+
+例如：在`RouterOptions`中设置应用入口页面为`index`。应用启动后自动打开`index`页面。
+
+```ts
+
+import { createESRouter } from '@extscreen/es3-router'
+import routes from "./routes.ts";
+import type { Router } from '@extscreen/es3-router';
+
+const routerOptions = {
+  main: 'index',
+  error: 'error',
+  routes,
+}
+const router: Router = createESRouter(routerOptions)
+const app: ESApp = createESApp(application, router);
+app.use(install);
+
+```
+
+## 手动打开入口页面
+
+### 第一步、关闭自动跳转页面
+
+在`app.vue`的`setup`中调用：
+
+```ts
+import { useESRouterManager } from "@extscreen/es3-core";
+
+const routerManager = useESRouterManager();
+routerManager.setAutoRedirectEnabled(false);
+```
+
+### 第二步、手动跳转页面
+
+在`app.vue`的声明周期方法`onESCreated`中调用：
+
+```ts
+const router = useESRouter();
+
+router.push({
+  name: '需要跳转的页面路由名称',
+  params: {},//需要跳转的页面路由参数
+});
+```
+:::demo ## 完整示例
+
+guide/router/app
+
+:::