@lark-apaas/miaoda-presets 0.1.0-alpha.9 → 0.1.0-alpha.overlay.1

package/lib/eslint.config.js

@@ -15,8 +15,8 @@ function createEslintConfig() {
     return typescript_eslint_1.default.config({ ignores: ['dist', 'node_modules', 'build'] }, {
         extends: [
             js_1.default.configs.recommended,
-            eslint_1.default,
             ...typescript_eslint_1.default.configs.recommended,
+            eslint_1.default,
         ],
         files: ['src/**/*.{ts,tsx}'],
         languageOptions: {

package/lib/overlay/components.js

@@ -0,0 +1,169 @@
+"use strict";
+/**
+ * 错误容器组件
+ * @param {*} document
+ * @param {*} root
+ * @param {object} props
+ * @param {string} props.errorMessage - 错误信息
+ * @param {function} props.onRepairClick - 修复按钮点击事件
+ * @param {function} props.onCopyClick - 复制按钮点击事件
+ */
+function ErrorContainer(document, root, props) {
+    // 创建容器元素
+    const container = document.createElement('div');
+    container.className = 'container';
+    // 创建内容元素
+    const content = document.createElement('div');
+    content.className = 'content';
+    container.appendChild(content);
+    // 创建图片元素
+    const img = document.createElement('img');
+    img.src =
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/ylcylz_fsph_ryhs/ljhwZthlaukjlkulzlp/feisuda/template/render_error.svg';
+    img.alt = 'render error';
+    // 图片占位
+    img.width = 120;
+    img.height = 120;
+    img.className = 'error-image';
+    content.appendChild(img);
+    // 创建标题元素
+    const title = document.createElement('p');
+    title.className = 'title';
+    title.textContent = '哎呀，写错代码了';
+    content.appendChild(title);
+    // 创建描述元素
+    const description = document.createElement('p');
+    description.className = 'description';
+    description.textContent = '可复制错误信息，或告诉妙搭进行修复。';
+    content.appendChild(description);
+    // 创建按钮组元素
+    const buttonGroup = document.createElement('div');
+    buttonGroup.className = 'button-group';
+    content.appendChild(buttonGroup);
+    // 创建复制按钮
+    const copyBtn = document.createElement('button');
+    copyBtn.className = 'button button-copy';
+    copyBtn.id = 'copyBtn';
+    copyBtn.textContent = '复制错误信息';
+    copyBtn.addEventListener('click', props.onCopyClick);
+    buttonGroup.appendChild(copyBtn);
+    // 创建修复按钮
+    const repairBtn = document.createElement('button');
+    repairBtn.className = 'button button-repair';
+    repairBtn.id = 'repairBtn';
+    repairBtn.textContent = '告诉妙搭修复';
+    repairBtn.addEventListener('click', props.onRepairClick);
+    buttonGroup.appendChild(repairBtn);
+    // 添加到根元素
+    root.appendChild(container);
+}
+function RootStyle(document, root) {
+    const style = document.createElement('style');
+    style.id = 'react-refresh-overlay-style';
+    style.textContent = `
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+        sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    .container {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #F3F4F6; /* bg-gray-100 */
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+    }
+
+    .error-image {
+      margin-bottom: 16px; /* mb-4 */
+      width: 120px; /* w-[120px] */
+      height: auto;
+    }
+
+    .title {
+      font-size: 18px; /* text-l (推测为 text-lg) */
+      line-height: 22px;
+      color: #1F2329;
+      font-weight: 500; /* font-medium */
+      margin-bottom: 8px; /* mb-2 */
+    }
+
+    .description {
+      font-size: 14px; /* text-sm */
+      line-height: 22px;
+      color: #646A73;
+      font-weight: 400; /* font-normal */
+      margin-bottom: 8px; /* mb-2 */
+    }
+
+    .button-group {
+      display: flex;
+      gap: 16px; /* space-x-4 */
+    }
+
+    .button {
+      height: 32px; /* h-[32px] */
+      padding: 0 16px;
+      border-radius: 6px; /* rounded-[6px] */
+      font-size: 14px; /* text-sm */
+      font-weight: 400; /* font-[400] */
+      cursor: pointer;
+      transition: all 0.2s;
+      outline: none; /* focus:outline-hidden */
+      border: 1px solid;
+    }
+
+    .button-copy {
+      background-color: white; /* bg-white */
+      color: #4B5563; /* text-gray-600 */
+      border-color: #D0D3D6; /* border-[#D0D3D6] */
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-xs */
+    }
+
+    .button-copy:hover {
+      background-color: #F3F4F6; /* hover:bg-gray-100 */
+    }
+
+    .button-copy:active {
+      background-color: #E5E7EB; /* active:bg-gray-200 */
+    }
+
+    .button-repair {
+      background-color: #2563EB; /* bg-blue-600 */
+      color: white; /* text-white */
+      border-color: transparent; /* border-transparent */
+      font-weight: 500; /* font-medium */
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-xs */
+    }
+
+    .button-repair:hover {
+      background-color: #2563EB; /* hover:bg-blue-600 (保持不变) */
+    }
+
+    .button-repair:active {
+      background-color: #1E40AF; /* active:bg-blue-700 */
+    }
+  `;
+    root.appendChild(style);
+}
+module.exports = {
+    ErrorContainer,
+    RootStyle,
+};

package/lib/overlay/index.js

@@ -0,0 +1,329 @@
+"use strict";
+/* eslint-disable no-undef */
+const { ErrorContainer, RootStyle } = require('./components');
+/* ===== Cached elements for DOM manipulations ===== */
+/**
+ * The iframe that contains the overlay.
+ * @type {HTMLIFrameElement}
+ */
+let iframeRoot = null;
+/**
+ * The document object from the iframe root, used to create and render elements.
+ * @type {Document}
+ */
+let rootDocument = null;
+/**
+ * The root div elements will attach to.
+ * @type {HTMLDivElement}
+ */
+let root = null;
+/**
+ * A Cached function to allow deferred render.
+ * @type {RenderFn | null}
+ */
+let scheduledRenderFn = null;
+/* ===== Overlay State ===== */
+/**
+ * The latest error message from Webpack compilation.
+ * @type {string}
+ */
+let currentCompileErrorMessage = '';
+/**
+ * The latest runtime error objects.
+ * @type {Error[]}
+ */
+let currentRuntimeErrors = [];
+/**
+ * The render mode the overlay is currently in.
+ * @type {'compileError' | 'runtimeError' | null}
+ */
+let currentMode = null;
+/**
+ * @typedef {Object} IframeProps
+ * @property {function(): void} onIframeLoad
+ */
+/**
+ * Creates the main `iframe` the overlay will attach to.
+ * Accepts a callback to be ran after iframe is initialized.
+ * @param {Document} document
+ * @param {HTMLElement} root
+ * @param {IframeProps} props
+ * @returns {HTMLIFrameElement}
+ */
+function IframeRoot(document, root, props) {
+    const iframe = document.createElement('iframe');
+    iframe.id = 'react-refresh-overlay';
+    iframe.src = 'about:blank';
+    iframe.style.border = 'none';
+    iframe.style.height = '100%';
+    iframe.style.left = '0';
+    iframe.style.minHeight = '100vh';
+    iframe.style.minHeight = '-webkit-fill-available';
+    iframe.style.position = 'fixed';
+    iframe.style.top = '0';
+    iframe.style.width = '100vw';
+    iframe.style.zIndex = '2147483647';
+    iframe.addEventListener('load', function onLoad() {
+        // Reset margin of iframe body
+        iframe.contentDocument.body.style.margin = '0';
+        props.onIframeLoad();
+    });
+    // We skip mounting and returns as we need to ensure
+    // the load event is fired after we setup the global variable
+    return iframe;
+}
+/**
+ * Creates the main `div` element for the overlay to render.
+ * @param {Document} document
+ * @param {HTMLElement} root
+ * @returns {HTMLDivElement}
+ */
+function OverlayRoot(document, root) {
+    const div = document.createElement('div');
+    div.id = 'container';
+    root.appendChild(div);
+    return div;
+}
+/**
+ * Ensures the iframe root and the overlay root are both initialized before render.
+ * If check fails, render will be deferred until both roots are initialized.
+ * @param {RenderFn} renderFn A function that triggers a DOM render.
+ * @returns {void}
+ */
+function ensureRootExists(renderFn) {
+    if (root) {
+        // Overlay root is ready, we can render right away.
+        renderFn();
+        return;
+    }
+    // Creating an iframe may be asynchronous so we'll defer render.
+    // In case of multiple calls, function from the last call will be used.
+    scheduledRenderFn = renderFn;
+    if (iframeRoot) {
+        // Iframe is already ready, it will fire the load event.
+        return;
+    }
+    // Create the iframe root, and, the overlay root inside it when it is ready.
+    iframeRoot = IframeRoot(document, document.body, {
+        onIframeLoad: function onIframeLoad() {
+            rootDocument = iframeRoot.contentDocument;
+            RootStyle(rootDocument, rootDocument.head);
+            root = OverlayRoot(rootDocument, rootDocument.body);
+            scheduledRenderFn();
+        },
+    });
+    // We have to mount here to ensure `iframeRoot` is set when `onIframeLoad` fires.
+    // This is because onIframeLoad() will be called synchronously
+    // or asynchronously depending on the browser.
+    document.body.appendChild(iframeRoot);
+}
+function removeAllChildren(element, skip) {
+    /** @type {Node[]} */
+    const childList = Array.prototype.slice.call(element.childNodes, typeof skip !== 'undefined' ? skip : 0);
+    for (let i = 0; i < childList.length; i += 1) {
+        element.removeChild(childList[i]);
+    }
+}
+async function copyToClipboard(text) {
+    try {
+        // 优先使用现代的 Clipboard API
+        if (navigator.clipboard && window.isSecureContext) {
+            await navigator.clipboard.writeText(text);
+            return true;
+        }
+        // 降级方案：使用传统的 execCommand 方法
+        return fallbackCopyToClipboard(text);
+    }
+    catch (error) {
+        console.error('复制到剪切板失败:', error);
+        return false;
+    }
+}
+// 获取父窗口 origin
+function getPreviewParentOrigin() {
+    // 优先使用 document.referrer
+    if (document.referrer) {
+        try {
+            const url = new URL(document.referrer);
+            return url.origin;
+        }
+        catch (e) {
+            console.error('解析 referrer 失败:', e);
+        }
+    }
+    // 降级方案：使用通配符（不安全，仅用于开发环境）
+    return '*';
+}
+/**
+ * Creates the main `div` element for the overlay to render.
+ * @returns {void}
+ */
+function render() {
+    ensureRootExists(function () {
+        removeAllChildren(root);
+        // 发送 postMessage
+        const sendPostMessage = (message, targetOrigin) => {
+            const origin = targetOrigin || getPreviewParentOrigin();
+            window.parent.postMessage(message, origin);
+        };
+        if (currentCompileErrorMessage) {
+            currentMode = 'compileError';
+            ErrorContainer(rootDocument, root, {
+                errorMessage: currentCompileErrorMessage,
+                onRepairClick: function onRepairClick() {
+                    sendPostMessage({
+                        type: 'RenderErrorRepair',
+                        data: currentCompileErrorMessage,
+                    });
+                },
+                onCopyClick: function onCopyClick() {
+                    copyToClipboard(currentCompileErrorMessage);
+                },
+            });
+        }
+        else if (currentRuntimeErrors.length) {
+            currentMode = 'runtimeError';
+            let errors = '';
+            currentRuntimeErrors.forEach((error) => {
+                errors += `${error.message}\n${error.stack}\n`;
+            });
+            // 叠加全部报错，将报错信息发送到妙搭
+            ErrorContainer(rootDocument, root, {
+                errorMessage: errors,
+                onRepairClick: function onRepairClick() {
+                    sendPostMessage({
+                        type: 'RenderErrorRepair',
+                        data: errors,
+                    });
+                },
+                onCopyClick: function onCopyClick() {
+                    copyToClipboard(errors);
+                },
+            });
+        }
+    });
+}
+/**
+ * Destroys the state of the overlay.
+ * @returns {void}
+ */
+function cleanup() {
+    // Clean up and reset all internal state.
+    try {
+        document.body.removeChild(iframeRoot);
+    }
+    catch (e) {
+        // In case user render react app directly to body， will trigger `NotFoundError` when recovery from an Error
+        // https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild#exceptions
+    }
+    scheduledRenderFn = null;
+    root = null;
+    iframeRoot = null;
+}
+/**
+ * Clears Webpack compilation errors and dismisses the compile error overlay.
+ * @returns {void}
+ */
+function clearCompileError() {
+    if (!root || currentMode !== 'compileError') {
+        return;
+    }
+    currentCompileErrorMessage = '';
+    currentMode = null;
+    cleanup();
+}
+/**
+ * Clears runtime error records and dismisses the runtime error overlay.
+ * @param {boolean} [dismissOverlay] Whether to dismiss the overlay or not.
+ * @returns {void}
+ */
+function clearRuntimeErrors(dismissOverlay) {
+    if (!root || currentMode !== 'runtimeError') {
+        return;
+    }
+    currentRuntimeErrors = [];
+    if (typeof dismissOverlay === 'undefined' || dismissOverlay) {
+        currentMode = null;
+        cleanup();
+    }
+}
+/**
+ * Shows the compile error overlay with the specific Webpack error message.
+ * @param {string} message
+ * @returns {void}
+ */
+function showCompileError(message) {
+    if (!message) {
+        return;
+    }
+    currentCompileErrorMessage = message;
+    render();
+}
+/**
+ * Shows the runtime error overlay with the specific error records.
+ * @param {Error[]} errors
+ * @returns {void}
+ */
+function showRuntimeErrors(errors) {
+    if (!errors || !errors.length) {
+        return;
+    }
+    currentRuntimeErrors = errors;
+    render();
+}
+function debounce(fn, wait) {
+    /**
+     * A cached setTimeout handler.
+     * @type {number | undefined}
+     */
+    let timer;
+    /**
+     * @returns {void}
+     */
+    function debounced() {
+        const context = this;
+        const args = arguments;
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+            return fn.apply(context, args);
+        }, wait);
+    }
+    return debounced;
+}
+/**
+ * The debounced version of `showRuntimeErrors` to prevent frequent renders
+ * due to rapid firing listeners.
+ * @param {Error[]} errors
+ * @returns {void}
+ */
+const debouncedShowRuntimeErrors = debounce(showRuntimeErrors, 30);
+/**
+ * Detects if an error is a Webpack compilation error.
+ * @param {Error} error The error of interest.
+ * @returns {boolean} If the error is a Webpack compilation error.
+ */
+function isWebpackCompileError(error) {
+    return (/Module [A-z ]+\(from/.test(error.message) ||
+        /Cannot find module/.test(error.message));
+}
+/**
+ * Handles runtime error contexts captured with EventListeners.
+ * Integrates with a runtime error overlay.
+ * @param {Error} error A valid error object.
+ * @returns {void}
+ */
+function handleRuntimeError(error) {
+    if (error &&
+        !isWebpackCompileError(error) &&
+        currentRuntimeErrors.indexOf(error) === -1) {
+        currentRuntimeErrors = currentRuntimeErrors.concat(error);
+    }
+    debouncedShowRuntimeErrors(currentRuntimeErrors);
+}
+module.exports = Object.freeze({
+    clearCompileError: clearCompileError,
+    clearRuntimeErrors: clearRuntimeErrors,
+    handleRuntimeError: handleRuntimeError,
+    showCompileError: showCompileError,
+    showRuntimeErrors: showRuntimeErrors,
+});

package/lib/react-refresh-plugin-option.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pluginOption = void 0;
+const path_1 = __importDefault(require("path"));
+exports.pluginOption = {
+    overlay: {
+        module: path_1.default.resolve(__dirname, 'overlay/index.js'),
+    },
+};

package/lib/recommend/eslint.js

@@ -18,11 +18,39 @@ exports.default = {
         'react/no-unknown-property': 'off', // 允许未知属性
         'react-hooks/exhaustive-deps': 'off', // 不强制检查依赖数组
         // JavaScript 基础规则
-        'no-undef': 'error', // 禁止使用未声明的变量
+        // 通过 tsc 来控制，默认 AI 不写 js 文件
+        'no-undef': 'off', // 禁止使用未声明的变量
         'no-console': 'off', // 允许使用 console
         'prefer-const': 'off', // 不强制使用 const
         // Import 相关检查
         'import/no-unresolved': 'error', // 检查导入路径是否存在
         'import/named': 'error', // 检查命名导入是否存在
+        // 效果相关：模型不会
+        'no-constant-binary-expression': 'off', // 不强制使用常量二进制表达式
+        'no-restricted-syntax': [
+            'error',
+            // 效果相关：希望模型使用内置 logger 而不是 console
+            {
+                selector: "CallExpression[callee.object.name='console'][callee.property.name=/^(log|warn|info|debug|trace)$/]",
+                message: 'Avoid using console.log, console.warn, etc. Use `@byted/spark-framework/logger` instead.',
+            },
+            // 禁用BOM方法alert和confirm，及不推荐使用同名方法
+            {
+                message: "Please don't use window.alert, use `Dialog` component instead for better user experience and consistency",
+                selector: "MemberExpression[object.name='window'][property.name='alert']",
+            },
+            {
+                message: "Please don't use window.confirm, use `Dialog` component instead for better user experience and consistency",
+                selector: "MemberExpression[object.name='window'][property.name='confirm']",
+            },
+            {
+                message: "Please don't use alert. It may conflict with window.alert BOM method, use `Dialog` component instead for better user experience and consistency",
+                selector: "CallExpression[callee.name='alert']",
+            },
+            {
+                message: "Please don't use confirm. It may conflict with window.confirm BOM method, use `Dialog` component instead for better user experience and consistency",
+                selector: "CallExpression[callee.name='confirm']",
+            },
+        ],
     },
 };

package/lib/recommend/rspack.js

@@ -6,11 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createRecommendRspackConfig = createRecommendRspackConfig;
 const path_1 = __importDefault(require("path"));
 const core_1 = __importDefault(require("@rspack/core"));
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const RouteParserPlugin = require('../rspack-plugins/route-parser-plugin');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const SlardarPerformanceMonitorPlugin = require('../rspack-plugins/slardar-performance-monitor-plugin');
 // eslint-disable-next-line max-lines-per-function
 function createRecommendRspackConfig(options) {
-    const { enableReactRrefresh = false, isDev = true } = options;
-    console.log('isDev:', isDev);
-    console.log('enableReactRrefresh:', enableReactRrefresh);
+    const { enableReactRefresh = false, isDev = true, needRoutes = true, runtimeMode = 'fullstack', } = options;
     return {
         experiments: {
             css: true,
@@ -37,7 +39,31 @@ function createRecommendRspackConfig(options) {
                 },
                 {
                     test: /\.css$/,
-                    use: ['postcss-loader'],
+                    use: [
+                        {
+                            loader: 'postcss-loader',
+                            options: {
+                                postcssOptions: {
+                                    plugins: [
+                                        [
+                                            'postcss-import',
+                                            {
+                                                resolve: (id, _basedir) => {
+                                                    // 只有dev环境需要打包选中精调所需的一些预置样式, prod环境则不打包
+                                                    if (id === '@/inspector.dev.css') {
+                                                        return isDev
+                                                            ? path_1.default.join(_basedir, '/inspector.dev.css')
+                                                            : [];
+                                                    }
+                                                    return id;
+                                                },
+                                            },
+                                        ],
+                                    ],
+                                },
+                            },
+                        },
+                    ],
                     type: 'css',
                 },
                 {
@@ -63,7 +89,7 @@ function createRecommendRspackConfig(options) {
                                                 }
                                                 : {}),
                                             development: isDev,
-                                            refresh: enableReactRrefresh,
+                                            refresh: enableReactRefresh,
                                         },
                                     },
                                 },
@@ -91,52 +117,89 @@ function createRecommendRspackConfig(options) {
             new core_1.default.DefinePlugin({
                 'process.env.NODE_ENV': JSON.stringify(isDev ? 'development' : 'production'),
                 'process.env.CWD': JSON.stringify(process.cwd()),
+                'process.env.runtimeMode': JSON.stringify(runtimeMode),
             }),
             new core_1.default.optimize.LimitChunkCountPlugin({
                 maxChunks: 1,
             }),
+            // 全栈模式下，增加性能监控上报脚本注入
+            runtimeMode === 'fullstack' ? new SlardarPerformanceMonitorPlugin() : undefined,
+            // 开发环境下，解析路由
+            isDev &&
+                needRoutes &&
+                new RouteParserPlugin({
+                    appPath: './client/src/app.tsx',
+                    outputPath: path_1.default.resolve(__dirname, 'dist/client/routes.json'),
+                }),
         ],
-        optimization: isDev ? {} : {
-            moduleIds: 'deterministic',
-            concatenateModules: true,
-            minimize: true, // 对应vite的minify配置
-            minimizer: [
-                new core_1.default.SwcJsMinimizerRspackPlugin({
-                    minimizerOptions: {
-                        // 保持不压缩
-                        minify: !isDev,
-                        mangle: !isDev,
-                        format: {
-                            beautify: isDev,
-                            comments: false,
-                        },
-                        compress: {
-                            keep_classnames: true,
-                            keep_fnames: true,
-                            keep_fargs: !isDev,
-                            unused: true,
-                            dead_code: true,
-                            drop_debugger: true,
-                            // FIXME: 先临时开始 console.log
-                            // drop_console: !isDev,
-                            const_to_let: !isDev,
-                            booleans_as_integers: !isDev,
-                            booleans: !isDev,
-                            // maybe unsafe
-                            reduce_funcs: !isDev,
-                            reduce_vars: !isDev,
+        optimization: isDev
+            ? {}
+            : {
+                moduleIds: 'deterministic',
+                concatenateModules: true,
+                minimize: true, // 对应vite的minify配置
+                minimizer: [
+                    new core_1.default.SwcJsMinimizerRspackPlugin({
+                        minimizerOptions: {
+                            // 保持不压缩
+                            minify: !isDev,
+                            mangle: !isDev,
+                            format: {
+                                beautify: isDev,
+                                comments: false,
+                            },
+                            compress: {
+                                keep_classnames: true,
+                                keep_fnames: true,
+                                keep_fargs: !isDev,
+                                unused: true,
+                                dead_code: true,
+                                drop_debugger: true,
+                                // FIXME: 先临时开始 console.log
+                                // drop_console: !isDev,
+                                const_to_let: !isDev,
+                                booleans_as_integers: !isDev,
+                                booleans: !isDev,
+                                // maybe unsafe
+                                reduce_funcs: !isDev,
+                                reduce_vars: !isDev,
+                            },
                         },
-                    },
-                }),
-                new core_1.default.LightningCssMinimizerRspackPlugin(),
-            ],
-            sideEffects: true,
-            usedExports: true,
-            innerGraph: true,
-            providedExports: true,
-            mergeDuplicateChunks: true,
-            splitChunks: false, // 禁用代码分割，保持单文件输出
-        },
+                    }),
+                    new core_1.default.LightningCssMinimizerRspackPlugin(),
+                ],
+                sideEffects: true,
+                usedExports: true,
+                innerGraph: true,
+                providedExports: true,
+                mergeDuplicateChunks: true,
+                splitChunks: false, // 禁用代码分割，保持单文件输出
+            },
         devtool: isDev ? 'source-map' : false, // 对应vite的sourcemap配置
+        devServer: {
+            headers: (req) => {
+                // 获取请求的Origin头
+                const requestOrigin = req.headers.origin ?? '';
+                // 定义允许的域名白名单
+                const allowedOrigins = [
+                    'https://miaoda.feishu.cn',
+                    'https://miaoda.feishu-boe.cn',
+                    'https://miaoda.feishu-pre.cn',
+                ];
+                // 检查请求的Origin是否在允许的列表中
+                const allowedOrigin = allowedOrigins.includes(requestOrigin)
+                    ? requestOrigin
+                    : allowedOrigins[0]; // 默认返回第一个允许的域名
+                return {
+                    'Access-Control-Allow-Origin': allowedOrigin,
+                };
+            },
+            client: {
+                overlay: {
+                    errors: false,
+                    warnings: false,
+                }
+            }
+        },
     };
 }

package/lib/recommend/tailwind.js

@@ -37,12 +37,23 @@ exports.createRecommendTailwindConfig = createRecommendTailwindConfig;
 const path = __importStar(require("path"));
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function createRecommendTailwindConfig(options) {
+    // 默认扫描外网包依赖
+    const { packageName = '@lark-apaas/client-toolkit' } = options;
+    let pkgPath = '';
+    if (packageName) {
+        try {
+            // 扫描依赖中的tailwind样式
+            pkgPath = path.join(path.dirname(require.resolve(packageName)), '/**/*.js');
+        }
+        catch (e) {
+            console.warn(`Failed to resolve package ${packageName}, use default path`);
+        }
+    }
     return {
         darkMode: 'class',
         content: [
-            // 让 framework 里的 tailwind 生效
-            path.join(path.dirname(require.resolve('@lark-apaas/client-core')), '/**/*.js'),
-        ],
+            pkgPath,
+        ].filter(Boolean),
         prefix: '',
         plugins: [],
     };

package/lib/rspack-plugins/route-parser-plugin.js

@@ -0,0 +1,275 @@
+"use strict";
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+const { parse } = require('@babel/parser');
+const traverse = require('@babel/traverse').default;
+const t = require('@babel/types');
+class RouteParserPlugin {
+    constructor(options = {}) {
+        this.options = {
+            appPath: options.appPath || './client/src/app.tsx',
+            outputPath: options.outputPath || './dist/client/routes.json',
+            ...options
+        };
+        // 缓存相关属性 - 直接存储在实例上
+        this.lastAppPathHash = null;
+        this.cachedRoutes = null;
+    }
+    // 统一的日志函数
+    log(level, message, ...args) {
+        const prefix = '[route-parser]';
+        const logMessage = `${prefix} ${message}`;
+        switch (level) {
+            case 'log':
+                console.log(logMessage, ...args);
+                break;
+            case 'warn':
+                console.warn(logMessage, ...args);
+                break;
+            case 'error':
+                console.error(logMessage, ...args);
+                break;
+            case 'info':
+                console.info(logMessage, ...args);
+                break;
+            default:
+                console.log(logMessage, ...args);
+        }
+    }
+    apply(compiler) {
+        const pluginName = 'RouteParserPlugin';
+        compiler.hooks.emit.tapAsync(pluginName, (compilation, callback) => {
+            try {
+                // 检查是否需要重新生成路由
+                if (this.shouldRegenerateRoutes()) {
+                    const routes = this.parseRoutes();
+                    this.cachedRoutes = routes;
+                }
+                const routesJson = JSON.stringify(this.cachedRoutes, null, 2);
+                // 将 routes.json 添加到编译输出中
+                compilation.assets['routes.json'] = {
+                    source: () => routesJson,
+                    size: () => routesJson.length
+                };
+                callback();
+            }
+            catch (error) {
+                this.log('warn', '⚠️ 路由解析失败，使用默认路由:', error.message);
+                // 解析失败时使用默认路由
+                const defaultRoutes = [{ path: '/' }];
+                const routesJson = JSON.stringify(defaultRoutes, null, 2);
+                compilation.assets['routes.json'] = {
+                    source: () => routesJson,
+                    size: () => routesJson.length
+                };
+                callback();
+            }
+        });
+    }
+    shouldRegenerateRoutes() {
+        try {
+            const appFilePath = path.resolve(process.cwd(), this.options.appPath);
+            if (!fs.existsSync(appFilePath)) {
+                this.log('warn', `⚠️ App.tsx 文件不存在: ${appFilePath}`);
+                return false;
+            }
+            // 计算当前文件的哈希值
+            const currentHash = this.calculateFileHash(appFilePath);
+            // 检查内存中的缓存
+            if (this.lastAppPathHash === currentHash && this.cachedRoutes) {
+                return false; // 不需要重新生成
+            }
+            this.lastAppPathHash = currentHash;
+            return true; // 需要重新生成
+        }
+        catch (error) {
+            this.log('warn', '⚠️ 检查文件变更时出错:', error.message);
+            return true; // 出错时重新生成
+        }
+    }
+    calculateFileHash(filePath) {
+        try {
+            const content = fs.readFileSync(filePath, 'utf-8');
+            return crypto.createHash('md5').update(content).digest('hex');
+        }
+        catch (error) {
+            this.log('warn', '⚠️ 计算文件哈希失败:', error.message);
+            return null;
+        }
+    }
+    parseRoutes() {
+        try {
+            const appFilePath = path.resolve(process.cwd(), this.options.appPath);
+            if (!fs.existsSync(appFilePath)) {
+                throw new Error(`App.tsx 文件不存在: ${appFilePath}`);
+            }
+            const sourceCode = fs.readFileSync(appFilePath, 'utf-8');
+            // 解析 TypeScript/JSX 代码
+            const ast = parse(sourceCode, {
+                sourceType: 'module',
+                plugins: [
+                    'jsx',
+                    'typescript',
+                    'decorators-legacy',
+                    'classProperties',
+                    'objectRestSpread',
+                    'functionBind',
+                    'exportDefaultFrom',
+                    'exportNamespaceFrom',
+                    'dynamicImport',
+                    'nullishCoalescingOperator',
+                    'optionalChaining'
+                ]
+            });
+            // 使用 Set 来存储路径，自动去重
+            const routeSet = new Set();
+            // 用于跟踪路由嵌套
+            const routeStack = [];
+            const self = this;
+            traverse(ast, {
+                JSXElement: {
+                    enter(path) {
+                        const { openingElement } = path.node;
+                        // 检查是否是 Route 组件
+                        if (self.isRouteComponent(openingElement)) {
+                            const routeInfo = self.extractRouteInfo(openingElement);
+                            // 将当前路由信息推入堆栈
+                            routeStack.push(routeInfo);
+                        }
+                    },
+                    exit(path) {
+                        const { openingElement } = path.node;
+                        // 当离开 Route 元素时，从堆栈中弹出
+                        if (self.isRouteComponent(openingElement)) {
+                            const currentRoute = routeStack.pop();
+                            // 跳过通配符路径
+                            if (currentRoute && currentRoute.path === '*') {
+                                return;
+                            }
+                            // 如果有路径或是索引路由
+                            if (currentRoute && (currentRoute.path || currentRoute.index)) {
+                                const fullPath = self.buildFullPath(routeStack, currentRoute);
+                                if (fullPath) {
+                                    routeSet.add(fullPath);
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+            // 将 Set 转换为数组返回
+            const routes = Array.from(routeSet).map(routePath => ({ path: routePath }));
+            return routes.length > 0 ? routes : [{ path: '/' }];
+        }
+        catch (error) {
+            // 如果解析失败，返回默认路由
+            this.log('warn', '⚠️ 路由解析失败，使用默认路由:', error.message);
+            return [{ path: '/' }];
+        }
+    }
+    isRouteComponent(openingElement) {
+        return (t.isJSXIdentifier(openingElement.name) &&
+            openingElement.name.name === 'Route');
+    }
+    isRoutesComponent(path) {
+        const openingElement = path.node.openingElement;
+        return (t.isJSXIdentifier(openingElement.name) &&
+            openingElement.name.name === 'Routes');
+    }
+    extractRouteInfo(openingElement) {
+        const routeInfo = {};
+        // 提取所有属性
+        openingElement.attributes.forEach((attr) => {
+            if (t.isJSXAttribute(attr)) {
+                const { name } = attr.name;
+                let value;
+                // 处理不同类型的属性值
+                if (attr.value) {
+                    if (t.isStringLiteral(attr.value)) {
+                        value = attr.value.value;
+                    }
+                    else if (t.isJSXExpressionContainer(attr.value)) {
+                        const expression = attr.value.expression;
+                        if (t.isStringLiteral(expression)) {
+                            value = expression.value;
+                        }
+                        else if (t.isTemplateLiteral(expression)) {
+                            // 处理模板字符串
+                            value = this.evaluateTemplateLiteral(expression);
+                        }
+                        else {
+                            // 对于其他表达式，设为 true
+                            value = true;
+                        }
+                    }
+                }
+                else {
+                    // 对于没有值的属性（如 index），设为 true
+                    value = true;
+                }
+                routeInfo[name] = value;
+            }
+        });
+        return routeInfo;
+    }
+    getJSXAttribute(element, name) {
+        return element.attributes.find(attr => t.isJSXAttribute(attr) &&
+            t.isJSXIdentifier(attr.name) &&
+            attr.name.name === name);
+    }
+    buildFullPath(routeStack, currentRoute) {
+        // 构建完整路径
+        let fullPath = '';
+        // 遍历堆栈中的所有父路由
+        for (let i = 0; i < routeStack.length; i++) {
+            if (routeStack[i].path) {
+                // 确保路径格式正确（开头有/，结尾没有/）
+                let parentPath = routeStack[i].path;
+                if (!parentPath.startsWith('/'))
+                    parentPath = `/${parentPath}`;
+                if (parentPath.endsWith('/') && parentPath !== '/') {
+                    parentPath = parentPath.slice(0, -1);
+                }
+                fullPath += parentPath === '/' ? '' : parentPath;
+            }
+        }
+        // 添加当前路由的路径
+        if (currentRoute.index) {
+            // 索引路由使用父路由的路径
+            return fullPath || '/';
+        }
+        else if (currentRoute.path) {
+            const routePath = currentRoute.path;
+            // 跳过通配符路径
+            if (routePath === '*') {
+                return null;
+            }
+            // 处理相对路径（不以/开头的路径）
+            if (!routePath.startsWith('/')) {
+                fullPath = `${fullPath}/${routePath}`;
+            }
+            else {
+                fullPath = routePath; // 绝对路径覆盖父路径
+            }
+            // 确保路径格式正确
+            if (fullPath === '')
+                fullPath = '/';
+            if (!fullPath.startsWith('/'))
+                fullPath = `/${fullPath}`;
+            return fullPath;
+        }
+        return null;
+    }
+    evaluateTemplateLiteral(templateLiteral) {
+        // 简单处理模板字符串，这里主要处理 `*` 这种情况
+        const quasis = templateLiteral.quasis;
+        const expressions = templateLiteral.expressions;
+        if (quasis.length === 1 && expressions.length === 0) {
+            return quasis[0].value.raw;
+        }
+        // 对于复杂的模板字符串，返回原始字符串
+        return quasis.map(q => q.value.raw).join('');
+    }
+}
+module.exports = RouteParserPlugin;

package/lib/rspack-plugins/slardar-performance-monitor-plugin.js

@@ -0,0 +1,96 @@
+"use strict";
+/**
+ * 加载性能监控脚本
+ * @param {object} option
+ * @param {string} [option.bid='apaas_ai']
+ * @param {string} [option.globalName='KSlardarWeb']
+ * @returns
+ */
+function getSlardarScript(option = {}) {
+    const bid = option.bid || 'apaas_ai';
+    const globalName = option.globalName || 'KSlardarWeb';
+    return `
+  <script>
+  // 创建 Slardar 脚本元素
+    const slardarScript = document.createElement('script');
+    slardarScript.src = 'https://lf3-short.ibytedapm.com/slardar/fe/sdk-web/browser.cn.js?bid=${bid}&globalName=${globalName}';
+    slardarScript.crossOrigin = 'anonymous';
+
+    // 添加 onload 事件处理
+    slardarScript.onload = function() {
+      // 脚本加载完成后执行初始化
+      if (window.KSlardarWeb) {
+        window.KSlardarWeb('init', {
+          bid: 'apaas_ai',
+          // 四种类型：dev/boe/pre/online
+          env: 'online',
+        });
+        window.KSlardarWeb('start');
+      }
+    };
+
+    // 添加错误处理
+    slardarScript.onerror = function() {
+      console.warn('Failed to load Slardar script');
+    };
+
+    // 将脚本添加到页面
+    document.head.appendChild(slardarScript);
+
+    // 添加 TTI 监控脚本
+    const performanceScript = document.createElement('script');
+    performanceScript.src = 'https://sf3-scmcdn-cn.feishucdn.com/obj/unpkg/byted/performance/0.1.0/dist/performance.iife.js';
+    document.head.appendChild(performanceScript);
+</script>
+
+  `;
+}
+class SlardarPerformanceMonitorPlugin {
+    constructor(options) {
+        this.options = options || {};
+    }
+    apply(compiler) {
+        compiler.hooks.compilation.tap('SlardarPerformanceMonitorPlugin', compilation => {
+            try {
+                // 尝试获取HtmlRspackPlugin的hooks
+                let HtmlPlugin;
+                try {
+                    HtmlPlugin = require('@rspack/core').rspack.HtmlRspackPlugin;
+                }
+                catch (e) {
+                    // 如果html-rspack-plugin不可用，尝试使用html-webpack-plugin
+                    try {
+                        HtmlPlugin = require('html-webpack-plugin');
+                    }
+                    catch (e2) {
+                        console.warn('SlardarPerformanceMonitorPlugin: html-rspack-plugin or html-webpack-plugin not found');
+                        return;
+                    }
+                }
+                const hooks = HtmlPlugin.getHooks(compilation);
+                // 在生成 HTML 前修改内容
+                hooks.beforeEmit.tapAsync('SlardarPerformanceMonitorPlugin', (data, cb) => {
+                    const position = this.options.position ?? 'head-end';
+                    const snippet = this.options.snippet ?? getSlardarScript();
+                    if (!snippet)
+                        return;
+                    if (position === 'body-end') {
+                        data.html = data.html.replace('</body>', `${snippet}\n</body>`);
+                    }
+                    else if (position === 'body-start') {
+                        data.html = data.html.replace('<body>', `<body>\n${snippet}`);
+                    }
+                    else if (position === 'head-end') {
+                        data.html = data.html.replace('</head>', `${snippet}\n</head>`);
+                    }
+                    cb(null, data);
+                });
+            }
+            catch (error) {
+                console.error('Error in SlardarPerformanceMonitorPlugin:', error);
+            }
+        });
+    }
+}
+// 导出插件
+module.exports = SlardarPerformanceMonitorPlugin;

package/lib/rspack.config.js

@@ -8,13 +8,14 @@ const path_1 = __importDefault(require("path"));
 const core_1 = __importDefault(require("@rspack/core"));
 const rspack_1 = require("./recommend/rspack");
 const webpack_merge_1 = __importDefault(require("webpack-merge"));
+// 妙搭应用使用的rspack配置
 // eslint-disable-next-line max-lines-per-function
 function createRspackConfig(options) {
-    const { enableReactRrefresh = false, isDev = true } = options;
-    console.log('isDev:', isDev);
-    console.log('enableReactRrefresh:', enableReactRrefresh);
+    const { enableReactRefresh = false, isDevBuildMode = true } = options;
+    console.log('isDevBuildMode:', isDevBuildMode);
+    console.log('enableReactRefresh:', enableReactRefresh);
     // 构建外部依赖配置，对应vite的rollupOptions.external和globals
-    const externals = isDev
+    const externals = isDevBuildMode
         ? {
             antd: 'antd',
             '@ant-design/icons': 'icons',
@@ -25,11 +26,13 @@ function createRspackConfig(options) {
         }
         : {};
     const recommendConfig = (0, rspack_1.createRecommendRspackConfig)({
-        enableReactRrefresh,
-        isDev,
+        enableReactRefresh,
+        isDev: isDevBuildMode,
+        needRoutes: false,
+        runtimeMode: '',
     });
     return (0, webpack_merge_1.default)(recommendConfig, {
-        mode: isDev ? 'development' : 'production',
+        mode: isDevBuildMode ? 'development' : 'production',
         entry: './src/index.tsx',
         output: {
             publicPath: '/',
@@ -60,7 +63,7 @@ function createRspackConfig(options) {
             },
             extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
         },
-        devServer: isDev
+        devServer: isDevBuildMode
             ? undefined
             : {
                 host: '::',
@@ -90,5 +93,46 @@ function createRspackConfig(options) {
                 },
             }),
         ],
+        optimization: {
+            moduleIds: 'deterministic',
+            concatenateModules: true,
+            minimize: true, // 对应vite的minify配置
+            minimizer: [
+                new core_1.default.SwcJsMinimizerRspackPlugin({
+                    minimizerOptions: {
+                        // 保持不压缩
+                        minify: !isDevBuildMode,
+                        mangle: !isDevBuildMode,
+                        format: {
+                            beautify: isDevBuildMode,
+                            comments: false,
+                        },
+                        compress: {
+                            keep_classnames: true,
+                            keep_fnames: true,
+                            keep_fargs: !isDevBuildMode,
+                            unused: true,
+                            dead_code: true,
+                            drop_debugger: true,
+                            // FIXME: 先临时开始 console.log
+                            // drop_console: !isDevBuildMode,
+                            const_to_let: !isDevBuildMode,
+                            booleans_as_integers: !isDevBuildMode,
+                            booleans: !isDevBuildMode,
+                            // maybe unsafe
+                            reduce_funcs: !isDevBuildMode,
+                            reduce_vars: !isDevBuildMode,
+                        },
+                    },
+                }),
+                new core_1.default.LightningCssMinimizerRspackPlugin(),
+            ],
+            sideEffects: true,
+            usedExports: true,
+            innerGraph: true,
+            providedExports: true,
+            mergeDuplicateChunks: true,
+            splitChunks: false, // 禁用代码分割，保持单文件输出
+        },
     });
 }

package/lib/tailwind.config.js

@@ -6,10 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTailwindConfig = createTailwindConfig;
 const webpack_merge_1 = __importDefault(require("webpack-merge"));
 const tailwind_1 = require("./recommend/tailwind");
+/** 妙搭使用的tailwind配置 */
 function createTailwindConfig(options) {
     const { isDevBuildMode = true } = options;
     const recommendConfig = (0, tailwind_1.createRecommendTailwindConfig)({
         isDev: isDevBuildMode,
+        // 妙搭需要扫描内网包
+        packageName: '@byted/spark-framework',
     });
     return (0, webpack_merge_1.default)(recommendConfig, {
         content: ['./src/**/*.{ts,tsx}'],

package/package.json

@@ -1,18 +1,33 @@
 {
   "name": "@lark-apaas/miaoda-presets",
-  "version": "0.1.0-alpha.9",
+  "version": "0.1.0-alpha.overlay.1",
   "files": [
     "lib"
   ],
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "tsc && npm run copy:json",
+    "copy:json": "cp -r src/*.json lib",
+    "watch": "tsc --watch",
+    "bump": "changeset version",
+    "change": "changeset",
+    "check": "biome check --write",
+    "dev": "rslib build --watch",
+    "format": "biome format --write",
+    "storybook": "storybook dev",
+    "test": "echo 0",
+    "prepublishOnly": "npm run build"
+  },
   "dependencies": {
     "@babel/core": "^7.28.0",
     "@babel/parser": "^7.28.0",
     "@babel/traverse": "^7.28.0",
     "@babel/types": "^7.28.2",
     "@eslint/js": "^9.34.0",
+    "@lark-apaas/miaoda-inspector-babel-plugin": "^1.0.0",
+    "@lark-apaas/miaoda-inspector-jsx-runtime": "^1.0.0",
     "@react-dev-inspector/middleware": "^2.0.1",
     "@rsdoctor/rspack-plugin": "^1.1.8",
     "@rspack/dev-server": "^1.1.3",
@@ -25,14 +40,16 @@
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^15.15.0",
     "magic-string": "^0.30.18",
+    "postcss-import": "^16.1.1",
+    "tailwindcss": "^4.1.13",
     "tsconfig-paths-webpack-plugin": "^4.2.0",
     "typescript-eslint": "^8.41.0",
-    "webpack-merge": "^6.0.1",
-    "tailwindcss": "^4.1.13",
-    "@lark-apaas/miaoda-inspector-babel-plugin": "0.1.0-alpha.1",
-    "@lark-apaas/miaoda-inspector-jsx-runtime": "0.1.0-alpha.2"
+    "webpack-merge": "^6.0.1"
   },
   "devDependencies": {
+    "@babel/parser": "^7.28.4",
+    "@babel/traverse": "^7.28.4",
+    "@babel/types": "^7.28.4",
     "@biomejs/biome": "2.0.6",
     "@changesets/cli": "^2.29.5",
     "@rspack/core": "^1.4.4",
@@ -44,17 +61,5 @@
   "peerDependencies": {
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0"
-  },
-  "scripts": {
-    "build": "tsc && npm run copy:json",
-    "copy:json": "cp -r src/*.json lib",
-    "watch": "tsc --watch",
-    "bump": "changeset version",
-    "change": "changeset",
-    "check": "biome check --write",
-    "dev": "rslib build --watch",
-    "format": "biome format --write",
-    "storybook": "storybook dev",
-    "test": "echo 0"
   }
-}
+}