first commit

frontend/tailwind.py

@@ -0,0 +1,181 @@
+# -*- 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')