generator-mico-cli 0.2.20 → 0.2.22

package/generators/subapp-react/index.js

@@ -9,10 +9,10 @@ const {
   collectFiles,
   transformDestPath,
   isTemplateFile,
-  getLatestNpmVersion,
+  getPackageVersionsParallel,
   setupErrorHandlers,
   createLogger,
-  // isVerbose,
+  loadMicorc,
 } = require('../../lib/utils');
 
 const IGNORE_LIST = require('./ignore-list.json');
@@ -24,6 +24,18 @@ module.exports = class extends Generator {
   initializing() {
     this.monorepoRoot = process.cwd();
     this.logger = createLogger(this);
+
+    // 检查 dry-run 模式
+    this.isDryRun = this.options.dryRun || process.env.MICO_DRY_RUN === '1';
+
+    // 加载 .micorc 配置
+    const { config: rcConfig, configPath } = loadMicorc(this.monorepoRoot);
+    this.rcConfig = rcConfig;
+    if (configPath) {
+      this.logger.verbose('Loaded config from:', configPath);
+      this.logger.verbose('Config:', JSON.stringify(rcConfig, null, 2));
+    }
+
     const appsDir = path.join(this.monorepoRoot, 'apps');
     const workspaceFile = path.join(this.monorepoRoot, 'pnpm-workspace.yaml');
 
@@ -77,13 +89,14 @@ module.exports = class extends Generator {
       }
 
       const detectedScope = this._detectPackageScope();
+      const rc = this.rcConfig || {};
 
       this.answers = await this.prompt([
         {
           type: 'input',
           name: 'appName',
           message: 'Sub app name',
-          default: 'subapp',
+          default: rc.defaultSubappName || 'subapp',
           filter: (input) => toKebab(input),
           validate: (input) => {
             const value = toKebab(input);
@@ -99,18 +112,32 @@ module.exports = class extends Generator {
           type: 'input',
           name: 'packageScope',
           message: 'Package scope',
-          default: detectedScope || '@my-project',
+          default: rc.packageScope || detectedScope || '@my-project',
           validate: (input) => {
             if (!input) return 'Package scope is required';
             if (!input.startsWith('@')) return 'Package scope must start with @';
             return true;
           }
+        },
+        {
+          type: 'input',
+          name: 'devPort',
+          message: 'Dev server port',
+          default: rc.devPort || '8010',
+          validate: (input) => {
+            const port = Number(input);
+            if (!Number.isInteger(port) || port < 1024 || port > 65535) {
+              return 'Port must be an integer between 1024 and 65535';
+            }
+            return true;
+          }
         }
       ]);
 
       this.appName = toKebab(this.answers.appName);
       this.appNamePascal = toPascal(this.appName);
       this.packageScope = this.answers.packageScope;
+      this.devPort = this.answers.devPort;
       this.templateDir = this.templatePath('homepage');
       this.destDir = path.join(this.monorepoRoot, 'apps', this.appName);
     } catch (error) {
@@ -122,7 +149,7 @@ module.exports = class extends Generator {
     }
   }
 
-  writing() {
+  async writing() {
     try {
       if (!fs.existsSync(this.templateDir)) {
         console.error('');
@@ -132,20 +159,25 @@ module.exports = class extends Generator {
         process.exit(1);
       }
 
-      this.log('');
-      this.log(`📦 Creating sub-app: ${this.appName}`);
-      this.log(`   Destination: apps/${this.appName}`);
-      this.log('');
-
       this.logger.verbose('Template directory:', this.templateDir);
       this.logger.verbose('Destination directory:', this.destDir);
 
       // 在 mico_cli 根目录执行 npm view，以使用该目录 .npmrc 中的 Nexus 认证
       const cliRoot = path.resolve(__dirname, '../..');
-      this.logger.verbose('Fetching latest package versions...');
+      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,
+      );
 
-      const micoUiVer = getLatestNpmVersion('@mico-platform/ui', '1.0.0', 8000, cliRoot);
-      const themeVer = getLatestNpmVersion('@mico-platform/theme', '1.0.0', 8000, cliRoot);
+      const micoUiVer = versions['@mico-platform/ui'];
+      const themeVer = versions['@mico-platform/theme'];
 
       this.logger.verbose('@mico-platform/ui version:', micoUiVer);
       this.logger.verbose('@mico-platform/theme version:', themeVer);
@@ -154,6 +186,7 @@ module.exports = class extends Generator {
         appName: this.appName,
         AppName: this.appNamePascal,
         packageScope: this.packageScope,
+        devPort: this.devPort,
         micoUiVersion: `^${micoUiVer}`,
         themeVersion: `^${themeVer}`,
         micoUiVersionExact: micoUiVer
@@ -171,6 +204,50 @@ module.exports = class extends Generator {
         process.exit(1);
       }
 
+      // Dry-run 模式：只列出文件，不实际创建
+      if (this.isDryRun) {
+        this.log('');
+        this.log('\x1b[33m📋 Dry run mode - no files will be created\x1b[0m');
+        this.log('');
+        this.log(`   Sub-app: ${this.appName}`);
+        this.log(`   Scope: ${this.packageScope}`);
+        this.log(`   Destination: apps/${this.appName}`);
+        this.log('');
+        this.log('   Would create the following files:');
+        this.log('');
+
+        let templateCount = 0;
+        let copyCount = 0;
+
+        for (const relPath of files) {
+          const destRelPath = transformDestPath(relPath);
+          const isTemplate = isTemplateFile(relPath) || path.basename(relPath) === '.env';
+          const tag = isTemplate ? '\x1b[32m[tpl]\x1b[0m' : '\x1b[36m[cpy]\x1b[0m';
+          this.log(`   ${tag} apps/${this.appName}/${destRelPath}`);
+
+          if (isTemplate) {
+            templateCount++;
+          } else {
+            copyCount++;
+          }
+        }
+
+        this.log('');
+        this.log(`   Total: ${files.length} files (${templateCount} templates, ${copyCount} static)`);
+        this.log('');
+        this.log('   Run without --dry-run to actually create these files.');
+        this.log('');
+
+        // 设置标记以跳过后续阶段
+        this._skipInstall = true;
+        return;
+      }
+
+      this.log('');
+      this.log(`📦 Creating sub-app: ${this.appName}`);
+      this.log(`   Destination: apps/${this.appName}`);
+      this.log('');
+
       this.logger.verbose(`Processing ${files.length} files...`);
 
       let templateCount = 0;
@@ -181,7 +258,8 @@ module.exports = class extends Generator {
         const destRelPath = transformDestPath(relPath);
         const destPath = path.join(this.destDir, destRelPath);
 
-        if (isTemplateFile(relPath)) {
+        const isEnvFile = path.basename(relPath) === '.env';
+        if (isTemplateFile(relPath) || isEnvFile) {
           this.logger.file('template', destRelPath);
           this.fs.copyTpl(srcPath, destPath, templateData);
           templateCount++;
@@ -193,6 +271,10 @@ module.exports = class extends Generator {
       }
 
       this.logger.verbose(`Processed: ${templateCount} templates, ${copyCount} copied`);
+
+      this._updateDevPreset();
+      this._updateMockPages();
+      this._updateConfigDev();
     } catch (error) {
       console.error('');
       console.error('❌ Error during file generation:');
@@ -202,7 +284,148 @@ module.exports = class extends Generator {
     }
   }
 
+  _updateDevPreset() {
+    const presetPath = path.join(this.monorepoRoot, 'dev.preset.json');
+    if (!fs.existsSync(presetPath)) {
+      this.logger.verbose('dev.preset.json not found, skipping preset update');
+      return;
+    }
+
+    try {
+      const preset = JSON.parse(fs.readFileSync(presetPath, 'utf-8'));
+      const fullApps = preset.presets?.full?.apps;
+
+      if (!Array.isArray(fullApps)) {
+        this.logger.verbose('dev.preset.json has no full.apps array, skipping');
+        return;
+      }
+
+      if (fullApps.includes(this.appName)) {
+        this.logger.verbose(`"${this.appName}" already in full preset, skipping`);
+        return;
+      }
+
+      fullApps.push(this.appName);
+      fs.writeFileSync(presetPath, `${JSON.stringify(preset, null, 2)}\n`, 'utf-8');
+
+      this.log(`   📝 已将 "${this.appName}" 添加到 dev.preset.json 的 full 预设中`);
+    } catch (e) {
+      console.warn(`   ⚠️  更新 dev.preset.json 失败: ${e.message}`);
+    }
+  }
+
+  _updateMockPages() {
+    const pagesPath = path.join(this.monorepoRoot, 'apps/layout/mock/pages.ts');
+    if (!fs.existsSync(pagesPath)) {
+      this.logger.verbose('apps/layout/mock/pages.ts not found, skipping');
+      return;
+    }
+
+    try {
+      const content = fs.readFileSync(pagesPath, 'utf-8');
+
+      if (content.includes(`route: '/${this.appName}'`)) {
+        this.logger.verbose(`Route "/${this.appName}" already in mock pages, skipping`);
+        return;
+      }
+
+      // 找出已有的最大 id
+      const idMatches = [...content.matchAll(/id:\s*(\d+)/g)];
+      const maxId = idMatches.reduce((max, m) => Math.max(max, Number(m[1])), 0);
+
+      const newEntry = [
+        '  {',
+        `    id: ${maxId + 1},`,
+        `    name: '${this.appNamePascal}',`,
+        `    nameEn: '${this.appNamePascal}',`,
+        `    nameKey: 'page.${this.appName}',`,
+        `    route: '/${this.appName}',`,
+        `    htmlUrl: '//localhost:${this.devPort}',`,
+        '    jsUrls: [],',
+        '    cssUrls: [],',
+        "    prefixPath: '',",
+        "    routeMode: 'prefix',",
+        '    enabled: true,',
+        '    accessControlEnabled: false,',
+        '    adminOnly: false,',
+        '    routeKey: null,',
+        `    mainDocumentId: ${Math.floor(Math.random() * 900) + 100},`,
+        "    version: '',",
+        '  },',
+      ].join('\n');
+
+      // 插入到兜底路由 (route: '/*') 之前
+      const lines = content.split('\n');
+      let insertIdx = -1;
+
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i].includes("route: '/*'")) {
+          for (let j = i - 1; j >= 0; j--) {
+            if (lines[j].trim() === '{') {
+              insertIdx = j;
+              break;
+            }
+          }
+          break;
+        }
+      }
+
+      if (insertIdx === -1) {
+        const closingIdx = lines.findIndex((l) => l.trim() === '];');
+        if (closingIdx > 0) insertIdx = closingIdx;
+      }
+
+      if (insertIdx > 0) {
+        lines.splice(insertIdx, 0, newEntry);
+        fs.writeFileSync(pagesPath, lines.join('\n'), 'utf-8');
+        this.log(`   📝 已将 "${this.appName}" 的页面配置添加到 mock/pages.ts`);
+      }
+    } catch (e) {
+      console.warn(`   ⚠️  更新 mock/pages.ts 失败: ${e.message}`);
+    }
+  }
+
+  _updateConfigDev() {
+    const configPath = path.join(this.monorepoRoot, 'apps/layout/config/config.dev.ts');
+    if (!fs.existsSync(configPath)) {
+      this.logger.verbose('apps/layout/config/config.dev.ts not found, skipping');
+      return;
+    }
+
+    try {
+      const content = fs.readFileSync(configPath, 'utf-8');
+      const routeEntry = `'/${this.appName}/*'`;
+
+      if (content.includes(routeEntry)) {
+        this.logger.verbose(`Route "${routeEntry}" already in noPermissionRouteList, skipping`);
+        return;
+      }
+
+      const updated = content.replace(
+        /noPermissionRouteList:\s*\[([^\]]*)\]/,
+        (match, inner) => {
+          const trimmed = inner.trim();
+          const entries = trimmed ? `${trimmed}, ${routeEntry}` : routeEntry;
+          return `noPermissionRouteList: [${entries}]`;
+        },
+      );
+
+      if (updated === content) {
+        this.logger.verbose('noPermissionRouteList not found in config.dev.ts, skipping');
+        return;
+      }
+
+      fs.writeFileSync(configPath, updated, 'utf-8');
+      this.log(`   📝 已将 "${routeEntry}" 添加到 config.dev.ts 的 noPermissionRouteList 中`);
+    } catch (e) {
+      console.warn(`   ⚠️  更新 config.dev.ts 失败: ${e.message}`);
+    }
+  }
+
   install() {
+    // 跳过 dry-run 模式
+    if (this._skipInstall) return;
+
     this.log('');
     this.log('📦 正在安装依赖...');
     this.spawnCommandSync('pnpm', ['install'], {
@@ -211,6 +434,9 @@ module.exports = class extends Generator {
   }
 
   end() {
+    // 跳过 dry-run 模式
+    if (this._skipInstall) return;
+
     this.log('');
     this.log('✅ 子应用创建成功！');
     this.log('');

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

@@ -1,4 +1,5 @@
 # Default: 5
 CHECK_TIMEOUT=10
 DID_YOU_KNOW=none
-PORT=8010
+PORT=<%= devPort %>
+SOCKET_SERVER=http://localhost:<%= devPort %>

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

@@ -2,6 +2,13 @@
 
 import { defineConfig } from '@umijs/max';
 
+/**
+ * ⚠️⚠️ 不要修改这个变量名，版本升级工具会读取这个变量名，进行版本升级
+ * @name mico-ui 版本
+ * @description 开发环境使用 mico-ui 的最新版本
+ */
+const MICO_UI_VERSION = '<%= micoUiVersionExact %>';
+
 /**
  * 开发环境配置
  * - 不配置 externals，直接打包依赖，方便独立运行调试
@@ -43,6 +50,7 @@ const config: ReturnType<typeof defineConfig> = {
   // externals: {
   //   react: 'window.React',
   //   'react-dom': 'window.ReactDOM',
+  //   'react-dom/client': 'window.ReactDOMClient',
   //   '@mico-platform/ui': 'window.micoUI',
   // },
   /**
@@ -52,7 +60,7 @@ const config: ReturnType<typeof defineConfig> = {
    */
   styles: [
     // @mico-platform/ui 基础样式（使用运行时解析的最新版本号，避免 latest 标签）
-    'https://cdn-portal-test.micoplatform.com/portal-center/mico-ui/<%= micoUiVersionExact %>/ui/dist/css/mico-ui.min.css'
+    `https://cdn-portal.micoplatform.com/portal-center/mico-ui/${MICO_UI_VERSION}/ui/dist/css/mico-ui.min.css`,
   ],
 };
 

package/generators/subapp-react/templates/homepage/config/config.prod.development.ts

@@ -21,12 +21,13 @@ const config: ReturnType<typeof defineConfig> = {
    * @doc https://umijs.org/docs/api/config#externals
    *
    * 作为 qiankun 子应用时，这些库由主应用提供：
-   * - react / react-dom: 主应用已加载，避免多实例问题
+   * - react / react-dom / react-dom/client: 主应用已加载，避免多实例问题
    * - @mico-platform/ui: 主应用已加载，复用组件和样式
    */
   externals: {
     react: 'React',
     'react-dom': 'ReactDOM',
+    'react-dom/client': 'ReactDOMClient',
     '@mico-platform/ui': 'micoUI',
   },
 };

package/generators/subapp-react/templates/homepage/config/config.prod.testing.ts

@@ -21,12 +21,13 @@ const config: ReturnType<typeof defineConfig> = {
    * @doc https://umijs.org/docs/api/config#externals
    *
    * 作为 qiankun 子应用时，这些库由主应用提供：
-   * - react / react-dom: 主应用已加载，避免多实例问题
+   * - react / react-dom / react-dom/client: 主应用已加载，避免多实例问题
    * - @mico-platform/ui: 主应用已加载，复用组件和样式
    */
   externals: {
     react: 'React',
     'react-dom': 'ReactDOM',
+    'react-dom/client': 'ReactDOMClient',
     '@mico-platform/ui': 'micoUI',
   },
 };

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

@@ -27,12 +27,13 @@ const config: ReturnType<typeof defineConfig> = {
    * @doc https://umijs.org/docs/api/config#externals
    *
    * 作为 qiankun 子应用时，这些库由主应用提供：
-   * - react / react-dom: 主应用已加载，避免多实例问题
+   * - react / react-dom / react-dom/client: 主应用已加载，避免多实例问题
    * - @mico-platform/ui: 主应用已加载，复用组件和样式
    */
   externals: {
     react: 'React',
     'react-dom': 'ReactDOM',
+    'react-dom/client': 'ReactDOMClient',
     '@mico-platform/ui': 'micoUI',
   },
 };

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

@@ -102,6 +102,27 @@ const config: ReturnType<typeof defineConfig> = {
   codeSplitting: {
     jsStrategy: 'granularChunks',
   },
+
+  /**
+   * @name 额外 Babel Presets
+   * @description 使用 @mico-platform/ui 的 babel preset，实现组件与图标的按需加载
+   */
+  extraBabelPresets: ['@mico-platform/ui/babel-preset'],
+
+  /**
+   * @name MFSU 配置
+   * @description
+   * - exclude: theme 子路径解析；ui 尽量与主应用一起编译
+   * - shared: React 单例，确保 MFSU 预打包里的组件（如 UI 库）与应用共用同一份 React，否则 useContext 报 null
+   * @doc https://umijs.org/docs/guides/mfsu
+   */
+  mfsu: {
+    exclude: ['@mico-platform/theme', '@mico-platform/ui'],
+    shared: {
+      react: { singleton: true },
+      'react-dom': { singleton: true },
+    },
+  },
 };
 
 export default defineConfig(config);

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

@@ -1,6 +1,6 @@
 /**
  * @name 路由配置
- * @description homepage 子应用的路由配置
+ * @description <%= appName %> 子应用的路由配置
  */
 export default [
   { path: '/<%= appName %>', component: '@/pages/index' },

package/generators/subapp-react/templates/homepage/mock/api.mock.ts

@@ -1,6 +1,6 @@
 /**
  * @name Mock API
- * @description homepage 子应用的 Mock 数据
+ * @description <%= appName %> 子应用的 Mock 数据
  * @doc https://umijs.org/docs/guides/mock
  */
 
@@ -12,7 +12,7 @@ export default {
   //     id: 1001,
   //     name: '张三',
   //     email: 'zhangsan@example.com',
-  //     avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=homepage',
+  //     avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=<%= appName %>',
   //     role: 'admin',
   //     department: '技术部',
   //   },

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

@@ -17,8 +17,6 @@
   "dependencies": {
     "@mico-platform/theme": "<%= themeVersion %>",
     "@umijs/max": "^4.4.8",
-    "babel-plugin-dynamic-import-node": "^2.3.3",
-    "cross-env": "^10.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -26,6 +24,9 @@
     "@mico-platform/ui": "<%= micoUiVersion %>",
     "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
+    "babel-plugin-import": "^1.13.8",
+    "cross-env": "^10.1.0",
     "typescript": "^5.0.3"
   }
 }

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

@@ -1,6 +1,6 @@
 /**
  * @name 应用入口配置
- * @description homepage 子应用的运行时配置
+ * @description <%= appName %> 子应用的运行时配置
  * @doc https://umijs.org/docs/max/micro-frontend#子应用配置
  *
  * 注意：app.tsx 只能导出 Umi 规定的 API（qiankun、getInitialState 等）

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

@@ -26,12 +26,12 @@ export async function request<T = any>(
 
   if (mainAppRequest) {
     // 微前端模式：使用主应用的 request
-    console.log('[homepage] Using main app request:', url);
+    console.log('[<%= appName %>] Using main app request:', url);
     return mainAppRequest<T>(url, options);
   }
 
   // 独立运行模式：使用 umi request
-  console.log('[homepage] Using umi request:', url);
+  console.log('[<%= appName %>] Using umi request:', url);
   // umi request 默认返回 data，skipErrorHandler 可选
   return umiRequest<T>(url, {
     skipErrorHandler: true,

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

@@ -20,7 +20,8 @@ body {
     'Noto Sans', sans-serif;
 }
 
-#homepage-root {
+#<%= appName %>-root {
   width: 100%;
   height: 100%;
+  background-color: var(--color-fill-1);
 }

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

@@ -6,7 +6,7 @@
 // 导入主题变量（仅 Less 变量，子应用用）
 @import '@mico-platform/theme/variables';
 
-.homepage {
+.<%= appName %> {
   padding: @spacing-lg;
   min-height: 100vh;
   // 使用主题色变量 - 背景色会随主题切换自动变化

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

@@ -135,7 +135,7 @@ export default function HomePage() {
   };
 
   return (
-    <div className="homepage">
+    <div className="<%= appName %>">
       <Title heading={2}>🎨 子应用主题 & 组件示例</Title>
       <Paragraph type="secondary">
         子应用复用主应用的 React 和 @mico-platform/ui，无重复打包，主题自动同步
@@ -316,44 +316,44 @@ export default function HomePage() {
         </Paragraph>
 
         <Title heading={6}>品牌色 & 功能色</Title>
-        <div className="homepage-colors">
-          <div className="homepage-color-item">
-            <div className="homepage-color-box brand-1" />
-            <span className="homepage-color-label">@Brand1-6</span>
+        <div className="<%= appName %>-colors">
+          <div className="<%= appName %>-color-item">
+            <div className="<%= appName %>-color-box brand-1" />
+            <span className="<%= appName %>-color-label">@Brand1-6</span>
           </div>
-          <div className="homepage-color-item">
-            <div className="homepage-color-box brand-2" />
-            <span className="homepage-color-label">@Brand2-6</span>
+          <div className="<%= appName %>-color-item">
+            <div className="<%= appName %>-color-box brand-2" />
+            <span className="<%= appName %>-color-label">@Brand2-6</span>
           </div>
-          <div className="homepage-color-item">
-            <div className="homepage-color-box success" />
-            <span className="homepage-color-label">@Success-6</span>
+          <div className="<%= appName %>-color-item">
+            <div className="<%= appName %>-color-box success" />
+            <span className="<%= appName %>-color-label">@Success-6</span>
           </div>
-          <div className="homepage-color-item">
-            <div className="homepage-color-box warning" />
-            <span className="homepage-color-label">@Warning-6</span>
+          <div className="<%= appName %>-color-item">
+            <div className="<%= appName %>-color-box warning" />
+            <span className="<%= appName %>-color-label">@Warning-6</span>
           </div>
-          <div className="homepage-color-item">
-            <div className="homepage-color-box danger" />
-            <span className="homepage-color-label">@Danger-6</span>
+          <div className="<%= appName %>-color-item">
+            <div className="<%= appName %>-color-box danger" />
+            <span className="<%= appName %>-color-label">@Danger-6</span>
           </div>
         </div>
 
         <Title heading={6} style={{ marginTop: 16 }}>
           中性色（随主题自动切换）
         </Title>
-        <div className="homepage-colors">
-          <div className="homepage-color-item">
-            <div className="homepage-color-box fill-1" />
-            <span className="homepage-color-label">@color-fill-1</span>
+        <div className="<%= appName %>-colors">
+          <div className="<%= appName %>-color-item">
+            <div className="<%= appName %>-color-box fill-1" />
+            <span className="<%= appName %>-color-label">@color-fill-1</span>
           </div>
-          <div className="homepage-color-item">
-            <div className="homepage-color-box fill-2" />
-            <span className="homepage-color-label">@color-fill-2</span>
+          <div className="<%= appName %>-color-item">
+            <div className="<%= appName %>-color-box fill-2" />
+            <span className="<%= appName %>-color-label">@color-fill-2</span>
           </div>
-          <div className="homepage-color-item">
-            <div className="homepage-color-box fill-3" />
-            <span className="homepage-color-label">@color-fill-3</span>
+          <div className="<%= appName %>-color-item">
+            <div className="<%= appName %>-color-box fill-3" />
+            <span className="<%= appName %>-color-label">@color-fill-3</span>
           </div>
         </div>
       </Card>