// 基座應用的核心介面設計
interface MicroAppShell {
  // 註冊子應用
  registerApp(config: AppConfig): void;
  
  // 啟動子應用
  mountApp(appName: string, container: HTMLElement): Promise<void>;
  
  // 卸載子應用
  unmountApp(appName: string): Promise<void>;
  
  // 子應用間通訊
  dispatch(event: string, payload: any): void;
  
  // 訂閱事件
  subscribe(event: string, handler: Function): Unsubscribe;
}

interface AppConfig {
  name: string;
  entry: string;  // 子應用入口 URL
  container: string;  // DOM 容器選擇器
  activeRule: string | ((location: Location) => boolean);
  props?: Record<string, any>;  // 傳遞給子應用的參數
}

// package.json - 將子應用作為 npm 套件引入
{
  "dependencies": {
    "@myorg/micro-app-order": "^1.2.0",
    "@myorg/micro-app-customer": "^2.1.0"
  }
}

// 基座應用中直接 import
import { OrderModule } from '@myorg/micro-app-order';
import { CustomerModule } from '@myorg/micro-app-customer';

// 運行時動態載入子應用
const loadMicroApp = async (name: string, entry: string) => {
  // 1. 獲取子應用 manifest
  const manifest = await fetch(`${entry}/asset-manifest.json`).then(r => r.json());
  
  // 2. 動態載入 JS
  const script = document.createElement('script');
  script.src = `${entry}/${manifest['main.js']}`;
  
  // 3. 等待子應用掛載
  return new Promise((resolve) => {
    script.onload = () => {
      const app = window[`__MICRO_APP_${name}__`];
      resolve(app);
    };
    document.body.appendChild(script);
  });
};

// 決策函數範例
function selectIntegrationStrategy(requirements: Requirements): Strategy {
  // 1. 需要最強隔離（如：嵌入第三方內容）
  if (requirements.strictIsolation && requirements.thirdPartyContent) {
    return 'iframe';
  }
  
  // 2. 需要跨框架共用 UI 元件
  if (requirements.crossFrameworkComponents && !requirements.complexStateSharing) {
    return 'web-components';
  }
  
  // 3. 主流場景：同構或異構微前端
  if (requirements.independentDeployment && requirements.sharedDependencies) {
    return 'module-federation';
  }
  
  // 4. 對隔離有特殊需求
  if (requirements.customSandbox) {
    return 'qiankun-like-sandbox';
  }
  
  return 'module-federation';  // 預設推薦
}

Shell (Webpack 5 + MF)
├── shared-design-system (Remote)
├── micro-product (Remote, React)
├── micro-order (Remote, Vue)
└── micro-member (Remote, Angular)

// webpack.config.js (Host 應用)
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      
      // 聲明要使用的遠端應用
      remotes: {
        orderApp: 'orderApp@http://localhost:3001/remoteEntry.js',
        customerApp: 'customerApp@http://localhost:3002/remoteEntry.js',
      },
      
      // 共享依賴配置
      shared: {
        react: { 
          singleton: true,  // 確保只有一個實例
          requiredVersion: '^18.0.0',
        },
        'react-dom': { 
          singleton: true,
          requiredVersion: '^18.0.0',
        },
      },
    }),
  ],
};

// webpack.config.js (Remote 應用)
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'orderApp',
      filename: 'remoteEntry.js',
      
      // 暴露模組
      exposes: {
        './OrderList': './src/components/OrderList',
        './OrderDetail': './src/pages/OrderDetail',
        './orderService': './src/services/orderService',
      },
      
      // 共享依賴
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
        'react-router-dom': { singleton: true },
      },
    }),
  ],
};

// Host 應用中使用 Remote 模組
// 方式 1：靜態導入（需要 TypeScript 類型聲明）
import OrderList from 'orderApp/OrderList';

// 方式 2：動態導入（推薦，支援錯誤處理）
const OrderList = React.lazy(() => import('orderApp/OrderList'));

// 方式 3：封裝載入邏輯
const loadRemoteModule = async (remoteName: string, moduleName: string) => {
  try {
    const container = window[remoteName];
    if (!container) {
      throw new Error(`Remote ${remoteName} not found`);
    }
    await container.init(__webpack_share_scopes__.default);
    const factory = await container.get(moduleName);
    return factory();
  } catch (error) {
    console.error(`Failed to load ${remoteName}/${moduleName}:`, error);
    throw error;
  }
};

shared: {
  // 策略 1：簡單共享（自動推斷版本）
  'lodash': {},
  
  // 策略 2：單例模式（全域只有一個實例）
  'react': {
    singleton: true,
    strictVersion: true,  // 版本不符時報錯
    requiredVersion: '^18.0.0',
  },
  
  // 策略 3：即時載入（不使用懶載入）
  '@company/design-system': {
    eager: true,  // 打包進主 bundle
    singleton: true,
  },
  
  // 策略 4：版本範圍控制
  'axios': {
    singleton: true,
    requiredVersion: '>=0.21.0 <2.0.0',
  },
}

// 方案 1：版本對齊（推薦）
// 所有應用統一到相同版本
shared: {
  react: {
    singleton: true,
    strictVersion: true,
    requiredVersion: '18.2.0',  // 固定版本
  },
}

// 方案 2：版本範圍容忍
shared: {
  react: {
    singleton: true,
    requiredVersion: '^18.0.0',  // 允許 18.x
  },
}

// 方案 3：Fallback 機制
const loadReactSafely = async () => {
  try {
    return await import('react');
  } catch (e) {
    // 載入本地備份版本
    return await import('./fallback/react');
  }
};

// scripts/check-shared-versions.ts
// 用於 CI 檢查各子應用依賴版本一致性

import * as fs from 'fs';
import * as path from 'path';

interface DependencyReport {
  package: string;
  versions: Map<string, string[]>;  // version -> apps
}

function checkSharedVersions(apps: string[]): DependencyReport[] {
  const sharedPackages = ['react', 'react-dom', 'react-router-dom'];
  const reports: DependencyReport[] = [];
  
  for (const pkg of sharedPackages) {
    const versions = new Map<string, string[]>();
    
    for (const app of apps) {
      const pkgJson = JSON.parse(
        fs.readFileSync(path.join(app, 'package.json'), 'utf-8')
      );
      const version = pkgJson.dependencies?.[pkg] || pkgJson.devDependencies?.[pkg];
      
      if (version) {
        if (!versions.has(version)) {
          versions.set(version, []);
        }
        versions.get(version)!.push(app);
      }
    }
    
    if (versions.size > 1) {
      reports.push({ package: pkg, versions });
    }
  }
  
  return reports;
}

