系统架构全景图

基于B端前端、C端前端和后端架构文档整理
生成日期：2026-02-06

📋 目录

  1. 系统概述
  2. 整体架构图
  3. 系统分层架构
  4. B端系统架构
  5. C端系统架构
  6. 中台服务层
  7. 基础设施层
  8. 技术栈汇总
  9. 部署拓扑

系统概述

本系统是一个眼镜电商全栈平台，涵盖B端业务管理、C端商城、中台服务和基础设施四大核心层次。

核心业务

  • B端（魔晶系列）：ERP、WMS、CMS、SRM、质检、客服等内部管理系统
  • C端（魔方系列）：Zeelool、Vooglam等多站点国际化电商平台
  • 中台服务：用户、支付、消息、风控、库存、推荐等共享服务
  • 基础设施：混合云部署（AWS + 阿里云）、容器化、微服务架构

服务用户

  • 外部用户：美国、欧洲（DE/FR/UK/CA）等地区消费者
  • 内部用户：郑州、杭州、丹阳、美国等地运营、客服、仓储人员

整体架构图

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
graph TB
    subgraph "用户层"
        A1[美国用户<br/>Web/App]
        A2[欧洲用户<br/>DE/FR/UK/CA]
        A3[公司员工<br/>运营/客服/仓储]
    end

    subgraph "接入层"
        B1[Akamai CDN]
        B2[AWS ELB]
        B3[Nginx网关]
    end

    subgraph "C端应用层"
        C1[Zeelool-US<br/>Next.js+React]
        C2[Zeelool多站<br/>DE/FR/UK/CA]
        C3[Vooglam<br/>Nuxt.js+Vue]
        C4[支付中心<br/>Next.js SSR]
        C5[CRM系统<br/>Vue+Element UI]
    end

    subgraph "B端应用层"
        D1[魔晶主后台<br/>vue-mojing-web]
        D2[SRM供应商管理<br/>mojing-srm]
        D3[HWMS海外仓<br/>mojing-hwms]
        D4[质检系统<br/>UNI-APP IPAD]
        D5[单点登录<br/>vue-mojing-login]
        D6[批发站/业财/车房]
    end

    subgraph "中台服务层"
        E1[用户中台]
        E2[支付中台]
        E3[消息中台]
        E4[风控中台]
        E5[三方中台]
        E6[库存服务]
        E7[推荐服务]
        E8[处方识别]
        E9[AR/试戴系统]
    end

    subgraph "数据层"
        F1[(MySQL集群)]
        F2[(Redis缓存)]
        F3[(Elasticsearch)]
        F4[Kafka消息队列]
    end

    subgraph "外部三方服务"
        G1[Emarsys营销]
        G2[Adyen/PayPal支付]
        G3[同盾风控]
        G4[神策数据]
        G5[AWS S3]
        G6[SendGrid邮件]
    end

    subgraph "基础设施"
        H1[AWS俄勒冈<br/>主业务区]
        H2[AWS弗吉尼亚<br/>数据中心]
        H3[阿里云杭州<br/>魔晶数据层]
        H4[K8S容器集群]
        H5[监控: n9e/Grafana/Sentry]
    end

    A1 --> B1
    A2 --> B1
    A3 --> B3
    B1 --> B2
    B2 --> C1
    B2 --> C2
    B2 --> C3
    B3 --> D1
    
    D5 -.SSO跳转.-> D1
    D5 -.SSO跳转.-> D2
    D5 -.SSO跳转.-> D3
    
    C1 --> E1
    C1 --> E2
    C1 --> E6
    C1 --> E7
    D1 --> E3
    D1 --> E6
    
    E1 --> F1
    E2 --> F1
    E3 --> F4
    E6 --> F2
    E7 --> F3
    
    E2 --> G2
    E3 --> G6
    E4 --> G3
    E5 --> G1
    
    F1 --> H1
    F2 --> H1
    F3 --> H2
    F4 --> H1
    
    H4 -.部署.-> C1
    H4 -.部署.-> D1
    H1 -.数据同步.-> H3

系统分层架构

1. 展示层

1
2
3
4
┌─────────────────────────────────────────────────────────┐
│  C端：Zeelool Web/APP | Vooglam | 支付中心               │
│  B端：魔晶Web/PDA | SRM | HWMS | 质检IPAD                │
└─────────────────────────────────────────────────────────┘

2. 网关层

1
2
3
4
5
6
┌─────────────────────────────────────────────────────────┐
│  CDN: Akamai                                             │
│  负载均衡: AWS ELB                                        │
│  反向代理: Nginx                                          │
│  容器编排: K8S                                            │
└─────────────────────────────────────────────────────────┘

3. 业务层

1
2
3
4
┌─────────────────────────────────────────────────────────┐
│  C端服务：商城API | 用户接口 | 后台管理                   │
│  B端服务：ERP | WMS | CMS | 定时任务 | 队列处理           │
└─────────────────────────────────────────────────────────┘

4. 中台/服务层

1
2
3
4
┌─────────────────────────────────────────────────────────┐
│  用户中台 | 支付中台 | 消息中台 | 风控中台                 │
│  库存服务 | 推荐服务 | 三方中台 | AR试戴                  │
└─────────────────────────────────────────────────────────┘

5. 数据层

1
2
3
4
┌─────────────────────────────────────────────────────────┐
│  MySQL (业务数据) | Redis (缓存) | Elasticsearch (搜索)  │
│  Kafka (消息队列) | S3 (对象存储)                         │
└─────────────────────────────────────────────────────────┘

