From 5f2de3d6339bc2e9c90af94789ffa1fe60793bfc Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Mon, 9 Mar 2026 00:25:16 +0900
Subject: [PATCH] split json tab

---
 .../dialogs/AvatarDialog/AvatarDialog.vue     | 35 +++----------
 src/components/dialogs/DialogJsonTab.vue      | 50 +++++++++++++++++++
 .../dialogs/GroupDialog/GroupDialog.vue       | 27 +++-------
 .../dialogs/UserDialog/UserDialog.vue         | 23 +++------
 .../dialogs/WorldDialog/WorldDialog.vue       | 35 +++----------
 5 files changed, 80 insertions(+), 90 deletions(-)
 create mode 100644 src/components/dialogs/DialogJsonTab.vue

diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index 87764512..1c1c7e1d 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -507,33 +507,13 @@
                     </div>
                 </template>
                 <template #JSON>
-                    <Button
-                        class="rounded-full mr-2"
-                        size="icon-sm"
-                        variant="ghost"
-                        @click="refreshAvatarDialogTreeData()">
-                        <RefreshCw />
-                    </Button>
-                    <Button
-                        class="rounded-full"
-                        size="icon-sm"
-                        variant="ghost"
-                        @click="downloadAndSaveJson(avatarDialog.id, avatarDialog.ref)">
-                        <Download />
-                    </Button>
-                    <vue-json-pretty
-                        :key="treeData?.id"
-                        :data="treeData"
-                        :deep="2"
-                        :theme="isDarkMode ? 'dark' : 'light'"
-                        show-icon />
-                    <br />
-                    <vue-json-pretty
-                        v-if="Object.keys(avatarDialog.fileAnalysis).length"
-                        :data="avatarDialog.fileAnalysis"
-                        :deep="2"
-                        :theme="isDarkMode ? 'dark' : 'light'"
-                        show-icon />
+                    <DialogJsonTab
+                        :tree-data="treeData"
+                        :tree-data-key="treeData?.id"
+                        :dialog-id="avatarDialog.id"
+                        :dialog-ref="avatarDialog.ref"
+                        :file-analysis="avatarDialog.fileAnalysis"
+                        @refresh="refreshAvatarDialogTreeData()" />
                 </template>
             </TabsUnderline>
             <template v-if="avatarDialog.visible">
@@ -630,6 +610,7 @@
     import { database } from '../../../service/database';
     import { formatJsonVars } from '../../../shared/utils/base/ui';
 
+    import DialogJsonTab from '../DialogJsonTab.vue';
     import ImageCropDialog from '../ImageCropDialog.vue';
 
     const SetAvatarStylesDialog = defineAsyncComponent(() => import('./SetAvatarStylesDialog.vue'));
diff --git a/src/components/dialogs/DialogJsonTab.vue b/src/components/dialogs/DialogJsonTab.vue
new file mode 100644
index 00000000..8a946ec7
--- /dev/null
+++ b/src/components/dialogs/DialogJsonTab.vue
@@ -0,0 +1,50 @@
+<script setup>
+    import { Download, RefreshCw } from 'lucide-vue-next';
+    import { Button } from '@/components/ui/button';
+    import { storeToRefs } from 'pinia';
+
+    import VueJsonPretty from 'vue-json-pretty';
+
+    import { downloadAndSaveJson } from '../../shared/utils';
+    import { useAppearanceSettingsStore } from '../../stores';
+
+    defineProps({
+        treeData: {
+            type: Object,
+            default: () => ({})
+        },
+        treeDataKey: {
+            type: [String, Number, null],
+            default: null
+        },
+        dialogId: {
+            type: String,
+            required: true
+        },
+        dialogRef: {
+            type: Object,
+            required: true
+        },
+        fileAnalysis: {
+            type: Object,
+            default: null
+        }
+    });
+
+    const emit = defineEmits(['refresh']);
+    const { isDarkMode } = storeToRefs(useAppearanceSettingsStore());
+</script>
+
+<template>
+    <Button class="rounded-full mr-2" size="icon-sm" variant="ghost" @click="emit('refresh')">
+        <RefreshCw />
+    </Button>
+    <Button class="rounded-full" size="icon-sm" variant="ghost" @click="downloadAndSaveJson(dialogId, dialogRef)">
+        <Download />
+    </Button>
+    <vue-json-pretty :key="treeDataKey" :data="treeData" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon />
+    <template v-if="fileAnalysis && Object.keys(fileAnalysis).length">
+        <br />
+        <vue-json-pretty :data="fileAnalysis" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon />
+    </template>
+</template>
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index 5afc73c9..f6457f51 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -1143,26 +1143,12 @@
                     </TabsUnderline>
                 </template>
                 <template #JSON>
