@shijiu/jsview-vue-samples 2.3.0 → 2.3.728-alpha.0

package/MetroWidgetDemos/RefreshDemo/App.vue

@@ -135,6 +135,19 @@ const controlList = [
       widgetRef.value.refreshData();
     },
   },
+  {
+    name: "删除",
+    callback: () => {
+      if (curData.length - 1 >= 0) {
+        // const data = [];
+        // prepareData(data, 200, 200, 0, curData.length - 1);
+        // curData = data;
+        curData.splice(3, 1);
+        widgetRef.value.tmpDisableRenderBreak();
+        widgetRef.value.refreshData();
+      }
+    },
+  },
 ];
 const controlWidgetMeasure = (data) => {
   return {
@@ -172,8 +185,8 @@ const controlOnEdge = (edgeInfo) => {
     :provideData="provideData"
     :measures="measures"
     :padding="{ left: 50, right: 50, top: 50, bottom: 50 }"
-    :enableItemRenderBreak="true"
     :onEdge="onEdge"
+    :enableItemRenderBreak="true"
     :placeHolderSetting="{
       backgroundColor: 'rgba(78,105,127, 0.8)',
       focusBackgroundColor: '#770088aa',

package/MetroWidgetDemos/RenderAccelerate/App.vue

@@ -0,0 +1,142 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-12-21 15:36:29
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-05-04 
+ * @Description: file content
+-->
+<script setup>
+import ViewSwiper from "./ViewSwiper.vue";
+import AppTab from "./AppTab.vue";
+import { reactive, provide, shallowRef } from "vue";
+import { EdgeDirection, useFocusHub } from "jsview";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const pageList = [];
+const tabData = [];
+
+const focusHub = useFocusHub();
+
+const rRenderAcc = shallowRef(true);
+const rRenderAccChangeCnt = shallowRef(0);
+
+provide("rRenderAccConfig", rRenderAcc);
+
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+
+for (let i = 0; i < 10; ++i) {
+  tabData.push({
+    width: 150,
+    height: 50,
+    marginRight: 10,
+    content: i == 0 ? "首屏不动" : "Tab_" + i,
+    color: randomColor(),
+  });
+  const pageData = [];
+  for (let j = 0; j < 10; ++j) {
+    pageData.push({
+      width: 900,
+      height: 130,
+      name: "testPage_" + i + "-" + "widget_" + j,
+      marginBottom: 10,
+      index: j,
+    });
+  }
+  pageList.push({
+    width: 1000,
+    height: 600,
+    data: pageData,
+    name: "testPage-" + i,
+    tabIndex: i,
+  });
+}
+let globalInfo = reactive({
+  tabId: 0,
+});
+let focusNode = shallowRef(null)
+const appPageName = "/page";
+const appTabName = "/tab";
+const curFocusName = shallowRef("/tab");
+provide("globalInfo", globalInfo)
+
+const $_app_onFocus = () => {
+  console.log("App onFocus");
+  focusHub.setFocus(curFocusName.value);
+}
+
+const onDispatchKeyDown = (ev) => {
+  if (ev.keyCode == 13) {
+    rRenderAccChangeCnt.value++;
+    rRenderAcc.value = !rRenderAcc.value;
+    return true;
+  }
+  return false;
+}
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1);
+  }
+  return true;
+}
+
+const $_app_pageOnEdge = (info) => {
+  console.log("App page on edge ", info);
+  if (info.direction === EdgeDirection.top) {
+    curFocusName.value = "/tab";
+    focusHub.setFocus(appTabName);
+  }
+}
+
+const $_app_tabOnEdge = (info) => {
+  console.log("App tab on edge ", info);
+  if (info.direction === EdgeDirection.bottom) {
+    curFocusName.value = "/page";
+    focusHub.setFocus(appPageName);
+  }
+}
+</script>
+
+<template>
+  <jsv-focus-block ref="focusNode" name="/main" autoFocus :onAction="{
+    onKeyDown: onKeyDown,
+    onDispatchKeyDown: onDispatchKeyDown,
+    onFocus: $_app_onFocus,
+  }" 
+    :key="rRenderAccChangeCnt /* 切换加速模式时，重新渲染 */"
+
+    :style="{
+    width: 1280,
+    height: 720,
+    backgroundColor: '#007788',
+  }">
+    <div :style="{
+      top: 3,
+      left: 200,
+      fontSize: 20,
+      color: '#FFFFFF',
+    }">
+      {{ `按OK键切换加速模式:${rRenderAcc ? '开启' : '关闭'}` }}
+    </div>
+    <div :style="{
+        top: 0,
+        left: 100,
+      }">
+      <app-tab :data="tabData" :name="appTabName" :layout="{ width: 600, 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: 1100,
+          height: 600,
+        }"></view-swiper>
+    </div>
+  </jsv-focus-block>
+</template>

package/MetroWidgetDemos/RenderAccelerate/AppPage.vue

