改为下拉菜单

dashboard/src/components/general/ThemeSelect.tsx

@@ -1,35 +1,49 @@
-import { Switch } from "antd";
+import { Button, Dropdown, MenuProps, Switch } from "antd";
 import { useEffect, useState } from "react";
+import { useIntl } from "react-intl";
+import { ThemeOutlinedIcon } from "../../assets/icon";
 import { refresh } from "../../reducers/theme";
 import store from "../../store";
 
 const ThemeSelectWidget = () => {
-  const [isDark, setIsDark] = useState<boolean>();
+  const intl = useIntl();
+  const [theme, setTheme] = useState<string>();
+
+  const items: MenuProps["items"] = [
+    {
+      key: "ant",
+      label: "默认",
+    },
+    {
+      key: "dark",
+      label: "夜间",
+    },
+  ];
+
+  const onClick: MenuProps["onClick"] = ({ key }) => {
+    store.dispatch(refresh(key));
+    localStorage.setItem("theme", key);
+  };
+
   useEffect(() => {
     const currTheme = localStorage.getItem("theme");
-    if (currTheme === "dark") {
-      setIsDark(true);
-    } else {
-      setIsDark(false);
+    if (currTheme) {
+      setTheme(currTheme);
     }
   }, []);
 
   return (
-    <Switch
-      defaultChecked={isDark}
-      checkedChildren={"🌞"}
-      unCheckedChildren={"🌙"}
-      onChange={(checked: boolean) => {
-        console.log(`switch to ${checked}`);
-        if (checked) {
-          store.dispatch(refresh("dark"));
-          localStorage.setItem("theme", "dark");
-        } else {
-          store.dispatch(refresh("ant"));
-          localStorage.setItem("theme", "ant");
-        }
-      }}
-    />
+    <Dropdown menu={{ items, onClick }} placement="bottomRight">
+      <Button
+        ghost
+        style={{ border: "unset" }}
+        icon={<ThemeOutlinedIcon style={{ color: "white" }} />}
+      >
+        {intl.formatMessage({
+          id: `buttons.theme.${theme}`,
+        })}
+      </Button>
+    </Dropdown>
   );
 };