@quicktvui/ai 1.0.0

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

@@ -0,0 +1,25 @@
+---
+title: 路由错误页面
+lang: zh-CN
+---
+
+# 路由错误页面
+
+当要启动的页面不存在的时候，可以展示一个错误页面。 错误页面需要配置在`RouterOptions`中。以`error`字段为key，入口页面路径为value。 例如：在`RouterOptions`中设置错误页面为`error`。
+
+```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);
+
+```

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

@@ -0,0 +1,70 @@
+---
+title: 集成
+lang: zh-CN
+---
+
+# 集成
+
+## 第1步：`package.json`引入库
+
+```json
+{
+  "@extscreen/es3-router": "^1.1.0"
+}
+```
+
+## 第2步：创建`RouteMap`
+
+创建`routes.ts`加入页面路由配置。
+
+下面以`index.vue`页面为例：
+
+```ts
+import index from "./views/index.vue";
+
+const routes = [
+  {
+    path: '/index',
+    name: 'index',
+    component: index,
+  },
+  {
+    path: '/error',
+    name: 'error',
+    component: error,
+  },
+]
+```
+
+## 第3步：`main.ts`中初始化
+
+```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',
+  limit: 10,
+  routes,
+}
+const router: Router = createESRouter(routerOptions)
+const app: ESApp = createESApp(application, router);
+app.use(install);
+
+```
+
+## 第4步：`App.vue`中初始化
+
+```vue
+
+<template>
+  <div id="root">
+    <es-router-view />
+  </div>
+</template>
+```
+
+配置完成，并且初始化成功后就可以进行页面的跳转了。

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

