@bams-app/ui-dev-server 0.0.8 → 0.1.0

package/bin/build-app.js

@@ -1,17 +1,30 @@
 #!/usr/bin/env node
 
 const { spawn } = require('child_process');
-const { getRootDir, getProjectPackageJson, parseCliArgs, resolveComponentInput, colorize } = require('../utils');
+const fs = require('fs');
+const path = require('path');
+const { getRootDir, getProjectPackageJson, parseCliArgs, resolveComponentInput, resolveEnvFile, loadProjectEnv, colorize } = require('../utils');
 
 const rootDir = getRootDir();
 const packageJson = getProjectPackageJson(rootDir);
 
 async function main() {
-  const { componentName: rawComponentName, vueCliArgs } = parseCliArgs(process.argv);
+  const { componentName: rawComponentName, envFile, vueCliArgs } = parseCliArgs(process.argv);
   const componentName = await resolveComponentInput(rawComponentName, rootDir, packageJson);
 
-  // 设置环境变量
-  const env = { ...process.env };
+  // 打包默认应用 .envs/.env.production（可用 --env <标识> 覆盖）；项目缺少该文件时沿用当前进程环境
+  const envAlias = envFile || 'production';
+  const envFilePath = resolveEnvFile(envAlias, rootDir);
+  let env;
+  if (fs.existsSync(envFilePath)) {
+    env = loadProjectEnv(envAlias, rootDir);
+  } else if (envFile) {
+    console.error(colorize(`[build-app] 环境文件不存在: ${envFilePath}`, 'red'));
+    process.exit(1);
+  } else {
+    console.warn(colorize(`[build-app] 未找到 ${path.relative(rootDir, envFilePath)}，将使用当前进程环境`, 'yellow'));
+    env = { ...process.env };
+  }
   env.COMPONENT = componentName;
   env.WORK_PROJECT_ROOT = rootDir;
   env.NODE_ENV = 'production';
@@ -24,7 +37,7 @@ async function main() {
 
   const child = spawn(process.execPath, [vueCliService, 'build', ...vueCliArgs], {
     env,
-    cwd: require('path').resolve(__dirname, '../'),
+    cwd: path.resolve(__dirname, '../'),
     stdio: 'inherit'
   });
 

package/bin/build-umd.js

@@ -3,13 +3,14 @@
 const { spawn } = require('child_process');
 const path = require('path');
 const fs = require('fs');
-const { getRootDir } = require('../utils');
+const { getRootDir, resolveEnvFile, loadProjectEnv, colorize } = require('../utils');
 
 // 解析命令行参数
 const args = process.argv.slice(2);
 let entryFile = '';
 let outputDir = '';
 let outputName = 'bams-components';
+let envAlias = '';
 
 // 处理参数
 for (let i = 0; i < args.length; i++) {
@@ -34,6 +35,11 @@ for (let i = 0; i < args.length; i++) {
     outputName = args[i].split('=')[1];
   } else if (args[i].startsWith('-n=')) {
     outputName = args[i].split('=')[1];
+  } else if (args[i] === '--env') {
+    envAlias = args[i + 1];
+    i++;
+  } else if (args[i].startsWith('--env=')) {
+    envAlias = args[i].split('=')[1];
   }
 }
 
@@ -58,8 +64,20 @@ if (outputDir && !path.isAbsolute(outputDir)) {
   outputDir = path.resolve(process.cwd(), outputDir);
 }
 
-// 设置环境变量
-const env = { ...process.env };
+// 打包默认应用 .envs/.env.production（可通过 --env 指定环境标识或 env 文件路径）；项目缺少该文件时沿用当前进程环境
+const resolvedEnvAlias = envAlias || 'production';
+const envFilePath = resolveEnvFile(resolvedEnvAlias, rootDir);
+let env;
+if (fs.existsSync(envFilePath)) {
+  env = loadProjectEnv(resolvedEnvAlias, rootDir);
+  console.log(colorize(`[build-umd] Env file: ${path.relative(rootDir, envFilePath)}`, 'blue'));
+} else if (envAlias) {
+  console.error(`❌ 环境文件不存在：${envFilePath}`);
+  process.exit(1);
+} else {
+  console.warn(`⚠️  未找到 ${path.relative(rootDir, envFilePath)}，将使用当前进程环境`);
+  env = { ...process.env };
+}
 env.WORK_PROJECT_ROOT = rootDir;
 env.ENTRY_FILE = entryFile;
 if (outputDir) env.OUTPUT_DIR = outputDir;

package/bin/ui-dev-server.js

@@ -2,17 +2,48 @@
 
 const { spawn } = require('child_process');
 const path = require('path');
-const { getRootDir, getProjectPackageJson, parseCliArgs, resolveComponentInput, colorize } = require('../utils');
+const { getRootDir, getProjectPackageJson, parseCliArgs, resolveComponentInput, resolveEnvFile, listEnvAliases, loadProjectEnv, colorize } = require('../utils');
 
 const rootDir = getRootDir();
 const packageJson = getProjectPackageJson(rootDir);
 
+/**
+ * 校验环境标识是否已指定
+ * - 已显式传入（位置参数 / --env），或环境已由 shared-env 注入（BAMS_ENV_FILE）时放行，
+ *   保证仓库内 dev:ui 链路行为不变
+ * - 项目内存在 .envs/.env.dev-* 却未指定时报错并列出可用环境，避免"静默无环境"
+ * - 项目内没有任何环境配置时仅提示，不阻塞启动
+ * @param {string} envInput - 环境标识或 env 文件路径
+ */
+function assertEnvSpecified(envInput) {
+  if (envInput || process.env.BAMS_ENV_FILE) {
+    return;
+  }
+
+  const aliases = listEnvAliases(rootDir);
+  if (aliases.length === 0) {
+    console.warn(colorize('[ui-dev-server] 未找到环境配置（.envs/.env.dev-*），将以无环境变量方式启动', 'yellow'));
+    console.warn(colorize('[ui-dev-server] 可先执行 bams-work env <标识> 创建环境配置', 'yellow'));
+    return;
+  }
+
+  console.error(colorize('[ui-dev-server] 未指定环境标识，启动已终止', 'red'));
+  console.error(colorize(`[ui-dev-server] 可用环境: ${aliases.join(', ')}`, 'yellow'));
+  console.error(colorize('[ui-dev-server] 用法: npm run dev:ui <环境标识> [组件名]', 'yellow'));
+  process.exit(1);
+}
+
 async function main() {
-  const { componentName: rawComponentName, layout, vueCliArgs } = parseCliArgs(process.argv);
+  const { componentName: rawComponentName, layout, envFile, vueCliArgs } = parseCliArgs(process.argv);
+  assertEnvSpecified(envFile);
   const componentName = await resolveComponentInput(rawComponentName, rootDir, packageJson);
 
-  // 设置环境变量
-  const env = { ...process.env };
+  // 环境标识对应的文件键优先于进程已有变量
+  const envFilePath = resolveEnvFile(envFile, rootDir);
+  const env = loadProjectEnv(envFile, rootDir);
+  if (envFilePath) {
+    console.log(colorize(`[ui-dev-server] Env file: ${path.relative(rootDir, envFilePath)}`, 'blue'));
+  }
   env.COMPONENT = componentName;
   env.LAYOUT = layout;
   env.WORK_PROJECT_ROOT = rootDir;

package/package.json

@@ -1,17 +1,12 @@
 {
   "name": "@bams-app/ui-dev-server",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "scripts": {
     "serve": "node ./bin/ui-dev-server.js",
     "build": "vue-cli-service build",
     "build:umd": "node ./bin/build-umd.js",
     "lint": "vue-cli-service lint"
   },
-  "peerDependencies": {
-    "ant-design-vue": "^4.0.0",
-    "vue": "^3.5.24",
-    "vue-router": "^4.0.0"
-  },
   "dependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
@@ -32,6 +27,7 @@
     "@bams-app/permission": "*",
     "@bams-app/router": "*",
     "@bams-app/service": "*",
+    "@bams-app/shared-env": "*",
     "@bams-app/store": "*",
     "@bams-app/theme": "*",
     "@bams-app/ui-business-table": "*",
@@ -46,15 +42,30 @@
     "@bams-app/utils": "*",
     "@bams-app/version-check": "*",
     "@bams-app/websocket": "*",
+    "@ant-design/icons-vue": "^7.0.1",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "ant-design-vue": "4.2.6",
+    "axios": "^1.13.2",
     "core-js": "^3.8.3",
+    "dayjs": "^1.11.20",
+    "devextreme": "25.2.3",
+    "devextreme-exceljs-fork": "^4.4.8",
+    "devextreme-vue": "25.2.3",
+    "file-saver": "^2.0.5",
+    "flex.css": "^1.1.7",
     "inquirer": "9",
+    "jsencrypt": "^3.5.4",
     "less": "^4.5.1",
     "less-loader": "^7.3.0",
+    "marked": "^17.0.4",
+    "pinia": "^3.0.4",
+    "pinia-plugin-persistedstate": "^4.7.1",
     "raw-loader": "^4.0.2",
     "sass": "^1.97.3",
-    "sass-loader": "^10.1.1"
+    "sass-loader": "^10.1.1",
+    "vue": "^3.5.24",
+    "vue-router": "4"
   },
   "files": [
     "bin/",

package/utils.js

@@ -291,16 +291,21 @@ function colorize(text, color) {
 
 /**
  * 解析命令行参数
+ * 位置参数：第 1 个为环境标识（等价 --env），第 2 个为组件名（等价 --component）
+ * 即 `npm run dev:ui demo` → 环境 demo，`npm run dev:ui demo ui-order-list` → 环境 demo + 组件 ui-order-list
  * @param {string[]} argv - process.argv
  * @returns {Object} 解析结果
  * @returns {string} returns.componentName - 组件名
  * @returns {string} returns.layout - 布局类型
+ * @returns {string} returns.envFile - 环境标识或 env 文件路径（第 1 个位置参数或 --env，可为空）
  * @returns {string[]} returns.vueCliArgs - 传递给 Vue CLI 的参数
  */
 function parseCliArgs(argv) {
     const args = argv.slice(2);
     let componentName = 'ui-component-demo';
     let layout = 'pc';
+    let envFile = '';
+    let envFromFlag = false;
     const vueCliArgs = [];
 
     let i = 0;
@@ -327,7 +332,24 @@ function parseCliArgs(argv) {
         } else if (arg.startsWith('-l=')) {
             layout = arg.split('=')[1];
             i++;
+            // --env 或 -e 参数：环境标识（如 demo）或 env 文件路径
+        } else if (arg === '--env' || arg === '-e') {
+            envFile = args[i + 1];
+            envFromFlag = true;
+            i += 2;
+        } else if (arg.startsWith('--env=')) {
+            envFile = arg.split('=')[1];
+            envFromFlag = true;
+            i++;
+        } else if (arg.startsWith('-e=')) {
+            envFile = arg.split('=')[1];
+            envFromFlag = true;
+            i++;
             // Vue CLI 参数（以 -- 开头）
+        } else if (arg === '--') {
+            // 分隔符：其后参数原样透传给 vue-cli-service（npm run dev -- 会额外透传一个 --）
+            vueCliArgs.push(...args.slice(i + 1));
+            break;
         } else if (arg.startsWith('--')) {
             vueCliArgs.push(arg);
             // 处理带值的选项
@@ -337,9 +359,13 @@ function parseCliArgs(argv) {
             } else {
                 i++;
             }
-            // 其他参数：作为组件名
+            // 其他参数：位置参数（未显式传 --env 时，第 1 个 = 环境标识；其余 = 组件名）
         } else {
-            componentName = arg;
+            if (!envFromFlag && envFile === '') {
+                envFile = arg;
+            } else {
+                componentName = arg;
+            }
             i++;
         }
     }
@@ -347,10 +373,81 @@ function parseCliArgs(argv) {
     return {
         componentName,
         layout,
+        envFile,
         vueCliArgs
     };
 }
 
+/**
+ * 将环境标识解析为 env 文件绝对路径
+ * - 路径形式（含路径分隔符，或以 .env 开头）：相对项目根解析
+ * - production：映射为 <rootDir>/.envs/.env.production（打包使用，开发不适用）
+ * - 其他（环境标识，如 demo）：映射为 <rootDir>/.envs/.env.dev-<标识>
+ * @param {string} envInput - 环境标识或 env 文件路径
+ * @param {string} rootDir - 项目根目录
+ * @returns {string} env 文件绝对路径，未传时返回空字符串
+ */
+function resolveEnvFile(envInput, rootDir) {
+    if (!envInput) {
+        return '';
+    }
+
+    const isPathLike = envInput.includes('/')
+        || envInput.includes('\\')
+        || path.basename(envInput).startsWith('.env');
+
+    if (isPathLike) {
+        return path.resolve(rootDir, envInput);
+    }
+
+    const fileName = envInput === 'production' ? '.env.production' : `.env.dev-${envInput}`;
+    return path.resolve(rootDir, '.envs', fileName);
+}
+
+/**
+ * 列出项目可用的开发环境标识（.envs/.env.dev-*）
+ * @param {string} rootDir - 项目根目录
+ * @returns {string[]} 环境标识列表
+ */
+function listEnvAliases(rootDir) {
+    const envDir = path.resolve(rootDir, '.envs');
+    if (!fs.existsSync(envDir)) {
+        return [];
+    }
+
+    return fs.readdirSync(envDir)
+        .filter((name) => name.startsWith('.env.dev-') && !name.endsWith('.local'))
+        .map((name) => name.replace('.env.dev-', ''))
+        .sort();
+}
+
+/**
+ * 按环境标识加载环境文件（dev/build 共用）
+ * - 环境标识为空时返回当前进程环境（不做任何加载）
+ * @param {string} envInput - 环境标识或 env 文件路径
+ * @param {string} rootDir - 项目根目录
+ * @returns {Object} 环境变量对象
+ */
+function loadProjectEnv(envInput, rootDir) {
+    if (!envInput) {
+        return { ...process.env };
+    }
+
+    const envFilePath = resolveEnvFile(envInput, rootDir);
+    if (!fs.existsSync(envFilePath)) {
+        throw new Error(`环境文件不存在: ${envFilePath}`);
+    }
+
+    let loadEnv;
+    try {
+        ({ loadEnv } = require('@bams-app/shared-env/lib/env-loader'));
+    } catch (err) {
+        throw new Error(`加载环境文件需要安装 @bams-app/shared-env（${err.message}）`);
+    }
+
+    return loadEnv(rootDir, envFilePath);
+}
+
 /**
  * 判断输入是否为文件系统路径
  * @param {string} input - 输入字符串
@@ -460,6 +557,9 @@ module.exports = {
     toCamelComponentName,
     colorize,
     parseCliArgs,
+    resolveEnvFile,
+    listEnvAliases,
+    loadProjectEnv,
     isFileSystemPath,
     promptForCandidate,
     resolveComponentInput

package/vue.config.base.js

@@ -10,13 +10,41 @@ const builtinProxy = Object.fromEntries(
     ['/bams-assets', '/bams-ui-umd', '/bams-app', '/admin-api', '/preview'].map((p) => [p, { target: process.env.PROXY_TARGET }])
 );
 
+/**
+ * 加载项目级自定义代理配置（项目根 .proxy.js，可选，不存在时返回空对象）
+ * 支持两种导出形式：
+ * - 对象：module.exports = { proxy: { '/my-api': { target: 'http://192.168.1.100:8080' } } }
+ * - 函数：module.exports = ({ env, projectRoot }) => ({ proxy: { ... } })
+ * 加载失败时告警并回退为空配置，不阻断开发服务启动
+ * @param {string} rootDir 项目根目录
+ * @param {Object} [env=process.env] 环境变量对象，透传给函数形式的导出
+ * @returns {Object} devServer.proxy 片段
+ */
+function loadProjectProxy(rootDir, env = process.env) {
+    const filePath = path.join(rootDir, '.proxy.js');
+
+    if (!fs.existsSync(filePath)) {
+        return {};
+    }
+
+    try {
+        const loaded = require(filePath);
+        const resolved = typeof loaded === 'function' ? loaded({ env, projectRoot: rootDir }) : loaded;
+        console.log(`[ui-dev-server] 已加载项目代理配置: ${path.basename(filePath)}`);
+        return (resolved || {}).proxy || {};
+    } catch (err) {
+        console.warn(`[ui-dev-server] 项目代理配置加载失败，已忽略: ${err.message}`);
+        return {};
+    }
+}
+
 /**
  * 生成通用基础配置（原仓库根 vue.config.js 的核心逻辑）
  * - externals（vue / vue-router / pinia）
  * - md 文件 raw-loader
  * - @components-entry 动态别名（存在 build-components-entry.js 时指向它，否则指向空入口）
  * - @configurable/* 可配置组件别名（基于环境变量与默认插槽映射）
- * - devServer 代理合并（项目配置优先 + 内置默认补充缺失前缀）
+ * - devServer 代理合并（devServer 配置 > 项目根 .proxy.js > 内置默认补充缺失前缀）
  * @param {Object} [options]
  * @param {string} options.rootDir 项目根目录
  * @param {Object} options.packageJson 项目根 package.json
@@ -28,8 +56,9 @@ function getBaseConfig(options = {}) {
     const packageJson = options.packageJson || getProjectPackageJson(rootDir);
     const devServer = options.devServer || {};
 
-    // 项目配置优先，覆盖内置默认值；代理键序以项目配置为准，内置默认仅补充缺失前缀
-    const devProxy = devServer.proxy || {};
+    // 代理优先级（同名覆盖，前者优先）：options.devServer.proxy > 项目根 .proxy.js > 内置默认
+    // 键序即匹配序（webpack-dev-server 按插入顺序匹配前缀），项目级 key 在前，内置默认仅补充缺失前缀
+    const devProxy = { ...loadProjectProxy(rootDir), ...(devServer.proxy || {}) };
     const mergedProxy = Object.fromEntries([
         ...Object.entries(devProxy),
         ...Object.entries(builtinProxy).filter(([k]) => !(k in devProxy)),
@@ -72,4 +101,4 @@ function getBaseConfig(options = {}) {
     };
 }
 
-module.exports = { getRootDir, getProjectPackageJson, getBaseConfig };
+module.exports = { getRootDir, getProjectPackageJson, getBaseConfig, loadProjectProxy };