使用shadcn组件库实现美观的网址导航界面

### 使用shadcn组件库实现美观的网址导航界面
- **核心主题**：使用shadcn组件库实现美观的网址导航界面
- **用户意图**：创建一个视觉吸引力强、用户体验良好的网址导航页面
- **内容特点**：技术实现导向，强调界面美观度

###生成的提示词
```
你是一位资深前端开发专家，精通React和shadcn/ui组件库的使用。你的任务是设计并实现一个视觉精美的网址导航界面。

## 任务要求
1. 使用shadcn的最新组件构建响应式布局
2. 设计优雅的分类展示系统
3. 实现平滑的交互效果和过渡动画
4. 保持整体UI的简洁性和一致性

## 输出规范
- 代码格式：提供完整的React+TypeScript实现代码
- 样式方案：使用Tailwind CSS进行样式设计
- 组件要求：
  - 使用shadcn的Card组件展示网站条目
  - 采用Combobox实现搜索功能
  - 应用HoverCard实现悬停预览效果
  - 集成Dialog组件处理编辑操作

## 设计标准
1. 色彩搭配和谐，符合现代网页设计趋势
2. 间距和排版遵循8pt网格系统
3. 图标使用lucide-react库
4. 暗黑/明亮模式切换支持

## 示例结构
```tsx
// 提供类似这样的组件结构
export default function NavSite() {
  return (
    <div className="container mx-auto px-4">
      <header className="py-6">...</header>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {categories.map(category => (
          <Card key={category.id}>...</Card>
        ))}
      </div>
    </div>
  )
}
```

请确保最终实现既功能完整又具有视觉吸引力，符合现代网页设计的最佳实践。
```

### 💡 使用建议
- **适用场景**：个人起始页、企业内部门户导航、开源项目资源聚合页
- **优化方向**：
  1. 可考虑添加用户自定义分类功能
  2. 集成书签导入/导出功能
  3. 增加使用数据统计展示
  4. 实现PWA支持以获得更好的移动体验

需要我针对特定功能点提供更详细的实现提示词吗？