@quicktvui/ai 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/README.md +99 -19
  2. package/USAGE.md +74 -0
  3. package/package.json +1 -1
  4. package/postinstall.js +10 -2
  5. package/rules/.clinerules +7 -3
  6. package/rules/.cursorrules +9 -4
  7. package/rules/.docs/examples/css/pseudo-classes/v-pseudo.vue +57 -0
  8. package/rules/.docs/examples/guide/slot/lifecycle-hooks.vue +108 -0
  9. package/rules/.docs/examples/module/key/component-event.vue +36 -0
  10. package/rules/.docs/examples/module/key/es-back-hooks.vue +30 -0
  11. package/rules/.docs/examples/module/key/es-dispatch-hooks.vue +36 -0
  12. package/rules/.docs/examples/module/key/es-event-hooks.vue +31 -0
  13. package/rules/.docs/examples/module/page/es-app-lifecycle-hooks.vue +85 -0
  14. package/rules/.docs/examples/module/page/es-page-lifecycle-hooks.vue +78 -0
  15. package/rules/.docs/examples/module/page/es-page-state-hooks.vue +35 -0
  16. package/rules/.docs/zh-CN/component/button.md +3 -3
  17. package/rules/.docs/zh-CN/component/column.md +3 -0
  18. package/rules/.docs/zh-CN/component/html/installation.md +8 -2
  19. package/rules/.docs/zh-CN/component/html/video.md +1 -0
  20. package/rules/.docs/zh-CN/component/media-series.md +3 -3
  21. package/rules/.docs/zh-CN/component/overview.md +1 -3
  22. package/rules/.docs/zh-CN/component/poster.md +1 -1
  23. package/rules/.docs/zh-CN/component/row.md +2 -0
  24. package/rules/.docs/zh-CN/component/text.md +1 -1
  25. package/rules/.docs/zh-CN/component/waterfall_structure.md +266 -0
  26. package/rules/.docs/zh-CN/css/animation-transition/overview.md +23 -0
  27. package/rules/.docs/zh-CN/css/auto/overview.md +18 -0
  28. package/rules/.docs/zh-CN/css/cheat-sheet.md +19 -0
  29. package/rules/.docs/zh-CN/css/color/overview.md +20 -0
  30. package/rules/.docs/zh-CN/css/function/overview.md +27 -0
  31. package/rules/.docs/zh-CN/css/installation.md +53 -0
  32. package/rules/.docs/zh-CN/css/introduction.md +33 -0
  33. package/rules/.docs/zh-CN/css/layout/background.md +21 -0
  34. package/rules/.docs/zh-CN/css/layout/display.md +1 -2
  35. package/rules/.docs/zh-CN/css/layout-model/overview.md +21 -0
  36. package/rules/.docs/zh-CN/css/media/overview.md +27 -0
  37. package/rules/.docs/zh-CN/css/pseudo-classes/overview.md +79 -0
  38. package/rules/.docs/zh-CN/css/selector/overview.md +90 -0
  39. package/rules/.docs/zh-CN/css/size/overview.md +28 -0
  40. package/rules/.docs/zh-CN/css/specificity-inheritance/overview.md +21 -0
  41. package/rules/.docs/zh-CN/css/style/font-family.md +13 -4
  42. package/rules/.docs/zh-CN/css/transform/overview.md +23 -0
  43. package/rules/.docs/zh-CN/css/variable/overview.md +21 -0
  44. package/rules/.docs/zh-CN/guide/ai/ai-assistant.md +74 -0
  45. package/rules/.docs/zh-CN/guide/faq/layout-style-faq.md +3 -3
  46. package/rules/.docs/zh-CN/guide/key/back.md +31 -0
  47. package/rules/.docs/zh-CN/guide/key/dispatch-key-event.md +34 -1
  48. package/rules/.docs/zh-CN/guide/key/key-event.md +54 -6
  49. package/rules/.docs/zh-CN/guide/layout/adapter.md +0 -2
  50. package/rules/.docs/zh-CN/guide/layout/layout.md +2 -9
  51. package/rules/.docs/zh-CN/guide/layout/style.md +6 -33
  52. package/rules/.docs/zh-CN/guide/layout/theming.md +24 -139
  53. package/rules/.docs/zh-CN/guide/page/application-lifecycle.md +28 -4
  54. package/rules/.docs/zh-CN/guide/page/page-lifecycle.md +37 -9
  55. package/rules/.docs/zh-CN/guide/page/page-state.md +24 -1
  56. package/rules/.docs/zh-CN/guide/slot/lifecycle.md +27 -1
  57. package/rules/.github/copilot-instructions.md +6 -2
  58. package/rules/.windsurfrules +7 -3
  59. package/rules/AGENTS.md +7 -3
  60. package/rules/AI_HANDOFF.md +6 -6
  61. package/rules/CLAUDE.md +8 -4
  62. package/rules/GEMINI.md +9 -5
