# Page Align Insruction

Based on the diff analysis, flexibly combine editing and creation as needed — a single page may require both aligning existing code and adding new components/files:

**For existing files that need alignment:**
- Read the existing `.ets` file(s) for this page
- For each discrepancy identified in the diff, make **targeted edits** using the Edit tool:
  - Fix layout structure mismatches (wrong container type, missing nesting)
  - Add missing components
  - Remove extra components that don't exist in the Android UI
  - Fix styling (colors, sizes, spacing, shapes)
  - Fix resource references to use correct `$r('app.xxx.yyy')`

**For new files that need to be created** (new pages, new sub-components, new viewmodels/models):
- Generate new `.ets` files following the conventions discovered in Phase 1:
  - Use the same import patterns as existing pages
  - Use the same state management patterns
  - Reuse existing shared components from `components/`
  - Reuse or extend existing viewmodels/models
  - Follow the same naming conventions
- Write page files to `{harmony_project_dir}/entry/src/main/ets/pages/`
- Write component files to `{harmony_project_dir}/entry/src/main/ets/components/`
- Write viewmodel files to `{harmony_project_dir}/entry/src/main/ets/viewmodel/`
- Write model files to `{harmony_project_dir}/entry/src/main/ets/model/`
- Register any new page in the router configuration

## For all changes, apply these conversion rules:

**Resource Conversion:**
- For each resource referenced by the Android UI, find the corresponding mapping in `{harmony_project_dir}/entry/src/main/resources`
- If a needed resource does not exist, use the **`hmos-resources-convert`** skill to convert it

**Layout Conversion:**
- Consult `./references/android-to-harmonyOS-ui-layout-mapping-reference.md` for all layout container mappings and layout attribute mappings
- Apply the layout property mappings (e.g., `layout_weight` → `.layoutWeight()`, `padding` → `.padding()`, visibility handling, etc.)

**Widget Conversion:**
- Consult `./references/android-to-harmonyOS-ui-atomic-component-mapping-reference.md` for all atomic widget mappings
- Apply the detailed attribute-level mappings for each component

**Interaction Conversion:**
- Consult `./references/android-to-harmonyOS-ui-interaction-mapping-reference.md` for all event and gesture mappings
- Apply touch event mappings, click event mappings, gesture mappings, and animation mappings

**Always consult the reference files first** — they contain project-specific and comprehensive mappings that take priority over built-in knowledge.

**Styling Conversion:**
- Android `dp` → HarmonyOS `vp`
- Android `sp` → HarmonyOS `fp`
- Calculate dimensions from `bounds` in the XML: `width = x2 - x1`, `height = y2 - y1`
- Convert absolute pixel values to `vp` using the **device density recorded in the page's `meta.json`** (`density_factor`): `vp = px ÷ density_factor`. Do NOT hardcode 3x — read `density_factor` from the Android capture's `meta.json` for Android values and from the HarmonyOS capture's `meta.json` for HarmonyOS values (they may differ). Only fall back to `3.0` if `meta.json` is missing.
- Use `$r('app.color.xxx')` for colors when available in the resource list
- Use `$r('app.string.xxx')` for text strings when available in the resource list
- Use `$r('app.media.xxx')` for images when available in the resource list

**Router Conversion:**
- Convert router relationships among UIs and components
- Register new page routes in the router configuration when new pages are created
- Fix any incorrect router targets in existing pages

**Interactive Elements:**
- **Prefer real implementation over mocking**: before mocking any click event, navigation jump, or interaction, first check whether the target component or page already exists in the HarmonyOS project. If the target is already implemented, wire up the real event handler (e.g., actual `router.pushUrl()` with the correct page path). **Only mock when the related component or page has not yet been implemented** — in that case, use placeholder implementations to ensure the program compiles (e.g., `console.info('TODO: navigate to SettingsActivity — target page not yet implemented')`)