Add GitBook theme structure with Traditional Chinese docs

2025-09-17 13:06:47 +08:00
parent 6f6671a024
commit 49dab41935
44 changed files with 2675 additions and 0 deletions
--- a/gitbook/components/ArticleLock.js
+++ b/gitbook/components/ArticleLock.js
@@ -0,0 +1,67 @@
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+import { useEffect, useRef } from 'react'
+
+/**
+ * 加密文章驗證元件
+ * @param {password, validPassword} props
+ * @param password 正確的密碼
+ * @param validPassword(bool) 回呼函式，驗證通過時傳回 true
+ * @returns
+ */
+export const ArticleLock = props => {
+  const { validPassword } = props
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const passwordInputRef = useRef(null)
+
+  /**
+   * 輸入並送出密碼
+   */
+  const submitPassword = () => {
+    const p = document.getElementById('password')
+    // 驗證失敗提示
+    if (!validPassword(p?.value)) {
+      const tips = document.getElementById('tips')
+      if (tips) {
+        tips.innerHTML = ''
+        tips.innerHTML = `<div class='text-red-500 animate__shakeX animate__animated'>${locale.COMMON.PASSWORD_ERROR}</div>`
+      }
+    }
+  }
+
+  useEffect(() => {
+    // 選取密碼輸入框並聚焦
+    passwordInputRef.current.focus()
+  }, [router])
+
+  return (
+    <div
+      id='container'
+      className='w-full flex justify-center items-center h-96 '>
+      <div className='text-center space-y-3'>
+        <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
+        <div className='flex mx-4'>
+          <input
+            id='password'
+            type='password'
+            onKeyDown={e => {
+              if (e.key === 'Enter') {
+                submitPassword()
+              }
+            }}
+            ref={passwordInputRef} // 綁定 ref 到 passwordInputRef 變數
+            className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
+          <div
+            onClick={submitPassword}
+            className='px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-green-500 hover:bg-green-400 text-white rounded-r duration-300'>
+            <i className={'duration-200 cursor-pointer fas fa-key'}>
+              &nbsp;{locale.COMMON.SUBMIT}
+            </i>
+          </div>
+        </div>
+        <div id='tips'></div>
+      </div>
+    </div>
+  )
+}