@moluoxixi/create-app 2.0.413 → 2.0.415

package/templates/react/micro-frontends/qiankun/base/vite/index.ts

@@ -0,0 +1,53 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { mergeConfig } from 'vite'
+import type { UserConfig } from 'vite'
+import { createJiti } from 'jiti'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const _require = createJiti(import.meta.url, { interopDefault: true })
+
+/**
+ * Vite feature 配置上下文
+ */
+export interface ViteFeatureContext {
+  /** Vite 环境变量 */
+  viteEnv: Record<string, any>
+  /** 构建模式 */
+  mode: string
+  /** 应用代码 */
+  appCode: string
+}
+
+/**
+ * 加载所有 feature 的 Vite 配置
+ * @param ctx - feature 配置上下文
+ * @returns 合并后的 UserConfig
+ */
+export function loadFeatureConfigs(ctx: ViteFeatureContext): UserConfig {
+  const featuresDir = path.resolve(__dirname, 'features')
+
+  if (!fs.existsSync(featuresDir)) {
+    return {}
+  }
+
+  const featureFiles = fs.readdirSync(featuresDir).filter(f => f.endsWith('.ts'))
+  const configs: UserConfig[] = []
+
+  for (const file of featureFiles) {
+    try {
+      const filePath = path.resolve(featuresDir, file)
+      const mod = _require(filePath)
+      const config = mod.default(ctx)
+      if (config) {
+        configs.push(config)
+      }
+    }
+    catch (e) {
+      console.warn(`[Vite] Failed to load feature config: ${file}`, e)
+    }
+  }
+
+  return configs.reduce((acc, cfg) => mergeConfig(acc, cfg), {} as UserConfig)
+}

package/templates/react/micro-frontends/qiankun/base/vite.config.ts

@@ -0,0 +1,58 @@
+import path from 'node:path'
+import cssModuleGlobalRootPlugin from '@moluoxixi/css-module-global-root-plugin'
+import { ViteConfig, wrapperEnv } from '@moluoxixi/vite-config'
+import { loadEnv, mergeConfig } from 'vite'
+import process from 'node:process'
+import { loadFeatureConfigs } from './vite/index.ts'
+
+const config: ReturnType<typeof ViteConfig> = ViteConfig(({ mode }) => {
+  const env = loadEnv(mode!, process.cwd())
+  const viteEnv = wrapperEnv(env)
+  const rootPath = path.resolve()
+  const appCode = viteEnv.VITE_APP_CODE
+  const appTitle = viteEnv.VITE_APP_TITLE
+  const port = viteEnv.VITE_APP_PORT
+
+  // 加载所有 feature 配置
+  const featureConfig = loadFeatureConfigs({ viteEnv, mode: mode!, appCode })
+
+  return {
+    rootPath,
+    appTitle,
+    appCode,
+    port,
+    react: true,
+    pageRoutes: true,
+    viteConfig: mergeConfig(
+      {
+        server: {
+          proxy: {
+            '/api': {
+              changeOrigin: true,
+              target: 'http://localhost:3000',
+            },
+          },
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+          },
+        },
+        css: {
+          preprocessorOptions: {
+            scss: {
+              silenceDeprecations: ['legacy-js-api'],
+              api: 'modern-compiler',
+            },
+            postcss: {
+              plugins: [
+                cssModuleGlobalRootPlugin() as any,
+              ],
+            },
+          },
+        },
+      },
+      featureConfig,
+    ),
+  }
+})
+
+export default config

package/templates/vue/base/src/main/index.ts

