@quicktvui/ai 1.0.9 → 1.1.0

package/rules/.source/hellotv/src/pages/search/adapter/index.ts

@@ -0,0 +1,285 @@
+import {
+  QTTab,
+  QTTabPageData,
+  QTWaterfallSection,
+  QTWaterfallSectionType,
+} from "@quicktvui/quicktvui3";
+import { Suggestions, Contents, Tab, Recommends } from "../api/interface";
+import { Keyword, KeywordType, TabItemType, ContentType } from "./interface";
+import config from "../config";
+
+/**
+ * 构造关键词列表数据
+ * @param rawData 原始数据
+ * @param mode 数据模式, hot 热门搜索、guess 猜你想搜、all 返回所有
+ * @returns
+ */
+export const buildKeywords = function (
+  rawData: Suggestions,
+  mode: "hot" | "guess" | "all",
+  pageNo?: number,
+): Keyword[] {
+  const keywords: Keyword[] = [];
+
+  const colorMap = {
+    0: ["#F33628", "#F33628"],
+    1: ["#FC5E1B", "#FC5E1B"],
+    2: ["#FECB04", "#FECB04"],
+  };
+
+  switch (mode) {
+    case "hot":
+      rawData.hotKeywords.forEach((item, index) => {
+        const colors = (pageNo === 1 && colorMap[index]) || [
+          "#80FFFFFF",
+          "#80FFFFFF",
+        ];
+
+        keywords.push({
+          type: KeywordType.TEXT,
+          text: item.keyword,
+          flexStyle: { marginLeft: 106 },
+          gradientBackground: {
+            colors: colors,
+            cornerRadius: 50,
+          },
+        });
+      });
+      break;
+    case "guess":
+      rawData.guessKeywords.forEach((item) => {
+        keywords.push({
+          type: KeywordType.TEXT,
+          text: item.keyword,
+          flexStyle: { marginLeft: 80 },
+        });
+      });
+      break;
+    case "all":
+      keywords.push({ type: KeywordType.TITLE, text: "猜你想搜" });
+      rawData.guessKeywords.forEach((item) => {
+        keywords.push({
+          type: KeywordType.TEXT,
+          text: item.keyword,
+          jumpId: item.id,
+        });
+      });
+
+      keywords.push({
+        type: KeywordType.TITLE,
+        text: "热门搜索",
+        decoration: { top: 40 },
+      });
+      rawData.hotKeywords.forEach((item) => {
+        keywords.push({
+          type: KeywordType.TEXT,
+          text: item.keyword,
+          jumpId: item.id,
+        });
+      });
+      break;
+  }
+
+  return keywords;
+};
+
+/**
+ * 构造QTTab组件Tab默认列表
+ * @param rawData 原始数据
+ * @returns
+ */
+export const buildTab = function (rawData?: Tab[]): QTTab {
+  return {
+    defaultIndex: 0,
+    defaultFocusIndex: -1,
+    itemList:
+      rawData && rawData.length > 1
+        ? rawData.map((item, index) => ({
+            type: TabItemType.TEXT,
+            text: item.name,
+            titleSize: 36,
+            decoration: { left: index === 0 ? 56 : 0 },
+          }))
+        : [
+            {
+              type: TabItemType.TEXT,
+              text: "全部",
+              titleSize: 36,
+              decoration: { left: 62 },
+            },
+          ],
+  };
+};
+
+/**
+ * 构建两栏布局Tab页面数据
+ * @param rawData 原始数据
+ * @param curPage 当前页码
+ * @returns
+ */
+export const buildTabContents = function (
+  rawData: Contents,
+  curPage: number,
+): QTTabPageData {
+  const tabPage: QTTabPageData = {
+    data: [],
+    stopping: false,
+  };
+
+  if (rawData.items.length > 0) {
+    const section = {
+      _id: "s" + Math.random(),
+      type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
+      style: { width: 1920 },
+      decoration: { left: 80, top: curPage === 1 ? 200 : 0 },
+      title: "",
+      itemList: rawData.items.map((item, index) => ({
+        _id: `ss-${index}`,
+        type: ContentType.HORIZONTAL,
+        style: { width: 410, height: 276 },
+        decoration: { right: 40, bottom: 40 },
+        id: item.id,
+        title: item.title,
+        cover: item.image,
+        score: item.score.toFixed(1),
+        showRating: true,
+      })),
+    };
+
+    const itemLen = section.itemList.length;
+    if (itemLen) {
+      tabPage.data = [section];
+      // 条件一: 仅一页
+      // 条件二: 有多页, 但当前是最后一页
+      if (curPage === 1 && itemLen < config.gridContentsLimit) {
+        tabPage.stopping = true;
+        // 返回数据大于一屏展示个数
+        if (itemLen > 8) tabPage.data.push(buildEndSection());
+      } else if (curPage > 1 && itemLen < config.gridContentsLimit) {
+        tabPage.stopPaging = true;
+        tabPage.data.push(buildEndSection());
+      }
+    } else if (curPage > 0) {
+      // 非首次搜索时, 组件会返回页码加一, 搜索结果刚好跟分页大小一致
+      tabPage.stopPaging = true;
+      // 第二页开始才添加结束标志
+      if (curPage > 2) tabPage.data.push(buildEndSection());
+    }
+  }
+
+  return tabPage;
+};
+
+/**
+ * 构建搜索内容板块
+ * @param rawData 接口数据
+ * @param spanCount 每行展示个数, 也是每个板块Item个数, 优化页面速度, 将每行展示个数设为一个板块
+ * @returns
+ */
+export const buildContentSections = function (
+  rawData: Contents,
+  spanCount: number,
+): QTWaterfallSection[] {
+  return Array.from(
+    { length: Math.ceil(rawData.items.length / spanCount) },
+    (_, i) => ({
+      type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
+      style: { width: 1920 },
+      decoration: { left: 80 },
+      title: "",
+      itemList: rawData.items
+        .slice(i * spanCount, (i + 1) * spanCount)
+        .map((item) => ({
+          type: ContentType.HORIZONTAL,
+          style: { width: 410, height: 276 },
+          decoration: { right: 40, top: 40 },
+          title: item.title,
+          cover: item.image,
+          score: item.score.toFixed(1),
+          showRating: true,
+        })),
+    }),
+  );
+};
+
+/**
+ * 构建搜索推荐板块
+ * @param rawData 接口数据
+ * @param spanCount 每行展示个数, 也是每个板块Item个数
+ * @param isShowTitle 是否展示板块标题
+ * @param isShowTips 是否展示搜索提示词
+ * @returns
+ */
+export const buildRecommendSections = function (
+  rawData: Recommends,
+  spanCount: number,
+  isShowTitle: boolean,
+  isShowTips: boolean,
+): QTWaterfallSection[] {
+  // i 定位是否为第一个板块
+  return Array.from(
+    { length: Math.ceil(rawData.items.length / spanCount) },
+    (_, i) => ({
+      type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
+      style: { width: 1920 },
+      decoration: {
+        left: 80,
+        top:
+          !isShowTips && isShowTitle && i === 0
+            ? 65
+            : isShowTitle && isShowTips && i === 0
+              ? 40
+              : 0,
+        bottom: 40,
+      }, // 页面第一板块为推荐第一板块时, 顶部间距为65; 推荐第一板块为非页面第一个板块时, 顶部间距为40; 其余板块, 顶部间距为0
+      title: isShowTitle && i === 0 ? "大家都在搜" : "",
+      titleStyle: i === 0 ? { height: 50, fontSize: 40 } : {},
+      titleTypeface: "bold",
+      itemList: rawData.items
+        .slice(i * spanCount, (i + 1) * spanCount)
+        .map((item) => ({
+          type: ContentType.VERTICAL,
+          style: { width: 260, height: 414 },
+          decoration: {
+            right: 40,
+            top: (!isShowTitle && i === 0) || i > 0 ? 0 : 40,
+          }, // 第一个板块且不展示标题、或者不是第一个板块时, 顶部间距为0；第一个板块且展示标题时, 顶部间距为40
+          id: item.id,
+          title: item.title,
+          cover: item.image,
+          score: item.score.toFixed(1),
+          showRating: true,
+        })),
+    }),
+  );
+};
+
+/**
+ * 构建加载中板块
+ * @returns
+ */
+export const buildLoadingSection = function (): QTWaterfallSection {
+  return {
+    type: -10008,
+    style: { width: 1920, height: 100 },
+    decoration: { top: 20, bottom: 20 },
+    title: "",
+    itemList: [],
+  };
+};
+
+/**
+ * 构建到底提示板块
+ * @returns
+ */
+export const buildEndSection = function (): QTWaterfallSection {
+  return {
+    _id: "e1",
+    type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_END,
+    style: { width: 1920, height: 100 },
+    decoration: { top: 20, bottom: 40 },
+    title: "已经到底啦，按【返回键】回到顶部",
+    titleStyle: { fontSize: 28 },
+    itemList: [],
+  };
+};

