@quicktvui/ai 1.0.9 → 1.1.0

package/rules/.source/hellotv/src/pages/filter/components/sidebar/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <qt-view
+    class="filter-sidebar"
+    :gradientBackground="{ colors: ['#00000000', '#0DFFFFFF'], orientation: 0 }"
+    :blockFocusDirections="['right']"
+  >
+    <qt-list-view
+      class="filter-sidebar-list"
+      ref="listRef"
+      name="sidebarList"
+      :autoscroll="[$props.singleSelectPos, 432]"
+      :singleSelectPosition="$props.singleSelectPos"
+      :nextFocusName="{ up: 'topView', right: nextFocusNameRight }"
+      @item-focused="onItemFocused"
+    >
+      <list-item-title :type="SecondaryType.TITLE" />
+      <!-- 筛选按钮、图标 -->
+      <list-item-filter :type="SecondaryType.FILTER" />
+      <!-- 筛选按钮、图标样式二 -->
+      <list-item-filter-title :type="SecondaryType.FILTER_TITLE" />
+      <!-- 普通文本 -->
+      <list-item-text
+        :type="SecondaryType.TEXT"
+        :textStyle="$props.listItemTextStyle"
+        :textGravity="$props.listItemTextGravity"
+      />
+      <!-- 横线 -->
+      <list-item-line :type="SecondaryType.LINE" />
+    </qt-list-view>
+  </qt-view>
+</template>
+
+<script setup lang="ts" name="FilterSidebar">
+import { ref } from "vue";
+import { QTIListView } from "@quicktvui/quicktvui3";
+import { Secondary, SecondaryType } from "../../adapter/interface";
+import ListItemTitle from "./list-item-title.vue";
+import ListItemFilter from "./list-item-filter.vue";
+import ListItemFilterTitle from "./list-item-filter-title.vue";
+import ListItemText from "./list-item-text.vue";
+import ListItemLine from "./list-item-line.vue";
+
+defineProps({
+  blockFocusDir: {
+    type: Array,
+    default: () => [],
+  },
+  singleSelectPos: {
+    type: Number,
+    default: 1,
+  },
+  listItemTextStyle: {
+    type: Object,
+    default: () => {},
+  },
+  listItemTextGravity: {
+    type: String,
+    default: "center",
+  },
+});
+const emits = defineEmits(["onListItemFocused"]);
+
+const listRef = ref<QTIListView>();
+const nextFocusNameRight = ref<string>("contentGrid");
+
+function init(listData: Secondary[]) {
+  listRef.value?.init(listData);
+}
+
+function onItemFocused(evt) {
+  emits("onListItemFocused", evt);
+}
+
+function setNextFocusNameRight(s: string) {
+  nextFocusNameRight.value = s;
+}
+
+defineExpose({ init, setNextFocusNameRight });
+</script>
+
+<style scoped lang="scss" src="../../scss/filter-sidebar.scss"></style>

package/rules/.source/hellotv/src/pages/filter/components/sidebar/list-item-filter-title.vue

@@ -0,0 +1,78 @@
+<template>
+  <qt-view
+    class="filter-sidebar-list-item"
+    style="flex-direction: row; align-items: center"
+    :focusable="true"
+    eventFocus
+    eventClick
+  >
+    <qt-image
+      style="
+        width: 36px;
+        height: 36px;
+        background-color: transparent;
+        position: absolute;
+        left: 50px;
+      "
+      src="${icon.normal}"
+      showOnState="normal"
+      :focusable="false"
+      :duplicateParentState="true"
+    ></qt-image>
+    <qt-image
+      style="
+        width: 36px;
+        height: 36px;
+        background-color: transparent;
+        position: absolute;
+        left: 50px;
+      "
+      src="${icon.focused}"
+      showOnState="focused"
+      :focusable="false"
+      :duplicateParentState="true"
+    ></qt-image>
+    <qt-image
+      style="
+        width: 36px;
+        height: 36px;
+        background-color: transparent;
+        position: absolute;
+        left: 50px;
+      "
+      src="${icon.selected}"
+      showOnState="selected"
+      :focusable="false"
+      :duplicateParentState="true"
+    ></qt-image>
+    <qt-text
+      class="filter-sidebar-list-item-text"
+      style="margin-left: 98px"
+      text="${name}"
+      autoWidth
+      gravity="center"
+      :showOnState="['normal', 'selected']"
+      :focusable="false"
+      :duplicateParentState="true"
+    ></qt-text>
+    <qt-text
+      class="filter-sidebar-list-item-text"
+      style="margin-left: 98px"
+      text="${name}"
+      autoWidth
+      gravity="center"
+      typeface="bold"
+      :showOnState="'focused'"
+      :focusable="false"
+      :duplicateParentState="true"
+    ></qt-text>
+    <!-- <qt-view
+      style="width: 4px; height: 30px; background-color: white; margin-left: 25px; margin-top: 6px"
+      showOnState="selected"
+      :focusable="false"
+      :duplicateParentState="true"
+    ></qt-view> -->
+  </qt-view>
+</template>
+
+<style scoped lang="scss" src="../../scss/filter-sidebar.scss"></style>

