未来科技-Windows 13风格界面

1.先看效果

2.源代码（TypeScript和React组件）

import React, { useState, useEffect } from 'react'

import { Button } from "@/components/ui/button"

import { Input } from "@/components/ui/input"


// 图标组件

const Icon = ({ name }: { name: string }) => {

const iconStyle = "w-6 h-6 flex items-center justify-center text-white bg-blue-500 rounded-sm";

return (

{name.charAt(0).toUpperCase()}

);

};


// 应用窗口组件

const AppWindow = ({ app, onClose, onMinimize, onMaximize, isActive, setActiveApp }) => {

const [content, setContent] = useState(app.content || "");

const [isMaximized, setIsMaximized] = useState(false);


const handleMaximize = () => {

setIsMaximized(!isMaximized);

onMaximize();

};


return (

className={`absolute bg-white shadow-lg rounded-lg overflow-hidden ${

isMaximized ? 'w-full h-full top-0 left-0' : 'w-96 h-64'

} ${isActive ? 'z-10' : 'z-0'}`}

style={!isMaximized ? {top: `${50 + app.id * 30}px`, left: `${50 + app.id * 30}px`} : {}}

onClick={() => setActiveApp(app.id)}

>

{app.name}

{app.name === "Notepad" && (