package/rules/.source/hellotv/src/pages/search/adapter/interface.ts

@@ -0,0 +1,60 @@
+import {
+  QTWaterfallFlexStyle,
+  QTListViewItemDecoration,
+} from "@quicktvui/quicktvui3";
+
+/**
+ * 关键词类型
+ */
+export enum KeywordType {
+  // 标题
+  TITLE = 1003,
+  // 文本
+  TEXT = 2,
+}
+
+/**
+ * 关键词
+ */
+export interface Keyword {
+  type: KeywordType;
+  text: string;
+  flexStyle?: object;
+  gradientBackground?: object;
+  jumpId?: string;
+  decoration?: QTListViewItemDecoration;
+}
+
+export enum TabItemType {
+  // 文本
+  TEXT = 1,
+}
+
+/**
+ * QTTab组件中Tab子项
+ */
+export interface TabItem {
+  type: TabItemType;
+  text: string;
+  titleSize: number;
+  decoration?: QTListViewItemDecoration;
+}
+
+export enum ContentType {
+  // 横图
+  HORIZONTAL = 1,
+  // 竖图
+  VERTICAL = 2,
+}
+
+/**
+ * 搜索内容
+ */
+export interface Content {
+  _id: string;
+  type: ContentType;
+  style: QTWaterfallFlexStyle;
+  decoration?: QTListViewItemDecoration;
+  id: string;
+  title: string;
+}

