@quicktvui/ai 1.0.8 → 1.1.0

package/rules/.source/hellotv/src/pages/search/scss/search.scss

@@ -0,0 +1,18 @@
+.search {
+  width: 1920px;
+  height: 1080px;
+  background-color: transparent;
+}
+
+.search-columns-body {
+  background-color: transparent;
+  flex-direction: row;
+}
+
+.search-columns-body-loading {
+  height: 1080px;
+  background-color: transparent;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+}

package/rules/.source/hellotv/src/pages/search/three-columns.vue

@@ -0,0 +1,164 @@
+<template>
+  <qt-view
+    class="search"
+    :gradientBackground="{
+      colors: themeConfig.bgGradientColor,
+      orientation: 4,
+    }"
+  >
+    <scroll-view
+      name="searchScroll"
+      makeChildVisibleType="none"
+      :horizontal="true"
+      :onScrollEnable="true"
+    >
+      <qt-view
+        class="search-columns-body"
+        style="width: 3072px"
+        :clipChildren="true"
+      >
+        <!-- 键盘区域 -->
+        <search-keyboard ref="keyboardRef" @updateInput="updateInput" />
+        <!-- 搜索关键词区域 -->
+        <search-keyword
+          ref="keywordRef"
+          :inputText="inputText"
+          @setLoading="setLoading"
+          @updateFocusName="updateFocusName"
+          @updateFocusDeny="updateFocusDeny"
+          @updateKeyword="updateKeyword"
+        />
+        <!-- 搜索内容区域 -->
+        <search-content
+          ref="contentRef"
+          :descendantFocusability="contentDeny"
+          :keyword="keyword"
+          :triggerTask="triggerTask"
+          @setLoading="setLoading"
+          @updateFocusName="updateFocusName"
+          @updateFocusDeny="updateFocusDeny"
+        />
+      </qt-view>
+    </scroll-view>
+    <!-- 搜索关键词、内容区域loading -->
+    <qt-view
+      v-if="isLoading"
+      class="search-columns-body-loading"
+      :style="{ width: `${loadingWidth}px`, left: `${loadingLeft}px` }"
+      :gradientBackground="{
+        colors: themeConfig.bgGradientColor,
+        orientation: 4,
+      }"
+    >
+      <qt-loading-view
+        style="height: 100px; width: 100px"
+        color="rgba(21,122,252,0.3)"
+        :focusable="false"
+      ></qt-loading-view>
+    </qt-view>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useESRouter } from "@extscreen/es3-router";
+import themeConfig from "../../config/theme-config";
+import searchKeyboard from "./components/search-keyboard.vue";
+import searchKeyword from "./components/search-keyword.vue";
+import searchContent from "./components/search-content.vue";
+
+const router = useESRouter();
+// 键盘
+const keyboardRef = ref();
+const inputText = ref<string>("");
+const isLoading = ref<boolean>(false);
+const loadingLeft = ref<number>(634);
+const loadingWidth = ref<number>(1286);
+// 关键词
+const keywordRef = ref();
+const keyword = ref<string>("");
+// 内容
+const contentRef = ref();
+const contentDeny = ref<number>(1);
+const triggerTask = [
+  {
+    event: "onFocusAcquired",
+    target: "searchScroll",
+    function: "scrollToWithOptions",
+    params: [{ x: 1152, y: 0, duration: 300 }],
+  },
+  {
+    event: "onFocusLost",
+    target: "searchScroll",
+    function: "scrollToWithOptions",
+    params: [{ x: -1152, y: 0, duration: 300 }],
+  },
+];
+// 焦点
+const curFocusName = ref<string>("searchKeyboard");
+
+/**
+ * 输入数据更新
+ */
+function updateInput(val: string) {
+  isLoading.value = true;
+  inputText.value = val;
+}
+
+/**
+ * 搜索关键词更新
+ */
+function updateKeyword(val: string) {
+  keyword.value = val;
+  // 设置左侧键盘向右焦点方向
+  keyboardRef.value?.updateKeyboardFocusRight(
+    val.length > 0 ? "keywordList" : "gridItem",
+  );
+}
+
+/**
+ * 当前焦点位置更新
+ */
+function updateFocusName(val: string) {
+  curFocusName.value = val;
+}
+
+function updateFocusDeny(bool: boolean) {
+  contentDeny.value = bool ? 2 : 1;
+}
+
+/**
+ * loading状态、位置控制
+ */
+function setLoading(b: boolean, full: boolean): void {
+  if (full) {
+    isLoading.value = b;
+    return;
+  }
+
+  if (b) {
+    loadingLeft.value = 1152;
+    loadingWidth.value = 768;
+  } else {
+    loadingLeft.value = 634;
+    loadingWidth.value = 1286;
+  }
+  isLoading.value = b;
+}
+
+/**
+ * 返回按键处理
+ */
+function onBackPressed() {
+  if (curFocusName.value === "searchKeyboard") {
+    router.back();
+  } else {
+    keyboardRef.value?.onBackPressed();
+    curFocusName.value = "searchKeyboard";
+  }
+}
+
+defineExpose({ onBackPressed });
+</script>
+
+<style scoped lang="scss" src="./scss/search.scss"></style>