@@ -0,0 +1,35 @@
+---
+title: 简介
+lang: zh-CN
+---
+
+# 简介
+
+页面路由使用`ESRouter`。
+
+::: tip ESRouter 和 Vue Router 4.x 接口保持一致。
+[`点击查看Router 4.x`](https://router.vuejs.org)
+:::
+
+## 打开页面
+
+示例代码
+
+```ts
+const router = useESRouter()
+router.push({
+  name: 'router/router_zero_page',
+  params: {
+    from: 'router_first'
+  },
+});
+```
+
+## 关闭当前页面
+
+示例代码
+
+```ts
+const router = useESRouter()
+router.back();
+```

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

@@ -0,0 +1,88 @@
+---
+title: 启动模式
+lang: zh-CN
+---
+
+# 启动模式
+
+页面启动有三种模式。
+
+* `Standard`标准模式
+
+  `ESRouteLaunchMode.ES_ROUTE_LAUNCH_MODE_STANDARD`
+* `SingleTask`单任务模式
+
+  `ESRouteLaunchMode.ES_ROUTE_LAUNCH_MODE_SINGLE_TASK`
+* `ClearTask`清空任务模式
+
+  `ESRouteLaunchMode.ES_ROUTE_LAUNCH_MODE_CLEAR_TASK`
+
+下面以4个页面为例，介绍这三种启动模式。
+
+* `A`页面配置启动模式：清空任务模式
+* `B`页面配置启动模式：标准模式
+* `C`页面配置启动模式：标准模式
+* `D`页面配置启动模式：单任务模式
+
+## `Standard`标准模式
+
+`routes.ts`配置
+
+```ts
+  [{
+  path: '/index',
+  name: 'index',
+  component: index,
+  launchMode: ESRouteLaunchMode.ES_ROUTE_LAUNCH_MODE_STANDARD
+}]
+```
+
+* 打开页面：`A` ==> `B`==> `C`==> `D`
+  <img src="/guide/router/lifecycle_standard_launch.png" />
+
+----------
+
+* 关闭页面：`D` ==> `C`==> `B`==> `A`
+  <img src="/guide/router/lifecycle_standard_finish.png" />
+
+## `SingleTask`单任务模式
+
+`routes.ts`配置
+
+```ts
+  [{
+  path: '/index',
+  name: 'index',
+  component: index,
+  launchMode: ESRouteLaunchMode.ES_ROUTE_LAUNCH_MODE_SINGLE_TASK,
+}]
+```
+
+* 打开页面：`B` ==> `D`==> `C`==> `D`
+  <img src="/guide/router/lifecycle_single_task_launch.png" />
+
+----------
+
+* 关闭页面：`D` ==> `B`
+  <img src="/guide/router/lifecycle_single_task_finish.png" />
+
+## `ClearTask`清空任务模式
+
+`routes.ts`配置
+
+```ts
+  [{
+  path: '/index',
+  name: 'index',
+  component: index,
+  launchMode: ESRouteLaunchMode.ES_ROUTE_LAUNCH_MODE_CLEAR_TASK,
+}]
+```
+
+* 打开页面：`B` ==> `C`==> `A`==> `D`
+  <img src="/guide/router/lifecycle_clear_task_launch.png" />
+
+----------
+
+* 关闭页面：`D` ==> `A`
+  <img src="/guide/router/lifecycle_clear_task_finish.png" />

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

@@ -0,0 +1,33 @@
+---
+title: 页面回收策略
+lang: zh-CN
+---
+
+# 页面回收策略
+
+可以设置同时存活的页面的总数量。 开发者可以通过`RouterOptions`配置。
+
+* 打开页面后，如果当前页面堆栈总数量超过`页面的总数量`后，`ES运行环境`会销毁页面堆栈底部相应数量的页面。
+* 关闭页面后，如果当前页面堆栈总数量小于`页面的总数量`时，`ES运行环境`会重新创建之前销毁的页面。
+
+## 通过`RouterOptions`设置
+
+`RouterOptions`中加入`limit`属性既可。
+
+```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',
+  limit: 10,
+  routes,
+}
+const router: Router = createESRouter(routerOptions)
+const app: ESApp = createESApp(application, router);
+app.use(install);
+
+```

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

@@ -0,0 +1,104 @@
+---
+title: 原生路由
+lang: zh-CN
+---
+
+# 原生路由
+
+原生路由(`ESNativeRouter`)是快应用调用安卓页面(`Activity`)解决方案。
+
+## 一、`push` 打开其他快应用
+
+`NativeRouteLocationRaw`参数
+
+| Name            | Description       | Type                       |   Default   |
+| -------------- | ------------------| ----------------------------|---------|
+| pkg            | 包名               | ^[string]                   |   -    |
+| args           | 传递给快应用的参数    | ^[RouteLocationRaw]         |   -    |
+| backgroundColor| 背景颜色            | ^[string]/^[number]         |   -    |
+| transparent    | 是否透明背景         | ^[boolean]                  |   -    |
+| splash         | 是否显示splash      | ^[number]`-1:不显示 0:默认 1:简单` |   -    |
+| version        | 快应用版本号         | ^[string]                   |   -    |
+| minVersion     | 快应用最小版本号      | ^[string]                   |   -    |
+
+::: warning 注意：args 固定格式如下：
+
+```json
+{
+  "url": "",
+  "params": {
+  }
+}
+```
+
+* ***`url`: 启动的快应用的页面的名称***
+* ***`params`: 启动的快应用的页面传递的参数***
+
+:::
+
+示例代码
+
+```ts
+const nativeRouter = useESNativeRouter()
+nativeRouter.push({
+  //1.打开 api demo快应用
+  pkg: 'com.quicktvui.app.api',
+  args: {
+    "url": "home",  //2.打开 home页面
+    "params": {     //3.传递参数 message
+      "message": "hello vue"
+    }
+  }
+})
+```
+
+## 二、`back` 关闭当前快应用
+
+示例代码
+
+```ts
+const nativeRouter = useESNativeRouter()
+nativeRouter.back()
+```
+
+## 三、`launch` 打开其他安卓应用
+
+::: tip 参考 adb shell 命令
+[点击查看 ***`adb shell am start`*** 命令详情](https://developer.android.google.cn/tools/adb?hl=en#IntentSpec)
+:::
+
+启动参数
+
+| Name          | Description        | Type                          |   Default   |
+| -------------- | ------------------| ----------------------------- |---------|
+| -p           | package_name        | ^[string]           |   -     |
+| -a           | action              | ^[string]           |   -    |
+| -d           | data_uri            | ^[string]           |   -    |
+| -n           | component           | ^[string]           |   -    |
+| -e           | extra_key extra_string_value| ^[string]           |   -    |
+
+::: warning 注意：`launch`方法的参数是二维数组
+:::
+
+示例代码
+
+```ts
+const nativeRouter = useESNativeRouter()
+//打开腾讯视频
+nativeRouter.launch(
+  //二维数组
+  [
+    ['-d', 'tenvideo2://?action=1&cover_id=mzc00200tq7m03f&stay_flag=1&pull_from=1024041']
+  ]
+)
+```
+
+## 四、`launchByPackage` 根据包名打开其他安卓应用
+
+示例代码
+
+```ts
+const nativeRouter = useESNativeRouter()
+//打开腾讯视频
+nativeRouter.launchByPackage('com.ktcp.video')
+```

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

@@ -0,0 +1,42 @@
+---
+title: 回传数据
+lang: zh-CN
+---
+
+# 回传数据
+
+你可以在[quicktvui-playground](https://github.com/quicktvui/quicktvui-playground/tree/master/es-page-result) 上查看示例。
+
+## 第 1 步：`A`页面打开`B`页面的时候，注册回传数据监听
+
+`A`页面：注册`resultCallback`数据回传监听
+
+```ts
+router.push({
+  name: 'B',
+  //注册回传数据监听
+  resultCallback: {
+    onResult(result: RouteResult): Promise<RouteResultData> | void {
+      console.log('------收到B页面回传的数据------->', ret);
+      return Promise.resolve("收到B页面回传的数据后，发送给B页面的数据")
+    }
+  }
+})
+```
+
+## 第 2 步：在打开的`B`页面上回传数据
+
+`B`页面：调用`setResult`方法回传数据
+
+```ts
+const router = useESRouter()
+router.setResult({
+  resultCode: RouteResultCode.ROUTE_RESULT_OK,
+  //发送给A页面的数据
+  data: {
+    msg: 'hello~~~'
+  }
+}).then((ret) => {
+  console.log('-----收到A页面回传的数据-------->', ret);
+})
+```

package/rules/.docs/zh-CN/guide/sfc-component/async-component.md

@@ -0,0 +1,88 @@
+---
+title: AsyncComponent
+lang: zh-CN
+---
+
+# 异步组件
+
+Vue 3 提供的异步加载组件的功能，它允许我们在需要时才去加载某个组件或页面，而不是一开始就把所有组件或页面都加载到页面中。这样可以有效地减少首屏加载时间，尤其是当项目中组件数量庞大时，异步加载组件可以极大提高应用的性能。
+
+::: tip 异步加载两种方式
+
+* 使用异步组件`defineAsyncComponent`实现组件异步加载
+
+  ***点击查看 [defineAsyncComponent 官方文档](https://vuejs.org/guide/components/async.html)***
+
+* 使用异步路由`Async Router`实现页面异步加载
+
+  ***点击查看 [异步路由](/zh-CN/guide/router/async)***
+
+:::
+
+------------------
+
+***以下介绍异步加载组件实现方式`defineAsyncComponent`***
+
+## 第一步、定义子组件  `child-component.vue`
+
+```vue
+
+<template>
+  <div class="es-component-child-css">
+    <span>异步组件加载的子组件</span>
+    <img class="es-component-child-img-css" :src="star" />
+  </div>
+</template>
+
+<script lang="ts">
+
+import { defineComponent } from "@vue/runtime-core";
+import star from '../../assets/star.png'
+
+export default defineComponent({
+  name: 'Child',
+  setup() {
+    return {
+      star
+    }
+  },
+});
+
+</script>
+```
+
+## 第二步、定义父组件
+
+```vue
+
+<template>
+  <div class="es-sdk-root-css">
+    <AsyncChild class="es-sdk-async-child-css" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+import { defineAsyncComponent } from "@vue/runtime-core";
+
+//使用 defineAsyncComponent 加载子组件
+const AsyncChild = defineAsyncComponent(
+  () => import('./child-component.vue'))
+
+</script>
+
+<style>
+.es-sdk-async-child-css {
+  width: 200px;
+  height: 200px;
+  background-color: #F20C00;
+}
+</style>
+
+```
+
+::: warning 注意：异步组件必须在编译时使用 webpack @extscreen/es3-dynamic-import-plugin 插件
+
+[点击查看使用 es3-dynamic-import-plugin 插件 ](/zh-CN/guide/compile/split-chunks)
+
+:::

package/rules/.docs/zh-CN/guide/sfc-component/native-component.md

@@ -0,0 +1,127 @@
+---
+title: NativeComponent
+lang: zh-CN
+---
+
+# 自定义原生组件
+
+## 第一步、注册 Element
+
+* 安卓端自定义了个原生组件 `XXXNativeComponent`。
+* 在 `main.ts`中调用`registerElement`注册`Element`
+
+```ts
+import { registerElement } from "@extscreen/es3-vue";
+
+const xxxxElement = {
+  component: {
+    // 1. XXXNativeComponent 对应 android 端组件的名称
+    name: 'XXXNativeComponent',
+    processEventData(evtData, nativeEventParams: {
+      eventName: string
+      eventData: string
+    }) {
+      const { handler: event, __evt: nativeEventName } = evtData;
+      // 2. 处理 android 端组件发出的事件，并处理参数
+      switch (nativeEventName) {
+        // android 端发出事件 onXXXNativeEvent
+        case 'onXXXNativeEvent':
+          event.eventName = nativeEventParams.eventName;
+          event.eventData = nativeEventParams.eventData;
+          break;
+        default:
+          break;
+      }
+      return event;
+    },
+  },
+}
+registerElement('XXXNativeComponent', xxxxElement);
+
+```
+
+::: warning 注意：注册的 Element 的 tag 和 name 都要和 android 端注册的组件的名称相同。
+:::
+
+## 第二步、封装 Component
+
+* 渲染 `XXXNativeComponent` `Element`。
+* 在 `ESApp`中调用`component`方法注册`component`
+
+```ts
+import { ESApp, Native, registerElement } from "@extscreen/es3-vue";
+
+// 1、自定义vue component 名称为：xxx-view
+app.component('XxxView', {
+  // XXX-event 事件
+  emits: [
+    'XXX-event',
+  ],
+  setup(props, context) {
+    const viewRef = ref()
+
+    //2、自定义组件方法
+    function setXXXParams(text: string) {
+      //调用 android 端组件的 setXXXParamsXXX 方法
+      Native.callUIFunction(viewRef.value, 'setXXXParamsXXX', [text], (res) => {
+        //
+      });
+    }
+
+    context.expose({
+      //3.暴露组件方法
+      setXXXParams,
+    })
+    return () => {
+      const children = context.slots.default && context.slots.default()
+      return h(
+        //4.调用h函数渲染 XXXNativeComponent Element
+        'XXXNativeComponent',
+        {
+          ref: viewRef,
+          //5.接受 android 组件发出的 onXXXNativeEvent 事件，并转发 XXX-event 事件
+          onXXXNativeEvent: (evt) => {
+            context.emit('XXX-event', evt.eventName, evt.eventData);
+          },
+        },
+        //6. 渲染slot
+        children
+      )
+    }
+  },
+});
+```
+
+## 第三步、使用 Component
+
+```vue
+
+<template>
+  <!-- 使用 xxx-view 组件-->
+  <xxx-view class="es-sdk-root-css" />
+</template>
+<script>
+
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: 'Index',
+  setup() {
+    //
+    return {
+      //
+    }
+  },
+});
+
+</script>
+<style>
+.es-sdk-root-css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>
+
+```
+
+

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

@@ -0,0 +1,42 @@
+# 轻卡开发
+
+## 一、开发轻卡
+
+和开发快应用相同，只需要编写一个普通的vue组件。
+
+以`home.vue`为例
+
+:::demo
+
+guide/slot/basic
+
+:::
+
+## 二、注册轻卡
+
+在`main.ts`路由表中注册第一步编写的组件
+
+```js
+import home from "./views/home.vue";
+
+const routes = [
+  {
+    path: '/home',
+    name: 'home',
+    component: home,
+  }
+]
+```
+
+## 三、调试轻卡
+
+```shell
+adb shell am start -d 'ejs://debug?name=home&uri=http://192.168.40.180:38989'
+```
+
+* `name`参数指定路由的名称
+* `uri`参数指定调试的IP地址
+
+## 四、查看调试效果
+
+<img width="95%" src="/guide/slot/hello-jsview.png" />