---
name: frontend-admin-i18n
description: Generate frontend i18n translation files for madong plugin module. Creates JSON translation files with proper key patterns for both zh-cn and en languages.
---

# Step 9: Generate Frontend i18n

Generate JSON translation files for plugin module frontend.

## File Locations

### Plugin Mode (插件模式)

```
frontend/admin/src/apps/{plugin}/lang/zh-cn/{module}.{feature}.json
frontend/admin/src/apps/{plugin}/lang/en/{module}.{feature}.json
```

**Key prefix**: `{plugin}.{module}.{feature}`
- Example: `official/lang/zh-cn/rich_text.template.json` → key prefix is `official.rich_text.template`

### Built-in Mode (内置模式)

```
frontend/admin/src/lang/zh-cn/{module}.{feature}.json
frontend/admin/src/lang/en/{module}.{feature}.json
```

**Key prefix**: `{module}.{feature}` (NO plugin prefix)
- Example: `admin/src/lang/zh-cn/rich_text.template.json` → key prefix is `rich_text.template`

**Important**: 
- File path itself defines the key prefix
- Inside the JSON file, do NOT include the prefix again
- Use nested object structure, NOT dot notation in keys

## Translation File Template (zh-cn)

```json
{
  "dialog_title": "富文本模板",
  "table": {
    "columns": {
      "sort": "排序",
      "title": "标题",
      "template": "模板类型",
      "is_show": "显示状态",
      "status": "状态",
      "created_at": "创建时间"
    }
  },
  "search_form": {
    "title": "标题",
    "template": "模板类型"
  },
  "form": {
    "title": "标题",
    "template": "模板类型",
    "sort": "排序",
    "is_show": "显示状态",
    "enabled": "启用状态",
    "content": "内容",
    "meta": "元数据",
    "extra": "扩展数据"
  },
  "validate": {
    "title_required": "请输入标题",
    "content_required": "请输入内容"
  },
  "tips": {
    "add_success": "添加成功",
    "edit_success": "编辑成功",
    "delete_confirm": "确认删除吗？",
    "delete_success": "删除成功"
  },
  "actions": {
    "add": "新增",
    "edit": "编辑",
    "delete": "删除",
    "detail": "详情",
    "submit": "提交",
    "cancel": "取消",
    "confirm": "确定"
  }
}
```

## Translation File Template (en)

```json
{
  "dialog_title": "Rich Text Template",
  "table": {
    "columns": {
      "sort": "Sort",
      "title": "Title",
      "template": "Template Type",
      "is_show": "Show Status",
      "status": "Status",
      "created_at": "Created At"
    }
  },
  "search_form": {
    "title": "Title",
    "template": "Template Type"
  },
  "form": {
    "title": "Title",
    "template": "Template Type",
    "sort": "Sort",
    "is_show": "Show Status",
    "enabled": "Enabled Status",
    "content": "Content",
    "meta": "Meta Data",
    "extra": "Extra Data"
  },
  "validate": {
    "title_required": "Please enter title",
    "content_required": "Please enter content"
  },
  "tips": {
    "add_success": "Added successfully",
    "edit_success": "Edited successfully",
    "delete_confirm": "Are you sure to delete?",
    "delete_success": "Deleted successfully"
  },
  "actions": {
    "add": "Add",
    "edit": "Edit",
    "delete": "Delete",
    "detail": "Detail",
    "submit": "Submit",
    "cancel": "Cancel",
    "confirm": "Confirm"
  }
}
```

## Usage in Frontend Code

### Plugin Mode

```typescript
import { $t } from '@/locales'

// File: official/lang/zh-cn/rich_text.template.json
// Key in file: "dialog_title"
// Full key: official.rich_text.template.dialog_title
const title = $t('official.rich_text.template.dialog_title')
const columnLabel = $t('official.rich_text.template.table.columns.title')

// In Vue component
<el-button>{{ $t('official.rich_text.template.actions.add') }}</el-button>
```

### Built-in Mode

```typescript
import { $t } from '@/locales'

// File: admin/src/lang/zh-cn/rich_text.template.json
// Key in file: "dialog_title"
// Full key: rich_text.template.dialog_title (NO plugin prefix)
const title = $t('rich_text.template.dialog_title')
const columnLabel = $t('rich_text.template.table.columns.title')

// In Vue component
<el-button>{{ $t('rich_text.template.actions.add') }}</el-button>
```