@@ -11,7 +11,7 @@ lang: zh-CN
11
11
 
12
12
  :::
13
13
 
14
- ## 基础用法
14
+ ## 一、普通函数用法
15
15
 
16
16
  在`setup`中编写`onDispatchKeyEvent`方法,并在`return`中返回此方法。
17
17
 
@@ -32,6 +32,39 @@ module/key/es-dispatch
32
32
 
33
33
  :::
34
34
 
35
+ ## 二、Hooks 函数用法
36
+
37
+ ::: warning 注意
38
+
39
+ ***@extscreen/es3-core" ≥ 1.2.6***
40
+
41
+ ***@extscreen/es3-router ≥ 1.2.3***
42
+
43
+ ***@extscreen/es3-vue ≥ 2.0.11***
44
+
45
+ ***@extscreen/es3-vue-style-parser ≥ 2.0.0***
46
+
47
+ ***@extscreen/es3-vue-css-loader ≥ 2.0.0***
48
+
49
+ :::
50
+
51
+ 在`setup`中编写`onDispatchKeyEvent`方法,并在`return`中返回此方法。
52
+
53
+ ```ts
54
+ import { onDispatchKeyEvent } from "@extscreen/es3-vue";
55
+
56
+ onDispatchKeyEvent((keyEvent: ESKeyEvent) => {
57
+ //
58
+ });
59
+
60
+ ```
61
+
62
+ :::demo
63
+
64
+ module/key/es-dispatch-hooks
65
+
66
+ :::
67
+
35
68
  ## API
36
69
 
37
70
  ### Exposes
@@ -5,13 +5,9 @@ lang: zh-CN
5
5
 
6
6
  # 按键事件
7
7
 
8
- ::: warning 注意
9
-
10
- 仅在[`Page`](/zh-CN/guide/page/type)中使用生效
8
+ ## 一、在[页面](/zh-CN/guide/page/type)中使用
11
9
 
12
- :::
13
-
14
- ## 基础用法
10
+ ### 1、普通函数用法
15
11
 
16
12
  在`setup`中编写 `onKeyDown` 和 `onKeyUp` 方法,并在`return`中返回此方法。
17
13
 
@@ -39,6 +35,58 @@ module/key/es-event
39
35
 
40
36
  :::
41
37
 
38
+ ### 2、Hooks 函数用法
39
+
40
+ ::: warning 注意
41
+
42
+ ***@extscreen/es3-core" ≥ 1.2.6***
43
+
44
+ ***@extscreen/es3-router ≥ 1.2.3***
45
+
46
+ ***@extscreen/es3-vue ≥ 2.0.11***
47
+
48
+ ***@extscreen/es3-vue-style-parser ≥ 2.0.0***
49
+
50
+ ***@extscreen/es3-vue-css-loader ≥ 2.0.0***
51
+
52
+ :::
53
+
54
+ ```ts
55
+ import { onKeyDown, onKeyUp } from "@extscreen/es3-vue";
56
+
57
+ onKeyDown((keyEvent: ESKeyEvent) => {
58
+ //按键被按下
59
+ //处理业务逻辑
60
+ })
61
+
62
+ onKeyUp((keyEvent: ESKeyEvent) => {
63
+ //按键被抬起
64
+ //处理业务逻辑
65
+ })
66
+
67
+ ```
68
+
69
+ :::demo
70
+
71
+ module/key/es-event-hooks
72
+
73
+ :::
74
+
75
+ ## 二、在组件中使用
76
+
77
+ 在组件标签上监听事件`keydown`、`keyup`。
78
+
79
+ ```vue
80
+
81
+ <div class='es-key-event-view-css' @keydown='onKeyDown' @keyup='onKeyUp' />
82
+ ```
83
+
84
+ :::demo
85
+
86
+ module/key/component-event
87
+
88
+ :::
89
+
42
90
  ## API
