@shijiu/jsview-vue-samples 2.3.0 → 2.3.728-alpha.0

package/DivMetroPerformance/components/MyTab.vue

@@ -1,129 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-09-29 16:13:35
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-09-29 17:07:19
- * @Description: file content
--->
-<script>
-import { ref } from "vue";
-
-export default {
-  props: {
-    name: String,
-    onEdgeDown: Function,
-    onItemFocus: Function,
-  },
-  setup() {
-    let activeId = ref(0);
-    let focused = ref(false);
-    return {
-      activeId,
-      focused,
-    };
-  },
-  computed: {
-    tab1Class() {
-      if (this.activeId == 0) {
-        return this.focused
-          ? "text-active item-focused"
-          : "text-active item-normal";
-      } else {
-        return "text-normal item-normal";
-      }
-    },
-    tab2Class() {
-      if (this.activeId == 1) {
-        return this.focused
-          ? "text-active item-focused"
-          : "text-active item-normal";
-      } else {
-        return "text-normal item-normal";
-      }
-    },
-    tab3Class() {
-      if (this.activeId == 2) {
-        return this.focused
-          ? "text-active item-focused"
-          : "text-active item-normal";
-      } else {
-        return "text-normal item-normal";
-      }
-    },
-  },
-  methods: {
-    onKeyDown(ev) {
-      switch (ev.keyCode) {
-        case 37:
-          this.activeId--;
-          if (this.activeId < 0) {
-            this.activeId = 2;
-          }
-          this.onItemFocus(this.activeId);
-          break;
-        case 39:
-          this.activeId++;
-          if (this.activeId > 2) {
-            this.activeId = 0;
-          }
-          this.onItemFocus(this.activeId);
-          break;
-        case 40:
-          this.onEdgeDown();
-          break;
-      }
-    },
-    onFocus() {
-      this.focused = true;
-    },
-    onBlur() {
-      this.focused = false;
-    },
-    getOnAction() {
-      return {
-        onKeyDown: this.onKeyDown,
-        onFocus: this.onFocus,
-        onBlur: this.onBlur,
-      };
-    },
-  },
-};
-</script>
-
-<template>
-  <jsv-focus-block :name="name" :onAction="getOnAction()"></jsv-focus-block>
-  <div :class="tab1Class">Tab1</div>
-  <div :class="tab2Class" :style="{ left: 220 }">Tab2</div>
-  <div :class="tab3Class" :style="{ left: 440 }">Tab3</div>
-</template>
-
-<style scoped>
-.text-normal {
-  width: 200;
-  height: 50;
-  line-height: 50;
-  color: #444444;
-  font-size: 25;
-  text-align: center;
-}
-
-.text-active {
-  width: 200;
-  height: 50;
-  line-height: 50;
-  color: #ffffff;
-  font-size: 25;
-  text-align: center;
-}
-
-.item-focused {
-  width: 200;
-  height: 50;
-  background-color: #008080;
-}
-.item-normal {
-  width: 200;
-  height: 50;
-  background-color: #87CECB;
-}
-</style>

package/DivMetroPerformance/data.js

