Feat: reset layout btn

frontend/src/components/AppHeader.vue

@@ -14,7 +14,9 @@ import {
   UserOutlined,
   MenuUnfoldOutlined,
   FormatPainterOutlined,
-  TranslationOutlined
+  TranslationOutlined,
+  PicLeftOutlined,
+  RedoOutlined
 } from "@ant-design/icons-vue";
 import { useScreen } from "@/hooks/useScreen";
 import CardPanel from "./CardPanel.vue";
@@ -27,7 +29,7 @@ import { useAppStateStore } from "@/stores/useAppStateStore";
 import { useLayoutConfigStore } from "../stores/useLayoutConfig";
 import { Modal } from "ant-design-vue";
 
-const { saveGlobalLayoutConfig } = useLayoutConfigStore();
+const { saveGlobalLayoutConfig, resetGlobalLayoutConfig } = useLayoutConfigStore();
 const { containerState, changeDesignMode } = useLayoutContainerStore();
 const { getRouteParamsUrl, toPage } = useAppRouters();
 const { setTheme } = useAppConfigStore();
@@ -121,9 +123,10 @@ const appMenus = computed(() => {
       icon: SaveOutlined,
       click: async () => {
         Modal.confirm({
-          title: "确定要保存布局吗？",
-          content:
-            "由于界面的高度可定制化，一旦保存布局后整个界面的语言将会被锁定，除非重置布局否则切换语言将无法很好的工作。如果您没有切换语言的需求，可以忽略这条建议。",
+          title: $t("确定要保存布局吗？"),
+          content: $t(
+            "由于界面的高度可定制化，一旦保存布局后整个界面的语言将会被锁定，除非重置布局否则切换语言将无法很好的工作。如果您没有切换语言的需求，可以忽略这条建议。"
+          ),
           async onOk() {
             changeDesignMode(false);
             await saveGlobalLayoutConfig();
@@ -132,9 +135,31 @@ const appMenus = computed(() => {
               message: t("TXT_CODE_47c35915"),
               description: t("TXT_CODE_e10c992a")
             });
-            setTimeout(() => {
-              window.location.reload();
-            }, 1000);
+            setTimeout(() => window.location.reload(), 400);
+          },
+          onCancel() {
+            setTimeout(() => window.location.reload(), 400);
+          }
+        });
+      },
+      conditions: containerState.isDesignMode,
+      onlyPC: true
+    },
+    {
+      title: t("重置卡片布局"),
+      icon: RedoOutlined,
+      click: async () => {
+        Modal.confirm({
+          title: $t("确定要重置布局吗？"),
+          content: $t("这将会导致所有网页恢复到默认状态，请谨慎操作。重置后页面可以自动切换语言。"),
+          async onOk() {
+            await resetGlobalLayoutConfig();
+            notification.success({
+              placement: "top",
+              message: t("重置成功"),
+              description: t("TXT_CODE_e10c992a")
+            });
+            setTimeout(() => window.location.reload(), 400);
           },
           onCancel() {
             window.location.reload();

frontend/src/services/apis/layout.ts

@@ -17,3 +17,8 @@ export const getLayoutConfig = useDefineApi<any, string>({
   url: "/api/overview/layout",
   method: "GET"
 });
+
+export const resetLayoutConfig = useDefineApi<any, void>({
+  url: "/api/overview/layout",
+  method: "DELETE"
+});

frontend/src/stores/useLayoutConfig.ts

@@ -3,7 +3,7 @@ import type { LayoutWithRouter, LayoutCard } from "@/types";
 import { useRouterParams } from "@/hooks/useRouterParams";
 import { getAllLayoutConfig } from "@/config/originLayoutConfig";
 import { createGlobalState } from "@vueuse/core";
-import { setLayoutConfig } from "@/services/apis/layout";
+import { resetLayoutConfig, setLayoutConfig } from "@/services/apis/layout";
 
 export const useLayoutConfigStore = createGlobalState(() => {
   const { currentRoutePath } = useRouterParams();
@@ -66,7 +66,12 @@ export const useLayoutConfigStore = createGlobalState(() => {
     });
   };
 
+  const resetGlobalLayoutConfig = async () => {
+    return await resetLayoutConfig().execute();
+  };
+
   return {
+    resetGlobalLayoutConfig,
     getPageLayoutConfig,
     deleteLayoutItem,
     insertLayoutItem,

frontend/src/widgets/Settings.vue

@@ -20,18 +20,17 @@ const formData = ref<Settings>();
 
 const submit = async () => {
   if (formData.value) {
-    const res = await submitExecute({
-      data: {
-        ...formData.value
-      }
-    });
-    if (res.value == "OK") {
-      return message.success(t("TXT_CODE_a7907771"));
+    try {
+      await submitExecute({
+        data: {
+          ...formData.value
+        }
+      });
+      message.success(t("TXT_CODE_a7907771"));
+      setTimeout(() => window.location.reload(), 600);
+    } catch (error: any) {
+      message.error(error);
     }
-    message.error(res.value);
-    setTimeout(() => {
-      window.location.reload();
-    }, 1000);
   }
 };
 

panel/src/app/common/system_storage.ts

@@ -23,6 +23,11 @@ class StorageSubsystem {
     return fs.readFileSync(targetPath, { encoding: "utf-8" });
   }
 
+  public deleteFile(name: string) {
+    const targetPath = path.normalize(path.join(StorageSubsystem.DATA_PATH, name));
+    fs.removeSync(targetPath);
+  }
+
   public fileExists(name: string) {
     const targetPath = path.normalize(path.join(StorageSubsystem.DATA_PATH, name));
     return fs.existsSync(targetPath);

panel/src/app/routers/private/settings_router.ts

@@ -6,7 +6,11 @@ import { saveSystemConfig, systemConfig } from "../../setting";
 import { logger } from "../../service/log";
 import { i18next } from "../../i18n";
 import userSystem from "../../service/system_user";
-import { getFrontendLayoutConfig, setFrontendLayoutConfig } from "../../service/frontend_layout";
+import {
+  getFrontendLayoutConfig,
+  resetFrontendLayoutConfig,
+  setFrontendLayoutConfig
+} from "../../service/frontend_layout";
 
 const router = new Router({ prefix: "/overview" });
 
@@ -77,4 +81,9 @@ router.post("/layout", permission({ level: 10 }), async (ctx) => {
   ctx.body = true;
 });
 
+router.delete("/layout", permission({ level: 10 }), async (ctx) => {
+  resetFrontendLayoutConfig();
+  ctx.body = true;
+});
+
 export default router;

panel/src/app/service/frontend_layout.ts

@@ -1,8 +1,6 @@
 import { v4 } from "uuid";
 import { IPageLayoutConfig } from "../../../../common/global";
 import { $t as t } from "../i18n";
-import fs from "fs-extra";
-import path from "path";
 import storage from "../common/system_storage";
 
 const LAYOUT_CONFIG_NAME = "layout.json";
@@ -27,6 +25,10 @@ export function setFrontendLayoutConfig(config: IPageLayoutConfig[]) {
   storage.writeFile(LAYOUT_CONFIG_NAME, JSON.stringify(config, null, 2));
 }
 
+export function resetFrontendLayoutConfig() {
+  storage.deleteFile(LAYOUT_CONFIG_NAME);
+}
+
 export enum LayoutCardHeight {
   MINI = "100px",
   SMALL = "200px",