43
91
 
44
92
  ### DataStructure
@@ -14,8 +14,6 @@ lang: zh-CN
14
14
 
15
15
  ## 长度单位
16
16
 
17
- ::: warning 注意: 仅使用 px 来设定单位。暂不支持百分比等其它的长度值,只支持具体数值。
18
- :::
19
17
 
20
18
  例如:
21
19
 
@@ -5,14 +5,7 @@ lang: zh-CN
5
5
 
6
6
  # 布局
7
7
 
8
- * [点击查看支持的布局](/zh-CN/css/overview)
9
- * [点击查看布局样式相关问题](/zh-CN/guide/faq/layout-style-faq)
10
-
11
- ::: warning 注意:
12
- * ***布局中基础组件都需要明确指定组件的宽高尺寸***
13
-
14
- * ***仅使用 px 来设定单位。暂不支持百分比等其它的长度值,只支持具体数值。***
15
- :::
8
+ [点击查看 CSS 速查表](/zh-CN/css/cheat-sheet)
16
9
 
17
10
  ## 盒子模型
18
11
 
@@ -28,7 +21,7 @@ lang: zh-CN
28
21
  ## 布局(Flex)
29
22
 
30
23
  默认采用现在移动端最流行的 `Flex` 布局。
31
- 因为仅支持 `Flex` 布局,所以必须手写 `display: flex` 才能生效。
24
+ 因为仅支持 `Flex` 布局,所以不需要手写 `display: flex` 即可使用。
32
25
  `Flex` 布局与 `Web` 的 `Flex` 类似,它们都旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的。
33
26
  `Flex` 规定了弹性元素如何伸长或缩短,以适应`flex容器`中的可用空间。
34
27
 
@@ -5,27 +5,21 @@ lang: zh-CN
5
5
 
6
6
  # 样式
7
7
 
8
- * [点击查看支持的样式](/zh-CN/css/overview)
9
- * [点击查看布局样式相关问题](/zh-CN/guide/faq/layout-style-faq)
8
+ ::: tip 提示
10
9
 
11
- ::: warning 注意:
12
- * ***布局中基础组件都需要明确指定组件的宽高尺寸***
10
+ [点击查看 CSS 速查表](/zh-CN/css/cheat-sheet)
13
11
 
14
- * ***仅使用 px 来设定单位。暂不支持百分比等其它的长度值,只支持具体数值。***
15
- :::
12
+ :::
16
13
 
17
- ## 样式主要依靠 css、sass、less 样式来实现。
18
14
 
19
- ::: warning 注意:目前仅支持基本的 IDClassTag 选择器,而且可以支持基本的嵌套关系,其余选择器和 scoped 还未支持。
20
- :::
15
+ ## 样式主要依靠 csssassless 样式来实现。
21
16
 
22
17
  ```vue
23
18
 
24
- <div class="div" />
19
+ <div class='div' />
25
20
  ```
26
21
 
