@shijiu/jsview-vue-samples 2.0.1045-next-vue.0 → 2.0.1073

package/Basic/components/div/DivCssVar.vue

@@ -5,6 +5,8 @@ let state = reactive({
   foreColor: "#FF0000",
   backColor: "#00FF00",
   width:65,
+  transX: 0,
+  transY: 0,
 });
 onMounted(() => {
   timerId = setInterval(() => {
@@ -12,10 +14,14 @@ onMounted(() => {
       state.foreColor = "#FF0000";
       state.backColor = "#00FF00";
       state.width = 65;
+      state.transX = 50;
+      state.transY = 0;
     } else {
       state.foreColor = "#00FF00";
       state.backColor = "#FF0000";
       state.width = 55;
+      state.transX = 0;
+      state.transY = 50;
     }
   }, 3000);
 });
@@ -30,27 +36,36 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="block">顶级元素的CSS class中包含变量 (不推荐)</div>
+  <div class="block-var">CSS class中包含变量</div>
+
+  <div class="block-kf-var">CSS keyframes中包含变量</div>
 
-  <div
-    :style="{
-      left: 90,
-      width: 65,
-      height: 65,
-      color: state.foreColor,
-      backgroundColor: state.backColor,
-    }"
-  >
-    子级元素CSS class中包含变量
-  </div>
 </template>
 
 <style scoped>
