@shijiu/jsview-vue-samples 2.2.201 → 2.2.426-test.0

package/MetroWidgetDemos/PerformanceTest/components/ContentItem.vue

@@ -337,7 +337,6 @@ const soldTotalText = computed(() => {
   font-size: 21;
   color: #73665c;
   line-height: 29;
-  overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   text-align: center;

package/MetroWidgetDemos/PerformanceTest/components/MyTab.vue

@@ -12,7 +12,7 @@ const props = defineProps({
   name: String,
   onEdgeDown: Function,
   onItemFocus: Function,
-})
+});
 
 let activeId = shallowRef(0);
 let focused = shallowRef(false);
@@ -25,7 +25,7 @@ const tab1Class = computed(() => {
   } else {
     return "text-normal item-normal";
   }
-})
+});
 const tab2Class = computed(() => {
   if (activeId.value == 1) {
     return focused.value
@@ -34,7 +34,7 @@ const tab2Class = computed(() => {
   } else {
     return "text-normal item-normal";
   }
-})
+});
 const tab3Class = computed(() => {
   if (activeId.value == 2) {
     return focused.value
@@ -43,8 +43,7 @@ const tab3Class = computed(() => {
   } else {
     return "text-normal item-normal";
   }
-})
-
+});
 
 const onKeyDown = (ev) => {
   switch (ev.keyCode) {
@@ -54,35 +53,37 @@ const onKeyDown = (ev) => {
         activeId.value = 2;
       }
       props.onItemFocus(activeId.value);
-      break;
+      return true;
     case 39:
       activeId.value++;
       if (activeId.value > 2) {
         activeId.value = 0;
       }
       props.onItemFocus(activeId.value);
-      break;
+      return true;
     case 40:
       props.onEdgeDown();
-      break;
+      return true;
   }
-}
+};
 const onFocus = () => {
   focused.value = true;
-}
+};
 const onBlur = () => {
   focused.value = false;
-}
+};
 const actionDefines = {
   onBlur,
   onFocus,
-  onKeyDown
-}
-
+  onKeyDown,
+};
 </script>
 
 <template>
-  <jsv-focus-block :name="props.name" :onAction="actionDefines"></jsv-focus-block>
+  <jsv-focus-block
+    :name="props.name"
+    :onAction="actionDefines"
+  ></jsv-focus-block>
   <div :class="tab1Class">Tab1</div>
   <div :class="tab2Class" :style="{ left: 220 }">Tab2</div>
   <div :class="tab3Class" :style="{ left: 440 }">Tab3</div>
