@quicktvui/ai 1.0.9 → 1.1.0

package/rules/.source/hellotv/src/pages/history/index.vue

@@ -0,0 +1,431 @@
+<template>
+  <qt-view
+    class="history"
+    :gradientBackground="{
+      colors: themeConfig.bgGradientColor,
+      orientation: 4,
+    }"
+  >
+    <!-- 左侧列表 -->
+    <qt-view
+      class="history-sidebar"
+      :descendantFocusability="isEditing ? 2 : 1"
+    >
+      <!-- 顶部提示 -->
+      <qt-text
+        class="history-sidebar-tips"
+        text="全部记录"
+        gravity="center"
+        :focusable="false"
+      ></qt-text>
+
+      <!-- 数据渲染 -->
+      <qt-ul
+        class="history-sidebar"
+        ref="sidebarRef"
+        :data="sidebarData"
+        :autofocusPosition="0"
+      >
+        <template #default="{ index, item }">
+          <qt-view
+            class="history-sidebar-item"
+            :type="1"
+            :focusable="true"
+            @focus="(e) => onSidebarItemFocus(e, index)"
+          >
+            <qt-text
+              class="history-sidebar-item-text"
+              :text="item.text"
+              gravity="center"
+              :showOnState="['normal', 'selected']"
+              :focusable="false"
+              :duplicateParentState="true"
+            ></qt-text>
+            <qt-text
+              class="history-sidebar-item-text"
+              :text="item.text"
+              gravity="center"
+              :showOnState="'focused'"
+              :focusable="false"
+              :duplicateParentState="true"
+            ></qt-text>
+          </qt-view>
+        </template>
+      </qt-ul>
+    </qt-view>
+
+    <!-- 右侧列表 -->
+    <qt-view class="history-content" :clipChildren="true">
+      <!-- 数据管理 -->
+      <qt-view v-if="isEditing" class="history-content-btns">
+        <qt-button
+          text="取消"
+          :style="btnStyle"
+          :textStyle="textStyle"
+          :focusScale="1"
+          @click="onBtnClick('cancel')"
+        />
+        <qt-button
+          text="一键清空"
+          :style="btnStyle"
+          :textStyle="textStyle"
+          :focusScale="1"
+          @click="onBtnClick('clear')"
+        />
+      </qt-view>
+      <qt-text
+        v-else
+        class="history-content-tips"
+        text="按【菜单键】或长按【OK键】管理记录"
+        gravity="center|end"
+      ></qt-text>
+
+      <!-- 半屏loading -->
+      <qt-view
+        v-if="isLoading"
+        class="history-content-loading"
+        :gradientBackground="{ colors: ['#1A2029', '#00040B'], orientation: 0 }"
+      >
+        <qt-loading-view
+          style="height: 100px; width: 100px"
+          color="rgba(21,122,252,0.3)"
+          :focusable="false"
+        ></qt-loading-view>
+      </qt-view>
+
+      <!-- 暂无数据 -->
+      <qt-view v-if="isEmpty" class="history-content-empty">
+        <qt-image
+          style="width: 186px; height: 174px; margin-bottom: 35px"
+          :src="icEmpty"
+        ></qt-image>
+        <qt-text
+          class="history-content-empty-text"
+          text="暂无数据"
+          gravity="center"
+        ></qt-text>
+      </qt-view>
+
+      <!-- 数据渲染 -->
+      <qt-ul
+        class="history-content-ul"
+        ref="ulRef"
+        :data="contentData"
+        :useDiff="true"
+        :spanCount="4"
+        :clipChildren="false"
+        :verticalFadingEdgeEnabled="true"
+        :blockFocusDirections="['down']"
+        :openPage="true"
+        :listenBoundEvent="true"
+        @item-bind="onItemBind"
+        :listenHasFocusChange="true"
+        :loadMore="onContentloadMore"
+        @scroll-state-changed="onScrollStateChanged"
+      >
+        <template #default="{ index, item }">
+          <!-- 常规 -->
+          <qt-view
+            class="history-content-ul-item"
+            v-if="item.type === ContentType.Normal"
+            :focusable="true"
+            :focusScale="1.03"
+            @focus="onContentItemFocus"
+            @click="onContentItemClick(index)"
+          >
+            <!-- 焦点状态下的删除样式 -->
+            <qt-view
+              class="history-content-ul-item-delete"
+              v-if="isEditing"
+              :showOnState="'focused'"
+              :focusable="false"
+              :duplicateParentState="true"
+            >
+              <qt-image
+                style="width: 40px; height: 50px"
+                :src="icDelete"
+                :focusable="false"
+              ></qt-image>
+            </qt-view>
+            <qt-image
+              style="
+                width: 325px;
+                height: 186px;
+                background-color: transparent;
+                border-radius: 16px;
+              "
+              :src="item.image"
+              :enableFocusBorder="true"
+              :focusable="false"
+              :duplicateParentState="true"
+            ></qt-image>
+            <qt-view
+              style="
+                height: 40px;
+                background-color: transparent;
+                margin-top: 11px;
+              "
+              :focusable="false"
+              :duplicateParentState="true"
+            >
+              <qt-text
+                class="history-content-ul-item-title"
+                :text="item.title"
+                gravity="center|start"
+                :showOnState="['normal', 'selected']"
+                :focusable="false"
+                :duplicateParentState="true"
+              ></qt-text>
+              <qt-text
+                class="history-content-ul-item-title"
+                :text="item.title"
+                gravity="center|start"
+                :showOnState="'focused'"
+                :focusable="false"
+                :duplicateParentState="true"
+              ></qt-text>
+            </qt-view>
+            <qt-text
+              class="history-content-ul-item-progress"
+              :text="item.progress"
+              gravity="center|start"
+              :focusable="false"
+            ></qt-text>
+          </qt-view>
+          <!-- 到底提示 -->
+          <qt-view
+            class="history-content-ul-item-end"
+            v-if="item.type === ContentType.End"
+            :focusable="false"
+          >
+            <qt-text
+              class="history-content-ul-item-end-text"
+              text="已经到底啦，按【返回键】回到顶部"
+              gravity="center"
+              :focusable="false"
+            ></qt-text>
+          </qt-view>
+        </template>
+      </qt-ul>
+    </qt-view>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import { ESKeyEvent, useESToast, useESEventBus } from "@extscreen/es3-core";
+import { useESRouter } from "@extscreen/es3-router";
+import { QTIListView, QTListViewItem } from "@quicktvui/quicktvui3";
+import { buildContents, buildEndContent } from "./adapter/index";
+import { ContentType } from "./adapter/interface";
+import historyManager from "./api/index";
+import launch from "../../tools/launch";
+import icEmpty from "../../assets/history/ic_empty.png";
+import icDelete from "../../assets/history/ic_delete.png";
+import themeConfig from "../../config/theme-config";
+import config from "./config";
+
+const toast = useESToast();
+const router = useESRouter();
+const eventBus = useESEventBus();
+const isLoading = ref<boolean>(false);
+const isEmpty = ref<boolean>(false);
+const isEditing = ref<boolean>(false);
+const sidebarRef = ref<QTIListView>();
+const ulRef = ref<QTIListView>();
+const sidebarData = ref<QTListViewItem[]>([]);
+const contentData = ref<QTListViewItem[]>([]);
+const btnStyle = {
+  width: `180px`,
+  height: `60px`,
+  borderRadius: `34px`,
+  backgroundColor: "rgba(255, 255, 255, 0.06)",
+  focusBackgroundColor: "#FFFFFF",
+  marginLeft: "30px",
+};
+const textStyle = {
+  color: "rgba(255, 255, 255, 0.55)",
+  fontSize: `30px`,
+  focusColor: "#13161B",
+};
+
+let page = 1;
+let stopPage = false;
+
+onMounted(() => {
+  eventBus.on("clearPageData", clearPageData);
+  // 初始化左侧列表
+  sidebarData.value = [
+    { type: 1, itemSize: 106, id: 1, text: "观看历史" },
+    { type: 1, itemSize: 106, id: 2, text: "我的收藏" },
+    { type: 1, itemSize: 106, id: 3, text: "已购内容" },
+  ];
+});
+
+onUnmounted(() => {
+  eventBus.off("clearPageData");
+});
+
+let lastIndex = -1;
+let lastFocusName = "";
+function onSidebarItemFocus(evt, index) {
+  if (evt.isFocused) {
+    lastFocusName = "sidebar";
+
+    if (lastIndex !== index) {
+      page = 1;
+      stopPage = false;
+      lastIndex = index;
+      isLoading.value = true;
+      // 右侧内容复原
+      ulRef.value?.scrollToTop();
+      // 加载新数据
+      loadRecords(index);
+    }
+  }
+}
+
+function onContentItemFocus(evt) {
+  if (evt.isFocused) {
+    lastFocusName = "content";
+  }
+}
+
+function onContentItemClick(index) {
+  if (isEditing.value) {
+    historyManager
+      .delRecords(
+        "xxx",
+        lastIndex === 0 ? "history" : "favorite",
+        contentData.value[index].id,
+      )
+      .then(() => {
+        contentData.value.splice(index, 1);
+      })
+      .catch(() => {
+        toast.showToast("删除失败");
+      });
+  } else {
+    launch.launchDetail(contentData.value[index].id);
+  }
+}
+
+let loadingDelayTimer: any = -1;
+async function loadRecords(
+  menuIndex: number,
+  page: number = 1,
+  limit: number = config.ContentsLimit,
+) {
+  console.log("ok->", menuIndex, page);
+  if (menuIndex === 2) {
+    contentData.value = [];
+  } else {
+    const records = await historyManager.getRecords(
+      "xxx",
+      menuIndex === 0 ? "history" : "favorite",
+      page,
+      limit,
+    );
+    if (page === 1) {
+      contentData.value = buildContents(records);
+    } else {
+      contentData.value = contentData.value.concat(buildContents(records));
+      // contentData.value.push(...buildContents(records))
+    }
+    // 到底提示
+    if (contentData.value.length > config.ContentsLimit) {
+      contentData.value.push(buildEndContent());
+    }
+    // 结束分页
+    stopPage = records.items.length < config.ContentsLimit;
+  }
+  isEmpty.value = contentData.value.length === 0;
+
+  // 延迟关闭loading
+  clearTimeout(loadingDelayTimer);
+  loadingDelayTimer = setTimeout(() => (isLoading.value = false), 300);
+}
+
+function onContentloadMore() {
+  if (!stopPage) {
+    loadRecords(lastIndex, ++page);
+    console.log(page, "32323444444444444444");
+  }
+}
+
+let offsetY = 0;
+function onScrollStateChanged(evt) {
+  offsetY = evt.offsetY;
+}
+
+function onBtnClick(name: "cancel" | "clear") {
+  if (name === "cancel") {
+    isEditing.value = false;
+  } else {
+    router.push({
+      name: "confirm",
+      params: {
+        text: "清空之后什么都没有了哦～",
+        btnL: "确定",
+        btnR: "取消",
+        menuIndex: lastIndex,
+        clearHistory: true,
+      },
+    });
+  }
+}
+
+function onItemBind() {}
+
+function clearPageData() {
+  isEmpty.value = true;
+  isEditing.value = false;
+  // 清空本地数据
+  contentData.value = [];
+}
+
+let oKCounter = 0;
+function onKeyDown(keyEvent: ESKeyEvent) {
+  if (lastFocusName === "content") {
+    switch (keyEvent.keyCode) {
+      case 82: // 菜单键
+        isEditing.value = true;
+        break;
+      case 23: // 长按OK键
+        if ((oKCounter++, oKCounter > 10)) {
+          isEditing.value = true;
+          oKCounter = 0;
+        }
+        break;
+      default:
+        oKCounter = 0;
+    }
+  }
+}
+
+function onBackPressed() {
+  // 编辑状态检查
+  if (isEditing.value) {
+    isEditing.value = false;
+    return;
+  }
+
+  // 右侧内容滚动状态检查
+  if (offsetY > 0) {
+    ulRef.value?.scrollToTop();
+    return;
+  }
+
+  // 左侧列表焦点
+  if (lastFocusName !== "sidebar") {
+    sidebarRef.value?.setItemFocused(0);
+    return;
+  }
+
+  router.back();
+}
+
+defineExpose({ onKeyDown, onBackPressed });
+</script>
+
+<style scoped lang="scss" src="./scss/history.scss"></style>

