@shijiu/jsview-vue-samples 2.1.25 → 2.1.200

package/ClassDynamicSwitching/components/ClassItem.vue

@@ -0,0 +1,257 @@
+<template>
+  <div :class="['poster', posterChange]">
+    <div class="titleShow">{{ props.data.title }}</div>
+    <div class="item item1">
+      <div class="littleItem littleItem1"></div>
+      <div class="littleItem littleItem2"></div>
+      <div class="littleItem littleItem3"></div>
+      <div class="littleItem littleItem4"></div>
+      <div class="littleItem littleItem5"></div>
+      <div class="littleItem littleItem6"></div>
+      <div class="littleItem littleItem7"></div>
+      <div class="littleItem littleItem8"></div>
+      <div class="littleItem littleItem9"></div>
+    </div>
+    <div class="item item2">
+      <div class="littleItem littleItem1"></div>
+      <div class="littleItem littleItem2"></div>
+      <div class="littleItem littleItem3"></div>
+      <div class="littleItem littleItem4"></div>
+      <div class="littleItem littleItem5"></div>
+      <div class="littleItem littleItem6"></div>
+      <div class="littleItem littleItem7"></div>
+      <div class="littleItem littleItem8"></div>
+      <div class="littleItem littleItem9"></div>
+    </div>
+    <div class="item item3">
+      <div class="littleItem littleItem1"></div>
+      <div class="littleItem littleItem2"></div>
+      <div class="littleItem littleItem3"></div>
+      <div class="littleItem littleItem4"></div>
+      <div class="littleItem littleItem5"></div>
+      <div class="littleItem littleItem6"></div>
+      <div class="littleItem littleItem7"></div>
+      <div class="littleItem littleItem8"></div>
+      <div class="littleItem littleItem9"></div>
+    </div>
+    <div class="item item4">
+      <div class="littleItem littleItem1"></div>
+      <div class="littleItem littleItem2"></div>
+      <div class="littleItem littleItem3"></div>
+      <div class="littleItem littleItem4"></div>
+      <div class="littleItem littleItem5"></div>
+      <div class="littleItem littleItem6"></div>
+      <div class="littleItem littleItem7"></div>
+      <div class="littleItem littleItem8"></div>
+      <div class="littleItem littleItem9"></div>
+    </div>
+    <div class="item item5">
+      <div class="littleItem littleItem1"></div>
+      <div class="littleItem littleItem2"></div>
+      <div class="littleItem littleItem3"></div>
+      <div class="littleItem littleItem4"></div>
+      <div class="littleItem littleItem5"></div>
+      <div class="littleItem littleItem6"></div>
+      <div class="littleItem littleItem7"></div>
+      <div class="littleItem littleItem8"></div>
+      <div class="littleItem littleItem9"></div>
+    </div>
+    <div class="item item6">
+      <div class="littleItem littleItem1"></div>
+      <div class="littleItem littleItem2"></div>
+      <div class="littleItem littleItem3"></div>
+      <div class="littleItem littleItem4"></div>
+      <div class="littleItem littleItem5"></div>
+      <div class="littleItem littleItem6"></div>
+      <div class="littleItem littleItem7"></div>
+      <div class="littleItem littleItem8"></div>
+      <div class="littleItem littleItem9"></div>
+    </div>
+    <div class="item item7">
+      <div class="littleItem littleItem1"></div>
+      <div class="littleItem littleItem2"></div>
+      <div class="littleItem littleItem3"></div>
+      <div class="littleItem littleItem4"></div>
+      <div class="littleItem littleItem5"></div>
+      <div class="littleItem littleItem6"></div>
+      <div class="littleItem littleItem7"></div>
+      <div class="littleItem littleItem8"></div>
+      <div class="littleItem littleItem9"></div>
+    </div>
+    <div class="item item8">
+      <div class="littleItem littleItem1"></div>
+      <div class="littleItem littleItem2"></div>
+      <div class="littleItem littleItem3"></div>
+      <div class="littleItem littleItem4"></div>
+      <div class="littleItem littleItem5"></div>
+      <div class="littleItem littleItem6"></div>
+      <div class="littleItem littleItem7"></div>
+      <div class="littleItem littleItem8"></div>
+      <div class="littleItem littleItem9"></div>
+    </div>
+    <div class="item item9">
+      <div class="littleItem littleItem1"></div>
+      <div class="littleItem littleItem2"></div>
+      <div class="littleItem littleItem3"></div>
+      <div class="littleItem littleItem4"></div>
+      <div class="littleItem littleItem5"></div>
+      <div class="littleItem littleItem6"></div>
+      <div class="littleItem littleItem7"></div>
+      <div class="littleItem littleItem8"></div>
+      <div class="littleItem littleItem9"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { shallowRef, onMounted } from "vue";
+import { useFocusHub } from "jsview";
+
+const focusHub = useFocusHub();
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+  getStyleClass: Function,
+  num: Number,
+});
+
+let posterChange = shallowRef("blurPoster");
+const onFocus = () => {
+  posterChange.value = "focusPoster";
+};
+
+const onBlur = () => {
+  posterChange.value = "blurPoster";
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onEdge", props.onEdge);
+
+onMounted(() => {
+  focusHub.setFocus("ClassShow");
+});
+</script>
+
+<style lang="scss" scoped>
+.poster {
+  width: 140;
+  height: 160;
+  background-color: #bbbbaa;
+}
+.titleShow {
+  width: 140;
+  height: 40;
+  line-height: 40;
+  font-size: 24;
+  top: 120;
+  background-color: #ffffff;
+  text-align: center;
+}
+.focusPoster {
+  background-color: #dd8888;
+}
+.blurPoster {
+  background-color: #bbbbaa;
+}
+.item {
+  width: 40;
+  height: 40;
+}
+.item1 {
+  top: 3;
+  left: 3;
+  background-color: #aa3123;
+}
+.item2 {
+  top: 3;
+  left: 3+46;
+  background-color: #b0c847;
+}
+.item3 {
+  top: 3;
+  left: 3+46+46;
+  background-color: #5cb720;
+}
+.item4 {
+  top: 3+46;
+  left: 3;
+  background-color: #1db39d;
+}
+.item5 {
+  top: 3+46;
+  left: 3+46;
+  background-color: #a75b17;
+}
+.item6 {
+  top: 3+46;
+  left: 3+46+46;
+  background-color: #135ac3;
+}
+.item7 {
+  top: 3+46+46;
+  left: 3;
+  background-color: #af19d9;
+}
+.item8 {
+  top: 3+46+46;
+  left: 3+46;
+  background-color: #da308b;
+}
+.item9 {
+  top: 3+46+46;
+  left: 3+46+46;
+  background-color: #da2b2b;
+}
+.littleItem {
+  width: 10;
+  height: 10;
+}
+.littleItem1 {
+  top: 1;
+  left: 1;
+  background-color: #1135a1;
+}
+.littleItem2 {
+  top: 1;
+  left: 1+13;
+  background-color: #aab6db;
+}
+.littleItem3 {
+  top: 1;
+  left: 1+13+13;
+  background-color: #35194d;
+}
+.littleItem4 {
+  top: 1+13;
+  left: 1;
+  background-color: #a2023a;
+}
+.littleItem5 {
+  top: 1+13;
+  left: 1+13;
+  background-color: #e13470;
+}
+.littleItem6 {
+  top: 1+13;
+  left: 1+13+13;
+  background-color: #d935e8;
+}
+.littleItem7 {
+  top: 1+13+13;
+  left: 1;
+  background-color: #2f63dc;
+}
+.littleItem8 {
+  top: 1+13+13;
+  left: 1+13;
+  background-color: #240ee2;
+}
+.littleItem9 {
+  top: 1+13+13;
+  left: 1+13+13;
+  background-color: #2fdbb9;
+}
+</style>

package/ClassDynamicSwitching/components/ClassShow.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="bg">
+    <div class="bg-adjust">
+      <metro-widget
+        name="ClassShow"
+        ref="classRef"
+        :width="props.style.width"
+        :height="props.style.height"
+        :provideData="provideData"
+        :direction="HORIZONTAL"
+        :measures="measures"
+        :onEdge="onEdge"
+        :padding="props.style.padding"
+        :sendFocusRectEvent="true"
+      >
+        <template #renderItem="{ data, query, onEdge, onAction }">
+          <ClassItem
+            :data="data"
+            :query="query"
+            :onEdge="onEdge"
+            :onAction="onAction"
+          />
+        </template>
+      </metro-widget>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { inject, shallowRef, watch } from "vue";
+import { MetroWidget, HORIZONTAL } from "jsview";
+import ClassItem from "./ClassItem.vue";
+const props = defineProps({
+  style: Object,
+  data: Array,
+});
+let classRef = shallowRef(null);
+let change = inject("change");
+
+const provideData = () => {
+  if (change.value) {
+    const data = props.data.slice(33, 65);
+    return data;
+  } else {
+    const data = props.data.slice(0, 32);
+    return data;
+  }
+};
+watch(change, (n, o) => {
+  if (n !== o) {
+    provideData();
+    classRef.value?.refreshData(true);
+  }
+});
+const measures = (item) => {
+  return {
+    ...item,
+    focusable: true,
+    marginRight: 20,
+    marginBottom: 20,
+  };
+};
+const onEdge = () => {
+  console.log("到边缘了");
+};
+
+</script>
+
+<style lang="scss" scoped>
+.bg {
+  width: 1280;
+  height: 720;
+  background-color: #006400;
+  .bg-adjust{
+    top:10
+  }
+}
+</style>

package/ClassDynamicSwitching/components/StyleItem.vue

@@ -0,0 +1,165 @@
+<template>
+  <div
+    :style="{
+      width: 140,
+      height: 160,
+      backgroundColor: focused ? '#DD8888' : '#BBBBAA',
+    }"
+  >
+    <div
+      :style="{
+        width: 140,
+        height: 40,
+        lineHeight: 40,
+        fontSize: 24,
+        top: 120,
+        backgroundColor: '#FFFFFF',
+        textAlign: 'center',
+      }"
+    >
+      {{ props.data.title }}
+    </div>
+    <div :style="{top:3,left:3,width:40,height:40,backgroundColor:'#AA3123'}">
+      <div :style="{top:1,left:1,width:10,height:10,backgroundColor:'#1135a1'}"></div>
+      <div :style="{top:1,left:1+13,width:10,height:10,backgroundColor:'#aab6db'}"></div>
+      <div :style="{top:1,left:1+13+13,width:10,height:10,backgroundColor:'#35194d'}"></div>
+      <div :style="{top:1+13,left:1,width:10,height:10,backgroundColor:'#a2023a'}"></div>
+      <div :style="{top:1+13,left:1+13,width:10,height:10,backgroundColor:'#e13470'}"></div>
+      <div :style="{top:1+13,left:1+13+13,width:10,height:10,backgroundColor:'#d935e8'}"></div>
+      <div :style="{top:1+13+13,left:1,width:10,height:10,backgroundColor:'#2f63dc'}"></div>
+      <div :style="{top:1+13+13,left:1+13,width:10,height:10,backgroundColor:'#240ee2'}"></div>
+      <div :style="{top:1+13+13,left:1+13+13,width:10,height:10,backgroundColor:'#2fdbb9'}"></div>
+    </div>
+
+    <div :style="{top:3,left:3+46,width:40,height:40,backgroundColor:'#b0c847'}">
+      <div :style="{top:1,left:1,width:10,height:10,backgroundColor:'#1135a1'}"></div>
+      <div :style="{top:1,left:1+13,width:10,height:10,backgroundColor:'#aab6db'}"></div>
+      <div :style="{top:1,left:1+13+13,width:10,height:10,backgroundColor:'#35194d'}"></div>
+      <div :style="{top:1+13,left:1,width:10,height:10,backgroundColor:'#a2023a'}"></div>
+      <div :style="{top:1+13,left:1+13,width:10,height:10,backgroundColor:'#e13470'}"></div>
+      <div :style="{top:1+13,left:1+13+13,width:10,height:10,backgroundColor:'#d935e8'}"></div>
+      <div :style="{top:1+13+13,left:1,width:10,height:10,backgroundColor:'#2f63dc'}"></div>
+      <div :style="{top:1+13+13,left:1+13,width:10,height:10,backgroundColor:'#240ee2'}"></div>
+      <div :style="{top:1+13+13,left:1+13+13,width:10,height:10,backgroundColor:'#2fdbb9'}"></div>
+    </div>
+
+    <div :style="{top:3,left:3+46+46,width:40,height:40,backgroundColor:'#5cb720'}">
+      <div :style="{top:1,left:1,width:10,height:10,backgroundColor:'#1135a1'}"></div>
+      <div :style="{top:1,left:1+13,width:10,height:10,backgroundColor:'#aab6db'}"></div>
+      <div :style="{top:1,left:1+13+13,width:10,height:10,backgroundColor:'#35194d'}"></div>
+      <div :style="{top:1+13,left:1,width:10,height:10,backgroundColor:'#a2023a'}"></div>
+      <div :style="{top:1+13,left:1+13,width:10,height:10,backgroundColor:'#e13470'}"></div>
+      <div :style="{top:1+13,left:1+13+13,width:10,height:10,backgroundColor:'#d935e8'}"></div>
+      <div :style="{top:1+13+13,left:1,width:10,height:10,backgroundColor:'#2f63dc'}"></div>
+      <div :style="{top:1+13+13,left:1+13,width:10,height:10,backgroundColor:'#240ee2'}"></div>
+      <div :style="{top:1+13+13,left:1+13+13,width:10,height:10,backgroundColor:'#2fdbb9'}"></div>
+    </div>
+
+    <div :style="{top:3+46,left:3,width:40,height:40,backgroundColor:'#1db39d'}">
+      <div :style="{top:1,left:1,width:10,height:10,backgroundColor:'#1135a1'}"></div>
+      <div :style="{top:1,left:1+13,width:10,height:10,backgroundColor:'#aab6db'}"></div>
+      <div :style="{top:1,left:1+13+13,width:10,height:10,backgroundColor:'#35194d'}"></div>
+      <div :style="{top:1+13,left:1,width:10,height:10,backgroundColor:'#a2023a'}"></div>
+      <div :style="{top:1+13,left:1+13,width:10,height:10,backgroundColor:'#e13470'}"></div>
+      <div :style="{top:1+13,left:1+13+13,width:10,height:10,backgroundColor:'#d935e8'}"></div>
+      <div :style="{top:1+13+13,left:1,width:10,height:10,backgroundColor:'#2f63dc'}"></div>
+      <div :style="{top:1+13+13,left:1+13,width:10,height:10,backgroundColor:'#240ee2'}"></div>
+      <div :style="{top:1+13+13,left:1+13+13,width:10,height:10,backgroundColor:'#2fdbb9'}"></div>
+    </div>
+
+    <div :style="{top:3+46,left:3+46,width:40,height:40,backgroundColor:'#a75b17'}">
+      <div :style="{top:1,left:1,width:10,height:10,backgroundColor:'#1135a1'}"></div>
+      <div :style="{top:1,left:1+13,width:10,height:10,backgroundColor:'#aab6db'}"></div>
+      <div :style="{top:1,left:1+13+13,width:10,height:10,backgroundColor:'#35194d'}"></div>
+      <div :style="{top:1+13,left:1,width:10,height:10,backgroundColor:'#a2023a'}"></div>
+      <div :style="{top:1+13,left:1+13,width:10,height:10,backgroundColor:'#e13470'}"></div>
+      <div :style="{top:1+13,left:1+13+13,width:10,height:10,backgroundColor:'#d935e8'}"></div>
+      <div :style="{top:1+13+13,left:1,width:10,height:10,backgroundColor:'#2f63dc'}"></div>
+      <div :style="{top:1+13+13,left:1+13,width:10,height:10,backgroundColor:'#240ee2'}"></div>
+      <div :style="{top:1+13+13,left:1+13+13,width:10,height:10,backgroundColor:'#2fdbb9'}"></div>
+    </div>
+
+    <div :style="{top:3+46,left:3+46+46,width:40,height:40,backgroundColor:'#135ac3'}">
+      <div :style="{top:1,left:1,width:10,height:10,backgroundColor:'#1135a1'}"></div>
+      <div :style="{top:1,left:1+13,width:10,height:10,backgroundColor:'#aab6db'}"></div>
+      <div :style="{top:1,left:1+13+13,width:10,height:10,backgroundColor:'#35194d'}"></div>
+      <div :style="{top:1+13,left:1,width:10,height:10,backgroundColor:'#a2023a'}"></div>
+      <div :style="{top:1+13,left:1+13,width:10,height:10,backgroundColor:'#e13470'}"></div>
+      <div :style="{top:1+13,left:1+13+13,width:10,height:10,backgroundColor:'#d935e8'}"></div>
+      <div :style="{top:1+13+13,left:1,width:10,height:10,backgroundColor:'#2f63dc'}"></div>
+      <div :style="{top:1+13+13,left:1+13,width:10,height:10,backgroundColor:'#240ee2'}"></div>
+      <div :style="{top:1+13+13,left:1+13+13,width:10,height:10,backgroundColor:'#2fdbb9'}"></div>
+    </div>
+
+    <div :style="{top:3+46+46,left:3,width:40,height:40,backgroundColor:'#af19d9'}">
+      <div :style="{top:1,left:1,width:10,height:10,backgroundColor:'#1135a1'}"></div>
+      <div :style="{top:1,left:1+13,width:10,height:10,backgroundColor:'#aab6db'}"></div>
+      <div :style="{top:1,left:1+13+13,width:10,height:10,backgroundColor:'#35194d'}"></div>
+      <div :style="{top:1+13,left:1,width:10,height:10,backgroundColor:'#a2023a'}"></div>
+      <div :style="{top:1+13,left:1+13,width:10,height:10,backgroundColor:'#e13470'}"></div>
+      <div :style="{top:1+13,left:1+13+13,width:10,height:10,backgroundColor:'#d935e8'}"></div>
+      <div :style="{top:1+13+13,left:1,width:10,height:10,backgroundColor:'#2f63dc'}"></div>
+      <div :style="{top:1+13+13,left:1+13,width:10,height:10,backgroundColor:'#240ee2'}"></div>
+      <div :style="{top:1+13+13,left:1+13+13,width:10,height:10,backgroundColor:'#2fdbb9'}"></div>
+    </div>
+
+    <div :style="{top:3+46+46,left:3+46,width:40,height:40,backgroundColor:'#da308b'}">
+      <div :style="{top:1,left:1,width:10,height:10,backgroundColor:'#1135a1'}"></div>
+      <div :style="{top:1,left:1+13,width:10,height:10,backgroundColor:'#aab6db'}"></div>
+      <div :style="{top:1,left:1+13+13,width:10,height:10,backgroundColor:'#35194d'}"></div>
+      <div :style="{top:1+13,left:1,width:10,height:10,backgroundColor:'#a2023a'}"></div>
+      <div :style="{top:1+13,left:1+13,width:10,height:10,backgroundColor:'#e13470'}"></div>
+      <div :style="{top:1+13,left:1+13+13,width:10,height:10,backgroundColor:'#d935e8'}"></div>
+      <div :style="{top:1+13+13,left:1,width:10,height:10,backgroundColor:'#2f63dc'}"></div>
+      <div :style="{top:1+13+13,left:1+13,width:10,height:10,backgroundColor:'#240ee2'}"></div>
+      <div :style="{top:1+13+13,left:1+13+13,width:10,height:10,backgroundColor:'#2fdbb9'}"></div>
+    </div>
+
+    <div :style="{top:3+46+46,left:3+46+46,width:40,height:40,backgroundColor:'#da2b2b'}">
+      <div :style="{top:1,left:1,width:10,height:10,backgroundColor:'#1135a1'}"></div>
+      <div :style="{top:1,left:1+13,width:10,height:10,backgroundColor:'#aab6db'}"></div>
+      <div :style="{top:1,left:1+13+13,width:10,height:10,backgroundColor:'#35194d'}"></div>
+      <div :style="{top:1+13,left:1,width:10,height:10,backgroundColor:'#a2023a'}"></div>
+      <div :style="{top:1+13,left:1+13,width:10,height:10,backgroundColor:'#e13470'}"></div>
+      <div :style="{top:1+13,left:1+13+13,width:10,height:10,backgroundColor:'#d935e8'}"></div>
+      <div :style="{top:1+13+13,left:1,width:10,height:10,backgroundColor:'#2f63dc'}"></div>
+      <div :style="{top:1+13+13,left:1+13,width:10,height:10,backgroundColor:'#240ee2'}"></div>
+      <div :style="{top:1+13+13,left:1+13+13,width:10,height:10,backgroundColor:'#2fdbb9'}"></div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { shallowRef, onMounted } from "vue";
+import { useFocusHub } from "jsview";
+const focusHub = useFocusHub();
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+  getStyleClass: Function,
+  num: Number,
+});
+
+let focused = shallowRef(false);
+const onFocus = () => {
+  focused.value = "grow";
+};
+
+const onBlur = () => {
+  focused.value = false;
+};
+
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onEdge", props.onEdge);
+
+onMounted(() => {
+  focusHub.setFocus("StyleShow");
+});
+</script>
+
+<style lang="scss" scoped></style>

