feat: 导航收藏网站 v1.0

功能:
- 网站收藏管理（添加/编辑/删除/收藏）
- 分类管理（支持自定义图标和颜色）
- 搜索功能
- 点击统计
- 现代暗色主题 UI

技术栈:
- 后端: Python Flask + MySQL
- 前端: React + Vite + Tailwind CSS
- 数据库: MySQL (192.168.8.160)
- 端口: 后端 5003, 前端 5173

frontend/src/App.jsx

@@ -0,0 +1,639 @@
+import React, { useState, useEffect } from 'react'
+import { 
+  Search, Plus, FolderOpen, Star, ExternalLink, 
+  Trash2, Edit3, X, Check, Globe, Bookmark,
+  MessageCircle, Code, Briefcase, Gamepad2, BookOpen, Folder
+} from 'lucide-react'
+import { categoryApi, websiteApi } from './api'
+
+// 图标映射
+const iconMap = {
+  'message-circle': MessageCircle,
+  'code': Code,
+  'briefcase': Briefcase,
+  'gamepad-2': Gamepad2,
+  'book-open': BookOpen,
+  'folder': Folder,
+  'globe': Globe,
+  'star': Star,
+}
+
+function App() {
+  const [categories, setCategories] = useState([])
+  const [websites, setWebsites] = useState([])
+  const [selectedCategory, setSelectedCategory] = useState(null)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [showAddModal, setShowAddModal] = useState(false)
+  const [showCategoryModal, setShowCategoryModal] = useState(false)
+  const [editingWebsite, setEditingWebsite] = useState(null)
+  const [editingCategory, setEditingCategory] = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  // 表单状态
+  const [websiteForm, setWebsiteForm] = useState({
+    name: '',
+    url: '',
+    icon: '',
+    description: '',
+    category_id: '',
+    is_favorite: false,
+  })
+  
+  const [categoryForm, setCategoryForm] = useState({
+    name: '',
+    icon: 'folder',
+    color: '#6366f1',
+  })
+
+  // 加载数据
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  const loadData = async () => {
+    setLoading(true)
+    try {
+      const [catRes, webRes] = await Promise.all([
+        categoryApi.getAll(),
+        websiteApi.getAll(),
+      ])
+      setCategories(catRes.data)
+      setWebsites(webRes.data)
+    } catch (error) {
+      console.error('加载数据失败:', error)
+    }
+    setLoading(false)
+  }
+
+  // 过滤网站
+  const filteredWebsites = websites.filter(site => {
+    const matchCategory = selectedCategory === null || site.category_id === selectedCategory
+    const matchSearch = searchQuery === '' || 
+      site.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      site.description.toLowerCase().includes(searchQuery.toLowerCase())
+    return matchCategory && matchSearch
+  })
+
+  // 收藏网站单独显示
+  const favoriteWebsites = filteredWebsites.filter(s => s.is_favorite)
+  const normalWebsites = filteredWebsites.filter(s => !s.is_favorite)
+
+  // 添加网站
+  const handleAddWebsite = async () => {
+    try {
+      await websiteApi.create({
+        ...websiteForm,
+        category_id: websiteForm.category_id || null,
+      })
+      setShowAddModal(false)
+      resetWebsiteForm()
+      loadData()
+    } catch (error) {
+      console.error('添加网站失败:', error)
+    }
+  }
+
+  // 更新网站
+  const handleUpdateWebsite = async () => {
+    try {
+      await websiteApi.update(editingWebsite.id, {
+        ...websiteForm,
+        category_id: websiteForm.category_id || null,
+      })
+      setEditingWebsite(null)
+      setShowAddModal(false)
+      resetWebsiteForm()
+      loadData()
+    } catch (error) {
+      console.error('更新网站失败:', error)
+    }
+  }
+
+  // 删除网站
+  const handleDeleteWebsite = async (id) => {
+    if (!confirm('确定要删除这个网站吗？')) return
+    try {
+      await websiteApi.delete(id)
+      loadData()
+    } catch (error) {
+      console.error('删除网站失败:', error)
+    }
+  }
+
+  // 切换收藏
+  const toggleFavorite = async (site) => {
+    try {
+      await websiteApi.update(site.id, { is_favorite: !site.is_favorite })
+      loadData()
+    } catch (error) {
+      console.error('切换收藏失败:', error)
+    }
+  }
+
+  // 点击网站
+  const handleClickWebsite = async (site) => {
+    try {
+      await websiteApi.click(site.id)
+      window.open(site.url, '_blank', 'noopener,noreferrer')
+    } catch (error) {
+      console.error('点击失败:', error)
+      window.open(site.url, '_blank', 'noopener,noreferrer')
+    }
+  }
+
+  // 重置表单
+  const resetWebsiteForm = () => {
+    setWebsiteForm({
+      name: '',
+      url: '',
+      icon: '',
+      description: '',
+      category_id: '',
+      is_favorite: false,
+    })
+  }
+
+  // 添加分类
+  const handleAddCategory = async () => {
+    try {
+      await categoryApi.create(categoryForm)
+      setShowCategoryModal(false)
+      setEditingCategory(null)
+      setCategoryForm({ name: '', icon: 'folder', color: '#6366f1' })
+      loadData()
+    } catch (error) {
+      console.error('添加分类失败:', error)
+    }
+  }
+
+  // 更新分类
+  const handleUpdateCategory = async () => {
+    try {
+      await categoryApi.update(editingCategory.id, categoryForm)
+      setEditingCategory(null)
+      setShowCategoryModal(false)
+      setCategoryForm({ name: '', icon: 'folder', color: '#6366f1' })
+      loadData()
+    } catch (error) {
+      console.error('更新分类失败:', error)
+    }
+  }
+
+  // 删除分类
+  const handleDeleteCategory = async (id) => {
+    if (!confirm('确定要删除这个分类吗？分类下的网站将变为未分类状态。')) return
+    try {
+      await categoryApi.delete(id)
+      if (selectedCategory === id) setSelectedCategory(null)
+      loadData()
+    } catch (error) {
+      console.error('删除分类失败:', error)
+    }
+  }
+
+  // 编辑网站
+  const openEditWebsite = (site) => {
+    setEditingWebsite(site)
+    setWebsiteForm({
+      name: site.name,
+      url: site.url,
+      icon: site.icon || '',
+      description: site.description || '',
+      category_id: site.category_id || '',
+      is_favorite: site.is_favorite,
+    })
+    setShowAddModal(true)
+  }
+
+  // 编辑分类
+  const openEditCategory = (cat) => {
+    setEditingCategory(cat)
+    setCategoryForm({
+      name: cat.name,
+      icon: cat.icon,
+      color: cat.color,
+    })
+    setShowCategoryModal(true)
+  }
+
+  // 获取网站图标
+  const getWebsiteIcon = (site) => {
+    if (site.icon && site.icon.startsWith('http')) {
+      return <img src={site.icon} alt="" className="w-8 h-8 rounded-lg object-cover" />
+    }
+    return <Globe className="w-8 h-8 text-indigo-400" />
+  }
+
+  // 渲染图标选择器
+  const renderIconPicker = () => {
+    const icons = ['folder', 'globe', 'star', 'message-circle', 'code', 'briefcase', 'gamepad-2', 'book-open']
+    return (
+      <div className="flex gap-2 flex-wrap">
+        {icons.map(icon => {
+          const IconComponent = iconMap[icon]
+          return (
+            <button
+              key={icon}
+              type="button"
+              onClick={() => setCategoryForm({...categoryForm, icon})}
+              className={`p-3 rounded-lg border-2 transition-all ${
+                categoryForm.icon === icon 
+                  ? 'border-indigo-500 bg-indigo-500/20' 
+                  : 'border-[#2a2f3a] hover:border-[#3a3f4a]'
+              }`}
+            >
+              <IconComponent className="w-5 h-5" />
+            </button>
+          )
+        })}
+      </div>
+    )
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-4 border-indigo-500 border-t-transparent"></div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-[#0d0f12]">
+      {/* 头部 */}
+      <header className="sticky top-0 z-40 glass border-b border-[#2a2f3a]">
+        <div className="max-w-7xl mx-auto px-4 py-4">
+          <div className="flex items-center justify-between gap-4">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 flex items-center justify-center">
+                <Bookmark className="w-5 h-5 text-white" />
+              </div>
+              <h1 className="text-xl font-bold gradient-text hidden sm:block">导航收藏夹</h1>
+            </div>
+            
+            {/* 搜索 */}
+            <div className="flex-1 max-w-md relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-[#64748b]" />
+              <input
+                type="text"
+                placeholder="搜索网站..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-10 pr-4 py-2.5 bg-[#1a1d24] border border-[#2a2f3a] rounded-xl text-[#f1f5f9] placeholder-[#64748b] transition-all"
+              />
+            </div>
+
+            {/* 操作按钮 */}
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => { setEditingCategory(null); setShowCategoryModal(true); setCategoryForm({ name: '', icon: 'folder', color: '#6366f1' }) }}
+                className="p-2.5 bg-[#1a1d24] border border-[#2a2f3a] rounded-xl hover:border-[#3a3f4a] transition-all btn-press"
+                title="添加分类"
+              >
+                <FolderOpen className="w-5 h-5 text-[#94a3b8]" />
+              </button>
+              <button
+                onClick={() => { setEditingWebsite(null); setShowAddModal(true); resetWebsiteForm() }}
+                className="flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-xl font-medium hover:opacity-90 transition-all btn-press"
+              >
+                <Plus className="w-5 h-5" />
+                <span className="hidden sm:inline">添加网站</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main className="max-w-7xl mx-auto px-4 py-6">
+        {/* 分类标签 */}
+        <div className="flex items-center gap-2 mb-8 overflow-x-auto pb-2">
+          <button
+            onClick={() => setSelectedCategory(null)}
+            className={`px-4 py-2 rounded-xl font-medium whitespace-nowrap transition-all ${
+              selectedCategory === null
+                ? 'bg-gradient-to-r from-indigo-500 to-purple-500 text-white'
+                : 'bg-[#1a1d24] text-[#94a3b8] hover:text-[#f1f5f9] border border-[#2a2f3a]'
+            }`}
+          >
+            全部
+          </button>
+          {categories.map(cat => {
+            const IconComponent = iconMap[cat.icon] || Folder
+            return (
+              <div
+                key={cat.id}
+                className="flex items-center gap-1 group"
+              >
+                <button
+                  onClick={() => setSelectedCategory(cat.id)}
+                  className={`flex items-center gap-2 px-4 py-2 rounded-xl font-medium whitespace-nowrap transition-all ${
+                    selectedCategory === cat.id
+                      ? 'text-white'
+                      : 'bg-[#1a1d24] text-[#94a3b8] hover:text-[#f1f5f9] border border-[#2a2f3a]'
+                  }`}
+                  style={selectedCategory === cat.id ? { background: `linear-gradient(135deg, ${cat.color}99, ${cat.color}66)` } : {}}
+                >
+                  <IconComponent className="w-4 h-4" style={{ color: cat.color }} />
+                  {cat.name}
+                </button>
+                <div className="hidden group-hover:flex items-center gap-1">
+                  <button
+                    onClick={() => openEditCategory(cat)}
+                    className="p-1 hover:bg-[#2a2f3a] rounded"
+                  >
+                    <Edit3 className="w-3 h-3 text-[#64748b]" />
+                  </button>
+                  <button
+                    onClick={() => handleDeleteCategory(cat.id)}
+                    className="p-1 hover:bg-red-500/20 rounded"
+                  >
+                    <Trash2 className="w-3 h-3 text-red-400" />
+                  </button>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+
+        {/* 收藏网站 */}
+        {favoriteWebsites.length > 0 && (
+          <section className="mb-8">
+            <h2 className="flex items-center gap-2 text-lg font-semibold text-[#f1f5f9] mb-4">
+              <Star className="w-5 h-5 text-yellow-500 fill-yellow-500" />
+              我的收藏
+            </h2>
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
+              {favoriteWebsites.map(site => (
+                <WebsiteCard
+                  key={site.id}
+                  site={site}
+                  onClick={() => handleClickWebsite(site)}
+                  onToggleFavorite={() => toggleFavorite(site)}
+                  onEdit={() => openEditWebsite(site)}
+                  onDelete={() => handleDeleteWebsite(site.id)}
+                  getIcon={getWebsiteIcon}
+                />
+              ))}
+            </div>
+          </section>
+        )}
+
+        {/* 普通网站 */}
+        {normalWebsites.length > 0 && (
+          <section>
+            <h2 className="text-lg font-semibold text-[#f1f5f9] mb-4">
+              {selectedCategory 
+                ? categories.find(c => c.id === selectedCategory)?.name 
+                : '全部网站'}
+              <span className="ml-2 text-[#64748b] font-normal">({normalWebsites.length})</span>
+            </h2>
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
+              {normalWebsites.map(site => (
+                <WebsiteCard
+                  key={site.id}
+                  site={site}
+                  onClick={() => handleClickWebsite(site)}
+                  onToggleFavorite={() => toggleFavorite(site)}
+                  onEdit={() => openEditWebsite(site)}
+                  onDelete={() => handleDeleteWebsite(site.id)}
+                  getIcon={getWebsiteIcon}
+                />
+              ))}
+            </div>
+          </section>
+        )}
+
+        {/* 空状态 */}
+        {filteredWebsites.length === 0 && (
+          <div className="text-center py-20">
+            <div className="w-20 h-20 mx-auto mb-4 rounded-2xl bg-[#1a1d24] flex items-center justify-center">
+              <Globe className="w-10 h-10 text-[#64748b]" />
+            </div>
+            <h3 className="text-xl font-semibold text-[#f1f5f9] mb-2">暂无网站</h3>
+            <p className="text-[#64748b] mb-6">点击上方按钮添加你的第一个收藏网站</p>
+            <button
+              onClick={() => { setEditingWebsite(null); setShowAddModal(true); resetWebsiteForm() }}
+              className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-xl font-medium hover:opacity-90 transition-all"
+            >
+              <Plus className="w-5 h-5" />
+              添加网站
+            </button>
+          </div>
+        )}
+      </main>
+
+      {/* 添加/编辑网站弹窗 */}
+      {showAddModal && (
+        <Modal onClose={() => { setShowAddModal(false); setEditingWebsite(null); resetWebsiteForm() }}>
+          <h2 className="text-xl font-bold text-[#f1f5f9] mb-6">
+            {editingWebsite ? '编辑网站' : '添加网站'}
+          </h2>
+          <form onSubmit={(e) => { e.preventDefault(); editingWebsite ? handleUpdateWebsite() : handleAddWebsite() }} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-[#94a3b8] mb-2">网站名称 *</label>
+              <input
+                type="text"
+                required
+                value={websiteForm.name}
+                onChange={(e) => setWebsiteForm({...websiteForm, name: e.target.value})}
+                className="w-full px-4 py-2.5 bg-[#15181f] border border-[#2a2f3a] rounded-xl text-[#f1f5f9]"
+                placeholder="例如：GitHub"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-[#94a3b8] mb-2">网站链接 *</label>
+              <input
+                type="url"
+                required
+                value={websiteForm.url}
+                onChange={(e) => setWebsiteForm({...websiteForm, url: e.target.value})}
+                className="w-full px-4 py-2.5 bg-[#15181f] border border-[#2a2f3a] rounded-xl text-[#f1f5f9]"
+                placeholder="https://github.com"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-[#94a3b8] mb-2">图标链接（可选）</label>
+              <input
+                type="url"
+                value={websiteForm.icon}
+                onChange={(e) => setWebsiteForm({...websiteForm, icon: e.target.value})}
+                className="w-full px-4 py-2.5 bg-[#15181f] border border-[#2a2f3a] rounded-xl text-[#f1f5f9]"
+                placeholder="https://example.com/favicon.ico"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-[#94a3b8] mb-2">描述</label>
+              <input
+                type="text"
+                value={websiteForm.description}
+                onChange={(e) => setWebsiteForm({...websiteForm, description: e.target.value})}
+                className="w-full px-4 py-2.5 bg-[#15181f] border border-[#2a2f3a] rounded-xl text-[#f1f5f9]"
+                placeholder="简短描述（可选）"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-[#94a3b8] mb-2">分类</label>
+              <select
+                value={websiteForm.category_id}
+                onChange={(e) => setWebsiteForm({...websiteForm, category_id: e.target.value})}
+                className="w-full px-4 py-2.5 bg-[#15181f] border border-[#2a2f3a] rounded-xl text-[#f1f5f9]"
+              >
+                <option value="">未分类</option>
+                {categories.map(cat => (
+                  <option key={cat.id} value={cat.id}>{cat.name}</option>
+                ))}
+              </select>
+            </div>
+            <div className="flex items-center gap-3">
+              <input
+                type="checkbox"
+                id="favorite"
+                checked={websiteForm.is_favorite}
+                onChange={(e) => setWebsiteForm({...websiteForm, is_favorite: e.target.checked})}
+                className="w-5 h-5 rounded border-[#2a2f3a] bg-[#15181f] text-indigo-500 focus:ring-indigo-500"
+              />
+              <label htmlFor="favorite" className="text-[#94a3b8]">添加到收藏</label>
+            </div>
+            <div className="flex gap-3 pt-4">
+              <button
+                type="button"
+                onClick={() => { setShowAddModal(false); setEditingWebsite(null); resetWebsiteForm() }}
+                className="flex-1 px-4 py-2.5 bg-[#1a1d24] border border-[#2a2f3a] rounded-xl text-[#94a3b8] hover:text-[#f1f5f9] transition-all"
+              >
+                取消
+              </button>
+              <button
+                type="submit"
+                className="flex-1 px-4 py-2.5 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-xl font-medium hover:opacity-90 transition-all"
+              >
+                {editingWebsite ? '保存' : '添加'}
+              </button>
+            </div>
+          </form>
+        </Modal>
+      )}
+
+      {/* 添加/编辑分类弹窗 */}
+      {showCategoryModal && (
+        <Modal onClose={() => { setShowCategoryModal(false); setEditingCategory(null) }}>
+          <h2 className="text-xl font-bold text-[#f1f5f9] mb-6">
+            {editingCategory ? '编辑分类' : '添加分类'}
+          </h2>
+          <form onSubmit={(e) => { e.preventDefault(); editingCategory ? handleUpdateCategory() : handleAddCategory() }} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-[#94a3b8] mb-2">分类名称 *</label>
+              <input
+                type="text"
+                required
+                value={categoryForm.name}
+                onChange={(e) => setCategoryForm({...categoryForm, name: e.target.value})}
+                className="w-full px-4 py-2.5 bg-[#15181f] border border-[#2a2f3a] rounded-xl text-[#f1f5f9]"
+                placeholder="例如：社交媒体"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-[#94a3b8] mb-2">图标</label>
+              {renderIconPicker()}
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-[#94a3b8] mb-2">颜色</label>
+              <input
+                type="color"
+                value={categoryForm.color}
+                onChange={(e) => setCategoryForm({...categoryForm, color: e.target.value})}
+                className="w-full h-12 bg-[#15181f] border border-[#2a2f3a] rounded-xl cursor-pointer"
+              />
+            </div>
+            <div className="flex gap-3 pt-4">
+              <button
+                type="button"
+                onClick={() => { setShowCategoryModal(false); setEditingCategory(null) }}
+                className="flex-1 px-4 py-2.5 bg-[#1a1d24] border border-[#2a2f3a] rounded-xl text-[#94a3b8] hover:text-[#f1f5f9] transition-all"
+              >
+                取消
+              </button>
+              <button
+                type="submit"
+                className="flex-1 px-4 py-2.5 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-xl font-medium hover:opacity-90 transition-all"
+              >
+                {editingCategory ? '保存' : '添加'}
+              </button>
+            </div>
+          </form>
+        </Modal>
+      )}
+    </div>
+  )
+}
+
+// 网站卡片组件
+function WebsiteCard({ site, onClick, onToggleFavorite, onEdit, onDelete, getIcon }) {
+  return (
+    <div className="group relative bg-[#1a1d24] border border-[#2a2f3a] rounded-2xl p-4 card-hover cursor-pointer" onClick={onClick}>
+      {/* 操作按钮 */}
+      <div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity z-10">
+        <button
+          onClick={(e) => { e.stopPropagation(); onToggleFavorite() }}
+          className={`p-1.5 rounded-lg transition-colors ${site.is_favorite ? 'bg-yellow-500/20 text-yellow-500' : 'bg-[#2a2f3a] text-[#64748b] hover:text-yellow-500'}`}
+        >
+          <Star className={`w-3.5 h-3.5 ${site.is_favorite ? 'fill-yellow-500' : ''}`} />
+        </button>
+        <button
+          onClick={(e) => { e.stopPropagation(); onEdit() }}
+          className="p-1.5 bg-[#2a2f3a] rounded-lg text-[#64748b] hover:text-indigo-400 transition-colors"
+        >
+          <Edit3 className="w-3.5 h-3.5" />
+        </button>
+        <button
+          onClick={(e) => { e.stopPropagation(); onDelete() }}
+          className="p-1.5 bg-[#2a2f3a] rounded-lg text-[#64748b] hover:text-red-400 transition-colors"
+        >
+          <Trash2 className="w-3.5 h-3.5" />
+        </button>
+      </div>
+
+      {/* 图标 */}
+      <div className="mb-3">
+        {getIcon(site)}
+      </div>
+
+      {/* 信息 */}
+      <h3 className="font-semibold text-[#f1f5f9] truncate mb-1">{site.name}</h3>
+      {site.description && (
+        <p className="text-sm text-[#64748b] truncate">{site.description}</p>
+      )}
+      {site.category && (
+        <span 
+          className="inline-block mt-2 px-2 py-0.5 rounded-md text-xs font-medium"
+          style={{ 
+            backgroundColor: `${site.category.color}20`,
+            color: site.category.color 
+          }}
+        >
+          {site.category.name}
+        </span>
+      )}
+
+      {/* 外部链接图标 */}
+      <div className="absolute bottom-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+        <ExternalLink className="w-4 h-4 text-[#64748b]" />
+      </div>
+    </div>
+  )
+}
+
+// 弹窗组件
+function Modal({ children, onClose }) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 modal-backdrop animate-fade-in" onClick={onClose}>
+      <div 
+        className="w-full max-w-md bg-[#1a1d24] border border-[#2a2f3a] rounded-2xl p-6 animate-scale-in"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default App

frontend/src/api/index.js

@@ -0,0 +1,38 @@
+import axios from 'axios'
+
+const API_BASE = '/api'
+
+const api = axios.create({
+  baseURL: API_BASE,
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+})
+
+// 分类 API
+export const categoryApi = {
+  getAll: () => api.get('/categories'),
+  create: (data) => api.post('/categories', data),
+  update: (id, data) => api.put(`/categories/${id}`, data),
+  delete: (id) => api.delete(`/categories/${id}`),
+}
+
+// 网站 API
+export const websiteApi = {
+  getAll: (categoryId) => {
+    const params = categoryId ? { category_id: categoryId } : {}
+    return api.get('/websites', { params })
+  },
+  create: (data) => api.post('/websites', data),
+  update: (id, data) => api.put(`/websites/${id}`, data),
+  delete: (id) => api.delete(`/websites/${id}`),
+  click: (id) => api.post(`/websites/${id}/click`),
+}
+
+// 健康检查
+export const healthApi = {
+  check: () => api.get('/health'),
+}
+
+export default api

frontend/src/index.css

@@ -0,0 +1,95 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --bg-primary: #0d0f12;
+  --bg-secondary: #15181f;
+  --bg-card: #1a1d24;
+  --bg-hover: #1e293b;
+  --text-primary: #f1f5f9;
+  --text-secondary: #94a3b8;
+  --text-muted: #64748b;
+  --border-color: #2a2f3a;
+  --accent: #6366f1;
+  --accent-hover: #818cf8;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
+body {
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  min-height: 100vh;
+}
+
+/* Glass effect */
+.glass {
+  background: rgba(26, 29, 36, 0.8);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--border-color);
+}
+
+/* Card hover effect */
+.card-hover {
+  transition: all 0.2s ease;
+}
+
+.card-hover:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+  border-color: var(--accent);
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--bg-hover);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #334155;
+}
+
+/* Input focus */
+input:focus, textarea:focus, select:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+}
+
+/* Button press effect */
+.btn-press:active {
+  transform: scale(0.97);
+}
+
+/* Modal backdrop */
+.modal-backdrop {
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+}
+
+/* Gradient text */
+.gradient-text {
+  background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)