@quicktvui/ai 1.0.0

package/rules/.docs/examples/component/grid-view/ref-page.vue

@@ -0,0 +1,102 @@
+<template>
+  <qt-grid-view
+    ref="gridViewRef"
+    class="grid_view"
+    :listData="listData"
+    :spanCount="6"
+    :preloadNo="5"
+    :loadMore="loadMoreFn"
+    :listenBoundEvent="true"
+    :openPage="true"
+  >
+    <qt-view type="1" class="qt_list_item" :focusable="true" eventClick>
+      <qt-text text="${text}" class="qt_list_item_text" />
+    </qt-view>
+    <!-- 加载更多loading-模板【type必须是1002】 -->
+    <template #loading>
+      <qt-loading-view
+        :type="1002"
+        name="loading"
+        color="rgba(255,255,255,0.3)"
+        style="height: 40px; width: 40px"
+        :focusable="false"
+      />
+    </template>
+    <!-- 分页结束提示语-模板【type必须是1003】 -->
+    <qt-text
+      :type="1003"
+      style="width: 1920px; height: 100px"
+      gravity="center"
+      :focusable="false"
+      text="已经到底啦"
+    />
+  </qt-grid-view>
+</template>
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import { qtRef } from "@quicktvui/quicktvui3";
+
+const gridViewRef = ref();
+const listData = qtRef();
+
+onMounted(() => {
+  mockData(1).then((res) => {
+    listData.value = res.lists; //初始化数据
+  });
+});
+const loadMoreFn = (pageNo: number) => {
+  mockData(pageNo).then((res) => {
+    if (res.lists && res.lists.length) {
+      listData.value.push(...res.lists);
+    } else {
+      // gridViewRef.value.stopPage()//结束分页-默认不显示到底提示
+      gridViewRef.value.stopPage(true); //结束分页-显示到底提示
+    }
+  });
+};
+let timerId;
+// 模拟数据
+const mockData = (pageNo: number): Promise<any> => {
+  return new Promise((resolve) => {
+    if (pageNo > 3) {
+      resolve({ lists: [] });
+    } else {
+      clearTimeout(timerId);
+      timerId = setTimeout(() => {
+        resolve({
+          lists: new Array(30).fill(1).map((_, index) => {
+            return {
+              text: `${pageNo}标题${index}`,
+              type: 1,
+              decoration: { left: 30, right: 30, bottom: 6 },
+            };
+          }),
+        });
+      }, 1000);
+    }
+  });
+};
+</script>
+<style scoped>
+.grid_view {
+  width: 1920px;
+  height: 1080px;
+  background-color: transparent;
+}
+
+.qt_list_item {
+  width: 260px;
+  height: 300px;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  focus-background-color: #ffffff;
+}
+
+.qt_list_item_text {
+  width: 200px;
+  height: 300px;
+  font-size: 30px;
+  background-color: transparent;
+}
+</style>

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

@@ -0,0 +1,39 @@
+<template>
+  <qt-view class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" text="QTHeader" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-view class="qt-loading-view-start-page">
+      <qt-header class="header-css" />
+    </qt-view>
+  </qt-view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "QTHeader",
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style>
+.qt-loading-view-start-page {
+  width: 1920px;
+  height: 1000px;
+  background-color: transparent;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.header-css {
+  background-color: red;
+}
+
+.qt-header {
+  background-color: #c7e2fe;
+}
+</style>

package/rules/.docs/examples/component/html/alert.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" text="Alert" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <div class="es-sdk-content-row-css">
+      <s-text-button text="Alert" @onButtonClicked="onButtonClicked" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  emits: [],
+  setup() {
+    function onButtonClicked() {
+      alert("hello alert!");
+    }
+
+    return {
+      onButtonClicked,
+    };
+  },
+});
+</script>
+
+<style></style>

