fix(docs): refine docs and styles

imaegoo · imaegoo · commit 9888e23ec84d · 2020-09-13T18:22:37.000+08:00
diff --git a/docs/README.md b/docs/README.md
@@ -22,13 +22,23 @@ A simple, safe, serverless comment system based on Tencent CloudBase (tcb).
 
 [https://www.imaegoo.com/2020/hello-twikoo/](https://www.imaegoo.com/2020/hello-twikoo/)
 
-## 快速上手
-
-请查看[快速上手](https://twikoo.js.org/quick-start.html)
-
-> 文档尚未完善，请关注后续更新；<br>
-> 如果你想获取更新动态、建言献策、参与内测，欢迎加入内测群：<br>
-> <img height="300" alt="1080829142" src="https://www.imaegoo.com/gallery/2020/hello-twikoo.png" />
+## 交流群
+
+如果你想获取更新动态、建言献策、参与内测，欢迎加入内测群：<br>
+<img height="300" alt="1080829142" src="https://www.imaegoo.com/gallery/2020/hello-twikoo.png" />
+
+## 开发计划
+
+| 状态 | 优先级 | 计划 |
+| ---- | ---- | ---- |
+| DONE | P0 | 文档撰写 |
+| TODO | P1 | 评论管理 |
+| TODO | P2 | 人工审核 |
+| TODO | P2 | AKISMET 审核 |
+| TODO | P2 | 完整 Markdown 适配 |
+| TODO | P3 | Emoji 表情 |
+| TODO | P3 | 图片表情 |
+| TODO | P3 | 评论框粘贴图片 |
 
 <!-- ## 贡献者 | Contributors -->
 
diff --git a/docs/configuration.md b/docs/configuration.md
@@ -7,92 +7,101 @@ Twikoo 的配置保存在数据库中，目前修改配置需进入控制台。
 不过放心，默认权限是安全的，您不需要更改。
 :::
 
-## AKISMET_KEY
+## 通用
+
+### SITE_NAME
 
 类型: `String`<br>
 默认值: `null`<br>
 必要性: `false`<br>
-示例: 8651783ed123
+示例: 虹墨空间站
 
-反垃圾评论 API key。
+博客、站点名称。
 
-## BLOGGER_EMAIL
+### SITE_URL
 
 类型: `String`<br>
 默认值: `null`<br>
 必要性: `false`<br>
-示例: 12345@qq.com
+示例: https://www.imaegoo.com
 
-博主的邮箱地址，用于邮件通知、博主标识。
+博客、站点地址。
 
-## SC_SENDKEY
+### BLOGGER_EMAIL
 
 类型: `String`<br>
 默认值: `null`<br>
 必要性: `false`<br>
-示例: SCT1364TKdsiGjGvyAZNYDVnuHW12345
+示例: 12345@qq.com
 
-[Server酱](https://sc.ftqq.com/3.version)微信推送的 `SCKEY`
+博主的邮箱地址，用于邮件通知、博主标识。
 
-## SENDER_EMAIL
+## 反垃圾
+
+### AKISMET_KEY
 
 类型: `String`<br>
 默认值: `null`<br>
 必要性: `false`<br>
-示例: blog@imaegoo.com
+示例: 8651783ed123
+
+反垃圾评论 API key。
 
-邮件通知，邮箱地址。
+## 微信通知
 
-## SENDER_NAME
+### SC_SENDKEY
 
 类型: `String`<br>
 默认值: `null`<br>
 必要性: `false`<br>
-示例: 虹墨空间站评论提醒
+示例: SCT1364TKdsiGjGvyAZNYDVnuHW12345
+
+[Server酱](https://sc.ftqq.com/3.version)微信推送的 `SCKEY`
 
-邮件通知，邮件标题。
+## 邮件通知
 
-## SITE_NAME
+### SENDER_EMAIL
 
 类型: `String`<br>
 默认值: `null`<br>
 必要性: `false`<br>
-示例: 虹墨空间站
+示例: blog@imaegoo.com
 
-博客、站点名称。
+邮件通知邮箱地址。
 
-## SITE_URL
+### SENDER_NAME
 
 类型: `String`<br>
 默认值: `null`<br>
 必要性: `false`<br>
-示例: https://www.imaegoo.com
+示例: 虹墨空间站评论提醒
 
-博客、站点地址。
+邮件通知标题。
 
-## SMTP_PASS
+### SMTP_SERVICE
 
 类型: `String`<br>
 默认值: `null`<br>
 必要性: `false`<br>
-示例: password
+示例: qiye.aliyun
 
-邮件通知，邮箱密码，QQ邮箱请填写授权码。
+邮件通知邮箱服务商。<br>
+完整列表请参考：[Supported services](https://nodemailer.com/smtp/well-known/#supported-services)
 
-## SMTP_SERVICE
+### SMTP_USER
 
 类型: `String`<br>
 默认值: `null`<br>
 必要性: `false`<br>
-示例: qiye.aliyun
+示例: blog@imaegoo.com
 
-邮件通知，邮箱服务商。
+邮件通知邮箱用户名。
 
-## SMTP_USER
+### SMTP_PASS
 
 类型: `String`<br>
 默认值: `null`<br>
 必要性: `false`<br>
-示例: blog@imaegoo.com
+示例: password
 
-邮件通知，邮箱用户名。
+邮件通知邮箱密码，QQ邮箱请填写授权码。
diff --git a/docs/quick-start.md b/docs/quick-start.md
@@ -5,19 +5,23 @@
 Twikoo 使用云开发作为评论后台，每个云开发用户均长期享受1个免费的标准型基础版1资源套餐。如果您已经拥有了一个免费版云开发环境，在环境配置符合要求的情况下，Twikoo 理论可以与其他项目共用一个环境。
 
 1. [注册云开发CloudBase](https://curl.qcloud.com/KnnJtUom)
-2. 进入[云开发控制台](https://console.cloud.tencent.com/tcb/)，新建环境，请按个人需要配置环境，推荐选择计费方式`包年包月`，套餐版本`基础班 1`
+2. 进入[云开发控制台](https://console.cloud.tencent.com/tcb/)，新建环境，请按个人需要配置环境<br>
+::: tip 提示
+* 推荐选择计费方式`包年包月`，套餐版本`基础班 1`
+* 如果提示“选择部署应用”，请选择“不创建环境”
+:::
 3. 进入[环境-登录授权](https://console.cloud.tencent.com/tcb/env/login)，启用“匿名登录”
-4. 进入[环境-安全配置](https://console.cloud.tencent.com/tcb/env/safety)，将网站地址添加到“WEB安全域名”
+4. 进入[环境-安全配置](https://console.cloud.tencent.com/tcb/env/safety)，将网站域名添加到“WEB安全域名”
 5. 复制环境Id备用
 
 ## 环境部署
 
 ::: warning 注意
-请将命令、代码中“您的环境id”替换为您自己的环境id
+* 请确保您已经安装了 [Node.js](https://nodejs.org/en/download/)
+* 请将命令、代码中“您的环境id”替换为您自己的环境id
+* 请不要使用 Windows 自带的记事本编辑 envId.txt，否则会部署失败，后续会修复该问题
 :::
 
-请确保您已经安装了 [Node.js](https://nodejs.org/en/download/)。
-
 1. 克隆本仓库
 ``` sh
 git clone https://github.com/imaegoo/twikoo.git
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "twikoo",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "A simple comment system based on Tencent CloudBase (tcb).",
   "author": "imaegoo <hello@imaegoo.com> (https://github.com/imaegoo)",
   "license": "MIT",
diff --git a/src/view/components/TkAction.vue b/src/view/components/TkAction.vue
@@ -35,10 +35,10 @@ export default {
   },
   computed: {
     likeCountStr () {
-      return this.likeCount > 0 ? `(${this.likeCount})` : ''
+      return this.likeCount > 0 ? `${this.likeCount}` : ''
     },
     repliesCountStr () {
-      return this.repliesCount > 0 ? `(${this.repliesCount})` : ''
+      return this.repliesCount > 0 ? `${this.repliesCount}` : ''
     }
   },
   methods: {
diff --git a/src/view/components/TkComment.vue b/src/view/components/TkComment.vue
@@ -10,8 +10,6 @@
           </a>
           <span class="tk-tag tk-tag-green" v-if="comment.master">博主</span>
           <small class="tk-time">{{ displayCreated }}</small>
-          <div class="tk-tag">{{ comment.os }}</div>
-          <div class="tk-tag">{{ comment.browser }}</div>
         </div>
         <tk-action :liked="comment.liked"
             :like-count="comment.like"
@@ -23,6 +21,10 @@
         <span v-if="comment.pid">回复 <a :href="`#${comment.pid}`">@{{ comment.ruser }}</a> :</span>
         <span v-html="comment.comment"></span>
       </div>
+      <div class="tk-extras">
+        <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>
       <!-- 回复列表 -->
       <div class="tk-replies" :class="{ 'tk-replies-expand': isExpanded }" ref="tk-replies">
         <tk-comment v-for="reply in comment.replies"
@@ -47,6 +49,37 @@ import { timeago } from '../../js/utils'
 import TkAction from './TkAction.vue'
 import TkAvatar from './TkAvatar.vue'
 import TkSubmit from './TkSubmit.vue'
+import iconWindows from '@fortawesome/fontawesome-free/svgs/brands/windows.svg'
+import iconApple from '@fortawesome/fontawesome-free/svgs/brands/apple.svg'
+import iconAndroid from '@fortawesome/fontawesome-free/svgs/brands/android.svg'
+import iconLinux from '@fortawesome/fontawesome-free/svgs/brands/linux.svg'
+import iconUbuntu from '@fortawesome/fontawesome-free/svgs/brands/ubuntu.svg'
+import iconChrome from '@fortawesome/fontawesome-free/svgs/brands/chrome.svg'
+import iconFirefox from '@fortawesome/fontawesome-free/svgs/brands/firefox-browser.svg'
+import iconSafari from '@fortawesome/fontawesome-free/svgs/brands/safari.svg'
+import iconIe from '@fortawesome/fontawesome-free/svgs/brands/internet-explorer.svg'
+import iconEdge from '@fortawesome/fontawesome-free/svgs/brands/edge.svg'
+import iconOther from '@fortawesome/fontawesome-free/svgs/regular/window-maximize.svg'
+
+
+const osList = {
+  win: iconWindows,
+  mac: iconApple,
+  ipad: iconApple,
+  iphone: iconApple,
+  android: iconAndroid,
+  ubuntu: iconUbuntu,
+  linux: iconLinux
+}
+
+const browserList = {
+  edge: iconEdge,
+  chrome: iconChrome,
+  firefox: iconFirefox,
+  safari: iconSafari,
+  explorer: iconIe,
+  ie: iconIe
+}
 
 export default {
   name: 'tk-comment', // 允许组件模板递归地调用自身
@@ -70,11 +103,24 @@ export default {
     displayCreated () {
       return timeago(this.comment.created)
     },
+    iconOs () {
+      return this.getIconBy(this.comment.os, osList)
+    },
+    iconBrowser () {
+      return this.getIconBy(this.comment.browser, browserList)
+    },
     showExpand () {
       return this.hasExpand && !this.isExpanded
     }
   },
   methods: {
+    getIconBy (name, list) {
+      const lowerCaseName = name.toLowerCase()
+      for (let key in list) {
+        if (lowerCaseName.indexOf(key) !== -1) return list[key]
+      }
+      return iconOther
+    },
     showExpandIfNeed () {
       if (this.comment.replies && this.comment.replies.length > 0 && this.$refs['tk-replies']) {
         this.hasExpand = this.$refs['tk-replies'].scrollHeight > 200
@@ -141,6 +187,25 @@ export default {
 .tk-nick-link:hover {
   color: #409eff;
 }
+.tk-extras {
+  color: #999999;
+  font-size: 0.875em;
+  display: flex;
+  margin-top: 0.5rem;
+}
+.tk-extra {
+  margin-right: 0.75rem;
+}
+.tk-icon {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  line-height: 0;
+  vertical-align: text-top;
+}
+.tk-icon /deep/ svg {
+  fill: currentColor;
+}
 .tk-tag {
   display: inline-block;
   padding: 0 0.5rem;
diff --git a/src/view/components/TkFooter.vue b/src/view/components/TkFooter.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="tk-footer">
     Powered by <a href="https://github.com/imaegoo/twikoo" target="_blank">Twikoo</a>
-    v {{ version }}
+    v{{ version }}
   </div>
 </template>
 
diff --git a/src/view/components/TkSubmit.vue b/src/view/components/TkSubmit.vue
@@ -9,7 +9,7 @@
             v-model="comment"
             placeholder="请输入内容"
             :autosize="{ minRows: 3 }"
-            @change="updatePreview" />
+            @input="updatePreview" />
       </div>
     </div>
     <div class="tk-row actions">

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "twikoo",`
`3`		`- "version": "0.1.8",`
	`3`	`+ "version": "0.1.9",`
`4`	`4`	`"description": "A simple comment system based on Tencent CloudBase (tcb).",`
`5`	`5`	`"author": "imaegoo <hello@imaegoo.com> (https://github.com/imaegoo)",`
`6`	`6`	`"license": "MIT",`