6. 基础设施层

1
2
3
4
5
┌─────────────────────────────────────────────────────────┐
│  云平台: AWS (俄勒冈/弗吉尼亚) + 阿里云 (杭州)            │
│  容器: Amazon EKS | K8S                                  │
│  监控: n9e | Grafana | Sentry | 听云 | Kibana            │
└─────────────────────────────────────────────────────────┘

B端系统架构

魔晶系列核心架构

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
graph LR
    subgraph "统一入口层"
        Login[vue-mojing-login<br/>单点登录系统]
    end
    
    subgraph "业务系统层"
        Web[mojing-web<br/>主后台管理<br/>多模块架构]
        SRM[mojing-srm<br/>供应商管理<br/>独立系统]
        HWMS[mojing-hwms<br/>海外仓管理<br/>独立系统]
    end
    
    subgraph "mojing-web子模块"
        System[system<br/>系统管理]
        ERP[erp<br/>ERP系统]
        WMS[wms<br/>仓库管理]
        CSM[csm<br/>客户服务]
    end
    
    subgraph "公共层"
        Common[common<br/>公共模块]
        Components[components<br/>公用组件]
        Layout[layout<br/>布局组件]
        Store[store<br/>公共Vuex]
        API[api<br/>API层]
    end
    
    Login -->|SSO跳转| Web
    Login -->|新窗口+token| SRM
    Login -->|跳转+token| HWMS
    
    Web --> System
    Web --> ERP
    Web --> WMS
    Web --> CSM
    
    Web --> Common
    SRM --> Common
    HWMS --> Common
    Common --> Components
    Common --> Layout
    Common --> Store
    Common --> API

B端项目清单

项目 技术栈 用途 备注
魔晶前端 Vue 2.6 + Element-UI 2.15.6 主后台系统 ERP、WMS、CSM、System模块
魔晶质检-IPAD UNI-APP + Vue2 + u-view 仓库质检 iOS/Android双平台
SRM系统 Vue 2.6 + Element-UI 供应商管理 独立系统
HWMS系统 Vue 2.6 + Element-UI 海外仓管理 前端项目
批发站 Vue2 + Element-UI 2.12 小语种批发 ERP服务
业财项目 NetSuite 财务核算 业财系统代码
车房客户端 Electron + Vue3 + TS 车房管理 降本项目
客服第三方应用 JavaScript Zendesk应用 Z站/V站/M站
Nextmar Order Handler Vue2 + Electron UPS订单处理 小魔兽丹阳工具
魔晶生产数据大屏 Vue 2.6 + Element-UI 仓库数据大屏 可视化项目
网红工具[营销系统] React 18.2.0 + @zeelool/design 素材营销管理 后台系统

B端用户访问流程

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
sequenceDiagram
    participant User as 用户
    participant Login as vue-mojing-login
    participant Web as mojing-web
    participant SRM as mojing-srm
    participant HWMS as mojing-hwms
    
    User->>Login: 访问登录页
    Login->>Login: 用户登录认证
    Login->>Login: 生成token
    Login->>User: 显示系统选择界面
    
    alt 选择 mojing-web
        User->>Web: 点击系统跳转
        Web->>Web: 共享存储token
        Web->>Web: 自动认证
        Web->>User: 显示主系统界面
    else 选择 mojing-srm
        User->>SRM: 新窗口打开，URL传递token
        SRM->>SRM: 接收token并认证
        SRM->>User: 显示SRM界面
    else 选择 mojing-hwms
        User->>HWMS: 跳转并传递token
        HWMS->>HWMS: 认证
        HWMS->>User: 显示HWMS界面
    end

B端代码结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
mojing-web/
├── src/
│   ├── assets/          # 静态资源
│   ├── common/          # 公共模块
│   │   ├── components/  # 公用组件
│   │   ├── layout/      # 布局组件
│   │   ├── store/       # 公共Vuex
│   │   └── api/         # API层
│   ├── modules/
│   │   ├── system/      # 系统管理模块
│   │   ├── erp/         # ERP模块
│   │   ├── wms/         # 仓库管理模块
│   │   └── csm/         # 客户服务模块
│   └── main.js

C端系统架构

C端核心架构

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
graph TB
    subgraph "前端应用层"
        Z[Zeelool NextJS<br/>Next.js 15 + React 19]
        V[Vooglam<br/>Nuxt.js + Vue]
        Pay[支付中心<br/>Next.js SSR]
    end
    
    subgraph "核心框架层"
        Next[Next.js App Router<br/>SSR + SSG]
        React[React 19<br/>Server/Client Components]
        Nuxt[Nuxt.js<br/>SSR框架]
    end
    
    subgraph "UI组件层"
        MUI[MUI Material-UI v7]
        Tailwind[Tailwind CSS v4]
        Emotion[Emotion CSS-in-JS]
        SCSS[SCSS/Sass]
    end
    
    subgraph "状态管理层"
        Zustand[Zustand v5<br/>轻量级状态管理]
        RHF[React Hook Form<br/>表单管理]
    end
    
    subgraph "业务功能模块"
        Product[商品模块<br/>列表/详情]
        Cart[购物车管理]
        User[用户中心<br/>账户管理]
        Lens[配镜流程]
        TryOn[AR试戴功能]
        Blog[博客系统]
        Activity[活动专题]
    end
    
    subgraph "服务端"
        API[Next.js API Routes]
        Redis[Redis缓存<br/>服务端缓存]
        Backend[后端API]
    end
    
    subgraph "基础设施层"
        I18n[国际化 i18n<br/>next-intl]
        Analytics[埋点系统<br/>Reporting Center]
        Payment[支付模块<br/>PayPal/Adyen/Apple Pay]
    end
    
    Z --> Next
    Z --> React
    V --> Nuxt
    
    Next --> MUI
    Next --> Tailwind
    React --> Zustand
    React --> RHF
    
    Z --> Product
    Z --> Cart
    Z --> User
    Z --> Lens
    Z --> TryOn
    
    Product --> API
    Cart --> API
    API --> Redis
    API --> Backend
    
    Z --> I18n
    Z --> Analytics
    Z --> Payment