@@ -1,124 +0,0 @@
-// const data = [
-//     {
-//         blocks: {
-//             w: 200,
-//             h: 160
-//         },
-//         focusable: true,
-//         color: "#000022",
-//         content: 0
-//     },
-//     {
-//         blocks: {
-//             w: 200,
-//             h: 160
-//         },
-//         focusable: true,
-//         color: "#003300",
-//         content: 1
-//     },
-//     {
-//         blocks: {
-//             w: 200,
-//             h: 160
-//         },
-//         focusable: true,
-//         color: "#000044",
-//         content: 2
-//     },
-//     {
-//         blocks: {
-//             w: 400,
-//             h: 320
-//         },
-//         focusable: true,
-//         color: "#000055",
-//         content: 3
-//     },
-//     {
-//         blocks: {
-//             w: 200,
-//             h: 160
-//         },
-//         focusable: true,
-//         color: "#000066",
-//         content: 4
-//     },
-//     {
-//         blocks: {
-//             w: 200,
-//             h: 160
-//         },
-//         focusable: true,
-//         color: "#0000CD",
-//         content: 5
-//     },
-// ];
-
-// let content = 6;
-// for (let i = 0; i < 10; i++) {
-//     data.push({
-//         blocks: {
-//             w: 200,
-//             h: 320
-//         },
-//         focusable: true,
-//         color: "#000022",
-//         content: content++
-//     });
-//     data.push({
-//         blocks: {
-//             w: 200,
-//             h: 160
-//         },
-//         focusable: true,
-//         color: "#003300",
-//         content: content++
-//     });
-// }
-
-let data1 = [];
-
-// 添加300个模拟数据
-for (let i = 0; i < 50; i++) {
-  data1.push(Object.freeze({
-    index: i,
-    name: `商品：骆驼奶粉蛋白质粉，限时抢购，立刻发货，序号:${i}`,
-    prize: `${Math.floor(Math.random() * 200) +
-      200}` /* 测试数据要保证比最高优惠券(300左右)要高 */,
-    savePrize: `${i}`,
-    soldTotal: `${Math.floor(Math.random() * 50000)}`,
-    pictUrl:
-      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DivMetroPerformance/data/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg",
-  }));
-}
-
-let data2 = [];
-for (let i = 0; i < 49; i++) {
-  data2.push(Object.freeze({
-    index: i,
-    name: `商品：骆驼奶粉蛋白质粉，限时抢购，立刻发货，序号:${i}`,
-    prize: `${Math.floor(Math.random() * 200) +
-      200}` /* 测试数据要保证比最高优惠券(300左右)要高 */,
-    savePrize: `${i}`,
-    soldTotal: `${Math.floor(Math.random() * 50000)}`,
-    pictUrl:
-      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DivMetroPerformance/data/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg",
-  }));
-}
-
-let data3 = [];
-for (let i = 0; i < 48; i++) {
-  data3.push(Object.freeze({
-    index: i,
-    name: `商品：骆驼奶粉蛋白质粉，限时抢购，立刻发货，序号:${i}`,
-    prize: `${Math.floor(Math.random() * 200) +
-      200}` /* 测试数据要保证比最高优惠券(300左右)要高 */,
-    savePrize: `${i}`,
-    soldTotal: `${Math.floor(Math.random() * 50000)}`,
-    pictUrl:
-      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DivMetroPerformance/data/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg",
-  }));
-}
-
-export { data1, data2, data3 };

package/DivMetroPerformance/utils/GridItem.vue

@@ -1,28 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-01-14 18:18:00
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-01-26 17:35:26
- * @Description: file content
--->
-<script>
-export default {
-  props: ["data", "index"],
-  created() {},
-  mounted() {},
-};
-</script>
-
-<template>
-  <div
-    ref="element"
-    :style="{
-      left: data.xPos,
-      top: data.yPos,
-      width: data.width,
-      height: data.height,
-    }"
-  >
-    <slot name="renderItem" :data="data.data"></slot>
-  </div>
-</template>

package/DivMetroPerformance/utils/GridPlate.vue

@@ -1,85 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-09-22 13:47:23
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-02-11 17:55:55
- * @Description: file content
--->
-<script>
-import GridItem from "./GridItem.vue";
-
-export default {
-  props: {
-    data: Object,
-    height: {
-      type: Number,
-      required: true,
-    },
-    width: {
-      type: Number,
-      required: true,
-    },
-    measures: {
-      type: Function,
-      required: true,
-    },
-  },
-  components: {
-    GridItem,
-  },
-  created() {
-    this.configWidth = this.width;
-    this.configHeight = this.height;
-
-    // 通过measure函数，计算item信息
-    let measure_result = this.measures();
-    let current_line_x = 0;
-    let current_line_y = 0;
-    for (let idx = 0; idx < this.data.length; idx++) {
-      if (current_line_x + measure_result.width > this.configWidth) {
-        // new line
-        current_line_x = 0;
-        current_line_y += measure_result.height;
-      }
-
-      this.itemData.push(
-        Object.freeze({
-          id: idx,
-          xPos: current_line_x,
-          yPos: current_line_y,
-          data: this.data[idx],
-        })
-      );
-
-      // next item x
-      current_line_x += measure_result.width;
-    }
-  },
-  setup() {
-    return {
-      configWidth: 0,
-      configHeight: 0,
-      itemData: [],
-    };
-  },
-  mounted() {},
-  updated() {},
-};
-</script>
-
-<template>
-  <div
-    :style="{ width: configWidth, height: configHeight, overflow: 'hidden' }"
-  >
-    <grid-item
-      v-for="(item, index) in itemData"
-      :key="item.id"
-      :index="index"
-      :data="item"
-    >
-      <template v-slot:renderItem="slotProps">
-        <slot name="renderItem" v-bind="slotProps"></slot>
-      </template>
-    </grid-item>
-  </div>
-</template>

package/MediaDemo/App.vue

