From 04d380966cf8a6fb55e54f80f0df544678791768 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Tue, 13 Jun 2023 17:22:28 +0800
Subject: [PATCH] password auto focus

---
 components/NotionPage.js                  |  8 +++++++-
 themes/example/components/ArticleLock.js  |  9 ++++++++-
 themes/fukasawa/components/ArticleLock.js |  8 ++++++++
 themes/hexo/components/ArticleLock.js     |  7 +++++++
 themes/matery/components/ArticleLock.js   |  9 ++++++++-
 themes/medium/components/ArticleLock.js   |  8 ++++++++
 themes/next/components/ArticleLock.js     |  8 ++++++++
 themes/nobelium/components/ArticleLock.js | 10 +++++++++-
 themes/simple/components/ArticleLock.js   |  9 ++++++++-
 9 files changed, 71 insertions(+), 5 deletions(-)

diff --git a/components/NotionPage.js b/components/NotionPage.js
index 63d57861..862af760 100644
--- a/components/NotionPage.js
+++ b/components/NotionPage.js
@@ -2,12 +2,18 @@ import { NotionRenderer } from 'react-notion-x'
 import dynamic from 'next/dynamic'
 // import mediumZoom from '@fisch0920/medium-zoom'
 import React, { useEffect } from 'react'
-import { Code } from 'react-notion-x/build/third-party/code'
+// import { Code } from 'react-notion-x/build/third-party/code'
 import TweetEmbed from 'react-tweet-embed'
 
 import 'katex/dist/katex.min.css'
 import { mapImgUrl } from '@/lib/notion/mapImage'
 
