跨端开发核心技术细节

接口数据层
    ↓
业务缓存层（LRU）
    ↓
持久化存储层（SQLite / IndexedDB）

// utils/cache.js
class CacheManager {
  constructor() {
    this.memoryCache = new Map(); // 内存缓存
    this.maxMemorySize = 50; // 最多缓存50个
  }

  // 设置缓存
  async set(key, data, options = {}) {
    const {
      expire = 3600000, // 默认1小时
      persist = true    // 是否持久化
    } = options;

    const cacheData = {
      data,
      timestamp: Date.now(),
      expire
    };

    // 内存缓存
    this.memoryCache.set(key, cacheData);
    this._checkMemorySize();

    // 持久化
    if (persist) {
      try {
        uni.setStorageSync(key, cacheData);
      } catch (e) {
        console.error('持久化失败:', e);
      }
    }
  }

  // 获取缓存
  async get(key) {
    // 先查内存
    let cache = this.memoryCache.get(key);

    // 再查持久化
    if (!cache) {
      try {
        cache = uni.getStorageSync(key);
        if (cache) {
          this.memoryCache.set(key, cache);
        }
      } catch (e) {
        console.error('读取缓存失败:', e);
      }
    }

    if (!cache) return null;

    // 检查过期
    if (Date.now() - cache.timestamp > cache.expire) {
      this.remove(key);
      return null;
    }

    return cache.data;
  }

  // 删除缓存
  remove(key) {
    this.memoryCache.delete(key);
    uni.removeStorageSync(key);
  }

  // 清空缓存
  clear() {
    this.memoryCache.clear();
    uni.clearStorageSync();
  }

  // LRU 淘汰
  _checkMemorySize() {
    if (this.memoryCache.size > this.maxMemorySize) {
      const firstKey = this.memoryCache.keys().next().value;
      this.memoryCache.delete(firstKey);
    }
  }
}

export default new CacheManager();

// lib/utils/cache_manager.dart
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:convert';

class CacheManager {
  static final CacheManager _instance = CacheManager._internal();
  factory CacheManager() => _instance;
  CacheManager._internal();

  final Map<String, dynamic> _memoryCache = {};
  final int _maxSize = 50;

  // 设置缓存
  Future<void> set(String key, dynamic data, {
    int expire = 3600000,
    bool persist = true
  }) async {
    final cacheData = {
      'data': data,
      'timestamp': DateTime.now().millisecondsSinceEpoch,
      'expire': expire
    };

    // 内存缓存
    _memoryCache[key] = cacheData;
    _checkMemorySize();

    // 持久化
    if (persist) {
      final prefs = await SharedPreferences.getInstance();
      await prefs.setString(key, jsonEncode(cacheData));
    }
  }

  // 获取缓存
  Future<dynamic> get(String key) async {
    // 先查内存
    var cache = _memoryCache[key];

    // 再查持久化
    if (cache == null) {
      final prefs = await SharedPreferences.getInstance();
      final str = prefs.getString(key);
      if (str != null) {
        cache = jsonDecode(str);
        _memoryCache[key] = cache;
      }
    }

    if (cache == null) return null;

    // 检查过期
    final now = DateTime.now().millisecondsSinceEpoch;
    if (now - cache['timestamp'] > cache['expire']) {
      await remove(key);
      return null;
    }

    return cache['data'];
  }

  // 删除缓存
  Future<void> remove(String key) async {
    _memoryCache.remove(key);
    final prefs = await SharedPreferences.getInstance();
    await prefs.remove(key);
  }

  void _checkMemorySize() {
    if (_memoryCache.length > _maxSize) {
      _memoryCache.remove(_memoryCache.keys.first);
    }
  }
}

// api/request.js
import cache from '@/utils/cache';

async function request(url, options = {}) {
  const { useCache = true, cacheTime = 3600000 } = options;

  const cacheKey = `api_${url}_${JSON.stringify(options.params)}`;

  // 读取缓存
  if (useCache) {
    const cachedData = await cache.get(cacheKey);
    if (cachedData) {
      console.log('命中缓存:', url);
      return cachedData;
    }
  }

  // 请求接口
  try {
    const res = await uni.request({
      url,
      ...options
    });

    // 写入缓存
    if (useCache && res.statusCode === 200) {
      await cache.set(cacheKey, res.data, {
        expire: cacheTime
      });
    }

    return res.data;
  } catch (error) {
    // 请求失败，尝试返回过期缓存
    const expiredCache = await cache.get(cacheKey);
    if (expiredCache) {
      console.log('使用过期缓存');
      return expiredCache;
    }
    throw error;
  }
}

// main.js
import App from './App'
import Vue from 'vue'

// 懒加载非首屏组件
Vue.component('heavy-component', () => import('./components/HeavyComponent.vue'))

// 减少首屏数据请求
const app = new Vue({
  ...App,
  onLaunch() {
    // 只请求必需数据
    this.loadCriticalData();

    // 非关键数据延迟加载
    setTimeout(() => {
      this.loadNonCriticalData();
    }, 1000);
  },

  methods: {
    async loadCriticalData() {
      // 用户信息、配置信息
      const [userInfo, config] = await Promise.all([
        this.getUserInfo(),
        this.getConfig()
      ]);
      this.$store.commit('setUser', userInfo);
      this.$store.commit('setConfig', config);
    },

    async loadNonCriticalData() {
      // 消息通知、推荐内容等
      this.getNotifications();
      this.getRecommends();
    }
  }
})

app.$mount()