@@ -115,6 +116,6 @@ const actionDefines = {
 .item-normal {
   width: 200;
   height: 50;
-  background-color: #87CECB;
+  background-color: #87cecb;
 }
-</style>
+</style>

package/MetroWidgetDemos/itemSizeUpdate/backward/Item.vue

@@ -33,7 +33,7 @@ const duration = 200;
 let timeoutHandler = -1;
 
 const animInfo = {
-  anchor: 0,
+  anchor: props.query.index == 28 ? undefined : 0,
   duration: duration,
   onEnd: () => {
     console.log("resize end", props.query.index);

package/MetroWidgetDemos/routeList.js

@@ -7,95 +7,95 @@ export default [
   {
     name: "基础示例",
     path: "/metroWidget/basic",
-    component: () => import("jsview-vue-samples/MetroWidgetDemos/basic/App.vue"),
+    component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/basic/App.vue"),
   },
   {
     name: "direction",
     path: "/metroWidget/direction",
-    component: () => import("jsview-vue-samples/MetroWidgetDemos/direction/App.vue"),
+    component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/direction/App.vue"),
   },
   {
     name: "padding",
     path: "/metroWidget/padding",
-    component: () => import("jsview-vue-samples/MetroWidgetDemos/padding/App.vue"),
+    component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/padding/App.vue"),
   },
   {
     name: "slideSetting",
     path: "/metroWidget/slideSetting",
-    component: () => import("jsview-vue-samples/MetroWidgetDemos/slideSetting/App.vue"),
+    component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/slideSetting/App.vue"),
   },
   {
     name: "layoutType",
     path: "/metroWidget/layoutType",
-    component: () => import("jsview-vue-samples/MetroWidgetDemos/layoutType/App.vue"),
+    component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/layoutType/App.vue"),
   },
   {
     name: "嵌套(基础)",
     path: "/metroWidget/focusableItemBasic",
-    component: () => import("jsview-vue-samples/MetroWidgetDemos/focusableItemBasic/App.vue"),
+    component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/focusableItemBasic/App.vue"),
   },
   {
     name: "嵌套(混合)",
     path: "/metroWidget/focusableItemMix",
-    component: () => import("jsview-vue-samples/MetroWidgetDemos/focusableItemMix/App.vue"),
+    component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/focusableItemMix/App.vue"),
   },
   {
     name: "嵌套(MetroWidget)",
     path: "/metroWidget/focusableItemMetroWidget",
-    component: () => import("jsview-vue-samples/MetroWidgetDemos/focusableItemMetroWidget/App.vue"),
+    component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/focusableItemMetroWidget/App.vue"),
   },
   {
     name: "乒乓模式",
     path: "/metroWidget/PingPong",
     component: () =>
-      import("jsview-vue-samples/MetroWidgetDemos/PingPong/App.vue"),
+      import("@shijiu/jsview-vue-samples/MetroWidgetDemos/PingPong/App.vue"),
   },
   {
     name: "性能测试",
     path: "/metroWidget/PerformanceTest",
     component: () =>
-      import("jsview-vue-samples/MetroWidgetDemos/PerformanceTest/App.vue"),
+      import("@shijiu/jsview-vue-samples/MetroWidgetDemos/PerformanceTest/App.vue"),
   },
   {
     name: "骨架图",
     path: "/metroWidget/SkeletonDiagram",
     component: () =>
-      import("jsview-vue-samples/MetroWidgetDemos/SkeletonDiagram/App.vue"),
+      import("@shijiu/jsview-vue-samples/MetroWidgetDemos/SkeletonDiagram/App.vue"),
   },
   {
     name: ".9焦点页面",
     path: "/metroWidget/ninePatchFocusPage",
     component: () =>
-      import("jsview-vue-samples/MetroWidgetDemos/ninePatchFocusPage/App.vue"),
+      import("@shijiu/jsview-vue-samples/MetroWidgetDemos/ninePatchFocusPage/App.vue"),
   },
   {
     name: "item尺寸更新",
     path: "/metroWidget/itemSizeUpdate",
     component: () =>
-      import("jsview-vue-samples/MetroWidgetDemos/itemSizeUpdate/App.vue"),
+      import("@shijiu/jsview-vue-samples/MetroWidgetDemos/itemSizeUpdate/App.vue"),
   },
   {
     name: "三层嵌套",
     path: "/metroWidget/TripleWidget",
     component: () =>
-      import("jsview-vue-samples/MetroWidgetDemos/TripleWidget/App.vue"),
+      import("@shijiu/jsview-vue-samples/MetroWidgetDemos/TripleWidget/App.vue"),
   },
   {
     name: "数据刷新demo",
     path: "/metroWidget/RefreshDemo",
     component: () =>
-      import("jsview-vue-samples/MetroWidgetDemos/RefreshDemo/App.vue"),
+      import("@shijiu/jsview-vue-samples/MetroWidgetDemos/RefreshDemo/App.vue"),
   },
   {
     name: "剧集翻页",
     path: "/metroWidget/SeamlessSlide",
     component: () =>
-      import("jsview-vue-samples/MetroWidgetDemos/SeamlessSlide/App.vue"),
+      import("@shijiu/jsview-vue-samples/MetroWidgetDemos/SeamlessSlide/App.vue"),
   },
   {
     name: "多item分段显示",
     path: "/metroWidget/MassiveItems",
     component: () =>
-      import("jsview-vue-samples/MetroWidgetDemos/MassiveItems/App.vue"),
+      import("@shijiu/jsview-vue-samples/MetroWidgetDemos/MassiveItems/App.vue"),
   },
 ]

package/MindMap/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted } from "vue"
+import { onMounted, shallowRef } from "vue"
 import { JsvMindMap, useFocusHub } from "jsview";
 import Item from "./Item.vue";
 import { data } from "./data"
@@ -9,6 +9,7 @@ const provideData = () => {
 };
 
 const focusHub = useFocusHub();
+const widgetRef = shallowRef();
 
 const lineColor = {
   0: "#ff0000",
@@ -31,20 +32,27 @@ const formatNode = (item, depth) => {
       backgroundColor: lineColor[depth],
       lineWidth: 3,
     },
+    enableTap: true,
   };
 };
 const onEdge = (info) => {
   console.log("onEdge ", info);
 };
 
+function onMove(pos) {
+  console.log("onMove", pos)
+}
+
 const componentName = "mindMapDemo";
 onMounted(() => {
   focusHub.setFocus(componentName);
+  widgetRef.value?.setSensor(onMove)
 })
 </script>
 
 <template>
   <jsv-mind-map
+    ref="widgetRef"
     :name="componentName"
     :left="200"
     :top="100"
@@ -53,6 +61,7 @@ onMounted(() => {
     :formatNode="formatNode"
     :provideData="provideData"
     :onEdge="onEdge"
+    :touchFlag="1"
   >
     <template v-slot="{ data, onAction, handler }">
       <item :data="data" :onAction="onAction" :handler="handler"></item>

package/MindMap/data.js

@@ -8,6 +8,7 @@ const n = (left, top) => {
     id: id++,
   };
 };
+
 export const data = {
   ...n(400, 500),
   moveType: "star",
@@ -57,16 +58,22 @@ export const data = {
           ...n(600, 400),
           children: [
             {
-              ...n(700, 400)
+              ...n(700, 400),
+              children: [
+                {
+                  ...n(800, 400),
+                  children: [
+                    {
+                      ...n(900, 400)
+                    }
+                  ]
+                }
+              ]
             }
           ]
         },
-        {
-          ...n(600, 500)
-        },
-        {
-          ...n(600, 600)
-        },
+        n(600, 500),
+        n(600, 600),
       ]
     },
     {
@@ -83,4 +90,23 @@ export const data = {
       ]
     },
   ]
