generator-mico-cli 0.2.33 → 1.0.0

package/README.md

@@ -117,6 +117,12 @@ mico setup multica-desktop
 
 所有字段均为可选，未配置时使用默认值或交互式提示。
 
+### 组件库版本（`micoPackages`）
+
+CLI 根 `package.json` 的 `micoPackages` 是 `@mico-platform/ui` / `@mico-platform/theme` 的**唯一维护点**（semver range，如 `1.x`）。`mico create` 时在该 range 内 resolve 最新版本，写入生成项目为 `^x.y.z`；子应用独立开发时在 `app.tsx` 条件加载 npm CSS，嵌入主应用时由 layout 全局提供。
+
+组件库发 patch（仍在 `0.x`）时通常无需发 CLI；切换到 `1.x` 等 major 策略时，修改 `micoPackages` 并发布新 CLI 即可。
+
 ## Monorepo 项目生成器 (micro-react)
 
 创建基于 qiankun 微前端架构的完整 Monorepo 项目：

package/generators/micro-react/README.md

@@ -31,4 +31,4 @@ mico create micro-react
 | `cdnPrefix` / `cdnPrefixPath` | string | prompt；`cdnPrefixPath` 为空或带尾斜杠 |
 | `author` | string | prompt |
 | `intlTag` | string | prompt |
-| `micoUiVersion` / `themeVersion` | string | `npm view @mico-platform/{ui,theme} version`，前缀 `^`，失败回退 `^1.0.0` |
+| `micoUiVersion` / `themeVersion` | string | `^${micoPackages range 内 resolve 的最新版本}` |

package/generators/micro-react/index.js

@@ -9,7 +9,7 @@ const {
   collectFiles,
   transformDestPath,
   isTemplateFile,
-  getPackageVersionsParallel,
+  getMicoTemplateVersions,
   setupErrorHandlers,
   createLogger,
   loadMicorc,
@@ -162,23 +162,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);
 
       // 构建 CDN 路径片段：如果有 prefix 则加上斜杠前缀，否则为空
       const cdnPrefixPath = this.cdnPrefix ? `${this.cdnPrefix}/` : '';
@@ -191,8 +182,8 @@ module.exports = class extends Generator {
         appId: this.appId,
         packageScope: this.packageScope,
         author: this.author,
-        micoUiVersion: `^${micoUiVer}`,
-        themeVersion: `^${themeVer}`,
+        micoUiVersion: `^${ui.resolved}`,
+        themeVersion: `^${theme.resolved}`,
         cdnPrefix: this.cdnPrefix,
         cdnPrefixPath, // 用于拼接路径，已包含尾部斜杠
         intlTag: this.intlTag,

package/generators/micro-react/templates/apps/layout/docs/feature-/344/270/273/351/242/230/350/211/262/345/210/207/346/215/242.md

@@ -215,7 +215,7 @@ export default function Page() {
   return (
     <Card title="示例卡片">
       <Button type="primary">主要按钮</Button>
-      <Tag color="arcoblue">标签</Tag>
+      <Tag color="dark-blue">标签</Tag>
     </Card>
   );
 }

package/generators/micro-react/templates/apps/layout/docs/feature-/345/276/256/345/211/215/347/253/257/346/250/241/345/274/217.md

@@ -443,7 +443,7 @@ export default function HomePage() {
       <Button type="primary" onClick={() => Message.success('成功!')}>
         点击按钮
       </Button>
-      <Tag color="arcoblue">标签</Tag>
+      <Tag color="dark-blue">标签</Tag>
     </Card>
   );
 }

package/generators/micro-react/templates/apps/layout/package.json

