fix tianli_gpt (#392)

- 更换前端为 qxchuckle/Post-Summary-AI 项目

_config.yml

@@ -448,14 +448,17 @@ plugins:
     scale: 1 # 0.1~1
   
   # AI 摘要
-  # https://github.com/zhheo/Post-Abstract-AI
+  # https://github.com/qxchuckle/Post-Summary-AI
   tianli_gpt: 
     enable: #true
-    js: https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.15.2/tianli_gpt.min.js
+    js: https://jsd.onmicrosoft.cn/gh/qxchuckle/Post-Summary-AI@6.0/chuckle-post-ai.min.js
     field: post # all, post, wiki
     api: 5Q5mpqRK5DkwT1X9Gi5e # tianli_gpt key
-    limit: 1000 # 设置提交的字数限制，默认为1000字，上限为5000，超过5000字符将被截断，不能为空
+    limit: 1000 # 设置提交的字数限制，默认为1000字，上限为5000，超过5000字符将被截断
     typingAnimate: true # 打字机动画 
+    direct: true # 是否直接显示摘要，否则显示 AI 简介
+    recommend: all # all, web # 文章推荐方式，all：匹配数据库内所有文章进行推荐，web：仅当前站内的文章，默认all
+    shuttle: true # 是否隐藏矩阵穿梭
 
   # Katex - The fastest math typesetting library for the web
   # https://katex.org/docs/autorender.html

layout/_plugins/tianli_gpt.ejs

@@ -1,9 +1,23 @@
 <% if (['all', page.layout].includes(theme.plugins.tianli_gpt.field)) { %>
-  <script>
+  <script src="<%- theme.plugins.tianli_gpt?.js %>"></script>
-    let tianliGPT_postSelector = 'article.content';
+  <script data-pjax defer>
-    let tianliGPT_key = `<%= theme.plugins.tianli_gpt?.api %>`;
+      new ChucklePostAI({
-    let tianliGPT_typingAnimate = `<%= theme.plugins.tianli_gpt?.typingAnimate %>`;
+        el: 'article.content',
-    let tianliGPT_wordLimit = `<%= theme.plugins.tianli_gpt?.limit %>`;
+        key: '<%= theme.plugins.tianli_gpt?.api %>',
+        rec_method: '<%= theme.plugins.tianli_gpt?.recommend || all %>',
+        summary_directly: `<%= theme.plugins.tianli_gpt?.direct %>`,
+        typewriter: `<%= theme.plugins.tianli_gpt?.typingAnimate %>`,
+        css: `/css/_plugins/tianli_gpt`,
+        summary_toggle: false,
+        total_length: `<%= theme.plugins.tianli_gpt?.limit %>`,
+        hide_shuttle: `<%= theme.plugins.tianli_gpt?.shuttle %>`,
+        interface: {
+          name: "AI摘要",
+          introduce: "我是文章辅助AI: QX-AI，点击下方的按钮，让我生成本文简介、推荐相关文章等。", // 自我介绍
+          version: "TianliGPT",
+          button: ["介绍自己", "推荐文章", "生成摘要", "矩阵穿梭"],
+        },
+      })
     </script>
-  <script defer src="<%- theme.plugins.tianli_gpt?.js %>"></script>
+  <% } %>
-<% } %>
+  

source/css/_plugins/tianli_gpt.styl

@@ -1,153 +1,210 @@
-.post-TianliGPT
+:root
-  --heo-none: #00000000
+  --ai-font-color var(--text-p2)
-  --heo-theme = $color-theme
+  --ai-post-bg var(--block)
-  --heo-main: $color-theme
+  --ai-content-bg var(--site-bg)
-  --heo-snackbar-time: 5s
+  --ai-content-border 1px solid var(--block-border)
-  --heo-theme-none: #4259ef01
+  --ai-border 1px solid var(--block-border)
-  --heo-background: var(--site-bg)
+  --ai-tag-bg var(--card)
-  --heo-hovertext: var(--text-code)
+  --ai-cursor var(--text-p1)
-  --heo-secondtext: var(--text)
+  --ai-btn-bg var(--card)
-  --heo-scrollbar: var(--block-border)
+  --ai-title-color var(--text-p1)
-  --heo-secondbg: var(--block)
+  --ai-btn-color var(--text-p2)
-  --heo-card-bg: var(--block)
+  --ai-speech-content #fff
-  --heo-card-bg-none: rgba(255, 255, 255, 0)
-  --heo-card-border: var(--block-border)
-  --heo-shadow-border: 0 8px 16px -4px #2c2d300c
-  --style-border: 1px solid var(--heo-card-border)
-  --style-border-always: 1px solid var(--heo-card-border)
 