@@ -0,0 +1,78 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-12 10:45:38
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-05-04 
+ * @Description: file content
+-->
+<script setup>
+import {
+  VERTICAL,
+  MetroWidget,
+  METRO_WIDGET_CONST,
+  SeamlessSlide,
+} from "jsview";
+import WidgetItem from "./WidgetItem.vue";
+import { shallowRef, watch, onBeforeUnmount } from "vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    require: true,
+  },
+  name: {
+    type: String,
+    require: true,
+  },
+  onEdge: {
+    type: Function,
+  },
+});
+
+const widgetRef = shallowRef(null);
+
+const provideData = () => {
+  return props.data.data;
+};
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    itemSlide: METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT,
+  };
+};
+
+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"
+    :keepTraceRange="0.3"
+  >
+    <template #renderItem="{ data, query, onItemEdge, onAction }">
+      <widget-item
+        :data="data"
+        :query="query"
+        :onItemEdge="onItemEdge"
+        :onAction="onAction"
+      ></widget-item>
+    </template>
+  </metro-widget>
+</template>

package/MetroWidgetDemos/RenderAccelerate/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/MetroWidgetDemos/RenderAccelerate/ContentItem.vue

@@ -0,0 +1,409 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-06-10 14:17:17
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-11 18:20:58
+ * @Description: file content
+-->
+<script setup>
+import posterHolder from "../PerformanceTest/assets/holder_logo.png";
+import couponLeft from "../PerformanceTest/assets/coupon_left.png";
+import couponRight from "../PerformanceTest/assets/coupon_right.png";
+import couponMid from "../PerformanceTest/assets/coupon_mid.png";
+import borderLeft from "../PerformanceTest/assets/line_left.png";
+import borderMid from "../PerformanceTest/assets/line_mid.png";
+import borderRight from "../PerformanceTest/assets/line_right.png";
+import { ref, computed } from "vue";
+import RotateFrame from "../../TextureAnimation/utils/RotateFrame.vue";
+import img from "../../TextureAnimation/assets/blackWhiteTurntable.png";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+});
+
+const focused = ref(false);
+const onFocus = () => {
+  focused.value = true;
+};
+
+const onBlur = () => {
+  focused.value = false;
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+
+const focusTransform = computed(() => {
+  return focused.value ? "scale3d(1.2, 1.2, 1)" : null;
+});
+
+const savePrizeWidth = computed(() => {
+  return 10 * props.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;
+});
+
+const soldTotalText = computed(() => {
+  let text = "";
+  if (props.data.soldTotal >= 10000) {
+    text = parseInt(props.data.soldTotal / 10000) + "万";
+  } else {
+    text = props.data.soldTotal;
+  }
+  return text;
+});
+</script>
+
+<template>
+  <div
+    class="frame-background"
+    :style="{
+      transform: focusTransform,
+    }"
+  >
+    <div class="poster-holder">
+      <div
+        :style="{
+          width: 100,
+          height: 23,
+          left: 0,
+          top: 40,
+          backgroundImage: posterHolder,
+        }"
+      />
+    </div>
+    <div
+      :style="{
+        width: 100,
+        height: 100,
+        overflow: 'hidden',
+        backgroundImage: `url(${data.pictUrl})`,
+      }"
+    >
+      <rotate-frame
+        v-if="focused"
+        :imageUrl="img"
+        :left="5"
+        :top="5"
+        :width="90"
+        :height="90"
+        :maxViewSize="{
+          width: 90,
+          height: 90,
+        }"
+        :borderRadius="5"
+        :lineWidth="3"
+        :withHalo="true"
+      />
+    </div>
+    <div class="title-font title-layout">
+      {{ data.index + data.name }}
+    </div>
+    <div
+      :style="{
+        top: 10,
+      }"
+    >
+      <div
+        :style="{
+          height: 24,
+          left: 13,
+          top: 256 - 256,
+          width: savePrizeWidth,
+        }"
+      >
+        <div :style="{ width: 5, height: 24, backgroundImage: couponLeft }" />
+        <div
+          :style="{
+            left: 5,
+            width: savePrizeWidth - 11,
+            height: 24,
+            backgroundImage: couponMid,
+          }"
+        />
+        <div
+          :style="{
+            left: savePrizeWidth - 6,
+            width: 5,
+            height: 24,
+            backgroundImage: couponRight,
+          }"
+        />
+        <div
+          class="ticket-text"
+          :style="{
+            width: savePrizeWidth,
+          }"
+        >
+          {{ `${data.savePrize}元券` }}
+        </div>
+      </div>
+
+      <div
+        :style="{
+          top: 256 - 256,
+          left: 27 + savePrizeWidth,
+        }"
+      >
+        <div :style="{ width: 7, height: 25, backgroundImage: borderLeft }" />
+        <div
+          :style="{
+            left: 7,
+            width: soldTotalWidth - 13,
+            height: 25,
+            backgroundImage: borderMid,
+          }"
+        />
+        <div
+          :style="{
+            left: soldTotalWidth - 7,
+            width: 7,
+            height: 25,
+            backgroundImage: borderRight,
+          }"
+        />
+        <div
+          class="sold-text"
+          :style="{
+            width: soldTotalWidth,
+          }"
+        >
+          {{ `已售${soldTotalText}件` }}
+        </div>
+      </div>
+
+      <div
+        :style="{
+          height: 24,
+          left: 13,
+          top: 270 - 256,
+          width: savePrizeWidth,
+        }"
+      >
+        <div :style="{ width: 5, height: 24, backgroundImage: couponLeft }" />
+        <div
+          :style="{
+            left: 5,
+            width: savePrizeWidth - 11,
+            height: 24,
+            backgroundImage: couponMid,
+          }"
+        />
+        <div
+          :style="{
+            left: savePrizeWidth - 6,
+            width: 5,
+            height: 24,
+            backgroundImage: couponRight,
+          }"
+        />
+        <div
+          class="ticket-text"
+          :style="{
+            width: savePrizeWidth,
+          }"
+        >
+          {{ `${data.savePrize}元券` }}
+        </div>
+      </div>
+      <div
+        :style="{
+          top: 270 - 256,
+          left: 27 + savePrizeWidth,
+        }"
+      >
+        <div :style="{ width: 7, height: 25, backgroundImage: borderLeft }" />
+        <div
+          :style="{
+            left: 7,
+            width: soldTotalWidth - 13,
+            height: 25,
+            backgroundImage: borderMid,
+          }"
+        />
+        <div
+          :style="{
+            left: soldTotalWidth - 7,
+            width: 7,
+            height: 25,
+            backgroundImage: borderRight,
+          }"
+        />
+        <div
+          class="sold-text"
+          :style="{
+            width: soldTotalWidth,
+          }"
+        >
+          {{ `已售${soldTotalText}件` }}
+        </div>
+      </div>
+
+      <div
+        :style="{
+          height: 24,
+          left: 13,
+          top: 280 - 256,
+          width: savePrizeWidth,
+        }"
+      >
+        <div :style="{ width: 5, height: 24, backgroundImage: couponLeft }" />
+        <div
+          :style="{
+            left: 5,
+            width: savePrizeWidth - 11,
+            height: 24,
+            backgroundImage: couponMid,
+          }"
+        />
+        <div
+          :style="{
+            left: savePrizeWidth - 6,
+            width: 5,
+            height: 24,
+            backgroundImage: couponRight,
+          }"
+        />
+        <div
+          class="ticket-text"
+          :style="{
+            width: savePrizeWidth,
+          }"
+        >
+          {{ `${data.savePrize}元券` }}
+        </div>
+      </div>
+      <div
+        :style="{
+          top: 280 - 256,
+          left: 27 + savePrizeWidth,
+        }"
+      >
+        <div :style="{ width: 7, height: 25, backgroundImage: borderLeft }" />
+        <div
+          :style="{
+            left: 7,
+            width: soldTotalWidth - 13,
+            height: 25,
+            backgroundImage: borderMid,
+          }"
+        />
+        <div
+          :style="{
+            left: soldTotalWidth - 7,
+            width: 7,
+            height: 25,
+            backgroundImage: borderRight,
+          }"
+        />
+        <div
+          class="sold-text"
+          :style="{
+            width: soldTotalWidth,
+          }"
+        >
+          {{ `已售${soldTotalText}件` }}
+        </div>
+      </div>
+
+      <div
+        :style="{
+          top: 296 - 256,
+        }"
+        class="prize-title-font prize-title-layout"
+      >
+        券后
+      </div>
+      <div
+        :style="{
+          top: 289 - 256,
+        }"
+        class="prize-font"
+      >
+        {{ `¥${data.prize - data.savePrize}` }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.frame-background {
+  width: 100;
+  height: 100;
+  border-radius: 10;
+  background-color: #f7f7f4;
+  transition: transform 0.2s linear;
+}
+
+.poster-holder {
+  width: 100;
+  height: 100;
+  border-radius: 10 10 0 0;
+  background-color: #cfcac6;
+}
+.poster {
+  width: 100;
+  height: 100;
+  border-radius: 7 7 0 0;
+}
+
+.title-font {
+  font-size: 21;
+  color: #73665c;
+  line-height: 29;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+.title-layout {
+  top: 80;
+  left: 13;
+  width: 100;
+  height: 29;
+}
+.ticket-text {
+  height: 24;
+  color: #ffffff;
+  font-size: 16;
+  text-align: center;
+  line-height: 24;
+}
+.sold-text {
+  height: 25;
+  color: #ff7a00;
+  font-size: 20;
+  text-align: center;
+  line-height: 25;
+}
+.prize-title-layout {
+  width: 35;
+  height: 24;
+  left: 13;
+}
+.prize-title-font {
+  color: #de2825;
+  text-align: center;
+  font-size: 17;
+  line-height: 24;
+}
+.prize-font {
+  left: 53;
+  width: 158; /*213 - 55*/
+  height: 37;
+  line-height: 37;
+  font-size: 28;
+  color: #de2825;
+}
+</style>