@quicktvui/ai 1.0.9 → 1.1.0

package/rules/.source/hellotv/src/components/top-view.scss

@@ -0,0 +1,38 @@
+//顶部views总高度
+$top-view-height: 120px;
+//logo 宽高
+$top-logo-width: 274px;
+$top-logo-height: 60px;
+
+.top-view-root-css {
+  width: 1920px;
+  height: $top-view-height;
+  background-color: transparent;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}
+
+.logo-right {
+  flex-direction: row;
+  padding-left: 80px;
+}
+
+.logo-left {
+  flex-direction: row-reverse;
+  padding-right: 80px;
+}
+
+.top-view-root-css .logo-default {
+  position: absolute;
+  width: $top-logo-width;
+  height: $top-logo-height;
+}
+
+.top-view-root-css .img-left {
+  left: 90px;
+}
+
+.top-view-root-css .img-right {
+  right: 90px;
+}

package/rules/.source/hellotv/src/components/top-view.vue

@@ -0,0 +1,114 @@
+<template>
+  <div
+    :class="[
+      'top-view-root-css',
+      { 'logo-right': logoRight, 'logo-left': !logoRight },
+    ]"
+  >
+    <!-- 搜索-->
+    <btn-pack-view
+      v-if="!$slots.topBtnItem"
+      ref="topSearchBtnRef"
+      name="topSearchBtn"
+      style="width: 145px; height: 60px; margin-right: 10px"
+      :nextFocusDownSID="downSid"
+      :focusScale="ThemeConfig.placeHolderFocusScale"
+      :focusable="true"
+      :iconLeft="true"
+      :normalIcon="ic_top_search_normal"
+      :focusIcon="ic_top_search_focused"
+      text="搜索"
+      @click="onClick"
+      @focus="onFocus"
+    />
+    <!-- 个人中心-->
+    <btn-pack-view
+      v-if="!$slots.topBtnItem"
+      ref="topMyBtnRef"
+      name="topMyBtn"
+      sid="topMyBtnSid"
+      :blockFocusDirections="['top']"
+      style="width: 200px; height: 60px; margin-left: 10px; margin-right: 10px"
+      :nextFocusDownSID="downSid"
+      :textStyle="{ width: '120px', height: '60px' }"
+      :focusScale="ThemeConfig.placeHolderFocusScale"
+      :focusable="true"
+      :iconLeft="true"
+      :normalIcon="ic_top_user_normal"
+      :focusIcon="ic_top_user_focused"
+      text="个人中心"
+      @click="onClick"
+      @focus="onFocus"
+    />
+    <slot name="topBtnItem"></slot>
+    <slot name="topOtherBtn"></slot>
+    <!-- logo-->
+    <img
+      v-if="!$slots.topLogoItem"
+      :src="ic_logo"
+      :class="[
+        'logo-default',
+        { 'img-left': !logoRight, 'img-right': logoRight },
+      ]"
+    />
+    <slot name="topLogoItem"></slot>
+  </div>
+</template>
+
+<script lang="ts" setup name="top-view">
+import launch from "../tools/launch";
+import BtnPackView from "./btn-pack-view.vue";
+import ic_top_search_normal from "../assets/top-view/ic_top_search_normal.png";
+import ic_top_search_focused from "../assets/top-view/ic_top_search_focused.png";
+import ic_top_user_normal from "../assets/top-view/ic_top_user_normal.png";
+import ic_top_user_focused from "../assets/top-view/ic_top_user_focused.png";
+import ic_logo from "../assets/top-view/ic_logo.png";
+import ThemeConfig from "../config/theme-config";
+
+const emits = defineEmits(["focus", "click"]);
+defineProps({
+  //logo右侧展示
+  logoRight: {
+    type: Boolean,
+    default: true,
+  },
+  //向下组件ID
+  downSid: {
+    type: String,
+    default: "",
+  },
+});
+
+const onClick = (e) => {
+  const name = e.target.attributes.name;
+  emits("click", e);
+  switch (name) {
+    //搜索
+    case "topSearchBtn":
+      launch.launchSearch();
+      break;
+    //个人中心
+    case "topMyBtn":
+      launch.launchMy();
+      break;
+  }
+};
+
+const onFocus = (e) => {
+  const name = e.target.attributes.name;
+  switch (name) {
+    //搜索
+    case "topSearchBtn":
+      emits("focus", e);
+      break;
+    //个人中心
+    case "topMyBtnRef":
+      emits("focus", e);
+      break;
+  }
+};
+
+defineExpose({});
+</script>
+
+<style lang="scss" src="./top-view.scss"></style>

