Merge pull request #1768 from RylanBot/patch

fix: 评论区插件补丁+优化

components/Tabs.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react';
 
 /**
  * Tabs切换标签
@@ -6,59 +6,37 @@ import React, { useState } from 'react'
  * @returns
  */
 const Tabs = ({ className, children }) => {
-  const [currentTab, setCurrentTab] = useState(0)
+  const [currentTab, setCurrentTab] = useState(0);
 
-  if (!children) {
-    return <></>
+  const validChildren = children.filter(c => c);
+
+  if (validChildren.length === 0) {
+    return <></>;
   }
 
-  children = children.filter(c => c && c !== '')
-
-  let count = 0
-  children.forEach(e => {
-    if (e) {
-      count++
-    }
-  })
-
-  if (count === 0) {
-    return <></>
-  }
-
-  if (count === 1) {
-    return <section className={'duration-200 ' + className}>
-            {children}
-        </section>
-  }
-
-  function tabClickHandle(i) {
-    setCurrentTab(i)
-  }
-
-  return <div className={'mb-5 duration-200 ' + className}>
-        <ul className='flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600 overflow-auto'>
-            {children.map((item, index) => {
-              return <li key={index}
-                    className={(currentTab === index ? 'font-black border-b-2 border-red-600 text-red-600 animate__animated animate__jello ' : 'font-extralight cursor-pointer') + ' text-sm font-sans '}
-                    onClick={() => {
-                      tabClickHandle(index)
-                    }}>
-                    {item?.key}
-                </li>
-            })}
-        </ul>
-        <div>
-            {children.map((item, index) => {
-              return <section key={index}
-                    data-aos="fade-up"
-                    data-aos-duration="300"
-                    data-aos-once="true"
-                    data-aos-anchor-placement="top-bottom">
-                    {currentTab === index && item}
-                </section>
-            })}
-        </div>
+  return (
+    <div className={`mb-5 duration-200 ${className}`}>
+      <ul className="flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600 overflow-auto">
+        {validChildren.map((item, index) => (
+          <li key={index}
+            className={`${currentTab === index ? 'font-black border-b-2 border-red-600 text-red-600 animate__animated animate__jello' : 'font-extralight cursor-pointer'} text-sm font-sans`}
+            onClick={() => setCurrentTab(index)}>
+            {item.key}
+          </li>
+        ))}
+      </ul>
+      {/* 标签切换的时候不销毁 DOM 元素，使用 CSS 样式进行隐藏 */}
+      <div>
+        {validChildren.map((item, index) => (
+          <section
+            key={index}
+            className={`${currentTab === index ? 'opacity-100 static h-auto' : 'opacity-0 absolute h-0'}`}>
+            {item}
+          </section>
+        ))}
+      </div>
     </div>
-}
+  );
+};
 
-export default Tabs
+export default Tabs;

components/Utterances.js

@@ -1,5 +1,6 @@
+import { useEffect, useState } from 'react'
 import { siteConfig } from '@/lib/config'
-import { useEffect } from 'react'
+import { useGlobal } from '@/lib/global'
 
 /**
  * 评论插件
@@ -9,28 +10,48 @@ import { useEffect } from 'react'
  * @constructor
  */
 const Utterances = ({ issueTerm, layout }) => {
+  const { isDarkMode } = useGlobal()
+
+  const [isLoading, setLoading] = useState(true);
+
   useEffect(() => {
-    const theme =
-      siteConfig('APPEARANCE') === 'auto'
-        ? 'preferred-color-scheme'
-        : siteConfig('APPEARANCE') === 'light'
-          ? 'github-light'
-          : 'github-dark'
-    const script = document.createElement('script')
-    const anchor = document.getElementById('comments')
-    script.setAttribute('src', 'https://utteranc.es/client.js')
-    script.setAttribute('crossorigin', 'anonymous')
-    script.setAttribute('async', true)
-    script.setAttribute('repo', siteConfig('COMMENT_UTTERRANCES_REPO'))
-    script.setAttribute('issue-term', 'title')
-    script.setAttribute('theme', theme)
-    anchor.appendChild(script)
+    const script = document.createElement('script');
+    const anchor = document.getElementById('comments');
+    script.onload = () => setLoading(false);
+    script.setAttribute('src', 'https://utteranc.es/client.js');
+    script.setAttribute('crossorigin', 'anonymous');
+    script.setAttribute('async', true);
+    script.setAttribute('repo', siteConfig('COMMENT_UTTERRANCES_REPO'));
+    script.setAttribute('issue-term', 'title');
+    // 初始主题
+    script.setAttribute('theme', isDarkMode ? 'github-dark' : 'github-light');
+    anchor.appendChild(script);
+
     return () => {
-      anchor.innerHTML = ''
+      // anchor.innerHTML = ''
+    };
+  }, []);
+
+  useEffect(() => {
+    // 直接设置 iframe 的类来改变主题，不重新加载脚本
+    const iframe = document.querySelector('iframe.utterances-frame');
+    if (iframe) {
+      iframe.contentWindow.postMessage({
+        type: 'set-theme',
+        theme: isDarkMode ? 'github-dark' : 'github-light'
+      }, 'https://utteranc.es');
     }
-  })
-  return <div id="comments" className='utterances' >
-  </div>
+  }, [isDarkMode]);
+
+  return (
+    <div id="comments" className='utterances'>
+      {isLoading && (
+        <div className="flex justify-center items-center m-8">
+          <div className="animate-spin rounded-full h-8 w-8 border-2 border-indigo-400 border-t-transparent"></div>
+        </div>
+      )}
+    </div>
+  );
 }
 
 export default Utterances

styles/globals.css

@@ -160,6 +160,11 @@ nav {
    @apply text-blue-700
 }
 
+/* twikoo 内置的 element-ui 加载样式 */
+.el-loading-spinner {
+  @apply flex justify-center items-center;
+}
+
 /* Webmention style */
 .webmention-block {
   background: rgba(0, 116, 222, .2);