@shijiu/jsview-vue-samples 2.3.0 → 2.3.151-test.0

package/DemoHomepage/router.js

@@ -8,6 +8,7 @@ let routeList = [
   // 功能实例
   {
     meta: { nameText: 'Home', },
+    name: "Home",
     path: '/',
     component: Homepage,
     meta: {
@@ -16,6 +17,7 @@ let routeList = [
   },
   {
     meta: { nameText: '基础示例合集', },
+    name: "feature-基础示例合集",
     path: '/feature/Basic',
     component: () => import('@shijiu/jsview-vue-samples/Basic/App.vue'),
   },
@@ -26,132 +28,158 @@ let routeList = [
   // },
   {
     meta: { nameText: '3d移动动画', },
+    name: "Operations-3d移动动画",
     path: '/Operations/3dMove',
     component: () => import('jsview-vue-samples/Poster3d/App.vue'),
   },
   {
     meta: { nameText: '烟花行进特效', },
+    name: "Operations-烟花行进特效",
     path: '/Operations/SprayMove',
     component: () => import('jsview-vue-samples/SprayMove/App.vue'),
   },
   {
     meta: { nameText: '海报图收放组件', },
+    name: "Operations-海报图收放组件",
     path: '/Operations/PosterPacker',
     component: () => import('jsview-vue-samples/PosterPacker/App.vue'),
   },
   {
     meta: { nameText: 'div快照功能', },
+    name: "feature-div快照功能",
     path: '/feature/BakeViewDemo',
     component: () => import('@shijiu/jsview-vue-samples/BakeViewDemo/App.vue'),
   },
   {
     meta: { nameText: 'FlexDemo', },
+    name: "feature-FlexDemo",
     path: '/feature/FlexDemo',
     component: () => import('@shijiu/jsview-vue-samples/FlexCellDemo/App.vue')
   },
   {
     meta: { nameText: 'ScreenFlex', },
+    name: "feature-ScreenFlex",
     path: '/feature/ScreenFlex',
     component: () => import('@shijiu/jsview-vue-samples/FullScreenFlex/App.vue')
   },
   {
     meta: { nameText: '连接线Demo', },
+    name: "feature-连接线Demo",
     path: '/feature/ConnectLine',
     component: () => import('@shijiu/jsview-vue-samples/ConnectLine/App.vue')
   },
   {
     meta: { nameText: '离散焦点自动处理', },
+    name: "feature-离散焦点自动处理",
     path: '/feature/DispersedFocusControl',
     component: () => import('@shijiu/jsview-vue-samples/DispersedFocusControl/App.vue'),
   },
   {
     meta: { nameText: '离散焦点分布', },
+    name: "feature-离散焦点分布",
     path: '/feature/DispersedItemSample',
     component: () => import('@shijiu/jsview-vue-samples/DispersedItemSample/DispersedItemSample.vue')
   },
   {
     meta: { nameText: '饼图测试', },
+    name: "feature-饼图测试",
     path: '/feature/SecTorTest',
     component: () => import('@shijiu/jsview-vue-samples/SecTorTest/App.vue'),
   },
   {
     meta: { nameText: 'TextureStore测试', },
+    name: "feature-TextureStore测试",
     path: '/feature/TextureStoreTest',
     component: () => import('@shijiu/jsview-vue-samples/TextureStoreTest/App.vue'),
   },
   {
     meta: { nameText: 'NinePatch对齐测试', },
+    name: "feature-NinePatch对齐测试",
     path: '/feature/NinePatchTester',
     component: () => import('@shijiu/jsview-vue-samples/NinePatchTester/App.vue'),
   },
   {
     meta: { nameText: 'NativeSharedView测试', },
+    name: "feature-NativeSharedView测试",
     path: '/feature/TestNativeSharedView',
     component: () => import('@shijiu/jsview-vue-samples/TestNativeSharedView/App.vue'),
   },
   {
     meta: { nameText: 'CSS预处理', },
+    name: "feature-CSS预处理",
     path: '/feature/CssPreprocessor',
     component: () => import('@shijiu/jsview-vue-samples/CssPreprocessor/App.vue'),
   },
   {
     meta: { nameText: '可视化变化通知', },
+    name: "feature-可视化变化通知",
     path: '/feature/VisibleSensorDemo',
     component: () => import('@shijiu/jsview-vue-samples/VisibleSensorDemo/App.vue'),
   },
   {
     meta: { nameText: '快速刷新的表格布局组件', },
+    name: "feature-快速刷新的表格布局组件",
     path: '/feature/GridDemo',
     component: () => import('@shijiu/jsview-vue-samples/GridDemo/App.vue'),
   },
   {
     meta: { nameText: '有命名空间的焦点切换', },
+    name: "feature-有命名空间的焦点切换",
     path: '/feature/BasicFocusControl',
     component: () => import('@shijiu/jsview-vue-samples/BasicFocusControl/App.vue'),
   },
   {
     meta: { nameText: 'Hash方式路由切换', },
+    name: "feature-Hash方式路由切换",
     path: '/feature/HashHistory',
     props: { routePath: '/feature/HashHistory' },
     component: () => import('@shijiu/jsview-vue-samples/HashHistory/App.vue'),
   },
   {
     meta: { nameText: '翻牌游戏', },
+    name: "Game-翻牌游戏",
     path: '/Game/FlipCard',
     component: () => import('@shijiu/jsview-vue-samples/FlipCard/App.vue'),
   },
   {
     meta: { nameText: '设置颜色空间', },
+    name: "feature-设置颜色空间",
     path: '/feature/ColorSpace',
     component: () => import('@shijiu/jsview-vue-samples/ColorSpace/App.vue'),
   },
   {
     meta: { nameText: '制定Texture尺寸', },
+    name: "feature-制定Texture尺寸",
     path: '/feature/TextureSize',
     component: () => import('@shijiu/jsview-vue-samples/TextureSize/App.vue'),
   },
   {
     meta: { nameText: '长文字', },
+    name: "feature-长文字",
     path: '/feature/LongText',
     component: () => import('@shijiu/jsview-vue-samples/LongText/App.vue'),
   },
   {
     meta: { nameText: '长文字Latex', },
+    name: "feature-长文字Latex",
     path: '/feature/LongTextLatex',
     component: () => import('@shijiu/jsview-vue-samples/LongTextLatex/App.vue'),
   },
   {
     meta: { nameText: '二维码', },
+    name: "feature-二维码",
     path: '/feature/QrcodeDemo',
     component: () => import('@shijiu/jsview-vue-samples/QrcodeDemo/App.vue'),
   },
   {
     meta: { nameText: '文字阴影', },
+    name: "feature-文字阴影",
     path: '/feature/TextShadowDemo',
     component: () => import('@shijiu/jsview-vue-samples/TextShadowDemo/App.vue'),
   },
   {
     meta: { nameText: '多行文字区域内对齐', },
+    name: "feature-多行文字区域内对齐",
     path: '/feature/TextBox',
     component: () => import('@shijiu/jsview-vue-samples/TextBox/App.vue'),
   },
@@ -163,131 +191,157 @@ let routeList = [
   // },
   {
     meta: { nameText: '精灵图', },
+    name: "Game-精灵图",
     path: '/Game/SpriteImage',
     component: () => import('@shijiu/jsview-vue-samples/SpriteImage/App.vue'),
   },
   {
     meta: { nameText: '文字滚动(标题跑马灯)', },
+    name: "feature-文字滚动(标题跑马灯)",
     path: '/feature/Marquee',
     component: () => import('@shijiu/jsview-vue-samples/Marquee/App.vue'),
   },
   {
     meta: { nameText: '文字输入', },
+    name: "feature-文字输入",
     path: '/feature/Input',
     component: () => import('@shijiu/jsview-vue-samples/Input/App.vue'),
   },
   {
     meta: { nameText: '情景主题效果:雨', },
+    name: "Operations-情景主题效果:雨",
     path: '/Operations/TombSweepingDayTest',
     component: () => import('@shijiu/jsview-vue-samples/TombSweepingDayTest/App.vue'),
   },
   {
     meta: { nameText: '.9图焦点框漂移', },
+    name: "Operations-.9图焦点框漂移",
     path: '/Operations/NinePatchDemo',
     component: () => import('@shijiu/jsview-vue-samples/NinePatchDemo/App.vue'),
   },
   {
     meta: { nameText: '动图', },
+    name: "Operations-动图",
     path: '/Operations/AnimPicture',
     component: () => import('@shijiu/jsview-vue-samples/AnimPicture/App.vue'),
   },
   {
     meta: { nameText: '粒子效果', },
+    name: "Operations-粒子效果",
     path: '/Operations/SprayView',
     component: () => import('@shijiu/jsview-vue-samples/SprayView/App.vue'),
   },
   {
     meta: { nameText: '长图片', },
+    name: "Operations-长图片",
     path: '/Operations/LongImage',
     component: () => import('@shijiu/jsview-vue-samples/LongImage/App.vue'),
   },
   {
     meta: { nameText: '拼图demo', },
+    name: "Operations-拼图demo",
     path: '/Operations/MaskClip',
     component: () => import('@shijiu/jsview-vue-samples/MaskClip/App.vue'),
   },
   {
     meta: { nameText: 'SoundPool', },
+    name: "Game-SoundPool",
     path: '/Game/SoundPool',
     component: () => import('@shijiu/jsview-vue-samples/SoundPool/App.vue'),
   },
   {
     meta: { nameText: 'TextureAnimation', },
+    name: "Operations-TextureAnimation",
     path: '/Operations/TextureAnimation',
     component: () => import('@shijiu/jsview-vue-samples/TextureAnimation/App.vue'),
   },
   {
     meta: { nameText: '焦点框旋转光效果', },
+    name: "Operations-焦点框旋转光效果",
     path: '/Operations/TextureAnimation2',
     component: () => import('@shijiu/jsview-vue-samples/TextureAnimation/App3.vue'),
   },
   {
     meta: { nameText: '公祭日黑白效果', },
+    name: "Operations-公祭日黑白效果",
     path: '/Operations/GrayDown',
     component: () => import('@shijiu/jsview-vue-samples/FilterDemo/App.vue'),
   },
   {
     meta: { nameText: '水波特效', },
+    name: "Operations-水波特效",
     path: '/Operations/Ripple',
     component: () => import('@shijiu/jsview-vue-samples/Ripple/App.vue'),
   },
   {
     meta: { nameText: '预加载', },
+    name: "feature-预加载",
     path: '/feature/Preload',
     component: () => import('@shijiu/jsview-vue-samples/Preload/App.vue'),
   },
   {
     meta: { nameText: '单图片透明', },
+    name: "feature-单图片透明",
     path: '/feature/ViewOpacity',
     component: () => import('@shijiu/jsview-vue-samples/ViewOpacity/App.vue'),
   },
   {
     meta: { nameText: '图片缩小算法', },
+    name: "feature-图片缩小算法",
     path: '/feature/ScaleDownNeon',
     component: () => import('@shijiu/jsview-vue-samples/ScaleDownNeon/App.vue'),
   },
   {
     meta: { nameText: '渐变Texture', },
+    name: "feature-渐变Texture",
     path: '/feature/GradientTexture',
     component: () => import('@shijiu/jsview-vue-samples/GradientTexture/App.vue'),
   },
   {
     meta: { nameText: '碰撞检测', },
+    name: "Game-碰撞检测",
     path: '/Game/Collision',
     component: () => import('@shijiu/jsview-vue-samples/Collision/App.vue'),
   },
   {
     meta: { nameText: '碰撞即停', },
+    name: "Game-碰撞即停",
     path: '/Game/ImpactStop',
     component: () => import('@shijiu/jsview-vue-samples/ImpactStop/App.vue'),
   },
   {
     meta: { nameText: '滚动图', },
+    name: "Operations-滚动图",
     path: '/Operations/Swiper',
     component: () => import('@shijiu/jsview-vue-samples/Swiper/App.vue'),
   },
   {
     meta: { nameText: '下载接口示例', },
+    name: "feature-下载接口示例",
     path: '/feature/JsvPreDownloader',
     component: () => import('@shijiu/jsview-vue-samples/JsvPreDownloader/App.vue'),
   },
   {
     meta: { nameText: '焦点移动样式', },
+    name: "Operations-焦点移动样式",
     path: '/Operations/FocusMoveStyle',
     component: () => import('@shijiu/jsview-vue-samples/FocusMoveStyle/App.vue'),
   },
   {
     meta: { nameText: 'Mockjs测试', },
+    name: "feature-Mockjs测试",
     path: '/feature/MockjsDemo',
     component: () => import('@shijiu/jsview-vue-samples/MockjsDemo/App.vue'),
   },
   {
     meta: { nameText: '红包雨', },
+    name: "Game-红包雨",
     path: '/Game/GiftRain',
     component: () => import('@shijiu/jsview-vue-samples/GiftRain/App.vue'),
   },
   {
     meta: { nameText: '雷达图', },
+    name: "Game-雷达图",
     path: '/Game/RadarChart',
     component: () => import('@shijiu/jsview-vue-samples/JsvRadarChart/App.vue')
   },
@@ -299,36 +353,43 @@ let routeList = [
   // },
   {
     meta: { nameText: 'Hash参数', },
+    name: "feature-Hash参数",
     path: '/feature/HashParams',
     component: () => import('@shijiu/jsview-vue-samples/HashParams/App.vue'),
   },
   {
     meta: { nameText: '按键打断描画', },
+    name: "feature-按键打断描画",
     path: '/feature/BreakRender',
     component: () => import('@shijiu/jsview-vue-samples/BreakRender/App.vue'),
   },
   {
     meta: { nameText: 'latex示例', },
+    name: "feature-latex示例",
     path: '/feature/LatexDemo',
     component: () => import('@shijiu/jsview-vue-samples/LatexDemo/App.vue'),
   },
   {
     meta: { nameText: 'GetRect示例', },
+    name: "feature-GetRect示例",
     path: '/feature/GetRect',
     component: () => import('@shijiu/jsview-vue-samples/GetBoundingClientRect/App.vue'),
   },
   {
     meta: { nameText: '动态Class示例', },
+    name: "feature-动态Class示例",
     path: '/feature/DynamicClass',
     component: () => import('@shijiu/jsview-vue-samples/DynamicClass/App.vue'),
   },
   {
     meta: { nameText: 'Class动态切换示例', },
+    name: "feature-Class动态切换示例",
     path: '/feature/ClassDynamicSwitching',
     component: () => import('@shijiu/jsview-vue-samples/ClassDynamicSwitching/App.vue'),
   },
   {
     meta: { nameText: 'JsvLine示例', },
+    name: "feature-JsvLine示例",
     path: '/feature/JsvLine',
     component: () => import('@shijiu/jsview-vue-samples/JsvLine/App.vue'),
   },
@@ -339,51 +400,61 @@ let routeList = [
   // },
   {
     meta: { nameText: '思维导图示例', },
+    name: "feature-思维导图示例",
     path: '/feature/MindMap',
     component: () => import('@shijiu/jsview-vue-samples/MindMap/App.vue'),
   },
   {
     meta: { nameText: 'latex公式', },
+    name: "feature-latex公式",
     path: '/feature/LatexFormula',
     component: () => import('@shijiu/jsview-vue-samples/LatexFormula/App.vue'),
   },
   {
     meta: { nameText: 'Swiper3dTest', },
+    name: "Operations-Swiper3dTest",
     path: '/Operations/Swiper3D',
     component: () => import('@shijiu/jsview-vue-samples/SwiperTest/App.vue'),
   },
   {
     meta: { nameText: '进度条', },
+    name: "Operations-进度条",
     path: '/Operations/ProgressBar',
     component: () => import('@shijiu/jsview-vue-samples/ProgressBar/App.vue'),
   },
   {
     meta: { nameText: '春联测试', },
+    name: "Operations-春联测试",
     path: '/Operations/CoupletsTest',
     component: () => import('@shijiu/jsview-vue-samples/CoupletsTest/App.vue'),
   },
   {
     meta: { nameText: '全屏春联特效', },
+    name: "Operations-全屏春联特效",
     path: '/Operations/SpringFestival2025',
     component: () => import('jsview-vue-samples/SpringFestival/App.vue'),
   },
   {
     meta: { nameText: '场景过渡', },
+    name: "Operations-场景过渡",
     path: '/Operations/SceneTransition',
     component: () => import('@shijiu/jsview-vue-samples/SceneTransition/App.vue'),
   },
   {
     meta: { nameText: '点击Div', },
+    name: "touch-点击Div",
     path: '/touch/ClickDivDemo',
     component: () => import('@shijiu/jsview-vue-samples/ClickDivDemo/App.vue'),
   },
   {
     meta: { nameText: '触控示例', },
+    name: "touch-触控示例",
     path: '/touch/TouchWidget',
     component: () => import('@shijiu/jsview-vue-samples/TouchWidget/App.vue'),
   },
   {
     meta: { nameText: 'DragBox', },
+    name: "touch-DragBox",
     path: '/touch/Box',
     component: () => import('@shijiu/jsview-vue-samples/DragBox/App.vue'),
   },
@@ -399,6 +470,7 @@ let routeList = [
   // },
   {
     meta: { nameText: '可拖拽进度条', },
+    name: "touch-可拖拽进度条",
     path: '/touch/ScrollBoxTest',
     component: () => import('@shijiu/jsview-vue-samples/ScrollBoxTest/App.vue'),
   },
@@ -409,11 +481,13 @@ let routeList = [
   // },
   {
     meta: { nameText: '自定义shader', },
+    name: "Operations-自定义shader",
     path: '/Operations/CustomShader',
     component: () => import('@shijiu/jsview-vue-samples/CustomShader/App.vue'),
   },
   {
-    meta: { nameText: '虚线框', },
+    meta: { nameText: '虚线框测试用例', },
+    name: "Operations-虚线框测试用例",
     path: '/Operations/DashPath',
     component: () => import('@shijiu/jsview-vue-samples/DashPath/App.vue'),
   },

package/GiftRain/components/SpriteTranslate.vue

@@ -1,72 +1,92 @@
 <template>
-    <JsvActorMove :key="`translate${item.key}`" ref="translateF"
-        :style="{ left: item.left, top: item.top, width: item.width, height: item.height }" :control="_Control">
-        <div :key="`bg${item.key}`" ref="translate"
-            :style="{ backgroundImage: `url(${item.src})`, left: 0, top: 0, width: item.width, height: item.height }" />
-    </JsvActorMove>
+  <JsvActorMove
+    :key="`translate${item.key}`"
+    ref="translateF"
+    :style="{
+      left: item.left,
+      top: item.top,
+      width: item.width,
+      height: item.height,
+    }"
+    :control="_Control"
+  >
+    <div
+      :key="`bg${item.key}`"
+      ref="translate"
+      :style="{
+        backgroundImage: `url(${item.src})`,
+        left: 0,
+        top: 0,
+        width: item.width,
+        height: item.height,
+      }"
+    />
+  </JsvActorMove>
 </template>
 
 <script setup>
-import { shallowRef, defineProps, onMounted, onBeforeMount } from 'vue';
-import { JsvActorMove, JsvActorMoveControl, createImpactTracer, createImpactCallback, createImpactAutoFroze } from 'jsview'
+import { shallowRef, defineProps, onMounted, onBeforeMount } from "vue";
+import {
+  JsvActorMove,
+  JsvActorMoveControl,
+  createImpactTracer,
+  createImpactCallback,
+  createImpactAutoFroze,
+} from "jsview";
 //定义子ref
-let translate = shallowRef(null)
+let translate = shallowRef(null);
 //定义父ref
-let translateF=shallowRef(null)
+let translateF = shallowRef(null);
 //定义props
 const props = defineProps({
-    onDestory: Function,
-    item: Object,
-    onImpactTracer: Function,
-    MoneyBag: Object
-})
+  onDestory: Function,
+  item: Object,
+  onImpactTracer: Function,
+  MoneyBag: Object,
+});
 const control = new JsvActorMoveControl();
 const _Control = control;
 const item = props.item;
 //销毁方法
 const _onDestroy = () => {
-    if (props.onDestory) {
-        props.onDestory(props.item.key);
-    }
-}
+  if (props.onDestory) {
+    props.onDestory(props.item.key);
+  }
+};
 
 let sensor = null;
 
 const _InitItemEle = (item, ele) => {
-    if (ele && !item.ele) {
-        item.ele = ele;
-        if (props.MoneyBag) {
-            const giftrain_sensor = createImpactTracer(props.MoneyBag, ele, createImpactCallback(
-                () => {
-                    props.onImpactTracer(item);
-                    _onDestroy();
-                },
-            ),        //碰撞即停
-                createImpactAutoFroze(
-                    [props.MoneyBag,translateF.value.mainDiv],
-                    null
-                )
-            );
-            sensor = giftrain_sensor;
-        }
+  if (ele && !item.ele) {
+    item.ele = ele;
+    if (props.MoneyBag) {
+      const giftrain_sensor = createImpactTracer(
+        props.MoneyBag,
+        ele,
+        createImpactCallback(() => {
+          props.onImpactTracer(item);
+          _onDestroy();
+        }) //碰撞即停
+      );
+      sensor = giftrain_sensor;
     }
-}
-
+  }
+};
 
 //挂载时初始化
 onMounted(() => {
-    _InitItemEle(item, translate.value)
-    _Control.moveToY(720 * 1.5 + 30, 720 * 1.5 / item.duration, () => {
-        _onDestroy();
-    });
-})
+  _InitItemEle(item, translate.value);
+  _Control.moveToY(720 * 1.5 + 30, (720 * 1.5) / item.duration, () => {
+    _onDestroy();
+  });
+});
 //卸载之前释放碰撞监听者
-onBeforeMount(()=>{
-    if(sensor!=null){
-    sensor.Recycle()
-    sensor=null
-    }
-})
+onBeforeMount(() => {
+  if (sensor != null) {
+    sensor.Recycle();
+    sensor = null;
+  }
+});
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped></style>

package/HashHistory/App.vue

@@ -67,8 +67,8 @@ onMounted(() => {
           ref="routePage"
           class="childComponentStyle"
           :style="{
-            top:150,
-            overflow:'hidden'
+            top: 150,
+            overflow: 'hidden',
           }"
           @requestFocus="onRequestFocus"
         />

package/HashHistory/router.js

@@ -15,7 +15,7 @@ const routeList = [
   },
   {
     name: "SubPageFirst",
-    path: "/__MainJsvApp/SubPageFirst",
+    path: "/__MainJsvApp/SubPageFirst", 
     component: () => import("./views/SubPage.vue"),
     props: {
       name: "First",

package/MetroWidgetDemos/TripleWidget/App.vue

@@ -69,7 +69,13 @@ onMounted(() => {
   >
     <!-- 重要代码: 为了实现焦点就近移动, 需要传递onItemEdge回调 -->
     <template #renderItem="{ data, query, onAction, onItemEdge }">
-      <SWidgetItem :data="data" :onAction="onAction" :onItemEdge="onItemEdge" />
+      <SWidgetItem
+        :data="data"
+        :onAction="onAction"
+        :onItemEdge="onItemEdge"
+        ,
+        :queryInfo="query"
+      />
       <!-- <widget-item
         v-else
         :data="data"

package/MetroWidgetDemos/TripleWidget/Item.vue

@@ -4,11 +4,13 @@
  * @Description: file content
 -->
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 
 const props = defineProps({
   data: Object,
   onAction: Object,
+  rowNum: Number,
+  queryInfo: Object,
 });
 
 const focused = ref(false);
@@ -28,6 +30,18 @@ const onClick = () => {
 props.onAction.register("onFocus", onFocus);
 props.onAction.register("onBlur", onBlur);
 props.onAction.register("onClick", onClick);
+
+onMounted(() => {
+  console.log(
+    `+++++++++ 加载 item 所在行列: ${props.rowNum} ${props.queryInfo.id}`
+  );
+});
+
+onUnmounted(() => {
+  console.log(
+    `---------卸载 item 所在行列: ${props.rowNum} ${props.queryInfo.id}`
+  );
+});
 </script>
 
 <template>
@@ -61,4 +75,4 @@ props.onAction.register("onClick", onClick);
       {{ data.content }}
     </div>
   </div>
-</template>
+</template>