package/rules/.source/hellotv/src/config/README.md

@@ -0,0 +1,22 @@
+
+* rootBgColor:全局兜底背景色
+* bgGradientColor:全局兜底渐进背景色（数组）
+
+
+* textColor:全局文字默认色
+* textSelectColor:全局文字选中状态色
+* textFocusColor:全局文字焦点色
+
+
+* btnGradientColor:按钮背景色 （数组）
+* btnGradientSelectColor:按钮选中状态色（数组）
+* btnGradientFocusColor:按钮焦点色（数组）
+
+* tabBtnColor: 瀑布流tab背景默认色
+* tabBtnSelectColor: 瀑布流tab选中状态色
+* tabBtnFocusColor: 瀑布流tab焦点色
+* tabBtnGradientColor:瀑布流tab背景默认色（数组）
+* tabBtnGradientSelectColor:瀑布流tab选中状态色（数组）
+* tabBtnGradientFocusColor:瀑布流tab焦点色（数组）
+
+

package/rules/.source/hellotv/src/config/build-config.ts

@@ -0,0 +1,22 @@
+const debug = true; //true:输出日志模式，  false: 屏蔽日志模式
+const env = false; // true:接口测试环境，false：接口正式环境
+export default {
+  DEBUG: debug,
+  testEnv: env,
+  // 使用模拟数据
+  useMockData: false,
+  //版本号
+  VUE_PLUGIN_VERSION: 1,
+  //是低端设备
+  isLowEndDev: false,
+  //ES包名
+  packageName: "es.tv.huan.hellotv",
+  //域名
+  // requestBaseUrl: process.env.requestBaseUrl || 'http://cms.hmon.tv/es_single/api',
+  requestBaseUrl: "http://mockapi.quicktv.net/api",
+  // requestBaseUrl: 'http://192.168.35.254:8080/api',
+  //首页内容请求数量
+  tabContentPageSize: 10,
+  // 默认源
+  defaultSourceUrl: "",
+};

package/rules/.source/hellotv/src/config/private-theme-config.ts

@@ -0,0 +1,21 @@
+export default {
+  /****供全局 动态传递样式使用***/
+
+  //全局背景渐进色
+  themeBgGradientColor: ["#00040B", "#1C222B"],
+  //全局焦点边框圆角
+  themeFocusBorderCorner: 16,
+  //按钮渐进颜色
+  themeBtnGradientNormalColor: ["#19FFFFFF", "#19FFFFFF"],
+  themeBtnGradientSelectColor: [],
+  themeBtnGradientFocusColor: ["#FFFFFF", "#FFFFFF"],
+
+  //普通按钮文字，文字---颜色
+  themeTextNormalColorAndroid: "#80FFFFFF",
+  themeTextNormalColor: "rgba(255, 255, 255, 0.5)",
+  themeTextSelectColor: "#FFFFFF",
+  themeTextFocusColor: "#13161B",
+
+  //全局焦点边框颜色
+  themeFocusBorderColor: "#FFFFFF",
+};

package/rules/.source/hellotv/src/config/public-config.scss

