@shijiu/jsview-vue-samples 1.9.747

package/GridDemo/ButtonBlock.vue

@@ -0,0 +1,112 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-05-10 15:21:24
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 11:51:26
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef } from "vue";
+const props = defineProps({
+  userData: Object,
+  name: String,
+});
+
+let focusIndex = ref(0);
+let focused = ref(false);
+let divNumber = new Array(25);
+let focusBlock = shallowRef(null);
+
+const _onFocus = () => {
+  console.log("button onfocus", props.userData);
+  focused.value = true;
+};
+const _onBlur = () => {
+  focused.value = false;
+  focusIndex.value = 0;
+};
+const _onKeyDown = (ev) => {
+  console.log("button onkeydown");
+  if (ev.keyCode == 37 && focusIndex.value == 1) {
+    focusIndex.value = 0;
+    return true;
+  } else if (ev.keyCode == 39 && focusIndex.value == 0) {
+    focusIndex.value = 1;
+    return true;
+  } else if (ev.keyCode == 13) {
+    console.log("button click", props.userData);
+    return true;
+  }
+  return false;
+};
+const getFocusBlock = () => {
+  return focusBlock.value;
+};
+const _MapColor = (color_num) => {
+  return color_num < 10 || color_num >= 100
+    ? "0" + (color_num % 10)
+    : "" + (color_num % 100);
+};
+
+defineExpose({
+  getFocusBlock,
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="focusBlock"
+    :name="name"
+    :onAction="{
+      onFocus: _onFocus,
+      onBlur: _onBlur,
+      onKeyDown: _onKeyDown,
+    }"
+  >
+    <div
+      v-for="(item, index) in divNumber"
+      :key="index + '_l'"
+      :style="{
+        left: 2 * index,
+        width: 2,
+        height: 50,
+        backgroundColor: '#77' + _MapColor(index) + _MapColor(index),
+      }"
+    ></div>
+    <div
+      :style="{
+        width: 50,
+        height: 50,
+        fontSize: 20,
+        color: '#FFFFFF',
+      }"
+    >
+      {{ userData.name }}
+    </div>
+
+    <div
+      v-for="(item, index) in divNumber"
+      :key="index + '_r'"
+      :style="{
+        left: 2 * index + 50,
+        width: 2,
+        height: 50,
+        backgroundColor:
+          '#' +
+          _MapColor(userData.baseColor) +
+          _MapColor(index) +
+          _MapColor(index),
+      }"
+    ></div>
+
+    <div
+      :style="{
+        visibility: this.focused ? 'visible' : 'hidden',
+        left: 50 * focusIndex,
+        width: 10,
+        height: 10,
+        backgroundColor: '#FF0000',
+      }"
+    ></div>
+  </jsv-focus-block>
+</template>

package/GridDemo/FocusItem.vue

@@ -0,0 +1,37 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-05-10 15:21:24
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 11:50:58
+ * @Description: file content
+-->
+<script setup>
+import ButtonBlock from "./ButtonBlock.vue";
+import { ref, shallowRef } from "vue";
+
+const props = defineProps({
+  userData: Object,
+  widgetData: Object,
+  onAction: Object,
+});
+const focused = ref(false);
+const divNumber = new Array(50);
+const button = shallowRef(null);
+const onFocus = () => {
+  button.value
+    .getFocusBlock()
+    .findBlockByName(props.widgetData.gridIndex + "_item")
+    .requestFocus();
+};
+const onBlur = () => {};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+</script>
+
+<template>
+  <button-block
+    ref="button"
+    :name="widgetData.gridIndex + '_item'"
+    :userData="userData"
+  ></button-block>
+</template>

package/GridDemo/Item.vue

