architecture.drawio
18.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<mxfile host="65bd71144e">
<diagram id="b5dOQcsEGuaq2pC0fEqS" name="第 1 页">
<mxGraphModel dx="1953" dy="1355" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="1600" pageHeight="1200" math="0" shadow="0">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="title" value="Manulife WeApp 项目架构图" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=32;fontStyle=1;fontFamily=Noto Sans JP;" parent="1" vertex="1">
<mxGeometry x="560" y="20" width="480" height="40" as="geometry"/>
</mxCell>
<mxCell id="version" value="版本: 1.0.0 | 更新时间: 2026-02-15 | 作者: Claude Code" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;fontColor=#666666;fontFamily=Noto Sans JP;" parent="1" vertex="1">
<mxGeometry x="560" y="60" width="480" height="30" as="geometry"/>
</mxCell>
<mxCell id="tech-stack-bg" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;strokeWidth=2;dashed=1;" parent="1" vertex="1">
<mxGeometry x="40" y="120" width="1520" height="160" as="geometry"/>
</mxCell>
<mxCell id="tech-stack-title" value="技术栈层 (Technology Stack)" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontStyle=1;fontFamily=Noto Sans JP;" parent="1" vertex="1">
<mxGeometry x="60" y="130" width="400" height="30" as="geometry"/>
</mxCell>
<mxCell id="taro-box" value="<b>Taro 4.1.9</b><br>跨端框架" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;" parent="1" vertex="1">
<mxGeometry x="60" y="180" width="200" height="80" as="geometry"/>
</mxCell>
<mxCell id="vue-box" value="<b>Vue 3.3.0</b><br>Composition API" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;" parent="1" vertex="1">
<mxGeometry x="280" y="180" width="200" height="80" as="geometry"/>
</mxCell>
<mxCell id="nutui-box" value="<b>NutUI 4.3.13</b><br>UI 组件库" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;" parent="1" vertex="1">
<mxGeometry x="500" y="180" width="200" height="80" as="geometry"/>
</mxCell>
<mxCell id="pinia-box" value="<b>Pinia 3.0.3</b><br>状态管理" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;" parent="1" vertex="1">
<mxGeometry x="720" y="180" width="200" height="80" as="geometry"/>
</mxCell>
<mxCell id="axios-box" value="<b>axios-miniprogram</b><br>HTTP 客户端" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;" parent="1" vertex="1">
<mxGeometry x="940" y="180" width="200" height="80" as="geometry"/>
</mxCell>
<mxCell id="style-box" value="<b>Less + TailwindCSS</b><br>样式系统 (375px/750px)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;" parent="1" vertex="1">
<mxGeometry x="1160" y="180" width="200" height="80" as="geometry"/>
</mxCell>
<mxCell id="mock-box" value="<b>Mock Data System</b><br>开发测试工具" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e6e6e6;strokeColor=#999999;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;" parent="1" vertex="1">
<mxGeometry x="1380" y="180" width="160" height="80" as="geometry"/>
</mxCell>
<mxCell id="core-arch-bg" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e3f2fd;strokeColor=#1976d2;strokeWidth=2;" parent="1" vertex="1">
<mxGeometry x="40" y="370" width="1520" height="320" as="geometry"/>
</mxCell>
<mxCell id="core-arch-title" value="核心架构层 (Core Architecture)" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontStyle=1;fontFamily=Noto Sans JP;" parent="1" vertex="1">
<mxGeometry x="60" y="380" width="400" height="30" as="geometry"/>
</mxCell>
<mxCell id="auth-flow" value="<b>认证流程</b><br>1. miniProgramAuth()<br>2. 401 自动刷新<br>3. sessionid 管理" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#bbdefb;strokeColor=#1976d2;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;align=left;spacingLeft=10;" parent="1" vertex="1">
<mxGeometry x="60" y="430" width="280" height="100" as="geometry"/>
</mxCell>
<mxCell id="interceptor" value="<b>请求拦截器</b><br>• 自动注入 sessionid<br>• 统一错误处理<br>• 401 重试机制" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#bbdefb;strokeColor=#1976d2;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;align=left;spacingLeft=10;" parent="1" vertex="1">
<mxGeometry x="360" y="430" width="280" height="100" as="geometry"/>
</mxCell>
<mxCell id="state-mgmt" value="<b>状态管理 (Pinia)</b><br>• main.js - 全局状态<br>• user.js - 用户状态<br>• router.js - 路由状态" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#bbdefb;strokeColor=#1976d2;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;align=left;spacingLeft=10;" parent="1" vertex="1">
<mxGeometry x="660" y="430" width="280" height="100" as="geometry"/>
</mxCell>
<mxCell id="composables" value="<b>Composables 体系</b><br>• useSectionList - 分组列表<br>• useFileOperation - 文件操作<br>• useListItemClick - 列表点击<br>• useCollectOperation - 收藏<br>• usePermission - 权限" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#bbdefb;strokeColor=#1976d2;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;align=left;spacingLeft=10;" parent="1" vertex="1">
<mxGeometry x="960" y="420" width="280" height="120" as="geometry"/>
</mxCell>
<mxCell id="utils" value="<b>工具函数</b><br>• request.js - HTTP<br>• openid.js - 认证<br>• mockData.js - Mock<br>• documentIcons.js - 图标<br>• tools.js - 通用工具" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#bbdefb;strokeColor=#1976d2;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;align=left;spacingLeft=10;" parent="1" vertex="1">
<mxGeometry x="1260" y="420" width="280" height="120" as="geometry"/>
</mxCell>
<mxCell id="arch-features" value="<b>核心特性</b><br>• 双设计宽度: NutUI 375px / 其他 750px<br>• 样式策略: TailwindCSS 80% + Less 20%<br>• 组件抽取: "第 3 次出现原则"<br>• 路径别名: @/utils, @/components, @/api 等" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1f5fe;strokeColor=#0288d1;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;align=left;spacingLeft=10;" parent="1" vertex="1">
<mxGeometry x="60" y="550" width="600" height="120" as="geometry"/>
</mxCell>
<mxCell id="api-layer" value="<b>API 层</b><br>• buildApiUrl() - 统一接口定义<br>• fn() - 请求包装器<br>• 统一返回结构: {code, data, msg}" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1f5fe;strokeColor=#0288d1;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;align=left;spacingLeft=10;" parent="1" vertex="1">
<mxGeometry x="680" y="550" width="500" height="120" as="geometry"/>
</mxCell>
<mxCell id="hooks" value="<b>自定义 Hooks</b><br>• useGo - 增强导航<br>• 自动补全路径<br>• 统一跳转逻辑" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1f5fe;strokeColor=#0288d1;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;align=left;spacingLeft=10;" parent="1" vertex="1">
<mxGeometry x="1200" y="550" width="340" height="120" as="geometry"/>
</mxCell>
<mxCell id="component-bg" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f3e5f5;strokeColor=#7b1fa2;strokeWidth=2;" parent="1" vertex="1">
<mxGeometry x="40" y="780" width="760" height="280" as="geometry"/>
</mxCell>
<mxCell id="component-title" value="可复用组件体系 (Reusable Components)" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontStyle=1;fontFamily=Noto Sans JP;" parent="1" vertex="1">
<mxGeometry x="40" y="730" width="400" height="30" as="geometry"/>
</mxCell>
<mxCell id="nav-components" value="<b>导航组件</b><br>• TabBar - 底部导航<br>• NavHeader - 导航头<br>• IconFont - 图标字体" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1bee7;strokeColor=#7b1fa2;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;align=left;spacingLeft=10;" parent="1" vertex="1">
<mxGeometry x="70" y="810" width="220" height="100" as="geometry"/>
</mxCell>
<mxCell id="list-components" value="<b>列表组件</b><br>• MaterialCard - 资料卡片<br>• ProductCard - 产品卡片<br>• SectionCard - 分组卡片" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1bee7;strokeColor=#7b1fa2;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;align=left;spacingLeft=10;" parent="1" vertex="1">
<mxGeometry x="300" y="810" width="220" height="100" as="geometry"/>
</mxCell>
<mxCell id="business-components" value="<b>业务组件</b><br>• PlanPopup - 计划书弹窗<br>• PlanFields - 表单字段集<br>• DocumentPreview - 文档预览" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1bee7;strokeColor=#7b1fa2;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;align=left;spacingLeft=10;" parent="1" vertex="1">
<mxGeometry x="530" y="810" width="240" height="100" as="geometry"/>
</mxCell>
<mxCell id="component-features" value="<b>组件设计原则</b><br>• 自包含业务逻辑（查看、收藏等）<br>• 通过事件与父组件通信<br>• Props 有类型定义和默认值<br>• <script setup> 语法" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f3e5f5;strokeColor=#7b1fa2;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;align=left;spacingLeft=10;" parent="1" vertex="1">
<mxGeometry x="60" y="950" width="720" height="100" as="geometry"/>
</mxCell>
<mxCell id="module-bg" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff9c4;strokeColor=#f57c00;strokeWidth=2;" parent="1" vertex="1">
<mxGeometry x="850" y="780" width="740" height="280" as="geometry"/>
</mxCell>
<mxCell id="module-title" value="业务模块层 (Business Modules)" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontStyle=1;fontFamily=Noto Sans JP;" parent="1" vertex="1">
<mxGeometry x="870" y="790" width="400" height="30" as="geometry"/>
</mxCell>
<mxCell id="product-module" value="<b>产品展示模块</b><br>• 首页<br>• 产品中心<br>• 产品详情" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff59d;strokeColor=#f57c00;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;align=left;spacingLeft=10;" parent="1" vertex="1">
<mxGeometry x="870" y="840" width="160" height="100" as="geometry"/>
</mxCell>
<mxCell id="material-module" value="<b>资料库模块</b><br>• 资料列表<br>• 周热门资料<br>• 文档预览" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff59d;strokeColor=#f57c00;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;align=left;spacingLeft=10;" parent="1" vertex="1">
<mxGeometry x="1050" y="840" width="160" height="100" as="geometry"/>
</mxCell>
<mxCell id="plan-module" value="<b>计划书模块</b><br>• 计划书列表<br>• 计划书提交<br>• 计划书预览" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff59d;strokeColor=#f57c00;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;align=left;spacingLeft=10;" parent="1" vertex="1">
<mxGeometry x="1230" y="840" width="160" height="100" as="geometry"/>
</mxCell>
<mxCell id="message-module" value="<b>消息系统</b><br>• 消息列表<br>• 消息详情<br>• TabBar红点" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff59d;strokeColor=#f57c00;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;align=left;spacingLeft=10;" parent="1" vertex="1">
<mxGeometry x="1410" y="840" width="160" height="100" as="geometry"/>
</mxCell>
<mxCell id="other-modules" value="<b>其他模块</b><br>• 家办服务 • 签单流程 • 用户中心（个人资料、收藏、反馈、帮助中心）" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff9c4;strokeColor=#f57c00;strokeWidth=2;fontSize=16;fontFamily=Noto Sans JP;align=left;spacingLeft=10;" parent="1" vertex="1">
<mxGeometry x="870" y="980" width="700" height="50" as="geometry"/>
</mxCell>
<mxCell id="arrow1" value="" style="endArrow=classic;html=1;strokeWidth=3;strokeColor=#666666;entryX=0.5;entryY=0;exitX=0.5;exitY=1;" parent="1" source="tech-stack-bg" target="core-arch-bg" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="800" y="280" as="sourcePoint"/>
<mxPoint x="800" y="320" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="flow-label1" value="依赖" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;fontStyle=1;fontFamily=Noto Sans JP;labelBackgroundColor=#ffffff;" parent="arrow1" vertex="1" connectable="0">
<mxGeometry x="-0.2" y="2" relative="1" as="geometry">
<mxPoint x="-10" y="-9" as="offset"/>
</mxGeometry>
</mxCell>
<mxCell id="arrow2" value="" style="endArrow=classic;html=1;strokeWidth=3;strokeColor=#666666;entryX=0.5;entryY=0;exitX=0.5;exitY=1;" parent="1" source="core-arch-bg" target="component-bg" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="420" y="600" as="sourcePoint"/>
<mxPoint x="420" y="640" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="flow-label2" value="提供基础能力" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;fontStyle=1;fontFamily=Noto Sans JP;labelBackgroundColor=#ffffff;" parent="arrow2" vertex="1" connectable="0">
<mxGeometry x="-0.2" y="2" relative="1" as="geometry">
<mxPoint x="-10" y="-9" as="offset"/>
</mxGeometry>
</mxCell>
<mxCell id="arrow3" value="" style="endArrow=classic;html=1;strokeWidth=3;strokeColor=#666666;entryX=0.5;entryY=0;exitX=0.5;exitY=1;" parent="1" source="core-arch-bg" target="module-bg" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="1190" y="600" as="sourcePoint"/>
<mxPoint x="1190" y="640" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="flow-label3" value="支撑业务" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;fontStyle=1;fontFamily=Noto Sans JP;labelBackgroundColor=#ffffff;" parent="arrow3" vertex="1" connectable="0">
<mxGeometry x="-0.2" y="2" relative="1" as="geometry">
<mxPoint x="-10" y="-9" as="offset"/>
</mxGeometry>
</mxCell>
<mxCell id="arrow4" value="" style="endArrow=classic;startArrow=classic;html=1;strokeWidth=3;strokeColor=#999999;entryX=1;entryY=0.5;exitX=0;exitY=0.5;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="80" y="1100" as="sourcePoint"/>
<mxPoint x="1590" y="1110" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="flow-label4" value="组件复用" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;fontStyle=1;fontFamily=Noto Sans JP;labelBackgroundColor=#ffffff;" parent="arrow4" vertex="1" connectable="0">
<mxGeometry x="-0.2" y="2" relative="1" as="geometry">
<mxPoint x="137" y="-9" as="offset"/>
</mxGeometry>
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>