C端项目清单

项目 技术栈 用途 备注
Zeelool Next.js Next.js + React + TypeScript 泽鹿独立站 支持US/DE/FR/UK/CA多站
zeelool-admin-web Vue + Element UI Z站魔方后台 C端页面数据配置
vooglam-wap-ssr Nuxt.js + Vue V站WAP端 移动端网站
vooglam-pc-ssr Nuxt.js + Vue V站PC端 桌面端网站
vooglam-admin-web Vue + Element UI V站魔方后台 运营管理系统
crm-admin-web Vue + Element UI CRM系统 客户关系管理
pay-center-ssr Next.js + React + TypeScript 支付路由 SSR服务
aws-image-optimization Vanilla JS 图片处理 AWS图片优化

C端用户访问流程

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
sequenceDiagram
    participant User as 用户
    participant Browser as 浏览器
    participant App as Next.js应用
    participant Server as 服务端
    participant Redis as Redis缓存
    participant API as 后端API
    
    User->>Browser: 访问网站
    Browser->>App: 请求页面
    
    alt 首次访问 / 缓存未命中
        App->>Redis: 查询缓存
        Redis->>App: 缓存未命中
        App->>Server: 服务端渲染
        Server->>API: 请求数据
        API->>Server: 返回数据
        Server->>Redis: 写入缓存
        Server->>App: 返回HTML
        App->>Browser: 返回页面
    else 缓存命中
        App->>Redis: 查询缓存
        Redis->>App: 返回缓存数据
        App->>Browser: 返回页面(快速响应)
    end
    
    Browser->>User: 显示页面
    
    Note over User,Browser: 用户交互(客户端操作)
    User->>Browser: 交互操作
    Browser->>API: 客户端请求
    API->>Browser: 返回数据
    Browser->>User: 更新界面

Zeelool (Next.js) 技术栈详解

核心框架

  • Next.js 15：App Router、SSR、SSG
  • React 19：Server Components、Client Components
  • TypeScript 5：类型安全

UI层

  • MUI Material-UI v7：组件库
  • Tailwind CSS v4：原子化样式
  • Emotion：CSS-in-JS
  • SCSS/Sass：样式预处理器

状态管理

  • Zustand v5：轻量级状态管理
  • React Hook Form：表单管理

国际化与埋点

  • next-intl：国际化
  • Reporting Center：埋点系统

支付集成

  • PayPal
  • Adyen
  • Apple Pay

中台服务层

中台架构全景

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
graph TB
    subgraph "业务中台"
        User[用户中台<br/>用户信息存储与查询]
        Pay[支付中台<br/>信用卡支付/卡信息存储]
        Msg[消息中台<br/>邮件/短信发送/退订拦截]
        Risk[风控中台<br/>风控管理后台]
        Third[三方中台<br/>三方服务统一收口]
    end
    
    subgraph "数据服务"
        Inv[库存服务<br/>库存查询及扣减]
        Rec[推荐服务<br/>商品推荐/列表排序]
        OCR[处方识别<br/>用户处方识别]
        AR[AR试戴系统<br/>图片/AR试戴管理]
    end
    
    subgraph "营销工具"
        CRM[CRM系统<br/>会员管理/营销活动]
        Marketing[营销系统<br/>红人管理/素材管理]
    end
    
    subgraph "外部服务集成"
        Emarsys[Emarsys<br/>营销自动化]
        Adyen[Adyen/PayPal<br/>支付网关]
        Tongdun[同盾<br/>风控决策]
        Sensorsdata[神策数据<br/>埋点/AB实验]
        SendGrid[SendGrid/AWS<br/>邮件服务]
        SMS[创蓝/百悟<br/>短信服务]
    end
    
    User --> Third
    Pay --> Adyen
    Msg --> SendGrid
    Msg --> SMS
    Risk --> Tongdun
    Third --> Emarsys
    Rec --> Sensorsdata

中台服务清单

中台系统 负责人 端类型 系统职能 访问地址
用户中台 - C端 用户信息存储、查询 -
支付中台 财务 C端 信用卡支付、用户卡信息存储 admin-pay-center.nextmar.com
消息中台 - B/C端 邮件、短信发送，退订拦截 -
风控中台 风控产品 B/C端 风控管理后台 risk.nextmar.com
三方中台 - B/C端 调用三方服务统一收口（emarsys、instadesk、kmd、shulex、ctiplus等） -
库存服务 - B端 网站库存查询及同步扣减 -
推荐系统 - C端 多场景商品推荐、列表排序 -
图片试戴 运营 C端 图片试戴管理 tools.xmslol.com/admin/ar
AR试戴 运营 C端 AR试戴管理 tryon.nextmar.com
处方识别 - C端 用户处方识别服务 -
企业支付中台 - B端 提供给魔晶中信司库企业支付对接 -
CRM系统 运营 C端 邮件制作、会员管理（权益、积分配置）、营销活动管理（人群管理，邮件、短信、权益礼包发放） admin.crm.nextmar.com
营销系统 运营 B端 营销设计人员使用，红人管理与素材管理 admin-marketing-web.nextmar.com
配置中心 技术 C端 中台配置中心 Nacos config.nextmar.com:8848/nacos
业财中间系统 财务 B端 按照NetSuite格式聚合魔晶数据，传送NetSuite平台进行财务汇总 -

