@bams-app/ui-dev-server 0.0.1

package/bin/build-app.js

@@ -0,0 +1,44 @@
+#!/usr/bin/env node
+
+const { spawn } = require('child_process');
+const { getRootDir, getProjectPackageJson, parseCliArgs, resolveComponentInput, colorize } = require('../utils');
+
+const rootDir = getRootDir();
+const packageJson = getProjectPackageJson(rootDir);
+
+async function main() {
+  const { componentName: rawComponentName, vueCliArgs } = parseCliArgs(process.argv);
+  const componentName = await resolveComponentInput(rawComponentName, rootDir, packageJson);
+
+  // 设置环境变量
+  const env = { ...process.env };
+  env.COMPONENT = componentName;
+  env.WORK_PROJECT_ROOT = rootDir;
+  env.NODE_ENV = 'production';
+
+  console.log(colorize(`[build-app] Building component: ${componentName}`, 'green'));
+  console.log(colorize(`[build-app] Vue CLI args: ${vueCliArgs.join(' ')}`, 'blue'));
+
+  // 启动vue-cli-service build
+  const vueCliService = require.resolve('@vue/cli-service/bin/vue-cli-service.js');
+
+  const child = spawn(process.execPath, [vueCliService, 'build', ...vueCliArgs], {
+    env,
+    cwd: require('path').resolve(__dirname, '../'),
+    stdio: 'inherit'
+  });
+
+  child.on('error', (err) => {
+    console.error(colorize('构建失败:', 'red'), err);
+    process.exit(1);
+  });
+
+  child.on('exit', (code) => {
+    process.exit(code);
+  });
+}
+
+main().catch((err) => {
+  console.error(colorize('构建失败:', 'red'), err);
+  process.exit(1);
+});

package/bin/build-umd.js

@@ -0,0 +1,96 @@
+#!/usr/bin/env node
+
+const { spawn } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+const { getRootDir } = require('../utils');
+
+// 解析命令行参数
+const args = process.argv.slice(2);
+let entryFile = '';
+let outputDir = '';
+let outputName = 'bams-components';
+
+// 处理参数
+for (let i = 0; i < args.length; i++) {
+  if (args[i] === '--entry' || args[i] === '-e') {
+    entryFile = args[i + 1];
+    i++;
+  } else if (args[i].startsWith('--entry=')) {
+    entryFile = args[i].split('=')[1];
+  } else if (args[i].startsWith('-e=')) {
+    entryFile = args[i].split('=')[1];
+  } else if (args[i] === '--output-dir' || args[i] === '-o') {
+    outputDir = args[i + 1];
+    i++;
+  } else if (args[i].startsWith('--output-dir=')) {
+    outputDir = args[i].split('=')[1];
+  } else if (args[i].startsWith('-o=')) {
+    outputDir = args[i].split('=')[1];
+  } else if (args[i] === '--name' || args[i] === '-n') {
+    outputName = args[i + 1];
+    i++;
+  } else if (args[i].startsWith('--name=')) {
+    outputName = args[i].split('=')[1];
+  } else if (args[i].startsWith('-n=')) {
+    outputName = args[i].split('=')[1];
+  }
+}
+
+// 设置默认入口文件
+const rootDir = getRootDir();
+if (!entryFile) {
+  entryFile = path.resolve(rootDir, 'build-components-entry.js');
+} else if (!path.isAbsolute(entryFile)) {
+  // 如果是相对路径，转换为绝对路径（相对于当前工作目录）
+  entryFile = path.resolve(process.cwd(), entryFile);
+}
+
+// 检查入口文件是否存在
+if (!fs.existsSync(entryFile)) {
+  console.error('❌ 入口文件不存在：', entryFile);
+  console.log('💡 请先运行 create-pages-entry 脚本生成入口文件');
+  process.exit(1);
+}
+
+// 处理输出目录路径
+if (outputDir && !path.isAbsolute(outputDir)) {
+  outputDir = path.resolve(process.cwd(), outputDir);
+}
+
+// 设置环境变量
+const env = { ...process.env };
+env.WORK_PROJECT_ROOT = rootDir;
+env.ENTRY_FILE = entryFile;
+if (outputDir) env.OUTPUT_DIR = outputDir;
+env.OUTPUT_NAME = outputName;
+env.BUILD_TYPE = 'umd';
+
+// 启动vue-cli-service build
+const vueCliService = require.resolve('@vue/cli-service/bin/vue-cli-service.js');
+
+const buildArgs = [
+  'build',
+  '--target', 'lib',
+  '--name', outputName,
+  '--dest', outputDir || path.resolve(rootDir, 'dist/umd'),
+  entryFile
+];
+
+const child = spawn(process.execPath, [vueCliService, ...buildArgs], {
+  env: env,
+  cwd: path.resolve(__dirname, '../'),
+  stdio: 'inherit'
+});
+
+child.on('error', (err) => {
+  console.error('❌ 打包失败:', err);
+  process.exit(1);
+});
+
+child.on('exit', (code) => {
+  if (code === 0) {
+    console.log('✅ 打包成功！');
+  }
+  process.exit(code);
+});

