@snack-kit/scripts 0.4.0 → 0.6.0

package/README.md

@@ -10,27 +10,32 @@ npm install @snack-kit/scripts --save-dev
 
 ## 命令
 
-| 命令 | 说明 |
-|------|------|
-| `snack-scripts init [dir]` | 初始化新 snack 工程 |
-| `snack-scripts create` | 在当前工程创建新模块模版 |
-| `snack-scripts start` | 启动开发调试服务 |
-| `snack-scripts build` | 生产模式打包 |
-| `snack-scripts entry` | 打包独立入口页面 |
+| 命令                      | 说明                          |
+|---------------------------|-------------------------------|
+| `snack-cli init [dir]`    | 初始化新 snack 工程           |
+| `snack-cli create`        | 在当前工程创建新模块模版      |
+| `snack-cli start`         | 启动开发调试服务              |
+| `snack-cli build`         | 生产模式打包                  |
+| `snack-cli entry`         | 打包独立入口页面              |
+
+> `snack-scripts` 作为历史兼容别名保留，与 `snack-cli` 完全等价。
 
 ### init — 初始化工程
 
 ```bash
 # 在当前目录初始化
-snack-scripts init
+snack-cli init
 
 # 在指定目录初始化
-snack-scripts init my-project
+snack-cli init my-project
 ```
 
-交互式提问：项目名、描述、作者、调试服务地址、入口页面 id/type。
+交互式提问：项目名、描述、作者、调试服务地址、入口页面 id/type、React 版本（17 / 18 / 19）。
+
+提示语言跟随系统语言自动切换（中文 / English）。
 
 生成文件：
+
 ```
 my-project/
 ├── package.json
@@ -46,12 +51,13 @@ my-project/
 在 snack 工程根目录执行：
 
 ```bash
-snack-scripts create
+snack-cli create
 ```
 
-交互式提问：模块中文名、目录名（PascalCase）、描述、作者、是否生成 setting 模块。
+交互式提问：模块名称、目录名（PascalCase）、描述、作者、是否生成 setting 模块。
 
 生成文件（以 `UserManager` 为例）：
+
 ```
 src/package/UserManager/
 ├── snack.json
@@ -64,63 +70,85 @@ src/package/UserManager/
         └── setting.scss
 ```
 
+初始化生成的 `package.json` scripts：
+
 ```json
 {
   "scripts": {
-    "start": "snack-scripts start",
-    "build": "snack-scripts build",
-    "entry": "snack-scripts entry"
+    "start": "snack-cli start",
+    "build": "snack-cli build",
+    "entry": "snack-cli entry"
   }
 }
 ```
 
 ## package.json 配置项
 
-```js
+```json
 {
-  "input": "./src/package",   // snack 模块目录，默认 "src/package"
-  "output": "./dist",         // 生产输出目录，默认 "dist"
-  "snack": {
-    "externals": {},          // 同 webpack externals，过滤不打包的依赖
-    "buildIgnore": [],        // 生产打包忽略的模块（模块目录名）
-    "devPackage": [],         // 开发模式仅启动指定模块（模块目录名），空数组表示全部启动
-    "entry": {                // 独立入口页面配置（snack-scripts entry 命令使用）
-      "name": "entry",        // 输出目录名，默认 "entry"
-      "id": "my_page",        // 所加载的页面 id
-      "type": "portal",       // 所加载的页面分类（可选）
-      "title": "My App",      // HTML 页面 title（可选）
-      "favicon": "./favicon.ico", // 浏览器角标路径，相对项目根路径（可选）
-      "service": "",          // snackbar 服务端地址，默认使用当前地址栏（可选）
-      "devServer": "",        // 调试服务网关（可选）
-      "mobile": {             // 移动端页面配置，竖屏或宽度 < 1024px 时加载（可选）
-        "id": "my_page_mobile",
-        "type": "portal"
-      },
-      "files": [],            // 需复制到发布目录的文件或目录路径（可选）
-      "js": "./plugin.ts",    // 外挂打包的 JS/TS 文件路径（可选）
-      "css": "./plugin.scss", // 外挂打包的 CSS/SCSS 文件路径（可选）
-      "template": {           // 自定义 HTML 模板路径，相对项目根路径（可选）
-        "index": "./public/index.html",
-        "dev": "./public/dev.html",
-        "entry": "./public/entry.html"
-      }
-    },
-    "plugin": {               // snack 模块独立 index.html 外挂文件（可选）
-      "js": "./plugin.ts",
-      "css": "./plugin.scss"
+    "input": "./src/package",
+    "output": "./dist",
+    "snack": {
+        "externals": {},
+        "buildIgnore": [],
+        "devPackage": [],
+        "entry": {
+            "name": "entry",
+            "id": "my_page",
+            "type": "portal",
+            "title": "My App",
+            "favicon": "./favicon.ico",
+            "service": "",
+            "devServer": "",
+            "mobile": {
+                "id": "my_page_mobile",
+                "type": "portal"
+            },
+            "files": [],
+            "js": "./plugin.ts",
+            "css": "./plugin.scss",
+            "template": {
+                "index": "./public/index.html",
+                "dev": "./public/dev.html",
+                "entry": "./public/entry.html"
+            }
+        },
+        "plugin": {
+            "js": "./plugin.ts",
+            "css": "./plugin.scss"
+        }
     }
-  }
 }
 ```
 