package/rules/.source/hellotv/src/pages/filter/components/sidebar/list-item-filter.vue

@@ -0,0 +1,68 @@
+<template>
+  <qt-view
+    class="filter-sidebar-list-item"
+    style="flex-direction: row; align-items: center; justify-content: flex-end"
+    :focusable="true"
+    eventFocus
+    eventClick
+  >
+    <qt-view
+      class="filter-sidebar-list-item-img"
+      :focusable="false"
+      :duplicateParentState="true"
+    >
+      <qt-image
+        class="filter-sidebar-list-item-img"
+        style="position: absolute"
+        src="${icon.normal}"
+        showOnState="normal"
+        :focusable="false"
+        :duplicateParentState="true"
+      ></qt-image>
+      <qt-image
+        class="filter-sidebar-list-item-img"
+        style="position: absolute"
+        src="${icon.focused}"
+        showOnState="focused"
+        :focusable="false"
+        :duplicateParentState="true"
+      ></qt-image>
+      <qt-image
+        class="filter-sidebar-list-item-img"
+        style="position: absolute"
+        src="${icon.selected}"
+        showOnState="selected"
+        :focusable="false"
+        :duplicateParentState="true"
+      ></qt-image>
+    </qt-view>
+    <qt-view
+      style="height: 106px; background-color: transparent"
+      autoWidth
+      :focusable="false"
+      :duplicateParentState="true"
+    >
+      <qt-text
+        class="filter-sidebar-list-item-text"
+        text="${name}"
+        autoWidth
+        gravity="center"
+        :showOnState="'normal'"
+        :focusable="false"
+        :duplicateParentState="true"
+      ></qt-text>
+      <qt-text
+        class="filter-sidebar-list-item-text"
+        text="${name}"
+        autoWidth
+        gravity="center"
+        typeface="bold"
+        :showOnState="['focused', 'selected']"
+        :focusable="false"
+        :duplicateParentState="true"
+      ></qt-text>
+    </qt-view>
+  </qt-view>
+</template>
+
+<style scoped lang="scss" src="../../scss/filter-sidebar.scss"></style>

package/rules/.source/hellotv/src/pages/filter/components/sidebar/list-item-line.vue

@@ -0,0 +1,11 @@
+<template>
+  <qt-view
+    class="filter-sidebar-list-item"
+    style="height: 28px; align-items: center; justify-content: center"
+    :focusable="false"
+  >
+    <qt-view class="filter-sidebar-list-item-line" :focusable="false"></qt-view>
+  </qt-view>
+</template>
+
+<style scoped lang="scss" src="../../scss/filter-sidebar.scss"></style>

package/rules/.source/hellotv/src/pages/filter/components/sidebar/list-item-text.vue

@@ -0,0 +1,43 @@
+<template>
+  <qt-view
+    class="filter-sidebar-list-item"
+    :focusable="true"
+    eventFocus
+    eventClick
+  >
+    <qt-text
+      class="filter-sidebar-list-item-text"
+      text="${name}"
+      :style="$props.textStyle"
+      :gravity="$props.textGravity"
+      :showOnState="'normal'"
+      :focusable="false"
+      :duplicateParentState="true"
+    ></qt-text>
+    <qt-text
+      class="filter-sidebar-list-item-text"
+      text="${name}"
+      typeface="bold"
+      :style="$props.textStyle"
+      :gravity="$props.textGravity"
+      :showOnState="['focused', 'selected']"
+      :focusable="false"
+      :duplicateParentState="true"
+    ></qt-text>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  textStyle: {
+    type: Object,
+    default: () => {},
+  },
+  textGravity: {
+    type: String,
+    default: "center",
+  },
+});
+</script>
+
+<style scoped lang="scss" src="../../scss/filter-sidebar.scss"></style>

