@quicktvui/ai 1.0.9 → 1.1.0

package/rules/.source/hellotv/src/pages/search/components/search-content.vue

@@ -0,0 +1,282 @@
+<template>
+  <qt-view class="search-content">
+    <!-- 提示 -->
+    <qt-text
+      v-if="showTips && !lockTips"
+      class="search-content-tips"
+      :text="tips"
+      gravity="center|start"
+      typeface="bold"
+    ></qt-text>
+    <!-- 内容 -->
+    <qt-tabs
+      ref="tabRef"
+      tabNavBarClass="search-content-tab"
+      tabPageClass="search-content-tab-page"
+      :focusMemory="true"
+      :autoHandleBackKey="true"
+      :enablePlaceholder="themeConfig.placeHolderEnable"
+      :contentNextFocus="{ left: 'keywordList' }"
+      :tabContentBlockFocusDirections="['up', 'down']"
+      @onTabPageLoadData="onTabPageLoadData"
+      @onTabPageItemFocused="onTabPageItemFocused"
+      @onTabPageItemClick="onTabPageItemClick"
+      @onTabMoveToTopStart="onTabMoveToTopStart"
+      @onTabMoveToBottomEnd="onTabMoveToBottomEnd"
+    >
+      <!-- Tab -->
+      <template v-slot:tab-item>
+        <qt-view
+          class="search-content-tab-item"
+          :type="TabItemType.TEXT"
+          :focusable="true"
+        >
+          <qt-text
+            class="search-content-tab-item-text"
+            autoWidth
+            text="${text}"
+            gravity="center|start"
+            :focusable="false"
+            :duplicateParentState="true"
+          ></qt-text>
+        </qt-view>
+      </template>
+      <!-- Content -->
+      <template v-slot:waterfall-item>
+        <!-- 横图 -->
+        <grid-item-horizontal
+          :type="ContentType.HORIZONTAL"
+          :style="{ width: `410px`, height: `276px` }"
+          :imageStyle="{
+            width: `410px`,
+            height: `230px`,
+            borderRadius: `${themeConfig.focusBorderCorner}px`,
+          }"
+          layout="${layout}"
+        />
+        <!-- 竖图 -->
+        <grid-item-vertical
+          :type="ContentType.VERTICAL"
+          name="gridItem"
+          layout="${layout}"
+        />
+      </template>
+      <!-- 分页加载中 -->
+      <template v-slot:waterfall-section>
+        <qt-view
+          style="
+            width: 1920px;
+            height: 100px;
+            background-color: transparent;
+            align-items: center;
+            justify-content: center;
+          "
+          :type="-10008"
+          :focusable="false"
+        >
+          <qt-loading-view
+            style="height: 40px; width: 40px"
+            name="loading"
+            color="rgba(255,255,255,0.3)"
+            :focusable="false"
+          />
+        </qt-view>
+      </template>
+    </qt-tabs>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import {
+  QTITab,
+  QTTabPageData,
+  QTTabPageState,
+  QTWaterfallItem,
+} from "@quicktvui/quicktvui3";
+import {
+  buildTab,
+  buildContentSections,
+  buildRecommendSections,
+  buildLoadingSection,
+  buildEndSection,
+} from "../adapter/index";
+import { TabItemType, ContentType } from "../adapter/interface";
+import themeConfig from "../../../config/theme-config";
+import gridItemHorizontal from "../../../components/grid-item-horizontal.vue";
+import gridItemVertical from "../../../components/grid-item-vertical.vue";
+import launch from "../../../tools/launch";
+import config from "../config";
+import searchManager from "../api/index";
+
+const props = defineProps({
+  keyword: {
+    type: String,
+    default: "",
+  },
+});
+const emits = defineEmits(["setLoading", "updateFocusName", "updateFocusDeny"]);
+// 顶部提示
+const showTips = ref<boolean>(true);
+const lockTips = ref<boolean>(false);
+const tips = ref<string>("");
+// 内容组件
+const tabRef = ref<QTITab>();
+// 关键词
+const rawKeyword = ref<string>();
+
+watch(
+  () => props.keyword,
+  () => {
+    // 设置loading状态
+    emits("setLoading", true);
+    // 重置状态
+    showTips.value = true;
+    lockTips.value = false;
+    // 提示词
+    tips.value =
+      props.keyword.length > 0 ? `全部“${props.keyword}”结果` : "热门推荐";
+    // 初始化组件
+    init(props.keyword);
+  },
+);
+
+function init(keyword: string) {
+  rawKeyword.value = keyword;
+  // 初始化组件
+  tabRef.value?.initTab(buildTab());
+  tabRef.value?.initPage({ width: 1920, height: 1080 });
+}
+
+// 加载关键词搜索和大家都在搜
+async function loadSearchData(pageIndex: number, page: number) {
+  let tabPage: QTTabPageData = { useDiff: true, data: [] };
+  let stopPage = false;
+
+  try {
+    const contentsResult = await searchManager.getContents(
+      rawKeyword.value,
+      page,
+      config.gridContentsLimit,
+    );
+    const sections = buildContentSections(contentsResult, 4);
+
+    if (contentsResult.items.length > 0) {
+      tabPage.data.push(...sections);
+    } else {
+      // 没有搜索结果时, 不展示顶部提示词
+      showTips.value = false;
+      lockTips.value = true;
+    }
+
+    if (contentsResult.items.length < config.gridContentsLimit) {
+      stopPage = true;
+      // 请求大家都在搜
+      const recommends = await searchManager.getHotRecommends(
+        1,
+        config.gridHotRecommendsLimit,
+      );
+      tabPage.data.push(
+        ...buildRecommendSections(recommends, 6, true, showTips.value),
+      );
+      tabPage.data.push(buildEndSection());
+      // 停止分页
+      tabRef.value?.setPageState(
+        pageIndex,
+        QTTabPageState.QT_TAB_PAGE_STATE_COMPLETE,
+      );
+    }
+
+    // 添加加载中
+    if (!stopPage) {
+      tabPage.data.push(buildLoadingSection());
+    }
+
+    if (page === 1) {
+      // 列表第一个Item添加特殊标识
+      tabPage.data[0].itemList[0]._id = "--search-grid-first-item--";
+      tabRef.value?.setPageData(pageIndex, tabPage);
+    } else {
+      tabRef.value?.addPageData(pageIndex, tabPage, 1);
+    }
+  } catch (error) {
+    qt.log.e("error->loadSearchData", error);
+  } finally {
+    delayedUpdate();
+  }
+}
+
+// 延迟更新上层状态
+function delayedUpdate() {
+  clearTimeout(timer);
+  timer = setTimeout(() => {
+    emits("setLoading", false);
+    emits("updateFocusDeny", false);
+  }, 500);
+}
+
+let timer: any = -1;
+function onTabPageLoadData(pageIndex: number, pageNo: number) {
+  if (rawKeyword.value?.length === 0) {
+    searchManager
+      .getHotRecommends(1, config.gridHotRecommendsLimit)
+      .then((recommends) => {
+        let tabPage: QTTabPageData = { useDiff: true, data: [] };
+        if (recommends.items.length > 0) {
+          tabPage.data.push(
+            ...buildRecommendSections(recommends, 6, false, showTips.value),
+          );
+        }
+        tabPage.data.push(buildEndSection());
+        tabRef.value?.setPageData(pageIndex, tabPage);
+        tabRef.value?.setPageState(
+          pageIndex,
+          QTTabPageState.QT_TAB_PAGE_STATE_COMPLETE,
+        );
+      })
+      .catch((error) => {
+        qt.log.e("error->getContents for recommends", error);
+      })
+      .finally(() => {
+        delayedUpdate();
+      });
+  } else {
+    loadSearchData(pageIndex, ++pageNo);
+  }
+}
+
+function onTabPageItemFocused(
+  pageIndex: number,
+  sectionIndex: number,
+  itemIndex: number,
+  isFocused: boolean,
+  item: QTWaterfallItem,
+) {
+  if (isFocused) {
+    qt.eventBus.emit("updateFocusRightSid", "");
+    emits("updateFocusName", "searchContentItem");
+  }
+}
+
+function onTabPageItemClick(
+  pageIndex: number,
+  sectionIndex: number,
+  itemIndex: number,
+  item: QTWaterfallItem,
+) {
+  // 跳转详情页
+  launch.launchDetail(item.id);
+  // 上报搜索历史
+  searchManager.addHistory(rawKeyword.value || "");
+}
+
+function onTabMoveToTopStart() {
+  showTips.value = false;
+}
+
+function onTabMoveToBottomEnd() {
+  showTips.value = true;
+}
+</script>
+
+<style lang="scss" src="../scss/search-content.scss"></style>

