@bams-app/ui-dev-server 0.0.9 → 0.1.2

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] 可先执行 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.9",
+  "version": "0.1.2",
   "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

@@ -244,6 +244,40 @@ function resolveComponent(componentName, rootDir, packageJson) {
     return getComponentScope(componentName, rootDir, packageJson);
 }
 
+/**
+ * 解析 dev/build 时 @target-component 别名实际指向的组件目录
+ * - 完整包名（@scope/name）：在候选中按 packageName 精确匹配，避免同名组件始终落到第一个
+ * - 路径：直接使用该路径
+ * - 短名：沿用第一个候选；无候选时回退 resolveComponent 结果（如已发布包从 node_modules 解析）
+ * @param {string} componentName - 组件名、完整包名或路径
+ * @param {string} rootDir - 项目根目录
+ * @param {Object} packageJson - package.json 对象
+ * @returns {string} 组件目录绝对路径或可被 webpack 解析的包名
+ */
+function resolveTargetComponentPath(componentName, rootDir, packageJson) {
+    const resolvedComponent = resolveComponent(componentName, rootDir, packageJson);
+
+    // 路径形式已指向明确目录，无需再按名字查找候选
+    if (isFileSystemPath(componentName)) {
+        return resolvedComponent;
+    }
+
+    const candidates = findComponentCandidates(getComponentEntryName(componentName), rootDir, packageJson);
+    if (candidates.length === 0) {
+        return resolvedComponent;
+    }
+
+    // 完整包名：按 packageName 精确匹配同名组件所属 scope
+    if (componentName.startsWith('@')) {
+        const matched = candidates.find((candidate) => candidate.packageName === componentName);
+        if (matched) {
+            return matched.componentPath;
+        }
+    }
+
+    return candidates[0].componentPath;
+}
+
 /**
  * 从组件名或路径中提取组件入口名（用于前端渲染）
  * @param {string} componentName - 组件名或路径
@@ -291,16 +325,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 +366,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 +393,13 @@ function parseCliArgs(argv) {
             } else {
                 i++;
             }
-            // 其他参数：作为组件名
+            // 其他参数：位置参数（未显式传 --env 时，第 1 个 = 环境标识；其余 = 组件名）
         } else {
-            componentName = arg;
+            if (!envFromFlag && envFile === '') {
+                envFile = arg;
+            } else {
+                componentName = arg;
+            }
             i++;
         }
     }
@@ -347,10 +407,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 - 输入字符串
@@ -456,10 +587,14 @@ module.exports = {
     findComponentCandidates,
     getComponentScope,
     resolveComponent,
+    resolveTargetComponentPath,
     getComponentEntryName,
     toCamelComponentName,
     colorize,
     parseCliArgs,
+    resolveEnvFile,
+    listEnvAliases,
+    loadProjectEnv,
     isFileSystemPath,
     promptForCandidate,
     resolveComponentInput

package/vue.config.build.js

@@ -1,7 +1,7 @@
 const { defineConfig } = require('@vue/cli-service')
 const path = require('path')
 const { getBaseConfig } = require('./vue.config.base')
-const { getRootDir, getProjectPackageJson, resolveComponent, findComponentCandidates, getComponentEntryName } = require('./utils')
+const { getRootDir, getProjectPackageJson, resolveTargetComponentPath } = require('./utils')
 
 const rootDir = getRootDir();
 const packageJson = getProjectPackageJson(rootDir);
@@ -9,12 +9,9 @@ const baseConfig = getBaseConfig({ rootDir, packageJson });
 
 const componentName = process.env.COMPONENT || 'ui-component-demo';
 
-const resolvedComponent = resolveComponent(componentName, rootDir, packageJson);
-// COMPONENT 环境变量可能是 @scope/name 完整包名，查找候选时需用短名
-const candidates = findComponentCandidates(getComponentEntryName(componentName), rootDir, packageJson);
-// 命中候选时别名指向组件目录绝对路径（避免从包目录解析用户项目组件失败）
-const component = candidates.length > 0 ? candidates[0].componentPath : resolvedComponent;
-console.log('🎉 当前开发组件：', resolvedComponent);
+// COMPONENT 可能是 @scope/name 完整包名，同名组件存在多个 scope 时按包名精确匹配
+const component = resolveTargetComponentPath(componentName, rootDir, packageJson);
+console.log('🎉 当前构建组件：', component);
 
 module.exports = defineConfig({
     transpileDependencies: baseConfig.transpileDependencies,

package/vue.config.dev.js

@@ -1,7 +1,7 @@
 const { defineConfig } = require('@vue/cli-service')
 const path = require('path')
 const { getBaseConfig } = require('./vue.config.base')
-const { getRootDir, getProjectPackageJson, resolveComponent, findComponentCandidates, getComponentEntryName, toCamelComponentName } = require('./utils')
+const { getRootDir, getProjectPackageJson, resolveTargetComponentPath, toCamelComponentName } = require('./utils')
 
 const rootDir = getRootDir();
 const packageJson = getProjectPackageJson(rootDir);
@@ -11,12 +11,9 @@ const componentName = process.env.COMPONENT || 'ui-component-demo';
 const layout = process.env.LAYOUT || 'pc';
 const camelComponentName = toCamelComponentName(componentName);
 
-const resolvedComponent = resolveComponent(componentName, rootDir, packageJson);
-// COMPONENT 环境变量可能是 @scope/name 完整包名，查找候选时需用短名
-const candidates = findComponentCandidates(getComponentEntryName(componentName), rootDir, packageJson);
-// 命中候选时别名指向组件目录绝对路径（避免从包目录解析用户项目组件失败）
-const component = candidates.length > 0 ? candidates[0].componentPath : resolvedComponent;
-console.log('🎉 当前开发组件：', resolvedComponent);
+// COMPONENT 可能是 @scope/name 完整包名，同名组件存在多个 scope 时按包名精确匹配
+const component = resolveTargetComponentPath(componentName, rootDir, packageJson);
+console.log('🎉 当前开发组件：', component);
 
 module.exports = defineConfig({
     transpileDependencies: baseConfig.transpileDependencies,