package/rules/.source/hellotv/src/pages/filter/components/sidebar/list-item-title.vue

@@ -0,0 +1,14 @@
+<template>
+  <qt-view class="filter-sidebar-list-item" :focusable="false">
+    <qt-text
+      class="filter-sidebar-list-item-text"
+      style="color: #ffffff; font-size: 40px"
+      text="${name}"
+      gravity="center|end"
+      typeface="bold"
+      :focusable="false"
+    ></qt-text>
+  </qt-view>
+</template>
+
+<style scoped lang="scss" src="../../scss/filter-sidebar.scss"></style>

package/rules/.source/hellotv/src/pages/filter/config.ts

@@ -0,0 +1,10 @@
+export default {
+  // 布局模式, 1 单页面、2 两栏、3 三栏
+  layoutMode: 2,
+  // 筛选内容Item样式, 1 横图、2 竖图
+  gridItemMode: 2,
+  // 筛选内容区域一行展示个数
+  gridSpanCount: 5,
+  // 筛选内容分页大小
+  gridContentLimit: 60,
+};

package/rules/.source/hellotv/src/pages/filter/expand-sidebar-contents.vue

@@ -0,0 +1,203 @@
+<template>
+  <qt-view
+    class="filter"
+    :gradientBackground="{
+      colors: themeConfig.bgGradientColor,
+      orientation: 4,
+    }"
+  >
+    <!-- 焦点占位, 解决页面跳焦的问题 -->
+    <qt-view class="filter-focus-placeholder" :focusable="true"></qt-view>
+    <!-- 顶部按钮 -->
+    <top-view
+      name="topView"
+      :logoRight="true"
+      :nextFocusName="{ down: 'sidebarList' }"
+      :blockFocusDirections="['left', 'up']"
+    />
+    <!-- 内容主体 -->
+    <scroll-view
+      name="filterScroll"
+      makeChildVisibleType="none"
+      :horizontal="true"
+      :onScrollEnable="true"
+      :initialContentOffset="210"
+    >
+      <qt-view class="filter-body" :clipChildren="true">
+        <!-- 筛选列表扩展项 -->
+        <filter-expand
+          ref="expandRef"
+          :blockFocusDir="expandBlockFocusDir"
+          :singleSelectPos="expandSinglePos"
+          :expandAvailable="expandAvailable"
+          :triggerTask="triggerTask"
+          @onListItemFocused="onExtListItemFocused"
+        />
+        <!-- 筛选列表 -->
+        <filter-sidebar
+          ref="sidebarRef"
+          :blockFocusDir="sidebarBlockFocusDir"
+          :singleSelectPos="sidebarSinglePos"
+          :listItemTextStyle="{ width: `222px`, marginLeft: `98px` }"
+          :listItemTextGravity="'center|start'"
+          @onListItemFocused="onListItemFocused"
+        />
+        <!-- 筛选内容 -->
+        <filter-content
+          ref="contentRef"
+          :descendantFocusability="contentDeny"
+          @setNextFocusNameRight="setNextFocusNameRight"
+        />
+      </qt-view>
+    </scroll-view>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useESRouter } from "@extscreen/es3-router";
+import { buildFilters } from "./adapter/index";
+import { SecondaryType } from "./adapter/interface";
+import themeConfig from "../../config/theme-config";
+import TopView from "../../components/top-view.vue";
+import FilterExpand from "./components/expand/index.vue";
+import FilterSidebar from "./components/sidebar/index.vue";
+import FilterContent from "./components/content/index.vue";
+import filterManager from "./api/index";
+
+const router = useESRouter();
+
+// 扩展列表
+const expandRef = ref();
+const expandSinglePos = ref<number>(0);
+const expandBlockFocusDir = ref();
+const expandAvailable = ref<boolean>(false);
+// 筛选列表
+const sidebarRef = ref();
+const sidebarSinglePos = ref<number>(0);
+const sidebarBlockFocusDir = ref();
+// 筛选内容
+const contentRef = ref();
+const contentDeny = ref<1 | 2>(1);
+
+const triggerTask = [
+  {
+    event: "onFocusAcquired",
+    target: "filterScroll",
+    function: "scrollToWithOptions",
+    params: [{ x: -210, y: 0, duration: 300 }],
+  },
+  {
+    event: "onFocusLost",
+    target: "filterScroll",
+    function: "scrollToWithOptions",
+    params: [{ x: 210, y: 0, duration: 300 }],
+  },
+];
+
+function onESCreate(params: {
+  screenId: string;
+  defaultSecondaryId?: string;
+  defaultTags?: string;
+}) {
+  params.screenId = "1848555233454727169";
+  params.defaultSecondaryId = ""; // 默认选中的二级筛选项ID
+  loadFilters(
+    params.screenId,
+    params.defaultSecondaryId,
+    params.defaultTags || "",
+    true,
+  );
+}
+
+function loadFilters(
+  primaryId: string,
+  defaultSecondaryId: string,
+  defaultTags: string,
+  initExpand?: boolean,
+) {
+  filterManager.getFilters(primaryId).then((filters) => {
+    // 设置焦点向右方向
+    setExpandNextFocusNameRight("sidebarList");
+
+    const { primaries, secondaries, tertiaries } = buildFilters(
+      primaryId,
+      filters,
+      defaultTags.split(","),
+    );
+    // 设置左侧列表默认选中
+    const index = secondaries.findIndex(
+      (item) => item.id === defaultSecondaryId,
+    );
+    sidebarSinglePos.value = index !== -1 ? index : 0;
+    lastPosition = sidebarSinglePos.value;
+    // 初始化一级列表
+    if (initExpand) {
+      expandRef.value?.init(primaries);
+    }
+    // 初始化二级列表
+    sidebarRef.value?.init(secondaries);
+    // 初始化三级列表
+    contentRef.value?.init(primaryId, tertiaries, defaultSecondaryId);
+  });
+}
+
+let lastExtPosition = expandSinglePos.value;
+let extListTimer: any = -1;
+function onExtListItemFocused(evt) {
+  if (evt.isFocused && evt.position != lastExtPosition) {
+    // 禁止焦点向右
+    setExpandNextFocusNameRight("");
+    clearTimeout(extListTimer);
+    extListTimer = setTimeout(() => {
+      lastExtPosition = evt.position;
+      sidebarSinglePos.value = 0;
+      loadFilters(evt.item.id, "", "");
+    }, 300);
+  }
+}
+
+let lastPosition = sidebarSinglePos.value;
+let listTimer: any = -1;
+function onListItemFocused(evt) {
+  if (evt.isFocused) {
+    expandAvailable.value = evt.item.type === SecondaryType.FILTER_TITLE;
+
+    if (evt.position != lastPosition) {
+      // 禁止焦点向右
+      setNextFocusNameRight("");
+      clearTimeout(listTimer);
+      listTimer = setTimeout(() => {
+        lastPosition = evt.position;
+        sidebarSinglePos.value = lastPosition;
+        contentRef.value?.loadContents(
+          evt.item.id,
+          expandAvailable.value,
+          evt.item.type === SecondaryType.TEXT,
+        );
+      }, 300);
+    }
+  }
+}
+
+function setExpandNextFocusNameRight(s: string) {
+  expandBlockFocusDir.value = s === "" ? ["right"] : [];
+  expandRef.value?.setNextFocusNameRight(s);
+}
+
+function setNextFocusNameRight(s: string) {
+  contentDeny.value = s === "" ? 2 : 1;
+  sidebarBlockFocusDir.value = s === "" ? ["right"] : [];
+  sidebarRef.value?.setNextFocusNameRight(s);
+}
+
+function onBackPressed() {
+  if (contentRef.value?.onBackPressed()) {
+    router.back();
+  }
+}
+
+defineExpose({ onESCreate, onBackPressed });
+</script>
+
+<style scoped lang="scss" src="./scss/filter.scss"></style>

