Merge pull request #999 from objectstack-ai/copilot/fix-internationalization-issues

hotlong · web-flow · commit a06a1c7a4d43 · 2026-03-03T17:38:45.000+08:00
diff --git a/ROADMAP.md b/ROADMAP.md
@@ -1495,6 +1495,12 @@ All 313 `@object-ui/fields` tests pass.
 - [x] Header highlight area with key fields
 - [x] Console `RecordDetailView` integration: `autoTabs`, `autoDiscoverRelated`, `highlightFields`, `sectionGroups` wired into `detailSchema` for end-to-end availability
 - [x] Console reverse-reference discovery: child objects (e.g., `order_item` → `order`) auto-discovered and rendered with filtered data
+- [x] `useSafeFieldLabel` wired into `DetailSection`, `RelatedList`, `HeaderHighlight` for convention-based field label i18n (#968, #883, #942)
+- [x] `objectName` threaded through `DetailView` → `SectionGroup` → `DetailSection` / `HeaderHighlight` / `RelatedList`
+- [x] RelatedList sortable headers fixed to use `effectiveColumns` (auto-generated from schema) instead of raw `columns` prop
+- [x] Added missing `detail.*` i18n keys (`activity`, `editRow`, `deleteRow`, `previousPage`, `nextPage`, etc.) to en.ts and zh.ts
+- [x] RelatedList auto-generated columns use `getCellRenderer` for type-aware cell rendering (date, currency, select/badge, lookup, boolean, etc.)
+- [x] Console `RecordDetailView` fallback section title uses `t('detail.details')` instead of hardcoded English
 
 ---
 
diff --git a/apps/console/src/components/RecordDetailView.tsx b/apps/console/src/components/RecordDetailView.tsx
@@ -12,7 +12,7 @@ import { DetailView, RecordChatterPanel } from '@object-ui/plugin-detail';
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
 import { PresenceAvatars, type PresenceUser } from '@object-ui/collaboration';
 import { useAuth } from '@object-ui/auth';
-import { ActionProvider } from '@object-ui/react';
+import { ActionProvider, useObjectTranslation } from '@object-ui/react';
 import { toast } from 'sonner';
 import { Database, Users } from 'lucide-react';
 import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
@@ -38,6 +38,7 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
   const { showDebug } = useMetadataInspector();
   const { user } = useAuth();
   const navigate = useNavigate();
+  const { t } = useObjectTranslation();
   const [isLoading, setIsLoading] = useState(true);
   const [feedItems, setFeedItems] = useState<FeedItem[]>([]);
   const [recordViewers, setRecordViewers] = useState<PresenceUser[]>([]);
@@ -368,7 +369,7 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
       }))
     : [
         {
-          title: 'Details',
+          title: t('detail.details', { defaultValue: 'Details' }),
           fields: Object.keys(objectDef.fields || {}).map(key => {
             const fieldDef = objectDef.fields[key];
             const refTarget = fieldDef.reference_to || fieldDef.reference;
diff --git a/packages/i18n/src/locales/en.ts b/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',
diff --git a/packages/i18n/src/locales/zh.ts b/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: '暂无图表数据',
diff --git a/packages/plugin-detail/src/DetailSection.tsx b/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}
+          {fieldLabel(objectName || '', field.name, field.label || field.name)}
         </div>
         {isEditing && !field.readonly ? (
           <div className="min-h-[44px] sm:min-h-0">
diff --git a/packages/plugin-detail/src/DetailView.tsx b/packages/plugin-detail/src/DetailView.tsx
@@ -590,7 +590,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 */}
@@ -638,6 +638,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                     group={group}
                     data={{ ...data, ...editedValues }}
                     objectSchema={objectSchema}
+                    objectName={schema.objectName}
                     isEditing={isInlineEditing}
                     onFieldChange={handleInlineFieldChange}
                   />
@@ -650,6 +651,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                     section={section}
                     data={{ ...data, ...editedValues }}
                     objectSchema={objectSchema}
+                    objectName={schema.objectName}
                     isEditing={isInlineEditing}
                     onFieldChange={handleInlineFieldChange}
                   />
@@ -663,6 +665,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                   }}
                   data={{ ...data, ...editedValues }}
                   objectSchema={objectSchema}
+                  objectName={schema.objectName}
                   isEditing={isInlineEditing}
                   onFieldChange={handleInlineFieldChange}
                 />
@@ -690,6 +693,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                     data={related.data}
                     columns={related.columns as any}
                     dataSource={dataSource}
+                    objectName={related.api}
                   />
                 ))}
               </div>
