主应用（基座）
    ↓
├─ 路由拦截（判断加载哪个微应用）
├─ 加载微应用 HTML/JS/CSS
├─ JS 沙箱（Proxy 代理 window）
├─ CSS 沙箱（Shadow DOM / 样式隔离）
└─ 生命周期管理（bootstrap/mount/unmount）

// 简化版沙箱
class ProxySandbox {
  constructor() {
    this.fakeWindow = {}
    this.proxy = new Proxy(window, {
      get(target, key) {
        return this.fakeWindow[key] || target[key]
      },
      set(target, key, value) {
        this.fakeWindow[key] = value
        return true
      },
    })
  }

  active() {
    // 激活沙箱
  }

  inactive() {
    // 失活沙箱，清理副作用
  }
}

Host（宿主应用）
    ↓
加载 Remote（远程应用）暴露的模块
    ↓
共享依赖（Shared Dependencies）

// 远程应用（Remote）
// webpack.config.js
const { ModuleFederationPlugin } = require("webpack").container

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "app2",
      filename: "remoteEntry.js",
      exposes: {
        "./Button": "./src/Button",
        "./utils": "./src/utils",
      },
      shared: ["react", "react-dom"],
    }),
  ],
}

// 宿主应用（Host）
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      remotes: {
        app2: "app2@http://localhost:3002/remoteEntry.js",
      },
      shared: ["react", "react-dom"],
    }),
  ],
}

// 使用
const Button = React.lazy(() => import("app2/Button"))

// 全局状态管理（推荐）
// 主应用创建 Store
import { createStore } from 'redux'

const globalStore = createStore(reducer)

// 通过 props 传递给微应用
<MicroApp store={globalStore} />

// 微应用接收并使用
function MicroApp({ store }) {
  store.subscribe(() => {
    console.log(store.getState())
  })
}

my-ui/
├── src/
│   ├── components/       # 组件
│   │   ├── Button/
│   │   │   ├── Button.tsx
│   │   │   ├── Button.vue
│   │   │   ├── style.css
│   │   │   └── index.ts
│   │   └── Input/
│   ├── styles/           # 公共样式
│   ├── utils/            # 工具函数
│   └── index.ts          # 入口
├── docs/                 # 文档
├── tests/                # 测试
├── package.json
└── vite.config.ts

:root {
  --primary-color: #1890ff;
  --border-radius: 4px;
  --font-size-base: 14px;
}

.btn {
  background: var(--primary-color);
  border-radius: var(--border-radius);
}

// _variables.scss
$primary-color: #1890ff !default;
$border-radius: 4px !default;

// 用户覆盖
@import "~my-ui/styles/variables";
$primary-color: #ff4d4f;
@import "~my-ui/styles/index";

const theme = {
  primaryColor: "#1890ff",
  borderRadius: "4px",
}

const Button = styled.button`
  background: ${(props) => props.theme.primaryColor};
`

// 用户按需引入
import { Button, Input } from "my-ui"

// 构建工具自动 Tree-shaking

// .babelrc
{
  "plugins": [
    ["import", {
      "libraryName": "my-ui",
      "libraryDirectory": "es",
      "style": true  // 自动引入样式
    }]
  ]
}

// 源码
import { Button } from 'my-ui'

// 编译后
import Button from 'my-ui/es/button'
import 'my-ui/es/button/style'

import Button from "my-ui/lib/button"
import "my-ui/lib/button/style.css"

┌─────────────────────────────────────┐
│           设计器（Designer）          │
│  ┌─────────┐ ┌─────────┐ ┌────────┐ │
│  │ 组件面板 │ │ 画布区  │ │ 属性面板│ │
│  └─────────┘ └─────────┘ └────────┘ │
└─────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────┐
│           渲染器（Renderer）          │
│      解析 JSON Schema 渲染页面        │
└─────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────┐
│           运行时（Runtime）           │
│    状态管理、事件处理、API 调用       │
└─────────────────────────────────────┘

{
  "type": "page",
  "title": "用户管理",
  "body": [
    {
      "type": "form",
      "api": "/api/users",
      "body": [
        {
          "type": "input-text",
          "name": "username",
          "label": "用户名",
          "required": true
        },
        {
          "type": "input-number",
          "name": "age",
          "label": "年龄"
        }
      ]
    },
    {
      "type": "table",
      "source": "${users}",
      "columns": [
        { "name": "id", "label": "ID" },
        { "name": "username", "label": "用户名" }
      ]
    }
  ]
}

// JS 表达式（推荐）
{
  "type": "button",
  "label": "提交",
  "onClick": "${submitForm()}",
  "visible": "${form.status === 'draft'}"
}

// 安全沙箱执行
function safeEval(expression, context) {
  const sandbox = new Proxy(context, {
    has() { return true },
    get(target, key) {
      if (key === 'window' || key === 'document') {
        throw new Error('禁止访问全局对象')
      }
      return target[key]
    }
  })

  return new Function('context', `with(context) { return ${expression} }`)(sandbox)
}

┌─────────────────────────────────────────┐
│              数据采集层（SDK）             │
│  ┌─────────┐ ┌─────────┐ ┌────────────┐ │
│  │ Web Vitals │ │ 资源加载 │ │ 错误监控   │ │
│  └─────────┘ └─────────┘ └────────────┘ │
└─────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────┐
│              数据传输层                  │
│      Beacon / Fetch / WebSocket         │
└─────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────┐
│              数据处理层                  │
│    数据清洗 → 聚合计算 → 存储（ES/ClickHouse）│
└─────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────┐
│              数据展示层                  │
│         可视化平台 / 告警系统            │
└─────────────────────────────────────────┘

