@quicktvui/ai 1.0.0

package/rules/.docs/zh-CN/guide/compile/obfuscator.md

@@ -0,0 +1,56 @@
+---
+title: Obfuscator
+lang: zh-CN
+---
+
+# 混淆
+
+::: tip 项目使用 Webpack 进行编译和打包
+
+* 点击查看 [Webpack 文档](https://webpack.docschina.org/concepts/)
+
+* 点击查看 [quicktvui-playground 示例](https://github.com/quicktvui/quicktvui-playground/tree/master/es-split-chunks)
+
+* 点击查看 [TerserWebpackPlugin 文档](https://webpack.docschina.org/plugins/terser-webpack-plugin/)
+
+:::
+
+使用 `TerserPlugin` 和 `WebpackObfuscator`进度代码优化和混淆
+
+`webpack.android.js`配置示例如下：
+
+```js
+const TerserPlugin = require("terser-webpack-plugin");
+const WebpackObfuscator = require('webpack-obfuscator');
+
+module.exports = {
+  plugins: [
+    new WebpackObfuscator({
+      rotateStringArray: true
+    }, [''])
+  ],
+  optimization: {
+    moduleIds: 'named',
+    minimize: true,
+    minimizer: [new TerserPlugin({
+      parallel: true,
+      terserOptions: {
+        output: {
+          // 是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，可以设置为false
+          beautify: false,
+          // 是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false
+          comments: false
+        },
+        compress: {
+          warnings: false,
+          drop_debugger: true,
+          drop_console: true,
+          pure_funcs: ['console.log']
+        },
+      },
+      extractComments: false,
+    })]
+  }
+}
+```
+

package/rules/.docs/zh-CN/guide/compile/pack.md

@@ -0,0 +1,8 @@
+---
+title: 'PackageManager'
+lang: zh-CN
+---
+
+# 编译和打包工具
+
+QuickTVUI 暂时只支持 ***Webpack*** 编译和打包。

package/rules/.docs/zh-CN/guide/compile/resource.md

@@ -0,0 +1,96 @@
+---
+title: Resource
+lang: zh-CN
+---
+
+# 文件资源
+
+::: tip 项目使用 Webpack 进行编译和打包
+
+* 点击查看 [Webpack 文档](https://webpack.docschina.org/concepts/)
+
+* 点击查看 [quicktvui-playground 示例](https://github.com/quicktvui/quicktvui-playground/tree/master/es-split-chunks)
+
+* 点击查看 [Vue Loader 官方文档](https://vue-loader.vuejs.org/zh-CN/guide/asset-url.html)
+
+:::
+
+::: warning 推荐使用 file-loader 编译文件资源（图片和文件）
+
+***1、图片使用`import`方式加载。`import logo from '../../assets/logo.png'`***
+
+***2、`file-loader`不支持使用`require`***
+
+```vue
+
+<template>
+  <div>
+    <img src="../../assets/logo.png"/>
+    <img :src="logo"/>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+//file-loader 不支持使用 require
+import logo from '../../assets/logo.png'
+
+export default defineComponent({
+  setup() {
+    return {
+      logo
+    }
+  },
+});
+</script>
+```
+
+:::
+
+### 一、使用 `url-loader` 编译
+
+`webpack.android.js`配置示例如下：
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        use: [{
+          loader: 'url-loader',
+          options: {
+            limit: true,
+          },
+        }],
+      }
+    ]
+  }
+}
+```
+
+### 二、使用 `file-loader` 编译
+
+`webpack.android.js`配置示例如下：
+
+```js
+module.exports = {
+  output: {
+    //
+    //资源命名规则
+    assetModuleFilename: '[hash][ext][query]'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        type: 'asset/resource',
+        generator: {
+          outputPath: 'assets/',
+          publicPath: 'assets/',
+        }
+      }
+    ]
+  }
+}
+```

package/rules/.docs/zh-CN/guide/compile/split-chunks.md

@@ -0,0 +1,66 @@
+---
+title: SplitChunks
+lang: zh-CN
+---
+
+# 代码分割和异步加载
+
+::: tip 项目使用 Webpack 进行编译和打包
+
+* 点击查看 [Webpack 文档](https://webpack.docschina.org/concepts/)
+
+* 点击查看 [quicktvui-playground 示例](https://github.com/quicktvui/quicktvui-playground/tree/master/es-split-chunks)
+
+* 点击查看 [Webpack SplitChunksPlugin 文档](https://webpack.docschina.org/plugins/split-chunks-plugin/)
+
+:::
+
+::: warning 注意： 分包和动态引入必须使用 ESDynamicImportPlugin 插件
+:::
+
+`webpack.android.js`配置示例如下：
+
+```js
+//1. 引入插件
+const ESDynamicImportPlugin = require('@extscreen/es3-dynamic-import-plugin');
+module.exports = {
+  output: {
+    //2.设置公共路径为 ./，不可更改路径
+    publicPath: './',
+  },
+  plugins: [
+    //3. 注册插件
+    new ESDynamicImportPlugin(),
+  ],
+  optimization: {
+    //4.分包方案
+    splitChunks: {
+      chunks: 'all',
+      minSize: 20000,
+      minRemainingSize: 0,
+      minChunks: 1,
+      maxAsyncRequests: 30,
+      maxInitialRequests: 30,
+      enforceSizeThreshold: 50000,
+      cacheGroups: {
+        defaultVendors: {
+          test: /[\\/]node_modules[\\/]/,
+          priority: -10,
+          reuseExistingChunk: true,
+          //注意: 必须命名为"vendor.android.js"
+          filename: "vendor.android.js"
+        },
+        default: {
+          minChunks: 2,
+          priority: -20,
+          reuseExistingChunk: true,
+        },
+      },
+    },
+  },
+}
+```
+
+::: warning 注意：filename 必须命名为"vendor.android.js"
+:::
+

package/rules/.docs/zh-CN/guide/dark-mode.md

@@ -0,0 +1,84 @@
+---
+title: Dark Mode
+lang: zh-CN
+---
+
+# Dark Mode ^(2.2.0)
+
+After a long time, QuickTVUI supports dark mode!
+
+We extracted and unified all necessary variables to make it possible to implement based on CSS Vars.
+
+## How to enable it?
+
+First you can create a switch to toggle `dark` class of html.
+
+> If you only need dark mode, just add `dark` class for html.
+
+```html
+<html class="dark">
+  <head></head>
+  <body></body>
+</html>
+```
+
+> If you want to toggle it, i recommend [useDark | VueUse](https://vueuse.org/core/useDark/).
+
+Then, you can quickly enable it with just one line of code to import CSS in your entry.
+
+```ts
+// main.ts
+// if you just want to import css
+import 'element-plus/theme-chalk/dark/css-vars.css'
+```
+
+> If you want an example, you can refer to [element-plus-vite-starter](https://github.com/element-plus/element-plus-vite-starter).
+
+## Custom variables
+
+### By CSS
+
+Just override it by CSS Vars.
+
+For example, new file `styles/dark/css-vars.css`:
+
+```css
+html.dark {
+  /* custom dark bg color */
+  --el-bg-color: #626aef;
+}
+```
+
+Import it after styles of QuickTVUI:
+
+```ts
+// main.ts
+import 'element-plus/theme-chalk/dark/css-vars.css'
+import './styles/dark/css-vars.css'
+```
+
+### By SCSS
+
+If you use scss, you can also import scss file to compile.
+
+> You can refer [Theming](./theming.md) to get more info.
+
+```scss
+// styles/element/index.scss
+/*just override what you need*/
+@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
+  $bg-color: (
+    'page': #0a0a0a,
+    '': #626aef,
+    'overlay': #1d1e1f,
+  )
+);
+```
+
+```ts
+// main.ts
+import './styles/element/index.scss'
+
+// or just want to import scss?
+// import 'element-plus/theme-chalk/src/dark/css-vars.scss'
+```

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

@@ -0,0 +1,34 @@
+---
+title: Design
+lang: zh-CN
+---
+
+# 设计原则
+
+<design-guide />
+
+## 一致 Consistency
+
+- **与现实生活一致:** 与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
+
+- **在界面中一致:** 所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
+
+## 反馈 Feedback
+
+- **控制反馈:** 通过界面样式和交互动效让用户可以清晰的感知自己的操作；
+
+- **页面反馈:** 操作后，通过页面元素的变化清晰地展现当前状态。
+
+## 效率 Efficiency
+
+- **简化流程:** 设计简洁直观的操作流程；
+
+- **清晰明确:** 语言表达清晰且表意明确，让用户快速理解进而作出决策；
+
+- **帮助用户识别:** 界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
+
+## 可控 Controllability
+
+- **用户决策:** 根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
+
+- **结果可控:** 用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

package/rules/.docs/zh-CN/guide/dev-faq.md

@@ -0,0 +1,41 @@
+---
+title: Development FAQ
+lang: zh-CN
+---
+
+# Development FAQ
+
+Here are the problems that are easy to encounter in development.
+
+## If you encounter dependency related issues
+
+```shell
+rm -rf node_modules
+pnpm i
+```
+
+## Link local dependencies
+
+```shell
+# get dist
+pnpm build
+cd dist/element-plus
+# set cur element-plus to global `node_modules`
+pnpm link --global
+# for esm we also need link element-plus for dist
+pnpm link --global element-plus
+
+# go to your project, link to `element-plus`
+cd your-project
+pnpm link --global element-plus
+```
+
+> More info see [pnpm link](https://pnpm.io/cli/link).
+
+## Theme
+
+We should not write Chinese comments in scss files.
+
+It will generate warning `@charset "UTF-8";` in the header of css file when built with vite.
+
+> More info see [#3219](https://github.com/element-plus/element-plus/issues/3219).

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

@@ -0,0 +1,55 @@
+---
+title: Local Development
+lang: zh-CN
+---
+
+# Local Development
+
+## Bootstrap project
+
+With command
+
+```shell
+pnpm i
+```
+
+the project will install all dependencies.
+
+## Website preview
+
+With command
+
+```shell
+pnpm docs:dev
+```
+
+the project will launch website for you to preview all existing component.
+
+## Local development
+
+See [Local development guide](https://github.com/element-plus/element-plus/blob/dev/CONTRIBUTING.md)
+
+1. With command
+
+```shell
+pnpm dev
+```
+
+will start the local development environment.
+
+2. Add your component into `play/src/App.vue`
+
+> App.vue
+
+```vue
+<template>
+  <ComponentYouAreDeveloping />
+</template>
+
+<script setup lang="ts">
+// make sure this component is registered in @element-plus/components
+import { ComponentYouAreDeveloping } from '@element-plus/components'
+</script>
+```
+
+Modify `App.vue` file per your needs to get things work.

package/rules/.docs/zh-CN/guide/device/ch.md

@@ -0,0 +1,18 @@
+---
+title: 'CH'
+lang: zh-CN
+---
+
+# 长虹电视
+
+## 打开 USB 调试教程
+
+***第一步、在电视遥控器上按下【菜单】按钮。然后选择【设置】选项。***
+
+***第二步、在【设置】菜单中，找到并选择【关于电视】或类似的选项。***
+
+***第三步、在【关于电视】页面中，找到并连续点击数次（通常是7次）【版本号】或【构建号】，这将激活隐藏的开发者选项。***
+
+
+
+

package/rules/.docs/zh-CN/guide/device/haier.md

@@ -0,0 +1,12 @@
+---
+title: 'Haier'
+lang: zh-CN
+---
+
+# 海尔电视
+
+## 打开 USB 调试教程
+
+***第一步、进入信源界面。***
+
+***第二步、依次按【信源键】【左】【左】【上】【右】键。***

package/rules/.docs/zh-CN/guide/device/hisense.md

@@ -0,0 +1,24 @@
+---
+title: 'Hisense'
+lang: zh-CN
+---
+
+# 海信电视
+
+## 打开 USB 调试教程
+
+### 通用方法一
+
+***第一步、用遥控选择【菜单】，进入【声音设置】里，选择【平衡】。***
+
+***第二步、输入 0538，即可进入工厂模式。***
+
+### 通用方法二
+
+***第一步、打开电视到主界面，按遥控器上的【菜单】键或 【Home】键，进入主菜单。***
+
+***第二步、选择【设置】。在【设置】中找到【关于】选项。***
+
+***第三步、进入【关于】页面后，按遥控器上的【数字7】 或者 【确定】键七次，会出现【开发者模式】选项。***
+
+***第四步、进入开发者模式，找到【USB调试】选项，将其开启。***

package/rules/.docs/zh-CN/guide/device/huawei.md

@@ -0,0 +1,16 @@
+---
+title: 'HuaWei'
+lang: zh-CN
+---
+
+# 华为电视
+
+## 打开 USB 调试教程
+
+***第一步、在智慧屏主界面上依次点击【设置】【关于木机】【版本号】七次来激活开发者选项。***
+
+***第二步、返回到【设置】界面，在【系统和更新】 下点击【开发人员选项】。***
+
+***第三步、在【开发人员选项】中找到【USB调试】选项，并将其打开。***
+
+***第四步、在【USB调试】选项下方，有一个【启用ADB]选项，将其打开即可。***

package/rules/.docs/zh-CN/guide/device/konka.md

@@ -0,0 +1,12 @@
+---
+title: 'Konka'
+lang: zh-CN
+---
+
+# 康佳电视
+
+## 打开 USB 调试教程
+
+***第一步、在【TV界面】按一下菜单键。***
+
+***第二步、然后用遥控器输入 2008，稍等一下就会出现 Factory Menu(工厂菜单)。***

package/rules/.docs/zh-CN/guide/device/le.md

@@ -0,0 +1,19 @@
+---
+title: 'Le'
+lang: zh-CN
+---
+
+# 乐视电视
+
+## 打开 USB 调试教程
+
+***第一步、按下信号源按钮。***
+
+***第二步、输入数字 2580。***
+
+***第三步、在工程界面中选择【其他选项】。***
+
+***第四步、滚动到底部，选择【ADB调试】。***
+
+***第五步、将【ADB调试】设置为开启状态，然后重启电视。***
+

package/rules/.docs/zh-CN/guide/device/skyworth.md

@@ -0,0 +1,25 @@
+---
+title: 'Skyworth'
+lang: zh-CN
+---
+
+# 创维电视
+
+## 打开 USB 调试教程
+
+### 通用方法一：
+
+***第一步、找到【本机信息】。***
+
+***第二步、在【本机信息】的界面，用遥控器顺序缓缓输入【上】【上】【下】【下】【左】【右】【左】【右】即可打开工广菜单。***
+
+### 通用方法二：
+
+***第一步、首先需要进入创维电视的【设置】界面，找到【关于电视】。 在其中找到【软件版本号】并连续点击7次即可开启【开发者选项】***。
+
+***第二步、然后在【开发者选项】中找到【USB 调试】选项，将其开启。***
+
+::: warning 注意：打开 ADB 开关之后，部分设备可能需要断电重启方可生效。
+:::
+
+

package/rules/.docs/zh-CN/guide/device/tcl.md

@@ -0,0 +1,21 @@
+---
+title: 'TCL'
+lang: zh-CN
+---
+
+# TCL 电视
+
+## 打开 USB 调试教程
+
+***第一步、打开【我的应用】***
+
+***第二步、打开【设置】或【系统设置】***
+
+***第三步、打开【关于本机】***
+
+***第四步、打开【本机信息】***
+
+***第五步、按【上】【下】【左】【右】键***
+
+
+

package/rules/.docs/zh-CN/guide/device/tencent.md

@@ -0,0 +1,24 @@
+---
+title: 'Tencent'
+lang: zh-CN
+---
+
+# 腾讯极光机顶盒
+
+## 打开 USB 调试教程
+
+***第一步、打开【设置】界面，在【关于本机】 下打开【安卓原生设置】。***
+
+<img src="/guide/device/tencent/device_tencent_setting_adb_one.jpg" />
+
+***第二步、在【关于】界面，连续点击【Android TV操作系统版本】。***
+
+<img src="/guide/device/tencent/device_tencent_setting_adb_two.jpg" />
+
+***第三步、点击【开发者选项】。***
+
+<img src="/guide/device/tencent/device_tencent_setting_adb_three.jpg" />
+
+***第四步、点击【启用开发者选项】。***
+
+<img src="/guide/device/tencent/device_tencent_setting_adb_four.jpg" />

package/rules/.docs/zh-CN/guide/device/tmall.md

@@ -0,0 +1,18 @@
+---
+title: 'Tmall'
+lang: zh-CN
+---
+
+# 天猫魔盒
+
+## 打开 USB 调试教程
+
+***第一步、确保天猫魔盒已经连接到电视，并开机进入主界面。***
+
+***第二步、在主界面的顶部导航栏中，找到并点击【我的】选项。***
+
+***第三步、在【我的】 页面中，找到并点击位于左侧下方的【设置】按钮。***
+
+***第四步、在【设置】页面中，滚动至【通用设置】部分，然后向右拖动找到【开发者模式】。***
+
+***第五步、点击【开发者模式】，并将设置更改为【开启】或相应的激活状态，以启用ADB调试功能。***

package/rules/.docs/zh-CN/guide/device/xiaomi.md

@@ -0,0 +1,46 @@
+---
+title: 'XiaoMi'
+lang: zh-CN
+---
+
+# 小米机电视机 / 顶盒
+
+## 打开 USB 调试教程
+
+### 方法一：
+
+****第一步、依次打开【设置】【关于产品】【产品型号】。****
+
+<img src="/guide/device/xiaomi/device_mi_setting_adb_one.png" />
+
+****第二步、使用遥控器连续点击确认键。****
+
+<img src="/guide/device/xiaomi/device_mi_setting_adb_two.png" />
+
+****第三步、可进入开发者模式。****
+
+****第四步、再次进入到【帐号与安全】打开【ADB调试】功能。****
+
+<img src="/guide/device/xiaomi/device_mi_setting_adb_three.png" />
+
+### 方法二：
+
+****第一步、打开电视，进入【我的应用】。****
+
+****第二步、进入【设置】菜单。****
+
+****第三步、在【设置】中选择【关于电视】。****
+
+****第四步、在【关于电视】页面中连续点击【版本号】7次，直到出现提示【您已成为开发者】。****
+
+****第五步、返回到【设置】菜单，选择【更多设置】然后找到并进入【开发者选项】。****
+
+****第六步、在【开发者选项】中，找到并启用【USB调试】和【网络调试】。****
+
+### 方法三：
+
+****第一步、打开【设置】。****
+
+****第二步、打开【账号安全】。****
+
+****第三步、打开【打开ADB调试】。****