generator-mico-cli 0.2.33 → 1.0.0

package/generators/micro-react/templates/apps/layout/src/pages/User/Login/index.less

@@ -7,9 +7,12 @@
   width: 100%;
   overflow: hidden;
   position: relative;
-  background-color: @color-fill-2;
-  background-image:
-    radial-gradient(at 10% 10%, rgba(22, 93, 255, 0.08) 0%, transparent 60%),
+  background-color: @fill-2;
+  background-image: radial-gradient(
+      at 10% 10%,
+      rgba(22, 93, 255, 0.08) 0%,
+      transparent 60%
+    ),
     radial-gradient(at 90% 90%, rgba(22, 93, 255, 0.08) 0%, transparent 60%);
 }
 
@@ -32,8 +35,8 @@
   width: 100%;
   max-width: 420px;
   padding: 48px;
-  background: @color-text-5;
-  border-radius: @border-radius-lg;
+  background: @text-5;
+  border-radius: @border-radius-md;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
   transition: all 0.3s ease-in-out;
 
@@ -53,7 +56,7 @@
   width: 56px;
   height: 56px;
   margin-bottom: 16px;
-  color: @Brand2-6;
+  color: @brand2-6;
 
   svg {
     filter: drop-shadow(0 4px 8px rgba(22, 93, 255, 0.2));
@@ -69,14 +72,14 @@
   font-size: 24px;
   font-weight: 600;
   line-height: 32px;
-  color: @color-text-1;
+  color: @text-1;
 }
 
 .subTitle {
   margin-top: 8px;
   font-size: 14px;
   line-height: 22px;
-  color: @color-text-3;
+  color: @text-3;
   display: block;
 }
 
@@ -87,25 +90,25 @@
       border-radius: @border-radius-sm;
       padding-top: 6px;
       padding-bottom: 6px;
-      border: 1px solid @color-border-2;
+      border: 1px solid @line-2;
       transition: all 0.2s;
 
       input {
         background: transparent;
 
         &::placeholder {
-          color: @color-text-3;
+          color: @text-3;
         }
       }
 
       &:hover {
-        background-color: @color-fill-2;
-        border-color: @Brand2-6;
+        background-color: @fill-2;
+        border-color: @brand2-6;
       }
 
       &.arco-input-inner-wrapper-focus {
-        background-color: @color-text-5;
-        border-color: @Brand2-6;
+        background-color: @text-5;
+        border-color: @brand2-6;
         box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
       }
     }
@@ -113,7 +116,7 @@
     // Input.Password 样式（边框在外层）
     .arco-input-password {
       border-radius: @border-radius-sm;
-      border: 1px solid @color-border-2;
+      border: 1px solid @line-2;
       transition: all 0.2s;
 
       // 内层不要边框，但保持 padding
@@ -136,18 +139,18 @@
         background: transparent;
 
         &::placeholder {
-          color: @color-text-3;
+          color: @text-3;
         }
       }
 
       &:hover {
-        background-color: @color-fill-2;
-        border-color: @Brand2-6;
+        background-color: @fill-2;
+        border-color: @brand2-6;
       }
 
       &-focus {
-        background-color: @color-text-5;
-        border-color: @Brand2-6;
+        background-color: @text-5;
+        border-color: @brand2-6;
         box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
       }
     }
@@ -157,12 +160,12 @@
       font-size: 16px;
       font-weight: 500;
       border-radius: @border-radius-sm;
-      background: linear-gradient(90deg, @Brand2-6 0%, @Brand2-5 100%);
+      background: linear-gradient(90deg, @brand2-6 0%, @brand2-5 100%);
       border: none;
       box-shadow: 0 4px 10px rgba(24, 144, 255, 0.2);
 
       &:hover {
-        background: linear-gradient(90deg, @Brand2-7 0%, @Brand2-6 100%);
+        background: linear-gradient(90deg, @brand2-7 0%, @brand2-6 100%);
         box-shadow: 0 6px 16px rgba(24, 144, 255, 0.28);
       }
     }
