feat(admin): add admin panel (#7)

* 新功能：评论管理
* 新功能：配置管理
* 简化部署流程
* 优化文档

cloudbaserc.js

@@ -23,9 +23,6 @@ module.exports = {
   envId: envId,
   functionRoot: './src/function',
   functions: [
-    { name: 'comment-get', ...defaultFunctionConfig },
-    { name: 'comment-like', ...defaultFunctionConfig },
-    { name: 'comment-submit', ...defaultFunctionConfig },
-    { name: 'counter-get', ...defaultFunctionConfig }
+    { name: 'twikoo', ...defaultFunctionConfig }
   ]
 }

docs/.vuepress/config.js

@@ -5,8 +5,8 @@ module.exports = {
     sidebar: [
       '/',
       '/quick-start',
-      '/configuration',
-      '/faq'
+      '/faq',
+      '/link'
     ],
     lastUpdated: true,
     // 假定是 GitHub. 同时也可以是一个完整的 GitLab URL

docs/README.md

@@ -32,14 +32,14 @@ A simple, safe, serverless comment system based on Tencent CloudBase (tcb).
 
 | 状态 | 优先级 | 计划 |
 | ---- | ---- | ---- |
-| DONE | P0 | 文档撰写 |
-| TODO | P1 | 评论管理 |
-| TODO | P2 | 人工审核 |
-| TODO | P2 | AKISMET 审核 |
-| TODO | P2 | 完整 Markdown 适配 |
-| TODO | P3 | Emoji 表情 |
-| TODO | P3 | 图片表情 |
-| TODO | P3 | 评论框粘贴图片 |
+| 已完成 | P0 | 文档撰写 |
+| 已完成 | P1 | 评论管理 |
+| 开发中 | P2 | 人工审核 |
+| 开发中 | P2 | AKISMET 审核 |
+| 开发中 | P2 | 完整 Markdown 适配 |
+| 计划中 | P3 | Emoji 表情 |
+| 计划中 | P3 | 图片表情 |
+| 计划中 | P3 | 评论框粘贴图片 |
 
 <!-- ## 贡献者 | Contributors -->
 

docs/configuration.md

@@ -1,9 +1,8 @@
 # 配置
 
-Twikoo 的配置保存在数据库中，目前修改配置需进入云开发控制台，不方便之处还请谅解。<br>
-**后续会和评论管理一起，上线图形化的配置管理页面。**
-
 ::: warning 注意
+**因图形化配置界面已上线，此文档已废弃且不再维护，其中的内容可能已经过时**
+
 * 配置是可选的，即使没有配置也可以使用。
 * 请确保 config 表的权限**不是**“所有用户可读”，以保证 SMTP 密码等信息不会泄露。<br>
 不过放心，默认权限是安全的，您不需要更改。

docs/faq.md

@@ -1 +1,5 @@
 # 常见问题
+
+## 我忘记了管理员密码，如何重置？
+
+如忘记密码，请前往[云开发控制台](https://console.cloud.tencent.com/tcb/database/collection/config)删除 config.ADMIN_PASS 配置项，然后前往 Twikoo 管理面板重新设置密码。

docs/link.md

@@ -0,0 +1,5 @@
+# 相关文档
+
+* [在Hexo的Butterfly主题使用Twikoo评论配置及更新教程](https://blog.zhheo.com/p/2e6bbbd0.html) by 张洪 Heo
+* [Valine 到 Twikoo 迁移脚本](https://github.com/imaegoo/twikoo-import-tools)
+* [Typecho 到 Twikoo 迁移脚本](https://github.com/Android-KitKat/twikoo-import-tools-typecho)

docs/quick-start.md

@@ -5,29 +5,46 @@
 Twikoo 使用云开发作为评论后台，每个云开发用户均长期享受1个免费的标准型基础版1资源套餐。如果您已经拥有了一个免费版云开发环境，在环境配置符合要求的情况下，Twikoo 理论可以与其他项目共用一个环境。
 
 1. [注册云开发CloudBase](https://curl.qcloud.com/KnnJtUom)
-2. 进入[云开发控制台](https://console.cloud.tencent.com/tcb/)，新建环境，请按个人需要配置环境<br>
+2. 进入[云开发控制台](https://console.cloud.tencent.com/tcb/)，新建环境，请按需配置环境<br>
 ::: tip 提示
-* 推荐选择计费方式`包年包月`，套餐版本`基础班 1`
-* 如果提示“选择部署应用”，请选择“不创建环境”
+* 环境名称自由填写
+* 推荐选择计费方式`包年包月`，套餐版本`基础班 1`，超出免费额度不会收费
+* 如果提示选择“应用模板”，请选择“空模板”
 :::
 3. 进入[环境-登录授权](https://console.cloud.tencent.com/tcb/env/login)，启用“匿名登录”
 4. 进入[环境-安全配置](https://console.cloud.tencent.com/tcb/env/safety)，将网站域名添加到“WEB安全域名”
 5. 复制环境Id备用
 
 ## 环境部署
 
+### ① 简单方式（推荐）
+
+1. 进入[环境-云函数](https://console.cloud.tencent.com/tcb/scf/index)，点击“新建云函数”
+2. 函数名称请填写：`twikoo`，其余默认，点击“下一步”
+3. 打开 [index.js](https://imaegoo.coding.net/p/twikoo/d/twikoo/git/raw/dev/src/function/twikoo/index.js)，全选、复制、粘贴到“函数代码”输入框中，点击“确定”
+4. 创建完成后，点击“twikoo"进入云函数详情页，进入“函数代码”标签，点击“文件 - 新建文件”，输入 `package.json`，回车
+5. 打开 [package.json](https://imaegoo.coding.net/p/twikoo/d/twikoo/git/raw/dev/src/function/twikoo/package.json)，全选、复制、粘贴到代码框中，点击“保存并安装依赖”
+
+::: tip 提示
+更新 Twikoo 版本时，直接前往云函数详情页，将新的代码粘贴保存即可。
+:::
+
+### ② 脚本方式（不推荐）
+
 ::: warning 注意
 * 请确保您已经安装了 [Node.js](https://nodejs.org/en/download/)
 * 请将命令、代码中“您的环境id”替换为您自己的环境id
-* 请不要使用 Windows 自带的记事本编辑 envId.txt，否则会部署失败，后续会修复该问题
+* 第4步会弹出浏览器要求授权，需在有图形界面的系统下进行
+* 请勿在 Termux 下操作。虽然可以部署成功，但是使用时会报错 `[FUNCTIONS_EXECUTE_FAIL] Error: EACCES: permission denied, open '/var/user/index.js'`，这是 cloudbase-cli 的问题
 :::
 
 1. 克隆本仓库
 ``` sh
-git clone https://github.com/imaegoo/twikoo.git
+git clone https://github.com/imaegoo/twikoo.git # 或 git clone https://e.coding.net/imaegoo/twikoo/twikoo.git
 cd twikoo
 ```
-> 如果您没有安装 Git，也可以从 [Release](https://github.com/imaegoo/twikoo/releases) 页面下载最新的 Source code
+> 如果您没有安装 Git，也可以从 [Release](https://github.com/imaegoo/twikoo/releases) 页面下载最新的 Source code<br>
+> 如果您所在的地区访问 Github 速度慢，您可以尝试另一个仓库地址：https://imaegoo.coding.net/public/twikoo/twikoo/git
 2. 安装依赖项
 ``` sh
 npm install # 或 yarn install
@@ -36,37 +53,62 @@ npm install # 或 yarn install
 ``` sh
 echo 您的环境id > envId.txt
 ```
-4. 授权云开发环境
+4. 授权云开发环境（此命令会弹出浏览器要求授权，需在有图形界面的系统下进行）
 ``` sh
 npm run login # 或 yarn run login
 ```
 5. 自动部署
 ``` sh
 npm run deploy # 或 yarn deploy
 ```
-> 更新 Twikoo 版本时，请再次执行此命令更新现有的云函数
 
-## 使用
+::: tip 提示
+更新 Twikoo 版本时，请执行 `git pull` 和 `npm run deploy` 更新现有的云函数
+:::
+
+## 配置使用
+
+### 在 Hexo Butterfly 主题使用
+
+请查看 [在Hexo的Butterfly主题使用Twikoo评论配置及更新教程](https://blog.zhheo.com/p/2e6bbbd0.html) by 张洪 Heo
+
+### 在 Hexo Icarus 主题使用
+
+[魔改版 Icarus](https://github.com/imaegoo/hexo-theme-icarus)目前支持 Twikoo，官方版 Icarus 暂不支持，适配工作将会在近期完成
 
 ### 通过 CDN 引入
 
+::: tip 提示
+如果您使用的博客主题不支持 Twikoo，并且您不知道如何引入 Twikoo，您可以[在 Github 提交适配请求](https://github.com/imaegoo/twikoo/issues/new)
+:::
+
 ``` html
-<div id="twikoo"></div>
+<div id="tcomment"></div>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/twikoo.all.min.js"></script>
-<script>twikoo.init({ envId: '您的环境id' })</script>
+<script>twikoo.init({ envId: '您的环境id', el: '#tcomment' })</script>
 ```
 
 ### 通过 NPM 引入
 
+::: tip 提示
+如果您使用的博客主题不支持 Twikoo，并且您不知道如何引入 Twikoo，您可以[在 Github 提交适配请求](https://github.com/imaegoo/twikoo/issues/new)
+:::
+
 ``` sh
 npm install twikoo # 或 yarn add twikoo
 ```
 
 ``` html
-<div id="twikoo"></div>
+<div id="tcomment"></div>
 ```
 
 ``` js
 import twikoo from 'twikoo' // 或 const twikoo = require('twikoo')
-twikoo.init({ envId: '您的环境id' })
+twikoo.init({ envId: '您的环境id', el: '#tcomment' })
 ```
+
+## 开启管理面板
+
+1. 进入[环境-登录授权](https://console.cloud.tencent.com/tcb/env/login)，点击“自定义登录”右边的“私钥下载”，下载私钥文件
+2. 用文本编辑器打开私钥文件，复制全部内容
+3. 点击评论窗口的“小齿轮”图标，粘贴私钥文件内容，并设置管理员密码

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twikoo",
-  "version": "0.1.15",
+  "version": "0.2.0",
   "description": "A simple comment system based on Tencent CloudBase (tcb).",
   "author": "imaegoo <[email protected]> (https://github.com/imaegoo)",
   "license": "MIT",
@@ -19,36 +19,36 @@
     "build": "webpack",
     "analyze": "webpack --profile --json > stats.json && webpack-bundle-analyzer stats.json",
     "login": "tcb login",
-    "deploy": "tcb functions:deploy",
+    "deploy": "tcb fn deploy twikoo --force",
     "lint": "eslint",
     "docs:dev": "vuepress dev docs",
     "docs:build": "vuepress build docs"
   },
   "devDependencies": {
-    "@cloudbase/cli": "^0.9.5",
-    "copy-webpack-plugin": "^6.0.3",
+    "@cloudbase/cli": "^1.0.4",
+    "copy-webpack-plugin": "^6.3.1",
     "css-loader": "^3.6.0",
-    "eslint": "^7.6.0",
-    "eslint-config-standard": "^14.1.1",
-    "eslint-plugin-import": "^2.22.0",
+    "eslint": "^7.13.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.0.1",
+    "eslint-plugin-standard": "^4.1.0",
     "svg-inline-loader": "^0.8.2",
-    "vue-loader": "^15.9.3",
-    "vue-template-compiler": "^2.6.11",
-    "vuepress": "^1.5.4",
+    "vue-loader": "^15.9.5",
+    "vue-template-compiler": "^2.6.12",
+    "vuepress": "^1.7.1",
     "webpack": "^4.44.1",
-    "webpack-bundle-analyzer": "^3.8.0",
+    "webpack-bundle-analyzer": "^4.1.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
-    "@cloudbase/js-sdk": "^1.0.4",
-    "@fortawesome/fontawesome-free": "^5.14.0",
-    "blueimp-md5": "^2.17.0",
-    "element-ui": "^2.13.2",
-    "marked": "^1.1.1",
-    "vue": "^2.6.11"
+    "@cloudbase/js-sdk": "^1.3.3",
+    "@fortawesome/fontawesome-free": "^5.15.1",
+    "blueimp-md5": "^2.18.0",
+    "element-ui": "^2.14.1",
+    "marked": "^1.2.4",
+    "vue": "^2.6.12"
   }
 }

public/demo.html

@@ -14,7 +14,8 @@
   <script type="text/javascript">
     function init() {
       twikoo.init({
-        envId: document.getElementById('envId').value
+        envId: document.getElementById('envId').value,
+        el: '#tcomment'
       });
     }
   </script>
@@ -60,7 +61,7 @@
         <div class="column">
           <div class="card">
             <div class="card-content">
-              <div class="twikoo" id="twikoo"></div>
+              <div class="twikoo" id="tcomment"></div>
             </div>
           </div>
         </div>

src/function/README.md

@@ -9,3 +9,7 @@ https://cloud.tencent.com/document/product/876/46798
 ## SDK
 
 https://docs.cloudbase.net/api-reference/server/node-sdk/introduction.html
+
+## CLI 文档
+
+https://docs.cloudbase.net/cli-v1/intro.html