refactor: comment & editor (#154)

* refactor(editor): User profile input actions Signed-off-by: qwqcode <[email protected]> * refactor(user): Provide update method Signed-off-by: qwqcode <[email protected]> * refactor(context): Modified to interface-oriented Signed-off-by: qwqcode <[email protected]> * refactor(comment): Reorganize the methods Signed-off-by: qwqcode <[email protected]> * refactor(editor): Add the concept of EditorPanel and EditorBtn Signed-off-by: qwqcode <[email protected]> * chore: Move list folder to up-level directory Signed-off-by: qwqcode <[email protected]> * chore: Move layer folder to up-level directory Signed-off-by: qwqcode <[email protected]> * chore(conf): Remove ArtalkConfig optional symbol Signed-off-by: qwqcode <[email protected]> * chore: Remove useless code Signed-off-by: qwqcode <[email protected]> * feat(artalk-lite): ArtalkLite without bundled marked deps Signed-off-by: qwqcode <[email protected]>
ArtalkJS · May 18, 2022 · 672cda6 · 672cda6
1 parent 8a4dc9d
commit 672cda6
Show file tree

Hide file tree

Showing 63 changed files with 1,733 additions and 1,604 deletions.
diff --git a/packages/artalk-sidebar/src/admin/page-list.ts b/packages/artalk-sidebar/src/admin/page-list.ts
@@ -1,6 +1,6 @@
 import '../style/page-list.less'
 
-import Context from 'artalk/src/context'
+import Context from 'artalk/types/context'
 import * as Utils from 'artalk/src/lib/utils'
 import * as Ui from 'artalk/src/lib/ui'
 import { PageData } from 'artalk/types/artalk-data'

diff --git a/packages/artalk-sidebar/src/admin/site-list-floater.ts b/packages/artalk-sidebar/src/admin/site-list-floater.ts
@@ -1,6 +1,6 @@
 import '../style/site-list.less'
 
-import Context from 'artalk/src/context'
+import Context from 'artalk/types/context'
 import * as Utils from 'artalk/src/lib/utils'
 import * as Ui from 'artalk/src/lib/ui'
 import { SiteData } from 'artalk/types/artalk-data'

diff --git a/packages/artalk-sidebar/src/admin/site-list.ts b/packages/artalk-sidebar/src/admin/site-list.ts
@@ -1,6 +1,6 @@
 import '../style/site-list.less'
 
-import Context from 'artalk/src/context'
+import Context from 'artalk/types/context'
 import * as Utils from 'artalk/src/lib/utils'
 import * as Ui from 'artalk/src/lib/ui'
 import { SiteData } from 'artalk/types/artalk-data'

diff --git a/packages/artalk-sidebar/src/main.ts b/packages/artalk-sidebar/src/main.ts
@@ -11,11 +11,9 @@ export default async function InitSidebar(conf: ArtalkConfig, user: LocalUser, v
 
   // 初始化用户数据
   user = user || {}
-  artalk.ctx.user.data = {
-    ...artalk.ctx.user.data,
+  artalk.ctx.user.update({
     ...user
-  }
-  artalk.ctx.user.save()
+  })
 
   // 初始化 Sidebar
   const sidebarCtx = new SidebarCtx()

diff --git a/packages/artalk-sidebar/src/sidebar-component.ts b/packages/artalk-sidebar/src/sidebar-component.ts
@@ -1,5 +1,5 @@
 import ArtalkComponent from 'artalk/src/lib/component'
-import Context from 'artalk/src/context'
+import Context from 'artalk/types/context'
 import { SidebarCtx } from './main'
 
 export default class Component extends ArtalkComponent {

diff --git a/packages/artalk-sidebar/src/sidebar-root.ts b/packages/artalk-sidebar/src/sidebar-root.ts
@@ -1,9 +1,9 @@
 import './style/sidebar.less'
 
-import Context from 'artalk/src/context'
+import Context from 'artalk/types/context'
 import * as Utils from 'artalk/src/lib/utils'
 import * as Ui from 'artalk/src/lib/ui'
-import Comment  from 'artalk/src/components/comment'
+import Comment  from 'artalk/src/comment'
 import { SiteData } from 'artalk/types/artalk-data'
 import Api from 'artalk/src/api'
 

diff --git a/packages/artalk-sidebar/src/sidebar-view.ts b/packages/artalk-sidebar/src/sidebar-view.ts
@@ -1,6 +1,6 @@
-import Context from 'artalk/src/context'
+import Context from 'artalk/types/context'
 import * as Utils from 'artalk/src/lib/utils'
-import Comment from 'artalk/src/components/comment'
+import Comment from 'artalk/src/comment'
 import Component from './sidebar-component'
 import { SidebarCtx } from './main'
 

diff --git a/packages/artalk-sidebar/src/sidebar-views/comments-view.ts b/packages/artalk-sidebar/src/sidebar-views/comments-view.ts
@@ -1,6 +1,6 @@
-import Context from 'artalk/src/context'
+import Context from 'artalk/types/context'
 import * as Utils from 'artalk/src/lib/utils'
-import ListLite from 'artalk/src/components/list-lite'
+import ListLite from 'artalk/src/list/list-lite'
 
 import SidebarView from '../sidebar-view'
 
@@ -39,10 +39,10 @@ export default class MessageView extends SidebarView {
     this.list.pageMode = 'pagination'
     this.list.noCommentText = '<div class="atk-sidebar-no-content">无内容</div>'
     this.list.renderComment = (comment) => {
-      const pageURL = comment.data.page_url
-      comment.setOpenURL(`${pageURL}#atk-comment-${comment.data.id}`)
-      comment.onReplyBtnClick = () => {
-        this.ctx.trigger('editor-reply', {data: comment.data, $el: comment.$el, scroll: true})
+      const pageURL = comment.getData().page_url
+      comment.getRender().setOpenURL(`${pageURL}#atk-comment-${comment.getID()}`)
+      comment.getConf().onReplyBtnClick = () => {
+        this.ctx.trigger('editor-reply', {data: comment.getData(), $el: comment.getEl(), scroll: true})
       }
     }
     this.list.paramsEditor = (params) => {

diff --git a/packages/artalk-sidebar/src/sidebar-views/pages-view.ts b/packages/artalk-sidebar/src/sidebar-views/pages-view.ts
@@ -1,8 +1,8 @@
 import Api from 'artalk/src/api'
-import Context from 'artalk/src/context'
+import Context from 'artalk/types/context'
 import * as Utils from 'artalk/src/lib/utils'
 import * as Ui from 'artalk/src/lib/ui'
-import Comment from 'artalk/src/components/comment'
+import Comment from 'artalk/src/comment'
 import Pagination, { PaginationConf } from 'artalk/src/components/pagination'
 
 import SidebarView from '../sidebar-view'

diff --git a/packages/artalk-sidebar/src/sidebar-views/setting-view.ts b/packages/artalk-sidebar/src/sidebar-views/setting-view.ts
@@ -1,7 +1,7 @@
 import Api from 'artalk/src/api'
-import Context from 'artalk/src/context'
+import Context from 'artalk/types/context'
 import * as Utils from 'artalk/src/lib/utils'
-import Comment from 'artalk/src/components/comment'
+import Comment from 'artalk/src/comment'
 
 import SiteList from '../admin/site-list'
 import SidebarView from '../sidebar-view'

diff --git a/packages/artalk-sidebar/src/sidebar-views/sites-view.ts b/packages/artalk-sidebar/src/sidebar-views/sites-view.ts
@@ -1,7 +1,7 @@
 import Api from 'artalk/src/api'
-import Context from 'artalk/src/context'
+import Context from 'artalk/types/context'
 import * as Utils from 'artalk/src/lib/utils'
-import Comment from 'artalk/src/components/comment'
+import Comment from 'artalk/src/comment'
 
 import SiteList from '../admin/site-list'
 import SidebarView from '../sidebar-view'

diff --git a/packages/artalk-sidebar/src/sidebar-views/transfer-view.ts b/packages/artalk-sidebar/src/sidebar-views/transfer-view.ts
@@ -1,8 +1,8 @@
 import Api from 'artalk/src/api'
-import Context from 'artalk/src/context'
+import Context from 'artalk/types/context'
 import * as Utils from 'artalk/src/lib/utils'
 import * as Ui from 'artalk/src/lib/ui'
-import Comment from 'artalk/src/components/comment'
+import Comment from 'artalk/src/comment'
 
 import SiteList from '../admin/site-list'
 import SidebarView from '../sidebar-view'

diff --git a/packages/artalk/package.json b/packages/artalk/package.json
@@ -25,7 +25,8 @@
   "types": "./types/index.d.ts",
   "scripts": {
     "dev": "vite",
-    "build": "pnpm lint && vite build",
+    "build": "pnpm lint && vite build && pnpm build:lite",
+    "build:lite": "vite build --config vite-lite.config.ts",
     "build:demo": "vite build --config vite-demo.config.ts",
     "serve": "vite preview",
     "deploy": "gh-pages -d deploy",

diff --git a/packages/artalk/src/api/index.ts b/packages/artalk/src/api/index.ts
@@ -1,6 +1,6 @@
 import { CommentData, ListData, UserData, PageData, SiteData, NotifyData } from '~/types/artalk-data'
 import ArtalkConfig from '~/types/artalk-config'
-import Context from '../context'
+import Context from '~/types/context'
 import { Fetch, ToFormData, POST, GET } from './request'
 import * as Utils from '../lib/utils'
 import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'

diff --git a/packages/artalk/src/api/request.ts b/packages/artalk/src/api/request.ts
@@ -1,4 +1,4 @@
-import Context from '../context'
+import Context from '~/types/context'
 
 /** 公共请求函数 */
 export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit, timeout?: number): Promise<any> {

diff --git a/packages/artalk/src/artalk.ts b/packages/artalk/src/artalk.ts
@@ -2,15 +2,16 @@ import './style/main.less'
 
 import ArtalkConfig from '~/types/artalk-config'
 import { EventPayloadMap, Handler } from '~/types/event'
-import Context from './context'
+import Context from '~/types/context'
+import ConcreteContext from './context'
 import defaults from './defaults'
 
 import CheckerLauncher from './lib/checker'
-import Editor from './components/editor'
-import List from './components/list'
-import SidebarLayer from './components/sidebar-layer'
+import Editor from './editor'
+import List from './list'
+import SidebarLayer from './layer/sidebar-layer'
 
-import Layer, { GetLayerWrap } from './components/layer'
+import Layer, { GetLayerWrap } from './layer'
 import Api from './api'
 import * as Utils from './lib/utils'
 import * as Ui from './lib/ui'
@@ -31,7 +32,7 @@ export default class Artalk {
   public list!: List
   public sidebarLayer!: SidebarLayer
 
-  constructor (customConf: ArtalkConfig) {
+  constructor(customConf: Partial<ArtalkConfig>) {
     // 配置
     this.conf = Utils.mergeDeep(Artalk.defaults, customConf)
     this.conf.server = this.conf.server.replace(/\/$/, '').replace(/\/api\/?$/, '')
@@ -67,7 +68,7 @@ export default class Artalk {
     }
 
     // Context 初始化
-    this.ctx = new Context(this.$root, this.conf)
+    this.ctx = new ConcreteContext(this.$root, this.conf)
 
     // 界面初始化
     this.$root.classList.add('artalk')

diff --git a/packages/artalk/src/comment/actions.ts b/packages/artalk/src/comment/actions.ts
@@ -0,0 +1,87 @@
+import Api from '../api'
+import Comment from './comment'
+import ActionBtn from '../components/action-btn'
+
+export default class CommentActions {
+  private comment: Comment
+
+  private get ctx() { return this.comment.ctx }
+  private get data() { return this.comment.getData() }
+  private get cConf() { return this.comment.getConf() }
+
+  public constructor(comment: Comment) {
+    this.comment = comment
+  }
+
+  /** 投票操作 */
+  public vote(type: 'up'|'down') {
+    const actionBtn = (type === 'up') ? this.comment.getRender().voteBtnUp : this.comment.getRender().voteBtnDown
+
+    new Api(this.ctx).vote(this.data.id, `comment_${type}`)
+    .then((v) => {
+      this.data.vote_up = v.up
+      this.data.vote_down = v.down
+      this.comment.getRender().voteBtnUp?.updateText()
+      this.comment.getRender().voteBtnDown?.updateText()
+    })
+    .catch((err) => {
+      actionBtn?.setError(this.ctx.$t('voteFail'))
+      console.log(err)
+    })
+  }
+
+  /** 管理员 - 评论状态修改 */
+  public adminEdit(type: 'collapsed'|'pending'|'pinned', btnElem: ActionBtn) {
+    if (btnElem.isLoading) return // 若正在修改中
+
+    btnElem.setLoading(true, `${this.ctx.$t('editing')}...`)
+
+    // 克隆并修改当前数据
+    const modify = { ...this.data }
+    if (type === 'collapsed') {
+      modify.is_collapsed = !modify.is_collapsed
+    } else if (type === 'pending') {
+      modify.is_pending = !modify.is_pending
+    } else if (type === 'pinned') {
+      modify.is_pinned = !modify.is_pinned
+    }
+
+    new Api(this.ctx).commentEdit(modify).then((data) => {
+      btnElem.setLoading(false)
+
+      // 刷新当前 Comment UI
+      this.comment.setData(data)
+
+      // 刷新 List UI
+      this.ctx.trigger('list-refresh-ui')
+    }).catch((err) => {
+      console.error(err)
+      btnElem.setError(this.ctx.$t('editFail'))
+    })
+  }
+
+  /** 管理员 - 评论删除 */
+  public adminDelete(btnElem: ActionBtn) {
+    if (btnElem.isLoading) return // 若正在删除中
+
+    btnElem.setLoading(true, `${this.ctx.$t('deleting')}...`)
+    new Api(this.ctx).commentDel(this.data.id, this.data.site_name)
+      .then(() => {
+        btnElem.setLoading(false)
+        if (this.cConf.onDelete) this.cConf.onDelete(this.comment)
+      })
+      .catch((e) => {
+        console.error(e)
+        btnElem.setError(this.ctx.$t('deleteFail'))
+      })
+  }
+
+  /** 快速跳转到该评论 */
+  public goToReplyComment() {
+    const origHash = window.location.hash
+    const modifyHash = `#atk-comment-${this.data.rid}`
+
+    window.location.hash = modifyHash
+    if (modifyHash === origHash) window.dispatchEvent(new Event('hashchange')) // 强制触发事件
+  }
+}
diff --git a/...s/artalk/src/components/html/comment.html → packages/artalk/src/comment/comment.html b/...s/artalk/src/components/html/comment.html → packages/artalk/src/comment/comment.html
@@ -4,7 +4,7 @@
     <div class="atk-main">
       <div class="atk-header">
         <span class="atk-item atk-nick"></span>
-        <span class="atk-item atk-badge"></span>
+        <span class="atk-badge-wrap"></span>
         <span class="atk-item atk-date"></span>
       </div>
       <div class="atk-body">