@@ -178,15 +181,18 @@
 }
 
 .copyright {
-  color: @color-text-3;
+  color: @text-3;
   font-size: 12px;
 }
 
 body[data-theme='dark'] {
   .container {
-    background-color: @color-fill-1;
-    background-image:
-      radial-gradient(at 10% 10%, rgba(24, 144, 255, 0.12) 0%, transparent 60%),
+    background-color: @fill-1;
+    background-image: radial-gradient(
+        at 10% 10%,
+        rgba(24, 144, 255, 0.12) 0%,
+        transparent 60%
+      ),
       radial-gradient(at 90% 90%, rgba(24, 144, 255, 0.12) 0%, transparent 60%);
   }
 
@@ -196,12 +202,12 @@ body[data-theme='dark'] {
   }
 
   .content {
-    background: @color-fill-2;
+    background: @fill-2;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
   }
 
   .logo {
-    color: @Brand2-5;
+    color: @brand2-5;
 
     svg {
       filter: drop-shadow(0 4px 10px rgba(24, 144, 255, 0.45));
@@ -211,30 +217,30 @@ body[data-theme='dark'] {
   .form {
     :global {
       .arco-input-inner-wrapper {
-        border: 1px solid @color-border-1;
+        border: 1px solid @line-1;
 
         input {
           background: transparent;
 
           &::placeholder {
-            color: @color-text-4;
+            color: @text-4;
           }
         }
 
         &:hover {
-          background-color: @color-fill-2;
-          border-color: @Brand2-6;
+          background-color: @fill-2;
+          border-color: @brand2-6;
         }
 
         &.arco-input-inner-wrapper-focus {
-          background-color: @color-fill-1;
-          border-color: @Brand2-6;
+          background-color: @fill-1;
+          border-color: @brand2-6;
           box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2);
         }
       }
 
       .arco-input-password {
-        border: 1px solid @color-border-1;
+        border: 1px solid @line-1;
 
         .arco-input-inner-wrapper {
           border: none;
@@ -255,18 +261,18 @@ body[data-theme='dark'] {
           background: transparent;
 
           &::placeholder {
-            color: @color-text-4;
+            color: @text-4;
           }
         }
 
         &:hover {
-          background-color: @color-fill-2;
-          border-color: @Brand2-6;
+          background-color: @fill-2;
+          border-color: @brand2-6;
         }
 
         &-focus {
-          background-color: @color-fill-1;
-          border-color: @Brand2-6;
+          background-color: @fill-1;
+          border-color: @brand2-6;
           box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2);
         }
       }

package/generators/micro-react/templates/packages/common-intl/README.md

@@ -43,14 +43,15 @@ const { fetchMultilingualData, i18n } = initIntl({
 主应用（`apps/layout`）在 `app.tsx` 的 `render` 函数中调用 `fetchMultilingualData`，确保渲染前完成多语言数据加载：
 
 ```typescript
+import { Message } from '@mico-platform/ui';
 import { fetchMultilingualData, getCurrentLocale, type ILang } from '<%= packageScope %>/common-intl';
 
 export function render(oldRender: () => void): void {
   fetchMultilingualData({
     requestInstance: commonRequest,
     messageInstance: {
-      error: micoUI.Message.error,
-      warning: micoUI.Message.warning,
+      error: Message.error,
+      warning: Message.warning,
     },
     lang: getCurrentLocale() as ILang,
     localeRequestUrl: process.env.LOCALE_REQUEST_URL,

package/generators/subapp-react/index.js

@@ -9,7 +9,7 @@ const {
   collectFiles,
   transformDestPath,
   isTemplateFile,
-  getPackageVersionsParallel,
+  getMicoTemplateVersions,
   detectPackageScope,
   setupErrorHandlers,
   createLogger,
@@ -147,23 +147,14 @@ module.exports = class extends Generator {
 
       // 在 mico_cli 根目录执行 npm view，以使用该目录 .npmrc 中的 Nexus 认证
       const cliRoot = path.resolve(__dirname, '../..');
-      this.logger.verbose('Fetching latest package versions (parallel)...');
-
-      // 并行获取版本
-      const versions = await getPackageVersionsParallel(
-        [
-          { name: '@mico-platform/ui', fallback: '1.0.0' },
-          { name: '@mico-platform/theme', fallback: '1.0.0' },
-        ],
-        8000,
-        cliRoot,
-      );
+      this.logger.verbose('Fetching mico package versions from manifest...');
 
-      const micoUiVer = versions['@mico-platform/ui'];
-      const themeVer = versions['@mico-platform/theme'];
+      const micoVersions = await getMicoTemplateVersions(cliRoot, 8000);
+      const ui = micoVersions['@mico-platform/ui'];
+      const theme = micoVersions['@mico-platform/theme'];
 
-      this.logger.verbose('@mico-platform/ui version:', micoUiVer);
-      this.logger.verbose('@mico-platform/theme version:', themeVer);
+      this.logger.verbose('@mico-platform/ui range:', ui.range, 'resolved:', ui.resolved);
+      this.logger.verbose('@mico-platform/theme range:', theme.range, 'resolved:', theme.resolved);
 
       const templateData = {
         appName: this.appName,
@@ -172,9 +163,9 @@ module.exports = class extends Generator {
         appNameSnake: this.appName.replace(/-/g, '_'),
         packageScope: this.packageScope,
         devPort: this.devPort,
-        micoUiVersion: `^${micoUiVer}`,
-        themeVersion: `^${themeVer}`,
-        micoUiVersionExact: micoUiVer
+        micoUiVersion: `^${ui.resolved}`,
+        themeVersion: `^${theme.resolved}`,
+        micoUiVersionExact: ui.resolved,
       };
 
       this.logger.verbose('Template data:', JSON.stringify(templateData, null, 2));

package/generators/subapp-react/templates/homepage/config/config.dev.ts

@@ -2,17 +2,11 @@
 
 import { defineConfig } from '@umijs/max';
 
-/**
- * ⚠️⚠️ 不要修改这个变量名，版本升级工具会读取这个变量名，进行版本升级
- * @name mico-ui 版本
- * @description 开发环境使用 mico-ui 的最新版本
- */
-const MICO_UI_VERSION = '<%= micoUiVersionExact %>';
-
 /**
  * 开发环境配置
  * - 不配置 externals，直接打包依赖，方便独立运行调试
  * - 生产环境通过 config.prod.ts 配置 externals 复用主应用依赖
+ * - 样式由主应用 layout 提供；子应用独立运行时见 app.tsx 条件加载
  */
 const config: ReturnType<typeof defineConfig> = {
   publicPath: '/',
@@ -21,46 +15,6 @@ const config: ReturnType<typeof defineConfig> = {
   define: {
     'process.env.NODE_ENV': 'development',
   },
-  // /**
-  //  * @name 脚本加载配置
-  //  * @description 开发环境独立运行时，通过 CDN 加载公共依赖
-  //  * 作为微前端子应用运行时，这些库由主应用提供
-  //  */
-  // headScripts: [
-  //   'https://unpkg.com/react@18/umd/react.development.js',
-  //   'https://unpkg.com/react-dom@18/umd/react-dom.development.js',
-  //   'https://unpkg.com/@mico-platform/ui@<%= micoUiVersionExact %>/dist/arco.min.js',
-  // ],
-
-  // /**
-  //  * @name 样式加载配置
-  //  * @description 开发环境独立运行时加载 @mico-platform/ui CSS
-  //  */
-  // links: [
-  //   {
-  //     rel: 'stylesheet',
-  //     href: 'https://unpkg.com/@mico-platform/ui@<%= micoUiVersionExact %>/dist/css/arco.min.css',
-  //   },
-  // ],
-
-  // /**
-  //  * @name 外部依赖配置
-  //  * @description 开发环境也需要 externals，配合 CDN 使用
-  //  */
-  // externals: {
-  //   react: 'window.React',
-  //   'react-dom': 'window.ReactDOM',
-  //   '@mico-platform/ui': 'window.micoUI',
-  // },
-  /**
-   * @name 样式加载配置
-   * @description 开发环境独立运行时加载 @mico-platform/ui CSS
-   * 作为微前端子应用运行时，样式由主应用提供
-   */
-  styles: [
-    // @mico-platform/ui 基础样式（使用运行时解析的最新版本号，避免 latest 标签）
-    `https://cdn-portal.micoplatform.com/portal-center/mico-ui/${MICO_UI_VERSION}/ui/dist/css/mico-ui.min.css`,
-  ],
 
   /**
    * @name MFSU 配置

package/generators/subapp-react/templates/homepage/package.json

@@ -15,6 +15,7 @@
     "start": "npm run dev"
   },
   "dependencies": {
+    "@arco-iconbox/react-mico": ">=0.0.1",
     "@mico-platform/ui": "<%= micoUiVersion %>",
     "@mico-platform/theme": "<%= themeVersion %>",
     "@umijs/max": "^4.4.8",

package/generators/subapp-react/templates/homepage/src/app.tsx

@@ -38,6 +38,16 @@ import {
 } from './common/intl';
 import { getSubappCurrentLocale } from './common/intl/subappLocale';
 
+// 子应用独立开发时加载完整 UI 样式；嵌入主应用时由 layout 全局提供
+if (
+  process.env.NODE_ENV === 'development' &&
+  typeof window !== 'undefined' &&
+  !window.__POWERED_BY_QIANKUN__
+) {
+  require('@mico-platform/ui/dist/css/mico-ui.min.css');
+  require('@mico-platform/theme/dist/css/theme.css');
+}
+
 // 子应用：将本地 request（自动桥接主应用 / 独立 umi）注入 shared 包，供共享服务层（getRequest）使用
 // 注意：模块顶层注入，request 函数引用稳定；运行期由 request 内部根据是否处于 qiankun 选用 main / umi
 configureRequest(request as <T = unknown>(url: string, options?: Record<string, unknown>) => Promise<T>);

package/generators/subapp-react/templates/homepage/src/common/logger.ts

@@ -23,7 +23,7 @@ function readVerboseDebugQueryOnce(): boolean {
   }
   try {
     const v = new URLSearchParams(window.location.search).get(DEBUG_LOGS_QUERY_KEY);
-    if (v == null || v === '') {
+    if (v === null || v === '') {
       return false;
     }
     const normalized = v.toLowerCase();

package/generators/subapp-react/templates/homepage/src/global.less

@@ -23,5 +23,5 @@ body {
 #<%= appName %>-root {
   width: 100%;
   height: 100%;
-  background-color: var(--color-fill-1);
+  background-color: var(--fill-1);
 }

package/generators/subapp-react/templates/homepage/src/pages/index.less

@@ -10,27 +10,27 @@
   padding: @spacing-lg;
   min-height: 100vh;
   // 使用主题色变量 - 背景色会随主题切换自动变化
-  background-color: @color-fill-1;
+  background-color: @fill-1;
   transition: background-color 0.3s ease;
 
   &-title {
     font-size: @font-size-xxl;
     font-weight: @font-weight-bold;
     // 主要文字色 - 亮色模式为深色，暗色模式为浅色
-    color: @color-text-1;
+    color: @text-1;
     margin-bottom: @spacing-md;
   }
 
   &-subtitle {
     font-size: @font-size-md;
     // 次要文字色
-    color: @color-text-2;
+    color: @text-2;
     margin-bottom: @spacing-lg;
   }
 
   &-intl-hint {
     margin-bottom: @spacing-sm;
-    color: @color-text-2;
+    color: @text-2;
   }
 
   &-intl-meta {
@@ -41,10 +41,10 @@
   &-card {
     padding: @card-padding;
     // 卡片背景色 - 使用 color-text-5（亮色模式为白色）
-    background-color: @color-text-5;
+    background-color: @text-5;
     border-radius: @border-radius-card;
     // 边框色
-    border: 1px solid @color-border-2;
+    border: 1px solid @line-2;
     box-shadow: @shadow-card;
     margin-bottom: @spacing-md;
   }
@@ -67,27 +67,27 @@
     width: 60px;
     height: 60px;
     border-radius: @border-radius-md;
-    border: 1px solid @color-border-2;
+    border: 1px solid @line-2;
   }
 
   &-color-label {
     font-size: @font-size-sm;
-    color: @color-text-3;
+    color: @text-3;
   }
 
   // 品牌色示例
-  .brand-1 { background-color: @Brand1-6; }
-  .brand-2 { background-color: @Brand2-6; }
+  .brand-1 { background-color: @brand1-6; }
+  .brand-2 { background-color: @brand2-6; }
 
   // 功能色示例
-  .success { background-color: @Success-6; }
-  .warning { background-color: @Warning-6; }
-  .danger { background-color: @Danger-6; }
+  .success { background-color: @success-6; }
+  .warning { background-color: @warning-6; }
+  .danger { background-color: @danger-6; }
 
   // 中性色示例
-  .fill-1 { background-color: @color-fill-1; }
-  .fill-2 { background-color: @color-fill-2; }
-  .fill-3 { background-color: @color-fill-3; }
+  .fill-1 { background-color: @fill-1; }
+  .fill-2 { background-color: @fill-2; }
+  .fill-3 { background-color: @fill-3; }
 
   // 按钮示例
   &-button {
@@ -101,22 +101,22 @@
     transition: all 0.2s ease;
 
     &--primary {
-      background-color: @Brand1-6;
-      color: @color-text-5;
+      background-color: @brand1-6;
+      color: @text-5;
       border: none;
 
       &:hover {
-        background-color: @Brand1-5;
+        background-color: @brand1-5;
       }
     }
 
     &--secondary {
       background-color: transparent;
-      color: @Brand1-6;
-      border: 1px solid @Brand1-6;
+      color: @brand1-6;
+      border: 1px solid @brand1-6;
 
       &:hover {
-        background-color: @Brand1-1;
+        background-color: @brand1-1;
       }
     }
   }
@@ -128,21 +128,21 @@
     margin-top: @spacing-lg;
 
     &--info {
-      background-color: @Brand2-1;
-      border: 1px solid @Brand2-3;
-      color: @Brand2-7;
+      background-color: @brand2-1;
+      border: 1px solid @brand2-3;
+      color: @brand2-7;
     }
 
     &--success {
-      background-color: @Success-1;
-      border: 1px solid @Success-3;
-      color: @Success-7;
+      background-color: @success-1;
+      border: 1px solid @success-3;
+      color: @success-7;
     }
 
     &--warning {
-      background-color: @Warning-1;
-      border: 1px solid @Warning-3;
-      color: @Warning-7;
+      background-color: @warning-1;
+      border: 1px solid @warning-3;
+      color: @warning-7;
     }
   }
 }

package/generators/subapp-react/templates/homepage/src/pages/index.tsx

@@ -246,7 +246,7 @@ export default function HomePage() {
                   { label: '邮箱', value: userInfo.email },
                   {
                     label: '角色',
-                    value: <Tag color="arcoblue">{userInfo.role}</Tag>,
+                    value: <Tag color="dark-blue">{userInfo.role}</Tag>,
                   },
                   { label: '部门', value: userInfo.department },
                 ]}
@@ -369,7 +369,7 @@ export default function HomePage() {
         <Divider />
 
         <Space size="medium">
-          <Tag color="arcoblue">Arco Blue</Tag>
+          <Tag color="dark-blue">Arco Blue</Tag>
           <Tag color="green">Success</Tag>
           <Tag color="gold">Warning</Tag>
           <Tag color="red">Danger</Tag>

package/generators/subapp-umd/index.js

@@ -14,6 +14,7 @@ const {
   setupErrorHandlers,
   createLogger,
   loadMicorc,
+  getMicoTemplateVersions,
 } = require('../../lib/utils');
 
 const IGNORE_LIST = require('./ignore-list.json');
@@ -145,6 +146,10 @@ module.exports = class extends Generator {
       this.logger.verbose('Template directory:', this.templateDir);
       this.logger.verbose('Destination directory:', this.destDir);
 
+      const cliRoot = path.resolve(__dirname, '../..');
+      const micoVersions = await getMicoTemplateVersions(cliRoot, 8000);
+      const ui = micoVersions['@mico-platform/ui'];
+
       const templateData = {
         appName: this.appName,
         AppName: this.appNamePascal,
@@ -152,6 +157,7 @@ module.exports = class extends Generator {
         umdGlobalName: this.umdGlobalName,
         packageScope: this.packageScope,
         devPort: this.devPort,
+        micoUiPeerRange: `^${ui.resolved}`,
       };
 
       this.logger.verbose('Template data:', JSON.stringify(templateData, null, 2));

package/generators/subapp-umd/templates/package.json

@@ -15,7 +15,7 @@
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@mico-platform/ui": ">=0.0.13"
+    "@mico-platform/ui": "<%= micoUiPeerRange %>"
   },
   "devDependencies": {
     "@types/react": "^18.3.26",