package/ClassDynamicSwitching/components/StyleShow.vue

@@ -0,0 +1,68 @@
+<template>
+  <div :style="{ backgroundColor: '#87CEEB', width: 1280, height: 720 }">
+    <div :style="{ top: 10 }">
+      <metro-widget
+        name="StyleShow"
+        ref="styleRef"
+        :width="props.style.width"
+        :height="props.style.height"
+        :provideData="provideData"
+        :direction="HORIZONTAL"
+        :measures="measures"
+        :onEdge="onEdge"
+        :padding="props.style.padding"
+        :sendFocusRectEvent="true"
+      >
+        <template #renderItem="{ data, query, onEdge, onAction }">
+          <StyleItem
+            :data="data"
+            :query="query"
+            :onEdge="onEdge"
+            :onAction="onAction"
+          />
+        </template>
+      </metro-widget>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { inject, shallowRef, watch } from "vue";
+import { MetroWidget, HORIZONTAL } from "jsview";
+import StyleItem from "./StyleItem.vue";
+const props = defineProps({
+  style: Object,
+  data: Array,
+});
+let styleRef = shallowRef(null);
+let change = inject("change");
+
+const provideData = () => {
+  if (change.value) {
+    const data = props.data.slice(33, 65);
+    return data;
+  } else {
+    const data = props.data.slice(0, 32);
+    return data;
+  }
+};
+watch(change, (n, o) => {
+  if (n !== o) {
+    provideData();
+    styleRef.value?.refreshData(true);
+  }
+});
+const measures = (item) => {
+  return {
+    ...item,
+    focusable: true,
+    marginRight: 20,
+    marginBottom: 20,
+  };
+};
+const onEdge = () => {
+  console.log("到边缘了");
+};
+</script>
+
+<style lang="scss" scoped></style>

