all_test.html
83.3 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>UrbanOps 全域平台 · 技术架构全景分享</title>
<link rel="stylesheet" href="ppt-assets/fonts.css">
<link rel="stylesheet" href="ppt-assets/base.css">
<link rel="stylesheet" href="ppt-assets/animations.css">
<link rel="stylesheet" href="ppt-assets/style.css">
<style>
.tpl-tech-sharing .h1{font-size:68px;line-height:1.05}
.tpl-tech-sharing .h2{font-size:44px}
.tpl-tech-sharing .slide{padding:56px 72px}
/* SVG diagram area */
.svg-area{width:100%;max-width:1050px;flex:1;display:flex;align-items:center;justify-content:center;margin-top:8px}
.svg-area svg{width:100%;height:100%;max-height:480px}
/* Architecture layers */
.arch-layers{margin-top:14px;display:grid;grid-template-rows:auto auto auto auto;gap:12px}
.arch-layers .al{display:grid;grid-template-columns:110px 1fr;align-items:stretch;gap:12px}
.arch-layers .al .al-name{display:flex;align-items:center;justify-content:center;background:var(--surface-2);border-radius:var(--radius);padding:12px 10px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:var(--accent);text-align:center;border:1px solid var(--border)}
.arch-layers .al .al-cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.arch-layers .al .acell{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 10px;text-align:center}
.arch-layers .al .acell .aci{font-size:20px;margin-bottom:2px}
.arch-layers .al .acell h4{font-size:13px;color:#fff;margin:3px 0 1px}
.arch-layers .al .acell p{font-size:10px;color:var(--text-3);margin:0}
.arch-layers .al.hl .acell{border-top:3px solid var(--accent);border-color:rgba(126,231,135,.35)}
.arch-layers .al.fw .acell{border-top:3px solid var(--accent-2);border-color:rgba(121,192,255,.35)}
.biz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.biz-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 18px}
.biz-card .biz-icon{font-size:32px;margin-bottom:8px}
.biz-card h4{font-size:17px;color:#fff;margin-bottom:6px}
.biz-card p{font-size:12px;color:var(--text-2);line-height:1.6;margin:0}
.biz-card .biz-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.biz-card .biz-tags span{font-family:'JetBrains Mono',monospace;font-size:10px;padding:2px 8px;border-radius:4px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
.biz-card.ac{border-top:3px solid var(--accent)}
.biz-card.blue{border-top:3px solid var(--accent-2)}
.biz-card.purple{border-top:3px solid #d2a8ff}
.col2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:14px}
.col2 .box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.flow-steps{display:flex;align-items:center;gap:8px;margin-top:14px}
.flow-steps .fs{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 12px;text-align:center}
.flow-steps .fs .fs-icon{font-size:26px;margin-bottom:4px}
.flow-steps .fs h4{font-size:13px;color:#fff;margin:3px 0}
.flow-steps .fs p{font-size:10px;color:var(--text-3);margin:0}
.flow-steps .fs-arr{color:var(--accent);font-size:20px;font-family:'JetBrains Mono',monospace;flex-shrink:0}
.flow-steps .fs.hl{border-top:3px solid var(--accent)}
.tg{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.tg .tgc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 12px;text-align:center}
.tg .tgc .tgci{font-size:28px;margin-bottom:4px}
.tg .tgc h4{font-size:14px;color:#fff;margin:4px 0}
.tg .tgc .tgt{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:8px}
.tg .tgc .tgt span{font-family:'JetBrains Mono',monospace;font-size:10px;padding:2px 7px;border-radius:4px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
.timeline{margin-top:14px}
.timeline .tl-item{display:grid;grid-template-columns:100px 1fr;gap:16px;padding:14px 0;border-bottom:1px dashed var(--border)}
.timeline .tl-item .tl-phase{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent);font-weight:600}
.timeline .tl-item .tl-body h4{font-size:16px;color:#fff;margin:0 0 4px}
.timeline .tl-item .tl-body p{font-size:12px;color:var(--text-2);margin:0}
.fw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.fw-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 14px}
.fw-card .fwi{font-size:22px;margin-bottom:6px}
.fw-card h4{font-size:14px;color:#fff;margin:4px 0}
.fw-card p{font-size:11px;color:var(--text-3);margin:0}
.fw-card.hl{border-top:2px solid var(--accent-2)}
.roadmap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.roadmap-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 18px}
.roadmap-card .r-period{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);font-weight:600;margin-bottom:8px}
.roadmap-card h4{font-size:18px;color:#fff;margin-bottom:8px}
.roadmap-card ul{margin:0;padding-left:16px;font-size:12px;color:var(--text-2);line-height:1.8}
.roadmap-card.now{border-top:3px solid var(--accent)}
.roadmap-card.next{border-top:3px solid var(--accent-2)}
.roadmap-card.future{border-top:3px solid #d2a8ff}
.stats-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:14px}
.stat-item{text-align:center;padding:18px 10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.stat-item .stat-num{font-size:38px;font-weight:800;color:var(--accent);font-family:'JetBrains Mono',monospace}
.stat-item .stat-label{font-size:12px;color:var(--text-2);margin-top:4px}
.invoc-flow{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.invoc-flow .invoc-row{display:flex;align-items:center;gap:8px}
.invoc-flow .invoc-row .ir-label{width:100px;text-align:right;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);font-weight:600;flex-shrink:0}
.invoc-flow .invoc-row .ir-items{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.invoc-flow .invoc-row .ir-items span{font-family:'JetBrains Mono',monospace;font-size:10px;padding:4px 10px;border-radius:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
.invoc-flow .ir-arrow{color:var(--text-3);font-size:16px;font-family:'JetBrains Mono',monospace;text-align:center;padding:2px 0}
.deploy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.deploy-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 16px;text-align:center}
.deploy-card .di{font-size:34px;margin-bottom:8px}
.deploy-card h4{font-size:16px;color:#fff;margin-bottom:6px}
.deploy-card ul{margin:0;padding:0;list-style:none;font-size:11px;color:var(--text-2);line-height:1.8}
.deploy-card.ci{border-top:3px solid var(--accent)}
.deploy-card.cn{border-top:3px solid var(--accent-2)}
.deploy-card.mon{border-top:3px solid #d2a8ff}
.code-text{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--text-2);background:var(--surface-2);padding:8px 14px;border-radius:8px;border:1px solid var(--border);display:inline-block}
/* Layer stack (from file1) */
.layer-stack{display:flex;flex-direction:column;gap:10px;width:100%;max-width:1000px;margin-top:14px}
.layer-stack .layer{display:flex;align-items:center;gap:20px;padding:14px 22px;border-radius:12px;background:var(--surface);border:1px solid var(--border)}
.layer-stack .layer-label{font-weight:700;font-size:12px;min-width:110px;text-align:right;color:var(--accent);font-family:'JetBrains Mono',monospace}
.layer-stack .layer-content{display:flex;gap:6px;flex-wrap:wrap}
/* Evolution flow */
.evo-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.evo-flow .evo-box{background:var(--surface);border:2px solid var(--border);border-radius:14px;padding:16px 24px;text-align:center;font-weight:600;min-width:120px;font-size:13px}
.evo-flow .evo-box.accent{border-color:var(--accent);background:rgba(126,231,135,.08)}
.evo-flow .evo-box.purple{border-color:#d2a8ff;background:rgba(210,168,255,.08)}
.evo-flow .evo-box.green{border-color:var(--accent-2);background:rgba(121,192,255,.08)}
.evo-flow .evo-arrow{font-size:1.6em;color:var(--text-3)}
</style>
</head>
<body class="tpl-tech-sharing">
<div class="deck">
<!-- ====== 1. Cover ====== -->
<section class="slide" data-title="Cover">
<p class="kicker">urbanops · tech-sharing</p>
<h1 class="h1 anim-fade-up" data-anim="fade-up">城市运营全域平台<br><span style="background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent">技术架构全景解析</span></h1>
<p class="lede mt-m">业务架构 × 技术架构 × 系统架构 × 部署架构 — 一次讲透全域平台。</p>
<div class="speaker"><div class="av"></div><div><b>架构组</b><span>platform infra · 60 min + Q&A</span></div></div>
<div class="deck-footer"><span class="mono">#spring-boot #smart-garden #urbanops #architecture #microservices</span><span class="slide-number" data-current="1" data-total="26"></span></div>
</section>
<!-- ====== 2. Agenda ====== -->
<section class="slide" data-title="Agenda">
<p class="kicker">agenda.yaml</p>
<h2 class="h2">今日路线图</h2>
<div class="stack mt-l">
<div class="agenda-row"><span class="num">01</span><span class="t">项目概述与业务架构全景</span><span class="d">~6min</span></div>
<div class="agenda-row"><span class="num">02</span><span class="t">业务布局：园林 · 工单 · BPM · 全局</span><span class="d">~10min</span></div>
<div class="agenda-row"><span class="num">03</span><span class="t">系统架构总览 & 模块依赖关系</span><span class="d">~6min</span></div>
<div class="agenda-row"><span class="num">04</span><span class="t">技术架构分层 & 基础设施层</span><span class="d">~6min</span></div>
<div class="agenda-row"><span class="num">05</span><span class="t">核心技术栈 & 数据存储策略</span><span class="d">~6min</span></div>
<div class="agenda-row"><span class="num">06</span><span class="t">数据流 & 模块调用逻辑</span><span class="d">~6min</span></div>
<div class="agenda-row"><span class="num">07</span><span class="t">安全架构 & 可观测性</span><span class="d">~6min</span></div>
<div class="agenda-row"><span class="num">08</span><span class="t">部署架构 & 后续演进规划</span><span class="d">~6min</span></div>
<div class="agenda-row"><span class="num">09</span><span class="t">总结 & Q&A</span><span class="d">~5min</span></div>
</div>
</section>
<!-- ====== 3. Project Overview ====== -->
<section class="slide" data-title="Project Overview">
<p class="kicker">// overview</p>
<h2 class="h2">UrbanOps 全域平台：<br>智慧城市运营管理底座</h2>
<p class="lede">基于 RuoYi-Vue-Pro 演进而来，面向城市园林绿化、工单调度、流程协同的综合运营管理平台。模块化单体架构向微服务演进中。</p>
<div class="stats-row mt-l">
<div class="stat-item anim-fade-up" data-anim="fade-up"><div class="stat-num">17</div><div class="stat-label">Maven 模块</div></div>
<div class="stat-item anim-fade-up" data-anim="fade-up" style="animation-delay:.05s"><div class="stat-num">7</div><div class="stat-label">激活业务模块</div></div>
<div class="stat-item anim-fade-up" data-anim="fade-up" style="animation-delay:.1s"><div class="stat-num">15</div><div class="stat-label">框架 Starter</div></div>
<div class="stat-item anim-fade-up" data-anim="fade-up" style="animation-delay:.15s"><div class="stat-num">10+</div><div class="stat-label">数据库支持</div></div>
<div class="stat-item anim-fade-up" data-anim="fade-up" style="animation-delay:.2s"><div class="stat-num">3.5.5</div><div class="stat-label">Spring Boot</div></div>
</div>
<div class="col2 mt-l">
<div class="box" style="border-top:3px solid var(--accent)">
<h4 style="color:#fff;margin:0 0 8px">后端技术基石</h4>
<p class="dim" style="font-size:13px;line-height:1.7">Java 17 · Spring Boot 3.5.5 · MyBatis Plus 3.5.14 · Spring Security 6.x · Flowable 7.0 · Redisson 3.51 · SkyWalking 9.5 · RocketMQ · Vert.x + MQTT · PF4J 插件框架</p>
</div>
<div class="box" style="border-top:3px solid var(--accent-2)">
<h4 style="color:#fff;margin:0 0 8px">前端生态 & 核心能力</h4>
<p class="dim" style="font-size:13px;line-height:1.7">Vue3 + Element Plus / Vben 双管理后台 · uni-app 移动端 · 大屏报表设计器 · 多租户 SaaS · IoT 设备接入 · 代码生成器 · Spring AI 集成</p>
</div>
</div>
</section>
<!-- ====== 4. Business Architecture Overview ====== -->
<section class="slide" data-title="Business Architecture">
<p class="kicker">business · architecture</p>
<h2 class="h2">业务架构全景：<br>四大核心域 + 两大支撑域</h2>
<div class="biz-grid">
<div class="biz-card ac anim-fade-up" data-anim="fade-up">
<div class="biz-icon">🌳</div><h4>智慧园林管理</h4>
<p>树木资产管理、巡检计划、养护计划、绩效评估、物料出入库、机械成本核算</p>
<div class="biz-tags"><span>Garden</span><span>巡检</span><span>养护</span><span>绩效</span></div>
</div>
<div class="biz-card blue anim-fade-up" data-anim="fade-up" style="animation-delay:.05s">
<div class="biz-icon">📋</div><h4>工单调度系统</h4>
<p>事件上报、工单流转、物料明细、附件管理、地理位置编码、园林事件映射</p>
<div class="biz-tags"><span>Workorder</span><span>事件</span><span>物料</span></div>
</div>
<div class="biz-card purple anim-fade-up" data-anim="fade-up" style="animation-delay:.1s">
<div class="biz-icon">🔄</div><h4>工作流引擎</h4>
<p>Flowable 驱动，仿钉钉/飞书 + BPMN 双设计器，会签、或签、转办、委派、加签全覆盖</p>
<div class="biz-tags"><span>BPM</span><span>Flowable</span><span>审批</span></div>
</div>
<div class="biz-card ac anim-fade-up" data-anim="fade-up" style="animation-delay:.15s">
<div class="biz-icon">🌐</div><h4>全局业务管理</h4>
<p>问题上报、道路信息、工单提交详情、流程路径想法、跨模块数据聚合</p>
<div class="biz-tags"><span>Global</span><span>道路</span><span>问题</span></div>
</div>
<div class="biz-card blue anim-fade-up" data-anim="fade-up" style="animation-delay:.2s">
<div class="biz-icon">⚙️</div><h4>系统管理</h4>
<p>用户/角色/菜单/部门/岗位管理、租户与套餐、字典、通知公告、应用管理</p>
<div class="biz-tags"><span>System</span><span>RBAC</span><span>多租户</span></div>
</div>
<div class="biz-card purple anim-fade-up" data-anim="fade-up" style="animation-delay:.25s">
<div class="biz-icon">🏗️</div><h4>基础设施</h4>
<p>代码生成、文件存储、定时任务、配置管理、消息队列、API 日志、监控追踪</p>
<div class="biz-tags"><span>Infra</span><span>代码生成</span><span>监控</span></div>
</div>
</div>
</section>
<!-- ====== 5. Garden Business ====== -->
<section class="slide" data-title="Business · Garden">
<p class="kicker">garden · smart-greening</p>
<h2 class="h2">核心业务：智慧园林管理</h2>
<p class="lede">覆盖园林绿化全生命周期——从资产登记到巡检养护，从绩效评估到成本核算。</p>
<div class="arch-layers">
<div class="al hl"><div class="al-name">管理端</div>
<div class="al-cells">
<div class="acell"><div class="aci">🌲</div><h4>树木资产管理</h4><p>古树名木 / 变更日志</p></div>
<div class="acell"><div class="aci">📅</div><h4>巡检计划管理</h4><p>计划制定 / 明细配置</p></div>
<div class="acell"><div class="aci">🔧</div><h4>养护计划管理</h4><p>养护任务 / 执行跟踪</p></div>
<div class="acell"><div class="aci">📊</div><h4>绩效管理</h4><p>指标定义 / 专家评定</p></div>
<div class="acell"><div class="aci">📦</div><h4>物料管理</h4><p>物料类型 / 出入库</p></div>
<div class="acell"><div class="aci">💰</div><h4>机械成本</h4><p>折旧 / 租赁核算</p></div>
</div>
</div>
<div class="al fw"><div class="al-name">移动端</div>
<div class="al-cells" style="grid-template-columns:repeat(5,1fr)">
<div class="acell"><div class="aci">📱</div><h4>首页概览</h4><p>数据汇总</p></div>
<div class="acell"><div class="aci">📍</div><h4>GPS 定位</h4><p>位置上报</p></div>
<div class="acell"><div class="aci">✅</div><h4>巡检提交</h4><p>现场打卡</p></div>
<div class="acell"><div class="aci">🛠️</div><h4>养护提交</h4><p>任务执行</p></div>
<div class="acell"><div class="aci">📝</div><h4>变更记录</h4><p>树木变更</p></div>
</div>
</div>
</div>
<div class="grid g4 mt-m">
<div class="card card-accent"><h4>定时任务</h4><p class="dim">自动生成巡检/养护计划</p></div>
<div class="card card-accent"><h4>数据权限</h4><p class="dim">按区域隔离园林数据</p></div>
<div class="card card-accent"><h4>时间区间</h4><p class="dim">灵活配置任务执行周期</p></div>
<div class="card card-accent"><h4>防重复提交</h4><p class="dim">计划明细幂等性保证</p></div>
</div>
</section>
<!-- ====== 6. Workorder Business ====== -->
<section class="slide" data-title="Business · Workorder">
<p class="kicker">workorder · dispatch</p>
<h2 class="h2">工单调度：事件驱动 + 流程闭环</h2>
<div class="col2">
<div>
<div class="card card-accent" style="padding:22px">
<h4 style="color:#fff;margin:0 0 12px">工单核心实体模型</h4>
<div class="stack">
<div class="tag">📋 MainInfo — 工单主信息</div>
<div class="tag">📎 Attachment — 附件管理</div>
<div class="tag">📦 MaterialDetail — 物料明细</div>
<div class="tag">🎯 EventInfo — 事件信息</div>
<div class="tag">🔗 EventMappingInfo — 事件映射</div>
<div class="tag">🌳 GardenRef — 园林业务关联</div>
</div>
</div>
</div>
<div>
<div class="card" style="padding:22px;border-top:3px solid var(--accent-2)">
<h4 style="color:#fff;margin:0 0 12px">工单处理流程</h4>
<div style="display:flex;flex-direction:column;gap:8px">
<div style="display:flex;align-items:center;gap:8px">
<div class="fs" style="flex:1"><div class="fs-icon">📝</div><h4>事件上报</h4></div>
<span class="fs-arr">→</span>
<div class="fs" style="flex:1"><div class="fs-icon">🔍</div><h4>工单生成</h4></div>
<span class="fs-arr">→</span>
<div class="fs hl" style="flex:1"><div class="fs-icon">👤</div><h4>人员指派</h4></div>
</div>
<div style="display:flex;align-items:center;gap:8px">
<div class="fs" style="flex:1"><div class="fs-icon">🔧</div><h4>现场处理</h4></div>
<span class="fs-arr">→</span>
<div class="fs" style="flex:1"><div class="fs-icon">📋</div><h4>结果反馈</h4></div>
<span class="fs-arr">→</span>
<div class="fs" style="flex:1"><div class="fs-icon">✅</div><h4>审核结单</h4></div>
</div>
</div>
</div>
</div>
</div>
<div class="code-text mt-m">WorkorderModule → GardenModule (Feign API) · EventMapping 策略 · GeoCode 位置服务 · 数据权限隔离</div>
</section>
<!-- ====== 7. BPM Business ====== -->
<section class="slide" data-title="Business · BPM">
<p class="kicker">bpm · flowable-engine</p>
<h2 class="h2">工作流引擎：同时支持<br>「轻量配置」与「深度编排」</h2>
<div class="grid g2 mt-l" style="align-items:start">
<div>
<div class="card card-accent" style="padding:22px">
<h4 style="color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:13px">SIMPLE 设计器</h4>
<p class="dim" style="font-size:13px">仿钉钉/飞书体验，拖拽搭建表单流程，10 分钟完成配置</p>
<div class="stack mt-s">
<div class="tag">✦ 拖拽式表单设计</div>
<div class="tag">✦ 审批节点可视化配置</div>
<div class="tag">✦ 抄送人 / 条件分支</div>
<div class="tag">✦ 超时审批 / 自动提醒</div>
</div>
</div>
</div>
<div>
<div class="card" style="padding:22px;border-top:3px solid #d2a8ff">
<h4 style="color:#d2a8ff;font-family:'JetBrains Mono',monospace;font-size:13px">BPMN 设计器</h4>
<p class="dim" style="font-size:13px">基于 BPMN 2.0 标准，适配复杂多层级审批及自动化场景</p>
<div class="stack mt-s">
<div class="tag">✦ 会签 / 或签 / 依次审批</div>
<div class="tag">✦ 转办 / 委派 / 加签 / 减签</div>
<div class="tag">✦ 并行 / 包容 / 路由分支</div>
<div class="tag">✦ 父子流程 / 触发节点</div>
</div>
</div>
</div>
</div>
<div class="grid g3 mt-m">
<div class="card"><h4 style="color:#fff;font-size:14px">Flowable 7.0</h4><p class="dim">核心流程引擎</p></div>
<div class="card"><h4 style="color:#fff;font-size:14px">信创数据库兼容</h4><p class="dim">DM8 / KingBase / OpenGauss</p></div>
<div class="card"><h4 style="color:#fff;font-size:14px">动态表单</h4><p class="dim">节点级只读/编辑/隐藏权限</p></div>
</div>
</section>
<!-- ====== 8. Global & System Business ====== -->
<section class="slide" data-title="Business · Global & System">
<p class="kicker">global · system · infra</p>
<h2 class="h2">业务支撑域：<br>公共服务与系统管理</h2>
<div class="grid g2 mt-l" style="align-items:start;gap:20px">
<div>
<h4 style="color:var(--accent-2);font-family:'JetBrains Mono',monospace;font-size:13px;margin-bottom:12px">🌐 Global 全局模块</h4>
<div class="stack">
<div class="card card-accent" style="padding:14px 16px"><h4 style="font-size:14px">问题上报管理</h4><p class="dim" style="font-size:11px">公共问题发现 → 流转到工单系统</p></div>
<div class="card card-accent" style="padding:14px 16px"><h4 style="font-size:14px">道路信息管理</h4><p class="dim" style="font-size:11px">道路基础数据维护</p></div>
<div class="card card-accent" style="padding:14px 16px"><h4 style="font-size:14px">工单提交详情</h4><p class="dim" style="font-size:11px">跨模块工单数据聚合视图</p></div>
<div class="card card-accent" style="padding:14px 16px"><h4 style="font-size:14px">流程路径想法</h4><p class="dim" style="font-size:11px">流程优化建议收集</p></div>
</div>
</div>
<div>
<h4 style="color:#d2a8ff;font-family:'JetBrains Mono',monospace;font-size:13px;margin-bottom:12px">⚙️ System + Infra 模块</h4>
<div class="stack">
<div class="card" style="padding:14px 16px;border-top:2px solid var(--accent-2)"><h4 style="font-size:14px">RBAC 权限体系</h4><p class="dim" style="font-size:11px">用户 → 角色 → 菜单 → 按钮权限 · 数据权限</p></div>
<div class="card" style="padding:14px 16px;border-top:2px solid var(--accent-2)"><h4 style="font-size:14px">SaaS 多租户</h4><p class="dim" style="font-size:11px">租户管理 · 套餐配置 · 数据隔离 · 透明化封装</p></div>
<div class="card" style="padding:14px 16px;border-top:2px solid var(--accent-2)"><h4 style="font-size:14px">代码生成器</h4><p class="dim" style="font-size:11px">一键生成 Java · Vue · SQL · 接口文档</p></div>
<div class="card" style="padding:14px 16px;border-top:2px solid var(--accent-2)"><h4 style="font-size:14px">消息通知中心</h4><p class="dim" style="font-size:11px">短信 · 邮件 · 站内信 · 多通道</p></div>
</div>
</div>
</div>
</section>
<!-- ====== 9. Tech Stack Layers (from file1) ====== -->
<section class="slide" data-title="Tech Stack Layers">
<p class="kicker">tech-stack · layers</p>
<h2 class="h2">技术栈七层全景</h2>
<div class="layer-stack">
<div class="layer"><div class="layer-label">前端</div><div class="layer-content"><span class="tag">Vue 3</span><span class="tag">Element Plus</span><span class="tag">Vben Admin</span><span class="tag">uni-app</span><span class="tag">TypeScript</span></div></div>
<div class="layer"><div class="layer-label">网关 & 接入</div><div class="layer-content"><span class="tag">Vert.x</span><span class="tag">MQTT</span><span class="tag">HTTP/2</span><span class="tag">TCP</span><span class="tag">WebSocket</span></div></div>
<div class="layer"><div class="layer-label">业务框架</div><div class="layer-content"><span class="tag">Spring Boot 3.5</span><span class="tag">Spring Security</span><span class="tag">Flowable 7</span><span class="tag">Quartz</span><span class="tag">Spring AI</span><span class="tag">PF4J</span></div></div>
<div class="layer"><div class="layer-label">数据层</div><div class="layer-content"><span class="tag">MyBatis Plus</span><span class="tag">Druid</span><span class="tag">MySQL 8</span><span class="tag">Redis Sentinel</span><span class="tag">Redisson</span><span class="tag">Dynamic DS</span></div></div>
<div class="layer"><div class="layer-label">消息 & 集成</div><div class="layer-content"><span class="tag">RocketMQ</span><span class="tag">Kafka</span><span class="tag">RabbitMQ</span><span class="tag">JustAuth</span><span class="tag">UAA SSO</span><span class="tag">S3</span></div></div>
<div class="layer"><div class="layer-label">可观测性</div><div class="layer-content"><span class="tag">SkyWalking</span><span class="tag">SBA Admin</span><span class="tag">OpenTracing</span><span class="tag">Actuator</span><span class="tag">Knife4j</span></div></div>
<div class="layer"><div class="layer-label">部署 & DevOps</div><div class="layer-content"><span class="tag">Docker</span><span class="tag">docker-compose</span><span class="tag">Eclipse Temurin 21</span><span class="tag">Maven</span><span class="tag">Git</span></div></div>
</div>
</section>
<!-- ====== 10. System Architecture Overview SVG (from file1 slide 4) ====== -->
<section class="slide" data-title="System Architecture Overview">
<p class="kicker">architecture · system-overview</p>
<h2 class="h2">系统架构总览 — 五层全景</h2>
<div class="svg-area">
<svg viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gAccent" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#38bdf8"/><stop offset="100%" stop-color="#818cf8"/></linearGradient>
<linearGradient id="gGreen" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#34d399"/><stop offset="100%" stop-color="#22c55e"/></linearGradient>
<linearGradient id="gPink" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f472b6"/><stop offset="100%" stop-color="#e879f9"/></linearGradient>
<filter id="shadow"><feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.3"/></filter>
</defs>
<rect x="30" y="10" width="940" height="60" rx="10" fill="#161b22" stroke="#1e2d45" stroke-width="1.5"/>
<text x="500" y="35" text-anchor="middle" fill="#8b949e" font-size="12" font-weight="600">接入层 CLIENT LAYER</text>
<rect x="60" y="42" width="100" height="22" rx="6" fill="rgba(56,189,248,.12)" stroke="#38bdf8" stroke-width="1"/><text x="110" y="57" text-anchor="middle" fill="#38bdf8" font-size="10">Vue 3 Web</text>
<rect x="180" y="42" width="100" height="22" rx="6" fill="rgba(56,189,248,.12)" stroke="#38bdf8" stroke-width="1"/><text x="230" y="57" text-anchor="middle" fill="#38bdf8" font-size="10">uni-app 小程序</text>
<rect x="300" y="42" width="100" height="22" rx="6" fill="rgba(129,140,248,.12)" stroke="#818cf8" stroke-width="1"/><text x="350" y="57" text-anchor="middle" fill="#818cf8" font-size="10">IoT 设备</text>
<rect x="420" y="42" width="100" height="22" rx="6" fill="rgba(129,140,248,.12)" stroke="#818cf8" stroke-width="1"/><text x="470" y="57" text-anchor="middle" fill="#818cf8" font-size="10">第三方系统</text>
<line x1="500" y1="70" x2="500" y2="90" stroke="#8b949e" stroke-width="1.5" stroke-dasharray="4,3"/>
<rect x="30" y="90" width="940" height="80" rx="10" fill="#161b22" stroke="#1e2d45" stroke-width="1.5"/>
<text x="500" y="115" text-anchor="middle" fill="#8b949e" font-size="12" font-weight="600">网关与接入 GATEWAY LAYER</text>
<rect x="60" y="127" width="200" height="32" rx="8" fill="rgba(56,189,248,.1)" stroke="#38bdf8" stroke-width="1.5" filter="url(#shadow)"/><text x="160" y="147" text-anchor="middle" fill="#38bdf8" font-size="11" font-weight="600">UrbanOps Server :48081</text>
<rect x="300" y="127" width="200" height="32" rx="8" fill="rgba(52,211,153,.1)" stroke="#34d399" stroke-width="1.5" filter="url(#shadow)"/><text x="400" y="147" text-anchor="middle" fill="#34d399" font-size="11" font-weight="600">IoT 网关 :8092 (独立部署)</text>
<rect x="540" y="127" width="180" height="32" rx="8" fill="rgba(129,140,248,.1)" stroke="#818cf8" stroke-width="1.5" filter="url(#shadow)"/><text x="630" y="147" text-anchor="middle" fill="#818cf8" font-size="11" font-weight="600">UAA SSO :28201</text>
<line x1="500" y1="170" x2="500" y2="190" stroke="#8b949e" stroke-width="1.5" stroke-dasharray="4,3"/>
<rect x="30" y="190" width="940" height="130" rx="10" fill="#161b22" stroke="#1e2d45" stroke-width="1.5"/>
<text x="500" y="215" text-anchor="middle" fill="#8b949e" font-size="12" font-weight="600">业务模块层 BUSINESS MODULES</text>
<rect x="50" y="228" width="145" height="42" rx="8" fill="rgba(56,189,248,.1)" stroke="#38bdf8" stroke-width="1.5"/><text x="122" y="246" text-anchor="middle" fill="#e2e8f0" font-size="10" font-weight="600">system</text><text x="122" y="260" text-anchor="middle" fill="#8b949e" font-size="9">用户·权限·租户</text>
<rect x="210" y="228" width="145" height="42" rx="8" fill="rgba(129,140,248,.1)" stroke="#818cf8" stroke-width="1.5"/><text x="282" y="246" text-anchor="middle" fill="#e2e8f0" font-size="10" font-weight="600">garden</text><text x="282" y="260" text-anchor="middle" fill="#8b949e" font-size="9">园林养护·巡检</text>
<rect x="370" y="228" width="145" height="42" rx="8" fill="rgba(52,211,153,.1)" stroke="#34d399" stroke-width="1.5"/><text x="442" y="246" text-anchor="middle" fill="#e2e8f0" font-size="10" font-weight="600">workorder</text><text x="442" y="260" text-anchor="middle" fill="#8b949e" font-size="9">工单·调度</text>
<rect x="530" y="228" width="145" height="42" rx="8" fill="rgba(244,114,182,.1)" stroke="#f472b6" stroke-width="1.5"/><text x="602" y="246" text-anchor="middle" fill="#e2e8f0" font-size="10" font-weight="600">bpm</text><text x="602" y="260" text-anchor="middle" fill="#8b949e" font-size="9">Flowable 流程</text>
<rect x="690" y="228" width="145" height="42" rx="8" fill="rgba(251,191,36,.1)" stroke="#fbbf24" stroke-width="1.5"/><text x="762" y="246" text-anchor="middle" fill="#e2e8f0" font-size="10" font-weight="600">gloabl</text><text x="762" y="260" text-anchor="middle" fill="#8b949e" font-size="9">全域运营</text>
<rect x="250" y="280" width="500" height="30" rx="8" fill="rgba(255,255,255,.03)" stroke="#334155" stroke-width="1" stroke-dasharray="4,3"/><text x="500" y="299" text-anchor="middle" fill="#8b949e" font-size="10">API 契约层: garden-api · workorder-api (接口定义 + Feign 风格调用)</text>
<line x1="500" y1="320" x2="500" y2="340" stroke="#8b949e" stroke-width="1.5" stroke-dasharray="4,3"/>
<rect x="30" y="340" width="940" height="50" rx="10" fill="#161b22" stroke="#1e2d45" stroke-width="1.5"/>
<text x="500" y="370" text-anchor="middle" fill="#8b949e" font-size="11" font-weight="600">基础设施层 INFRASTRUCTURE: 15个Spring Boot Starter (Web · Security · MyBatis · Redis · MQ · Job · Excel · WebSocket · Monitor · Protection · Tenant · DataPermission · IP · Test)</text>
<line x1="500" y1="390" x2="500" y2="408" stroke="#8b949e" stroke-width="1.5" stroke-dasharray="4,3"/>
<rect x="30" y="408" width="940" height="45" rx="10" fill="#0d1117" stroke="#1e2d45" stroke-width="1.5"/>
<text x="500" y="435" text-anchor="middle" fill="#8b949e" font-size="11" font-weight="600">数据层: MySQL 8 · Redis Sentinel · RocketMQ · Kafka · RabbitMQ · S3 · Druid · Redisson</text>
</svg>
</div>
</section>
<!-- ====== 11. Module Dependencies SVG (from file1 slide 5) ====== -->
<section class="slide" data-title="Module Dependencies">
<p class="kicker">modules · dependency-graph</p>
<h2 class="h2">模块依赖关系图</h2>
<div class="svg-area">
<svg viewBox="0 0 1000 440" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrowBlue" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><path d="M0,0 L8,3 L0,6 Z" fill="#38bdf8"/></marker>
<marker id="arrowGray" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><path d="M0,0 L8,3 L0,6 Z" fill="#64748b"/></marker>
</defs>
<rect x="350" y="8" width="300" height="38" rx="10" fill="rgba(251,191,36,.1)" stroke="#fbbf24" stroke-width="2"/><text x="500" y="32" text-anchor="middle" fill="#fbbf24" font-size="13" font-weight="700">urbanops-dependencies (BOM)</text>
<line x1="500" y1="46" x2="500" y2="70" stroke="#fbbf24" stroke-width="1.5" marker-end="url(#arrowBlue)"/>
<rect x="80" y="72" width="840" height="58" rx="10" fill="#161b22" stroke="#1e2d45" stroke-width="1.5"/>
<text x="500" y="94" text-anchor="middle" fill="#8b949e" font-size="11" font-weight="600">urbanops-framework</text>
<text x="500" y="113" text-anchor="middle" fill="#64748b" font-size="9">common · web · security · mybatis · redis · mq · job · excel · websocket · monitor · protection · tenant · data-permission · ip · test</text>
<line x1="300" y1="130" x2="300" y2="155" stroke="#64748b" stroke-width="1.2" marker-end="url(#arrowGray)"/>
<line x1="500" y1="130" x2="500" y2="155" stroke="#64748b" stroke-width="1.2" marker-end="url(#arrowGray)"/>
<line x1="700" y1="130" x2="700" y2="155" stroke="#64748b" stroke-width="1.2" marker-end="url(#arrowGray)"/>
<rect x="210" y="158" width="180" height="40" rx="8" fill="rgba(99,102,241,.12)" stroke="#6366f1" stroke-width="1.5"/><text x="300" y="183" text-anchor="middle" fill="#a5b4fc" font-size="12" font-weight="600">module-infra</text>
<rect x="410" y="158" width="180" height="40" rx="8" fill="rgba(56,189,248,.12)" stroke="#38bdf8" stroke-width="1.5"/><text x="500" y="183" text-anchor="middle" fill="#38bdf8" font-size="12" font-weight="600">module-system</text>
<rect x="610" y="158" width="180" height="40" rx="8" fill="rgba(251,191,36,.12)" stroke="#fbbf24" stroke-width="1.5"/><text x="700" y="183" text-anchor="middle" fill="#fbbf24" font-size="12" font-weight="600">module-gloabl</text>
<line x1="300" y1="198" x2="300" y2="230" stroke="#64748b" stroke-width="1.2" marker-end="url(#arrowGray)"/>
<line x1="500" y1="198" x2="360" y2="230" stroke="#38bdf8" stroke-width="1.2"/>
<line x1="500" y1="198" x2="640" y2="230" stroke="#38bdf8" stroke-width="1.2"/>
<rect x="210" y="233" width="180" height="40" rx="8" fill="rgba(244,114,182,.12)" stroke="#f472b6" stroke-width="1.5"/><text x="300" y="258" text-anchor="middle" fill="#f472b6" font-size="12" font-weight="600">module-bpm</text>
<rect x="85" y="308" width="200" height="40" rx="8" fill="rgba(52,211,153,.12)" stroke="#34d399" stroke-width="2"/><text x="185" y="333" text-anchor="middle" fill="#34d399" font-size="12" font-weight="600">module-garden</text>
<rect x="420" y="308" width="200" height="40" rx="8" fill="rgba(52,211,153,.12)" stroke="#34d399" stroke-width="2"/><text x="520" y="333" text-anchor="middle" fill="#34d399" font-size="12" font-weight="600">module-workorder</text>
<rect x="680" y="308" width="220" height="40" rx="8" fill="rgba(129,140,248,.08)" stroke="#818cf8" stroke-width="1" stroke-dasharray="5,3"/><text x="790" y="333" text-anchor="middle" fill="#818cf8" font-size="11" font-weight="600">module-api (契约层)</text>
<line x1="240" y1="273" x2="185" y2="307" stroke="#f472b6" stroke-width="1.2" marker-end="url(#arrowGray)"/>
<line x1="360" y1="273" x2="520" y2="307" stroke="#f472b6" stroke-width="1.2" marker-end="url(#arrowGray)"/>
<line x1="285" y1="330" x2="420" y2="330" stroke="#818cf8" stroke-width="1" stroke-dasharray="5,3" marker-end="url(#arrowGray)"/>
<line x1="620" y1="330" x2="680" y2="330" stroke="#818cf8" stroke-width="1" stroke-dasharray="5,3" marker-end="url(#arrowGray)"/>
<rect x="420" y="380" width="220" height="40" rx="8" fill="rgba(239,68,68,.12)" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="6,3"/><text x="530" y="405" text-anchor="middle" fill="#ef4444" font-size="12" font-weight="600">IoT 网关 (独立进程 :8092)</text>
<line x1="620" y1="348" x2="560" y2="379" stroke="#ef4444" stroke-width="1" stroke-dasharray="5,3"/>
<rect x="30" y="415" width="12" height="12" rx="2" fill="none" stroke="#34d399" stroke-width="1.5"/><text x="48" y="425" fill="#64748b" font-size="9">核心业务域</text>
<rect x="150" y="415" width="12" height="12" rx="2" fill="none" stroke="#38bdf8" stroke-width="1.5"/><text x="168" y="425" fill="#64748b" font-size="9">基础服务</text>
<rect x="260" y="415" width="12" height="12" rx="2" fill="none" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="3,2"/><text x="278" y="425" fill="#64748b" font-size="9">独立部署</text>
<line x1="370" y1="421" x2="400" y2="421" stroke="#818cf8" stroke-width="1" stroke-dasharray="5,3"/><text x="408" y="425" fill="#64748b" font-size="9">API 契约调用</text>
</svg>
</div>
</section>
<!-- ====== 12. Tech Architecture 5-Layer Model ====== -->
<section class="slide" data-title="Tech Architecture">
<p class="kicker">architecture · layers</p>
<h2 class="h2">技术架构五层模型</h2>
<p class="lede">从用户端到底层基础设施，清晰分层、逐级解耦。</p>
<div class="arch-layers anim-stagger-list" data-anim-target>
<div class="al fw"><div class="al-name" style="color:var(--accent-2)">接入层</div>
<div class="al-cells" style="grid-template-columns:repeat(4,1fr)">
<div class="acell"><div class="aci">🖥️</div><h4>Web Admin</h4><p>Vue3 + Element Plus</p></div>
<div class="acell"><div class="aci">📱</div><h4>Mobile App</h4><p>uni-app 跨端</p></div>
<div class="acell"><div class="aci">📊</div><h4>大屏展示</h4><p>GoView 可视化</p></div>
<div class="acell"><div class="aci">🔗</div><h4>开放 API</h4><p>第三方对接</p></div>
</div>
</div>
<div class="al fw"><div class="al-name" style="color:var(--accent-2)">网关层</div>
<div class="al-cells" style="grid-template-columns:repeat(4,1fr)">
<div class="acell"><div class="aci">🔐</div><h4>认证鉴权</h4><p>Spring Security + Token</p></div>
<div class="acell"><div class="aci">🚪</div><h4>路由转发</h4><p>Nginx / Gateway</p></div>
<div class="acell"><div class="aci">⚖️</div><h4>负载均衡</h4><p>多实例分发</p></div>
<div class="acell"><div class="aci">🛡️</div><h4>安全防护</h4><p>XSS / CSRF / SQL注入</p></div>
</div>
</div>
<div class="al hl"><div class="al-name">服务层</div>
<div class="al-cells" style="grid-template-columns:repeat(6,1fr)">
<div class="acell"><div class="aci">🌳</div><h4>Garden</h4><p>园林管理</p></div>
<div class="acell"><div class="aci">📋</div><h4>Workorder</h4><p>工单调度</p></div>
<div class="acell"><div class="aci">🔄</div><h4>BPM</h4><p>工作流</p></div>
<div class="acell"><div class="aci">🌐</div><h4>Global</h4><p>全局服务</p></div>
<div class="acell"><div class="aci">⚙️</div><h4>System</h4><p>系统管理</p></div>
<div class="acell"><div class="aci">🏗️</div><h4>Infra</h4><p>基础设施</p></div>
</div>
</div>
<div class="al"><div class="al-name">中间件</div>
<div class="al-cells" style="grid-template-columns:repeat(5,1fr)">
<div class="acell"><div class="aci">🗄️</div><h4>MySQL</h4><p>OLTP</p></div>
<div class="acell"><div class="aci">⚡</div><h4>Redis</h4><p>缓存/锁</p></div>
<div class="acell"><div class="aci">📨</div><h4>RocketMQ</h4><p>消息队列</p></div>
<div class="acell"><div class="aci">🔍</div><h4>Elasticsearch</h4><p>全文检索</p></div>
<div class="acell"><div class="aci">📡</div><h4>TDengine</h4><p>时序数据</p></div>
</div>
</div>
</div>
</section>
<!-- ====== 13. Backend Layered Architecture ====== -->
<section class="slide" data-title="Backend Architecture">
<p class="kicker">backend · layered</p>
<h2 class="h2">后端分层架构：<br>Controller → Service → DAL 三层解耦</h2>
<div class="grid g2 mt-l" style="align-items:start;gap:20px">
<div class="stack">
<div class="card card-accent" style="padding:16px"><h4 style="font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent)">controller/</h4><p class="dim" style="font-size:12px;margin-bottom:6px">接收请求、参数校验、VO 转换</p><div class="biz-tags"><span>admin/</span><span>app/</span><span>VO 对象</span><span>@Valid</span></div></div>
<div class="card card-accent" style="padding:16px"><h4 style="font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent)">service/</h4><p class="dim" style="font-size:12px;margin-bottom:6px">业务逻辑编排、事务管理、策略模式</p><div class="biz-tags"><span>接口+实现</span><span>@Transactional</span><span>策略</span><span>Listener</span></div></div>
<div class="card card-accent" style="padding:16px"><h4 style="font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent)">dal/</h4><p class="dim" style="font-size:12px;margin-bottom:6px">数据访问层：MySQL Mapper + Redis Cache</p><div class="biz-tags"><span>mysql/</span><span>redis/</span><span>dataobject/</span></div></div>
</div>
<div class="stack">
<div class="card" style="padding:16px;border-top:2px solid var(--accent-2)"><h4 style="font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent-2)">convert/</h4><p class="dim" style="font-size:12px">MapStruct 对象转换层，编译期生成高性能映射代码</p></div>
<div class="card" style="padding:16px;border-top:2px solid var(--accent-2)"><h4 style="font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent-2)">api/</h4><p class="dim" style="font-size:12px">模块间 Feign 接口定义 + DTO，实现跨模块调用</p></div>
<div class="card" style="padding:16px;border-top:2px solid var(--accent-2)"><h4 style="font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent-2)">mq/ + job/</h4><p class="dim" style="font-size:12px">异步消息（producer/consumer）+ 定时任务调度</p></div>
<div class="card" style="padding:16px;border-top:2px solid var(--accent-2)"><h4 style="font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent-2)">framework/</h4><p class="dim" style="font-size:12px">模块内框架代码：数据权限配置、Web 配置、操作日志等</p></div>
</div>
</div>
</section>
<!-- ====== 14. Framework Infrastructure ====== -->
<section class="slide" data-title="Framework Infrastructure">
<p class="kicker">framework · starters</p>
<h2 class="h2">基础设施层：<br>15 个 Spring Boot Starter</h2>
<p class="lede">将通用能力抽象为可复用的 Starter 组件，所有业务模块按需引入。</p>
<div class="fw-grid">
<div class="fw-card hl anim-fade-up" data-anim="fade-up"><div class="fwi">🌐</div><h4>web</h4><p>全局异常处理 · 统一返回 · CORS · Swagger</p></div>
<div class="fw-card hl anim-fade-up" data-anim="fade-up" style="animation-delay:.05s"><div class="fwi">🔐</div><h4>security</h4><p>Spring Security · Token 鉴权 · SSO</p></div>
<div class="fw-card hl anim-fade-up" data-anim="fade-up" style="animation-delay:.1s"><div class="fwi">🗄️</div><h4>mybatis</h4><p>MyBatis Plus · 多数据源 · 联表查询</p></div>
<div class="fw-card hl anim-fade-up" data-anim="fade-up" style="animation-delay:.15s"><div class="fwi">⚡</div><h4>redis</h4><p>Redisson · 分布式锁 · 缓存策略</p></div>
<div class="fw-card hl anim-fade-up" data-anim="fade-up" style="animation-delay:.2s"><div class="fwi">📨</div><h4>mq</h4><p>RocketMQ 集成 · 消息幂等 · 重试</p></div>
<div class="fw-card hl anim-fade-up" data-anim="fade-up" style="animation-delay:.25s"><div class="fwi">🛡️</div><h4>protection</h4><p>分布式锁 · 幂等 · 限流 · 熔断</p></div>
<div class="fw-card anim-fade-up" data-anim="fade-up" style="animation-delay:.3s"><div class="fwi">📊</div><h4>monitor</h4><p>SkyWalking · Admin · 日志中心</p></div>
<div class="fw-card anim-fade-up" data-anim="fade-up" style="animation-delay:.35s"><div class="fwi">⏰</div><h4>job</h4><p>Quartz 定时任务 · 执行日志</p></div>
<div class="fw-card anim-fade-up" data-anim="fade-up" style="animation-delay:.4s"><div class="fwi">📝</div><h4>excel</h4><p>FastExcel 导入导出</p></div>
<div class="fw-card anim-fade-up" data-anim="fade-up" style="animation-delay:.45s"><div class="fwi">🔌</div><h4>websocket</h4><p>实时通信 · Token 校验 · 集群</p></div>
<div class="fw-card anim-fade-up" data-anim="fade-up" style="animation-delay:.5s"><div class="fwi">🏢</div><h4>biz-tenant</h4><p>多租户数据隔离 · 透明封装</p></div>
<div class="fw-card anim-fade-up" data-anim="fade-up" style="animation-delay:.55s"><div class="fwi">🔒</div><h4>biz-data-permission</h4><p>数据权限 · 行级过滤</p></div>
</div>
</section>
<!-- ====== 15. Core Tech Stack Grid ====== -->
<section class="slide" data-title="Tech Stack Grid">
<p class="kicker">tech-stack · ecosystem</p>
<h2 class="h2">核心技术栈全景</h2>
<div class="tg">
<div class="tgc anim-fade-up" data-anim="fade-up"><div class="tgci">☕</div><h4>核心框架</h4><div class="tgt"><span>Spring Boot 3.5.5</span><span>Spring MVC 6.x</span><span>Spring Security 6.x</span></div></div>
<div class="tgc anim-fade-up" data-anim="fade-up" style="animation-delay:.05s"><div class="tgci">🗄️</div><h4>持久层</h4><div class="tgt"><span>MyBatis Plus 3.5.14</span><span>Druid 1.2.27</span><span>Dynamic-DS 4.3.1</span></div></div>
<div class="tgc anim-fade-up" data-anim="fade-up" style="animation-delay:.1s"><div class="tgci">⚡</div><h4>缓存 & 锁</h4><div class="tgt"><span>Redis 7.x</span><span>Redisson 3.51</span><span>Lock4j 2.2.7</span></div></div>
<div class="tgc anim-fade-up" data-anim="fade-up" style="animation-delay:.15s"><div class="tgci">📨</div><h4>消息队列</h4><div class="tgt"><span>RocketMQ</span><span>Spring-RocketMQ</span><span>Redis Stream</span></div></div>
<div class="tgc anim-fade-up" data-anim="fade-up" style="animation-delay:.2s"><div class="tgci">🔄</div><h4>工作流</h4><div class="tgt"><span>Flowable 7.0.1</span><span>BPMN 2.0</span><span>SIMPLE 设计器</span></div></div>
<div class="tgc anim-fade-up" data-anim="fade-up" style="animation-delay:.25s"><div class="tgci">📡</div><h4>IoT & 通信</h4><div class="tgt"><span>Vert.x 4.5.13</span><span>Netty 4.2.4</span><span>MQTT 1.2.5</span></div></div>
<div class="tgc anim-fade-up" data-anim="fade-up" style="animation-delay:.3s"><div class="tgci">🔍</div><h4>可观测性</h4><div class="tgt"><span>SkyWalking 9.5</span><span>Admin 3.5.2</span><span>OpenTracing</span></div></div>
<div class="tgc anim-fade-up" data-anim="fade-up" style="animation-delay:.35s"><div class="tgci">📋</div><h4>API 文档</h4><div class="tgt"><span>Springdoc 2.8.11</span><span>Knife4j 4.5.0</span><span>Swagger 3</span></div></div>
<div class="tgc anim-fade-up" data-anim="fade-up" style="animation-delay:.4s"><div class="tgci">🔌</div><h4>插件 & 工具</h4><div class="tgt"><span>PF4J 0.9.0</span><span>MapStruct 1.6.3</span><span>Hutool 5.8+6.0</span></div></div>
<div class="tgc anim-fade-up" data-anim="fade-up" style="animation-delay:.45s"><div class="tgci">🧪</div><h4>测试</h4><div class="tgt"><span>JUnit 5</span><span>Mockito 5.x</span><span>Jedis-Mock</span></div></div>
<div class="tgc anim-fade-up" data-anim="fade-up" style="animation-delay:.5s"><div class="tgci">🗄️</div><h4>多数据库</h4><div class="tgt"><span>MySQL 8.x</span><span>DM8</span><span>KingBase</span><span>OpenGauss</span></div></div>
<div class="tgc anim-fade-up" data-anim="fade-up" style="animation-delay:.55s"><div class="tgci">🐳</div><h4>部署运维</h4><div class="tgt"><span>Docker</span><span>K8s</span><span>Jenkins</span><span>Harbor</span></div></div>
</div>
</section>
<!-- ====== 16. Data Flow & Communication SVG (from file1 slide 7) ====== -->
<section class="slide" data-title="Data Flow & Communication">
<p class="kicker">data-flow · communication</p>
<h2 class="h2">数据流与通信架构</h2>
<div class="svg-area">
<svg viewBox="0 0 1000 420" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrGreen" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><path d="M0,0 L8,3 L0,6 Z" fill="#34d399"/></marker>
<marker id="arrBlue2" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><path d="M0,0 L8,3 L0,6 Z" fill="#38bdf8"/></marker>
<marker id="arrPink" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><path d="M0,0 L8,3 L0,6 Z" fill="#f472b6"/></marker>
<marker id="arrYellow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><path d="M0,0 L8,3 L0,6 Z" fill="#fbbf24"/></marker>
</defs>
<rect x="350" y="160" width="300" height="60" rx="14" fill="rgba(56,189,248,.12)" stroke="#38bdf8" stroke-width="2.5" filter="url(#shadow)"/><text x="500" y="187" text-anchor="middle" fill="#e2e8f0" font-size="15" font-weight="700">UrbanOps Server</text><text x="500" y="205" text-anchor="middle" fill="#8b949e" font-size="10">核心业务处理引擎</text>
<rect x="60" y="60" width="160" height="50" rx="10" fill="rgba(59,130,246,.12)" stroke="#3b82f6" stroke-width="1.5"/><text x="140" y="82" text-anchor="middle" fill="#60a5fa" font-size="12" font-weight="600">MySQL 8</text><text x="140" y="98" text-anchor="middle" fill="#8b949e" font-size="9">主从 + Druid 连接池</text>
<line x1="220" y1="85" x2="348" y2="175" stroke="#3b82f6" stroke-width="1.2" stroke-dasharray="6,3" marker-end="url(#arrBlue2)"/>
<rect x="60" y="150" width="160" height="50" rx="10" fill="rgba(239,68,68,.12)" stroke="#ef4444" stroke-width="1.5"/><text x="140" y="172" text-anchor="middle" fill="#f87171" font-size="12" font-weight="600">Redis Sentinel</text><text x="140" y="188" text-anchor="middle" fill="#8b949e" font-size="9">缓存 · 分布式锁 · Token</text>
<line x1="220" y1="175" x2="348" y2="180" stroke="#ef4444" stroke-width="1.2" stroke-dasharray="6,3" marker-end="url(#arrBlue2)"/>
<rect x="60" y="240" width="160" height="50" rx="10" fill="rgba(52,211,153,.12)" stroke="#34d399" stroke-width="1.5"/><text x="140" y="262" text-anchor="middle" fill="#4ade80" font-size="12" font-weight="600">MQ 消息队列</text><text x="140" y="278" text-anchor="middle" fill="#8b949e" font-size="9">RocketMQ · Kafka · RabbitMQ</text>
<line x1="220" y1="265" x2="348" y2="195" stroke="#34d399" stroke-width="1.2" stroke-dasharray="6,3" marker-end="url(#arrGreen)"/>
<rect x="740" y="60" width="200" height="50" rx="10" fill="rgba(244,114,182,.12)" stroke="#f472b6" stroke-width="1.5"/><text x="840" y="82" text-anchor="middle" fill="#f472b6" font-size="12" font-weight="600">IoT 网关 :8092</text><text x="840" y="98" text-anchor="middle" fill="#8b949e" font-size="9">Vert.x · MQTT · TCP</text>
<line x1="740" y1="85" x2="652" y2="175" stroke="#f472b6" stroke-width="1.2" stroke-dasharray="6,3" marker-end="url(#arrPink)"/>
<rect x="740" y="160" width="200" height="50" rx="10" fill="rgba(251,191,36,.12)" stroke="#fbbf24" stroke-width="1.5"/><text x="840" y="182" text-anchor="middle" fill="#fbbf24" font-size="12" font-weight="600">IoT 设备层</text><text x="840" y="198" text-anchor="middle" fill="#8b949e" font-size="9">传感器 · GPS · 控制器</text>
<line x1="740" y1="185" x2="940" y2="185" stroke="#fbbf24" stroke-width="1.2" stroke-dasharray="4,3"/>
<line x1="840" y1="210" x2="840" y2="350" stroke="#fbbf24" stroke-width="1" stroke-dasharray="4,3"/>
<rect x="740" y="240" width="200" height="50" rx="10" fill="rgba(129,140,248,.12)" stroke="#818cf8" stroke-width="1.5"/><text x="840" y="262" text-anchor="middle" fill="#a5b4fc" font-size="12" font-weight="600">对象存储 S3</text><text x="840" y="278" text-anchor="middle" fill="#8b949e" font-size="9">文件 · 图片 · 附件</text>
<line x1="740" y1="265" x2="652" y2="205" stroke="#818cf8" stroke-width="1.2" stroke-dasharray="6,3" marker-end="url(#arrBlue2)"/>
<rect x="60" y="330" width="160" height="50" rx="10" fill="rgba(244,114,182,.12)" stroke="#f472b6" stroke-width="1.5"/><text x="140" y="352" text-anchor="middle" fill="#f472b6" font-size="12" font-weight="600">Flowable 7</text><text x="140" y="368" text-anchor="middle" fill="#8b949e" font-size="9">工作流引擎</text>
<line x1="220" y1="355" x2="348" y2="220" stroke="#f472b6" stroke-width="1.2" stroke-dasharray="6,3"/>
<rect x="320" y="340" width="160" height="50" rx="10" fill="rgba(251,191,36,.12)" stroke="#fbbf24" stroke-width="1.5"/><text x="400" y="362" text-anchor="middle" fill="#fbbf24" font-size="12" font-weight="600">Quartz 调度</text><text x="400" y="378" text-anchor="middle" fill="#8b949e" font-size="9">定时任务集群</text>
<line x1="480" y1="340" x2="500" y2="222" stroke="#fbbf24" stroke-width="1.2" stroke-dasharray="6,3"/>
<rect x="560" y="340" width="190" height="50" rx="10" fill="rgba(56,189,248,.12)" stroke="#38bdf8" stroke-width="1.5"/><text x="655" y="362" text-anchor="middle" fill="#38bdf8" font-size="12" font-weight="600">WebSocket</text><text x="655" y="378" text-anchor="middle" fill="#8b949e" font-size="9">实时消息推送</text>
<line x1="560" y1="365" x2="502" y2="222" stroke="#38bdf8" stroke-width="1.2" stroke-dasharray="6,3"/>
</svg>
</div>
</section>
<!-- ====== 17. Data Storage Strategy ====== -->
<section class="slide" data-title="Data Storage">
<p class="kicker">database · strategy</p>
<h2 class="h2">数据存储策略：<br>多数据源 + 多数据库 + 读写分离</h2>
<div class="grid g2 mt-l" style="align-items:start;gap:20px">
<div>
<div class="card card-accent" style="padding:22px"><h4 style="font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--accent)">Dynamic-Datasource 多数据源</h4>
<div class="stack mt-m"><div class="tag"><span style="color:var(--accent)">●</span> 一主多从读写分离</div><div class="tag"><span style="color:var(--accent)">●</span> @DS 注解切换数据源</div><div class="tag"><span style="color:var(--accent)">●</span> Druid 连接池监控</div></div></div>
<div class="card" style="padding:22px;border-top:3px solid var(--accent-2);margin-top:12px"><h4 style="font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--accent-2)">Redis 缓存体系</h4>
<div class="stack mt-m"><div class="tag">○ Redisson 分布式锁 · 幂等键</div><div class="tag">○ Redis Stream 轻量 MQ</div><div class="tag">○ Token 存储 & 在线用户管理</div></div></div>
</div>
<div>
<div class="card" style="padding:22px;border-top:3px solid #d2a8ff"><h4 style="font-family:'JetBrains Mono',monospace;font-size:14px;color:#d2a8ff">多数据库兼容矩阵</h4>
<div class="stack mt-m"><div class="tag"><span style="color:#d2a8ff">■</span> MySQL 5.7/8.0+ — 主力库</div><div class="tag"><span style="color:#d2a8ff">■</span> 达梦 DM8 — 国产信创</div><div class="tag"><span style="color:#d2a8ff">■</span> 人大金仓 KingBase 8.6 — 信创</div><div class="tag"><span style="color:#d2a8ff">■</span> OpenGauss 5.1 — 华为开源</div><div class="tag"><span style="color:#d2a8ff">■</span> Oracle / PostgreSQL / SQL Server</div><div class="tag"><span style="color:#d2a8ff">■</span> TDengine 3.7 — IoT 时序数据</div></div></div>
<div class="card card-accent" style="padding:22px;margin-top:12px"><h4 style="font-size:14px;color:#fff">数据隔离策略</h4><p class="dim" style="font-size:12px">SaaS 多租户：共享数据表 + tenant_id 字段隔离，biz-tenant Starter 透明拦截 SQL</p></div>
</div>
</div>
</section>
<!-- ====== 18. Module Invocation Logic ====== -->
<section class="slide" data-title="Invocation Logic">
<p class="kicker">invocation · communication</p>
<h2 class="h2">模块调用逻辑：三种通信通道</h2>
<div class="invoc-flow mt-l">
<div class="invoc-row"><div class="ir-label" style="color:var(--accent)">Feign API</div><div class="ir-items"><span>System → Dept API</span><span>System → User API</span><span>Workorder → Garden API</span><span>Garden → System API</span></div></div>
<div class="ir-arrow">▼ 同步调用 · 模块间 RPC · 请求/响应模式 ▼</div>
<div class="invoc-row"><div class="ir-label" style="color:var(--accent-2)">MQ 消息</div><div class="ir-items"><span>SMS Producer → Consumer</span><span>Mail Producer → Consumer</span><span>Event → 多消费者</span><span>RocketMQ Topic</span><span>Redis Stream</span></div></div>
<div class="ir-arrow">▼ 异步解耦 · 事件驱动 · 最终一致性 ▼</div>
<div class="invoc-row"><div class="ir-label" style="color:#d2a8ff">直接依赖</div><div class="ir-items"><span>Server → All Modules</span><span>Workorder → Garden Service</span><span>BPM → System User</span><span>Garden → Infra File</span></div></div>
</div>
<div class="grid g3 mt-l">
<div class="card card-accent"><h4 style="font-size:14px">api/ 包设计</h4><p class="dim" style="font-size:12px">每个模块暴露 Feign 接口 + DTO，其他模块引入依赖即可调用，编译期类型安全。</p></div>
<div class="card card-accent"><h4 style="font-size:14px">mq/ 包设计</h4><p class="dim" style="font-size:12px">Producer 发送消息，Consumer 消费处理。SMS / Mail 异步发送，不解耦主流程。</p></div>
<div class="card card-accent"><h4 style="font-size:14px">service/ 直接注入</h4><p class="dim" style="font-size:12px">同模块内 Service 互相注入。跨模块通过 api 包或直接依赖。</p></div>
</div>
</section>
<!-- ====== 19. Message & Async ====== -->
<section class="slide" data-title="Message & Async">
<p class="kicker">async · event-driven</p>
<h2 class="h2">异步消息与事件驱动</h2>
<div class="col2">
<div><div class="card card-accent" style="padding:20px"><h4 style="color:#fff;margin:0 0 10px">RocketMQ 消息架构</h4>
<div class="stack"><div class="tag">📤 Producer → Topic</div><div class="tag">📥 Consumer 拉取并处理</div><div class="tag">🔄 消费失败自动重试</div><div class="tag">⚡ 顺序消息: 全局/分区有序</div><div class="tag">🔒 事务消息: 分布式事务最终一致性</div></div></div></div>
<div><div class="card" style="padding:20px;border-top:3px solid var(--accent-2)"><h4 style="color:#fff;margin:0 0 10px">典型异步场景</h4>
<div class="stack"><div class="tag">📧 SMS → MQ → 消费者推送</div><div class="tag">📨 邮件 → MQ → 消费者投递</div><div class="tag">🔔 站内信 → Redis Stream 广播</div><div class="tag">📋 操作日志 → 异步记录</div><div class="tag">🔄 工单事件 → 通知园林模块</div></div></div></div>
</div>
<div class="grid g2 mt-m">
<div class="card card-accent"><h4 style="font-size:14px">定时任务 (Quartz)</h4><p class="dim" style="font-size:12px">巡检计划自动生成 · 养护计划定时创建 · 数据统计报表 · 超时任务自动处理</p></div>
<div class="card card-accent"><h4 style="font-size:14px">服务保障 (Protection)</h4><p class="dim" style="font-size:12px">@Lock4j 分布式锁防并发 · @Idempotent 幂等性 · @RateLimiter 限流保护 · 熔断降级</p></div>
</div>
</section>
<!-- ====== 20. Security Architecture SVG (from file1 slide 8) ====== -->
<section class="slide" data-title="Security Architecture">
<p class="kicker">security · auth-flow</p>
<h2 class="h2">安全与认证架构</h2>
<div class="svg-area">
<svg viewBox="0 0 1000 400" xmlns="http://www.w3.org/2000/svg">
<rect x="30" y="30" width="120" height="60" rx="10" fill="rgba(56,189,248,.1)" stroke="#38bdf8" stroke-width="1.5"/><text x="90" y="55" text-anchor="middle" fill="#38bdf8" font-size="11" font-weight="600">客户端</text><text x="90" y="73" text-anchor="middle" fill="#8b949e" font-size="9">Web / 小程序 / App</text>
<rect x="200" y="30" width="760" height="60" rx="10" fill="#161b22" stroke="#1e2d45" stroke-width="1.5"/><text x="580" y="52" text-anchor="middle" fill="#8b949e" font-size="11" font-weight="600">Security Filter Chain</text>
<rect x="215" y="58" width="130" height="24" rx="6" fill="rgba(239,68,68,.12)" stroke="#ef4444" stroke-width="1"/><text x="280" y="74" text-anchor="middle" fill="#f87171" font-size="9">API 签名校验</text>
<rect x="355" y="58" width="120" height="24" rx="6" fill="rgba(251,191,36,.12)" stroke="#fbbf24" stroke-width="1"/><text x="415" y="74" text-anchor="middle" fill="#fbbf24" font-size="9">限流 & 幂等</text>
<rect x="485" y="58" width="120" height="24" rx="6" fill="rgba(56,189,248,.12)" stroke="#38bdf8" stroke-width="1"/><text x="545" y="74" text-anchor="middle" fill="#38bdf8" font-size="9">Token 认证</text>
<rect x="615" y="58" width="100" height="24" rx="6" fill="rgba(129,140,248,.12)" stroke="#818cf8" stroke-width="1"/><text x="665" y="74" text-anchor="middle" fill="#a5b4fc" font-size="9">权限校验</text>
<rect x="725" y="58" width="100" height="24" rx="6" fill="rgba(52,211,153,.12)" stroke="#34d399" stroke-width="1"/><text x="775" y="74" text-anchor="middle" fill="#4ade80" font-size="9">数据脱敏</text>
<rect x="835" y="58" width="110" height="24" rx="6" fill="rgba(244,114,182,.12)" stroke="#f472b6" stroke-width="1"/><text x="890" y="74" text-anchor="middle" fill="#f472b6" font-size="9">操作日志</text>
<line x1="150" y1="60" x2="198" y2="60" stroke="#38bdf8" stroke-width="2" marker-end="url(#arrBlue2)"/>
<rect x="200" y="120" width="760" height="110" rx="10" fill="#161b22" stroke="#1e2d45" stroke-width="1.5"/><text x="580" y="145" text-anchor="middle" fill="#8b949e" font-size="11" font-weight="600">认证与授权中心</text>
<rect x="220" y="155" width="200" height="42" rx="8" fill="rgba(56,189,248,.1)" stroke="#38bdf8" stroke-width="1.5"/><text x="320" y="174" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">JWT Token</text><text x="320" y="189" text-anchor="middle" fill="#8b949e" font-size="9">Redis 存储 · 自动续期</text>
<rect x="450" y="155" width="200" height="42" rx="8" fill="rgba(129,140,248,.1)" stroke="#818cf8" stroke-width="1.5"/><text x="550" y="174" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">UAA SSO</text><text x="550" y="189" text-anchor="middle" fill="#8b949e" font-size="9">OAuth2 · 单点登录</text>
<rect x="680" y="155" width="250" height="42" rx="8" fill="rgba(52,211,153,.1)" stroke="#34d399" stroke-width="1.5"/><text x="805" y="174" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">JustAuth 社交登录</text><text x="805" y="189" text-anchor="middle" fill="#8b949e" font-size="9">钉钉 · 企业微信 · 小程序 · 公众号</text>
<rect x="220" y="205" width="340" height="20" rx="5" fill="rgba(251,191,36,.08)" stroke="#fbbf24" stroke-width="0.8"/><text x="390" y="219" text-anchor="middle" fill="#fbbf24" font-size="9">多租户数据隔离 (SaaS)</text>
<rect x="580" y="205" width="350" height="20" rx="5" fill="rgba(244,114,182,.08)" stroke="#f472b6" stroke-width="0.8"/><text x="755" y="219" text-anchor="middle" fill="#f472b6" font-size="9">部门/用户级数据权限 (RBAC + Data Scope)</text>
<line x1="580" y1="230" x2="580" y2="260" stroke="#8b949e" stroke-width="1.5" stroke-dasharray="5,3"/><text x="600" y="250" fill="#64748b" font-size="9">授权通过</text>
<rect x="200" y="260" width="760" height="50" rx="10" fill="#0d1117" stroke="#1e2d45" stroke-width="1.5"/><text x="580" y="290" text-anchor="middle" fill="#8b949e" font-size="11" font-weight="600">业务模块: garden · workorder · bpm · gloabl · infra · system</text>
<rect x="30" y="320" width="120" height="50" rx="10" fill="rgba(251,191,36,.08)" stroke="#fbbf24" stroke-width="1"/><text x="90" y="342" text-anchor="middle" fill="#fbbf24" font-size="11" font-weight="600">AJ Captcha</text><text x="90" y="358" text-anchor="middle" fill="#8b949e" font-size="9">滑块验证</text>
<line x1="150" y1="345" x2="198" y2="285" stroke="#fbbf24" stroke-width="0.8" stroke-dasharray="4,3"/>
<rect x="30" y="200" width="120" height="50" rx="10" fill="rgba(239,68,68,.08)" stroke="#ef4444" stroke-width="1"/><text x="90" y="222" text-anchor="middle" fill="#f87171" font-size="11" font-weight="600">API 加密</text><text x="90" y="238" text-anchor="middle" fill="#8b949e" font-size="9">AES 算法</text>
</svg>
</div>
</section>
<!-- ====== 21. Security & Auth Details ====== -->
<section class="slide" data-title="Security & Auth">
<p class="kicker">security · auth · tenant</p>
<h2 class="h2">安全与权限体系详解</h2>
<div class="grid g3 mt-l">
<div class="card card-accent anim-fade-up" data-anim="fade-up" style="padding:22px"><h4 style="color:#fff;margin-bottom:8px">🔐 认证体系</h4><ul style="font-size:12px;color:var(--text-2);padding-left:16px;line-height:1.8;margin:0"><li>Spring Security 6.x 核心</li><li>Token + Redis 无状态会话</li><li>OAuth2 授权码模式</li><li>多终端（Web / App / 小程序）</li><li>SSO 单点登录</li><li>社交登录（JustAuth）</li></ul></div>
<div class="card card-accent anim-fade-up" data-anim="fade-up" style="padding:22px;animation-delay:.1s"><h4 style="color:#fff;margin-bottom:8px">🛡️ 授权体系</h4><ul style="font-size:12px;color:var(--text-2);padding-left:16px;line-height:1.8;margin:0"><li>RBAC：用户 → 角色 → 菜单</li><li>按钮级别权限控制</li><li>动态菜单加载</li><li>Redis 缓存权限信息</li><li>数据权限：行级过滤</li><li>部门数据范围隔离</li></ul></div>
<div class="card card-accent anim-fade-up" data-anim="fade-up" style="padding:22px;animation-delay:.2s"><h4 style="color:#fff;margin-bottom:8px">🏢 多租户</h4><ul style="font-size:12px;color:var(--text-2);padding-left:16px;line-height:1.8;margin:0"><li>tenant_id 字段隔离</li><li>MyBatis 拦截器自动注入</li><li>租户套餐权限定制</li><li>每个租户独立菜单/角色</li><li>透明化封装无侵入</li></ul></div>
</div>
<div class="code-text mt-l">SystemModule → Security Starter → Token + Redis → @PreAuthorize → DataPermission AOP → SQL Interceptor</div>
</section>
<!-- ====== 22. Observability ====== -->
<section class="slide" data-title="Observability">
<p class="kicker">observability · monitoring</p>
<h2 class="h2">可观测性与监控体系</h2>
<div class="grid g3 mt-l">
<div class="card" style="padding:22px;border-top:3px solid var(--accent)"><h4 style="color:#fff;font-size:16px;margin-bottom:8px">📝 日志体系</h4><p class="dim" style="font-size:12px;line-height:1.7">Logback + SkyWalking Logback Appender，TraceId 自动注入</p><div class="biz-tags mt-s"><span>操作日志</span><span>登录日志</span><span>API 访问日志</span><span>错误日志</span></div></div>
<div class="card" style="padding:22px;border-top:3px solid var(--accent-2)"><h4 style="color:#fff;font-size:16px;margin-bottom:8px">📊 指标监控</h4><p class="dim" style="font-size:12px;line-height:1.7">Spring Boot Admin + Druid SQL 监控 + Redis 监控面板</p><div class="biz-tags mt-s"><span>JVM 指标</span><span>连接池</span><span>QPS/RT</span><span>慢 SQL</span></div></div>
<div class="card" style="padding:22px;border-top:3px solid #d2a8ff"><h4 style="color:#fff;font-size:16px;margin-bottom:8px">🔍 链路追踪</h4><p class="dim" style="font-size:12px;line-height:1.7">Apache SkyWalking 9.5 分布式追踪，服务拓扑自动发现</p><div class="biz-tags mt-s"><span>调用链</span><span>拓扑图</span><span>慢端点</span><span>告警</span></div></div>
</div>
<div class="grid g2 mt-m">
<div class="card card-accent"><h4 style="font-size:14px">Monitor Starter 集成</h4><p class="dim" style="font-size:12px">SkyWalking · Admin Client · OpenTracing · 日志中心 · 一键接入</p></div>
<div class="card card-accent"><h4 style="font-size:14px">保护机制</h4><p class="dim" style="font-size:12px">分布式锁 (Lock4j) · 幂等性保证 · 限流降级 · 异常全局处理 · 错误码统一管理</p></div>
</div>
</section>
<!-- ====== 23. Deployment Architecture SVG (from file1 slide 9) ====== -->
<section class="slide" data-title="Deployment Architecture SVG">
<p class="kicker">deployment · docker</p>
<h2 class="h2">部署架构 — Docker 容器化</h2>
<div class="svg-area">
<svg viewBox="0 0 1000 400" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="960" height="360" rx="16" fill="#161b22" stroke="#1e2d45" stroke-width="2"/><text x="500" y="48" text-anchor="middle" fill="#64748b" font-size="13" font-weight="600">Docker Host</text>
<rect x="50" y="65" width="290" height="160" rx="12" fill="rgba(56,189,248,.08)" stroke="#38bdf8" stroke-width="2"/><text x="195" y="92" text-anchor="middle" fill="#38bdf8" font-size="14" font-weight="700">urbanops-server</text><text x="195" y="110" text-anchor="middle" fill="#8b949e" font-size="10">Eclipse Temurin 21 JRE</text><text x="195" y="126" text-anchor="middle" fill="#64748b" font-size="9">-Xms512m -Xmx512m</text>
<rect x="70" y="137" width="120" height="22" rx="5" fill="rgba(255,255,255,.04)" stroke="#334155" stroke-width="0.8"/><text x="130" y="152" text-anchor="middle" fill="#8b949e" font-size="9">Port 48081</text>
<rect x="200" y="137" width="120" height="22" rx="5" fill="rgba(255,255,255,.04)" stroke="#334155" stroke-width="0.8"/><text x="260" y="152" text-anchor="middle" fill="#8b949e" font-size="9">Actuator /actuator</text>
<rect x="70" y="165" width="250" height="22" rx="5" fill="rgba(255,255,255,.04)" stroke="#334155" stroke-width="0.8"/><text x="195" y="180" text-anchor="middle" fill="#8b949e" font-size="9">包含所有业务模块 (fat JAR)</text>
<rect x="70" y="193" width="250" height="22" rx="5" fill="rgba(255,255,255,.04)" stroke="#334155" stroke-width="0.8"/><text x="195" y="208" text-anchor="middle" fill="#8b949e" font-size="9">SpringDoc /v3/api-docs · Knife4j</text>
<rect x="370" y="65" width="260" height="160" rx="12" fill="rgba(239,68,68,.08)" stroke="#ef4444" stroke-width="2"/><text x="500" y="92" text-anchor="middle" fill="#f87171" font-size="14" font-weight="700">iot-gateway-server</text><text x="500" y="110" text-anchor="middle" fill="#8b949e" font-size="10">独立部署 · Vert.x 引擎</text>
<rect x="390" y="122" width="220" height="22" rx="5" fill="rgba(255,255,255,.04)" stroke="#334155" stroke-width="0.8"/><text x="500" y="137" text-anchor="middle" fill="#8b949e" font-size="9">Port 8092</text>
<rect x="390" y="150" width="220" height="22" rx="5" fill="rgba(255,255,255,.04)" stroke="#334155" stroke-width="0.8"/><text x="500" y="165" text-anchor="middle" fill="#8b949e" font-size="9">协议: MQTT · HTTP · TCP</text>
<rect x="390" y="178" width="220" height="22" rx="5" fill="rgba(255,255,255,.04)" stroke="#334155" stroke-width="0.8"/><text x="500" y="193" text-anchor="middle" fill="#8b949e" font-size="9">设备接入 · 数据采集</text>
<rect x="390" y="206" width="220" height="22" rx="5" fill="rgba(255,255,255,.04)" stroke="#334155" stroke-width="0.8"/><text x="500" y="221" text-anchor="middle" fill="#8b949e" font-size="9">HTTP RPC → Server :48080</text>
<rect x="660" y="65" width="180" height="72" rx="10" fill="rgba(59,130,246,.08)" stroke="#3b82f6" stroke-width="1.5"/><text x="750" y="92" text-anchor="middle" fill="#60a5fa" font-size="12" font-weight="600">MySQL 8</text><text x="750" y="110" text-anchor="middle" fill="#8b949e" font-size="9">:3306</text><text x="750" y="125" text-anchor="middle" fill="#64748b" font-size="8">主从读写分离</text>
<rect x="660" y="150" width="180" height="72" rx="10" fill="rgba(239,68,68,.08)" stroke="#ef4444" stroke-width="1.5"/><text x="750" y="177" text-anchor="middle" fill="#f87171" font-size="12" font-weight="600">Redis Sentinel</text><text x="750" y="195" text-anchor="middle" fill="#8b949e" font-size="9">:26379</text><text x="750" y="210" text-anchor="middle" fill="#64748b" font-size="8">高可用集群</text>
<rect x="860" y="65" width="110" height="72" rx="10" fill="rgba(52,211,153,.08)" stroke="#34d399" stroke-width="1.5"/><text x="915" y="92" text-anchor="middle" fill="#4ade80" font-size="11" font-weight="600">RocketMQ</text><text x="915" y="110" text-anchor="middle" fill="#8b949e" font-size="9">:9876</text>
<rect x="860" y="150" width="110" height="72" rx="10" fill="rgba(129,140,248,.08)" stroke="#818cf8" stroke-width="1.5"/><text x="915" y="177" text-anchor="middle" fill="#a5b4fc" font-size="11" font-weight="600">Kafka</text><text x="915" y="195" text-anchor="middle" fill="#8b949e" font-size="9">:9092</text>
<rect x="660" y="240" width="310" height="40" rx="10" fill="rgba(251,191,36,.08)" stroke="#fbbf24" stroke-width="1.5"/><text x="815" y="265" text-anchor="middle" fill="#fbbf24" font-size="11" font-weight="600">urbanops-admin (前端 Nginx) :8080</text>
<rect x="50" y="245" width="580" height="40" rx="10" fill="rgba(129,140,248,.06)" stroke="#6366f1" stroke-width="1.5"/><text x="340" y="270" text-anchor="middle" fill="#a5b4fc" font-size="11" font-weight="600">可观测性: SkyWalking Agent · Spring Boot Admin · OpenTracing · Actuator · 日志采集</text>
<rect x="50" y="298" width="580" height="32" rx="8" fill="rgba(244,114,182,.06)" stroke="#f472b6" stroke-width="1" stroke-dasharray="5,3"/><text x="340" y="319" text-anchor="middle" fill="#f472b6" font-size="10">PF4J 插件目录: ../plugins (动态扩展)</text>
<rect x="50" y="350" width="12" height="12" rx="2" fill="rgba(56,189,248,.3)" stroke="#38bdf8" stroke-width="1"/><text x="68" y="360" fill="#64748b" font-size="9">fat JAR</text>
<rect x="140" y="350" width="12" height="12" rx="2" fill="rgba(239,68,68,.3)" stroke="#ef4444" stroke-width="1"/><text x="158" y="360" fill="#64748b" font-size="9">独立进程</text>
<rect x="240" y="350" width="12" height="12" rx="2" fill="rgba(59,130,246,.3)" stroke="#3b82f6" stroke-width="1"/><text x="258" y="360" fill="#64748b" font-size="9">数据服务</text>
<rect x="340" y="350" width="12" height="12" rx="2" fill="rgba(52,211,153,.3)" stroke="#34d399" stroke-width="1"/><text x="358" y="360" fill="#64748b" font-size="9">消息中间件</text>
</svg>
</div>
</section>
<!-- ====== 24. CI/CD & Deployment Details ====== -->
<section class="slide" data-title="CI/CD & Deployment">
<p class="kicker">deployment · ci-cd</p>
<h2 class="h2">CI/CD 流水线与运维监控</h2>
<div class="deploy-grid mt-l">
<div class="deploy-card ci anim-fade-up" data-anim="fade-up"><div class="di">🚀</div><h4>CI 持续集成</h4><ul><li>Jenkins Pipeline</li><li>Maven 多模块构建</li><li>单元测试 + 代码扫描</li><li>Docker 镜像构建</li><li>推送 Harbor 私有仓库</li></ul></div>
<div class="deploy-card cn anim-fade-up" data-anim="fade-up" style="animation-delay:.1s"><div class="di">☸️</div><h4>容器编排</h4><ul><li>Kubernetes 集群</li><li>Deployment 滚动更新</li><li>Service 服务发现</li><li>ConfigMap 配置管理</li><li>Ingress 流量入口</li></ul></div>
<div class="deploy-card mon anim-fade-up" data-anim="fade-up" style="animation-delay:.2s"><div class="di">📊</div><h4>运维监控</h4><ul><li>Prometheus + Grafana</li><li>SkyWalking 链路追踪</li><li>ELK 日志收集</li><li>AlertManager 告警</li><li>Admin 应用监控</li></ul></div>
</div>
<div class="card card-accent mt-l" style="padding:22px">
<h4 style="font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent);margin-bottom:12px">Dockerfile — 多阶段构建</h4>
<div class="terminal"><div class="bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><span>urbanops-server/Dockerfile</span></div>
<pre><span class="cmt"># Stage 1: 构建</span>
<span class="kw">FROM</span> maven:3.9-eclipse-temurin-17 <span class="kw">AS</span> builder
<span class="kw">COPY</span> . /app && <span class="kw">WORKDIR</span> /app
<span class="kw">RUN</span> mvn clean package -DskipTests
<span class="cmt"># Stage 2: 运行</span>
<span class="kw">FROM</span> eclipse-temurin:17-jre
<span class="kw">COPY</span> --from=builder /app/urbanops-server/target/*.jar app.jar
<span class="kw">ENTRYPOINT</span> ["java","-jar","/app.jar"]</pre>
</div>
</div>
</section>
<!-- ====== 25. Future Planning & Roadmap ====== -->
<section class="slide" data-title="Future Planning">
<p class="kicker">roadmap · planning</p>
<h2 class="h2">后续扩展规划</h2>
<div class="roadmap-grid">
<div class="roadmap-card now anim-fade-up" data-anim="fade-up"><div class="r-period">Phase 1 · 近期</div><h4>🏗️ 架构夯实</h4><ul><li>完善 IoT 设备接入能力</li><li>会员中心 (Member) 激活</li><li>支付系统 (Pay) 集成</li><li>微信公众号 (MP) 接入</li><li>数据报表与大屏 (Report)</li><li>提升单元测试覆盖率</li></ul></div>
<div class="roadmap-card next anim-fade-up" data-anim="fade-up" style="animation-delay:.1s"><div class="r-period">Phase 2 · 中期</div><h4>🚀 业务扩展 & 微服务化</h4><ul><li>ERP / CRM 系统搭建</li><li>商城系统 (Mall)</li><li>AI 大模型集成 (AI)</li><li>Spring Cloud 微服务拆分</li><li>Nacos 注册 & 配置中心</li><li>Gateway + Sentinel 流量治理</li></ul></div>
<div class="roadmap-card future anim-fade-up" data-anim="fade-up" style="animation-delay:.2s"><div class="r-period">Phase 3 · 远期</div><h4>🌐 平台化 & 智能化</h4><ul><li>多租户 SaaS 化运营</li><li>开放平台 & API 市场</li><li>低代码/无代码搭建</li><li>PF4J 插件生态</li><li>边缘计算 + IoT 规模化</li><li>数据中台 & 智能决策</li></ul></div>
</div>
<div class="timeline mt-l">
<div class="tl-item"><div class="tl-phase">Q2 2025</div><div class="tl-body"><h4>物联网接入打通</h4><p>MQTT 协议适配 · 设备影子 · TDengine 时序存储</p></div></div>
<div class="tl-item"><div class="tl-phase">Q3 2025</div><div class="tl-body"><h4>业务模块激活</h4><p>Member + Pay + MP + Report 模块上线，补齐业务闭环</p></div></div>
<div class="tl-item"><div class="tl-phase">Q4 2025</div><div class="tl-body"><h4>微服务演进</h4><p>核心域拆分 · Spring Cloud 迁移 · 服务独立部署</p></div></div>
</div>
</section>
<!-- ====== 26. Architecture Evolution & Summary ====== -->
<section class="slide" data-title="Architecture Evolution">
<p class="kicker">evolution · target-architecture</p>
<h2 class="h2">架构演进目标：微服务全景</h2>
<div class="card card-accent" style="padding:24px;margin-top:14px">
<h4 style="color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:13px;margin-bottom:12px">目标微服务架构</h4>
<div class="evo-flow">
<span class="evo-box accent">Nginx</span><span class="evo-arrow">→</span>
<span class="evo-box purple">Gateway</span><span class="evo-arrow">→</span>
<span class="evo-box green">Nacos</span><span class="evo-arrow">⇢</span>
<div style="display:flex;flex-direction:column;gap:6px">
<span class="tag">garden-service</span><span class="tag">workorder-service</span><span class="tag">bpm-service</span><span class="tag">system-service</span><span class="tag">iot-gateway (已有)</span>
</div>
<span class="evo-arrow">⇢</span>
<div style="display:flex;flex-direction:column;gap:6px">
<span class="tag">Sentinel</span><span class="tag">Seata</span><span class="tag">SkyWalking</span>
</div>
</div>
</div>
<div class="grid g3 mt-l">
<div class="card card-accent"><h4>1 · 业务驱动架构</h4><p class="dim">智慧园林 + 工单调度 + 流程协同，三大核心域支撑城市运营。</p></div>
<div class="card card-accent"><h4>2 · 分层清晰可扩展</h4><p class="dim">15 个 Starter 组件化，模块间 Feign API + MQ 双通道解耦。</p></div>
<div class="card card-accent"><h4>3 · 信创全栈兼容</h4><p class="dim">MySQL / DM8 / KingBase / OpenGauss 多数据库无缝切换。</p></div>
<div class="card card-accent"><h4>4 · 可观测性内置</h4><p class="dim">SkyWalking + Admin + 日志中心，三大支柱保障系统可靠。</p></div>
<div class="card card-accent"><h4>5 · 渐进式演进</h4><p class="dim">模块化先行 → API 契约驱动 → 渐进式拆分 → 独立部署验证。</p></div>
<div class="card card-accent"><h4>6 · IoT 独立先行</h4><p class="dim">IoT 网关已实现独立部署，为后续微服务化积累了宝贵经验。</p></div>
</div>
<div style="margin-top:24px;text-align:center">
<div class="mono" style="font-size:56px;color:var(--accent);font-weight:800;letter-spacing:-.04em">?</div>
<h2 class="h2">Questions & Discussion</h2>
<p class="lede">感谢聆听 · 欢迎交流</p>
<div class="row mt-s" style="justify-content:center"><span class="tag">#urbanops</span><span class="tag">#spring-boot</span><span class="tag">#microservices</span><span class="tag">#smart-garden</span><span class="tag">#cloud-native</span></div>
</div>
</section>
</div>
<script src="ppt-assets/runtime.js"></script>
</body></html>