// main.dart
void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // 延迟初始化非关键服务
  runApp(MyApp());

  // 启动后再初始化
  WidgetsBinding.instance.addPostFrameCallback((_) {
    _initNonCriticalServices();
  });
}

void _initNonCriticalServices() {
  // 推送服务
  PushService.init();
  // 统计服务
  AnalyticsService.init();
  // 分享服务
  ShareService.init();
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FutureBuilder(
        // 只等待关键数据
        future: _loadCriticalData(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return HomePage();
          }
          return SplashScreen();
        },
      ),
    );
  }

  Future<void> _loadCriticalData() async {
    await Future.wait([
      UserService.loadUser(),
      ConfigService.loadConfig(),
    ]);
  }
}

// main.js (主进程)
const { app, BrowserWindow } = require('electron');

let mainWindow;

app.on('ready', () => {
  // 立即创建窗口
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    show: false, // 先不显示
    backgroundColor: '#ffffff',
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // 加载页面
  mainWindow.loadFile('index.html');

  // 首次渲染完成后显示
  mainWindow.once('ready-to-show', () => {
    mainWindow.show();
  });

  // 预加载子窗口
  setTimeout(() => {
    preloadSubWindows();
  }, 3000);
});

function preloadSubWindows() {
  // 预创建隐藏窗口
  const subWindow = new BrowserWindow({
    width: 800,
    height: 600,
    show: false
  });
  subWindow.loadFile('sub.html');
}

// pages/index/index.vue
export default {
  data() {
    return {
      list: [],
      loading: true
    }
  },

  onLoad() {
    this.loadData();
  },

  async loadData() {
    // 先展示缓存数据
    const cached = await this.$cache.get('homepage_data');
    if (cached) {
      this.list = cached;
      this.loading = false;
    }

    // 后台刷新数据
    try {
      const res = await this.$api.getHomeData();
      this.list = res.data;
      this.$cache.set('homepage_data', res.data, {
        expire: 600000 // 10分钟
      });
    } catch (e) {
      if (!cached) {
        this.showError();
      }
    } finally {
      this.loading = false;
    }
  }
}

// Electron renderer.js
window.addEventListener('DOMContentLoaded', () => {
  // 显示骨架屏
  document.getElementById('skeleton').style.display = 'block';

  // 加载真实内容
  loadContent().then(() => {
    document.getElementById('skeleton').style.display = 'none';
    document.getElementById('content').style.display = 'block';
  });
});

// utils/performance.js
class PerformanceMonitor {
  constructor() {
    this.metrics = {};
  }

  // 记录启动时间
  recordLaunch() {
    const now = Date.now();
    this.metrics.launchTime = now;

    // 记录到首屏渲染的时间
    setTimeout(() => {
      this.metrics.firstPaint = Date.now() - now;
      this.report();
    }, 0);
  }

  // 上报性能数据
  report() {
    console.log('性能指标:', this.metrics);
    // 上报到监控平台
  }
}

offline-package.zip
├── manifest.json      # 版本信息
├── index.html
├── static/
│   ├── js/
│   │   └── app.js
│   └── css/
│       └── style.css
└── pages/
    ├── home.html
    └── detail.html

{
  "version": "1.0.5",
  "minAppVersion": "2.0.0",
  "updateTime": 1704096000000,
  "files": [
    {
      "path": "index.html",
      "hash": "abc123",
      "size": 1024
    },
    {
      "path": "static/js/app.js",
      "hash": "def456",
      "size": 51200
    }
  ]
}

// utils/offline-package.js
class OfflinePackageManager {
  constructor() {
    this.baseDir = `${uni.env.USER_DATA_PATH}/offline_packages`;
    this.currentVersion = '';
  }

  // 初始化
  async init() {
    // 检查更新
    await this.checkUpdate();
  }

  // 检查更新
  async checkUpdate() {
    try {
      // 请求服务器获取最新版本
      const res = await uni.request({
        url: 'https://api.example.com/offline-package/version'
      });

      const { version, downloadUrl } = res.data;
      const localVersion = this.getLocalVersion();

      if (this.compareVersion(version, localVersion) > 0) {
        console.log('发现新版本:', version);
        await this.download(downloadUrl, version);
      }
    } catch (e) {
      console.error('检查更新失败:', e);
    }
  }

  // 下载离线包
  async download(url, version) {
    const tempPath = `${this.baseDir}/temp.zip`;

    // 显示下载进度
    const downloadTask = uni.downloadFile({
      url,
      filePath: tempPath,
      success: async (res) => {
        if (res.statusCode === 200) {
          // 解压
          await this.unzip(tempPath, version);
          // 删除临时文件
          uni.getFileSystemManager().unlinkSync(tempPath);
          // 更新版本号
          this.setLocalVersion(version);
          console.log('离线包更新成功');
        }
      }
    });

    downloadTask.onProgressUpdate((res) => {
      console.log('下载进度:', res.progress);
    });
  }

  // 解压离线包
  async unzip(zipPath, version) {
    const targetDir = `${this.baseDir}/${version}`;

    return new Promise((resolve, reject) => {
      // uni-app 解压API
      uni.getFileSystemManager().unzip({
        zipFilePath: zipPath,
        targetPath: targetDir,
        success: resolve,
        fail: reject
      });
    });
  }

  // 获取本地路径
  getLocalPath(relativePath) {
    const version = this.getLocalVersion();
    if (!version) return null;

    return `${this.baseDir}/${version}/${relativePath}`;
  }

