softleader-nuxt-core 1.2.0 → 2.0.0

package/bin/init.mjs

@@ -88,8 +88,8 @@ const writeFile = (filePath, content, overwrite = true) => {
 // --- Main Execution ---
 
 if (isInit) {
-  if (fs.existsSync(targetDir)) {
-    log.error(`錯誤: 目錄 "${targetPath}" 已經存在。初始化必須使用新目錄。`)
+  if (fs.existsSync(targetDir) && fs.existsSync(path.join(targetDir, 'package.json'))) {
+    log.error(`錯誤: 目錄 "${targetPath}" 已經存在且包含 package.json。初始化失敗。`)
     process.exit(1)
   }
   log.step('Initializing New Project...')
@@ -150,23 +150,8 @@ writeFile('app.vue', appVue, false)
 
 // 4. 首頁 (Init 模式才產生)
 if (isInit) {
-  const indexVue = `<script setup lang="ts">
-const { formatDateTime } = useDateTime()
-const notify = useNotify()
-const now = ref(formatDateTime(new Date()))
-const handleClick = () => notify.success('連動成功！')
-</script>
-
-<template>
-  <div class="pa-10">
-    <IAlert type="info" title="專案已就緒" text="這是繼承自 softleader-nuxt-core 的新專案。" class="mb-6" />
-    <ICard title="功能示範">
-      <div class="d-flex align-center gap-4">
-        <div>時間: {{ now }}</div>
-        <IButton variant="primary" @click="handleClick">測試通知</IButton>
-      </div>
-    </ICard>
-  </div>
+  const indexVue = `<template>
+  <Welcome />
 </template>
 `
   writeFile('pages/index.vue', indexVue, false)
@@ -180,15 +165,19 @@ const useAppInfoTs = `export const useAppInfo = () => {
 `
 writeFile('composables/useAppInfo.ts', useAppInfoTs, false)
 
-const exampleRepoTs = `export const exampleRepository = () => {
-  const api = useApi()
-  return {
-    getUsers: () => api.get('/users'),
-    createUser: (data: any) => api.post('/users', data)
-  }
+const exampleRepoTs = `/**
+ * 示範：Repository 模式與 useApi 的整合
+ */
+const exampleRepository = {
+  /** 獲取使用者列表 */
+  getUsers: () => useApi().get('/users'),
+  /** 建立使用者 */
+  createUser: (data: any) => useApi().post('/users', data)
 }
+
+export default exampleRepository
 `
-writeFile('repositories/exampleRepository.ts', exampleRepoTs, false)
+writeFile('repositories/exampleRepository.ts', exampleRepoTs, true)
 
 // 6. Config Blueprint
 const defaultConfig = `{
@@ -211,7 +200,40 @@ if (fs.existsSync(schemaPath)) {
   log.info('  [更新] Config Schema 指引')
 }
 
-// 8. README (僅在 Init 或檔案不存在時產生)
+// 8. package.json (僅在 Init 或檔案不存在時產生)
+if (isInit) {
+  // 讀取當前 core 的版本
+  let coreVersion = 'latest'
+  try {
+    const corePkg = JSON.parse(fs.readFileSync(path.resolve(__dirname, '../package.json'), 'utf-8'))
+    coreVersion = corePkg.version
+  } catch (e) {}
+
+  const packageJson = {
+    name: packageName,
+    private: true,
+    type: 'module',
+    scripts: {
+      dev: 'nuxt dev',
+      build: 'nuxt build',
+      generate: 'nuxt generate',
+      preview: 'nuxt preview',
+      postinstall: 'nuxt prepare',
+      typecheck: 'nuxi typecheck'
+    },
+    dependencies: {
+      'softleader-nuxt-core': `^${coreVersion}`,
+      'nuxt': '^3.15.4'
+    },
+    devDependencies: {
+      'vue-tsc': '^2.0.0',
+      'typescript': '^5.0.0'
+    }
+  }
+  writeFile('package.json', JSON.stringify(packageJson, null, 2), false)
+}
+
+// 9. README (僅在 Init 或檔案不存在時產生)
 const readmeMd = `# ${projectName}\n\n基於 \`softleader-nuxt-core\` 核心架構。\n\n## 🚀 快速開始\n1. \`npm install\`\n2. \`npm run dev\`\n`
 writeFile('README.md', readmeMd, false)
 

package/components/templates/Welcome.vue

@@ -163,10 +163,17 @@ import { computed } from 'vue'
 import IIcon from '../uiInterface/IIcon.vue'
 import IButton from '../uiInterface/IButton.vue'
 
-const runtimeConfig = useRuntimeConfig()
-const productConfig = runtimeConfig.public.app.productConfig as any
+const appConfig = useAppConfig()
+const productConfig = appConfig.core as any
 
 const projectName = computed(() => productConfig?.meta?.title || 'Softleader Project')
+
+// 診斷日誌
+onMounted(() => {
+  console.log('🎨 Welcome Page mounted with productConfig:', productConfig)
+  console.log('🖌️ Current Primary Color:', productConfig?.theme?.primaryColor)
+})
+
 const handleStart = () => {
   window.scrollTo({ top: window.innerHeight, behavior: 'smooth' })
 }
@@ -219,7 +226,8 @@ const handleStart = () => {
   right: -5%;
   width: 50vw;
   height: 50vw;
-  background: rgba(59, 130, 246, 0.1);
+  background: var(--color-primary, rgba(59, 130, 246, 0.1));
+  opacity: 0.1;
 }
 .glow-2 {
   bottom: -10%;
@@ -274,7 +282,7 @@ const handleStart = () => {
 }
 
 .gradient-text {
-  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
+  background: linear-gradient(135deg, var(--color-primary, #2563eb) 0%, #7c3aed 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -336,7 +344,7 @@ const handleStart = () => {
 }
 
 .prime-cta {
-  background: #2563eb !important;
+  background: var(--color-primary, #2563eb) !important;
   color: white !important;
   width: fit-content !important;
   height: 68px !important;
@@ -344,13 +352,13 @@ const handleStart = () => {
   border-radius: 1.25rem !important;
   font-weight: 900 !important;
   font-size: 1.25rem !important;
-  box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.4) !important;
+  box-shadow: 0 25px 50px -12px var(--color-primary-alpha, rgba(37, 99, 235, 0.4)) !important;
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
 }
 
 .prime-cta:hover {
   transform: translateY(-4px) scale(1.04) !important;
-  box-shadow: 0 35px 60px -15px rgba(37, 99, 235, 0.5) !important;
+  box-shadow: 0 35px 60px -15px var(--color-primary-alpha, rgba(37, 99, 235, 0.5)) !important;
 }
 .prime-cta:active {
   transform: scale(0.96) !important;
@@ -485,7 +493,7 @@ const handleStart = () => {
   position: absolute;
   width: 100%;
   height: 2px;
-  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.5), transparent);
+  background: linear-gradient(90deg, transparent, var(--color-primary-alpha, rgba(37, 99, 235, 0.5)), transparent);
   top: 0;
   animation: scan 3s linear infinite;
   z-index: 20;

package/components/uiInterface/IButton.vue

@@ -189,8 +189,8 @@ const buttonClasses = computed(() => {
   // Design System: Primary Button Gradients & Shadows
   if (props.variant === 'primary' && !props.disabled && !props.loading && !props.color) {
     classes.push(
-      'bg-gradient-to-r from-indigo-600 to-violet-600 text-white',
-      'hover:shadow-[0_10px_25px_-5px_rgba(79,70,229,0.4)]', // Enhanced Colored Shadow
+      'bg-[var(--color-primary,#4f46e5)] text-white',
+      'hover:shadow-[0_10px_25px_-5px_var(--color-primary-alpha,rgba(79,70,229,0.4))]', // Enhanced Colored Shadow
       'hover:-translate-y-0.5', // Lift effect
       'transition-all duration-200 ease-out'
     )

package/composables/useFeatureFlag.ts

@@ -28,8 +28,11 @@ type FeaturePath =
  * @returns 功能是否啟用
  */
 function getFeatureValue(config: FeatureConfig): boolean {
+  // 安全檢查：確保是在 Node 環境或有 process polyfill
+  const hasProcess = typeof process !== 'undefined' && process.env
+
   // 優先使用環境變數
-  if (config.envKey) {
+  if (config.envKey && hasProcess) {
     const envValue = process.env[config.envKey]
     if (envValue !== undefined) {
       return envValue === 'true' || envValue === '1'
@@ -38,7 +41,7 @@ function getFeatureValue(config: FeatureConfig): boolean {
 
   // 檢查環境限制
   if (config.environments && config.environments.length > 0) {
-    const currentEnv = process.env.NODE_ENV || 'development'
+    const currentEnv = (hasProcess ? process.env.NODE_ENV : 'development') || 'development'
     const isAllEnvironments = config.environments.includes('all')
     const isCurrentEnvironment = config.environments.includes(
       currentEnv as 'development' | 'staging' | 'production'

package/core/config/theme-tokens.ts

@@ -1,7 +1,5 @@
 import { productConfig } from '../../scripts/product-loader'
 
-import { productConfig } from '../../scripts/product-loader'
-
 /**
  * 全域主題設計變數 (Design Tokens)
  * 供 Vuetify、Tailwind 或其他 UI 框架共用的基礎變數

package/layouts/default.vue

@@ -1,43 +1,43 @@
 <template>
   <div class="layout-default">
     <!-- Header: 頂部導覽列 -->
-    <header v-if="layout.header.visible" class="header" :style="{ height: `${layout.header.height}px` }">
+    <header v-if="layout?.header?.visible" class="header" :style="{ height: `${layout?.header?.height || 64}px` }">
       <div class="container d-flex align-center justify-space-between h-100">
         <div class="branding d-flex align-center gap-2">
-          <IIcon v-if="layout.branding.logo.icon && !layout.branding.logo.image" :name="layout.branding.logo.icon" size="28" color="primary" />
-          <img v-if="layout.branding.logo.image" :src="layout.branding.logo.image" class="logo-img" alt="logo" />
+          <IIcon v-if="layout?.branding?.logo?.icon && !layout?.branding?.logo?.image" :name="layout.branding.logo.icon" size="28" color="primary" />
+          <img v-if="layout?.branding?.logo?.image" :src="layout.branding.logo.image" class="logo-img" alt="logo" />
           <div class="branding-text">
-            <h1 class="logo-title">{{ layout.branding.title }}</h1>
-            <p v-if="layout.branding.subtitle" class="logo-subtitle">{{ layout.branding.subtitle }}</p>
+            <h1 class="logo-title">{{ layout?.branding?.title }}</h1>
+            <p v-if="layout?.branding?.subtitle" class="logo-subtitle">{{ layout.branding.subtitle }}</p>
           </div>
         </div>
 
         <div class="actions d-flex align-center gap-4">
           <!-- 搜尋框 -->
-          <div v-if="layout.header.search" class="search-bar">
-            <input type="text" :placeholder="layout.header.searchPlaceholder" />
+          <div v-if="layout?.header?.search" class="search-bar">
+            <input type="text" :placeholder="layout?.header?.searchPlaceholder" />
           </div>
 
           <slot name="header-actions" />
 
           <!-- 使用者選單按鈕 (示意) -->
-          <div v-if="layout.header.userMenu.visible" class="user-action">
+          <div v-if="layout?.header?.userMenu?.visible" class="user-action">
             <IIcon name="mdi-account-circle" size="32" class="cursor-pointer" />
           </div>
         </div>
       </div>
     </header>
 
-    <main class="main" :class="{ 'has-header': layout.header.visible }">
+    <main class="main" :class="{ 'has-header': layout?.header?.visible }">
       <div class="container py-10">
         <slot />
       </div>
     </main>
 
     <!-- Footer: 頁尾 -->
-    <footer v-if="layout.footer.visible" class="footer">
+    <footer v-if="layout?.footer?.visible" class="footer">
       <div class="container">
-        <div class="footer-content" v-html="layout.footer.content"></div>
+        <div class="footer-content" v-html="layout?.footer?.content"></div>
       </div>
     </footer>
   </div>
@@ -57,24 +57,25 @@ const layout = computed(() => core.layout)
 useHead({
   style: [
     {
-      innerHTML: `
+      innerHTML: computed(() => `
         :root {
           /* 基礎語意色彩 */
-          --color-primary: ${themeConfig.colors.primary};
-          --color-success: ${themeConfig.colors.success};
-          --color-warning: ${themeConfig.colors.warning};
-          --color-error: ${themeConfig.colors.error};
-          --color-info: ${themeConfig.colors.info};
+          --color-primary: ${layout.value?.theme?.primaryColor || core.theme?.primaryColor || themeConfig.colors.primary};
+          --color-primary-alpha: ${layout.value?.theme?.primaryColor || core.theme?.primaryColor || themeConfig.colors.primary}40;
+          --color-success: ${core.theme?.successColor || themeConfig.colors.success};
+          --color-warning: ${core.theme?.warningColor || themeConfig.colors.warning};
+          --color-error: ${core.theme?.errorColor || themeConfig.colors.error};
+          --color-info: ${core.theme?.infoColor || themeConfig.colors.info};
           
           /* 覆寫 main.css 中的特定變數以達成 100% 連動 */
-          --color-primary-600: ${themeConfig.colors.primary};
-          --color-primary-500: ${themeConfig.colors.primary}e6; /* 加入透明度模擬 */
+          --color-primary-600: ${layout.value?.theme?.primaryColor || core.theme?.primaryColor || themeConfig.colors.primary};
+          --color-primary-500: ${layout.value?.theme?.primaryColor || core.theme?.primaryColor || themeConfig.colors.primary}e6; /* 加入透明度模擬 */
           
           /* 基礎圓角 */
-          --radius-md: ${themeConfig.shape.borderRadius}px;
-          --radius-lg: ${themeConfig.shape.borderRadius + 4}px;
+          --radius-md: ${core.theme?.borderRadius || themeConfig.shape.borderRadius}px;
+          --radius-lg: ${(core.theme?.borderRadius || themeConfig.shape.borderRadius) + 4}px;
         }
-      `
+      `)
     }
   ]
 })

package/nuxt.config.ts

@@ -23,6 +23,22 @@ const { resolve } = createResolver(import.meta.url)
 export default defineNuxtConfig({
   ssr: false,
 
+  // Server-side Log
+  hooks: {
+    ready: () => {
+      console.log('🚀 Nuxt Core started with product:', productConfig.meta?.title, 'Color:', productConfig.theme?.primaryColor)
+    }
+  },
+
+  /** 支援配置驅動：監控 JSON 變動並自動重啟伺服器 (即改即變) */
+  watch: [
+    'configs/*.json',
+    'configs/**/*.json',
+    // 使用絕對路徑確保在不同 CWD 下都能監控到目前專案的 configs
+    `${process.cwd()}/configs/*.json`,
+    `${process.cwd()}/configs/**/*.json`
+  ],
+
   compatibilityDate: '2024-04-03',
 
   /** 編譯與打包設定 */
@@ -61,7 +77,8 @@ export default defineNuxtConfig({
       app: {
         ...projectRuntimeConfig.public.app,
         uaIdentifier:
-          projectRuntimeConfig.public.app.uaIdentifier || productConfig.branding?.uaIdentifier
+          projectRuntimeConfig.public.app.uaIdentifier || productConfig.branding?.uaIdentifier,
+        productConfig
       },
       // 將 JSON 裡的網路設定同步到 runtimeConfig (環境變數優先)
       api: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "softleader-nuxt-core",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "Nuxt 3 Core Layer - 可重用的基礎架構",
   "type": "module",
   "files": [
@@ -53,7 +53,7 @@
     "typecheck": "nuxi typecheck",
     "sync-configs": "node scripts/sync-configs.mjs",
     "release": "node scripts/release.mjs",
-    "test:init": "npm pack && node bin/init.mjs init tmp-test-project && rm *.tgz"
+    "test:init": "npm pack && node bin/init.mjs init ${1:-tmp-test-project} && rm *.tgz"
   },
   "dependencies": {
     "@nuxt/eslint-config": "^0.5.7",

package/scripts/product-loader.ts

@@ -121,34 +121,107 @@ export interface ProductConfig {
  * @param rootDir 專案根目錄 (預設抓目前位置)
  * @returns 讀到的設定內容
  */
-export function getProductConfig(rootDir: string = process.cwd()): ProductConfig {
+export function getProductConfig(rootDir?: string): ProductConfig {
+  // 核心預設結構，確保不會噴 undefined 錯誤 (visible, enabled 等)
+  let config: ProductConfig = {
+    branding: {},
+    meta: {},
+    layout: {
+      header: { visible: true },
+      footer: { visible: true },
+      sidebar: { visible: true }
+    },
+    theme: {},
+    network: {},
+    features: {},
+    auth: {},
+    modules: {}
+  }
+
+  // 如果是在瀏覽器環境，直接回傳預設結構 (瀏覽器應該透過 useAppConfig 取得)
+  if (typeof process === 'undefined' || !process.cwd) {
+    return config
+  }
+
+  // 診斷日誌：寫入檔案以便查閱 (因為看見不到終端機)
+  const debugLog = (msg: string) => {
+    try {
+      fs.appendFileSync('c:\\Users\\gino.huang\\Desktop\\nuxt-layer-core-playground\\product-loader-debug.log', `[${new Date().toISOString()}] ${msg}\n`)
+    } catch (e) {}
+    console.log(msg)
+  }
+  debugLog(`>>> getProductConfig start. CWD: ${process.cwd()}, ENV: Ref=${process.env.npm_package_name}`)
+
   // 1. 決定要讀哪個設定檔
-  // 可以在 package.json 裡面用 cross-env PRODUCT_CONFIG=xxx 來指定
   const productConfigName = process.env.PRODUCT_CONFIG || 'default'
 
-  // 2. 算出檔案在哪裡
-  const configPath = path.resolve(rootDir, 'configs', `${productConfigName}.json`)
+  // 2. 智慧路徑搜尋：找出最近的 configs/ 資料夾
+  // 我們會檢查：
+  // A. 目前執行目錄 (CWD) 下的 configs/
+  // B. 往上找 5 層 (適用於從根目錄跑 workspace 指令的情況)
+  let currentSearchDir = process.cwd()
+  let configPath = ''
+
+  console.log(`[Config Debug] CWD: ${currentSearchDir}`)
+
+  for (let i = 0; i < 5; i++) {
+    const targetPath = path.resolve(currentSearchDir, 'configs', `${productConfigName}.json`)
+    debugLog(`[Config Path Check ${i}] ${targetPath}`)
+    
+    if (fs.existsSync(targetPath)) {
+      configPath = targetPath
+      break
+    }
+
+    // 額外支援：如果在根目錄跑，嘗試找 apps/${npm_package_name}/configs
+    if (i === 0) {
+      const activePackage = process.env.npm_package_name
+      const appsDir = path.resolve(currentSearchDir, 'apps')
+      debugLog(`[Config Context Check] Package: ${activePackage}, appsDir: ${appsDir}`)
+      
+      if (activePackage && fs.existsSync(path.resolve(appsDir, activePackage))) {
+        const appConfigPath = path.resolve(appsDir, activePackage, 'configs', `${productConfigName}.json`)
+        debugLog(`[Config Workspace Check] ${appConfigPath}`)
+        if (fs.existsSync(appConfigPath)) {
+          configPath = appConfigPath
+          break
+        }
+      }
 
-  // 預設給一個空的，免得找不到檔案時出錯
-  let config: ProductConfig = { modules: {} }
+      if (!configPath && fs.existsSync(appsDir)) {
+        const apps = fs.readdirSync(appsDir)
+        for (const app of apps) {
+          const appConfigPath = path.resolve(appsDir, app, 'configs', `${productConfigName}.json`)
+          if (fs.existsSync(appConfigPath)) {
+             configPath = appConfigPath
+             break 
+          }
+        }
+      }
+    }
+    
+    if (configPath) break
+
+    const nextDir = path.dirname(currentSearchDir)
+    if (nextDir === currentSearchDir) break
+    currentSearchDir = nextDir
+  }
 
-  // 3. 真的去讀檔案
-  if (fs.existsSync(configPath)) {
+  if (configPath) {
+    debugLog(`[Config Success] 最終確認讀取路徑: ${configPath}`)
     try {
       const fileContents = fs.readFileSync(configPath, 'utf8')
       const loaded = JSON.parse(fileContents)
 
-      // 有讀到東西就合併進去
       if (loaded) {
         config = { ...config, ...loaded }
+        debugLog(`[Config Success] 載入內容: title=${config.meta?.title}, color=${config.theme?.primaryColor}`)
       }
-      console.log(`[Config] 成功載入設定: ${productConfigName}`)
     } catch (e) {
-      console.error(`[Config] 讀取設定失敗 ${configPath}:`, e)
+      debugLog(`[Config Error] 讀取 JSON 失敗 ${configPath}: ${e}`)
     }
   } else {
-    // 找不到檔案，提醒一下
-    console.warn(`[Config] 找不到設定檔: ${configPath}，將不載入任何模組。`)
+    debugLog(`[Config Warning] 在任何路徑中都找不到 ${productConfigName}.json`)
   }
 
   return config

package/stores/app.ts

@@ -2,8 +2,31 @@ import { defineStore } from 'pinia'
 import { defaultLayoutConfig, type LayoutConfig } from '../core/config/layout'
 
 export const useAppStore = defineStore('app', () => {
-  // 狀態
-  const config = ref<LayoutConfig>({ ...defaultLayoutConfig })
+  const appConfig = useAppConfig()
+  const coreConfig = appConfig.core as any
+
+  // 狀態：從 appConfig.core 獲取初始值，若無則回退到 defaultLayoutConfig
+  const config = ref<LayoutConfig>({ 
+    ...defaultLayoutConfig,
+    ...(coreConfig?.layout || {}),
+    // 深度處理特定區塊
+    theme: {
+      ...defaultLayoutConfig.theme,
+      ...(coreConfig?.theme || {})
+    },
+    header: {
+      ...defaultLayoutConfig.header,
+      ...(coreConfig?.layout?.header || {})
+    },
+    footer: {
+      ...defaultLayoutConfig.footer,
+      ...(coreConfig?.layout?.footer || {})
+    },
+    sidebar: {
+      ...defaultLayoutConfig.sidebar,
+      ...(coreConfig?.layout?.sidebar || {})
+    }
+  })
   const drawer = ref(true)
   const loading = ref(false)