三方服务集成

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
graph LR
    subgraph "业务系统"
        Mofang[魔方商城]
        Mojing[魔晶ERP]
    end
    
    subgraph "三方中台"
        Third[三方中台<br/>统一收口]
    end
    
    subgraph "营销自动化"
        Emarsys[Emarsys<br/>营销自动化平台]
    end
    
    subgraph "风控服务"
        Tongdun[同盾<br/>风控决策]
    end
    
    subgraph "数据分析"
        Sensorsdata[神策数据<br/>埋点分析/AB实验]
    end
    
    subgraph "客服系统"
        Instadesk[Instadesk]
        KMD[KMD]
        Shulex[Shulex]
        CTI[CTIPlus]
    end
    
    subgraph "支付网关"
        Adyen[Adyen]
        PayPal[PayPal]
        ApplePay[Apple Pay]
        Airwallex[空中云汇]
    end
    
    subgraph "通讯服务"
        SendGrid[SendGrid邮件]
        AWS_Email[AWS邮件]
        Chuanglan[创蓝短信]
        Baiwu[百悟短信]
    end
    
    Mofang --> Third
    Mojing --> Third
    Third --> Emarsys
    Mofang --> Tongdun
    Mofang --> Sensorsdata
    Third --> Instadesk
    Third --> KMD
    Third --> Shulex
    Third --> CTI
    Mofang --> Adyen
    Mofang --> PayPal
    Mofang --> ApplePay
    Mofang --> Airwallex
    Third --> SendGrid
    Third --> AWS_Email
    Third --> Chuanglan
    Third --> Baiwu

基础设施层

混合云部署架构

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
graph TB
    subgraph "AWS 俄勒冈区域 (主业务区)"
        EC2_OR[EC2实例<br/>Zeelool DE/CA/FR/UK<br/>Vooglam<br/>库存/试戴/CRM]
        EKS_OR[Amazon EKS<br/>K8S容器集群]
        RDS_OR[(MySQL<br/>业务数据库)]
        Redis_OR[(Redis<br/>缓存集群)]
        ES_OR[(Elasticsearch<br/>搜索引擎)]
        Kafka_OR[Kafka<br/>消息队列]
        S3_OR[S3<br/>对象存储]
    end
    
    subgraph "AWS 弗吉尼亚区域 (数据中心)"
        EC2_VA[EC2实例<br/>Zeelool US<br/>主站服务]
        EKS_VA[Amazon EKS<br/>K8S集群]
        ES_VA[(Elasticsearch<br/>数据分析)]
    end
    
    subgraph "AWS 东京区域 (魔晶)"
        EC2_TK[EC2实例<br/>魔晶ERP/WMS/CMS]
    end
    
    subgraph "阿里云 杭州 (魔晶数据层)"
        MySQL_HZ[(MySQL<br/>魔晶数据存储)]
        Redis_HZ[(Redis<br/>魔晶缓存)]
        ES_HZ[(Elasticsearch<br/>魔晶搜索)]
        Kafka_HZ[Kafka<br/>魔晶消息队列]
    end
    
    subgraph "阿里云 弗吉尼亚 (大数据平台)"
        DataWorks[DataWorks<br/>数据开发]
        MaxCompute[MaxCompute<br/>大数据计算]
        Hologres[Hologres<br/>实时数仓]
    end
    
    subgraph "边缘服务"
        Akamai[Akamai CDN<br/>全球加速]
        WAF[AWS WAF<br/>Web应用防火墙]
        ELB[AWS ELB<br/>负载均衡]
    end
    
    subgraph "监控与运维"
        N9E[夜莺 n9e<br/>监控告警]
        Grafana[Grafana<br/>可视化]
        Sentry[Sentry<br/>错误追踪]
        Kibana[Kibana<br/>日志分析]
        Tingyun[听云<br/>APM性能监控]
    end
    
    Akamai --> WAF
    WAF --> ELB
    ELB --> EC2_OR
    ELB --> EC2_VA
    
    EC2_OR --> EKS_OR
    EC2_OR --> RDS_OR
    EC2_OR --> Redis_OR
    EC2_OR --> ES_OR
    EC2_OR --> Kafka_OR
    EC2_OR --> S3_OR
    
    EC2_VA --> EKS_VA
    EC2_VA --> ES_VA
    
    EC2_TK --> MySQL_HZ
    EC2_TK --> Redis_HZ
    
    RDS_OR -.数据同步.-> DataWorks
    MySQL_HZ -.数据同步.-> DataWorks
    DataWorks --> MaxCompute
    DataWorks --> Hologres
    
    EC2_OR --> N9E
    EC2_VA --> Grafana
    EC2_OR --> Sentry
    ES_OR --> Kibana
    EC2_VA --> Tingyun

物理拓扑详细说明

AWS 俄勒冈区域（主业务区）

  • EC2实例：
    • Zeelool DE/CA/FR/UK 多站点
    • Vooglam API/Admin/Cron/Queue
    • 库存服务、试戴AR、CRM
  • 容器编排：Amazon EKS（K8S集群）
  • 数据存储：
    • MySQL：业务数据库
    • Redis：缓存层
    • Elasticsearch：搜索引擎
    • Kafka：消息队列
  • 对象存储：AWS S3

