⚙️ 远程开发环境配置指南

通过 VSCode Remote SSH 连接到服务器后，配置完整的 Python + Node.js + Tailwind CSS 开发环境。

前置条件：已完成 VSCode Remote SSH 连接（参考第一篇文档）

一、检查已安装的工具

# 登录服务器后，执行以下命令检查环境
python3 --version     # 已安装 Python 3.x
node --version        # 已安装 Node.js v22+
npm --version         # 已安装 npm
git --version         # 已安装 git

当前服务器已安装：Python 3、Node.js v22、npm、git。如缺少某个工具，参考下方安装步骤。

二、前端开发环境（Node.js）

2.1 安装项目依赖

cd /root/models_20260529220733/ai-creator-platform
npm install

安装完成后会生成 node_modules/ 目录，包含 Vue 3、Vite、TailwindCSS 等所有前端依赖。

2.2 启动前端开发服务器（热更新）

npm run dev -- --host

--host 参数允许局域网/远程访问。启动后 VSCode 会自动弹出"是否转发端口"，确认即可在本地浏览器访问。

2.3 构建生产版本

npm run build

构建产物输出到 dist/ 目录，由 Flask 后端作为静态文件提供服务。

三、后端开发环境（Python Flask）

3.1 安装 Python 依赖

cd /root/models_20260529220733/ai-creator-platform/backend
pip3 install -r requirements.txt

主依赖：Flask、Flask-CORS、requests、Pillow、numpy 等。

3.2 配置 API 密钥

# 检查 config.py 是否存在（如果从 Gitee 克隆，需手动创建）
ls -la /root/models_20260529220733/ai-creator-platform/backend/config.py

# 如果不存在，从示例配置复制并填入实际密钥
cp /root/models_20260529220733/ai-creator-platform/backend/config.example.py \
   /root/models_20260529220733/ai-creator-platform/backend/config.py
# 编辑 config.py，填入实际的 API_KEY 等参数

3.3 启动 Flask 后端

cd /root/models_20260529220733/ai-creator-platform/backend
python3 app.py

后端默认运行在 0.0.0.0:5000，同时提供前端静态文件 + API 服务。

四、配置 VSCode 设置

在远程 VSCode 中创建 .vscode/settings.json（位于项目根目录）：

mkdir -p /root/models_20260529220733/ai-creator-platform/.vscode

在 .vscode/settings.json 中添加以下配置：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "files.exclude": {
    "node_modules/": true,
    "dist/": true,
    "__pycache__/": true
  },
  "python.defaultInterpreterPath": "/usr/bin/python3",
  "[python]": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "ms-python.python"
  },
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "tailwindCSS.includeLanguages": {
    "vue": "html",
    "javascript": "javascript"
  }
}

五、Tailwind CSS 开发指引

5.1 颜色系统

项目使用自定义颜色调色板，在 tailwind.config.js 中定义：

类别	颜色变量	用途
暗色背景	dark-900 ~ dark-500	#0A0A1A ~ #2D2D5E 深色主题背景
亮色背景	light-900 ~ light-500	#F8F9FC ~ #D0D6E4 日间模式主题
霓虹色	neon-purple/blue/green/pink	强调色、按钮、渐变、边框发光

5.2 常用 Tailwind 类

背景色     bg-dark-900 / bg-dark-800 / bg-dark-700
文字色     text-gray-200 / text-gray-400 / text-white
卡片       glass-card / glass-card-hover
霓虹按钮   btn-primary / btn-ghost
霓虹文字   neon-text
霓虹边框   neon-border
侧边栏     sidebar-item / sidebar-item-active
输入框     input-field

六、配置 GPU 推理机访问

后端 Flask app.py 通过 config.py 中的地址调用 GPU 推理机上的模型服务：

# config.py 中的关键配置
API_BASE = "http://123.58.111.244:3990/v1"    # LLM 推理地址
IMAGE_MODELS = {
    "sdxl": { "api_base": "http://localhost:7860" },    # SDXL 生图
    "flux": { "api_base": "http://localhost:8188" },    # FLUX 生图
}

注意：云服务器无法直连 GPU 机的 localhost（端口映射在 GPU 机本地）。如需让云服务器访问 GPU 机上的 SDXL/FLUX，需确保端口暴露且网络可达，或通过 SSH 隧道转发。

远程开发环境配置指南 | Python + Node.js + Tailwind