@@ -22,6 +22,7 @@
     "test": "cross-env UMI_ENV=test max dev"
   },
   "dependencies": {
+    "@arco-iconbox/react-mico": ">=0.0.1",
     "<%= packageScope %>/common-intl": "workspace:*",
     "<%= packageScope %>/shared": "workspace:*",
     "@mico-platform/ui": "<%= micoUiVersion %>",

package/generators/micro-react/templates/apps/layout/src/app.tsx

@@ -4,7 +4,8 @@ import * as CommonWebSentry from '@common-web/sentry';
 import { SentryErrorBoundary } from '@common-web/sentry';
 import { errorConfig } from './requestErrorConfig';
 // 将 @mico-platform/ui 暴露到 window，供子应用 externals 使用
-import * as micoUI from '@mico-platform/ui';
+import { Message } from '@mico-platform/ui';
+import * as micoUI from '@mico-platform/ui/es';
 import dayjs from 'dayjs';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -42,6 +43,7 @@ import { initTheme } from './common/theme';
 import MicroAppLoader from './components/MicroAppLoader';
 import { isCommonIntlEnabled } from '@/common/intl';
 import { isNoAuthRoute } from '@/constants';
+import '@mico-platform/ui/dist/css/mico-ui.min.css';
 import '@mico-platform/theme/dist/css/theme.css';
 import './global.less';
 import { getCurrentLocale, setLocaleToStorage } from './common/locale';
@@ -177,8 +179,8 @@ 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: umiLocaleToILang(getCurrentLocale()) as ILang,
     localeRequestUrl: process.env.LOCALE_REQUEST_URL,

package/generators/micro-react/templates/apps/layout/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/micro-react/templates/apps/layout/src/components/AppTabs/index.less

@@ -13,14 +13,14 @@
   padding-left: 16px;
   transition: left 0.2s ease;
   z-index: 999;
-  background-color: @color-fill-1;
+  background-color: @fill-1;
   top: @header-height;
   padding-top: 16px;
   padding-bottom: 8px;
 
   .arco-tabs-header-title {
     border: none;
-    border-radius: @border-radius-lg;
+    border-radius: @border-radius-md;
 
     &-active {
       border: none;
@@ -28,7 +28,7 @@
     }
 
     &-active:hover {
-      background-color: @color-fill-3;
+      background-color: @fill-3;
     }
   }
 
@@ -45,6 +45,6 @@
   }
 
   .arco-icon-hover:hover::before {
-    background-color: @color-fill-2 !important;
+    background-color: @fill-2 !important;
   }
 }

package/generators/micro-react/templates/apps/layout/src/components/MicroAppLoader/index.tsx

@@ -115,8 +115,12 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
       current_tenant: currentUser?.current_tenant,
       allowed_tenants: allowedTenants,
     };
-    const { request: _request, ...loggableProps } = props;
-    console.log('[MicroAppLoader] buildProps', { appName, ...loggableProps });
+    console.log('[MicroAppLoader] buildProps', {
+      appName,
+      ...Object.fromEntries(
+        Object.entries(props).filter(([key]) => key !== 'request'),
+      ),
+    });
     return props;
   }, [base, env, routePath, currentUser, appName]);
 
@@ -175,7 +179,7 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
       )}
       {state.loading && !state.error && (
         <div className="micro-app-loading">
-          <Spin dot tip={`正在加载 ${displayName || name}...`} />
+          <Spin tip={`正在加载 ${displayName || name}...`} />
         </div>
       )}
       {/* qiankun 容器挂载点 */}

package/generators/micro-react/templates/apps/layout/src/components/RightContent/avatar-dropdown.less

@@ -1,16 +1,16 @@
 @import '@mico-platform/theme/variables';
 
 .avatar-dropdown-trigger {
-  background-color: @color-fill-2;
+  background-color: @fill-2;
   border-radius: @border-radius-button;
   height: 32px;
   padding: 1px 10px;
-  color: @color-text-1;
+  color: @text-1;
   cursor: pointer;
 }
 
 .avatar-dropdown-trigger:hover {
-  background: @color-fill-3;
+  background: @fill-3;
 }
 
 .avatar-dropdown-trigger.arco-dropdown-popup-visible .arco-icon-down {
@@ -27,9 +27,9 @@
 }
 
 .selected-label {
-  color: @Brand1-6;
+  color: @brand1-6;
 }
 
 .label-name {
-  color: @color-text-3;
+  color: @text-3;
 }

