@shijiu/jsview-vue-samples 2.0.1021 → 2.0.1073

package/CssPreprocessor/Scss/components/scss-group5/ScssImporting.vue

@@ -16,9 +16,13 @@ export default {
     + 'TextSettings.scss\n'
     + '\n'
     + '.scss-imported {\n'
-    + '  color: #00FF00;\n'
-    + '  font-size: 14;\n'
-    + '}'}}
+    + '  color: #126085;\n'
+    + '  font-size: 14;'}}
+    <div class="scss-nesting">
+      {{'   .scss-nesting {\n'
+      + '     color: #5149a1;\n'
+      + '    }' }}
+    </div>
   </div>
 </div>
 </template>

package/CssPreprocessor/Scss/components/scss-group5/TextSettings.scss

@@ -1,4 +1,11 @@
 .scss-imported {
-  color: #00FF00;
+  color: #126085;
   font-size: 14;
+  .scss-nesting{
+    color:#5149a1;
+    left: 0;
+    top: 230;
+    width: 230;
+    height: 280;
+   }
 }

package/CssPreprocessor/Stylus/App.vue

@@ -27,6 +27,6 @@ export default {
 .root {
   top: 10; left: 10;
   width: 1250; height: 670;
-  background-color: rgba(200, 200, 200, 1)
+  background-color: #d6e1ce
 }
 </style>

package/CssPreprocessor/Stylus/components/stylus-group1/StylusComments.vue

@@ -11,7 +11,7 @@ export default {
     + '.stylus-comments {\n'
     + '  // stylus 单行注释\n'
     + '  /* stylus 多行注释 */\n'
-    + '  color: #00FF00;\n'
+    + '  color: #126085;\n'
     + '}'}}
   </div>
 </div>
