create-comate-pagebuilder 1.0.0 → 1.0.1

package/README.md

@@ -1,6 +1,6 @@
 # create-comate-pagebuilder
 
-Scaffold a React + Vite + Tailwind CSS project with PageBuilder template.
+Scaffold a React + Vite + Tailwind CSS project with a modern, minimalist template.
 
 ## Usage
 
@@ -46,13 +46,16 @@ The generated project includes:
 
 - **React 18** - Modern React with hooks
 - **Vite** - Fast build tool and dev server
-- **Tailwind CSS** - Utility-first CSS framework
+- **Tailwind CSS** - Utility-first CSS framework with custom color system
 - **Framer Motion** - Production-ready motion library
 - **Lucide React** - Beautiful & consistent icon set
 - **clsx** & **tailwind-merge** - Utility for constructing className strings
+- **Path aliases** - Pre-configured for clean imports
 
 ### Optional Dependencies
 
+Add these as needed:
+
 - **GSAP** - Professional-grade animation library
 - **Lottie Web** - Render After Effects animations
 - **Animate.css** - Ready-to-use CSS animations

package/bin/index.js

@@ -2,6 +2,27 @@
 
 const fs = require('fs-extra');
 const path = require('path');
+const { execSync } = require('child_process');
+
+/**
+ * 安装依赖
+ */
+function installDependencies(projectDir) {
+  console.log('\n📦 Installing dependencies with npm...\n');
+  
+  try {
+    // 使用 cwd 参数进入项目目录，然后执行 npm install
+    execSync('npm install', {
+      cwd: projectDir,  // 相当于先 cd 到项目目录
+      stdio: 'inherit', // 显示安装过程输出
+    });
+    
+    return true;
+  } catch (error) {
+    console.error(`\n❌ Failed to install dependencies: ${error.message}`);
+    return false;
+  }
+}
 
 async function init() {
   try {
@@ -26,11 +47,24 @@ async function init() {
     // 复制模板文件到目标目录
     await fs.copy(templateDir, targetDir);
 
-    console.log('✅ Project created successfully!\n');
-    console.log('📝 Next steps:\n');
-    console.log(`   cd ${projectName}`);
-    console.log('   npm install');
-    console.log('   npm run dev\n');
+    console.log('✅ Project files created successfully!\n');
+
+    // 自动安装依赖
+    const installSuccess = installDependencies(targetDir);
+
+    if (installSuccess) {
+      console.log('\n✅ Dependencies installed successfully!\n');
+      console.log('🎉 All done! Your project is ready.\n');
+      console.log('📝 Next steps:\n');
+      console.log(`   cd ${projectName}`);
+      console.log('   npm run dev\n');
+    } else {
+      console.log('\n⚠️  Project created but dependencies installation failed.');
+      console.log('📝 Please install dependencies manually:\n');
+      console.log(`   cd ${projectName}`);
+      console.log('   npm install');
+      console.log('   npm run dev\n');
+    }
 
   } catch (error) {
     console.error('❌ Error creating project:', error.message);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-comate-pagebuilder",
-  "version": "1.0.0",
-  "description": "Create a React + Vite + Tailwind CSS project with PageBuilder template",
+  "version": "1.0.1",
+  "description": "Create a modern, minimalist React + Vite + Tailwind CSS project",
   "type": "commonjs",
   "bin": {
     "create-comate-pagebuilder": "./bin/index.js"
@@ -17,7 +17,9 @@
     "vite",
     "tailwind",
     "template",
-    "scaffold"
+    "scaffold",
+    "minimalist",
+    "modern"
   ],
   "scripts": {
     "test": "node bin/index.js test-project"

package/template/README.md

@@ -1,8 +1,8 @@
-# PageBuilder React Template
+# React + Vite + Tailwind CSS Template
 
-🎨 **高保真前端原型快速启动模板**
+🎨 **现代化前端开发模板**
 
-这是 PageBuilder 智能体的标准 React + Vite + Tailwind CSS 模板，开箱即用。
+这是一个精简的 React + Vite + Tailwind CSS 模板，开箱即用，提供了基础的开发环境配置。
 
 ## ✨ 特性
 
@@ -13,7 +13,6 @@
 - 🎯 **Lucide React** - 现代图标库
 - 📦 **预配置路径别名** - 便捷的模块导入
 - 🎪 **标准配色系统** - Primary / Accent / Neutral
-- 🧩 **示例组件** - Hero / Card 等常用组件
 
 ## 📦 安装
 
@@ -40,11 +39,8 @@ npm run build
 ```
 src/
 ├── components/       # 组件目录
-│   ├── Hero.jsx     # Hero 组件
-│   └── Card.jsx     # 卡片组件
 ├── pages/           # 页面目录
 │   └── Home.jsx     # 首页
-├── styles/          # 样式目录
 ├── utils/           # 工具函数
 │   └── cn.js        # className 合并工具
 ├── App.jsx          # 根组件
@@ -88,7 +84,7 @@ npm install gsap lottie-web animate.css
 
 ## 📖 使用建议
 
-1. **组件命名** - 使用 PascalCase（如 `HeroSection.jsx`）
+1. **组件命名** - 使用 PascalCase（如 `Button.jsx`）
 2. **样式优先级** - Tailwind > CSS Modules > 全局 CSS
 3. **动效使用** - Framer Motion 用于组件级，GSAP 用于页面级
 4. **响应式设计** - 优先使用 Tailwind 断点（sm/md/lg/xl/2xl）
@@ -96,7 +92,3 @@ npm install gsap lottie-web animate.css
 ## 📝 License
 
 MIT
-
----
-
-🤖 Generated by **PageBuilder** - 高保真前端原型智能体

package/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "PageBuilder-react-template",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/template/src/index.css

@@ -29,12 +29,6 @@
     @apply px-6 py-3 bg-neutral-100 text-neutral-900 rounded-lg font-medium
            hover:bg-neutral-200 active:scale-95 transition-all duration-200;
   }
-
-  /* 标准卡片样式 */
-  .card {
-    @apply bg-white rounded-xl border border-neutral-200 p-6
-           shadow-sm hover:shadow-md transition-shadow duration-300;
-  }
 }
 
 /* 可选：引入 animate.css（如果使用） */

package/template/src/pages/Home.jsx

@@ -1,56 +1,15 @@
-import Hero from '@components/Hero'
-import Card from '@components/Card'
-import { Palette, Zap, Layout } from 'lucide-react'
 
 export default function Home() {
-  const features = [
-    {
-      icon: Palette,
-      title: "智能配色",
-      description: "自动生成符合设计规范的配色方案，支持多种风格"
-    },
-    {
-      icon: Zap,
-      title: "丰富动效",
-      description: "集成 GSAP、Framer Motion 等主流动效库"
-    },
-    {
-      icon: Layout,
-      title: "响应式布局",
-      description: "基于 Tailwind CSS 的现代响应式设计系统"
-    }
-  ]
-
   return (
-    <main>
-      {/* Hero 区域 */}
-      <Hero
-        title="PageBuilder"
-        subtitle="将模糊需求转换为高保真前端原型"
-        ctaText="开始创建"
-        onCtaClick={() => console.log('CTA clicked')}
-      />
-
-      {/* Features 区域 */}
-      <section className="max-w-7xl mx-auto px-6 py-20">
-        <div className="text-center mb-16">
-          <h2 className="text-4xl font-bold mb-4">核心特性</h2>
-          <p className="text-xl text-neutral-600">
-            开箱即用的现代前端开发体验
-          </p>
-        </div>
-
-        <div className="grid md:grid-cols-3 gap-8">
-          {features.map((feature, index) => (
-            <Card
-              key={index}
-              icon={feature.icon}
-              title={feature.title}
-              description={feature.description}
-            />
-          ))}
-        </div>
-      </section>
+    <main className="min-h-screen flex items-center justify-center px-6 py-20">
+      <div className="max-w-4xl mx-auto text-center">
+        <h1 className="text-6xl font-bold mb-6">
+          Welcome
+        </h1>
+        <p className="text-xl text-neutral-600">
+          Start building your application here
+        </p>
+      </div>
     </main>
   )
 }

package/template/vite.config.js

@@ -14,7 +14,7 @@ export default defineConfig({
     }
   },
   server: {
-    port: 3000,
+    port: 8080,
     open: true
   }
 })

package/template/src/components/Card.jsx

@@ -1,42 +0,0 @@
-import { motion } from 'framer-motion'
-import { cn } from '@/utils/cn'
-
-/**
- * PageBuilder 标准卡片组件
- * 支持 hover 动效、自定义样式
- */
-export default function Card({
-  title,
-  description,
-  icon: Icon,
-  className,
-  children
-}) {
-  return (
-    <motion.div
-      className={cn("card group cursor-pointer", className)}
-      whileHover={{ y: -4 }}
-      transition={{ duration: 0.3 }}
-    >
-      {Icon && (
-        <div className="w-12 h-12 rounded-lg bg-primary-100 flex items-center justify-center mb-4 group-hover:bg-primary-200 transition-colors">
-          <Icon className="w-6 h-6 text-primary-600" />
-        </div>
-      )}
-
-      {title && (
-        <h3 className="text-xl font-semibold mb-2 text-neutral-900">
-          {title}
-        </h3>
-      )}
-
-      {description && (
-        <p className="text-neutral-600 leading-relaxed">
-          {description}
-        </p>
-      )}
-
-      {children}
-    </motion.div>
-  )
-}

package/template/src/components/Hero.jsx

@@ -1,66 +0,0 @@
-import { motion } from 'framer-motion'
-import { ArrowRight } from 'lucide-react'
-import { cn } from '@/utils/cn'
-
-/**
- * PageBuilder 标准 Hero 组件
- * 支持动效、响应式、高保真视觉
- */
-export default function Hero({
-  title = "欢迎来到 PageBuilder",
-  subtitle = "高保真前端原型智能体",
-  ctaText = "开始使用",
-  onCtaClick = () => {}
-}) {
-  return (
-    <section className="relative min-h-screen flex items-center justify-center px-6 py-20 overflow-hidden">
-      {/* 背景装饰 */}
-      <div className="absolute inset-0 -z-10">
-        <div className="absolute top-20 left-10 w-72 h-72 bg-primary-500/20 rounded-full blur-3xl" />
-        <div className="absolute bottom-20 right-10 w-96 h-96 bg-accent-500/20 rounded-full blur-3xl" />
-      </div>
-
-      <div className="max-w-4xl mx-auto text-center">
-        {/* 标题 */}
-        <motion.h1
-          className="text-6xl md:text-7xl lg:text-8xl font-bold mb-6 bg-gradient-to-br from-neutral-900 via-neutral-800 to-neutral-600 bg-clip-text text-transparent"
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, ease: "easeOut" }}
-        >
-          {title}
-        </motion.h1>
-
-        {/* 副标题 */}
-        <motion.p
-          className="text-xl md:text-2xl text-neutral-600 mb-12 max-w-2xl mx-auto"
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
-        >
-          {subtitle}
-        </motion.p>
-
-        {/* CTA 按钮 */}
-        <motion.button
-          onClick={onCtaClick}
-          className={cn(
-            "group inline-flex items-center gap-2 px-8 py-4",
-            "bg-primary-600 hover:bg-primary-700",
-            "text-white font-semibold rounded-full",
-            "shadow-lg hover:shadow-xl",
-            "transition-all duration-300"
-          )}
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 0.4, ease: "easeOut" }}
-          whileHover={{ scale: 1.05 }}
-          whileTap={{ scale: 0.95 }}
-        >
-          {ctaText}
-          <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
-        </motion.button>
-      </div>
-    </section>
-  )
-}