@@ -0,0 +1,36 @@
+/**
+ * Feature 设置模块
+ * 使用 Vite 的 glob 导入自动发现并加载所有 feature 模块
+ */
+
+import type { App } from 'vue'
+import type { Router } from 'vue-router'
+
+/**
+ * Feature 模块接口
+ */
+interface FeatureModule {
+  /** 初始化 feature 的设置函数 */
+  setup?: (app: App, router: Router) => void | Promise<void>
+  /** 执行顺序（数字越小越先执行） */
+  order?: number
+}
+
+// 自动发现所有 feature 模块
+const featureModules = import.meta.glob('./features/*.ts', { eager: true })
+
+/**
+ * 设置所有 features
+ * @param app - Vue 应用实例
+ * @param router - Vue Router 实例
+ */
+export async function setupFeatures(app: App, router: Router): Promise<void> {
+  const modules = Object.values(featureModules) as FeatureModule[]
+
+  // 按顺序排序（默认 100）
+  modules.sort((a, b) => (a.order ?? 100) - (b.order ?? 100))
+
+  for (const mod of modules) {
+    await mod.setup?.(app, router)
+  }
+}

package/templates/vue/base/src/main.ts

@@ -0,0 +1,34 @@
+/**
+ * Application entry file - Standard mode
+ * Initialize Vue application and mount to DOM
+ */
+
+import { createApp } from 'vue'
+import directives from '@/directives'
+import App from './App.vue'
+import getRouter from './router'
+import { setupFeatures } from './main/index'
+
+// Import styles
+import '@/assets/styles/main.scss'
+import '@/assets/fonts/index.css'
+
+/**
+ * Initialize and render application
+ */
+async function initApp(): Promise<void> {
+  const app = createApp(App)
+  const router = getRouter()
+
+  directives(app)
+
+  // Setup all features (pinia, i18n, sentry, etc.)
+  await setupFeatures(app, router)
+
+  app.use(router)
+  app.config.warnHandler = () => null
+
+  app.mount('#app')
+}
+
+initApp()

package/templates/vue/base/tsconfig.app.json

@@ -20,6 +20,7 @@
     "dist",
     "node_modules",
     "cypress",
-    "vite.config.ts"
+    "vite",
+    "vite.config.*"
   ]
 }

package/templates/vue/base/tsconfig.node.json

@@ -9,6 +9,7 @@
     "composite": true
   },
   "include": [
-    "vite.config.ts"
+    "vite",
+    "vite.config.*"
   ]
 }

package/templates/vue/features/ant-design-vue/package.json

@@ -1,6 +1,8 @@
 {
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
-    "ant-design-vue": "^4.2.1"
+    "ant-design-vue": "^4.2.1",
+    "vue": "^3.5.13",
+    "vue-router": "^4.4.5"
   }
 }

package/templates/vue/features/ant-design-vue/src/main/features/ant-design-vue.ts

@@ -0,0 +1,18 @@
+/**
+ * Ant Design Vue UI 组件库 feature 设置
+ */
+
+import type { App } from 'vue'
+import type { Router } from 'vue-router'
+
+/** 执行顺序 - 样式应该尽早加载 */
+export const order = 5
+
+/**
+ * 设置 Ant Design Vue
+ * @param _app - Vue 应用实例（未使用，自动导入）
+ * @param _router - Vue Router 实例（未使用）
+ */
+export function setup(_app: App, _router: Router): void {
+  // Ant Design Vue 通过 unplugin-vue-components 自动导入
+}

package/templates/vue/features/element-plus/package.json

@@ -1,6 +1,10 @@
 {
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
-    "element-plus": "^2.11.3"
+    "element-plus": "^2.11.3",
+    "pinia": "^2.2.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "vue": "^3.5.13",
+    "vue-router": "^4.4.5"
   }
 }

package/templates/vue/features/element-plus/src/main/features/element-plus.ts

@@ -0,0 +1,23 @@
+/**
+ * Element Plus UI 组件库 feature 设置
+ * 导入 Element Plus 样式
+ */
+
+import type { App } from 'vue'
+import type { Router } from 'vue-router'
+
+// 导入 Element Plus 样式
+import '@/assets/styles/element/index.scss'
+
+/** 执行顺序 - 样式应该尽早加载 */
+export const order = 5
+
+/**
+ * 设置 Element Plus
+ * @param _app - Vue 应用实例（未使用，样式已导入）
+ * @param _router - Vue Router 实例（未使用）
+ */
+export function setup(_app: App, _router: Router): void {
+  // Element Plus 通过 unplugin-vue-components 自动导入
+  // 只需要导入样式
+}

