@shijiu/jsview-vue-samples 2.0.1021 → 2.0.1073

package/MetroWidgetDemos/itemSizeUpdate/center/Center.vue

@@ -0,0 +1,106 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script setup>
+import {
+  ListWidget,
+  HORIZONTAL,
+  useFocusHub,
+  FixPositionSlide,
+  EdgeDirection,
+} from "jsview";
+import Item from "./Item.vue";
+
+const focusHub = useFocusHub();
+
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+
+const fixPositionSlide = new FixPositionSlide();
+
+const dataLength = 30;
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < dataLength; ++i) {
+    data.push({
+      width: 100,
+      height: 150,
+      marginRight: 10,
+      color: randomColor(),
+      content: i,
+    });
+  }
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.bottom) {
+    focusHub.setFocus("itemResizeBackward");
+  }
+};
+
+const widgetLayout = {
+  left: 0,
+  top: 0,
+  width: 600,
+  height: 200,
+};
+
+const padding = {
+  left: 25,
+  top: 25,
+  right: 25,
+  bottom: 25,
+};
+
+const name = "itemResizeCenter";
+</script>
+
+<template>
+  <div>
+    <div
+      :style="{
+        ...widgetLayout,
+        backgroundColor: 'rgba(255,0,0,0.5)',
+      }"
+    ></div>
+    <list-widget
+      ref="widgetRef"
+      :name="name"
+      :left="widgetLayout.left"
+      :top="widgetLayout.top"
+      :width="widgetLayout.width"
+      :height="widgetLayout.height"
+      :provideData="provideData"
+      :direction="HORIZONTAL"
+      :slideSetting="fixPositionSlide"
+      :measures="measures"
+      :padding="padding"
+      :onEdge="onEdge"
+    >
+      <template #renderItem="{ data, onAction, query }">
+        <item
+          :data="data"
+          :onAction="onAction"
+          :query="query"
+          :dataLength="dataLength"
+        />
+      </template>
+    </list-widget>
+  </div>
+</template>

package/MetroWidgetDemos/itemSizeUpdate/center/Item.vue