package/rules/.source/hellotv/src/pages/search/api/index.ts

@@ -0,0 +1,100 @@
+import requestManager from "../../../tools/request";
+import { Contents, Recommends, SearchApi, Suggestions, Tab } from "./interface";
+import {
+  searchSuggestionsUrl,
+  searchContentsUrl,
+  searchHotRecommendUrl,
+  searchTabsUrl,
+  searchTabContentsUrl,
+  searchHistoryUrl,
+} from "./request-url";
+import { replacePlaceholders } from "../../../tools/common";
+import config from "../../../config/build-config";
+
+class SearchManager implements SearchApi {
+  // 获取搜索建议
+  getSuggestions(
+    type: "hot" | "guess" | "all",
+    keyword?: string,
+    page: number = 1,
+    limit: number = 10,
+  ): Promise<Suggestions> {
+    return requestManager.get(
+      replacePlaceholders(searchSuggestionsUrl, {
+        packageName: config.packageName,
+        type,
+        keyword,
+        page,
+        limit,
+      }),
+    );
+  }
+
+  // 添加搜索历史
+  addHistory(keyword: string) {
+    return requestManager.post(searchHistoryUrl, { query: keyword });
+  }
+
+  // 清空搜索历史
+  clearHistory() {
+    return requestManager.delete(searchHistoryUrl);
+  }
+
+  // 获取搜索内容
+  getContents(
+    query?: string,
+    page: number = 1,
+    limit: number = 10,
+  ): Promise<Contents> {
+    return requestManager.get(
+      replacePlaceholders(searchContentsUrl, {
+        packageName: config.packageName,
+        query,
+        page,
+        limit,
+      }),
+    );
+  }
+
+  // 获取搜索Tab列表
+  getTabs(query: string): Promise<Tab[]> {
+    return requestManager.get(
+      replacePlaceholders(searchTabsUrl, {
+        packageName: config.packageName,
+        query,
+      }),
+    );
+  }
+
+  // 获取搜索Tab内容
+  getTabContents(
+    query: string,
+    tabId: string,
+    page: number = 1,
+    limit: number = 10,
+  ): Promise<Contents> {
+    return requestManager.get(
+      replacePlaceholders(searchTabContentsUrl, {
+        packageName: config.packageName,
+        query,
+        tabId,
+        page,
+        limit,
+      }),
+    );
+  }
+
+  // 获取热门推荐
+  getHotRecommends(page?: number, limit?: number): Promise<Recommends> {
+    return requestManager.get(
+      replacePlaceholders(searchHotRecommendUrl, {
+        packageName: config.packageName,
+        page,
+        limit,
+      }),
+    );
+  }
+}
+
+const searchManager = new SearchManager();
+export default searchManager;

