feat: add i18n support to detail view, section, and related list components

- Add detail.* translation keys to en.ts and zh.ts locale files
- Add useDetailTranslation() hook following existing grid/list patterns
- Replace all hardcoded strings in DetailView with t() calls
- Replace all hardcoded strings in RelatedList with t() calls
- Add useSectionTranslation() for DetailSection copy tooltips
- Improve empty value display: replace plain '-' with styled em-dash
- Add 'detail' to BUILTIN_KEYS in useObjectLabel.ts
- Add onNew/onViewAll props and buttons to RelatedList
- Update tests to expect new empty value styling

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

Author: Copilot

packages/i18n/src/locales/en.ts

@@ -146,6 +146,41 @@ const en = {
     deleteCard: 'Delete card',
     deleteColumn: 'Delete column',
   },
+  detail: {
+    back: 'Back',
+    edit: 'Edit',
+    editInline: 'Edit inline',
+    save: 'Save',
+    saveChanges: 'Save changes',
+    editFieldsInline: 'Edit fields inline',
+    share: 'Share',
+    duplicate: 'Duplicate',
+    export: 'Export',
+    viewHistory: 'View history',
+    delete: 'Delete',
+    moreActions: 'More actions',
+    addToFavorites: 'Add to favorites',
+    removeFromFavorites: 'Remove from favorites',
+    previousRecord: 'Previous record',
+    nextRecord: 'Next record',
+    recordOf: '{{current}} of {{total}}',
+    recordNotFound: 'Record not found',
+    recordNotFoundDescription: 'The record you are looking for does not exist or may have been deleted.',
+    goBack: 'Go back',
+    details: 'Details',
+    related: 'Related',
+    relatedRecords: '{{count}} records',
+    relatedRecordOne: '{{count}} record',
+    noRelatedRecords: 'No related records found',
+    loading: 'Loading...',
+    copyToClipboard: 'Copy to clipboard',
+    copied: 'Copied!',
+    deleteConfirmation: 'Are you sure you want to delete this record?',
+    editRecord: 'Edit record',
+    viewAll: 'View All',
+    new: 'New',
+    emptyValue: '—',
+  },
   chart: {
     noData: 'No chart data available',
     loading: 'Loading chart...',

packages/i18n/src/locales/zh.ts

@@ -146,6 +146,41 @@ const zh = {
     deleteCard: '删除卡片',
     deleteColumn: '删除列',
   },
+  detail: {
+    back: '返回',
+    edit: '编辑',
+    editInline: '内联编辑',
+    save: '保存',
+    saveChanges: '保存更改',
+    editFieldsInline: '内联编辑字段',
+    share: '分享',
+    duplicate: '复制',
+    export: '导出',
+    viewHistory: '查看历史',
+    delete: '删除',
+    moreActions: '更多操作',
+    addToFavorites: '添加到收藏',
+    removeFromFavorites: '从收藏中移除',
+    previousRecord: '上一条记录',
+    nextRecord: '下一条记录',
+    recordOf: '第 {{current}} 条，共 {{total}} 条',
+    recordNotFound: '未找到记录',
+    recordNotFoundDescription: '您查找的记录不存在或已被删除。',
+    goBack: '返回',
+    details: '详情',
+    related: '相关',
+    relatedRecords: '{{count}} 条记录',
+    relatedRecordOne: '{{count}} 条记录',
+    noRelatedRecords: '暂无相关记录',
+    loading: '加载中...',
+    copyToClipboard: '复制到剪贴板',
+    copied: '已复制！',
+    deleteConfirmation: '确定要删除此记录吗？',
+    editRecord: '编辑记录',
+    viewAll: '查看全部',
+    new: '新建',
+    emptyValue: '—',
+  },
   chart: {
     noData: '暂无图表数据',
     loading: '图表加载中...',

packages/i18n/src/useObjectLabel.ts

@@ -28,7 +28,7 @@ import { useObjectTranslation } from './provider';
 const BUILTIN_KEYS = new Set([
   'common', 'validation', 'form', 'table', 'grid', 'calendar',
   'list', 'kanban', 'chart', 'dashboard', 'configPanel',
-  'appDesigner', 'console', 'errors',
+  'appDesigner', 'console', 'errors', 'detail',
 ]);
 
 /**

packages/plugin-detail/src/DetailSection.tsx

@@ -24,11 +24,29 @@ import {
   TooltipTrigger,
 } from '@object-ui/components';
 import { ChevronDown, ChevronRight, Copy, Check } from 'lucide-react';
-import { SchemaRenderer } from '@object-ui/react';
+import { SchemaRenderer, useObjectTranslation } from '@object-ui/react';
 import { getCellRenderer } from '@object-ui/fields';
 import type { DetailViewSection as DetailViewSectionType, DetailViewField, FieldMetadata } from '@object-ui/types';
 import { applyDetailAutoLayout } from './autoLayout';
 
+const SECTION_TRANSLATIONS: Record<string, string> = {
+  'detail.copyToClipboard': 'Copy to clipboard',
+  'detail.copied': 'Copied!',
+};
+
+function useSectionTranslation() {
+  try {
+    const result = useObjectTranslation();
+    const testValue = result.t('detail.copyToClipboard');
+    if (testValue === 'detail.copyToClipboard') {
+      return { t: (key: string) => SECTION_TRANSLATIONS[key] || key };
+    }
+    return { t: result.t };
+  } catch {
+    return { t: (key: string) => SECTION_TRANSLATIONS[key] || key };
+  }
+}
+
 export interface DetailSectionProps {
   section: DetailViewSectionType;
   data?: any;
@@ -51,6 +69,7 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
 }) => {
   const [isCollapsed, setIsCollapsed] = React.useState(section.defaultCollapsed ?? false);
   const [copiedField, setCopiedField] = React.useState<string | null>(null);
+  const { t } = useSectionTranslation();
 
   const handleCopyField = React.useCallback((fieldName: string, value: any) => {
     const textValue = value !== null && value !== undefined ? String(value) : '';
@@ -77,7 +96,7 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
                       field.span === 6 ? 'col-span-6' : '';
 
     const displayValue = (() => {
-      if (value === null || value === undefined) return '-';
+      if (value === null || value === undefined) return <span className="text-muted-foreground/50 text-xs italic">—</span>;
       // Enrich field with objectSchema metadata — merge missing properties
       // even when field.type is explicitly set (e.g., type: 'lookup' without reference_to)
       const objectDefField = objectSchema?.fields?.[field.name];
@@ -159,7 +178,7 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>
-                  {isCopied ? 'Copied!' : 'Copy to clipboard'}
+                  {isCopied ? t('detail.copied') : t('detail.copyToClipboard')}
                 </TooltipContent>
               </Tooltip>
             </TooltipProvider>