@@ -0,0 +1,93 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-05-10 15:21:24
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 11:48:32
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef, onUpdated, onMounted } from "vue";
+
+const props = defineProps({
+  userData: Object,
+  widgetData: Object,
+  onAction: Object,
+});
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+const focused = ref(false);
+const divNumber = new Array(50);
+const blurAction = false;
+
+const onFocus = () => {
+  console.log("item onfocus", props.userData);
+  focused.value = true;
+};
+const onBlur = () => {
+  console.log(
+    "item onblur",
+    props.userData,
+    props.widgetData.getCurrentFocusId(),
+    props.widgetData.dataIndex
+  );
+  focused.value = false;
+};
+const onClick = () => {
+  console.log("item onclick ", props.userData);
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+
+onUpdated(() => {
+  console.log("item updated", props.userData, props.widgetData);
+});
+onMounted(() => {
+  console.log("item mounted", props.userData, props.widgetData);
+});
+</script>
+
+<template>
+  <div
+    v-for="(item, index) in divNumber"
+    :key="index"
+    :style="{
+      left: 2 * index,
+      width: 2,
+      height: 50,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+  <div
+    :style="{
+      width: 100,
+      height: 50,
+      fontSize: '30px',
+      color: '#FFFFFF',
+    }"
+  >
+    {{ userData.content }}
+  </div>
+  <div
+    :style="{
+      visibility: focused ? 'visible' : 'hidden',
+      width: 20,
+      height: 20,
+      backgroundColor: '#FF0000',
+    }"
+  ></div>
+  <div
+    :style="{
+      visibility: !focused && widgetData.selected ? 'visible' : 'hidden',
+      left: 50,
+      width: 20,
+      height: 20,
+      backgroundColor: '#00FF00',
+    }"
+  ></div>
+</template>

package/HashHistory/App.vue

@@ -0,0 +1,115 @@
+<script>
+import { router, routeList } from "./router.js";
+export default {
+  Router: router,
+};
+</script>
+
+<script setup>
+import { jJsvRuntimeBridge } from "jsview";
+import { router, routeList } from "./router.js";
+import { useRouter, useRoute } from "vue-router";
+import { onMounted, ref, shallowRef } from "vue";
+
+const props = defineProps({
+  routePath: String,
+});
+
+const displayUrl = ref("");
+let topRef = shallowRef(null);
+let routePage = shallowRef(null);
+let currentRouter;
+if (props.routePath) {
+  const currentRoute = useRoute();
+  currentRouter = useRouter();
+
+  let redirectPath; // 自动跳转路径
+  for (const route of routeList) {
+    if (route.path === "/") {
+      // 不需要添加home
+      redirectPath = route.redirect;
+      continue;
+    }
+
+    const subRoute = { ...route, path: route.path.substring(1) }; // 去掉字符'/'
+    currentRouter.addRoute(currentRoute.name, subRoute);
+  }
+
+  currentRouter.replace(props.routePath + redirectPath); // 自动跳转到redirectPath
+} else {
+  currentRouter = router;
+}
+currentRouter.afterEach(() => {
+  displayUrl.value = window.location.href;
+});
+
+const onRequestFocus = (branchName) => {
+  topRef.value.findBlockByname(branchName)?.requestFocus();
+};
+
+const watchRouterChanged = (route) => {
+  route.afterEach(() => {
+    displayUrl.value = window.location.href;
+  });
+};
+
+const onKeyDown = (event) => {
+  return routePage.value.onKeyDown(event);
+};
+
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
+</script>
+
+<template>
+  <div class="root">
+    <div class="address">当前URL: {{ displayUrl }}</div>
+    <div class="split"></div>
+    <jsv-focus-block ref="topRef">
+      <!-- 这种router-view的写法可以获取到component的ref，vue标准写法 -->
+      <router-view v-slot="{ Component }">
+        <component
+          :is="Component"
+          ref="routePage"
+          class="router"
+          @requestFocus="onRequestFocus"
+        />
+      </router-view>
+    </jsv-focus-block>
+  </div>
+</template>
+
+<style scoped>
+.root {
+  left: 0;
+  top: 0;
+  width: 1280;
+  height: 1080;
+  background-color: rgb(222, 211, 140);
+}
+
+.address {
+  left: 40;
+  top: 40;
+  width: 1200;
+  height: 200;
+  font-size: 20;
+}
+
+.split {
+  left: 40;
+  top: 150;
+  width: 1200;
+  height: 3;
+  background-color: #00f000;
+}
+
+.router {
+  left: 0;
+  top: 150;
+  width: 1920;
+  height: 930;
+  overflow: hidden;
+}
+</style>