package/rules/.source/hellotv/src/pages/search/api/interface.ts

@@ -0,0 +1,64 @@
+export interface SearchApi {
+  // 获取搜索建议
+  getSuggestions(
+    type: "hot" | "guess" | "all",
+    keyword?: string,
+    page?: number,
+    limit?: number,
+  ): Promise<Suggestions>;
+  // 获取搜索内容
+  getContents(query?: string, page?: number, limit?: number): Promise<Contents>;
+  // 获取搜索Tabs
+  getTabs(query: string): Promise<Tab[]>;
+  // 获取搜索Tab内容
+  getTabContents(
+    query: string,
+    tabId: string,
+    page?: number,
+    limit?: number,
+  ): Promise<Contents>;
+  // 后去热门推荐
+  getHotRecommends(page?: number, limit?: number): Promise<Recommends>;
+}
+
+export interface Suggestions {
+  // 搜索历史
+  searchHistory: string[] | null;
+  // 热门搜索
+  hotKeywords: {
+    id: string;
+    keyword: string;
+  }[];
+  // 猜你想搜
+  guessKeywords: {
+    id: string;
+    keyword: string;
+  }[];
+}
+
+export interface Contents {
+  total: number;
+  items: Content[];
+  recommends?: Content[];
+}
+
+export interface Tab {
+  id: string;
+  name: string;
+}
+
+export interface Recommends {
+  total: number;
+  items: Content[];
+}
+
+export interface Content {
+  id: string;
+  title: string;
+  image: string;
+  score: number;
+  jumpParams: {
+    type: number;
+    options: object;
+  };
+}

package/rules/.source/hellotv/src/pages/search/api/request-url.ts

@@ -0,0 +1,20 @@
+import BuildConfig from "../../../config/build-config";
+
+export const searchHistoryUrl = BuildConfig.requestBaseUrl + "/search/history";
+export const searchSuggestionsUrl =
+  BuildConfig.requestBaseUrl +
+  "/search/suggestions?packageName=${packageName}&type=${type}&keyword=${keyword}&page=${page}&limit=${limit}";
+export const searchContentsUrl =
+  BuildConfig.requestBaseUrl +
+  "/search?packageName=${packageName}&query=${query}&page=${page}&limit=${limit}";
+export const searchHotRecommendUrl =
+  BuildConfig.requestBaseUrl +
+  "/recommendations?packageName=${packageName}&page=${page}&limit=${limit}";
+
+export const searchTabsUrl =
+  BuildConfig.requestBaseUrl +
+  "/search/tabs?packageName=${packageName}&query=${query}";
+
+export const searchTabContentsUrl =
+  BuildConfig.requestBaseUrl +
+  "/search/tabs/${tabId}?packageName=${packageName}&query=${query}&page=${page}&limit=${limit}";

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