AWS 弗吉尼亚区域（数据中心）

  • EC2实例：Zeelool US 主站 API/Admin/Cron/Queue
  • 容器编排：Amazon EKS
  • Elasticsearch：数据分析

AWS 东京区域（魔晶业务）

  • EC2实例：魔晶 ERP/WMS/CMS

阿里云 杭州（魔晶数据层）

  • MySQL：魔晶数据存储
  • Redis：魔晶缓存
  • Elasticsearch：魔晶搜索
  • Kafka：魔晶消息队列
  • 数据同步：与AWS俄勒冈双向同步

阿里云 弗吉尼亚（大数据平台）

  • DataWorks：数据开发平台
  • MaxCompute：大数据计算引擎
  • Hologres：实时数据仓库
  • 数据来源：从魔晶和魔方同步数据

边缘与网关

  • Akamai CDN：全球内容分发
  • AWS WAF：Web应用防火墙
  • AWS ELB：弹性负载均衡

监控与运维

  • n9e（夜莺）：监控告警平台
  • Grafana：可视化监控面板
  • Sentry：前后端错误追踪
  • Kibana：日志查询与分析
  • 听云：APM应用性能监控

技术栈汇总

前端技术栈

C端前端

技术 版本 应用
Next.js 15 Zeelool主站、支付中心
React 19 Zeelool、网红工具
Nuxt.js - Vooglam PC/WAP
Vue 2.x 魔方Admin、CRM Admin
TypeScript 5 Zeelool、支付中心、车房客户端
MUI v7 Zeelool组件库
Tailwind CSS v4 Zeelool样式
Element UI - 魔方Admin、CRM
Zustand v5 Zeelool状态管理

B端前端

技术 版本 应用
Vue 2.6 魔晶系列主系统
Element UI 2.15.6 魔晶系列UI
UNI-APP - 魔晶质检IPAD
u-view - 质检系统UI
Electron - Nextmar Order Handler、车房客户端
Vue3 - 车房客户端

后端技术栈

编程语言与框架

  • PHP：魔方系列主业务（Zeelool、Vooglam）
  • Java：中台服务（支付、用户、风控等）
  • Node.js：部分SSR服务（Next.js、Nuxt.js）

数据库

  • MySQL：主业务数据库
  • Redis：缓存、会话、队列
  • Elasticsearch：搜索、日志、数据分析

消息队列

  • Kafka：异步消息、数据同步

容器与编排

  • Docker：容器化
  • Kubernetes (K8S)：容器编排
  • Amazon EKS：AWS托管K8S

配置与服务治理

  • Nacos：配置中心（中台使用）

基础设施技术栈

云平台

  • AWS：主业务部署（俄勒冈、弗吉尼亚、东京）
  • 阿里云：魔晶数据层（杭州）、大数据平台（弗吉尼亚）

CDN与负载均衡

  • Akamai：全球CDN
  • AWS ELB：弹性负载均衡
  • Nginx：反向代理、负载均衡

监控与日志

  • n9e（夜莺）：监控告警
  • Grafana：可视化监控
  • Sentry：错误追踪
  • Kibana：日志分析
  • 听云：APM性能监控

大数据

  • DataWorks：数据开发
  • MaxCompute：大数据计算
  • Hologres：实时数仓

部署拓扑

地域分布

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
graph TB
    subgraph "北美"
        OR[AWS 俄勒冈<br/>主业务区<br/>Zeelool DE/CA/FR/UK<br/>Vooglam]
        VA[AWS 弗吉尼亚<br/>Zeelool US主站<br/>数据中心]
        Ali_VA[阿里云弗吉尼亚<br/>大数据平台]
    end
    
    subgraph "亚洲"
        TK[AWS 东京<br/>魔晶服务]
        HZ[阿里云杭州<br/>魔晶数据层]
    end
    
    subgraph "全球边缘"
        Akamai[Akamai CDN<br/>全球节点]
    end
    
    Akamai --> OR
    Akamai --> VA
    OR -.数据同步.-> Ali_VA
    HZ -.数据同步.-> Ali_VA
    TK -.数据同步.-> HZ
    VA -.跨区复制.-> OR

网络架构

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
互联网
    │
    ▼
┌─────────────────────────────────────┐
│   Akamai CDN（全球边缘节点）          │
└─────────────────────────────────────┘
    │
    ▼
┌─────────────────────────────────────┐
│   AWS WAF（Web应用防火墙）            │
└─────────────────────────────────────┘
    │
    ▼
┌─────────────────────────────────────┐
│   AWS ELB（弹性负载均衡）             │
└─────────────────────────────────────┘
    │
    ├──────────────┬──────────────┐
    ▼              ▼              ▼
┌────────┐    ┌────────┐    ┌────────┐
│ K8S集群│    │ EC2实例│    │ EC2实例│
│ (俄勒冈)│    │ (弗吉尼亚)│    │ (东京) │
└────────┘    └────────┘    └────────┘
    │              │              │
    ▼              ▼              ▼
┌────────┐    ┌────────┐    ┌────────┐
│数据层   │    │数据层   │    │阿里云  │
│MySQL   │    │MySQL   │    │数据层  │
│Redis   │    │Redis   │    │杭州    │
│ES      │    │ES      │    │        │
│Kafka   │    │        │    │        │
└────────┘    └────────┘    └────────┘

