first commit
This commit is contained in:
10
frontend/__init__.py
Normal file
10
frontend/__init__.py
Normal file
@@ -0,0 +1,10 @@
|
||||
# -*- coding: utf-8 -*-
|
||||
"""
|
||||
前端模块包
|
||||
"""
|
||||
|
||||
from frontend.react import init_react_project
|
||||
from frontend.vue import init_vue_project
|
||||
from frontend.tailwind import setup_tailwind
|
||||
|
||||
__all__ = ['init_react_project', 'init_vue_project', 'setup_tailwind']
|
||||
113
frontend/react.py
Normal file
113
frontend/react.py
Normal file
@@ -0,0 +1,113 @@
|
||||
# -*- coding: utf-8 -*-
|
||||
"""
|
||||
React 项目初始化模块
|
||||
"""
|
||||
|
||||
import subprocess
|
||||
import sys
|
||||
|
||||
|
||||
def run_command_interactive(cmd, cwd, description):
|
||||
"""运行命令并支持用户交互"""
|
||||
print(f"\n{'=' * 60}")
|
||||
print(f"执行: {description}")
|
||||
print(f"{'=' * 60}")
|
||||
print(f"💡 提示: 此步骤需要您进行交互操作")
|
||||
print(f"{'=' * 60}\n")
|
||||
|
||||
try:
|
||||
result = subprocess.run(cmd, cwd=cwd, shell=True)
|
||||
|
||||
print(f"\n{'=' * 60}")
|
||||
if result.returncode == 0:
|
||||
print(f"✅ {description} - 完成")
|
||||
else:
|
||||
print(f"❌ {description} - 失败 (错误码: {result.returncode})")
|
||||
print(f"{'=' * 60}\n")
|
||||
|
||||
return result.returncode == 0
|
||||
|
||||
except Exception as e:
|
||||
print(f"\n❌ 执行失败: {str(e)}")
|
||||
return False
|
||||
|
||||
|
||||
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 init_react_project(frontend_dir, project_name):
|
||||
"""初始化 React 项目"""
|
||||
print("\n🚀 初始化 React 项目...")
|
||||
print("\n⚠️ 重要提示:")
|
||||
print(" 1. 当询问 'Use rolldown-vite?' 时，建议选择 No")
|
||||
print(" 2. 当询问 'Install and start now?' 时，请选择 No（否则会启动服务器）")
|
||||
print(" 3. 我们会在之后单独安装依赖\n")
|
||||
|
||||
# 删除空目录，因为 create-vite 需要在不存在的目录中创建
|
||||
frontend_dir.rmdir()
|
||||
|
||||
# 使用 Vite 创建 React 项目
|
||||
cmd = f'npm create vite@latest {frontend_dir.name} -- --template react'
|
||||
success = run_command_interactive(cmd, frontend_dir.parent, "创建 React 项目结构")
|
||||
|
||||
if not success:
|
||||
print("\n💡 提示: 请确保已安装 Node.js 和 npm")
|
||||
print(" 下载地址: https://nodejs.org/")
|
||||
sys.exit(1)
|
||||
|
||||
# 检查目录是否创建成功
|
||||
if not frontend_dir.exists():
|
||||
print("❌ 项目目录创建失败")
|
||||
sys.exit(1)
|
||||
|
||||
# 检查是否已安装依赖
|
||||
node_modules = frontend_dir / "node_modules"
|
||||
if not node_modules.exists():
|
||||
print("\n⏳ 开始安装依赖...")
|
||||
success = run_command_with_progress("npm install", frontend_dir, "安装 React 项目依赖")
|
||||
|
||||
if not success:
|
||||
print("⚠️ 依赖安装失败，请稍后手动运行: cd {}-frontend && npm install".format(project_name))
|
||||
|
||||
print("\n✅ React 项目初始化成功")
|
||||
181
frontend/tailwind.py
Normal file
181
frontend/tailwind.py
Normal file
@@ -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')
|
||||
113
frontend/vue.py
Normal file
113
frontend/vue.py
Normal file
@@ -0,0 +1,113 @@
|
||||
# -*- coding: utf-8 -*-
|
||||
"""
|
||||
Vue 项目初始化模块
|
||||
"""
|
||||
|
||||
import subprocess
|
||||
import sys
|
||||
|
||||
|
||||
def run_command_interactive(cmd, cwd, description):
|
||||
"""运行命令并支持用户交互"""
|
||||
print(f"\n{'=' * 60}")
|
||||
print(f"执行: {description}")
|
||||
print(f"{'=' * 60}")
|
||||
print(f"💡 提示: 此步骤需要您进行交互操作")
|
||||
print(f"{'=' * 60}\n")
|
||||
|
||||
try:
|
||||
result = subprocess.run(cmd, cwd=cwd, shell=True)
|
||||
|
||||
print(f"\n{'=' * 60}")
|
||||
if result.returncode == 0:
|
||||
print(f"✅ {description} - 完成")
|
||||
else:
|
||||
print(f"❌ {description} - 失败 (错误码: {result.returncode})")
|
||||
print(f"{'=' * 60}\n")
|
||||
|
||||
return result.returncode == 0
|
||||
|
||||
except Exception as e:
|
||||
print(f"\n❌ 执行失败: {str(e)}")
|
||||
return False
|
||||
|
||||
|
||||
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 init_vue_project(frontend_dir, project_name):
|
||||
"""初始化 Vue 项目"""
|
||||
print("\n🚀 初始化 Vue 项目...")
|
||||
print("\n⚠️ 重要提示:")
|
||||
print(" 1. 当询问 'Use rolldown-vite?' 时，建议选择 No")
|
||||
print(" 2. 当询问 'Install and start now?' 时，请选择 No（否则会启动服务器）")
|
||||
print(" 3. 我们会在之后单独安装依赖\n")
|
||||
|
||||
# 删除空目录
|
||||
frontend_dir.rmdir()
|
||||
|
||||
# 使用 Vite 创建 Vue 项目
|
||||
cmd = f'npm create vite@latest {frontend_dir.name} -- --template vue'
|
||||
success = run_command_interactive(cmd, frontend_dir.parent, "创建 Vue 项目结构")
|
||||
|
||||
if not success:
|
||||
print("\n💡 提示: 请确保已安装 Node.js 和 npm")
|
||||
print(" 下载地址: https://nodejs.org/")
|
||||
sys.exit(1)
|
||||
|
||||
# 检查目录是否创建成功
|
||||
if not frontend_dir.exists():
|
||||
print("❌ 项目目录创建失败")
|
||||
sys.exit(1)
|
||||
|
||||
# 检查是否已安装依赖
|
||||
node_modules = frontend_dir / "node_modules"
|
||||
if not node_modules.exists():
|
||||
print("\n⏳ 开始安装依赖...")
|
||||
success = run_command_with_progress("npm install", frontend_dir, "安装 Vue 项目依赖")
|
||||
|
||||
if not success:
|
||||
print("⚠️ 依赖安装失败，请稍后手动运行: cd {}-frontend && npm install".format(project_name))
|
||||
|
||||
print("\n✅ Vue 项目初始化成功")
|
||||
Reference in New Issue
Block a user