@shijiu/jsview-vue 0.9.684 → 0.9.766

package/dom/bin/jsview-forge-define.min.js

@@ -1 +1 @@
-/* eslint-disable */ var o={};window.JsView&&(window.JsView.Dom&&window.JsView.Dom.Extension||(window.JsView.Dom.Extension=o),o=window.JsView.Dom.Extension);var w=o;void 0===window.Forge&&(window.Forge={});var i=window.Forge;export{i as Forge,w as ForgeExtension};
+/* eslint-disable */ void 0===window.Forge&&(window.Forge={});var e=window.Forge;class t{constructor(e,t){if(this.href="",this.origin="",this.protocol="",this.host="",this.hostname="",this.port="",this.pathname="",this.search="",this.hash="",!e)return;if(!0===e.startsWith("url")){let t=e.indexOf("(")+1,i=e.lastIndexOf(")");if("undefined"===(e=e.substring(t,i).trim())||"null"===e||0===e.length)return}if(!0===e.startsWith("data:"))return void(this.href=e);let i=e.indexOf("://");if(!(i<0||i>10)||e.startsWith("./")||e.startsWith("/")||(e="./"+e),!0===e.startsWith("/"))e=document.location.origin+e;else if((!0===e.startsWith("./")||!0===e.startsWith("../"))&&void 0!==window.JsView&&void 0!==window.JsView.Dom.JsSubPath){if(void 0===window.JsView.Dom.__MainPath||"undefined"===window.JsView.Dom.__MainPathRef||window.JsView.Dom.__MainPathRef!==document.location.href){window.JsView.Dom.JsSubPath.startsWith("/")||(window.JsView.Dom.JsSubPath="/"+window.JsView.Dom.JsSubPath),window.JsView.Dom.JsSubPath.endsWith("/")||(window.JsView.Dom.JsSubPath=window.JsView.Dom.JsSubPath+"/"),window.JsView.Dom.__MainPathRef=document.location.href;let e=document.location.pathname.lastIndexOf(window.JsView.Dom.JsSubPath);window.JsView.Dom.__MainPath=document.location.origin+document.location.pathname.substring(0,e)+"/"}let t=window.JsView.Dom.__MainPath;e=e.startsWith("./")?t+e.substring(2):t+e}if(this.href=e,!t)return;let n=this.href,r=n.indexOf("#");r>0&&(this.hash=n.substring(r),n=n.substring(0,r));let s=n.indexOf("?");s>1&&(this.search=n.substring(s),n=n.substring(0,s));let o=n,a=o.indexOf("://");this.protocol=a>0?o.substring(0,a+1):"";let u=a>1?o.substring(a+3):"";if(a=u.indexOf("/"),this.host=a>0?u.substring(0,a):"",this.pathname=a>1?u.substring(a):"",this.origin=a>0?this.protocol+"//"+this.host:"",this.host.startsWith("[")){let e=this.host.indexOf("]");this.hostname=this.host.substring(0,e+1),e=this.host.substring(e+1).indexOf(":"),this.port=e>1?this.host.substring(e+1):""}else{let e=this.host.indexOf(":");this.hostname=e>0?this.host.substring(0,e):this.host,this.port=e>1?this.host.substring(e+1):""}}replace(e){this.href=e}}window.JsView&&window.JsView.registerUriConverter?.((e=>new t(e,!1).href));class i{static SetBackgroundColor(t,n,r){const s=i.TextureManager.GetColorTextureCached(n);let o;r&&(o=new e.ViewRoundCornerMask(r.topLeft,r.topRight,r.bottomLeft,r.bottomRight));const a=new e.ExternalTextureSetting(s,o);t.ResetTexture(a)}static SetBackgroundImage(n,r,s,o,a,u,h){let l,d={};if("string"==typeof r){const e=new t(r);if(e instanceof t==!1)throw Error("Bad Argument.",e);d.url=e.href}else"linear-gradient"==r?.type&&(d.gradient=r);if(d.gradient)if(d.gradient.colors?.length>2){const e=d.gradient.colors,t=[e[0],e[e.length-1]],n=e.slice(1,e.length-1);l=i.TextureManager.CreateLinearGradientTexture(t,n)}else 2==d.gradient.colors?.length?l=i.TextureManager.CreateMiniGradientTexture(!0,d.gradient.colors[0],d.gradient.colors[1],d.gradient.rawValue):console.warn("Failed to create backgroundImage gradient, bad colors.",d.gradient.colors);else d.url&&(l=d.url.includes(".gif")||d.url.includes(".webp")?i.TextureManager.GetGifImage(d.url,!1,null,h):i.TextureManager.GetImage2(d.url,!1,a,u||e.ColorSpace.RGBA_8888));if(l){let t;s&&(t=new e.ViewRoundCornerMask(s.topLeft,s.topRight,s.bottomLeft,s.bottomRight));const i=new e.ExternalTextureSetting(l,t);if(n.ResetTexture(i),o){let e=l.RegisterLoadImageCallback(null,(function(){o({width:l.Width,height:l.Height})}));n.RegisterDetachCallback((()=>{l.UnregisterLoadImageCallback(e)}))}}}static SetMaskedBackgroundImage(n,r,s,o){if("string"==typeof r&&(r=new t(r)),r instanceof t==!1)throw Error("Bad Argument.",r);if("string"==typeof s&&(s=new t(s)),s instanceof t==!1)throw Error("Bad Argument(MaskURL).",s);const a=i.TextureManager.GetImage2(r.href,!1,null,o||e.ColorSpace.RGBA_8888);if(a){const t=i.TextureManager.GetImage2(s.href,!1,null,e.ColorSpace.RGBA_8888),r=new e.ExternalTextureSetting(a,new e.ViewTextureMask(t));n.ResetTexture(r)}}static SetVideoTexture(t,n,r){const s=i.TextureManager.GetColorTexture(n);let o;r&&(o=new e.ViewRoundCornerMask(r.topLeft,r.topRight,r.bottomLeft,r.bottomRight));const a=new e.TextureSetting(s,o);t.ResetTexture(a)}static GetTextWidth(t){return t.str||(t.str=""),t.font||(t.font=e.TextUtils._sDefaultFont),t.size||(t.size=e.TextUtils._sDefaultFontSize),"italic"!==t.italic&&(t.italic=""),"bold"!==t.bold&&(t.bold=""),window.PlatformUtils.GetTextWidth(t)}static RequestSwap(){e.sRenderBridge.RequestSwap()}static SetImgTexSize(e,t){let n={size:t,refNum:0};i.TextureInfo.Cache[e.Source]=n}static RefImgTexSize(e,t){let n=i.TextureInfo.Cache[e.Source];n?(n.refNum>0?n.refNum++:n.refNum=1,t(n.size)):e.RegisterLoadImageCallback(null,(function(){const n={width:e.Width,height:e.Height};t(n);let r=i.TextureInfo.Cache[e.Source];if(r)r.refNum>0?r.refNum++:r.refNum=1;else{let t={size:n,refNum:1};i.TextureInfo.Cache[e.Source]=t}}))}static UnrefImgTexSize(e){if(!e)return;let t=i.TextureInfo.Cache[e.Source];t&&(t.refNum--,t.refNum<=0&&i.TextureInfo.Unused.add(e.Source))}static ClearUnusedTexSize(){for(let e of i.TextureInfo.Unused){let t=i.TextureInfo.Cache[e];t.refNum<-2?(delete i.TextureInfo.Cache[e],i.TextureInfo.Unused.delete(e)):t.refNum<=0?t.refNum--:i.TextureInfo.Unused.delete(e)}}}i.TextureInfo={Cache:{},Unused:new Set},i.TextureManager=null,i.RootView=null,i.RootActivity=null,i.HaltKeyEvent=!1,window.JsView&&(window.JsView.ForgeExtension||(window.JsView.ForgeExtension=i),i=window.JsView.ForgeExtension);var n=i;export{e as Forge,n as ForgeExtension};

