@shijiu/jsview-vue-samples 1.9.887 → 1.9.915

package/CssPreprocessor/utils/Panel.vue

@@ -0,0 +1,49 @@
+<script>
+import ContentList from './ContentList.vue';
+import TitleBar from './TitleBar.vue';
+
+export default {
+  props: {
+    style: Object,
+    panelData: Object,
+    sideline: Boolean
+  },
+  components: {
+    ContentList,
+    TitleBar,
+  },
+  computed: {
+    columnWidth() {
+      return this.style.width / this.panelData.title.length;
+    },
+    separatorColor() {
+      return 'rgba(0,0,255,0.7)'
+    }
+  },
+}
+</script>
+
+<template>
+<div :style=style>
+  <!-- 分隔线 -->
+  <div v-if=sideline >
+    <div :style="{width:style.width, height:1, backgroundColor:separatorColor}" />
+    <div :style="{top:style.height, width:style.width, height:1, backgroundColor:separatorColor}" />
+    <div :style="{left: 0, width:1, height: style.height, backgroundColor:separatorColor}" />
+    <template v-for="(_, idx) in panelData.title" :key="idx" >
+      <div :style="{left: columnWidth*(idx+1), width:1, height: style.height, backgroundColor:separatorColor}" />
+    </template>
+  </div>
+
+  <TitleBar :style="{width: columnWidth}" :titleData=panelData.title />
+  <div :style="{top:20}" >
+    <ContentList v-for="(_, idx) in panelData.contentList.length" :key=idx
+      :style="{left: columnWidth*idx, width: columnWidth, height: style.height-20}" :startIndex=idx
+      :contentData=panelData.contentList[idx]
+    />
+  </div>
+</div>
+</template>
+
+<style scoped>
+</style>

package/CssPreprocessor/utils/TitleBar.vue

@@ -0,0 +1,29 @@
+<script>
+export default {
+  props: {
+    style: Object,
+    titleData: Array
+  }
+}
+</script>
+
+<template>
+  <div>
+    <template v-for="(title, index) in titleData" :key="index" >
+      <div class='title-font title-range' :style="{left: style.width * index}">
+        {{ title }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+@import "./FontStyle.css";
+
+.title-range {
+  left: 0;
+  top: 0;
+  width: v-bind('style.width');
+  height: 20;
+}
+</style>

package/DemoHomepage/App.vue

@@ -1,27 +1,62 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2021-06-02 13:31:00
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-12 13:40:15
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-02-13 14:30:06
  * @Description: file content
 -->
-<script>
-import { router } from "./router";
-import { jJsvRuntimeBridge } from "jsview";
+<script setup>
+import { shallowRef, onMounted } from "vue";
+import { JsvPreload, buildPreloadInfo, jJsvRuntimeBridge } from "jsview";
+
+let backgroundImageUrl = shallowRef(null);
+
+let preloadInfo = shallowRef([]);
+
+let _onPreloadDone = () => {
+  console.log("background load done");
+  jJsvRuntimeBridge.notifyPageLoaded();
+};
+
+onMounted(() => {
+  console.log("simulate async get background url");
+  setTimeout(() => {
+    console.log("simulate background url got");
+    backgroundImageUrl.value =
+      "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg";
+    preloadInfo.value = [buildPreloadInfo(backgroundImageUrl.value)];
+  }, 0);
+});
+</script>
 
+<script>
+import { router } from "./router.js";
 export default {
   Router: router,
-  mounted() {
-    jJsvRuntimeBridge.notifyPageLoaded();
-  },
 };
 </script>
 
 <template>
   <div>
-    <router-view />
+    <jsv-preload
+      :key="backgroundImageUrl"
+      :preloadList="preloadInfo"
+      :onPreloadDone="_onPreloadDone"
+    />
+    <div
+      :style="{
+        width: 1280,
+        height: 720,
+        backgroundImage: backgroundImageUrl,
+      }"
+    />
+    <router-view v-slot="{ Component, route }">
+      <keep-alive>
+        <component v-if="route.meta.keepAlive" :is="Component" />
+      </keep-alive>
+      <component v-if="!route.meta.keepAlive" :is="Component" />
+    </router-view>
   </div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>

package/DemoHomepage/components/Dialog.vue

