项目：文件分享站

项目概览

拖拽上传文件 → 生成分享链接 → 设置密码保护 → 一键分享。

⏱️ 预计 2 小时 | 🛠️ Vue 3 + Supabase Storage

功能清单

• 拖拽/点击上传文件
• 上传进度条
• 生成唯一分享链接
• 设置下载密码（可选）
• 设置过期时间（1h/24h/7天）
• 显示文件类型图标
• 一键复制分享链接

跟着做

Supabase Storage 配置：

-- 创建存储桶
INSERT INTO storage.buckets (id, name, public) VALUES ('files', 'files', false);

-- 允许已认证用户上传
CREATE POLICY "允许上传" ON storage.objects
  FOR INSERT WITH CHECK (auth.role() = 'authenticated');

前端核心：

帮我做一个文件分享工具（Vue 3 + Supabase Storage）：
1. 拖拽区域：虚线框，支持拖拽或点击上传
2. 上传进度条，显示百分比
3. 上传完成后显示文件信息：名称、大小、类型图标
4. 设置面板：下载密码（可选）、过期时间（1小时/24小时/7天）
5. 点击"生成链接"按钮，显示分享链接
6. 一键复制链接到剪贴板
7. 设计参考 WeTransfer 风格

✅ 项目成果

• 一个可用的文件分享站
• 掌握了文件上传和云存储
• 理解了权限和密码保护