fix: ui experience

twikoojs · May 20, 2024 · 3c2d3d8 · 3c2d3d8
1 parent 4e5aa11
commit 3c2d3d8
Show file tree

Hide file tree

Showing 14 changed files with 49 additions and 61 deletions.
diff --git a/demo/demo.html b/demo/demo.html
@@ -56,7 +56,7 @@
           <div class="field">
             <label class="label">环境 ID | Environment ID: <code>envId</code></label>
             <div class="control">
-              <input class="input" id="envId" type="text" placeholder="e.g imaegoo-16fe3d" value="http://localhost:8080">
+              <input class="input" id="envId" type="text" placeholder="e.g imaegoo-16fe3d" value="https://twikoojsorg.imaegoo.com">
             </div>
           </div>
           <div class="field">

diff --git a/docs/.vitepress/theme/Twikoo.vue b/docs/.vitepress/theme/Twikoo.vue
@@ -73,6 +73,6 @@ onMounted(() => {
 
     <!-- Twikoo -->
     <div id="twikoo"></div>
-    <component :is="'script'" src="https://cdn.jsdelivr.net/npm/[email protected].34/dist/twikoo.min.js" ref="twikooJs"></component>
+    <component :is="'script'" src="https://cdn.jsdelivr.net/npm/[email protected].35/dist/twikoo.min.js" ref="twikooJs"></component>
   </div>
 </template>
diff --git a/docs/backend.md b/docs/backend.md
@@ -43,7 +43,7 @@ exports.main = require('twikoo-func').main
 8. 创建完成后，点击“twikoo"进入云函数详情页，进入“函数代码”标签，点击“文件 - 新建文件”，输入 `package.json`，回车
 9. 复制以下代码、粘贴到代码框中，点击“保存并安装依赖”
 ``` json
-{ "dependencies": { "twikoo-func": "1.6.34" } }
+{ "dependencies": { "twikoo-func": "1.6.35" } }
 ```
 
 ## 腾讯云命令行部署

diff --git a/docs/frontend.md b/docs/frontend.md
@@ -89,7 +89,7 @@ twikoo:
 
 ``` html
 <div id="tcomment"></div>
-<script src="https://cdn.staticfile.net/twikoo/1.6.34/twikoo.all.min.js"></script>
+<script src="https://cdn.staticfile.net/twikoo/1.6.35/twikoo.all.min.js"></script>
 <script>
 twikoo.init({
   envId: '您的环境id', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
@@ -107,10 +107,10 @@ twikoo.init({
 
 如果遇到默认 CDN 加载速度缓慢，可更换其他 CDN 镜像。以下为可供选择的公共 CDN，其中一些 CDN 可能需要数天时间同步最新版本：
 
-* `https://cdn.staticfile.net/twikoo/1.6.34/twikoo.all.min.js`
-* `https://lib.baomitu.com/twikoo/1.6.34/twikoo.all.min.js`
-* `https://cdn.bootcdn.net/ajax/libs/twikoo/1.6.34/twikoo.all.min.js`
-* `https://cdn.jsdelivr.net/npm/[email protected].34/dist/twikoo.all.min.js`
+* `https://cdn.staticfile.net/twikoo/1.6.35/twikoo.all.min.js`
+* `https://lib.baomitu.com/twikoo/1.6.35/twikoo.all.min.js`
+* `https://cdn.bootcdn.net/ajax/libs/twikoo/1.6.35/twikoo.all.min.js`
+* `https://cdn.jsdelivr.net/npm/[email protected].35/dist/twikoo.all.min.js`
 
 ## 开启管理面板（腾讯云环境）
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "twikoo",
-  "version": "1.6.34",
+  "version": "1.6.35",
   "description": "A simple comment system.",
   "keywords": [
     "twikoojs",

diff --git a/src/client/version.js b/src/client/version.js
@@ -1,3 +1,3 @@
-const version = '1.6.34'
+const version = '1.6.35'
 
 export { version }
diff --git a/src/client/view/components/TkComment.vue b/src/client/view/components/TkComment.vue
@@ -36,14 +36,10 @@
         <span v-html="comment.comment" ref="comment" @click="popupLightbox"></span>
       </div>
       <div class="tk-expand-wrap" v-if="showContentExpand">
-        <div class="tk-expand" @click="onContentExpand">
-            {{ t('COMMENT_EXPAND') }}
-        </div>
+        <div class="tk-expand" @click="onContentExpand">{{ t('COMMENT_EXPAND') }}</div>
       </div>
       <div class="tk-collapse-wrap" v-if="showContentCollapse">
-        <div class="tk-expand _collapse" @click="onContentCollapse">
-            {{ t('COMMENT_COLLAPSE') }}
-        </div>
+        <div class="tk-expand _collapse" @click="onContentCollapse">{{ t('COMMENT_COLLAPSE') }}</div>
       </div>
       <div class="tk-extras" v-if="comment.ipRegion || comment.os || comment.browser">
         <div class="tk-extra" v-if="comment.ipRegion">
@@ -61,11 +57,11 @@
       </div>
       <!-- 回复框 -->
       <tk-submit v-if="replying && !pid"
-        :reply-id="replyId ? replyId : comment.id"
-        :pid="comment.id"
-        :config="config"
-        @load="onLoad"
-        @cancel="onCancel" />
+          :reply-id="replyId ? replyId : comment.id"
+          :pid="comment.id"
+          :config="config"
+          @load="onLoad"
+          @cancel="onCancel" />
       <!-- 回复列表 -->
       <div class="tk-replies" :class="{ 'tk-replies-expand': isExpanded || !showExpand || replying }" ref="tk-replies">
         <tk-comment v-for="reply in comment.replies"
@@ -79,14 +75,10 @@
             @reply="onReplyReply" />
       </div>
       <div class="tk-expand-wrap" v-if="showExpand && !replying">
-        <div class="tk-expand" @click="onExpand">
-            {{ t('COMMENT_EXPAND') }}
-        </div>
+        <div class="tk-expand" @click="onExpand">{{ t('COMMENT_EXPAND') }}</div>
       </div>
       <div class="tk-collapse-wrap" v-if="showCollapse && !replying">
-        <div class="tk-expand _collapse" @click="onCollapse">
-            {{ t('COMMENT_COLLAPSE') }}
-        </div>
+        <div class="tk-expand _collapse" @click="onCollapse">{{ t('COMMENT_COLLAPSE') }}</div>
       </div>
     </div>
   </div>
@@ -202,21 +194,21 @@ export default {
       if (this.comment.replies && this.comment.replies.length > 0 && this.$refs['tk-replies']) {
         // 200 是回复区域最大高度
         // 36 是展开按钮高度
-        this.hasExpand = parseFloat(getComputedStyle(this.$refs['tk-replies'], null).height.replace('px', '')) > 501  // 200 + 36
+        this.hasExpand = this.$refs['tk-replies'].scrollHeight > 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
-        }
-      });
+      this.hasContentExpand = this.$refs['tk-content'].scrollHeight > 500
+    },
+    showContentExpandIfNeedAfterImagesLoaded () {
+      this.$refs['tk-content'].querySelectorAll('img').forEach((imgEl) => {
+        imgEl.onload = this.showContentExpandIfNeed
+      })
     },
     scrollToComment () {
       if (window.location.hash.indexOf(this.comment.id) !== -1) {
         this.$refs['tk-comment'].scrollIntoView({
-          "behavier": "smooth"
+          behavier: 'smooth'
         })
         this.$emit('expand')
       }
@@ -254,9 +246,9 @@ export default {
     },
     onLoad () {
       if (this.comment.replies.length > 0) {
-        this.$refs["tk-replies"].lastElementChild.scrollIntoView({
-          "behavier": "smooth",
-          "block": "center"
+        this.$refs['tk-replies'].lastElementChild.scrollIntoView({
+          behavier: 'smooth',
+          block: 'center'
         })
       }
       this.pid = ''
@@ -321,6 +313,7 @@ export default {
   },
   mounted () {
     this.$nextTick(this.showContentExpandIfNeed)
+    this.$nextTick(this.showContentExpandIfNeedAfterImagesLoaded)
     this.$nextTick(this.showExpandIfNeed)
     this.$nextTick(this.scrollToComment)
     this.$nextTick(() => {
@@ -437,8 +430,12 @@ export default {
 }
 .tk-content {
   margin-top: 0.5rem;
-  overflow: auto;
+  overflow: hidden;
   max-height: 500px;
+  position: relative;
+}
+.tk-content-expand {
+  max-height: none;
 }
 .tk-replies .tk-content {
   font-size: .9em;
@@ -448,22 +445,14 @@ export default {
   vertical-align: middle;
 }
 .tk-replies {
-  max-height: 500px;
+  max-height: 200px;
   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
@@ -25,9 +25,7 @@
         @reply="onReply"
         @load="initComments" />
       <div class="tk-expand-wrap" v-if="showExpand && !loading">
-        <div class="tk-expand" @click="onExpand" v-loading="loadingMore">
-            {{ t('COMMENTS_EXPAND') }}
-        </div>
+        <div class="tk-expand" @click="onExpand" v-loading="loadingMore">{{ t('COMMENTS_EXPAND') }}</div>
       </div>
     </div>
   </div>

diff --git a/src/client/view/components/TkSubmit.vue b/src/client/view/components/TkSubmit.vue
@@ -373,9 +373,9 @@ export default {
   },
   mounted () {
     if (this.pid) {
-      this.$refs["tk-submit"].scrollIntoView({
-        "behavier": "smooth",
-        "block": "center"
+      this.$refs['tk-submit'].scrollIntoView({
+        behavier: 'smooth',
+        block: 'center'
       })
     }
     this.initDraft()
@@ -463,6 +463,7 @@ export default {
   position: absolute;
   right: 0;
   bottom: -75px;
+  z-index: 1;
 }
 .tk-turnstile {
   display: flex;

diff --git a/src/server/function/twikoo/package.json b/src/server/function/twikoo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "twikoo-func",
-  "version": "1.6.34",
+  "version": "1.6.35",
   "description": "A simple comment system.",
   "author": "imaegoo <[email protected]> (https://github.com/imaegoo)",
   "license": "MIT",

diff --git a/src/server/netlify/package.json b/src/server/netlify/package.json
@@ -1,6 +1,6 @@
 {
   "name": "twikoo-netlify",
-  "version": "1.6.34",
+  "version": "1.6.35",
   "description": "A simple comment system.",
   "author": "imaegoo <[email protected]> (https://github.com/imaegoo)",
   "license": "MIT",

diff --git a/src/server/pkg/package.json b/src/server/pkg/package.json
@@ -28,7 +28,7 @@
   "dependencies": {
     "commander": "^11.1.0",
     "dotenv": "^16.4.1",
-    "tkserver": "1.6.34"
+    "tkserver": "1.6.35"
   },
   "devDependencies": {
     "patch-package": "^8.0.0",

diff --git a/src/server/self-hosted/package.json b/src/server/self-hosted/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tkserver",
-  "version": "1.6.34",
+  "version": "1.6.35",
   "description": "A simple comment system.",
   "keywords": [
     "twikoo",
@@ -31,7 +31,7 @@
     "get-user-ip": "^1.0.1",
     "lokijs": "^1.5.12",
     "mongodb": "^6.3.0",
-    "twikoo-func": "1.6.34",
+    "twikoo-func": "1.6.35",
     "uuid": "^8.3.2"
   }
 }
diff --git a/src/server/vercel/package.json b/src/server/vercel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "twikoo-vercel",
-  "version": "1.6.34",
+  "version": "1.6.35",
   "description": "A simple comment system.",
   "author": "imaegoo <[email protected]> (https://github.com/imaegoo)",
   "license": "MIT",
@@ -13,7 +13,7 @@
   "dependencies": {
     "get-user-ip": "^1.0.1",
     "mongodb": "^6.3.0",
-    "twikoo-func": "1.6.34",
+    "twikoo-func": "1.6.35",
     "uuid": "^8.3.2"
   }
 }