  // 加载页面
  loadPage(pagePath) {
    const localPath = this.getLocalPath(pagePath);

    if (localPath && this.fileExists(localPath)) {
      // 使用本地文件
      return `file://${localPath}`;
    } else {
      // 降级到线上
      return `https://h5.example.com/${pagePath}`;
    }
  }

  // 版本比较
  compareVersion(v1, v2) {
    const arr1 = v1.split('.').map(Number);
    const arr2 = v2.split('.').map(Number);

    for (let i = 0; i < 3; i++) {
      if (arr1[i] > arr2[i]) return 1;
      if (arr1[i] < arr2[i]) return -1;
    }
    return 0;
  }

  // 获取本地版本
  getLocalVersion() {
    return uni.getStorageSync('offline_package_version') || '';
  }

  // 设置本地版本
  setLocalVersion(version) {
    uni.setStorageSync('offline_package_version', version);
  }

  // 检查文件是否存在
  fileExists(path) {
    try {
      uni.getFileSystemManager().accessSync(path);
      return true;
    } catch (e) {
      return false;
    }
  }
}

export default new OfflinePackageManager();

<template>
  <web-view :src="pageUrl"></web-view>
</template>

<script>
import offlinePackage from '@/utils/offline-package';

export default {
  data() {
    return {
      pageUrl: ''
    }
  },

  onLoad(options) {
    const { page } = options;
    // 尝试加载本地离线包
    this.pageUrl = offlinePackage.loadPage(page);
  }
}
</script>

// 差量更新管理
class DiffUpdateManager {
  async checkDiffUpdate() {
    const localVersion = this.getLocalVersion();

    const res = await uni.request({
      url: 'https://api.example.com/diff-package',
      data: { fromVersion: localVersion }
    });

    if (res.data.hasDiff) {
      // 下载差量包
      await this.downloadDiff(res.data.diffUrl);
      // 应用差量包
      await this.applyDiff(res.data.changes);
    }
  }

  async applyDiff(changes) {
    for (const change of changes) {
      if (change.type === 'add' || change.type === 'modify') {
        // 下载并替换文件
        await this.downloadFile(change.url, change.path);
      } else if (change.type === 'delete') {
        // 删除文件
        this.deleteFile(change.path);
      }
    }
  }
}

// bridge/protocol.js
const BRIDGE_PROTOCOL = {
  // 相机
  camera: {
    takePhoto: { params: ['quality'], returns: 'path' },
    chooseImage: { params: ['count', 'sourceType'], returns: 'paths[]' }
  },
  // 位置
  location: {
    getLocation: { params: ['type'], returns: 'location' },
    openLocation: { params: ['latitude', 'longitude', 'name'] }
  },
  // 支付
  payment: {
    pay: { params: ['orderInfo'], returns: 'result' }
  },
  // 分享
  share: {
    shareText: { params: ['text', 'platform'] },
    shareImage: { params: ['imageUrl', 'platform'] }
  },
  // 存储
  storage: {
    get: { params: ['key'], returns: 'value' },
    set: { params: ['key', 'value'] }
  }
};

// bridge/index.js
class JSBridge {
  constructor() {
    this.callbacks = {};
    this.callbackId = 0;

    // 注册全局回调
    window.onNativeCallback = this.onNativeCallback.bind(this);
  }

  // 调用 Native 方法
  call(module, method, params = {}) {
    return new Promise((resolve, reject) => {
      const callbackId = this.callbackId++;

      // 保存回调
      this.callbacks[callbackId] = { resolve, reject };

      const data = {
        callbackId,
        module,
        method,
        params
      };

      // iOS 调用
      if (window.webkit && window.webkit.messageHandlers[module]) {
        window.webkit.messageHandlers[module].postMessage(data);
      }
      // Android 调用
      else if (window[module] && window[module][method]) {
        window[module][method](JSON.stringify(data));
      }
      // Electron 调用
      else if (window.require) {
        const { ipcRenderer } = window.require('electron');
        ipcRenderer.send('native-call', data);
      }
      // 降级处理
      else {
        reject(new Error('Native bridge not found'));
      }

      // 超时处理
      setTimeout(() => {
        if (this.callbacks[callbackId]) {
          delete this.callbacks[callbackId];
          reject(new Error('Bridge call timeout'));
        }
      }, 10000);
    });
  }

  // Native 回调
  onNativeCallback(callbackId, error, result) {
    const callback = this.callbacks[callbackId];
    if (!callback) return;

    delete this.callbacks[callbackId];

    if (error) {
      callback.reject(new Error(error));
    } else {
      callback.resolve(result);
    }
  }
}

const bridge = new JSBridge();
export default bridge;

// bridge/api.js
import bridge from './index';

export const NativeAPI = {
  // 拍照
  async takePhoto(quality = 80) {
    const result = await bridge.call('camera', 'takePhoto', { quality });
    return result.path;
  },

  // 选择图片
  async chooseImage(options = {}) {
    const { count = 1, sourceType = ['album', 'camera'] } = options;
    const result = await bridge.call('camera', 'chooseImage', {
      count,
      sourceType
    });
    return result.paths;
  },

  // 获取定位
  async getLocation(type = 'wgs84') {
    const result = await bridge.call('location', 'getLocation', { type });
    return {
      latitude: result.latitude,
      longitude: result.longitude,
      address: result.address
    };
  },

  // 支付
  async pay(orderInfo) {
    const result = await bridge.call('payment', 'pay', { orderInfo });
    return result.success;
  },

  // 分享
  async share(options) {
    const { type, content, platform } = options;

    if (type === 'text') {
      await bridge.call('share', 'shareText', {
        text: content,
        platform
      });
    } else if (type === 'image') {
      await bridge.call('share', 'shareImage', {
        imageUrl: content,
        platform
      });
    }
  },

  // 本地存储
  async getStorage(key) {
    const result = await bridge.call('storage', 'get', { key });
    return result.value;
  },

  async setStorage(key, value) {
    await bridge.call('storage', 'set', { key, value });
  }
};

