Cola Search#

预览地址
开源仓库

🚀 项目自述#

Cola Search 定位于一个极具视觉表现力的开源小“废物”浏览器起始页。之所以叫它“废物”，是因为它摒弃了冗余的效率工具堆砌，转而追求极致的毛玻璃动态美学、丝滑的交互体验以及纯粹的聚合搜索功能。本文将深入复盘其基于 Next.js 16 与 Tailwind CSS 4 的技术选型与实现细节。

🏗️ 核心技术栈#

框架: Next.js 16 (App Router) & React 19
样式: Tailwind CSS 4 + OKLCH 颜色空间
交互: @dnd-kit (双层拖拽排序逻辑)
动画: View Transition API (圆周扩散主题切换)
持久化: localStorage (零后端依赖)

🛠️ 关键技术实现#

1. 深度毛玻璃与动画 (Design System)#

我们基于 Tailwind 4 的 OKLCH 引擎构建了高保真的 Glassmorphism 卡片系统。配合 View Transition API，实现了一个以点击坐标为中心的主题切换扩散动画。

2. 扑克牌式书签堆叠 (UI/UX)#

为了解决书签繁杂带来的视觉压力，我们开发了 BookmarkStack 组件。它通过 CSS Transform 将同类书签以扑克牌形式堆叠，点击后通过 createPortal 弹窗展开详细列表，兼顾了空间效率与动态美感。

3. 本地化图标管道 (Assets)#

为了确保图标加载的稳定性与离线可用性，系统采用了：

API 抓取: 自动获取网址对应的 64px 高清 Favicon。
Base64 缓存: 图标被转码为 Base64 并持久化在本地缓存槽中，实现瞬间渲染。

📦 部署教程#

Cola Search 作为一个静态化的 Next.js 项目，部署过程极其简单。

方案 A：快速部署（推荐 Vercel）#

Fork 本仓库 evanfu0110/mySearch。
登录 Vercel，选择 Import Project 并关联你的 GitHub 仓库。
保持默认配置，点击 Deploy 即可。

方案 B：手动部署（私有服务器）#

如果你希望在自己的服务器上运行，请遵循以下流程：

1
# 1. 克隆代码
2
git clone https://github.com/evanfu0110/mySearch.git
3
cd mySearch
4

5
# 2. 安装依赖 (推荐 pnpm)
6
pnpm install
7

8
# 3. 构建生产版本
9
pnpm build
10

11
# 4. 使用 PM2 守护进程运行
12
pm2 start npm --name "cola-search" -- start