27
22
  ```css
28
-
29
23
  .div {
30
24
  width: 100px;
31
25
  height: 100px;
@@ -38,27 +32,6 @@ lang: zh-CN
38
32
  ::: warning 注意:
39
33
 
40
34
  ***1、不支持的 CSS 样式如下:***
41
- * `background`
42
- * `% 百分比尺寸`
43
- * `auto`
44
- * `!important`
45
35
 
46
- ***2、不支持 CSS 自定义属性(变量):***
36
+ * `font-family`
47
37
 
48
- ```css
49
- element {
50
- background-color: var(--main-bg-color);
51
- }
52
- ```
53
-
54
- ***3、不支持 CSS 复合属性写法:***
55
-
56
- ```css
57
- element {
58
- margin: 5px 10px 20px 15px;
59
- padding: 5px 10px;
60
- font: oblique bold 16px Helvetica, Arial, Sans-Serif;
61
- border: 2px 5px 10px 3px;
62
- }
63
- ```
64
- :::
@@ -5,150 +5,35 @@ lang: zh-CN
5
5
 
6
6
  # 自定义主题
7
7
 
8
- QuickTVUI 默认提供一套主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式。 但是如果需要大规模替换样式,例如: 将主题颜色从蓝色改为橙色或绿色,也许一个个将其覆盖起来不是一个好主意。
9
-
10
- 我们提供通过 SCSS 变量的方法来改变样式变量。
11
-
12
- `theme-chalk` 使用SCSS编写而成。
13
- 你可以在 [`packages/theme-chalk/src/common/var.scss`](https://github.com/quicktvui/quicktvui/blob/dev/packages/theme-chalk/src/common/var.scss)
14
- 文件中查找SCSS变量。
15
-
16
- :::warning
17
-
18
- 我们使用 sass 模块 ([sass:map](https://sass-lang.com/documentation/values/maps)...) 和 `@use` 来重构所有的 SCSS 变量。 通过对所有 SCSS
19
- 变量使用 `@use` ,解决了由 `@import` 造成的重复输出问题。
20
-
21
- > [介绍 Sass 模块 | CSS-TRICKS](https://css-tricks.com/introducing-sass-modules/)
22
-
23
- 例如,我们使用 `$colors` 作为 map 来保存不同类型的颜色。
24
-
25
- 今后,我们将为每个组件自定义的变量编写文档。
26
- 你也可以直接查看源代码 [var.scss](https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss)
27
-
28
- :::
29
-
30
- ```scss
31
- $colors: () !default;
32
- $colors: map.deep-merge(
33
- (
34
- 'white': #ffffff,
35
- 'black': #000000,
36
- 'primary': (
37
- 'base': #409eff,
38
- ),
39
- 'success': (
40
- 'base': #67c23a,
41
- ),
42
- 'warning': (
43
- 'base': #e6a23c,
44
- ),
45
- 'danger': (
46
- 'base': #f56c6c,
47
- ),
48
- 'error': (
49
- 'base': #f56c6c,
50
- ),
51
- 'info': (
52
- 'base': #909399,
53
- ),
54
- ),
55
- $colors
56
- );
57
- ```
58
-
59
- ### 如何覆盖它?
60
-
61
- 如果您的项目也使用了 SCSS,可以直接修改 QuickTVUI 的样式变量。 新建一个样式文件,例如
62
- `./src/styles/quicktvui/index.scss`:
63
-
64
- :::warning
65
-
66
- 您应该使用 `@use 'xxx.scss' as *;` 代替 `@import 'xxx.scss';`.
67
-
68
- 因为 sass 团队说他们最终会删除 `@import` 语法。
69
-
70
- > [Sass: @use](https://sass-lang.com/documentation/at-rules/use) vs [Sass: @import](https://sass-lang.com/documentation/at-rules/import)
71
-
72
- :::
73
-
74
- ```scss
75
- // styles/quicktvui/index.scss
76
- /* 只需要重写你需要的即可 */
77
- @forward 'quicktvui/theme-chalk/src/common/var.scss' with (
78
- $bg-color: (
79
- 'normal': gold,
80
- 'focus': red,
81
- 'select': #ffffff,
82
- ),
83
- );
84
-
85
- // 如果只是按需导入,则可以忽略以下内容。
86
- // 如果你想导入所有样式:
87
- // @use "quicktvui/theme-chalk/src/index.scss" as *;
88
- ```
89
-
90
- 然后在你的项目入口文件中,导入这个样式文件以替换 QuickTVUI 内置的 CSS:
91
-
92
- :::tip
93
-
94
- 在 `quicktvui scss` 文件之前导入 quicktvui/index.scss 以避免 sass 混合变量的问题,因为我们需要通过你的自定义变量生成 light-x。
95
-
96
- :::
97
-
98
- 创建一个 `quicktvui/index.scss`文件来合并你的变量和 quicktvui 的变量。 (如果你在 TypeScript 中导入了它们,他们将不会被合并)
99
-
100
- :::tip
101
-
102
- 除此以外,你应该将你的 scss 文件与 quicktvui 变量的 scss 文件区分开来。 如果将它们混合在一起,`QuickTVUI` 每次热更新都需要编译大量的 scss 文件,这将会导致编译速度变慢。
103
-
104
- :::
8
+ ## 第一步:main.ts 中注册主题样式
105
9
 
106
10
  ```ts