// 1. JavaScript 错误
window.addEventListener("error", (event) => {
  reportError({
    type: "js",
    message: event.message,
    filename: event.filename,
    lineno: event.lineno,
    colno: event.colno,
    stack: event.error?.stack,
  })
})

// 2. Promise 未捕获错误
window.addEventListener("unhandledrejection", (event) => {
  reportError({
    type: "promise",
    message: event.reason?.message || "Promise rejected",
    stack: event.reason?.stack,
  })
})

// 3. 资源加载错误
window.addEventListener(
  "error",
  (event) => {
    if (event.target !== window) {
      reportError({
        type: "resource",
        url: event.target.src || event.target.href,
        tagName: event.target.tagName,
      })
    }
  },
  true
)

// 4. Vue/React 错误（框架捕获）
// Vue
app.config.errorHandler = (err, vm, info) => {
  reportError({ type: "vue", error: err, info })
}

// React
class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    reportError({ type: "react", error, errorInfo })
  }
}

// 自动埋点（推荐）
// 通过事件委托自动采集
class AutoTracker {
  constructor() {
    this.initClickTracking()
    this.initExposureTracking()
  }

  initClickTracking() {
    document.addEventListener("click", (e) => {
      const target = e.target.closest("[data-track]")
      if (target) {
        this.track({
          type: "click",
          element: target.dataset.track,
          text: target.textContent,
          path: location.pathname,
        })
      }
    })
  }

  initExposureTracking() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          this.track({
            type: "exposure",
            element: entry.target.dataset.exposure,
          })
        }
      })
    })

    document.querySelectorAll("[data-exposure]").forEach((el) => {
      observer.observe(el)
    })
  }

  track(data) {
    // 上报数据
    navigator.sendBeacon("/api/track", JSON.stringify(data))
  }
}

┌─────────────────────────────────────────┐
│              开发阶段                    │
│  ┌─────────┐ ┌─────────┐ ┌────────────┐ │
│  │ 代码规范 │ │ 脚手架  │ │ 本地Mock   │ │
│  │ (ESLint)│ │        │ │            │ │
│  └─────────┘ └─────────┘ └────────────┘ │
└─────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────┐
│              构建阶段                    │
│  ┌─────────┐ ┌─────────┐ ┌────────────┐ │
│  │ 代码转换 │ │ 资源处理 │ │ 代码优化   │ │
│  │(Babel)  │ │(Webpack)│ │ (压缩/分割)│ │
│  └─────────┘ └─────────┘ └────────────┘ │
└─────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────┐
│              部署阶段                    │
│  ┌─────────┐ ┌─────────┐ ┌────────────┐ │
│  │ CI/CD   │ │ 自动化测试│ │ 灰度发布   │ │
│  │(GitHub  │ │        │ │            │ │
│  │ Actions)│ │        │ │            │ │
│  └─────────┘ └─────────┘ └────────────┘ │
└─────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────┐
│              监控阶段                    │
│  ┌─────────┐ ┌─────────┐ ┌────────────┐ │
│  │ 性能监控 │ │ 错误监控 │ │ 用户反馈   │ │
│  └─────────┘ └─────────┘ └────────────┘ │
└─────────────────────────────────────────┘

my-monorepo/
├── apps/                 # 应用
│   ├── web/              # Web 应用
│   ├── admin/            # 管理后台
│   └── mobile/           # 移动端
├── packages/             # 共享包
│   ├── ui/               # UI 组件库
│   ├── utils/            # 工具函数
│   └── hooks/            # 共享 Hooks
├── package.json          # 根配置
├── pnpm-workspace.yaml   # pnpm 工作区
└── turbo.json            # Turborepo 配置

代码提交 → 触发构建 → 运行测试 → 构建产物 → 部署 → 通知

# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "18"

      - name: Install pnpm
        uses: pnpm/action-setup@v2

      - name: Install dependencies
        run: pnpm install

      - name: Run tests
        run: pnpm test

      - name: Build
        run: pnpm build

      - name: Deploy to CDN
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          password: ${{ secrets.PASSWORD }}
          source: "dist/*"
          target: "/var/www/html"

┌─────────────────────────────────────────┐
│              应用层安全                  │
│  ┌─────────┐ ┌─────────┐ ┌────────────┐ │
│  │ XSS 防护 │ │ CSRF 防护│ │ 点击劫持   │ │
│  └─────────┘ └─────────┘ └────────────┘ │
└─────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────┐
│              传输层安全                  │
│  ┌─────────┐ ┌─────────┐ ┌────────────┐ │
│  │ HTTPS   │ │ HSTS    │ │ 证书固定   │ │
│  └─────────┘ └─────────┘ └────────────┘ │
└─────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────┐
│              数据层安全                  │
│  ┌─────────┐ ┌─────────┐ ┌────────────┐ │
│  │ 输入校验 │ │ 输出编码 │ │ 敏感数据   │ │
│  └─────────┘ └─────────┘ └────────────┘ │
└─────────────────────────────────────────┘

// vite.config.js
export default {
  build: {
    sourcemap: false, // 不生成 source map
    minify: "terser",
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
      mangle: {
        properties: true, // 混淆属性名
      },
    },
  },
}