@shijiu/jsview-vue-samples 2.3.151-test.0 → 3.0.0-test.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (228) hide show
  1. package/ABImageAlt/App.vue +114 -0
  2. package/ABImageAlt/Item.vue +133 -0
  3. package/{MetroWidgetDemos/SkeletonDiagram/assets/imageList.json → ABImageAlt/assets/imageList.js} +9 -1
  4. package/ABImageAlt/data.js +17 -0
  5. package/AI_Check_Rules.txt +5 -0
  6. package/AnimPicture/App.vue +20 -10
  7. package/ApicSwitch/App.vue +90 -0
  8. package/ApicSwitch/TabItem.vue +65 -0
  9. package/ApicSwitch/WebpShow.vue +24 -0
  10. package/ApicSwitch/data.js +50 -0
  11. package/Basic/AI_skills_update.md +1 -0
  12. package/Basic/components/div/ColorFormatTest.vue +93 -0
  13. package/Basic/components/div/DivRadius.vue +97 -15
  14. package/Basic/components/div/DivTag3Group.vue +30 -0
  15. package/Basic/components/img/ImageType.vue +65 -0
  16. package/Basic/components/panel/Panel2.vue +13 -1
  17. package/Basic/components/text/TextAlign.vue +7 -1
  18. package/BlobLoadTest/App.vue +201 -0
  19. package/BreakLinesApi/App.vue +82 -0
  20. package/CanvasDrawChart/App.vue +11 -0
  21. package/CanvasDrawChart/Graph1.vue +104 -0
  22. package/CanvasDrawChart/Graph2.vue +115 -0
  23. package/CssPreprocessor/Scss/PanelData.js +1 -1
  24. package/CssPreprocessor/Scss/components/scss-group4/ScssMaps.vue +4 -3
  25. package/CssPreprocessor/Scss/components/scss-group5/ScssImporting.vue +2 -2
  26. package/DemoForOperator/Bounce/FreeMoveBuilder.js +1 -1
  27. package/DemoForOperator/Firework1/App.vue +12 -1
  28. package/DemoForOperator/Firework1/Fireworks.vue +18 -0
  29. package/DemoForOperator/FlipPage/FlipPage/FlipPage.vue +1 -0
  30. package/DemoForOperator/Focus/Alpha/Item.vue +1 -0
  31. package/DemoForOperator/Focus/Light/Item.vue +1 -0
  32. package/DemoForOperator/Focus/Normal/Item.vue +1 -0
  33. package/DemoForOperator/FrameShadow/FrameShadow.vue +1 -1
  34. package/DemoForOperator/Genie/App.vue +20 -6
  35. package/DemoForOperator/Genie/App2.vue +61 -0
  36. package/DemoForOperator/Genie/geniePakcer/GenieImage.vue +298 -0
  37. package/DemoForOperator/Genie/geniePakcer/GenieSlot.vue +292 -0
  38. package/DemoForOperator/Genie/geniePakcer/GenieTools.ts +463 -0
  39. package/DemoForOperator/Jigsaw/JigsawFull.vue +12 -7
  40. package/DemoForOperator/Jigsaw/JigsawSingle.vue +13 -7
  41. package/DemoForOperator/LongChatBox/App.vue +13 -13
  42. package/DemoForOperator/LongChatBox/Bubble.vue +78 -66
  43. package/DemoForOperator/LongChatBox/LongChat.vue +68 -36
  44. package/DemoForOperator/LongChatBox/testData.js +7 -44
  45. package/DemoForOperator/Sound/Bounce/FreeMoveBuilder.js +1 -1
  46. package/DemoForOperator/routeList.js +8 -2
  47. package/DemoHomepage/App.vue +74 -1
  48. package/DemoHomepage/components/BodyFrame.vue +1 -0
  49. package/DemoHomepage/components/TabFrame.vue +1 -1
  50. package/DemoHomepage/router.js +723 -160
  51. package/DemoHomepage/views/Homepage.vue +60 -2
  52. package/DemoHomepage/watchTest.vue +50 -0
  53. package/FilterDemo/AnimatePic.vue +63 -17
  54. package/FilterDemo/App.vue +3 -3
  55. package/FlexCellDemo/AI_skills_update.md +4 -0
  56. package/FlexCellDemo/TestFrame1.vue +12 -2
  57. package/FlexCellDemo/TestFrame2.vue +10 -1
  58. package/FlexCellDemo/TestFrame3.vue +114 -59
  59. package/FpsLimit/App.vue +102 -0
  60. package/FreeMoveChildAttract/App.vue +18 -8
  61. package/FreeMoveLink/App.vue +49 -20
  62. package/Hover/App.vue +144 -0
  63. package/HttpRequestSSE/SSEReader.js +200 -0
  64. package/ImpactStop/App.vue +2 -2
  65. package/Input/FullKeyboard.vue +3 -3
  66. package/Input/InputPanel.vue +63 -3
  67. package/JsvLine/App.vue +53 -38
  68. package/LatexDemo/App.vue +3 -1
  69. package/LatexFormula/App.vue +196 -0
  70. package/LongImage/App.vue +1 -1
  71. package/LongImage/LongImageScroll.vue +100 -47
  72. package/LongImage/Scroll.vue +28 -9
  73. package/LongText/LongTextScroll.vue +1 -0
  74. package/Markdown/App.vue +36 -0
  75. package/Markdown/Bubble.vue +109 -0
  76. package/Markdown/LongChat.vue +206 -0
  77. package/Markdown/Markdown/Markdown.vue +156 -0
  78. package/Markdown/Markdown/index.ts +1 -0
  79. package/Markdown/Markdown/marked/LICENSE.md +45 -0
  80. package/Markdown/Markdown/marked/index.ts +2 -0
  81. package/Markdown/Markdown/marked/marked.d.ts +756 -0
  82. package/Markdown/Markdown/marked/marked.js +71 -0
  83. package/Markdown/Markdown/parser.ts +1365 -0
  84. package/Markdown/data.js +581 -0
  85. package/MetroWidgetDemos/AI_skills_update.md +2 -0
  86. package/MetroWidgetDemos/ListExpand/ChildItem.vue +130 -0
  87. package/MetroWidgetDemos/ListExpand/ExpandItem.vue +375 -0
  88. package/MetroWidgetDemos/ListExpand/ExpandItem1.vue +403 -0
  89. package/MetroWidgetDemos/ListExpand/assets/arrow-down.png +0 -0
  90. package/MetroWidgetDemos/ListExpand/assets/up-arrow.png +0 -0
  91. package/MetroWidgetDemos/ListExpand/components/WidgetListHandler.vue +150 -0
  92. package/MetroWidgetDemos/ListExpand/index.vue +88 -0
  93. package/MetroWidgetDemos/ListExpand/list.js +2421 -0
  94. package/MetroWidgetDemos/RefreshDemo/App.vue +14 -1
  95. package/MetroWidgetDemos/RenderAccelerate/App.vue +142 -0
  96. package/MetroWidgetDemos/RenderAccelerate/AppPage.vue +78 -0
  97. package/MetroWidgetDemos/RenderAccelerate/AppTab.vue +62 -0
  98. package/MetroWidgetDemos/RenderAccelerate/ContentItem.vue +409 -0
  99. package/MetroWidgetDemos/RenderAccelerate/Item.vue +67 -0
  100. package/MetroWidgetDemos/RenderAccelerate/TabItem.vue +100 -0
  101. package/MetroWidgetDemos/RenderAccelerate/ViewSwiper.vue +215 -0
  102. package/MetroWidgetDemos/RenderAccelerate/WidgetItem.vue +107 -0
  103. package/MetroWidgetDemos/SkeletonDiagram/App.vue +35 -8
  104. package/MetroWidgetDemos/SkeletonDiagram/Item.vue +11 -2
  105. package/MetroWidgetDemos/SkeletonDiagram/assets/imageList.js +245 -0
  106. package/MetroWidgetDemos/SkeletonDiagram/data.js +3 -3
  107. package/MetroWidgetDemos/SpatialNav/App.vue +177 -0
  108. package/MetroWidgetDemos/SpatialNav/Buttons.vue +83 -0
  109. package/MetroWidgetDemos/SpatialNav/CustomFocus.vue +57 -0
  110. package/MetroWidgetDemos/{TripleWidget → SpatialNav}/Item.vue +1 -8
  111. package/MetroWidgetDemos/{TripleWidget/WidgetItem.vue → SpatialNav/SimpleFloor.vue} +14 -45
  112. package/MetroWidgetDemos/SpatialNav/StepMw.vue +113 -0
  113. package/MetroWidgetDemos/SpatialNav/TabContent/TabContent.vue +185 -0
  114. package/MetroWidgetDemos/SpatialNav/TripleSection/TripleSection.vue +69 -0
  115. package/MetroWidgetDemos/SpatialNav/TripleSection/WidgetItem.vue +100 -0
  116. package/MetroWidgetDemos/SpatialNav/TvSection/List.vue +75 -0
  117. package/MetroWidgetDemos/SpatialNav/TvSection/TvSection.vue +91 -0
  118. package/MetroWidgetDemos/basic2/App.vue +407 -0
  119. package/MetroWidgetDemos/basic2/Item.vue +68 -0
  120. package/MetroWidgetDemos/direction/App.vue +22 -0
  121. package/MetroWidgetDemos/gazeFocusDiff/App.vue +126 -0
  122. package/MetroWidgetDemos/gazeFocusDiff/Item.vue +87 -0
  123. package/MetroWidgetDemos/minimalUsage/App.vue +66 -0
  124. package/MetroWidgetDemos/minimalUsage/Item.vue +54 -0
  125. package/MetroWidgetDemos/ninePatchFocusPage/App.vue +22 -7
  126. package/MetroWidgetDemos/ninePatchFocusPage/Item.vue +7 -5
  127. package/MetroWidgetDemos/ninePatchFocusPage/focusConstants.js +2 -0
  128. package/MetroWidgetDemos/routeList.js +203 -12
  129. package/MetroWidgetDemos/slideSetting/App.vue +288 -99
  130. package/MetroWidgetDemos/zIndex/App.vue +117 -0
  131. package/MetroWidgetDemos/zIndex/Item.vue +61 -0
  132. package/NinePatchTester/App.vue +24 -31
  133. package/PreDecode/App.vue +140 -0
  134. package/ReactiveTest/App.vue +115 -0
  135. package/ReactiveTest/Item.vue +92 -0
  136. package/ReactiveTest/assets/imageList.js +245 -0
  137. package/ReactiveTest/component/TestSmartDiv.vue +50 -0
  138. package/ReactiveTest/component/TestSmartDivSrcList.vue +74 -0
  139. package/ReactiveTest/component/TestSmartImage.vue +46 -0
  140. package/ReactiveTest/component/TestSmartImageSrcList.vue +90 -0
  141. package/ReactiveTest/component/TestSmartImageStyle.vue +41 -0
  142. package/ReactiveTest/data.js +49 -0
  143. package/ScreenToBlob/App.vue +250 -0
  144. package/SecTorTest/App.vue +9 -3
  145. package/SpringFestival/SpringFestivalScene/FreeMoveBuilder.js +3 -3
  146. package/SyncDecode/App.vue +137 -0
  147. package/TextSizeLimit/App.vue +211 -0
  148. package/TransitPage/App.vue +2 -0
  149. package/assets/logo.png +0 -0
  150. package/package.json +5 -5
  151. package/DemoForOperator/Genie/geniePakcer/Genie.vue +0 -741
  152. package/DemoForOperator/LongChatBox/TextManager.ts +0 -147
  153. package/DemoForOperator/LongChatBox/VirtualList.vue +0 -298
  154. package/DemoForOperator/LongChatBox/utile.js +0 -331
  155. package/DivMetroPerformance/App.vue +0 -157
  156. package/DivMetroPerformance/Item.vue +0 -58
  157. package/DivMetroPerformance/assets/bg.jpg +0 -0
  158. package/DivMetroPerformance/assets/coupon_content.png +0 -0
  159. package/DivMetroPerformance/assets/coupon_left.png +0 -0
  160. package/DivMetroPerformance/assets/coupon_mid.png +0 -0
  161. package/DivMetroPerformance/assets/coupon_right.png +0 -0
  162. package/DivMetroPerformance/assets/focus_border.png +0 -0
  163. package/DivMetroPerformance/assets/holder_logo.png +0 -0
  164. package/DivMetroPerformance/assets/jrbm.png +0 -0
  165. package/DivMetroPerformance/assets/line_left.png +0 -0
  166. package/DivMetroPerformance/assets/line_mid.png +0 -0
  167. package/DivMetroPerformance/assets/line_right.png +0 -0
  168. package/DivMetroPerformance/assets/loading.png +0 -0
  169. package/DivMetroPerformance/assets/logo.png +0 -0
  170. package/DivMetroPerformance/assets/mcjx.png +0 -0
  171. package/DivMetroPerformance/assets/tao.png +0 -0
  172. package/DivMetroPerformance/assets/tmall.png +0 -0
  173. package/DivMetroPerformance/border.png +0 -0
  174. package/DivMetroPerformance/components/ContentItem.vue +0 -384
  175. package/DivMetroPerformance/components/MyTab.vue +0 -129
  176. package/DivMetroPerformance/data.js +0 -124
  177. package/DivMetroPerformance/utils/GridItem.vue +0 -28
  178. package/DivMetroPerformance/utils/GridPlate.vue +0 -85
  179. package/MediaDemo/App.vue +0 -127
  180. package/MediaDemo/assets/audio-poster.png +0 -0
  181. package/MediaDemo/components/Button.vue +0 -69
  182. package/MediaDemo/components/Controllor.vue +0 -286
  183. package/MediaDemo/components/StatusBar.vue +0 -100
  184. package/MediaDemo/components/frames/AudioFrame.vue +0 -39
  185. package/MediaDemo/components/frames/AudioPoster.vue +0 -48
  186. package/MediaDemo/components/frames/MediaFrame.vue +0 -153
  187. package/MediaDemo/components/frames/VideoFrame.vue +0 -39
  188. package/MetroWidgetDemos/TripleWidget/App.vue +0 -87
  189. package/MetroWidgetDemos/TripleWidget/SWidgetItem.vue +0 -99
  190. package/Parkour/App.vue +0 -13
  191. package/Parkour/Common/Context.js +0 -21
  192. package/Parkour/Common/MatchmanInfo.js +0 -62
  193. package/Parkour/Common/Random.js +0 -61
  194. package/Parkour/Common/Sound.js +0 -50
  195. package/Parkour/appConfig/HOW_TO_CONFIG.md +0 -20
  196. package/Parkour/appConfig/app.config.mjs +0 -5
  197. package/Parkour/appConfig/app_sign_private_key_sample.crt +0 -28
  198. package/Parkour/appConfig/app_sign_public_key_sample.pem +0 -9
  199. package/Parkour/appConfig/jsview.config.mjs +0 -39
  200. package/Parkour/assets/Bgimages/bg1.png +0 -0
  201. package/Parkour/assets/Bgimages/bg2.png +0 -0
  202. package/Parkour/assets/Bgimages/bg3.png +0 -0
  203. package/Parkour/assets/Bgimages/bg4.png +0 -0
  204. package/Parkour/assets/Bgimages/bg5.png +0 -0
  205. package/Parkour/assets/audio/jump.mp3 +0 -0
  206. package/Parkour/assets/audio/lose.mp3 +0 -0
  207. package/Parkour/assets/role_skin1/fail.json +0 -44
  208. package/Parkour/assets/role_skin1/fail.png +0 -0
  209. package/Parkour/assets/role_skin1/jump_down.json +0 -20
  210. package/Parkour/assets/role_skin1/jump_down.png +0 -0
  211. package/Parkour/assets/role_skin1/jump_up.json +0 -44
  212. package/Parkour/assets/role_skin1/jump_up.png +0 -0
  213. package/Parkour/assets/role_skin1/roll.json +0 -44
  214. package/Parkour/assets/role_skin1/roll.png +0 -0
  215. package/Parkour/assets/role_skin1/run.json +0 -52
  216. package/Parkour/assets/role_skin1/run.png +0 -0
  217. package/Parkour/components/Backdrop.vue +0 -61
  218. package/Parkour/components/GameSence.vue +0 -602
  219. package/Parkour/components/Matchman.vue +0 -85
  220. package/ThrowMoveDemo/AccelerateDemo.vue +0 -85
  221. package/ThrowMoveDemo/App.vue +0 -104
  222. package/ThrowMoveDemo/LRParabolicDemo.vue +0 -101
  223. package/ThrowMoveDemo/TargetDemo.vue +0 -87
  224. package/ThrowMoveDemo/UDParabolicDemo.vue +0 -92
  225. /package/{AnimPicture/assets → assets}/animated_webp.webp +0 -0
  226. /package/{AnimPicture/assets → assets}/ball_3.webp +0 -0
  227. /package/{AnimPicture/assets → assets}/girl_run.gif +0 -0
  228. /package/{AnimPicture/assets → assets}/quan.webp +0 -0
