@quicktvui/ai 1.0.9 → 1.1.0

package/rules/.source/hellotv/src/pages/device-info/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div
+    class="device-info-root-css"
+    :gradientBackground="{
+      colors: ThemeConfig.bgGradientColor,
+      orientation: 0,
+    }"
+  >
+    <span class="device-info-title">相关信息</span>
+    <qt-list-view class="device-info-list" :listData="mInfoList">
+      <div class="device-info-item-root" :type="1">
+        <qt-text
+          class="device-info-item-text device-info-item-name"
+          :lines="1"
+          :fontSize="36"
+          gravity="center|start"
+          text="${name}"
+        />
+        <qt-text
+          class="device-info-item-text device-info-item-value"
+          :lines="1"
+          :fontSize="36"
+          gravity="center|end"
+          text="${info}"
+        />
+        <div
+          style="
+            position: absolute;
+            width: 1020px;
+            height: 2px;
+            top: 118px;
+            background-color: rgba(255, 255, 255, 0.1);
+          "
+        />
+      </div>
+    </qt-list-view>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { qtRef } from "@quicktvui/quicktvui3";
+import userManager from "../../api/user/user-manager";
+import ThemeConfig from "../../config/theme-config";
+import BuildConfig from "../../config/build-config";
+defineOptions({
+  name: "index",
+});
+const mInfoList = qtRef();
+const onESCreate = () => {
+  initDeviceInfo();
+};
+const initDeviceInfo = () => {
+  const userId = userManager.getUserInfo()?.userId;
+  const isLogin = userManager.isLogin();
+  const macE = qt.device.getDeviceEthMac();
+  const macW = qt.device.getDeviceWifiMac();
+  let mac = macE;
+  if (mac && macW) {
+    mac = mac + "/" + macW;
+  } else {
+    if (!mac) {
+      mac = macW;
+    }
+  }
+  const ipAddress = qt.device.getIPAddress();
+  const versionRelease =
+    qt.develop.getVersionName() + "-" + BuildConfig.VUE_PLUGIN_VERSION;
+  const clientType = qt.device.getBuildModel() + "-" + qt.develop.getChannel();
+  const dnum = qt.runtime.getRuntimeDeviceId();
+  const infoList: any = [];
+  infoList.push({
+    type: 1,
+    name: "用户ID ",
+    info: isLogin ? userId : "未登录",
+  });
+  infoList.push({
+    type: 1,
+    name: "软件版本号 ",
+    info: versionRelease,
+  });
+  infoList.push({
+    type: 1,
+    name: "设备机型 ",
+    info: clientType,
+  });
+  infoList.push({
+    type: 1,
+    name: "IP地址 ",
+    info: ipAddress,
+  });
+  infoList.push({
+    type: 1,
+    name: "MAC地址 ",
+    info: mac,
+  });
+  infoList.push({
+    type: 1,
+    name: "设备序列号 ",
+    info: dnum,
+  });
+  mInfoList.value = infoList;
+};
+defineExpose({ onESCreate });
+</script>
+
+<style lang="scss" src="./scss/device-info.scss"></style>

package/rules/.source/hellotv/src/pages/device-info/scss/device-info.scss