// iOS WKWebView
class NativeBridge: NSObject, WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController,
                              didReceive message: WKScriptMessage) {
        guard let data = message.body as? [String: Any],
              let callbackId = data["callbackId"] as? Int,
              let module = data["module"] as? String,
              let method = data["method"] as? String,
              let params = data["params"] as? [String: Any] else {
            return
        }

        // 路由到具体模块
        switch module {
        case "camera":
            handleCamera(method: method, params: params, callbackId: callbackId)
        case "location":
            handleLocation(method: method, params: params, callbackId: callbackId)
        default:
            sendCallback(callbackId: callbackId, error: "Unknown module")
        }
    }

    func handleCamera(method: String, params: [String: Any], callbackId: Int) {
        if method == "takePhoto" {
            let quality = params["quality"] as? Int ?? 80

            // 调用相机
            let imagePicker = UIImagePickerController()
            imagePicker.sourceType = .camera
            // ... 拍照逻辑

            // 返回结果
            sendCallback(callbackId: callbackId, result: ["path": "/path/to/photo.jpg"])
        }
    }

    func sendCallback(callbackId: Int, error: String? = nil, result: Any? = nil) {
        var script = "window.onNativeCallback(\(callbackId)"

        if let error = error {
            script += ", '\(error)', null)"
        } else if let result = result {
            let jsonData = try? JSONSerialization.data(withJSONObject: result)
            let jsonString = String(data: jsonData!, encoding: .utf8)!
            script += ", null, \(jsonString))"
        }

        webView.evaluateJavaScript(script)
    }
}

// Android WebView
public class NativeBridge {
    private WebView webView;