107
- import { createApp } from 'vue'
108
- import './src/styles/quicktvui/index.scss'
109
- import QuickTVUI from 'quicktvui'
110
- import App from './App.vue'
11
+ const app: ESAppContext = createESApp(application, router, {
12
+ debug: false
13
+ });
14
+ //主题管理器
15
+ const themeManager = app.theme;
16
+ //注册主题
17
+ themeManager.registerTheme("light", {
18
+ "--primary-color": "#9890ff",
19
+ "--text-color": "#000000",
20
+ "--bg-color": "#ffffff",
21
+ "--divider-color": "#40b883",
22
+ });
23
+
24
+ themeManager.registerTheme("dark", {
25
+ "--primary-color": "#ff4d4f",
26
+ "--text-color": "red",
27
+ "--bg-color": "#1f1f1f",
28
+ "--divider-color": "#91b200",
29
+ });
111
30
 
112
- const app: ESApp = createESApp(App, router)
113
- app.use(QuickTVUI)
114
31
  ```
115
32
 
116
- 如果您正在使用 webpack,并且需要在按需导入时自定义主题。
33
+ ## 第二步:main.ts 中使用指定的主题样式
117
34
 
118
35
  ```ts
119
- // webpack.config.ts
120
- // use unplugin-quicktvui
121
-
122
- import QuickTVUI from 'unplugin-quicktvui/webpack'
123
-
124
- export default defineConfig({
125
- css: {
126
- loaderOptions: {
127
- scss: {
128
- additionalData: `@use "~/styles/quicktvui/index.scss" as *;`,
129
- },
130
- },
131
- },
132
- plugins: [
133
- QuickTVUI({
134
- useSource: true,
135
- }),
136
- ],
137
- module: {
138
- rules: [
139
- {
140
- test: /\.(sc|c)ss$/,
141
- use: [
142
- cssLoader,
143
- {
144
- loader: 'sass-loader',
145
- options: {
146
- additionalData: `@use "./src/styles/quicktvui/index.scss" as *;`,
147
- }
148
- }
149
- ]
150
- },
151
- ]
152
- },
153
- })
36
+ themeManager.setTheme("light");
154
37
  ```
38
+
39
+ ## 第三步:页面和组件中使用注册的主题的样式的 CSS 变量即可
@@ -13,25 +13,49 @@ import application from './App.vue';
13
13
  const app: ESApp = createESApp(application, routerOptions);
14
14
  ```
15
15
 
16
+ 在`App.vue`中监听Application生命周期。
17
+
18
+ ## 基础用法
19
+
20
+ ### 1、普通函数用法
21
+
16
22
  ::: warning 注意:
17
23
 
18
24
  生命周期方法前面不能添加`async`关键字。
19
25
 
20
26
  下面的方法使用错误
27
+
21
28
  ```js
22
- async function onESCreate(){
29
+ async function onESCreate() {
23
30
  //
24
31
  }
25
32
  ```
26
33
 
27
34
  :::
35
+ :::demo
28
36
 
29
- 在`App.vue`中监听Application生命周期。
37
+ module/page/es-app-lifecycle
30
38
 
31
- :::demo ## 基础用法
39
+ :::
32
40
 
33
- module/page/es-app-lifecycle
41
+ ### 2、Hooks 函数用法
42
+
43
+ ::: warning 注意
44
+
45
+ ***@extscreen/es3-core" ≥ 1.2.6***
46
+
47
+ ***@extscreen/es3-router ≥ 1.2.3***
48
+
49
+ ***@extscreen/es3-vue ≥ 2.0.11***
50
+
51
+ ***@extscreen/es3-vue-style-parser ≥ 2.0.0***
52
+
53
+ ***@extscreen/es3-vue-css-loader ≥ 2.0.0***
34
54
 
35
55
  :::
36
56
 
57
+ :::demo
37
58
 
59
+ module/page/es-app-lifecycle-hooks
60
+
61
+ :::
@@ -7,29 +7,57 @@ lang: zh-CN
7
7
 
8
8
  ::: warning 注意:
9
9
 
10
- 1、声明在路由表 routes.ts 里面的组件才能作为快应用的 Page 。
10
+ 声明在路由表 routes.ts 里面的组件才能作为快应用的 Page 。
11
11
 