package/rules/.source/hellotv/src/pages/filter/scss/filter-content-list-item.scss

@@ -0,0 +1,42 @@
+.filter-main-conditions-list-record-item {
+  height: 46px;
+  background-color: transparent;
+  align-items: center;
+  justify-content: center;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #ffffff;
+  border-radius: 8px;
+}
+
+.filter-main-conditions-list-record-item-text {
+  height: 38px;
+  color: $theme-text-normal-color;
+  font-size: 28px;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.filter-main-conditions-list-row {
+  width: 1920px;
+  height: 66px;
+  background-color: transparent;
+}
+
+.filter-main-conditions-list-row-item {
+  height: 54px;
+  background-color: transparent;
+  padding: 24px;
+  border-radius: 30px;
+  justify-content: center;
+  focus-background-color: $theme-btn-focus-color;
+}
+
+.filter-main-conditions-list-row-item-text {
+  position: absolute;
+  height: 40px;
+  color: $theme-text-normal-color;
+  font-size: 30px;
+  focus-color: $theme-text-focus-color;
+  select-color: $theme-text-select-color;
+}

package/rules/.source/hellotv/src/pages/filter/scss/filter-content.scss

@@ -0,0 +1,60 @@
+.filter-main {
+  height: 950px;
+  background-color: transparent;
+  margin-top: 10px;
+}
+
+.filter-main-scroll {
+  height: 950px;
+  background-color: transparent;
+}
+
+.filter-main-box-img {
+  width: 160px;
+  height: 142px;
+  background-color: transparent;
+}
+
+.filter-main-box {
+  height: 950px;
+  background-color: transparent;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0px;
+}
+
+.filter-main-box-text {
+  width: 140px;
+  height: 40px;
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.55);
+  font-size: 30px;
+  margin-top: 25px;
+}
+
+.filter-main-conditions {
+  background-color: transparent;
+  /* margin-top: 24px; */
+  margin-bottom: 15px;
+}
+
+.filter-main-conditions-list {
+  background-color: transparent;
+}
+
+.filter-main-conditions-record {
+  background-color: transparent;
+  position: absolute;
+  top: 0px;
+}
+
+.filter-main-contents {
+  height: 950px;
+  background-color: transparent;
+}
+
+.filter-main-contents-grid {
+  height: 950px;
+  background-color: transparent;
+}

