confirm.html 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. html {
  6. overflow: hidden;
  7. resize: none;
  8. font-size: 16px;
  9. }
  10. body {
  11. font-size: 16px;
  12. margin: 0;
  13. padding: 0;
  14. background-color: rgba(255, 255, 255, 0.8);
  15. position: relative;
  16. background-color: #fff;
  17. background-clip: padding-box;
  18. border: 0;
  19. border-radius: 2px;
  20. box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014,
  21. 0 9px 28px 8px #0000000d;
  22. pointer-events: auto;
  23. height: 100vh;
  24. }
  25. #message {
  26. padding: 10px 16px;
  27. background: #fff;
  28. border-radius: 2px;
  29. pointer-events: all;
  30. text-align: center;
  31. color: rgba(0, 0, 0, 0.85);
  32. font-size: 14px;
  33. font-variant: tabular-nums;
  34. line-height: 1.5715rem;
  35. list-style: none;
  36. font-feature-settings: 'tnum';
  37. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
  38. 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
  39. 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  40. -webkit-text-size-adjust: 100%;
  41. word-break: break-all;
  42. flex-grow: 1;
  43. text-align: start;
  44. display: flex;
  45. }
  46. #message .anticon {
  47. position: relative;
  48. top: -1px;
  49. margin-right: 8px;
  50. font-size: 1.57rem;
  51. /* margin-top: -8px; */
  52. }
  53. .message-success .anticon {
  54. color: #52c41a;
  55. }
  56. .message-warning .anticon {
  57. color: #faad14;
  58. }
  59. .message-error .anticon {
  60. color: #ff4d4f;
  61. }
  62. .container {
  63. /* padding: 24px; */
  64. font-size: 14px;
  65. line-height: 1.5715;
  66. word-wrap: break-word;
  67. height: 100vh;
  68. }
  69. .btn {
  70. line-height: 1.5715;
  71. position: relative;
  72. display: inline-block;
  73. font-weight: 400;
  74. white-space: nowrap;
  75. text-align: center;
  76. background-image: none;
  77. border: 1px solid transparent;
  78. box-shadow: 0 2px #00000004;
  79. cursor: pointer;
  80. transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  81. -webkit-user-select: none;
  82. -moz-user-select: none;
  83. -ms-user-select: none;
  84. user-select: none;
  85. touch-action: manipulation;
  86. height: 32px;
  87. padding: 4px 15px;
  88. font-size: 14px;
  89. border-radius: 2px;
  90. color: #000000d9;
  91. background: #fff;
  92. border-color: #d9d9d9;
  93. }
  94. .btn:hover,
  95. .btn:focus,
  96. .btn:active {
  97. text-decoration: none;
  98. background: #fff;
  99. }
  100. .btn:hover,
  101. .btn:focus {
  102. color: #40a9ff;
  103. background: #fff;
  104. border-color: #40a9ff;
  105. }
  106. .btn:before {
  107. position: absolute;
  108. top: -1px;
  109. right: -1px;
  110. bottom: -1px;
  111. left: -1px;
  112. z-index: 1;
  113. display: none;
  114. background: #fff;
  115. border-radius: inherit;
  116. opacity: 0.35;
  117. transition: opacity 0.2s;
  118. content: '';
  119. pointer-events: none;
  120. }
  121. .btn-primary {
  122. color: #fff;
  123. background: #1890ff;
  124. border-color: #1890ff;
  125. text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
  126. box-shadow: 0 2px #0000000b;
  127. }
  128. .btn-primary:hover,
  129. .btn-primary:focus {
  130. color: #fff;
  131. background: #40a9ff;
  132. border-color: #40a9ff;
  133. }
  134. .btn-danger {
  135. color: #ff4d4f;
  136. background-color: #fff;
  137. border-color: #ff4d4f;
  138. }
  139. .btn-danger:hover,
  140. .btn-danger:focus {
  141. color: #ff4d4f;
  142. background-color: #fff;
  143. border-color: #ff4d4f;
  144. }
  145. .btn + .btn {
  146. margin-bottom: 0;
  147. margin-left: 8px;
  148. }
  149. .btn > span {
  150. display: inline-block;
  151. }
  152. .anticon {
  153. display: inline-block;
  154. color: inherit;
  155. font-style: normal;
  156. line-height: 0;
  157. text-align: center;
  158. text-transform: none;
  159. vertical-align: -0.125em;
  160. text-rendering: optimizeLegibility;
  161. -webkit-font-smoothing: antialiased;
  162. -moz-osx-font-smoothing: grayscale;
  163. }
  164. .container {
  165. display: flex;
  166. flex-direction: column;
  167. }
  168. #message {
  169. flex-shrink: 2;
  170. }
  171. .header {
  172. padding: 8px;
  173. border-bottom: 1px solid #efefef;
  174. font-size: 1.2rem;
  175. font-weight: bolder;
  176. text-align: center;
  177. }
  178. .noheader #message {
  179. margin-top: 32px;
  180. }
  181. .flooter {
  182. padding: 8px;
  183. border-top: 1px solid #efefef;
  184. display: flex;
  185. justify-content: flex-end;
  186. }
  187. </style>
  188. <meta charset="utf-8" />
  189. <script src="../js/path.js"></script>
  190. <script src="../js/encode.js"></script>
  191. <script src="base.js"></script>
  192. <script src="../js/eventBus.js"></script>
  193. <script type="text/javascript">
  194. function createIcon(type) {
  195. var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
  196. svg.setAttribute('viewBox', '64 64 896 896')
  197. svg.setAttribute('width', '1em')
  198. svg.setAttribute('height', '1em')
  199. svg.setAttribute('fill', 'currentColor')
  200. var path = document.createElementNS(
  201. 'http://www.w3.org/2000/svg',
  202. 'path'
  203. )
  204. switch (type) {
  205. case 'success':
  206. path.setAttribute(
  207. 'd',
  208. 'M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z'
  209. )
  210. break
  211. case 'error':
  212. path.setAttribute(
  213. 'd',
  214. 'M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z'
  215. )
  216. break
  217. case 'warning':
  218. path.setAttribute(
  219. 'd',
  220. 'M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z'
  221. )
  222. break
  223. }
  224. svg.appendChild(path)
  225. return svg
  226. }
  227. function writemessage() {
  228. var params = getQueryParams()
  229. window.instid = params.instid
  230. var container = document.getElementById('message')
  231. if (!!params.type && params.type !== 'default') {
  232. var span = document.createElement('span')
  233. span.className = 'anticon'
  234. span.appendChild(createIcon(params.type))
  235. container.className = container.className + ' message-' + params.type
  236. container.appendChild(span)
  237. }
  238. const msg = document.createElement('span')
  239. msg.innerText = params.message
  240. container.appendChild(msg)
  241. if (params.title) {
  242. document.querySelector('.header>span').innerText = params.title
  243. } else {
  244. document.querySelector('.header').style.display = 'none'
  245. var c = document.querySelector('.container')
  246. c.classList.add('noheader')
  247. }
  248. if (params.btns) {
  249. var bc = document.createDocumentFragment()
  250. var btns = JSON.parse(params.btns)
  251. for (const item of btns) {
  252. var bt = document.createElement('button')
  253. var sp = document.createElement('span')
  254. sp.innerText = item.text
  255. bt.className = 'btn'
  256. if (!!item.primary) {
  257. bt.classList.add('btn-primary')
  258. }
  259. if (!!item.danger) {
  260. bt.classList.add('btn-danger')
  261. }
  262. bt.appendChild(sp)
  263. bt.dataset.key = item.key
  264. bt.dataset.close = item.close
  265. bt.addEventListener('click', onclick)
  266. bc.appendChild(bt)
  267. }
  268. document.querySelector('.flooter').appendChild(bc)
  269. }
  270. }
  271. function onclick(event) {
  272. var ds = event.currentTarget.dataset
  273. EventBus.Publish(`confirm$${instid}$${ds.key}`)
  274. if (!!ds.close) window.close()
  275. }
  276. function init() {
  277. StopEscKeyKown()
  278. writemessage()
  279. }
  280. </script>
  281. </head>
  282. <body onload="init()">
  283. <div class="container">
  284. <div class="header">
  285. <span>提醒</span>
  286. </div>
  287. <div id="message"></div>
  288. <div class="flooter"></div>
  289. </div>
  290. </body>
  291. </html>