@@ -1,127 +0,0 @@
-<script>
-import { provide, reactive, watch } from 'vue'
-import { Options, Vue } from "vue-class-component";
-import AudioFrame from "./components/frames/AudioFrame";
-import VideoFrame from "./components/frames/VideoFrame";
-import Controllor from "./components/Controllor";
-import StatusBar from "./components/StatusBar";
-
-@Options({
-  components: {
-    AudioFrame,
-    VideoFrame,
-    Controllor,
-    StatusBar,
-  },
-})
-
-class App extends Vue {
-  constructor(props) {
-    super(props);
-
-    this.mediaCtrl = reactive({
-      type: 'video',
-      autoplay: true,
-      seek: 0,
-      loop: false,
-      mute: false,
-      volume: 0,
-      playbackRate: 1,
-
-      playTrigger: 0,
-      loadTrigger: 0,
-    })
-    this.mediaTime = reactive({
-      currentTime: 0,
-      duration: 0,
-    })
-    this.mediaStatus = reactive({
-      playState: '',
-      playbackRate: '',
-      objectFit: '',
-      volume: '',
-      playing: false,
-    })
-    this.videoCtrl = reactive({
-      layout: {},
-      objectFit: null,
-      visibility: 'visible',
-    })
-
-    const updateCaption = () => {
-      this.caption = (this.mediaCtrl.type == 'audio' ? App.Caption.audioInfo : App.Caption.videoInfo);
-    };
-    watch(() => this.mediaCtrl.type, updateCaption);
-    updateCaption();
-
-    provide('mediaCtrl', this.mediaCtrl)
-    provide('mediaTime', this.mediaTime)
-    provide('mediaStatus', this.mediaStatus)
-    provide('videoCtrl', this.videoCtrl)
-  }
-
-  static Caption = {
-    videoInfo: "名称: Video\n"
-            + "功能描述:\n"
-            + "1. 播放 / 暂停\n"
-            + "2. 前进 / 后退\n"
-            + "3. 时间 / 时长\n"
-            + "4. 循环 / 静音 / 倍速\n"
-            + "5. ObjectFit调整\n",
-    audioInfo: "名称: Audio\n"
-            + "功能描述:\n"
-            + "1. 播放 / 暂停\n"
-            + "2. 前进 / 后退\n"
-            + "3. 时间 / 时长 / 倍速\n"
-            + "4. 循环 / 静音\n"
-  }
-}
-
-export default App;
-</script>
-
-<template>
-<div
-    :style="{
-      top: 0, left: 0,
-      width: 1280, height: 720,
-      backgroundColor: 'rgb(222,211,140,0.5)'
-    }"
->
-
-  <AudioFrame v-if="mediaCtrl.type == 'audio'"/>
-  <VideoFrame v-else />
-
-  <!-- :key="mediaCtrl.type" => JsView bug，当mediaCtrl.type属性变化时，为了保证显示在VideoFrame前面 -->
-  <div class="caption" :key="mediaCtrl.type">
-    {{ caption }}
-  </div>
-  <Controllor class="controllor"/>
-  <StatusBar class="statusbar"/>
-</div>
-</template>
-
-<style scoped>
-.caption {
-  text-align: left;
-  font-size: 24;
-  line-height: 30;
-  color: #FFFFFF;
-  left: 40;
-  top: 20;
-  width: 300;
-  height: 210;
-  background-color: rgba(27,38,151,0.6);
-}
-
-.controllor {
-  left: 40;
-  top: 540;
-}
-
-.statusbar {
-  left: 40;
-  top: 650;
-}
-
-</style>

package/MediaDemo/components/Button.vue

@@ -1,69 +0,0 @@
-<script>
-import { Options, Vue } from "vue-class-component";
-
-@Options({
-  props: {
-    style: Object,
-    autoFocus: Boolean,
-    name: String,
-    onClick: Function,
-  }
-})
-
-class Button extends Vue {
-  constructor(props) {
-    super(props);
-
-    this.hasFocused = false;
-  }
-
-  onFocus() {
-    this.hasFocused = true;
-  }
-
-  onBlur() {
-    this.hasFocused = false;
-  }
-
-  onKeyDown(ev) {
-    if(ev.keyCode === 13) { // Enter
-      this.onClick?.();
-      return true;
-    }
-    return false;
-  }
-
-  getAction() {
-    return {
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
-      onKeyDown: this.onKeyDown
-    }
-  }
-}
-
-export default Button;
-</script>
-
-<template>
-<jsv-focus-block :name="name" :autoFocus="autoFocus?'':undefined"
-  :onAction="getAction()"
->
-  <div class="item"
-      :style="{
-        ...style,
-        backgroundColor: hasFocused ? '#FFFF00' : '#A8A8A8',
-      }"
-  >
-    <slot/>
-  </div>
-</jsv-focus-block>
-</template>
-
-<style scoped>
-.item {
-  text-align: center;
-  font-size: 24;
-  line-height: 40;
-}
-</style>