// vite.config.ts (Host)
import { defineConfig } from 'vite';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    federation({
      name: 'shell',
      remotes: {
        orderApp: 'http://localhost:3001/assets/remoteEntry.js',
      },
      shared: ['vue', 'pinia'],
    }),
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false,
  },
});

// vite.config.ts (Remote)
import { defineConfig } from 'vite';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    federation({
      name: 'orderApp',
      filename: 'remoteEntry.js',
      exposes: {
        './OrderList': './src/components/OrderList.vue',
      },
      shared: ['vue', 'pinia'],
    }),
  ],
  build: {
    target: 'esnext',
    minify: false,
  },
});

// 設計系統作為獨立 Remote
// design-system/webpack.config.js
new ModuleFederationPlugin({
  name: 'designSystem',
  filename: 'remoteEntry.js',
  exposes: {
    './Button': './src/components/Button',
    './Table': './src/components/Table',
    './Form': './src/components/Form',
    // ... 200+ 元件
  },
  shared: {
    react: { singleton: true, eager: true },
    'styled-components': { singleton: true },
  },
})

// 使用預載入優化
// shell/src/bootstrap.ts
const preloadDesignSystem = () => {
  const link = document.createElement('link');
  link.rel = 'preload';
  link.as = 'script';
  link.href = 'https://cdn.example.com/design-system/remoteEntry.js';
  document.head.appendChild(link);
};

// shell/src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import { loadMicroApp } from '@/micro/loader';

const routes: RouteRecordRaw[] = [
  // 基座自有頁面
  { path: '/', component: () => import('@/views/Home.vue') },
  { path: '/login', component: () => import('@/views/Login.vue') },
  
  // 子應用路由 - 使用通配符
  {
    path: '/order/:pathMatch(.*)*',
    component: () => import('@/views/MicroAppContainer.vue'),
    meta: { microApp: 'orderApp' },
  },
  {
    path: '/customer/:pathMatch(.*)*',
    component: () => import('@/views/MicroAppContainer.vue'),
    meta: { microApp: 'customerApp' },
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 路由守衛：載入對應的子應用
router.beforeEach(async (to, from, next) => {
  const microAppName = to.meta.microApp as string;
  
  if (microAppName) {
    await loadMicroApp(microAppName);
  }
  
  next();
});

export default router;

// order-app/src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  { path: '/', redirect: '/list' },
  { path: '/list', component: () => import('@/views/OrderList.vue') },
  { path: '/detail/:id', component: () => import('@/views/OrderDetail.vue') },
  { path: '/create', component: () => import('@/views/OrderCreate.vue') },
];

// 關鍵：根據運行環境決定 base path
const getBasePath = () => {
  // 獨立運行
  if (!window.__POWERED_BY_QIANKUN__) {
    return '/';
  }
  // 作為子應用運行
  return '/order';
};

const router = createRouter({
  history: createWebHistory(getBasePath()),
  routes,
});

export default router;

// 基座與子應用路由同步
class RouterSync {
  private shellRouter: Router;
  private listeners: Map<string, Function> = new Map();
  
  constructor(shellRouter: Router) {
    this.shellRouter = shellRouter;
    this.setupPopstateListener();
  }
  
  // 監聽瀏覽器前進/後退
  private setupPopstateListener() {
    window.addEventListener('popstate', () => {
      this.notifyMicroApps();
    });
  }
  
  // 子應用路由變化時通知基座
  onMicroAppRouteChange(appName: string, path: string) {
    const fullPath = `/${appName}${path}`;
    
    // 避免重複觸發
    if (this.shellRouter.currentRoute.value.fullPath !== fullPath) {
      this.shellRouter.replace(fullPath);
    }
  }
  
  // 通知子應用路由變化
  private notifyMicroApps() {
    this.listeners.forEach((callback) => callback(window.location.pathname));
  }
  
  // 子應用註冊監聽
  registerMicroApp(appName: string, callback: Function) {
    this.listeners.set(appName, callback);
  }
}

// shell/src/store/global.ts
import { reactive, readonly } from 'vue';

interface GlobalState {
  user: {
    id: string;
    name: string;
    roles: string[];
    token: string;
  } | null;
  config: {
    language: 'zh-TW' | 'en-US';
    theme: 'light' | 'dark';
    permissions: string[];
  };
  ui: {
    sidebarCollapsed: boolean;
    globalLoading: boolean;
  };
}

const state = reactive<GlobalState>({
  user: null,
  config: {
    language: 'zh-TW',
    theme: 'light',
    permissions: [],
  },
  ui: {
    sidebarCollapsed: false,
    globalLoading: false,
  },
});

// 只暴露只讀版本給子應用
export const globalState = readonly(state);

// 修改方法只在基座內部使用
export const globalActions = {
  setUser(user: GlobalState['user']) {
    state.user = user;
  },
  setLanguage(lang: GlobalState['config']['language']) {
    state.config.language = lang;
  },
  setTheme(theme: GlobalState['config']['theme']) {
    state.config.theme = theme;
  },
  setGlobalLoading(loading: boolean) {
    state.ui.globalLoading = loading;
  },
};

// 暴露給子應用的介面
export const microAppAPI = {
  getState: () => globalState,
  subscribe: (callback: (state: GlobalState) => void) => {
    // 實作狀態訂閱
  },
  requestPermission: async (permission: string) => {
    // 權限請求 API
  },
};

// shared/src/eventBus.ts
type EventHandler = (...args: any[]) => void;

class MicroAppEventBus {
  private events: Map<string, Set<EventHandler>> = new Map();
  private eventHistory: Map<string, any[]> = new Map();  // 用於 replay
  
  // 發送事件
  emit(event: string, ...args: any[]) {
    console.log(`[EventBus] Emit: ${event}`, args);
    
    // 記錄歷史（可選）
    this.eventHistory.set(event, args);
    
    const handlers = this.events.get(event);
    if (handlers) {
      handlers.forEach(handler => {
        try {
          handler(...args);
        } catch (error) {
          console.error(`[EventBus] Handler error for ${event}:`, error);
        }
      });
    }
  }
  
  // 訂閱事件
  on(event: string, handler: EventHandler): () => void {
    if (!this.events.has(event)) {
      this.events.set(event, new Set());
    }
    this.events.get(event)!.add(handler);
    
    // 返回取消訂閱函數
    return () => this.off(event, handler);
  }
  
  // 一次性訂閱
  once(event: string, handler: EventHandler) {
    const wrappedHandler = (...args: any[]) => {
      handler(...args);
      this.off(event, wrappedHandler);
    };
    this.on(event, wrappedHandler);
  }
  
  // 取消訂閱
  off(event: string, handler: EventHandler) {
    const handlers = this.events.get(event);
    if (handlers) {
      handlers.delete(handler);
    }
  }
  
  // 獲取最後一次事件資料（用於子應用延遲載入後獲取）
  getLastEvent(event: string): any[] | undefined {
    return this.eventHistory.get(event);
  }
}

// 單例模式
export const eventBus = new MicroAppEventBus();

// 預定義事件類型（Type-safe）
export const MicroAppEvents = {
  // 用戶相關
  USER_LOGIN: 'user:login',
  USER_LOGOUT: 'user:logout',
  USER_PROFILE_UPDATED: 'user:profile-updated',
  
  // 導航相關
  NAVIGATE_TO: 'navigation:to',
  
  // 業務事件
  ORDER_CREATED: 'order:created',
  ORDER_UPDATED: 'order:updated',
  CUSTOMER_SELECTED: 'customer:selected',
  
  // UI 事件
  SHOW_GLOBAL_LOADING: 'ui:show-loading',
  HIDE_GLOBAL_LOADING: 'ui:hide-loading',
  SHOW_NOTIFICATION: 'ui:notification',
} as const;

// 子應用 A：發送事件
import { eventBus, MicroAppEvents } from '@myorg/shared';

const createOrder = async (orderData: OrderData) => {
  const order = await orderService.create(orderData);
  
  // 通知其他子應用
  eventBus.emit(MicroAppEvents.ORDER_CREATED, {
    orderId: order.id,
    customerId: order.customerId,
    totalAmount: order.totalAmount,
  });
  
  return order;
};

// 子應用 B：接收事件
import { eventBus, MicroAppEvents } from '@myorg/shared';
import { onMounted, onUnmounted } from 'vue';

export function useOrderEvents() {
  let unsubscribe: (() => void) | null = null;
  
  onMounted(() => {
    unsubscribe = eventBus.on(MicroAppEvents.ORDER_CREATED, (payload) => {
      console.log('New order created:', payload);
      // 更新相關資料
      refreshCustomerOrders(payload.customerId);
    });
  });
  
  onUnmounted(() => {
    unsubscribe?.();
  });
}

// ❌ 子應用 A 直接操作子應用 B 的 Store
import { orderStore } from 'orderApp/store';  // 跨應用直接引用
orderStore.setCustomerId(customerId);  // 直接操作

// ✅ 通過事件解耦
// 子應用 A
eventBus.emit('customer:selected', { customerId: '123', customerName: 'ABC Corp' });

// 子應用 B
eventBus.on('customer:selected', ({ customerId }) => {
  // 自行決定如何處理
  localStore.setFilter({ customerId });
  fetchOrders({ customerId });
});

// 子應用使用 CSS Modules
// OrderList.module.css
.container {
  padding: 16px;
}

.button {
  background: #1890ff;
}

// OrderList.tsx
import styles from './OrderList.module.css';

export const OrderList = () => (
  <div className={styles.container}>
    <button className={styles.button}>Submit</button>
  </div>
);

// 使用 PostCSS 自動添加前綴
// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-prefix-selector')({
      prefix: '[data-qiankun="orderApp"]',
      transform: (prefix, selector, prefixedSelector) => {
        if (selector.startsWith(':root')) {
          return selector;  // 不處理 :root
        }
        return prefixedSelector;
      },
    }),
  ],
};