@@ -0,0 +1,49 @@
+.device-info-root-css {
+  width: 1920px;
+  height: 1080px;
+  flex-direction: column;
+  background-color: transparent;
+}
+
+.device-info-title {
+  color: white;
+  font-size: 50px;
+  height: 60px;
+  width: 240px;
+  font-weight: normal;
+  margin-top: 68px;
+  margin-left: 90px;
+  background-color: transparent;
+}
+
+.device-info-list {
+  width: 1020px;
+  height: 720px;
+  margin-top: 46px;
+  background-color: transparent;
+  flex: 0;
+  align-self: center;
+  flex-direction: column;
+}
+
+.device-info-item-root {
+  width: 1020px;
+  height: 120px;
+  background-color: transparent;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.device-info-item-text {
+  height: 46px;
+  margin-top: 44px;
+  background-color: transparent;
+}
+.device-info-item-name {
+  width: 200px;
+  color: rgba(255, 255, 255, 0.5);
+}
+.device-info-item-value {
+  width: 800px;
+  color: white;
+}

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

@@ -0,0 +1,66 @@
+# 筛选
+
+## 页面功能
+
+    页面支持三种布局方式，通过页面级配置文件config.ts中layoutMode来控制。
+
+    layoutMode: 1 # 单栏布局，基础单页面
+                2 # 两栏布局，左侧筛选项列表、右侧基础单页面
+                3 # 三栏布局，在两栏布局的基础上增加了扩展一级筛选项列表
+
+## 页面布局
+
+![image](../../../doc/filter/design.png)
+
+### 基础单页面（single-contents.vue）
+
+![image](../../../doc/filter/single-contents.png)
+
+### 左侧筛选项列表、右侧基础单页面（sidebar-contents.vue）
+
+![image](../../../doc/filter/sidebar-contents.png)
+
+### 左侧筛选项列表(支持向左扩展一级筛选项列表)、右侧基础单页面（expand-sidebar-contents.vue）
+
+![image](../../../doc/filter/expand-sidebar-contents.png)
+
+## 目录结构
+
+```bash
+src/pages/filter
+├── README.md                               // 自述文件
+├── adapter                                 // 数据转换及类型定义
+│   ├── index.ts
+│   └── interface.ts
+├── api                                     // 网络请求
+│   ├── index.ts
+│   ├── interface.ts
+│   └── request-url.ts
+├── components                              // 页面组件
+│   ├── content                             // 筛选内容
+│   │   ├── grid-item-h.vue
+│   │   ├── grid-item-v.vue
+│   │   ├── index.vue
+│   │   ├── list-item-record.vue
+│   │   └── list-item.vue
+│   ├── expand                              // 左侧列表扩展
+│   │   └── index.vue
+│   └── sidebar                             // 左侧列表
+│       ├── index.vue
+│       ├── list-item-filter-title.vue
+│       ├── list-item-filter.vue
+│       ├── list-item-line.vue
+│       ├── list-item-text.vue
+│       └── list-item-title.vue
+├── scss                                    // 样式文件
+│   ├── filter-content-grid-item.scss
+│   ├── filter-content-list-item.scss
+│   ├── filter-content.scss
+│   ├── filter-expand.scss
+│   ├── filter-sidebar.scss
+│   └── filter.scss
+├── config.ts                               // 页面配置
+├── expand-sidebar-contents.vue
+├── sidebar-contents.vue
+└── single-contents.vue
+```

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

@@ -0,0 +1,180 @@
+import { QTListViewItem } from "@quicktvui/quicktvui3";
+import { Filters, Contents } from "../api/interface";
+import {
+  GridContent,
+  GridContentType,
+  ListItemType,
+  Primary,
+  PrimaryType,
+  Secondary,
+  SecondaryType,
+  Tertiary,
+  TertiaryType,
+} from "./interface";
+import config from "../config";
+import icFilterNormal from "../../../assets/filter/ic_filter_normal.png";
+import icFilterFocused from "../../../assets/filter/ic_filter_focused.png";
+import icFilterSelected from "../../../assets/filter/ic_filter_selected.png";
+import icLeftNormal from "../../../assets/filter/ic_left_normal.png";
+import icLeftFocused from "../../../assets/filter/ic_left_focused.png";
+import icLeftSelected from "../../../assets/filter/ic_left_selected.png";
+
+/**
+ * 构建一级、二级、三级筛选项
+ * @param primaryId 一级筛选项ID
+ * @param rawData 原始数据
+ * @returns
+ */
+export const buildFilters = function (
+  primaryId: string,
+  rawData: Filters,
+  defaultTags: string[],
+): { primaries: Primary[]; secondaries: Secondary[]; tertiaries: Tertiary[] } {
+  // 一级列表, 左侧扩展
+  const primaries: Primary[] = rawData.primary.map((item) => ({
+    type: PrimaryType.TEXT,
+    ...item,
+  }));
+
+  // 二级列表, 左侧筛选项
+  const secondaries: Secondary[] = [];
+  switch (config.layoutMode) {
+    case 1: // 单栏布局
+      break;
+    case 2: // 两栏布局
+      secondaries.push(
+        ...[
+          {
+            type: SecondaryType.TITLE,
+            id: "NIL",
+            name: primaries.find((item) => item.id === primaryId)?.name || "",
+          },
+          {
+            type: SecondaryType.FILTER,
+            id: "NIL",
+            name: "筛选",
+            icon: {
+              normal: "file://" + icFilterNormal,
+              focused: "file://" + icFilterFocused,
+              selected: "file://" + icFilterSelected,
+            },
+          },
+        ],
+      );
+      break;
+    case 3: // 三栏布局
+      secondaries.push(
+        ...[
+          {
+            type: SecondaryType.FILTER_TITLE,
+            id: "NIL",
+            name:
+              "全部" + primaries.find((item) => item.id === primaryId)?.name ||
+              "",
+            icon: {
+              normal: "file://" + icLeftNormal,
+              focused: "file://" + icLeftFocused,
+              selected: "file://" + icLeftSelected,
+            },
+          },
+          { type: SecondaryType.LINE, id: "NIL", name: "line" },
+        ],
+      );
+      break;
+  }
+  secondaries.push(...rawData.secondary.map((item) => ({ type: 9, ...item })));
+
+  // 三级列表, 右侧筛选条件
+  const tertiaries: Tertiary[] = rawData.tertiary.map((item) => {
+    const tagNames = item.tags.map((tag) => tag.name);
+    const defaultTagIndex = tagNames.findIndex((tagName) =>
+      defaultTags.includes(tagName),
+    );
+
+    return {
+      type: TertiaryType.LIST,
+      groupKey: item.groupKey,
+      groupName: item.groupName,
+      list: [
+        { type: ListItemType.TEXT, name: item.groupName },
+        ...item.tags.map((tag) => ({ type: ListItemType.TEXT, ...tag })),
+      ],
+      defaultSelectedPos: defaultTagIndex !== -1 ? defaultTagIndex + 1 : 0,
+    };
+  });
+
+  // 优化内容区域焦点首次向上体验, 值需要全局唯一
+  tertiaries[tertiaries.length - 1].list[0].sid = "--sid--";
+
+  // 优化最后一组筛选条件向下焦点
+  tertiaries[tertiaries.length - 1].list.map(
+    (item) => (item.nextFocusName = { down: "contentGrid" }),
+  );
+
+  return { primaries, secondaries, tertiaries };
+};
+
+/**
+ * 构建筛选内容组件数据
+ * @param rawData 原始数据
+ * @returns
+ */
+export const buildContents = function (rawData: Contents): GridContent[] {
+  return rawData.items.map((item) => ({
+    type:
+      config.gridItemMode === 1
+        ? GridContentType.HORIZONTAL
+        : GridContentType.VERTICAL,
+    decoration: { top: 22, right: 40, bottom: 18 },
+    id: item.id,
+    title: item.title,
+    cover: item.image,
+    corner: "免费",
+    showCorner: true,
+    score: item.score.toFixed(1),
+    showRating: true,
+    jumpParams: item.jumpParams,
+  }));
+};
+
+/**
+ * 获取请求筛选内容查询参数
+ * @param filters 筛选条件列表
+ * @returns
+ */
+export const getContentsQuery = (filters: QTListViewItem[]): string[] => {
+  const query: string[] = [];
+
+  filters.forEach((item) => {
+    if (item.defaultSelectedPos > 0) {
+      query.push(item.list[item.defaultSelectedPos].name);
+    }
+  });
+
+  return query;
+};
+
+/**
+ * 判断是否需要添加到底提示
+ * @param showConditions 是否展示筛选条件
+ * @param gridDataLength 筛选内容数据条数
+ * @returns
+ */
+export const shouldAddEndSection = (
+  showConditions: boolean,
+  gridDataLength: number,
+): boolean => {
+  const cfgGridSpanCount = config.gridSpanCount;
+  switch (config.gridItemMode) {
+    case 1:
+      return showConditions
+        ? gridDataLength > cfgGridSpanCount * 2
+        : gridDataLength > cfgGridSpanCount * 3;
+    case 2:
+      return showConditions
+        ? gridDataLength > cfgGridSpanCount
+        : gridDataLength > cfgGridSpanCount * 2;
+    default:
+      return false;
+  }
+};

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

@@ -0,0 +1,111 @@
+import { QTListViewItemDecoration } from "@quicktvui/quicktvui3";
+
+/**
+ * 一级筛选项类型
+ */
+export enum PrimaryType {
+  // 文本
+  TEXT = 1,
+}
+
+/**
+ * 一级筛选项
+ */
+export interface Primary {
+  type: PrimaryType;
+  id: string;
+  name: string;
+}
+
+/**
+ * 二级筛选项类型
+ */
+export enum SecondaryType {
+  // 标题
+  TITLE = 1,
+  // 两栏筛选项
+  FILTER = 2,
+  // 三栏筛选项
+  FILTER_TITLE = 3,
+  // 文本
+  TEXT = 9,
+  // 横线
+  LINE = 10,
+}
+
+/**
+ * 二级筛选项
+ */
+export interface Secondary {
+  type: SecondaryType;
+  id: string;
+  name: string;
+  icon?: {
+    normal: string;
+    focused: string;
+    selected: string;
+  };
+}
+
+/**
+ * 三级筛选项类型
+ */
+export enum TertiaryType {
+  // 列表
+  LIST = 1,
+}
+
+/**
+ * 三级筛选项
+ */
+export interface Tertiary {
+  type: TertiaryType;
+  groupKey: string; // 接口筛选参数
+  groupName: string; // 分组展示名称
+  list: ListItem[]; // 子列表数据
+  defaultSelectedPos: number; // 默认选中
+}
+
+/**
+ * 筛选子列表项类型
+ */
+export enum ListItemType {
+  // 文本
+  TEXT = 1,
+}
+
+/**
+ * 三级筛选项子列表项类型
+ */
+export interface ListItem {
+  type: ListItemType;
+  name: string;
+  sid?: string;
+  nextFocusName?: object;
+}
+
+/**
+ * 筛选内容类型
+ */
+export enum GridContentType {
+  // 横图
+  HORIZONTAL = 1,
+  // 竖图
+  VERTICAL = 2,
+}
+
+/**
+ * 筛选内容
+ */
+export interface GridContent {
+  type: GridContentType;
+  decoration: QTListViewItemDecoration;
+  id: string;
+  title: string;
+  cover: string;
+  corner?: string;
+  showCorner?: boolean;
+  score?: string;
+  showRating?: boolean;
+  jumpParams: any;
+}

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

@@ -0,0 +1,38 @@
+import { FilterApi, Filters } from "./interface";
+import { filterContentsUrl, filterLeftListUrl } from "./request-url";
+import { replacePlaceholders } from "../../../tools/common";
+import requestManager from "../../../tools/request";
+import config from "../../../config/build-config";
+
+class FilterManager implements FilterApi {
+  // 获取筛选左侧列表
+  getFilters(primaryId: string): Promise<Filters> {
+    return requestManager.get(
+      replacePlaceholders(filterLeftListUrl, {
+        packageName: config.packageName,
+        primaryId,
+      }),
+    );
+  }
+
+  // 获取筛选内容
+  getContents(
+    primaryId: string,
+    query?: string,
+    page: number = 1,
+    limit: number = 10,
+  ): Promise<any> {
+    return requestManager.get(
+      replacePlaceholders(filterContentsUrl, {
+        packageName: config.packageName,
+        primaryId,
+        query,
+        page,
+        limit,
+      }),
+    );
+  }
+}
+
+const filterManager = new FilterManager();
+export default filterManager;

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

@@ -0,0 +1,44 @@
+export interface FilterApi {
+  // 获取筛选项列表
+  getFilters(primaryId: string, secondaryId: string): Promise<Filters>;
+  // 获取筛选内容
+  getContents(
+    primaryId: string,
+    query?: string,
+    page?: number,
+    limit?: number,
+  ): Promise<Contents>;
+}
+
+export interface Filters {
+  primary: Tag[]; // 一级筛选项
+  secondary: Tag[]; // 二级筛选项
+  tertiary: Tertiary[]; // 三级筛选项
+}
+
+export interface Tertiary {
+  groupKey: string;
+  groupName: string;
+  tags: Tag[];
+}
+
+export interface Tag {
+  id: string;
+  name: string;
+}
+
+export interface Contents {
+  total: number;
+  items: {
+    id: string;
+    image: string;
+    title: string;
+    subTitle: string;
+    floatTitle: string;
+    score: number;
+    jumpParams: {
+      type: number;
+      options: object;
+    };
+  }[];
+}

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

@@ -0,0 +1,8 @@
+import BuildConfig from "../../../config/build-config";
+
+export const filterLeftListUrl =
+  BuildConfig.requestBaseUrl +
+  "/filter/${primaryId}/tags?packageName=${packageName}";
+export const filterContentsUrl =
+  BuildConfig.requestBaseUrl +
+  "/filter/${primaryId}/contents?packageName=${packageName}&query=${query}&page=${page}&limit=${limit}";