F1 component kit/Forms and editing/Bilingual en / 中文 field pair (four labels)Phone

Bilingual en / 中文 field pair (four labels)

Missing · new19 · bilingual-field

The designs truth: every name is stored four times — System (English), System (Chinese), Printer (English), Printer (Chinese) — each required. Side by side on desktop, a “Chinese missing” flag (the factory bill would print English), tabs on phone.

Covers: M07. Exports: BilingualField.

Whole page:CompactComfortableLaravel · navyDTC · midnight green

Anatomy States Density EN · 中文 Edge cases Contract

Anatomy

The component as it sits in the product: English, compact, real data shapes.

ENSystem (English)*中文System (Chinese)*Notch lapel平驳头ENPrinter (English)*中文Printer (Chinese)*NOTCH LAPEL平驳头

System = the name staff and the ordering UI see. Printer = the factory bill name.

Side by side in a list

Design index columns: English Name · Chinese Name (· Printer English · Printer Chinese). Missing Chinese is flagged, never auto-filled.

EN中文System · LapelLapel驳头System · Notch lapelNotch lapel平驳头System · Peak lapelPeak lapel戗驳头System · Shawl lapelShawl lapelmissing

States

5 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.

filled

ENSystem (English)*中文System (Chinese)*Notch lapel平驳头ENPrinter (English)*中文Printer (Chinese)*NOTCH LAPEL平驳头

System = the name staff and the ordering UI see. Printer = the factory bill name.

focus

ENSystem (English)*中文System (Chinese)*Notch lapel平驳头ENPrinter (English)*中文Printer (Chinese)*NOTCH LAPEL平驳头

System = the name staff and the ordering UI see. Printer = the factory bill name.

Chinese missing

ENSystem (English)*中文System (Chinese)*Notch lapelRequiredENPrinter (English)*中文Printer (Chinese)*NOTCH LAPEL平驳头

Chinese missing: the factory bill prints English

System = the name staff and the ordering UI see. Printer = the factory bill name.

required empty

ENSystem (English)*中文System (Chinese)*Notch lapel平驳头ENPrinter (English)*中文Printer (Chinese)*NOTCH LAPELRequired

Printer (Chinese) is required

suggest Chinese (vision only)

ENSystem (English)*中文System (Chinese)*Notch lapel平驳头ENPrinter (English)*中文Printer (Chinese)*NOTCH LAPEL平驳头

Vision failure reasons only: admin.vision-checks.failure-reasons.translate-suggest. Click-only.

Density

Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.

compact · default · data-density=compact

ENSystem (English)*中文System (Chinese)*Notch lapel平驳头ENPrinter (English)*中文Printer (Chinese)*NOTCH LAPEL平驳头

System = the name staff and the ordering UI see. Printer = the factory bill name.

comfortable · data-density=comfortable

ENSystem (English)*中文System (Chinese)*Notch lapel平驳头ENPrinter (English)*中文Printer (Chinese)*NOTCH LAPEL平驳头

System = the name staff and the ordering UI see. Printer = the factory bill name.

English · 中文

Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.

ENSystem (English)*中文System (Chinese)*Notch lapel平驳头ENPrinter (English)*中文Printer (Chinese)*NOTCH LAPEL平驳头

System = the name staff and the ordering UI see. Printer = the factory bill name.

中文 · lang=zh-Hans

EN系统名（英文）*中文系统名（中文）*Notch lapel平驳头EN打印名（英文）*中文打印名（中文）*NOTCH LAPEL平驳头

系统名 = 员工与下单界面看到的名称。打印名 = 工厂单上的名称。

Long string · permission denied

The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).

long string

ENSystem (English)*中文System (Chinese)*Notch lapel with hand-stitched pick stitching along the edge (7 mm from the edge)平驳头（边缘手工明线，距边 7 毫米）ENPrinter (English)*中文Printer (Chinese)*NOTCH LAPEL平驳头

System = the name staff and the ordering UI see. Printer = the factory bill name.

permission denied

ENSystem (English)*中文System (Chinese)*Notch lapel平驳头ENPrinter (English)*中文Printer (Chinese)*NOTCH LAPEL平驳头

Read only · needs edit designs

Both apps

One @rj/admin-kit component, two themes: the Laravel admin (navy pinned) and the DTC admin (kit v4 Midnight green), by token swap only.

Laravel admin · :root

ENSystem (English)*中文System (Chinese)*Notch lapel平驳头ENPrinter (English)*中文Printer (Chinese)*NOTCH LAPEL平驳头

System = the name staff and the ordering UI see. Printer = the factory bill name.

DTC admin · data-theme=dtc

ENSystem (English)*中文System (Chinese)*Notch lapel平驳头ENPrinter (English)*中文Printer (Chinese)*NOTCH LAPEL平驳头

System = the name staff and the ordering UI see. Printer = the factory bill name.

Contract

The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.

Export: BilingualField · @rj/admin-kit
Props: value {en, cn} · printer {en, cn} (four-label mode) · required · suggest (optional op)
States: filled · focus · cn-missing · required-error · read-only
shadcn / Radix: Label + Input ×2 (×4) · Tabs on phone
Package underneath: react-hook-form · zod
Accessibility: each input is labelled with its language; lang=zh-Hans on the cn input
API operations: admin.designs.update (name, printer_name) · admin.design-components.* · admin.suppliers.* · admin.product-quality-checks.* · admin.vision-checks.failure-reasons.translate-suggest
Phone variant: tabs, one language at a time