package/dom/jsv-engine-js-browser.js

@@ -0,0 +1,6 @@
+// Release entry
+export * from "./bin/jsview-engine-js-browser.min"
+
+// Debug entry
+// TODO: 进行编译(yarn build)时，需要关闭掉此require
+// export * from "../deps/jsview-dom/src/engine-js/browser"

package/dom/target_core_revision.js

@@ -3,11 +3,11 @@
  */
 
 const TargetRevision = {
-  "CoreRevision": 811211,
-  "CoreRevisionAndBranch": "811211",
-  "JseRevision": "1.0.824",
+  "CoreRevision": 1021277,
+  "CoreRevisionAndBranch": "1021277",
+  "JseRevision": "1.0.830",
   "JseUrl":
-    "http://cdn.release.qcast.cn/forge_js/master/JsViewES6_react_r824.jsv.a2da4803.js"
+    "http://cdn.release.qcast.cn/forge_js/master/JsViewES6_react_r830.jsv.9e271859.js"
 };
 
 // 不要用export default，update-env脚本不能解析

package/loader/loader.js

@@ -52,6 +52,10 @@ async function selectJsViewRuntime(js_sub_path, input_designed_map, app_name) {
     window.JsView.ForgeExt = app_define.ForgeExtension;
     window.JsView.Dom.JsSubPath = js_sub_path;
   } else {
+    // 在PC环境下没有处理加载EngineJs, 所以在此加载一下
+    await import("../dom/jsv-engine-js-browser.js");
+
+    // 加载jsv-dom的调试版本
     await import("../dom/jsv-browser-debug-dom.js");
   }
 }