@@ -23,7 +23,7 @@ export default {
 .stylus-comments {
   // stylus 单行注释
   /* stylus 多行注释 */
-  color: #00FF00;
+  color: #126085;
   font-size: 14;
 
   left: 10;

package/CssPreprocessor/Stylus/components/stylus-group1/StylusConditionals.vue

@@ -11,7 +11,7 @@ export default {
     + '  if $show-green {\n'
     + '    color #00FF00\n'
     + '  } else {\n'
-    + '    color #FF0000\n'
+    + '    color #126085\n'
     + '  }\n'
     + '}'}}
   </div>
@@ -24,7 +24,7 @@ $show-green = false
   if $show-green {
     color: #00FF00;
   } else {
-    color: #FF0000;
+    color: #126085;
   }
 
   font-size: 14;

package/CssPreprocessor/Stylus/components/stylus-group1/StylusVariables.vue

@@ -6,14 +6,14 @@ export default {
 <template>
 <div>
   <div class="stylus-var-general">
-    {{'$my-color = #00FF00; // 一般变量\n'
+    {{'$my-color = #126085; // 一般变量\n'
     + '.stylus-var-general {\n'
     + '  color: $my-color;\n'
     + '}'}}
   </div>
   <div class="stylus-var-enclosing">
     {{'.stylus-var-enclosing {\n'
-    + '  $my-color = #0000FF; // 局部变量\n'
+    + '  $my-color = #5a4ba4; // 局部变量\n'
     + '  color: $my-color;\n'
     + '}'}}
   </div>
@@ -21,24 +21,24 @@ export default {
 </template>
 
 <style scoped lang="stylus">
-$my-color = #00FF00; // 一般变量
+$my-color = #126085; // 一般变量
 .stylus-var-general {
   color: $my-color;
 
-  font-size: 14;
+  font-size: 12;
   left: 10;
   top: 0;
   width: 220;
   height: 140;
 }
 
-$my-color = #00FF00;
+$my-color = #126085;
 .stylus-var-enclosing {
   // 只在 .stylus-enclosing 里有效，局部作用域
-  $my-color = #FF0000; // 局部变量
+  $my-color = #5a4ba4; // 局部变量
   color: $my-color;
 
-  font-size: 14;
+  font-size: 12;
   left: 10;
   top: 68;
   width: 220;

package/CssPreprocessor/Stylus/components/stylus-group2/StylusIteration.vue

@@ -25,7 +25,7 @@ for num in 1..4
 .stylus-iteration {
   font-size: $size;
 
-  color: #00FF00;
+  color: #126085;
   left: 10;
   top: 3;
   width: 230;

package/CssPreprocessor/Stylus/components/stylus-group2/StylusMethods.vue

@@ -41,7 +41,7 @@ getsize(zoom) { // 一般调用
 .stylus-method-general {
   font-size: getsize(7);
 
-  color: #00FF00;
+  color: #126085
   left: 10;
   top: 10;
   width: 240;
@@ -55,7 +55,7 @@ getsize(zoom) { // 具名参数
 .stylus-method-named {
   font-size: getsize(zoom: 7);
 
-  color: #00FF00;
+  color: #126085;
   left: 10;
   top: 140;
   width: 240;
@@ -69,7 +69,7 @@ getsize(args...) { // 不定参数
 .stylus-method-varargs {
   font-size: getsize(7);
 
-  color: #00FF00;
+  color: #126085;
   left: 10;
   top: 270;
   width: 240;

package/CssPreprocessor/Stylus/components/stylus-group3/StylusExtends.vue

@@ -7,7 +7,7 @@ export default {
 <div>
   <div class="stylus-extend">
     {{'.stylus-basic {\n'
-    + '  color: #00FF00;\n'
+    + '  color: #126085;\n'
     + '}\n'
     + '.stylus-extend {\n'
     + '  @extend .stylus-basic;\n'
@@ -19,7 +19,7 @@ export default {
 
 <style scoped lang='stylus'>
 .stylus-basic {
-  color: #00FF00;
+  color: #126085;
 }
 
 .stylus-extend {

package/CssPreprocessor/Stylus/components/stylus-group3/StylusNesting.vue

@@ -7,7 +7,7 @@ export default {
 <div class="stylus-root">
   <div class="stylus-rule-nesting">
     {{'.stylus-root {\n'
-    + '  color: #00FF00;\n'
+    + '  color: #126085;\n'
     + '  .stylus-rule-nesting { // 规则嵌套\n'
     + '    font-size: 14;\n'
     + '  }\n'
@@ -19,7 +19,7 @@ export default {
   </div>
   <div class="stylus-root-parent-selector">
     {{'.stylus-root {\n'
-    + '  color: #00FF00;\n'
+    + '  color: #126085;\n'
     + '  &-parent-selector { // 父选择器\n'
     + '    font-size: 14;\n'
     + '  }\n'
@@ -30,7 +30,7 @@ export default {
 
 <style scoped lang='stylus'>
 .stylus-root {
-  color: #00FF00;
+  color: #126085;
 
   .stylus-rule-nesting { // 规则嵌套
     font-size: 14;
@@ -42,8 +42,8 @@ export default {
   }
 
   .stylus-prop-nesting { // 属性嵌套(不支持)
-    color: #000000;
-    font-size: 14;
+    color: #5a4ba4;
+    font-size: 14; // 不支持 font:{size:14} 写法
 
     left: 10;
     top: 120;

package/CssPreprocessor/Stylus/components/stylus-group4/StylusKeyframes.vue

@@ -29,7 +29,7 @@ export default {
 }
 
 .stylus-keyframes {
-  color: #00FF00;
+  color: #126085;
   font-size: 14;
 
   left: 10;

package/CssPreprocessor/Stylus/components/stylus-group4/StylusMaps.vue

@@ -24,7 +24,7 @@ font-sizes = {
 .stylus-map {
   font-size: font-sizes[medium];
 
-  color: #00FF00;
+  color: #126085;
   left: 10;
   top: 3;
   width: 230;

package/CssPreprocessor/Stylus/components/stylus-group4/StylusMixins.vue

@@ -24,7 +24,7 @@ font(size) {
 .stylus-mixin {
   font(14);
 
-  color: #00FF00;
+  color: #126085;
   left: 10;
   top: 0;
   width: 230;

package/CssPreprocessor/Stylus/components/stylus-group5/StylusImporting.vue

@@ -16,9 +16,13 @@ export default {
     + 'TextSettings.styl\n'
     + '\n'
     + '.stylus-imported {\n'
-    + '  color: #00FF00;\n'
-    + '  font-size: 14;\n'
-    + '}'}}
+    + '  color: #126085;\n'
+    + '  font-size: 14;\n'}}
+        <div class="stylus-nesting">
+      {{'   .stylus-nesting {\n'
+      + '     color: #5149a1;\n'
+      + '    }' }}
+    </div>
   </div>
 </div>
 </template>

package/CssPreprocessor/Stylus/components/stylus-group5/TextSettings.styl

@@ -1,4 +1,11 @@
 .stylus-imported {
-  color: #00FF00;
+  color: #126085;
   font-size: 14;
+    .stylus-nesting{
+    color:#5149a1;
+    left: 0;
+    top: 230;
+    width: 230;
+    height: 280;
+   }
 }

package/CssPreprocessor/utils/ContentBlock.vue

@@ -16,7 +16,8 @@ export default {
       titleStyle: { 
         lineHeight: 18,
         width: this.style.width, height: 18,
-        backgroundColor: 'rgba(0,0,255,0.7)',
+        backgroundColor: 'rgba(142,175,153,1)',
+        textAlign:'center'
       }
     }
   }
@@ -32,12 +33,13 @@ export default {
   </div>
   <div class="content-font" :style="{ top: titleStyle.lineHeight,
                  width: style.width, height: style.height - 18,
-                 backgroundColor: 'rgba(0,0,255,'+blockOpacity+')' }">
+                 backgroundColor: 'rgba(0,0,0,'+blockOpacity+')' }">
     <slot/>
   </div>
 </div>
 </template>
 
-<style scoped>
+<style>
+/* css文件要单独放到没有scoped设置的style标签中，规避css属性redefine的warning */
 @import "./FontStyle.css";
 </style>  

package/CssPreprocessor/utils/FontStyle.css

@@ -1,6 +1,6 @@
 
 .title-font {
-  color: #0000FF;
+  color:#877c4a;
   font-family: 黑体;
   font-size: 16;
   text-align: center;

package/CssPreprocessor/utils/Panel.vue

@@ -17,7 +17,7 @@ export default {
       return this.style.width / this.panelData.title.length;
     },
     separatorColor() {
-      return 'rgba(0,0,255,0.7)'
+      return 'rgba(142,175,153,1)'
     }
   },
 }

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/FocusMoveStyle/App.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { MetroWidget, HORIZONTAL, JsvNinePatch, useFocusHub } from "jsview";
+import { MetroWidget, HORIZONTAL, JsvNinePatch, useFocusHub, getTextWidth } from "jsview";
 import Item from "./Item.vue";
-import borderImageUrl from "./assets/focus.png";
+import redCircle from "./assets/redCircle.png"
 import { reactive, provide, onMounted } from "vue";
 const focusHub = useFocusHub();
 const randomColor = () => {
@@ -55,14 +55,18 @@ const focusFrameController = {
 };
 provide("focusFrameController", focusFrameController);
 
+const contentData = ['推荐', '电视剧', '电影', '云影院', '综艺', '儿童', '动漫', '游戏', '纪录片', '体育', '知识', '导航']
+const SizeObj = {
+  fontSize: 40
+}
 const provideData = () => {
   const data = [];
-  for (let i = 0; i < 20; ++i) {
+  for (let i = 0; i < 12; ++i) {
     data.push({
-      width: 100 + Math.round(Math.random() * 4) * 20,
-      height: 50,
+      width: getTextWidth(contentData[i], SizeObj) + 60,
+      height: 65,
       color: randomColor(),
-      content: i,
+      content: contentData[i],
     });
   }
   return data;
@@ -84,52 +88,39 @@ onMounted(() => {
 
 <template>
   <div :style="{ width: 1280, height: 720, backgroundColor: '#007788' }">
-    <div
-      :style="{
-        textAlign: 'center',
-        fontSize: 30,
-        lineHeight: 50,
-        color: '#ffffff',
-        left: 140,
-        top: 20,
-        width: 1000,
-        height: 50,
-        backgroundColor: 'rgba(27,38,151,0.8)',
-      }"
-    >
+    <div :style="{
+      textAlign: 'center',
+      fontSize: 30,
+      lineHeight: 50,
+      color: '#ffffff',
+      left: 140,
+      top: 20,
+      width: 1000,
+      height: 50,
+      backgroundColor: 'rgba(27,38,151,0.8)',
+    }">
       爬行样式的焦点示例
     </div>
-    <metro-widget
-      name="myWidget"
-      :top="100"
-      :left="40"
-      :width="1200"
-      :height="110"
-      :direction="HORIZONTAL"
-      :provideData="provideData"
-      :measures="measures"
-      :padding="{ left: 20, right: 20, top: 20, height: 20 }"
-    >
+    <metro-widget name="myWidget" :top="100" :left="40" :width="1200" :height="110" :direction="HORIZONTAL"
+      :provideData="provideData" :measures="measures" :padding="{ left: 20, right: 20, top: 20, height: 20 }">
       <template #renderItem="{ data, onAction, query }">
         <item :data="data" :onAction="onAction" :query="query" />
       </template>
       <template #background>
-        <jsv-nine-patch
-          :style="{
-            width: focusSize.width,
-            height: focusSize.height,
-            top: focusSize.top,
-            left: focusSize.left,
-          }"
-          :onTransitionEnd="focusSize.onTransitionEnd"
-          :imageUrl="borderImageUrl"
-          :imageWidth="55"
-          :centerWidth="1"
-          :borderOutset="13"
-          :imageDspWidth="30"
-          :animTime="0.2"
-          :waitForInit="true"
-        ></jsv-nine-patch>
+        <jsv-nine-patch :style="{
+          width: focusSize.width,
+          height: focusSize.height,
+          top: focusSize.top,
+          left: focusSize.left,
+        }" 
+        :onTransitionEnd="focusSize.onTransitionEnd" 
+        :imageUrl="redCircle" 
+        :imageWidth="35" 
+        :centerWidth="0"
+        :borderOutset="0" 
+        :imageDspWidth="focusSize.height/17*2" 
+        :animTime="0.2" 
+        :waitForInit="true"></jsv-nine-patch>
       </template>
     </metro-widget>
   </div>

package/FocusMoveStyle/Item.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, inject, nextTick } from "vue";
+import { ref, inject } from "vue";
 
 const focusFrameController = inject("focusFrameController");
 
@@ -25,6 +25,7 @@ const onFocus = () => {
   if (focusFrameController) {
     const rect = props.query.templatePosition(props.query.index);
     focusFrameController.onFocusChange(rect);
+    focused.value=true
   }
 };
 
@@ -46,12 +47,13 @@ props.onAction.register("onClick", onClicked);
     <div
       ref="divRef"
       :style="{
-        fontSize: 30,
+        fontSize: 40,
         width: data.width,
         height: data.height,
         color: '#FFFFFF',
-        backgroundColor: data.color,
-        borderRadius: 5,
+        textAlign: 'center',
+        lineHeight: data.height,
+        transform:focused?'scale3d(1.1,1.1,1)':'scale3d(1,1,1)'
       }"
     >
       {{ data.content }}
@@ -59,16 +61,4 @@ props.onAction.register("onClick", onClicked);
   </div>
 </template>
 
-<style scoped>
-.focus {
-  transform: scale3d(1.2, 1.2, 1);
-  transition: transform 0.25s linear;
-  font-size: 30;
-}
-
-.blur {
-  transform: scale3d(1, 1, 1);
-  transition: transform 0.25s linear;
-  font-size: 30;
-}
-</style>
+<style scoped></style>