package/HashHistory/components/HorizontalButtonList.vue

@@ -0,0 +1,91 @@
+<script setup>
+import Item from "./Item.vue";
+
+const props = defineProps({
+  style: Object,
+  buttonConfig: Object,
+  onButtonClick: Function,
+  onBack: Function,
+});
+const maxWidth = 1280;
+const listPadding = 10;
+const buttonWidth = 400;
+const buttonHeight = 80;
+const buttonGap = 50;
+let focusedItemIndex = 0;
+
+let listLeft = 0;
+const listWidth = (buttonWidth + buttonGap) * props.buttonConfig.length;
+
+// 根据maxWidth，计算buttons的左边位置
+const widthCenter = listWidth - buttonGap; // 减去最后一个元素的gap
+if (widthCenter < maxWidth) {
+  listLeft = Math.floor((maxWidth - widthCenter) / 2);
+}
+
+const listSize = {
+  left: listLeft,
+  width: listWidth,
+  height: buttonHeight,
+};
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode === 13) {
+    // Enter
+    props.onButtonClick?.(focusedItemIndex);
+    return true;
+  } else if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    // 8:Backspace, 27:Escape, 10000:盒子返回键
+    props.onBack?.();
+    return true;
+  }
+
+  let changeFocusTo = -1;
+  switch (ev.keyCode) {
+    case 37: // Left
+      changeFocusTo =
+        (focusedItemIndex - 1 + props.buttonConfig.length) %
+        props.buttonConfig.length;
+      break;
+    case 39: // Right
+      changeFocusTo = (focusedItemIndex + 1) % props.buttonConfig.length;
+      break;
+    default:
+      break;
+  }
+  if (changeFocusTo >= 0) {
+    ev.ownerNode.findBlockByName(changeFocusTo.toString()).requestFocus();
+    focusedItemIndex = changeFocusTo;
+    return true;
+  }
+
+  return false;
+};
+</script>
+
+<template>
+  <div :style="style">
+    <jsv-focus-block
+      :style="{
+        left: listSize.left,
+        width: listSize.width + listPadding * 2,
+        height: listSize.height + listPadding * 2,
+      }"
+      :onKeyDown="onKeyDown"
+    >
+      <Item
+        v-for="(item, index) in buttonConfig"
+        :key="index"
+        :style="{
+          left: (buttonWidth + 10) * index,
+          width: buttonWidth,
+          height: buttonHeight,
+        }"
+        :name="index.toString()"
+        :autoFocus="index === 0"
+      >
+        {{ item.name }}
+      </Item>
+    </jsv-focus-block>
+  </div>
+</template>

