@shijiu/jsview-vue 0.9.502 → 0.9.631

package/samples/{SimpleWidgetDemo → MetroWidgetDemos/PerformanceTest}/components/ContentItem.vue

@@ -2,11 +2,10 @@
  * @Author: ChenChanghua
  * @Date: 2021-06-10 14:17:17
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-18 14:14:05
+ * @LastEditTime: 2022-07-11 18:20:58
  * @Description: file content
 -->
-<script>
-import { Options, Vue, setup } from "vue-class-component";
+<script setup>
 import posterHolder from "../assets/holder_logo.png";
 import couponLeft from "../assets/coupon_left.png";
 import couponRight from "../assets/coupon_right.png";
@@ -14,80 +13,55 @@ 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, computed } from "vue";
 
-@Options({
-  props: {
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-  },
-})
-class ContentItem extends Vue {
-  constructor(props) {
-    super(props);
-    //    console.log("cchtest2 ContentItem constructor " + new Date().getTime());
-    this.focused = false;
-    this.setup = setup(() => {
-      return {
-        posterHolder,
-        couponLeft,
-        couponMid,
-        couponRight,
-        borderLeft,
-        borderMid,
-        borderRight,
-      };
-    });
-  }
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+});
 
-  onFocus() {
-    this.focused = true;
-  }
+const focused = ref(false);
+const onFocus = () => {
+  focused.value = true;
+};
 
-  onBlur() {
-    this.focused = false;
-  }
+const onBlur = () => {
+  focused.value = false;
+};
 
-  onClick() {}
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
 
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClick);
-  }
+const focusTransform = computed(() => {
+  return focused.value ? "scale3d(1.2, 1.2, 1)" : null;
+});
 
-  get focusTransform() {
-    return this.focused ? "scale3d(1.2, 1.2, 1)" : null;
-  }
+const savePrizeWidth = computed(() => {
+  return 10 * props.data.savePrize.length + 26;
+});
 
-  get savePrizeWidth() {
-    return 10 * this.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;
+});
 
-  get soldTotalWidth() {
-    let width = 44 + 22; //base width;
-    if (this.data.soldTotal >= 10000) {
-      let text = parseInt(this.data.soldTotal / 10000) + "";
-      width += text.length * 12 + 22;
-    } else {
-      width += (this.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;
   }
-
-  get soldTotalText() {
-    let text = "";
-    if (this.data.soldTotal >= 10000) {
-      text = parseInt(this.data.soldTotal / 10000) + "万";
-    } else {
-      text = this.data.soldTotal;
-    }
-    return text;
-  }
-}
-
-export default ContentItem;
+  return text;
+});
 </script>
 
 <template>
@@ -104,7 +78,7 @@ export default ContentItem;
           height: 23,
           left: 53,
           top: 95,
-          backgroundImage: setup.posterHolder,
+          backgroundImage: posterHolder,
         }"
       />
     </div>
@@ -126,14 +100,14 @@ export default ContentItem;
       }"
     >
       <div
-        :style="{ width: 5, height: 24, backgroundImage: setup.couponLeft }"
+        :style="{ width: 5, height: 24, backgroundImage: couponLeft }"
       />
       <div
         :style="{
           left: 5,
           width: savePrizeWidth - 11,
           height: 24,
-          backgroundImage: setup.couponMid,
+          backgroundImage: couponMid,
         }"
       />
       <div
@@ -141,7 +115,7 @@ export default ContentItem;
           left: savePrizeWidth - 6,
           width: 5,
           height: 24,
-          backgroundImage: setup.couponRight,
+          backgroundImage: couponRight,
         }"
       />
       <div
@@ -161,14 +135,14 @@ export default ContentItem;
       }"
     >
       <div
-        :style="{ width: 7, height: 25, backgroundImage: setup.borderLeft }"
+        :style="{ width: 7, height: 25, backgroundImage: borderLeft }"
       />
       <div
         :style="{
           left: 7,
           width: soldTotalWidth - 13,
           height: 25,
