@shijiu/jsview-vue 0.0.1-beta.0

package/samples/BasicFocusControl/components/MainAreaLeftBlock.vue

@@ -0,0 +1,21 @@
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+import BaseBlock from "./BaseBlock.vue"
+
+@Options({
+  props: {
+    name: String,
+    style: { type:Object, default: {}}
+  },
+  components: {
+    BaseBlock
+  }
+})
+export default
+class MainAreaLeftBlock extends Vue {
+}
+</script>
+
+<template>
+<BaseBlock :name="$props.name" :style="$props.style"/>
+</template>

package/samples/BasicFocusControl/components/MainAreaRightBlock.vue

@@ -0,0 +1,30 @@
+<script lang="ts">
+import { JsvFocusEvent } from "jsview/utils/JsViewEngineWidget";
+import { Options, Vue } from "vue-class-component";
+import BaseBlock from "./BaseBlock.vue"
+
+@Options({
+  props: {
+    name: String,
+    style: { type:Object, default: {}},
+  },
+  components: {
+    BaseBlock
+  }
+})
+export default
+class MainAreaRightBlock extends Vue {
+  onKeyDown(ev: JsvFocusEvent) {
+    if (ev.keyCode === 39) { // Right key
+      (this.$root as any).changeFocusInDemoSpace('sideBarR0C0');
+      return true;
+    }
+    return false;
+  }
+}
+</script>
+
+<template>
+<BaseBlock :name="$props.name" :style="$props.style"
+    :onKeyDown="onKeyDown"/>
+</template>

package/samples/BasicFocusControl/components/SideBar.vue

@@ -0,0 +1,73 @@
+<script lang="ts">
+import { JsvFocusEvent } from "jsview/utils/JsViewEngineWidget";
+import { Options, Vue } from "vue-class-component";
+// import { globalStore } from "../GlobalStore"
+import SideBarBlock from "./SideBarBlock.vue"
+
+@Options({
+  components: {
+    SideBarBlock,
+  }
+})
+export default
+class SideBar extends Vue {
+  constructor(props: object) {
+    super(props);
+  }
+
+  private onKeyDown(ev: JsvFocusEvent) {
+    // console.warn("xxxx", globalStore.focusBaseName)
+    // 子节点未处理的按键事件会流向此节点
+    let keyUsed = true;
+    switch (ev.keyCode) {
+      case 38: // Up
+        this.focusRow = 0;
+        break;
+      case 40: // Down
+        this.focusRow = 1;
+        break;
+      default:
+        keyUsed = false;
+    }
+
+    if (keyUsed) {
+      // 焦点与之前相同时也可以重复调用，焦点管理系统内容有是否变更的判断处理
+      const name = `sideBarR${this.focusRow}C0`;
+      ev.ownerNode.findBlockByName(name)?.requestFocus();
+    }
+
+    return keyUsed;
+  }
+
+  private focusRow: number = 0;
+}
+</script>
+
+<template>
+<div>
+  <!--jsv-focus-block是非可描画节点，所以如果想接收style等属性，不要放在顶级-->
+  <jsv-focus-block :onKeyDown="onKeyDown">
+    <SideBarBlock name="sideBarR0C0" :style="{ left: 0, top: 0 }" />
+    <SideBarBlock name="sideBarR1C0" :style="{ left: 0, top: 120 }" />
+  </jsv-focus-block>
+</div>
+</template>
+
+<style scoped>
+.title {
+  text-align: center;
+  font-size: 30px;
+  line-height: 50px;
+  color: #ffffff;
+  left: 100;
+  top: 50;
+  width: 400;
+  height: 50;
+  background-color: rgba(27,38,151,0.8);
+}
+
+.body {
+  left: 100;
+  top: 120;
+}
+</style>

package/samples/BasicFocusControl/components/SideBarBlock.vue

@@ -0,0 +1,30 @@
+<script lang="ts">
+import { JsvFocusEvent } from "jsview/utils/JsViewEngineWidget";
+import { Options, Vue } from "vue-class-component";
+import BaseBlock from "./BaseBlock.vue"
+
+@Options({
+  props: {
+    name: String,
+    style: { type:Object, default: {}},
+  },
+  components: {
+    BaseBlock
+  }
+})
+export default
+class SideBarBlock extends Vue {
+  onKeyDown(ev: JsvFocusEvent) {
+    if (ev.keyCode === 37) { // Left key
+      (this.$root as any).changeFocusInDemoSpace('main');
+      return true;
+    }
+    return false;
+  }
+}
+</script>
+
+<template>
+<BaseBlock :name="$props.name" :style="$props.style"
+    :onKeyDown="onKeyDown"/>
+</template>

package/samples/ClassNameDemo/App.vue

