fix(0.3.1): 头像获取优化，修复 bug (twikoojs#51)

* 新增 支持自定义头像CDN twikoojs#16
* 新增 支持访客使用QQ头像作为评论头像 twikoojs#45
* 修复 邮件中的链接 URL #hash 不正确 twikoojs#48
* 重构 引入 eslint 代码检查，并优化代码

.editorconfig

@@ -4,7 +4,7 @@ root = true
 end_of_line = lf
 charset = utf-8
 
-[{*.js,*.ts,*.html,*.gql,*.graqhql}]
+[{*.js,*.json,*.vue,*.html,*.css}]
 indent_style = space
 indent_size = 2
 

.eslintignore

@@ -0,0 +1,2 @@
+*.md
+*.json

.eslintrc.js

@@ -1,19 +1,20 @@
 module.exports = {
   env: {
     browser: true,
-    es6: true
+    es2021: true,
+    node: true
   },
   extends: [
+    'plugin:vue/essential',
     'standard'
   ],
-  globals: {
-    Atomics: 'readonly',
-    SharedArrayBuffer: 'readonly'
-  },
   parserOptions: {
-    ecmaVersion: 11,
+    ecmaVersion: 12,
     sourceType: 'module'
   },
+  plugins: [
+    'vue'
+  ],
   rules: {
   }
 }

README.md

@@ -58,6 +58,7 @@ A simple, safe, free comment system based on Tencent CloudBase (tcb).
 
 ``` sh
 yarn dev # 开发 (http://localhost:9820/demo.html)
+yarn lint # 代码检查
 yarn build # 编译 (dist/twikoo.all.min.js)
 ```
 

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

@@ -3,7 +3,7 @@
     <template #page-bottom>
       <div class="page-edit">
         <div id="twikoo"></div>
-        <script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/twikoo.all.min.js" ref="twikooJs"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/twikoo.all.min.js" ref="twikooJs"></script>
       </div>
     </template>
   </ParentLayout>

docs/README.md

@@ -82,6 +82,7 @@ A simple, safe, free comment system based on Tencent CloudBase (tcb).
 
 ``` sh
 yarn dev # 开发 (http://localhost:9820/demo.html)
+yarn lint # 代码检查
 yarn build # 编译 (dist/twikoo.all.min.js)
 ```
 

docs/quick-start.md

@@ -103,7 +103,7 @@ Butterfly 目前支持 Twikoo，请查看 [Butterfly 安裝文檔(四) 主題配
 
 ``` html
 <div id="tcomment"></div>
-<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/twikoo.all.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/twikoo.all.min.js"></script>
 <script>twikoo.init({ envId: '您的环境id', el: '#tcomment' })</script>
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twikoo",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A simple comment system based on Tencent CloudBase (tcb).",
   "author": "imaegoo <[email protected]> (https://github.com/imaegoo)",
   "license": "MIT",
@@ -16,31 +16,32 @@
   "scripts": {
     "dev": "webpack-dev-server",
     "serve": "webpack-dev-server",
-    "build": "webpack",
+    "build": "webpack --mode production",
     "analyze": "webpack --profile --json > stats.json && webpack-bundle-analyzer stats.json",
     "login": "tcb login",
     "logout": "tcb logout",
     "deploy": "tcb fn deploy twikoo --force",
-    "lint": "eslint",
+    "lint": "eslint src/** --ignore-path .eslintignore",
     "docs:dev": "vuepress dev docs",
     "docs:build": "vuepress build docs"
   },
   "devDependencies": {
     "@cloudbase/cli": "^1.0.7",
-    "copy-webpack-plugin": "^6.3.2",
+    "copy-webpack-plugin": "^6.4.0",
     "css-loader": "^3.6.0",
-    "eslint": "^7.13.0",
+    "eslint": "^7.15.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.1.0",
+    "eslint-plugin-vue": "^7.2.0",
     "svg-inline-loader": "^0.8.2",
     "vue-loader": "^15.9.5",
     "vue-template-compiler": "^2.6.12",
     "vuepress": "^1.7.1",
     "webpack": "^4.44.1",
-    "webpack-bundle-analyzer": "^4.1.0",
+    "webpack-bundle-analyzer": "^4.2.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0"
   },

src/function/twikoo/index.js

@@ -1,5 +1,5 @@
 /*!
- * Twikoo cloudbase function v0.3.0
+ * Twikoo cloudbase function v0.3.1
  * (c) 2020-2020 iMaeGoo
  * Released under the MIT License.
  */
@@ -29,7 +29,7 @@ const window = new JSDOM('').window
 const DOMPurify = createDOMPurify(window)
 
 // 常量 / constants
-const VERSION = '0.3.0'
+const VERSION = '0.3.1'
 const RES_CODE = {
   SUCCESS: 0,
   FAIL: 1000,
@@ -293,6 +293,7 @@ function toCommentDto (comment, uid, replies = [], comments = []) {
   return {
     id: comment._id,
     nick: comment.nick,
+    avatar: comment.avatar,
     mailMd5: comment.mailMd5 || md5(comment.mail),
     link: comment.link,
     comment: comment.comment,
@@ -828,7 +829,7 @@ async function noticeReply (currentComment) {
   const NICK = currentComment.nick
   const COMMENT = currentComment.comment
   const PARENT_COMMENT = parentComment.comment
-  const POST_URL = (currentComment.href || config.SITE_URL + currentComment.url) + '#' + currentComment._id
+  const POST_URL = (currentComment.href || config.SITE_URL + currentComment.url) + '#' + currentComment.pid
   const SITE_URL = config.SITE_URL
   const emailSubject = config.MAIL_SUBJECT || `${PARENT_NICK}，您在『${SITE_NAME}』上的评论收到了回复`
   let emailContent
@@ -894,6 +895,11 @@ async function parse (comment) {
     updated: timestamp
   }
   commentDo.isSpam = await checkSpam(commentDo)
+  if (isQQ(comment.mail)) {
+    commentDo.mail = addQQMailSuffix(comment.mail)
+    commentDo.mailMd5 = md5(commentDo.mail)
+    commentDo.avatar = await getQQAvatar(comment.mail)
+  }
   return commentDo
 }
 
@@ -1093,14 +1099,41 @@ async function getRecentComments (event) {
   return res
 }
 
+function isQQ (mail) {
+  return /^[1-9][0-9]{4,10}$/.test(mail) ||
+    /^[1-9][0-9]{4,10}@qq.com$/.test(mail)
+}
+
+function addQQMailSuffix (mail) {
+  if (/^[1-9][0-9]{4,10}$/.test(mail)) return `${mail}@qq.com`
+  else return mail
+}
+
+async function getQQAvatar (qq) {
+  try {
+    const qqNum = qq.replace(/@qq.com/g, '')
+    const result = await axios.get(`https://ptlogin2.qq.com/getface?imgtype=4&uin=${qqNum}`)
+    if (result && result.data) {
+      const start = result.data.indexOf('http')
+      const end = result.data.indexOf('"', start)
+      if (start === -1 || end === -1) return null
+      return result.data.substring(start, end)
+    }
+  } catch (e) {
+    console.error('获取 QQ 头像失败：', e)
+  }
+}
+
 function getConfig () {
   return {
     code: RES_CODE.SUCCESS,
     config: {
+      VERSION,
       SITE_NAME: config.SITE_NAME,
       SITE_URL: config.SITE_URL,
       MASTER_TAG: config.MASTER_TAG,
-      COMMENT_BG_IMG: config.COMMENT_BG_IMG
+      COMMENT_BG_IMG: config.COMMENT_BG_IMG,
+      GRAVATAR_CDN: config.GRAVATAR_CDN
     }
   }
 }