@@ -0,0 +1,118 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import {
+  ref,
+  shallowRef,
+  inject,
+  onUpdated,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
+import { METRO_WIDGET_CONST } from "jsview";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  query: Object,
+  dataLength: Number,
+});
+
+const focused = ref(false);
+
+const width = ref(props.data.width);
+const duration = 200;
+
+let timeoutHandler = -1;
+
+const getResizeAnchor = () => {
+  if (props.query.index == 0) {
+    return 0;
+  } else if (props.query.index == props.dataLength - 1) {
+    return 1;
+  } else {
+    return 0.5;
+  }
+};
+
+const locateSetting = {
+  type: METRO_WIDGET_CONST.ITEM_RESIZE.WIDGET_SET,
+};
+
+const animInfo = {
+  duration: duration,
+  onEnd: () => {
+    console.log("resize end");
+  },
+};
+
+const onFocus = () => {
+  focused.value = true;
+  if (width.value == props.data.width) {
+    timeoutHandler = setTimeout(() => {
+      width.value = props.data.width + 400;
+      props.query.updateItemSize(
+        props.query.index,
+        {
+          width: width.value,
+          height: props.data.height,
+        },
+        locateSetting,
+        animInfo
+      );
+    }, 1000); /* 延迟1秒变化 */
+  }
+};
+
+const onBlur = () => {
+  focused.value = false;
+  if (width.value !== props.data.width) {
+    width.value = props.data.width;
+    props.query.updateItemSize(
+      props.query.index,
+      {
+        width: width.value,
+        height: props.data.height,
+      },
+      locateSetting,
+      animInfo
+    );
+  }
+  clearTimeout(timeoutHandler);
+  timeoutHandler = -1;
+};
+
+const onClick = () => {
+  console.log("onClick");
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+
+onBeforeUnmount(() => {
+  clearTimeout(timeoutHandler);
+  timeoutHandler = -1;
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: width,
+      height: data.height,
+      fontSize: 30,
+      color: focused ? '#FF0000' : '#FFFFFF',
+      backgroundColor: data.color,
+      transition: `left ${duration / 1000}s, top ${duration / 1000}s, width ${
+        duration / 1000
+      }s, height ${duration / 1000}s`,
+      borderRadius: 10,
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>

package/MetroWidgetDemos/ninePatchFocusPage/App.vue

@@ -0,0 +1,105 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @Description: file content
+-->
+<script setup>
+import {
+  MetroWidget,
+  VERTICAL,
+  EdgeDirection,
+  useFocusHub,
+  JsvNinePatch,
+} from "jsview";
+import { onMounted, reactive, provide } from "vue";
+import PageRow from "./PageRow.vue";
+import focusImg from "../../assets/focus1.png";
+
+const focusHub = useFocusHub();
+
+const focusSize = reactive({
+  width: 0,
+  height: 0,
+  left: 0,
+  top: 0,
+});
+provide("focusSize", focusSize);
+
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < 10; i++) {
+    data.push({
+      width: 500,
+      height: 170,
+      name: "widget_" + i,
+      marginBottom: 10,
+      index: i,
+    });
+  }
+  return data;
+};
+
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    marginBottom: item.marginBottom,
+    /**重要代码: doSlide设置为false, 由子MetroWidget控制滚动 */
+    doSlide: false,
+  };
+};
+
+onMounted(() => {
+  focusHub.setFocus("mwWidget");
+});
+</script>
+
+<template>
+  <div :style="{ width: 1280, height: 720, backgroundColor: '#007788' }">
+    <div
+      :style="{
+        left: 100,
+        top: 20,
+        width: 800,
+        height: 400,
+        fontSize: 30,
+        color: '#FFFFFF',
+      }"
+    >
+      {{ "一个带焦点移动的简单页面示例" }}
+    </div>
+    <!-- 为了保证边缘的item缩放后依旧完整显示, 需要设置padding, 注意width/height是包含padding的 -->
+    <metro-widget
+      name="mwWidget"
+      :top="80"
+      :left="50"
+      :width="660"
+      :height="600"
+      :provideData="provideData"
+      :padding="{ left: 30, right: 30 }"
+      :direction="VERTICAL"
+      :measures="measures"
+    >
+      <!-- 重要代码: 为了实现焦点就近移动, 需要传递onItemEdge回调 -->
+      <template #renderItem="{ data, onAction, onItemEdge }">
+        <page-row :data="data" :onAction="onAction" :onItemEdge="onItemEdge" />
+      </template>
+    </metro-widget>
+    <jsv-nine-patch
+      :style="{
+        width: focusSize.width,
+        height: focusSize.height,
+        top: focusSize.top,
+        left: focusSize.left,
+      }"
+      :imageUrl="focusImg"
+      :imageWidth="55"
+      :centerWidth="1"
+      :borderOutset="13"
+      :imageDspWidth="55"
+      :animTime="0.2"
+      :waitForInit="true"
+    ></jsv-nine-patch>
+  </div>
+</template>

package/MetroWidgetDemos/ninePatchFocusPage/Item.vue