12
- 2、生命周期方法前面不能添加`async`关键字。
12
+ :::
13
+
14
+ ::: tip 提示:Page 生命周期只能触发在 “ 声明在 routes.ts 路由表里面的 Page 组件 ”
15
+
16
+ * `home.vue`声明在了`routes.ts`,所以`home.vue`是快应用的页面,可以监听生命周期。
17
+ * `home-child-component.vue`没有声明在`routes.ts`,不是快应用的页面,不可以监听生命周期。
18
+
19
+ <img src="/guide/page/page_lifecycle_warning.png" />
20
+
21
+ :::
22
+
23
+ ## 一、普通函数用法
24
+
25
+ ::: warning 注意 生命周期方法前面不能添加 async 关键字。
13
26
 
14
27
  下面的方法使用错误
28
+
15
29
  ```js
16
- async function onESCreate(){
30
+ async function onESCreate() {
17
31
  //
18
32
  }
19
33
  ```
34
+
20
35
  :::
21
36
 
22
- ::: tip 提示:Page 生命周期只能触发在 “ 声明在 routes.ts 路由表里面的 Page 组件 ”
37
+ :::demo
23
38
 
24
- * `home.vue`声明在了`routes.ts`,所以`home.vue`是快应用的页面,可以监听生命周期。
25
- * `home-child-component.vue`没有声明在`routes.ts`,不是快应用的页面,不可以监听生命周期。
39
+ module/page/es-page-lifecycle
26
40
 
27
- <img src="/guide/page/page_lifecycle_warning.png" />
41
+ :::
42
+
43
+ ## 二、Hooks 函数用法
44
+
45
+ ::: warning 注意
46
+
47
+ ***@extscreen/es3-core" ≥ 1.2.6***
48
+
49
+ ***@extscreen/es3-router ≥ 1.2.3***
50
+
51
+ ***@extscreen/es3-vue ≥ 2.0.11***
52
+
53
+ ***@extscreen/es3-vue-style-parser ≥ 2.0.0***
54
+
55
+ ***@extscreen/es3-vue-css-loader ≥ 2.0.0***
28
56
 
29
57
  :::
30
58
 
31
- :::demo ## 基础用法
59
+ :::demo
32
60
 
33
- module/page/es-page-lifecycle
61
+ module/page/es-page-lifecycle-hooks
34
62
 
35
63
  :::
@@ -23,9 +23,32 @@ lang: zh-CN
23
23
  调用顺序为`onESStart()` ==> `onESRestoreInstanceState(savedInstanceState)`
24
24
  ==> `onESResume()`
25
25
 
26
- :::demo ## 代码示例
26
+ ### 1、普通函数用法
27
+
28
+ :::demo
27
29
 
28
30
  module/page/es-page-state
29
31
 
30
32
  :::
31
33
 
34
+ ### 2、Hooks 函数用法
35
+
36
+ ::: warning 注意
37
+
38
+ ***@extscreen/es3-core" ≥ 1.2.6***
39
+
40
+ ***@extscreen/es3-router ≥ 1.2.3***
41
+
42
+ ***@extscreen/es3-vue ≥ 2.0.11***
43
+
44
+ ***@extscreen/es3-vue-style-parser ≥ 2.0.0***
45
+
46
+ ***@extscreen/es3-vue-css-loader ≥ 2.0.0***
47
+
48
+ :::
49
+
50
+ :::demo
51
+
52
+ module/page/es-page-state-hooks
53
+
54
+ :::
@@ -11,8 +11,34 @@
11
11
  ::: warning 注意:onESBind、onESRecycle、onESAttached、onESDetached 生命周期只会在瀑布流里面使用轻卡被调用。
12
12
  :::
13
13
 
14
- :::demo ## 生命周期示例
14
+ ## 生命周期示例
15
+
16
+ ### 1、普通函数用法
17
+
18
+ :::demo
15
19
 
16
20
  guide/slot/lifecycle
17
21
 
18
22
  :::
23
+
24
+ ### 2、Hooks 函数用法
25
+
26
+ ::: warning 注意
27
+
28
+ ***@extscreen/es3-core" ≥ 1.2.6***
29
+
30
+ ***@extscreen/es3-router ≥ 1.2.3***
31
+
32
+ ***@extscreen/es3-vue ≥ 2.0.11***
33
+
34
+ ***@extscreen/es3-vue-style-parser ≥ 2.0.0***
35
+
36
+ ***@extscreen/es3-vue-css-loader ≥ 2.0.0***
37
+
38
+ :::
39
+
40
+ :::demo
41
+
42
+ guide/slot/lifecycle-hooks
43
+
44
+ :::
@@ -6,14 +6,14 @@
6
6
 
