fix: add i18n support for detail page field labels, related list headers, and highlight fields

- Add missing i18n keys (activity, editRow, deleteRow, etc.) to en.ts and zh.ts
- Use useSafeFieldLabel in DetailSection for field label internationalization
- Use useSafeFieldLabel in RelatedList for auto-generated column headers
- Use useSafeFieldLabel in HeaderHighlight for highlight field labels
- Thread objectName prop from DetailView through SectionGroup, DetailSection, HeaderHighlight, RelatedList
- Fix RelatedList sortable headers to use effectiveColumns instead of raw columns

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

packages/i18n/src/locales/en.ts

@@ -180,6 +180,17 @@ const en = {
     viewAll: 'View All',
     new: 'New',
     emptyValue: '—',
+    activity: 'Activity',
+    editRow: 'Edit',
+    deleteRow: 'Delete',
+    deleteRowConfirmation: 'Are you sure you want to delete this record?',
+    actions: 'Actions',
+    previousPage: 'Previous',
+    nextPage: 'Next',
+    pageOf: 'Page {{current}} of {{total}}',
+    sortBy: 'Sort by',
+    filterPlaceholder: 'Filter...',
+    highlightFields: 'Key Fields',
   },
   chart: {
     noData: 'No chart data available',

packages/i18n/src/locales/zh.ts

@@ -180,6 +180,17 @@ const zh = {
     viewAll: '查看全部',
     new: '新建',
     emptyValue: '—',
+    activity: '活动',
+    editRow: '编辑',
+    deleteRow: '删除',
+    deleteRowConfirmation: '确定要删除此记录吗？',
+    actions: '操作',
+    previousPage: '上一页',
+    nextPage: '下一页',
+    pageOf: '第 {{current}} 页，共 {{total}} 页',
+    sortBy: '排序',
+    filterPlaceholder: '筛选...',
+    highlightFields: '关键字段',
   },
   chart: {
     noData: '暂无图表数据',

packages/plugin-detail/src/DetailSection.tsx

@@ -29,13 +29,16 @@ import { getCellRenderer } from '@object-ui/fields';
 import type { DetailViewSection as DetailViewSectionType, DetailViewField, FieldMetadata } from '@object-ui/types';
 import { applyDetailAutoLayout } from './autoLayout';
 import { useDetailTranslation } from './useDetailTranslation';
+import { useSafeFieldLabel } from '@object-ui/react';
 
 export interface DetailSectionProps {
   section: DetailViewSectionType;
   data?: any;
   className?: string;
   /** Object schema from DataSource for field type enrichment */
   objectSchema?: any;
+  /** Object name for i18n field label resolution */
+  objectName?: string;
   /** Whether inline editing is active */
   isEditing?: boolean;
   /** Callback when a field value changes during inline editing */
@@ -47,12 +50,14 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
   data,
   className,
   objectSchema,
+  objectName,
   isEditing = false,
   onFieldChange,
 }) => {
   const [isCollapsed, setIsCollapsed] = React.useState(section.defaultCollapsed ?? false);
   const [copiedField, setCopiedField] = React.useState<string | null>(null);
   const { t } = useDetailTranslation();
+  const { fieldLabel } = useSafeFieldLabel();
 
   const handleCopyField = React.useCallback((fieldName: string, value: any) => {
     const textValue = value !== null && value !== undefined ? String(value) : '';
@@ -111,7 +116,7 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
     return (
       <div key={field.name} className={cn("space-y-1.5 group", spanClass)}>
         <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-          {field.label || field.name}
+          {objectName ? fieldLabel(objectName, field.name, field.label || field.name) : (field.label || field.name)}
         </div>
         {isEditing && !field.readonly ? (
           <div className="min-h-[44px] sm:min-h-0">

packages/plugin-detail/src/DetailView.tsx

@@ -572,7 +572,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
 
       {/* Header Highlight Area */}
       {schema.highlightFields && schema.highlightFields.length > 0 && (
-        <HeaderHighlight fields={schema.highlightFields} data={data} />
+        <HeaderHighlight fields={schema.highlightFields} data={data} objectName={schema.objectName} />
       )}
 
       {/* Auto Tabs mode: wrap sections, related, activity into tabs */}
@@ -620,6 +620,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                     group={group}
                     data={{ ...data, ...editedValues }}
                     objectSchema={objectSchema}
+                    objectName={schema.objectName}
                     isEditing={isInlineEditing}
                     onFieldChange={handleInlineFieldChange}
                   />
@@ -632,6 +633,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                     section={section}
                     data={{ ...data, ...editedValues }}
                     objectSchema={objectSchema}
+                    objectName={schema.objectName}
                     isEditing={isInlineEditing}
                     onFieldChange={handleInlineFieldChange}
                   />
@@ -645,6 +647,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                   }}
                   data={{ ...data, ...editedValues }}
                   objectSchema={objectSchema}
+                  objectName={schema.objectName}
                   isEditing={isInlineEditing}
                   onFieldChange={handleInlineFieldChange}
                 />
@@ -672,6 +675,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                     data={related.data}
                     columns={related.columns as any}
                     dataSource={dataSource}
+                    objectName={related.api}
                   />
                 ))}
               </div>
@@ -696,6 +700,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                   group={group}
                   data={{ ...data, ...editedValues }}
                   objectSchema={objectSchema}
+                  objectName={schema.objectName}
                   isEditing={isInlineEditing}
                   onFieldChange={handleInlineFieldChange}
                 />
@@ -712,6 +717,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                   section={section}
                   data={{ ...data, ...editedValues }}
                   objectSchema={objectSchema}
+                  objectName={schema.objectName}
                   isEditing={isInlineEditing}
                   onFieldChange={handleInlineFieldChange}
                 />
@@ -728,6 +734,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
               }}
               data={{ ...data, ...editedValues }}
               objectSchema={objectSchema}
