feat: common settings save

src/hooks/useLoading.ts

@@ -1,16 +1,19 @@
+import { Accessor } from "solid-js";
 import { createSignal } from "solid-js";
 
-const useLoading = (p: () => Promise<any>) => {
+const useLoading = (
+  p: () => Promise<any>
+): [Accessor<boolean>, () => Promise<any>] => {
   const [loading, setLoading] = createSignal(false);
-  return {
+  return [
     loading,
-    data: async () => {
+    async () => {
       setLoading(true);
       const data = await p();
       setLoading(false);
       return data;
     },
-  };
+  ];
 };
 
 export { useLoading };

src/pages/login/index.tsx

@@ -36,7 +36,7 @@ const Login = () => {
     localStorage.getItem("password") || ""
   );
   const [remember, setRemember] = createStorageSignal("remember-pwd", false);
-  const { loading, data } = useLoading(() =>
+  const [ loading, data ] = useLoading(() =>
     r.post("/auth/login", {
       username: username(),
       password: password(),

src/pages/manage/SideMenu.tsx

@@ -34,13 +34,13 @@ const SideMenuItemWithTo = (props: SideMenuItemProps) => {
       w="$full"
       alignItems="center"
       _hover={{
-        bgColor: isActive() ? "$info9" : "#9CA3AF40",
+        bgColor: isActive() ? "$info4" : "$neutral4",
       }}
       p="$2"
       rounded="$md"
       cursor="pointer"
-      bgColor={isActive() ? "$info9" : ""}
-      color={isActive() ? "#fff" : ""}
+      bgColor={isActive() ? "$info4" : ""}
+      color={isActive() ? "$info11" : ""}
     >
       <Show when={props.icon}>{<Icon mr="$2" as={props.icon} />}</Show>
       <Heading>{t(props.title)}</Heading>
@@ -62,7 +62,7 @@ const SideMenuItemWithChildren = (props: SideMenuItemProps) => {
         w="$full"
         alignItems="center"
         _hover={{
-          bgColor: "rgba(156,163,175,0.2)",
+          bgColor: "$neutral4",
         }}
         p="$2"
         rounded="$md"

src/pages/manage/settings/Common.tsx

@@ -5,29 +5,35 @@ import { r } from "~/utils/request";
 import { createStore } from "solid-js/store";
 import { Resp } from "~/types/resp";
 import { notify } from "~/utils/notify";
-import { Grid } from "@hope-ui/solid";
+import { Button, SimpleGrid } from "@hope-ui/solid";
 import { Index } from "solid-js";
 import { Item } from "./SettingItem";
+import { useT } from "~/hooks/useT";
+import { getTarget } from "~/utils/proxy";
 
 export interface CommonSettingsProps {
   group: Group;
 }
 const CommonSettings = (props: CommonSettingsProps) => {
-  const { loading, data } = useLoading(() =>
+  const t = useT();
+  const [settings_loading, settings_data] = useLoading(() =>
     r.get(`/admin/setting/list?group=${props.group}`)
   );
   const [settings, setSettings] = createStore<SettingItem[]>([]);
   (async () => {
-    const res: Resp<SettingItem[]> = await data();
+    const res: Resp<SettingItem[]> = await settings_data();
     if (res.code === 200) {
       setSettings(res.data);
     } else {
       notify.error(res.message);
     }
   })();
+  const [save_loading, save_data] = useLoading(() =>
+    r.post("/admin/setting/save", getTarget(settings))
+  );
   return (
-    <MaybeLoading loading={loading()}>
-      <Grid templateColumns="repeat(auto-fill, minmax(400px,1fr))" gap="$2">
+    <MaybeLoading loading={settings_loading()}>
+      <SimpleGrid gap="$2" columns={{ "@initial": 1, "@md": 2, "@2xl": 3 }}>
         <Index each={settings}>
           {(item, i) => (
             <Item
@@ -38,7 +44,22 @@ const CommonSettings = (props: CommonSettingsProps) => {
             />
           )}
         </Index>
-      </Grid>
+      </SimpleGrid>
+      <Button
+        mt="$2"
+        loading={save_loading()}
+        onClick={async () => {
+          console.log(settings);
+          const res: Resp<{}> = await save_data();
+          if (res.code === 200) {
+            notify.success(t("manage.settings.success"));
+          } else {
+            notify.error(res.message);
+          }
+        }}
+      >
+        {t("manage.settings.save")}
+      </Button>
     </MaybeLoading>
   );
 };

src/pages/manage/settings/SettingItem.tsx

@@ -30,7 +30,7 @@ export type ItemProps = SettingItem & {
 const Item = (props: ItemProps) => {
   const t = useT();
   return (
-    <FormControl>
+    <FormControl w="$full">
       <FormLabel for={props.key}>{t(`manage.settings.${props.key}`)}</FormLabel>
       <Switch fallback={<Center>{t("manage.settings.unknown_type")}</Center>}>
         <Match when={[Type.TypeString, Type.TypeNumber].includes(props.type)}>
@@ -49,7 +49,7 @@ const Item = (props: ItemProps) => {
             // checked={props.value() === "true"}
             onChange={(e: any) =>
               // props.onChange?.(props.value() === "true" ? "false" : "true")
-              props.onChange?.(e.currentTarget.checked)
+              props.onChange?.(e.currentTarget.checked ? "true" : "false")
             }
           />
         </Match>

src/utils/log.ts

@@ -0,0 +1,7 @@
+const log = (message?: any, ...optionalParams: any[]) => {
+  if (import.meta.env.DEV) {
+    console.log(message, ...optionalParams);
+  }
+};
+
+export { log };

src/utils/proxy.ts

@@ -0,0 +1,5 @@
+const getTarget = (proxy: any) => {
+  return JSON.parse(JSON.stringify(proxy));
+};
+
+export { getTarget };

src/utils/request.ts

@@ -1,6 +1,7 @@
 import axios from "axios";
 import { api } from "./base_url";
 import { bus } from "./bus";
+import { log } from "./log";
 
 const instance = axios.create({
   baseURL: api + "/api",
@@ -28,6 +29,7 @@ instance.interceptors.request.use(
 instance.interceptors.response.use(
   (response) => {
     const resp = response.data;
+    log(resp);
     if (resp.code === 401) {
       bus.emit(
         "to",