@quicktvui/ai 1.0.0

package/rules/.docs/examples/component/tabs/item-update.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="es-sdk-root-css">
+    <div class="es-sdk-content-row-css">
+      <s-text-button text="更新Item" @onButtonClicked="onButtonClicked" />
+    </div>
+    <qt-tabs
+      ref="tabRef"
+      class="qt-tabs-css"
+      @onTabPageLoadData="onTabPageLoadData"
+    >
+      <template #waterfall-item>
+        <app-list-item :type="1" />
+      </template>
+    </qt-tabs>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { generatorAppWaterfallSection } from "../__mocks__/app";
+import appListItem from "./item/app-list-item";
+import type {
+  QTITab,
+  QTTab,
+  QTTabItem,
+  QTTabPageData,
+  QTWaterfall,
+  QTWaterfallSection,
+} from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "更新Item",
+  components: {
+    "app-list-item": appListItem,
+  },
+  setup() {
+    const tabRef = ref<QTITab>();
+
+    function onButtonClicked() {
+      const item = tabRef.value?.getPageItem(0, 0, 2);
+      if (item) {
+        item.appName = "小恐龙";
+        item.appIcon =
+          "http://qcloudimg.a311.ottcn.com/data_center/files/2022/11/07/854f47b2-fdbe-4543-a2c3-1f8754dcb13e.jpg";
+        tabRef.value?.updatePageItem(0, 0, 2, item);
+      }
+    }
+
+    function onESCreate() {
+      //tab item list
+      const tabItemList: Array<QTTabItem> = [];
+
+      for (let i = 0; i < 15; i++) {
+        const tabItem: QTTabItem = {
+          _id: `${i}`,
+          type: 20000,
+          text: `Tab:${i}`,
+          titleSize: 20,
+          decoration: {
+            left: 40,
+            right: 20,
+          },
+        };
+        tabItemList.push(tabItem);
+      }
+
+      //tab
+      const tab: QTTab = {
+        defaultFocusIndex: 0,
+        defaultIndex: 0,
+        itemList: tabItemList,
+      };
+      tabRef.value?.initTab(tab);
+
+      const waterfallData: QTWaterfall = {
+        width: 1920,
+        height: 1080,
+      };
+      tabRef.value?.initPage(waterfallData);
+    }
+
+    let pageIndexLast = -1;
+
+    //-----------------------------------------------------
+    function onTabPageLoadData(
+      pageIndex: number,
+      pageNo: number,
+      useDiff: boolean,
+    ): void {
+      console.log(
+        `---------loadPageData---------->>>` +
+          `  pageIndex:${pageIndex}  useDiff:${useDiff}`,
+      );
+      if (pageIndexLast === pageIndex) {
+        return;
+      }
+      pageIndexLast = pageIndex;
+
+      const section: QTWaterfallSection = generatorAppWaterfallSection(
+        "0",
+        "应用",
+      );
+
+      const sectionList: Array<QTWaterfallSection> = [section];
+
+      const tabPage: QTTabPageData = {
+        useDiff,
+        data: sectionList,
+      };
+      tabRef.value?.setPageData(pageIndex, tabPage);
+    }
+
+    return {
+      tabRef,
+      onESCreate,
+      onButtonClicked,
+      onTabPageLoadData,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-tabs-css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>

package/rules/.docs/examples/component/tabs/ref-basic.vue

@@ -0,0 +1,63 @@
+<template>
+  <qt-tabs ref="tabRef" class="qt-tabs-css" :tabs="tabDatas">
+    <template #waterfall-item>
+      <appListItem :type="1" />
+    </template>
+  </qt-tabs>
+</template>
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import { qtTabsRef } from "@quicktvui/quicktvui3";
+import appListItem from "./item/app-list-item.vue";
+
+const tabDatas = qtTabsRef();
+
+onMounted(() => {
+  tabDatas.value = mockNavData(); //初始化数据
+});
+
+// 模拟接口数据
+const mockNavData = () => {
+  return Array.from({ length: 10 })
+    .fill(1)
+    .map((item, index) => {
+      return {
+        _id: `001${index}`,
+        type: 20000,
+        text: "tab01",
+        titleSize: 20,
+        decoration: { left: 40, right: 20 },
+        content: Array.from({ length: 2 })
+          .fill(1)
+          .map((sitem, sindex) => {
+            return {
+              _id: `section-id${index}${sindex}`,
+              type: 1002,
+              title: `板块标题${sindex}`,
+              titleStyle: { width: 1620, height: 60 },
+              style: { width: 1620, height: -1 },
+              itemList: Array.from({ length: 5 })
+                .fill(1)
+                .map((siitem, siindex) => {
+                  return {
+                    _id: `item-id${index}${sindex}${siindex}`,
+                    type: 1,
+                    decoration: { left: 90, bottom: 40 },
+                    appIcon:
+                      "http://qcloudimg.a311.ottcn.com/data_center/files/2022/08/02/56c9ff53-0117-44cf-b5c3-e732bd3c7ef8.jpg",
+                    appName: `格子标题${siindex}`,
+                    style: { width: 170, height: 220 },
+                  };
+                }),
+            };
+          }),
+      };
+    });
+};
+</script>
+<style scoped>
+.qt-tabs-css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>

package/rules/.docs/examples/component/tabs/ref-operations.vue

@@ -0,0 +1,97 @@
+<template>
+  <qt-tabs ref="tabRef" class="qt-tabs-ref" :tabs="tabDatas">
+    <template #waterfall-item>
+      <appListItem :type="1" />
+    </template>
+  </qt-tabs>
+</template>
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import { qtTabsRef } from "@quicktvui/quicktvui3";
+import appListItem from "./item/app-list-item.vue";
+
+const tabDatas = qtTabsRef();
+
+onMounted(() => {
+  tabDatas.value = mockNavData(); //初始化数据
+});
+
+// 添加板块数据
+const addSectionFn = () => {
+  tabDatas.value[0].content.push(mockSectionData("section-1"));
+};
+// 插入板块数据
+const insertSectionFn = () => {
+  tabDatas.value[0].content.splice(1, 0, mockSectionData("section-2"));
+};
+// 删除板块数据
+const deleteSectionFn = () => {
+  tabDatas.value[0].content.splice(1, 1);
+};
+// 更新板块数据
+const updateSectionFn = () => {
+  tabDatas.value[0].content[0].title = `updateSectionFn${Math.random()}`;
+};
+// 新增板块格子
+const addItemFn = () => {
+  tabDatas.value[0].content[0].itemList.push(mockItemData("item-1"));
+};
+// 插入格子
+const insertItemFn = () => {
+  tabDatas.value[0].content[0].itemList.splice(1, 0, mockItemData("item-1"));
+};
+// 删除格子
+const deleteItemFn = () => {
+  // tabDatas.value[0].content[0].itemList.splice(1,1)
+  tabDatas.value[0].content[0].itemList.pop();
+};
+// 修改格子
+const updateItemFn = () => {
+  tabDatas.value[0].content[0].itemList[1].appName = `updateItemFn${Math.random()}`;
+};
+
+// 模拟接口数据
+const mockNavData = () => {
+  return Array.from({ length: 10 })
+    .fill(1)
+    .map((item, index) => {
+      return {
+        _id: `001${index}`,
+        type: 20000,
+        text: `tab${index}`,
+        titleSize: 20,
+        decoration: { left: 40, right: 20 },
+        content: [mockSectionData("section-0")],
+      };
+    });
+};
+// 模拟分页数据
+const mockSectionData = (sectionid = "") => {
+  return {
+    _id: `${sectionid}section-id${Math.random()}`,
+    type: 1002,
+    title: "板块标题",
+    titleStyle: { width: 1620, height: 60 },
+    style: { width: 1620, height: -1 },
+    itemList: [mockItemData(`${sectionid}-1`), mockItemData(`${sectionid}-2`)],
+  };
+};
+const mockItemData = (indexid = "") => {
+  return {
+    _id: `${indexid}itemid${Math.random()}`,
+    type: 1,
+    decoration: { left: 90, bottom: 40 },
+    appIcon:
+      "http://qcloudimg.a311.ottcn.com/data_center/files/2022/08/02/56c9ff53-0117-44cf-b5c3-e732bd3c7ef8.jpg",
+    appName: "标题",
+    style: { width: 170, height: 220 },
+  };
+};
+</script>
+<style scoped>
+.qt-tabs-ref {
+  width: 1920px;
+  height: 1000px;
+  background-color: transparent;
+}
+</style>

package/rules/.docs/examples/component/tabs/ref-page.vue

@@ -0,0 +1,89 @@
+<template>
+  <qt-tabs
+    ref="tabRef"
+    class="qt-tabs-css"
+    :tabs="tabDatas"
+    @onTabPageLoadData="onTabPageLoadData"
+  >
+    <template #waterfall-item>
+      <appListItem :type="1" />
+    </template>
+  </qt-tabs>
+</template>
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import { qtTabsRef } from "@quicktvui/quicktvui3";
+import appListItem from "./item/app-list-item.vue";
+
+const tabDatas = qtTabsRef();
+
+onMounted(() => {
+  tabDatas.value = mockNavData(); //初始化数据
+});
+
+// 分页回调函数
+const onTabPageLoadData = (
+  pageIndex: number,
+  pageNo: number,
+  useDiff: boolean,
+) => {
+  const pageData = mockPageData(pageIndex, pageNo); //获取模拟分页数据
+
+  if (pageData.lists && pageData.lists.length) {
+    tabDatas.value[pageIndex].content.push(...pageData.lists); //添加tab页数据
+  }
+};
+// 模拟接口数据
+const mockNavData = () => {
+  return Array.from({ length: 10 })
+    .fill(1)
+    .map((item, index) => {
+      return {
+        _id: `001${index}`,
+        type: 20000,
+        text: "tab01",
+        titleSize: 20,
+        decoration: { left: 40, right: 20 },
+        content: [],
+      };
+    });
+};
+// 模拟分页数据
+const mockPageData = (pageIndex: number, pageNo: number) => {
+  if (pageNo >= 2) {
+    return { lists: [] };
+  }
+  return {
+    lists: Array.from({ length: 2 })
+      .fill(1)
+      .map((item, index) => {
+        return {
+          _id: `${pageIndex}section-id${pageNo}${index}`,
+          type: 1002,
+          title: "板块标题",
+          titleStyle: { width: 1620, height: 60 },
+          style: { width: 1620, height: -1 },
+          itemList: Array.from({ length: 5 })
+            .fill(1)
+            .map((iitem, iindex) => {
+              return {
+                _id: `${pageIndex}item-id${pageNo}${index}${iindex}`,
+                type: 1,
+                decoration: { left: 90, bottom: 40 },
+                appIcon:
+                  "http://qcloudimg.a311.ottcn.com/data_center/files/2022/08/02/56c9ff53-0117-44cf-b5c3-e732bd3c7ef8.jpg",
+                appName: `格子标题${iindex}`,
+                style: { width: 170, height: 220 },
+              };
+            }),
+        };
+      }),
+  };
+};
+</script>
+<style scoped>
+.qt-tabs-css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>

package/rules/.docs/examples/component/tabs/section-add.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="es-sdk-root-css">
+    <div class="es-sdk-content-row-css">
+      <s-text-button text="添加Section" @onButtonClicked="onButtonClicked" />
+    </div>
+    <qt-tabs
+      ref="tabRef"
+      class="qt-tabs-css"
+      @onTabPageLoadData="onTabPageLoadData"
+    >
+      <template #waterfall-item>
+        <app-list-item :type="1" />
+      </template>
+    </qt-tabs>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { QTTabPageState } from "@quicktvui/quicktvui3";
+import { generatorAppWaterfallSection } from "../__mocks__/app";
+import appListItem from "./item/app-list-item";
+import type {
+  QTITab,
+  QTTab,
+  QTTabItem,
+  QTTabPageData,
+  QTWaterfall,
+  QTWaterfallSection,
+} from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "添加Section",
+  components: {
+    "app-list-item": appListItem,
+  },
+  setup() {
+    const tabRef = ref<QTITab>();
+
+    function onButtonClicked() {
+      const sectionList: Array<QTWaterfallSection> = [
+        generatorAppWaterfallSection("0", "新添加应用"),
+      ];
+      const tabPage: QTTabPageData = {
+        useDiff: true,
+        data: sectionList,
+      };
+      tabRef.value?.addPageData(0, tabPage, 0);
+    }
+
+    function onESCreate() {
+      //tab item list
+      const tabItemList: Array<QTTabItem> = [];
+
+      for (let i = 0; i < 15; i++) {
+        const tabItem: QTTabItem = {
+          _id: `${i}`,
+          type: 20000,
+          text: `Tab:${i}`,
+          titleSize: 20,
+          decoration: {
+            left: 40,
+            right: 20,
+          },
+        };
+        tabItemList.push(tabItem);
+      }
+
+      //tab
+      const tab: QTTab = {
+        defaultFocusIndex: 0,
+        defaultIndex: 0,
+        itemList: tabItemList,
+      };
+      tabRef.value?.initTab(tab);
+
+      const waterfallData: QTWaterfall = {
+        width: 1920,
+        height: 1080,
+      };
+      tabRef.value?.initPage(waterfallData);
+    }
+
+    let pageNum = 0;
+
+    function onTabPageLoadData(
+      pageIndex: number,
+      pageNo: number,
+      useDiff: boolean,
+    ): void {
+      if (pageIndex !== 0) {
+        return;
+      }
+      setTimeout(() => {
+        const section: QTWaterfallSection = generatorAppWaterfallSection(
+          "0",
+          "应用",
+        );
+
+        const sectionList: Array<QTWaterfallSection> = [section];
+
+        const tabPage: QTTabPageData = {
+          useDiff,
+          data: sectionList,
+        };
+        if (pageNum == 0) {
+          tabRef.value?.setPageData(pageIndex, tabPage);
+        } else {
+          tabRef.value?.addPageData(pageIndex, tabPage, 0);
+        }
+        pageNum++;
+
+        if (pageNum === 2) {
+          tabRef.value?.setPageState(
+            pageIndex,
+            QTTabPageState.QT_TAB_PAGE_STATE_COMPLETE,
+          );
+        }
+      }, 2000);
+    }
+
+    return {
+      tabRef,
+      onESCreate,
+      onTabPageLoadData,
+      onButtonClicked,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-tabs-css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>

package/rules/.docs/examples/component/tabs/section-delete.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="es-sdk-root-css">
+    <div class="es-sdk-content-row-css">
+      <s-text-button
+        text="删除第一个page第一个section"
+        @onButtonClicked="onButtonClicked"
+      />
+    </div>
+    <qt-tabs
+      ref="tabRef"
+      class="qt-tabs-css"
+      @onTabPageLoadData="onTabPageLoadData"
+    >
+      <template #waterfall-item>
+        <app-list-item :type="1" />
+      </template>
+    </qt-tabs>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { generatorAppWaterfallSection } from "../__mocks__/app";
+import appListItem from "./item/app-list-item";
+import type {
+  QTITab,
+  QTTab,
+  QTTabItem,
+  QTTabPageData,
+  QTWaterfall,
+  QTWaterfallSection,
+} from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "删除Section",
+  components: {
+    "app-list-item": appListItem,
+  },
+  setup() {
+    const tabRef = ref<QTITab>();
+
+    function onButtonClicked() {
+      tabRef.value?.deletePageSection(0, 0, 1);
+    }
+
+    function onESCreate() {
+      //tab item list
+      const tabItemList: Array<QTTabItem> = [];
+
+      for (let i = 0; i < 15; i++) {
+        const tabItem: QTTabItem = {
+          _id: `${i}`,
+          type: 20000,
+          text: `Tab:${i}`,
+          titleSize: 20,
+          decoration: {
+            left: 40,
+            right: 20,
+          },
+        };
+        tabItemList.push(tabItem);
+      }
+
+      //tab
+      const tab: QTTab = {
+        defaultFocusIndex: 0,
+        defaultIndex: 0,
+        itemList: tabItemList,
+      };
+      tabRef.value?.initTab(tab);
+
+      const waterfallData: QTWaterfall = {
+        width: 1920,
+        height: 1080,
+      };
+      tabRef.value?.initPage(waterfallData);
+    }
+
+    let pageIndexLast = -1;
+
+    //-----------------------------------------------------
+    function onTabPageLoadData(
+      pageIndex: number,
+      pageNo: number,
+      useDiff: boolean,
+    ): void {
+      if (pageIndexLast === pageIndex) {
+        return;
+      }
+      pageIndexLast = pageIndex;
+
+      const sectionOne: QTWaterfallSection = generatorAppWaterfallSection(
+        "0",
+        "应用:1",
+      );
+      const sectionTwo: QTWaterfallSection = generatorAppWaterfallSection(
+        "1",
+        "应用:2",
+      );
+
+      const sectionList: Array<QTWaterfallSection> = [sectionOne, sectionTwo];
+
+      const tabPage: QTTabPageData = {
+        useDiff,
+        data: sectionList,
+      };
+      tabRef.value?.setPageData(pageIndex, tabPage);
+    }
+
+    return {
+      tabRef,
+      onESCreate,
+      onTabPageLoadData,
+      onButtonClicked,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-tabs-css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>