-.block {
-  width: v-bind(state.width + 10);
+.block-var {
+  width: v-bind('state.width + 10');
   height: 65;
-  /* word-wrap: break-word; */
-  color: v-bind(state.foreColor);
-  background-color: v-bind(state.backColor);
+  color: v-bind('state.foreColor');
+  background-color: v-bind('state.backColor');
 }
+
+.block-kf-var {
+  left: 100;
+  width: 65;
+  height: 65;
+  color: v-bind('state.foreColor');
+  background-color: v-bind('state.backColor');
+  animation: AnimTranslate 2s linear infinite;
+}
+
+@keyframes AnimTranslate {
+  from {
+    transform: translate3d(0, v-bind('state.transY'), 0);
+  }
+  to {
+    transform: translate3d(v-bind('state.transX'), 0, 0);
+  }
+}
+
 </style>

package/CommonUtils/ResourceData.js

@@ -0,0 +1,11 @@
+let dataUrl=""
+
+
+const setDataUrl=(url)=>{
+    dataUrl = url
+}
+
+const getDataUrl=()=>{
+    return dataUrl
+}
+export { getDataUrl, setDataUrl}

package/CommonUtils/getSearchQuery.js

@@ -0,0 +1,44 @@
+const getSearchQuery = (url = '', obj, paramPosition) => {
+    const [searchPart = '', hashPart = ''] = url.split('#');
+    // eslint-disable-next-line no-nested-ternary
+    const position = (paramPosition === undefined) ? ((searchPart || !hashPart) ? 0 : 1) : paramPosition;
+    const setPart = position === 0 ? searchPart : hashPart;
+    const [base = '', search = ''] = setPart.split('?');
+    const originParams = {};
+    const combine = (prefix, value) => (value ? `${prefix}${value}` : '');
+    const getSearch = (data = {}) => {
+      const result = [];
+      Object.keys(data).forEach((key) => {
+        const val = data[key];
+        if (val !== null && val !== undefined) {
+          result.push([key, encodeURIComponent(val)].join('='));
+        }
+      });
+      return combine('?', result.join('&'));
+    };
+    search
+      .split('&')
+      .filter((x) => x)
+      .forEach((keyvalue) => {
+        const [key = '', value = ''] = keyvalue.split('=');
+        originParams[key] = decodeURIComponent(value);
+      });
+    if (obj) {
+      // 赋值
+      Object.assign(originParams, obj);
+      switch (position) {
+        case 0:
+          // 参数在search部分,拼接方式为base+getSearch+hashPart
+          return `${base}${getSearch(originParams)}${combine('#', hashPart)}`;
+        case 1:
+          // 参数在hash部分,拼接方式为searchPart+ base+getSearch
+          return searchPart + combine('#', base + getSearch(originParams));
+        default:
+          break;
+      }
+    } else {
+      // 取值
+      return originParams;
+    }
+  }
+  export {getSearchQuery}

package/CssPreprocessor/utils/ContentBlock.vue

@@ -39,6 +39,7 @@ export default {
 </div>
 </template>
 
-<style scoped>
+<style>
+/* css文件要单独放到没有scoped设置的style标签中，规避css属性redefine的warning */
 @import "./FontStyle.css";
 </style>  

package/CssPreprocessor/utils/TitleBar.vue

@@ -18,12 +18,14 @@ export default {
 </template>
 
 <style scoped>
-@import "./FontStyle.css";
-
 .title-range {
   left: 0;
   top: 0;
   width: v-bind('style.width');
   height: 20;
 }
+</style>
+<style>
+/* css文件要单独放到没有scoped设置的style标签中，规避css属性redefine的warning */
+@import "./FontStyle.css";
 </style>

package/DemoHomepage/App.vue

@@ -9,9 +9,10 @@
 import { shallowRef, onMounted } from "vue";
 import { JsvPreload, buildPreloadInfo, jJsvRuntimeBridge, JsvFocusBlock } from "jsview";
 import { useRouter } from "vue-router";
-
+import { setDataUrl, getDataUrl } from "../CommonUtils/ResourceData.js"
+import { getSearchQuery } from "../CommonUtils/getSearchQuery.js"
 let router = useRouter();
-
+let DemoResourceBase=shallowRef("")
 let backgroundImageUrl = shallowRef(null);
 
 let preloadInfo = shallowRef([]);
@@ -21,9 +22,9 @@ let _onPreloadDone = () => {
   jJsvRuntimeBridge.notifyPageLoaded();
 };
 
-const _OnKeyDown = (ev)=>{
+const _OnKeyDown = (ev) => {
   // 结果默认传下来的返回键
-  if(ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
     router?.go(-1); // 有router时，是从DemoHomepage进入，回退
     return true;
   }
@@ -31,11 +32,19 @@ const _OnKeyDown = (ev)=>{
   return false;
 };
 
+//解析url
+let query = getSearchQuery(window.location.href, undefined, 0)
+if (query.DemoResourceBase) {
+  setDataUrl(query.DemoResourceBase)
+  //无网络环境下使用
+  DemoResourceBase.value = getDataUrl()
+}
 onMounted(() => {
   console.log("simulate async get background url");
   setTimeout(() => {
     console.log("simulate background url got");
-    backgroundImageUrl.value =
+    backgroundImageUrl.value = DemoResourceBase.value ? `${DemoResourceBase.value}/BackgroundLongmao.jpg`
+      :
       "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg";
     preloadInfo.value = [buildPreloadInfo(backgroundImageUrl.value)];
   }, 0);
@@ -51,21 +60,15 @@ export default {
 
 <template>
   <div>
-    <jsv-preload
-      :key="backgroundImageUrl"
-      :preloadList="preloadInfo"
-      :onPreloadDone="_onPreloadDone"
-    />
+    <jsv-preload :key="backgroundImageUrl" :preloadList="preloadInfo" :onPreloadDone="_onPreloadDone" />
     <div :style="{
-        width: 1280,
-        height: 720,
-        backgroundImage: backgroundImageUrl,
-      }"/>
-    <jsv-focus-block
-      :onAction = "{
-        onKeyDown: _OnKeyDown
-      }"
-    >
+      width: 1280,
+      height: 720,
+      backgroundImage: backgroundImageUrl,
+    }" />
+    <jsv-focus-block :onAction="{
+      onKeyDown: _OnKeyDown
+    }">
       <router-view v-slot="{ Component, route }">
         <keep-alive>
           <component v-if="route.meta.keepAlive" :is="Component" />

package/DemoHomepage/router.js

@@ -187,10 +187,19 @@ let routeList  = [
     path: '/Operations/FocusMoveStyle',
     component: () => import('jsview-vue-samples/FocusMoveStyle/App.vue'),
   },
+  {
+    name: 'Mockjs',
+    path: '/feature/MockjsDemo',
+    component: () => import('jsview-vue-samples/MockjsDemo/App.vue'),
+  },
   {
     name:'红包雨',
     path:'/Game/GiftRain',
     component:()=>import('jsview-vue-samples/GiftRain/App.vue'),
+  },{
+    name:'雷达图',
+    path:'/Game/RadarChart',
+    component:()=>import('jsview-vue-samples/JsvRadarChart/App.vue')
   }
 ];
 

package/FilterDemo/AnimatePic.vue

@@ -1,5 +1,10 @@
 <script setup>
-const item_url =
+import { getDataUrl } from "../CommonUtils/ResourceData";
+//无网络环境下使用
+const DemoResourceBase = getDataUrl()
+const item_url = DemoResourceBase ? 
+`${DemoResourceBase}/27bda620942566673ab449a3ef765321.png`
+  :
   "http://oss.image.51vtv.cn/homepage/20210209/27bda620942566673ab449a3ef765321.png";
 </script>
 

package/GiftRain/App.vue

@@ -3,8 +3,7 @@
     <div
       :style="{ width: 1920, height: 1080, overflow: 'hidden', transform: 'scale3d(0.67,0.67,1)', left: -220 * 1.5 + 8, top: -170 - 8 }">
       <JsvPreload :preloadList="preload_info"></JsvPreload>
-      <div
-        :style="{ backgroundImage: bg, width: 1920, height: 1080, overflow: 'hidden' }">
+      <div :style="{ backgroundImage: resourceMap.bg, width: 1920, height: 1080, overflow: 'hidden' }">
         <Score :score="score"></Score>
         <JsvActorMove key="JsvSpriteTranslate" :style="{
           top: 476 * 1.5,
@@ -51,7 +50,7 @@
 
       </div>
       <!-- 音频 -->
-      <JsvSystemAudio key="AudioBg" :src="_AudioBgUrl" :loop="true" :onRef="onRef1" :onLoad="audioOnLoad" />
+      <JsvSystemAudio key="AudioBg" :src="resourceMap._AudioBgUrl" :loop="true" :onRef="onRef1" :onLoad="audioOnLoad" />
 
       <JsvSystemAudio v-if="!_DisableEffectSound" :onRef="onRef2" :loop="true" />
 
@@ -61,43 +60,69 @@
 </template>
 <script setup>
 /* eslint-disable */
-import { JsvFocusBlock, JsvActorMove, JsvActorMoveControl, jJsvRuntimeBridge, JsvPreload, buildPreloadInfo,JsvSystemAudio} from "jsview";
-import { shallowRef, onMounted, onBeforeUnmount } from "vue";
+import { JsvFocusBlock, JsvActorMove, JsvActorMoveControl, jJsvRuntimeBridge, JsvPreload, buildPreloadInfo, JsvSystemAudio } from "jsview";
+import { shallowRef, onMounted, onBeforeUnmount, provide } from "vue";
 import { useRouter } from "vue-router";
 import Score from "./components/Score.vue";
 import RedPacket from "./components/RedPacket.vue";
 import Sound from "./common/Sound.js"
+import { getDataUrl } from "../CommonUtils/ResourceData"
 //音频Sound
 const MySound = new Sound()
+//接收是否有DemoResourceBase,没有则正常走公共网络地址。
+const DemoResourceBase = getDataUrl()
 //预加载信息
-const kimi_normal = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_normal.png';
-const kimi_smile = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_smile.png';
-const kimi_boom = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_boom.png';
-const red_packet = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/red.png';
-const bigRed_packet = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/bigred.png'
-const boom_image = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/boom.png'
-const bg = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/bg.jpg'
+const resourceMap = {
+  kimi_normal: 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_normal.png',
+  kimi_smile: 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_smile.png',
+  kimi_boom: 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_boom.png',
+  red_packet: 'http://oss.image.qcast.cn/demo_images/red_packet_rain/red.png',
+  bigRed_packet: 'http://oss.image.qcast.cn/demo_images/red_packet_rain/bigred.png',
+  boom_image: 'http://oss.image.qcast.cn/demo_images/red_packet_rain/boom.png',
+  bg: 'http://oss.image.qcast.cn/demo_images/red_packet_rain/bg.jpg',
+  _ScoreBg: "http://oss.image.qcast.cn/demo_images/red_packet_rain/score_bg.png",
+  add1: 'http://oss.image.qcast.cn/demo_images/red_packet_rain/add1.png',
+  add5: "http://oss.image.qcast.cn/demo_images/red_packet_rain/add5.png",
+  min1: "http://oss.image.qcast.cn/demo_images/red_packet_rain/min1.png",
+  _AudioBgUrl: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewAudio/MiniGameBackgroundMusic-redpack.mp3"
+}
+if (DemoResourceBase) {
+  console.log('存在');
+  console.log(DemoResourceBase);
+  //正则进行替换
+  for (let i in resourceMap) {
+    //此正则规则是替换掉最后一个 / 前面的字符
+    resourceMap[i] = resourceMap[i].replace(/.*\/(.*)/, `${DemoResourceBase}/$1`);
+  }
+  //修改后暴露给子组件
+  provide("resourceMap", resourceMap)
+} else {
+  //暴露给子组件
+  provide("resourceMap", resourceMap)
+}
 const preload_info = [
-  buildPreloadInfo(kimi_normal),
-  buildPreloadInfo(kimi_smile),
-  buildPreloadInfo(kimi_boom),
-  buildPreloadInfo(red_packet),
-  buildPreloadInfo(bigRed_packet),
-  buildPreloadInfo(boom_image),
-  buildPreloadInfo(bg)
+  buildPreloadInfo(resourceMap.kimi_normal),
+  buildPreloadInfo(resourceMap.kimi_smile),
+  buildPreloadInfo(resourceMap.kimi_boom),
+  buildPreloadInfo(resourceMap.red_packet),
+  buildPreloadInfo(resourceMap.bigRed_packet),
+  buildPreloadInfo(resourceMap.boom_image),
+  buildPreloadInfo(resourceMap.bg),
+  buildPreloadInfo(resourceMap.add1),
+  buildPreloadInfo(resourceMap.add5),
+  buildPreloadInfo(resourceMap.min1)
 ];
 //定义不需要响应式的变量
 let _CurrentRain = null;
 //音频ref
 let _Audio = null;
-let _AudioBgUrl = "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewAudio/MiniGameBackgroundMusic-redpack.mp3";
 //背景音频ref
 let _BgAudio = null;
 let _IsRunning = false;
 let _DisableEffectSound = true;
 let _TranslateControl = new JsvActorMoveControl()
 //定义需要响应式的变量
-let kimi = shallowRef("http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_normal.png")
+let kimi = shallowRef(resourceMap.kimi_normal)
 let score = shallowRef(0)
 let min_score_image = shallowRef(null)
 let add_score_image = shallowRef(null)
@@ -126,22 +151,22 @@ const _onImpactTracer = (rain) => {
     switch (rain.type) {
       case 0:
         scoreAddAnim.value = "scoreUp 0.2s";
-        kimi.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_normal.png";
-        add_score_image.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/add1.png";
+        kimi.value = resourceMap.kimi_normal;
+        add_score_image.value = resourceMap.add1;
         score.value += 1;
         MySound.playGetSound()
         break;
       case 1:
         scoreAddAnim.value = "scoreUp 0.2s";
-        kimi.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_smile.png";
-        add_score_image.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/add5.png";
+        kimi.value = resourceMap.kimi_smile;
+        add_score_image.value = resourceMap.add5;
         MySound.playGetSound()
         score.value += 5;
         break;
       case 2:
         scoreMinAnim.value = "scoreUp 0.2s";
-        min_score_image.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/min1.png";
-        kimi.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_boom.png";
+        min_score_image.value = resourceMap.min1;
+        kimi.value = resourceMap.kimi_boom;
         score.value -= 1;
         MySound.playBoomSound()
         if (score.value < 0) {

package/GiftRain/components/RedPacket.vue

@@ -1,38 +1,40 @@
 <template>
     <div>
         <div key="timer" :style="{
-            width: 140*1.5,
-            height: 140*1.5,
+            width: 140 * 1.5,
+            height: 140 * 1.5,
             backgroundImage: _ScoreBg,
-            top: 40*1.5,
-            left: 40*1.5,
+            top: 40 * 1.5,
+            left: 40 * 1.5,
             textAlign: 'center',
-            lineHeight: 140*1.5,
+            lineHeight: 140 * 1.5,
             color: 'rgba(255,0,0,1.0)',
-            fontSize: 72*1.5
+            fontSize: 72 * 1.5
         }">{{ timer }}</div>
         <SpriteTranslate v-for="(item, index) in itemList" :MoneyBag="props.MoneyBag" :onImpactTracer="onImpactTracer"
             :onDestory="_RemoveItem" :key="`spritetranslate${item.key}`" :item=item />
-</div>
+    </div>
 </template>
 
 <script setup>
-import { shallowRef, defineProps, onMounted, onBeforeUnmount } from 'vue';
+import { shallowRef, defineProps, onMounted, onBeforeUnmount, inject } from 'vue';
 import SpriteTranslate from './SpriteTranslate.vue';
 //定义props
 const props = defineProps({
     onImpactTracer: Function,
     MoneyBag: Object,
-    _ScoreMinAnimationEnd:Function,
-    _ScoreAddAnimationEnd:Function
+    _ScoreMinAnimationEnd: Function,
+    _ScoreAddAnimationEnd: Function
 })
+//接收
+const resourceMap = inject("resourceMap")
 let _Index = 0;
 // 随机生成列表
-const _RedImage = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/red.png';
-const _BigRedImage = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/bigred.png';
-const _BoomImage = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/boom.png';
-const _ScoreBg = "http://oss.image.qcast.cn/demo_images/red_packet_rain/score_bg.png";
-let itemList =shallowRef([])
+const _RedImage = resourceMap.red_packet;
+const _BigRedImage = resourceMap.bigRed_packet;
+const _BoomImage = resourceMap.boom_image;
+const _ScoreBg = resourceMap._ScoreBg;
+let itemList = shallowRef([])
 let timer = shallowRef(60)
 const onImpactTracer = props.onImpactTracer;
 let _TimerOutId = null;

package/JsvRadarChart/App.vue

@@ -0,0 +1,99 @@
+<!--
+ * @Author: ZhengYi
+ * @Date: 2023-04-26 
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-04-26 
+ * @Description: file content
+-->
+<template>
+    <jsv-focus-block autoFocus :onAction="actionDefines">
+        <div :style="{
+                textAlign: 'center',
+                fontSize: 30,
+                lineHeight: 50,
+                color: '#ffffff',
+                left: 100,
+                top: 20,
+                width: 1280 - 200,
+                height: 50,
+                backgroundColor: 'rgba(27,38,151,0.8)',
+            }">按左键各个方向随机减少，按右键各个方向随机增加</div>
+        <JsvRadarChart :data="data" :backgroundUrl="bgImageUrl" :foregroundUrl="resultSquare" :style="style"
+            :fontSize="fontSize" :extendOffset="70" :fontColor="'#ff3212'" :radius="200" />
+        <JsvRadarChart :data="data2" :backgroundUrl="bgImageUrl" :foregroundUrl="resultSquare" :style="style2"
+            :fontSize="fontSize" :extendOffset="50" :fontColor="'#FFF231'" :radius="200" />
+    </jsv-focus-block>
+</template>
+  
+<script setup>
+import { JsvRadarChart } from "jsview";
+import resultSquare from "./assets/resultSquare.png"
+import bgImageUrl from "./assets/Square.png"
+import { onMounted, ref } from 'vue';
+import { jJsvRuntimeBridge } from 'jsview';
+import { useRouter } from "vue-router";
+const router = useRouter();
+const data = ref([
+    { title: '语文', value: 70 },
+    { title: '数学', value: 98 },
+    { title: '英语', value: 40 },
+    { title: '化学', value: 80 },
+    { title: '生物', value: 92 },
+    { title: '物理', value: 88 },
+])
+const data2 = ref([
+    { title: '语文', value: 30 },
+    { title: '数学', value: 40 },
+    { title: '英语', value: 50 },
+    { title: '化学', value: 40 },
+    { title: '生物', value: 44 },
+])
+
+const style = {
+    top: 400,
+    left: 300
+}
+const style2 = {
+    top: 400,
+    left: 950
+}
+const fontSize = 30;
+
+const onKeyDown = (ev) => {
+    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+        router.go(-1)
+    } else if (ev.keyCode == 39) {
+        data.value.forEach((item, index) => {
+            item.value += Math.random() * 10
+            if (item.value >= 100) {
+                item.value = 100
+            }
+        })
+        data2.value.forEach((item, index) => {
+            item.value += Math.random() * 10
+            if (item.value >= 100) {
+                item.value = 100
+            }
+        })
+    } else if (ev.keyCode == 37) {
+        data.value.forEach((item, index) => {
+            item.value -= Math.random() * 10
+            if (item.value <= 10) {
+                item.value == 8
+            }
+        })
+        data2.value.forEach((item, index) => {
+            item.value -= Math.random() * 10
+            if (item.value <= 10) {
+                item.value == 8
+            }
+        })
+    }
+}
+const actionDefines = {
+    onKeyDown
+}
+
+</script>
+  
+<style scoped></style>

package/MetroWidgetDemos/itemSizeUpdate/App.vue

@@ -0,0 +1,51 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script setup>
+import { useFocusHub } from "jsview";
+import Center from "./center/Center.vue";
+import Backward from "./backward/Backward.vue";
+
+import { onMounted } from "vue";
+
+const focusHub = useFocusHub();
+
+onMounted(() => {
+  focusHub.setFocus("itemResizeCenter");
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  >
+    <div :style="{ left: 150, top: 10 }" class="text">
+      获焦一秒后放大, 放大动画以中心为锚点
+    </div>
+    <div :style="{ left: 150, top: 50 }">
+      <center />
+    </div>
+    <div :style="{ left: 150, top: 260 }" class="text">
+      获焦一秒后放大, 放大动画以左侧为锚点
+    </div>
+    <div :style="{ left: 150, top: 300 }">
+      <backward />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.text {
+  width: 600;
+  height: 30;
+  line-height: 30;
+  font-size: 25;
+  color: #ffffff;
+}
+</style>