Merge pull request #23 from xSilver-Yang/main

FloraCore · Sep 11, 2023 · 9d25b9b · 9d25b9b
2 parents fb5d42c + 3b4078d
commit 9d25b9b
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 23 deletions.
diff --git a/components/autoicon.tsx b/components/autoicon.tsx
@@ -0,0 +1,11 @@
+export default function AutoIcon(props: any) {
+    return (
+        <svg viewBox="0 0 12.483 13.566" version="1.1" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g id="A" transform="translate(0.000000, -0.000000)" fill="currentColor" fill-rule="nonzero">
+                    <path d="M5.339,2.84217094e-14 L0,13.566 L1.672,13.566 L3.116,9.766 L9.348,9.766 L10.792,13.566 L12.483,13.566 L7.144,2.84217094e-14 L5.339,2.84217094e-14 Z M3.61,8.455 L6.213,1.672 L6.289,1.672 L8.854,8.455 L3.61,8.455 Z" id="Shape"></path>
+                </g>
+            </g>
+        </svg>
+    )
+}
diff --git a/components/header.tsx b/components/header.tsx
@@ -5,6 +5,7 @@ import MoonIcon from "./moon";
 import { useTranslation } from 'react-i18next';
 import Logo from "./logo";
 import { useRouter } from "next/router";
+import AutoIcon from './autoicon';
 
 const LOCALSTORAGE_TRISTATE_KEY = "APP_THEME_TRISTATE";
 
@@ -72,13 +73,13 @@ export default function HeaderComponent({ setDark, dark, colorBgContainer }: Hea
         () => <MoonIcon />, // Light
         () => <div style={{ position: "relative" }}>
             <MoonIcon />
-            <div style={{
+            <AutoIcon style={{
                 position: "absolute",
-                right: 0,
-                top: 2,
-                fontSize: 7
-            }}>A
-            </div>
+                right: -2,
+                top: 4,
+                width: 7,
+                height: 7
+            }} />
         </div>   // Auto
     ];
 
@@ -95,6 +96,11 @@ export default function HeaderComponent({ setDark, dark, colorBgContainer }: Hea
         setDark(triStateMapping[triState]);
     }, [triState, triState === 2 && colorPreferenceDark]);
 
+    const onChangeLanguage = (lang: string) => {
+        i18n.changeLanguage(lang);
+        localStorage.setItem("APP_SELECTED_LANGUAGE", lang);
+    };
+
     const items: MenuProps['items'] = [
         {
             label: t('header.chat-record'),
@@ -128,7 +134,7 @@ export default function HeaderComponent({ setDark, dark, colorBgContainer }: Hea
                             {t("i18n.chinese")}
                         </span>
                     ),
-                    onClick: () => i18n.changeLanguage('zh')
+                    onClick: () => onChangeLanguage("zh")
                 },
                 {
                     key: 'en',
@@ -137,7 +143,7 @@ export default function HeaderComponent({ setDark, dark, colorBgContainer }: Hea
                             {t("i18n.english")}
                         </span>
                     ),
-                    onClick: () => i18n.changeLanguage('en')
+                    onClick: () => onChangeLanguage("en")
                 },
             ],
         },

diff --git a/pages/[cid].tsx b/pages/[cid].tsx
@@ -5,7 +5,7 @@ import {message} from "antd";
 import ErrorComponent from "../components/error";
 import {ChatData} from "../data/chatData";
 import ServerTableComponent from "../components/table";
-import i18n from "../data/i18n";
+import { useTranslation } from "react-i18next";
 
 enum Status {
     Init,
@@ -18,7 +18,7 @@ export default function IndexPage() {
     const router = useRouter()
     const {cid} = router.query;
     const messageKey = "loading";
-    const {t} = i18n;
+    const {t} = useTranslation();
 
     const [data, setData] = useState<ChatData>();
     const [state, setLoadingState] = useState(Status.Init);

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -9,7 +9,7 @@ import i18n from '../data/i18n';
 function Entry({ Component, pageProps }: AppProps) {
     const [dark, setDark] = useState(false);
     useEffect(() => {
-        i18n.changeLanguage(navigator.language);
+        i18n.changeLanguage(localStorage.getItem("APP_SELECTED_LANGUAGE") || "zh");
         setTimeout(
             (window as any)["_HANDLER_STARTUP_FINISHED_"],
             100 // TODO: A workaround.

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -49,18 +49,16 @@ const Placeholder = () => {
             stroke: black;
           }
           
-          @media (prefers-color-scheme: dark) {
-            .App-Loading-Circular-Path {
+          .__STARTUP_DARK_ENFORCEMENT .App-Loading-Circular-Path {
                 stroke: white;
-            }
+          }
 
-            #App-Loader {
+          .__STARTUP_DARK_ENFORCEMENT#App-Loader {
                 background: black;
-            }
+          }
 
-            #App-Loader-Content {
+          .__STARTUP_DARK_ENFORCEMENT #App-Loader-Content {
                 color: white;
-            }
           }
 
           @keyframes rotate {
@@ -87,18 +85,37 @@ const Placeholder = () => {
         ` }} />
         <div id="App-Loader">
             <div id="App-Loader-Content">
-                <Logo color="currentColor" style={{ transform: "scale(5)" }} />
+                <Logo color="currentColor" style={{ transform: "scale(5)", marginBottom: 100 }} />
 
-                <div className="App-Loading">
+                <div className="App-Loading" style={{ transform: "scale(.65)" }}>
                     <svg className="App-Loading-Circular">
                         <circle className="App-Loading-Circular-Path" cx="50" cy="50" r="20" fill="none" strokeWidth="3" strokeMiterlimit="10" />
                     </svg>
                 </div>
             </div>
         </div>
         <script dangerouslySetInnerHTML={{
-            __html: `window._HANDLER_STARTUP_FINISHED_=()=>window["App-Loader"].style.display='none';`
-        }} /></>
+            __html: `window._HANDLER_STARTUP_FINISHED_ = function() {
+                window["App-Loader"].remove();
+                window._HANDLER_STARTUP_FINISHED_ = function() {};
+            };
+            
+            !function () {
+                var triStateType = +(localStorage.getItem("APP_THEME_TRISTATE") || 2);
+
+                var isDark;
+                if (triStateType === 2) {
+                    isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+                } else if (triStateType === 1) isDark = false;
+                else isDark = true;
+
+                if (isDark) {
+                    window["App-Loader"].classList.add("__STARTUP_DARK_ENFORCEMENT");
+                }
+            }();
+            `
+        }} />
+    </>
 };
 
 export default class CustomDocument extends Document {
@@ -110,7 +127,7 @@ export default class CustomDocument extends Document {
             originalRenderPage({
                 enhanceApp: App => props =>
                 (
-                    <StyleProvider cache={cache}>
+                    <StyleProvider cache={cache} hashPriority="high">
                         <App {...props} />
                     </StyleProvider>
                 ),