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

package/DemoForOperator/TabContentVertical/TabContent/ViewSwiper.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { onMounted, inject, ref, watch } from "vue";
+
+const props = defineProps({
+  onEdge: Function,
+  name: String,
+  layout: Object,
+  dataLoader: Function, // (tabId) => Promise
+  animDuration: { type: Number, default: 200 },
+  onFocus: Function,
+  onBlur: Function,
+});
+
+const globalInfo = inject("globalInfo");
+const animState = inject("animState");
+
+const page0Show = ref(false);
+let page0Data = null;
+const page0Anim = ref({ anim: null, onend: null });
+const appSwiper_onFocus = () => {
+  console.log("testtest swiper on focus")
+  props.onFocus();
+};
+const appSwiper_onBlur = () => {
+  console.log("testtest swiper on blur")
+  props.onBlur();
+};
+
+const appSwiper_tabIdWatcher = (newValue, oldValue) => {
+  let direction = newValue > oldValue ? "left" : "right";
+  page0Show.value = false;
+  page0Data = null;
+  page0Anim.value = ref({ anim: null, onend: null });
+  props.dataLoader(newValue).then((data) => {
+    console.log("testtest swiper data", data);
+    if (oldValue > -1) {
+      animState.value = 1;
+    }
+    page0Anim.value = {
+      anim:
+        oldValue != -1
+          ? `app-swiper-${direction}-slide-in ${
+              props.animDuration / 1000
+            }s cubic-bezier(0.05, 0.55, 0.13, 0.78) 1`
+          : null,
+      onend: () => {
+        animState.value = 0;
+      },
+    };
+    page0Data = data;
+    page0Show.value = true;
+  });
+};
+
+watch(
+  () => globalInfo.updateTabId,
+  (newValue, oldValue) => {
+    console.log("ccht updateTabId changed", globalInfo.updateTabId);
+    appSwiper_tabIdWatcher(newValue, oldValue);
+  }
+);
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="name"
+    ref="focusNode"
+    :onAction="{
+      onFocus: appSwiper_onFocus,
+      onBlur: appSwiper_onBlur,
+    }"
+  >
+    <div
+      id="page0"
+      :style="{
+        left: layout.left,
+        top: layout.top,
+        width: layout.width,
+        height: layout.height,
+        animation: page0Anim.anim,
+        animationFillMode: 'forwards',
+      }"
+      @animationend="page0Anim.onend"
+    >
+      <slot v-if="page0Show" :data="page0Data" :onEdge="onEdge"></slot>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style>
+@keyframes app-swiper-left-slide-in {
+  from {
+    transform: translate3d(0px, 180px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+    /* animation-timing-function: cubic-bezier(0.05, 0.55, 0.13, 0.78); */
+  }
+}
+
+@keyframes app-swiper-right-slide-in {
+  from {
+    transform: translate3d(0px, -180px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+    /* animation-timing-function: cubic-bezier(0.05, 0.55, 0.13, 0.78); */
+  }
+}
+</style>

package/DemoForOperator/TabContentVertical/testData.js

@@ -0,0 +1,76 @@
+// 导入所有图片
+import movieTicket from './assets/movie_ticket.png';
+import varietyShow from './assets/variety_show.png';
+import childrenScience from './assets/children_science.png';
+import tvDrama from './assets/tv_drama.png';
+import documentary from './assets/documentary.png';
+import myAccount from './assets/my_account.png';
+import free from './assets/free.png';
+import opera from './assets/opera.png';
+import vip from './assets/vip.png';
+import sports from './assets/sports.png';
+import homeSelected from './assets/home_selected.png';
+import game from './assets/game.png';
+
+export const testData = [
+  {
+    "indexId": 0,
+    "itemTitle": "电影票",
+    "icon": movieTicket
+  },
+  {
+    "indexId": 1,
+    "itemTitle": "综艺",
+    "icon": varietyShow
+  },
+  {
+    "indexId": 2,
+    "itemTitle": "少儿科普",
+    "icon": childrenScience
+  },
+  {
+    "indexId": 3,
+    "itemTitle": "电视剧",
+    "icon": tvDrama
+  },
+  {
+    "indexId": 4,
+    "itemTitle": "纪录片",
+    "icon": documentary
+  },
+  {
+    "indexId": 5,
+    "itemTitle": "我的",
+    "icon": myAccount,
+  },
+  {
+    "indexId": 6,
+    "itemTitle": "免费",
+    "icon": free,
+  },
+  {
+    "indexId": 7,
+    "itemTitle": "戏曲",
+    "icon": opera,
+  },
+  {
+    "indexId": 8,
+    "itemTitle": "VIP",
+    "icon": vip,
+  },
+  {
+    "indexId": 9,
+    "itemTitle": "体育",
+    "icon": sports,
+  },
+  {
+    "indexId": 10,
+    "itemTitle": "首页",
+    "icon": homeSelected,
+  },
+  {
+    "indexId": 11,
+    "itemTitle": "游戏",
+    "icon": game,
+  },
+];

package/DemoForOperator/Vortex/Vortex/Vortex.vue

@@ -52,6 +52,9 @@
 </template>
 
 <script setup>
+/**
+ * @slot 默认插槽 - 用于放置需要进行漩涡动画的内容
+ */
 import vortexOutShader from "./vortexOut.glsl?raw";
 import vortexInShader from "./vortexIn.glsl?raw";
 
@@ -63,18 +66,36 @@ import {
 } from "jsview";
 
 const props = defineProps({
+  /**
+   * @type {Object} 布局配置对象
+   * @property {string} left - 组件左侧定位（如 '10px'）
+   * @property {string} top - 组件顶部定位（如 '20px'）
+   * @property {string} width - 组件宽度（如 '300px'）
+   * @property {string} height - 组件高度（如 '200px'）
+   */
   layout: {
     type: Object,
     required: true,
   },
+  /**
+   * @type {number} 动画持续时间（单位：秒）
+   * @default 1
+   */
   duration: {
     type: Number,
     default: 1,
   },
+  /**
+   * @type {boolean} 初始显示状态
+   * @default true
+   */
   initShow: {
     type: Boolean,
     default: true,
   },
+  /**
+   * @type {Function} 动画结束回调函数
+   */
   onAnimEnd: {
     type: Function,
   }
@@ -141,6 +162,11 @@ function capture() {
 }
 
 defineExpose({
+  /**
+   * 切换动画状态
+   * @example
+   * componentRef.value.switch();
+   */
   switch() {
     if (state == 0) {
       state = 1;

package/DemoForOperator/routeList.js

@@ -6,137 +6,260 @@
 export default [
   {
     meta: { nameText: '文字跑马灯', },
+    name: 'operator-文字跑马灯',
     path: '/operator/Marquee',
     component: () => import('@shijiu/jsview-vue-samples/Marquee/App.vue'),
   },
   {
     meta: { nameText: '二维码', },
+    name: 'operator-二维码',
     path: '/operator/QrcodeDemo',
     component: () => import('@shijiu/jsview-vue-samples/QrcodeDemo/App.vue'),
   },
   {
     meta: { nameText: '雷达图组件', },
+    name: 'operator-雷达图组件',
     path: '/operator/RadarChart',
     component: () => import('@shijiu/jsview-vue-samples/JsvRadarChart/App.vue')
   },
   {
     meta: { nameText: '进度条组件', },
+    name: 'operator-进度条组件',
     path: '/operator/ProgressBar',
     component: () => import('@shijiu/jsview-vue-samples/ProgressBar/App.vue'),
   },
   {
     meta: { nameText: '透视滚动组件', },
+    name: 'operator-透视滚动组件',
     path: '/operator/Swiper3D',
     component: () => import('@shijiu/jsview-vue-samples/SwiperTest/App.vue'),
   },
   {
     meta: { nameText: '春联、对联组件', },
+    name: 'operator-春联、对联组件',
     path: '/operator/ChunLian',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/ChunLian/App.vue'),
   },
   {
     meta: { nameText: '公祭日黑白屏', },
+    name: 'operator-公祭日黑白屏',
     path: '/operator/GrayFilter',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/GrayFilter/App.vue'),
   },
   {
     meta: { nameText: '动图', },
+    name: 'operator-动图',
     path: '/operator/AnimPic',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/AnimPic/App.vue'),
   },
   {
     meta: { nameText: '焦点', },
+    name: 'operator-焦点',
     path: '/operator/Focus',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Focus/App.vue'),
   },
+  {
+    meta: { nameText: '焦点框阴影', },
+    name: 'operator-焦点框阴影',
+    path: '/operator/FrameShadow',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/FrameShadow/App.vue'),
+  },
   {
     meta: { nameText: '霸屏海报淡入效果落地效果', },
+    name: 'operator-霸屏海报淡入效果落地效果',
     path: '/operator/FullscreenIn',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/FullscreenIn/App.vue'),
   },
   {
     meta: { nameText: '海报强调动画', },
+    name: 'operator-海报强调动画',
     path: '/operator/PosterAnim',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/PosterAnim/App.vue'),
   },
   {
     meta: { nameText: '轮播图', },
+    name: 'operator-轮播图',
     path: '/operator/Swiper',
     component: () => import('@shijiu/jsview-vue-samples/Swiper/App.vue'),
   },
   {
     meta: { nameText: '弹跳动画', },
+    name: 'operator-弹跳动画',
     path: '/operator/Bounce',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Bounce/App.vue'),
   },
   {
     meta: { nameText: '拼图组件', },
+    name: 'operator-拼图组件',
     path: '/operator/Jigsaw',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Jigsaw/App.vue'),
   },
   {
     meta: { nameText: '焦点海报多层叠加突出效果', },
+    name: 'operator-焦点海报多层叠加突出效果',
     path: '/operator/PosterOverflow',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/PosterOverflow/App.vue'),
   },
   {
     meta: { nameText: '推箱效果组件', },
+    name: 'operator-推箱效果组件',
     path: '/operator/Stretch',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Stretch/App.vue'),
   },
   {
     meta: { nameText: '鞭炮组件', },
+    name: 'operator-鞭炮组件',
     path: '/operator/Banger',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Banger/App.vue'),
   },
   {
     meta: { nameText: '礼花组件', },
+    name: 'operator-礼花组件',
     path: '/operator/Firework1',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Firework1/App.vue'),
   },
   {
     meta: { nameText: '精灵图组件(动图)', },
+    name: 'operator-精灵图组件(动图)',
     path: '/operator/Sprite',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Sprite/App.vue'),
   },
   {
-    meta: { nameText: '虹吸组件\n单海报/整页', },
+    meta: { nameText: '虹吸组件\n整页', },
+    name: 'operator-虹吸组件\n整页',
     path: '/operator/Genie',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Genie/App.vue'),
   },
+  {
+    meta: { nameText: '虹吸组件\n单海报', },
+    name: 'operator-虹吸组件\n单海报',
+    path: '/operator/Genie2',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Genie/App2.vue'),
+  },
   {
     meta: { nameText: '漩涡组件\n单海报/整页', },
+    name: 'operator-漩涡组件\n单海报/整页',
     path: '/operator/Vortex',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Vortex/App.vue'),
   },
   {
-    meta: { nameText: '翻书组件(整体页面)', },
+    meta: { nameText: '翻页效果(整体页面)', },
+    name: 'operator-翻页效果(整体页面)',
     path: '/operator/FlipPage',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/FlipPage/App.vue'),
   },
   {
     meta: { nameText: '水波组件', },
+    name: 'operator-水波组件',
     path: '/operator/Ripple',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Ripple/App.vue'),
   },
   {
     meta: { nameText: '粒子喷洒组件', },
+    name: 'operator-粒子喷洒组件',
     path: '/operator/Particle',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Particle/App.vue'),
   },
   {
     meta: { nameText: '剧集列表', },
+    name: 'operator-剧集列表',
     path: '/operator/EpisodeList',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/EpisodeList/App.vue'),
   },
   {
     meta: { nameText: 'tab-content', },
+    name: 'operator-tab-content',
     path: '/operator/TabContent',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/TabContent/App.vue'),
   },
   {
     meta: { nameText: '虚线框', },
+    name: 'operator-虚线框',
     path: '/operator/DashPath',
     component: () => import('@shijiu/jsview-vue-samples/DashPath/AppForOperator.vue'),
   },
+  {
+    meta: { nameText: '翻书', },
+    name: 'operator-翻书',
+    path: '/operator/BookFlip',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/BookFlip/App.vue'),
+  },
+  {
+    meta: { nameText: '模糊弹出框', },
+    name: 'operator-模糊弹出框',
+    path: '/operator/BlurPopup',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Blur/BlurPopup/BlurPopup.vue'),
+  },
+  {
+    meta: { nameText: '模糊进出', },
+    name: 'operator-模糊进出',
+    path: '/operator/BlurInOut',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Blur/BlurInOut/BlurInOut.vue'),
+  },
+  {
+    meta: { nameText: '主色调', },
+    name: 'operator-主色调',
+    path: '/operator/DominantColor',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/DominantColor/App.vue'),
+  },
+  {
+    meta: { nameText: '轮播图', },
+    name: 'operator-轮播图',
+    path: '/operator/Swiper',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Swiper/App.vue'),
+  },
+  {
+    meta: { nameText: '点击动画', },
+    name: 'operator-点击动画',
+    path: '/operator/ClickSpriteAnim',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/ClickSpriteAnim/App.vue'),
+  },
+  {
+    meta: { nameText: '平滑轮播图', },
+    name: 'operator-平滑轮播图',
+    path: '/operator/SmoothSwiper',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/SmoothSwiper/App.vue'),
+  },
+  {
+    meta: { nameText: '纵向爬虫', },
+    name: 'operator-纵向爬虫',
+    path: '/operator/TabContentVertical',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/TabContentVertical/App.vue'),
+  },
+  {
+    meta: { nameText: '声音-跳动', },
+    name: 'operator-声音-跳动',
+    path: '/operator/Sound_Bounce',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Sound/Bounce/App.vue'),
+  },
+  {
+    meta: { nameText: '声音-下雨', },
+    name: 'operator-声音-下雨',
+    path: '/operator/Sound_Rain',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Sound/Rain/App.vue'),
+  },
+  {
+    meta: { nameText: '声音-焦点移动', },
+    name: 'operator-声音-焦点移动',
+    path: '/operator/Sound_FocusMove',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Sound/FocusMove/App.vue'),
+  },
+  {
+    meta: { nameText: 'resize', },
+    name: 'operator-resize',
+    path: '/operator/Resize',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Resize/App.vue'),
+  },
+  {
+    meta: { nameText: '截图缩放', },
+    name: 'operator-截图缩放',
+    path: '/operator/ScreenShootScale',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/ScreenShootScale/App.vue'),
+  },
+  {
+    meta: { nameText: '长聊天框', },
+    name: 'operator-长聊天框',
+    path: '/operator/LongChatBox',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/LongChatBox/App.vue'),
+  }
 ]

package/DemoHomepage/App.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { shallowRef, onMounted, onUnmounted, provide } from "vue";
+import { shallowRef, onMounted, onUnmounted, provide, computed } from "vue";
 import {
   JsvPreload,
   buildPreloadInfo,
@@ -15,10 +15,12 @@ import {
   useFocusHub,
   JsvTouchModeSwitcher,
   JsvFullScrAdjust,
+  JsvScreenFlex
 } from "jsview";
 import { useRouter } from "vue-router";
 import { setDataUrl, getDataUrl } from "../CommonUtils/ResourceData.js";
 import { getSearchQuery } from "../CommonUtils/getSearchQuery.js";
+import WatchTest from "./watchTest.vue";
 
 let DemoResourceBase = shallowRef("");
 let backgroundImageUrl = shallowRef(null);
@@ -30,6 +32,8 @@ window.DebugFocusHub = useFocusHub();
 
 const router = useRouter();
 
+window.JsvCoreApi?.enableConsoleTag?.("SomeTags");
+
 // Android测试指令:
 // am start -n com.qcode.miniappsdktester/.JSVActivity --es MINIAPPNAME "JsViewDemo" --ei MINIAPPLAUNCHMODE 1 --es URL "http://192.168.2.179/js/main.jsv.mjs#/feature/HashParams?a=333&b=444" --es DEBUG "1"
 window.JsView?.addEventListener("onNewIntent", (msg) => {
@@ -52,6 +56,11 @@ let _onPreloadDone = () => {
   jJsvRuntimeBridge.notifyPageLoaded();
 };
 
+// 追加骨架图截图测试项目
+let rCaptureImage = shallowRef(null);
+provide("homeCaptureImage", rCaptureImage);
+
+
 const _OnKeyDown = (ev) => {
   // 结果默认传下来的返回键
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
@@ -92,6 +101,52 @@ onMounted(() => {
   }, 1000);
 });
 
+let lastAValue = 0;
+let aValueWatchTest = computed  (() => {
+  if (testKeepAliveModeText.value % 3 == 0) {
+    lastAValue = testKeepAliveModeText.value;
+  }
+  return lastAValue;
+});
+let lastBValue = 0;
+let bValueWatchTest = computed(() => {
+  if (testKeepAliveModeText.value % 3 == 1) {
+    lastBValue = testKeepAliveModeText.value;
+  }
+  return lastBValue;
+});
+let lastCValue = 0;
+let cValueWatchTest = computed(() => {
+  if (testKeepAliveModeText.value % 3 == 2) {
+    lastCValue = testKeepAliveModeText.value;
+  }
+  return lastCValue;
+});
+
+// 当前屏幕尺寸（来自 JsvScreenFlex 的 onSized）
+let rScreenSize = shallowRef({ width: 0, height: 0 });
+const _onScreenSized = (width, height) => {
+  rScreenSize.value = {
+    width: Math.round(width ?? 0),
+    height: Math.round(height ?? 0),
+  };
+};
+
+const cScreenSizeText = computed(() => {
+  const w = rScreenSize.value?.width ?? 0;
+  const h = rScreenSize.value?.height ?? 0;
+  return `${w} x ${h}`;
+});
+
+const cScreenSizeStyle = computed(() => {
+  return {
+    height: 32,
+    lineHeight: 32,
+    color: "#FFF000",
+    fontSize: 28,
+  };
+});
+
 onUnmounted(() => {
   if (testKeepAliveTimer > 0) {
     console.log("remove homepage interval");
@@ -102,6 +157,9 @@ onUnmounted(() => {
 </script>
 
 <template>
+  <JsvScreenFlex
+    background="https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/owl.jpeg"
+  />
   <JsvFullScrAdjust :childWidth="1280" :childHeight="720">
     <jsv-touch-mode-switcher
       ref="touchModeSwitcherRef"
@@ -120,6 +178,7 @@ onUnmounted(() => {
       <div class="TestKeepAliveDiv">
         {{ "更新页面计数:" + testKeepAliveModeText }}
       </div>
+      <!-- <WatchTest :aValue="aValueWatchTest" :bValue="bValueWatchTest" :cValue="cValueWatchTest" /> -->
       <jsv-focus-block
         :onAction="{
           onKeyDown: _OnKeyDown,
@@ -134,6 +193,20 @@ onUnmounted(() => {
       </jsv-focus-block>
     </jsv-touch-mode-switcher>
   </JsvFullScrAdjust>
+
+  <!-- 与 JsvFullScrAdjust 同级，后渲染覆盖在上层；用 flex 属性定位左下角 -->
+  <JsvScreenFlex
+    :onSized="_onScreenSized"
+    :style="{
+      flexDirection: 'column',
+      justifyContent: 'flex-end',
+      alignItems: 'flex-start',
+    }"
+  >
+    <div :style="cScreenSizeStyle">
+      {{ cScreenSizeText }}
+    </div>
+  </JsvScreenFlex>
 </template>
 
 <style scoped>

package/DemoHomepage/components/BodyFrame.vue

@@ -66,7 +66,12 @@ watch(
     :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
     :onEdge="props.onEdge"
     :initFocusId="initFocusId"
+    :enableItemRenderBreak="true"
+    :placeHolderSetting="{
+      backgroundColor: 'rgba(0, 0, 0, 0)',
+    }"
     :touchFlag="1"
+    :mouseFlag="1"
   >
     <template #renderItem="{ data, query, onEdge, onAction }">
       <Item