fix: reply notice and spam check (#424)

* 改进增加无 CSS 版本（`/dist/twikoo.nocss.js`、`/dist/twikoo.css`） * 修复 Vercel 版本回复通知异常 * 修复私有部署版本 IPv6 属地查询异常 * 修复 Vercel 版本、私有部署版本垃圾评论识别功能异常
twikoojs · Aug 4, 2022 · e30f987 · e30f987
1 parent 0aa6169
commit e30f987
Show file tree

Hide file tree

Showing 28 changed files with 154 additions and 148 deletions.
diff --git a/docs/.vuepress/theme/layouts/Layout.vue b/docs/.vuepress/theme/layouts/Layout.vue
@@ -13,7 +13,7 @@
 
         <!-- Twikoo -->
         <div id="twikoo"></div>
-        <component :is="'script'" src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/twikoo.all.min.js" ref="twikooJs"></component>
+        <component :is="'script'" src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/twikoo.all.min.js" ref="twikooJs"></component>
       </div>
     </template>
   </ParentLayout>

diff --git a/docs/en/quick-start.md b/docs/en/quick-start.md
@@ -49,7 +49,7 @@ exports.main = require('twikoo-func').main
 8. 创建完成后，点击“twikoo"进入云函数详情页，进入“函数代码”标签，点击“文件 - 新建文件”，输入 `package.json`，回车
 9. 复制以下代码、粘贴到代码框中，点击“保存并安装依赖”
 ``` json
-{ "dependencies": { "twikoo-func": "1.6.1" } }
+{ "dependencies": { "twikoo-func": "1.6.2" } }
 ```
 
 ### 命令行部署
@@ -206,7 +206,7 @@ twikoo:
 
 ``` html
 <div id="tcomment"></div>
-<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/twikoo.all.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/twikoo.all.min.js"></script>
 <script>
 twikoo.init({
   envId: '您的环境id', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
@@ -224,10 +224,10 @@ twikoo.init({
 
 如果遇到默认 CDN 加载速度缓慢，可更换其他 CDN 镜像。以下为可供选择的公共 CDN，其中一些 CDN 可能需要数天时间同步最新版本：
 
-* `https://cdn.staticfile.org/twikoo/1.6.1/twikoo.all.min.js`
-* `https://lib.baomitu.com/twikoo/1.6.1/twikoo.all.min.js`
-* `https://cdn.bootcdn.net/ajax/libs/twikoo/1.6.1/twikoo.all.min.js`
-* `https://cdn.jsdelivr.net/npm/[email protected].1/dist/twikoo.all.min.js`
+* `https://cdn.staticfile.org/twikoo/1.6.2/twikoo.all.min.js`
+* `https://lib.baomitu.com/twikoo/1.6.2/twikoo.all.min.js`
+* `https://cdn.bootcdn.net/ajax/libs/twikoo/1.6.2/twikoo.all.min.js`
+* `https://cdn.jsdelivr.net/npm/[email protected].2/dist/twikoo.all.min.js`
 
 ## 开启管理面板（腾讯云环境）
 
@@ -285,6 +285,8 @@ yarn deploy -e 您的环境id
 1. 在服务器上执行 `npm i -g tkserver@latest`
 2. 重新启动 `tkserver`
 
+Docker 版先执行 `docker pull imaegoo/twikoo` 再重启容器
+
 ### 自动更新
 
 考虑到可用性和安全性问题，Twikoo 没有实现自动更新，也没有计划实现自动更新。如果您希望实现自动更新，可以参考 MHuiG 基于 Github 工作流的 [twikoo-update](https://github.com/MHuiG/twikoo-update) 的实现方式。
diff --git a/docs/quick-start.md b/docs/quick-start.md
@@ -45,7 +45,7 @@ exports.main = require('twikoo-func').main
 8. 创建完成后，点击“twikoo"进入云函数详情页，进入“函数代码”标签，点击“文件 - 新建文件”，输入 `package.json`，回车
 9. 复制以下代码、粘贴到代码框中，点击“保存并安装依赖”
 ``` json
-{ "dependencies": { "twikoo-func": "1.6.1" } }
+{ "dependencies": { "twikoo-func": "1.6.2" } }
 ```
 
 ### 命令行部署
@@ -208,7 +208,7 @@ twikoo:
 
 ``` html
 <div id="tcomment"></div>
-<script src="https://cdn.staticfile.org/twikoo/1.6.1/twikoo.all.min.js"></script>
+<script src="https://cdn.staticfile.org/twikoo/1.6.2/twikoo.all.min.js"></script>
 <script>
 twikoo.init({
   envId: '您的环境id', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
@@ -226,10 +226,10 @@ twikoo.init({
 
 如果遇到默认 CDN 加载速度缓慢，可更换其他 CDN 镜像。以下为可供选择的公共 CDN，其中一些 CDN 可能需要数天时间同步最新版本：
 
-* `https://cdn.staticfile.org/twikoo/1.6.1/twikoo.all.min.js`
-* `https://lib.baomitu.com/twikoo/1.6.1/twikoo.all.min.js`
-* `https://cdn.bootcdn.net/ajax/libs/twikoo/1.6.1/twikoo.all.min.js`
-* `https://cdn.jsdelivr.net/npm/[email protected].1/dist/twikoo.all.min.js`
+* `https://cdn.staticfile.org/twikoo/1.6.2/twikoo.all.min.js`
+* `https://lib.baomitu.com/twikoo/1.6.2/twikoo.all.min.js`
+* `https://cdn.bootcdn.net/ajax/libs/twikoo/1.6.2/twikoo.all.min.js`
+* `https://cdn.jsdelivr.net/npm/[email protected].2/dist/twikoo.all.min.js`
 
 ## 开启管理面板（腾讯云环境）
 
@@ -287,6 +287,8 @@ yarn deploy -e 您的环境id
 1. 在服务器上执行 `npm i -g tkserver@latest`
 2. 重新启动 `tkserver`
 
+Docker 版先执行 `docker pull imaegoo/twikoo` 再重启容器
+
 ### 自动更新
 
 考虑到可用性和安全性问题，Twikoo 没有实现自动更新，也没有计划实现自动更新。如果您希望实现自动更新，可以参考 MHuiG 基于 Github 工作流的 [twikoo-update](https://github.com/MHuiG/twikoo-update) 的实现方式。
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "twikoo",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "A simple comment system.",
   "keywords": [
     "twikoojs",
@@ -56,6 +56,7 @@
     "eslint-plugin-standard": "^4.1.0",
     "eslint-plugin-vue": "^8.0.3",
     "marked": "^4.0.12",
+    "mini-css-extract-plugin": "^2.6.1",
     "owo": "^1.0.2",
     "prismjs": "^1.28.0",
     "svg-inline-loader": "^0.8.2",

diff --git a/src/client/utils/i18n/i18n.js b/src/client/utils/i18n/i18n.js
@@ -519,10 +519,10 @@ export default {
     'Custom SMTP server address. If you have configured SMTP_SERVICE, please leave it empty.'
   ],
   [S.ACI + '_SMTP_PASS']: [
-    '邮件通知邮箱密码，QQ邮箱请填写授权码。',
-    '郵件通知郵箱密碼，QQ郵箱請填寫授權碼。',
-    '郵件通知郵箱密碼，QQ郵箱請填寫授權碼。',
-    'Email notification mailbox password. Enter authorization code for QQ mail.'
+    '邮件通知邮箱密码，QQ、163邮箱请填写授权码。',
+    '郵件通知郵箱密碼，QQ、163郵箱請填寫授權碼。',
+    '郵件通知郵箱密碼，QQ、163郵箱請填寫授權碼。',
+    'Email notification mailbox password. Enter authorization code for QQ/163 mail.'
   ],
   [S.ACI + '_SMTP_PORT']: [
     '自定义 SMTP 端口。如您已配置 SMTP_SERVICE，此项请留空。',

diff --git a/src/client/version.js b/src/client/version.js
@@ -1,3 +1,3 @@
-const version = '1.6.1'
+const version = '1.6.2'
 
 export { version }
diff --git a/src/client/view/components/TkAction.vue b/src/client/view/components/TkAction.vue
@@ -52,7 +52,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .tk-action {
   display: flex;
   align-items: center;
@@ -86,8 +86,6 @@ export default {
   height: 1em;
   width: 1em;
   line-height: 0;
-}
-.tk-action-icon :deep(svg) {
-  fill: #409eff;
+  color: #409eff;
 }
 </style>
diff --git a/src/client/view/components/TkAdmin.vue b/src/client/view/components/TkAdmin.vue
@@ -216,7 +216,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .tk-admin-container {
   position: absolute;
   top: 0;
@@ -285,7 +285,7 @@ export default {
   text-align: center;
   margin-top: 1rem;
 }
-.tk-password :deep(.el-input__inner) {
+.tk-password .el-input__inner {
   min-width: 100px;
 }
 .tk-login-msg a {

diff --git a/src/client/view/components/TkAdminComment.vue b/src/client/view/components/TkAdminComment.vue
@@ -188,7 +188,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .tk-admin-comment {
   display: flex;
   flex-direction: column;
@@ -244,7 +244,7 @@ export default {
   flex-wrap: wrap;
   margin-bottom: 0.5em;
 }
-.tk-avatar {
+.tk-admin-comment .tk-avatar {
   margin-right: 0.5em;
 }
 .tk-admin-actions {

diff --git a/src/client/view/components/TkAdminConfig.vue b/src/client/view/components/TkAdminConfig.vue
@@ -184,7 +184,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .tk-admin-config-groups {
   overflow-y: auto;
   padding-right: 0.5em;

diff --git a/src/client/view/components/TkAdminImport.vue b/src/client/view/components/TkAdminImport.vue
@@ -103,7 +103,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .tk-admin-import {
   display: flex;
   flex-direction: column;
@@ -113,10 +113,10 @@ export default {
   font-size: 1.25rem;
   font-weight: bold;
 }
-select,
-input,
-.el-button,
-.el-textarea {
+.tk-admin-import select,
+.tk-admin-import input,
+.tk-admin-import .el-button,
+.tk-admin-import .el-textarea {
   margin-top: 1em;
 }
 </style>
diff --git a/src/client/view/components/TkAvatar.vue b/src/client/view/components/TkAvatar.vue
@@ -63,14 +63,15 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .tk-avatar {
   flex-shrink: 0;
   height: 2.5rem;
   width: 2.5rem;
   overflow: hidden;
   text-align: center;
   border-radius: 5px;
+  margin-right: 1rem;
 }
 .tk-replies .tk-avatar {
   height: 1.6rem;
@@ -84,11 +85,9 @@ export default {
 }
 .tk-avatar .tk-avatar-img {
   height: 2.5rem;
+  color: #c0c4cc;
 }
 .tk-replies .tk-avatar .tk-avatar-img {
   height: 1.6rem;
 }
-.tk-avatar .tk-avatar-img :deep(svg) {
-  fill: #c0c4cc;
-}
 </style>
diff --git a/src/client/view/components/TkComment.vue b/src/client/view/components/TkComment.vue
@@ -37,15 +37,15 @@
       </div>
       <div class="tk-extras" v-if="comment.ipRegion || comment.os || comment.browser">
         <div class="tk-extra" v-if="comment.ipRegion">
-          <span class="tk-icon" v-html="iconLocation"></span>
+          <span class="tk-icon __comment" v-html="iconLocation"></span>
           <span class="tk-extra-text">&nbsp;{{ comment.ipRegion }}</span>
         </div>
         <div class="tk-extra" v-if="comment.os">
-          <span class="tk-icon" v-html="iconOs"></span>
+          <span class="tk-icon __comment" v-html="iconOs"></span>
           <span class="tk-extra-text">&nbsp;{{ comment.os }}</span>
         </div>
         <div class="tk-extra" v-if="comment.browser">
-          <span class="tk-icon" v-html="iconBrowser"></span>
+          <span class="tk-icon __comment" v-html="iconBrowser"></span>
           <span class="tk-extra-text">&nbsp;{{ comment.browser }}</span>
         </div>
       </div>
@@ -274,7 +274,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .tk-main {
   flex: 1;
   width: 0;
@@ -285,9 +285,6 @@ export default {
   flex-direction: row;
   justify-content: space-between;
 }
-.tk-avatar {
-  margin-right: 1rem;
-}
 .tk-nick-link {
   color: inherit;
   text-decoration: none;
@@ -317,18 +314,14 @@ export default {
   display: flex;
   align-items: center;
 }
-.tk-icon {
+.tk-icon.__comment {
   height: 1em;
   width: 1em;
   line-height: 1;
 }
 .tk-extra-text {
   line-height: 1;
 }
-.tk-icon :deep(svg) {
-  width: 100%;
-  fill: currentColor;
-}
 .tk-tag {
   display: inline-block;
   padding: 0 0.5em;
@@ -373,7 +366,7 @@ export default {
 .tk-replies .tk-content {
   font-size: .9em;
 }
-.tk-comment :deep(.vemoji) {
+.tk-comment .vemoji {
   max-height: 2em;
   vertical-align: middle;
 }

diff --git a/src/client/view/components/TkComments.vue b/src/client/view/components/TkComments.vue
@@ -8,8 +8,8 @@
           <span>{{ t('COMMENTS_COUNT_SUFFIX') }}</span>
         </span>
         <span>
-          <span class="tk-icon" v-if="!loading && !loadingMore" v-html="iconRefresh" @click="refresh"
-            ></span><span class="tk-icon" v-if="showAdminEntry" v-html="iconSetting" @click="openAdmin"
+          <span class="tk-icon __comments" v-if="!loading && !loadingMore" v-html="iconRefresh" @click="refresh"
+            ></span><span class="tk-icon __comments" v-if="showAdminEntry" v-html="iconSetting" @click="openAdmin"
             ></span>
         </span>
       </div>
@@ -119,7 +119,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .tk-comments-title {
   font-size: 1.25rem;
   font-weight: bold;
@@ -147,7 +147,7 @@ export default {
   font-size: 0.75em;
   color: #ff0000;
 }
-.tk-icon {
+.tk-icon.__comments {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -157,10 +157,6 @@ export default {
   width: 0.75em;
   line-height: 0;
   cursor: pointer;
-}
-.tk-icon :deep(svg) {
-  width: 100%;
-  height: 100%;
-  fill: #409eff;
+  color: #409eff;
 }
 </style>
diff --git a/src/client/view/components/TkFooter.vue b/src/client/view/components/TkFooter.vue
@@ -39,7 +39,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .tk-footer {
   width: 100%;
   text-align: end;

diff --git a/src/client/view/components/TkMetaInput.vue b/src/client/view/components/TkMetaInput.vue
@@ -140,7 +140,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .tk-meta-input {
   display: flex;
 }
@@ -152,10 +152,10 @@ export default {
 .tk-meta-input .el-input + .el-input {
   margin-left: 0.5rem;
 }
-.tk-meta-input .el-input :deep(.el-input-group__prepend) {
+.tk-meta-input .el-input .el-input-group__prepend {
   padding: 0 1rem;
 }
-.tk-meta-input .el-input :deep(input:invalid) {
+.tk-meta-input .el-input input:invalid {
   border: 1px solid #f56c6c;
   box-shadow: none;
 }