-.post-TianliGPT
+#post-ai.post-ai
-  background: var(--block)
+  background var(--ai-post-bg)
-  border-radius: $border-card
+  border-radius $border-card
-  padding: 12px
+  padding 10px 12px 11px
-  line-height: 1.3
+  line-height 1.3
-  border: var(--style-border-always)
+  border var(--ai-border)
+  margin-top 10px
+  margin-bottom 6px
+  transition all 0.3s
+  -webkit-transition all 0.3s
+  -moz-transition all 0.3s
+  -ms-transition all 0.3s
+  -o-transition all 0.3s
 
-  @media screen and (max-width: 768px)
+#post-ai .ai-title
-    .post-TianliGPT
+  display flex
-      margin-top: 22px
+  color var(--ai-title-color)
+  border-radius 8px
+  align-items center
+  padding 0 6px
+  position relative
 
-.tianliGPT-title
+#post-ai .ai-title i
-  display: flex
+  font-weight 800
-  border-radius: 8px
-  align-items: center
-  padding: 0 12px
-  cursor: default
-  user-select: none
 
-.tianliGPT-title-text
+#post-ai .ai-title-text
-  font-weight: bold
+  font-weight bold
-  margin-left: 8px
+  margin-left 8px
-  line-height: 1
+  font-size 17px
 
-.tianliGPT-explanation
+#post-ai .ai-tag
-  margin-top: 12px
+  font-size 12px
-  padding: 8px 12px
+  background-color var(--ai-tag-bg)
-  background: var(--card)
+  color var(--ai-btn-color)
-  border-radius: $border-card
+  border-radius 4px
-  border: var(--style-border-always)
+  margin-left auto
-  font-size: 15px
+  line-height 1
-  line-height: 1.4
+  padding 4px 5px
-  display: flex
+  border var(--ai-border)
 
-.tianliGPT-suggestions
+#post-ai .ai-explanation
-  display: flex
+  margin-top 10px
-  flex-wrap: wrap
+  padding 8px 12px
+  background var(--ai-content-bg)
+  border-radius $border-card
+  border var(--ai-content-border)
+  font-size 15.5px
+  line-height 1.4
+  color var(--ai-font-color)
 
-.tianliGPT-suggestions .tianliGPT-suggestions-item
+#post-ai .ai-cursor
-  margin-top: 12px
+  display inline-block
-  padding: 8px 12px
+  border-radius 50%
-  background: var(--card)
+  background var(--ai-cursor)
-  border-radius: 8px 8px 8px 0
+  width: 12px
-  border: var(--style-border-always)
+  height: 12px
-  font-size: 15px
+  opacity 0.95
-  line-height: 1.4
+  margin-left 3px
-  display: flex
+  transition all 0.3s
-  width: fit-content
+  -webkit-transition all 0.3s
-  margin-right: 12px
+  -moz-transition all 0.3s
-  cursor: pointer
+  -ms-transition all 0.3s
-  transition: 0.3s
+  -o-transition all 0.3s
 
-.tianliGPT-suggestions .tianliGPT-suggestions-item:hover
+#post-ai .ai-btn-box
-  background: $color-theme
+  font-size 15.5px
-  color: var(--text)
+  width 100%
+  display flex
+  flex-direction row
+  flex-wrap wrap
 
-.blinking-cursor
+#post-ai .ai-btn-item
-  background-color: var(--text-p2)
+  padding 5px 10px
-  width: 10px
+  margin 10px 16px 0px 5px
-  height: 10px
+  width fit-content
-  display: inline-block
+  line-height 1
-  border-radius: 50%;
+  background var(--ai-btn-bg)
-  animation: blinking-cursor 0.5s infinite
+  border var(--ai-border)
-  -webkit-animation: blinking-cursor 0.5s infinite
+  color var(--ai-btn-color)
-  margin-left: 4px
+  border-radius 6px
+  user-select none
+  transition all 0.3s
+  -webkit-transition all 0.3s
+  -moz-transition all 0.3s
+  -ms-transition all 0.3s
+  -o-transition all 0.3s
+  cursor pointer
 
