dev

frontendNew/src/pages/Dcalc/Character/Index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { LoaderCircle, RefreshCcw } from "lucide-vue-next";
 import { Button } from "@/components/ui/button";
@@ -7,7 +7,8 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import Tabs from "@/components/ui/tabs/Tabs.vue";
 import TabsList from "@/components/ui/tabs/TabsList.vue";
 import TabsTrigger from "@/components/ui/tabs/TabsTrigger.vue";
-import { useInfoStore } from "@/stores";
+import { useConfigStore, useInfoStore } from "@/stores";
+import ResultPanel from "@/pages/Dcalc/Character/Result/Index.vue";
 const props = defineProps<{
   alter: string;
 }>();
@@ -15,8 +16,10 @@ const props = defineProps<{
 const route = useRoute();
 const router = useRouter();
 const infoStore = useInfoStore();
+const configStore = useConfigStore();
 const loading = ref(false);
 const loadError = ref("");
+const isExecuting = ref(false);
 
 const tabs = [
   { label: "装备", key: "equipment" },
@@ -49,6 +52,7 @@ const switchTab = (tab: (typeof tabs)[number]["key"]) => {
 
 onMounted(() => {
   loadCharacter();
+  window.addEventListener("beforeunload", configStore.saveConfig);
 });
 
 watch(
@@ -57,6 +61,27 @@ watch(
     loadCharacter();
   },
 );
+
+const stopConfigWatch = watch(
+  () => JSON.stringify(configStore.config),
+  async () => {
+    if (isExecuting.value) return;
+    isExecuting.value = true;
+    try {
+      await configStore.result.execute();
+      configStore.saveConfig();
+    } finally {
+      isExecuting.value = false;
+    }
+  },
+  { deep: true },
+);
+
+onUnmounted(() => {
+  stopConfigWatch();
+  window.removeEventListener("beforeunload", configStore.saveConfig);
+  configStore.saveConfig();
+});
 </script>
 
 <template>
@@ -98,8 +123,13 @@ watch(
       </CardContent>
     </Card>
 
-    <div class="min-w-0 flex-1">
-      <router-view />
+    <div class="grid min-h-0 flex-1 grid-cols-1 gap-4 xl:grid-cols-[minmax(0,1fr)_22rem]">
+      <div class="min-w-0 overflow-hidden">
+        <router-view />
+      </div>
+      <aside class="min-h-0">
+        <ResultPanel />
+      </aside>
     </div>
   </section>
 </template>