generator-mico-cli 0.2.34 → 1.0.0

package/README.md

@@ -119,7 +119,7 @@ mico setup multica-desktop
 
 ### 组件库版本（`micoPackages`）
 
-CLI 根 `package.json` 的 `micoPackages` 是 `@mico-platform/ui` / `@mico-platform/theme` 的**唯一维护点**（semver range，如 `0.x`）。`mico create` 时在该 range 内 resolve 最新版本，写入生成项目为 `^x.y.z`（如 `^0.0.25`）；子应用开发环境 CDN 的 `MICO_UI_VERSION` 使用同一 resolved 精确版本。
+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 即可。
 

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/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

@@ -179,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 {

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-mico-cli",
-  "version": "0.2.34",
+  "version": "1.0.0",
   "description": "Yeoman generator for Mico CLI projects",
   "keywords": [
     "yeoman-generator",
@@ -36,8 +36,8 @@
     "node": ">=18"
   },
   "micoPackages": {
-    "@mico-platform/ui": "0.x",
-    "@mico-platform/theme": "0.x"
+    "@mico-platform/ui": "1.x",
+    "@mico-platform/theme": "1.x"
   },
   "dependencies": {
     "semver": "^7.6.3",