+| 字段 | 说明 | 默认值 |
+|------|------|--------|
+| `input` | snack 模块目录 | `"src/package"` |
+| `output` | 生产输出目录 | `"dist"` |
+| `snack.externals` | 同 webpack externals，过滤不打包的依赖 | `{}` |
+| `snack.buildIgnore` | 生产打包忽略的模块（模块目录名） | `[]` |
+| `snack.devPackage` | 开发模式仅启动指定模块，空数组表示全部启动 | `[]` |
+| `snack.entry.name` | 入口页输出目录名 | `"entry"` |
+| `snack.entry.id` | 所加载的页面 id | — |
+| `snack.entry.type` | 所加载的页面分类 | — |
+| `snack.entry.title` | HTML 页面 title | — |
+| `snack.entry.favicon` | 浏览器角标路径，相对项目根路径 | — |
+| `snack.entry.service` | snackbar 服务端地址，默认使用当前地址栏 | — |
+| `snack.entry.devServer` | 调试服务网关 | — |
+| `snack.entry.mobile` | 移动端页面配置，竖屏或宽度 < 1024px 时加载 | — |
+| `snack.entry.files` | 需复制到发布目录的文件或目录路径 | `[]` |
+| `snack.entry.js` | 外挂打包的 JS/TS 文件路径 | — |
+| `snack.entry.css` | 外挂打包的 CSS/SCSS 文件路径 | — |
+| `snack.entry.template` | 自定义 HTML 模板路径，相对项目根路径 | — |
+
 ## config-overrides.js
 
 在项目根目录创建 `config-overrides.js` 可自定义 webpack 配置：
 
 ```js
 module.exports = (config) => {
-  // 修改 webpack 配置
-  return config;
+    // 修改 webpack 配置
+    return config;
 };
 ```
 