package/templates/vue/features/element-plus/src/stores/index.ts

@@ -0,0 +1,6 @@
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+const store = createPinia()
+store.use(piniaPluginPersistedstate)
+export { store }

package/templates/vue/features/element-plus/src/stores/modules/system.ts

@@ -0,0 +1,51 @@
+import { defineStore } from 'pinia'
+import { store } from '../index.ts'
+
+/**
+ * 系统对象
+ * @returns {object} 系统存储对象
+ */
+const systemStore = defineStore('system', {
+  state: () => ({
+    /**
+     * 主题颜色
+     * @type {string}
+     */
+    themeColor: '#3a77ff',
+    /**
+     * 布局
+     * @type {string}
+     */
+    layout: 'element',
+    /**
+     * 系统编码
+     * @type {string}
+     */
+    systemCode: import.meta.env.VITE_APP_CODE || '',
+  }),
+  actions: {
+    setSystemCode(systemCode: string) {
+      // 将当前的主题颜色设置为传入的颜色
+      this.systemCode = systemCode
+    },
+    /**
+     * 设置布局
+     * @param {string} layout - 新的布局
+     */
+    setLayout(layout: string) {
+      this.layout = layout
+    },
+    /**
+     * 设置主题颜色
+     * @param {string} color - 新的主题颜色
+     */
+    setTheme(color: string) {
+      // 将当前的主题颜色设置为传入的颜色
+      this.themeColor = color
+    },
+  },
+})
+
+export function useSystemStore() {
+  return systemStore(store)
+}

package/templates/vue/features/element-plus/vite/features/element-plus.ts

@@ -0,0 +1,35 @@
+/**
+ * Element Plus Vite 配置
+ * 为 Element Plus 添加 SCSS 命名空间配置
+ */
+
+/**
+ * Vite feature 配置上下文
+ */
+interface ViteFeatureContext {
+  viteEnv: Record<string, any>
+  mode: string
+  appCode: string
+}
+
+/**
+ * 获取 Element Plus Vite 配置
+ * @param ctx - feature 配置上下文
+ * @param ctx.appCode - 应用代码，用于 SCSS 命名空间
+ * @returns Vite UserConfig
+ */
+export default ({ appCode }: ViteFeatureContext) => ({
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: (source: string, filename: string) => {
+          if (filename.includes('assets/styles/element/index.scss')) {
+            return `$namespace: ${appCode || 'el'};
+            ${source}`
+          }
+          return source
+        },
+      },
+    },
+  },
+})

package/templates/vue/features/i18n/package.json

@@ -1,5 +1,7 @@
 {
   "dependencies": {
-    "vue-i18n": "^11.1.10"
+    "vue": "^3.5.13",
+    "vue-i18n": "^11.1.10",
+    "vue-router": "^4.4.5"
   }
 }

package/templates/vue/features/i18n/src/main/features/i18n.ts

@@ -0,0 +1,19 @@
+/**
+ * I18n 国际化 feature 设置
+ */
+
+import type { App } from 'vue'
+import type { Router } from 'vue-router'
+import i18n from '@/locales'
+
+/** 执行顺序 */
+export const order = 20
+
+/**
+ * 设置 i18n
+ * @param app - Vue 应用实例
+ * @param _router - Vue Router 实例（未使用）
+ */
+export function setup(app: App, _router: Router): void {
+  app.use(i18n)
+}

package/templates/vue/features/manualRoutes/package.json

@@ -1,6 +1,12 @@
 {
   "dependencies": {
-    "radash": "^12.1.0",
+    "lodash-es": "^4.17.21",
+    "pinia": "^2.2.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "vue": "^3.5.13",
     "vue-router": "^4.4.5"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12"
   }
 }