// 輸出結果
// 原始: .btn { color: red; }
// 轉換後: [data-qiankun="orderApp"] .btn { color: red; }

// qiankun 配置啟用 Shadow DOM
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'orderApp',
    entry: '//localhost:3001',
    container: '#subapp-container',
    activeRule: '/order',
    props: { /* ... */ },
  },
]);

start({
  sandbox: {
    strictStyleIsolation: true,  // 啟用 Shadow DOM
    // 或使用實驗性樣式隔離
    experimentalStyleIsolation: true,
  },
});

// ❌ 子應用污染全域變數
window.myGlobalVar = 'polluted';
window.addEventListener('resize', handler);  // 未清理

// ❌ 覆寫原生方法
Array.prototype.customMethod = function() { /* ... */ };

// 簡化版快照沙箱實作
class SnapshotSandbox {
  private windowSnapshot: Map<string, any> = new Map();
  private modifyPropsMap: Map<string, any> = new Map();
  
  activate() {
    // 記錄當前 window 快照
    for (const key in window) {
      this.windowSnapshot.set(key, (window as any)[key]);
    }
    
    // 恢復之前的修改
    this.modifyPropsMap.forEach((value, key) => {
      (window as any)[key] = value;
    });
  }
  
  deactivate() {
    // 記錄變更並恢復原始值
    for (const key in window) {
      if ((window as any)[key] !== this.windowSnapshot.get(key)) {
        this.modifyPropsMap.set(key, (window as any)[key]);
        (window as any)[key] = this.windowSnapshot.get(key);
      }
    }
  }
}

// 使用 Proxy 實現更精細的沙箱
class ProxySandbox {
  private proxy: Window;
  private running = false;
  private fakeWindow: Record<string, any> = {};
  
  constructor() {
    const _this = this;
    
    this.proxy = new Proxy(window, {
      get(target, key: string) {
        // 優先從 fakeWindow 獲取
        if (_this.fakeWindow.hasOwnProperty(key)) {
          return _this.fakeWindow[key];
        }
        
        // 特殊處理
        if (key === 'window' || key === 'self' || key === 'globalThis') {
          return _this.proxy;
        }
        
        const value = (target as any)[key];
        return typeof value === 'function' ? value.bind(target) : value;
      },
      
      set(target, key: string, value) {
        if (_this.running) {
          _this.fakeWindow[key] = value;
        }
        return true;
      },
      
      has(target, key) {
        return key in _this.fakeWindow || key in target;
      },
    });
  }
  
  activate() {
    this.running = true;
  }
  
  deactivate() {
    this.running = false;
  }
  
  getProxy() {
    return this.proxy;
  }
}

// 使用沙箱執行子應用程式碼
const sandbox = new ProxySandbox();
sandbox.activate();

// 在沙箱環境中執行
(function(window) {
  // 子應用程式碼在此執行
  // 所有對 window 的修改都被隔離
}.bind(sandbox.getProxy())(sandbox.getProxy()));

<!-- 基座應用 CSP 配置 -->
<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' https://cdn.trusted-domain.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;
  frame-src 'self' https://trusted-iframe.com;
">

// Nginx 配置
server {
  location / {
    add_header Content-Security-Policy "
      default-src 'self';
      script-src 'self' https://cdn.example.com;
      style-src 'self' 'unsafe-inline';
    ";
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";
    add_header X-XSS-Protection "1; mode=block";
  }
}