@@ -0,0 +1,153 @@
+<template>
+  <qt-view class="search-content">
+    <qt-tabs
+      ref="tabRef"
+      tabNavBarClass="search-content-tabs"
+      tabPageClass="search-content-tab-page"
+      :autoHandleBackKey="true"
+      :enablePlaceholder="themeConfig.placeHolderEnable"
+      :tabContentSwitchDelay="300"
+      :tabContentResumeDelay="200"
+      :contentNextFocus="{ left: 'keyboardGrid' }"
+      @onTabPageLoadData="onTabPageLoadData"
+      @onTabPageItemFocused="onTabPageItemFocused"
+      @onTabPageItemClick="onTabPageItemClick"
+    >
+      <!-- Tab -->
+      <template v-slot:tab-item>
+        <qt-view
+          class="search-content-tab-item"
+          :type="1"
+          :focusable="true"
+          eventFocus
+        >
+          <qt-text
+            class="search-content-tab-item-text"
+            text="${text}"
+            autoWidth
+            gravity="center"
+            :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" layout="${layout}" />
+      </template>
+    </qt-tabs>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { QTITab, QTTabPageState, QTWaterfallItem } from "@quicktvui/quicktvui3";
+import { buildTab, buildTabContents } from "../adapter/index";
+import { ContentType } from "../adapter/interface";
+import { Tab } from "../api/interface";
+import themeConfig from "../../../config/theme-config";
+import gridItemHorizontal from "../../../components/grid-item-horizontal.vue";
+import gridItemVertical from "../../../components/grid-item-vertical.vue";
+import searchManager from "../api/index";
+import launch from "../../../tools/launch";
+import config from "../config";
+
+const props = defineProps({
+  keyword: {
+    type: String,
+    default: "",
+  },
+});
+const emits = defineEmits(["setLoading", "updateFocusName"]);
+const tabRef = ref<QTITab>();
+// 关键词
+let rawKeyword: string = "";
+let tabList: Tab[] = [];
+
+watch(
+  () => props.keyword,
+  () => {
+    rawKeyword = props.keyword;
+    // 设置loading状态
+    emits("setLoading", true);
+    // 初始化组件
+    init(rawKeyword);
+  },
+);
+
+async function init(keyword: string) {
+  tabList = await searchManager.getTabs(keyword);
+  // 初始化组件
+  tabRef.value?.initTab(buildTab(tabList));
+  tabRef.value?.initPage({ width: 1920, height: 1080 });
+}
+
+let timer: any = -1;
+async function onTabPageLoadData(pageIndex: number, pageNo: number) {
+  if (tabList && pageIndex >= 0 && pageIndex < tabList.length) {
+    const tabItem = tabList[pageIndex];
+    const contents = await searchManager.getTabContents(
+      rawKeyword,
+      tabItem.id.toString(),
+      ++pageNo,
+      config.gridContentsLimit,
+    );
+    // 构建数据
+    const tabData = buildTabContents(contents, pageNo);
+
+    // 数据更新
+    if (pageNo === 1) {
+      tabRef.value?.setPageData(pageIndex, tabData);
+    } else {
+      tabRef.value?.addPageData(pageIndex, tabData, 0);
+    }
+
+    // 停止分页
+    if (tabData.stopping) {
+      tabRef.value?.setPageState(
+        pageIndex,
+        QTTabPageState.QT_TAB_PAGE_STATE_COMPLETE,
+      );
+    }
+  }
+
+  // 延迟关闭上层loading
+  clearTimeout(timer);
+  timer = setTimeout(() => emits("setLoading", false), 100);
+}
+
+function onTabPageItemFocused(
+  pageIndex: number,
+  sectionIndex: number,
+  itemIndex: number,
+  isFocused: boolean,
+  item: QTWaterfallItem,
+) {
+  if (isFocused) {
+    emits("updateFocusName", "searchContentItem");
+  }
+}
+
+function onTabPageItemClick(
+  pageIndex: number,
+  sectionIndex: number,
+  itemIndex: number,
+  item: QTWaterfallItem,
+) {
+  launch.launchDetail(item.id);
+}
+</script>
+
+<style lang="scss" src="../scss/search-content.scss"></style>