数据流向图

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
flowchart LR
    subgraph "用户端"
        User[终端用户]
    end
    
    subgraph "接入层"
        CDN[Akamai CDN]
        WAF[AWS WAF]
        LB[负载均衡]
    end
    
    subgraph "应用层"
        Web[Web应用<br/>Zeelool/Vooglam]
        Admin[Admin后台<br/>魔晶/魔方]
    end
    
    subgraph "服务层"
        API[业务API]
        Middle[中台服务<br/>用户/支付/消息]
    end
    
    subgraph "数据层"
        Cache[(Redis缓存)]
        DB[(MySQL)]
        Search[(Elasticsearch)]
        Queue[Kafka队列]
    end
    
    subgraph "大数据"
        DW[DataWorks]
        MC[MaxCompute]
        HG[Hologres]
    end
    
    User -->|HTTPS| CDN
    CDN -->|防护| WAF
    WAF -->|分发| LB
    LB -->|路由| Web
    LB -->|路由| Admin
    
    Web -->|业务请求| API
    Admin -->|管理操作| API
    API -->|中台能力| Middle
    
    API -->|读写| Cache
    API -->|持久化| DB
    API -->|搜索| Search
    API -->|异步| Queue
    
    DB -.ETL.-> DW
    Queue -.实时.-> DW
    DW --> MC
    DW --> HG

系统关系图

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
graph TB
    subgraph "魔晶系列（B端）"
        MJ[魔晶主系统<br/>ERP/WMS/CMS]
        SRM[供应商管理]
        HWMS[海外仓]
        QC[质检系统]
    end
    
    subgraph "魔方系列（C端）"
        Zeelool[Zeelool<br/>美国/欧洲站]
        Vooglam[Vooglam<br/>PC/WAP]
        CRM[CRM系统]
    end
    
    subgraph "中台服务"
        Inventory[库存服务]
        Payment[支付中台]
        User[用户中台]
        Message[消息中台]
        Risk[风控中台]
    end
    
    MJ -->|库存同步| Inventory
    Zeelool -->|库存查询| Inventory
    Vooglam -->|库存查询| Inventory
    
    Zeelool -->|支付请求| Payment
    Vooglam -->|支付请求| Payment
    
    Zeelool -->|用户操作| User
    Vooglam -->|用户操作| User
    CRM -->|会员管理| User
    
    CRM -->|营销触达| Message
    
    Zeelool -->|订单风控| Risk
    Vooglam -->|订单风控| Risk

核心业务流程

1. 用户下单流程（C端）

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
sequenceDiagram
    participant User as 用户
    participant Zeelool as Zeelool前端
    participant API as 业务API
    participant Inv as 库存服务
    participant Pay as 支付中台
    participant Risk as 风控中台
    participant Msg as 消息中台
    participant Mojing as 魔晶ERP
    
    User->>Zeelool: 1. 浏览商品
    Zeelool->>API: 2. 查询商品详情
    API->>Zeelool: 3. 返回商品信息
    
    User->>Zeelool: 4. 加入购物车
    User->>Zeelool: 5. 提交订单
    
    Zeelool->>Risk: 6. 风控校验
    Risk->>Zeelool: 7. 通过/拒绝
    
    alt 风控通过
        Zeelool->>Inv: 8. 锁定库存
        Inv->>Zeelool: 9. 锁定成功
        
        Zeelool->>Pay: 10. 发起支付
        Pay->>Zeelool: 11. 支付成功
        
        Zeelool->>API: 12. 创建订单
        API->>Mojing: 13. 同步订单到ERP
        
        API->>Msg: 14. 发送订单确认邮件
        Msg->>User: 15. 邮件通知
        
        API->>Zeelool: 16. 返回订单详情
        Zeelool->>User: 17. 显示订单成功
    else 风控拒绝
        Risk->>Zeelool: 拒绝原因
        Zeelool->>User: 显示拒绝信息
    end

2. 仓库发货流程（B端）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
sequenceDiagram
    participant Mojing as 魔晶WMS
    participant Order as 订单系统
    participant Inv as 库存服务
    participant QC as 质检系统
    participant Msg as 消息中台
    participant User as 用户
    
    Mojing->>Order: 1. 获取待发货订单
    Order->>Mojing: 2. 返回订单列表
    
    Mojing->>Mojing: 3. 拣货
    Mojing->>QC: 4. 质检扫码
    QC->>Mojing: 5. 质检通过
    
    Mojing->>Mojing: 6. 打包
    Mojing->>Mojing: 7. 生成物流单
    
    Mojing->>Order: 8. 更新订单状态（已发货）
    Order->>Inv: 9. 扣减库存
    
    Order->>Msg: 10. 触发发货通知
    Msg->>User: 11. 发送发货邮件/短信

3. 供应商下单流程（B端）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
sequenceDiagram
    participant Mojing as 魔晶ERP
    participant Inv as 库存服务
    participant SRM as SRM系统
    participant Supplier as 供应商
    participant Finance as 业财系统
    
    Mojing->>Inv: 1. 检查库存预警
    Inv->>Mojing: 2. 库存低于安全线
    
    Mojing->>Mojing: 3. 生成采购建议
    Mojing->>SRM: 4. 创建采购单
    
    SRM->>Supplier: 5. 发送采购单
    Supplier->>SRM: 6. 确认接单
    
    Supplier->>SRM: 7. 发货通知
    SRM->>Mojing: 8. 同步收货信息
    
    Mojing->>Mojing: 9. 收货入库
    Mojing->>Inv: 10. 更新库存
    
    Mojing->>Finance: 11. 同步采购数据
    Finance->>Finance: 12. 生成应付账款

