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

package/DemoHomepage/router.js

@@ -8,385 +8,978 @@ let routeList = [
   // 功能实例
   {
     meta: { nameText: 'Home', },
+    name: "Home",
     path: '/',
     component: Homepage,
     meta: {
       keepAlive: true // 需要被缓存(测试Router keep alive机制)
     }
   },
+
+  // ========== feature ==========
+  /* 
+   * 基础示例合集
+   * 
+   * 对应的应用场景:
+   * div, img标签, jsview所兼容的css设置样例
+   * (包含通过transition和transform属性来简单实现动画的场景)
+   */
   {
     meta: { nameText: '基础示例合集', },
+    name: "feature-基础示例合集",
     path: '/feature/Basic',
     component: () => import('@shijiu/jsview-vue-samples/Basic/App.vue'),
   },
+
+  /**
+   * Dom文本渲染
+   * 
+   * 对应场景：
+   * 题库后台给的数据是一段 dom 文本需要模仿浏览器显示出来
+   */
+  {
+    meta: { nameText: 'Dom文本渲染', },
+    name: "feature-Dom文本渲染",
+    path: '/feature/DomRenderer',
+    component: () => import('@shijiu/jsview-vue-samples/DomRenderer/App.vue'),
+  },
+
+  /* 
+   * 截图Blob
+   * 
+   * 对应的应用场景:
+   * 1. 对div截图后, 生成blob, 然后用div或者img标签展示此blob的图像的场景
+   * 2. 使用图片url来生成blob, 然后用div或者img标签展示此blob的图像的场景
+   */
+  {
+    meta: { nameText: '截图Blob', },
+    name: 'feature-截图Blob',
+    path: '/feature/ScreenToBlob',
+    component: () => import('@shijiu/jsview-vue-samples/ScreenToBlob/App.vue'),
+  },
+
   // {
   //   meta: { nameText: 'FreeMoveResize', },
   //   path: '/feature/FreeMoveResize',
   //   component: () => import('@shijiu/jsview-vue-samples/FreeMoveResize/App.vue'),
   // },
-  {
-    meta: { nameText: '3d移动动画', },
-    path: '/Operations/3dMove',
-    component: () => import('jsview-vue-samples/Poster3d/App.vue'),
-  },
-  {
-    meta: { nameText: '烟花行进特效', },
-    path: '/Operations/SprayMove',
-    component: () => import('jsview-vue-samples/SprayMove/App.vue'),
-  },
-  {
-    meta: { nameText: '海报图收放组件', },
-    path: '/Operations/PosterPacker',
-    component: () => import('jsview-vue-samples/PosterPacker/App.vue'),
+
+  /* 
+   * Blob加载测试
+   * 
+   * 对应的应用场景:
+   * 使用XMLHttpRequest请求blob，然后使用BlobApi.createObjectURL来创建blob的URL，
+   * 并通过img标签展示blob的图像的场景
+   */
+  {
+    meta: { nameText: 'Blob加载测试', },
+    name: "feature-Blob加载测试",
+    path: '/feature/BlobLoadTest',
+    component: () => import('@shijiu/jsview-vue-samples/BlobLoadTest/App.vue'),
   },
+
+  /* 
+   * div快照功能
+   * 
+   * 对应的应用场景:
+   * 对div截图后, 用另一个div或者img标签展示截图的图像的场景
+   */
   {
     meta: { nameText: 'div快照功能', },
+    name: "feature-div快照功能",
     path: '/feature/BakeViewDemo',
     component: () => import('@shijiu/jsview-vue-samples/BakeViewDemo/App.vue'),
   },
+
+  /* 
+   * FlexDemo
+   * 
+   * 对应的应用场景:
+   * 使用Flex布局的场景, 注意JsvFlexDiv组件只支持一层子的flex, 多层场景要使用JsvFlexCell嵌套
+   */
   {
     meta: { nameText: 'FlexDemo', },
+    name: "feature-FlexDemo",
     path: '/feature/FlexDemo',
     component: () => import('@shijiu/jsview-vue-samples/FlexCellDemo/App.vue')
   },
+
+  /* 
+   * ScreenFlex
+   * 
+   * 对应的应用场景:
+   * 展示用 JsvScreenFlex 组件实现全屏范围的居中对齐, 右上角和左下角对齐的场景
+   * 主要解决在非16:9比例的屏幕上, 制作自适应铺满全屏的UI时如何进行对齐的场景
+   * PS: 普通的16:9应用上非16:9屏幕时, 建议采用背景图铺满, 内容通过JsvScreenFlex居中显示的布局
+   */
   {
     meta: { nameText: 'ScreenFlex', },
+    name: "feature-ScreenFlex",
     path: '/feature/ScreenFlex',
     component: () => import('@shijiu/jsview-vue-samples/FullScreenFlex/App.vue')
   },
+  
+  /*
+   * 连接线Demo
+   * 
+   * 对应的应用场景:
+   * 1. 绘制树状关系图, 脑图等图表场景中绘制连线用
+   * 2. 解决常规div来绘制连线时无法做到的问题，具体如下:
+   *    Z字形连线中其中一个弯折是圆弧或者两个弯折是圆弧的场景需求
+   */
   {
     meta: { nameText: '连接线Demo', },
+    name: "feature-连接线Demo",
     path: '/feature/ConnectLine',
     component: () => import('@shijiu/jsview-vue-samples/ConnectLine/App.vue')
   },
+
+  /* 
+   * 离散焦点自动处理
+   * 源码是一个测试样例, AI编程时不需要参考, 原理就是界面上有位置任意的
+   * 有style.width和style.height尺寸的JsvFocusBlock组件, 
+   * 当上下左右键在这个FocusBlock的onKeyXXX或者onDispatchXXXX处理中都return了false时(表示都不拦截和处理这些导航键)
+   * 框架会按照这些JsvFocusBlock的布局, 自动在这些jsvFocusBlock之间进行焦点切换
+   * 
+   * 对应的应用场景:
+   *    元素简单，且位置不重叠的游戏或运营类场景，EPG等复杂场景不适合
+   */
   {
     meta: { nameText: '离散焦点自动处理', },
+    name: "feature-离散焦点自动处理",
     path: '/feature/DispersedFocusControl',
     component: () => import('@shijiu/jsview-vue-samples/DispersedFocusControl/App.vue'),
   },
-  {
-    meta: { nameText: '离散焦点分布', },
-    path: '/feature/DispersedItemSample',
-    component: () => import('@shijiu/jsview-vue-samples/DispersedItemSample/DispersedItemSample.vue')
-  },
+
+  // 一个简单的空间寻焦算法的样例, 已被自动寻焦样例 DispersedFocusControl 替代
+  // {
+  //   meta: { nameText: '离散焦点分布', },
+  //   name: "feature-离散焦点分布",
+  //   path: '/feature/DispersedItemSample',
+  //   component: () => import('@shijiu/jsview-vue-samples/DispersedItemSample/DispersedItemSample.vue')
+  // },
+  
+  /*
+   * 饼图测试
+   * 
+   * 对应的应用场景:
+   * 需要绘制图表的场景中, 需要绘制饼图的场景, 样例中还提供了调整饼图的分配比例而产生动画的效果。
+   * 除了支持屏图(几个扇形构成)外，还支持环形图(扇形只留扇顶弧形构成一个圆环)
+   * 使用时一定要注意, 传入的所有内容的合不能大于100%, 可以略小于100%, 不足100%的部分会自动补到最后一项中
+   */
   {
     meta: { nameText: '饼图测试', },
+    name: "feature-饼图测试",
     path: '/feature/SecTorTest',
     component: () => import('@shijiu/jsview-vue-samples/SecTorTest/App.vue'),
   },
+
+  /* 
+   * TextureStore测试
+   * 
+   * 对应的应用场景:
+   * 手搓出可用于<div>标签的style.backgroundImage或者<img>标签的src的图片资源临时url
+   * 但此用例只展示 JsvTextureStoreApi 的 canvasTexture 接口的用法,
+   * 此样例包含子场景: 
+   *    和JsvNinePatch配合的的直角框和圆角框
+   *    半圆
+   *    纯色圆角方块
+   *    渐变圆角方块
+   */
   {
     meta: { nameText: 'TextureStore测试', },
+    name: "feature-TextureStore测试",
     path: '/feature/TextureStoreTest',
     component: () => import('@shijiu/jsview-vue-samples/TextureStoreTest/App.vue'),
   },
+
+  /*
+   * NinePatch对齐测试
+   * 
+   * 对应的应用场景:
+   * 圆角矩形要套一个外边缘框的场景, 且框为纯色的最简解决方法。
+   * 使用JsvNinePatch组件, 且图片资源由代码生成(JsvTextureBuilder.buildCircleNinePatchTexture)
+   */
   {
     meta: { nameText: 'NinePatch对齐测试', },
+    name: "feature-NinePatch对齐测试",
     path: '/feature/NinePatchTester',
     component: () => import('@shijiu/jsview-vue-samples/NinePatchTester/App.vue'),
   },
+
+  /* 
+   * NativeSharedView测试
+   * 
+   * 对应的应用场景:
+   * 使用JsvNativeSharedDiv组件并监听其尺寸和位置变化的场景
+   */
   {
     meta: { nameText: 'NativeSharedView测试', },
+    name: "feature-NativeSharedView测试",
     path: '/feature/TestNativeSharedView',
     component: () => import('@shijiu/jsview-vue-samples/TestNativeSharedView/App.vue'),
   },
+
+  /*
+   * 仅测试, AI编程时, 不要参考
+   * CSS预处理
+   * 
+   */
   {
     meta: { nameText: 'CSS预处理', },
+    name: "feature-CSS预处理",
     path: '/feature/CssPreprocessor',
     component: () => import('@shijiu/jsview-vue-samples/CssPreprocessor/App.vue'),
   },
+
+  /*
+   * 可视化变化通知
+   * 
+   * 对应的应用场景:
+   * EPG布局, 监控视频窗口在滑动过程中是否移除屏幕时, 并在移除屏幕时进行播放停止, 移回屏幕时进行播放恢复的场景
+   * 以及一些放在MetroWidget中的, 需要关注由于MetroWidget滚动而导致其内容移出/移回屏幕的场景
+   */
   {
     meta: { nameText: '可视化变化通知', },
+    name: "feature-可视化变化通知",
     path: '/feature/VisibleSensorDemo',
     component: () => import('@shijiu/jsview-vue-samples/VisibleSensorDemo/App.vue'),
   },
+
+  /*
+   * 仅测试, AI编程时, 不要参考
+   * 快速刷新的表格布局组件
+   * 
+   */
   {
     meta: { nameText: '快速刷新的表格布局组件', },
+    name: "feature-快速刷新的表格布局组件",
     path: '/feature/GridDemo',
     component: () => import('@shijiu/jsview-vue-samples/GridDemo/App.vue'),
   },
+
+  /*
+   * 仅测试, AI编程时, 不要参考
+   * 有命名空间的焦点切换
+   * 
+   */
   {
     meta: { nameText: '有命名空间的焦点切换', },
+    name: "feature-有命名空间的焦点切换",
     path: '/feature/BasicFocusControl',
     component: () => import('@shijiu/jsview-vue-samples/BasicFocusControl/App.vue'),
   },
+
+  /*
+   * 仅测试, AI编程时, 不要参考
+   * Hash方式路由切换
+   * 
+   */
   {
     meta: { nameText: 'Hash方式路由切换', },
+    name: "feature-Hash方式路由切换",
     path: '/feature/HashHistory',
     props: { routePath: '/feature/HashHistory' },
     component: () => import('@shijiu/jsview-vue-samples/HashHistory/App.vue'),
   },
-  {
-    meta: { nameText: '翻牌游戏', },
-    path: '/Game/FlipCard',
-    component: () => import('@shijiu/jsview-vue-samples/FlipCard/App.vue'),
-  },
+
+  /*
+   * 设置颜色空间
+   * 
+  //  * 对应的应用场景:
+   * 海报资源内存使用较大, 愿意以时间换内存时, 可通过如样例那样的
+   * 设置data-jsv-img-color-space为RGB_565来节省内存
+   * 原理是JsView引擎会自动将解码出来的RGBA_8888图片存储成RGB_565的bitmap以节省一半内存
+   * 特别注意: 如果要用JsvPreload进行预加载时，预加载的图片和尺寸和颜色空间要和实际在img标签中设置的完全一致才能有
+   * 预加载的效果(预加载效果是加载完后， img标签再展示时就不会因为要一步加载图片而引起闪动的问题)
+   */
   {
     meta: { nameText: '设置颜色空间', },
+    name: "feature-设置颜色空间",
     path: '/feature/ColorSpace',
     component: () => import('@shijiu/jsview-vue-samples/ColorSpace/App.vue'),
   },
+
+  /*
+   * 制定Texture尺寸
+   * 
+   * 对应的应用场景:
+   * 海报资源内存使用较大, 愿意以时间换内存时, 可通过如样例那样的
+   * 设置data-jsv-img-scaledown-tex为true来节省内存
+   * 原理是JsView只存储图片压缩尺寸后的bitmap, 而不是原始的尺寸的图片以节省内存
+   * 特别注意: 如果要用JsvPreload进行预加载时，预加载的图片和尺寸和颜色空间要和实际在img标签中设置的完全一致才能有
+   * 预加载的效果(预加载效果是加载完后， img标签再展示时就不会因为要一步加载图片而引起闪动的问题)
+   */
   {
     meta: { nameText: '制定Texture尺寸', },
+    name: "feature-制定Texture尺寸",
     path: '/feature/TextureSize',
     component: () => import('@shijiu/jsview-vue-samples/TextureSize/App.vue'),
   },
+
+  /*
+   * 长文字
+   * 
+   * 对应的应用场景:
+   * 需要展示诸如用户协议，大片长端纯文本的场景
+   * 此样例也是 JsvScrollBox 组件的典型应用场景, 解决了一个长条形的滚动窗口如何和其右边进度条联动的场景。
+   * 同时 JsvScrollBox 支持触控拖动, 触控fling, 进度条点击跳转和鼠标滚动这几个场景
+   * 
+   * 长内容并且右边有可点击快速定位的滚动条的场景。
+   * 会用两个 JsvScrollBox 来完成此场景, 一个JsvScrollBox用来展示长内容, 一个JsvScrollBox用来展示滚动条。
+   * 用linkName和syncWith来关联两个JsvScrollBox, 使得两个JsvScrollBox的进度保持一致。
+   */
   {
     meta: { nameText: '长文字', },
+    name: "feature-长文字",
     path: '/feature/LongText',
     component: () => import('@shijiu/jsview-vue-samples/LongText/App.vue'),
   },
+
+  /*
+   * 长文字Latex
+   * 
+   * 对应的应用场景:
+   * 同 “长文字” 样例, 区别只是纯文本中可以有LaTex的写法
+   */
   {
     meta: { nameText: '长文字Latex', },
+    name: "feature-长文字Latex",
     path: '/feature/LongTextLatex',
     component: () => import('@shijiu/jsview-vue-samples/LongTextLatex/App.vue'),
   },
+
+  /*
+   * 二维码
+   * 
+   * 对应的应用场景:
+   * 所以使用二维码的场景，在JsView中可以通过字符串生成二维码图片并展示
+   * 这个是JsvQrcode组件的典型应用场景, 主要展示了如下特性:
+   * 1. 字符串同步生成二维码(界面出现时不会一闪, 但是有可能会卡按键操作)
+   * 2. 字符串异步生成二维码(界面出现时会一闪才出, 但是不会卡按键操作)
+   * 3. 中心小图标绘制方案
+   * 4. 容错级别指定
+   */
   {
     meta: { nameText: '二维码', },
+    name: "feature-二维码",
     path: '/feature/QrcodeDemo',
     component: () => import('@shijiu/jsview-vue-samples/QrcodeDemo/App.vue'),
   },
+
+  /*
+   * 文字阴影
+   * 
+   * 对应的应用场景:
+   * 适合要给文字添加阴影的场景
+   * 需要展示在JsView场景下所支持的所有的文字阴影的写法，
+   * 注意!!! 不要使用所列写法以外的CSS属性来做文字阴影
+  */
   {
     meta: { nameText: '文字阴影', },
+    name: "feature-文字阴影",
     path: '/feature/TextShadowDemo',
     component: () => import('@shijiu/jsview-vue-samples/TextShadowDemo/App.vue'),
   },
+
+  /*
+   * 多行文字区域内对齐
+   * 
+   * 对应的应用场景:
+   * 适合多行纯文本内容进行区域内对齐(居中，居左，居右)的场景
+   * 注意!!! 遇到多行文本居中的场景, 不要用非jsview支持的css的属性来进行居中, 要用JsvTextBox组件和其属性来完成
+   * 此样例也是JsvTextBox组件的典型应用场景
+  */
   {
     meta: { nameText: '多行文字区域内对齐', },
+    name: "feature-多行文字区域内对齐",
     path: '/feature/TextBox',
     component: () => import('@shijiu/jsview-vue-samples/TextBox/App.vue'),
   },
-  // TODO: 改为FreeMove后再激活
-  // {
-  //   meta: { nameText: '抛物运动写法样例', },
-  //   path: '/Game/ThrowMoveDemo',
-  //   component: () => import('@shijiu/jsview-vue-samples/ThrowMoveDemo/App.vue'),
-  // },
-  {
-    meta: { nameText: '精灵图', },
-    path: '/Game/SpriteImage',
-    component: () => import('@shijiu/jsview-vue-samples/SpriteImage/App.vue'),
-  },
+
+  /*
+   * 文字滚动(标题跑马灯)
+   * 
+   * 对应的应用场景:
+   * 适合需要展示标题跑马灯的场景
+   * 此样例也是JsvMarquee组件的典型应用场景
+  */
   {
     meta: { nameText: '文字滚动(标题跑马灯)', },
+    name: "feature-文字滚动(标题跑马灯)",
     path: '/feature/Marquee',
     component: () => import('@shijiu/jsview-vue-samples/Marquee/App.vue'),
   },
+
+  /*
+   * 文字输入
+   * 
+   * 对应的应用场景:
+   * 此样例是JsvInput组件的典型应用场景
+   * JsvInput组件是用来和android系统的Ime进行通讯的组件
+   * 通常平板产品会需要通过ime进行输入，而电视产品由于ime不方便所以都不采用ime输入
+  */
   {
     meta: { nameText: '文字输入', },
+    name: "feature-文字输入",
     path: '/feature/Input',
     component: () => import('@shijiu/jsview-vue-samples/Input/App.vue'),
   },
-  {
-    meta: { nameText: '情景主题效果:雨', },
-    path: '/Operations/TombSweepingDayTest',
-    component: () => import('@shijiu/jsview-vue-samples/TombSweepingDayTest/App.vue'),
-  },
-  {
-    meta: { nameText: '.9图焦点框漂移', },
-    path: '/Operations/NinePatchDemo',
-    component: () => import('@shijiu/jsview-vue-samples/NinePatchDemo/App.vue'),
-  },
-  {
-    meta: { nameText: '动图', },
-    path: '/Operations/AnimPicture',
-    component: () => import('@shijiu/jsview-vue-samples/AnimPicture/App.vue'),
-  },
-  {
-    meta: { nameText: '粒子效果', },
-    path: '/Operations/SprayView',
-    component: () => import('@shijiu/jsview-vue-samples/SprayView/App.vue'),
-  },
-  {
-    meta: { nameText: '长图片', },
-    path: '/Operations/LongImage',
-    component: () => import('@shijiu/jsview-vue-samples/LongImage/App.vue'),
-  },
-  {
-    meta: { nameText: '拼图demo', },
-    path: '/Operations/MaskClip',
-    component: () => import('@shijiu/jsview-vue-samples/MaskClip/App.vue'),
-  },
-  {
-    meta: { nameText: 'SoundPool', },
-    path: '/Game/SoundPool',
-    component: () => import('@shijiu/jsview-vue-samples/SoundPool/App.vue'),
-  },
-  {
-    meta: { nameText: 'TextureAnimation', },
-    path: '/Operations/TextureAnimation',
-    component: () => import('@shijiu/jsview-vue-samples/TextureAnimation/App.vue'),
-  },
-  {
-    meta: { nameText: '焦点框旋转光效果', },
-    path: '/Operations/TextureAnimation2',
-    component: () => import('@shijiu/jsview-vue-samples/TextureAnimation/App3.vue'),
-  },
-  {
-    meta: { nameText: '公祭日黑白效果', },
-    path: '/Operations/GrayDown',
-    component: () => import('@shijiu/jsview-vue-samples/FilterDemo/App.vue'),
-  },
-  {
-    meta: { nameText: '水波特效', },
-    path: '/Operations/Ripple',
-    component: () => import('@shijiu/jsview-vue-samples/Ripple/App.vue'),
-  },
+
+  /*
+   * 预加载
+   * 
+   * 对应的应用场景:
+   * 用于解决由于图片异步加载导致图片切换时闪动问题
+   * 此样例是JsvPreload组件的典型应用场景
+   * 原理是: 通过JsvPreload组件将目标图片的bitmap加载到内存, 
+   * 并通过JsvPreload这个vue组件的生命周期来管理这个内存中的bitmap的生命周期(两者生命周期相同)
+   * 注意点:
+   * 1. 对于展示时会设置 data-jsv-img-scaledown-tex 和 data-jsv-img-color-space 的场景
+   *    要在JsvPreload的图片项目配置中也设置相同的配置(参照JsvPreload组件设置属性的接口, 和img标签的这两个属性并不完全同名)
+   * 2. 预加载内存消耗较大, 内存按照bitmap来计算 = width * height * 4 bytes
+   *    建议JsvPreload的总内存不要超过10M(1920x1080的背景图不要超过3张)
+  */
   {
     meta: { nameText: '预加载', },
+    name: "feature-预加载",
     path: '/feature/Preload',
     component: () => import('@shijiu/jsview-vue-samples/Preload/App.vue'),
   },
+
+  /*
+   * AB图片切换
+   * 
+   * 对应的应用场景:
+   * 此样例是JsvABImage组件的典型应用场景
+   * JsvABImage是用来解决按钮等AB图, 焦点和非焦点是两张不同的图片, 切换时不要有闪烁(未加载完成前不要切换)的问题
+   * 原理: JsvABImage组件借助JsvSmartImage组件实现了AB图片切换的功能, 主要原理是A切换到B时, B加载完成后才会进行切换
+   * 此方案的AB图可以支持A图为jpg, png这种静态图, 而B图位webp或者gif的这种场景
+   * 比用JsvPreload将所有B图都缓存起来的解决方案更省内存
+  */
+  {
+    meta: { nameText: 'AB图片切换', },
+    name: "feature-AB图片切换",
+    path: '/feature/ABImageAlt',
+    component: () => import('@shijiu/jsview-vue-samples/ABImageAlt/App.vue'),
+  },
+
+  /*
+   * 仅测试, AI编程时, 不要参考
+   * 图片组件响应式测试
+   * 
+   * JsvPosterDiv和JsvPosterImage组件图片内容变化的测试用例
+   * (也是JsvSmartDiv和JsvSmartImage组件的典型测试用例)
+  */
+  {
+    meta: { nameText: '图片组件响应式测试', },
+    name: "feature-图片组件响应式测试",
+    path: '/feature/ReactiveTest',
+    component: () => import('@shijiu/jsview-vue-samples/ReactiveTest/App.vue'),
+  },
+
+  /*
+   * 仅测试, AI编程时, 不要参考
+   * 单图片透明
+   * 
+   * img标签单设opacity属性来实现图片透明效果的测试用例
+   * 注意: div标签不支持设置opacity
+  */
   {
     meta: { nameText: '单图片透明', },
+    name: "feature-单图片透明",
     path: '/feature/ViewOpacity',
     component: () => import('@shijiu/jsview-vue-samples/ViewOpacity/App.vue'),
   },
+
+  /* 
+   * 仅测试, AI编程时, 不要参考
+   * 图片缩小算法
+   * 
+   * 测试img标签单设data-jsv-img-scaledown-tex属性来实现图片缩小场景下, 执行的性能和效果
+  */
   {
     meta: { nameText: '图片缩小算法', },
+    name: "feature-图片缩小算法",
     path: '/feature/ScaleDownNeon',
     component: () => import('@shijiu/jsview-vue-samples/ScaleDownNeon/App.vue'),
   },
+
+  /*
+   * 渐变Texture
+   * 
+   * 对应的应用场景:
+   * 用于要展示渐变色背景图的场景, 支持垂直, 水平, 对角, 多色渐变
+  */
   {
     meta: { nameText: '渐变Texture', },
+    name: "feature-渐变Texture",
     path: '/feature/GradientTexture',
     component: () => import('@shijiu/jsview-vue-samples/GradientTexture/App.vue'),
   },
-  {
-    meta: { nameText: '碰撞检测', },
-    path: '/Game/Collision',
-    component: () => import('@shijiu/jsview-vue-samples/Collision/App.vue'),
-  },
-  {
-    meta: { nameText: '碰撞即停', },
-    path: '/Game/ImpactStop',
-    component: () => import('@shijiu/jsview-vue-samples/ImpactStop/App.vue'),
-  },
-  {
-    meta: { nameText: '滚动图', },
-    path: '/Operations/Swiper',
-    component: () => import('@shijiu/jsview-vue-samples/Swiper/App.vue'),
-  },
+
+  /*
+   * 下载接口示例
+   * 
+   * 对应的应用场景:
+   * JsvPreDownloader的典型应用场景
+   * 解决要对图片进行预下载的场景, 以优化图片的加载性能
+   * 但不宜过多，因为存储限制，预下载太多的图片会被先进新出的缓存逻辑顶掉, 而达不到图片加载的优化效果
+  */
   {
     meta: { nameText: '下载接口示例', },
+    name: "feature-下载接口示例",
     path: '/feature/JsvPreDownloader',
     component: () => import('@shijiu/jsview-vue-samples/JsvPreDownloader/App.vue'),
   },
-  {
-    meta: { nameText: '焦点移动样式', },
-    path: '/Operations/FocusMoveStyle',
-    component: () => import('@shijiu/jsview-vue-samples/FocusMoveStyle/App.vue'),
-  },
+
+  /*
+   * 仅测试, AI编程时, 不要参考
+   * Mockjs测试
+   * 
+   * 测试Mockjs的测试用例
+  */
   {
     meta: { nameText: 'Mockjs测试', },
+    name: "feature-Mockjs测试",
     path: '/feature/MockjsDemo',
     component: () => import('@shijiu/jsview-vue-samples/MockjsDemo/App.vue'),
   },
-  {
-    meta: { nameText: '红包雨', },
-    path: '/Game/GiftRain',
-    component: () => import('@shijiu/jsview-vue-samples/GiftRain/App.vue'),
-  },
-  {
-    meta: { nameText: '雷达图', },
-    path: '/Game/RadarChart',
-    component: () => import('@shijiu/jsview-vue-samples/JsvRadarChart/App.vue')
-  },
-  // TODO: 等改为对接FreeMoveActor后再恢复
-  // {
-  //   meta: { nameText: '跑酷游戏', },
-  //   path: '/Game/Parkour',
-  //   component: () => import('@shijiu/jsview-vue-samples/Parkour/App.vue')
-  // },
+
+  /*
+   * Hash参数
+   * 
+   * 对应的应用场景:
+   * 一个读取URL的deepLink中信息的样例
+   * 对应场景有, 
+   * 1. 读取 window.locaiton.search的内容
+   * 2.  从vue-router读取参数
+  */
   {
     meta: { nameText: 'Hash参数', },
+    name: "feature-Hash参数",
     path: '/feature/HashParams',
     component: () => import('@shijiu/jsview-vue-samples/HashParams/App.vue'),
   },
+
+  /*
+   * 仅测试, AI编程时, 不要参考
+   * 按键打断描画
+   * 
+   * JsvRenderBreak组件测试, 此组件可以将废弃, 不建议应用层直接使用
+  */
   {
     meta: { nameText: '按键打断描画', },
+    name: "feature-按键打断描画",
     path: '/feature/BreakRender',
     component: () => import('@shijiu/jsview-vue-samples/BreakRender/App.vue'),
   },
+
+  /* 
+   * latex示例
+   * 
+   * 对应的应用场景:
+   * 使用于<div>标签中的文字需要展示
+   * 1. 文本中间部分文字变色的场景
+   * 2. 文本中间部分文字加粗的场景
+   * 3. 文本中间部分文字斜体的场景
+   * 4. 文本中间部分文字下划线的场景
+   * 5. 文本中间部分文字删除线的场景
+   * 原理: 用LaTex的语法来解决原本需要JsView不支持的css的属性才能实现的以上文字效果
+  */
   {
     meta: { nameText: 'latex示例', },
+    name: "feature-latex示例",
     path: '/feature/LatexDemo',
     component: () => import('@shijiu/jsview-vue-samples/LatexDemo/App.vue'),
   },
+
+  /* 
+   * GetRect示例
+   * 
+   * 对应的应用场景:
+   * 想知道一个div相对于屏幕左上角的实际绘制位置的场景(包括transform或者keyframe动画等变化引起的位置和尺寸变化)。
+   * 只能异步获取位置信息
+   * div元素扩展接口jsvGetBoundingClientRect的经典使用场景
+   * 
+   * 和下面网站呼应
+   * https://jsview-dev.shijiutv.com/guide/4.standard-features/4.2.html5-elements.html#element%E6%96%B9%E6%B3%95
+  */
   {
     meta: { nameText: 'GetRect示例', },
+    name: "feature-GetRect示例",
     path: '/feature/GetRect',
     component: () => import('@shijiu/jsview-vue-samples/GetBoundingClientRect/App.vue'),
   },
+
+  /*
+   * 仅测试, AI编程时, 不要参考
+   * 动态Class示例
+   * 
+  */
   {
     meta: { nameText: '动态Class示例', },
+    name: "feature-动态Class示例",
     path: '/feature/DynamicClass',
     component: () => import('@shijiu/jsview-vue-samples/DynamicClass/App.vue'),
   },
+
+  /*
+   * 仅测试, AI编程时, 不要参考
+   * Class动态切换示例
+   * 
+  */
   {
     meta: { nameText: 'Class动态切换示例', },
+    name: "feature-Class动态切换示例",
     path: '/feature/ClassDynamicSwitching',
     component: () => import('@shijiu/jsview-vue-samples/ClassDynamicSwitching/App.vue'),
   },
+
+  /*
+   * JsvLine示例
+   * 
+   * 对应的应用场景:
+   * 绘制一条斜线无锯齿的线, 比用div + backgroundColor 来说, 其优势在于斜线时没有锯齿
+  */
   {
     meta: { nameText: 'JsvLine示例', },
+    name: "feature-JsvLine示例",
     path: '/feature/JsvLine',
     component: () => import('@shijiu/jsview-vue-samples/JsvLine/App.vue'),
   },
-  // {
-  //   meta: { nameText: 'FreeMove示例', },
-  //   path: '/feature/FreeMove',
-  //   component: () => import('@shijiu/jsview-vue-samples/FreeMove/App.vue'),
-  // },
+
+  /*
+   * 
+   * 仅测试, AI编程时, 不要参考
+   * FreeMove示例
+   * 
+  */
+  {
+    meta: { nameText: 'FreeMove示例', },
+    path: '/feature/FreeMove',
+    component: () => import('@shijiu/jsview-vue-samples/FreeMove/App.vue'),
+  },
+
+  /*
+   * 思维导图示例
+   * 
+   * 对应的应用场景:
+   * 需要绘制树状结构图或者脑图的场景, 
+   * 此样例是JsvMindMap组件的典型应用场景
+   * 解决了这类图像的在遥控器的只有上下左右键场景下的操作问题。
+   * JsvMindMap也是一个内嵌了JsvFocusBlok的组件, 可通过FocusHub.setFocus来设置焦点
+  */
   {
     meta: { nameText: '思维导图示例', },
+    name: "feature-思维导图示例",
     path: '/feature/MindMap',
     component: () => import('@shijiu/jsview-vue-samples/MindMap/App.vue'),
   },
+  
+  /* 
+   * 仅测试, AI编程时, 不要参考
+   * latex公式
+   * 
+  */
   {
     meta: { nameText: 'latex公式', },
+    name: "feature-latex公式",
     path: '/feature/LatexFormula',
     component: () => import('@shijiu/jsview-vue-samples/LatexFormula/App.vue'),
   },
+
+  /*
+   * 文字大小限制
+   * 
+   * 对应的应用场景:
+   * 用于解决文字内容多少不确定, 但是又要占用一定的尺寸的场景。
+   * 用JsvTextBox组件的minWidth、maxWidth、minHeight、maxHeight配置，
+   * 来解决没法用JsView不识别的css中的同名属性(minWidth、maxWidth、minHeight、maxHeight)来解决文字排版场景
+  */
+  {
+    meta: { nameText: '文字大小限制', },
+    name: 'feature-文字大小限制',
+    path: '/feature/TextSizeLimit',
+    component: () => import('@shijiu/jsview-vue-samples/TextSizeLimit/App.vue'),
+  },
+
+  /* 
+   * 分行API
+   * 
+   * 对应的应用场景:
+   * TextTools.breakLines的使用样例
+   * 对应场景为需要对文字的行数进行探测, 以及要对每行文字有后处理的场景
+  */
+  {
+    meta: { nameText: '分行API', },
+    name: 'feature-分行API',
+    path: '/feature/BreakLines',
+    component: () => import('@shijiu/jsview-vue-samples/BreakLinesApi/App.vue')
+  },
+
+  /*
+   * 同步解码
+   * 
+   * 对应的应用场景:
+   * 用于解决默认的图片解码为异步和其他内容不同时出现的问题
+   * 具体处理为 JsvPosterImage 组件将 syncDraw 属性设置为 true
+   * 其逻辑为:
+   * 1. 若图片已经下载过, 则会堵住渲染线程，等到解码完后后和其他内容一起绘制, 
+   *  所以图片最好用JsvPreDownloader来完成下载, 或者用JsvPreload的downloadList属性来完成下载
+   * 2. 若图片未下载过, 则仍然会异步下载, 异步解码, 相当于同步解码这个开关不生效
+  */
+  {
+    meta: { nameText: '同步解码', },
+    name: 'feature-同步解码',
+    path: '/feature/SyncDecode',
+    component: () => import('@shijiu/jsview-vue-samples/SyncDecode/App.vue')
+  },
+
+  /*
+   * 仅测试, AI编程时, 不要参考
+   * 预解码
+   * 
+   * 后续预解码功能做完后, 再确认是否可用于AI编程参考
+  */
+  {
+    meta: { nameText: '预解码', },
+    name: 'feature-预解码',
+    path: '/feature/PreDecode',
+    component: () => import('@shijiu/jsview-vue-samples/PreDecode/App.vue')
+  },
+
+  /*
+   * 帧率限制
+   * 
+   * 对应的应用场景:
+   * 为了解决在一些设备上长时间保持高帧率绘制会导致设备高功率运转太久会过热的问题
+   * 通过例如 window.JsvCoreApi.setIdleFps(true, 5, 5000) 这样的设置
+   * 让设备在无用户操作(按键和触控等操作)5000毫秒后, 帧率降到5fps, 当用户有操作时又会立刻回复到原来的帧率, 如此循环
+  */
+  {
+    meta: { nameText: '帧率限制', },
+    name: 'feature-帧率限制',
+    path: '/feature/FpsLimit',
+    component: () => import('@shijiu/jsview-vue-samples/FpsLimit/App.vue')
+  },
+
+  // ========== operation ==========
+  /*
+   * 3d移动动画
+   * 
+   * 对应的应用场景:
+   * 想让一个区域内的内容进行rotate或者设置z轴后, 有近大远小的透视效果的场景
+   * Jsv3dStage组件的典型应用场景, 在一个指定区域内设置透视, 然后在其中的div的transform引起有z轴区别时有透视效果
+   * Jsv3dDiv和div相比, Jsv3dDiv图片会把边缘进行过渡处理从而消除锯齿感, 并且Jsv3dDiv可设置z轴值, 而div当倾斜时会有锯齿
+  */
+  {
+    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: '情景主题效果:雨', },
+    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/ApicSwitch',
+    component: () => import('@shijiu/jsview-vue-samples/ApicSwitch/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: '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: "Operations-滚动图",
+    path: '/Operations/Swiper',
+    component: () => import('@shijiu/jsview-vue-samples/Swiper/App.vue'),
+  },
+  {
+    meta: { nameText: '焦点移动样式', },
+    name: "Operations-焦点移动样式",
+    path: '/Operations/FocusMoveStyle',
+    component: () => import('@shijiu/jsview-vue-samples/FocusMoveStyle/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: '自定义shader', },
+    name: "Operations-自定义shader",
+    path: '/Operations/CustomShader',
+    component: () => import('@shijiu/jsview-vue-samples/CustomShader/App.vue'),
+  },
+  {
+    meta: { nameText: '虚线框测试用例', },
+    name: "Operations-虚线框测试用例",
+    path: '/Operations/DashPath',
+    component: () => import('@shijiu/jsview-vue-samples/DashPath/App.vue'),
+  },
+  // {
+  //   meta: { nameText: '透视镜效果样例', },
+  //   path: '/Operations/DriftScopeTest',
+  //   component: () => import('@shijiu/jsview-vue-samples/DriftScopeTest/App.vue'),
+  // },
+  {
+    meta: { nameText: '二维统计图样例', },
+    name: 'Operations-二维统计图样例',
+    path: '/Operations/DataChart',
+    component: () => import('@shijiu/jsview-vue-samples/CanvasDrawChart/App.vue')
+  },
+  {
+    meta: { nameText: 'MD+LaTex', },
+    name: 'Operations-Markdown',
+    path: '/Operations/Markdown',
+    component: () => import('@shijiu/jsview-vue-samples/Markdown/App.vue')
+  },
+
+  // ========== touch ==========
+  /*
+   * 点击Div
+   * 
+   * 对应的应用场景:
+   * 单个div标签追加触控功能的场景
+   * 只响应点击的话，@click即可, 需要更多触控功能的话，需要div.jsvSetTapListener来设置
+   * jsvSetTapListener的经典使用场景
+   * 和下面网站呼应
+   * https://jsview-dev.shijiutv.com/guide/4.standard-features/4.8.touch-usage.html#%E8%A7%A6%E6%8E%A7%E5%8A%9F%E8%83%BD
+   */
   {
     meta: { nameText: '点击Div', },
+    name: "touch-点击Div",
     path: '/touch/ClickDivDemo',
     component: () => import('@shijiu/jsview-vue-samples/ClickDivDemo/App.vue'),
   },
+
+  /*
+   * 触控示例
+   * 
+   * 对应的应用场景:
+   * 让MetroWidget激活触控功能,以及如何接受触控事件的场景
+   * 以及想用一个蒙层屏蔽MetroWidget的所有触控事件和鼠标事件的场景
+   * 
+   * 和下面网站呼应
+   * https://jsview-dev.shijiutv.com/guide/4.standard-features/4.8.touch-usage.html#%E8%A7%A6%E6%8E%A7%E5%8A%9F%E8%83%BD
+   */
   {
     meta: { nameText: '触控示例', },
+    name: "touch-触控示例",
     path: '/touch/TouchWidget',
     component: () => import('@shijiu/jsview-vue-samples/TouchWidget/App.vue'),
   },
+
+  /*
+   * DragBox
+   * 
+   * 对应的应用场景:
+   * 场景1: 当一个div想监测触控的拖动轨迹的场景, 将此div改为JsvDragBox组件来实现
+   * 场景2: 想监测用户在屏幕中滑动的手势轨迹时, 做最上层做一个全屏尺寸JsvDragBox, 通过其位置回调就能监测用户对屏幕的滑动事件
+   */
   {
     meta: { nameText: 'DragBox', },
+    name: "touch-DragBox",
     path: '/touch/Box',
     component: () => import('@shijiu/jsview-vue-samples/DragBox/App.vue'),
   },
+
   // {
   //   meta: { nameText: 'FreeMove触控磁吸', },
   //   path: '/touch/FreeMoveChildAttract',
@@ -397,25 +990,90 @@ let routeList = [
   //   path: '/touch/FreeMoveLink',
   //   component: () => import('@shijiu/jsview-vue-samples/FreeMoveLink/App.vue'),
   // },
+
+  /*
+   * 可拖拽进度条
+   * 
+   * 对应的应用场景:
+   * 要制作可触控操作的视频进度条的场景
+   * 
+   * JsvScrollBox和JsvScrollFollow组件的典型应用场景, 展示JsvScrollFollow和JsvScrollBox如何靠linkName联动起来的场景
+   * 因为是进度条游标在滚动区域中滑动，所以用JsvScrollBox的Pin模式
+   * 
+   * 和下面网站呼应
+   * https://jsview-dev.shijiutv.com/guide/4.standard-features/4.8.touch-usage.html#_5-%E8%BF%9B%E5%BA%A6%E6%9D%A1%E6%8B%96%E5%8A%A8-%E8%A7%86%E9%A2%91%E8%BF%9B%E5%BA%A6%E6%9D%A1
+   */
   {
     meta: { nameText: '可拖拽进度条', },
+    name: "touch-可拖拽进度条",
     path: '/touch/ScrollBoxTest',
     component: () => import('@shijiu/jsview-vue-samples/ScrollBoxTest/App.vue'),
   },
+
+  /*
+   * Hover
+   * 
+   * 对应的应用场景:
+   * 当一个div要对鼠标的hover事件做响应的场景, 只支持 @mouseenter 和 @mouseleave 事件, 不支持其他hover相关的事件定义
+   * 
+   * 和以下网站呼应
+   * https://jsview-dev.shijiutv.com/guide/4.standard-features/4.8.touch-usage.html#_7-%E9%BC%A0%E6%A0%87%E7%9A%84hover%E8%BF%9B%E5%87%BA%E6%A3%80%E6%B5%8B
+   */
+  {
+    meta: { nameText: 'Hover', },
+    name: 'touch-Hover',
+    path: '/touch/Hover',
+    component: () => import('@shijiu/jsview-vue-samples/Hover/App.vue')
+  },
+
+  // ========== game ==========
+  // TODO: 改为FreeMove后再激活
   // {
-  //   meta: { nameText: '透视镜效果样例', },
-  //   path: '/Operations/DriftScopeTest',
-  //   component: () => import('@shijiu/jsview-vue-samples/DriftScopeTest/App.vue'),
+  //   meta: { nameText: '抛物运动写法样例', },
+  //   path: '/Game/ThrowMoveDemo',
+  //   component: () => import('@shijiu/jsview-vue-samples/ThrowMoveDemo/App.vue'),
   // },
   {
-    meta: { nameText: '自定义shader', },
-    path: '/Operations/CustomShader',
-    component: () => import('@shijiu/jsview-vue-samples/CustomShader/App.vue'),
+    meta: { nameText: '翻牌游戏', },
+    name: "Game-翻牌游戏",
+    path: '/Game/FlipCard',
+    component: () => import('@shijiu/jsview-vue-samples/FlipCard/App.vue'),
   },
   {
-    meta: { nameText: '虚线框', },
-    path: '/Operations/DashPath',
-    component: () => import('@shijiu/jsview-vue-samples/DashPath/App.vue'),
+    meta: { nameText: '精灵图', },
+    name: "Game-精灵图",
+    path: '/Game/SpriteImage',
+    component: () => import('@shijiu/jsview-vue-samples/SpriteImage/App.vue'),
+  },
+  {
+    meta: { nameText: 'SoundPool', },
+    name: "Game-SoundPool",
+    path: '/Game/SoundPool',
+    component: () => import('@shijiu/jsview-vue-samples/SoundPool/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: "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')
   },
 ];