-@keyframes blinking-cursor
+#post-ai .ai-btn-item:hover
+  background var(--theme-link)
+
+#post-ai .ai-recommend
+  display flex
+  flex-direction row
+  flex-wrap wrap
+
+#post-ai .ai-recommend-item
+  width 50%
+  margin-top 2px
+
+#post-ai .ai-recommend-item a
+  border-bottom 2px solid var(--theme-link)
+  padding 0 .2em
+  color var(--theme-link)
+  font-weight 700
+  text-decoration none
+  transition all 0.3s
+  -webkit-transition all 0.3s
+  -moz-transition all 0.3s
+  -ms-transition all 0.3s
+  -o-transition all 0.3s
+
+#post-ai .ai-recommend-item a:hover
+  background-color var(--theme-link)
+  border-bottom 2px solid var(--theme-link)
+  color #fff
+  border-radius 5px
+
+@media screen and (max-width: 768px)
+  #post-ai .ai-btn-box
+    justify-content center
+
+#post-ai .ai-title>svg
+  width 21px
+  height 21px
+
+#post-ai .ai-title>svg path
+  fill var(--ai-font-color)
+
+#post-ai .ai-Toggle
+  font-size 12px
+  border var(--ai-border)
+  background var(--ai-btn-bg)
+  color var(--ai-btn-color)
+  padding 3px 4px
+  border-radius 4px
+  margin-left 6px
+  cursor pointer
+  -webkit-transition .3s
+  -moz-transition .3s
+  -o-transition .3s
+  -ms-transition .3s
+  transition .3s
+  font-weight bolder
+  pointer-events none
+  opacity 0
+
+#post-ai .ai-Toggle:hover
+  background $color-theme
+
+#post-ai .ai-speech-box
+  width 21px
+  height 21px
+  background var(--ai-font-color)
+  margin-left 7px
+  border-radius 50%
+  display flex
+  flex-direction row
+  flex-wrap wrap
+  align-content center
+  justify-content center
+  pointer-events none
+  opacity 0
+  -webkit-transition .3s
+  -moz-transition .3s
+  -o-transition .3s
+  -ms-transition .3s
+  transition .3s
+  cursor pointer
+
+#post-ai .ai-speech-content
+  width 8px
+  background var(--ai-speech-content)
+  height 8px
+  border-radius 50%
+  -webkit-transition .3s
+  -moz-transition .3s
+  -o-transition .3s
+  -ms-transition .3s
+  transition .3s
+
+#post-ai .ai-speech-box:hover .ai-speech-content
+  background $color-theme
+
+@keyframes ai_breathe
   0%
-    opacity: 1
+    transform scale(0.9)
-
+    -webkit-transform scale(0.9)
-  40%
+    -moz-transform scale(0.9)
-    opacity: 1
+    -ms-transform scale(0.9)
-
+    -o-transform scale(0.9)
   50%
-    opacity: 0
+    transform scale(1)
-
+    -webkit-transform scale(1)
-  90%
+    -moz-transform scale(1)
-    opacity: 0
+    -ms-transform scale(1)
-
+    -o-transform scale(1)
-  100%
-    opacity: 1
-    
-.tianliGPT-tag
-  font-size: 12px
-  background-color: var(--text-p2)
-  color: var(--card)
-  font-weight: bold
-  border-radius: 4px
-  margin-left: auto
-  line-height: 1
-  padding: 4px
-  display: flex
-  align-items: center
-  justify-content: center
-  cursor: pointer
-  transition: 0.3s
-
-.tianliGPT-tag:hover
-  background: $color-theme
-  color: var(--card)
-
-ins.adsbygoogle
-  margin: 16px 0
-  background: var(--card)
-  border-radius: 12px
-  overflow: hidden
-  border: var(--style-border-always)
-
-#tianliGPT-Toggle
-  font-size: 12px
-  background: var(--theme-link)
-  color: var(--card)
-  padding: 4px
-  border-radius: 4px
-  margin-left: 6px
-  transform: scale(0.8)
-  cursor: pointer
-  transition: 0.3s
-  font-weight: bold
-
-#tianliGPT-Toggle:hover
-  background: var(--block-hover)
-  color: var(--card)
-
-.tianliGPT-title-icon
-  width: 20px
-  height: 20px
-
-.tianliGPT-title-icon svg
-  width: 20px
-  height: 20px
-  fill: var(--text-p2)
-
-.tianliGPT-title-icon svg path
-  fill: var(--text-p2)