package/HashHistory/components/Item.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { ref, shallowRef } from "vue";
+const props = defineProps({
+  style: Object,
+  name: String,
+  autoFocus: Boolean,
+});
+
+const hasFocused = ref(false);
+const onFocus = () => {
+  hasFocused.value = true;
+};
+
+const onBlur = () => {
+  hasFocused.value = false;
+};
+
+const focusStyle = {
+  width: props.style.width + 10,
+  height: props.style.height + 10,
+};
+
+const itemStyle = {
+  width: props.style.width,
+  height: props.style.height,
+  backgroundColor: "#0FF000",
+  lineHeight: props.style.height,
+  fontSize: `${Math.floor(props.style.height * 0.55)}px`,
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="name"
+    :autoFocus="autoFocus ? '' : undefined"
+    :onFocus="onFocus"
+    :onBlur="onBlur"
+  >
+    <div :style="style">
+      <div class="focus" :style="focusStyle" v-if="hasFocused"></div>
+      <div class="item" :style="itemStyle">
+        <slot></slot>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+.focus {
+  top: -5;
+  left: -5;
+  background-color: #0000ff;
+}
+.item {
+  text-align: center;
+  font-size: 30;
+  color: #000000;
+  white-space: nowrap;
+}
+</style>

package/HashHistory/router.js

@@ -0,0 +1,41 @@
+import { createRouter } from "vue-router";
+import { jsvCreateHashHistory } from "jsview";
+
+const routeList = [
+  // 功能实例
+  {
+    name: "Home",
+    path: "/",
+    redirect: "/__MainJsvApp/MainPage",
+  },
+  {
+    name: "MainPage",
+    path: "/__MainJsvApp/MainPage",
+    component: () => import("./views/MainPage.vue"),
+  },
+  {
+    name: "SubPageFirst",
+    path: "/__MainJsvApp/SubPageFirst",
+    component: () => import("./views/SubPage.vue"),
+    props: {
+      name: "First",
+      jumpTo: "Second",
+    },
+  },
+  {
+    name: "SubPageSecond",
+    path: "/__MainJsvApp/SubPageSecond",
+    component: () => import("./views/SubPage.vue"),
+    props: {
+      name: "Second",
+      jumpTo: "First",
+    },
+  },
+];
+
+const router = createRouter({
+  history: jsvCreateHashHistory(),
+  routes: routeList,
+});
+
+export { router, routeList };

package/HashHistory/views/MainPage.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { useRouter } from "vue-router";
+import HorizontalButtonList from "../components/HorizontalButtonList.vue";
+
+const branchName = "./MainPage.ButtonList";
+const router = useRouter();
+
+const buttonListConfig = [
+  {
+    name: "启动子界面-First",
+    route: {
+      path: "SubPageFirst",
+      query: { from: "main" },
+    },
+  },
+  {
+    name: "启动子界面-Second",
+    route: {
+      path: "SubPageSecond",
+      query: { from: "main" },
+    },
+  },
+];
+
+const onButtonClick = (idx) => {
+  const config = buttonListConfig[idx];
+  console.log("Jump page to: " + config.name);
+  router.push(config.route);
+};
+
+const onBack = () => {
+  router.go(-1);
+};
+</script>
+
+<template>
+  <div>
+    <div class="title">这是主界面</div>
+    <HorizontalButtonList
+      :style="{ top: 330 }"
+      :buttonConfig="buttonListConfig"
+      :onButtonClick="onButtonClick"
+      :onBack="onBack"
+    />
+  </div>
+</template>
+
+<style scoped>
+.title {
+  top: 100;
+  width: 1280;
+  height: 100;
+  line-height: 100px;
+  text-align: center;
+  font-size: 55;
+}
+</style>

package/HashHistory/views/SubPage.vue

@@ -0,0 +1,66 @@
+<script setup>
+import HorizontalButtonList from "../components/HorizontalButtonList.vue";
+import { useRouter } from "vue-router";
+import { computed } from "vue";
+const props = defineProps({
+  name: String,
+  jumpTo: String,
+});
+
+console.log("cchtest subpage", props.name, props.jumpTo);
+const router = useRouter();
+const buttonListConfig = computed(() => {
+  return [
+    {
+      name: "跳转子界面-" + props.jumpTo,
+      route: {
+        path: "SubPage" + props.jumpTo,
+        query: { from: "sub" + props.name },
+      },
+    },
+  ];
+});
+
+const onButtonClick = (idx) => {
+  const config = buttonListConfig.value[idx];
+  console.log("Jump page to: " + config.name, props);
+  router.push(config.route);
+};
+
+const onBack = () => {
+  router.go(-1);
+};
+</script>
+
+<template>
+  <div>
+    <div class="title">这是子界面{{ name }}</div>
+    <HorizontalButtonList
+      :style="{ top: 230 }"
+      :buttonConfig="buttonListConfig"
+      :onButtonClick="onButtonClick"
+      :onBack="onBack"
+    />
+    <div class="tip">按返回键返回前一页</div>
+  </div>
+</template>
+
+<style scoped>
+.title {
+  top: 100;
+  width: 1280;
+  height: 100;
+  line-height: 100px;
+  text-align: center;
+  font-size: 55;
+}
+
+.tip {
+  top: 330;
+  width: 1280;
+  height: 100;
+  line-height: 100px;
+  text-align: center;
+  font-size: 30;
+}
+</style>