kra/resource/package/web/pages/detail.tsx.tpl

{{- $global := . }}
{{- if .IsAdd }}
// ============ 详情组件新增字段配置 ============

// 详情新增字段
{{- range .Fields}}
	{{- if .Desc }}
{{ GenerateReactDescriptionItem . }}
	{{- end }}
{{- end }}

{{- else }}
{{- if not .OnlyTemplate}}
/**
 * KRA - {{.Description}}详情组件
 * Auto-generated by KRA AutoCode
 */
import React, { useEffect, useState } from 'react';
import {
	Drawer,
	Descriptions,
	Spin,
	message,
	Tag,
	{{- if .HasPic }}
	Image,
	{{- end }}
	{{- if .IsTree }}
	TreeSelect,
	{{- end }}
} from 'antd';
import { find{{.StructName}} } from '@/services/kratos/{{.PackageName}}';
import type { {{.StructName}} } from '@/services/kratos/{{.PackageName}}';
{{- if .DictTypes }}
import { useDictionary } from '@/hooks/useDictionary';
{{- end }}
{{- if .HasDataSource }}
import { get{{.StructName}}DataSource } from '@/services/kratos/{{.PackageName}}';
{{- end }}
import dayjs from 'dayjs';

interface {{.StructName}}DetailProps {
	visible: boolean;
	record?: {{.StructName}} | null;
	onClose: () => void;
	{{- if .IsTree }}
	treeData?: {{.StructName}}[];
	{{- end }}
}

const {{.StructName}}Detail: React.FC<{{.StructName}}DetailProps> = ({
	visible,
	record,
	onClose,
	{{- if .IsTree }}
	treeData = [],
	{{- end }}
}) => {
	const [loading, setLoading] = useState(false);
	const [currentRecord, setCurrentRecord] = useState<{{.StructName}} | null>(null);
	{{- if .HasDataSource }}
	const [dataSource, setDataSource] = useState<Record<string, Array<{ label: string; value: any }>>>({});
	{{- end }}

	{{- if .DictTypes }}
	// 字典数据
	{{- range $index, $element := .DictTypes}}
	const { getLabel: get{{$element | toPascalCase}}Label } = useDictionary('{{$element}}');
	{{- end }}
	{{- end }}

	{{- if .HasDataSource }}
	// 获取数据源
	const fetchDataSource = async () => {
		try {
			const res = await get{{.StructName}}DataSource();
			if (res.code === 0) {
				setDataSource(res.data || {});
			}
		} catch (error) {
			console.error('获取数据源失败:', error);
		}
	};
	{{- end }}

	// 获取详情数据
	const fetchDetail = async (id: {{ GenerateTSType .PrimaryField.FieldType }}) => {
		setLoading(true);
		try {
			const res = await find{{.StructName}}({ {{.PrimaryField.FieldJson}}: id });
			if (res.code === 0 && res.data) {
				setCurrentRecord(res.data);
			} else {
				message.error(res.msg || '获取详情失败');
			}
		} catch (error) {
			message.error('获取详情失败');
		} finally {
			setLoading(false);
		}
	};

	useEffect(() => {
		if (visible && record?.{{.PrimaryField.FieldJson}}) {
			{{- if .HasDataSource }}
			fetchDataSource();
			{{- end }}
			fetchDetail(record.{{.PrimaryField.FieldJson}});
		}
	}, [visible, record]);

	// 关闭抽屉
	const handleClose = () => {
		setCurrentRecord(null);
		onClose();
	};

	return (
		<Drawer
			title="{{.Description}}详情"
			open={visible}
			onClose={handleClose}
			width={600}
			destroyOnClose
		>
			<Spin spinning={loading}>
				{currentRecord && (
					<Descriptions column={1} bordered>
						{{- if .IsTree }}
						<Descriptions.Item label="父节点">
							<TreeSelect
								value={currentRecord.parentID}
								treeData={[{ {{.PrimaryField.FieldJson}}: 0, {{.TreeJson}}: '根节点', children: treeData }]}
								fieldNames={{ "{{" }} label: '{{.TreeJson}}', value: '{{.PrimaryField.FieldJson}}', children: 'children' {{ "}}" }}
								disabled
								style={{ "{{" }} width: '100%' {{ "}}" }}
								placeholder="根节点"
							/>
						</Descriptions.Item>
						{{- end }}
						{{- range .Fields}}
						{{- if .Desc }}
						{{ GenerateReactDescriptionItem . }}
						{{- end }}
						{{- end }}
						{{- if .GvaModel }}
						<Descriptions.Item label="创建时间">
							{currentRecord.CreatedAt ? dayjs(currentRecord.CreatedAt).format('YYYY-MM-DD HH:mm:ss') : '-'}
						</Descriptions.Item>
						<Descriptions.Item label="更新时间">
							{currentRecord.UpdatedAt ? dayjs(currentRecord.UpdatedAt).format('YYYY-MM-DD HH:mm:ss') : '-'}
						</Descriptions.Item>
						{{- end }}
					</Descriptions>
				)}
			</Spin>
		</Drawer>
	);
};

export default {{.StructName}}Detail;
{{- else}}
/**
 * KRA - {{.Description}}详情组件
 * Auto-generated by KRA AutoCode
 */
import React from 'react';
import { Drawer, Descriptions } from 'antd';

interface {{.StructName}}DetailProps {
	visible: boolean;
	record?: any;
	onClose: () => void;
}

const {{.StructName}}Detail: React.FC<{{.StructName}}DetailProps> = ({
	visible,
	record,
	onClose,
}) => {
	return (
		<Drawer
			title="{{.Description}}详情"
			open={visible}
			onClose={onClose}
			width={600}
			destroyOnClose
		>
			{record && (
				<Descriptions column={1} bordered>
					{/* 详情字段 */}
				</Descriptions>
			)}
		</Drawer>
	);
};

export default {{.StructName}}Detail;
{{- end }}
{{- end }}