package/DemoHomepage/router.js

@@ -1,7 +1,7 @@
 import { createRouter } from 'vue-router';
 import { jsvCreateHashHistory } from 'jsview';
 import { metroWidgetRouteList } from "../MetroWidgetDemos"
-let routeList  = [
+let routeList = [
   // 功能实例
   {
     name: 'Home',
@@ -16,6 +16,16 @@ let routeList  = [
     path: '/feature/Basic',
     component: () => import('jsview-vue-samples/Basic/App.vue'),
   },
+  {
+    name: '饼图测试',
+    path: '/feature/SecTorTest',
+    component: () => import('jsview-vue-samples/SecTorTest/App.vue'),
+  },
+  {
+    name: 'TextureStore测试',
+    path: '/feature/TextureStoreTest',
+    component: () => import('jsview-vue-samples/TextureStoreTest/App.vue'),
+  },
   {
     name: 'NativeSharedView测试',
     path: '/feature/TestNativeSharedView',
@@ -193,34 +203,78 @@ let routeList  = [
     component: () => import('jsview-vue-samples/MockjsDemo/App.vue'),
   },
   {
-    name:'红包雨',
-    path:'/Game/GiftRain',
-    component:()=>import('jsview-vue-samples/GiftRain/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')
+    name: '雷达图',
+    path: '/Game/RadarChart',
+    component: () => import('jsview-vue-samples/JsvRadarChart/App.vue')
   },
   {
-    name:'跑酷游戏',
-    path:'/Game/Parkour',
-    component:()=>import('jsview-vue-samples/Parkour/App.vue')
+    name: '跑酷游戏',
+    path: '/Game/Parkour',
+    component: () => import('jsview-vue-samples/Parkour/App.vue')
   },
   {
     name: 'Hash参数',
     path: '/feature/HashParams',
     component: () => import('jsview-vue-samples/HashParams/App.vue'),
   },
+  {
+    name: '按键打断描画',
+    path: '/feature/BreakRender',
+    component: () => import('jsview-vue-samples/BreakRender/App.vue'),
+  },
+  {
+    name: 'latex示例',
+    path: '/feature/LatexDemo',
+    component: () => import('jsview-vue-samples/LatexDemo/App.vue'),
+  },
+  {
+    name: 'GetRect示例',
+    path: '/feature/GetRect',
+    component: () => import('jsview-vue-samples/GetBoundingClientRect/App.vue'),
+  },
+  {
+    name: '动态Class示例',
+    path: '/feature/DynamicClass',
+    component: () => import('jsview-vue-samples/DynamicClass/App.vue'),
+  },
+  {
+    name: 'Class动态切换示例',
+    path: '/feature/ClassDynamicSwitching',
+    component: () => import('jsview-vue-samples/ClassDynamicSwitching/App.vue'),
+  },
+  {
+    name: 'JsvLine示例',
+    path: '/feature/JsvLine',
+    component: () => import('jsview-vue-samples/JsvLine/App.vue'),
+  },
+  {
+    name: 'FreeMove示例',
+    path: '/feature/FreeMove',
+    component: () => import('jsview-vue-samples/FreeMove/App.vue'),
+  },
+  {
+    name: '思维导图示例',
+    path: '/feature/MindMap',
+    component: () => import('jsview-vue-samples/MindMap/App.vue'),
+  },
+  {
+    name: 'latex公式',
+    path: '/feature/LatexFormula',
+    component: () => import('jsview-vue-samples/LatexFormula/App.vue'),
+  }
 ];
 
 //添加MetroWidget demo
 routeList = routeList.concat(metroWidgetRouteList);
 
 const router = createRouter({
-  // 浏览器调试和盒子上都可以使用类WebHashHistory的jsvCreateHashHistory(推荐)
-  // 或 createMemoryHistory;
-  // createWebHashHistory只能用于浏览器调试，盒子不支持
+  // 浏览器调试和盒子上都可以使用功能与WebHashHistory相同的jsvCreateHashHistory(推荐)
+  // 因为createWebHashHistory只能用于PC浏览器模拟环境调试，盒子不支持
   history: jsvCreateHashHistory(),
   routes: routeList,
 });