package/rules/.source/hellotv/src/pages/search/two-columns.vue

@@ -0,0 +1,128 @@
+<template>
+  <qt-view
+    class="search"
+    :gradientBackground="{
+      colors: themeConfig.bgGradientColor,
+      orientation: 4,
+    }"
+  >
+    <scroll-view
+      name="searchScroll"
+      makeChildVisibleType="none"
+      :horizontal="true"
+      :onScrollEnable="true"
+    >
+      <qt-view
+        class="search-columns-body"
+        style="width: 2554px"
+        :clipChildren="true"
+      >
+        <!-- 键盘区域 -->
+        <search-keyboard ref="keyboardRef" @updateInput="updateInput" />
+        <!-- 搜索关键词 -->
+        <search-keyword-grid
+          v-if="inputText.length === 0"
+          :blockFocusDirections="['up', 'down', 'right']"
+          @setLoading="setLoading"
+        />
+        <!-- 搜索内容区域 -->
+        <search-content-tabs
+          ref="contentRef"
+          :triggerTask="triggerTask"
+          :keyword="inputText"
+          @setLoading="setLoading"
+          @updateFocusName="updateFocusName"
+        />
+      </qt-view>
+    </scroll-view>
+    <!-- 搜索内容区域loading -->
+    <qt-view
+      v-if="isLoading"
+      class="search-columns-body-loading"
+      :style="{ width: `${loadingWidth}px`, left: `${loadingLeft}px` }"
+      :gradientBackground="{
+        colors: themeConfig.bgGradientColor,
+        orientation: 4,
+      }"
+    >
+      <qt-loading-view
+        style="height: 100px; width: 100px"
+        color="rgba(21,122,252,0.3)"
+        :focusable="false"
+      ></qt-loading-view>
+    </qt-view>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useESRouter } from "@extscreen/es3-router";
+import themeConfig from "../../config/theme-config";
+import searchKeyboard from "./components/search-keyboard.vue";
+import searchKeywordGrid from "./components/search-keyword-grid.vue";
+import searchContentTabs from "./components/search-content-tabs.vue";
+
+const router = useESRouter();
+// 键盘
+const keyboardRef = ref();
+const inputText = ref<string>("");
+const isLoading = ref<boolean>(false);
+const loadingLeft = ref<number>(634);
+const loadingWidth = ref<number>(1286);
+// 内容
+const contentRef = ref();
+const triggerTask = [
+  {
+    event: "onFocusAcquired",
+    target: "searchScroll",
+    function: "scrollToWithOptions",
+    params: [{ x: 634, y: 0, duration: 300 }],
+  },
+  {
+    event: "onFocusLost",
+    target: "searchScroll",
+    function: "scrollToWithOptions",
+    params: [{ x: -634, y: 0, duration: 300 }],
+  },
+];
+// 焦点
+const curFocusName = ref<string>("searchKeyboard");
+
+/**
+ * 输入数据更新
+ */
+function updateInput(val: string) {
+  inputText.value = val;
+  isLoading.value = true;
+}
+
+/**
+ * 当前焦点位置更新
+ */
+function updateFocusName(val: string) {
+  curFocusName.value = val;
+}
+
+/**
+ * loading状态、位置控制
+ */
+function setLoading(b: boolean): void {
+  isLoading.value = b;
+}
+
+/**
+ * 返回按键处理
+ */
+function onBackPressed() {
+  if (curFocusName.value === "searchKeyboard") {
+    router.back();
+  } else {
+    keyboardRef.value?.onBackPressed();
+    curFocusName.value = "searchKeyboard";
+  }
+}
+
+defineExpose({ onBackPressed });
+</script>
+
+<style scoped lang="scss" src="./scss/search.scss"></style>

package/rules/.source/hellotv/src/pages/tabs-test.vue