// 方式 1：通過 props 傳遞（推薦）
registerMicroApps([
  {
    name: 'orderApp',
    entry: '//localhost:3001',
    container: '#container',
    activeRule: '/order',
    props: {
      getToken: () => authStore.getToken(),
      onTokenExpired: () => authStore.refreshToken(),
    },
  },
]);

// 子應用接收
export async function mount(props: MicroAppProps) {
  const { getToken, onTokenExpired } = props;
  
  // 設定 API 攔截器
  axios.interceptors.request.use((config) => {
    config.headers.Authorization = `Bearer ${getToken()}`;
    return config;
  });
  
  axios.interceptors.response.use(
    (response) => response,
    async (error) => {
      if (error.response?.status === 401) {
        await onTokenExpired();
        return axios(error.config);
      }
      throw error;
    }
  );
}

// 方式 2：共享 Cookie（跨域需謹慎）
// 設定 Cookie 為相同主域名
document.cookie = `token=${token}; domain=.example.com; path=/; secure; samesite=strict`;

// 方式 3：LocalStorage + 同域（不推薦跨域）
localStorage.setItem('auth_token', token);

// shell/src/permission.ts
interface Permission {
  code: string;
  name: string;
  microApp?: string;  // 關聯的子應用
}

class PermissionService {
  private permissions: Set<string> = new Set();
  
  async loadPermissions(userId: string) {
    const perms = await api.getUserPermissions(userId);
    this.permissions = new Set(perms.map(p => p.code));
  }
  
  hasPermission(code: string): boolean {
    return this.permissions.has(code);
  }
  
  // 檢查子應用訪問權限
  canAccessMicroApp(appName: string): boolean {
    const appPermissionMap: Record<string, string> = {
      orderApp: 'ORDER_MODULE_ACCESS',
      customerApp: 'CUSTOMER_MODULE_ACCESS',
      reportApp: 'REPORT_MODULE_ACCESS',
    };
    
    return this.hasPermission(appPermissionMap[appName]);
  }
  
  // 暴露給子應用的 API
  getPermissionsForMicroApp(appName: string): string[] {
    const prefix = appName.toUpperCase();
    return Array.from(this.permissions)
      .filter(p => p.startsWith(prefix));
  }
}

export const permissionService = new PermissionService();

// 安全審計裝飾器
function auditLog(action: string) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    
    descriptor.value = async function (...args: any[]) {
      const startTime = Date.now();
      
      try {
        const result = await originalMethod.apply(this, args);
        
        // 記錄成功操作
        await logService.log({
          action,
          microApp: getCurrentMicroApp(),
          userId: authStore.getUserId(),
          params: args,
          result: 'success',
          duration: Date.now() - startTime,
        });
        
        return result;
      } catch (error) {
        // 記錄失敗操作
        await logService.log({
          action,
          microApp: getCurrentMicroApp(),
          userId: authStore.getUserId(),
          params: args,
          result: 'failure',
          error: error.message,
          duration: Date.now() - startTime,
        });
        
        throw error;
      }
    };
    
    return descriptor;
  };
}

// 使用範例
class OrderService {
  @auditLog('ORDER_CREATE')
  async createOrder(data: OrderData) {
    // 業務邏輯
  }
  
  @auditLog('ORDER_APPROVE')
  async approveOrder(orderId: string) {
    // 需要二次驗證
    await this.requestSecondaryAuth();
    // 業務邏輯
  }
}

// 子應用 manifest 配置
interface MicroAppManifest {
  name: string;
  version: string;
  entry: string;  // JS 入口
  styles: string[];  // CSS 檔案
  publicPath: string;
  activeRule: string;
  dependencies: {
    [key: string]: string;  // 共享依賴版本
  };
  deployedAt: string;
  gitCommit: string;
}

// manifest.json 範例
{
  "apps": {
    "orderApp": {
      "name": "orderApp",
      "version": "1.2.3",
      "entry": "https://cdn.example.com/order/1.2.3/remoteEntry.js",
      "styles": ["https://cdn.example.com/order/1.2.3/styles.css"],
      "publicPath": "https://cdn.example.com/order/1.2.3/",
      "activeRule": "/order",
      "dependencies": {
        "react": "18.2.0",
        "react-dom": "18.2.0"
      },
      "deployedAt": "2026-01-23T10:00:00Z",
      "gitCommit": "abc1234"
    }
  }
}

# .github/workflows/deploy-micro-app.yml
name: Deploy Micro App

on:
  push:
    branches: [main]
    paths:
      - 'apps/order-app/**'

env:
  APP_NAME: orderApp
  CDN_BUCKET: micro-apps-cdn

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
        working-directory: apps/order-app
      
      - name: Run tests
        run: npm test
        working-directory: apps/order-app
      
      - name: Build
        run: npm run build
        working-directory: apps/order-app
        env:
          PUBLIC_PATH: https://cdn.example.com/${{ env.APP_NAME }}/${{ github.sha }}/
      
      - name: Upload to CDN
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-1
      
      - run: |
          aws s3 sync apps/order-app/dist \
            s3://${{ env.CDN_BUCKET }}/${{ env.APP_NAME }}/${{ github.sha }}/ \
            --cache-control "public, max-age=31536000"
      
      - name: Update Manifest
        run: |
          curl -X POST https://api.example.com/manifest/update \
            -H "Authorization: Bearer ${{ secrets.MANIFEST_API_KEY }}" \
            -H "Content-Type: application/json" \
            -d '{
              "app": "${{ env.APP_NAME }}",
              "version": "${{ github.sha }}",
              "entry": "https://cdn.example.com/${{ env.APP_NAME }}/${{ github.sha }}/remoteEntry.js"
            }'

// shared/version-check.ts
import semver from 'semver';

interface VersionCompatibility {
  shell: string;
  microApps: Record<string, string>;
  sharedLibraries: Record<string, string>;
}

const compatibilityMatrix: VersionCompatibility = {
  shell: '^2.0.0',
  microApps: {
    orderApp: '^1.0.0',
    customerApp: '^1.0.0',
  },
  sharedLibraries: {
    react: '18.x',
    '@company/design-system': '^3.0.0',
  },
};

