QuickStack/frontend/tailwind.py

# -*- coding: utf-8 -*-
"""
Tailwind CSS 配置模块
"""

import subprocess


def run_command_with_progress(cmd, cwd, description):
    """运行命令并显示实时输出"""
    try:
        print(f"\n{'=' * 60}")
        print(f"执行: {description}")
        print(f"{'=' * 60}")
        
        process = subprocess.Popen(
            cmd,
            cwd=cwd,
            shell=True,
            stdout=subprocess.PIPE,
            stderr=subprocess.STDOUT,
            bufsize=0
        )
        
        for line in process.stdout:
            try:
                decoded_line = line.decode('utf-8', errors='replace')
            except:
                try:
                    decoded_line = line.decode('gbk', errors='replace')
                except:
                    decoded_line = line.decode('latin-1', errors='replace')
            print(decoded_line, end='')
        
        process.wait()
        
        if process.returncode == 0:
            print(f"\n{'=' * 60}")
            print(f"✅ {description} - 完成")
            print(f"{'=' * 60}\n")
            return True
        else:
            print(f"\n{'=' * 60}")
            print(f"❌ {description} - 失败 (错误码: {process.returncode})")
            print(f"{'=' * 60}\n")
            return False
            
    except Exception as e:
        print(f"\n❌ 执行失败: {str(e)}")
        return False


def setup_tailwind(frontend_dir, framework):
    """配置 Tailwind CSS"""
    print("\n🎨 配置 Tailwind CSS...")
    
    # 安装 Tailwind 依赖
    success = run_command_with_progress(
        "npm install -D tailwindcss postcss autoprefixer",
        frontend_dir,
        "安装 Tailwind CSS 依赖"
    )
    
    if not success:
        print("⚠️  Tailwind 安装失败，请稍后手动安装")
        return False
    
    # 初始化 Tailwind 配置
    run_command_with_progress(
        "npx tailwindcss init -p",
        frontend_dir,
        "初始化 Tailwind 配置"
    )
    
    # 根据框架配置 tailwind.config.js
    if framework == "react":
        content_config = '"./index.html", "./src/**/*.{js,ts,jsx,tsx}"'
    else:  # vue
        content_config = '"./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"'
    
    tailwind_config = frontend_dir / "tailwind.config.js"
    tailwind_config.write_text(f'''/** @type {{import('tailwindcss').Config}} */
export default {{
  content: [{content_config}],
  theme: {{
    extend: {{}},
  }},
  plugins: [],
}}
''', encoding='utf-8')
    
    # 创建或修改 CSS 文件
    if framework == "react":
        css_file = frontend_dir / "src" / "index.css"
    else:  # vue
        css_file = frontend_dir / "src" / "style.css"
    
    # 在 CSS 文件开头添加 Tailwind 指令
    tailwind_directives = '''@tailwind base;
@tailwind components;
@tailwind utilities;

'''
    
    if css_file.exists():
        original_css = css_file.read_text(encoding='utf-8')
        css_file.write_text(tailwind_directives + original_css, encoding='utf-8')
    else:
        css_file.write_text(tailwind_directives, encoding='utf-8')
    
    # 创建示例组件展示 Tailwind
    if framework == "react":
        create_react_tailwind_example(frontend_dir)
    else:
        create_vue_tailwind_example(frontend_dir)
    
    print("\n✅ Tailwind CSS 配置成功")
    print("💡 提示: 可以在组件中使用 Tailwind 类名了")
    return True


def create_react_tailwind_example(frontend_dir):
    """创建 React Tailwind 示例"""
    app_jsx = frontend_dir / "src" / "App.jsx"
    app_jsx.write_text('''function App() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
      <div className="bg-white rounded-2xl shadow-2xl p-8 max-w-md w-full mx-4">
        <h1 className="text-3xl font-bold text-gray-800 text-center mb-4">
          🚀 React + Tailwind
        </h1>
        <p className="text-gray-600 text-center mb-6">
          项目已成功初始化！Tailwind CSS 已配置完成。
        </p>
        <div className="flex gap-4 justify-center">
          <button className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
            开始开发
          </button>
          <button className="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
            查看文档
          </button>
        </div>
      </div>
    </div>
  )
}

export default App
''', encoding='utf-8')


def create_vue_tailwind_example(frontend_dir):
    """创建 Vue Tailwind 示例"""
    app_vue = frontend_dir / "src" / "App.vue"
    app_vue.write_text('''<script setup>
</script>

<template>
  <div class="min-h-screen bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
    <div class="bg-white rounded-2xl shadow-2xl p-8 max-w-md w-full mx-4">
      <h1 class="text-3xl font-bold text-gray-800 text-center mb-4">
        🚀 Vue + Tailwind
      </h1>
      <p class="text-gray-600 text-center mb-6">
        项目已成功初始化！Tailwind CSS 已配置完成。
      </p>
      <div class="flex gap-4 justify-center">
        <button class="px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
          开始开发
        </button>
        <button class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
          查看文档
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>
''', encoding='utf-8')