package/rules/.source/hellotv/src/pages/filter/scss/filter-expand.scss

@@ -0,0 +1,30 @@
+.filter-expand {
+  width: 210px;
+  height: 960px;
+  background-color: transparent;
+}
+
+.filter-expand-list {
+  width: 210px;
+  height: 960px;
+  background-color: transparent;
+}
+
+.filter-expand-list-item {
+  width: 210px;
+  height: 106px;
+  background-color: transparent;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  focus-background-color: $theme-btn-focus-color;
+}
+
+.filter-expand-list-item-text {
+  position: absolute;
+  width: 179px;
+  height: 106px;
+  background-color: transparent;
+  color: $theme-text-select-color;
+  font-size: 36px;
+  focus-color: $theme-text-focus-color;
+}

package/rules/.source/hellotv/src/pages/filter/scss/filter-sidebar.scss

@@ -0,0 +1,45 @@
+.filter-sidebar {
+  width: 340px;
+  height: 960px;
+  background-color: transparent;
+}
+
+.filter-sidebar-list {
+  width: 340px;
+  height: 960px;
+  background-color: transparent;
+}
+
+.filter-sidebar-list-item {
+  width: 340px;
+  height: 106px;
+  background-color: transparent;
+  border-radius: 8px;
+  padding-right: 80px;
+  focus-background-color: $theme-btn-focus-color;
+}
+
+.filter-sidebar-list-item-img {
+  width: 34px;
+  height: 34px;
+  background-color: transparent;
+  margin-right: 16px;
+}
+
+.filter-sidebar-list-item-text {
+  position: absolute;
+  width: 260px;
+  height: 106px;
+  background-color: transparent;
+  color: $theme-text-normal-color;
+  font-size: 36px;
+  focus-color: $theme-text-focus-color;
+  select-color: $theme-text-select-color;
+}
+
+.filter-sidebar-list-item-line {
+  width: 140px;
+  height: 2px;
+  background-color: #868686;
+  margin-left: 80px;
+}