@shijiu/jsview-vue 1.9.727 → 1.9.747

package/samples/MetroWidgetDemos/PerformanceTest/components/ContentItem.vue

@@ -1,386 +0,0 @@
-<!--
- * @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/samples/MetroWidgetDemos/PerformanceTest/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, 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/samples/MetroWidgetDemos/PerformanceTest/data.js

@@ -1,45 +0,0 @@
-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/samples/MetroWidgetDemos/PingPong/App.vue

@@ -1,135 +0,0 @@
-<!--
- * @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>