package/templates/vue/features/manualRoutes/src/layouts/index.ts

@@ -0,0 +1,26 @@
+/**
+ * 布局组件导出
+ * 注意：具体的布局组件在对应的 UI 库 feature 中
+ */
+import type { App, Component } from 'vue'
+
+const layoutFiles = import.meta.glob('./*.vue', { eager: true, import: 'default' })
+const layouts = Object.keys(layoutFiles).reduce((modules, modulePath) => {
+  const nameArr: string[] = modulePath.split('/')
+  const name: string | undefined
+    = nameArr.at(-1) === 'index.vue' ? nameArr.at(-2) : nameArr.at(-1)?.slice(0, -4)
+  const layout: Component = layoutFiles[modulePath] as Component
+  if (!layout)
+    return modules
+  if (name) {
+    modules[name!] = layout as Component
+  }
+  return modules
+}, {} as any)
+layouts.install = function (app: App) {
+  const layoutNames = Object.keys(layouts)
+  layoutNames.forEach((name) => {
+    app.component(name, layouts[name!])
+  })
+}
+export default layouts

package/templates/vue/features/manualRoutes/src/stores/index.ts

@@ -0,0 +1,6 @@
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+const store = createPinia()
+store.use(piniaPluginPersistedstate)
+export { store }

package/templates/vue/features/manualRoutes/src/stores/modules/system.ts

@@ -0,0 +1,51 @@
+import { defineStore } from 'pinia'
+import { store } from '../index.ts'
+
+/**
+ * 系统对象
+ * @returns {object} 系统存储对象
+ */
+const systemStore = defineStore('system', {
+  state: () => ({
+    /**
+     * 主题颜色
+     * @type {string}
+     */
+    themeColor: '#3a77ff',
+    /**
+     * 布局
+     * @type {string}
+     */
+    layout: 'element',
+    /**
+     * 系统编码
+     * @type {string}
+     */
+    systemCode: import.meta.env.VITE_APP_CODE || '',
+  }),
+  actions: {
+    setSystemCode(systemCode: string) {
+      // 将当前的主题颜色设置为传入的颜色
+      this.systemCode = systemCode
+    },
+    /**
+     * 设置布局
+     * @param {string} layout - 新的布局
+     */
+    setLayout(layout: string) {
+      this.layout = layout
+    },
+    /**
+     * 设置主题颜色
+     * @param {string} color - 新的主题颜色
+     */
+    setTheme(color: string) {
+      // 将当前的主题颜色设置为传入的颜色
+      this.themeColor = color
+    },
+  },
+})
+
+export function useSystemStore() {
+  return systemStore(store)
+}

package/templates/vue/features/pageRoutes/package.json

@@ -1,6 +1,12 @@
 {
   "dependencies": {
-    "radash": "^12.1.0",
+    "lodash-es": "^4.17.21",
+    "pinia": "^2.2.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "vue": "^3.5.13",
     "vue-router": "^4.4.5"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12"
   }
 }

package/templates/vue/features/pageRoutes/src/layouts/index.ts

@@ -0,0 +1,26 @@
+/**
+ * 布局组件导出
+ * 注意：具体的布局组件在对应的 UI 库 feature 中
+ */
+import type { App, Component } from 'vue'
+
+const layoutFiles = import.meta.glob('./*.vue', { eager: true, import: 'default' })
+const layouts = Object.keys(layoutFiles).reduce((modules, modulePath) => {
+  const nameArr: string[] = modulePath.split('/')
+  const name: string | undefined
+    = nameArr.at(-1) === 'index.vue' ? nameArr.at(-2) : nameArr.at(-1)?.slice(0, -4)
+  const layout: Component = layoutFiles[modulePath] as Component
+  if (!layout)
+    return modules
+  if (name) {
+    modules[name!] = layout as Component
+  }
+  return modules
+}, {} as any)
+layouts.install = function (app: App) {
+  const layoutNames = Object.keys(layouts)
+  layoutNames.forEach((name) => {
+    app.component(name, layouts[name!])
+  })
+}
+export default layouts