package/generators/micro-react/templates/apps/layout/src/components/RightContent/tenant-dropdown.less

@@ -6,17 +6,17 @@
   display: inline-flex;
   justify-content: space-between;
   width: @tenant-dropdown-width;
-  background-color: @color-fill-2;
+  background-color: @fill-2;
   border-radius: @border-radius-button;
   height: 32px;
   padding: 1px 10px;
-  color: @color-text-1;
+  color: @text-1;
   cursor: pointer;
   box-sizing: border-box;
 }
 
 .tenant-dropdown-trigger:hover {
-  background: @color-fill-3;
+  background: @fill-3;
 }
 
 .tenant-dropdown-trigger .tenant-name {
@@ -44,5 +44,5 @@
 }
 
 .tenant-dropdown-menu .selected-label {
-  color: @Brand1-6;
+  color: @brand1-6;
 }

package/generators/micro-react/templates/apps/layout/src/global.less

@@ -1,4 +1,3 @@
-
 // 再导入 @mico-platform/theme 主题变量（CSS Variables + Less Variables）
 // 这样项目的变量定义会在 UI 库之后，可以正确覆盖
 @import '@mico-platform/theme/variables';
@@ -16,7 +15,7 @@ html {
 body {
   overscroll-behavior-x: none;
   height: 100%;
-  background-color: @color-fill-1;
+  background-color: @fill-1;
 }
 
 #root {

package/generators/micro-react/templates/apps/layout/src/layouts/components/header/index.less

@@ -2,7 +2,7 @@
 
 // Common mixins
 .header-gray-btn-mixin() {
-  background: @color-fill-2;
+  background: @fill-2;
   border-radius: @border-radius-button;
 }
 
@@ -28,7 +28,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: var(--color-bg-3);
+  background: var(--fill-0);
   box-shadow: 0 4px 4px 0 rgba(134, 144, 156, 8%);
   flex-shrink: 0;
 
@@ -46,7 +46,7 @@
   .logo-text {
     font-size: @font-size-lg;
     font-weight: @font-weight-bold;
-    color: @Brand1-6;
+    color: @brand1-6;
     letter-spacing: 1px;
     overflow: hidden;
     white-space: nowrap;
@@ -87,7 +87,7 @@
       font-size: 14px;
       line-height: 22px;
       font-weight: 400;
-      color: @color-text-2;
+      color: @text-2;
       border-radius: @border-radius-md;
       transition: background-color @animation-duration-fast,
         color @animation-duration-fast;
@@ -98,26 +98,26 @@
 
       // 未选中 hover：仅加浅灰底（fill/2），文字保持灰色不变紫
       &:hover {
-        color: @color-text-2;
-        background-color: @color-fill-2;
+        color: @text-2;
+        background-color: @fill-2;
       }
 
       // 选中态：品牌紫 + Medium
       &-active {
-        color: @Brand1-6;
+        color: @brand1-6;
         font-weight: 500;
       }
 
       // 选中 + hover：品牌紫文字 + 浅灰圆角底
       &-active:hover {
-        color: @Brand1-6;
-        background-color: @color-fill-2;
+        color: @brand1-6;
+        background-color: @fill-2;
       }
     }
 
     // 激活下划线（ink bar）：品牌紫
     .arco-tabs-header-ink {
-      background-color: @Brand1-6;
+      background-color: @brand1-6;
     }
   }
 }
@@ -138,12 +138,12 @@
   transition: background-color @animation-duration-fast;
 
   &:hover {
-    background: @color-fill-2;
+    background: @fill-2;
   }
 
   svg {
     font-size: 18px;
-    color: @color-text-2;
+    color: @text-2;
   }
 }
 
@@ -156,11 +156,11 @@
   transition: background-color @animation-duration-fast;
 
   &:hover {
-    background: @color-fill-2;
+    background: @fill-2;
   }
 
   .user-name {
-    color: @color-text-1;
+    color: @text-1;
     font-size: @font-size-base;
   }
 }
