拾光 - 用好工具，留住好时光

拾光（Lumitime）是一个精心打造的软件与工具导航平台，致力于帮助用户发现和探索值得使用的优质工具。项目名称"拾光"寓意着在数字世界中拾取那些能够照亮工作与生活的好工具，让每一分时光都更有价值。

🌟 项目愿景

好工具，自有引力。

在信息过载的时代，我们相信真正优秀的工具能够自然地吸引用户，改善工作流程，提升生活品质。拾光的使命是精心挑选这些工具，用优雅的方式呈现给需要的人。

✨ 核心特性

🎯 精选工具库

拾光涵盖六大类别的精选软件和工具：

效率办公：Notion、Raycast、Linear、Obsidian 等笔记、知识管理和项目协作工具
设计创意：Figma、Framer 等界面设计、原型制作和网站构建工具
AI 工具：ChatGPT、Claude 等 AI 助手，辅助写作、编程和思维探索
开发工具：Visual Studio Code 等代码编辑器和开发环境
影音娱乐：Spotify 等音乐和播客平台
系统工具：Arc 浏览器、1Password 密码管理等实用工具

🔍 智能搜索与筛选

快捷键支持（⌘K / Ctrl+K）快速聚焦搜索
实时搜索过滤，即时展示匹配结果
按类别、平台、定价模式筛选工具
标签系统帮助用户精准定位需求

🎨 精美的视觉设计

沉浸式界面：采用壁纸背景和毛玻璃效果，营造舒适的浏览氛围
流畅动画：基于 Motion（Framer Motion）实现的细腻交互动效
深色模式：完整的明暗主题支持，自动适配系统偏好
响应式布局：完美适配桌面端和移动端设备
无障碍设计：遵循可访问性标准，支持键盘导航和屏幕阅读器

⚙️ 个性化设置

深色/浅色主题切换
动画效果开关（尊重系统减少动画偏好）
背景壁纸显示控制
设置实时生效，无需刷新

🛠️ 技术架构

核心技术栈

框架：Next.js 16.3.3（App Router）- 最新的 React 框架，提供出色的性能和开发体验
UI 库：React 19 - 最新的 React 版本，支持并发渲染和服务器组件
语言：TypeScript 5.7.3 - 类型安全，提升代码质量和开发效率
样式：Tailwind CSS v4 - 实用优先的 CSS 框架，快速构建现代界面

UI 组件与设计系统

shadcn/ui：高质量的可复制组件库
Base UI：无障碍的底层 UI 组件
Lucide React：一致性极佳的图标库
Motion：流畅的动画解决方案

开发工具链

包管理器：pnpm - 快速、节省磁盘空间的包管理工具
部署：PM2 - 生产级 Node.js 进程管理器
分析：Vercel Analytics - 实时数据分析和性能监控

工具库设计

class-variance-authority：组件变体管理
tailwind-merge + clsx：智能样式类合并
tw-animate-css：Tailwind 动画扩展

📦 项目结构

Lumitime/
├── app/                    # Next.js App Router
│   ├── layout.tsx         # 根布局（字体、元数据、分析）
│   ├── page.tsx           # 首页入口
│   └── globals.css        # 全局样式
├── components/
│   ├── discovery/         # 核心业务组件
│   │   ├── discovery.tsx  # 主容器组件
│   │   ├── header.tsx     # 导航栏与搜索
│   │   ├── hero.tsx       # Hero 区域
│   │   ├── collections.tsx # 工具分类卡片
│   │   ├── app-library.tsx # 应用库网格
│   │   ├── app-icon.tsx   # 应用图标组件
│   │   ├── dialogs.tsx    # 弹窗组件
│   │   └── ...
│   └── ui/                # 通用 UI 组件
├── lib/
│   ├── software.ts        # 工具数据与类型定义
│   └── utils.ts           # 工具函数
├── public/
│   └── images/            # 图片资源
└── 配置文件

🎯 核心功能实现

1. 工具数据管理

每个工具包含以下信息：

基础信息：名称、图标、分类、描述
详细介绍：功能特点、使用场景
平台支持：macOS、Windows、Linux、iOS、Android、Web
定价模式：免费、免费增值、付费
标签系统：便于搜索和筛选
精选标记：突出展示优质工具