src/function/twikoo/package.json

@@ -2,13 +2,13 @@
   "name": "twikoo-func",
   "main": "index.js",
   "dependencies": {
-    "@cloudbase/node-sdk": "^2.4.0",
+    "@cloudbase/node-sdk": "^2.4.4",
     "akismet-api": "^5.1.0",
     "axios": "^0.21.0",
     "blueimp-md5": "^2.18.0",
     "bowser": "^2.11.0",
     "cheerio": "^1.0.0-rc.3",
-    "dompurify": "^2.2.2",
+    "dompurify": "^2.2.3",
     "jsdom": "^16.4.0",
     "marked": "^1.2.5",
     "nodemailer": "^6.4.16",

src/js/entites/comment.js

@@ -9,6 +9,7 @@ class Comment {
     this.nick = model.nick // 昵称
     this.mail = model.mail // 邮箱
     this.mailMd5 = model.mailMd5 // 邮箱 MD5
+    this.avatar = model.avatar // 头像 URL
     this.link = model.link // 网址
 
     /* 评论数据 */

src/js/utils/avatar.js

@@ -0,0 +1,14 @@
+function isQQ (mail) {
+  return /^[1-9][0-9]{4,10}$/.test(mail) ||
+    /^[1-9][0-9]{4,10}@qq.com$/.test(mail)
+}
+
+function getQQAvatar (qq) {
+  const qqNum = qq.replace(/@qq.com/g, '')
+  return `https://thirdqq.qlogo.cn/g?b=sdk&nk=${qqNum}&s=140`
+}
+
+export {
+  isQQ,
+  getQQAvatar
+}

src/js/utils/index.js

@@ -1,6 +1,7 @@
 import timeago from './timeago'
 import marked from './marked'
 import call from './api'
+import { isQQ, getQQAvatar } from './avatar'
 
 const isNotSet = (option) => {
   return option === undefined || option === null || option === ''
@@ -70,6 +71,8 @@ export {
   marked,
   call,
   getFuncVer,
+  isQQ,
+  getQQAvatar,
   getCommentsCountApi,
   getRecentCommentsApi
 }

src/view/App.vue

@@ -1,22 +1,19 @@
 <template>
   <div id="twikoo" class="twikoo">
     <tk-comments @admin="showAdmin = true" />
-    <tk-counter />
     <tk-footer />
     <tk-admin :show="showAdmin" @close="showAdmin = false" />
   </div>
 </template>
 
 <script>
 import TkComments from './components/TkComments.vue'
-import TkCounter from './components/TkCounter.vue'
 import TkFooter from './components/TkFooter.vue'
 import TkAdmin from './components/TkAdmin.vue'
 
 export default {
   components: {
     TkComments,
-    TkCounter,
     TkFooter,
     TkAdmin
   },

src/view/components/TkAdminComment.vue

@@ -3,7 +3,7 @@
     <div class="tk-admin-comment-list">
       <div class="tk-admin-comment-item" v-for="comment in comments" :key="comment._id">
         <div class="tk-admin-comment-meta">
-          <tk-avatar :mail="comment.mail" :link="comment.link" />
+          <tk-avatar :config="serverConfig" :avatar="comment.avatar" :mail="comment.mail" :link="comment.link" />
           <span v-if="!comment.link">{{ comment.nick }}</span>
           <a v-if="comment.link" :href="convertLink(comment.link)" target="_blank">{{ comment.nick }}</a>
           <span v-if="comment.mail">&nbsp;(<a :href="`mailto:${comment.mail}`">{{ comment.mail }}</a>)</span>
@@ -41,6 +41,7 @@ export default {
     return {
       loading: true,
       comments: [],
+      serverConfig: {},
       count: 0,
       docPerPage,
       currentPage: 1
@@ -60,6 +61,12 @@ export default {
       }
       this.loading = false
     },
+    async getConfig () {
+      const res = await call(this.$tcb, 'GET_CONFIG_FOR_ADMIN')
+      if (res.result && !res.result.code) {
+        this.serverConfig = res.result.config
+      }
+    },
     switchPage (e) {
       this.currentPage = e
       this.getComments()
@@ -86,6 +93,7 @@ export default {
     }
   },
   mounted () {
+    this.getConfig()
     this.getComments()
   }
 }