package/bin/ui-dev-server.js

@@ -0,0 +1,45 @@
+#!/usr/bin/env node
+
+const { spawn } = require('child_process');
+const path = require('path');
+const { getRootDir, getProjectPackageJson, parseCliArgs, resolveComponentInput, colorize } = require('../utils');
+
+const rootDir = getRootDir();
+const packageJson = getProjectPackageJson(rootDir);
+
+async function main() {
+  const { componentName: rawComponentName, layout, vueCliArgs } = parseCliArgs(process.argv);
+  const componentName = await resolveComponentInput(rawComponentName, rootDir, packageJson);
+
+  // 设置环境变量
+  const env = { ...process.env };
+  env.COMPONENT = componentName;
+  env.LAYOUT = layout;
+  env.WORK_PROJECT_ROOT = rootDir;
+
+  console.log(colorize(`[ui-dev-server] Starting component: ${componentName}, layout: ${layout}`, 'green'));
+  console.log(colorize(`[ui-dev-server] Vue CLI args: ${vueCliArgs.join(' ')}`, 'blue'));
+
+  // 启动vue-cli-service serve
+  const vueCliService = require.resolve('@vue/cli-service/bin/vue-cli-service.js');
+
+  const child = spawn(process.execPath, [vueCliService, 'serve', ...vueCliArgs], {
+    env,
+    cwd: path.resolve(__dirname, '../'),
+    stdio: 'inherit'
+  });
+
+  child.on('error', (err) => {
+    console.error(colorize('启动开发服务器失败:', 'red'), err);
+    process.exit(1);
+  });
+
+  child.on('exit', (code) => {
+    process.exit(code);
+  });
+}
+
+main().catch((err) => {
+  console.error(colorize('启动开发服务器失败:', 'red'), err);
+  process.exit(1);
+});

package/config-utils.js