function checkCompatibility(
  appName: string,
  appVersion: string,
  shellVersion: string
): { compatible: boolean; warnings: string[] } {
  const warnings: string[] = [];
  
  // 檢查 shell 版本相容性
  if (!semver.satisfies(shellVersion, compatibilityMatrix.shell)) {
    return {
      compatible: false,
      warnings: [`Shell version ${shellVersion} is not compatible`],
    };
  }
  
  // 檢查子應用版本
  const requiredVersion = compatibilityMatrix.microApps[appName];
  if (requiredVersion && !semver.satisfies(appVersion, requiredVersion)) {
    warnings.push(`${appName}@${appVersion} may have compatibility issues`);
  }
  
  return { compatible: true, warnings };
}

// shell/src/micro/compatibility.ts
export function createCompatibilityChecker() {
  return {
    beforeLoad: async (app: LoadableApp) => {
      const manifest = await fetchManifest(app.name);
      const shellVersion = process.env.SHELL_VERSION;
      
      const { compatible, warnings } = checkCompatibility(
        app.name,
        manifest.version,
        shellVersion
      );
      
      if (!compatible) {
        throw new Error(`Micro app ${app.name} is not compatible with current shell`);
      }
      
      warnings.forEach(w => console.warn(w));
      
      return true;
    },
  };
}

// manifest-server/src/canary.ts
interface CanaryConfig {
  app: string;
  oldVersion: string;
  newVersion: string;
  percentage: number;  // 0-100
  rules: CanaryRule[];
}

interface CanaryRule {
  type: 'user_id' | 'region' | 'random';
  value: string | number;
}

class CanaryService {
  private configs: Map<string, CanaryConfig> = new Map();
  
  // 判斷使用者應該使用哪個版本
  getVersionForUser(appName: string, context: UserContext): string {
    const config = this.configs.get(appName);
    
    if (!config) {
      return this.getStableVersion(appName);
    }
    
    // 規則判斷
    if (this.matchCanaryRules(config.rules, context)) {
      return config.newVersion;
    }
    
    // 隨機灰度
    const hash = this.hashUserId(context.userId);
    if (hash % 100 < config.percentage) {
      return config.newVersion;
    }
    
    return config.oldVersion;
  }
  
  private hashUserId(userId: string): number {
    let hash = 0;
    for (let i = 0; i < userId.length; i++) {
      hash = ((hash << 5) - hash) + userId.charCodeAt(i);
      hash = hash & hash;
    }
    return Math.abs(hash);
  }
  
  private matchCanaryRules(rules: CanaryRule[], context: UserContext): boolean {
    return rules.some(rule => {
      switch (rule.type) {
        case 'user_id':
          return context.userId === rule.value;
        case 'region':
          return context.region === rule.value;
        default:
          return false;
      }
    });
  }
}

// manifest-server/src/rollback.ts
class RollbackService {
  private versionHistory: Map<string, string[]> = new Map();
  
  // 記錄版本歷史
  recordDeployment(appName: string, version: string) {
    if (!this.versionHistory.has(appName)) {
      this.versionHistory.set(appName, []);
    }
    
    const history = this.versionHistory.get(appName)!;
    history.push(version);
    
    // 只保留最近 10 個版本
    if (history.length > 10) {
      history.shift();
    }
  }
  
  // 回滾到上一個版本
  async rollback(appName: string): Promise<string> {
    const history = this.versionHistory.get(appName);
    
    if (!history || history.length < 2) {
      throw new Error(`No previous version available for ${appName}`);
    }
    
    const previousVersion = history[history.length - 2];
    
    // 更新 manifest
    await this.updateManifest(appName, previousVersion);
    
    // 通知基座刷新
    await this.notifyShell(appName);
    
    // 記錄回滾事件
    await this.logRollback(appName, previousVersion);
    
    return previousVersion;
  }
  
  private async notifyShell(appName: string) {
    // 通過 WebSocket 或 Server-Sent Events 通知
    eventEmitter.emit('app:version-changed', { appName });
  }
}

// 部署流水線配置
const deploymentPipeline = {
  stages: [
    {
      name: 'canary',
      percentage: 1,
      duration: '30m',
      metrics: {
        errorRate: { threshold: 0.01, action: 'rollback' },
        p99Latency: { threshold: 500, action: 'alert' },
      },
    },
    {
      name: 'early-adopters',
      percentage: 10,
      duration: '2h',
      metrics: {
        errorRate: { threshold: 0.005, action: 'rollback' },
        conversionRate: { threshold: -0.05, action: 'alert' },  // 相對變化
      },
    },
    {
      name: 'full-rollout',
      percentage: 100,
      approval: 'manual',  // 需要人工確認
    },
  ],
  rollback: {
    automatic: true,
    timeToRollback: '30s',
    keepOldVersion: '24h',  // CDN 保留舊版本
  },
};

// shell/src/preload.ts
class PreloadManager {
  private preloadedApps: Set<string> = new Set();
  private preloadLinks: Map<string, HTMLLinkElement> = new Map();
  
  // 預載入子應用
  preload(appName: string, entry: string) {
    if (this.preloadedApps.has(appName)) return;
    
    // 預載入 remoteEntry.js
    const link = document.createElement('link');
    link.rel = 'preload';
    link.as = 'script';
    link.href = entry;
    link.crossOrigin = 'anonymous';
    document.head.appendChild(link);
    
    this.preloadLinks.set(appName, link);
    this.preloadedApps.add(appName);
  }
  
  // 預取子應用（低優先級）
  prefetch(appName: string, entry: string) {
    if (this.preloadedApps.has(appName)) return;
    
    const link = document.createElement('link');
    link.rel = 'prefetch';
    link.href = entry;
    document.head.appendChild(link);
    
    this.preloadLinks.set(appName, link);
    this.preloadedApps.add(appName);
  }
  
  // 根據路由預測預載入
  predictivePreload(currentRoute: string) {
    const predictions = this.getPredictedRoutes(currentRoute);
    
    predictions.forEach(({ appName, entry, probability }) => {
      if (probability > 0.7) {
        this.preload(appName, entry);
      } else if (probability > 0.3) {
        this.prefetch(appName, entry);
      }
    });
  }
  
  private getPredictedRoutes(currentRoute: string) {
    // 基於歷史資料或規則預測下一個可能訪問的路由
    const routeGraph: Record<string, { appName: string; entry: string; probability: number }[]> = {
      '/': [
        { appName: 'orderApp', entry: '/order/remoteEntry.js', probability: 0.6 },
        { appName: 'customerApp', entry: '/customer/remoteEntry.js', probability: 0.3 },
      ],
      '/order': [
        { appName: 'customerApp', entry: '/customer/remoteEntry.js', probability: 0.8 },
      ],
    };
    
    return routeGraph[currentRoute] || [];
  }
}

export const preloadManager = new PreloadManager();

// 在路由守衛中使用
router.afterEach((to) => {
  preloadManager.predictivePreload(to.path);
});