+              objectName={schema.objectName}
               isEditing={isInlineEditing}
               onFieldChange={handleInlineFieldChange}
             />
@@ -751,6 +758,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                   data={related.data}
                   columns={related.columns as any}
                   dataSource={dataSource}
+                  objectName={related.api}
                 />
               ))}
             </div>

packages/plugin-detail/src/HeaderHighlight.tsx

@@ -9,18 +9,23 @@
 import * as React from 'react';
 import { cn, Card, CardContent } from '@object-ui/components';
 import type { HighlightField } from '@object-ui/types';
+import { useSafeFieldLabel } from '@object-ui/react';
 
 export interface HeaderHighlightProps {
   fields: HighlightField[];
   data?: any;
   className?: string;
+  /** Object name for i18n field label resolution */
+  objectName?: string;
 }
 
 export const HeaderHighlight: React.FC<HeaderHighlightProps> = ({
   fields,
   data,
   className,
+  objectName,
 }) => {
+  const { fieldLabel } = useSafeFieldLabel();
   if (!fields.length || !data) return null;
 
   // Filter to only fields with values
@@ -47,7 +52,7 @@ export const HeaderHighlight: React.FC<HeaderHighlightProps> = ({
               <div key={field.name} className="flex flex-col gap-0.5">
                 <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
                   {field.icon && <span className="mr-1">{field.icon}</span>}
-                  {field.label}
+                  {objectName ? fieldLabel(objectName, field.name, field.label) : field.label}
                 </span>
                 <span className="text-sm font-semibold truncate">
                   {String(value)}

packages/plugin-detail/src/RelatedList.tsx

@@ -27,6 +27,7 @@ import {
 } from 'lucide-react';
 import type { DataSource } from '@object-ui/types';
 import { useDetailTranslation } from './useDetailTranslation';
+import { useSafeFieldLabel } from '@object-ui/react';
 
 export interface RelatedListProps {
   title: string;
@@ -37,6 +38,8 @@ export interface RelatedListProps {
   columns?: any[];
   className?: string;
   dataSource?: DataSource;
+  /** Object name for i18n field label resolution */
+  objectName?: string;
   /** Callback when "New" button is clicked */
   onNew?: () => void;
   /** Callback when "View All" button is clicked */
@@ -62,6 +65,7 @@ export const RelatedList: React.FC<RelatedListProps> = ({
   columns,
   className,
   dataSource,
+  objectName,
   onNew,
   onViewAll,
   onRowEdit,
@@ -78,6 +82,7 @@ export const RelatedList: React.FC<RelatedListProps> = ({
   const [filterText, setFilterText] = React.useState('');
   const [objectSchema, setObjectSchema] = React.useState<any>(null);
   const { t } = useDetailTranslation();
+  const { fieldLabel: resolveFieldLabel } = useSafeFieldLabel();
 
   // Sync internal state when data prop changes (e.g., parent fetches async data)
   React.useEffect(() => {
@@ -180,13 +185,16 @@ export const RelatedList: React.FC<RelatedListProps> = ({
   const effectiveColumns = React.useMemo(() => {
     if (columns && columns.length > 0) return columns;
     if (!objectSchema?.fields) return [];
+    const resolvedObjectName = objectName || api || '';
     return Object.entries(objectSchema.fields)
       .filter(([key]) => !key.startsWith('_'))
       .map(([key, def]: [string, any]) => ({
         accessorKey: key,
-        header: def.label || key,
+        header: resolvedObjectName
+          ? resolveFieldLabel(resolvedObjectName, key, def.label || key)
+          : (def.label || key),
       }));
-  }, [columns, objectSchema]);
+  }, [columns, objectSchema, objectName, api, resolveFieldLabel]);
 
   const viewSchema = React.useMemo(() => {
     if (schema) return schema;
@@ -258,9 +266,9 @@ export const RelatedList: React.FC<RelatedListProps> = ({
         )}
 
         {/* Sortable column headers */}
-        {sortable && columns && columns.length > 0 && relatedData.length > 0 && (
+        {sortable && effectiveColumns && effectiveColumns.length > 0 && relatedData.length > 0 && (
           <div className="flex flex-wrap gap-1 mb-3">
-            {columns.map((col: any) => {
+            {effectiveColumns.map((col: any) => {
               const field = col.accessorKey || col.field || col.name;
               if (!field) return null;
               const label = col.header || col.label || field;

packages/plugin-detail/src/SectionGroup.tsx

@@ -22,6 +22,8 @@ export interface SectionGroupProps {
   data?: any;
   className?: string;
   objectSchema?: any;
+  /** Object name for i18n field label resolution */
+  objectName?: string;
   isEditing?: boolean;
   onFieldChange?: (field: string, value: any) => void;
 }
@@ -31,6 +33,7 @@ export const SectionGroup: React.FC<SectionGroupProps> = ({
   data,
   className,
   objectSchema,
+  objectName,
   isEditing = false,
   onFieldChange,
 }) => {
@@ -45,6 +48,7 @@ export const SectionGroup: React.FC<SectionGroupProps> = ({
           section={section}
           data={data}
           objectSchema={objectSchema}
+          objectName={objectName}
           isEditing={isEditing}
           onFieldChange={onFieldChange}
         />