@@ -0,0 +1,105 @@
+const { resolveComponent } = require("./utils");
+const globalComponentDefaults = require("@bams-app/configs/component-defaults.js");
+
+/**
+ * 简单的深度合并对象
+ * @param {Object} target 目标对象
+ * @param {...Object} sources 源对象
+ * @returns {Object} 合并后的对象
+ */
+function merge(target, ...sources) {
+    if (!sources.length) return target;
+    const source = sources.shift();
+
+    if (source !== undefined && source !== null) {
+        Object.keys(source).forEach(key => {
+            const targetValue = target[key];
+            const sourceValue = source[key];
+
+            if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
+                target[key] = targetValue.concat(sourceValue);
+            } else if (typeof targetValue === 'object' && targetValue !== null &&
+                typeof sourceValue === 'object' && sourceValue !== null &&
+                !Array.isArray(sourceValue)) {
+                target[key] = merge({ ...targetValue }, sourceValue);
+            } else {
+                target[key] = sourceValue;
+            }
+        });
+    }
+
+    return merge(target, ...sources);
+}
+
+/**
+ * 将环境变量名转换为可配置插槽名
+ * @param {string} envKey 环境变量名
+ * @returns {string} 插槽名，如 login、home-card
+ */
+function normalizeConfigurableSlotName(envKey) {
+    return envKey
+        .replace(/^(VUE_APP_COMPONENT_|COMPONENT_)/, "")
+        .toLowerCase()
+        .replace(/_/g, "-");
+}
+
+/**
+ * 根据环境变量和默认值生成可配置组件 alias
+ * @param {Object} options 配置项
+ * @param {Object} options.env 环境变量对象
+ * @param {string} options.rootDir 项目根目录
+ * @param {Object} options.packageJson 根 package.json
+ * @param {Object} [options.defaults] 额外默认插槽组件映射，会覆盖全局默认值
+ * @returns {Object} webpack alias 对象
+ */
+function getConfigurableComponentAliases({ env, rootDir, packageJson, defaults = {} }) {
+    const slotToComponent = { ...globalComponentDefaults, ...defaults };
+
+    Object.entries(env).forEach(([key, value]) => {
+        if (!/^(VUE_APP_COMPONENT_|COMPONENT_).+$/.test(key) || !value) {
+            return;
+        }
+
+        slotToComponent[normalizeConfigurableSlotName(key)] = value;
+    });
+
+    return Object.entries(slotToComponent).reduce((aliases, [slotName, componentName]) => {
+        aliases[`@configurable/${slotName}`] = resolveComponent(componentName, rootDir, packageJson);
+        return aliases;
+    }, {});
+}
+
+/**
+ * 生成通用的 webpack alias 片段，包含所有可配置组件插槽
+ * @param {Object} [options]
+ * @param {string} options.rootDir 项目根目录
+ * @param {Object} [options.env=process.env] 环境变量对象
+ * @param {Object} options.packageJson 根 package.json
+ * @param {Object} [options.defaults] 额外默认插槽组件映射
+ * @returns {{rootDir: string, packageJson: object, aliases: Object}}
+ */
+function applyCommonConfig(options = {}) {
+    const { rootDir, env = process.env, packageJson, defaults } = options;
+
+    if (!rootDir || !packageJson) {
+        throw new Error("applyCommonConfig requires rootDir and packageJson");
+    }
+
+    const configurableAliases = getConfigurableComponentAliases({
+        env,
+        rootDir,
+        packageJson,
+        defaults
+    });
+
+    return {
+        rootDir,
+        packageJson,
+        aliases: configurableAliases
+    };
+}
+
+module.exports = {
+    merge,
+    applyCommonConfig
+};

package/empty-entry.js

@@ -0,0 +1 @@
+export { };

package/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "@bams-app/ui-dev-server",
+  "version": "0.0.1",
+  "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.2.0",
+    "vue-router": "^4.0.0"
+  },
+  "dependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@bams-app/api-model": "*",
+    "@bams-app/app-layout": "*",
+    "@bams-app/assets": "*",
+    "@bams-app/base": "*",
+    "@bams-app/components": "*",
+    "@bams-app/composition-api": "*",
+    "@bams-app/config": "*",
+    "@bams-app/configs": "*",
+    "@bams-app/data-dict": "*",
+    "@bams-app/global-data": "*",
+    "@bams-app/i18n": "*",
+    "@bams-app/login": "*",
+    "@bams-app/message": "*",
+    "@bams-app/message-voice": "*",
+    "@bams-app/permission": "*",
+    "@bams-app/router": "*",
+    "@bams-app/service": "*",
+    "@bams-app/store": "*",
+    "@bams-app/theme": "*",
+    "@bams-app/ui-business-table": "*",
+    "@bams-app/ui-db-table": "*",
+    "@bams-app/ui-header-component": "*",
+    "@bams-app/ui-login-bxjc-component": "*",
+    "@bams-app/ui-login-component": "*",
+    "@bams-app/ui-page-component-body": "*",
+    "@bams-app/ui-page-component-header": "*",
+    "@bams-app/ui-portal-component": "*",
+    "@bams-app/ui-startr-layout-component": "*",
+    "@bams-app/utils": "*",
+    "@bams-app/version-check": "*",
+    "@bams-app/websocket": "*",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "core-js": "^3.8.3",
+    "inquirer": "9",
+    "less": "^4.5.1",
+    "less-loader": "^7.3.0",
+    "raw-loader": "^4.0.2",
+    "sass": "^1.97.3",
+    "sass-loader": "^10.1.1"
+  },
+  "devDependencies": {
+    "ant-design-vue": "4.2.6",
+    "vue": "^3.2.13",
+    "vue-router": "4"
+  },
+  "files": [
+    "bin/",
+    "src/",
+    "public/",
+    "utils.js",
+    "config-utils.js",
+    "empty-entry.js",
+    "vue.config.js",
+    "vue.config.base.js",
+    "vue.config.dev.js",
+    "vue.config.build.js",
+    "vue.config.umd.js"
+  ],
+  "bin": {
+    "ui-dev-server": "./bin/ui-dev-server.js",
+    "build-app": "./bin/build-app.js",
+    "build-umd": "./bin/build-umd.js"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser",
+      "requireConfigFile": false
+    },
+    "rules": {
+      "no-unused-vars": "off",
+      "no-undef": "off"
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}

