// 核心逻辑演示：Dock 驱动的内容切换 import React, { useState } from 'react'; import { motion } from 'framer-motion'; const App = () => { const [activeSeries, setActiveSeries] = useState(0); // 模拟从数据库获取的该账号专属 Dock 数据 const myDockData = [ { id: 0, title: "灵感集", icon: "✨", color: "#FFD700", items: ["写一首关于秋天的诗", "配色方案 A"] }, { id: 1, title: "代码库", icon: "💻", color: "#61dafb", items: ["React Dock 组件实现", "CSS 磨砂玻璃特效"] }, { id: 2, title: "摄影志", icon: "📸", color: "#ff4d4d", items: ["日落构图技巧", "后期调色思路"] }, ]; return (

{/* 1. 当前系列内容展示区 (像手账本的页面) */}

{myDockData[activeSeries].icon} {myDockData[activeSeries].title}

{myDockData[activeSeries].items.map((item, idx) => (

{item}

))}

{/* 2. 个人专属 Dock 栏 */}

{myDockData.map((series) => ( setActiveSeries(series.id)} className="w-14 h-14 rounded-2xl text-2xl flex items-center justify-center shadow-sm" style={{ backgroundColor: series.color }} > {series.icon} ))}

); };