@@ -62,33 +62,33 @@ export default {
 
 <style scoped>
 .focus {
-  top: -5px;
-  left: -5px;
-  width: 100px;
-  height: 50px;
+  top: -5;
+  left: -5;
+  width: 100;
+  height: 50;
   background-color: #0000ff;
 }
 
 .normal {
-  width: 90px;
-  height: 40px;
+  width: 90;
+  height: 40;
   color: #ffffff;
   text-align: center;
-  font-size: 30px;
+  font-size: 30;
 }
 .background {
-  left: 0px;
-  top: 0px;
-  width: 350px;
-  height: 200px;
+  left: 0;
+  top: 0;
+  width: 350;
+  height: 200;
   background-color: rgba(0, 0, 0, 0.7);
 }
 .message {
-  top: 20px;
-  width: 350px;
-  height: 50px;
+  top: 20;
+  width: 350;
+  height: 50;
   color: #ffffff;
-  font-size: 40px;
+  font-size: 40;
   text-align: center;
 }
 </style>

package/DemoHomepage/router.js

@@ -7,12 +7,20 @@ const routeList = [
     name: 'Home',
     path: '/',
     component: () => import('./views/Homepage.vue'),
+    meta: {
+      keepAlive: true // 需要被缓存(测试Router keep alive机制)
+    }
   },
   {
     name: '基础示例合集',
     path: '/feature/Basic',
     component: () => import('jsview-vue-samples/Basic/App.vue'),
   },
+  {
+    name: 'CSS预处理',
+    path: '/feature/CssPreprocessor',
+    component: () => import('jsview-vue-samples/CssPreprocessor/App.vue'),
+  },
   {
     name: '可视化变化通知',
     path: '/feature/VisibleSensorDemo',
@@ -136,7 +144,7 @@ const routeList = [
   },
   {
     name: '公祭日黑白效果',
-    path: '/feature/FilterDemo',
+    path: '/feature/GrayDown',
     component: () => import('jsview-vue-samples/FilterDemo/App.vue'),
   },
   {
@@ -150,20 +158,20 @@ const routeList = [
     component: () => import('jsview-vue-samples/ScaleDownNeon/App.vue'),
   },
   {
-    name: '轮播图',
+    name: '碰撞检测',
+    path: '/feature/Collision',
+    component: () => import('jsview-vue-samples/Collision/App.vue'),
+  },
+  {
+    name: '碰撞即停',
+    path: '/feature/ImpactStop',
+    component: () => import('jsview-vue-samples/ImpactStop/App.vue'),
+  },
+  {
+    name: '滚动图',
     path: '/feature/Swiper',
     component: () => import('jsview-vue-samples/Swiper/App.vue'),
   },
-  // {
-  //   name: '碰撞检测',
-  //   path: '/feature/Collision',
-  //   component: () => import('jsview-vue-samples/Collision/App'),
-  // },
-  // {
-  //   name: '碰撞即停',
-  //   path: '/feature/ImpactStop',
-  //   component: () => import('jsview-vue-samples/ImpactStop/App'),
-  // },
 
   // MetroWidget示例
   {

package/DemoHomepage/views/Homepage.vue

@@ -1,10 +1,13 @@
-<script>
-import { jJsvRuntimeBridge, EdgeDirection } from "jsview";
+<script setup>
+import { computed, shallowRef, onActivated } from "vue";
+import { jJsvRuntimeBridge, EdgeDirection, useFocusHub } from "jsview";
 import TabFrame from "../components/TabFrame.vue";
 import BodyFrame from "../components/BodyFrame.vue";
 import Dialog from "../components/Dialog.vue";
 import { routeList } from "../router.js";
 
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
 const colorTemplete = ["#89BEB2", "#C9BA83", "#DED38C", "#DE9C53"];
 
 const featureData = [];
@@ -27,101 +30,88 @@ for (let item of routeList) {
 }
 const dataList = [featureData, metroWidgetData];
 
-export default {
-  components: {
-    TabFrame,
-    Dialog,
-    BodyFrame,
-  },
-  data() {
-    return {
-      showExitDialog: false,
-      contentData: dataList[0],
-      tabId: 0,
-      preFocusName: "",
-      curFocusName: "",
-      isDevelopment: process.env.NODE_ENV !== 'production',
-    };
-  },
-  setup() {
-    return {
-      name: "/home",
-    };
-  },
-  computed: {
-    address() {
-      return window.localStorage.href;
-    },
-  },
-  methods: {
-    onFocus() {
-      this.changeFocus(this.name + "/bodyFrame");
-    },
-    onKeyDown(ev) {
-      // 处理返回键
-      if (
-        ev.keyCode == 8 || // Backspace
-        ev.keyCode == 27 || // Escape
-        ev.keyCode == 10000 // 盒子返回键
-      ) {
-        this.showExitDialog = !this.showExitDialog;
-        if (!this.showExitDialog) {
-          this.changeFocus(this.preFocusName);
-        } else {
-          this.preFocusName = this.curFocusName;
-          this.curFocusName = this.name + "/exitDialog";
-        }
-      }
-      return true;
-    },
-    changeFocus(name) {
-      this.preFocusName = this.curFocusName;
-      this.curFocusName = name;
-      this.$refs.rootNode.findBlockByName(name).requestFocus();
-    },
-    onTabEdge(edgeInfo) {
-      if (edgeInfo.direction === EdgeDirection.bottom) {
-        this.changeFocus(this.name + "/bodyFrame");
-      }
-    },
-    onContentEdge(edgeInfo) {
-      if (edgeInfo.direction === EdgeDirection.top) {
-        this.changeFocus(this.name + "/tabFrame");
-      }
-    },
-    tabItemFocus(data) {
-      if (data.id != this.tabId) {
-        this.tabId = data.id;
-        this.contentData = dataList[this.tabId];
-      }
-    },
-    onDialogAction(msg) {
-      this.showExitDialog = false;
-      this.changeFocus(this.preFocusName);
-      switch (msg) {
-        case "ok":
-          jJsvRuntimeBridge.closePage();
-          // if (!window.JsView) {
-          //   // 浏览器调试
-          //   window.location.href = "about:blank";
-          // }
-          break;
-        case "back":
-        case "cancel":
-          break;
-      }
-    },
-  },
-  created() {
-    if (typeof localStorage.curTab !== "undefined") {
-      this.tabId = parseInt(localStorage.curTab);
+let showExitDialog = shallowRef(false);
+let contentData = shallowRef(dataList[0]);
+let tabId = shallowRef(0);
+
+let preFocusName = "";
+let curFocusName = "";
+let name = "/home";
+
+let focusHub = useFocusHub();
+
+let address = computed(() => {
+  return window.localStorage.href;
+});
+
+let onFocus = () => {
+  changeFocus(name + "/bodyFrame");
+};
+
+let onKeyDown = (ev) => {
+  // 处理返回键
+  if (
+    ev.keyCode == 8 || // Backspace
+    ev.keyCode == 27 || // Escape
+    ev.keyCode == 10000 // 盒子返回键
+  ) {
+    showExitDialog.value = !showExitDialog.value;
+    if (!showExitDialog.value) {
+      changeFocus(preFocusName);
+    } else {
+      preFocusName = curFocusName;
+      curFocusName = name + "/exitDialog";
     }
-    localStorage.curTab = 0;
-    this.contentData = dataList[this.tabId];
-  },
-  mounted() {},
-  beforeUnmount() {},
+  }
+  return true;
+};
+
+let changeFocus = (name) => {
+  preFocusName = curFocusName;
+  curFocusName = name;
+  focusHub.setFocus(name);
+};
+
+let onTabEdge = (edgeInfo) => {
+  if (edgeInfo.direction === EdgeDirection.bottom) {
+    changeFocus(name + "/bodyFrame");
+  }
+};
+
+let onContentEdge = (edgeInfo) => {
+  if (edgeInfo.direction === EdgeDirection.top) {
+    changeFocus(name + "/tabFrame");
+  }
+};
+
+let tabItemFocus = (data) => {
+  if (data.id != tabId.value) {
+    tabId.value = data.id;
+    contentData.value = dataList[data.id];
+  }
+};
+
+let onDialogAction = (msg) => {
+  showExitDialog.value = false;
+  changeFocus(preFocusName);
+  switch (msg) {
+    case "ok":
+      jJsvRuntimeBridge.closePage();
+      // if (!window.JsView) {
+      //   // 浏览器调试
+      //   window.location.href = "about:blank";
+      // }
+      break;
+    case "back":
+    case "cancel":
+      break;
+  }
 };
+
+// keep-alive后 router 返回本页面时要激活一下focus
+onActivated(() => {
+  onFocus();
+});
 </script>
 
 <template>
@@ -133,7 +123,6 @@ export default {
 
     <jsv-focus-block
       autoFocus
-      ref="rootNode"
       :onAction="{
         onKeyDown: onKeyDown,
         onFocus: onFocus,
@@ -173,24 +162,23 @@ export default {
 
 <style scoped>
 .rootSize {
-  width: 1280;
-  height: 720;
-  background-color: #334c4c;
+  width: 1920;
+  height: 1080;
 }
 
 .address {
   width: 1280;
   height: 30;
   color: #ffffff;
-  font-size: 20px;
+  font-size: 20;
 }
 
 .logo {
   top: 10;
-  width: 1250;
+  width: 1260;
   height: 30;
   color: #00ff00;
-  font-size: 20px;
+  font-size: 20;
   font-weight: bold;
   text-align: right;
 }

package/DivMetroPerformance/App.vue

@@ -0,0 +1,150 @@
+<script>
+import { Options, Vue } from "vue-class-component";
+import { data1, data2, data3 } from "./data";
+import GridPlate from "./utils/GridPlate.vue";
+import Item from "./components/ContentItem.vue";
+import MyTab from "./components/MyTab.vue";
+
+@Options({
+  components: {
+    GridPlate,
+    Item,
+    MyTab,
+  },
+})
+class App extends Vue {
+  constructor(props) {
+    super(props);
+    this.focusNode = null;
+    this.contentData = data1;
+    this.myId = 0;
+    this.focusStyle = {};
+    this.requestDataTime = 0;
+
+    window.sStyleChangeCount = 0;
+    window.sStyleChangeCost = 0;
+    window.sStyleTextChangeCost = 0;
+
+    window.sStylePropCount = 0;
+    window.sStylePropCost = 0;
+
+    console.log("App created");
+  }
+
+  onKeyDown(ev) {
+    // 8:Backspace, 27:Escape, 10000:盒子返回键
+    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+      return true;
+    }
+    return false;
+  }
+
+  getMeasures() {
+    return {
+      width: 227,
+      height: 351,
+      focusable: true,
+    };
+  }
+  onFocus() {
+    console.log("App onFocus", this.$refs.rootNode);
+  }
+  onItemFocus(id) {
+    if (this.requestDataTime != 0) {
+      clearTimeout(this.requestDataTime);
+      this.requestDataTime = 0;
+    }
+    // this.requestDataTime = setTimeout(()=>{
+    if (!window.JsvDebugTimeToken) {
+      window.JsvDebugTimeToken = {
+        start: 0,
+      };
+    }
+    window.JsvDebugTimeToken.start = Date.now();
+    console.log(
+      "JsvTestTime onItemFocus start time=" + window.JsvDebugTimeToken.start
+    );
+
+    window.sStyleChangeCount = 0;
+    window.sStyleChangeCost = 0;
+    window.sStyleTextChangeCost = 0;
+    window.sStylePropCount = 0;
+    window.sStylePropCost = 0;
+
+    switch (id) {
+      case 0:
+        this.contentData = data1;
+        break;
+      case 1:
+        this.contentData = data2;
+        break;
+      case 2:
+        this.contentData = data3;
+        break;
+    }
+    this.myId = id;
+    // }, 0);
+  }
+
+  beforeUnmount() {
+    if (this.requestDataTime != 0) {
+      clearTimeout(this.requestDataTime);
+      this.requestDataTime = 0;
+    }
+  }
+
+  mounted() {
+    this.$refs.rootNode.findBlockByName("tab").requestFocus();
+    window.jJsvRuntimeBridge?.notifyPageLoaded();
+  }
+}
+
+export default App;
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="rootNode"
+    autoFocus
+    :onKeyDown="onKeyDown"
+    :onFocus="onFocus"
+  >
+    <div class="rootSize">
+      <div :style="{ left: 50, top: 50 }">
+        <my-tab name="tab" :onItemFocus="onItemFocus" />
+      </div>
+
+      <div class="widgetPos">
+        <grid-plate
+          name="simpleWidget"
+          :key="myId"
+          :data="contentData"
+          :width="1253"
+          :height="600"
+          :measures="getMeasures"
+        >
+          <template #renderItem="{ data }">
+            <Item :data="data" />
+          </template>
+        </grid-plate>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+.rootSize {
+  top: 0;
+}
+
+.widgetPos {
+  top: 120;
+  left: 50;
+}
+
+.focusPos {
+  top: 10;
+  left: 10;
+}
+</style>