generator-mico-cli 0.2.1 → 0.2.2-8.beta.1

package/generators/micro-react/templates/apps/layout/src/components/MicroAppLoader/container-manager.ts

@@ -1,202 +0,0 @@
-/**
- * 微应用容器管理器
- *
- * 核心策略：
- * 1. 容器在 document.body 中创建，与 React 生命周期解耦
- * 2. 激活时移动到占位元素内，参与正常文档流
- * 3. 停用时移回 body 并隐藏
- *
- * 这样既避免了 React unmount 时删除容器导致的竞态问题，
- * 又能让容器在激活时参与正常的 CSS 布局。
- *
- * @see https://github.com/umijs/qiankun/issues/2845
- */
-
-import type { MicroApp } from 'qiankun';
-
-// ============================================================================
-// 类型定义
-// ============================================================================
-
-type ContainerStatus = 'active' | 'hidden' | 'pending-delete';
-
-interface ContainerEntry {
-  container: HTMLElement;
-  microApp: MicroApp | null;
-  status: ContainerStatus;
-  deleteTimer: ReturnType<typeof setTimeout> | null;
-}
-
-// ============================================================================
-// 常量
-// ============================================================================
-
-/** 容器删除延迟（毫秒）- 给 qiankun 足够时间完成清理 */
-const DELETE_DELAY = 5000;
-
-/** CSS 类名 */
-const CSS_CLASS = {
-  base: 'micro-app-container-managed',
-  hidden: 'micro-app-container-managed--hidden',
-  active: 'micro-app-container-managed--active',
-} as const;
-
-// ============================================================================
-// 状态
-// ============================================================================
-
-const containers = new Map<string, ContainerEntry>();
-
-// ============================================================================
-// 私有方法
-// ============================================================================
-
-function createContainer(appName: string): HTMLElement {
-  const container = document.createElement('div');
-  container.id = `micro-app-${appName}`;
-  container.className = `${CSS_CLASS.base} ${CSS_CLASS.hidden}`;
-  document.body.appendChild(container);
-  return container;
-}
-
-// ============================================================================
-// 公开 API
-// ============================================================================
-
-/**
- * 获取或创建容器
- */
-export function getContainer(appName: string): HTMLElement {
-  let entry = containers.get(appName);
-
-  if (entry) {
-    // 取消待删除的计时器（容器被复用）
-    if (entry.deleteTimer) {
-      clearTimeout(entry.deleteTimer);
-      entry.deleteTimer = null;
-    }
-    entry.status = 'hidden';
-    return entry.container;
-  }
-
-  // 创建新容器
-  const container = createContainer(appName);
-  entry = {
-    container,
-    microApp: null,
-    status: 'hidden',
-    deleteTimer: null,
-  };
-  containers.set(appName, entry);
-
-  return container;
-}
-
-/**
- * 激活容器：移动到占位元素内，参与正常文档流
- */
-export function activateContainer(appName: string, target: HTMLElement): void {
-  const entry = containers.get(appName);
-  if (!entry) return;
-
-  const { container } = entry;
-
-  // 移动容器到占位元素内（参与文档流）
-  target.appendChild(container);
-
-  // 切换样式
-  container.classList.remove(CSS_CLASS.hidden);
-  container.classList.add(CSS_CLASS.active);
-
-  entry.status = 'active';
-}
-
-/**
- * 停用容器：移回 body 并隐藏
- */
-export function deactivateContainer(appName: string): void {
-  const entry = containers.get(appName);
-  if (!entry) return;
-
-  const { container } = entry;
-
-  // 移回 body（脱离 React 树）
-  document.body.appendChild(container);
-
-  // 切换样式
-  container.classList.remove(CSS_CLASS.active);
-  container.classList.add(CSS_CLASS.hidden);
-
-  entry.status = 'hidden';
-}
-
-/**
- * 设置微应用实例
- */
-export function setMicroApp(appName: string, microApp: MicroApp): void {
-  const entry = containers.get(appName);
-  if (entry) {
-    entry.microApp = microApp;
-  }
-}
-
-/**
- * 获取微应用实例
- */
-export function getMicroApp(appName: string): MicroApp | null {
-  return containers.get(appName)?.microApp ?? null;
-}
-
-/**
- * 安全卸载微应用并安排容器延迟删除
- */
-export async function unmountApp(appName: string): Promise<void> {
-  const entry = containers.get(appName);
-  if (!entry) return;
-
-  const { microApp } = entry;
-
-  if (microApp) {
-    entry.microApp = null;
-
-    // 等待各阶段完成再卸载
-    try {
-      await microApp.loadPromise;
-      await microApp.bootstrapPromise;
-      await microApp.mountPromise;
-    } catch {
-      // 忽略
-    }
-
-    try {
-      await microApp.unmount();
-    } catch {
-      // 忽略
-    }
-  }
-
-  // 安排延迟删除
-  if (!entry.deleteTimer) {
-    entry.status = 'pending-delete';
-    entry.deleteTimer = setTimeout(() => {
-      deleteContainer(appName);
-    }, DELETE_DELAY);
-  }
-}
-
-/**
- * 删除容器
- */
-function deleteContainer(appName: string): void {
-  const entry = containers.get(appName);
-  if (!entry) return;
-
-  // 只删除 pending-delete 状态的容器（未被重新激活）
-  if (entry.status === 'pending-delete') {
-    entry.container.remove();
-    containers.delete(appName);
-  } else {
-    // 容器被重新激活了，清除计时器引用
-    entry.deleteTimer = null;
-  }
-}