7
7
  **AI MUST refer to the official documentation and source code below BEFORE generating any code. NEVER hallucinate component names, attribute names, or APIs. These are the ONLY authorities.**
8
8
 
9
- 1. **Local Documentation (PRIMARY)**: The `.docs/` folder in the project root. Contains detailed MD documentation for all components, CSS, and native modules. **AI MUST use `grep_search` or `read_file` to retrieve relevant content from the `.docs/` directory before generating code.**
9
+ 1. **Local Documentation (PRIMARY)**: The `node_modules/@quicktvui/ai/rules/.docs/` folder. Contains detailed MD documentation for all components, CSS, and native modules. **AI MUST use `grep_search` or `read_file` to retrieve relevant content from the `node_modules/@quicktvui/ai/rules/.docs/` directory before generating code.**
10
10
  2. **Official Docs**: https://quicktvui.com
11
11
  3. **Core Library Samples**: https://github.com/quicktvui/quicktvui.git
12
12
  4. **Cross-platform Framework Samples**: https://github.com/quicktvui/es-vue3.git
13
13
  5. **Best Practice App**: https://github.com/quicktvui/hellotv.git
14
14
 
15
15
  **STRICT RULES:**
16
- - **VERIFY CAPABILITIES FIRST**: Before implementing features like "video playback," search the `.docs/` directory to verify component capabilities. DO NOT assume web behavior. **For example, `qt-web-view` does NOT support video playback; you MUST use the native `es-video-player` and `es-player-manager` components.**
16
+ - **VERIFY CAPABILITIES FIRST**: Before implementing features like "video playback," search the `node_modules/@quicktvui/ai/rules/.docs/` directory to verify component capabilities. DO NOT assume web behavior. **For example, `qt-web-view` does NOT support video playback; you MUST use the native `es-video-player` and `es-player-manager` components.**
17
17
  - **NOT A BROWSER & NO HTML**: **This framework does NOT support HTML. Standard HTML tags (like `p`, `img`, `a`, `ul`, `li`, `h1`) are STRICTLY PROHIBITED. It does NOT support `window`, `document` (DOM), or DOM APIs. You must exclusively use framework tags (like `qt-text`, `qt-image`) and Vue `ref`s.**
18
18
  - **NO HALLUCINATED TAGS**: e.g. `qt-web` is wrong, it is `qt-web-view`.
19
19
  - **NO HALLUCINATED APIs**: e.g. `onBack` is wrong, it must be `onBackPressed`.
@@ -38,6 +38,10 @@ AI assistants frequently fail by applying traditional Web paradigms to QuickTVUI
38
38
  2. **List Components (`qt-list-view`, `qt-grid-view`, `qt-waterfall`)**:
39
39
  * You MUST set `listenBoundEvent="true"` and listen to `@item-bind`.
40
40
  * The "Loading More" template `type` **MUST** be `1002`. The "End of List" template `type` **MUST** be `1003`.
41
+ * **Waterfall Critical Rules (qt-waterfall)**:
42
+ * Custom item root nodes **MUST** include `layout="${layout}"` and `flexStyle="${style}"` to avoid stacking/overlapping.
43
+ * Local image paths in waterfall data **MUST** use the `file://` protocol (e.g., `file://${icon}`).
44
+ * Refer to `node_modules/@quicktvui/ai/rules/.docs/zh-CN/component/waterfall_structure.md` for full layout logic.
41
45
  3. **Zero HTML & Zero DOM**:
42
46
  * **This is NOT a browser.** It compiles to Hippy Native Android Views.
43
47
  * **Banned Tags**: Standard HTML tags (`<p>`, `<img>`, `<ul>`, `<li>`, `<a>`, `<h1>`, `<button>`) will **CRASH** the app. Use only `div`, `span`, or `qt-*` tags.
@@ -6,14 +6,14 @@
6
6
 
7
7
  **AI MUST refer to the official documentation and source code below BEFORE generating any code. NEVER hallucinate component names, attribute names, or APIs. These are the ONLY authorities.**
8
8
 
