CosHub

A modern, high-performance web management panel for Tencent Cloud COS (Cloud Object Storage).

一个现代化、高性能的腾讯云 COS 对象存储 Web 管理面板。

Global / 国际版	China / 国内版

Features / 功能特性

• Password Protection / 密码保护 - Single password authentication with JWT session
• Multi-Bucket Support / 多存储桶支持 - Switch between different buckets easily
• File Management / 文件管理 - Upload, download, rename, delete files
• Folder Navigation / 文件夹导航 - Breadcrumb navigation with URL state sync
• File Preview / 文件预览 - Preview images and videos directly
• Drag & Drop Upload / 拖拽上传 - Upload files with progress indicator
• Batch Operations / 批量操作 - Select and delete multiple files
• Custom CDN Domain / 自定义 CDN 域名 - Support custom domain for file links
• Copy Link / 复制链接 - Quick copy file URL to clipboard
• Web Settings / 在线设置 - Configure password and CDN domain via EdgeOne KV storage

Tech Stack / 技术栈

• Next.js 16 (App Router)
• TypeScript
• Tailwind CSS v4
• shadcn/ui
• TanStack Query & Table
• nuqs (URL state)
• cos-nodejs-sdk-v5

Getting Started / 快速开始

1. Install Dependencies / 安装依赖

pnpm install

2. Configure Environment / 配置环境变量

Copy .env.local.example to .env.local and fill in your credentials:

复制 .env.local.example 为 .env.local 并填写配置：

# COS Configuration / COS 配置
COS_SECRET_ID=your_secret_id
COS_SECRET_KEY=your_secret_key
COS_REGION=ap-guangzhou

# Custom CDN Domain (optional) / 自定义 CDN 域名（可选）
COS_CDN_DOMAIN=https://cdn.example.com

# Authentication / 认证配置
ACCESS_PASSWORD=your_access_password
AUTH_SECRET=your_random_secret_string_at_least_32_chars

3. Run Development Server / 启动开发服务器

pnpm dev

Open http://localhost:3000 in your browser.

在浏览器中打开 http://localhost:3000。

4. Build for Production / 构建生产版本

pnpm build
pnpm start

Environment Variables / 环境变量说明

Variable / 变量	Required / 必填	Description / 说明
COS_SECRET_ID	Yes / 是	Tencent Cloud SecretId / 腾讯云 SecretId
COS_SECRET_KEY	Yes / 是	Tencent Cloud SecretKey / 腾讯云 SecretKey
COS_REGION	Yes / 是	COS Region (e.g. ap-guangzhou) / COS 地域
COS_CDN_DOMAIN	No / 否	Custom CDN domain / 自定义 CDN 域名
ACCESS_PASSWORD	Yes / 是	Login password / 登录密码
AUTH_SECRET	Yes / 是	JWT secret (32+ chars) / JWT 密钥

Configuration / 配置管理

CosHub settings are managed through environment variables in EdgeOne Pages Console.

CosHub 的设置通过 EdgeOne Pages 控制台的环境变量管理。

How to Configure / 如何配置

1. Go to EdgeOne Pages Console → Your Project → Settings → Environment Variables
2. 进入 EdgeOne Pages 控制台 → 你的项目 → 设置 → 环境变量
3. Add or update the following variables / 添加或更新以下变量：
   • ACCESS_PASSWORD - Login password / 登录密码
   • COS_CDN_DOMAIN - Custom CDN domain / 自定义 CDN 域名
4. Redeploy to apply changes / 重新部署以应用更改

Note on EdgeOne KV / 关于 EdgeOne KV

EdgeOne KV storage is currently not available in Next.js projects deployed on EdgeOne Pages. The KV binding only works with standalone Edge Functions (edge-functions/ directory), which conflicts with Next.js routing.

EdgeOne KV 存储目前在部署于 EdgeOne Pages 的 Next.js 项目中不可用。KV 绑定仅适用于独立的 Edge Functions（edge-functions/ 目录），与 Next.js 路由存在冲突。

License / 许可证

MIT