package/generators/micro-react/templates/packages/shared-styles/README.md

@@ -1,124 +0,0 @@
-# <%= packageScope %>/shared-styles
-
-共享样式包 - 主题变量、CSS Variables、Less 变量。
-
-## 功能
-
-- 🎨 **主题系统**：亮色/暗黑主题 CSS 变量
-- 📦 **Less 变量**：封装 CSS 变量的 Less 变量，提供编辑器提示
-- 🔗 **Arco Design 覆盖**：品牌色映射到 Arco Design 变量
-
-## 安装
-
-```bash
-# 在应用的 package.json 中添加依赖
-"dependencies": {
-  "<%= packageScope %>/shared-styles": "workspace:*"
-}
-
-# 然后运行
-pnpm install
-```
-
-## 使用方式
-
-### 方式 1：主应用 - 导入全部
-
-在主应用（layout）的 `global.less` 中导入入口文件：
-
-```less
-@import '<%= packageScope %>/shared-styles';
-```
-
-这将导入：
-- 亮色主题 CSS 变量定义
-- 暗黑主题 CSS 变量定义
-- Arco Design 变量覆盖
-- Less 变量定义
-
-### 方式 2：子应用 - 仅导入 Less 变量（推荐）⭐
-
-**子应用使用此方式避免重复打包 CSS 变量定义：**
-
-```less
-@import '<%= packageScope %>/shared-styles/variables-only';
-```
-
-这将只导入 Less 变量，不包含 CSS 变量定义（约减少 5-10KB）。
-CSS 变量由主应用注入到 `body` 上，子应用自动继承。
-
-### 方式 3：在组件样式中使用变量
-
-```less
-// 子应用组件中
-@import '<%= packageScope %>/shared-styles/variables-only';
-
-.my-component {
-  background-color: @color-fill-1;
-  color: @color-text-2;
-  border: 1px solid @color-border-2;
-}
-```
-
-## 文件结构
-
-```
-packages/shared-styles/
-├── index.less              # 入口文件，导入全部（主应用用）
-├── variables-only.less     # 仅 Less 变量（子应用 global.less 用）⭐
-├── theme-inject.less       # 主题注入（子应用独立运行时用）⭐
-├── variables.less          # Less 变量 + 主题导入
-├── arco-override.less      # Arco Design 变量覆盖
-└── themes/
-    ├── normal/
-    │   └── custom-var.less # 亮色主题 CSS 变量
-    └── dark/
-        └── custom-var.less # 暗黑主题 CSS 变量
-```
-
-## 主要变量
-
-### 品牌色
-| 变量 | 说明 |
-|------|------|
-| `@Brand1-1` ~ `@Brand1-7` | 品牌主色系列 |
-| `@Brand2-1` ~ `@Brand2-7` | 品牌辅助色系列 |
-
-### 中性色
-| 变量 | 说明 |
-|------|------|
-| `@color-text-1` ~ `@color-text-5` | 文字颜色 |
-| `@color-fill-1` ~ `@color-fill-5` | 填充颜色 |
-| `@color-border-1` ~ `@color-border-4` | 边框颜色 |
-
-### 功能色
-| 变量 | 说明 |
-|------|------|
-| `@Success-1` ~ `@Success-7` | 成功状态色 |
-| `@Warning-1` ~ `@Warning-7` | 警告状态色 |
-| `@Danger-1` ~ `@Danger-7` | 危险状态色 |
-
-## 微前端子应用配置
-
-> 详细配置指南请参考 [主题色切换文档 - 子应用适配](../../apps/layout/docs/feature-主题色切换.md#微前端子应用主题适配)
-
-**快速配置：**
-
-```less
-// global.less - 仅导入 Less 变量
-@import '<%= packageScope %>/shared-styles/variables-only';
-```
-
-```typescript
-// app.tsx - 开发环境条件注入（避免生产打包主题）
-if (process.env.NODE_ENV === 'development') {
-  if (typeof window !== 'undefined' && !window.__POWERED_BY_QIANKUN__) {
-    import('./styles/theme.less');
-  }
-}
-```
-
-## 相关文档
-
-- [主题色切换](../../apps/layout/docs/feature-主题色切换.md) - 主题系统详解与子应用适配
-- [微前端模式](../../apps/layout/docs/feature-微前端模式.md) - qiankun 架构说明

package/generators/micro-react/templates/packages/shared-styles/arco-design-mobile-override.less

@@ -1,91 +0,0 @@
-@import "./variables.less";
-
-/*
-
-以下注释变量参考：
-@see https://github.com/arco-design/arco-design-mobile/blob/4d8aa4656fb18a5490d56677a31255fd48ed2b24/packages/arcodesign/tokens/app/arcodesign/default/index.less#L7
-
-@background-color: #FFFFFF;
-@dark-background-color: #17171A;
-@container-background-color: #FFFFFF;
-@dark-container-background-color: #232324;
-@card-background-color: #F7F8FA;
-@dark-card-background-color: hsla(0, 0%, 100%, 0.08);
-@font-color: #1d2129;
-@dark-font-color: #f6f6f6;
-@sub-font-color: #4e5969;
-@dark-sub-font-color: #c5c5c5;
-@sub-info-font-color: #86909c;
-@dark-sub-info-font-color: #929293;
-@line-color: #e5e6eb;
-@dark-line-color: #484849;
-@lighter-line-color: #f2f3f5;
-@dark-lighter-line-color: #2e2e30;
-@primary-color: #165DFF;
-@dark-primary-color: #3C7EFF;
-@primary-disabled-color: #94BFFF;
-@dark-primary-disabled-color: #0E32A6;
-@lighter-primary-color: #E8F3FF;
-@dark-lighter-primary-color: #000D4D;
-@danger-color: #F53F3F;
-@dark-danger-color: #F76965;
-@warning-color: #FF7D00;
-@dark-warning-color: #FF9626;
-@success-color: #00B42A;
-@dark-success-color: #27C346;
-@disabled-color: #c9cdd4;
-@dark-disabled-color: #5f5f60;
-@mask-background: rgba(0, 0, 0, 0.6);
-@mask-content-color: #FFFFFF;
-@dark-mask-content-color: rgba(255, 255, 255, 0.9);
-@mask-content-background: #FFFFFF;
-@dark-mask-content-background: #2A2A2B;
-
-*/
-
-:root {
-  --background-color: @color-text-5;
-  --dark-background-color: @color-text-1;
-  --container-background-color: @color-text-5;
-  --dark-container-background-color: @color-text-5;
-  --card-background-color: @color-text-5;
-  --dark-card-background-color: @color-text-1;
-  --font-color: @color-text-2;
-  --dark-font-color: @color-text-2;
-  // --sub-font-color
-  // --dark-sub-font-color
-  // --sub-info-font-color
-  // --dark-sub-info-font-color
-  --line-color: @color-border-2;
-  --dark-line-color: @color-border-2;
-  // --lighter-line-color
-  // --dark-lighter-line-color
-  --primary-color: @Brand1-6;
-  --dark-primary-color: @Brand1-6;
-  --primary-disabled-color: @Brand1-3;
-  --dark-primary-disabled-color: @Brand1-3;
-  // --lighter-primary-color
-  --dark-lighter-primary-color: @color-text-1; // TODO: 设计稿里面亮色主题下这里是用 color-text-5 看起来怪怪的，暂时用 color-text-1 代替
-  --danger-color: @Danger-6;
-  --dark-danger-color: @Danger-6;
-  --warning-color: @Warning-6;
-  --dark-warning-color: @Warning-6;
-  --success-color: @Success-6;
-  --dark-success-color: @Success-6;
-  --disabled-color: @color-fill-3;
-  --dark-disabled-color: @color-fill-3;
-  // --mask-background
-  --mask-content-color: @color-text-5;
-  --dark-mask-content-color: @color-text-1;
-  --mask-content-background: @color-text-5;
-  --dark-mask-content-background: @color-text-5;
-
-  --toast-background: @color-text-1;
-  &.dark {
-    --toast-background: @color-text-3;
-  }
-
-  --button-radius: @border-radius-lg;
-  --toast-border-radius: @border-radius-lg;
-  --dark-toast-text-color: @color-text-5;
-}

package/generators/micro-react/templates/packages/shared-styles/arco-override.less

@@ -1,119 +0,0 @@
-// ==================== Arco Design 变量覆盖 ====================
-// 将 custom-var.less 中定义的 brand1-x 变量覆盖到 Arco Design 的 primary 和 link 变量
-// 参考文档：https://arco.design/react/docs/token
-//
-// 注意：使用属性选择器提高优先级（特异性 0,1,1 > Arco 的 0,0,1）
-// 确保覆盖 arco.css 中的默认蓝色主题变量
-// body:not([arco-theme]) 匹配亮色主题，body[arco-theme='dark'] 匹配暗色主题
-
-body:not([arco-theme]),
-body[arco-theme='dark'] {
-  // ==================== Primary 颜色覆盖 ====================
-  // 将 Brand1-x 映射到 primary-x，使用 CSS 变量引用（RGB 三分量格式）
-  --primary-1: var(--Brand1-1, 242 235 255);
-  --primary-2: var(--Brand1-2, 220 198 255);
-  --primary-3: var(--Brand1-3, 195 163 255);
-  --primary-4: var(--Brand1-4, 169 129 255);
-  --primary-5: var(--Brand1-5, 140 94 255);
-  --primary-6: var(--Brand1-6, 110 60 255);
-  --primary-7: var(--Brand1-7, 75 37 210);
-
-  // ==================== Link 颜色覆盖 ====================
-  // 将 Brand1-x 映射到 link-x，使用 CSS 变量引用（RGB 三分量格式）
-  --link-1: var(--Brand1-1, 242 235 255);
-  --link-2: var(--Brand1-2, 220 198 255);
-  --link-3: var(--Brand1-3, 195 163 255);
-  --link-4: var(--Brand1-4, 169 129 255);
-  --link-5: var(--Brand1-5, 140 94 255);
-  --link-6: var(--Brand1-6, 110 60 255);
-  --link-7: var(--Brand1-7, 75 37 210);
-
-  // ==================== Success 颜色覆盖 ====================
-  // 将 Success-x 映射到 success-x，使用 CSS 变量引用（RGB 三分量格式）
-  --success-1: var(--Success-1, 232 255 234);
-  --success-2: var(--Success-2, 175 240 181);
-  --success-3: var(--Success-3, 123 225 136);
-  --success-5: var(--Success-5, 35 195 67);
-  --success-6: var(--Success-6, 0 180 42);
-  --success-7: var(--Success-7, 0 154 41);
-
-  // ==================== Warning 颜色覆盖 ====================
-  // 将 Warning-x 映射到 warning-x，使用 CSS 变量引用（RGB 三分量格式）
-  --warning-1: var(--Warning-1, 255 247 232);
-  --warning-2: var(--Warning-2, 255 228 186);
-  --warning-3: var(--Warning-3, 255 207 139);
-  --warning-5: var(--Warning-5, 255 154 46);
-  --warning-6: var(--Warning-6, 255 125 0);
-  --warning-7: var(--Warning-7, 255 154 46);
-
-  // ==================== Danger 颜色覆盖 ====================
-  // 将 Danger-x 映射到 danger-x，使用 CSS 变量引用（RGB 三分量格式）
-  --danger-1: var(--Danger-1, 255 236 232);
-  --danger-2: var(--Danger-2, 253 205 197);
-  --danger-3: var(--Danger-3, 251 172 163);
-  --danger-5: var(--Danger-5, 247 101 96);
-  --danger-6: var(--Danger-6, 245 63 63);
-  --danger-7: var(--Danger-7, 203 38 52);
-
-  // ==================== Border radius ====================
-  // 全部圆角都设置为8px
-  --border-radius-small: 8px;
-  --border-radius-medium: 8px;
-  --border-radius-large: 8px;
-  --color-bg-1: var(--color-text-5);
-  --color-bg-2: var(--color-text-5);
-  --color-bg-3: var(--color-text-5);
-  --color-bg-4: var(--color-text-5);
-  --color-bg-5: var(--color-text-5);
-  --color-neutral-1: var(--color-fill-1);
-  --color-neutral-2: var(--color-fill-2);
-  --color-neutral-3: var(--color-fill-3);
-  --color-neutral-4: var(--color-fill-4);
-  --color-neutral-5: var(--color-fill-5);
-}
-
-.arco-drawer .arco-drawer-close-icon,
-.arco-modal .arco-modal-close-icon {
-  font-size: 16px;
-}
-
-.arco-checkbox-mask {
-  border-radius: 2px;
-}
-
-.arco-tree-node {
-  border-radius: var(--border-radius-large);
-}
-
-.arco-btn-primary:not(.arco-btn-disabled) {
-  background-color: rgb(var(--Brand1-6));
-  color: white;
-}
-
-/**
- * 自定义滚动条样式
- * @see https: //jira-vywrajy.micoworld.net/browse/MP-630
- */
- .scrollbar-style() {
-  &::-webkit-scrollbar {
-    /* 滚动条宽度。必须指定宽度后，才能指定背景颜色 */
-    width: 4px;
-    height: 4px;
-  }
-
-  /* 滚动条轨道 */
-  // *::-webkit-scrollbar-track {
-  //   background: @color-text-5;
-  //   border-radius: @border-radius-sm;
-  // }
-
-  /* 滚动条滑块 */
-  &::-webkit-scrollbar-thumb {
-    background: var(--color-fill-4);
-    border-radius: 4px;
-  }
-}
-
-.arco-table-layout-fixed .arco-table-content-inner {
-  .scrollbar-style();
-}

package/generators/micro-react/templates/packages/shared-styles/index.d.ts

@@ -1,44 +0,0 @@
-/**
- * <%= packageScope %>/shared-styles 类型声明
- * 这些模块导出 Less 样式文件，无需具体类型导出
- */
-
-declare module '<%= packageScope %>/shared-styles' {
-  const content: void;
-  export default content;
-}
-
-declare module '<%= packageScope %>/shared-styles/variables' {
-  const content: void;
-  export default content;
-}
-
-declare module '<%= packageScope %>/shared-styles/variables-only' {
-  const content: void;
-  export default content;
-}
-
-declare module '<%= packageScope %>/shared-styles/theme-inject' {
-  const content: void;
-  export default content;
-}
-
-declare module '<%= packageScope %>/shared-styles/themes/normal' {
-  const content: void;
-  export default content;
-}
-
-declare module '<%= packageScope %>/shared-styles/themes/dark' {
-  const content: void;
-  export default content;
-}
-
-declare module '<%= packageScope %>/shared-styles/arco-override' {
-  const content: void;
-  export default content;
-}
-
-declare module '<%= packageScope %>/shared-styles/arco-design-mobile-override' {
-  const content: void;
-  export default content;
-}

package/generators/micro-react/templates/packages/shared-styles/index.less

@@ -1,13 +0,0 @@
-// ==================== 共享样式入口 ====================
-// 此文件作为 <%= packageScope %>/shared-styles 包的入口
-// 导入此文件即可获取所有主题变量和 Less 变量
-
-// 导入主题 CSS 变量（亮色 + 暗黑）
-@import './themes/normal/custom-var.less';
-@import './themes/dark/custom-var.less';
-
-// 导入 Arco Design 变量覆盖
-@import './arco-override.less';
-
-// 导入 Less 变量定义
-@import './variables.less';

package/generators/micro-react/templates/packages/shared-styles/package.json

@@ -1,30 +0,0 @@
-{
-  "name": "<%= packageScope %>/shared-styles",
-  "version": "0.0.1",
-  "private": true,
-  "description": "共享样式 - 主题变量、CSS Variables、Less 变量",
-  "main": "index.less",
-  "types": "index.d.ts",
-  "exports": {
-    ".": "./index.less",
-    "./variables": "./variables.less",
-    "./variables-only": "./variables-only.less",
-    "./theme-inject": "./theme-inject.less",
-    "./themes/normal": "./themes/normal/custom-var.less",
-    "./themes/dark": "./themes/dark/custom-var.less",
-    "./arco-override": "./arco-override.less",
-    "./arco-design-mobile-override": "./arco-design-mobile-override.less"
-  },
-  "files": [
-    "themes/",
-    "*.less"
-  ],
-  "keywords": [
-    "theme",
-    "styles",
-    "less",
-    "css-variables",
-    "mico"
-  ],
-  "author": "<%= author %>"
-}

package/generators/micro-react/templates/packages/shared-styles/theme-inject.less

@@ -1,10 +0,0 @@
-// ==================== 主题注入文件 ====================
-// 仅用于子应用独立运行时注入主题 CSS 变量
-// 作为微前端子应用运行时，不需要导入此文件（主应用已注入）
-//
-// 使用场景：子应用独立 dev 预览
-
-@import './themes/normal/custom-var.less';
-@import './themes/dark/custom-var.less';
-@import './arco-override.less';
-