-                    <Button
-                        class="rounded-full mr-2"
-                        size="icon-sm"
-                        variant="ghost"
-                        @click="refreshGroupDialogTreeData()">
-                        <RefreshCw />
-                    </Button>
-                    <Button
-                        class="rounded-full"
-                        size="icon-sm"
-                        variant="ghost"
-                        @click="downloadAndSaveJson(groupDialog.id, groupDialog.ref)">
-                        <Download />
-                    </Button>
-                    <vue-json-pretty
-                        :key="treeData?.group?.id"
-                        :data="treeData"
-                        :deep="2"
-                        :theme="isDarkMode ? 'dark' : 'light'"
-                        show-icon />
+                    <DialogJsonTab
+                        :tree-data="treeData"
+                        :tree-data-key="treeData?.group?.id"
+                        :dialog-id="groupDialog.id"
+                        :dialog-ref="groupDialog.ref"
+                        @refresh="refreshGroupDialogTreeData()" />
                 </template>
             </TabsUnderline>
         </div>
@@ -1245,6 +1231,7 @@
     import { formatJsonVars } from '../../../shared/utils/base/ui';
     import { groupRequest } from '../../../api';
 
+    import DialogJsonTab from '../DialogJsonTab.vue';
     import GroupCalendarEventCard from '../../../views/Tools/components/GroupCalendarEventCard.vue';
     import GroupPostEditDialog from './GroupPostEditDialog.vue';
     import InstanceActionBar from '../../InstanceActionBar.vue';
diff --git a/src/components/dialogs/UserDialog/UserDialog.vue b/src/components/dialogs/UserDialog/UserDialog.vue
index 6f77ee61..f100599b 100644
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -1307,22 +1307,12 @@
             </template>
 
             <template #JSON>
-                <Button class="rounded-full mr-2" size="icon-sm" variant="ghost" @click="refreshUserDialogTreeData()">
-                    <RefreshCw />
-                </Button>
-                <Button
-                    class="rounded-full"
-                    size="icon-sm"
-                    variant="ghost"
-                    @click="downloadAndSaveJson(userDialog.id, userDialog.ref)">
-                    <Download />
-                </Button>
-                <vue-json-pretty
-                    :key="treeData?.id"
-                    :data="treeData"
-                    :deep="2"
-                    :theme="isDarkMode ? 'dark' : 'light'"
-                    show-icon />
+                <DialogJsonTab
+                    :tree-data="treeData"
+                    :tree-data-key="treeData?.id"
+                    :dialog-id="userDialog.id"
+                    :dialog-ref="userDialog.ref"
+                    @refresh="refreshUserDialogTreeData()" />
             </template>
         </TabsUnderline>
         <SendInviteDialog
@@ -1441,6 +1431,7 @@
     import { formatJsonVars } from '../../../shared/utils/base/ui';
     import { processBulk } from '../../../service/request';
 
+    import DialogJsonTab from '../DialogJsonTab.vue';
     import InstanceActionBar from '../../InstanceActionBar.vue';
     import SendInviteDialog from '../InviteDialog/SendInviteDialog.vue';
     import UserSummaryHeader from './UserSummaryHeader.vue';
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index 5e9ac614..9eaf5503 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -694,33 +694,13 @@
                     </div>
                 </template>
                 <template #JSON>
-                    <Button
-                        class="rounded-full mr-2"
-                        size="icon-sm"
-                        variant="ghost"
-                        @click="refreshWorldDialogTreeData()">
-                        <RefreshCw />
-                    </Button>
-                    <Button
-                        class="rounded-full"
-                        size="icon-sm"
-                        variant="ghost"
-                        @click="downloadAndSaveJson(worldDialog.id, worldDialog.ref)">
-                        <Download />
-                    </Button>
-                    <vue-json-pretty
-                        :key="treeData?.id"
-                        :data="treeData"
-                        :deep="2"
-                        :theme="isDarkMode ? 'dark' : 'light'"
-                        show-icon />
-                    <br />
-                    <vue-json-pretty
-                        v-if="Object.keys(worldDialog.fileAnalysis).length"
-                        :data="worldDialog.fileAnalysis"
-                        :deep="2"
-                        :theme="isDarkMode ? 'dark' : 'light'"
-                        show-icon />
+                    <DialogJsonTab
+                        :tree-data="treeData"
+                        :tree-data-key="treeData?.id"
+                        :dialog-id="worldDialog.id"
+                        :dialog-ref="worldDialog.ref"
+                        :file-analysis="worldDialog.fileAnalysis"
+                        @refresh="refreshWorldDialogTreeData()" />
                 </template>
             </TabsUnderline>
         </div>
@@ -837,6 +817,7 @@
     import { database } from '../../../service/database';
     import { formatJsonVars } from '../../../shared/utils/base/ui';
 
+    import DialogJsonTab from '../DialogJsonTab.vue';
     import ImageCropDialog from '../ImageCropDialog.vue';
     import InstanceActionBar from '../../InstanceActionBar.vue';