diff --git a/package.json b/package.json index 752b48c9a..b71849a86 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "vue": "^2.6.14", "vue-loader": "^15.9.8", "vue-template-compiler": "^2.6.14", - "webpack": "^5.63.0", + "webpack": "^5.91.0", "webpack-bundle-analyzer": "^4.5.0", "webpack-cli": "^4.9.1", "webpack-dev-server": "^4.4.0" diff --git a/src/client/utils/highlight.js b/src/client/utils/highlight.js index 8963531e7..3a958b671 100644 --- a/src/client/utils/highlight.js +++ b/src/client/utils/highlight.js @@ -12,6 +12,8 @@ const renderCode = (el, theme) => { Prism = require('prismjs') require('prismjs/plugins/autoloader/prism-autoloader') Prism.plugins.autoloader.languages_path = `${prismCdn}/components/` + // require('prismjs/plugins/toolbar/prism-toolbar') + // require('prismjs/plugins/show-language/prism-show-language') } loadCss(theme, prismCdn) Prism.highlightAllUnder(el) diff --git a/src/client/view/components/TkComment.vue b/src/client/view/components/TkComment.vue index 46f77db13..3877d94f0 100644 --- a/src/client/view/components/TkComment.vue +++ b/src/client/view/components/TkComment.vue @@ -31,10 +31,20 @@ @like="onLike" @reply="onReply" /> -
+
{{ t('COMMENT_REPLIED') }} @{{ comment.ruser }} :
+
+
+ {{ t('COMMENT_EXPAND') }} +
+
+
+
+ {{ t('COMMENT_COLLAPSE') }} +
+
@@ -49,25 +59,35 @@  {{ comment.browser }}
+ + -
+
- - -
{{ t('COMMENT_EXPAND') }}
-
{{ t('COMMENT_COLLAPSE') }}
+
+
+ {{ t('COMMENT_EXPAND') }} +
+
+
+
+ {{ t('COMMENT_COLLAPSE') }} +
+
@@ -125,11 +145,14 @@ export default { likeLoading: false, isExpanded: false, hasExpand: false, + isContentExpanded: false, + hasContentExpand: false, isLogin: false } }, props: { comment: Object, + replyId: String, replying: Boolean, config: Object }, @@ -156,6 +179,12 @@ export default { showCollapse () { return this.hasExpand && this.isExpanded }, + showContentExpand () { + return this.hasContentExpand && !this.isContentExpanded + }, + showContentCollapse () { + return this.hasContentExpand && this.isContentExpanded + }, convertedLink () { return convertLink(this.comment.link) } @@ -173,12 +202,22 @@ export default { if (this.comment.replies && this.comment.replies.length > 0 && this.$refs['tk-replies']) { // 200 是回复区域最大高度 // 36 是展开按钮高度 - this.hasExpand = this.$refs['tk-replies'].scrollHeight > 200 + 36 + this.hasExpand = parseFloat(getComputedStyle(this.$refs['tk-replies'], null).height.replace('px', '')) > 501 // 200 + 36 } }, + showContentExpandIfNeed () { + this.hasContentExpand = parseFloat(getComputedStyle(this.$refs['tk-content'], null).height.replace('px', '')) > 301 // window.innerHeight * 0.75 + this.$refs['tk-content'].querySelectorAll('img').forEach(img => { + img.onload = () => { + this.hasContentExpand = parseFloat(getComputedStyle(this.$refs['tk-content'], null).height.replace('px', '')) > 301 + } + }); + }, scrollToComment () { if (window.location.hash.indexOf(this.comment.id) !== -1) { - this.$refs['tk-comment'].scrollIntoView() + this.$refs['tk-comment'].scrollIntoView({ + "behavier": "smooth" + }) this.$emit('expand') } }, @@ -194,19 +233,32 @@ export default { this.liked = !this.liked this.likeLoading = false }, - onReply () { + onReply (id) { + this.pid = id this.$emit('reply', this.comment.id) }, onReplyReply (id) { // 楼中楼回复 this.pid = id - this.$emit('reply', this.comment.id) + if (id) { + // action 回复按钮 触发 + this.$emit('reply', this.comment.id) + } else { + // submit 取消按钮 触发 + this.$emit('reply', '') + } }, onCancel () { this.pid = '' this.$emit('reply', '') }, onLoad () { + if (this.comment.replies.length > 0) { + this.$refs["tk-replies"].lastElementChild.scrollIntoView({ + "behavier": "smooth", + "block": "center" + }) + } this.pid = '' this.$emit('reply', '') this.$emit('load') @@ -218,6 +270,12 @@ export default { onCollapse () { this.isExpanded = false }, + onContentExpand () { + this.isContentExpanded = true + }, + onContentCollapse () { + this.isContentExpanded = false + }, async checkAuth () { // 检查用户身份 if (this.$tcb) { @@ -262,6 +320,7 @@ export default { } }, mounted () { + this.$nextTick(this.showContentExpandIfNeed) this.$nextTick(this.showExpandIfNeed) this.$nextTick(this.scrollToComment) this.$nextTick(() => { @@ -389,12 +448,21 @@ export default { vertical-align: middle; } .tk-replies { - max-height: 200px; + max-height: 500px; overflow: hidden; position: relative; } .tk-replies-expand { max-height: none; + overflow: unset; +} +.tk-content { + max-height: 300px; + overflow: hidden; + position: relative; +} +.tk-content-expand { + max-height: none; } .tk-submit { margin-top: 1rem; diff --git a/src/client/view/components/TkComments.vue b/src/client/view/components/TkComments.vue index 1a478a2cc..fdb9a9317 100644 --- a/src/client/view/components/TkComments.vue +++ b/src/client/view/components/TkComments.vue @@ -24,7 +24,11 @@ :config="config" @reply="onReply" @load="initComments" /> -
{{ t('COMMENTS_EXPAND') }}
+
+
+ {{ t('COMMENTS_EXPAND') }} +
+
diff --git a/src/client/view/components/TkSubmit.vue b/src/client/view/components/TkSubmit.vue index 528f04dd1..430321ae9 100644 --- a/src/client/view/components/TkSubmit.vue +++ b/src/client/view/components/TkSubmit.vue @@ -1,5 +1,5 @@