@quicktvui/ai 1.0.0

package/rules/.docs/examples/component/indicator-list-view/basic.vue

@@ -0,0 +1,476 @@
+<template>
+  <qt-view class="es-sdk-root-css">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-view class="quick-list-view">
+      <qt-view class="list_view_row">
+        <qt-list-view
+          ref="listViewRef"
+          class="list_view"
+          :clipChildren="false"
+          :clipPadding="false"
+          horizontal
+          :padding="'0,0,30,0'"
+          :defaultFocus="defaultFocus"
+          :blockFocusDirections="['left', 'right']"
+        >
+          <!-- item -->
+          <qt-poster />
+          <tv-item
+            :type="6"
+            flexStyle="${style}"
+            :focusable="false"
+            :clipChildren="false"
+            class="loop-img-root-css"
+          >
+            <div
+              duplicateParentState
+              showOnState="focused"
+              style="
+                position: absolute;
+                top: -5px;
+                left: -5px;
+                right: -5px;
+                bottom: -5px;
+                background-color: transparent;
+                border-color: white;
+                border-radius: 9px;
+                border-width: 3px;
+                border-style: solid;
+              "
+            />
+            <div
+              flexStyle="${style}"
+              :clipChildren="true"
+              :focusable="true"
+              duplicateParentState
+              style="background-color: transparent"
+            >
+              <qt-indicator-list-view
+                class="loop-img-list-css"
+                horizontal
+                duplicateParentState
+                :clipChildren="true"
+                :clipPadding="true"
+                :focusable="true"
+                :setIndicatorType="0"
+                :setIndicatorCenterType="1"
+                :setIndicatorEnable="true"
+                :isAutoLoop="true"
+                :loopInterval="3000"
+                :setIndicatorTitle="'圆点 右下 间隔3s'"
+                :drawBackground="true"
+                flexStyle="${style}"
+                indList="${itemList}"
+              >
+                <qt-view
+                  :type="66"
+                  flexStyle="${style}"
+                  style="background-color: transparent"
+                  name="loop_img_item"
+                  :focusable="false"
+                  eventClick
+                  eventFocus
+                >
+                  <img
+                    class="item-loop-img-css"
+                    :postDelay="200"
+                    src="${image.img}"
+                    :focusable="false"
+                    flexStyle="${image.style}"
+                  />
+                  <div
+                    duplicateParentState
+                    showOnState="focused"
+                    style="
+                      position: absolute;
+                      top: -1px;
+                      left: -1px;
+                      right: -1px;
+                      bottom: -1px;
+                      background-color: transparent;
+                      border-color: white;
+                      border-radius: 9px;
+                      border-width: 3px;
+                      border-style: solid;
+                    "
+                  />
+                </qt-view>
+              </qt-indicator-list-view>
+            </div>
+          </tv-item>
+        </qt-list-view>
+        <qt-list-view
+          ref="listViewRefCenter"
+          class="list_view"
+          :clipChildren="false"
+          :clipPadding="false"
+          horizontal
+          :padding="'0,0,30,0'"
+          :defaultFocus="defaultFocus"
+          :blockFocusDirections="['left', 'right']"
+        >
+          <!-- item -->
+          <qt-poster />
+
+          <tv-item
+            :type="6"
+            flexStyle="${style}"
+            :focusable="false"
+            :clipChildren="false"
+            class="loop-img-root-css"
+          >
+            <div
+              duplicateParentState
+              showOnState="focused"
+              style="
+                position: absolute;
+                top: -5px;
+                left: -5px;
+                right: -5px;
+                bottom: -5px;
+                background-color: transparent;
+                border-color: white;
+                border-radius: 9px;
+                border-width: 3px;
+                border-style: solid;
+              "
+            />
+            <div
+              flexStyle="${style}"
+              :clipChildren="true"
+              :focusable="true"
+              duplicateParentState
+              style="background-color: transparent"
+            >
+              <qt-indicator-list-view
+                class="loop-img-list-css"
+                horizontal
+                duplicateParentState
+                :clipChildren="true"
+                :clipPadding="true"
+                :focusable="true"
+                :setIndicatorType="0"
+                :setIndicatorCenterType="0"
+                :setIndicatorEnable="true"
+                :isAutoLoop="true"
+                :loopInterval="1000"
+                :setIndicatorTitle="'圆点 中间 间隔1s'"
+                :drawBackground="true"
+                flexStyle="${style}"
+                indList="${itemList}"
+              >
+                <qt-view
+                  :type="66"
+                  flexStyle="${style}"
+                  style="background-color: transparent"
+                  name="loop_img_item"
+                  :focusable="false"
+                  eventClick
+                  eventFocus
+                >
+                  <img
+                    class="item-loop-img-css"
+                    :postDelay="200"
+                    src="${image.img}"
+                    :focusable="false"
+                    flexStyle="${image.style}"
+                  />
+                  <div
+                    duplicateParentState
+                    showOnState="focused"
+                    style="
+                      position: absolute;
+                      top: -1px;
+                      left: -1px;
+                      right: -1px;
+                      bottom: -1px;
+                      background-color: transparent;
+                      border-color: white;
+                      border-radius: 9px;
+                      border-width: 3px;
+                      border-style: solid;
+                    "
+                  />
+                </qt-view>
+              </qt-indicator-list-view>
+            </div>
+          </tv-item>
+        </qt-list-view>
+        <qt-list-view
+          ref="cmdListViewRef"
+          class="list_view"
+          :clipChildren="false"
+          :clipPadding="false"
+          horizontal
+          :padding="'0,0,30,0'"
+          :defaultFocus="defaultFocus"
+          :blockFocusDirections="['left', 'right']"
+        >
+          <!-- item -->
+          <qt-poster />
+          <tv-item
+            :type="5"
+            flexStyle="${style}"
+            :clipChildren="false"
+            :focusable="false"
+            class="loop-img-root-css"
+          >
+            <div
+              duplicateParentState
+              showOnState="focused"
+              style="
+                position: absolute;
+                top: -5px;
+                left: -5px;
+                right: -5px;
+                bottom: -5px;
+                background-color: transparent;
+                border-color: white;
+                border-radius: 9px;
+                border-width: 3px;
+                border-style: solid;
+              "
+            />
+            <div
+              flexStyle="${style}"
+              :clipChildren="true"
+              :focusable="false"
+              style="background-color: transparent"
+            >
+              <qt-indicator-list-view
+                class="loop-img-list-css"
+                horizontal
+                duplicateParentState
+                :clipChildren="true"
+                :clipPadding="true"
+                :focusable="true"
+                :setIndicatorType="1"
+                :setIndicatorEnable="true"
+                :isAutoLoop="true"
+                :setIndicatorTitle="'文字右下 默认 5s间隔'"
+                :drawBackground="false"
+                flexStyle="${style}"
+                indList="${itemList}"
+                @current-indicator-page-index="onPageIndexFunction"
+              >
+                <qt-view
+                  :type="55"
+                  flexStyle="${style}"
+                  style="background-color: transparent"
+                  name="loop_img_item"
+                  :focusable="false"
+                  eventClick
+                  eventFocus
+                >
+                  <img
+                    class="item-loop-img-css"
+                    :postDelay="200"
+                    src="${image.img}"
+                    :focusable="false"
+                    flexStyle="${image.style}"
+                  />
+                  <div
+                    duplicateParentState
+                    showOnState="focused"
+                    style="
+                      position: absolute;
+                      top: -1px;
+                      left: -1px;
+                      right: -1px;
+                      bottom: -1px;
+                      background-color: transparent;
+                      border-color: white;
+                      border-radius: 9px;
+                      border-width: 3px;
+                      border-style: solid;
+                    "
+                  />
+                </qt-view>
+              </qt-indicator-list-view>
+            </div>
+          </tv-item>
+        </qt-list-view>
+      </qt-view>
+    </qt-view>
+  </qt-view>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { ESLogLevel, useESLog, useESToast } from "@extscreen/es3-core";
+import type { QTIndicatorListView, QTListViewItem, QTPoster } from "quicktvui";
+
+export default defineComponent({
+  name: "使用初探",
+  setup() {
+    const listViewRef = ref<QTIndicatorListView>();
+    const listViewRefCenter = ref<QTIndicatorListView>();
+    const cmdListViewRef = ref<QTIndicatorListView>();
+    const defaultFocus = ref(0);
+    const listDataRec: Array<QTListViewItem> = [];
+    const toast = useESToast();
+
+    const onESCreate = (params) => {
+      const arr: Array<QTListViewItem> = [];
+      const dataList: any = [];
+      const poster1: QTPoster = {
+        type: 6,
+        style: {
+          width: 400,
+          height: 320,
+        },
+        decoration: {
+          top: 20,
+          left: 20,
+          right: 20,
+          bottom: 20,
+        },
+        itemList: [
+          {
+            type: 66,
+            style: {
+              width: 400,
+              height: 320,
+            },
+            image: {
+              img: "http://cms.hmon.tv/common/static/file/2024/05/31/ce5b63bc-5f2f-4171-871c-b709b9cb822a.png",
+              style: {
+                width: 400,
+                height: 320,
+              },
+            },
+          },
+          {
+            type: 66,
+            style: {
+              width: 400,
+              height: 320,
+            },
+            image: {
+              img: "http://cms.hmon.tv/common/static/file/2024/05/31/ce5b63bc-5f2f-4171-871c-b709b9cb822a.png",
+              style: {
+                width: 400,
+                height: 320,
+              },
+            },
+          },
+        ],
+      };
+      dataList.push(poster1);
+      const imgSrc =
+        "https://img1.baidu.com/it/u=2666955302,2339578501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750";
+      const poster2: QTPoster = {
+        type: 5,
+        style: {
+          width: 400,
+          height: 320,
+        },
+        decoration: {
+          top: 20,
+          left: 20,
+          right: 20,
+          bottom: 20,
+        },
+        itemList: [
+          {
+            type: 55,
+            style: {
+              width: 400,
+              height: 320,
+            },
+            image: {
+              img: imgSrc,
+              style: {
+                width: 400,
+                height: 320,
+              },
+            },
+          },
+          {
+            type: 55,
+            style: {
+              width: 400,
+              height: 320,
+            },
+            image: {
+              img: imgSrc,
+              style: {
+                width: 400,
+                height: 320,
+              },
+            },
+          },
+        ],
+      };
+      dataList.push(poster1);
+      listViewRef.value?.setListData(poster1);
+      listViewRefCenter.value?.setListData(poster1);
+      cmdListViewRef.value?.setListData(poster2);
+    };
+
+    function onPageIndexFunction(e) {
+      toast.showToast(
+        `----->${e.currentIndex}------->${JSON.stringify(e.currentList.image)}${
+          e.currentList.type
+        }`,
+      );
+    }
+
+    return {
+      listViewRef,
+      listViewRefCenter,
+      cmdListViewRef,
+      listDataRec,
+      defaultFocus,
+      onESCreate,
+      onPageIndexFunction,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.loop-img-root-css {
+  position: absolute;
+  background-color: transparent;
+}
+
+.loop-img-list-css {
+  background-color: transparent;
+}
+
+.item-loop-img-css {
+  border-radius: 9px;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.quick-list-view {
+  width: 1920px;
+  height: 1080px;
+  background-color: transparent;
+  padding-top: 20px;
+  flex-direction: column;
+}
+
+.list_view_row {
+  position: absolute;
+  width: 1920px;
+  height: 500px;
+  background-color: transparent;
+  padding-top: 20px;
+  flex-direction: row;
+}
+
+.list_view_row .list_view {
+  width: 500px;
+  height: 400px;
+  background-color: transparent;
+}
+.list-view-text-class {
+  left: 30px;
+  width: 100px;
+  height: 50px;
+}
+</style>

package/rules/.docs/examples/component/input/basic.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <qt-input-view
+      hintText="请输入"
+      :textSize="35"
+      @onTextChange="onTextChange"
+      @onFocusChanged="onFocusChanged"
+      class="input"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+const onTextChange = (e: any) => {
+  console.log(e, e.nativeParams.text);
+};
+
+const onFocusChanged = (e: any) => {
+  console.log(e.nativeParams.isFocused);
+};
+</script>
+<style scoped>
+.input {
+  width: 450px;
+  height: 60px;
+}
+</style>

package/rules/.docs/examples/component/list-view/basic.vue

@@ -0,0 +1,58 @@
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import type {
+  QTIListView,
+  QTListViewItem,
+  QTPoster,
+} from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  setup() {
+    const listViewRef = ref<QTIListView>();
+    const arr: Array<QTListViewItem> = [];
+    let listDataRec: Array<QTListViewItem> = [];
+    for (let i = 0; i < 24; i++) {
+      const poster: QTPoster = {
+        type: 10001,
+        decoration: { top: 20, left: 20, right: 20, bottom: 20 },
+        title: {
+          text: `主标题${i}`,
+          enable: true,
+          style: { width: 260 },
+        },
+        style: { width: 260, height: 320 },
+        titleStyle: { width: 260, height: 120, marginTop: 320 - 60 },
+        titleFocusStyle: { width: 260, marginTop: 320 - 100 },
+      };
+      arr.push(poster);
+    }
+
+    listDataRec = listViewRef.value!.init(arr);
+    // 	初始化组件之后返回值常用操作
+    //  获取引用类型值 let getData = JSON.parse(JSON.stringify(listDataRec))
+    //  获取基本类型值 listDataRec[0].assetTitle
+    //  修改值 listDataRec[0].assetTitle = '更新assetTitle'
+    //  push   listDataRec.push({ 单条数据 }) | listDataRec.push(...[多条数据]) //push方法
+    //  pop    listDataRec.pop() //pop方法 末尾删除一条item
+    //  concat listDataRec.concat(data) //concat方法 链接listDataRec数据
+    // 	splice(1个参数) 删除 listDataRec.splice(1)    //splice方法删除 从第一项开始删除之后所有item
+    // 	splice(2个参数) 删除 listDataRec.splice(1, 2) //splice方法删除 （从第1个开始 删除2条item）
+    // 	splice(3个参数 - 替换) listDataRec.splice(4, 2, data)    //splice方法-替换 从索引位置 4 开始，替换两个元素，替换的data （当三个参数第二个参数不为0时 为替换）
+    // 	splice(3个参数 - 插入) listDataRec.splice(4, 0, data)    //splice方法-插入 从索引位置 4 开始，替换0，插入的data （当三个参数第二个参数为0时 为插入）仅支持runtime版本 2.3+
+    //   forEach循环   listDataRec.forEach(el => { el.assetTitle = '修改assetTitle' }) //循环修改每个item的值 整体更新
+    //   for循环   for (let i = 0; i < listDataRec.length; i++) { if () { } } //循环更新符合条件的每个item 当筛选个别条件的item时可以使用for循环，当循环修改每个item的值时建议使用forEach循环
+    //   重新赋值   listDataRec.splice(0); listDataRec.push(...data)  // 整体更新
+
+    return {
+      listViewRef,
+    };
+  },
+});
+</script>
+
+<template>
+  <qt-list-view ref="listViewRef" class="list_view">
+    <!-- 结合poster组件快速生成item 亦可自定义item-->
+    <qt-poster />
+  </qt-list-view>
+</template>

package/rules/.docs/examples/component/list-view/ref-basic.vue

@@ -0,0 +1,33 @@
+<template>
+  <qt-list-view class="list_view_ref" :listData="listDatas">
+    <qt-button type="1" enableFlexStyle text="title" />
+  </qt-list-view>
+</template>
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import { qtRef } from "@quicktvui/quicktvui3";
+
+const listDatas = qtRef();
+
+onMounted(() => {
+  listDatas.value = mockData(); //初始化数据
+});
+// 模拟数据
+const mockData = () => {
+  return new Array(20).fill(1).map((item, i) => {
+    return {
+      type: 1,
+      focus: { enable: true, scale: 1.1, border: false },
+      decoration: { top: 20, left: 10 },
+      title: `主标题${i}`,
+    };
+  });
+};
+</script>
+<style scoped>
+.list_view_ref {
+  width: 300px;
+  height: 1080px;
+  background-color: #191919;
+}
+</style>

package/rules/.docs/examples/component/list-view/ref-operations.vue

@@ -0,0 +1,58 @@
+<template>
+  <qt-list-view class="list_view_ref" :listData="listDatas">
+    <qt-button type="1" enableFlexStyle text="title" />
+  </qt-list-view>
+</template>
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import { qtRef } from "@quicktvui/quicktvui3";
+
+const listDatas = qtRef();
+
+onMounted(() => {
+  listDatas.value = mockData(); //初始化数据
+});
+// 新增数据
+const addFn = () => {
+  listDatas.value.push({ type: 1, title: "new标题" });
+};
+// 插入数据
+const insertFn = () => {
+  listDatas.value.splice(1, 0, { type: 1, title: "new标题" });
+};
+//删除数据
+const deleteFn = () => {
+  listDatas.value.splice(1, 1);
+  // 删除最后一条数据
+  // listDatas.value.pop()
+  // 删除第一条数据
+  // listDatas.value.shift()
+};
+// 清空数据
+const clearFn = () => {
+  listDatas.value = []; //直接赋值为空数组即可
+};
+// 重置数据
+const resetFn = () => {
+  listDatas.value = mockData(2);
+};
+
+const mockData = (flag = 1) => {
+  return new Array(20).fill(1).map((item, i) => {
+    return {
+      id: `${flag}id${i}`,
+      type: 1,
+      focus: { enable: true, scale: 1.1, border: false },
+      decoration: { top: 20, left: 10 },
+      title: `主标题${i}`,
+    };
+  });
+};
+</script>
+<style scoped>
+.list_view_ref {
+  width: 300px;
+  height: 1080px;
+  background-color: #191919;
+}
+</style>