@@ -131,9 +159,9 @@ module.exports = (config) => {
 ```json
 {
   "scripts": {
-    "start": "snack-scripts start --templatePath=template",
-    "build": "snack-scripts build --templatePath=template",
-    "entry": "snack-scripts entry --templatePath=template"
+    "start": "snack-cli start --templatePath=template",
+    "build": "snack-cli build --templatePath=template",
+    "entry": "snack-cli entry --templatePath=template"
   }
 }
 ```
@@ -142,6 +170,19 @@ module.exports = (config) => {
 
 ## Changelog
 
+### 0.6.0
+
+- 新增：`snack-cli` 命令别名，与 `snack-scripts` 完全等价，`snack-scripts` 保留作为历史兼容
+- 新增：`init` 命令支持交互式选择 React 版本（17 / 18 / 19），生成对应依赖版本
+- 新增：CLI 提示语言跟随系统语言自动切换（`LANG` 环境变量，中文 / English）
+- 修复：`init` 生成的 `@snack-kit/core` 版本从 `^0.1.0` 修正为 `^0.3.0`
+- 修复：`init` 生成的 `scripts` 命令从 `snack-scripts` 更新为 `snack-cli`
+- 优化：升级 `sass-loader` 至 v13，启用 Modern API（`api: 'modern'`），消除 Dart Sass Legacy JS API deprecation 警告
+
+### 0.5.0
+
+- 修复：默认渲染高度的问题
+
 ### 0.4.0
 
 - 修复：调试窗口 topbar 工具区样式细节优化

package/bin/main.js

@@ -29,6 +29,58 @@ const platform = process.platform;
 const webpackFile = platform === 'win32' ? 'webpack.cmd' : 'webpack';
 const isNpm = fs.existsSync(path.resolve(process.cwd(), './node_modules/.bin/', webpackFile));
 
+// ─── 语言检测 ─────────────────────────────────────────────────────────────────
+
+function detectLang() {
+    const env = process.env.LANG || process.env.LANGUAGE || process.env.LC_ALL || process.env.LC_MESSAGES || '';
+    return env.toLowerCase().startsWith('zh') ? 'zh' : 'en';
+}
+
+const lang = detectLang();
+const t = {
+    // init
+    initTitle:              { zh: '  Snack 项目初始化', en: '  Snack Project Init' },
+    projectName:            { zh: '项目名称', en: 'Project name' },
+    description:            { zh: '项目描述', en: 'Description' },
+    author:                 { zh: '作者', en: 'Author' },
+    debugServers:           { zh: '调试服务器（多个用逗号分隔）', en: 'Debug servers (comma separated)' },
+    entryPageId:            { zh: '入口页面 ID', en: 'Entry page id' },
+    entryPageType:          { zh: '入口页面类型', en: 'Entry page type' },
+    reactVersion:           { zh: 'React 版本', en: 'React version' },
+    projectCreated:         { zh: '  项目已创建：', en: '  Project created at:' },
+    nextSteps:              { zh: '  后续步骤：', en: '  Next steps:' },
+    // create
+    createTitle:            { zh: '  Snack 模块创建', en: '  Snack Module Create' },
+    moduleName:             { zh: '模块名称', en: 'Module name' },
+    moduleDirName:          { zh: '模块目录名（PascalCase）', en: 'Module directory name (PascalCase)' },
+    withSetting:            { zh: '生成配置模块？(y/n)', en: 'Generate setting module? (y/n)' },
+    moduleCreated:          { zh: '  模块已创建：', en: '  Module created:' },
+    filesGenerated:         { zh: '  已生成文件：', en: '  Files generated:' },
+    // errors
+    errNoPkg:               { zh: '错误：当前目录没有 package.json，请在 snack 工程根目录下执行该命令', en: 'Error: No package.json found. Run this command in a snack project root.' },
+    errDirRequired:         { zh: '错误：模块目录名不能为空', en: 'Error: Module directory name is required' },
+    errDirExists:           { zh: '错误：模块目录已存在：', en: 'Error: Module directory already exists:' },
+    errNameConflict:        { zh: '请修改 snack-cli package.json "name" 的默认名称，该名称将在部署时作为分类目录', en: 'Please change the default "name" in package.json. It will be used as a category directory during deployment.' },
+    errNoEntry:             { zh: 'package.json 未找到 snack.entry 配置项', en: 'snack.entry config not found in package.json' },
+    errTempDir:             { zh: '临时目录创建失败', en: 'Failed to create temp directory' },
+    errIntegrity:           { zh: '完整性校验失败', en: 'Integrity check failed' },
+    // build logs
+    clearOutputDir:         { zh: '清理输出目录', en: 'clear output dir' },
+    clearOutputDirEnd:      { zh: '清理完成', en: 'clear output dir end' },
+    devServerRunning:       { zh: 'Snack 开发服务器运行中...', en: 'Snack DevServer Runing...' },
+    createLoaderAndHTML:    { zh: '生成 loader.js 和入口 HTML（并行）...', en: 'create loader.js & entry HTML (parallel) ...' },
+    createLoaderAndHTMLEnd: { zh: '生成完成', en: 'create loader.js & entry HTML end' },
+    createSnack:            { zh: '生成 snack 模块...', en: 'create snack ...' },
+    createSnackEnd:         { zh: '生成完成', en: 'create snack end' },
+    createEntry:            { zh: '生成入口页...', en: 'create entry ...' },
+    integrityPass:          { zh: '完整性校验通过', en: 'Integrity check passed' },
+    integrityFileMissing:   { zh: '完整性校验：文件缺失', en: 'snack check: file is missing' },
+};
+
+function i(key) {
+    return t[key][lang];
+}
+
 // ─── 交互式提问工具 ───────────────────────────────────────────────────────────
 
 function prompt(rl, question, defaultValue) {
@@ -41,36 +93,59 @@ function prompt(rl, question, defaultValue) {
     });
 }
 
+function select(rl, question, options, defaultValue) {
+    return new Promise(resolve => {
+        const hint = options.map((o, i) => `${i + 1}) ${o}`).join('  ');
+        const defaultHint = options.includes(defaultValue) ? defaultValue : options[0];
+        rl.question(`${question} [${hint}] (${defaultHint}): `, answer => {
+            const val = answer.trim();
+            if (val === '') return resolve(defaultHint);
+            const num = parseInt(val, 10);
+            if (!isNaN(num) && num >= 1 && num <= options.length) return resolve(options[num - 1]);
+            if (options.includes(val)) return resolve(val);
+            resolve(defaultHint);
+        });
+    });
+}
+
 // ─── init 命令：初始化新 snack 工程 ──────────────────────────────────────────
 
 async function runInit() {
     const targetDir = argv._[1] ? path.resolve(process.cwd(), argv._[1]) : process.cwd();
     const dirName = path.basename(targetDir);
 
-    console.log('\n  Snack Project Init\n');
+    console.log(`\n${i('initTitle')}\n`);
 
     const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
 
-    const name        = await prompt(rl, 'Project name', dirName);
-    const description = await prompt(rl, 'Description', '');
-    const author      = await prompt(rl, 'Author', '');
-    const debugInput  = await prompt(rl, 'Debug servers (comma separated)', 'http://127.0.0.1:3000');
-    const entryId     = await prompt(rl, 'Entry page id', name);
-    const entryType   = await prompt(rl, 'Entry page type', 'portal');
+    const name         = await prompt(rl, i('projectName'), dirName);
+    const description  = await prompt(rl, i('description'), '');
+    const author       = await prompt(rl, i('author'), '');
+    const debugInput   = await prompt(rl, i('debugServers'), 'http://127.0.0.1:3000');
+    const entryId      = await prompt(rl, i('entryPageId'), name);
+    const entryType    = await prompt(rl, i('entryPageType'), 'portal');
+    const reactVersion = await select(rl, i('reactVersion'), ['17', '18', '19'], '19');
 
     rl.close();
 
     const debugServers = debugInput.split(',').map(s => s.trim()).filter(Boolean);
 
+    const reactVersionMap = {
+        '17': { react: '^17.0.0', reactDom: '^17.0.0', typesReact: '^17.0.0', typesReactDom: '^17.0.0' },
+        '18': { react: '^18.0.0', reactDom: '^18.0.0', typesReact: '^18.0.0', typesReactDom: '^18.0.0' },
+        '19': { react: '^19.0.0', reactDom: '^19.0.0', typesReact: '^19.0.0', typesReactDom: '^19.0.0' },
+    };
+    const reactDeps = reactVersionMap[reactVersion];
+
     // ── package.json ─────────────────────────────────────────────────────────
     const pkg = {
         name,
         version: '1.0.0',
         description,
         scripts: {
-            start: 'snack-scripts start',
-            build: 'snack-scripts build',
-            entry: 'snack-scripts entry'
+            start: 'snack-cli start',
+            build: 'snack-cli build',
+            entry: 'snack-cli entry'
         },
         input: './src/package',
         output: './dist',
@@ -90,13 +165,13 @@ async function runInit() {
         author,
         license: 'ISC',
         dependencies: {
-            '@snack-kit/core': '^0.1.0',
-            'react': '^19.0.0',
-            'react-dom': '^19.0.0'
+            '@snack-kit/core': '^0.3.0',
+            'react': reactDeps.react,
+            'react-dom': reactDeps.reactDom
         },
         devDependencies: {
-            '@types/react': '^19.0.0',
-            '@types/react-dom': '^19.0.0'
+            '@types/react': reactDeps.typesReact,
+            '@types/react-dom': reactDeps.typesReactDom
         },
         dev: { debug: debugServers }
     };
@@ -150,9 +225,9 @@ declare module '*.bmp'
     await fs.outputFile(path.join(targetDir, 'src/env.d.ts'), envDts);
 
     console.log(`
-  Project created at: ${targetDir}
+${i('projectCreated')} ${targetDir}
 
-  Next steps:
+${i('nextSteps')}
     ${targetDir !== process.cwd() ? `cd ${argv._[1]}\n    ` : ''}npm install
     npm run start
 `);
@@ -161,45 +236,43 @@ declare module '*.bmp'
 // ─── create 命令：在当前工程创建新模块模版 ────────────────────────────────────
 
 async function runCreate() {
-    // 确认在一个 snack 工程目录下
     const pkgPath = path.resolve(projectPath, 'package.json');
     if (!fs.existsSync(pkgPath)) {
-        console.error('Error: 当前目录没有 package.json，请在 snack 工程根目录下执行该命令');
+        console.error(i('errNoPkg'));
         process.exit(1);
     }
     const projectPkg = fs.readJSONSync(pkgPath);
     const packageDir = path.resolve(projectPath, projectPkg.input || 'src/package');
 
-    console.log('\n  Snack Module Create\n');
+    console.log(`\n${i('createTitle')}\n`);
 
     const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
 
-    const chineseName = await prompt(rl, 'Module name (Chinese)', '新模块');
-    let dirName       = await prompt(rl, 'Module directory name (PascalCase)', '');
-    const description = await prompt(rl, 'Description', '');
-    const author      = await prompt(rl, 'Author', projectPkg.author || '');
-    const withSetting = (await prompt(rl, 'Generate setting module? (y/n)', 'y')).toLowerCase() === 'y';
+    const moduleName  = await prompt(rl, i('moduleName'), lang === 'zh' ? '新模块' : 'New Module');
+    let dirName       = await prompt(rl, i('moduleDirName'), '');
+    const description = await prompt(rl, i('description'), '');
+    const author      = await prompt(rl, i('author'), projectPkg.author || '');
+    const withSetting = (await prompt(rl, i('withSetting'), 'y')).toLowerCase() === 'y';
 
     rl.close();
 
     if (!dirName) {
-        console.error('Error: Module directory name is required');
+        console.error(i('errDirRequired'));
         process.exit(1);
     }
 
-    // 首字母大写
     dirName = dirName.charAt(0).toUpperCase() + dirName.slice(1);
     const moduleDir = path.join(packageDir, dirName);
     const className = dirName;
 
     if (fs.existsSync(moduleDir)) {
-        console.error(`Error: 模块目录已存在: ${moduleDir}`);
+        console.error(`${i('errDirExists')} ${moduleDir}`);
         process.exit(1);
     }
 
     // ── snack.json ────────────────────────────────────────────────────────────
     const snackJson = {
-        name: chineseName,
+        name: moduleName,
         version: '0.0.0.1',
         author,
         description
@@ -268,9 +341,9 @@ export class ${className}Setting extends SnackSetting {
     }
 
     console.log(`
-  Module created: ${moduleDir}
+${i('moduleCreated')} ${moduleDir}
 
-  Files generated:
+${i('filesGenerated')}
     ${dirName}/snack.json
     ${dirName}/index.ts
     ${dirName}/src/index.tsx
@@ -305,7 +378,7 @@ async function check(output) {
             if (!await fs.exists(snackjson)) continue;
             const index = path.join(output, dirname, 'index.js');
             if (!await fs.exists(index)) {
-                console.error('snack check: ', index, ' file is missing');
+                console.error(`${i('integrityFileMissing')}: ${index}`);
                 return false;
             }
         }
@@ -313,14 +386,14 @@ async function check(output) {
         console.error('snack check: ', err);
         return false;
     }
-    console.log('完整性校验通过');
+    console.log(i('integrityPass'));
     return true;
 }
 
 async function run(script) {
     const projectPackageJSON = fs.readJSONSync(path.resolve(projectPath, 'package.json'));
     if (projectPackageJSON.name === 'snack-cli') {
-        throw '请修改 snack-cli package.json "name" 的默认名称，该名称将在部署时作为分类目录';
+        throw i('errNameConflict');
     }
 
     process.env.SNACK_CLI_VERSION = version;
@@ -337,17 +410,17 @@ async function run(script) {
     await fs.remove(process.env.PROJECT_TEMPLATE_PATH);
     const err = await fs.copy(templatePath, process.env.PROJECT_TEMPLATE_PATH);
     if (err) {
-        console.error('临时目录创建失败');
+        console.error(i('errTempDir'));
         throw err;
     }
 
     process.env.PROJECT_SNACK_CONFIG = JSON.stringify(projectPackageJSON.snack || {});
 
     if (script === 'entry') {
-        if (!projectPackageJSON.snack?.entry) throw 'package.json 未找到snack.entry配置项';
+        if (!projectPackageJSON.snack?.entry) throw i('errNoEntry');
         process.env.RUN_MODE = 'production';
         process.env.PROJECT_OUT_PATH = path.resolve(projectPath, projectPackageJSON.snack.entry.name || 'entry');
-        console.log('create entry ...');
+        console.log(i('createEntry'));
         await execWebpack(['--mode=production', `--config=${entryConfigPath}`]);
     } else {
         if (script === 'start') {
@@ -360,28 +433,28 @@ async function run(script) {
 
         process.env.PROJECT_PACKAGE_LIST = JSON.stringify(GetPackageList(process.env.PROJECT_PACKAGE_PATH));
 
-        console.log(`clear output dir "${process.env.PROJECT_OUT_PATH}" ...`);
+        console.log(`${i('clearOutputDir')} "${process.env.PROJECT_OUT_PATH}" ...`);
         clearOutput(process.env.PROJECT_OUT_PATH);
-        console.log('clear output dir end');
+        console.log(i('clearOutputDirEnd'));
 
         if (script === 'start') {
-            console.log('Snack DevServer Runing...');
+            console.log(i('devServerRunning'));
             await execWebpack(['serve', '--mode=development', `--config=${devConfigPath}`]);
         } else {
-            console.log('create loader.js & entry HTML (parallel) ...');
+            console.log(i('createLoaderAndHTML'));
             await Promise.all([
                 execWebpack(['--mode=production', `--config=${loaderConfigPath}`]),
                 execWebpack(['--mode=production', `--config=${indexHTMLPath}`])
             ]);
-            console.log('create loader.js & entry HTML end');
-            console.log('create snack ...');
+            console.log(i('createLoaderAndHTMLEnd'));
+            console.log(i('createSnack'));
             await execWebpack(['--mode=production', `--config=${snackPath}`]);
-            console.log('create snack end');
+            console.log(i('createSnackEnd'));
         }
 
         if (process.env.RUN_MODE !== 'development' && !await check(process.env.PROJECT_OUT_PATH)) {
             fs.removeSync(process.env.PROJECT_OUT_PATH);
-            throw '完整性校验失败';
+            throw i('errIntegrity');
         }
     }
 

package/config/webpack.shared.js

@@ -151,7 +151,7 @@ function createSwcRule(withRefresh = false) {
  */
 const styleRule = {
     test: /\.(css|sass|scss)$/,
-    use: ['style-loader', 'css-loader', 'sass-loader']
+    use: ['style-loader', 'css-loader', { loader: 'sass-loader', options: { api: 'modern' } }]
 };
 
 /**

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@snack-kit/scripts",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "snack-cli package scripts Powered by Para FED",
   "bin": {
-    "snack-scripts": "./bin/main.js"
+    "snack-scripts": "./bin/main.js",
+    "snack-cli": "./bin/main.js"
   },
   "files": [
     "bin",
@@ -33,8 +34,6 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
     "@snack-kit/core": "^0.3.0",
     "@snack-kit/lib": "^0.6.0",
     "@swc/core": "^1.2.100",
@@ -45,10 +44,12 @@
     "fs-extra": "^8.1.0",
     "html-webpack-plugin": "^5.3.2",
     "minimist": "^1.2.8",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-refresh": "^0.11.0",
     "regenerator-runtime": "^0.13.9",
     "sass": "^1.77.2",
-    "sass-loader": "^12.1.0",
+    "sass-loader": "^13.3.3",
     "style-loader": "^3.2.1",
     "swc-loader": "^0.1.15",
     "typescript": "^4.4.2",

package/template/dev/App.tsx

@@ -411,22 +411,17 @@ const RefreshBtn = ({ onRefresh }: any) => (
 // ─── Pane Content Wrapper ─────────────────────────────────────────────────────
 
 const PaneContent = ({ width, scale, bg, children }: any) => {
-    const style: React.CSSProperties = {};
+    const innerStyle: React.CSSProperties = {};
     if (width) {
-        style.width = width;
-        style.margin = '0 auto';
-        style.flexShrink = 0;
+        innerStyle.width = width;
+        innerStyle.margin = '0 auto';
     }
     if (scale !== 100) {
-        style.transform = `scale(${scale / 100})`;
-        style.transformOrigin = 'top left';
-        if (width) {
-            style.width = width;
-        }
+        innerStyle.zoom = scale / 100;
     }
     return (
         <div className={`sd-pane__content sd-pane__content--bg-${bg}`}>
-            <div style={style}>
+            <div style={innerStyle}>
                 {children}
             </div>
         </div>

package/template/dev/index.scss

@@ -743,6 +743,13 @@ button {
     overflow: auto;
     padding: 16px;
     transition: background .2s;
+    // 让内部子元素可以用 min-height: 100% 撑满
+    display: flex;
+    flex-direction: column;
+
+    & > div {
+        flex: 1;
+    }
 
     // 背景模式
     &--bg-default { background: var(--bg); }