2. 搜索与过滤

使用 useDeferredValue 优化搜索性能，避免频繁渲染
支持工具名称、描述、标签的模糊匹配
多维度筛选：分类 + 搜索关键词组合
快捷键全局监听（⌘K / Ctrl+K）

3. 主题与动画

主题状态管理：通过 dark 类切换深浅色模式
动画配置：全局 MotionConfig 控制动画行为
减弱动画支持：尊重用户系统的 prefers-reduced-motion 设置
过渡效果：Spring 动画配置（stiffness: 300, damping: 28）

4. 性能优化

图片优化：使用 Next.js Image 组件，自动优化和懒加载
搜索防抖：useDeferredValue 延迟非关键更新
条件渲染：对话框打开时添加特定样式类，避免不必要的重渲染
代码分割：Next.js 自动分割路由和组件

🎨 设计理念

视觉语言

毛玻璃效果：营造层次感和现代感
柔和渐变：背景和卡片使用微妙的渐变
圆角设计：友好、现代的视觉风格
留白呼吸：合理的间距让内容更易读

交互设计

即时反馈：hover、focus 状态的微妙变化
平滑过渡：页面滚动和状态切换使用缓动动画
键盘友好：完整的键盘导航支持
无障碍：语义化 HTML、ARIA 标签、跳转链接

内容策略

精简文案：每个工具的描述简洁有力，传达核心价值
诚实透明：标注定价模式、平台支持和使用注意事项
情感连接：用温暖的语言描述工具，而非冷冰冰的功能列表

🚀 部署与运行

开发环境

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 访问 http://localhost:3000

生产部署

# 构建生产版本
pnpm build

# 使用 PM2 启动
pm2 start ecosystem.config.cjs

# 或使用 Next.js 内置服务器
pnpm start

📖 使用场景

个人用户

寻找适合自己工作流程的效率工具
发现新的设计软件和 AI 助手
探索不同平台的应用生态
对比工具的定价和功能

团队协作

统一团队的工具选型
快速查找特定类别的解决方案
为新成员推荐标准工具栈

内容创作者

制作工具推荐内容的参考
了解工具的核心卖点和描述方式

🌈 未来规划

📊 工具对比功能：并排对比多个工具的特性
💬 用户评价系统：社区分享使用体验
🔗 工具关系图谱：展示工具之间的替代和互补关系
📱 工作流推荐：根据使用场景推荐工具组合
🌍 多语言支持：国际化扩展
🎁 工具更新追踪：订阅感兴趣工具的更新动态

💡 设计哲学

拾光的设计遵循以下原则：

内容为王：优秀的工具是核心，界面为内容服务
简洁优雅：去除不必要的装饰，保留有价值的设计细节
用户尊重：尊重用户的系统偏好和使用习惯
性能优先：快速加载和流畅交互是基本要求
持续进化：工具库和功能不断更新和完善

📝 技术亮点

1. 类型安全

完整的 TypeScript 类型定义，从工具数据到组件 props，确保代码质量和开发体验。

2. 现代 React 实践

React 19 的并发特性（useDeferredValue）
函数式组件和 Hooks
受控组件和状态提升
合理的组件拆分和复用

3. Next.js App Router

服务器组件和客户端组件的合理划分
元数据 API（Metadata、Viewport）
Google Fonts 优化加载
自动代码分割和优化

4. CSS 架构

Tailwind CSS v4 的实用类
CSS 变量管理主题
组件变体管理（CVA）
响应式设计系统

🎓 学习价值

拾光项目展示了以下技术实践：

✅ Next.js 16 + React 19 最新特性应用
✅ TypeScript 严格模式的类型设计
✅ Tailwind CSS v4 的组件化实践
✅ 性能优化策略（图片、搜索、动画）
✅ 无障碍设计的完整实现
✅ 现代化的组件设计模式
✅ 生产环境部署配置（PM2）

🔗 相关链接

在线访问：待部署
作者主页：喵喵的小窝
技术文档：参见项目 README.md

拾光，用好工具，留住好时光。✨

本文档创建于 2026-09-11 | 基于项目实际代码和功能编写