-          backgroundImage: setup.borderMid,
+          backgroundImage: borderMid,
         }"
       />
       <div
@@ -176,7 +150,7 @@ export default ContentItem;
           left: soldTotalWidth - 7,
           width: 7,
           height: 25,
-          backgroundImage: setup.borderRight,
+          backgroundImage: borderRight,
         }"
       />
       <div
@@ -198,14 +172,14 @@ export default ContentItem;
       }"
     >
       <div
-        :style="{ width: 5, height: 24, backgroundImage: setup.couponLeft }"
+        :style="{ width: 5, height: 24, backgroundImage: couponLeft }"
       />
       <div
         :style="{
           left: 5,
           width: savePrizeWidth - 11,
           height: 24,
-          backgroundImage: setup.couponMid,
+          backgroundImage: couponMid,
         }"
       />
       <div
@@ -213,7 +187,7 @@ export default ContentItem;
           left: savePrizeWidth - 6,
           width: 5,
           height: 24,
-          backgroundImage: setup.couponRight,
+          backgroundImage: couponRight,
         }"
       />
       <div
@@ -232,14 +206,14 @@ export default ContentItem;
       }"
     >
       <div
-        :style="{ width: 7, height: 25, backgroundImage: setup.borderLeft }"
+        :style="{ width: 7, height: 25, backgroundImage: borderLeft }"
       />
       <div
         :style="{
           left: 7,
           width: soldTotalWidth - 13,
           height: 25,
-          backgroundImage: setup.borderMid,
+          backgroundImage: borderMid,
         }"
       />
       <div
@@ -247,7 +221,7 @@ export default ContentItem;
           left: soldTotalWidth - 7,
           width: 7,
           height: 25,
-          backgroundImage: setup.borderRight,
+          backgroundImage: borderRight,
         }"
       />
       <div
@@ -269,14 +243,14 @@ export default ContentItem;
       }"
     >
       <div
-        :style="{ width: 5, height: 24, backgroundImage: setup.couponLeft }"
+        :style="{ width: 5, height: 24, backgroundImage: couponLeft }"
       />
       <div
         :style="{
           left: 5,
           width: savePrizeWidth - 11,
           height: 24,
-          backgroundImage: setup.couponMid,
+          backgroundImage: couponMid,
         }"
       />
       <div
@@ -284,7 +258,7 @@ export default ContentItem;
           left: savePrizeWidth - 6,
           width: 5,
           height: 24,
-          backgroundImage: setup.couponRight,
+          backgroundImage: couponRight,
         }"
       />
       <div
@@ -303,14 +277,14 @@ export default ContentItem;
       }"
     >
       <div
-        :style="{ width: 7, height: 25, backgroundImage: setup.borderLeft }"
+        :style="{ width: 7, height: 25, backgroundImage: borderLeft }"
       />
       <div
         :style="{
           left: 7,
           width: soldTotalWidth - 13,
           height: 25,
-          backgroundImage: setup.borderMid,
+          backgroundImage: borderMid,
         }"
       />
       <div
@@ -318,7 +292,7 @@ export default ContentItem;
           left: soldTotalWidth - 7,
           width: 7,
           height: 25,
-          backgroundImage: setup.borderRight,
+          backgroundImage: borderRight,
         }"
       />
       <div

package/samples/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/samples/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>

package/samples/MetroWidgetDemos/PingPong/AppPage.vue