## Auto-generation Checklist

When generating frontend i18n:
- [ ] Create lang directory structure if not exists: `lang/zh-cn/` and `lang/en/`
- [ ] Filename format: `{module}.{feature}.json` (e.g., `rich_text.template.json`)
- [ ] Generate `zh-cn/{module}.{feature}.json` with nested object structure
- [ ] Generate `en/{module}.{feature}.json` with nested object structure
- [ ] Do NOT include key prefix in JSON content (prefix comes from filename)
- [ ] Add all column labels, placeholders, and validation messages

## Key Naming Convention

### Plugin Mode

| Type | File Location | Key in JSON | Full Key Used in Code |
|------|---------------|-------------|----------------------|
| Title | `apps/official/lang/zh-cn/rich_text.template.json` | `"dialog_title"` | `official.rich_text.template.dialog_title` |
| Column | `apps/official/lang/zh-cn/rich_text.template.json` | `"table.columns.title"` (nested) | `official.rich_text.template.table.columns.title` |
| Search | `apps/official/lang/zh-cn/rich_text.template.json` | `"search_form.title"` (nested) | `official.rich_text.template.search_form.title` |
| Form | `apps/official/lang/zh-cn/rich_text.template.json` | `"form.title"` (nested) | `official.rich_text.template.form.title` |
| Action | `apps/official/lang/zh-cn/rich_text.template.json` | `"actions.add"` (nested) | `official.rich_text.template.actions.add` |

### Built-in Mode

| Type | File Location | Key in JSON | Full Key Used in Code |
|------|---------------|-------------|----------------------|
| Title | `admin/src/lang/zh-cn/rich_text.template.json` | `"dialog_title"` | `rich_text.template.dialog_title` |
| Column | `admin/src/lang/zh-cn/rich_text.template.json` | `"table.columns.title"` (nested) | `rich_text.template.table.columns.title` |
| Search | `admin/src/lang/zh-cn/rich_text.template.json` | `"search_form.title"` (nested) | `rich_text.template.search_form.title` |
| Form | `admin/src/lang/zh-cn/rich_text.template.json` | `"form.title"` (nested) | `rich_text.template.form.title` |
| Action | `admin/src/lang/zh-cn/rich_text.template.json` | `"actions.add"` (nested) | `rich_text.template.actions.add` |

## File Naming Rules

1. **Module name in filename uses underscore**: `rich_text.template.json` (NOT `rich-text.template.json`)
2. **Feature name in filename uses lowercase**: `template` (NOT `Template`)
3. **File extension**: `.json`
4. **Directory structure**: `lang/{locale}/{module}.{feature}.json`

## Integration with Frontend Code

The generated i18n keys should match the schemas/index.tsx:

```typescript
// schemas/index.tsx
import { $t } from '@/locales'

export const crudSchema = (): CrudSchema => {
  return {
    // File: official/lang/zh-cn/rich_text.template.json
    // Key: "dialog_title"
    dialogTitle: $t('official.rich_text.template.dialog_title'),
    columns: [
      {
        prop: 'title',
        // Key: "table.columns.title"
        label: $t('official.rich_text.template.table.columns.title'),
      },
    ],
    searchFormSchema: {
      schema: [
        {
          // Key: "search_form.title"
          label: $t('official.rich_text.template.search_form.title'),
          prop: 'title',
        },
      ],
    },
    formSchema: {
      schema: [
        {
          // Key: "form.title"
          label: $t('official.rich_text.template.form.title'),
          prop: 'title',
        },
      ],
    },
  }
}
```

## Common Mistakes to Avoid

1. ❌ **Wrong**: Including prefix in JSON keys
   ```json
   {
     "official.rich_text.template.dialog_title": "富文本模板"
   }
   ```

2. ✅ **Correct**: Nested object without prefix
   ```json
   {
     "dialog_title": "富文本模板"
   }
   ```

3. ❌ **Wrong**: Using hyphen in filename
   ```
   lang/zh-cn/rich-text.template.json
   ```

4. ✅ **Correct**: Using underscore in filename
   ```
   lang/zh-cn/rich_text.template.json
   ```

5. ❌ **Wrong**: Flat keys with dots
   ```json
   {
     "table.columns.sort": "排序"
   }
   ```

6. ✅ **Correct**: Nested objects
   ```json
   {
     "table": {
       "columns": {
         "sort": "排序"
       }
     }
   }
   ```