@@ -168,7 +168,7 @@
 .split-line {
   width: 1px;
   height: 16px;
-  background: var(--color-border-2);
+  background: var(--line-2);
   margin: 0 @spacing-xs;
 }
 
@@ -176,9 +176,9 @@
   .header-gray-btn-mixin();
   .center-mixin();
 
-  color: @color-text-1;
+  color: @text-1;
 
   .unread-count {
-    background-color: @Danger-6;
+    background-color: @danger-6;
   }
 }

package/generators/micro-react/templates/apps/layout/src/layouts/components/menu/index.less

@@ -12,7 +12,7 @@
 .layout-menu.arco-menu-dark,
 .layout-menu.arco-menu {
   font-size: @font-size-base;
-  background-color: @color-text-5;
+  background-color: @text-5;
 
   // Base menu item styles
   .arco-menu-item {
@@ -21,32 +21,32 @@
     padding: 0 12px;
 
     &:hover {
-      background-color: @Brand1-1;
+      background-color: @brand1-1;
     }
   }
 
   .arco-menu-inline-header {
     &:hover {
-      background-color: @Brand1-1;
+      background-color: @brand1-1;
     }
   }
 
   .arco-menu-inline-header.arco-menu-selected {
     &:hover {
-      background-color: @Brand1-1;
+      background-color: @brand1-1;
     }
   }
 
   .arco-menu-item.arco-menu-selected {
-    background-color: @Brand1-1;
+    background-color: @brand1-1;
   }
 
   .arco-menu-pop-header.arco-menu-selected {
-    background-color: @Brand1-1;
+    background-color: @brand1-1;
   }
 
   .arco-menu-pop-header:hover {
-    background-color: @Brand1-1;
+    background-color: @brand1-1;
   }
 
   .arco-menu-indent {
@@ -137,7 +137,7 @@
 // Sider styles
 .layout-web-sider {
   box-shadow: none;
-  background-color: @color-text-5 !important;
+  background-color: @text-5 !important;
   position: fixed !important;
   height: calc(100vh - @header-height) !important;
   z-index: 999;
@@ -146,7 +146,7 @@
     display: flex;
     justify-content: flex-end;
     // 使用主题变量适配亮/暗主题
-    background-color: @color-text-5;
+    background-color: @text-5;
   }
 
   .click-trigger-btn {
@@ -159,13 +159,13 @@
 
     // 图标颜色适配主题
     .arco-icon {
-      color: @color-text-2;
+      color: @text-2;
     }
   }
 
   .click-trigger-btn:not(.collapsed) {
-    background-color: @color-fill-1;
-    border-radius: @border-radius-lg;
+    background-color: @fill-1;
+    border-radius: @border-radius-md;
   }
 
   .click-trigger-btn.collapsed {
@@ -184,11 +184,11 @@
   .arco-menu-dark .arco-menu-group-title,
   .arco-menu-dark .arco-menu-pop-header,
   .arco-menu-dark .arco-menu-inline-header {
-    background-color: @color-text-5;
-    color: @color-text-2;
+    background-color: @text-5;
+    color: @text-2;
 
     &.arco-menu-selected {
-      color: @Brand1-6;
+      color: @brand1-6;
     }
   }
 }

package/generators/micro-react/templates/apps/layout/src/layouts/index.less

@@ -1,7 +1,7 @@
 @import '@mico-platform/theme/variables';
 
 .arco-tree-node:hover {
-  background-color: @color-fill-2;
+  background-color: @fill-2;
 }
 
 body {
@@ -11,7 +11,7 @@ body {
 
 .layout-container {
   min-width: @size-base * 128;
-  background: @color-fill-1;
+  background: @fill-1;
   // overflow-x: auto;s
   // overflow-y: hidden;
   display: flex;
@@ -48,7 +48,7 @@ body {
         // overflow-y: scroll;
         overflow: hidden;
         background: none;
-        border-radius: @border-radius-lg;
+        border-radius: @border-radius-md;
         position: relative;
 
         --layout-content-outlet-margin-top: 32px;
@@ -60,11 +60,11 @@ body {
   }
 
   .arco-spin-children::after {
-    background-color: color-mix(in srgb, var(--color-text-5) 60%, transparent);
+    background-color: color-mix(in srgb, var(--text-5) 60%, transparent);
   }
 
   .arco-layout-sider-trigger {
-    background-color: @color-text-5;
+    background-color: @text-5;
   }
 }
 
@@ -81,7 +81,7 @@ body {
 
 .layout-web-sider {
   box-shadow: none;
-  background-color: @color-text-5;
+  background-color: @text-5;
   z-index: 999;
 
   .arco-layout-sider-trigger {
@@ -96,8 +96,8 @@ body {
   }
 
   .click-trigger-btn:not(.collapsed) {
-    background-color: @color-fill-1;
-    border-radius: @border-radius-lg;
+    background-color: @fill-1;
+    border-radius: @border-radius-md;
   }
 
   .click-trigger-btn.collapsed {
@@ -106,37 +106,37 @@ body {
 }
 
 .arco-drawer-header {
-  border-bottom: 1px solid @color-line-2;
+  border-bottom: 1px solid @line-2;
 }
 
 .arco-drawer-footer {
-  border-top: 1px solid @color-line-2;
+  border-top: 1px solid @line-2;
 }
 
 .arco-dropdown-menu {
-  border-color: @color-line-2;
+  border-color: @line-2;
 }
 
 .arco-message-success,
 .arco-message-error,
 .arco-message-warning,
 .arco-message-loading {
-  border-color: @color-line-2;
+  border-color: @line-2;
 }
 
 // 按钮样式覆盖
 .arco-btn-secondary:not(.arco-btn-disabled) {
-  background-color: @color-fill-2;
+  background-color: @fill-2;
 }
 
 .arco-btn-secondary:not(.arco-btn-disabled):not(.arco-btn-loading):hover {
-  background-color: @color-fill-3;
+  background-color: @fill-3;
 }
 
 .arco-btn-secondary:not(.arco-btn-disabled):not(.arco-btn-loading):active {
-  background-color: @color-fill-4;
+  background-color: @fill-4;
 }
 
 .arco-btn-secondary.arco-btn-disabled {
-  background-color: @color-fill-1;
+  background-color: @fill-1;
 }

package/generators/micro-react/templates/apps/layout/src/layouts/index.tsx

@@ -229,7 +229,7 @@ const BasicLayout: React.FC = () => {
                 zIndex: 100,
               }}
             >
-              <Spin dot />
+              <Spin />
             </div>
           )}
           <MicroAppLoader
@@ -247,7 +247,6 @@ const BasicLayout: React.FC = () => {
     if (isRefreshing) {
       return (
         <Spin
-          dot
           style={{ width: '100%', marginTop: 100, textAlign: 'center' }}
         />
       );
@@ -259,7 +258,7 @@ const BasicLayout: React.FC = () => {
   if (!showLayout) {
     return (
       <Suspense
-        fallback={<Spin dot style={{ width: '100%', marginTop: 100 }} />}
+        fallback={<Spin style={{ width: '100%', marginTop: 100 }} />}
       >
         {isForbidden ? <ForbiddenPage /> : renderContent()}
       </Suspense>
@@ -277,7 +276,7 @@ const BasicLayout: React.FC = () => {
             <Content className="layout-content-outlet">
               <Suspense
                 fallback={
-                  <Spin dot style={{ width: '100%', marginTop: 100 }} />
+                  <Spin style={{ width: '100%', marginTop: 100 }} />
                 }
               >
                 {renderContent()}

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

@@ -2,7 +2,7 @@
 
 .container {
   padding-top: 30px;
-  color: @color-text-1;
+  color: @text-1;
 }
 
 .title {
@@ -15,14 +15,14 @@
   margin: 0 0 8px;
   font-size: 14px;
   line-height: 1.6;
-  color: @color-text-2;
+  color: @text-2;
 }
 
 .meta {
   margin: 0;
   font-size: 12px;
   font-family: ui-monospace, monospace;
-  color: @color-text-3;
+  color: @text-3;
 }
 
 .demoCard {