fix: 修复单条数据不显示表格的问题,优化弹窗UI布局
- 修复数组解构错误导致单条数据时不显示表格 - 优化DetailsDialog弹窗布局,内容过多时按钮始终可见
This commit is contained in:
@@ -539,12 +539,12 @@ export const DetailsDialog = () => {
|
|||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
<Dialog open={queryViewStore.showDetailsDialog} onOpenChange={queryViewStore.setShowDetailsDialog}>
|
<Dialog open={queryViewStore.showDetailsDialog} onOpenChange={queryViewStore.setShowDetailsDialog}>
|
||||||
<DialogContent className={`max-h-[80vh] overflow-hidden ${isFullscreen ? 'w-screen! h-screen! max-w-screen! max-h-screen! ' : 'max-w-3xl! '}`}>
|
<DialogContent className={`flex flex-col max-h-[85vh] ${isFullscreen ? 'w-screen! h-screen! max-w-screen! max-h-screen! ' : 'max-w-4xl! '}`}>
|
||||||
<DialogHeader>
|
<DialogHeader className="flex-shrink-0">
|
||||||
<DialogTitle>详情信息</DialogTitle>
|
<DialogTitle>详情信息</DialogTitle>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
|
||||||
<div className="flex gap-2 border-b border-gray-200">
|
<div className="flex gap-2 border-b border-gray-200 flex-shrink-0">
|
||||||
{queryViewStore.allDetailsTabs.map((tab) => (
|
{queryViewStore.allDetailsTabs.map((tab) => (
|
||||||
<button
|
<button
|
||||||
key={tab.key}
|
key={tab.key}
|
||||||
@@ -559,7 +559,7 @@ export const DetailsDialog = () => {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-4 h-[calc(80vh-200px)] overflow-auto scrollbar px-2">
|
<div className="flex-1 overflow-auto scrollbar px-2 min-h-0">
|
||||||
{/* 第一个标签页:详情信息 */}
|
{/* 第一个标签页:详情信息 */}
|
||||||
{queryViewStore.detailsActiveTab === 'details' && (
|
{queryViewStore.detailsActiveTab === 'details' && (
|
||||||
<DetailsInfoPanel detailsData={queryViewStore.detailsData} />
|
<DetailsInfoPanel detailsData={queryViewStore.detailsData} />
|
||||||
@@ -575,9 +575,9 @@ export const DetailsDialog = () => {
|
|||||||
<RouterInfoPanel routeInfo={routeInfo} />
|
<RouterInfoPanel routeInfo={routeInfo} />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 第三个标签页:响应 */}
|
{/* 第四个标签页:响应 */}
|
||||||
{queryViewStore.detailsActiveTab === 'response' && (
|
{queryViewStore.detailsActiveTab === 'response' && (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4 h-full">
|
||||||
<QueryView viewData={queryViewStore.detailsData} type={'message'} setIsFullscreen={setIsFullscreen} />
|
<QueryView viewData={queryViewStore.detailsData} type={'message'} setIsFullscreen={setIsFullscreen} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -67,7 +67,7 @@ export const QueryView = (props: Props) => {
|
|||||||
setIsList(true);
|
setIsList(true);
|
||||||
}
|
}
|
||||||
setData(response.data.list)
|
setData(response.data.list)
|
||||||
const [_, firstItem] = response.data.list || []
|
const [firstItem] = response.data.list || []
|
||||||
if (firstItem) {
|
if (firstItem) {
|
||||||
const cols: ColumnDef<any>[] = Object.keys(firstItem).map(key => ({
|
const cols: ColumnDef<any>[] = Object.keys(firstItem).map(key => ({
|
||||||
accessorKey: key,
|
accessorKey: key,
|
||||||
|
|||||||
Reference in New Issue
Block a user