// webpack.config.js
module.exports = {
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
    vue: 'Vue',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      inject: true,
    }),
  ],
};

// index.html - 使用 CDN
<!DOCTYPE html>
<html>
<head>
  <!-- 預連接 CDN -->
  <link rel="preconnect" href="https://cdn.jsdelivr.net">
  
  <!-- 關鍵依賴使用 preload -->
  <link rel="preload" href="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js" as="script">
  <link rel="preload" href="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js" as="script">
</head>
<body>
  <div id="root"></div>
  
  <!-- 按順序載入 -->
  <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
</body>
</html>

// sw.ts - Service Worker
const CACHE_NAME = 'micro-frontend-v1';
const REMOTE_ENTRY_CACHE = 'remote-entries-v1';

// 快取策略
const cacheStrategies = {
  // 靜態資源：Cache First
  static: async (request: Request) => {
    const cached = await caches.match(request);
    if (cached) return cached;
    
    const response = await fetch(request);
    const cache = await caches.open(CACHE_NAME);
    cache.put(request, response.clone());
    return response;
  },
  
  // remoteEntry：Stale While Revalidate
  remoteEntry: async (request: Request) => {
    const cache = await caches.open(REMOTE_ENTRY_CACHE);
    const cached = await cache.match(request);
    
    const fetchPromise = fetch(request).then(response => {
      cache.put(request, response.clone());
      return response;
    });
    
    return cached || fetchPromise;
  },
  
  // API：Network First
  api: async (request: Request) => {
    try {
      const response = await fetch(request);
      return response;
    } catch (error) {
      const cached = await caches.match(request);
      if (cached) return cached;
      throw error;
    }
  },
};

self.addEventListener('fetch', (event: FetchEvent) => {
  const url = new URL(event.request.url);
  
  if (url.pathname.includes('remoteEntry.js')) {
    event.respondWith(cacheStrategies.remoteEntry(event.request));
  } else if (url.pathname.startsWith('/api/')) {
    event.respondWith(cacheStrategies.api(event.request));
  } else if (url.pathname.match(/\.(js|css|png|jpg|svg)$/)) {
    event.respondWith(cacheStrategies.static(event.request));
  }
});

// 用於評估是否需要拆分為獨立子應用
interface SplitDecisionCriteria {
  // 必要條件（需全部滿足）
  required: {
    hasIndependentTeam: boolean;      // 有獨立團隊負責
    hasClearBoundary: boolean;        // 業務邊界清晰
    hasIndependentDeployNeed: boolean; // 需要獨立部署
  };
  
  // 加分項（滿足越多越適合）
  beneficial: {
    differentTechStack: boolean;      // 技術棧不同
    differentReleaseSchedule: boolean; // 發布週期不同
    lowCouplingWithOthers: boolean;   // 與其他模組低耦合
    largeCodebase: boolean;           // 程式碼量大（>50k 行）
    complexDomain: boolean;           // 領域複雜度高
  };
}

function shouldSplit(criteria: SplitDecisionCriteria): {
  decision: 'split' | 'no-split' | 'reconsider';
  reason: string;
} {
  const { required, beneficial } = criteria;
  
  // 必要條件不滿足 → 不拆分
  if (!required.hasIndependentTeam || !required.hasClearBoundary) {
    return {
      decision: 'no-split',
      reason: '缺乏獨立團隊或業務邊界不清晰',
    };
  }
  
  // 計算加分項
  const benefitScore = Object.values(beneficial).filter(Boolean).length;
  
  if (benefitScore >= 3 && required.hasIndependentDeployNeed) {
    return { decision: 'split', reason: '符合拆分條件' };
  }
  
  if (benefitScore >= 2) {
    return { decision: 'reconsider', reason: '可考慮先用 Monorepo 模組化' };
  }
  
  return { decision: 'no-split', reason: '拆分收益不明顯' };
}

// shared/src/logger.ts
interface LogEntry {
  timestamp: string;
  level: 'debug' | 'info' | 'warn' | 'error';
  microApp: string;
  traceId: string;
  userId?: string;
  message: string;
  context?: Record<string, any>;
  stack?: string;
}

class MicroAppLogger {
  private appName: string;
  private traceId: string;
  
  constructor(appName: string) {
    this.appName = appName;
    this.traceId = this.getOrCreateTraceId();
  }
  
  private getOrCreateTraceId(): string {
    // 從基座獲取或生成新的 traceId
    return window.__SHELL_TRACE_ID__ || crypto.randomUUID();
  }
  
  private createEntry(
    level: LogEntry['level'],
    message: string,
    context?: Record<string, any>
  ): LogEntry {
    return {
      timestamp: new Date().toISOString(),
      level,
      microApp: this.appName,
      traceId: this.traceId,
      userId: this.getUserId(),
      message,
      context,
    };
  }
  
  info(message: string, context?: Record<string, any>) {
    const entry = this.createEntry('info', message, context);
    this.send(entry);
    console.log(`[${this.appName}]`, message, context);
  }
  
  error(message: string, error?: Error, context?: Record<string, any>) {
    const entry = this.createEntry('error', message, {
      ...context,
      errorMessage: error?.message,
      stack: error?.stack,
    });
    this.send(entry);
    console.error(`[${this.appName}]`, message, error);
  }
  
  private async send(entry: LogEntry) {
    // 批次發送到日誌服務
    await logBuffer.add(entry);
  }
  
  private getUserId(): string | undefined {
    return window.__SHELL_USER_ID__;
  }
}

// 使用範例
const logger = new MicroAppLogger('orderApp');
logger.info('Order created', { orderId: '123', amount: 1000 });
logger.error('Failed to submit order', error, { orderId: '123' });

// shared/src/performance.ts
interface PerformanceMetrics {
  microApp: string;
  metrics: {
    // 載入時間
    loadTime: number;
    mountTime: number;
    firstContentfulPaint: number;
    largestContentfulPaint: number;
    
    // 運行時指標
    jsHeapSize: number;
    domNodes: number;
    
    // 自定義指標
    apiLatency: Record<string, number>;
  };
}

class PerformanceMonitor {
  private appName: string;
  private startTime: number = 0;
  
  constructor(appName: string) {
    this.appName = appName;
  }
  
  // 子應用載入開始
  markLoadStart() {
    this.startTime = performance.now();
    performance.mark(`${this.appName}-load-start`);
  }
  
  // 子應用掛載完成
  markMountComplete() {
    performance.mark(`${this.appName}-mount-complete`);
    
    const loadTime = performance.now() - this.startTime;
    
    performance.measure(
      `${this.appName}-load-time`,
      `${this.appName}-load-start`,
      `${this.appName}-mount-complete`
    );
    
    this.reportMetrics({
      loadTime,
      mountTime: loadTime,
    });
  }
  