package/rules/.source/hellotv/src/pages/search/components/search-keyboard.vue

@@ -0,0 +1,252 @@
+<template>
+  <qt-view class="search-keyboard">
+    <!-- 输入框 -->
+    <qt-view class="search-keyboard-input">
+      <qt-image
+        class="search-keyboard-input-icon"
+        :src="icSearch"
+        :focusable="false"
+      ></qt-image>
+      <qt-text
+        v-if="inputText.length > 0"
+        class="search-keyboard-input-text"
+        style="color: white; font-size: 40px; margin-top: -3px"
+        :text="inputText"
+        gravity="center|start"
+      ></qt-text>
+      <qt-text
+        v-else
+        class="search-keyboard-input-text"
+        :textSpan="defaultText"
+      ></qt-text>
+    </qt-view>
+    <!-- 输入框底部横线 -->
+    <qt-view class="search-keyboard-input-bottom"></qt-view>
+    <!-- 按钮区域 -->
+    <qt-view
+      class="search-keyboard-btns"
+      :blockFocusDirections="['up', 'left']"
+    >
+      <qt-view
+        class="search-keyboard-btn"
+        :focusable="true"
+        @click="onBtnClick('clear')"
+      >
+        <qt-image
+          style="
+            width: 30px;
+            height: 30px;
+            background-color: transparent;
+            position: absolute;
+            left: 30px;
+          "
+          :src="icClear"
+          :showOnState="['normal', 'selected']"
+          :focusable="false"
+          :duplicateParentState="true"
+        ></qt-image>
+        <qt-image
+          style="
+            width: 30px;
+            height: 30px;
+            background-color: transparent;
+            position: absolute;
+            left: 30px;
+          "
+          :src="icClearFocused"
+          :showOnState="'focused'"
+          :focusable="false"
+          :duplicateParentState="true"
+        ></qt-image>
+        <qt-text
+          class="search-keyboard-btn-text"
+          text="清空"
+          :showOnState="['normal', 'selected']"
+          :focusable="false"
+          :duplicateParentState="true"
+        ></qt-text>
+        <qt-text
+          class="search-keyboard-btn-text"
+          text="清空"
+          typeface="bold"
+          :showOnState="'focused'"
+          :focusable="false"
+          :duplicateParentState="true"
+        ></qt-text>
+      </qt-view>
+      <qt-view
+        class="search-keyboard-btn"
+        :nextFocusName="{ right: 'keywordList' }"
+        :focusable="true"
+        @click="onBtnClick('back')"
+      >
+        <qt-image
+          style="
+            width: 30px;
+            height: 30px;
+            background-color: transparent;
+            position: absolute;
+            left: 30px;
+          "
+          :src="icBack"
+          :showOnState="['normal', 'selected']"
+          :focusable="false"
+          :duplicateParentState="true"
+        ></qt-image>
+        <qt-image
+          style="
+            width: 30px;
+            height: 30px;
+            background-color: transparent;
+            position: absolute;
+            left: 30px;
+          "
+          :src="icBackFocused"
+          :showOnState="'focused'"
+          :focusable="false"
+          :duplicateParentState="true"
+        ></qt-image>
+        <qt-text
+          class="search-keyboard-btn-text"
+          text="退格"
+          :showOnState="['normal', 'selected']"
+          :focusable="false"
+          :duplicateParentState="true"
+        ></qt-text>
+        <qt-text
+          class="search-keyboard-btn-text"
+          text="退格"
+          typeface="bold"
+          :showOnState="'focused'"
+          :focusable="false"
+          :duplicateParentState="true"
+        ></qt-text>
+      </qt-view>
+    </qt-view>
+    <!-- 键盘区域 -->
+    <qt-grid-view
+      class="search-keyboard-grid"
+      ref="gridRef"
+      name="keyboardGrid"
+      :focusMemory="false"
+      :spanCount="6"
+      :autofocusPosition="14"
+      :nextFocusName="{ right: gridFocusNameRight }"
+      :blockFocusDirections="['down']"
+      @item-click="onGridItemClick"
+    >
+      <qt-view
+        :type="1"
+        class="search-keyboard-grid-item"
+        :focusable="true"
+        eventFocus
+        eventClick
+      >
+        <qt-text
+          class="search-keyboard-grid-item-text"
+          autoWidth
+          autoHeight
+          text="${text}"
+          gravity="center"
+          :showOnState="['normal', 'selected']"
+          :focusable="false"
+          :duplicateParentState="true"
+        ></qt-text>
+        <qt-text
+          class="search-keyboard-grid-item-text"
+          autoWidth
+          autoHeight
+          text="${text}"
+          typeface="bold"
+          gravity="center"
+          :showOnState="'focused'"
+          :focusable="false"
+          :duplicateParentState="true"
+        ></qt-text>
+      </qt-view>
+    </qt-grid-view>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from "vue";
+import { QTIGridView, QTListViewItem } from "@quicktvui/quicktvui3";
+import ThemeConfig from "../../../config/theme-config";
+import icSearch from "../../../assets/search/ic_search.png";
+import icClear from "../../../assets/search/ic_clear.png";
+import icClearFocused from "../../../assets/search/ic_clear_focused.png";
+import icBack from "../../../assets/search/ic_back.png";
+import icBackFocused from "../../../assets/search/ic_back_focused.png";
+
+const emits = defineEmits(["updateInput"]);
+
+const gridRef = ref<QTIGridView>();
+const gridFocusNameRight = ref<string>("");
+const inputText = ref<string>("");
+const defaultText = {
+  text: "输入片名的首字母或全拼搜索",
+  spanAttr: [
+    { type: "color", value: ["#FFFFFF", 5, 8] },
+    { type: "color", value: ["#FFFFFF", 9, 11] },
+  ],
+};
+
+onMounted(() => {
+  const keyboardItems: QTListViewItem[] = [];
+  // 输出 A-Z
+  for (let i = 65; i <= 90; i++) {
+    keyboardItems.push({
+      type: 1,
+      text: String.fromCharCode(i),
+      decoration: { top: 2, bottom: 2 },
+    });
+  }
+  // 输出 0-9
+  for (let i = 48; i <= 57; i++) {
+    keyboardItems.push({
+      type: 1,
+      text: String.fromCharCode(i),
+      decoration: { top: 2, bottom: 2 },
+    });
+  }
+  // 初始化键盘
+  gridRef.value?.init(keyboardItems);
+});
+
+watch(
+  () => inputText.value,
+  () => {
+    emits("updateInput", inputText.value);
+  },
+);
+
+function onBtnClick(name: "clear" | "back") {
+  switch (name) {
+    case "clear":
+      inputText.value = "";
+      break;
+    case "back":
+      if (inputText.value.length > 0) {
+        inputText.value = inputText.value.slice(0, inputText.value.length - 1);
+      }
+      break;
+  }
+}
+
+function onGridItemClick(evt) {
+  inputText.value += evt.item.text;
+}
+
+// 更新键盘向右焦点位置
+function updateKeyboardFocusRight(name: string) {
+  gridFocusNameRight.value = name;
+}
+
+function onBackPressed() {
+  gridRef.value?.setItemFocused(14);
+}
+
+defineExpose({ updateKeyboardFocusRight, onBackPressed });
+</script>
+
+<style scoped lang="scss" src="../scss/search-keyboard.scss"></style>

