一个支持多平台部署的现代化云端导航页面
一个基于 React 19 + TypeScript + Vite + Tailwind CSS 4 构建的现代化云端导航/书签管理页面，支持部署到 EdgeOne Pages、Cloudflare Pages 和 Vercel。
- 全分类锚点页面：所有分类同屏展示，侧边栏一键跳转
- 前端可视化编辑：右键菜单 / 拖拽排序 / 批量操作 / 分类管理
- 多平台部署：EdgeOne Pages / Cloudflare Pages / Vercel 一键部署
- KV 云端存储：数据持久化，localStorage 缓存 + KV 双向同步
- 安全管理：安全随机 Token 鉴权，支持密码过期时间配置
- AI 辅助：集成 Gemini / OpenAI 兼容 API，自动填充链接描述、智能分类建议
- 数据导入导出：Chrome 书签 HTML / JSON 备份 / WebDAV 云同步
- 丰富小组件：实时天气（和风天气）、Mastodon 动态滚动条
- 个性化：深色/浅色模式、紧凑/详细视图、自定义图标
┌─────────────────────────────────────────────┐
│ Browser (Client) │
│ │
│ React 19 + TypeScript + Tailwind CSS 4 │
│ State: Context + useReducer │
│ DnD: @dnd-kit │
│ Icons: lucide-react │
│ │
│ Data: localStorage (cache) + KV (persist) │
└──────────────────┬───────────────────────────┘
│ HTTP API
┌──────────────────┴───────────────────────────┐
│ Serverless Functions + KV │
│ │
│ EdgeOne Pages / Cloudflare Pages / Vercel │
│ CLOUDNAV_KV env.CLOUDNAV_KV @vercel/kv│
└──────────────────────────────────────────────┘
- Fork 或克隆本仓库
- 在 EdgeOne 控制台创建 Pages 项目
- 构建设置：
- 框架预设：
Vite - 输出目录：
./dist - 安装命令：
npm install - 编译命令：
npm run build
- 框架预设：
- 绑定 KV：
- 创建 KV 命名空间
- 变量名称：
CLOUDNAV_KV
- 环境变量：
PASSWORD：管理后台登录密码ALLOWED_ORIGIN：CORS 允许的域名（可选）
- 重新部署
- Fork 或克隆本仓库
- 在 Cloudflare Dashboard 创建 Pages 项目
- 构建设置同上
- 创建 KV Namespace：
- 进入 Workers & Pages → KV
- 创建命名空间，绑定变量名
CLOUDNAV_KV
- 环境变量：同上
- 部署
- Fork 或克隆本仓库
- 在 Vercel 导入项目
- 创建 Vercel KV 实例：
- 进入 Storage → Create → KV
- 自动注入
KV_REST_API_URL和KV_REST_API_TOKEN
- 环境变量：
PASSWORD - 部署
| 变量 | 说明 | 必填 | 默认值 |
|---|---|---|---|
PASSWORD |
管理后台登录密码 | 是 | - |
ALLOWED_ORIGIN |
CORS 允许的域名 | 否 | * |
# 安装依赖
npm install
# 启动开发服务器 (localhost:3000)
npm run dev
# 构建生产版本
npm run build
# 代码检查
npm run lint
# 类型检查
npm run type-check本地开发使用 src/utils/kvMock.ts 模拟 KV 存储，无需真实 KV 环境。
├── App.tsx # 应用入口（组合 Provider + Layout）
├── types.ts # TypeScript 类型定义
├── components/ # UI 组件
│ ├── layout/ # 布局（AppLayout, Sidebar, Header, MainContent）
│ ├── category/ # 分类（CategorySection）
│ ├── link/ # 链接（LinkCard, LinkGrid, PinnedSection）
│ └── *.tsx # Modal 等通用组件
├── src/
│ ├── contexts/ # React Context 状态管理
│ │ ├── AuthContext.tsx # 认证状态
│ │ ├── LinksContext.tsx # 链接数据
│ │ ├── CategoriesContext.tsx # 分类数据
│ │ ├── ConfigContext.tsx # 配置管理
│ │ └── AppProvider.tsx # 组合 Provider
│ ├── hooks/ # 自定义 Hooks
│ │ ├── useSearch.ts # 搜索逻辑
│ │ ├── useDragSort.ts # 拖拽排序
│ │ └── useDataSync.ts # 数据同步
│ ├── utils/ # 工具函数
│ │ ├── configManager.ts # 配置管理器
│ │ ├── security.ts # 安全工具
│ │ └── colorExtractor.ts # 颜色提取
│ ├── constants/ # 常量定义
│ └── *.css # 样式文件
├── services/ # 业务服务
│ ├── geminiService.ts # AI 服务
│ ├── bookmarkParser.ts # 书签解析
│ ├── exportService.ts # 导出服务
│ ├── webDavService.ts # WebDAV 服务
│ └── iconService.ts # 图标服务
├── functions/api/ # EdgeOne/Cloudflare Serverless Functions
│ ├── _kvAdapter.js # KV 平台适配层
│ ├── auth.js # 认证接口
│ ├── storage.js # 存储接口
│ ├── link.js # 链接添加接口
│ ├── webdav.js # WebDAV 代理
│ └── debug.js # 调试接口
├── api/ # Vercel Serverless Functions
│ ├── _kvHelper.ts # Vercel KV 辅助
│ ├── auth.ts
│ ├── storage.ts
│ ├── link.ts
│ └── webdav.ts
├── index.html # HTML 入口（含 SEO/CSP 配置）
├── vite.config.ts # Vite 构建配置
├── edgeone.json # EdgeOne Pages 配置
├── wrangler.toml # Cloudflare 配置
├── vercel.json # Vercel 配置
└── tsconfig.json # TypeScript 配置
本项目采用 MIT License 开源。