-}
+}
+
+// export const data = {
+//   ...n(100, 100),
+//   moveType: "star",
+//   children: [
+//     {
+//       ...n(0, 100),
+//     },
+//     {
+//       ...n(100, 0),
+//     },
+//     {
+//       ...n(200, 100),
+//     },
+//     {
+//       ...n(100, 200),
+//     },
+//   ]
+// }

package/Parkour/appConfig/jsview.config.mjs

@@ -16,10 +16,6 @@ export default {
     cookies: {
       domain: '' // 当非null非空时，激活cookie功能，使ajax请求时自动带上cookies，并且document.cookie的get/set可用
     },
-
-    // (可选配置)填写main.js或者bundle.js相对于index.html的相对位置，
-    // 用于image/import.then的相对寻址, vue3默认值是/js/
-    jsSubPath: '/js/'
   },
 
   vendorConfig: {

package/PosterPacker/App.vue

@@ -0,0 +1,207 @@
+<script setup>
+import { onMounted, onUnmounted, ref, computed, shallowRef } from "vue";
+import Vortex from "./tools/vortexPacker/Vortex.vue";
+import Genie from "./tools/geniePakcer/Genie.vue";
+import particlePacker from "./tools/particlePacker/Particle.vue";
+import orange from "./images/orange.png";
+import pink from "./images/pink.png";
+import red from "./images/red.png";
+import yellowGreen from "./images/yellowGreen.png";
+import blue from "./images/blue.png";
+import darkGreen from "./images/darkGreen.png";
+import purple from "./images/purple.png";
+//particle特效图片素材
+const ImgData = [orange, pink, red, yellowGreen, blue, darkGreen, purple];
+
+const ImageChinChilla =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg";
+const ImageLandscape = "https://oss.image.qcast.cn/ai-draw/landscape.jpeg";
+const ImageOwl = "https://oss.image.qcast.cn/ai-draw/owl.jpeg";
+//旋涡子组件的引用
+const cChildRef1 = ref(null);
+//genie子组件的引用
+const cChildRef2 = ref(null);
+const cShaderSettings = [
+  {
+    name: "vortex",
+    text: "左右键切换效果，【OK】键随机焦点开始",
+  },
+  {
+    name: "genie",
+    text: "【OK】键进行收或放。上下键切换样例点",
+  },
+  {
+    name: "particle",
+    text: "左右键切换效果 遮罩粒子组件",
+  },
+];
+
+const rKeyCount = ref(2);
+const rShaderInfo = computed(() => {
+  return cShaderSettings[rKeyCount.value];
+});
+
+//genie组件测试数组（14个）
+//index
+let rPositionIndex = shallowRef(0);
+//key值
+let rKey = shallowRef(1);
+//数组
+const cPositionArray = [
+  { x: -80, y: -60, direction: "horizontal" }, //左上横向
+  { x: -80, y: -60, direction: "vertical" }, //左上纵向
+  { x: 280, y: -60, direction: "vertical" }, //正上
+  { x: 1080, y: -60, direction: "horizontal" }, //右上横向
+  { x: 1080, y: -60, direction: "vertical" }, //右上纵向
+  { x: -80, y: 270, direction: "horizontal" }, //正左
+  { x: 1080, y: 270, direction: "horizontal" }, //正右
+  { x: -80, y: 600, direction: "horizontal" }, //左下横向
+  { x: -80, y: 600, direction: "vertical" }, //左下纵向
+  { x: 280, y: 600, direction: "vertical" }, //正下
+  { x: 1080, y: 600, direction: "horizontal" }, //右下横向
+  { x: 1080, y: 600, direction: "vertical" }, //右下纵向
+  { x: 200, y: 200, direction: "vertical" }, //内部纵向
+  { x: 700, y: 500, direction: "horizontal" }, //内部横向
+];
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 37: {
+      rKeyCount.value =
+        rKeyCount.value > 1 ? rKeyCount.value - 1 : rKeyCount.value;
+      return true;
+    }
+    case 39: {
+      rKeyCount.value =
+        rKeyCount.value < cShaderSettings.length - 1
+          ? rKeyCount.value + 1
+          : rKeyCount.value;
+      return true;
+    }
+    case 13: {
+      if (rKeyCount.value == 0) {
+        cChildRef1.value.getRandomDecimal();
+      } else {
+        cChildRef2.value.switcher();
+      }
+
+      return true;
+    }
+    case 38: {
+      if (rKeyCount.value == 1) {
+        rPositionIndex.value =
+          rPositionIndex.value == 0 ? 0 : (rPositionIndex.value -= 1);
+        rKey.value += 1;
+        console.log(rPositionIndex.value);
+      }
+      return true;
+    }
+    case 40: {
+      if (rKeyCount.value == 1) {
+        rPositionIndex.value =
+          rPositionIndex.value == cPositionArray.length - 1
+            ? cPositionArray.length - 1
+            : (rPositionIndex.value += 1);
+        rKey.value += 1;
+        console.log(rPositionIndex.value);
+      }
+      return true;
+    }
+    default:
+      return false;
+  }
+};
+const myEnd = () => {
+  console.log("动画结束");
+};
+onMounted(() => {
+  window.JsvCoreApi.enableFpsDisplay(true);
+});
+
+onUnmounted(() => {
+  window.JsvCoreApi.enableFpsDisplay(false);
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+    }"
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundImage: `url(${ImageChinChilla})`,
+    }"
+  ></jsv-focus-block>
+  <Vortex
+    v-if="rKeyCount == 0"
+    ref="cChildRef1"
+    :width="640"
+    :height="360"
+  ></Vortex>
+  <Genie
+    :key="rKey"
+    v-else-if="rKeyCount == 1"
+    ref="cChildRef2"
+    :width="1024"
+    :height="576"
+    :left="128"
+    :top="72"
+    :direction="cPositionArray[rPositionIndex].direction"
+    :position="cPositionArray[rPositionIndex]"
+    :time="1"
+    :imgUrl="ImageLandscape"
+    :aniEnd="myEnd"
+    :initShow="true"
+  ></Genie>
+  <div v-else>
+    <div
+      :style="{
+        width: 600,
+        height: 300,
+        top: 210,
+        left: 340,
+        backgroundImage: ImageOwl,
+      }"
+    ></div>
+    <particlePacker
+      :style="{
+        width: 600,
+        height: 300,
+        top: 210,
+        left: 340,
+      }"
+      :imgArray="ImgData"
+    >
+    </particlePacker>
+  </div>
+
+  <div
+    :key="rKeyCount"
+    :style="{
+      top: 100,
+      left: 20,
+      width: 560,
+      height: 50,
+      fontSize: 30,
+      backgroundColor: '#00000055',
+      color: '#ffffff',
+    }"
+  >
+    {{ `${rShaderInfo.name}(${rPositionIndex})` }}
+  </div>
+  <div
+    :style="{
+      top: 150,
+      left: 20,
+      width: 560,
+      height: 50,
+      fontSize: 30,
+      backgroundColor: '#00000055',
+      color: '#ffffff',
+    }"
+  >
+    {{ rShaderInfo.text }}
+  </div>
+</template>