@@ -0,0 +1,16 @@
+/****供全局 css scss样式文件使用***/
+//全局背景色
+$theme-bg-color: #252930;
+//全局图片圆角
+$theme-img-border: 16px;
+// 按钮颜色
+$theme-btn-normal-color: rgba(255, 255, 255, 0.1);
+$theme-btn-select-color: transparent;
+$theme-btn-focus-color: #FFFFFF;
+// 文字默认颜色
+$theme-text-normal-color: rgba(255, 255, 255, 0.5);
+$theme-text-select-color: #FFFFFF;
+$theme-text-focus-color: #13161B;
+// 选中边框颜色
+$theme-focus-border-color:#FFFFFF;
+

package/rules/.source/hellotv/src/config/test.scss

@@ -0,0 +1,45 @@
+
+.qt-test {
+  background-color: yellow;
+  width: 1920px;
+  height: 1080px;
+}
+.qt-ul{
+  width: 1920px;
+  height: 1080px;
+  background-color: red;
+}
+.qt-ul-item {
+  position: relative;
+  width: 300px;
+  height: 250px;
+  border-radius: 20px;
+  background-color: pink;
+  focus-background-color: blue;
+}
+.tv_item_img {
+  width: 300px;
+  height: 200px;
+  background-color: red;
+}
+.tv_item_title{
+  width: 300px;
+  height: 50px;
+  line-height: 50px;
+  font-size: 30px;
+  color: #000000;
+  background-color: transparent;
+}
+.tv_item_tag{
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 60px;
+  height: 30px;
+  text-align: center;
+  line-height: 30px;
+  background-color: gold;
+  color: #000000;
+  font-size: 22px;
+  background-color: transparent;
+}

package/rules/.source/hellotv/src/config/theme-config.ts

@@ -0,0 +1,51 @@
+import BuildConfig from "./build-config";
+import PrivateThemeConfig from "./private-theme-config";
+
+export default {
+  //渐进色设置
+  //全局背景色
+  bgGradientColor: PrivateThemeConfig.themeBgGradientColor,
+
+  //按钮背景颜色
+  btnGradientNormalColor: PrivateThemeConfig.themeBtnGradientNormalColor,
+  btnGradientSelectColor: PrivateThemeConfig.themeBtnGradientSelectColor,
+  btnGradientFocusColor: PrivateThemeConfig.themeBtnGradientFocusColor,
+
+  //普通按钮文字，文字---颜色
+  textNormalColorAndroid: PrivateThemeConfig.themeTextNormalColorAndroid,
+  textNormalColor: PrivateThemeConfig.themeTextNormalColor,
+  textSelectColor: PrivateThemeConfig.themeTextSelectColor,
+  textFocusColor: PrivateThemeConfig.themeTextFocusColor,
+
+  //瀑布流格子浮动标题背景色
+  tabContentFloatBgColor: ["#ed222222", "#00000000"],
+  //角标默认颜色
+  tabCornerColors: ["#ffB67827", "#ffB67827"],
+
+  //是否设置全局焦点边框圆角 默认 8
+  focusBorderCornerEnable: true,
+  //全局焦点边框圆角
+  focusBorderCorner: PrivateThemeConfig.themeFocusBorderCorner,
+
+  //是否设置全局焦点边框颜色 默认白色
+  focusBorderColorEnable: false,
+  //全局焦点边框颜色
+  focusBorderColor: PrivateThemeConfig.themeFocusBorderColor,
+
+  //是否设置全局焦点边框宽度 默认 2
+  focusBorderWidthEnable: true,
+  //全局焦点边框宽度
+  focusBorderWidth: 3,
+
+  //是否设置焦点边框向内移动距离 默认 2
+  focusBorderInsetEnable: true,
+  //全局焦点边框向内移动距离
+  focusBorderInsetValue: -5,
+
+  // 是否展示占位图
+  placeHolderEnable: BuildConfig.isLowEndDev,
+  //是否展示焦点内边框 默认展示
+  focusInnerBorderEnable: true,
+  // 设置放大倍数
+  placeHolderFocusScale: 1.05,
+};

package/rules/.source/hellotv/src/main.ts