package/public/index.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title><%= process.env.VUE_APP_TITLE %></title>
+    <link rel="dx-theme" data-theme="material.blue.light" href="/bams-assets/devextreme/css/dx.material.blue.light.css" data-active="true" />
+    <link rel="dx-theme" data-theme="material.blue.dark" href="/bams-assets/devextreme/css/dx.material.blue.dark.css" data-active="false" />
+    <link rel="dx-theme" data-theme="material.lime.light" href="/bams-assets/devextreme/css/dx.material.lime.light.css" data-active="false" />
+    <link rel="dx-theme" data-theme="material.lime.dark" href="/bams-assets/devextreme/css/dx.material.lime.dark.css" data-active="false" />
+    <link rel="dx-theme" data-theme="material.orange.light" href="/bams-assets/devextreme/css/dx.material.orange.light.css" data-active="false" />
+    <link rel="dx-theme" data-theme="material.orange.dark" href="/bams-assets/devextreme/css/dx.material.orange.dark.css" data-active="false" />
+    <link rel="dx-theme" data-theme="material.purple.light" href="/bams-assets/devextreme/css/dx.material.purple.light.css" data-active="false" />
+    <link rel="dx-theme" data-theme="material.purple.dark" href="/bams-assets/devextreme/css/dx.material.purple.dark.css" data-active="false" />
+    <link rel="dx-theme" data-theme="material.teal.light" href="/bams-assets/devextreme/css/dx.material.teal.light.css" data-active="false" />
+    <link rel="dx-theme" data-theme="material.teal.dark" href="/bams-assets/devextreme/css/dx.material.teal.dark.css" data-active="false" />
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+
+    <% if (process.env.NODE_ENV === 'production') { %>
+    <script src="/bams-assets/vue3/dist/vue.global.prod.js"></script>
+    <script src="/bams-assets/vue-router3/dist/vue-router.global.prod.js"></script>
+    <script src="/bams-assets/pinia/dist/pinia.iife.prod.js"></script>
+    <% } else { %>
+    <script src="/bams-assets/vue3/dist/vue.global.js"></script>
+    <script src="/bams-assets/vue-router3/dist/vue-router.global.js"></script>
+    <script src="/bams-assets/pinia/dist/pinia.iife.prod.js"></script>
+    <% } %>
+    <script src="/bams-assets/axios/dist-1.13.2/axios.min.js"></script>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package/src/App.vue