@@ -0,0 +1,69 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-09 15:33:54
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef, inject } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+const focused = ref(false);
+const focusSize = inject("focusSize");
+const divRef = shallowRef(null);
+
+// 自身的焦点状态自己记录, 通过回调来改变
+const onFocus = () => {
+  focused.value = true;
+  divRef.value?.jsvGetBoundingClientRect().then(
+    (data) => {
+      focusSize.width = data.width;
+      focusSize.height = data.height;
+      focusSize.left = data.left;
+      focusSize.top = data.top;
+    },
+    (error) => {
+      console.log("get absolute position failed", error);
+    }
+  );
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {
+  console.log("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
+      ref="divRef"
+      :style="{
+        width: data.width,
+        height: data.height,
+        fontSize: 30,
+        color: '#FFFFFF',
+        backgroundColor: data.color,
+        borderRadius: 10,
+      }"
+    >
+      {{ data.content }}
+    </div>
+  </div>
+</template>

package/MetroWidgetDemos/ninePatchFocusPage/PageRow.vue

@@ -0,0 +1,89 @@
+
+<script setup>
+import { HORIZONTAL, MetroWidget, useFocusHub } from "jsview";
+import { ref, shallowRef } from "vue";
+import Item from "./Item.vue";
+
+const props = defineProps({
+  data: Object,
+  onItemEdge: Function,
+  onAction: Object,
+});
+const focusHub = useFocusHub();
+const mwRef = shallowRef(null);
+
+const measures = (item) => {
+  return item;
+};
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < 10; i++) {
+    data.push({
+      width: (i + props.data.index) % 2 == 0 ? 90 : 180,
+      height: 90,
+      marginRight: 10,
+      marginBottom: 10,
+      content: i,
+      color: randomColor(),
+    });
+  }
+  return data;
+};
+const onFocus = (rect) => {
+  /** 重要代码: 参数rect为父MetroWidget传递的, 焦点过来的区域
+   *  因此需要调用setEnterFocusRect来设置焦点进入区域, 以寻找最近的焦点
+   */
+  mwRef.value?.setEnterFocusRect(rect);
+  focusHub.setFocus(props.data.name);
+};
+const onBlur = () => {
+  //onBlur时需要返还焦点给父MetroWidget
+  focusHub.returnFocusToParent();
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 900,
+      height: 50,
+      fontSize: 30,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ data.name }}
+  </div>
+  <!-- 重要代码: sendFocusRectEvent可以让MetroWidget的item在获焦时发送事件, 通知父的MetroWidget进行滚动 -->
+  <!-- 重要代码: onItemEdge直接作为onEdge回调, 既子MetroWidget到达边缘时触发父的onItemEdge -->
+  <metro-widget
+    ref="mwRef"
+    :name="data.name"
+    :top="50"
+    :width="data.width"
+    :height="data.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :padding="{
+      left: 30,
+      right: 30,
+      top: 10,
+      bottom: 10,
+    }"
+    :measures="measures"
+    :onEdge="onItemEdge"
+    :sendFocusRectEvent="true"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>

package/MetroWidgetDemos/routeList.js

@@ -44,11 +44,6 @@ export default [
     path: "/metroWidget/focusableItemMetroWidget",
     component: () => import("jsview-vue-samples/MetroWidgetDemos/focusableItemMetroWidget/App.vue"),
   },
-  // {
-  //   name: "嵌套示例",
-  //   path: "/metroWidget/Advanced",
-  //   component: () => import("jsview-vue-samples/MetroWidgetDemos/Advanced/App.vue"),
-  // },
   {
     name: "乒乓模式",
     path: "/metroWidget/PingPong",
@@ -61,4 +56,22 @@ export default [
     component: () =>
       import("jsview-vue-samples/MetroWidgetDemos/PerformanceTest/App.vue"),
   },
+  {
+    name: "骨架图",
+    path: "/metroWidget/SkeletonDiagram",
+    component: () =>
+      import("jsview-vue-samples/MetroWidgetDemos/SkeletonDiagram/App.vue"),
+  },
+  {
+    name: ".9焦点页面",
+    path: "/metroWidget/ninePatchFocusPage",
+    component: () =>
+      import("jsview-vue-samples/MetroWidgetDemos/ninePatchFocusPage/App.vue"),
+  },
+  {
+    name: "item尺寸更新",
+    path: "/metroWidget/itemSizeUpdate",
+    component: () =>
+      import("jsview-vue-samples/MetroWidgetDemos/itemSizeUpdate/App.vue"),
+  },
 ]