  // 收集 Web Vitals
  collectWebVitals() {
    // 使用 web-vitals 庫
    import('web-vitals').then(({ onCLS, onFID, onLCP, onFCP, onTTFB }) => {
      onCLS((metric) => this.reportMetric('CLS', metric.value));
      onFID((metric) => this.reportMetric('FID', metric.value));
      onLCP((metric) => this.reportMetric('LCP', metric.value));
      onFCP((metric) => this.reportMetric('FCP', metric.value));
      onTTFB((metric) => this.reportMetric('TTFB', metric.value));
    });
  }
  
  private reportMetrics(metrics: Partial<PerformanceMetrics['metrics']>) {
    // 上報到監控平台
    navigator.sendBeacon('/api/metrics', JSON.stringify({
      microApp: this.appName,
      timestamp: Date.now(),
      metrics,
    }));
  }
  
  private reportMetric(name: string, value: number) {
    this.reportMetrics({ [name]: value } as any);
  }
}

// React 錯誤邊界
class MicroAppErrorBoundary extends React.Component<
  { appName: string; fallback: React.ReactNode; children: React.ReactNode },
  { hasError: boolean; error?: Error }
> {
  state = { hasError: false, error: undefined };
  
  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }
  
  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    // 上報錯誤
    errorReporter.report({
      microApp: this.props.appName,
      error: {
        message: error.message,
        stack: error.stack,
        componentStack: errorInfo.componentStack,
      },
      context: {
        url: window.location.href,
        userAgent: navigator.userAgent,
      },
    });
  }
  
  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }
    return this.props.children;
  }
}

// 全域錯誤捕獲
window.addEventListener('error', (event) => {
  errorReporter.report({
    microApp: getCurrentMicroApp() || 'shell',
    error: {
      message: event.message,
      filename: event.filename,
      lineno: event.lineno,
      colno: event.colno,
    },
  });
});

window.addEventListener('unhandledrejection', (event) => {
  errorReporter.report({
    microApp: getCurrentMicroApp() || 'shell',
    error: {
      message: event.reason?.message || String(event.reason),
      stack: event.reason?.stack,
    },
  });
});

## 角色
你是一位微前端架構專家，熟悉 Module Federation 和 qiankun。

## 任務
請為我生成一個 Vue 3 子應用的完整專案模板，需符合以下要求：

1. **技術棧**
   - Vue 3 + TypeScript + Vite
   - Pinia 狀態管理
   - Vue Router 4
   - Module Federation 配置

2. **微前端整合**
   - 可獨立運行，也可作為子應用載入
   - 與基座共享 Vue、Pinia
   - 生命週期函數（bootstrap, mount, unmount）
   - 接收基座傳遞的 props（token, eventBus）

3. **專案結構**
   請生成完整的目錄結構和關鍵檔案內容

4. **最佳實務**
   - CSS 使用 scoped 或 CSS Modules
   - 錯誤邊界處理
   - 效能監控 hook

// src/main.ts - 子應用入口
import { createApp, App as VueApp } from 'vue';
import { createPinia } from 'pinia';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import routes from './router';
import { setupGlobalProps } from './micro/props';

let app: VueApp | null = null;
let router: ReturnType<typeof createRouter> | null = null;
let pinia: ReturnType<typeof createPinia> | null = null;

// 獨立運行
if (!window.__POWERED_BY_QIANKUN__) {
  bootstrap().then(mount);
}

export async function bootstrap() {
  console.log('[orderApp] bootstrap');
  // 初始化工作
}

export async function mount(props: MicroAppProps = {}) {
  console.log('[orderApp] mount', props);
  
  const { container, getToken, eventBus } = props;
  
  // 創建路由
  router = createRouter({
    history: createWebHistory(
      window.__POWERED_BY_QIANKUN__ ? '/order' : '/'
    ),
    routes,
  });
  
  // 創建狀態管理
  pinia = createPinia();
  
  // 創建 Vue 應用
  app = createApp(App);
  app.use(router);
  app.use(pinia);
  
  // 設置全域屬性
  setupGlobalProps(app, { getToken, eventBus });
  
  // 掛載
  const mountElement = container
    ? container.querySelector('#app')
    : document.getElementById('app');
    
  app.mount(mountElement!);
}

export async function unmount() {
  console.log('[orderApp] unmount');
  
  app?.unmount();
  app = null;
  router = null;
  pinia = null;
}

export async function update(props: MicroAppProps) {
  console.log('[orderApp] update', props);
  // 處理 props 更新
}

## 角色
你是一位資深微前端架構師，請審查以下架構設計。

## 當前架構

## 需要你分析
1. 這個架構有什麼潛在問題？
2. React 17 和 18 並存會有什麼風險？
3. 共享組件用 npm package 是否合適？
4. 請給出改進建議

## 請用以下格式回覆
- 🔴 嚴重問題：...
- 🟡 潛在風險：...
- 🟢 優點：...
- 💡 改進建議：...

## 架構審查報告

### 🔴 嚴重問題
1. **React 版本衝突**
   - Shell (React 17) 與 micro-order (React 18) 版本不一致
   - Module Federation 的 singleton 配置可能導致運行時錯誤
   - 建議：統一升級到 React 18，或配置 strictVersion: false

2. **shared-components 用 npm package**
   - 更新組件需要所有子應用重新發布
   - 喪失 Module Federation 的獨立部署優勢
   - 建議：改為 Remote 模組，運行時載入

### 🟡 潛在風險
1. CSS 衝突未提及隔離方案
2. 缺乏統一的錯誤處理機制
3. Angular 15 即將 EOL，需規劃升級

### 🟢 優點
1. 技術棧多樣化符合微前端理念
2. 業務領域拆分看起來合理

### 💡 改進建議
1. 將 shared-components 改為 Module Federation Remote
2. 統一 React 版本到 18.x
3. 加入 CSS 隔離方案（建議 CSS Modules）
4. 建立跨應用錯誤邊界

// scripts/analyze-deps.ts
import * as fs from 'fs';
import * as path from 'path';

interface DependencyAnalysis {
  app: string;
  dependencies: Record<string, string>;
  devDependencies: Record<string, string>;
}

interface ConflictReport {
  package: string;
  versions: { app: string; version: string }[];
  severity: 'critical' | 'warning' | 'info';
  suggestion: string;
}