package/rules/.docs/examples/component/html/audio.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+
+    <Audio controls :width="640" :height="360" autoplay loop>
+      <Source
+        src="https://md-mpvolc.meipian.me/users/46717567/762076f2e04d2ade4b1c6afbb0e3719d.mp4"
+        type="video/mp4"
+      />
+    </Audio>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "使用初探",
+  emits: [],
+});
+</script>
+
+<style></style>

package/rules/.docs/examples/component/html/h.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" text="h" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-column>
+      <H1 class="h1-css"> H1: 我是标题一。 </H1>
+      <H2 class="h1-css"> H2: 我是标题二。 </H2>
+      <H3 class="h1-css"> H3: 我是标题三。 </H3>
+      <H4 class="h1-css"> H4: 我是标题四。 </H4>
+      <H5 class="h1-css"> H5: 我是标题五。 </H5>
+      <H6 class="h1-css"> H6: 我是标题六。 </H6>
+    </qt-column>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  emits: [],
+});
+</script>
+
+<style>
+.h1-css {
+  background-color: red;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+</style>

package/rules/.docs/examples/component/html/sound.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+
+    <Audio playEffect :width="640" :height="360" autoplay loop>
+      <Source
+        src="https://md-mpvolc.meipian.me/users/46717567/762076f2e04d2ade4b1c6afbb0e3719d.mp4"
+        type="video/mp4"
+      />
+    </Audio>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "音效",
+  emits: [],
+});
+</script>
+
+<style>
+.qt-image-start-page {
+  width: 1920px;
+  height: 1000px;
+  background-color: transparent;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/rules/.docs/examples/component/html/video.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+
+    <Video
+      controls
+      :width="640"
+      :height="360"
+      autoplay
+      loop
+      src="https://md-mpvolc.meipian.me/users/46717567/762076f2e04d2ade4b1c6afbb0e3719d.mp4"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  emits: [],
+});
+</script>

package/rules/.docs/examples/component/image/assets.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-view class="qt-image-assets-page">
+      <qt-image :src="logoImg" class="qt-image" />
+    </qt-view>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+import logoImg from "../../assets/logo.png";
+
+export default defineComponent({
+  name: "本地图片",
+  setup() {
+    return {
+      logoImg,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-image-assets-page {
+  width: 1920px;
+  height: 1000px;
+  background-color: transparent;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.qt-image-assets-page .qt-image {
+  width: 256px;
+  height: 256px;
+}
+</style>

package/rules/.docs/examples/component/image/network.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-view class="qt-image-start-page">
+      <qt-image
+        src="https://img1.baidu.com/it/u=2666955302,2339578501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750"
+        class="qt-image"
+      />
+    </qt-view>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "网络图片",
+});
+</script>
+
+<style>
+.qt-image-start-page {
+  width: 1920px;
+  height: 1000px;
+  background-color: transparent;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.qt-image-start-page .qt-image {
+  width: 260px;
+  height: 320px;
+}
+</style>

package/rules/.docs/examples/component/img/assets.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-view class="qt-img-assets-page">
+      <img :src="logoImg" class="qt-img" />
+    </qt-view>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+import logoImg from "../../assets/logo.png";
+
+export default defineComponent({
+  name: "本地图片",
+  setup() {
+    return {
+      logoImg,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-img-assets-page {
+  width: 1920px;
+  height: 1000px;
+  background-color: transparent;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.qt-img-assets-page .qt-img {
+  width: 256px;
+  height: 256px;
+}
+</style>

package/rules/.docs/examples/component/img/network.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-view class="qt-img-network-page">
+      <img
+        src="https://img1.baidu.com/it/u=2666955302,2339578501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750"
+        class="qt-image"
+      />
+    </qt-view>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "网络图片",
+});
+</script>
+
+<style>
+.qt-img-network-page {
+  width: 1920px;
+  height: 1000px;
+  background-color: transparent;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.qt-img-network-page .qt-image {
+  width: 260px;
+  height: 320px;
+}
+</style>