create-comate-pagebuilder 1.0.11 → 1.0.13

package/README.md

@@ -62,20 +62,56 @@ Add these as needed:
 
 ## Project Structure
 
+### Scaffold Project Structure
+
+```
+create-comate-pagebuilder/
+├── bin/
+│   └── index.js           # CLI entry point
+├── template/              # Template files to scaffold
+│   ├── src/
+│   │   ├── components/    # Public components
+│   │   ├── pages/         # Page modules
+│   │   │   └── Home/      # Home page module
+│   │   │       ├── index.jsx
+│   │   │       └── components/  # Page-specific components
+│   │   ├── utils/
+│   │   │   └── cn.js      # className utility
+│   │   ├── App.jsx
+│   │   ├── main.jsx
+│   │   └── index.css
+│   ├── index.html
+│   ├── vite.config.js
+│   ├── tailwind.config.js
+│   ├── postcss.config.js
+│   ├── package.json
+│   └── README.md          # Template documentation
+├── package.json           # Package metadata
+└── README.md              # This file
+```
+
+### Generated Project Structure
+
+When you run `npm create comate-pagebuilder@latest my-app`, you'll get:
+
 ```
 my-app/
 ├── src/
-│   ├── components/     # React components
-│   ├── pages/          # Page components
-│   ├── utils/          # Utility functions
-│   ├── App.jsx         # Main App component
-│   ├── main.jsx        # Entry point
-│   └── index.css       # Global styles
-├── index.html          # HTML template
-├── vite.config.js      # Vite configuration
-├── tailwind.config.js  # Tailwind configuration
-├── postcss.config.js   # PostCSS configuration
-└── package.json        # Project dependencies
+│   ├── components/        # Public components
+│   ├── pages/             # Page modules
+│   │   └── Home/          # Example: Home page module
+│   │       ├── index.jsx
+│   │       └── components/ # Page-specific components
+│   ├── utils/
+│   │   └── cn.js          # className merge utility
+│   ├── App.jsx            # Root component
+│   ├── main.jsx           # Application entry
+│   └── index.css          # Global styles + Tailwind directives
+├── index.html             # HTML template
+├── vite.config.js         # Vite configuration with path aliases
+├── tailwind.config.js     # Tailwind with custom color system
+├── postcss.config.js      # PostCSS configuration
+└── package.json           # Dependencies and scripts
 ```
 
 ## Available Scripts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-comate-pagebuilder",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "Create a modern, minimalist React + Vite + Tailwind CSS project",
   "type": "commonjs",
   "bin": {

package/template/README.md

@@ -26,7 +26,7 @@ npm install
 npm run dev
 ```
 
-访问 `http://localhost:3000`
+访问 `http://localhost:8080`
 
 ## 🏗️ 构建
 
@@ -38,9 +38,11 @@ npm run build
 
 ```
 src/
-├── components/       # 组件目录
+├── components/       # 公共组件目录
 ├── pages/           # 页面目录
-│   └── Home.jsx     # 首页
+│   └── Home/        # 首页模块
+│       ├── index.jsx      # 首页主文件
+│       └── components/     # 首页专属组件
 ├── utils/           # 工具函数
 │   └── cn.js        # className 合并工具
 ├── App.jsx          # 根组件
@@ -50,13 +52,20 @@ src/
 
 ## 🎨 配色系统
 
-模板内置三套配色方案：
+模板提供标准化的配色结构，在 `tailwind.config.js` 中定义：
 
-- **Primary** - 主色（蓝色系）
-- **Accent** - 强调色（紫色系）
-- **Neutral** - 中性色（灰色系）
+### 色彩层级（各10级：50-900）
+- **primary** - 主色调，用于主要按钮、品牌色（如 `bg-primary-500`）
+- **secondary** - 次要色，用于次要按钮、辅助元素（如 `bg-secondary-100`）
+- **accent** - 强调色，用于高亮、提示等（如 `text-accent-600`）
 
-在 `tailwind.config.js` 中可自定义。
+### 功能性色彩（单色值）
+- **foreground** - 深色文本，用于主要内容（如 `text-foreground`）
+- **muted-foreground** - 中性文本，用于次要说明（如 `text-muted-foreground`）
+- **border** - 边框颜色（如 `border-border`）
+- **muted** - 浅色背景（如 `bg-muted`）
+
+> 💡 所有颜色值需在 `tailwind.config.js` 中根据项目需求自定义配置
 
 ## 📚 可选动效库
 

package/template/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pagebuilder-react-template",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pagebuilder-react-template",
-      "version": "1.0.11",
+      "version": "1.0.13",
       "dependencies": {
         "clsx": "^2.1.0",
         "framer-motion": "^12.23.24",

package/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pagebuilder-react-template",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/template/src/App.jsx

@@ -1,6 +1,6 @@
 // 必须使用 HashRouter 路由，不能使用别的 Router
 import { Routes, Route, HashRouter as Router } from 'react-router'
-import Home from './pages/Home'
+import Home from './pages/Home/index'
 
 function App() {
   return (

package/template/tailwind.config.js

@@ -5,26 +5,59 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
+    // 必须使用extend属性，不要删除extend，避免直接覆盖默认配置
     extend: {
       colors: {
-        // TODO: 请根据项目需求定义配色方案（只需填写单个颜色值即可）
+        // TODO: 请根据项目需求定义配色方案，如下所示，primary、secondary、accent各定义10个颜色，其它的为单色值
       
         // 使用场景说明：
-        // - primary: 主色，用于主要按钮背景 (bg-primary)
-        // - secondary: 次要色，用于次要按钮背景 (bg-secondary)
-        // - accent: 强调色，用于高亮、提示等（可选）
-        // - foreground: 深色，用于主要文本 (text-foreground)
-        // - muted-foreground: 中等色，用于次要文本 (text-muted-foreground)
-        // - border: 用于边框 (border-border)
-        // - muted: 浅色，用于背景 (bg-muted)
-
-        // primary: '',
-        // secondary: '',
-        // accent: '',
-        // foreground: '',
-        // 'muted-foreground': '',
-        // border: '',
-        // muted: '',
+        // - primary: 主色，用于主要按钮背景 (如bg-primary-100)
+        // - secondary: 次要色，用于次要按钮背景 (如bg-secondary-100)
+        // - accent: 强调色，用于高亮、提示等（可选，如：text-accent-500）
+        // - foreground: 深色，用于主要文本 (如text-foreground)
+        // - muted-foreground: 中等色，用于次要文本 (如text-muted-foreground)
+        // - border: 用于边框 (如border-border)
+        // - muted: 浅色，用于背景 (如bg-muted)
+        primary: {
+          50: '',
+          100: '',
+          200: '',
+          300: '',
+          400: '',
+          500: '',
+          600: '',
+          700: '',
+          800: '', 
+          900: '',
+        },
+        secondary: {
+          50: '',
+          100: '',
+          200: '',
+          300: '',
+          400: '',
+          500: '',
+          600: '',
+          700: '',
+          800: '',
+          900: '',
+        },
+        accent: {
+          50: '',
+          100: '',
+          200: '',
+          300: '',
+          400: '',
+          500: '',
+          600: '',
+          700: '',
+          800: '',
+          900: '',
+        },
+        foreground: '',
+        'muted-foreground': '',
+        border: '',
+        muted: '',
       },
       fontFamily: {
         sans: ['Inter', 'system-ui', 'sans-serif'],

package/template/vite.config.js

@@ -15,6 +15,5 @@ export default defineConfig({
   },
   server: {
     port: 8080,
-    open: true
   }
 })