dev

frontendNew/src/pages/Dcalc/Character/Forge/index.vue

@@ -5,11 +5,13 @@ import { useConfigStore, useInfoStore } from "@/stores";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import ResultPanel from "@/pages/Dcalc/Character/Result/Index.vue";
 
 const configStore = useConfigStore();
 const infoStore = useInfoStore();
 
 const moduleMode = ref<"equip" | "oath" | "avatar" | "global">("equip");
+const forgeViewTab = ref<"config" | "result">("result");
 const notice = ref("");
 const noticeType = ref<"error" | "info">("info");
 
@@ -337,7 +339,7 @@ const resetAllForge = () => {
 </script>
 
 <template>
-  <div class="space-y-4">
+  <div class="flex h-full min-h-0 flex-col gap-4 overflow-hidden">
     <Card class="border-border/60 bg-gradient-to-b from-background to-muted/30">
       <CardHeader>
         <CardTitle class="flex flex-wrap items-center justify-between gap-2">
@@ -351,6 +353,30 @@ const resetAllForge = () => {
       </CardHeader>
       <CardContent class="space-y-4">
         <div class="inline-flex flex-wrap rounded-md border p-1">
+          <Button
+            size="sm"
+            :variant="forgeViewTab === 'result' ? 'default' : 'ghost'"
+            @click="forgeViewTab = 'result'"
+          >
+            结果面板
+          </Button>
+          <Button
+            size="sm"
+            :variant="forgeViewTab === 'config' ? 'default' : 'ghost'"
+            @click="forgeViewTab = 'config'"
+          >
+            配置编辑
+          </Button>
+          <Button
+            size="sm"
+            :variant="forgeViewTab === 'result' ? 'default' : 'ghost'"
+            @click="forgeViewTab = 'result'"
+          >
+            计算结果
+          </Button>
+        </div>
+
+        <div v-if="forgeViewTab === 'config'" class="inline-flex flex-wrap rounded-md border p-1">
           <Button
             size="sm"
             :variant="moduleMode === 'equip' ? 'default' : 'ghost'"
@@ -402,7 +428,17 @@ const resetAllForge = () => {
       </CardContent>
     </Card>
 
-    <div v-if="moduleMode === 'equip'" class="grid grid-cols-1 gap-4">
+    <div class="min-h-0 flex-1 overflow-y-auto pr-1">
+      <div v-if="forgeViewTab === 'result'" class="h-full min-h-[20rem] overflow-hidden">
+        <div class="h-full overflow-hidden">
+          <ResultPanel />
+        </div>
+      </div>
+
+      <div
+        v-if="forgeViewTab === 'config' && moduleMode === 'equip'"
+        class="grid grid-cols-1 gap-4"
+      >
       <Card class="border-border/60 bg-card/90">
         <CardHeader>
           <CardTitle class="flex items-center gap-2">
@@ -451,7 +487,7 @@ const resetAllForge = () => {
       </Card>
     </div>
 
-    <div v-if="moduleMode === 'oath'" class="grid grid-cols-1 gap-4">
+    <div v-if="forgeViewTab === 'config' && moduleMode === 'oath'" class="grid grid-cols-1 gap-4">
       <Card class="border-border/60 bg-card/90">
         <CardHeader>
           <CardTitle class="flex items-center gap-2">
@@ -484,7 +520,10 @@ const resetAllForge = () => {
       </Card>
     </div>
 
-    <div v-if="moduleMode === 'avatar'" class="grid grid-cols-1 gap-4 xl:grid-cols-2">
+    <div
+      v-if="forgeViewTab === 'config' && moduleMode === 'avatar'"
+      class="grid grid-cols-1 gap-4 xl:grid-cols-2"
+    >
       <Card class="border-border/60 bg-card/90">
         <CardHeader>
           <CardTitle class="flex items-center gap-2">
@@ -691,7 +730,10 @@ const resetAllForge = () => {
       </Card>
     </div>
 
-    <div v-if="moduleMode === 'global'" class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+    <div
+      v-if="forgeViewTab === 'config' && moduleMode === 'global'"
+      class="grid grid-cols-1 gap-4 lg:grid-cols-2"
+    >
       <Card class="border-border/60 bg-card/90">
         <CardHeader>
           <CardTitle class="flex items-center gap-2">
@@ -727,5 +769,6 @@ const resetAllForge = () => {
         </CardContent>
       </Card>
     </div>
+    </div>
   </div>
 </template>