    @JavascriptInterface
    public void call(String dataJson) {
        try {
            JSONObject data = new JSONObject(dataJson);
            int callbackId = data.getInt("callbackId");
            String module = data.getString("module");
            String method = data.getString("method");
            JSONObject params = data.getJSONObject("params");

            // 路由到具体模块
            if ("camera".equals(module)) {
                handleCamera(method, params, callbackId);
            } else if ("location".equals(module)) {
                handleLocation(method, params, callbackId);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    private void handleCamera(String method, JSONObject params, int callbackId) {
        if ("takePhoto".equals(method)) {
            int quality = params.optInt("quality", 80);

            // 启动相机
            Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
            // ... 拍照逻辑

            // 返回结果
            JSONObject result = new JSONObject();
            result.put("path", "/path/to/photo.jpg");
            sendCallback(callbackId, null, result);
        }
    }

    private void sendCallback(int callbackId, String error, JSONObject result) {
        String script = "window.onNativeCallback(" + callbackId;

        if (error != null) {
            script += ", '" + error + "', null)";
        } else {
            script += ", null, " + result.toString() + ")";
        }

        webView.evaluateJavascript(script, null);
    }
}

// Electron main.js
const { ipcMain, dialog } = require('electron');

ipcMain.on('native-call', async (event, data) => {
  const { callbackId, module, method, params } = data;

  try {
    let result;

    if (module === 'camera' && method === 'chooseImage') {
      const files = await dialog.showOpenDialog({
        properties: ['openFile', 'multiSelections'],
        filters: [{ name: 'Images', extensions: ['jpg', 'png'] }]
      });
      result = { paths: files.filePaths };
    }

    // 返回结果给渲染进程
    event.sender.executeJavaScript(
      `window.onNativeCallback(${callbackId}, null, ${JSON.stringify(result)})`
    );
  } catch (error) {
    event.sender.executeJavaScript(
      `window.onNativeCallback(${callbackId}, '${error.message}', null)`
    );
  }
});

// utils/monitor.js
class Monitor {
  constructor() {
    this.init();
  }

  init() {
    // JS 错误
    this.catchJSError();
    // Promise 错误
    this.catchPromiseError();
    // 资源加载错误
    this.catchResourceError();
    // 接口错误
    this.catchAPIError();
  }

  // 捕获 JS 错误
  catchJSError() {
    window.addEventListener('error', (event) => {
      if (event.target !== window) return; // 过滤资源错误

      this.report({
        type: 'jsError',
        message: event.message,
        filename: event.filename,
        lineno: event.lineno,
        colno: event.colno,
        stack: event.error?.stack,
        timestamp: Date.now()
      });
    }, true);
  }

  // 捕获 Promise 错误
  catchPromiseError() {
    window.addEventListener('unhandledrejection', (event) => {
      this.report({
        type: 'promiseError',
        message: event.reason?.message || event.reason,
        stack: event.reason?.stack,
        timestamp: Date.now()
      });
    });
  }

  // 捕获资源加载错误
  catchResourceError() {
    window.addEventListener('error', (event) => {
      const target = event.target;
      if (target === window) return;

      this.report({
        type: 'resourceError',
        resourceType: target.tagName,
        resourceUrl: target.src || target.href,
        timestamp: Date.now()
      });
    }, true);
  }

  // 捕获接口错误
  catchAPIError() {
    const originalFetch = window.fetch;
    window.fetch = async (...args) => {
      const startTime = Date.now();
      try {
        const response = await originalFetch(...args);

        // 记录慢接口
        const duration = Date.now() - startTime;
        if (duration > 3000) {
          this.report({
            type: 'slowAPI',
            url: args[0],
            duration,
            timestamp: Date.now()
          });
        }

        // 记录失败接口
        if (!response.ok) {
          this.report({
            type: 'apiError',
            url: args[0],
            status: response.status,
            statusText: response.statusText,
            timestamp: Date.now()
          });
        }

        return response;
      } catch (error) {
        this.report({
          type: 'apiError',
          url: args[0],
          message: error.message,
          timestamp: Date.now()
        });
        throw error;
      }
    };
  }

  // 上报错误
  report(data) {
    // 添加环境信息
    const errorInfo = {
      ...data,
      platform: this.getPlatform(),
      appVersion: this.getAppVersion(),
      userId: this.getUserId(),
      deviceInfo: this.getDeviceInfo()
    };

    console.error('[Monitor]', errorInfo);

    // 上报到服务器
    this.sendToServer(errorInfo);
  }

  // 发送到服务器
  sendToServer(data) {
    // 使用 sendBeacon 确保数据发送
    if (navigator.sendBeacon) {
      navigator.sendBeacon('/api/monitor/error', JSON.stringify(data));
    } else {
      fetch('/api/monitor/error', {
        method: 'POST',
        body: JSON.stringify(data),
        keepalive: true
      }).catch(() => {});
    }
  }

  getPlatform() {
    // #ifdef APP-PLUS
    return 'app';
    // #endif
    // #ifdef H5
    return 'h5';
    // #endif
    // #ifdef MP-WEIXIN
    return 'weixin';
    // #endif
  }

  getAppVersion() {
    // #ifdef APP-PLUS
    return plus.runtime.version;
    // #endif
    return '1.0.0';
  }

  getUserId() {
    return uni.getStorageSync('userId') || 'guest';
  }

  getDeviceInfo() {
    return {
      model: uni.getSystemInfoSync().model,
      system: uni.getSystemInfoSync().system,
      platform: uni.getSystemInfoSync().platform
    };
  }
}

export default new Monitor();

// lib/utils/monitor.dart
class Monitor {
  static void init() {
    // 捕获 Flutter 异常
    FlutterError.onError = (FlutterErrorDetails details) {
      _reportError(details.exception, details.stack, 'FlutterError');
    };

    // 捕获未捕获异常
    PlatformDispatcher.instance.onError = (error, stack) {
      _reportError(error, stack, 'UnhandledError');
      return true;
    };
  }

  static void _reportError(dynamic exception, StackTrace? stack, String type) {
    final errorInfo = {
      'type': type,
      'message': exception.toString(),
      'stack': stack?.toString(),
      'timestamp': DateTime.now().millisecondsSinceEpoch,
      'platform': Platform.operatingSystem,
      'appVersion': '1.0.0',
    };

    print('[Monitor] $errorInfo');

    // 上报到服务器
    http.post(
      Uri.parse('https://api.example.com/monitor/error'),
      body: jsonEncode(errorInfo),
    );
  }
}

// utils/logger.js
class Logger {
  constructor() {
    this.logs = [];
    this.maxLogs = 100;
  }

  debug(message, ...args) {
    this.log('debug', message, args);
  }

  info(message, ...args) {
    this.log('info', message, args);
  }

  warn(message, ...args) {
    this.log('warn', message, args);
  }

  error(message, ...args) {
    this.log('error', message, args);
    // 错误日志立即上报
    this.flush();
  }

  log(level, message, args) {
    const log = {
      level,
      message,
      args: args.map(arg => {
        try {
          return JSON.stringify(arg);
        } catch (e) {
          return String(arg);
        }
      }),
      timestamp: Date.now(),
      page: this.getCurrentPage()
    };

    console[level](message, ...args);

    this.logs.push(log);

    // 超过限制，删除旧日志
    if (this.logs.length > this.maxLogs) {
      this.logs.shift();
    }

    // 定时上报
    this.scheduleFlush();
  }

  scheduleFlush() {
    if (this.flushTimer) return;

    this.flushTimer = setTimeout(() => {
      this.flush();
    }, 10000); // 10秒上报一次
  }

  flush() {
    if (this.logs.length === 0) return;

    clearTimeout(this.flushTimer);
    this.flushTimer = null;

    const logs = [...this.logs];
    this.logs = [];

    // 批量上报
    fetch('/api/monitor/logs', {
      method: 'POST',
      body: JSON.stringify({
        logs,
        userId: this.getUserId(),
        deviceInfo: this.getDeviceInfo()
      }),
      keepalive: true
    }).catch(() => {});
  }

  getCurrentPage() {
    // #ifdef APP-PLUS
    const pages = getCurrentPages();
    return pages[pages.length - 1]?.route || '';
    // #endif
    return window.location.pathname;
  }

  getUserId() {
    return uni.getStorageSync('userId') || 'guest';
  }

  getDeviceInfo() {
    return uni.getSystemInfoSync();
  }
}

export default new Logger();

// utils/performance.js
class PerformanceMonitor {
  // 监控页面性能
  monitorPagePerformance() {
    if (!window.performance) return;

    window.addEventListener('load', () => {
      setTimeout(() => {
        const timing = performance.timing;
        const metrics = {
          // DNS 查询耗时
          dns: timing.domainLookupEnd - timing.domainLookupStart,
          // TCP 连接耗时
          tcp: timing.connectEnd - timing.connectStart,
          // 请求耗时
          request: timing.responseEnd - timing.requestStart,
          // DOM 解析耗时
          domParse: timing.domContentLoadedEventEnd - timing.domLoading,
          // 首屏时间
          firstPaint: timing.domContentLoadedEventEnd - timing.navigationStart,
          // 完全加载时间
          load: timing.loadEventEnd - timing.navigationStart
        };

        this.report('pagePerformance', metrics);
      }, 0);
    });
  }

  // 监控接口性能
  monitorAPI(url, duration, success) {
    this.report('apiPerformance', {
      url,
      duration,
      success,
      timestamp: Date.now()
    });
  }

  // 监控内存
  monitorMemory() {
    if (!performance.memory) return;

    setInterval(() => {
      const memory = performance.memory;

      // 内存使用超过 80% 报警
      if (memory.usedJSHeapSize / memory.jsHeapSizeLimit > 0.8) {
        this.report('memoryWarning', {
          used: memory.usedJSHeapSize,
          total: memory.jsHeapSizeLimit,
          percentage: (memory.usedJSHeapSize / memory.jsHeapSizeLimit * 100).toFixed(2)
        });
      }
    }, 30000); // 30秒检查一次
  }

  report(type, data) {
    console.log(`[Performance] ${type}:`, data);

    fetch('/api/monitor/performance', {
      method: 'POST',
      body: JSON.stringify({ type, data }),
      keepalive: true
    }).catch(() => {});
  }
}

export default new PerformanceMonitor();

// utils/hot-update.js
class HotUpdate {
  constructor() {
    this.updateUrl = 'https://api.example.com/update/check';
  }

  // 检查更新
  async checkUpdate() {
    try {
      // #ifdef APP-PLUS
      const res = await uni.request({
        url: this.updateUrl,
        data: {
          platform: plus.os.name,
          version: plus.runtime.version
        }
      });

      const { hasUpdate, version, downloadUrl, updateInfo } = res.data;

      if (hasUpdate) {
        uni.showModal({
          title: '发现新版本',
          content: `版本 ${version}\n${updateInfo}`,
          success: (res) => {
            if (res.confirm) {
              this.downloadUpdate(downloadUrl, version);
            }
          }
        });
      }
      // #endif
    } catch (e) {
      console.error('检查更新失败:', e);
    }
  }

  // 下载更新包
  downloadUpdate(url, version) {
    // #ifdef APP-PLUS
    uni.showLoading({ title: '下载中...' });

    const downloadTask = uni.downloadFile({
      url,
      success: (res) => {
        if (res.statusCode === 200) {
          this.installUpdate(res.tempFilePath, version);
        }
      },
      fail: (err) => {
        uni.hideLoading();
        uni.showToast({
          title: '下载失败',
          icon: 'none'
        });
      }
    });

    downloadTask.onProgressUpdate((res) => {
      uni.showLoading({
        title: `下载中 ${res.progress}%`
      });
    });
    // #endif
  }

  // 安装更新
  installUpdate(filePath, version) {
    // #ifdef APP-PLUS
    plus.runtime.install(filePath, {
      force: false
    }, () => {
      uni.hideLoading();
      uni.showModal({
        title: '安装成功',
        content: '应用将重启以完成更新',
        showCancel: false,
        success: () => {
          plus.runtime.restart();
        }
      });
    }, (err) => {
      uni.hideLoading();
      uni.showToast({
        title: '安装失败',
        icon: 'none'
      });
    });
    // #endif
  }

  // 强制更新
  async forceUpdate() {
    // #ifdef APP-PLUS
    plus.runtime.getProperty(plus.runtime.appid, (info) => {
      const localVersion = info.version;

      uni.request({
        url: this.updateUrl,
        data: { version: localVersion },
        success: (res) => {
          const { mustUpdate, downloadUrl } = res.data;

          if (mustUpdate) {
            uni.showModal({
              title: '发现新版本',
              content: '请更新到最新版本',
              showCancel: false,
              success: () => {
                // 跳转应用商店
                if (plus.os.name === 'Android') {
                  plus.runtime.openURL(downloadUrl);
                } else {
                  plus.runtime.openURL('itms-apps://itunes.apple.com/app/id你的AppID');
                }
                // 退出应用
                setTimeout(() => {
                  plus.runtime.quit();
                }, 1000);
              }
            });
          }
        }
      });
    });
    // #endif
  }
}

export default new HotUpdate();

// lib/utils/hot_update.dart
import 'package:flutter/services.dart';
import 'dart:io';

class HotUpdate {
  static const platform = MethodChannel('com.example.app/update');

  // 检查更新
  static Future<void> checkUpdate() async {
    try {
      final response = await http.get(
        Uri.parse('https://api.example.com/flutter/update/check'),
      );

      final data = jsonDecode(response.body);

      if (data['hasUpdate']) {
        _showUpdateDialog(data);
      }
    } catch (e) {
      print('检查更新失败: $e');
    }
  }

  // 下载更新
  static Future<void> downloadUpdate(String url) async {
    final dir = await getApplicationDocumentsDirectory();
    final file = File('${dir.path}/update.zip');

    // 下载文件
    final response = await http.get(Uri.parse(url));
    await file.writeAsBytes(response.bodyBytes);

    // 解压并安装
    await _installUpdate(file.path);
  }

  // 安装更新
  static Future<void> _installUpdate(String filePath) async {
    try {
      await platform.invokeMethod('installUpdate', {
        'filePath': filePath
      });
    } catch (e) {
      print('安装更新失败: $e');
    }
  }

  static void _showUpdateDialog(Map data) {
    // 显示更新弹窗
  }
}

// main.js
const { app, autoUpdater } = require('electron');

class ElectronUpdater {
  constructor() {
    this.feedUrl = 'https://update.example.com';
    this.init();
  }

  init() {
    if (process.platform === 'win32') {
      this.feedUrl += '/win32';
    } else if (process.platform === 'darwin') {
      this.feedUrl += '/darwin';
    }

    autoUpdater.setFeedURL({
      url: `${this.feedUrl}/${app.getVersion()}`
    });

    // 检查更新
    autoUpdater.on('checking-for-update', () => {
      console.log('检查更新...');
    });

    // 发现更新
    autoUpdater.on('update-available', () => {
      console.log('发现新版本');
    });

    // 无可用更新
    autoUpdater.on('update-not-available', () => {
      console.log('已是最新版本');
    });

    // 更新下载完成
    autoUpdater.on('update-downloaded', () => {
      dialog.showMessageBox({
        type: 'info',
        title: '更新提示',
        message: '新版本已下载完成',
        buttons: ['立即重启', '稍后'],
      }).then((result) => {
        if (result.response === 0) {
          autoUpdater.quitAndInstall();
        }
      });
    });

    // 更新错误
    autoUpdater.on('error', (err) => {
      console.error('更新失败:', err);
    });
  }

  // 检查更新
  checkForUpdates() {
    autoUpdater.checkForUpdates();
  }
}

const updater = new ElectronUpdater();

// App 启动时检查
app.on('ready', () => {
  setTimeout(() => {
    updater.checkForUpdates();
  }, 3000);
});

// server/update.js
const express = require('express');
const router = express.Router();

// 版本配置
const versions = {
  android: {
    current: '1.0.5',
    minVersion: '1.0.0',
    downloadUrl: 'https://cdn.example.com/app-1.0.5.wgt',
    updateInfo: '修复了若干bug',
    force: false
  },
  ios: {
    current: '1.0.5',
    minVersion: '1.0.0',
    downloadUrl: 'https://cdn.example.com/app-1.0.5.wgt',
    updateInfo: '修复了若干bug',
    force: false
  }
};

// 检查更新
router.get('/check', (req, res) => {
  const { platform, version } = req.query;

  const config = versions[platform];
  if (!config) {
    return res.json({ hasUpdate: false });
  }

  // 比较版本号
  const hasUpdate = compareVersion(config.current, version) > 0;

  res.json({
    hasUpdate,
    version: config.current,
    downloadUrl: config.downloadUrl,
    updateInfo: config.updateInfo,
    mustUpdate: config.force || compareVersion(version, config.minVersion) < 0
  });
});

function compareVersion(v1, v2) {
  const arr1 = v1.split('.').map(Number);
  const arr2 = v2.split('.').map(Number);

  for (let i = 0; i < 3; i++) {
    if (arr1[i] > arr2[i]) return 1;
    if (arr1[i] < arr2[i]) return -1;
  }
  return 0;
}

module.exports = router;

// 统一日志格式
{
  "level": "error",          // 日志级别
  "message": "接口请求失败",   // 日志内容
  "timestamp": 1704096000000, // 时间戳
  "platform": "android",      // 平台
  "appVersion": "1.0.5",      // App版本
  "userId": "user123",        // 用户ID
  "deviceId": "device456",    // 设备ID
  "page": "/pages/home",      // 当前页面
  "extra": {                  // 额外信息
    "url": "/api/user/info",
    "code": 500
  }
}

// utils/unified-logger.js
class UnifiedLogger {
  constructor() {
    this.queue = [];
    this.maxQueue = 50;
    this.uploadUrl = 'https://log.example.com/collect';
  }

  log(level, message, extra = {}) {
    const logData = {
      level,
      message,
      timestamp: Date.now(),
      platform: this.getPlatform(),
      appVersion: this.getAppVersion(),
      userId: this.getUserId(),
      deviceId: this.getDeviceId(),
      page: this.getCurrentPage(),
      extra
    };

    // 输出到控制台
    console[level](message, extra);

    // 加入队列
    this.queue.push(logData);

    // 达到阈值或错误日志立即上传
    if (this.queue.length >= this.maxQueue || level === 'error') {
      this.flush();
    }
  }

  debug(message, extra) {
    this.log('debug', message, extra);
  }

  info(message, extra) {
    this.log('info', message, extra);
  }

  warn(message, extra) {
    this.log('warn', message, extra);
  }

  error(message, extra) {
    this.log('error', message, extra);
  }

  // 批量上传
  async flush() {
    if (this.queue.length === 0) return;

    const logs = [...this.queue];
    this.queue = [];

    try {
      await uni.request({
        url: this.uploadUrl,
        method: 'POST',
        data: {
          logs,
          deviceInfo: this.getDeviceInfo()
        }
      });
    } catch (e) {
      // 上传失败，重新加入队列
      this.queue.unshift(...logs);
      console.error('日志上传失败:', e);
    }
  }

  getPlatform() {
    // #ifdef APP-PLUS
    return plus.os.name.toLowerCase();
    // #endif
    // #ifdef H5
    return 'h5';
    // #endif
    // #ifdef MP-WEIXIN
    return 'weixin';
    // #endif
    return 'unknown';
  }

  getAppVersion() {
    // #ifdef APP-PLUS
    return plus.runtime.version;
    // #endif
    return '1.0.0';
  }

  getUserId() {
    return uni.getStorageSync('userId') || '';
  }

  getDeviceId() {
    let deviceId = uni.getStorageSync('deviceId');
    if (!deviceId) {
      deviceId = this.generateDeviceId();
      uni.setStorageSync('deviceId', deviceId);
    }
    return deviceId;
  }

  getCurrentPage() {
    // #ifdef APP-PLUS
    const pages = getCurrentPages();
    return pages[pages.length - 1]?.route || '';
    // #endif
    return '';
  }

  getDeviceInfo() {
    return uni.getSystemInfoSync();
  }

  generateDeviceId() {
    return 'device_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
  }
}

export default new UnifiedLogger();

// lib/utils/unified_logger.dart
class UnifiedLogger {
  static final UnifiedLogger _instance = UnifiedLogger._internal();
  factory UnifiedLogger() => _instance;
  UnifiedLogger._internal();

  List<Map<String, dynamic>> _queue = [];
  final int _maxQueue = 50;
  final String _uploadUrl = 'https://log.example.com/collect';

  void log(String level, String message, [Map<String, dynamic>? extra]) {
    final logData = {
      'level': level,
      'message': message,
      'timestamp': DateTime.now().millisecondsSinceEpoch,
      'platform': Platform.operatingSystem,
      'appVersion': '1.0.0',
      'userId': _getUserId(),
      'deviceId': _getDeviceId(),
      'page': _getCurrentPage(),
      'extra': extra ?? {},
    };

    print('[$level] $message ${extra ?? ""}');

    _queue.add(logData);

    if (_queue.length >= _maxQueue || level == 'error') {
      flush();
    }
  }

  void debug(String message, [Map<String, dynamic>? extra]) {
    log('debug', message, extra);
  }

  void info(String message, [Map<String, dynamic>? extra]) {
    log('info', message, extra);
  }

  void warn(String message, [Map<String, dynamic>? extra]) {
    log('warn', message, extra);
  }

  void error(String message, [Map<String, dynamic>? extra]) {
    log('error', message, extra);
  }

  Future<void> flush() async {
    if (_queue.isEmpty) return;

    final logs = List.from(_queue);
    _queue.clear();

    try {
      await http.post(
        Uri.parse(_uploadUrl),
        body: jsonEncode({'logs': logs}),
        headers: {'Content-Type': 'application/json'},
      );
    } catch (e) {
      _queue.insertAll(0, logs);
      print('日志上传失败: $e');
    }
  }

  String _getUserId() {
    // 从本地存储获取
    return '';
  }

  String _getDeviceId() {
    // 从本地存储获取
    return '';
  }

  String _getCurrentPage() {
    // 获取当前路由
    return '';
  }
}

// renderer/logger.js
class ElectronLogger {
  constructor() {
    this.queue = [];
    this.maxQueue = 50;
    this.uploadUrl = 'https://log.example.com/collect';

    // 监听主进程日志
    if (window.require) {
      const { ipcRenderer } = window.require('electron');
      ipcRenderer.on('main-process-log', (event, log) => {
        this.queue.push(log);
      });
    }
  }

  log(level, message, extra = {}) {
    const logData = {
      level,
      message,
      timestamp: Date.now(),
      platform: 'electron',
      appVersion: this.getAppVersion(),
      userId: this.getUserId(),
      deviceId: this.getDeviceId(),
      page: window.location.pathname,
      extra
    };

    console[level](message, extra);

    this.queue.push(logData);

    if (this.queue.length >= this.maxQueue || level === 'error') {
      this.flush();
    }
  }

  debug(message, extra) {
    this.log('debug', message, extra);
  }

  info(message, extra) {
    this.log('info', message, extra);
  }

  warn(message, extra) {
    this.log('warn', message, extra);
  }

  error(message, extra) {
    this.log('error', message, extra);
  }

  async flush() {
    if (this.queue.length === 0) return;

    const logs = [...this.queue];
    this.queue = [];

    try {
      await fetch(this.uploadUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ logs })
      });
    } catch (e) {
      this.queue.unshift(...logs);
      console.error('日志上传失败:', e);
    }
  }