@@ -0,0 +1,56 @@
+<template>
+  <a-config-provider :locale="antdLocale" :theme="antdThemeConfig">
+    <Layout class="app">
+      <Header
+        v-if="appStore.showHeader && route.path === '/'"
+        class="header-fixed"
+        style="padding: 0; height: 51px; box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.07); z-index: 1; margin-bottom: 0px"
+      >
+        <HeaderComponent :show-toggle-icon="false" />
+      </Header>
+      <Layout.Content class="content">
+        <router-view />
+      </Layout.Content>
+    </Layout>
+  </a-config-provider>
+</template>
+
+<script setup>
+  import { computed } from "vue";
+  import { useRoute } from "vue-router";
+  import { theme as antdTheme, Layout } from "ant-design-vue";
+  import { useI18nContext } from "@bams-app/i18n";
+  import { useAntdThemeConfig, useThemeStore } from "@bams-app/theme";
+  import { useAppStore } from "@bams-app/store";
+  // 编译阶段根据环境变量通过通用插槽别名选择组件
+  import HeaderComponent from "@configurable/header";
+  const { Header } = Layout;
+  const themeStore = useThemeStore();
+  const appStore = useAppStore();
+  const route = useRoute();
+  const i18n = useI18nContext();
+  const antdLocale = computed(() => i18n.antdLocale.value);
+
+  const antdThemeConfig = useAntdThemeConfig(themeStore, antdTheme);
+</script>
+
+<style scoped lang="scss">
+  .app {
+    min-height: 100vh;
+    height: 100vh;
+    background: var(--bams-page-bg);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .header-fixed {
+    flex-shrink: 0;
+    position: sticky;
+    top: 0;
+  }
+
+  .content {
+    flex: 1;
+    overflow: auto;
+  }
+</style>

package/src/main.js

@@ -0,0 +1,34 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import TargetComponent from "@target-component";
+
+import bamsBase from "@bams-app/base";
+import { setupExternalTheme } from './themeConfig';
+import { useLayout } from './useLayout';
+
+// 植入 window.ui 以支持动态路由加载
+const componentName = process.env.VUE_APP_COMPONENT_NAME;
+if (componentName) {
+    window.ui = window.ui || {};
+    window.ui[componentName] = () => Promise.resolve(TargetComponent);
+}
+
+async function initApp() {
+    // 外部主题注册示例（详见 themeConfig.js），必须在 base 初始化主题之前注册
+    setupExternalTheme();
+
+    const { WorkLayout } = await useLayout();
+
+    const app = createApp(App)
+
+    // 关闭Vue警告
+    app.config.warnHandler = () => { }
+    // 或者使用更严格的方式：
+    // app.config.silent = true
+    app.use(bamsBase, { router, WorkLayout })
+    // app.use(router)
+    app.$mount('#app')
+}
+
+initApp()

package/src/router/index.js

@@ -0,0 +1,30 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+import ConfigView from '../views/ConfigView.vue'
+import LoginView from '../views/LoginView.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'index1',
+    // redirect: '/bams/work/home',
+    component: HomeView
+  },
+  {
+    path: '/config',
+    name: 'config',
+    component: ConfigView
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: LoginView
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes
+})
+
+export default router

package/src/themeConfig.js

@@ -0,0 +1,32 @@
+import { registerThemeConfig } from "@bams-app/theme";
+
+/**
+ * 外部主题注册示例：注册自定义主题预设
+ * 必须在 base 初始化主题（themeStore.init / setupTheme）之前调用
+ */
+export function setupExternalTheme() {
+    registerThemeConfig({
+        presets: {
+            "custom.cyan": {
+                label: "定制青",
+                primary: "#006d75",
+            },
+            "custom.red": {
+                label: "定制红",
+                primary: "#c62828",
+            },
+            "custom.purple": {
+                label: "定制紫",
+                primary: "#4527a0",
+            },
+        },
+        modes: {
+            light: {
+                vars: {
+                    "--bams-page-bg": "#f3fafa",
+                },
+            },
+        },
+        defaultPreset: "custom.cyan",
+    });
+}

package/src/useLayout.js

@@ -0,0 +1,15 @@
+export async function useLayout() {
+    const layout = process.env.VUE_APP_LAYOUT || 'pc';
+
+    const layoutModules = {
+        pc: () => import('@configurable/startr-layout'),
+        touch: () => import('@bams-app/app-layout/src/layout-touch/index')
+    };
+
+    const loadLayout = layoutModules[layout] || layoutModules.pc;
+    const module = await loadLayout();
+
+    return {
+        WorkLayout: module.default
+    };
+}

package/src/views/ConfigView.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="dev-server-container">
+    <div class="left-panel">
+      <h2>组件调试面板</h2>
+      <!-- 这里可以添加参数控制和Mock配置 -->
+    </div>
+    <div class="right-panel">
+      <h2>组件渲染区</h2>
+      <TargetComponent />
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import TargetComponent from "@target-component";
+</script>
+
+<style>
+  .dev-server-container {
+    display: flex;
+    height: 100vh;
+  }
+
+  .left-panel {
+    width: 300px;
+    padding: 20px;
+    background: #f5f5f5;
+    border-right: 1px solid #ddd;
+  }
+
+  .right-panel {
+    flex: 1;
+    padding: 20px;
+    overflow: auto;
+  }
+</style>

package/src/views/HomeView.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="bams-height-full" style="padding: 16px 19px">
+    <TargetComponent />
+  </div>
+</template>
+
+<script setup>
+  import TargetComponent from "@target-component";
+</script>