@@ -0,0 +1,119 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-06-02 13:31:00
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-15 10:12:22
+ * @Description: file content
+-->
+<script>
+import { Options, Vue } from "vue-class-component";
+import { data } from "./data";
+import {
+  FDivRoot,
+  FDivRouter,
+  VERTICAL,
+  MetroPage,
+} from "jsview/utils/JsViewEngineWidget";
+import TitleView from "./components/TitleView";
+import ContentItem from "./components/ContentItem";
+import LoadingView from "./components/LoadingView";
+
+@Options({
+  components: {
+    FDivRoot,
+    FDivRouter,
+    MetroPage,
+    TitleView,
+    ContentItem,
+    LoadingView,
+  },
+})
+class App extends Vue {
+  constructor(props) {
+    super(props);
+
+    this.data = data;
+    this.direction = VERTICAL;
+    this.focusNode = null;
+  }
+
+  // Override
+  mounted() {
+    if (this.focusNode) {
+      this.focusNode.ChangeFocus("metroTest");
+    } else {
+      console.error("root foucs node is null.");
+    }
+  }
+
+  updateFocusNode(focusNode) {
+    console.log("app update focus node ", focusNode);
+    this.focusNode = focusNode;
+  }
+
+  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,
+      hasSub: false,
+    };
+  }
+
+  onItemFocus(dataItem, onEdge, query, viewObj) {
+    console.log("onItemFocus ", dataItem);
+    if (viewObj.view) {
+      viewObj.view.focus();
+    }
+  }
+
+  onItemBlur(dataItem, query, viewObj) {
+    if (viewObj.view) {
+      viewObj.view.blur();
+    }
+  }
+}
+
+export default App;
+</script>
+
+<template>
+  <div :style="{ width: 1920, height: 1080, backgroundColor: '#00000F' }">
+    <TitleView :style="{ top: 20, left: 100 }" />
+    <jsv-focus-block ref="focusNode" :onKeyDown="onKeyDown">
+      <div :style="{ top: 100, left: 70 }">
+        <MetroPage
+          branchName="metroTest"
+          :data="data"
+          :width="1253"
+          :height="600"
+          :padding="{ left: 26, top: 36, right: 26, bottom: 36 }"
+          :direction="direction"
+          :measures="getMeasures"
+          :onItemFocus="onItemFocus"
+          :onItemBlur="onItemBlur"
+          :loadViewSize="{ width: 500, height: 50 }"
+        >
+          <template #renderItem="{ data, refObj }">
+            <ContentItem :data="data" :ref="(ele) => (refObj.view = ele)" />
+          </template>
+          <template #loadingView>
+            <LoadingView />
+          </template>
+        </MetroPage>
+      </div>
+    </jsv-focus-block>
+  </div>
+</template>
+
+<style scoped>
+</style>

package/samples/ClassNameDemo/components/ContentItem.vue

@@ -0,0 +1,253 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-06-10 14:17:17
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-06-28 16:53:49
+ * @Description: file content
+-->
+<script>
+import { Options, Vue, setup } from "vue-class-component";
+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";
+
+@Options({
+  props: {
+    data: Object
+  },
+})
+
+
+class ContentItem extends Vue {
+  constructor(props) {
+    super(props);
+
+    this.focused = false;
+    this.setup = setup(() => {
+      return {
+        posterHolder,
+        couponLeft,
+        couponMid,
+        couponRight,
+        borderLeft,
+        borderMid,
+        borderRight,
+      };
+    });
+  }
+
+  focus() {
+    this.focused = true;
+  }
+
+  blur() {
+    this.focused = false;
+  }
+
+  get focusTransform() {
+    return this.focused ? "scale3d(1.2, 1.2, 1)" : null;
+  }
+
+  get savePrizeWidth() {
+    return 10 * this.data.savePrize.length + 26;
+  }
+
+  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;
+  }
+
+  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;
+</script>
+
+<template>
+  <div class="frame-background"
+      :style="{
+        transform: focusTransform,
+      }"
+  >
+    <div class="poster-holder">
+      <div
+        :style="{
+          width: 107,
+          height: 23,
+          left: 53,
+          top: 95,
+          backgroundImage: setup.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: setup.couponLeft }" />
+      <div
+        :style="{
+          left: 5,
+          width: savePrizeWidth - 11,
+          height: 24,
+          backgroundImage: setup.couponMid,
+        }"
+      />
+      <div
+        :style="{
+          left: savePrizeWidth - 6,
+          width: 5,
+          height: 24,
+          backgroundImage: setup.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: setup.borderLeft }" />
+      <div
+        :style="{
+          left: 7,
+          width: soldTotalWidth - 13,
+          height: 25,
+          backgroundImage: setup.borderMid,
+        }"
+      />
+      <div
+        :style="{
+          left: soldTotalWidth - 7,
+          width: 7,
+          height: 25,
+          backgroundImage: setup.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/ClassNameDemo/components/LoadingView.vue

@@ -0,0 +1,43 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-06-15 18:29:33
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-06-22 19:31:25
+ * @Description: file content
+-->
+<template>
+  <div>
+    <div class="text">
+      加载中
+    </div>
+    <div class="anim"/>
+  </div>
+</template>
+
+<style scoped>
+.text {
+  width: 1160;
+  height: 50px;
+  text-align: center;
+  background-color: rgba(255,0,0,0.5);
+  font-size: 40px;
+}
+
+.anim {
+  top: 10;
+  left: 500;
+  width: 30;
+  height: 30;
+  background-color: #FFFFFF;
+  animation: myRotate 1s infinite;
+}
+
+@keyframes myRotate {
+  from {
+    transform: rotate3d(0, 0, 1, 0);
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+</style>

package/samples/ClassNameDemo/components/TitleView.vue

@@ -0,0 +1,24 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-06-15 18:29:33
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-06-22 19:31:25
+ * @Description: file content
+-->
+<template>
+<div class="text">
+  使用ClassName写法可提升渲染性能
+</div>
+</template>
+
+<style scoped>
+.text {
+  width: 1080;
+  height: 50;
+  text-align: center;
+  font-size: 30px;
+  line-height: 50px;
+  color: #ffffff;
+  background-color: rgba(27,38,151,0.8);
+}
+</style>

package/samples/ClassNameDemo/data.js

@@ -0,0 +1,24 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-06-08 13:32:38
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-06-22 19:33:26
+ * @Description: file content
+ */
+let data = [];
+
+// 添加300个模拟数据
+for (let i = 0; i < 183; i++) {
+  data.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 { data };