release: 1.0.2 (#6)

* build: 使用 min-1px 库的1像素gif图(base64)

* fix: 打开评论管理页面是会被其他元素覆盖在最顶层的bug

* fix: 消息弹窗被zIndex拦截的bug

* refactor: 移除 message 提示框，改用 msg-alert 库

* build: 1.0.2

Author: lete114

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "discuss",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "一款简单，安全，免费的评论系统 | A simple, safe, free comment system",
   "main": "index.js",
   "unpkg": "dist/Discuss.js",
@@ -46,6 +46,8 @@
     "html-minifier": "^4.0.0",
     "jsonwebtoken": "^8.5.1",
     "md5": "^2.3.0",
+    "min-1px": "^1.0.0",
+    "msg-alert": "^1.0.0-beta.2",
     "nodemailer": "^6.7.0",
     "output-line": "^1.0.1",
     "simple-unique": "^1.2.0",

package.json

@@ -1,7 +1,13 @@
 import { writable } from 'svelte/store'
-import massage from './massage'
+import msgAlert from 'msg-alert'
 import lazyload from './lazyload'
 
+function massage(options) {
+  const all = [...document.body.querySelectorAll('*')].map((el) => +window.getComputedStyle(el).zIndex || 0)
+  options.zIndex = Math.max(...all) + 1
+  msgAlert(options)
+}
+
 export const options = writable({})
 export const openMenu = writable(false)
 export const showSetting = writable(true)

src/client/lib/stores.js

@@ -0,0 +1,32 @@
+const str = 'D-zIndex'
+
+/**
+ * 让 admin 显示在最顶层
+ * @param {String} flag open or close
+ */
+export default function (flag) {
+  const all = [...document.body.querySelectorAll('*:not(._msg)')]
+  all.forEach((el) => {
+    const zIndex = window.getComputedStyle(el).zIndex
+    if (flag === 'close') {
+      el.classList.remove(str)
+      el.style.removeProperty('z-index')
+      return
+    }
+    if (flag === 'open' && zIndex > 0) {
+      el.style.zIndex = -1
+      el.classList.add(str)
+    }
+  })
+
+  let body,
+    el = document.querySelector('#Discuss')
+
+  while (body !== 'BODY') {
+    el = el.parentElement
+    body = el.nodeName
+    if (el.classList.contains(str)) {
+      el.style.removeProperty('z-index')
+    }
+  }
+}

src/client/lib/zIndex.js

@@ -1,3 +1,4 @@
+import gif1px from 'min-1px'
 import Main from './view/main.svelte'
 import { options } from './lib/stores'
 import { translate, setLanguage } from './i18n'
@@ -16,7 +17,7 @@ function init(opt) {
     ph: translate('content'),
     path: location.pathname,
     visitStat: true,
-    imgLoading: 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw'
+    imgLoading: gif1px.GIF
   }
 
   options.set(Object.assign(defaultOptions, opt))

src/client/main.js

@@ -2,6 +2,7 @@
   import { onMount } from 'svelte'
   import { openMenu, showSetting } from '../lib/stores'
   import { translate } from '../i18n'
+  import zIndex from '../lib/zIndex'
   import global from './global.svelte'
   import Login from './adminLogin.svelte'
   import Comment from './adminComment.svelte'
@@ -56,7 +57,8 @@
   // 为什么这样写？
   // 因为打包后评论区无法确定识别该方法(方法名会被缩小为一个字母，导致评论区无法调用)
   const onOpenAndClose = {}
-  onOpenAndClose.onOpenAdmin = function () {
+  onOpenAndClose.onOpenAdmin = function (flag) {
+    zIndex(flag)
     $showSetting = !$showSetting
   }
 </script>
@@ -80,7 +82,7 @@
           {#if show}
             <!-- 是否显示关闭以及退出登录，主要区分页面评论区评论管理与以及评论管理独立初始化 -->
             <span class="D-exit" on:click={onExit}><IconExit /></span>
-            <span class="D-close" on:click={onOpenAndClose.onOpenAdmin}><IconClose /></span>
+            <span class="D-close" on:click={onOpenAndClose.onOpenAdmin('close')}><IconClose /></span>
           {/if}
         </nav>
       </header>

src/client/view/admin.svelte

@@ -99,51 +99,7 @@
     height: auto;
     vertical-align: middle;
   }
-  /* 消息提示框容器样式 */
-  .D-msg {
-    left: 50%;
-    color: #909399;
-    font-size: 14px;
-    width: 300px;
-    padding: 16px 17px;
-    position: fixed;
-    line-height: 1;
-    letter-spacing: 1px;
-    word-wrap: break-word;
-    word-break: break-all;
-    z-index: 9999999999;
-    border-radius: 6px;
-    border: 1px solid #edf2fc;
-    background-color: #edf2fc;
-    transform: translateX(-50%);
-    transition: opacity 0.3s, transform 0.5s, top 0.5s;
-  }
-
-  .D-msg-opacity {
-    opacity: 0;
-    transform: translate(-50%, -100%);
-  }
-
-  /* 成功提示框样式 */
-  .D-msg-success {
-    background-color: #e1f3d8;
-    border-color: #e1f3d8;
-    color: #67c23a;
-  }
-
-  /* 警告提示框样式 */
-  .D-msg-warn {
-    background-color: #fdfce6;
-    border-color: #fdfce6;
-    color: #e6a23c;
-  }
-  /* 错误提示框样式 */
-  .D-msg-error {
-    background-color: #fef0f0;
-    border-color: #fef0f0;
-    color: #f56c6c;
-  }
-
+  
   .D-zoom {
     animation: D-zoom-animation 0.3s forwards;
   }

src/client/view/global.svelte

@@ -6,7 +6,7 @@
   import Comments from './comments.svelte'
   import Footer from './footer.svelte'
   import IconLoading from '../../../assets/svg/Loading.svg'
-
+  import zIndex from '../lib/zIndex'
   import loadScript from '../lib/import'
 
   let isLoading = true
@@ -15,6 +15,7 @@
   let app
 
   function initAdmin() {
+    zIndex('open')
     app = window.DiscussAdmin.init({ ...$options, el: '.D-admin-wrap', show: true })
   }
 
@@ -29,7 +30,7 @@
     if (app) {
       for (const fun of app.$$.ctx) {
         if (Object.prototype.toString.call(fun) === '[object Object]' && typeof fun.onOpenAdmin === 'function') {
-          fun.onOpenAdmin()
+          fun.onOpenAdmin('open')
         }
       }
     }
@@ -60,7 +61,7 @@
   <div class="D-admin-wrap" />
   <Submit on:onRefresh={onRefresh} on:onSetting={onSetting} on:submitComment={submitComment} />
   {#if isLoading}
-    <Comments on:onComments={onComments} comment={comment}/>
+    <Comments on:onComments={onComments} {comment} />
   {/if}
   <div class="D-loading-comments" style={isRefreshComments ? '' : 'display:none'}>
     <IconLoading />