安全与合规

安全架构

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
graph TB
    subgraph "边界安全"
        WAF[Web应用防火墙<br/>AWS WAF]
        DDoS[DDoS防护<br/>AWS Shield]
        CDN[CDN防护<br/>Akamai]
    end
    
    subgraph "应用安全"
        Auth[身份认证<br/>SSO单点登录]
        RBAC[权限控制<br/>RBAC]
        Encrypt[数据加密<br/>SSL/TLS]
    end
    
    subgraph "数据安全"
        Backup[数据备份<br/>定期备份]
        Mask[数据脱敏<br/>敏感信息保护]
        Audit[审计日志<br/>操作记录]
    end
    
    subgraph "业务安全"
        Risk[风控中台<br/>同盾风控]
        Monitor[监控告警<br/>n9e/Sentry]
        Compliance[合规检查<br/>GDPR/PCI-DSS]
    end
    
    CDN --> WAF
    WAF --> DDoS
    DDoS --> Auth
    Auth --> RBAC
    RBAC --> Encrypt
    
    Encrypt --> Backup
    Encrypt --> Mask
    Encrypt --> Audit
    
    RBAC --> Risk
    Risk --> Monitor
    Monitor --> Compliance

数据安全措施

  1. 传输加密：全站HTTPS（SSL/TLS 1.2+）
  2. 存储加密：数据库加密存储、S3服务端加密
  3. 访问控制：
    • B端：SSO单点登录 + RBAC权限控制
    • C端：OAuth 2.0 + JWT Token
  4. 敏感数据：
    • 支付卡信息：PCI-DSS合规存储
    • 用户密码：bcrypt加密
    • 处方图片：OCR处理后加密存储
  5. 审计日志：所有关键操作记录审计日志
  6. 数据备份：
    • MySQL：每日全量备份 + 增量备份
    • Redis：RDB + AOF持久化
    • S3：跨区域复制

合规要求

  • GDPR（欧盟）：用户数据保护、数据删除权
  • PCI-DSS：支付卡行业数据安全标准
  • CCPA（加州）：消费者隐私保护

监控与运维

监控体系

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
graph TB
    subgraph "应用监控"
        APM[APM性能监控<br/>听云]
        Error[错误追踪<br/>Sentry]
        Log[日志分析<br/>Kibana]
    end
    
    subgraph "基础设施监控"
        Server[服务器监控<br/>n9e]
        Container[容器监控<br/>K8S Dashboard]
        Network[网络监控<br/>AWS CloudWatch]
    end
    
    subgraph "业务监控"
        BI[业务指标<br/>Grafana]
        Alert[告警中心<br/>n9e]
        Analytics[数据分析<br/>神策数据]
    end
    
    subgraph "用户体验监控"
        RUM[真实用户监控<br/>听云]
        Synthetic[合成监控<br/>模拟用户访问]
    end
    
    APM --> Alert
    Error --> Alert
    Server --> Alert
    Container --> Alert
    
    Alert --> BI
    Analytics --> BI
    RUM --> BI

监控指标

应用层

  • 响应时间：P50、P95、P99
  • 吞吐量：QPS、TPS
  • 错误率：5xx、4xx错误比例
  • 可用性：SLA 99.9%

基础设施层

  • CPU使用率：< 70%
  • 内存使用率：< 80%
  • 磁盘IO：IOPS、吞吐量
  • 网络流量：带宽使用率

业务层

  • 订单转化率
  • 支付成功率
  • 库存准确率
  • 用户活跃度

告警策略

级别 条件 响应时间 通知方式
P0 服务全局不可用 立即 电话 + 短信 + 邮件
P1 核心功能异常 5分钟 短信 + 邮件
P2 性能下降 15分钟 邮件 + 企业微信
P3 资源预警 30分钟 邮件

性能优化

前端优化

  1. 代码分割：React/Vue路由懒加载
  2. 资源优化：
    • 图片：WebP格式、懒加载、CDN
    • 字体：font-display: swap
    • CSS/JS：Tree Shaking、压缩、Gzip
  3. 缓存策略：
    • 静态资源：强缓存（max-age=1年）
    • API：协商缓存（ETag）
  4. SSR：Next.js/Nuxt.js服务端渲染
  5. CDN：Akamai全球加速

后端优化

  1. 数据库优化：
    • 索引优化：覆盖索引、联合索引
    • 查询优化：避免N+1、使用EXPLAIN分析
    • 分库分表：订单表按月分表
  2. 缓存策略：
    • Redis缓存热点数据
    • 多级缓存：浏览器 → CDN → Redis → MySQL
  3. 异步处理：
    • Kafka消息队列处理耗时任务
    • 定时任务：订单超时取消、库存同步
  4. API优化：
    • GraphQL：减少过度获取
    • 批量接口：减少请求次数
  5. 服务降级：
    • 推荐服务降级：返回默认推荐
    • AR试戴降级：返回静态图片

架构优化

  1. 微服务化：中台服务独立部署
  2. 容器化：K8S自动扩缩容
  3. 读写分离：MySQL主从复制
  4. 分布式缓存：Redis集群
  5. CDN加速：静态资源全球分发

灾难恢复

备份策略

数据类型 备份频率 保留时间 存储位置
MySQL 每日全量 + 实时增量 30天 AWS S3 + 异地
Redis 每小时RDB 7天 本地 + S3
Elasticsearch 每日快照 14天 S3
代码仓库 实时 永久 云效Git
配置文件 变更时 永久 版本控制

