@4399ywkf/core 5.0.2 → 5.0.5

package/dist/index.js

@@ -136,6 +136,7 @@ function createPathResolver(cwd) {
 import { RsdoctorRspackPlugin } from "@rsdoctor/rspack-plugin";
 
 // src/rspack/dev.ts
+import ReactRefreshPlugin from "@rspack/plugin-react-refresh";
 import { merge } from "webpack-merge";
 import { createRequire as createRequire2 } from "module";
 
@@ -447,7 +448,7 @@ export default routes;
       mkdirSync(outputDir, { recursive: true });
     }
     writeFileSync(join(outputDir, "routes.tsx"), code, "utf-8");
-    console.log(`[ywkf] \u7EA6\u5B9A\u5F0F\u8DEF\u7531\u5DF2\u751F\u6210`);
+    if (process.env.DEBUG) console.log(`[ywkf] \u7EA6\u5B9A\u5F0F\u8DEF\u7531\u5DF2\u751F\u6210`);
   }
 };
 function generateConventionalRoutes(options) {
@@ -464,17 +465,33 @@ function generateEntry(config, injections = {}) {
   const topLevel = injections.topLevel || [];
   const exports = injections.exports || [];
   const hasPluginExports = exports.length > 0;
-  const startupCode = hasPluginExports ? `// \u72EC\u7ACB\u8FD0\u884C\u6A21\u5F0F
-if (shouldRunIndependently !== false) {
-  runApp();
-}` : `// \u542F\u52A8\u5E94\u7528
-runApp();`;
+  const hasAsyncTopLevel = topLevel.some((line) => line.includes("await "));
+  let startupBody;
+  if (hasPluginExports) {
+    startupBody = [
+      ...topLevel,
+      ...exports,
+      ``,
+      `if (shouldRunIndependently !== false) {`,
+      `  runApp();`,
+      `}`
+    ].join("\n");
+  } else if (hasAsyncTopLevel) {
+    startupBody = [
+      `(async () => {`,
+      ...topLevel.map((l) => `  ${l}`),
+      `  runApp();`,
+      `})();`
+    ].join("\n");
+  } else {
+    startupBody = topLevel.length > 0 ? [...topLevel, `runApp();`].join("\n") : `runApp();`;
+  }
   return `// \u6B64\u6587\u4EF6\u7531 @4399ywkf/core \u81EA\u52A8\u751F\u6210\uFF0C\u8BF7\u52FF\u624B\u52A8\u4FEE\u6539
 // Generated at: ${(/* @__PURE__ */ new Date()).toISOString()}
 
 ${imports.join("\n")}
 
-${topLevel.length > 0 ? topLevel.join("\n") + "\n" : ""}${exports.length > 0 ? exports.join("\n") + "\n\n" : ""}${startupCode}
+${startupBody}
 `;
 }
 
@@ -523,12 +540,13 @@ async function getUserConfig(): Promise<Partial<AppConfig>> {
  * \u521B\u5EFA\u5E94\u7528\u914D\u7F6E
  */
 export function createAppConfig(userConfig: Partial<AppConfig> = {}): AppConfig {
-  const router = createRouter(BASENAME);
+  const effectiveBasename = userConfig.basename || BASENAME;
+  const router = createRouter(effectiveBasename);
 
   const defaultConfig: AppConfig = {
     appName: APP_NAME,
     router,
-    basename: BASENAME,
+    basename: effectiveBasename,
     rootId: APP_NAME,
     strictMode: true,
     antd: {
@@ -721,7 +739,7 @@ var YwkfGenerator = class {
         await hooks.afterGenerate(this.context);
       }
     }
-    console.log(`[ywkf] \u5DF2\u751F\u6210 .ywkf \u76EE\u5F55`);
+    if (process.env.DEBUG) console.log(`[ywkf] \u5DF2\u751F\u6210 .ywkf \u76EE\u5F55`);
   }
   /**
    * 生成配置快照
@@ -947,13 +965,13 @@ var YwkfGeneratorPlugin = class {
       isProd: !isDev,
       config,
       logger: {
-        info: (msg) => console.log(`[ywkf] ${msg}`),
+        info: (msg) => {
+          if (process.env.DEBUG) console.log(`[ywkf] ${msg}`);
+        },
         warn: (msg) => console.warn(`[ywkf] ${msg}`),
         error: (msg) => console.error(`[ywkf] ${msg}`),
         debug: (msg) => {
-          if (process.env.DEBUG) {
-            console.log(`[ywkf:debug] ${msg}`);
-          }
+          if (process.env.DEBUG) console.log(`[ywkf:debug] ${msg}`);
         }
       }
     };
@@ -962,7 +980,7 @@ var YwkfGeneratorPlugin = class {
       if (plugin) {
         const hooks = await plugin.setup(context);
         this.pluginHooks.push(hooks);
-        console.log(`[ywkf] \u63D2\u4EF6\u5DF2\u52A0\u8F7D: ${plugin.name}`);
+        if (process.env.DEBUG) console.log(`[ywkf] \u63D2\u4EF6\u5DF2\u52A0\u8F7D: ${plugin.name}`);
       }
     }
     this.generator = new YwkfGenerator(
@@ -1016,7 +1034,7 @@ var YwkfGeneratorPlugin = class {
           clearTimeout(debounceTimer);
         }
         debounceTimer = setTimeout(async () => {
-          console.log(`[ywkf] \u68C0\u6D4B\u5230\u9875\u9762\u53D8\u5316: ${filename}`);
+          if (process.env.DEBUG) console.log(`[ywkf] \u68C0\u6D4B\u5230\u9875\u9762\u53D8\u5316: ${filename}`);
           if (this.generator) {
             await this.generator.generate();
           }
@@ -1033,7 +1051,8 @@ var YwkfGeneratorPlugin = class {
 var require2 = createRequire(import.meta.url);
 var __dirname = dirname(fileURLToPath(import.meta.url));
 var coreNodeModules = join5(__dirname, "../../node_modules");
-function createBaseConfig(config, cwd) {
+function createBaseConfig(config, cwd, options = {}) {
+  const isDev = options.isDev ?? process.env.NODE_ENV !== "production";
   const { resolveApp } = createPathResolver(cwd);
   const {
     appName,
@@ -1064,12 +1083,11 @@ function createBaseConfig(config, cwd) {
     entry: [join5(ywkfOutputDir, "index.tsx")],
     resolve: {
       extensions: [".ts", ".tsx", ".jsx", ".js", ".json", ".mjs"],
-      symlinks: false,
+      symlinks: true,
       alias: {
         ...alias,
         "process/browser.js": require2.resolve("process/browser.js"),
         "process/browser": require2.resolve("process/browser.js"),
-        // 确保 React 系列包从用户项目的 node_modules 解析
         react: resolveApp("node_modules/react"),
         "react-dom": resolveApp("node_modules/react-dom"),
         "react-router": resolveApp("node_modules/react-router")
@@ -1127,7 +1145,9 @@ function createBaseConfig(config, cwd) {
                   },
                   transform: {
                     react: {
-                      runtime: "automatic"
+                      runtime: "automatic",
+                      development: isDev,
+                      refresh: isDev
                     }
                   },
                   target: "es2015"
@@ -1241,7 +1261,7 @@ function convertProxyToArray(proxy) {
   });
 }
 function createDevConfig(config, cwd) {
-  const baseConfig = createBaseConfig(config, cwd);
+  const baseConfig = createBaseConfig(config, cwd, { isDev: true });
   const { resolveApp } = createPathResolver(cwd);
   const { dev: dev2, style } = config;
   const styleRules = {
@@ -1425,6 +1445,9 @@ function createDevConfig(config, cwd) {
       clean: false
     },
     stats: "errors-only",
+    plugins: [
+      new ReactRefreshPlugin()
+    ],
     devServer: {
       host: dev2.host,
       port: dev2.port,
@@ -1447,7 +1470,7 @@ function createDevConfig(config, cwd) {
 import { rspack as rspack2 } from "@rspack/core";
 import { merge as merge2 } from "webpack-merge";
 function createProdConfig(config, cwd) {
-  const baseConfig = createBaseConfig(config, cwd);
+  const baseConfig = createBaseConfig(config, cwd, { isDev: false });
   const { resolveApp } = createPathResolver(cwd);
   const { style, performance, output } = config;
   const styleRules = {
@@ -1764,7 +1787,7 @@ var ConventionalRoutePlugin = class {
           clearTimeout(debounceTimer);
         }
         debounceTimer = setTimeout(() => {
-          console.log(`[ywkf] \u68C0\u6D4B\u5230\u9875\u9762\u53D8\u5316: ${filename}`);
+          if (process.env.DEBUG) console.log(`[ywkf] \u68C0\u6D4B\u5230\u9875\u9762\u53D8\u5316: ${filename}`);
           this.generateRoutes();
         }, 500);
       }
@@ -2175,14 +2198,15 @@ function createPlugin(factory) {
 // src/plugin/manager.ts
 function createLogger(pluginName) {
   const prefix = `[${pluginName}]`;
+  const verbose = !!process.env.DEBUG;
   return {
-    info: (msg) => console.log(`${prefix} ${msg}`),
+    info: (msg) => {
+      if (verbose) console.log(`${prefix} ${msg}`);
+    },
     warn: (msg) => console.warn(`${prefix} ${msg}`),
     error: (msg) => console.error(`${prefix} ${msg}`),
     debug: (msg) => {
-      if (process.env.DEBUG) {
-        console.debug(`${prefix} ${msg}`);
-      }
+      if (verbose) console.debug(`${prefix} ${msg}`);
     }
   };
 }
@@ -2436,6 +2460,15 @@ var garfishPlugin = createPlugin((options = {}) => ({
             globalObject: "window",
             chunkLoadingGlobal: `garfish_${finalAppName}`
           };
+          rspackConfig.devServer = {
+            ...rspackConfig.devServer,
+            headers: {
+              ...rspackConfig.devServer?.headers || {},
+              "Access-Control-Allow-Origin": "*",
+              "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
+              "Access-Control-Allow-Headers": "*"
+            }
+          };
           logger.info(`\u914D\u7F6E UMD \u8F93\u51FA: ${finalAppName}`);
         }
         return rspackConfig;
@@ -2450,44 +2483,58 @@ var garfishPlugin = createPlugin((options = {}) => ({
       },
       // ===== 代码生成阶段钩子 =====
       injectEntry(ctx) {
-        if (master) {
-          return {};
+        if (master && apps.length > 0) {
+          return {
+            imports: [
+              `import { initGarfishMaster } from "./bootstrap";`
+            ],
+            topLevel: [
+              `// Garfish \u4E3B\u5E94\u7528\uFF1A\u521D\u59CB\u5316\u5FAE\u524D\u7AEF\u5E76\u6CE8\u518C\u5B50\u5E94\u7528`,
+              `await initGarfishMaster();`
+            ]
+          };
         }
-        return {
-          imports: [
-            `import { microApp, isMicroAppEnv } from "./bootstrap";`
-          ],
-          exports: [
-            `// Garfish \u5FAE\u524D\u7AEF\u751F\u547D\u5468\u671F\u5BFC\u51FA`,
-            `export const { mount, unmount } = microApp;`,
-            `export const provider = microApp;`,
-            `export default microApp;`
-          ],
-          topLevel: [
-            `// Garfish \u5FAE\u524D\u7AEF\uFF1A\u72EC\u7ACB\u8FD0\u884C\u5224\u65AD`,
-            `const shouldRunIndependently = !isMicroAppEnv();`
-          ]
-        };
+        if (!master) {
+          return {
+            imports: [
+              `import { garfishProvider, isMicroAppEnv } from "./bootstrap";`
+            ],
+            exports: [
+              `// Garfish \u5B50\u5E94\u7528\u751F\u547D\u5468\u671F\u5BFC\u51FA\uFF08provider \u51FD\u6570\u683C\u5F0F\uFF09`,
+              `export const provider = garfishProvider;`
+            ],
+            topLevel: [
+              `// Garfish \u5FAE\u524D\u7AEF\uFF1A\u72EC\u7ACB\u8FD0\u884C\u5224\u65AD`,
+              `const shouldRunIndependently = !isMicroAppEnv();`
+            ]
+          };
+        }
+        return {};
       },
       injectBootstrap(ctx) {
-        const imports = [
-          `import { createMicroApp, isMicroAppEnv } from "@4399ywkf/core/runtime";`
-        ];
-        const exports = [
-          `/**`,
-          ` * Garfish \u5FAE\u524D\u7AEF\u5E94\u7528\u5B9E\u4F8B`,
-          ` */`,
-          `export const microApp = createMicroApp(createAppConfig);`,
-          ``,
-          `/**`,
-          ` * \u5224\u65AD\u662F\u5426\u5728\u5FAE\u524D\u7AEF\u73AF\u5883`,
-          ` */`,
-          `export { isMicroAppEnv };`
-        ];
+        const imports = [];
+        const exports = [];
         const topLevel = [];
-        if (master && apps.length > 0) {
-          imports.push(`import Garfish from "garfish";`);
-          topLevel.push(generateMasterInitCode(apps, config.router.basename));
+        if (master) {
+          if (apps.length > 0) {
+            imports.push(`import Garfish from "garfish";`);
+            topLevel.push(generateMasterInitCode(apps, config.router.basename));
+          }
+        } else {
+          imports.push(
+            `import { createGarfishProvider, isMicroAppEnv } from "@4399ywkf/core/runtime";`
+          );
+          exports.push(
+            `/**`,
+            ` * Garfish \u5B50\u5E94\u7528 provider\uFF08render/destroy \u683C\u5F0F\uFF09`,
+            ` */`,
+            `export const garfishProvider = createGarfishProvider(createAppConfig);`,
+            ``,
+            `/**`,
+            ` * \u5224\u65AD\u662F\u5426\u5728\u5FAE\u524D\u7AEF\u73AF\u5883`,
+            ` */`,
+            `export { isMicroAppEnv };`
+          );
         }
         return { imports, exports, topLevel };
       },
@@ -2532,6 +2579,7 @@ function generateMasterInitCode(apps, basename2) {
 export async function initGarfishMaster(): Promise<void> {
   await Garfish.run({
     basename: "${basename2 || "/"}",
+    domGetter: "#subapp-container",
     apps: [
       ${appConfigs}
     ],
@@ -3099,20 +3147,32 @@ export default queryClient;
 }
 function buildRequestFile(opts) {
   const { baseURL, timeout } = opts;
-  return `// \u6B64\u6587\u4EF6\u7531 @4399ywkf/plugin-react-query \u81EA\u52A8\u751F\u6210
-import axios, { type AxiosInstance, type AxiosRequestConfig, type InternalAxiosRequestConfig, type AxiosResponse, type AxiosError } from "axios";
+  return `// \u6B64\u6587\u4EF6\u7531 @4399ywkf/plugin-react-query \u81EA\u52A8\u751F\u6210\uFF0C\u8BF7\u52FF\u624B\u52A8\u4FEE\u6539
+// \u5982\u9700\u5B9A\u5236\u62E6\u622A\u5668\uFF0C\u8BF7\u7F16\u8F91 src/request.ts
+import axios from "axios";
+import type { AxiosInstance, InternalAxiosRequestConfig, AxiosResponse, AxiosError } from "axios";
+import type { RequestConfig, Result } from "@4399ywkf/core/runtime";
+
+// ============ \u52A0\u8F7D\u7528\u6237\u914D\u7F6E ============
+
+let userConfig: RequestConfig = {};
+
+try {
+  const mod = require("@/request");
+  userConfig = mod.default || mod;
+} catch {
+  // src/request.ts \u4E0D\u5B58\u5728\uFF0C\u4F7F\u7528\u9ED8\u8BA4\u914D\u7F6E
+}
+
+// ============ \u521B\u5EFA Axios \u5B9E\u4F8B ============
 
-/**
- * Axios \u5B9E\u4F8B
- *
- * \u57FA\u7840\u914D\u7F6E\u7531\u63D2\u4EF6\u751F\u6210\uFF0C\u53EF\u5728 src/app.config.ts \u4E2D\u901A\u8FC7
- * \`configureRequest(request)\` \u81EA\u5B9A\u4E49\u62E6\u622A\u5668\u3002
- */
 export const request: AxiosInstance = axios.create({
-  baseURL: "${baseURL}" || import.meta.env.VITE_API_BASE_URL || "",
-  timeout: ${timeout},
+  baseURL: userConfig.baseURL ?? ("${baseURL}" || ""),
+  timeout: userConfig.timeout ?? ${timeout},
+  withCredentials: userConfig.withCredentials ?? false,
   headers: {
     "Content-Type": "application/json",
+    ...(userConfig.headers || {}),
   },
 });
 
@@ -3120,13 +3180,26 @@ export const request: AxiosInstance = axios.create({
 
 request.interceptors.request.use(
   (config: InternalAxiosRequestConfig) => {
-    // Token \u6CE8\u5165\uFF08\u4ECE localStorage \u8BFB\u53D6\uFF0C\u53EF\u6309\u9700\u66FF\u6362\uFF09
-    const token = typeof localStorage !== "undefined"
-      ? localStorage.getItem("token")
-      : null;
+    // 1. Token \u6CE8\u5165
+    if (userConfig.getToken) {
+      const token = userConfig.getToken();
+      if (token && config.headers) {
+        const prefix = userConfig.tokenPrefix ?? "Bearer";
+        config.headers.Authorization = prefix ? \`\${prefix} \${token}\` : token;
+      }
+    } else {
+      // \u9ED8\u8BA4\uFF1A\u4ECE localStorage \u8BFB\u53D6
+      const token = typeof localStorage !== "undefined"
+        ? localStorage.getItem("token")
+        : null;
+      if (token && config.headers) {
+        config.headers.Authorization = \`Bearer \${token}\`;
+      }
+    }
 
-    if (token && config.headers) {
-      config.headers.Authorization = \`Bearer \${token}\`;
+    // 2. \u7528\u6237\u81EA\u5B9A\u4E49\u8BF7\u6C42\u62E6\u622A
+    if (userConfig.requestInterceptor) {
+      return userConfig.requestInterceptor(config as any) as any;
     }
 
     return config;
@@ -3138,10 +3211,21 @@ request.interceptors.request.use(
 
 request.interceptors.response.use(
   (response: AxiosResponse) => {
-    // \u76F4\u63A5\u8FD4\u56DE data \u5C42\uFF0C\u51CF\u5C11\u4E1A\u52A1\u4EE3\u7801\u89E3\u6784
+    // \u7528\u6237\u81EA\u5B9A\u4E49\u54CD\u5E94\u62E6\u622A
+    if (userConfig.responseInterceptor) {
+      return userConfig.responseInterceptor(response as any);
+    }
+
+    // \u9ED8\u8BA4\uFF1A\u76F4\u63A5\u8FD4\u56DE response.data
     return response.data;
   },
   (error: AxiosError) => {
+    // \u7528\u6237\u81EA\u5B9A\u4E49\u9519\u8BEF\u5904\u7406
+    if (userConfig.errorHandler) {
+      return userConfig.errorHandler(error as any);
+    }
+
+    // \u9ED8\u8BA4\u9519\u8BEF\u5904\u7406
     const status = error.response?.status;
 
     switch (status) {
@@ -3151,9 +3235,6 @@ request.interceptors.response.use(
       case 403:
         console.warn("[request] \u65E0\u8BBF\u95EE\u6743\u9650");
         break;
-      case 404:
-        console.warn("[request] \u8BF7\u6C42\u8D44\u6E90\u4E0D\u5B58\u5728");
-        break;
       case 500:
         console.error("[request] \u670D\u52A1\u5668\u5185\u90E8\u9519\u8BEF");
         break;
@@ -3167,6 +3248,9 @@ request.interceptors.response.use(
   }
 );
 
+// ============ \u5BFC\u51FA ============
+
+export type { Result };
 export default request;
 `;
 }
@@ -3415,8 +3499,7 @@ export type { StateCreator, StoreApi } from "zustand";
 // src/cli/dev.ts
 import { rspack as rspack3 } from "@rspack/core";
 import { RspackDevServer } from "@rspack/dev-server";
-import chalk from "chalk";
-import ora from "ora";
+import chalk2 from "chalk";
 
 // src/cli/env.ts
 import { existsSync as existsSync11, readFileSync as readFileSync4 } from "fs";
@@ -3473,42 +3556,306 @@ function loadEnv(config, cwd, mode) {
   process.env.APP_PORT = process.env.APP_PORT || String(config.dev.port);
 }
 
+// src/cli/port.ts
+import net from "net";
+function isPortAvailable(port, host) {
+  return new Promise((resolve4) => {
+    const server = net.createServer();
+    server.once("error", (err) => {
+      if (err.code === "EADDRINUSE") {
+        resolve4(false);
+      } else {
+        resolve4(false);
+      }
+    });
+    server.once("listening", () => {
+      server.close(() => resolve4(true));
+    });
+    server.listen(port, host);
+  });
+}
+async function getAvailablePort(preferredPort, host) {
+  const MAX_ATTEMPTS = 20;
+  for (let i = 0; i < MAX_ATTEMPTS; i++) {
+    const port = preferredPort + i;
+    const available = await isPortAvailable(port, host);
+    if (available) return port;
+  }
+  throw new Error(
+    `No available port found in range ${preferredPort}-${preferredPort + MAX_ATTEMPTS - 1}`
+  );
+}
+
+// src/cli/printer.ts
+import chalk from "chalk";
+import os from "os";
+import { createRequire as createRequire3 } from "module";
+import { fileURLToPath as fileURLToPath2 } from "url";
+import { dirname as dirname2, join as join11 } from "path";
+var __filename = fileURLToPath2(import.meta.url);
+var __dirname2 = dirname2(__filename);
+var require4 = createRequire3(import.meta.url);
+var _version = null;
+function getFrameworkVersion() {
+  if (_version) return _version;
+  try {
+    const pkgPath = join11(__dirname2, "../../package.json");
+    const pkg = require4(pkgPath);
+    _version = pkg.version || "0.0.0";
+  } catch {
+    _version = "0.0.0";
+  }
+  return _version;
+}
+function getNetworkAddress(port) {
+  const interfaces = os.networkInterfaces();
+  for (const entries of Object.values(interfaces)) {
+    if (!entries) continue;
+    for (const entry of entries) {
+      if (entry.family === "IPv4" && !entry.internal) {
+        return `http://${entry.address}:${port}/`;
+      }
+    }
+  }
+  return null;
+}
+var BAR_WIDTH = 30;
+function renderBar(percent) {
+  const filled = Math.round(BAR_WIDTH * percent);
+  const empty = BAR_WIDTH - filled;
+  const bar = chalk.green("\u2501".repeat(filled)) + chalk.gray("\u2501".repeat(empty));
+  return bar;
+}
+var DevPrinter = class {
+  constructor(host, port, pluginNames) {
+    this.host = host;
+    this.port = port;
+    this.pluginNames = pluginNames;
+  }
+  startTime = 0;
+  lastProgressLine = "";
+  firstCompileDone = false;
+  /**
+   * 打印框架 banner
+   */
+  printBanner() {
+    const version = getFrameworkVersion();
+    console.log();
+    console.log(
+      `  ${chalk.bold.cyan("@4399ywkf/core")} ${chalk.green(`Framework v${version}`)}`
+    );
+    console.log();
+  }
+  /**
+   * 打印 "start  build started..."
+   */
+  printBuildStart() {
+    this.startTime = Date.now();
+    this.compileDone = false;
+    const label = chalk.gray("start");
+    console.log(`  ${label}   build started...`);
+  }
+  /**
+   * 更新编译进度条（原地覆写同一行）
+   */
+  updateProgress(percent, message) {
+    const pct = Math.min(Math.round(percent * 100), 100);
+    const bar = renderBar(percent);
+    const status = message || "compiling";
+    const line = `  ${chalk.yellow("\u25CF")} client ${bar} ${chalk.bold(`(${pct}%)`)} ${chalk.gray(status)}`;
+    if (process.stdout.isTTY) {
+      if (this.lastProgressLine) {
+        process.stdout.write("\x1B[1A\x1B[2K");
+      }
+      process.stdout.write(line + "\n");
+    } else if (!this.firstCompileDone && pct === 100) {
+      console.log(line);
+    }
+    this.lastProgressLine = line;
+  }
+  /**
+   * 编译完成
+   */
+  printBuildDone(hasErrors = false) {
+    if (this.firstCompileDone) {
+      if (!hasErrors) {
+        const elapsed2 = ((Date.now() - this.startTime) / 1e3).toFixed(2);
+        console.log(
+          `  ${chalk.green("hmr")}     update in ${chalk.bold(`${elapsed2} s`)}`
+        );
+      }
+      return;
+    }
+    this.firstCompileDone = true;
+    this.lastProgressLine = "";
+    if (hasErrors) return;
+    const elapsed = ((Date.now() - this.startTime) / 1e3).toFixed(2);
+    const label = chalk.green("ready");
+    console.log(`  ${label}   built in ${chalk.bold(`${elapsed} s`)}`);
+    console.log();
+    this.printServerInfo();
+  }
+  /**
+   * 标记新一轮编译开始（HMR）
+   */
+  markRebuildStart() {
+    this.startTime = Date.now();
+    this.lastProgressLine = "";
+  }
+  /**
+   * 打印服务器信息面板
+   */
+  printServerInfo() {
+    const localUrl = `http://localhost:${this.port}/`;
+    const networkUrl = getNetworkAddress(this.port);
+    console.log(`  ${chalk.bold(">")} Local:    ${chalk.cyan(localUrl)}`);
+    if (networkUrl) {
+      console.log(`  ${chalk.bold(">")} Network:  ${chalk.cyan(networkUrl)}`);
+    }
+    console.log();
+    if (this.pluginNames.length > 0) {
+      console.log(`  ${chalk.bold(">")} Plugins:`);
+      for (const name of this.pluginNames) {
+        const shortName = name.replace("@4399ywkf/plugin-", "").replace("@4399ywkf/", "");
+        console.log(`    ${chalk.green("\u2713")} ${shortName}`);
+      }
+      console.log();
+    }
+    console.log(
+      `  ${chalk.bold(">")} press ${chalk.bold("h + enter")} to show shortcuts`
+    );
+    console.log();
+  }
+  /**
+   * 打印快捷键帮助
+   */
+  printShortcuts() {
+    console.log();
+    console.log(`  ${chalk.bold("Shortcuts:")}`);
+    console.log(`    ${chalk.bold("o + enter")}  open in browser`);
+    console.log(`    ${chalk.bold("c + enter")}  clear console`);
+    console.log(`    ${chalk.bold("q + enter")}  quit`);
+    console.log();
+  }
+};
+function createProgressHandler(printer) {
+  return (percent, message, ..._details) => {
+    printer.updateProgress(percent, message);
+  };
+}
+function registerShortcuts(printer, opts) {
+  if (!process.stdin.isTTY) return;
+  process.stdin.setEncoding("utf-8");
+  process.stdin.setRawMode?.(false);
+  let buffer = "";
+  const handler = (data) => {
+    buffer += data;
+    if (!buffer.includes("\n")) return;
+    const cmd = buffer.trim().toLowerCase();
+    buffer = "";
+    switch (cmd) {
+      case "h":
+        printer.printShortcuts();
+        break;
+      case "o": {
+        const url = `http://localhost:${opts.port}/`;
+        import("child_process").then((cp) => {
+          const command = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+          cp.exec(`${command} ${url}`);
+        });
+        console.log(`  ${chalk.green("\u279C")} Opening ${chalk.cyan(url)}...`);
+        break;
+      }
+      case "c":
+        console.clear();
+        break;
+      case "q":
+        opts.onQuit();
+        break;
+    }
+  };
+  process.stdin.on("data", handler);
+  process.stdin.resume();
+}
+
 // src/cli/dev.ts
 async function dev(options = {}) {
   const cwd = options.cwd || process.cwd();
-  const spinner = ora("\u6B63\u5728\u542F\u52A8\u5F00\u53D1\u670D\u52A1\u5668...").start();
   try {
     preloadEnv(cwd, "development");
-    const { config, configPath } = await resolveConfig(cwd);
-    if (configPath) {
-      spinner.text = `\u5DF2\u52A0\u8F7D\u914D\u7F6E: ${configPath}`;
-    }
+    const { config } = await resolveConfig(cwd);
     loadEnv(config, cwd, "development");
     const pluginManager = new PluginManager(config, cwd, true);
     if (config.plugins && config.plugins.length > 0) {
-      spinner.text = "\u52A0\u8F7D\u63D2\u4EF6...";
       await pluginManager.loadPlugins(config.plugins);
     }
     await pluginManager.runBeforeDevServer();
     let rspackConfig = createRspackConfig(config, cwd, { isDev: true });
     rspackConfig = await pluginManager.applyRspackConfigHooks(rspackConfig);
+    const host = config.dev.host || "localhost";
+    const preferredPort = config.dev.port || 3e3;
+    const port = await getAvailablePort(preferredPort, host);
+    const pluginNames = pluginManager.getPluginNames();
+    if (port !== preferredPort) {
+      console.log(
+        chalk2.yellow(`  Port ${preferredPort} is in use, using ${port} instead.
+`)
+      );
+    }
+    const printer = new DevPrinter(host, port, pluginNames);
+    printer.printBanner();
+    printer.printBuildStart();
+    printer.updateProgress(0, "preparing");
+    rspackConfig.plugins = rspackConfig.plugins || [];
+    rspackConfig.plugins.push(
+      new rspack3.ProgressPlugin(createProgressHandler(printer))
+    );
+    rspackConfig.stats = "none";
+    rspackConfig.infrastructureLogging = { level: "none" };
+    if (rspackConfig.devServer) {
+      const ds = rspackConfig.devServer;
+      const existingClient = ds.client ?? {};
+      ds.client = {
+        ...existingClient,
+        logging: "warn",
+        overlay: false,
+        progress: false
+      };
+    }
     const compiler = rspack3(rspackConfig);
-    const devServerOptions = rspackConfig.devServer || {};
+    compiler.hooks.done.tap("ywkf-dev-printer", (stats) => {
+      const hasErrors = stats.hasErrors();
+      if (hasErrors) {
+        const info = stats.toJson({ errors: true });
+        console.log();
+        console.log(chalk2.red("  Compile error:"));
+        for (const err of info.errors || []) {
+          console.log(chalk2.red(`    ${err.message}`));
+        }
+        console.log();
+      }
+      printer.printBuildDone(hasErrors);
+    });
+    compiler.hooks.invalid.tap("ywkf-dev-printer", () => {
+      printer.markRebuildStart();
+      printer.updateProgress(0, "rebuilding");
+    });
+    const devServerOptions = {
+      ...rspackConfig.devServer || {},
+      host,
+      port
+    };
     const server = new RspackDevServer(devServerOptions, compiler);
-    const host = config.dev.host || "localhost";
-    const port = config.dev.port || 3e3;
     await server.start();
     await pluginManager.runAfterDevServer({ host, port });
-    spinner.succeed(chalk.green("\u5F00\u53D1\u670D\u52A1\u5668\u542F\u52A8\u6210\u529F!"));
-    console.log();
-    console.log(
-      `  ${chalk.bold("Local:")}   ${chalk.cyan(`http://${host}:${port}`)}`
-    );
-    const pluginNames = pluginManager.getPluginNames();
-    if (pluginNames.length > 0) {
-      console.log(`  ${chalk.bold("\u63D2\u4EF6:")}    ${chalk.dim(pluginNames.join(", "))}`);
-    }
-    console.log();
+    registerShortcuts(printer, {
+      port,
+      onQuit: async () => {
+        console.log(chalk2.gray("\n  Shutting down...\n"));
+        await server.stop();
+        process.exit(0);
+      }
+    });
     const signals = ["SIGINT", "SIGTERM"];
     for (const signal of signals) {
       process.on(signal, async () => {
@@ -3517,7 +3864,8 @@ async function dev(options = {}) {
       });
     }
   } catch (error) {
-    spinner.fail(chalk.red("\u5F00\u53D1\u670D\u52A1\u5668\u542F\u52A8\u5931\u8D25"));
+    console.error();
+    console.error(chalk2.red("  \u2716 Dev server failed to start"));
     console.error(error);
     process.exit(1);
   }
@@ -3525,8 +3873,7 @@ async function dev(options = {}) {
 
 // src/cli/build.ts
 import { rspack as rspack4 } from "@rspack/core";
-import chalk2 from "chalk";
-import ora2 from "ora";
+import chalk3 from "chalk";
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;
@@ -3539,57 +3886,57 @@ function printBuildResult(stats) {
     warnings: true
   });
   if (info.errors && info.errors.length > 0) {
-    console.log(chalk2.red("\n\u6784\u5EFA\u9519\u8BEF:"));
+    console.log(chalk3.red("\n  Compile errors:"));
     for (const error of info.errors) {
-      console.log(chalk2.red(`  ${error.message}`));
+      console.log(chalk3.red(`    ${error.message}`));
     }
     return;
   }
   if (info.warnings && info.warnings.length > 0) {
-    console.log(chalk2.yellow("\n\u6784\u5EFA\u8B66\u544A:"));
+    console.log(chalk3.yellow("\n  Warnings:"));
     for (const warning of info.warnings) {
-      console.log(chalk2.yellow(`  ${warning.message}`));
+      console.log(chalk3.yellow(`    ${warning.message}`));
     }
   }
-  console.log(chalk2.bold("\n\u6784\u5EFA\u4EA7\u7269:"));
+  console.log(chalk3.bold("\n  Build output:"));
   console.log();
   const assets = info.assets || [];
   const sortedAssets = assets.filter((asset) => !asset.name.endsWith(".map")).sort((a, b) => b.size - a.size);
   for (const asset of sortedAssets.slice(0, 15)) {
-    const sizeColor = asset.size > 500 * 1024 ? chalk2.yellow : chalk2.green;
+    const sizeColor = asset.size > 500 * 1024 ? chalk3.yellow : chalk3.green;
     console.log(
-      `  ${chalk2.dim(asset.name.padEnd(50))} ${sizeColor(formatSize(asset.size))}`
+      `    ${chalk3.dim(asset.name.padEnd(50))} ${sizeColor(formatSize(asset.size))}`
     );
   }
   if (sortedAssets.length > 15) {
-    console.log(chalk2.dim(`  ... \u8FD8\u6709 ${sortedAssets.length - 15} \u4E2A\u6587\u4EF6`));
+    console.log(chalk3.dim(`    ... and ${sortedAssets.length - 15} more files`));
   }
   console.log();
-  console.log(
-    chalk2.green(
-      `\u2713 \u6784\u5EFA\u5B8C\u6210\uFF0C\u8017\u65F6 ${((info.time || 0) / 1e3).toFixed(2)}s`
-    )
-  );
 }
 async function build(options = {}) {
   const cwd = options.cwd || process.cwd();
-  const spinner = ora2("\u6B63\u5728\u6784\u5EFA\u751F\u4EA7\u73AF\u5883...").start();
   try {
     preloadEnv(cwd, "production");
-    const { config, configPath } = await resolveConfig(cwd);
-    if (configPath) {
-      spinner.text = `\u5DF2\u52A0\u8F7D\u914D\u7F6E: ${configPath}`;
-    }
+    const { config } = await resolveConfig(cwd);
     loadEnv(config, cwd, "production");
     const pluginManager = new PluginManager(config, cwd, false);
     if (config.plugins && config.plugins.length > 0) {
-      spinner.text = "\u52A0\u8F7D\u63D2\u4EF6...";
       await pluginManager.loadPlugins(config.plugins);
     }
     await pluginManager.runBeforeBuild();
     let rspackConfig = createRspackConfig(config, cwd, { isDev: false });
     rspackConfig = await pluginManager.applyRspackConfigHooks(rspackConfig);
-    spinner.text = "\u6B63\u5728\u7F16\u8BD1...";
+    const pluginNames = pluginManager.getPluginNames();
+    const printer = new DevPrinter("localhost", 0, pluginNames);
+    printer.printBanner();
+    printer.printBuildStart();
+    printer.updateProgress(0, "preparing");
+    rspackConfig.plugins = rspackConfig.plugins || [];
+    rspackConfig.plugins.push(
+      new rspack4.ProgressPlugin(createProgressHandler(printer))
+    );
+    rspackConfig.stats = "none";
+    rspackConfig.infrastructureLogging = { level: "none" };
     const compiler = rspack4(rspackConfig);
     const stats = await new Promise((resolve4, reject) => {
       compiler.run((err, stats2) => {
@@ -3598,7 +3945,7 @@ async function build(options = {}) {
           return;
         }
         if (!stats2) {
-          reject(new Error("\u6784\u5EFA\u5931\u8D25: \u65E0\u6CD5\u83B7\u53D6\u7EDF\u8BA1\u4FE1\u606F"));
+          reject(new Error("Build failed: no stats available"));
           return;
         }
         resolve4(stats2);
@@ -3616,15 +3963,15 @@ async function build(options = {}) {
       success: !hasErrors,
       errors: statsInfo.errors?.map((e) => e.message)
     });
+    printer.printBuildDone(hasErrors);
     if (hasErrors) {
-      spinner.fail(chalk2.red("\u6784\u5EFA\u5931\u8D25"));
       printBuildResult(stats);
       process.exit(1);
     }
-    spinner.succeed(chalk2.green("\u6784\u5EFA\u5B8C\u6210!"));
     printBuildResult(stats);
   } catch (error) {
-    spinner.fail(chalk2.red("\u6784\u5EFA\u5931\u8D25"));
+    console.error();
+    console.error(chalk3.red("  \u2716 Build failed"));
     console.error(error);
     process.exit(1);
   }