  getAppVersion() {
    if (window.require) {
      const { app } = window.require('@electron/remote');
      return app.getVersion();
    }
    return '1.0.0';
  }

  getUserId() {
    return localStorage.getItem('userId') || '';
  }

  getDeviceId() {
    let deviceId = localStorage.getItem('deviceId');
    if (!deviceId) {
      deviceId = 'device_' + Date.now();
      localStorage.setItem('deviceId', deviceId);
    }
    return deviceId;
  }
}

export default new ElectronLogger();

// server/log-collector.js
const express = require('express');
const router = express.Router();
const { Kafka } = require('kafkajs');

const kafka = new Kafka({
  brokers: ['localhost:9092']
});

const producer = kafka.producer();

// 收集日志
router.post('/collect', async (req, res) => {
  const { logs } = req.body;

  if (!logs || !Array.isArray(logs)) {
    return res.status(400).json({ error: 'Invalid logs' });
  }

  try {
    // 写入 Kafka
    await producer.send({
      topic: 'app-logs',
      messages: logs.map(log => ({
        key: log.userId,
        value: JSON.stringify(log)
      }))
    });

    res.json({ success: true });
  } catch (error) {
    console.error('写入日志失败:', error);
    res.status(500).json({ error: 'Failed to save logs' });
  }
});

module.exports = router;