@shijiu/jsview-vue-samples 1.9.747

package/MetroWidgetDemos/PerformanceTest/components/ContentItem.vue

@@ -0,0 +1,386 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-06-10 14:17:17
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-11 18:20:58
+ * @Description: file content
+-->
+<script setup>
+import posterHolder from "../assets/holder_logo.png";
+import couponLeft from "../assets/coupon_left.png";
+import couponRight from "../assets/coupon_right.png";
+import couponMid from "../assets/coupon_mid.png";
+import borderLeft from "../assets/line_left.png";
+import borderMid from "../assets/line_mid.png";
+import borderRight from "../assets/line_right.png";
+import { ref, shallowRef, computed } from "vue";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+});
+
+const focused = ref(false);
+const onFocus = () => {
+  focused.value = true;
+};
+
+const onBlur = () => {
+  focused.value = false;
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+
+const focusTransform = computed(() => {
+  return focused.value ? "scale3d(1.2, 1.2, 1)" : null;
+});
+
+const savePrizeWidth = computed(() => {
+  return 10 * props.data.savePrize.length + 26;
+});
+
+const soldTotalWidth = computed(() => {
+  let width = 44 + 22; //base width;
+  if (props.data.soldTotal >= 10000) {
+    let text = parseInt(props.data.soldTotal / 10000) + "";
+    width += text.length * 12 + 22;
+  } else {
+    width += (props.data.soldTotal + "").length * 12;
+  }
+  return width;
+});
+
+const soldTotalText = computed(() => {
+  let text = "";
+  if (props.data.soldTotal >= 10000) {
+    text = parseInt(props.data.soldTotal / 10000) + "万";
+  } else {
+    text = props.data.soldTotal;
+  }
+  return text;
+});
+</script>
+
+<template>
+  <div
+    class="frame-background"
+    :style="{
+      transform: focusTransform,
+    }"
+  >
+    <div class="poster-holder">
+      <div
+        :style="{
+          width: 107,
+          height: 23,
+          left: 53,
+          top: 95,
+          backgroundImage: posterHolder,
+        }"
+      />
+    </div>
+    <div
+      class="poster"
+      :style="{
+        backgroundImage: `url(${data.pictUrl})`,
+      }"
+    />
+    <div class="title-font title-layout">
+      {{ data.index + data.name }}
+    </div>
+    <div
+      :style="{
+        height: 24,
+        left: 13,
+        top: 256,
+        width: savePrizeWidth,
+      }"
+    >
+      <div
+        :style="{ width: 5, height: 24, backgroundImage: couponLeft }"
+      />
+      <div
+        :style="{
+          left: 5,
+          width: savePrizeWidth - 11,
+          height: 24,
+          backgroundImage: couponMid,
+        }"
+      />
+      <div
+        :style="{
+          left: savePrizeWidth - 6,
+          width: 5,
+          height: 24,
+          backgroundImage: couponRight,
+        }"
+      />
+      <div
+        class="ticket-text"
+        :style="{
+          width: savePrizeWidth,
+        }"
+      >
+        {{ `${data.savePrize}元券` }}
+      </div>
+    </div>
+
+    <div
+      :style="{
+        top: 256,
+        left: 27 + savePrizeWidth,
+      }"
+    >
+      <div
+        :style="{ width: 7, height: 25, backgroundImage: borderLeft }"
+      />
+      <div
+        :style="{
+          left: 7,
+          width: soldTotalWidth - 13,
+          height: 25,
+          backgroundImage: borderMid,
+        }"
+      />
+      <div
+        :style="{
+          left: soldTotalWidth - 7,
+          width: 7,
+          height: 25,
+          backgroundImage: borderRight,
+        }"
+      />
+      <div
+        class="sold-text"
+        :style="{
+          width: soldTotalWidth,
+        }"
+      >
+        {{ `已售${soldTotalText}件` }}
+      </div>
+    </div>
+
+    <div
+      :style="{
+        height: 24,
+        left: 13,
+        top: 270,
+        width: savePrizeWidth,
+      }"
+    >
+      <div
+        :style="{ width: 5, height: 24, backgroundImage: couponLeft }"
+      />
+      <div
+        :style="{
+          left: 5,
+          width: savePrizeWidth - 11,
+          height: 24,
+          backgroundImage: couponMid,
+        }"
+      />
+      <div
+        :style="{
+          left: savePrizeWidth - 6,
+          width: 5,
+          height: 24,
+          backgroundImage: couponRight,
+        }"
+      />
+      <div
+        class="ticket-text"
+        :style="{
+          width: savePrizeWidth,
+        }"
+      >
+        {{ `${data.savePrize}元券` }}
+      </div>
+    </div>
+    <div
+      :style="{
+        top: 270,
+        left: 27 + savePrizeWidth,
+      }"
+    >
+      <div
+        :style="{ width: 7, height: 25, backgroundImage: borderLeft }"
+      />
+      <div
+        :style="{
+          left: 7,
+          width: soldTotalWidth - 13,
+          height: 25,
+          backgroundImage: borderMid,
+        }"
+      />
+      <div
+        :style="{
+          left: soldTotalWidth - 7,
+          width: 7,
+          height: 25,
+          backgroundImage: borderRight,
+        }"
+      />
+      <div
+        class="sold-text"
+        :style="{
+          width: soldTotalWidth,
+        }"
+      >
+        {{ `已售${soldTotalText}件` }}
+      </div>
+    </div>
+
+    <div
+      :style="{
+        height: 24,
+        left: 13,
+        top: 280,
+        width: savePrizeWidth,
+      }"
+    >
+      <div
+        :style="{ width: 5, height: 24, backgroundImage: couponLeft }"
+      />
+      <div
+        :style="{
+          left: 5,
+          width: savePrizeWidth - 11,
+          height: 24,
+          backgroundImage: couponMid,
+        }"
+      />
+      <div
+        :style="{
+          left: savePrizeWidth - 6,
+          width: 5,
+          height: 24,
+          backgroundImage: couponRight,
+        }"
+      />
+      <div
+        class="ticket-text"
+        :style="{
+          width: savePrizeWidth,
+        }"
+      >
+        {{ `${data.savePrize}元券` }}
+      </div>
+    </div>
+    <div
+      :style="{
+        top: 280,
+        left: 27 + savePrizeWidth,
+      }"
+    >
+      <div
+        :style="{ width: 7, height: 25, backgroundImage: borderLeft }"
+      />
+      <div
+        :style="{
+          left: 7,
+          width: soldTotalWidth - 13,
+          height: 25,
+          backgroundImage: borderMid,
+        }"
+      />
+      <div
+        :style="{
+          left: soldTotalWidth - 7,
+          width: 7,
+          height: 25,
+          backgroundImage: borderRight,
+        }"
+      />
+      <div
+        class="sold-text"
+        :style="{
+          width: soldTotalWidth,
+        }"
+      >
+        {{ `已售${soldTotalText}件` }}
+      </div>
+    </div>
+
+    <div class="prize-title-font prize-title-layout">券后</div>
+    <div class="prize-font">
+      {{ `¥${data.prize - data.savePrize}` }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.frame-background {
+  width: 213px;
+  height: 337px;
+  border-radius: 10px 10px 10px 10px;
+  background-color: #f7f7f4;
+  transition: transform 0.2s linear;
+}
+
+.poster-holder {
+  width: 213px;
+  height: 213px;
+  border-radius: 10px 10px 0px 0px;
+  background-color: #cfcac6;
+}
+.poster {
+  width: 213px;
+  height: 213px;
+  border-radius: 7px 7px 0px 0px;
+}
+
+.title-font {
+  font-size: 21px;
+  color: #73665c;
+  line-height: 29px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+.title-layout {
+  top: 221;
+  left: 13;
+  width: 193px;
+  height: 29px;
+}
+.ticket-text {
+  height: 24;
+  color: #ffffff;
+  font-size: 16px;
+  text-align: center;
+  line-height: 24px;
+}
+.sold-text {
+  height: 25px;
+  color: #ff7a00;
+  font-size: 20px;
+  text-align: center;
+  line-height: 25px;
+}
+.prize-title-layout {
+  width: 35px;
+  height: 24px;
+  top: 296;
+  left: 13;
+}
+.prize-title-font {
+  color: #de2825;
+  text-align: center;
+  font-size: 17px;
+  line-height: 24px;
+}
+.prize-font {
+  top: 289;
+  left: 53;
+  width: 158; /*213 - 55*/
+  height: 37px;
+  line-height: 37px;
+  font-size: 28px;
+  color: #de2825;
+}
+</style>

package/MetroWidgetDemos/PerformanceTest/components/MyTab.vue

@@ -0,0 +1,129 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-09-29 16:13:35
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-09-29 17:07:19
+ * @Description: file content
+-->
+<script>
+import { ref, shallowRef } from "vue";
+
+export default {
+  props: {
+    name: Object,
+    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: 200px;
+  height: 50px;
+  line-height: 50px;
+  color: #444444;
+  font-size: 25px;
+  text-align: center;
+}
+
+.text-active {
+  width: 200px;
+  height: 50px;
+  line-height: 50px;
+  color: #ffffff;
+  font-size: 25px;
+  text-align: center;
+}
+
+.item-focused {
+  width: 200px;
+  height: 50px;
+  background-color: #008080;
+}
+.item-normal {
+  width: 200px;
+  height: 50px;
+  background-color: #87CECB;
+}
+</style>

package/MetroWidgetDemos/PerformanceTest/data.js

@@ -0,0 +1,45 @@
+let data1 = [];
+
+// 添加300个模拟数据
+for (let i = 0; i < 40; i++) {
+  data1.push({
+    index: i,
+    name: `商品：骆驼奶粉蛋白质粉，限时抢购，立刻发货，序号:${i}`,
+    prize: `${Math.floor(Math.random() * 200) +
+      200}` /* 测试数据要保证比最高优惠券(300左右)要高 */,
+    savePrize: `${i}`,
+    soldTotal: `${Math.floor(Math.random() * 50000)}`,
+    pictUrl:
+      "http://img.alicdn.com/bao/uploaded/i3/2207313464483/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg",
+  });
+}
+
+let data2 = [];
+for (let i = 0; i < 50; i++) {
+  data2.push({
+    index: i,
+    name: `商品：骆驼奶粉蛋白质粉，限时抢购，立刻发货，序号:${i}`,
+    prize: `${Math.floor(Math.random() * 200) +
+      200}` /* 测试数据要保证比最高优惠券(300左右)要高 */,
+    savePrize: `${i}`,
+    soldTotal: `${Math.floor(Math.random() * 50000)}`,
+    pictUrl:
+      "http://img.alicdn.com/bao/uploaded/i3/2207313464483/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg",
+  });
+}
+
+let data3 = [];
+for (let i = 0; i < 30; i++) {
+  data3.push({
+    index: i,
+    name: `商品：骆驼奶粉蛋白质粉，限时抢购，立刻发货，序号:${i}`,
+    prize: `${Math.floor(Math.random() * 200) +
+      200}` /* 测试数据要保证比最高优惠券(300左右)要高 */,
+    savePrize: `${i}`,
+    soldTotal: `${Math.floor(Math.random() * 50000)}`,
+    pictUrl:
+      "http://img.alicdn.com/bao/uploaded/i3/2207313464483/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg",
+  });
+}
+
+export { data1, data2, data3 };

package/MetroWidgetDemos/PingPong/App.vue

@@ -0,0 +1,135 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-12-21 15:36:29
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-09-01 17:08:21
+ * @Description: file content
+-->
+<script>
+import ViewSwiper from "./ViewSwiper.vue";
+import AppTab from "./AppTab.vue";
+import { reactive } from "vue";
+import { EdgeDirection } from "jsview";
+import { advanceMetroWidget, randomColor } from "../data.js";
+
+const pageList = [];
+const tabData = [];
+
+for (let i = 0; i < 5; i++) {
+  tabData.push({
+    width: 100,
+    height: 50,
+    marginRight: 10,
+    content: "Tab_" + i,
+    color: randomColor(),
+  });
+
+  let data = JSON.parse(JSON.stringify(advanceMetroWidget));
+  data.forEach((item) => {
+    item.name = "testPage_" + i + "-" + item.name;
+  });
+  pageList.push({
+    width: 600,
+    height: 600,
+    data: data,
+    name: "testPage-" + i,
+  });
+}
+export default {
+  components: {
+    ViewSwiper,
+    AppTab,
+  },
+  setup() {
+    let globalInfo = reactive({
+      tabId: 0,
+    });
+    return {
+      tabData,
+      appPageName: "/page",
+      appTabName: "/tab",
+      globalInfo,
+      pageList,
+      preFocusName: "/tab",
+      curFocusName: "/tab",
+    };
+  },
+  provide() {
+    return {
+      globalInfo: this.globalInfo,
+    };
+  },
+  methods: {
+    $_app_onFocus() {
+      console.log("App onFocus");
+      this.$refs.focusNode.findBlockByName(this.curFocusName).requestFocus();
+    },
+    onKeyDown(ev) {
+      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+        this.$router?.go(-1);
+      }
+      return true;
+    },
+    $_app_pageOnEdge(info) {
+      console.log("App page on edge ", info);
+      if (info.direction === EdgeDirection.top) {
+        this.curFocusName = "/tab";
+        this.$refs.focusNode.findBlockByName(this.appTabName).requestFocus();
+      }
+    },
+    $_app_tabOnEdge(info) {
+      console.log("App tab on edge ", info);
+      if (info.direction === EdgeDirection.bottom) {
+        this.curFocusName = "/page";
+        this.$refs.focusNode.findBlockByName(this.appPageName).requestFocus();
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="focusNode"
+    name="/main"
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+      onFocus: $_app_onFocus,
+    }"
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+  >
+    <div
+      :style="{
+        top: 0,
+        left: 100,
+      }"
+    >
+      <app-tab
+        :data="tabData"
+        :name="appTabName"
+        :layout="{ width: 1920, height: 100 }"
+        :onEdge="$_app_tabOnEdge"
+        :style="{
+          top: 15,
+        }"
+      ></app-tab>
+    </div>
+
+    <div :style="{ top: 100, left: 200 }">
+      <view-swiper
+        :name="appPageName"
+        :pageData="pageList"
+        :onEdge="$_app_pageOnEdge"
+        :layout="{
+          width: 600,
+          height: 600,
+        }"
+      ></view-swiper>
+    </div>
+  </jsv-focus-block>
+</template>