Add architecture documentation and retail system workshop PPT
This commit is contained in:
Guangfei.Zhao
@@ -0,0 +1,300 @@
|
||||
<?xml version='1.0' encoding='utf-8'?>
|
||||
<mxfile host="Electron" agent="Codex" compressed="false" pages="2">
|
||||
<diagram id="app-overview" name="App Architecture Overview">
|
||||
<mxGraphModel dx="2513" dy="1405" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="2200" pageHeight="1400" background="#FFFFFF" math="0" shadow="0">
|
||||
<root>
|
||||
<mxCell id="0" />
|
||||
<mxCell id="1" parent="0" />
|
||||
<mxCell id="ov-title" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;fontSize=30;fontStyle=1;fontColor=#0f172a;" value="Continental Retail APP Architecture Overview" vertex="1">
|
||||
<mxGeometry height="40" width="860" x="48" y="28" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-subtitle" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;fontSize=14;fontColor=#475569;" value="App-only view: Flutter is the host shell; migrated mini-program modules and native pages render directly, while Local H5 (static pages) and F6 remote H5 stay as WebView hybrid branches, and platform adapters stay behind the native plugin layer." vertex="1">
|
||||
<mxGeometry height="24" width="1260" x="48" y="72" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-meta-bg" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#d1d5db;strokeWidth=1.3;" value="" vertex="1">
|
||||
<mxGeometry height="84" width="280" x="1860" y="24" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-meta" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=top;fontSize=12;fontColor=#374151;spacingTop=8;spacingLeft=10;" value="Version: v1.0<br>Date: 2026-06-26<div>Page: App Architecture Overview</div>" vertex="1">
|
||||
<mxGeometry height="64" width="250" x="1870" y="32" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-boundary" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1.4;" value="" vertex="1">
|
||||
<mxGeometry height="1160" width="2090" x="48" y="132" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-host-zone" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#eff6ff;strokeColor=#93c5fd;strokeWidth=1.6;" value="" vertex="1">
|
||||
<mxGeometry height="980" width="560" x="88" y="188" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-host-title" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;fontSize=24;fontStyle=1;fontColor=#1d4ed8;" value="Flutter App Runtime" vertex="1">
|
||||
<mxGeometry height="30" width="280" x="116" y="212" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-bridge-zone" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#eef6ff;strokeColor=#60a5fa;strokeWidth=1.6;" value="" vertex="1">
|
||||
<mxGeometry height="980" width="640" x="700" y="188" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-bridge-title" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;fontSize=24;fontStyle=1;fontColor=#2563eb;" value="Bridge and Plugin Layers" vertex="1">
|
||||
<mxGeometry height="30" width="340" x="728" y="212" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-platform-zone" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8fafc;strokeColor=#d1d5db;strokeWidth=1.6;" value="" vertex="1">
|
||||
<mxGeometry height="980" width="700" x="1392" y="188" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-platform-title" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;fontSize=24;fontStyle=1;fontColor=#475569;" value="Platform Adapters" vertex="1">
|
||||
<mxGeometry height="30" width="260" x="1420" y="212" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-shell" parent="1" style="rounded=1;arcSize=20;html=1;whiteSpace=wrap;fillColor=#bfdbfe;strokeColor=#1d4ed8;strokeWidth=1.6;fontSize=18;fontStyle=1;fontColor=#1e293b;" value="Flutter Host Shell App entry, navigation host, lifecycle owner" vertex="1">
|
||||
<mxGeometry height="92" width="440" x="150" y="286" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-native" parent="1" style="rounded=1;arcSize=20;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#1d4ed8;strokeWidth=1.5;fontSize=16;fontColor=#1e293b;" value="Flutter Native Pages App-owned screens and interactions" vertex="1">
|
||||
<mxGeometry height="92" width="145" x="150" y="602" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-migrated" parent="1" style="rounded=1;arcSize=20;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#1d4ed8;strokeWidth=1.5;fontSize=16;fontColor=#1e293b;" value="Migrated Mini-Program Modules Native Flutter screens rebuilt from former mini-programs" vertex="1">
|
||||
<mxGeometry height="92" width="145" x="307" y="602" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-local" parent="1" style="rounded=1;arcSize=20;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#2563eb;strokeWidth=1.5;fontSize=16;fontColor=#1e293b;" value="Local H5 in WebView Bundled static HTML5 content" vertex="1">
|
||||
<mxGeometry height="92" width="146" x="464" y="602" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-f6" parent="1" style="rounded=1;arcSize=20;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#ea580c;strokeWidth=1.5;fontSize=16;fontColor=#1e293b;" value="F6 Remote H5 in WebView Embedded supplier pages inside the app" vertex="1">
|
||||
<mxGeometry height="92" width="440" x="150" y="870" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-bridge" parent="1" style="rounded=1;arcSize=20;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#0ea5e9;strokeWidth=1.5;fontSize=16;fontColor=#1e293b;" value="JSBridge Contract Allowlisted JS <-> Flutter messages" vertex="1">
|
||||
<mxGeometry height="92" width="500" x="772" y="304" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-plugin" parent="1" style="rounded=1;arcSize=20;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#1d4ed8;strokeWidth=1.6;fontSize=16;fontStyle=1;fontColor=#1e293b;" value="Flutter Native Plugin Layer Plugin routing and platform channel boundary" vertex="1">
|
||||
<mxGeometry height="92" width="500" x="772" y="450" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-cap" parent="1" style="rounded=1;arcSize=20;html=1;whiteSpace=wrap;fillColor=#dbeafe;strokeColor=#2563eb;strokeWidth=1.5;fontSize=16;fontColor=#1e293b;" value="App-Owned Native Capabilities Scan / Camera / Upload / Bluetooth / Notification / Storage / Share / Payment" vertex="1">
|
||||
<mxGeometry height="100" width="500" x="772" y="598" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-webview" parent="1" style="rounded=1;arcSize=20;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#38bdf8;strokeWidth=1.5;fontSize=16;fontColor=#1e293b;" value="WebView Container Hosts Local H5 and F6 H5 with unified runtime control" vertex="1">
|
||||
<mxGeometry height="92" width="500" x="772" y="748" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-ios" parent="1" style="rounded=1;arcSize=20;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#2563eb;strokeWidth=1.6;fontSize=16;fontStyle=1;fontColor=#1e293b;" value="iOS Native Adapter WKWebView and iOS native implementations" vertex="1">
|
||||
<mxGeometry height="92" width="250" x="1460" y="304" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-android" parent="1" style="rounded=1;arcSize=20;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#2563eb;strokeWidth=1.6;fontSize=16;fontStyle=1;fontColor=#1e293b;" value="Android Native Adapter Android WebView and native Android implementations" vertex="1">
|
||||
<mxGeometry height="92" width="250" x="1770" y="304" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-harmony" parent="1" style="rounded=1;arcSize=20;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#94a3b8;strokeWidth=1.5;dashed=1;dashPattern=6 4;fontSize=16;fontColor=#475569;" value="Harmony Adapter (Later) Future platform adaptation after Phase 1" vertex="1">
|
||||
<mxGeometry height="92" width="250" x="1615" y="462" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-phase-note" parent="1" style="rounded=1;arcSize=20;html=1;whiteSpace=wrap;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1.4;fontSize=15;fontColor=#334155;" value="Platform principle iOS / Android first. Harmony adapts only the platform layer later." vertex="1">
|
||||
<mxGeometry height="84" width="500" x="1490" y="620" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-legend-bg" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#d1d5db;strokeWidth=1.3;" value="" vertex="1">
|
||||
<mxGeometry height="72" width="980" x="88" y="1200" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-legend-title" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;fontSize=18;fontStyle=1;fontColor=#111827;" value="Legend" vertex="1">
|
||||
<mxGeometry height="24" width="100" x="114" y="1220" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-leg-blue" parent="1" style="shape=line;html=1;strokeColor=#2563eb;strokeWidth=2;" value="" vertex="1">
|
||||
<mxGeometry height="10" width="80" x="114" y="1252" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-leg-blue-t" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;fontSize=13;fontColor=#111827;" value="Primary App path" vertex="1">
|
||||
<mxGeometry height="24" width="150" x="206" y="1242" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-leg-orange" parent="1" style="shape=line;html=1;strokeColor=#ea580c;strokeWidth=2;dashed=1;dashPattern=8 6;" value="" vertex="1">
|
||||
<mxGeometry height="10" width="80" x="394" y="1252" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-leg-orange-t" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;fontSize=13;fontColor=#111827;" value="F6 WebView branch" vertex="1">
|
||||
<mxGeometry height="24" width="170" x="486" y="1242" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-leg-gray" parent="1" style="shape=line;html=1;strokeColor=#94a3b8;strokeWidth=2;dashed=1;dashPattern=6 4;" value="" vertex="1">
|
||||
<mxGeometry height="10" width="80" x="700" y="1252" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-leg-gray-t" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;fontSize=13;fontColor=#111827;" value="Future platform path" vertex="1">
|
||||
<mxGeometry height="24" width="180" x="792" y="1242" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-e1" edge="1" parent="1" source="ov-shell" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#1e293b;strokeWidth=1;endArrow=diamond;endFill=1;;exitX=0.165;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" target="ov-native" value="">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-e-mig" edge="1" parent="1" source="ov-shell" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#1e293b;strokeWidth=1;endArrow=diamond;endFill=1;;exitX=0.522;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" target="ov-migrated" value="">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-e2" edge="1" parent="1" source="ov-shell" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#1e293b;strokeWidth=1;endArrow=diamond;endFill=1;;exitX=0.879;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" target="ov-local" value="">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-e3" edge="1" parent="1" source="ov-shell" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#1e293b;strokeWidth=1;endArrow=diamond;endFill=1;;exitX=0.488;exitY=1;exitDx=0;exitDy=0;entryX=0.488;entryY=0;entryDx=0;entryDy=0;" target="ov-f6" value="">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-e4" edge="1" parent="1" source="ov-local" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#2563eb;strokeWidth=1.4;endArrow=block;endFill=1;;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.75;entryDx=0;entryDy=0;" target="ov-bridge" value="JS -> Flutter bridge">
|
||||
<mxGeometry relative="1" as="geometry">
|
||||
<Array as="points">
|
||||
<mxPoint x="650" y="625" /><mxPoint x="650" y="373" /></Array>
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="ov-e5" edge="1" parent="1" source="ov-f6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#ea580c;strokeWidth=1.4;dashed=1;dashPattern=8 6;endArrow=block;endFill=1;;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.85;entryDx=0;entryDy=0;" target="ov-bridge" value="JS -> Flutter bridge">
|
||||
<mxGeometry relative="1" as="geometry">
|
||||
<Array as="points">
|
||||
<mxPoint x="690" y="893" /><mxPoint x="690" y="382" /></Array>
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="ov-e6" edge="1" parent="1" source="ov-native" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#1e293b;strokeWidth=1;endArrow=block;endFill=1;;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" target="ov-plugin" value="native interactions">
|
||||
<mxGeometry relative="1" as="geometry">
|
||||
<Array as="points">
|
||||
<mxPoint x="330" y="625" /><mxPoint x="330" y="496" /></Array>
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="ov-e-mig-plugin" edge="1" parent="1" source="ov-migrated" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#1e293b;strokeWidth=1;endArrow=block;endFill=1;;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.75;entryDx=0;entryDy=0;" target="ov-plugin" value="native interactions">
|
||||
<mxGeometry relative="1" as="geometry">
|
||||
<Array as="points">
|
||||
<mxPoint x="500" y="625" /><mxPoint x="500" y="519" /></Array>
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="ov-e7" edge="1" parent="1" source="ov-bridge" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#0ea5e9;strokeWidth=1.4;endArrow=block;endFill=1;;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" target="ov-plugin" value="message routing">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-e8" edge="1" parent="1" source="ov-plugin" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#1d4ed8;strokeWidth=1.5;endArrow=block;endFill=1;;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" target="ov-cap" value="Flutter -> native plugin">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ov-e9" edge="1" parent="1" source="ov-local" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#2563eb;strokeWidth=1.2;endArrow=block;endFill=1;;exitX=1;exitY=0.75;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;" target="ov-webview" value="local container">
|
||||
<mxGeometry relative="1" as="geometry">
|
||||
<Array as="points">
|
||||
<mxPoint x="650" y="671" /><mxPoint x="650" y="771" /></Array>
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="ov-e10" edge="1" parent="1" source="ov-f6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#ea580c;strokeWidth=1.2;dashed=1;dashPattern=8 6;endArrow=block;endFill=1;;exitX=1;exitY=0.75;exitDx=0;exitDy=0;entryX=0;entryY=0.75;entryDx=0;entryDy=0;" target="ov-webview" value="remote container">
|
||||
<mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="730" y="939" /><mxPoint x="730" y="817" /></Array></mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="ov-e11" edge="1" parent="1" source="ov-cap" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#2563eb;strokeWidth=1.5;endArrow=block;endFill=1;;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" target="ov-ios" value="current adapter">
|
||||
<mxGeometry relative="1" as="geometry">
|
||||
<Array as="points">
|
||||
<mxPoint x="1350" y="623" /><mxPoint x="1350" y="350" /></Array>
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="ov-e12" edge="1" parent="1" source="ov-cap" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#2563eb;strokeWidth=1.5;endArrow=block;endFill=1;;exitX=1;exitY=0.75;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" target="ov-android" value="current adapter">
|
||||
<mxGeometry relative="1" as="geometry">
|
||||
<Array as="points">
|
||||
<mxPoint x="1420" y="673" /><mxPoint x="1420" y="429" /><mxPoint x="1895" y="429" /></Array>
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="ov-e13" edge="1" parent="1" source="ov-cap" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#94a3b8;strokeWidth=1.5;dashed=1;dashPattern=6 4;endArrow=block;endFill=1;;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" target="ov-harmony" value="later adapter">
|
||||
<mxGeometry relative="1" as="geometry">
|
||||
<Array as="points">
|
||||
<mxPoint x="1380" y="648" /><mxPoint x="1380" y="508" /></Array>
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
</root>
|
||||
</mxGraphModel>
|
||||
</diagram>
|
||||
<diagram id="app-detailed-layers" name="App Detailed Layering">
|
||||
<mxGraphModel dx="2871" dy="1606" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="2200" pageHeight="1400" background="#FFFFFF" math="0" shadow="0">
|
||||
<root>
|
||||
<mxCell id="0" />
|
||||
<mxCell id="1" parent="0" />
|
||||
<mxCell id="dt-title" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;fontSize=30;fontStyle=1;fontColor=#0f172a;" value="Continental Retail APP Detailed Layering" vertex="1">
|
||||
<mxGeometry height="40" width="780" x="48" y="28" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-subtitle" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;fontSize=14;fontColor=#475569;" value="Pure App-internal layering: runtime shell, native pages plus migrated mini-program modules render directly, Local H5 and F6 remote H5 stay as WebView hybrid branches through the bridge contract, then native plugin boundary, capabilities, and platform adapters." vertex="1">
|
||||
<mxGeometry height="24" width="1280" x="48" y="72" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-meta-bg" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#d1d5db;strokeWidth=1.3;" value="" vertex="1">
|
||||
<mxGeometry height="84" width="280" x="1860" y="24" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-meta" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=top;fontSize=12;fontColor=#374151;spacingTop=8;spacingLeft=10;" value="Version: v1.0<br>Date: 2026-06-26<div>Page: App Detailed Layering</div>" vertex="1">
|
||||
<mxGeometry height="64" width="250" x="1870" y="32" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-boundary" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1.4;" value="" vertex="1">
|
||||
<mxGeometry height="1180" width="2090" x="48" y="136" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-l1" parent="1" style="rounded=1;arcSize=20;html=1;whiteSpace=wrap;fillColor=#bfdbfe;strokeColor=#1d4ed8;strokeWidth=1.8;fontSize=18;fontStyle=1;fontColor=#1e293b;" value="Layer 1 - Flutter Host Shell Entry point, navigation container, lifecycle owner" vertex="1">
|
||||
<mxGeometry height="88" width="1680" x="250" y="220" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-l2a" parent="1" style="rounded=1;arcSize=18;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#1d4ed8;strokeWidth=1.5;fontSize=16;fontColor=#1e293b;" value="Layer 2A - Flutter Native Pages App-owned flows and UI interactions" vertex="1">
|
||||
<mxGeometry height="92" width="400" x="210" y="374" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-l2m" parent="1" style="rounded=1;arcSize=18;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#1d4ed8;strokeWidth=1.5;fontSize=16;fontColor=#1e293b;" value="Layer 2B - Migrated Mini-Program Modules Native Flutter screens rebuilt from former mini-programs" vertex="1">
|
||||
<mxGeometry height="92" width="400" x="646" y="374" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-l2b" parent="1" style="rounded=1;arcSize=18;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#2563eb;strokeWidth=1.5;fontSize=16;fontColor=#1e293b;" value="Layer 2C - Local H5 WebView Bundled static HTML5 content" vertex="1">
|
||||
<mxGeometry height="92" width="400" x="1082" y="374" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-l2c" parent="1" style="rounded=1;arcSize=18;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#ea580c;strokeWidth=1.5;fontSize=16;fontColor=#1e293b;" value="Layer 2D - F6 Remote H5 WebView Embedded remote H5 pages inside the app" vertex="1">
|
||||
<mxGeometry height="92" width="400" x="1518" y="374" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-l3" parent="1" style="rounded=1;arcSize=18;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#0ea5e9;strokeWidth=1.6;fontSize=16;fontColor=#1e293b;" value="Layer 3 - JSBridge Contract Allowlisted commands, request / response messages, runtime trace propagation" vertex="1">
|
||||
<mxGeometry height="92" width="1680" x="250" y="544" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-l4" parent="1" style="rounded=1;arcSize=18;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#1d4ed8;strokeWidth=1.6;fontSize=16;fontStyle=1;fontColor=#1e293b;" value="Layer 4 - Flutter Native Plugin Layer Platform channels, plugin routing, and capability abstraction boundary" vertex="1">
|
||||
<mxGeometry height="92" width="1680" x="250" y="714" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-l5" parent="1" style="rounded=1;arcSize=18;html=1;whiteSpace=wrap;fillColor=#dbeafe;strokeColor=#2563eb;strokeWidth=1.6;fontSize=16;fontColor=#1e293b;" value="Layer 5 - App-Owned Native Capabilities Scan / Camera / Upload / Bluetooth / Notification / Storage / Share / Payment" vertex="1">
|
||||
<mxGeometry height="92" width="1680" x="250" y="884" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-l6a" parent="1" style="rounded=1;arcSize=18;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#2563eb;strokeWidth=1.5;fontSize=16;fontStyle=1;fontColor=#1e293b;" value="Layer 6A - iOS Adapter WKWebView + native iOS implementations" vertex="1">
|
||||
<mxGeometry height="92" width="500" x="250" y="1054" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-l6b" parent="1" style="rounded=1;arcSize=18;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#2563eb;strokeWidth=1.5;fontSize=16;fontStyle=1;fontColor=#1e293b;" value="Layer 6B - Android Adapter Android WebView + native Android implementations" vertex="1">
|
||||
<mxGeometry height="92" width="500" x="870" y="1054" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-l6c" parent="1" style="rounded=1;arcSize=18;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#94a3b8;strokeWidth=1.5;dashed=1;dashPattern=6 4;fontSize=16;fontColor=#475569;" value="Layer 6C - Harmony Adapter (Later) Future platform adaptation after iOS / Android" vertex="1">
|
||||
<mxGeometry height="92" width="440" x="1490" y="1054" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-note" parent="1" style="rounded=1;arcSize=18;html=1;whiteSpace=wrap;fillColor=#ffffff;strokeColor=#cbd5e1;strokeWidth=1.4;fontSize=15;fontColor=#334155;" value="App-only principle This diagram describes only the internal App runtime and platform adaptation structure." vertex="1">
|
||||
<mxGeometry height="70" width="980" x="610" y="1186" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-leg-bg" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#d1d5db;strokeWidth=1.3;" value="" vertex="1">
|
||||
<mxGeometry height="64" width="920" x="180" y="1268" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-leg-title" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;fontSize=16;fontStyle=1;fontColor=#111827;" value="Legend" vertex="1">
|
||||
<mxGeometry height="24" width="90" x="204" y="1288" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-leg-blue" parent="1" style="shape=line;html=1;strokeColor=#2563eb;strokeWidth=2;" value="" vertex="1">
|
||||
<mxGeometry height="10" width="80" x="294" y="1300" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-leg-blue-t" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;fontSize=13;fontColor=#111827;" value="Current platform path" vertex="1">
|
||||
<mxGeometry height="24" width="180" x="386" y="1290" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-leg-orange" parent="1" style="shape=line;html=1;strokeColor=#ea580c;strokeWidth=2;dashed=1;dashPattern=8 6;" value="" vertex="1">
|
||||
<mxGeometry height="10" width="80" x="620" y="1300" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-leg-orange-t" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;fontSize=13;fontColor=#111827;" value="F6 WebView branch" vertex="1">
|
||||
<mxGeometry height="24" width="170" x="712" y="1290" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-leg-gray" parent="1" style="shape=line;html=1;strokeColor=#94a3b8;strokeWidth=2;dashed=1;dashPattern=6 4;" value="" vertex="1">
|
||||
<mxGeometry height="10" width="80" x="920" y="1300" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-leg-gray-t" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;fontSize=13;fontColor=#111827;" value="Future Harmony path" vertex="1">
|
||||
<mxGeometry height="24" width="180" x="1012" y="1290" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-e1" edge="1" parent="1" source="dt-l1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#1e293b;strokeWidth=1;endArrow=diamond;endFill=1;;exitX=0.0952;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" target="dt-l2a" value="">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-e-mig" edge="1" parent="1" source="dt-l1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#1e293b;strokeWidth=1;endArrow=diamond;endFill=1;;exitX=0.3548;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" target="dt-l2m" value="">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-e2" edge="1" parent="1" source="dt-l1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#1e293b;strokeWidth=1;endArrow=diamond;endFill=1;;exitX=0.6143;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" target="dt-l2b" value="">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-e3" edge="1" parent="1" source="dt-l1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#1e293b;strokeWidth=1;endArrow=diamond;endFill=1;;exitX=0.8738;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" target="dt-l2c" value="">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-e4" edge="1" parent="1" source="dt-l2b" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#2563eb;strokeWidth=1.5;endArrow=block;endFill=1;;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.6143;entryY=0;entryDx=0;entryDy=0;" target="dt-l3" value="JS -> Flutter bridge">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-e5" edge="1" parent="1" source="dt-l2c" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#ea580c;strokeWidth=1.5;dashed=1;dashPattern=8 6;endArrow=block;endFill=1;;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.8738;entryY=0;entryDx=0;entryDy=0;" target="dt-l3" value="JS -> Flutter bridge">
|
||||
<mxGeometry relative="1" as="geometry">
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="dt-e6" edge="1" parent="1" source="dt-l2a" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#1e293b;strokeWidth=1;endArrow=block;endFill=1;;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.0952;entryY=0;entryDx=0;entryDy=0;" target="dt-l4" value="native interactions">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-e-mig-l4" edge="1" parent="1" source="dt-l2m" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#1e293b;strokeWidth=1;endArrow=block;endFill=1;;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.3548;entryY=0;entryDx=0;entryDy=0;" target="dt-l4" value="native interactions">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-e7" edge="1" parent="1" source="dt-l3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#0ea5e9;strokeWidth=1.4;endArrow=block;endFill=1;;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" target="dt-l4" value="message dispatch">
|
||||
<mxGeometry relative="1" as="geometry">
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="dt-e8" edge="1" parent="1" source="dt-l4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#1d4ed8;strokeWidth=1.5;endArrow=block;endFill=1;;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" target="dt-l5" value="Flutter -> native plugin">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-e9" edge="1" parent="1" source="dt-l5" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#2563eb;strokeWidth=1.5;endArrow=block;endFill=1;;exitX=0.149;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" target="dt-l6a" value="current adapter">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-e10" edge="1" parent="1" source="dt-l5" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#2563eb;strokeWidth=1.5;endArrow=block;endFill=1;;exitX=0.518;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" target="dt-l6b" value="current adapter">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="dt-e11" edge="1" parent="1" source="dt-l5" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#94a3b8;strokeWidth=1.5;dashed=1;dashPattern=6 4;endArrow=block;endFill=1;;exitX=0.869;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" target="dt-l6c" value="later adapter">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
</root>
|
||||
</mxGraphModel>
|
||||
</diagram>
|
||||
</mxfile>
|
||||
Reference in New Issue
Block a user