feat(directory): add changelogs page

directory/src/state/config.js

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { atom, useAtom } from 'jotai';
+
+const fetcher = (...args) => fetch(...args).then(res => res.json())
+const configAtom = atom([]);
+const operatorsAtom = atom([]);
+const versionAtom = atom({});
+
+export function useConfig() {
+  const [config, setConfig] = useAtom(configAtom);
+  const [version, setVersion] = useAtom(versionAtom);
+  const [operators, setOperators] = useAtom(operatorsAtom);
+
+
+  useEffect(() => {
+    fetcher('/_assets/directory.json').then(data => {
+      setConfig(data);
+      let operatorsList = []
+      data.operators.forEach((item) => {
+        operatorsList = [...operatorsList, ...item]
+      })
+      setOperators(operatorsList)
+    })
+    fetcher('/_assets/version.json').then(data => {
+      setVersion(data);
+    })
+  }, []);
+
+  return { config, version, operators };
+}

directory/src/state/header.js

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { atom, useAtom } from 'jotai';
+import { useLanguage, useI18n } from "@/state/language"
+
+const keyAtom = atom('');
+const titleAtom = atom('');
+const tabsAtom = atom([]);
+const currentTabAtom = atom(null);
+const appbarExtraAreaAtom = atom([]);
+const headerIconAtom = atom(null);
+
+export function useHeader() {
+  const [key, setTitle] = useAtom(keyAtom);
+  const [title, setRealTitle] = useAtom(titleAtom);
+  const [tabs, setTabs] = useAtom(tabsAtom);
+  const [currentTab, setCurrentTab] = useAtom(currentTabAtom);
+  const [appbarExtraArea, setAppbarExtraArea] = useAtom(appbarExtraAreaAtom);
+  const [headerIcon, setHeaderIcon] = useAtom(headerIconAtom);
+  const { i18n } = useI18n()
+  const { language } = useLanguage()
+
+  useEffect(() => {
+    const newTitle = i18n(key)
+    document.title = `${newTitle} - ${import.meta.env.VITE_APP_TITLE}`;
+    setRealTitle(newTitle)
+  }, [key, language])
+
+  return {
+    title, setTitle,
+    tabs, setTabs,
+    currentTab, setCurrentTab,
+    appbarExtraArea, setAppbarExtraArea,
+    headerIcon, setHeaderIcon
+  }
+}

directory/src/state/language.js

@@ -0,0 +1,35 @@
+import { atom, useAtom, useAtomValue } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
+import i18nObject from '@/i18n'
+
+const language = i18nObject.available.includes(navigator.language) ? navigator.language : "en-US"
+
+const textDefaultLang = "en-US"
+const languageAtom = atomWithStorage('language', language)
+const alternateLangAtom = atom((get) => {
+  const language = get(languageAtom)
+  return language.startsWith("en") ? "zh-CN" : language
+})
+
+export function useI18n() {
+  const language = useAtomValue(languageAtom)
+  return {
+    i18n: (key, preferredLanguage = language) => {
+      if (i18nObject.key[key]) {
+        return i18nObject.key[key][preferredLanguage]
+      }
+      return key
+    },
+    i18nValues: i18nObject,
+  }
+}
+
+export function useLanguage() {
+  const [language, setLanguage] = useAtom(languageAtom)
+  const alternateLang = useAtomValue(alternateLangAtom)
+  return {
+    textDefaultLang,
+    language, setLanguage,
+    alternateLang,
+  }
+}