[V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/login-form.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { User } from "lucide-react" interface LoginFormProps { onLogin: (userId: string, password: string) => void } export function LoginForm({ onLogin }: LoginFormProps) { const [userId, setUserId] = useState("") const [password, setPassword] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onLogin(userId, password) } return (

人机交互模块

) } [V0_FILE]typescriptreact:file="components/status-bar.tsx" "use client" import { useState, useEffect } from "react" import { Battery, Wifi, Signal } from "lucide-react" import { formatDate } from "@/lib/utils" interface StatusBarProps { onLogout?: () => void userId?: string } export function StatusBar({ onLogout, userId }: StatusBarProps) { const [currentTime, setCurrentTime] = useState(new Date()) const [batteryLevel, setBatteryLevel] = useState(100) const [wifiStrength, setWifiStrength] = useState(4) const [signalStrength, setSignalStrength] = useState(4) useEffect(() => { const timer = setInterval(() => { setCurrentTime(new Date()) }, 1000) return () => clearInterval(timer) }, []) const formattedDate = formatDate(currentTime) const formattedTime = currentTime.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit", hour12: false, }) return (

{formattedDate}

{formattedTime}

) } [V0_FILE]typescriptreact:file="components/charts.tsx" "use client" import { useEffect, useRef } from "react" interface ChartData { name: string value: number color?: string } interface PieChartProps { data: ChartData[] } export function PieChart({ data }: PieChartProps) { const canvasRef = useRef(null) useEffect(() => { if (!canvasRef.current) return const canvas = canvasRef.current const ctx = canvas.getContext("2d") if (!ctx) return // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height) // 计算总值 const total = data.reduce((sum, item) => sum + item.value, 0) // 绘制饼图 let startAngle = 0 const centerX = canvas.width / 2 const centerY = canvas.height / 2 const radius = Math.min(centerX, centerY) - 10 data.forEach((item) => { const sliceAngle = (2 * Math.PI * item.value) / total ctx.beginPath() ctx.moveTo(centerX, centerY) ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle) ctx.closePath() ctx.fillStyle = item.color || `hsl(${Math.random() * 360}, 70%, 50%)` ctx.fill() startAngle += sliceAngle }) // 绘制图例 const legendY = canvas.height - 20 let legendX = 10 data.forEach((item) => { ctx.fillStyle = item.color || `hsl(${Math.random() * 360}, 70%, 50%)` ctx.fillRect(legendX, legendY, 10, 10) ctx.fillStyle = "#000" ctx.font = "10px Arial" ctx.fillText(`${item.name}: ${item.value}%`, legendX + 15, legendY + 8) legendX += 100 }) }, [data]) return

药物配量速度

模式选择

电量调控

自动模式选择

任务剩余时间

快速入门指南

常见问题

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This