@quicktvui/ai 1.0.9 → 1.1.0

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

@@ -0,0 +1,84 @@
+<template>
+  <div class="qt-test">
+    <qt-ul
+      class="qt-ul"
+      ref="qtulRef"
+      name="qt-ul"
+      :data="myData"
+      :spanCount="6"
+      @load-more="loadMore"
+    >
+      <template #default="{ item }">
+        <div
+          class="qt-ul-item"
+          v-if="item.type == 5"
+          :focusable="true"
+          :enableFocusBorder="true"
+          @focus="(e) => onFocus(e)"
+        >
+          <img :src="item ? item.img : ''" class="tv_item_img" />
+          <p class="tv_item_title">{{ item ? item.text : "" }}</p>
+        </div>
+        <div
+          class="tv item_2"
+          v-else
+          :focusable="true"
+          :enableFocusBorder="true"
+        ></div>
+      </template>
+    </qt-ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick, onMounted } 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 myData = ref<any[]>([]);
+let arr: Array<any> = [];
+let arrNew: Array<any> = [];
+for (let i = 0; i < 10; i++) {
+  arr.push({
+    id: "id" + i,
+    name: "name" + Math.random(),
+    itemSize: 260,
+    type: 5,
+    img: img,
+    tag: i % 2 == 0 ? "" : "VIP",
+    text: `pos:${i}`,
+    // decoration : {
+    //   top:20,
+    //   right:20
+    // }
+  });
+}
+onMounted(() => {
+  myData.value = arr;
+  setTimeout(() => {
+    for (let i = 10; i < 15; i++) {
+      arrNew.push({
+        id: "id" + i,
+        name: "name" + Math.random(),
+        itemSize: 260,
+        type: 5,
+        img: img,
+        tag: i % 2 == 0 ? "" : "VIP",
+        text: `pos:${i}`,
+        // decoration : {
+        //   top:20,
+        //   right:20
+        // }
+      });
+    }
+    myData.value = myData.value.concat(arrNew);
+  }, 5000);
+});
+const onFocus = (e) => {};
+const loadMore = () => {};
+</script>
+
+<!--<style lang='scss' scoped src='../config/test.scss'>-->
+<!--</style>-->
+
+<style lang="scss" scoped src="../config/test.scss"></style>

package/rules/.source/hellotv/src/pages/my/README.md

@@ -0,0 +1,87 @@
+## 我的/个人中心 - 技术方案
+
+## 功能
+
+- 多模式加载
+  - 支持路由模式
+  - 支持组件模式
+- 自定义瀑布流布局
+  - 开发多个通用的海报模板
+  - 开发账号管理海报组件
+    - 登陆状态
+    - 未登陆状态
+  - 开发历史记录板块
+    - 登陆状态
+    - 未登陆状态
+- 支持单独更新账号管理板块数据
+- 支持单独更新历史记录板块数据
+- 根据登陆状态更新页面数据
+
+## 实现
+
+- 目录结构
+  - src/api/my/
+    - types.ts 定义数据类型
+    - base.ts 获取数据基类
+    - my-data-manager.ts 业务端需要实现的获取数据的方法，如：调 api 接口
+    - configs.ts 页面配置文件
+  - src/pages/my/
+    - index.vue 路由页面
+    - my-template.vue 模板组件
+      - width 宽度
+      - height 高度
+    - poster/ 自定义海报模板，通过数据中的 type 值来确定使用哪个模板，默认提供三种通用海报
+      - index.vue
+      - info.vue
+      - card.vue
+
+```js
+// 作为单独页面
+const router = useESRouter()
+router.push({
+  name: '',
+  params: {}
+})
+// 作为tab页使用，直接引用my-template.vue作为组件即可
+import Mytemplate from 'src/pages/my/my-template.vue'
+;<Mytemplate />
+```
+
+- api
+  - config.ts 文件中配置页面主题
+    - bgColor 页面背景色
+  - base.ts 文件中
+    - initData 初始化页面数据，(页面创建时调用)
+    - getConfig 获取页面配置信息
+      - bgColor 页面背景色
+    - getUserInfo 获取用户信息 - 第一个板块展示
+    - getHistorys 获取历史记录信息
+    - getMoreList 获取更多板块信息
+- 板块数据格式示例
+
+```js
+;[
+  {
+    _id: 'xxx',
+    title: 'xxx',
+    titleStyle: {
+      width: 1000,
+      height: 50,
+      marginTop: 10,
+      marginBottom: 10,
+      fontSize: 50
+    },
+    itemList: [
+      {
+        _id: 'xxx',
+        type: 1002,
+        title: '',
+        subTitle: '',
+        img: '',
+        icon: '',
+        cornerNum: -1 //大于-1时右上角显示数字，否则显示红点
+      }
+    ]
+  }
+]
+```

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