async function analyzeDependencies(appsDir: string): Promise<ConflictReport[]> {
  const apps = fs.readdirSync(appsDir);
  const allDeps: DependencyAnalysis[] = [];
  
  // 收集所有依賴
  for (const app of apps) {
    const pkgPath = path.join(appsDir, app, 'package.json');
    if (fs.existsSync(pkgPath)) {
      const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
      allDeps.push({
        app,
        dependencies: pkg.dependencies || {},
        devDependencies: pkg.devDependencies || {},
      });
    }
  }
  
  // 分析衝突
  const reports: ConflictReport[] = [];
  const criticalPackages = ['react', 'react-dom', 'vue', '@angular/core'];
  
  const packageVersions = new Map<string, { app: string; version: string }[]>();
  
  for (const { app, dependencies } of allDeps) {
    for (const [pkg, version] of Object.entries(dependencies)) {
      if (!packageVersions.has(pkg)) {
        packageVersions.set(pkg, []);
      }
      packageVersions.get(pkg)!.push({ app, version });
    }
  }
  
  // 生成報告
  for (const [pkg, versions] of packageVersions) {
    const uniqueVersions = [...new Set(versions.map(v => v.version))];
    
    if (uniqueVersions.length > 1) {
      const isCritical = criticalPackages.includes(pkg);
      
      reports.push({
        package: pkg,
        versions,
        severity: isCritical ? 'critical' : 'warning',
        suggestion: isCritical
          ? `統一 ${pkg} 版本，建議使用 ${uniqueVersions.sort().pop()}`
          : `建議統一 ${pkg} 版本以減少 bundle 大小`,
      });
    }
  }
  
  return reports;
}

// 生成 AI 可讀的報告
async function generateAIPrompt(reports: ConflictReport[]): Promise<string> {
  const critical = reports.filter(r => r.severity === 'critical');
  const warnings = reports.filter(r => r.severity === 'warning');
  
  return `
## 依賴衝突分析報告

### 嚴重衝突（需立即處理）
${critical.map(r => `
- **${r.package}**
  - 衝突版本：${r.versions.map(v => `${v.app}: ${v.version}`).join(', ')}
  - 建議：${r.suggestion}
`).join('')}

### 警告（建議處理）
${warnings.slice(0, 10).map(r => `
- **${r.package}**：${r.versions.length} 個不同版本
`).join('')}

請分析這些衝突可能導致的運行時問題，並提供解決方案。
  `;
}

const warningSignals = {
  // 🔴 高風險信號
  critical: [
    '超過 50% 的開發時間花在「解決架構問題」',
    '部署失敗率超過 10%',
    '首屏載入時間超過 5 秒',
    '頻繁出現跨子應用的 Bug',
  ],
  
  // 🟡 中風險信號  
  warning: [
    '新人上手時間超過 2 週',
    '每次需求都需要改 3 個以上子應用',
    '共享依賴版本超過 3 種',
    'E2E 測試經常失敗',
  ],
  
  // 🟢 需關注信號
  attention: [
    '子應用間通訊事件超過 20 種',
    '基座程式碼持續膨脹',
    '文件跟不上架構變化',
  ],
};

## 📋 微前端導入前評估檢查清單

### 組織與團隊
- [ ] 團隊規模 >= 3 個獨立團隊
- [ ] 每個團隊有明確的業務領域負責
- [ ] 管理層理解並支持微前端的長期投入
- [ ] 有專人負責基礎設施維護

### 技術基礎
- [ ] 有成熟的 CI/CD 流程
- [ ] 有完善的監控和日誌系統
- [ ] 有自動化測試體系
- [ ] 團隊具備前端工程化經驗

### 業務需求
- [ ] 業務領域邊界清晰可拆分
- [ ] 有獨立部署的實際需求
- [ ] 對首屏效能的要求已評估
- [ ] 漸進式遷移路徑已規劃

### 風險評估
- [ ] 已評估過度拆分的風險
- [ ] 已評估版本衝突的風險
- [ ] 已評估效能下降的風險
- [ ] 有回滾和應急方案

## 📋 微前端架構設計檢查清單

### 基座設計
- [ ] 路由管理方案確定
- [ ] 認證/授權整合方案確定
- [ ] 全域狀態管理方案確定
- [ ] 錯誤邊界處理方案確定
- [ ] 子應用載入器設計完成

### 子應用規範
- [ ] 生命週期函數規範（bootstrap/mount/unmount）
- [ ] 路由 base path 規範
- [ ] CSS 隔離方案（Module/BEM/Shadow DOM）
- [ ] JS 沙箱需求評估
- [ ] 打包輸出格式規範

### 共享機制
- [ ] 共享依賴清單確定
- [ ] 版本管理策略確定
- [ ] 共享組件載入方式確定
- [ ] 事件通訊規範確定

### 部署架構
- [ ] CDN 部署方案確定
- [ ] Manifest 管理方案確定
- [ ] 灰度發布策略確定
- [ ] 回滾機制確定

## 📋 子應用開發檢查清單

### 專案初始化
- [ ] 使用團隊標準模板建立專案
- [ ] 配置正確的 Module Federation 設定
- [ ] 實現標準生命週期函數
- [ ] 配置獨立運行模式

### 開發規範
- [ ] 使用 TypeScript 強型別
- [ ] CSS 使用 scoped 或 CSS Modules
- [ ] 遵循統一的程式碼風格
- [ ] 添加必要的 JSDoc 註解

### 整合測試
- [ ] 單元測試覆蓋率 >= 80%
- [ ] 與基座整合測試通過
- [ ] 與其他子應用共存測試通過
- [ ] 效能指標符合預算

### 部署前檢查
- [ ] 共享依賴版本與基座一致
- [ ] 打包產物大小合理（< 500KB gzip）
- [ ] 無 console.log 等除錯程式碼
- [ ] 錯誤監控已接入

## 📋 微前端上線前最終檢查清單

### 功能驗證
- [ ] 所有子應用功能正常
- [ ] 子應用切換流暢
- [ ] 路由同步正確
- [ ] 認證狀態正確傳遞
- [ ] 跨應用通訊正常

### 效能驗證
- [ ] 首屏載入時間 < 3 秒
- [ ] LCP < 2.5 秒
- [ ] FID < 100 毫秒
- [ ] CLS < 0.1
- [ ] 記憶體無明顯洩漏

### 穩定性驗證
- [ ] 錯誤監控已生效
- [ ] 日誌收集正常
- [ ] 灰度發布機制就緒
- [ ] 回滾流程已演練
- [ ] 應急聯絡人已確認

### 文件與培訓
- [ ] 架構文件已更新
- [ ] 操作手冊已完成
- [ ] 團隊培訓已完成
- [ ] FAQ 文件已準備