package/package.json

@@ -7,7 +7,7 @@
     "./dom/*.js",
     "./loader/*.js"
   ],
-  "version": "0.9.684",
+  "version": "0.9.766",
   "bin": {
     "jsview-post-build": "./scripts/jsview-post-build.js",
     "jsview-post-install": "./scripts/jsview-post-install.js",

package/patches/node_modules/@vue/cli-service/lib/config/base.js

@@ -129,7 +129,7 @@ module.exports = (api, options) => {
             .loader(require.resolve('vue-loader'))
             .options({
               ...vueLoaderCacheConfig,
-              compilerOptions: { isCustomElement: tag => tag === 'fdiv' }, // QCode Added
+              compilerOptions: { isCustomElement: tag => (tag === 'fdiv' || tag === 'audiotrack') }, // QCode Added
               babelParserPlugins: ['jsx', 'classProperties', 'decorators-legacy']
             })
             .end()

package/samples/AnimPicture/App.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { LoopType, JsvApic } from "jsview";
 import catRun from "./assets/animated_webp.webp";
@@ -53,10 +53,10 @@ const ballCallback = {
     ballPlay.value = false;
   },
 };
-let catRunRef = ref(null);
-let girlRunRef = ref(null);
-let quanRef = ref(null);
-let ballRef = ref(null);
+let catRunRef = shallowRef(null);
+let girlRunRef = shallowRef(null);
+let quanRef = shallowRef(null);
+let ballRef = shallowRef(null);
 
 const onKeyDown = (ev) => {
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {

package/samples/Basic/components/div/DivLayout.vue

@@ -51,7 +51,7 @@
 </template>
 
 <script setup>
-import { ref, onUnmounted } from 'vue'
+import { ref, shallowRef, onUnmounted } from 'vue'
 
 // v-show 控制
 let vShow = ref(false);

package/samples/Basic/components/img/ImageGroup.vue

@@ -1,6 +1,6 @@
 <template>
     <div id='item-root'>
-        <ContentBlock :class=contentClass :style="{top:itemSides.height*0}" :=contentBlockProps :index=0 title="图片显示">
+        <ContentBlock :class=contentClass :style="{top:itemSides.height*0}" :=contentBlockProps :index=0 title="img标签ObjectFit">
              <ImgLayout/>
         </ContentBlock>
     </div>
@@ -23,7 +23,7 @@ export default {
         contentBlockProps() {
             return {
                 colIndex: 0,
-                itemSides: this.itemSides
+                itemSides:{...this.itemSides, height: this.itemSides.height * 2}
             }
         }
     }

package/samples/Basic/components/img/ImgLayout.vue

@@ -1,13 +1,54 @@
 <template>
 <div id='layout-root'>
     <div style="{top: 0}">
-        <div class="content-font" :style="{width: 50, height: titleHeight}">原图</div>
-        <div :style="{top: titleHeight,
-            width: imageSize.width+4, height: imageSize.height+4,
-            backgroundColor: 'rgba(0, 255, 0, 1)' }">
-            <img :style="{ left: 2, top: 2,
-                width: imageSize.width, height: imageSize.height}"
-                :src="testImgPath"/>
+        <div id="0列0行" :style="{left: coloumWidth * 0, top: tabLineHeight * 0}">
+            <div class="content-font titleStyle"> fill(缩放变形)</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'fill' }"
+                    :src="testImgPath"/>
+            </div>
+        </div>
+        <div id="1列0行" :style="{left: coloumWidth * 1, top: tabLineHeight * 0}">
+            <div class="content-font titleStyle">contain</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'contain' }"
+                    :src="testImgPath"/>
+            </div>
+        </div>
+        <div id="0列1行" :style="{left: coloumWidth * 0, top: tabLineHeight * 1}">
+            <div class="content-font titleStyle">none</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'none' }"
+                    :src="testImgPath"/>
+            </div>
+        </div>
+        <div id="1列1行" :style="{left: coloumWidth * 1, top: tabLineHeight * 1}">
+            <div class="content-font titleStyle">scale-down</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'scale-down' }"
+                    :src="testImgPath"/>
+            </div>
+        </div>
+        <div id="0列2行" :style="{left: coloumWidth * 0, top: tabLineHeight * 2}">
+            <div class="content-font titleStyle">cover</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'cover' }"
+                    :src="testImgPath"/>
+            </div>
+        </div>
+        <div id="1列2行" :style="{left: coloumWidth * 1, top: tabLineHeight * 2}">
+            <div class="content-font titleStyle">none(小图)</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'none' }"
+                    :src="tinyImgPath"/>
+            </div>
+        </div>
+        <div id="0列3行" :style="{left: coloumWidth * 0, top: tabLineHeight * 3}">
+            <div class="content-font titleStyle">scale-down(小图)</div>
+            <div class="frameStyle">
+                <img class="imageStyle" :style="{ objectFit: 'scale-down' }"
+                    :src="tinyImgPath"/>
+            </div>
         </div>
     </div>
 </div>
