feat: support history stack

frontend/src/App.vue

@@ -65,7 +65,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue';
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
 import {
   NConfigProvider,
   NGlobalStyle,
@@ -75,6 +75,7 @@ import {
 import { darkTheme as dark, lightTheme as light } from 'naive-ui';
 import { zhCN, dateZhCN } from 'naive-ui';
 import { GlobalThemeOverrides } from 'naive-ui';
+import { useDictQueryStore } from './store/dict';
 
 let isDark = ref(false);
 let theme = reactive(light);
@@ -114,4 +115,59 @@ const themeOverrides: GlobalThemeOverrides = {
     // iconColorError: string;
   }
 };
+
+
+
+
+function listenStoreChange(store: any) {
+  const unscribe = store.$onAction(
+    ({
+      name, // action 名称
+      store, // store 实例，类似 `someStore`
+      args, // 传递给 action 的参数数组
+      after, // 在 action 返回或解决后的钩子
+      onError, // action 抛出或拒绝的钩子
+    }) => {
+      let startTime = Date.now();
+      console.debug(`[store-action] {${name}} triggered started, args: {${args}}`);
+
+      // 这将在 action 成功并完全运行后触发。
+      // 它等待着任何返回的 promise
+      after((result) => {
+        console.debug(
+          `[store-action] {${name}} triggered success, after ${
+            Date.now() - startTime
+          }ms, with result ${result}.`
+        );
+      });
+
+      // 如果 action 抛出或返回一个拒绝的 promise，这将触发
+      onError((error) => {
+        console.warn(
+          `[store-action] {${name}} trigger faild, after ${
+            Date.now() - startTime
+          }ms.\nerror: ${error}.`
+        );
+      });
+    }
+  );
+  return unscribe;
+}
+
+let unscribeDictQueryStore = null;
+const dictQueryStore = useDictQueryStore();
+onMounted(()=>{
+  unscribeDictQueryStore = listenStoreChange(dictQueryStore);
+
+})
+
+onUnmounted(() =>{
+  if (unscribeDictQueryStore) {
+    unscribeDictQueryStore();
+    unscribeDictQueryStore = null;
+  }
+})
+
+
+
 </script>