Skip to content

Commit f08c0e6

Browse files
Windsland52Windsland52
committed
fix: 延迟加载原始 json
1 parent af8d74f commit f08c0e6

7 files changed

Lines changed: 187 additions & 109 deletions

File tree

‎src/utils/settings.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const defaultSettings: AppSettings = {
4545
defaultCollapseRootActionList: false,
4646
defaultCollapseNestedRecognition: true,
4747
defaultCollapseNestedActionNodes: true,
48-
defaultExpandRawJson: true,
48+
defaultExpandRawJson: false,
4949
displayMode: 'tree',
5050

5151
flowchartEdgeStyle: 'orthogonal',

‎src/views/detail/components/ActionDetailCard.vue‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<script setup lang="ts">
2+
import { ref, watch } from 'vue'
23
import {
34
NCard, NDescriptions, NDescriptionsItem, NTag,
4-
NText, NCollapse, NCollapseItem, NButton, NIcon, NCode,
5+
NText, NCollapse,
56
} from 'naive-ui'
6-
import { CopyOutlined } from '@vicons/antd'
77
import type { NodeInfo } from '../../../types'
88
import { getRuntimeStatusTagType, getRuntimeStatusText } from '../../../utils/runtimeStatus'
99
import SafePreviewImage from '../../../components/SafePreviewImage.vue'
10+
import RawJsonCollapseItem from './RawJsonCollapseItem.vue'
1011
1112
const props = defineProps<{
1213
currentActionDetails: any
@@ -20,6 +21,14 @@ const props = defineProps<{
2021
formatJson: (obj: any) => string
2122
copyToClipboard: (text: string) => void
2223
}>()
24+
25+
const expandedNames = ref<string[]>([...props.rawJsonDefaultExpanded])
26+
watch(
27+
() => props.rawJsonDefaultExpanded,
28+
(names) => {
29+
expandedNames.value = [...names]
30+
},
31+
)
2332
</script>
2433

2534
<template>
@@ -67,26 +76,16 @@ const props = defineProps<{
6776
/>
6877
</div>
6978

70-
<n-collapse style="margin-top: 16px" :default-expanded-names="props.rawJsonDefaultExpanded">
71-
<n-collapse-item title="原始动作数据" name="action-json">
72-
<template #header-extra>
73-
<n-button
74-
size="tiny"
75-
@click.stop="props.copyToClipboard(props.formatJson(props.currentActionDetails))"
76-
>
77-
<template #icon>
78-
<n-icon><copy-outlined /></n-icon>
79-
</template>
80-
复制
81-
</n-button>
82-
</template>
83-
<n-code
84-
:code="props.formatJson(props.currentActionDetails)"
85-
language="json"
86-
:word-wrap="true"
87-
style="max-height: 400px; overflow: auto; max-width: 100%"
88-
/>
89-
</n-collapse-item>
79+
<n-collapse v-model:expanded-names="expandedNames" style="margin-top: 16px">
80+
<raw-json-collapse-item
81+
title="原始动作数据"
82+
name="action-json"
83+
:value="props.currentActionDetails"
84+
:expanded-names="expandedNames"
85+
:format-json="props.formatJson"
86+
:copy-to-clipboard="props.copyToClipboard"
87+
max-height="400px"
88+
/>
9089
</n-collapse>
9190
</n-card>
9291
</template>

‎src/views/detail/components/FlowFallbackCard.vue‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<script setup lang="ts">
2+
import { ref, watch } from 'vue'
23
import {
34
NCard, NDescriptions, NDescriptionsItem, NFlex, NTag,
4-
NCollapse, NCollapseItem, NButton, NIcon, NCode, NText,
5+
NCollapse, NText,
56
} from 'naive-ui'
6-
import { CopyOutlined } from '@vicons/antd'
77
import type { UnifiedFlowItem } from '../../../types'
88
import { getRuntimeStatusTagType, getRuntimeStatusText } from '../../../utils/runtimeStatus'
99
import SafePreviewImage from '../../../components/SafePreviewImage.vue'
10+
import RawJsonCollapseItem from './RawJsonCollapseItem.vue'
1011
1112
const props = defineProps<{
1213
selectedFlowItem: UnifiedFlowItem | null
@@ -22,6 +23,14 @@ const props = defineProps<{
2223
formatJson: (obj: any) => string
2324
copyToClipboard: (text: string) => void
2425
}>()
26+
27+
const expandedNames = ref<string[]>([...props.rawJsonDefaultExpanded])
28+
watch(
29+
() => props.rawJsonDefaultExpanded,
30+
(names) => {
31+
expandedNames.value = [...names]
32+
},
33+
)
2534
</script>
2635

2736
<template>
@@ -143,26 +152,15 @@ const props = defineProps<{
143152
</n-flex>
144153
</div>
145154

146-
<n-collapse style="margin-top: 16px" :default-expanded-names="props.rawJsonDefaultExpanded">
147-
<n-collapse-item title="原始事件数据" name="task-json">
148-
<template #header-extra>
149-
<n-button
150-
size="tiny"
151-
@click.stop="props.copyToClipboard(props.formatJson(props.selectedFlowItem))"
152-
>
153-
<template #icon>
154-
<n-icon><copy-outlined /></n-icon>
155-
</template>
156-
复制
157-
</n-button>
158-
</template>
159-
<n-code
160-
:code="props.formatJson(props.selectedFlowItem)"
161-
language="json"
162-
:word-wrap="true"
163-
style="max-height: 500px; overflow: auto; max-width: 100%"
164-
/>
165-
</n-collapse-item>
155+
<n-collapse v-model:expanded-names="expandedNames" style="margin-top: 16px">
156+
<raw-json-collapse-item
157+
title="原始事件数据"
158+
name="task-json"
159+
:value="props.selectedFlowItem"
160+
:expanded-names="expandedNames"
161+
:format-json="props.formatJson"
162+
:copy-to-clipboard="props.copyToClipboard"
163+
/>
166164
</n-collapse>
167165
</n-card>
168166
</template>

‎src/views/detail/components/FocusDetailCard.vue‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
<script setup lang="ts">
2+
import { ref, watch } from 'vue'
23
import {
3-
NButton, NCard, NCode, NCollapse, NCollapseItem, NDivider, NFlex,
4+
NButton, NCard, NCollapse, NDivider, NFlex,
45
NIcon, NTag, NText,
56
} from 'naive-ui'
67
import { CopyOutlined } from '@vicons/antd'
78
import type { FocusCardData } from '../composables/types'
89
import { renderFocusRichText } from '../composables/focusRichText'
10+
import RawJsonCollapseItem from './RawJsonCollapseItem.vue'
911
1012
const props = defineProps<{
1113
focusCard: FocusCardData
@@ -14,6 +16,14 @@ const props = defineProps<{
1416
copyToClipboard: (text: string) => void
1517
}>()
1618
19+
const expandedNames = ref<string[]>([...props.rawJsonDefaultExpanded])
20+
watch(
21+
() => props.rawJsonDefaultExpanded,
22+
(names) => {
23+
expandedNames.value = [...names]
24+
},
25+
)
26+
1727
const sourceLabelMap: Record<FocusCardData['sourceKind'], string> = {
1828
node: '节点',
1929
recognition: '识别',
@@ -91,26 +101,16 @@ const phaseTagTypeMap = {
91101
<n-divider v-if="index < props.focusCard.entries.length - 1" style="margin: 16px 0" />
92102
</div>
93103

94-
<n-collapse style="margin-top: 16px" :default-expanded-names="props.rawJsonDefaultExpanded">
95-
<n-collapse-item title="原始 focus 配置" name="focus-config">
96-
<template #header-extra>
97-
<n-button
98-
size="tiny"
99-
@click.stop="props.copyToClipboard(props.formatJson(props.focusCard.rawFocus))"
100-
>
101-
<template #icon>
102-
<n-icon><copy-outlined /></n-icon>
103-
</template>
104-
复制
105-
</n-button>
106-
</template>
107-
<n-code
108-
:code="props.formatJson(props.focusCard.rawFocus)"
109-
language="json"
110-
:word-wrap="true"
111-
style="max-height: 320px; overflow: auto; max-width: 100%"
112-
/>
113-
</n-collapse-item>
104+
<n-collapse v-model:expanded-names="expandedNames" style="margin-top: 16px">
105+
<raw-json-collapse-item
106+
title="原始 focus 配置"
107+
name="focus-config"
108+
:value="props.focusCard.rawFocus"
109+
:expanded-names="expandedNames"
110+
:format-json="props.formatJson"
111+
:copy-to-clipboard="props.copyToClipboard"
112+
max-height="320px"
113+
/>
114114
</n-collapse>
115115
</n-card>
116116
</template>

‎src/views/detail/components/NodeDetailCard.vue‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
<script setup lang="ts">
2+
import { computed, ref, watch } from 'vue'
23
import {
34
NCard, NDescriptions, NDescriptionsItem, NFlex, NTag, NIcon, NText,
45
NCollapse, NCollapseItem, NButton, NCode, NEmpty,
56
} from 'naive-ui'
67
import { CopyOutlined } from '@vicons/antd'
78
import type { NodeInfo } from '../../../types'
89
import SafePreviewImage from '../../../components/SafePreviewImage.vue'
10+
import RawJsonCollapseItem from './RawJsonCollapseItem.vue'
911
1012
const props = defineProps<{
1113
selectedNode: NodeInfo | null
@@ -28,6 +30,16 @@ const props = defineProps<{
2830
formatJson: (obj: any) => string
2931
copyToClipboard: (text: string) => void
3032
}>()
33+
34+
const expandedNames = ref<string[]>([...props.rawJsonDefaultExpanded])
35+
watch(
36+
() => props.rawJsonDefaultExpanded,
37+
(names) => {
38+
expandedNames.value = [...names]
39+
},
40+
)
41+
42+
const nodeDefinitionExpanded = computed(() => expandedNames.value.includes('node-definition'))
3143
</script>
3244

3345
<template>
@@ -88,7 +100,7 @@ const props = defineProps<{
88100
/>
89101
</div>
90102

91-
<n-collapse style="margin-top: 16px" :default-expanded-names="props.rawJsonDefaultExpanded">
103+
<n-collapse v-model:expanded-names="expandedNames" style="margin-top: 16px">
92104
<n-collapse-item v-if="props.isVscodeLaunchEmbed" title="节点定义" name="node-definition">
93105
<template #header-extra>
94106
<n-button
@@ -105,33 +117,22 @@ const props = defineProps<{
105117
<n-text v-if="props.bridgeNodeDefinitionLoading" depth="3" style="font-size: 13px">正在加载节点定义...</n-text>
106118
<n-text v-else-if="props.bridgeNodeDefinitionError" type="error" style="font-size: 13px">{{ props.bridgeNodeDefinitionError }}</n-text>
107119
<n-code
108-
v-else-if="props.formattedBridgeNodeDefinition"
120+
v-else-if="props.formattedBridgeNodeDefinition && nodeDefinitionExpanded"
109121
:code="props.formattedBridgeNodeDefinition"
110122
language="json"
111123
:word-wrap="true"
112124
style="max-height: 500px; overflow: auto; max-width: 100%"
113125
/>
114126
<n-empty v-else description="未获取到节点定义" />
115127
</n-collapse-item>
116-
<n-collapse-item title="原始节点数据" name="node-json">
117-
<template #header-extra>
118-
<n-button
119-
size="tiny"
120-
@click.stop="props.copyToClipboard(props.formatJson(props.selectedNode))"
121-
>
122-
<template #icon>
123-
<n-icon><copy-outlined /></n-icon>
124-
</template>
125-
复制
126-
</n-button>
127-
</template>
128-
<n-code
129-
:code="props.formatJson(props.selectedNode)"
130-
language="json"
131-
:word-wrap="true"
132-
style="max-height: 500px; overflow: auto; max-width: 100%"
133-
/>
134-
</n-collapse-item>
128+
<raw-json-collapse-item
129+
title="原始节点数据"
130+
name="node-json"
131+
:value="props.selectedNode"
132+
:expanded-names="expandedNames"
133+
:format-json="props.formatJson"
134+
:copy-to-clipboard="props.copyToClipboard"
135+
/>
135136
</n-collapse>
136137
</n-card>
137138
</template>

‎src/views/detail/components/RawJsonCollapseItem.vue‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<script setup lang="ts">
2+
import { computed, onMounted, ref, watch } from 'vue'
3+
import { NButton, NCode, NCollapseItem, NIcon, NText } from 'naive-ui'
4+
import { CopyOutlined } from '@vicons/antd'
5+
6+
const props = defineProps<{
7+
title: string
8+
name: string
9+
value: any
10+
expandedNames: string[]
11+
formatJson: (obj: any) => string
12+
copyToClipboard: (text: string) => void
13+
maxHeight?: string
14+
}>()
15+
16+
const code = ref('')
17+
const codeReady = ref(false)
18+
const mounted = ref(false)
19+
const isExpanded = computed(() => props.expandedNames.includes(props.name))
20+
21+
const ensureCode = () => {
22+
if (codeReady.value) return code.value
23+
code.value = props.formatJson(props.value)
24+
codeReady.value = true
25+
return code.value
26+
}
27+
28+
watch(
29+
() => props.value,
30+
() => {
31+
code.value = ''
32+
codeReady.value = false
33+
},
34+
)
35+
36+
watch(
37+
isExpanded,
38+
(expanded, previous) => {
39+
if (expanded && mounted.value && previous === false) {
40+
ensureCode()
41+
}
42+
},
43+
)
44+
45+
onMounted(() => {
46+
mounted.value = true
47+
})
48+
49+
const handleCopy = () => {
50+
props.copyToClipboard(ensureCode())
51+
}
52+
</script>
53+
54+
<template>
55+
<n-collapse-item :title="props.title" :name="props.name">
56+
<template #header-extra>
57+
<n-button
58+
size="tiny"
59+
@click.stop="handleCopy"
60+
>
61+
<template #icon>
62+
<n-icon><copy-outlined /></n-icon>
63+
</template>
64+
复制
65+
</n-button>
66+
</template>
67+
<template v-if="isExpanded">
68+
<n-code
69+
v-if="codeReady"
70+
:code="code"
71+
language="json"
72+
:word-wrap="true"
73+
:style="{ maxHeight: props.maxHeight ?? '500px', overflow: 'auto', maxWidth: '100%' }"
74+
/>
75+
<n-text v-else depth="3" style="font-size: 13px">
76+
原始 JSON 较大时高亮渲染可能比较慢。
77+
<n-button text type="primary" @click.stop="ensureCode">加载原始 JSON</n-button>
78+
</n-text>
79+
</template>
80+
</n-collapse-item>
81+
</template>

0 commit comments

Comments
 (0)