@@ -15,27 +56,50 @@
 
 <script>
 import testImgPath from '../../assets/test.jpg';
+import tinyImgPath from '../../assets/icon.png';
 
 export default {
     computed: {
         testImgPath() {
             return testImgPath;
         },
-        titleHeight() {
-            return 16;
+        tinyImgPath() {
+            return tinyImgPath;
         },
-        imageSize() {
-            return {
-                width: 80,
-                height: 64,
-            }
+        coloumWidth() {
+            return 120;
         },
+        tabLineHeight() {
+            return 76; // imageSize.height + 26
+        }
     }
 }
 
 </script>
 
 
-<style>
+<style scoped>
 @import "../FontStyle.css";
+</style>
+
+<style scoped>
+.titleStyle {
+    width: 100;
+    height: 16;
+}
+
+.imageStyle {
+    top: 2;
+    left: 2;
+    width: 100;
+    height: 50;
+}
+
+.frameStyle {
+    top: 16; /* titleHeight */
+    width: 104; /* imageSize.width+4 */
+    height: 54; /* imageSize.height+4 */
+    background-color: rgba(0, 255, 0, 1)
+}
+
 </style>

package/samples/Basic/components/text/TextDirection.vue

@@ -0,0 +1,104 @@
+<script setup>
+const gap = 5;
+const blockSize = {
+  width: 180,
+  height: 30,
+};
+const unitHeight = 20 + 35;
+
+const ltrText = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+const rtlText = "شلؤيثبلاهتنمةىخحضقسفعررصءغئا";
+</script>
+
+<template>
+  <div id="layout-root">
+    <div
+      :style="{
+        top: unitHeight * 0,
+      }"
+    >
+      <div class="explain">ltr文字省略尾部</div>
+      <div
+        class="content-font base"
+        :style="{
+          direction: 'ltr',
+        }"
+      >
+        {{ ltrText }}
+      </div>
+    </div>
+
+    <div
+      :style="{
+        top: unitHeight * 1,
+      }"
+    >
+      <div class="explain">ltr文字省略头部</div>
+      <div
+        class="content-font base"
+        :style="{
+          direction: 'rtl',
+        }"
+      >
+        {{ ltrText }}
+      </div>
+    </div>
+
+    <div
+      :style="{
+        top: unitHeight * 2,
+      }"
+    >
+      <div class="explain">rtl文字省略尾部</div>
+      <div
+        class="content-font base"
+        :style="{
+          direction: 'rtl',
+        }"
+      >
+        {{ rtlText }}
+      </div>
+    </div>
+
+    <div
+      :style="{
+        top: unitHeight * 3,
+      }"
+    >
+      <div class="explain">rtl文字省略头部</div>
+      <div
+        class="content-font base"
+        :style="{
+          direction: 'ltr',
+        }"
+      >
+        {{ rtlText }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+@import "../FontStyle.css";
+
+.base {
+  top: 25px;
+  width: 180px;
+  height: 30px;
+  line-height: 30px;
+  background-color: rgba(255, 255, 0, 0.5);
+  color: #ff0000;
+  font-size: 25px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.explain {
+  width: 180px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 15px;
+  color: #000000;
+}
+</style>

package/samples/Basic/components/text/TextEmoji.vue

@@ -18,7 +18,7 @@
 
 <style>
 .emoji {
-  top: 100;
+  top: 80;
   width: 300;
   height: 100;
   font-size: 20;

package/samples/Basic/components/text/TextGroup1.vue

@@ -38,7 +38,7 @@ const contentBlockProps = {
     <ContentBlock
       :class="contentClass"
       :style="{ top: itemSides.height * 2 }"
-      :="{ ...contentBlockProps, itemSides: { ...itemSides, height: 290 } }"
+      :="{ ...contentBlockProps, itemSides: { ...itemSides, height: 320 } }"
       :index="2"
       title="文字折行"
     >

package/samples/Basic/components/text/TextGroup2.vue

@@ -1,6 +1,7 @@
 <script setup>
 import ContentBlock from "../ContentBlock";
 import TextEmoji from "./TextEmoji";
+import TextDirection from "./TextDirection.vue";
 
 const props = defineProps({
   contentClass: String,
@@ -19,10 +20,19 @@ const contentBlockProps = {
       :style="{ top: itemSides.height * 0 }"
       :="contentBlockProps"
       :index="0"
-      title="文字对齐"
+      title="emoji"
     >
       <TextEmoji />
     </ContentBlock>
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 1 }"
+      :="{ ...contentBlockProps, itemSides: { ...itemSides, height: 250 } }"
+      :index="0"
+      title="不同方向文字省略"
+    >
+      <text-direction />
+    </ContentBlock>
   </div>
 </template>
 

package/samples/BasicFocusControl/components/BaseBlock.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, shallowRef, onMounted } from "vue";
 const props = defineProps({
   name: String,
   style: {
@@ -12,7 +12,7 @@ const props = defineProps({
 });
 
 const fullName = ref("");
-const blockRef = ref(null);
+const blockRef = shallowRef(null);
 const hasFocused = ref(false);
 
 onMounted(() => {

package/samples/Collision/App.vue

@@ -7,21 +7,21 @@
 -->
 <script setup>
 import { createImpactTracer, createImpactCallback } from "jsview";
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, shallowRef, onMounted, onBeforeUnmount } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
 
-const transEle1 = ref(null),
-  transEle2 = ref(null),
-  rotateEle1 = ref(null),
-  rotateEle2 = ref(null),
-  rotateEle3 = ref(null),
-  rotateEle4 = ref(null),
-  scaleEle1 = ref(null),
-  scaleEle2 = ref(null),
-  skewEle1 = ref(null),
-  skewEle2 = ref(null);
+const transEle1 = shallowRef(null),
+  transEle2 = shallowRef(null),
+  rotateEle1 = shallowRef(null),
+  rotateEle2 = shallowRef(null),
+  rotateEle3 = shallowRef(null),
+  rotateEle4 = shallowRef(null),
+  scaleEle1 = shallowRef(null),
+  scaleEle2 = shallowRef(null),
+  skewEle1 = shallowRef(null),
+  skewEle2 = shallowRef(null);
 
 let sensors = [];
 

package/samples/DemoHomepage/App.vue

@@ -5,23 +5,58 @@
  * @LastEditTime: 2022-07-12 13:40:15
  * @Description: file content
 -->
+<script setup>
+import { shallowRef, onMounted, defineExpose } from "vue";
+import { JsvPreload, buildPreloadInfo, jJsvRuntimeBridge } from "jsview";
+
+let backgroundImageUrl = shallowRef(null);
+
+let preloadInfo = shallowRef([]);
+
+let _onPreloadDone = () => {
+  console.log("background load done");
+  jJsvRuntimeBridge.notifyPageLoaded();
+};
+
+onMounted(() => {
+  console.log("simulate async get background url");
+  setTimeout(() => {
+    console.log("simulate background url got");
+    backgroundImageUrl.value =
+      "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg";
+    preloadInfo.value = [buildPreloadInfo(backgroundImageUrl.value)];
+  }, 0);
+});
+</script>
+
 <script>
 import { router } from "./router.js";
-import { jJsvRuntimeBridge } from "jsview";
-
 export default {
   Router: router,
-  mounted() {
-    jJsvRuntimeBridge.notifyPageLoaded();
-  },
 };
 </script>
 
 <template>
   <div>
-    <router-view />
+    <jsv-preload
+      :key="backgroundImageUrl"
+      :preloadList="preloadInfo"
+      :onPreloadDone="_onPreloadDone"
+    />
+    <div
+      :style="{
+        width: 1280,
+        height: 720,
+        backgroundImage: backgroundImageUrl,
+      }"
+    />
+    <router-view v-slot="{ Component, route }">
+          <keep-alive>
+            <component v-if="route.meta.keepAlive" :is="Component" />
+          </keep-alive>
+          <component v-if="!route.meta.keepAlive" :is="Component" />
+    </router-view>
   </div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>

package/samples/DemoHomepage/router.js

@@ -7,6 +7,9 @@ const routeList = [
     name: "Home",
     path: "/",
     component: () => import("./views/Homepage"),
+    meta: {
+      keepAlive: true // 需要被缓存(测试Router keep alive机制)
+    }
   },
   {
     name: "基础示例合集",
@@ -28,11 +31,11 @@ const routeList = [
     path: "/feature/NinePatchDemo",
     component: () => import("jsview/samples/NinePatchDemo/App"),
   },
-  {
-    name: "视频",
-    path: "/feature/VideoDemo",
-    component: () => import("jsview/samples/VideoDemo/App"),
-  },
+  // {
+  //   name: "视频",
+  //   path: "/feature/VideoDemo",
+  //   component: () => import("jsview/samples/VideoDemo/App"),
+  // },
   {
     name: "焦点切换demo",
     path: "/feature/BasicFocusControl",
@@ -154,11 +157,11 @@ const routeList = [
   //   path: "/feature/Collision",
   //   component: () => import("jsview/samples/Collision/App"),
   // },
-  // {
-  //   name: "碰撞即停",
-  //   path: "/feature/ImpactStop",
-  //   component: () => import("jsview/samples/ImpactStop/App"),
-  // },
+  {
+    name: "碰撞即停",
+    path: "/feature/ImpactStop",
+    component: () => import("jsview/samples/ImpactStop/App"),
+  },
 
   // MetroWidget示例
   {