@@ -714,6 +718,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                   group={group}
                   data={{ ...data, ...editedValues }}
                   objectSchema={objectSchema}
+                  objectName={schema.objectName}
                   isEditing={isInlineEditing}
                   onFieldChange={handleInlineFieldChange}
                 />
@@ -730,6 +735,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                   section={section}
                   data={{ ...data, ...editedValues }}
                   objectSchema={objectSchema}
+                  objectName={schema.objectName}
                   isEditing={isInlineEditing}
                   onFieldChange={handleInlineFieldChange}
                 />
@@ -746,6 +752,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
               }}
               data={{ ...data, ...editedValues }}
               objectSchema={objectSchema}
+              objectName={schema.objectName}
               isEditing={isInlineEditing}
               onFieldChange={handleInlineFieldChange}
             />
@@ -769,6 +776,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                   data={related.data}
                   columns={related.columns as any}
                   dataSource={dataSource}
+                  objectName={related.api}
                 />
               ))}
             </div>
diff --git a/packages/plugin-detail/src/HeaderHighlight.tsx b/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}
+                  {fieldLabel(objectName || '', field.name, field.label)}
                 </span>
                 <span className="text-sm font-semibold truncate">
                   {String(value)}
diff --git a/packages/plugin-detail/src/RelatedList.tsx b/packages/plugin-detail/src/RelatedList.tsx
@@ -25,8 +25,10 @@ import {
   ChevronRight,
   ArrowUpDown,
 } from 'lucide-react';
-import type { DataSource } from '@object-ui/types';
+import type { DataSource, FieldMetadata } from '@object-ui/types';
+import { getCellRenderer } from '@object-ui/fields';
 import { useDetailTranslation } from './useDetailTranslation';
+import { useSafeFieldLabel } from '@object-ui/react';
 
 export interface RelatedListProps {
   title: string;
@@ -37,6 +39,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 +66,7 @@ export const RelatedList: React.FC<RelatedListProps> = ({
   columns,
   className,
   dataSource,
+  objectName,
   onNew,
   onViewAll,
   onRowEdit,
@@ -78,6 +83,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 +186,40 @@ 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,
-      }));
-  }, [columns, objectSchema]);
+      .map(([key, def]: [string, any]) => {
+        const col: any = {
+          accessorKey: key,
+          header: resolveFieldLabel(resolvedObjectName, key, def.label || key),
+        };
+        // Add type-aware cell renderer for typed fields
+        if (def.type) {
+          const CellRenderer = getCellRenderer(def.type);
+          if (CellRenderer) {
+            const fieldMeta: FieldMetadata = {
+              name: key,
+              label: def.label || key,
+              type: def.type,
+              ...(def.options && { options: def.options }),
+              ...(def.currency && { currency: def.currency }),
+              ...(def.precision !== undefined && { precision: def.precision }),
+              ...(def.format && { format: def.format }),
+              ...((def.reference_to || def.reference) && { reference_to: def.reference_to || def.reference }),
+              ...(def.reference_field && { reference_field: def.reference_field }),
+            };
+            col.cell = (value: any) => {
+              if (value === null || value === undefined) {
+                return React.createElement('span', { className: 'text-muted-foreground/50 text-xs italic' }, '—');
+              }
+              return React.createElement(CellRenderer, { value, field: fieldMeta });
+            };
+          }
+        }
+        return col;
+      });
+  }, [columns, objectSchema, objectName, api, resolveFieldLabel]);
 
   const viewSchema = React.useMemo(() => {
     if (schema) return schema;
@@ -258,9 +291,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;
diff --git a/packages/plugin-detail/src/SectionGroup.tsx b/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}
         />
