@quicktvui/ai 1.0.0

package/rules/.docs/examples/component/waterfall/item-delete.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="es-sdk-root-css">
+    <div class="es-sdk-content-row-css">
+      <s-text-button
+        text="删除第一个板块Item"
+        @onButtonClicked="onDeleteButtonClicked"
+      />
+      <s-text-button
+        text="删除第二个板块Item"
+        @onButtonClicked="onDeleteButton2Clicked"
+      />
+    </div>
+    <qt-waterfall ref="waterfall" class="qt-waterfall-op-css">
+      <template #item>
+        <app-list-item :type="1" />
+      </template>
+    </qt-waterfall>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import {
+  generatorAppChildrenWaterfallItemList,
+  generatorAppQuestionWaterfallItemList,
+  generatorWaterfallSection,
+} from "../__mocks__/app";
+import appListItem from "./item/app-list-item";
+import type {
+  QTIWaterfall,
+  QTWaterfall,
+  QTWaterfallSection,
+} from "@quicktvui/quicktvui3";
+
+const TAG = "WaterfallTAG";
+
+export default defineComponent({
+  name: "删除Item",
+  components: {
+    "app-list-item": appListItem,
+  },
+  setup() {
+    const waterfall = ref<QTIWaterfall>();
+
+    function onDeleteButtonClicked() {
+      waterfall.value?.deleteItem(0, 0, 1);
+    }
+
+    function onDeleteButton2Clicked() {
+      waterfall.value?.deleteItem(1, 0, 2);
+    }
+
+    function onESCreate() {
+      const waterfallData: QTWaterfall = {
+        width: 1920,
+        height: 1080,
+      };
+      waterfall.value?.init(waterfallData);
+      const sectionList: Array<QTWaterfallSection> = [
+        generatorWaterfallSection(
+          "0",
+          `应用：${Date.now()}`,
+          generatorAppQuestionWaterfallItemList("1", 7),
+        ),
+        generatorWaterfallSection(
+          "2",
+          `应用：${Date.now()}`,
+          generatorAppChildrenWaterfallItemList("3", 7),
+        ),
+      ];
+      waterfall.value?.addSectionList(sectionList);
+    }
+
+    return {
+      waterfall,
+      onESCreate,
+      onDeleteButton2Clicked,
+      onDeleteButtonClicked,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-waterfall-op-css {
+  width: 1920px;
+  height: 800px;
+}
+</style>

package/rules/.docs/examples/component/waterfall/item-get.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="es-sdk-root-css">
+    <div class="es-sdk-content-row-css">
+      <s-text-button text="查询Item" @onButtonClicked="onGetButtonClicked" />
+    </div>
+    <qt-waterfall ref="waterfall" class="qt-waterfall-op-css">
+      <template #item>
+        <app-list-item :type="1" />
+      </template>
+    </qt-waterfall>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { useESLog } from "@extscreen/es3-core";
+import { generatorAppWaterfallSection } from "../__mocks__/app";
+import appListItem from "./item/app-list-item";
+import type {
+  QTIWaterfall,
+  QTWaterfall,
+  QTWaterfallSection,
+} from "@quicktvui/quicktvui3";
+
+const TAG = "WaterfallTAG";
+
+export default defineComponent({
+  name: "查询Item",
+  components: {
+    "app-list-item": appListItem,
+  },
+  setup() {
+    const waterfall = ref<QTIWaterfall>();
+    const log = useESLog();
+
+    function onGetButtonClicked() {
+      const item = waterfall.value?.getItem(0, 2);
+      log.d(TAG, "-------获取item信息-------->>>>", item);
+    }
+
+    function onESCreate() {
+      const waterfallData: QTWaterfall = {
+        width: 1920,
+        height: 1080,
+      };
+      waterfall.value?.init(waterfallData);
+      const sectionList: Array<QTWaterfallSection> = [
+        generatorAppWaterfallSection("0", `应用：${Date.now()}`),
+      ];
+      waterfall.value?.addSectionList(sectionList);
+    }
+
+    return {
+      waterfall,
+      onESCreate,
+      onGetButtonClicked,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-waterfall-op-css {
+  width: 1920px;
+  height: 800px;
+}
+</style>

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

@@ -0,0 +1,85 @@
+<template>
+  <div class="es-sdk-root-css">
+    <div class="es-sdk-content-row-css">
+      <s-text-button
+        text="更新单个Item"
+        @onButtonClicked="onUpdateButtonClicked"
+      />
+      <s-text-button
+        text="更新多个Item"
+        @onButtonClicked="onUpdateMultiButtonClicked"
+      />
+    </div>
+    <qt-waterfall ref="waterfall" class="qt-waterfall-op-css">
+      <template #item>
+        <app-list-item :type="1" />
+      </template>
+    </qt-waterfall>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import {
+  generatorAppChildrenWaterfallItem,
+  generatorAppChildrenWaterfallItemList,
+  generatorAppWaterfallSection,
+} from "../__mocks__/app";
+import appListItem from "./item/app-list-item";
+import type {
+  QTIWaterfall,
+  QTWaterfall,
+  QTWaterfallSection,
+} from "@quicktvui/quicktvui3";
+
+const TAG = "WaterfallTAG";
+
+export default defineComponent({
+  name: "更新Item",
+  components: {
+    "app-list-item": appListItem,
+  },
+  setup() {
+    const waterfall = ref<QTIWaterfall>();
+
+    function onUpdateButtonClicked() {
+      const item = generatorAppChildrenWaterfallItem("0", 2);
+      waterfall.value?.updateItem(0, 0, item);
+    }
+
+    function onUpdateMultiButtonClicked() {
+      const itemList = generatorAppChildrenWaterfallItemList("0", 2);
+      waterfall.value?.updateItemList(0, 0, 2, itemList);
+    }
+
+    function onESCreate() {
+      const waterfallData: QTWaterfall = {
+        width: 1920,
+        height: 1080,
+      };
+      waterfall.value?.init(waterfallData);
+      const sectionList: Array<QTWaterfallSection> = [
+        generatorAppWaterfallSection("0", `应用：${Date.now()}`),
+        generatorAppWaterfallSection("1", `应用：${Date.now()}`),
+        generatorAppWaterfallSection("2", `应用：${Date.now()}`),
+      ];
+      waterfall.value?.addSectionList(sectionList);
+    }
+
+    return {
+      waterfall,
+      onESCreate,
+      onUpdateButtonClicked,
+      onUpdateMultiButtonClicked,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-waterfall-op-css {
+  width: 1920px;
+  height: 800px;
+}
+</style>

package/rules/.docs/examples/component/waterfall/ref-base.vue

@@ -0,0 +1,141 @@
+<template>
+  <qt-waterfall :listData="waterfallDatas" class="qt-waterfall-ref-css" />
+</template>
+
+<script lang="ts" setup>
+import { QTWaterfallSectionType, qtRef } from "@quicktvui/quicktvui3";
+import type { QTPoster, QTWaterfallItem } from "@quicktvui/quicktvui3";
+
+const waterfallDatas = qtRef();
+
+defineExpose({
+  onESCreate() {
+    waterfallDatas.value = mockData("initFn");
+  },
+});
+// 模拟数据
+function mockPosterItemList(
+  sectionId: string,
+  size = 15,
+): Array<QTWaterfallItem> {
+  const data: Array<QTWaterfallItem> = [];
+  const imgURL =
+    "https://img1.baidu.com/it/u=2666955302,2339578501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750";
+  for (let i = 0; i < size; i++) {
+    const poster: QTPoster = {
+      _id: `${sectionId}_${i}`,
+      focus: {
+        enable: true,
+        scale: 1.1,
+        border: false,
+      },
+      type: 10001,
+      decoration: {
+        left: 60,
+        bottom: 20,
+      },
+      title: {
+        text: `主标题${i}`,
+        enable: true,
+        style: {
+          width: 260,
+        },
+      },
+      subTitle: {
+        text: "副标题",
+        enable: true,
+        style: {
+          width: 260,
+        },
+      },
+      floatTitle: {
+        text: "浮动标题",
+        enable: true,
+        style: {
+          width: 260,
+        },
+        background: { colors: ["#e5000000", "#00000000"], orientation: 4 },
+      },
+      shimmer: {
+        enable: true,
+      },
+      ripple: {
+        enable: true,
+        style: {
+          right: 0,
+          bottom: 0,
+          marginRight: -12,
+        },
+      },
+      image: {
+        src: imgURL,
+        enable: true,
+        style: {
+          width: 260,
+          height: 320,
+        },
+      },
+      corner: {
+        text: "角标",
+        enable: true,
+        style: {
+          width: 260,
+          height: 30,
+        },
+        background: {
+          colors: ["#FE3824", "#F0051E"],
+          cornerRadii4: [0, 8, 0, 8],
+          orientation: 2,
+        },
+      },
+      style: {
+        width: 260,
+        height: 400,
+      },
+      titleStyle: {
+        width: 260,
+        height: 120,
+        marginTop: 320 - 60,
+      },
+      titleFocusStyle: { width: 260, marginTop: 320 - 100 },
+    };
+    data.push(poster);
+  }
+  return data;
+}
+// 模拟数据
+const mockData = (flag = "") => {
+  return new Array(5).fill(1).map((item, i) => {
+    return {
+      _id: `${i}`,
+      type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
+      title: `板块标题${i}${flag}`,
+      titleStyle: {
+        width: 1000,
+        height: 50,
+        marginTop: 10,
+        marginBottom: 10,
+        fontSize: 50,
+      },
+      itemList: mockPosterItemList(i + flag, 5),
+      style: {
+        width: 1620,
+        height: -1,
+      },
+      decoration: {
+        left: 1,
+        right: 1,
+        top: 10,
+      },
+    };
+  });
+};
+</script>
+
+<style scoped>
+.qt-waterfall-ref-css {
+  width: 1620px;
+  height: 1080px;
+  background-color: transparent;
+}
+</style>

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

@@ -0,0 +1,192 @@
+<template>
+  <qt-waterfall :listData="waterfallDatas" class="qt-waterfall-ref-css" />
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import { QTWaterfallSectionType, qtRef } from "@quicktvui/quicktvui3";
+import type {
+  QTWaterfallItem,
+  QTWaterfallSection,
+} from "@quicktvui/quicktvui3";
+
+const waterfallDatas = qtRef<QTWaterfallSection[]>();
+
+// 新增板块数据
+const addFn = () => {
+  waterfallDatas.value.push(mockSectionData(7, "addFn"));
+};
+// 插入板块数据
+const insertFn = () => {
+  waterfallDatas.value.splice(0, 0, mockSectionData(6, "insertFn"));
+};
+// 更新板块数据
+const updateFn = () => {
+  waterfallDatas.value[0].title = `${Math.random()}-update`;
+};
+// 删除板块数据
+const deleteFn = () => {
+  waterfallDatas.value.splice(1, 1);
+};
+// 新增板块格子数据
+const addItemFn = () => {
+  waterfallDatas.value[0].itemList.push(
+    mockPosterData(`addItemFn${Math.random()}`, 1),
+  );
+};
+// 更新板块格子数据
+const updateItemFn = () => {
+  waterfallDatas.value[0].itemList[0].title.text = `${Math.random()}updateItemFn`;
+};
+// 重置板块格子数据
+const resetItemAllFn = () => {
+  waterfallDatas.value[0].itemList = mockPosterItemList("resetItemAllFn", 5);
+};
+// 删除板块格子数据
+const deleteItemFn = () => {
+  waterfallDatas.value[0].itemList.splice(0, 1);
+};
+// 插入板块格子数据
+const insertItemFn = () => {
+  waterfallDatas.value[0].itemList.splice(0, 0, mockPosterData("addItemFn", 1));
+};
+// 清空所有数据
+const clearFn = () => {
+  waterfallDatas.value = [];
+};
+
+onMounted(() => {
+  waterfallDatas.value = mockList();
+});
+
+const imgURL =
+  "https://img1.baidu.com/it/u=2666955302,2339578501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750";
+// 模拟格子数据
+const mockPosterData = (sectionId, i) => {
+  return {
+    _id: `${sectionId}_${i}${Math.random()}`,
+    focus: {
+      enable: true,
+      scale: 1.1,
+      border: false,
+    },
+    type: 10001,
+    decoration: {
+      left: 60,
+      bottom: 20,
+    },
+    title: {
+      text: `主标题${i}`,
+      enable: true,
+      style: {
+        width: 260,
+      },
+    },
+    subTitle: {
+      text: "副标题",
+      enable: true,
+      style: {
+        width: 260,
+      },
+    },
+    floatTitle: {
+      text: "浮动标题",
+      enable: true,
+      style: {
+        width: 260,
+      },
+      background: { colors: ["#e5000000", "#00000000"], orientation: 4 },
+    },
+    shimmer: {
+      enable: true,
+    },
+    ripple: {
+      enable: true,
+      style: {
+        right: 0,
+        bottom: 0,
+        marginRight: -12,
+      },
+    },
+    image: {
+      src: imgURL,
+      enable: true,
+      style: {
+        width: 260,
+        height: 320,
+      },
+    },
+    corner: {
+      text: "角标",
+      enable: true,
+      style: {
+        width: 260,
+        height: 30,
+      },
+      background: {
+        colors: ["#FE3824", "#F0051E"],
+        cornerRadii4: [0, 8, 0, 8],
+        orientation: 2,
+      },
+    },
+    style: {
+      width: 260,
+      height: 400,
+    },
+    titleStyle: {
+      width: 260,
+      height: 120,
+      marginTop: 320 - 60,
+    },
+    titleFocusStyle: { width: 260, marginTop: 320 - 100 },
+  };
+};
+// 模拟格子列表
+function mockPosterItemList(
+  sectionId: string,
+  size = 15,
+): Array<QTWaterfallItem> {
+  return new Array(size).fill(1).map((item, i) => {
+    return mockPosterData(sectionId, i);
+  });
+}
+// 模拟板块数据
+const mockSectionData = (i, flag) => {
+  return {
+    _id: `${i}${Math.random()}`,
+    type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
+    title: `板块标题:${i}${flag}`,
+    titleStyle: {
+      width: 1000,
+      height: 50,
+      marginTop: 10,
+      marginBottom: 10,
+      fontSize: 50,
+    },
+    itemList: mockPosterItemList(i + flag, 5),
+    style: {
+      width: 1620,
+      // height: -1,
+    },
+    decoration: {
+      left: 1,
+      right: 1,
+      top: 10,
+    },
+  };
+};
+// 模拟数据集
+const mockList = (flag = "", num = 5) => {
+  return new Array(num).fill(1).map((item, i) => {
+    return mockSectionData(i, flag);
+  });
+};
+</script>
+
+<style>
+.qt-waterfall-ref-css {
+  width: 1620px;
+  height: 1080px;
+  background-color: transparent;
+}
+</style>

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

@@ -0,0 +1,72 @@
+<template>
+  <div class="es-sdk-root-css">
+    <s-text-button text="添加板块" @onButtonClicked="onAddButtonClicked" />
+    <qt-waterfall ref="waterfall" class="qt-waterfall-op-css">
+      <template #item>
+        <app-list-item :type="1" />
+      </template>
+    </qt-waterfall>
+  </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 {
+  QTIWaterfall,
+  QTWaterfall,
+  QTWaterfallSection,
+} from "@quicktvui/quicktvui3";
+
+const TAG = "WaterfallTAG";
+
+export default defineComponent({
+  name: "添加Section",
+  components: {
+    "app-list-item": appListItem,
+  },
+  setup() {
+    const waterfall = ref<QTIWaterfall>();
+
+    function onAddButtonClicked() {
+      const sectionList: Array<QTWaterfallSection> = [
+        generatorAppWaterfallSection("0", `应用：${Date.now()}`),
+      ];
+      waterfall.value?.addSectionList(sectionList);
+    }
+
+    function onESCreate() {
+      const waterfallData: QTWaterfall = {
+        width: 1920,
+        height: 1080,
+      };
+      waterfall.value?.init(waterfallData);
+      const sectionList: Array<QTWaterfallSection> = [
+        generatorAppWaterfallSection("0", `应用：${Date.now()}`),
+      ];
+      waterfall.value?.setSectionList(sectionList);
+    }
+
+    return {
+      waterfall,
+      onESCreate,
+      onAddButtonClicked,
+    };
+  },
+});
+</script>
+
+<style>
+.es-sdk-root-css {
+  width: 1920px;
+  height: 1080px;
+  background-color: #26292f;
+}
+
+.qt-waterfall-op-css {
+  width: 1920px;
+  height: 800px;
+}
+</style>