package/rules/.source/hellotv/src/pages/search/components/search-keyword-grid.vue

@@ -0,0 +1,85 @@
+<template>
+  <qt-view class="search-keyword">
+    <qt-grid-view
+      class="search-keyword-grid"
+      :listData="gridData"
+      :spanCount="3"
+      :padding="'40,80,0,0'"
+      @item-click="onGridItemClick"
+    >
+      <!-- 标题 -->
+      <template v-slot:header>
+        <qt-view
+          :type="KeywordType.TITLE"
+          class="search-keyword-grid-item"
+          :focusable="false"
+        >
+          <qt-text
+            class="search-keyword-grid-item-text"
+            style="height: 50px; color: white; font-size: 40px"
+            autoWidth
+            text="${text}"
+            gravity="center"
+            :focusable="false"
+          ></qt-text>
+        </qt-view>
+      </template>
+      <!-- 内容 -->
+      <qt-view
+        :type="KeywordType.TEXT"
+        class="search-keyword-grid-item"
+        :focusable="true"
+        eventClick
+      >
+        <qt-text
+          class="search-keyword-grid-item-text"
+          style="position: absolute"
+          text="${text}"
+          :showOnState="['normal', 'selected']"
+          :ellipsizeMode="2"
+          :focusable="false"
+          :duplicateParentState="true"
+        ></qt-text>
+        <qt-text
+          class="search-keyword-grid-item-text"
+          style="position: absolute"
+          text="${text}"
+          typeface="bold"
+          :showOnState="'focused'"
+          :ellipsizeMode="4"
+          :focusable="false"
+          :duplicateParentState="true"
+        ></qt-text>
+      </qt-view>
+    </qt-grid-view>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { qtRef, QTListViewItem } from "@quicktvui/quicktvui3";
+import { buildKeywords } from "../adapter/index";
+import { KeywordType } from "../adapter/interface";
+import searchManager from "../api/index";
+import launch from "../../../tools/launch";
+
+const emits = defineEmits(["setLoading"]);
+const gridData = qtRef<QTListViewItem[]>();
+
+let loadTimer: any = -1;
+
+onMounted(() => {
+  searchManager.getSuggestions("all").then((suggestions) => {
+    gridData.value = buildKeywords(suggestions, "all");
+    // 延迟关闭loading
+    clearTimeout(loadTimer);
+    loadTimer = setTimeout(() => emits("setLoading", false), 300);
+  });
+});
+
+function onGridItemClick(evt) {
+  launch.launchDetail(evt.item.jumpId);
+}
+</script>
+
+<style scoped lang="scss" src="../scss/search-keyword-grid.scss"></style>