@@ -1,48 +0,0 @@
1
- <script>
2
- import { inject, watch } from 'vue'
3
- import { Options, Vue } from "vue-class-component";
4
- import posterImgPath from '../../assets/audio-poster.png';
5
-
6
- @Options({
7
- props: {
8
- playing: Boolean
9
- }
10
- })
11
- class AudioPoster extends Vue {
12
- constructor(props) {
13
- super(props);
14
-
15
- this.posterImgPath = posterImgPath;
16
- }
17
-
18
- onPlayPauseChanged(play) {
19
- console.warn('onPlayPauseChanged() ' + play);
20
- }
21
- }
22
-
23
- export default AudioPoster;
24
- </script>
25
-
26
- <template>
27
- <div
28
- :style="{
29
- left: 380,
30
- top: 10,
31
- width: 512,
32
- height: 512,
33
- backgroundImage: posterImgPath,
34
- animation: (playing ? 'PosterRotate 6s infinite linear' : null),
35
- }"
36
- />
37
- </template>
38
-
39
- <style scoped>
40
- @keyframes PosterRotate {
41
- from {
42
- transform: rotate3d(0, 0, 1, 0deg);
43
- }
44
- to {
45
- transform: rotate3d(0, 0, 1, 360deg);
46
- }
47
- }
48
- </style>
@@ -1,153 +0,0 @@
1
- <script>
2
- import { inject, watch } from 'vue'
3
- import { Options, Vue } from "vue-class-component";
4
-
5
- @Options({
6
- props: {
7
- tagName: String,
8
- src: String,
9
- style: { type:Object, default: {}},
10
- },
11
- })
12
- class MediaFrame extends Vue {
13
- constructor(props) {
14
- super(props);
15
-
16
- this.mediaRef = null;
17
-
18
- this.mediaCtrl = inject('mediaCtrl');
19
- this.mediaTime = inject('mediaTime');
20
- this.mediaStatus = inject('mediaStatus');
21
-
22
- watch(() => this.mediaCtrl.seek, this.seekMediaStep.bind(this));
23
- watch(() => this.mediaCtrl.volume, this.volumeMediaStep.bind(this));
24
- watch(() => this.mediaCtrl.playTrigger, this.setPlayPause.bind(this));
25
- watch(() => this.mediaCtrl.loadTrigger, this.reload.bind(this));
26
- }
27
-
28
- mounted() {
29
- this.mediaRef = this.$refs.mediaRef;
30
- this.mediaStatus.volume = this.mediaRef.volume;
31
- }
32
-
33
- seekMediaStep(timeStep) {
34
- if(!this.mediaRef) {
35
- return;
36
- }
37
-
38
- let playEnd = false;
39
- let seekTime = this.mediaRef.currentTime + Math.ceil(timeStep);
40
- if(seekTime < 0) {
41
- seekTime = 0;
42
- } else if(seekTime > this.mediaTime.duration) {
43
- seekTime = this.mediaTime.duration;
44
- if(this.mediaRef.currentTime != this.mediaTime.duration) { // 触发一次播放,收到ended事件
45
- playEnd = true;
46
- }
47
- }
48
- this.mediaRef.currentTime = seekTime;
49
- if(playEnd) {
50
- this.setPlayPause(true);
51
- }
52
- }
53
-
54
- setPlayPause() {
55
- if(!this.mediaStatus.playing) {
56
- this.mediaRef.play();
57
- } else {
58
- this.mediaRef.pause();
59
- }
60
- }
61
-
62
- reload() {
63
- this.mediaRef.load();
64
- }
65
-
66
- volumeMediaStep(volumeStep) {
67
- if(!this.mediaRef) {
68
- return;
69
- }
70
-
71
- let volume = this.mediaRef.volume + volumeStep;
72
- if(volume < 0) {
73
- volume += 1;
74
- }else if(volume > 1) {
75
- volume -= 1;
76
- }
77
- volume = Math.round(volume * 10) / 10; // 保留一位小数
78
- this.mediaRef.volume = volume;
79
- this.mediaStatus.volume = volume;
80
- }
81
-
82
- onErrorEvent(event) {
83
- const state = event.type + ": code=" + this.mediaRef.error.code + ", message=" + this.mediaRef.error.message;
84
- console.log("MediaFrame.onErrorEvent()", event, state);
85
- this.mediaStatus.playState = state;
86
- }
87
-
88
- onTimeUpdate(event) {
89
- if(!this.mediaRef) { // unmounted
90
- return;
91
- }
92
- // console.log("MediaFrame.onTimeUpdate()", event, this.mediaRef.currentTime);
93
- this.mediaTime.currentTime = this.mediaRef.currentTime;
94
- }
95
-
96
- onDurationChange(event) {
97
- console.log("MediaFrame.onDurationChange()", event.type);
98
- this.mediaTime.duration = this.mediaRef.duration;
99
- }
100
-
101
- onOtherEvent(event) {
102
- console.log("MediaFrame.onOtherEvent()", event.type);
103
- this.mediaStatus.playState = event.type;
104
- if(event.type == 'playing') {
105
- this.mediaStatus.playing = true;
106
- } else if(event.type == 'loadstart'
107
- || event.type == 'pause'
108
- || event.type == 'error') {
109
- this.mediaStatus.playing = false;
110
- }
111
- }
112
- }
113
-
114
- export default MediaFrame;
115
- </script>
116
-
117
- <template>
118
- <div>
119
- <!-- <component :is="tagName"> 可以直接换成<video>/<audio>, -->
120
- <!-- 这里是为了统一onEvent处理才这样写 -->
121
- <component :is="tagName"
122
- ref="mediaRef"
123
-
124
- :style="style"
125
-
126
- :autoplay="mediaCtrl.autoplay"
127
- :loop="mediaCtrl.loop"
128
- :muted="mediaCtrl.mute"
129
- :playbackRate="mediaCtrl.playbackRate"
130
- :src="src"
131
-
132
- :onabort="onOtherEvent"
133
- :oncanplay="onOtherEvent"
134
- :oncanplaythrough="onOtherEvent"
135
- :ondurationchange="onDurationChange"
136
- :onended="onOtherEvent"
137
- :onerror="onErrorEvent"
138
- :onload="onOtherEvent"
139
- :onloadedmetadata="onOtherEvent"
140
- :onloadstart="onOtherEvent"
141
- :onpause="onOtherEvent"
142
- :onplay="onOtherEvent"
143
- :onplaying="onOtherEvent"
144
- :onseeking="onOtherEvent"
145
- :onseeked="onOtherEvent"
146
- :onstalled="onOtherEvent"
147
- :ontimeupdate="onTimeUpdate"
148
- />
149
- </div>
150
- </template>
151
-
152
- <style scoped>
153
- </style>
@@ -1,39 +0,0 @@
1
- <script>
2
- import { inject } from 'vue'
3
- import { Options, Vue } from "vue-class-component";
4
- import MediaFrame from "./MediaFrame";
5
-
6
- @Options({
7
- components: {
8
- MediaFrame,
9
- },
10
- })
11
- class VideoFrame extends Vue {
12
- constructor(props) {
13
- super(props);
14
-
15
- this.videoCtrl = inject('videoCtrl');
16
-
17
- this.videoUrl = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MediaDemo/components/frames/VideoFrame/neza.mp4";
18
- }
19
- }
20
-
21
- export default VideoFrame;
22
- </script>
23
-
24
- <template>
25
- <MediaFrame
26
- tagName="video"
27
- :src="videoUrl"
28
-
29
- :style="{
30
- ...videoCtrl.layout,
31
- visibility: videoCtrl.visibility,
32
- objectFit: videoCtrl.objectFit,
33
- borderRadius: '80 80 160 240',
34
- }"
35
- />
36
- </template>
37
-
38
- <style scoped>
39
- </style>
@@ -1,87 +0,0 @@
1
- <!--
2
- * @Author: ChenChanghua
3
- * @Date: 2022-07-11 13:31:36
4
- * @Description: file content
5
- -->
6
- <script setup>
7
- import { MetroWidget, VERTICAL, useFocusHub, METRO_WIDGET_CONST } from "jsview";
8
- import WidgetItem from "./WidgetItem.vue";
9
- import SWidgetItem from "./SWidgetItem.vue";
10
- import { onMounted } from "vue";
11
-
12
- const focusHub = useFocusHub();
13
-
14
- const provideData = () => {
15
- const data = [];
16
- for (let i = 0; i < 10; i++) {
17
- data.push({
18
- width: 500,
19
- height: 170,
20
- name: "widget_" + i,
21
- marginBottom: 10,
22
- index: i,
23
- });
24
- }
25
- return data;
26
- };
27
-
28
- const measures = (item) => {
29
- return {
30
- width: item.width,
31
- height: item.height,
32
- marginRight: item.marginRight,
33
- marginBottom: item.marginBottom,
34
- /**重要代码: itemSlide设置为ACT_FOCUS_RECT_EVENT, 由子MetroWidget控制滚动 */
35
- itemSlide: METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT,
36
- };
37
- };
38
-
39
- onMounted(() => {
40
- focusHub.setFocus("mwWidget");
41
- });
42
- </script>
43
-
44
- <template>
45
- <div :style="{ width: 1280, height: 720, backgroundColor: '#007788' }" />
46
- <div
47
- :style="{
48
- left: 100,
49
- top: 20,
50
- width: 800,
51
- height: 400,
52
- fontSize: 30,
53
- color: '#FFFFFF',
54
- }"
55
- >
56
- {{ `MetroWidget嵌套了三层的组件, 焦点应该就近移动` }}
57
- </div>
58
- <!-- 为了保证边缘的item缩放后依旧完整显示, 需要设置padding, 注意width/height是包含padding的 -->
59
- <metro-widget
60
- name="mwWidget"
61
- :top="100"
62
- :left="50"
63
- :width="660"
64
- :height="600"
65
- :provideData="provideData"
66
- :padding="{ left: 30, right: 30 }"
67
- :direction="VERTICAL"
68
- :measures="measures"
69
- >
70
- <!-- 重要代码: 为了实现焦点就近移动, 需要传递onItemEdge回调 -->
71
- <template #renderItem="{ data, query, onAction, onItemEdge }">
72
- <SWidgetItem
73
- :data="data"
74
- :onAction="onAction"
75
- :onItemEdge="onItemEdge"
76
- ,
77
- :queryInfo="query"
78
- />
79
- <!-- <widget-item
80
- v-else
81
- :data="data"
82
- :onAction="onAction"
83
- :onItemEdge="onItemEdge"
84
- /> -->
85
- </template>
86
- </metro-widget>
87
- </template>
@@ -1,99 +0,0 @@
1
- <script setup>
2
- import { MetroWidget, VERTICAL, useFocusHub, METRO_WIDGET_CONST } from "jsview";
3
- import WidgetItem from "./WidgetItem.vue";
4
- import { onMounted, ref, shallowRef } from "vue";
5
-
6
- const props = defineProps({
7
- data: Object,
8
- onAction: Object,
9
- onItemEdge: Function,
10
- queryInfo: Object,
11
- });
12
-
13
- const focusHub = useFocusHub();
14
- const mwWidget2 = ref(null);
15
-
16
- const provideData = () => {
17
- const data = [];
18
- for (let i = 0; i < 1; i++) {
19
- data.push({
20
- width: 500,
21
- height: 170,
22
- name: "3级嵌套_" + i + props.data.index,
23
- marginBottom: 10,
24
- index: i,
25
- });
26
- }
27
- return data;
28
- };
29
-
30
- const measures = (item) => {
31
- return {
32
- width: item.width,
33
- height: item.height,
34
- marginRight: item.marginRight,
35
- marginBottom: item.marginBottom,
36
- itemSlide: METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT,
37
- };
38
- };
39
-
40
- onMounted(() => {});
41
-
42
- const widgetRef = shallowRef();
43
- const onFocus = (rect) => {
44
- if (rect) {
45
- //多层嵌套时需要将子的edge信息加上
46
- let rectInfo = {
47
- x: 0,
48
- y: 0,
49
- width: 0,
50
- height: 0,
51
- };
52
- let curRect = rect;
53
- while (curRect) {
54
- let { x, y, width, height } = curRect.rect;
55
- rectInfo.x += x;
56
- rectInfo.y += y;
57
- rectInfo.width = width;
58
- rectInfo.height = height;
59
- curRect = curRect.childEdgeInfo;
60
- }
61
- widgetRef.value?.setEnterFocusRect({
62
- direction: rect.direction,
63
- rect: rectInfo,
64
- });
65
- }
66
- focusHub.setFocus("mwWidget2" + props.data.index);
67
- };
68
- const onWidgetEdge = (info) => {
69
- props.onItemEdge(info);
70
- };
71
-
72
- props.onAction.register("onFocus", onFocus);
73
- </script>
74
-
75
- <template>
76
- <metro-widget
77
- ref="widgetRef"
78
- :name="'mwWidget2' + props.data.index"
79
- :top="0"
80
- :left="0"
81
- :width="660"
82
- :height="600"
83
- :provideData="provideData"
84
- :padding="{ left: 30, right: 30 }"
85
- :direction="VERTICAL"
86
- :measures="measures"
87
- :onEdge="onWidgetEdge"
88
- >
89
- <!-- 重要代码: 为了实现焦点就近移动, 需要传递onItemEdge回调 -->
90
- <template #renderItem="{ data, onAction, onItemEdge }">
91
- <widget-item
92
- :data="data"
93
- :onAction="onAction"
94
- :onItemEdge="onItemEdge"
95
- :rowNum="props.queryInfo.id"
96
- />
97
- </template>
98
- </metro-widget>
99
- </template>
package/Parkour/App.vue DELETED
@@ -1,13 +0,0 @@
1
- <template>
2
- <GameSence :key="SenceKey"></GameSence>
3
- </template>
4
-
5
- <script setup>
6
- import { provide, shallowRef } from 'vue';
7
- import GameSence from './components/GameSence.vue';
8
- //定义变量key,通过修改key值来进行页面重载
9
- let SenceKey = shallowRef(0)
10
- provide("SenceKey", SenceKey)
11
- </script>
12
-
13
- <style lang="scss" scoped></style>
@@ -1,21 +0,0 @@
1
- /* 在此存放Demo中全局影响的变量*/
2
- import { shallowRef } from "vue";
3
- class Context {
4
- constructor() {
5
- this.left = shallowRef(0);
6
- //各ref
7
- this.TopRef1=shallowRef(null)
8
- this.TopRef2=shallowRef(null)
9
- this.MidRef1=shallowRef(null);
10
- this.MidRef2=shallowRef(null);
11
- this.BottomRef1=shallowRef(null)
12
- this.BottomRef2=shallowRef(null);
13
- this.ObstacleRef1=shallowRef(null)
14
- this.ObstacleRef2=shallowRef(null)
15
- this.LeftRef1=shallowRef(null)
16
- this.LeftRef2=shallowRef(null)
17
- }
18
- }
19
- export {
20
- Context
21
- }
@@ -1,62 +0,0 @@
1
- /* 此js文件用于更新火柴人的动作 */
2
- import fail_json from "../assets/role_skin1/fail.json"
3
- import fail_png from "../assets/role_skin1/fail.png"
4
- import roll_json from "../assets/role_skin1/roll.json"
5
- import roll_png from "../assets/role_skin1/roll.png"
6
- import jumpDown_json from "../assets/role_skin1/jump_down.json"
7
- import jumpDown_png from "../assets/role_skin1/jump_down.png"
8
- import jumpUp_json from "../assets/role_skin1/jump_up.json"
9
- import jumpUp_png from "../assets/role_skin1/jump_up.png"
10
- import run_json from "../assets/role_skin1/run.json"
11
- import run_png from "../assets/role_skin1/run.png"
12
-
13
- //精灵图信息函数
14
- const _formatInfo = (action_json) => {
15
- const info = {
16
- frames: [],
17
- meta: {
18
- size: action_json.meta.size,
19
- },
20
- };
21
- let frames_ref = info.frames;
22
- let max_width = 0;
23
- let max_height = 0;
24
-
25
- for (let i = 0; i < action_json.frames.length; i++) {
26
- const target = action_json.frames[i].spriteSourceSize;
27
- frames_ref.push({
28
- target,
29
- source: action_json.frames[i].frame,
30
- });
31
- const sprite_with = target.x + target.w;
32
- const sprite_height = target.y + target.h;
33
- if (sprite_with > max_width) {
34
- max_width = sprite_with;
35
- }
36
- if (sprite_height > max_height) {
37
- max_height = sprite_height;
38
- }
39
- }
40
- return { info, maxW: max_width, maxH: max_height };
41
- }
42
-
43
- //存入整个json对象
44
- const jsonObject={
45
- fail_json,
46
- roll_json,
47
- jumpDown_json,
48
- jumpUp_json,
49
- run_json
50
- }
51
- const pngObject={
52
- fail_png,
53
- roll_png,
54
- jumpDown_png,
55
- jumpUp_png,
56
- run_png
57
- }
58
- export {
59
- _formatInfo,
60
- jsonObject,
61
- pngObject,
62
- }
@@ -1,61 +0,0 @@
1
- /* 此js文件用于初始化以及更新随机背景图和地板 */
2
- import bg1 from "../assets/Bgimages/bg1.png"
3
- import bg2 from "../assets/Bgimages/bg2.png"
4
- import bg3 from "../assets/Bgimages/bg3.png"
5
- import bg4 from "../assets/Bgimages/bg4.png"
6
- import bg5 from "../assets/Bgimages/bg5.png"
7
- import { shallowRef } from "vue"
8
- import { buildPreloadInfo } from "jsview"
9
- import { Context } from "./Context"
10
- /* 背景图相关 */
11
- //定义随机背景图数组
12
- const bgArray = [bg1, bg2, bg3, bg4, bg5]
13
- //随机背景图
14
- const randomBg = (bg, array) => {
15
- array.value = []
16
- const randomIndex = Math.floor(Math.random() * bgArray.length);
17
- bg.value = bgArray[randomIndex]
18
- array.value.push(buildPreloadInfo(bg.value))
19
- return bg
20
- }
21
- /* 地板相关 */
22
-
23
- //拿地板定位left的值
24
- let GameContext = new Context()
25
- //设定缝隙长度
26
- const gapWidth = 280;
27
- //给定最大长度
28
- const maxLength = 820;
29
- //给定最小长度
30
- const minLength = 600
31
-
32
-
33
- //随机的div样式
34
- const randomFloor = (array) => {
35
- for (let i = 0; i < 2; i++) {
36
- const length = Math.floor(Math.random() * (maxLength - minLength + 1)) + minLength + gapWidth
37
- GameContext.left.value += length
38
- let top = shallowRef(0)
39
- if (i !== 0) {
40
- top.value = 500 - Math.floor(Math.random() * 180)
41
- } else {
42
- top.value = 500
43
- }
44
-
45
- array.value.push({ length: length, left: GameContext.left.value, top: top.value })
46
- }
47
- array.value.forEach((item, index) => {
48
- if (index == 0) {
49
- item.left = 0
50
- } else {
51
- item.left = array.value[index - 1].left + array.value[index - 1].length;
52
- }
53
- })
54
-
55
- return array
56
- }
57
- export {
58
- randomFloor,
59
- randomBg,
60
- gapWidth
61
- }
@@ -1,50 +0,0 @@
1
- /* 音频 */
2
- import { JsvSoundPool } from "jsview";
3
- import jumpAudio from "../assets/audio/jump.mp3"
4
- import failAudio from "../assets/audio/lose.mp3"
5
-
6
- class Sound {
7
- initSound() {
8
- this.soundPool = new JsvSoundPool(10);
9
- this.soundPool.request(
10
- `url(${jumpAudio})`,
11
- null,
12
- 1,
13
- (state, audioController) => {
14
- console.log("load jump audio ", state)
15
- if (state === 0) {
16
- Sound._AudioController1 = audioController;
17
- }
18
- }
19
- );
20
- this.soundPool.request(
21
- `url(${failAudio})`,
22
- null,
23
- 1,
24
- (state, audioController) => {
25
- console.log("load fail audio ", state)
26
- if (state === 0) {
27
- Sound._AudioController2 = audioController;
28
- }
29
- }
30
- );
31
- }
32
-
33
- playJumpSound() {
34
- if (Sound._AudioController1) {
35
- Sound._AudioController1.play();
36
- }
37
- }
38
-
39
- playFailSound() {
40
- if (Sound._AudioController2) {
41
- Sound._AudioController2.play();
42
- }
43
- }
44
-
45
- destroy () {
46
- this.soundPool.destroy()
47
- }
48
-
49
- }
50
- export default Sound ;
@@ -1,20 +0,0 @@
1
- app_data文件夹用来记录APP的设定信息,包括APP的全球唯一标识,签名信息
2
-
3
- 1. 全球唯一标识AppName设定方法:
4
- 修改app.config.js文件中的AppName信息,一般命名方法为 domain/子应用名
5
-
6
- 2. 签名信息,使用RSA签名,设定方法:
7
- 使用在线生成工具生成RSA钥匙对,例如 http://www.metools.info/code/c80.html
8
- 注意选择设定信息有三点要注意:
9
- A. 秘钥长度固定为 2048 bit
10
- B. 秘钥格式固定为 PKCS#8
11
- (生成出的公钥以 -----BEGIN PUBLIC KEY----- 开头,而非 -----BEGIN RSA PUBLIC KEY-----)
12
- C. 密码不要设置
13
- 将生成的公钥复制粘贴到文件app_sign_public_key.pem中,内容可以参照 app_sign_public_key_sample.pem 文件
14
- 同理,将私钥复制粘贴到文件app_sign_private_key.crt中
15
-
16
- JsView签名原理说明:
17
- 在进行js build时,会将 main.jsv.xxxx.js (包含AppName具体值)文件的md5值用私钥进行编码,编码出的内容和公钥一起写入到该文件的文件头中,JsView加载后用公钥反编码出该md5值,和文件的md5进行比对,若md5一致则认为此公钥合法,然后此公钥会和AppName进行映射,作为设定快捷访问地址等权限控制的调用作为参考,以防止其他APP对本APP(以AppName为查询键)的私有内容进行非法访问和破坏。
18
-
19
- 注意: 私钥(app_sign_private_key.crt)不要被泄漏,私钥若泄漏,则其他APP可以伪装AppName,查询本APP的私有内容,覆盖本APP设定的快捷访问地址。
20
-
@@ -1,5 +0,0 @@
1
- export default {
2
- AppName: "xxxx.domain.cn/XXXX",
3
- AppTitle: "Demo中文名(UTF8)",
4
- AppVersion: "1.00"
5
- }
@@ -1,28 +0,0 @@
1
- -----BEGIN PRIVATE KEY-----
2
- MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCyAMjq7vLF45SQ
3
- Xk3KtelbgEOR57okn2vFXMRa9lrHEkfP72YPnP7INHxMQ8pWIEx8nfhOTjCQbzAN
4
- 5omUxjJizNsqcgfKldLgdwQAUENozMSsxWiteMyjvH0aX5X0vbpSOykUnkg/UROG
5
- vCyIj1buylww8FAMA4TamxfivOCLmQU7qlZNq7bZ/ZOYsdvAYRfd5Ey0Si8kgsk8
6
- /I9halBymQeVylBB+qY5d4L0IVLjcjbc9y9tU0+o4NoqFfkKCFQaSNXqYVey9yCG
7
- eHtpx9XT+SNDzvFTbGQaAVyoYSKjshQk58u1yn9kRp0t7rUvRfAQh6ocKBlPMucP
8
- x4zTv8PPAgMBAAECggEAJzhVDK6pf0Cts0GUEl4SlL6mJLfSI8+ch1fxS7mMNuCo
9
- QgCVlEsbODGYUZV+N4vWTn7f/yDrQme9RtLM7aLd5zcL80Y8wT5RwHN4xjjpIWY8
10
- z3SPo+lB7bHSPsVg3RQQwZ2XZ5uYf5r1mnJLvasXlHWx6naIrJz54NDbanIDZ75p
11
- YMvN/JIF4CQR58CNsPI3I8Ww5hnCSAynKlJy6qOf+C0XYxTRUs4TkZFa851a3E1q
12
- 4E8HMCvt4BZiGfyvLyS6+2pDevY9gcym1yIYwhcIRviD8S1hGpGPcmHbbt7Sj70Y
13
- hr4oqbgxhlpQl9y2iUZ4VSKN3f1eU2O5Qufsn2cpQQKBgQDgZ2o+W5AIThqepzkK
14
- +ExiXXVkHmSAtne5uLEz8SU/xwc0c0j9sOUlmpCvgn+aKbQO8MModAblPgo2QvI1
15
- YTnX/V+TBm/4mBmCq+F7i0z2ZrexGO6CSbe8lVSBy/sAbzNMeK6fPnS0aO4ZWjYS
16
- SDQ8/FAbxsHjUo2u5UDHJBj+JQKBgQDLENxo7EsCVB0R80WpL1VhkzXz3VTeMaSs
17
- rj81eu7Ji/55Eh7QzPI3TUNcFAUHRN8THT320dCiXkg0s/YTKD2j9s7mnAFjyNnG
18
- oiAmOvSpSKZgRGHh63LzwIDtSSQoeJQw+6ujvvF2elsWJ7s3t1N6tZD/E9E291yF
19
- WFDixdn14wKBgQCQV5TMVYMZBHw07uVPPBWN9AWth6sn67apPLam7YcDNhdZUopx
20
- vFY40OoeKre/RvHt5knx/GfvDu/spTU8xrQ5TV4rqSle4x8NoVehayHvIHUpshrA
21
- rYBFClzYPIfQaLa7iqjv/3F8Fj6JCjDbo5wOWlGA/GD8wr4l8IqxTXPSDQKBgQCr
22
- rmWqj5wbK+In+vU6RLp69Gr48nd+I5qGJAtsu7KG08UhtyA2iA+AkeIRRxu5OZEg
23
- J+jrdBhgLjX92OiC6dKzfUcP0XWbV4RHW2qy58VSGgoP+cCHsPhO/MID24KmdMtV
24
- XnGOzzB2apv37z9pq6T4aelcvvRy9E9UrYY1M/FC4QKBgA7CryIz/+Ps7zrn50BN
25
- TM3wsqomVe2sKj6OIE7f7SLdmA4cAco+xoXBExLxP7aqgrBj4B/7ovloF6edsGMI
26
- RF8yP8OceBIruFEKwUh4m0uoWshLJVnjk0iU+X8OD5lUCRhEZ6zO6svt5HTP1d+o
27
- XcUVzSIc3bxXpKmwXAfLKVED
28
- -----END PRIVATE KEY-----