角色： 你是一位经验丰富的全栈工程师。
任务： 请根据以下详细需求，为我创建一个用于管理 DigitalOcean Droplet 的 Web 应用面板。该应用需要一个简单安全的后端代理和功能完善的前端界面。
建议技术栈：
后端： Node.js + Express.js（用于创建 API 代理）
前端： React (使用 Vite 创建项目) + Tailwind CSS（用于快速构建美观的 UI）
一、项目总体结构
请将项目分为两个主要部分：
/backend：用于处理对 DigitalOcean API 请求的代理服务。
/frontend：用户与之交互的 React 前端应用。
并提供一个清晰的 README.md 文件，说明如何设置环境变量、安装依赖以及如何同时启动前后端服务。
二、后端需求 (Backend API Proxy)
后端的主要职责是安全地处理敏感信息（如 API Token）并向 DigitalOcean API 转发请求。
环境变量： 后端服务必须能从 .env 文件中读取以下三个环境变量：
DIGITALOCEAN_TOKEN: 用于 API 认证的 Bearer Token。
VPC_UUID: 创建 Droplet 时使用的默认 VPC UUID。
SSH_KEYS: 创建 Droplet 时使用的默认 SSH Key ID 列表 (例如 [“1234567”, “2345678”])。
创建 API 端点： 请创建以下三个路由来代理前端的请求：
GET /api/droplets:
接收到请求后，使用环境变量中的 DIGITALOCEAN_TOKEN 向 https://api.digitalocean.com/v2/droplets 发送一个 GET 请求。
将 DigitalOcean API 返回的完整数据或错误信息返回给前端。
POST /api/droplets:
接收前端发来的请求 Body（包含 name, size, region, image 等参数）。
将环境变量中的 vpc_uuid 和 ssh_keys 添加到请求 Body 中。
使用 DIGITALOCEAN_TOKEN 向 https://api.digitalocean.com/v2/droplets 发送一个 POST 请求。
将 DigitalOcean API 返回的完整数据或错误信息返回给前端。
DELETE /api/droplets/:id:
接收前端请求，其中 :id 是要销毁的 Droplet ID。
使用 DIGITALOCEAN_TOKEN 向 https://api.digitalocean.com/v2/droplets/{id} 发送一个 DELETE 请求。
将 DigitalOcean API 返回的状态码或错误信息返回给前端。
三、前端需求 (Frontend React App)
前端是用户交互的核心，需要实现以下功能模块：
- Droplets 列表展示
数据获取： 页面加载时，向后端 GET /api/droplets 发起请求以获取所有 Droplets 的列表。
UI 界面：
以卡片或表格形式清晰地展示每个 Droplet 的信息。
每项必须显示：Droplet 名称 (name) 和公网 IP 地址 (ip_address)。
IP 地址处理逻辑（核心功能）：
当一个 Droplet 的状态 status 为 new 时，它的 networks.v4 数组为空。此时，在其 IP 地址位置应显示一个加载状态，例如 “正在创建中 (Creating…)”。
实现一个轮询（Polling）机制：对于任何状态为 new 的 Droplet，前端应每隔 8-10 秒自动重新请求 GET /api/droplets 来刷新整个列表数据。
当轮询发现该 Droplet 的 status 变为 active 时，从 networks.v4 数组中找到 type 为 public 的对象，并提取其 ip_address 显示在界面上。
轮询应在所有 Droplets 都变为 active 状态后停止，以节省资源。
交互功能：
复制 IP： 点击公网 IP 地址时，应能一键将其复制到用户剪贴板，并给出“已复制”的提示。
销毁按钮： 每个 Droplet旁边都需要有一个“销毁”按钮。点击后必须弹出一个确认对话框（例如：“您确定要销毁 Droplet [Droplet Name] 吗？此操作不可逆！“）来防止误操作。确认后，向后端 DELETE /api/droplets/{droplet_id} 发送请求。
- 创建 Droplet
在页面醒目位置设置一个“创建 Droplet”按钮。
点击该按钮后，立即向后端 POST /api/droplets 发送请求。
请求 Body 使用以下默认值：
JSON { “name”: “ubuntu-{index}”, “size”: “s-2vcpu-2gb-90gb-intel”, “region”: “nyc3”, “image”: “ubuntu-22-04-x64” } （后端的代理服务会自动附加 vpc_uuid 和 ssh_keys）
- 状态同步
无论是创建还是销毁 Droplet，在API请求成功返回后，都必须 立即 重新获取一次 Droplet 列表，以确保前端显示的数据与后台的真实情况保持一致。
- 设置面板
在页面右上角添加一个设置图标（例如齿轮 ⚙️）。
点击图标后，弹出一个模态框或侧边栏作为设置面板。
面板中提供三个输入框，让用户可以自定义并覆盖环境变量中的默认值：
API Token
VPC UUID
SSH Key IDs (提示用户，如果是多个 Key，请用英文逗号 , 分隔)
设置存储与加载逻辑：
用户在设置面板中输入的值应保存在浏览器的 localStorage 中，以便长期有效。
优先级规则： 应用在发起 API 请求时，应优先使用 localStorage 中用户设置的值。如果 localStorage 中没有值，则回退到使用后端提供的环境变量默认值。
重置功能： 每个输入框旁边应有一个“重置”按钮。点击后，清除 localStorage 中对应的自定义值，使该项配置恢复到使用环境变量的默认值。
当用户保存或重置任何设置后，应立即触发一次数据刷新（例如，如果 API Token 被修改，应立刻用新 Token 重新获取 Droplet 列表）。
总结要求：
代码结构清晰，组件划分合理，并包含必要的注释。
UI 界面简洁、直观、响应式。
做好基础的错误处理，例如当 API 请求失败时，在界面上给予用户明确的错误提示。