package/templates/vue/features/pageRoutes/src/stores/index.ts

@@ -0,0 +1,6 @@
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+const store = createPinia()
+store.use(piniaPluginPersistedstate)
+export { store }

package/templates/vue/features/pageRoutes/src/stores/modules/system.ts

@@ -0,0 +1,51 @@
+import { defineStore } from 'pinia'
+import { store } from '../index.ts'
+
+/**
+ * 系统对象
+ * @returns {object} 系统存储对象
+ */
+const systemStore = defineStore('system', {
+  state: () => ({
+    /**
+     * 主题颜色
+     * @type {string}
+     */
+    themeColor: '#3a77ff',
+    /**
+     * 布局
+     * @type {string}
+     */
+    layout: 'element',
+    /**
+     * 系统编码
+     * @type {string}
+     */
+    systemCode: import.meta.env.VITE_APP_CODE || '',
+  }),
+  actions: {
+    setSystemCode(systemCode: string) {
+      // 将当前的主题颜色设置为传入的颜色
+      this.systemCode = systemCode
+    },
+    /**
+     * 设置布局
+     * @param {string} layout - 新的布局
+     */
+    setLayout(layout: string) {
+      this.layout = layout
+    },
+    /**
+     * 设置主题颜色
+     * @param {string} color - 新的主题颜色
+     */
+    setTheme(color: string) {
+      // 将当前的主题颜色设置为传入的颜色
+      this.themeColor = color
+    },
+  },
+})
+
+export function useSystemStore() {
+  return systemStore(store)
+}

package/templates/vue/features/pinia/package.json

@@ -1,6 +1,8 @@
 {
   "dependencies": {
     "pinia": "^2.2.7",
-    "pinia-plugin-persistedstate": "^3.2.1"
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "vue": "^3.5.13",
+    "vue-router": "^4.4.5"
   }
 }

package/templates/vue/features/pinia/src/main/features/pinia.ts

@@ -0,0 +1,19 @@
+/**
+ * Pinia 状态管理 feature 设置
+ */
+
+import type { App } from 'vue'
+import type { Router } from 'vue-router'
+import { store } from '@/stores'
+
+/** 执行顺序 - pinia 应该尽早加载 */
+export const order = 10
+
+/**
+ * 设置 Pinia store
+ * @param app - Vue 应用实例
+ * @param _router - Vue Router 实例（未使用）
+ */
+export function setup(app: App, _router: Router): void {
+  app.use(store)
+}

package/templates/vue/features/sentry/package.json

@@ -1,8 +1,10 @@
 {
   "dependencies": {
-    "@sentry/vue": "^9.27.0",
     "@sentry/vite-plugin": "^3.5.0",
+    "@sentry/vue": "^9.27.0",
     "pinia": "^2.2.7",
-    "pinia-plugin-persistedstate": "^3.2.1"
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "vue": "^3.5.13",
+    "vue-router": "^4.4.5"
   }
 }

package/templates/vue/features/sentry/src/main/features/sentry.ts

@@ -0,0 +1,22 @@
+/**
+ * Sentry 错误监控 feature 设置
+ */
+
+import type { App } from 'vue'
+import type { Router } from 'vue-router'
+import { initSentry } from '@/utils/sentry'
+
+/** 执行顺序 - sentry 应该在 router 之后初始化 */
+export const order = 30
+
+/**
+ * 设置 Sentry
+ * @param app - Vue 应用实例
+ * @param router - Vue Router 实例
+ */
+export function setup(app: App, router: Router): void {
+  initSentry(app, router, {
+    dsn: import.meta.env.VITE_SENTRY_DSN,
+    environment: import.meta.env.MODE,
+  })
+}