testapp.html 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Tpamis</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta
  8. name="viewport"
  9. content="width=device-width, initial-scale=1, maximum-scale=1"
  10. />
  11. <link rel="icon" type="image/x-ico" href=""/>
  12. <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  13. <!-- amis 部分代码 -->
  14. <link rel="stylesheet" href="./public/static/amis-sdk/sdk.css">
  15. <link rel="stylesheet" href="./public/static/amis-sdk/helper.css">
  16. <link rel="stylesheet" href="./public/static/amis-sdk/iconfont.css">
  17. <link rel="stylesheet" href="./public/static/fonts/remixicon.css">
  18. </head>
  19. <body>
  20. <script type='text/javascript' src='./public/static/amis-sdk/sdk.js'></script>
  21. <script type='text/javascript' src='./public/static/amis-static/history.js'></script>
  22. <div id="root" class="app-wrapper"></div>
  23. <style>
  24. :root {
  25. --Layout-header-bg: #f5f5f5;
  26. }
  27. </style>
  28. <script>
  29. (function () {
  30. let amis = amisRequire('amis/embed');
  31. const match = amisRequire('path-to-regexp').match;
  32. // 如果想用 browserHistory 请切换下这处代码, 其他不用变
  33. const history = History.createBrowserHistory();
  34. // const history = History.createHashHistory();
  35. const header = {
  36. "type": "page",
  37. "initApi": "/api/sys_user_info",
  38. "body": {
  39. "type": "flex",
  40. "justify": "flex-end",
  41. "items": [
  42. {
  43. "size": 30,
  44. "type": "avatar",
  45. "fit": "contain",
  46. "src": "${avatar}"
  47. },
  48. {
  49. "type": "dropdown-button",
  50. "label": "名字e",
  51. "className": "header-menu",
  52. "buttons": [
  53. {
  54. "type": "button",
  55. "label": "个人信息",
  56. "actionType": "link",
  57. "link": "/view/user_info"
  58. },
  59. {
  60. "type": "button",
  61. "actionType": "url",
  62. "url": "/login/out",
  63. "blank": false,
  64. "confirmText": "确定要退出吗",
  65. "label": "退出登录"
  66. }
  67. ]
  68. }
  69. ]
  70. }
  71. }
  72. const asideBefore = {
  73. "type": "service",
  74. "className": "bg-none p-3",
  75. "api": "/api/sys_user_info",
  76. "body": [
  77. {
  78. "type": "button-group",
  79. "tiled": true,
  80. "buttons": [
  81. {
  82. "type": "button",
  83. "label": "名字",
  84. "level": "dark",
  85. "actionType": "link",
  86. "link": "/view/user_info"
  87. },
  88. {
  89. "type": "button",
  90. "label": "退出",
  91. "actionType": "url",
  92. "confirmText": "确定要退出吗",
  93. "url": "/login/out",
  94. "blank": false,
  95. "level": "dark"
  96. }
  97. ]
  98. }
  99. ]
  100. }
  101. const app = {
  102. type: 'app',
  103. brandName: '应用名称',
  104. className: 'schema-wrapper',
  105. // logo: '{$Think.config.amis.logo}',
  106. // header: {com:slot code="sys_header_pc" platform="pc"},
  107. header:{
  108. "type": "page",
  109. "initApi": "/api/sys_user_info",
  110. "body": {
  111. "type": "flex",
  112. "justify": "flex-end",
  113. "items": [
  114. {
  115. "size": 30,
  116. "type": "avatar",
  117. "fit": "contain",
  118. "src": "${avatar}"
  119. },
  120. {
  121. "type": "dropdown-button",
  122. "label": "名字e",
  123. "className": "header-menu",
  124. "buttons": [
  125. {
  126. "type": "button",
  127. "label": "个人信息",
  128. "actionType": "link",
  129. "link": "/view/user_info"
  130. },
  131. {
  132. "type": "button",
  133. "actionType": "url",
  134. "url": "/login/out",
  135. "blank": false,
  136. "confirmText": "确定要退出吗",
  137. "label": "退出登录"
  138. }
  139. ]
  140. }
  141. ]
  142. }
  143. },
  144. // asideBefore: {com:slot code="sys_userinfo_mobile" platform="mobile"},
  145. api: '/sys/menu'
  146. };
  147. function normalizeLink(to, location = history.location) {
  148. to = to || '';
  149. if (to && to[0] === '#') {
  150. to = location.pathname + location.search + to;
  151. } else if (to && to[0] === '?') {
  152. to = location.pathname + to;
  153. }
  154. const idx = to.indexOf('?');
  155. const idx2 = to.indexOf('#');
  156. let pathname = ~idx
  157. ? to.substring(0, idx)
  158. : ~idx2
  159. ? to.substring(0, idx2)
  160. : to;
  161. let search = ~idx ? to.substring(idx, ~idx2 ? idx2 : undefined) : '';
  162. let hash = ~idx2 ? to.substring(idx2) : location.hash;
  163. if (!pathname) {
  164. pathname = location.pathname;
  165. } else if (pathname[0] != '/' && !/^https?\:\/\//.test(pathname)) {
  166. let relativeBase = location.pathname;
  167. const paths = relativeBase.split('/');
  168. paths.pop();
  169. let m;
  170. while ((m = /^\.\.?\//.exec(pathname))) {
  171. if (m[0] === '../') {
  172. paths.pop();
  173. }
  174. pathname = pathname.substring(m[0].length);
  175. }
  176. pathname = paths.concat(pathname).join('/');
  177. }
  178. return pathname + search + hash;
  179. }
  180. function isCurrentUrl(to, ctx) {
  181. if (!to) {
  182. return false;
  183. }
  184. const pathname = history.location.pathname;
  185. const link = normalizeLink(to, {
  186. ...location,
  187. pathname,
  188. hash: ''
  189. });
  190. if (!~link.indexOf('http') && ~link.indexOf(':')) {
  191. let strict = ctx && ctx.strict;
  192. return match(link, {
  193. decode: decodeURIComponent,
  194. strict: typeof strict !== 'undefined' ? strict : true
  195. })(pathname);
  196. }
  197. return decodeURI(pathname) === link;
  198. }
  199. let amisInstance = amis.embed(
  200. '#root',
  201. app,
  202. {
  203. location: history.location
  204. },
  205. {
  206. // watchRouteChange: fn => {
  207. // return history.listen(fn);
  208. // },
  209. updateLocation: (location, replace) => {
  210. location = normalizeLink(location);
  211. if (location === 'goBack') {
  212. return history.goBack();
  213. } else if (
  214. (!/^https?\:\/\//.test(location) &&
  215. location ===
  216. history.location.pathname + history.location.search) ||
  217. location === history.location.href
  218. ) {
  219. // 目标地址和当前地址一样,不处理,免得重复刷新
  220. return;
  221. } else if (/^https?\:\/\//.test(location) || !history) {
  222. return (window.location.href = location);
  223. }
  224. history[replace ? 'replace' : 'push'](location);
  225. },
  226. jumpTo: (to, action) => {
  227. if (to === 'goBack') {
  228. return history.goBack();
  229. }
  230. to = normalizeLink(to);
  231. if (isCurrentUrl(to)) {
  232. return;
  233. }
  234. if (action && action.actionType === 'url') {
  235. action.blank === false
  236. ? (window.location.href = to)
  237. : window.open(to, '_blank');
  238. return;
  239. } else if (action && action.blank) {
  240. window.open(to, '_blank');
  241. return;
  242. }
  243. if (/^https?:\/\//.test(to)) {
  244. window.location.href = to;
  245. } else if (
  246. (!/^https?\:\/\//.test(to) &&
  247. to === history.pathname + history.location.search) ||
  248. to === history.location.href
  249. ) {
  250. // do nothing
  251. } else {
  252. history.push(to);
  253. }
  254. },
  255. isCurrentUrl: isCurrentUrl
  256. // theme: '{$Think.config.amis.amis_theme}'
  257. }
  258. );
  259. history.listen(state => {
  260. amisInstance.updateProps({
  261. location: state.location || state
  262. });
  263. });
  264. })();
  265. </script>
  266. </body>
  267. </html>