@@ -0,0 +1,339 @@
+<template>
+  <div class="tab-test">
+    <!-- <el-tabs class="tabs" name="tabs" :tab-position="tabPosition" @tab-focus="tabFocus" active-name="tab1">
+      <tab-pane v-for="(item, index) in tabHeaderData" :key="index"
+        :label="`tab${item}`" :name="`tab${item}`" :class="`tab tab${item}`">
+      </tab-pane>
+    </el-tabs> -->
+    <ul class="tabs-header tabs-header-top" horizontal :focusable="false">
+      <li
+        v-for="(item, index) in tabHeaderData"
+        class="tabs-header-item"
+        :focusable="true"
+        :key="index"
+        @focus="(e) => onLiFocus(e, item, index)"
+      >
+        <span
+          style="height: 60px"
+          :focusable="false"
+          class="tabs-header-item-text"
+          >{{ `tab${item}` }}</span
+        >
+      </li>
+    </ul>
+    <qt-ul
+      class="qt-ul"
+      ref="qtulRef"
+      name="qt-ul"
+      :data="cData"
+      :padding="'90,130,90,30'"
+      :clipChildren="false"
+      :spanCount="spanCount"
+    >
+      <template #default="{ item }">
+        <div
+          class="qt-ul-item"
+          v-if="item.type == 1"
+          :focusable="true"
+          :enableFocusBorder="true"
+          @focus="(e) => onFocus(e)"
+          :style="item.style"
+        >
+          <img
+            :src="item ? item.img : ''"
+            class="tv_item_img"
+            :style="{ width: `${item.style.width}px` }"
+          />
+          <p class="tv_item_title">
+            {{ item ? `tab${currentTabIndex}-${item.text}` : "" }}
+          </p>
+        </div>
+        <qt-ul
+          class="qt-ul-list-section"
+          :type="2"
+          v-else
+          :data="item.list"
+          :style="item.style"
+          :padding="'90,10,0,30'"
+          :clipChildren="false"
+        >
+          <template #default="{ sItem }">
+            <div
+              class="qt-ul-item"
+              :type="22"
+              :focusable="true"
+              :enableFocusBorder="true"
+              @focus="(e) => onFocus(e)"
+              :style="sItem.style"
+            >
+              <img
+                :src="sItem ? sItem.img : ''"
+                class="tv_item_img"
+                :style="{ width: `${sItem.style.width}px` }"
+              />
+              <p class="tv_item_title">
+                {{ sItem ? `tab${currentTabIndex}-${sItem.text}` : "" }}
+              </p>
+            </div>
+          </template>
+        </qt-ul>
+      </template>
+    </qt-ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick, onMounted, reactive } from "vue";
+const img = ref<string>(
+  "https://img1.baidu.com/it/u=1726075624,1307327070&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667",
+);
+// let tabPosition = ref('top')
+// const tabFocus = (e) => {
+//   cData.value = arr
+// }
+let currentTabIndex = ref(0);
+let spanCount = ref(0);
+let tabHeaderData = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
+
+let cData = ref<any[]>([]);
+let arr: Array<any> = [];
+
+const buildData0 = () => {
+  arr = [];
+  for (let i = 0; i < 24; i++) {
+    arr.push({
+      id: "id" + i,
+      name: "name" + Math.random(),
+      itemSize: 300,
+      type: 1,
+      img: img,
+      tag: i % 2 == 0 ? "" : "VIP",
+      style: {
+        width: 300,
+        height: 250,
+      },
+      text: `pos:${i}`,
+      decoration: {
+        top: 20,
+        bottom: 20,
+      },
+    });
+  }
+  arr[0].itemSize = 780;
+  arr[0].style = {
+    width: 780,
+    height: 250,
+  };
+  arr[1].itemSize = 780;
+  arr[1].style = {
+    width: 780,
+    height: 250,
+  };
+  // arr[1].itemSize = 780
+  // arr[8].itemSize = 780
+  // arr[9].itemSize = 780
+};
+const buildData1 = () => {
+  arr = [];
+  for (let i = 0; i < 24; i++) {
+    arr.push({
+      id: "id" + i,
+      name: "name" + Math.random(),
+      itemSize: 300,
+      type: 1,
+      img: img,
+      tag: i % 2 == 0 ? "" : "VIP",
+      style: {
+        width: 300,
+        height: 250,
+      },
+      text: `pos:${i}`,
+      decoration: {
+        bottom: 20,
+      },
+    });
+  }
+};
+const buildData2 = () => {
+  arr = [];
+  arr.push({
+    type: 2,
+    id: "id" + 22,
+    name: "name" + Math.random(),
+    itemSize: 1920,
+    style: {
+      width: 1920,
+      height: 300,
+    },
+    list: [],
+  });
+  for (let i = 0; i < 12; i++) {
+    arr[0].list.push({
+      id: "id" + i,
+      name: "name" + Math.random(),
+      itemSize: 300,
+      type: 22,
+      img: img,
+      tag: i % 2 == 0 ? "" : "VIP",
+      style: {
+        width: 300,
+        height: 250,
+      },
+      text: `pos:${i}`,
+      decoration: {
+        bottom: 20,
+      },
+    });
+  }
+  for (let i = 0; i < 24; i++) {
+    arr.push({
+      id: "id" + i,
+      name: "name" + Math.random(),
+      itemSize: 300,
+      type: 1,
+      img: img,
+      tag: i % 2 == 0 ? "" : "VIP",
+      style: {
+        width: 300,
+        height: 250,
+      },
+      text: `pos:${i}`,
+      decoration: {
+        bottom: 20,
+      },
+    });
+  }
+  console.log(arr, "3434344444");
+};
+onMounted(() => {
+  buildData0();
+  cData.value = arr;
+});
+const onFocus = (e) => {};
+const onLiFocus = (e, item, index) => {
+  if (index != currentTabIndex.value && e.isFocused) {
+    currentTabIndex.value = index;
+    if (currentTabIndex.value % 3 == 0) {
+      buildData0();
+    } else if (currentTabIndex.value % 3 == 1) {
+      buildData1();
+    } else if (currentTabIndex.value % 3 == 2) {
+      buildData2();
+    }
+    cData.value = arr;
+  }
+};
+</script>
+
+<style lang="scss">
+.tabs {
+  width: 1920px;
+  height: 80px;
+  background-color: red;
+}
+.tab-test {
+  .tabs-header-top {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 1830px;
+    height: 60px;
+    background-color: rgba(0, 0, 0, 0.5);
+    flex-direction: row;
+    margin-left: 90px;
+    margin-top: 30px;
+    z-index: 2222;
+  }
+  .tabs-header-bottom {
+    width: 1920px;
+    height: 60px;
+    background-color: transparent;
+    flex-direction: row;
+  }
+  .tabs-header-item {
+    height: 60px;
+    padding-left: 16px;
+    padding-right: 16px;
+    text-align: center;
+    line-height: 60px;
+    background-color: yellow;
+    margin-right: 50px;
+  }
+  .tabs-header-item-text {
+    color: #333;
+    font-size: 42;
+  }
+  .tabs-content {
+    width: 1920px;
+    height: 1080px;
+    background-color: aqua;
+    padding-top: 120px;
+  }
+  .tabs-content-item {
+    width: 1920px;
+    height: 1080px;
+    padding-top: 120px;
+    background-color: burlywood;
+  }
+  .qt-ul {
+    width: 1920px;
+    height: 1080px;
+    position: absolute;
+    padding-top: 30px;
+    background-color: red;
+  }
+  .qt-ul-item {
+    position: relative;
+    // width: 300px;
+    // height: 250px;
+    border-radius: 20px;
+    background-color: pink;
+    focus-background-color: blue;
+  }
+  .tv_item_img {
+    // width: 300px;
+    height: 200px;
+    background-color: red;
+  }
+  .tv_item_title {
+    // width: 300px;
+    height: 50px;
+    line-height: 50px;
+    font-size: 30px;
+    color: #000000;
+    background-color: transparent;
+  }
+  .tv_item_tag {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 60px;
+    height: 30px;
+    text-align: center;
+    line-height: 30px;
+    background-color: gold;
+    color: #000000;
+    font-size: 22px;
+    background-color: transparent;
+  }
+  .qt-ul-list-section {
+    background-color: aqua;
+  }
+
+  .tab {
+    width: 1920px;
+    height: 1080px;
+    p {
+      font-size: 30px;
+      text-align: center;
+    }
+  }
+  .tab1 {
+    background-color: red;
+  }
+  .tab2 {
+    background-color: blue;
+  }
+}
+</style>

package/rules/.source/hellotv/src/pages/webview/load-web-view.vue

@@ -0,0 +1,44 @@
+<template>
+  <qt-x5web-view
+    ref="loadWebView"
+    :requestFocus="true"
+    class="loadWebViewRootStyle"
+  />
+</template>
+
+<script>
+import { defineComponent, ref } from "vue";
+
+import { useESRouter } from "@extscreen/es3-router";
+
+export default defineComponent({
+  name: "load-web-view",
+  setup() {
+    const loadWebView = ref();
+    const router = useESRouter();
+    const html = ref("");
+    const onESCreate = (params) => {
+      if (params) {
+        html.value = params.html;
+        loadWebView.value.loadUrl(html.value);
+      }
+    };
+    const onBackPressed = () => {
+      router.back();
+    };
+    return {
+      loadWebView,
+      onBackPressed,
+      onESCreate,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.loadWebViewRootStyle {
+  width: 1920px;
+  height: 1080px;
+  background-color: #252930;
+}
+</style>