create-comate-pagebuilder 1.0.0

package/template/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "PageBuilder-react-template",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "framer-motion": "^11.0.8",
+    "lucide-react": "^0.344.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.1.4",
+    "tailwindcss": "^3.4.1",
+    "postcss": "^8.4.35",
+    "autoprefixer": "^10.4.17"
+  },
+  "optionalDependencies": {
+    "gsap": "^3.12.5",
+    "lottie-web": "^5.12.2",
+    "animate.css": "^4.1.1"
+  }
+}

package/template/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/template/src/App.jsx

@@ -0,0 +1,11 @@
+import Home from './pages/Home'
+
+function App() {
+  return (
+    <div className="min-h-screen">
+      <Home />
+    </div>
+  )
+}
+
+export default App

package/template/src/components/Card.jsx

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,66 @@
+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>
+  )
+}

package/template/src/index.css

@@ -0,0 +1,41 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* PageBuilder 全局样式基础 */
+@layer base {
+  * {
+    @apply border-neutral-200;
+  }
+
+  body {
+    @apply bg-white text-neutral-900 antialiased;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-semibold tracking-tight;
+  }
+}
+
+@layer components {
+  /* 标准按钮样式 */
+  .btn-primary {
+    @apply px-6 py-3 bg-primary-600 text-white rounded-lg font-medium
+           hover:bg-primary-700 active:scale-95 transition-all duration-200
+           shadow-sm hover:shadow-md;
+  }
+
+  .btn-secondary {
+    @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（如果使用） */
+/* @import 'animate.css'; */

package/template/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

package/template/src/pages/Home.jsx

@@ -0,0 +1,56 @@
+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>
+  )
+}

package/template/src/utils/cn.js

@@ -0,0 +1,10 @@
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+/**
+ * className 合并工具
+ * 用于合并 Tailwind 类名，避免冲突
+ */
+export function cn(...inputs) {
+  return twMerge(clsx(inputs))
+}

package/template/tailwind.config.js

@@ -0,0 +1,74 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // PageBuilder 标准配色系统
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',
+        },
+        accent: {
+          50: '#fdf4ff',
+          100: '#fae8ff',
+          200: '#f5d0fe',
+          300: '#f0abfc',
+          400: '#e879f9',
+          500: '#d946ef',
+          600: '#c026d3',
+          700: '#a21caf',
+          800: '#86198f',
+          900: '#701a75',
+        },
+        neutral: {
+          50: '#fafafa',
+          100: '#f5f5f5',
+          200: '#e5e5e5',
+          300: '#d4d4d4',
+          400: '#a3a3a3',
+          500: '#737373',
+          600: '#525252',
+          700: '#404040',
+          800: '#262626',
+          900: '#171717',
+        }
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        display: ['Cal Sans', 'Inter', 'system-ui', 'sans-serif'],
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.6s ease-out',
+        'slide-up': 'slideUp 0.6s ease-out',
+        'scale-in': 'scaleIn 0.4s ease-out',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { transform: 'translateY(20px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        scaleIn: {
+          '0%': { transform: 'scale(0.95)', opacity: '0' },
+          '100%': { transform: 'scale(1)', opacity: '1' },
+        },
+      },
+    },
+  },
+  plugins: [],
+}

package/template/vite.config.js

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@components': path.resolve(__dirname, './src/components'),
+      '@pages': path.resolve(__dirname, './src/pages'),
+      '@styles': path.resolve(__dirname, './src/styles'),
+      '@utils': path.resolve(__dirname, './src/utils')
+    }
+  },
+  server: {
+    port: 3000,
+    open: true
+  }
+})