package/rules/.source/hellotv/src/pages/history/mock.ts

@@ -0,0 +1,32 @@
+import { numberToChinese } from "../../tools";
+
+export interface Item {
+  type: number;
+  itemSize: number;
+  title?: string;
+  progress?: string;
+  image?: string;
+  decoration?: any;
+}
+
+export const buildMockData = (
+  tag: string = "观看历史",
+  limit: number = 100,
+): Item[] => {
+  const arr: Item[] = [];
+  for (let i = 1; i <= limit; i++) {
+    arr.push({
+      type: 1,
+      itemSize: 266,
+      title: `${tag}：第${numberToChinese(i)}回`,
+      progress: `${i}%`,
+      image:
+        "https://extcdn.hsrc.tv/channelzero_image/2023/12/15/5e84c591-038c-47d1-a266-46058d229d3b.png",
+      decoration: { left: 20, top: 20, right: 20, bottom: 20 },
+    });
+  }
+  // 到底提示
+  arr.push({ type: 1002, itemSize: 100, decoration: { bottom: 140 } });
+
+  return arr;
+};

package/rules/.source/hellotv/src/pages/history/scss/history-raw.scss

@@ -0,0 +1,181 @@
+.history-raw {
+  width: 1920px;
+  height: 1080px;
+  background-color: transparent;
+  flex-direction: row;
+}
+
+.history-raw-focus-placeholder {
+  width: 1px;
+  height: 1px;
+  background-color: transparent;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+
+.history-raw-sidebar {
+  width: 340px;
+  height: 1080px;
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+.history-raw-sidebar-tips {
+  width: 250px;
+  height: 50px;
+  background-color: transparent;
+  margin-top: 75px;
+  margin-bottom: 30px;
+  color: white;
+  font-size: 40px;
+}
+
+.history-raw-sidebar-list {
+  width: 340px;
+  height: 1080px;
+  background-color: transparent;
+}
+
+.history-raw-sidebar-list-item {
+  width: 340px;
+  height: 106px;
+  background-color: transparent;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  align-items: center;
+  justify-content: center;
+  focus-background-color: $theme-btn-focus-color;
+}
+
+.history-raw-sidebar-list-item-text {
+  width: 160px;
+  height: 106px;
+  background-color: transparent;
+  position: absolute;
+  color: $theme-text-normal-color;
+  font-size: 36px;
+  focus-color: $theme-text-focus-color;
+  select-color: $theme-text-select-color;
+}
+
+.history-raw-content {
+  width: 1580px;
+  height: 1080px;
+  background-color: transparent;
+}
+
+.history-raw-content-btns {
+  width: 1500px;
+  height: 60px;
+  background-color: transparent;
+  margin-top: 40px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.history-raw-content-btns-item {
+  width: 180px;
+  height: 60px;
+  background-color: rgba(255, 255, 255, 0.06);
+  align-items: center;
+  justify-content: center;
+  focus-background-color: #ffffff;
+  border-radius: 30px;
+}
+
+.history-raw-content-btns-item-text {
+  position: absolute;
+  width: 180px;
+  height: 60px;
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.55);
+  focus-color: #13161b;
+  font-size: 30px;
+}
+
+.history-raw-content-tips {
+  width: 1500px;
+  height: 60px;
+  background-color: transparent;
+  margin-top: 40px;
+  color: rgba(255, 255, 255, 0.55);
+  font-size: 24px;
+}
+
+.history-raw-content-loading {
+  width: 1580px;
+  height: 1000px;
+  background-color: transparent;
+  align-items: center;
+  justify-content: center;
+}
+
+.history-raw-content-empty {
+  width: 1580px;
+  height: 1000px;
+  background-color: transparent;
+  align-items: center;
+  justify-content: center;
+}
+
+.history-raw-content-empty-text {
+  width: 180px;
+  height: 40px;
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.55);
+  font-size: 30px;
+}
+
+.history-raw-content-grid {
+  width: 1460px;
+  height: 955px;
+  background-color: transparent;
+  margin-top: 25px;
+  margin-left: 60px;
+}
+
+.history-raw-content-grid-item {
+  width: 325px;
+  background-color: transparent;
+}
+
+.history-raw-content-grid-item-delete {
+  width: 321px;
+  height: 182px;
+  background-color: rgba(0, 0, 0, 0.65);
+  border-radius: 16px;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  z-index: 100;
+}
+
+.history-raw-content-grid-item-title {
+  width: 325px;
+  height: 40px;
+  background-color: transparent;
+  margin-top: 11px;
+  color: $theme-text-normal-color;
+  font-size: 30px;
+  focus-color: white;
+}
+
+.history-raw-content-grid-item-progress {
+  width: 325px;
+  height: 34px;
+  background-color: transparent;
+  color: $theme-text-normal-color;
+  font-size: 24px;
+  focus-color: white;
+}
+
+.history-raw-content-grid-item-end-text {
+  width: 1460px;
+  height: 100px;
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.55);
+  font-size: 28px;
+}