@@ -0,0 +1,45 @@
+//--------------------router-----------------------
+import { createESRouter, Router } from "@extscreen/es3-router";
+import routes from "./routes";
+//--------------------ESApp-----------------------
+import application from "./App.vue";
+import { ESApp } from "@extscreen/es3-vue";
+import { createESApp } from "@extscreen/es3-core";
+import { ESComponent } from "@extscreen/es3-component";
+import { MYComponent } from "./components/qt-ul-component";
+import { MYTABSComponent } from "./components/qt-tabs-component";
+
+//--------------------components-----------------------
+const routerOptions = {
+  main: "home",
+  error: "error",
+  limit: 5,
+  routes: routes,
+};
+const router: Router = createESRouter(routerOptions);
+const app: ESApp = createESApp(application, router);
+
+app.use(ESComponent);
+app.use(MYComponent);
+app.use(MYTABSComponent);
+
+const player = createESPlayer();
+app.use(player);
+
+const playerManager = createESPlayerManager();
+app.use(playerManager);
+
+const videoPlayer = createESVideoPlayer();
+app.use(videoPlayer);
+
+const ADPlayer = createESADPlayer();
+app.use(ADPlayer);
+
+//---------------------------QuickTVUI----------------------------------
+import "@quicktvui/quicktvui3/dist/index.css";
+import { QuickTVUI } from "@quicktvui/quicktvui3";
+import { createESPlayer } from "@extscreen/es3-player";
+import { createESPlayerManager } from "@extscreen/es3-player-manager";
+import { createESVideoPlayer } from "@extscreen/es3-video-player";
+import { createESADPlayer } from "@extscreen/es3-ad-player";
+app.use(QuickTVUI);

package/rules/.source/hellotv/src/pages/activity/adapter/config.ts

@@ -0,0 +1,37 @@
+//waterfall 内容配置
+export const TabContentConfig = {
+  //首页内容请求数量
+  sectionLoadLimit: 10,
+  //板块间距
+  sectionGap: 40,
+  //板块标题字体大小
+  sectionTitleFontSize: 42,
+  //板块标题默认高度,后台如果是图片标题，高度从后台获取
+  sectionTitleHeightDefault: 60,
+  //格子和板块标题，格子之间间距
+  sectionItemGap: 40,
+  //格子标题高度
+  sectionItemHeight: 60,
+  //整体距离左侧距离
+  decorationLeftGap: 80,
+  //首个板块距离顶部距离
+  firstSectionTop: 219,
+  //单 tab 时，首个section 距离顶部的偏移量
+  firstSectionOffsetY: -80,
+};
+//waterfall item类型
+export const TabContentItemType = {
+  TYPE_ITEM_SECTION_NO_TITLE: 0, //带边框无标题格子
+  TYPE_ITEM_SECTION_HAS_TITLE: 1, //带标题格子(上方/下方)
+  TYPE_ITEM_SECTION_PLACEHOLDER: 3, //占位格子
+  TYPE_ITEM_HISTORY_TEXT: 4, //历史格子-文字
+  TYPE_ITEM_HISTORY_IMG: 5, //历史格子-图片
+  TYPE_ITEM_SECTION_FOCUS_CHANGE_IMG: 6, //焦点变图格子
+  TYPE_ITEM_SECTION_CELL_PLAYER: 7, //小窗播放
+  TYPE_ITEM_SECTION_CELL_PLAYER_LIST: 8, //小窗列表播放
+  TYPE_ITEM_SECTION_LOOP_IMG: 9, //轮播图片格子
+  TYPE_WATERFALL_SECTION_4K: 10001, //4K section
+  TYPE_WATERFALL_SECTION_4K_ITEM: 10, //4K 格子
+  TYPE_WATERFALL_SECTION_SMALL_4K: 10002, //放映厅 小 4K section
+  TYPE_WATERFALL_SECTION_SMALL_4K_ITEM: 11, //小 4K 格子
+};