split json tab

This commit is contained in:
pa
2026-03-09 00:25:16 +09:00
parent ec88fb9fbe
commit 5f2de3d633
5 changed files with 80 additions and 90 deletions

View File

@@ -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'));

View File

@@ -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>

View File

@@ -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';

View File

@@ -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';

View File

@@ -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';