@@ -0,0 +1,177 @@
+<template>
+  <div class="my_page" :style="pageStyle" :gradientBackground="bg">
+    <qt-waterfall
+      ref="waterfall"
+      class="my_content"
+      :style="contentStyle"
+      :requestFocus="true"
+      :listData="contentData"
+      :paddingRect="[0, 0, 0, 0]"
+      @onItemClick="onItemClick"
+    >
+      <template v-slot:item>
+        <my-templates />
+      </template>
+    </qt-waterfall>
+    <qt-loading-view
+      v-if="isLoading"
+      class="my_page_loading"
+      color="rgba(255,255,255,0.3)"
+      :focusable="false"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, CSSProperties, nextTick, Ref, ref } from "vue";
+import MyTemplates from "./my-templates.vue";
+import myApi from "../../api/my/index";
+import { qtRef, QTWaterfallSection } from "@quicktvui/quicktvui3";
+import {
+  dPageheight,
+  dPageWidth,
+  IBlockItemData,
+  myDataManager2,
+  transCenterSection,
+  transHistorySection,
+} from "./my-data-manager";
+import userManager from "../../api/user/user-manager";
+import { UserChangeListener, UserInfo } from "../../api/user/impl-user";
+import { QTIWaterfall } from "@quicktvui/quicktvui3/dist/src/waterfall/core/QTIWaterfall";
+import { useESToast } from "@extscreen/es3-core";
+
+const toast = useESToast();
+const isLoading = ref(true);
+const lastClickSid = ref("");
+const bg = ref<any>({ colors: ["#FF1C222B", "#FF00040B"] });
+const configStyle = ref<CSSProperties>({});
+const pageStyle = computed<CSSProperties>(() => {
+  return {
+    width: dPageWidth + "px",
+    height: dPageheight + "px",
+    ...configStyle.value,
+  };
+});
+
+const contentStyle = computed<CSSProperties>(() => {
+  return {
+    width: dPageWidth + "px",
+    height: dPageheight + "px",
+  };
+});
+const waterfall: Ref<QTIWaterfall | undefined> = ref();
+const contentData = qtRef<QTWaterfallSection[]>();
+
+const onItemClick = (pageId, sectionId, item: IBlockItemData) => {
+  if (item.jumpParams.options === "") {
+    toast.showToast("跳转页面");
+  } else {
+    myDataManager2.routerLaunch(item);
+    lastClickSid.value = item._id;
+  }
+};
+
+let isUserChange = false;
+let isShow = true;
+const userChangeListener: UserChangeListener = {
+  onUserChanged: (userInfo) => {
+    isUserChange = true;
+    updateData(userInfo);
+  },
+};
+const updateData = async (newInfo?: UserInfo | null) => {
+  if (!newInfo) {
+    newInfo = userManager.getUserInfo();
+  }
+  console.log(
+    "updateData:" + isUserChange + " " + isShow + " userInfo:" + !!newInfo,
+  );
+  if (isUserChange && isShow) {
+    isLoading.value = true;
+    // 更新用户信息
+    const newVipInfo = await myApi.getVipInfo();
+    contentData.value[0] = transCenterSection(newVipInfo, newInfo);
+    isUserChange = false;
+  }
+  // 更新历史数据，对比当前数据，需要注意当前判断是根据的文字，可能存在文字相同不更新的问题
+  const historyRes = await myApi.getHistorys();
+  const hisSection = transHistorySection(historyRes, newInfo);
+  let oldHistory = "";
+  if (contentData.value[1]) {
+    oldHistory = JSON.stringify(
+      contentData.value[1].itemList.map((e) => ({
+        title: e.title.text,
+        subTitle: e.subTitle.text,
+      })),
+    );
+  }
+  let newHistory = JSON.stringify(
+    hisSection.itemList.map((e) => ({
+      title: e.title.text,
+      subTitle: e.subTitle.text,
+    })),
+  );
+  // console.log('oldHistory:'+JSON.stringify(oldHistory))
+  // console.log('newHistory:'+JSON.stringify(newHistory))
+  if (oldHistory != newHistory) {
+    contentData.value[1] = hisSection;
+  }
+  isLoading.value = false;
+  //自动寻焦点
+  if (lastClickSid.value) {
+    console.log("autofocus:" + lastClickSid.value);
+    waterfall.value?.setAutoFocus(lastClickSid.value, 0);
+    lastClickSid.value = "";
+  }
+};
+
+defineExpose({
+  onESCreate(params) {
+    isLoading.value = true;
+    myApi.initPageData(params).then(async (res) => {
+      const datas = await myDataManager2.getData();
+      if (datas) {
+        contentData.value = datas;
+      }
+      isLoading.value = false;
+    });
+
+    userManager.addUserChangeListener(userChangeListener);
+    //添加卡片监听
+  },
+  onESResume() {
+    isShow = true;
+    updateData();
+  },
+  onESPause() {
+    isShow = false;
+  },
+  onESStop() {
+    isShow = false;
+  },
+  // onESRestart(){ },
+  onESDestroy() {
+    userManager.removeUserChangeListener(userChangeListener);
+  },
+});
+</script>
+
+<style scoped>
+.my_page {
+  position: relative;
+  background-color: transparent;
+}
+
+.my_content {
+  background-color: transparent;
+}
+.my_page_loading {
+  height: 100px;
+  width: 100px;
+  position: absolute;
+  left: 900px;
+  top: 500px;
+  background-color: transparent;
+  z-index: 999999;
+}
+</style>