+const Code = dynamic(() =>
+  import('react-notion-x/build/third-party/code').then(async (m) => {
+    return m.Code
+  }), { ssr: false }
+)
+
 const Equation = dynamic(() =>
   import('@/components/Equation').then(async (m) => {
     // 化学方程式
diff --git a/themes/example/components/ArticleLock.js b/themes/example/components/ArticleLock.js
index de3569b0..4957946d 100644
--- a/themes/example/components/ArticleLock.js
+++ b/themes/example/components/ArticleLock.js
@@ -1,4 +1,5 @@
 import { useGlobal } from '@/lib/global'
+import { useEffect, useRef } from 'react'
 
 /**
  * 加密文章校验组件
@@ -21,6 +22,11 @@ export const ArticleLock = props => {
       }
     }
   }
+  const passwordInputRef = useRef(null)
+  useEffect(() => {
+    // 选中密码输入框并将其聚焦
+    passwordInputRef.current.focus()
+  }, [])
 
   return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'>
         <div className='text-center space-y-3'>
@@ -32,7 +38,8 @@ export const ArticleLock = props => {
                         submitPassword()
                       }
                     }}
-                    className='outline-none w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'
+                    ref={passwordInputRef} // 绑定ref到passwordInputRef变量
+                    className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'
                 ></input>
                 <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
                     <i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i>
diff --git a/themes/fukasawa/components/ArticleLock.js b/themes/fukasawa/components/ArticleLock.js
index 45f50dfe..293c308d 100644
--- a/themes/fukasawa/components/ArticleLock.js
+++ b/themes/fukasawa/components/ArticleLock.js
@@ -1,4 +1,5 @@
 import { useGlobal } from '@/lib/global'
+import { useEffect, useRef } from 'react'
 
 /**
  * 加密文章校验组件
@@ -22,6 +23,12 @@ export const ArticleLock = props => {
     }
   }
 
+  const passwordInputRef = useRef(null)
+  useEffect(() => {
+    // 选中密码输入框并将其聚焦
+    passwordInputRef.current.focus()
+  }, [])
+
   return (<div id='container' className="flex justify-center">
     <div className="shadow md:hover:shadow-2xl overflow-x-auto max-w-5xl  w-screen md:w-full  py-10 px-5 lg:pt-24 md:px-24 min-h-screen dark:border-gray-700 bg-white dark:bg-gray-800 duration-200 subpixel-antialiased">
       <div className="w-full flex justify-center items-center h-96 font-sans">
@@ -35,6 +42,7 @@ export const ArticleLock = props => {
                   submitPassword()
                 }
               }}
+              ref={passwordInputRef} // 绑定ref到passwordInputRef变量
               className="outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg  font-light leading-10 bg-gray-100 dark:bg-gray-500"
             ></input>
             <div
diff --git a/themes/hexo/components/ArticleLock.js b/themes/hexo/components/ArticleLock.js
index 62a32b1b..7f1da728 100644
--- a/themes/hexo/components/ArticleLock.js
+++ b/themes/hexo/components/ArticleLock.js
@@ -1,4 +1,5 @@
 import { useGlobal } from '@/lib/global'
+import { useEffect, useRef } from 'react'
 
 /**
  * 加密文章校验组件
@@ -20,6 +21,11 @@ export const ArticleLock = props => {
       }
     }
   }
+  const passwordInputRef = useRef(null)
+  useEffect(() => {
+    // 选中密码输入框并将其聚焦
+    passwordInputRef.current.focus()
+  }, [])
 
   return <div id='container' className='w-full flex justify-center items-center h-96 '>
     <div className='text-center space-y-3'>
@@ -31,6 +37,7 @@ export const ArticleLock = props => {
                 submitPassword()
               }
             }}
+            ref={passwordInputRef} // 绑定ref到passwordInputRef变量
             className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg  font-light leading-10 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-indigo-500 hover:bg-indigo-400 text-white rounded-r duration-300" >
diff --git a/themes/matery/components/ArticleLock.js b/themes/matery/components/ArticleLock.js
index 6834eb72..88de8ba6 100644
--- a/themes/matery/components/ArticleLock.js
+++ b/themes/matery/components/ArticleLock.js
@@ -1,4 +1,5 @@
 import { useGlobal } from '@/lib/global'
+import { useEffect, useRef } from 'react'
 
 /**
  * 加密文章校验组件
@@ -21,6 +22,12 @@ export const ArticleLock = props => {
     }
   }
 
+  const passwordInputRef = useRef(null)
+  useEffect(() => {
+    // 选中密码输入框并将其聚焦
+    passwordInputRef.current.focus()
+  }, [])
+
   return <div id='container' className='w-full flex justify-center items-center h-96 '>
         <div className='text-center space-y-3 dark:text-gray-300 text-black'>
             <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
@@ -31,8 +38,8 @@ export const ArticleLock = props => {
                         submitPassword()
                       }
                     }}
+                    ref={passwordInputRef} // 绑定ref到passwordInputRef变量
                     className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg font-light leading-10 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-indigo-500 hover:bg-indigo-400 text-white rounded-r duration-300" >
                     <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
diff --git a/themes/medium/components/ArticleLock.js b/themes/medium/components/ArticleLock.js
index 2798f97a..4ba5a3b9 100644
--- a/themes/medium/components/ArticleLock.js
+++ b/themes/medium/components/ArticleLock.js
@@ -1,4 +1,5 @@
 import { useGlobal } from '@/lib/global'
+import { useEffect, useRef } from 'react'
 
 /**
  * 加密文章校验组件
@@ -22,6 +23,12 @@ export const ArticleLock = props => {
     }
   }
 
+  const passwordInputRef = useRef(null)
+  useEffect(() => {
+    // 选中密码输入框并将其聚焦
+    passwordInputRef.current.focus()
+  }, [])
+
   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>
@@ -32,6 +39,7 @@ export const ArticleLock = props => {
                 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" >
diff --git a/themes/next/components/ArticleLock.js b/themes/next/components/ArticleLock.js
index ec6aae36..d49f1e50 100644
--- a/themes/next/components/ArticleLock.js
+++ b/themes/next/components/ArticleLock.js
@@ -1,4 +1,5 @@
 import { useGlobal } from '@/lib/global'
+import { useEffect, useRef } from 'react'
 
 /**
  * 加密文章校验组件
@@ -22,6 +23,12 @@ export const ArticleLock = props => {
     }
   }
 
+  const passwordInputRef = useRef(null)
+  useEffect(() => {
+    // 选中密码输入框并将其聚焦
+    passwordInputRef.current.focus()
+  }, [])
+
   return (
     <div id='container' className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full  py-10 px-5 lg:pt-24 md:px-24 min-h-screen dark:border-gray-700 bg-white dark:bg-gray-800 duration-200">
       <div className="w-full flex justify-center items-center h-96 font-sans">
@@ -35,6 +42,7 @@ export const ArticleLock = props => {
                   submitPassword()
                 }
               }}
+              ref={passwordInputRef} // 绑定ref到passwordInputRef变量
               className="outline-none w-full text-sm pl-5 transition focus:shadow-lg font-light leading-10 bg-gray-100 dark:bg-gray-500"
             ></input>
             <div
diff --git a/themes/nobelium/components/ArticleLock.js b/themes/nobelium/components/ArticleLock.js
index 9968262b..8bf57e52 100644
--- a/themes/nobelium/components/ArticleLock.js
+++ b/themes/nobelium/components/ArticleLock.js
@@ -1,4 +1,5 @@
 import { useGlobal } from '@/lib/global'
+import { useEffect, useRef } from 'react'
 
 /**
  * 加密文章校验组件
@@ -22,6 +23,12 @@ export const ArticleLock = props => {
     }
   }
 
+  const passwordInputRef = useRef(null)
+  useEffect(() => {
+    // 选中密码输入框并将其聚焦
+    passwordInputRef.current.focus()
+  }, [])
+
   return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'>
         <div className='text-center space-y-3'>
             <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
@@ -32,7 +39,8 @@ export const ArticleLock = props => {
                         submitPassword()
                       }
                     }}
-                    className='outline-none w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'
+                    ref={passwordInputRef} // 绑定ref到passwordInputRef变量
+                    className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'
                 ></input>
                 <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
                     <i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i>
diff --git a/themes/simple/components/ArticleLock.js b/themes/simple/components/ArticleLock.js
index de3569b0..4957946d 100644
--- a/themes/simple/components/ArticleLock.js
+++ b/themes/simple/components/ArticleLock.js
@@ -1,4 +1,5 @@
 import { useGlobal } from '@/lib/global'
+import { useEffect, useRef } from 'react'
 
 /**
  * 加密文章校验组件
@@ -21,6 +22,11 @@ export const ArticleLock = props => {
       }
     }
   }
+  const passwordInputRef = useRef(null)
+  useEffect(() => {
+    // 选中密码输入框并将其聚焦
+    passwordInputRef.current.focus()
+  }, [])
 
   return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'>
         <div className='text-center space-y-3'>
@@ -32,7 +38,8 @@ export const ArticleLock = props => {
                         submitPassword()
                       }
                     }}
-                    className='outline-none w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'
+                    ref={passwordInputRef} // 绑定ref到passwordInputRef变量
+                    className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'
                 ></input>
                 <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
                     <i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i>