package/MetroWidgetDemos/slideSetting/App.vue

@@ -30,8 +30,8 @@ const randomColor = () => {
 const data = [];
 for (let i = 0; i < 30; i++) {
   data.push({
-    width: 90,
-    height: 90,
+    width: 60,
+    height: 60,
     marginRight: 10,
     marginBottom: 10,
     color: randomColor(),
@@ -59,8 +59,8 @@ const widget1 = {
   widgetLayout: {
     left: 50,
     top: 50,
-    width: 500,
-    height: 200,
+    width: 350,
+    height: 140,
   },
   slideSetting: new SeamlessSlide({
     startPercent: 0.2,
@@ -90,8 +90,8 @@ const widget2 = {
   widgetLayout: {
     left: 50,
     top: 300,
-    width: 500,
-    height: 220,
+    width: 350,
+    height: 160,
   },
   slideSetting: new WholePageSlide(),
 };
@@ -116,8 +116,8 @@ const widget3 = {
   widgetLayout: {
     left: 50,
     top: 550,
-    width: 500,
-    height: 200,
+    width: 350,
+    height: 140,
   },
   slideSetting: new FixPositionSlide({ fixPercent: 0.5 }),
 };

package/MockjsDemo/App.vue

@@ -0,0 +1,54 @@
+<script>
+import KeyEventCatcher from './KeyEventCatcher.vue';
+import resImage from '../assets/pngNoAlphaDemo.png';
+import { ref } from 'vue';
+// if(process.env.NODE_ENV == 'development') {
+  await import('./mock/index.js')
+// }
+
+export default {
+  components: {
+    KeyEventCatcher,
+  },
+  data() {
+    const defName = "这是Mock前的数据"
+    return {
+      defName: defName,
+      name: ref(defName),
+      resImage: resImage,
+    }
+  },
+  mounted() {
+    setInterval(async () => {
+      if (this.name != this.defName) {
+        this.name = this.defName;
+      } else {
+        const xhr = new XMLHttpRequest();
+        xhr.open('GET', '/api/testData');
+        xhr.onload = () => {
+          if (xhr.status !== 200) {
+            console.error('Failed to get data from mockjs')
+            return;
+          }
+          const jsonData = JSON.parse(xhr.responseText);
+          this.name = jsonData.data.name;
+        };
+        xhr.send();
+      }
+    }, 3000)
+  }
+}
+
+</script>
+
+<template>
+  <KeyEventCatcher/>
+  <div :style="{left:450, top: 200, width:500,
+     fontSize: 50, color: '#6688FF'}">
+    {{ name }}
+  </div>
+  <img :src="resImage" :style="{left:100, top:100, width: 300}" />
+</template>
+
+<style scoped>
+</style>

package/MockjsDemo/KeyEventCatcher.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { useRouter } from "vue-router";
+const router = useRouter();
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，回退
+    return true;
+  }
+  return false;
+}
+</script>
+
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="onKeyDown"/>
+</template>
+
+<style scoped>
+</style>

package/MockjsDemo/mock/index.js

@@ -0,0 +1,12 @@
+import Mock from 'mockjs'
+
+console.log("Generating mock data...");
+
+Mock.mock('/api/testData', 'get', {
+    code: 0,
+    data: {
+        name: '从Mockjs获取的数据'
+    }
+})
+
+export default Mock;

package/NinePatchDemo/App.vue

@@ -82,8 +82,8 @@ onMounted(() => {
       :measures="measures"
       :padding="{ left: 50, right: 50, top: 50, height: 50 }"
     >
-      <template #renderItem="{ data, onAction }">
-        <item :data="data" :onAction="onAction" />
+      <template #renderItem="{ data, onAction, query }">
+        <item :data="data" :onAction="onAction" :query="query" />
       </template>
     </metro-widget>
     <jsv-nine-patch