fix(0.4.4) (#75)

* 新增 未发送的评论在刷新页面时不会丢失
* 新增 支持隐藏管理入口 #72
* 新增 昵称栏输入QQ号，自动补全QQ昵称和QQ邮箱 #60
* 改进 支持自定义文章的 js path
* 修复 点击表情选择器外部无法关闭表情选择器 #71
* 修复 苹果 logo 垂直不居中
* 修复 表情弹框适配部分主题夜间模式

docs/.vuepress/theme/layouts/Layout.vue

@@ -6,7 +6,7 @@
         <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
         <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"></script>
         <div id="twikoo"></div>
-        <script src="https://cdn.jsdelivr.net/npm/[email protected].3/dist/twikoo.all.min.js" ref="twikooJs"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected].4/dist/twikoo.all.min.js" ref="twikooJs"></script>
       </div>
     </template>
   </ParentLayout>

docs/quick-start.md

@@ -98,7 +98,7 @@ Volantis 目前支持 Twikoo，请查看 [hexo-theme-volantis/_config.yml](https
 ``` yml
 comments:
   twikoo:
-    js: https://cdn.jsdelivr.net/npm/[email protected].3/dist/twikoo.all.min.js
+    js: https://cdn.jsdelivr.net/npm/[email protected].4/dist/twikoo.all.min.js
     envId: xxxxxxxxxxxxxxx # 腾讯云环境id
 ```
 
@@ -119,7 +119,7 @@ twikoo:
 comment:
   type: twikoo
   envId: xxxxxxxxxxxxxxx # 腾讯云环境id
-  jsUrl: https://cdn.jsdelivr.net/npm/[email protected].3/dist/twikoo.all.min.js
+  jsUrl: https://cdn.jsdelivr.net/npm/[email protected].4/dist/twikoo.all.min.js
 ```
 
 ### 通过 CDN 引入
@@ -130,12 +130,13 @@ comment:
 
 ``` html
 <div id="tcomment"></div>
-<script src="https://cdn.jsdelivr.net/npm/[email protected].3/dist/twikoo.all.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].4/dist/twikoo.all.min.js"></script>
 <script>
 twikoo.init({
   envId: '您的环境id',
+  el: '#tcomment',
   // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
-  el: '#tcomment'
+  // path: 'window.location.pathname', // 用于区分不同文章的自定义 js 文章路径，请勿随意传值！
 })
 </script>
 ```
@@ -160,8 +161,9 @@ npm install twikoo # 或 yarn add twikoo
 import twikoo from 'twikoo' // 或 const twikoo = require('twikoo')
 twikoo.init({
   envId: '您的环境id',
+  el: '#tcomment',
   // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
-  el: '#tcomment'
+  // path: 'window.location.pathname', // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
 })
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twikoo",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "A simple comment system based on Tencent CloudBase (tcb).",
   "author": "imaegoo <[email protected]> (https://github.com/imaegoo)",
   "license": "MIT",

public/demo.html

@@ -18,8 +18,9 @@
     function init() {
       twikoo.init({
         envId: document.getElementById('envId').value,
+        el: '#tcomment',
         region: document.getElementById('region').value,
-        el: '#tcomment'
+        path: document.getElementById('path').value
       });
     }
   </script>
@@ -58,6 +59,12 @@
               <input class="input" id="region" type="text" placeholder="e.g ap-guangzhou" value="ap-shanghai">
             </div>
           </div>
+          <div class="field">
+            <label class="label">文章路径 | Path: <code>path</code></label>
+            <div class="control">
+              <input class="input" id="path" type="text" placeholder="e.g window.location.pathname" value="window.location.pathname">
+            </div>
+          </div>
           <div class="field">
             <label class="label">访问量:</label>
             <div class="control">

src/function/twikoo/index.js

@@ -1,5 +1,5 @@
 /*!
- * Twikoo cloudbase function v0.4.3
+ * Twikoo cloudbase function v0.4.4
  * (c) 2020-2020 iMaeGoo
  * Released under the MIT License.
  */
@@ -31,7 +31,7 @@ const window = new JSDOM('').window
 const DOMPurify = createDOMPurify(window)
 
 // 常量 / constants
-const VERSION = '0.4.3'
+const VERSION = '0.4.4'
 const RES_CODE = {
   SUCCESS: 0,
   FAIL: 1000,
@@ -1238,7 +1238,8 @@ function getConfig () {
       SHOW_EMOTION: config.SHOW_EMOTION || 'true',
       EMOTION_CDN: config.EMOTION_CDN,
       COMMENT_PLACEHOLDER: config.COMMENT_PLACEHOLDER,
-      REQUIRED_FIELDS: config.REQUIRED_FIELDS
+      REQUIRED_FIELDS: config.REQUIRED_FIELDS,
+      HIDE_ADMIN_CRYPT: config.HIDE_ADMIN_CRYPT
     }
   }
 }

src/js/entites/config.js

@@ -5,7 +5,25 @@ class Config {
   constructor (model = {}) {
     this.SITE_NAME = model.SITE_NAME
     this.SITE_URL = model.SITE_URL
+    this.COMMENT_PAGE_SIZE = model.COMMENT_PAGE_SIZE
+    this.MASTER_TAG = model.MASTER_TAG
+    this.COMMENT_BG_IMG = model.COMMENT_BG_IMG
+    this.GRAVATAR_CDN = model.GRAVATAR_CDN
+    this.SHOW_IMAGE = model.SHOW_IMAGE
+    this.IMAGE_CDN = model.IMAGE_CDN
+    this.SHOW_EMOTION = model.SHOW_EMOTION
+    this.EMOTION_CDN = model.EMOTION_CDN
+    this.COMMENT_PLACEHOLDER = model.COMMENT_PLACEHOLDER
+    this.REQUIRED_FIELDS = model.REQUIRED_FIELDS
+    this.HIDE_ADMIN_CRYPT = model.HIDE_ADMIN_CRYPT
+    this.QCLOUD_SECRET_ID = model.QCLOUD_SECRET_ID
+    this.QCLOUD_SECRET_KEY = model.QCLOUD_SECRET_KEY
+    this.LIMIT_PER_MINUTE = model.LIMIT_PER_MINUTE
+    this.SC_MAIL_NOTIFY = model.SC_MAIL_NOTIFY
     this.SMTP_SERVICE = model.SMTP_SERVICE
+    this.SMTP_HOST = model.SMTP_HOST
+    this.SMTP_PORT = model.SMTP_PORT
+    this.SMTP_SECURE = model.SMTP_SECURE
     this.SMTP_USER = model.SMTP_USER
     this.SMTP_PASS = model.SMTP_PASS
     this.SC_SENDKEY = model.SC_SENDKEY
@@ -14,6 +32,10 @@ class Config {
     this.SENDER_EMAIL = model.SENDER_EMAIL
     this.BLOGGER_EMAIL = model.BLOGGER_EMAIL
     this.AKISMET_KEY = model.AKISMET_KEY
+    this.MAIL_SUBJECT = model.MAIL_SUBJECT
+    this.MAIL_TEMPLATE = model.MAIL_TEMPLATE
+    this.MAIL_SUBJECT_ADMIN = model.MAIL_SUBJECT_ADMIN
+    this.MAIL_TEMPLATE_ADMIN = model.MAIL_TEMPLATE_ADMIN
   }
 }
 

src/js/utils/api.js

@@ -27,7 +27,7 @@ const call = async (tcb, event, data = {}) => {
         data: data
       })
     } else {
-      throw new Error('请升级 Twikoo 云函数版本再试 - https://twikoo.js.org')
+      throw new Error('请升级 Twikoo 云函数版本再试，如果仍无法解决，请删除并重新创建 Twikoo 云函数 - https://twikoo.js.org')
     }
   }
 }

src/view/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="twikoo" class="twikoo">
-    <tk-comments @admin="showAdmin = true" />
+    <tk-comments @admin="showAdmin = true" :show-admin-entry="showAdminEntry" />
     <tk-footer />
     <tk-admin :show="showAdmin" @close="showAdmin = false" />
   </div>
@@ -19,7 +19,13 @@ export default {
   },
   data () {
     return {
-      showAdmin: false
+      showAdmin: false,
+      showAdminEntry: false
+    }
+  },
+  methods: {
+    onShowAdminEntry (showAdminEntry) {
+      this.showAdminEntry = showAdminEntry
     }
   }
 }

src/view/components/TkAdminConfig.vue

@@ -44,7 +44,8 @@ export default {
             { key: 'SHOW_EMOTION', desc: '启用插入表情功能，默认为：true', ph: '示例：false', value: '' },
             { key: 'EMOTION_CDN', desc: '表情 CDN，默认为：https://cdn.jsdelivr.net/gh/imaegoo/emotion/owo.json', ph: '', value: '' },
             { key: 'COMMENT_PLACEHOLDER', desc: '评论框提示信息，可用<br>换行，默认为空', ph: '示例：', value: '' },
-            { key: 'REQUIRED_FIELDS', desc: '评论必填信息，设为 nick,mail,link 代表全必填，设为 none 代表全选填，默认：nick,mail', ph: '示例：nick,mail,link', value: '' }
+            { key: 'REQUIRED_FIELDS', desc: '评论必填信息，设为 nick,mail,link 代表全必填，设为 none 代表全选填，默认：nick,mail', ph: '示例：nick,mail,link', value: '' },
+            { key: 'HIDE_ADMIN_CRYPT', desc: '隐藏管理面板入口。可设置一个“暗号”，只有在“昵称”一栏输入相同的“暗号”时，管理面板入口才会显示，留空则不隐藏管理入口', ph: '示例：admin', value: '' }
           ]
         },
         {

src/view/components/TkComment.vue

@@ -28,8 +28,14 @@
         <span v-html="comment.comment" ref="comment"></span>
       </div>
       <div class="tk-extras" v-if="comment.os || comment.browser">
-        <div class="tk-extra"><span class="tk-icon" v-html="iconOs"></span>&nbsp;{{ comment.os }}</div>
-        <div class="tk-extra"><span class="tk-icon" v-html="iconBrowser"></span>&nbsp;{{ comment.browser }}</div>
+        <div class="tk-extra">
+          <span class="tk-icon" v-html="iconOs"></span>
+          <span class="tk-extra-text">&nbsp;{{ comment.os }}</span>
+        </div>
+        <div class="tk-extra">
+          <span class="tk-icon" v-html="iconBrowser"></span>
+          <span class="tk-extra-text">&nbsp;{{ comment.browser }}</span>
+        </div>
       </div>
       <!-- 回复列表 -->
       <div class="tk-replies" :class="{ 'tk-replies-expand': isExpanded || !showExpand }" ref="tk-replies">
@@ -234,19 +240,20 @@ export default {
   font-size: 0.875em;
   display: flex;
   flex-wrap: wrap;
-  margin-top: 0.5rem;
 }
 .tk-extra {
+  margin-top: 0.5rem;
   margin-right: 0.75rem;
+  display: flex;
+  align-items: center;
 }
 .tk-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: sub;
   height: 1em;
   width: 1em;
-  line-height: 0;
+  line-height: 1;
+}
+.tk-extra-text {
+  line-height: 1;
 }
 .tk-icon /deep/ svg {
   width: 100%;

src/view/components/TkComments.vue

@@ -4,7 +4,7 @@
     <div class="tk-comments-container" v-loading="loading">
       <div class="tk-comments-title">
         <span>{{ count }} 条评论</span>
-        <span class="tk-icon" v-html="iconSetting" @click="openAdmin"></span>
+        <span class="tk-icon" v-if="showAdminEntry" v-html="iconSetting" @click="openAdmin"></span>
       </div>
       <div class="tk-comments-no" v-if="!loading && !comments.length">没有评论</div>
       <tk-comment v-for="comment in comments"
@@ -30,6 +30,9 @@ export default {
     TkSubmit,
     TkComment
   },
+  props: {
+    showAdminEntry: Boolean
+  },
   data () {
     return {
       loading: true,
@@ -51,21 +54,24 @@ export default {
     },
     async initComments () {
       this.loading = true
-      await this.getComments({
-        url: window.location.pathname
-      })
+      const url = this.$twikoo.path
+        // eslint-disable-next-line no-eval
+        ? eval(this.$twikoo.path)
+        : window.location.pathname
+      await this.getComments({ url })
       this.loading = false
     },
     async onExpand () {
       if (this.loadingMore) return
       this.loadingMore = true
+      const url = this.$twikoo.path
+        // eslint-disable-next-line no-eval
+        ? eval(this.$twikoo.path)
+        : window.location.pathname
       const before = this.comments
         .map((item) => item.created)
         .sort((a, b) => a - b)[0] // 最小值
-      await this.getComments({
-        url: window.location.pathname,
-        before
-      })
+      await this.getComments({ url, before })
       this.loadingMore = false
     },
     async getComments (event) {

src/view/components/TkFooter.vue

@@ -18,8 +18,12 @@ export default {
   },
   methods: {
     async getCounter () {
+      const url = this.$twikoo.path
+        // eslint-disable-next-line no-eval
+        ? eval(this.$twikoo.path)
+        : window.location.pathname
       const result = await call(this.$tcb, 'COUNTER_GET', {
-        url: window.location.pathname,
+        url,
         href: window.location.href,
         title: document.title
       })

src/view/components/TkMetaInput.vue

@@ -14,6 +14,8 @@
 </template>
 
 <script>
+import { isQQ } from '../../js/utils'
+
 const metaInputs = [
   { key: 'nick', locale: '昵称', name: 'nick' },
   { key: 'mail', locale: '邮箱', name: 'mail' },
@@ -71,8 +73,42 @@ export default {
         (this.metaData.link || !this.requiredFields.link)
       )
     },
+    checkQQ () {
+      if (isQQ(this.metaData.nick)) {
+        // 模仿 Valine 的操作逻辑，当用户在 [昵称] 输入 QQ 号时
+        // 1. 自动填充数字 QQ 邮箱到 [邮箱]
+        // 2. 自动填充 QQ 昵称到 [昵称] (使用了 https://docs.tenapi.cn/ 提供的接口，感谢作者：I Am I)
+        // 3. 自动显示 QQ 头像
+        const qqNum = this.metaData.nick.replace(/@qq.com/g, '')
+        const qqMail = `${qqNum}@qq.com`
+        this.metaData.mail = qqMail
+        this.getQQNick(qqNum)
+      }
+    },
+    getQQNick (qqNum) {
+      const url = `https://tenapi.cn/qqname?qq=${qqNum}`
+      const xhr = new XMLHttpRequest()
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+          const response = JSON.parse(xhr.responseText)
+          this.metaData.nick = response.name
+          this.updateMeta()
+        }
+      }
+      xhr.open('GET', url)
+      xhr.send()
+    },
+    checkAdminCrypt () {
+      const app = this.$root.$children[0]
+      const showAdminEntry = this.config.HIDE_ADMIN_CRYPT
+        ? this.config.HIDE_ADMIN_CRYPT === this.metaData.nick
+        : true
+      app.onShowAdminEntry(showAdminEntry)
+    },
     onMetaChange () {
+      this.checkQQ()
       this.updateMeta()
+      this.checkAdminCrypt()
     }
   },
   watch: {
@@ -87,6 +123,9 @@ export default {
         })
       },
       deep: true
+    },
+    'config.VERSION' () {
+      this.checkAdminCrypt()
     }
   },
   mounted () {