@@ -0,0 +1,73 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-12 10:45:38
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-09-01 17:04:31
+ * @Description: file content
+-->
+<script setup>
+import { VERTICAL, MetroWidget } from "jsview";
+import WidgetItem from "../WidgetItem.vue";
+import { ref, watch, onBeforeUnmount } from "vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    require: true,
+  },
+  name: {
+    type: String,
+    require: true,
+  },
+  onEdge: {
+    type: Function,
+  },
+});
+
+const widgetRef = ref(null);
+
+const provideData = () => {
+  return props.data.data;
+};
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    doSlide: false,
+  };
+};
+
+const watcher = watch(
+  () => props.data,
+  (newValue, oldValue) => {
+    widgetRef.value?.refreshData();
+  }
+);
+
+onBeforeUnmount(() => {
+  watcher();
+})
+
+</script>
+
+<template>
+  <metro-widget
+    ref="widgetRef"
+    :name="name"
+    :width="data.width"
+    :height="data.height"
+    :provideData="provideData"
+    :direction="VERTICAL"
+    :measures="measures"
+    :onEdge="onEdge"
+  >
+    <template #renderItem="{ data, query, onItemEdge, onAction }">
+      <widget-item
+        :data="data"
+        :query="query"
+        :onItemEdge="onItemEdge"
+        :onAction="onAction"
+      ></widget-item>
+    </template>
+  </metro-widget>
+</template>

package/samples/MetroWidgetDemos/PingPong/AppTab.vue

@@ -0,0 +1,62 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-12 10:45:19
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-09-01 16:19:51
+ * @Description: file content
+-->
+<script setup>
+import { HORIZONTAL, MetroWidget } from "jsview";
+import TabItem from "./TabItem.vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    require: true,
+  },
+  name: {
+    type: String,
+    require: true,
+  },
+  layout: {
+    type: Object,
+  },
+  onEdge: {
+    type: Function,
+  },
+});
+
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+  };
+};
+const provideData = () => {
+  return props.data;
+};
+</script>
+
+<template>
+  <jsv-focus-block>
+    <metro-widget
+      :name="name"
+      :width="layout.width"
+      :height="layout.height"
+      :provideData="provideData"
+      :direction="HORIZONTAL"
+      :measures="measures"
+      :onEdge="onEdge"
+      :padding="{
+        top: 30,
+        left: 60,
+        right: 60,
+      }"
+    >
+      <template #renderItem="{ data, query, onAction }">
+        <tab-item :data="data" :query="query" :onAction="onAction"></tab-item>
+      </template>
+    </metro-widget>
+  </jsv-focus-block>
+</template>

package/samples/MetroWidgetDemos/PingPong/TabItem.vue

@@ -0,0 +1,84 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-12 14:52:53
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-09-01 17:10:14
+ * @Description: file content
+-->
+<script setup>
+import { ref, inject } from "vue";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onAction: Object,
+});
+
+const globalInfo = inject("globalInfo");
+
+const focused = ref(false);
+const active = ref(false);
+
+// 自身的焦点状态自己记录, 通过回调来改变
+const onFocus = () => {
+  globalInfo.tabId = props.query.id;
+  focused.value = true;
+  active.value = false;
+};
+const onBlur = () => {
+  focused.value = false;
+  active.value =
+    props.query.getCurrentFocusId().id === props.query.id ? true : false;
+};
+const onClick = () => {
+  console.log("tab item onclick ", props.data);
+};
+
+// 一般在create的时候进行回调的注册, 使用 option api的可以在created时进行注册
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      transform: focused ? 'scale3d(1.2, 1.2, 1.2)' : '',
+      transition: 'transform 0.2s linear',
+    }"
+  >
+    <div
+      v-if="!focused && active"
+      :style="{
+        left: -2,
+        top: -2,
+        width: data.width + 4,
+        height: data.height + 4,
+        backgroundColor: '#00FF00',
+      }"
+    ></div>
+    <div
+      v-if="focused"
+      :style="{
+        left: -2,
+        top: -2,
+        width: data.width + 4,
+        height: data.height + 4,
+        backgroundColor: '#FF0000',
+      }"
+    ></div>
+    <div
+      :style="{
+        width: data.width,
+        height: data.height,
+        fontSize: '30px',
+        color: '#FFFFFF',
+        backgroundColor: data.color,
+      }"
+    >
+      {{ data.content }}
+    </div>
+  </div>
+</template>