9
- 1. **Local Documentation (PRIMARY)**: The `.docs/` folder in the project root. Contains detailed MD documentation for all components, CSS, and native modules. **AI MUST use `grep_search` or `read_file` to retrieve relevant content from the `.docs/` directory before generating code.**
9
+ 1. **Local Documentation (PRIMARY)**: The `node_modules/@quicktvui/ai/rules/.docs/` folder. Contains detailed MD documentation for all components, CSS, and native modules. **AI MUST use `grep_search` or `read_file` to retrieve relevant content from the `node_modules/@quicktvui/ai/rules/.docs/` directory before generating code.**
10
10
  2. **Official Docs**: https://quicktvui.com
11
11
  3. **Core Library Samples**: https://github.com/quicktvui/quicktvui.git
12
12
  4. **Cross-platform Framework Samples**: https://github.com/quicktvui/es-vue3.git
13
13
  5. **Best Practice App**: https://github.com/quicktvui/hellotv.git
14
14
 
15
15
  **STRICT RULES:**
16
- - **VERIFY CAPABILITIES FIRST**: Before implementing features like "video playback," search the `.docs/` directory to verify component capabilities. DO NOT assume web behavior. **For example, `qt-web-view` does NOT support video playback; you MUST use the native `es-video-player` and `es-player-manager` components.**
16
+ - **VERIFY CAPABILITIES FIRST**: Before implementing features like "video playback," search the `node_modules/@quicktvui/ai/rules/.docs/` directory to verify component capabilities. DO NOT assume web behavior. **For example, `qt-web-view` does NOT support video playback; you MUST use the native `es-video-player` and `es-player-manager` components.**
17
17
  - **NOT A BROWSER & NO HTML**: **This framework does NOT support HTML. Standard HTML tags (like `p`, `img`, `a`, `ul`, `li`, `h1`) are STRICTLY PROHIBITED. It does NOT support `window`, `document` (DOM), or DOM APIs. You must exclusively use framework tags (like `qt-text`, `qt-image`) and Vue `ref`s.**
18
18
  - **NO HALLUCINATED TAGS**: e.g. `qt-web` is wrong, it is `qt-web-view`.
19
19
  - **NO HALLUCINATED APIs**: e.g. `onBack` is wrong, it must be `onBackPressed`.
@@ -38,6 +38,10 @@ AI assistants frequently fail by applying traditional Web paradigms to QuickTVUI
38
38
  2. **List Components (`qt-list-view`, `qt-grid-view`, `qt-waterfall`)**:
39
39
  * You MUST set `listenBoundEvent="true"` and listen to `@item-bind`.
40
40
  * The "Loading More" template `type` **MUST** be `1002`. The "End of List" template `type` **MUST** be `1003`.
41
+ * **Waterfall Critical Rules (qt-waterfall)**:
42
+ * Custom item root nodes **MUST** include `layout="${layout}"` and `flexStyle="${style}"` to avoid stacking/overlapping.
43
+ * Local image paths in waterfall data **MUST** use the `file://` protocol (e.g., `file://${icon}`).
44
+ * Refer to `node_modules/@quicktvui/ai/rules/.docs/zh-CN/component/waterfall_structure.md` for full layout logic.
41
45
  3. **Zero HTML & Zero DOM**:
42
46
  * **This is NOT a browser.** It compiles to Hippy Native Android Views.
43
47
  * **Banned Tags**: Standard HTML tags (`<p>`, `<img>`, `<ul>`, `<li>`, `<a>`, `<h1>`, `<button>`) will **CRASH** the app. Use only `div`, `span`, or `qt-*` tags.
@@ -147,7 +151,7 @@ Other CSS rules:
147
151
 
148
152
  当用户通过以下方式表达困惑时:
149
153
  - **关键词触发**:用户提到“问题上报”、“碰到问题”、“反馈”、“Bug 反馈”、“还是没改好”、“运行报错”、“API 报错”等。
150
- - **自动检测触发**:同一段代码逻辑在 3 次修复后仍然报错,或 AI 确认生成的代码符合 `.docs` 规范但无法在用户端运行。
154
+ - **自动检测触发**:同一段代码逻辑在 3 次修复后仍然报错,或 AI 确认生成的代码符合 `node_modules/@quicktvui/ai/rules/.docs/` 规范但无法在用户端运行。
151
155
 
152
156
  **AI 执行协议:**
153
157
  1. **脱敏诊断 (Sanitized Diagnosis)**: