@shijiu/jsview-vue-samples 2.3.0 → 2.3.151-test.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,254 @@
 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单海报/整页', },
+    name: 'operator-虹吸组件\n单海报/整页',
     path: '/operator/Genie',
     component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Genie/App.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/components/Item.vue

@@ -61,6 +61,17 @@ const onClick = () => {
 props.onAction.register("onFocus", onFocus);
 props.onAction.register("onBlur", onBlur);
 props.onAction.register("onClick", onClick);
+props.onAction.register("onLongPress", () => {
+  console.log("onLongPress");
+});
+props.onAction.register("onGaze", () => {
+  console.log("onGaze", props.data);
+});
+props.onAction.register("onIgnore", () => {
+  touchModeSwitcherRef.value.unregisterCallback(modeChangeCallback);
+  focused.value = false;
+});
+
 </script>
 
 <template>