容灾方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
graph LR
    subgraph "生产环境"
        Prod_OR[AWS俄勒冈<br/>主站点]
        Prod_VA[AWS弗吉尼亚<br/>备用站点]
    end
    
    subgraph "灾备环境"
        DR[灾备中心<br/>阿里云杭州]
    end
    
    subgraph "数据同步"
        Sync[实时同步<br/>MySQL Replication]
    end
    
    Prod_OR -.主备切换.-> Prod_VA
    Prod_OR --> Sync
    Sync --> DR
    
    style Prod_OR fill:#90EE90
    style Prod_VA fill:#FFD700
    style DR fill:#87CEEB

RTO/RPO 目标

系统 RTO（恢复时间目标） RPO（数据丢失容忍）
魔方商城 < 1小时 < 5分钟
魔晶ERP < 2小时 < 15分钟
支付中台 < 30分钟 0（实时同步）
中台服务 < 1小时 < 10分钟

技术债务与优化方向

当前技术债务

  1. 前端技术栈不统一：

    • B端：Vue 2.6（已停止维护）
    • C端：React 19（最新） + Vue2（历史包袱）
    • 建议：统一升级到Vue 3或React 18+

  2. 部分系统架构老旧：

    • 批发站、业财项目技术栈陈旧
    • 建议：重构或迁移到现代架构

  3. 海外仓系统废弃：

    • mojing-hwms标记为废弃但未完全下线
    • 建议：彻底下线或重新规划

  4. DMP功能废弃：

    • 除邮件打开统计外其余功能已废弃
    • 建议：下线或整合到其他系统

  5. 红人管理后台重复：

    • 两个红人管理系统（cp.xmslol.com和cmp.nextmar.com）
    • 建议：合并为一个系统

优化方向

短期（0-6个月）

  1. Vue 2升级到Vue 3：魔晶系列前端升级
  2. 性能优化：首屏加载时间优化、API响应时间优化
  3. 监控完善：补齐业务监控指标、告警规则优化
  4. 文档完善：API文档、运维文档、架构文档

中期（6-12个月）

  1. 微服务改造：单体应用拆分为微服务
  2. 容器化改造：全面容器化部署
  3. 数据中台建设：统一数据模型、数据治理
  4. 自动化测试：单元测试覆盖率 > 70%

长期（12个月+）

  1. Serverless架构：部分服务迁移到Serverless
  2. 边缘计算：CDN边缘节点计算能力
  3. AI应用：商品推荐、智能客服、图像识别
  4. 国际化扩展：支持更多国家和地区

附录

系统职能详细说明

魔晶（B端）

  • 用户：运营、客服等内部人员
  • 系统职能：
    • 财务管理
    • 供应链管理
    • 供应商管理
    • 客服模块
    • 仓库管理
    • 质检系统
  • 使用地点：郑州、杭州、丹阳、美国等
  • 多端支持：Pad、PDA、PC

魔方（C端）

  • 用户：运营人员
  • 系统职能：
    • Zeelool商城（US、DE、UK、FR、CA）
    • Vooglam商城
    • 商城测与后台管理

CRM系统

  • 用户：运营人员
  • 访问地址：https://admin.crm.nextmar.com/
  • 系统职能：
    • 邮件制作
    • 会员管理（权益、积分配置）
    • 营销活动管理（人群管理）
    • 邮件、短信、权益礼包发放

支付中台

关键URL清单

系统 URL 用途
CRM https://admin.crm.nextmar.com/ 客户关系管理
支付中台 https://admin-pay-center.nextmar.com/ 支付管理
风控中台 https://risk.nextmar.com/ 风控管理
营销系统 https://admin-marketing-web.nextmar.com/ 红人管理/素材管理
AR试戴管理 https://tools.xmslol.com/admin/ar 图片试戴管理
AR试戴 https://tryon.nextmar.com/OjBbRgwAIl.php 试戴管理
配置中心 http://config.nextmar.com:8848/nacos Nacos配置
爬虫管理 https://cp.xmslol.com/admin 已废弃
红人管理 https://ic.xmslol.com/ORHwyCtjiD.php/index/index -
红人管理2 https://cmp.nextmar.com/ORHwyCtjiD.php/celebrity/index2 -

团队与负责人

系统 负责人/团队
魔晶系列 B端团队
魔方系列 C端团队
CRM系统 运营团队
支付中台 财务团队
风控中台 风控产品团队
营销系统 运营团队
图片试戴/AR试戴 运营团队
配置中心 技术团队
业财中间系统 财务团队

总结

本系统是一个典型的跨境电商全栈平台，具备以下特点：

架构特点

  1. 前后端分离：C端Next.js/Nuxt.js，B端Vue 2.6
  2. 微服务架构：中台服务独立部署
  3. 混合云部署：AWS + 阿里云
  4. 多站点支持：美国、欧洲多国站点
  5. 容器化：K8S容器编排

技术优势

  1. 高性能：CDN加速、Redis缓存、SSR
  2. 高可用：多活部署、负载均衡、容灾备份
  3. 可扩展：微服务、消息队列、水平扩展
  4. 安全合规：PCI-DSS、GDPR、风控中台

业务价值

  1. B端赋能：ERP/WMS/CMS全流程数字化
  2. C端体验：多站点、多语言、个性化推荐
  3. 中台支撑：用户、支付、消息、风控共享服务
  4. 数据驱动：大数据平台、埋点分析、AB实验

文档版本：v1.0
生成日期：2026-02-06
维护人：贾维斯 🤖
更新周期：随架构变更实时更新