登录页面的样式保存在以下位置：

主要文件：

• /components/login-page.tsx - 登录页面组件，包含左侧可视化插图和右侧表单的完整代码

提供给开发的方式：

1. 下载完整项目：点击右上角 "Publish" 或三个点菜单中的 "Download ZIP"，可下载整个项目代码

2. 单独复制组件：登录页面是一个独立组件 /components/login-page.tsx，包含约 400 行代码，使用了：

   • 左侧：CSS Grid布局、渐变背景、伪终端界面、浮动图标节点
   • 右侧：表单布局、shadcn/ui 组件（Button、Input、Card）
   • 图标：lucide-react 图标库

3. 相关依赖文件：

   • /app/page.tsx - 主页面（控制登录状态）
   • /components/header.tsx - 顶部导航（包含退出登录）
   • /app/globals.css - 全局样式
   • /components/ui/* - shadcn/ui 基础组件

如果开发人员需要单独集成登录页面，只需复制 login-page.tsx 并确保项目安装了 lucide-react 和 shadcn/ui 即可。

中心监控页面的样式保存在以下位置：

主要文件：

• /components/center-monitor.tsx - 中心监控页面组件，包含完整的监控面板代码（约 560 行）

组件结构：

• 顶部统计卡片（总站点数、在线站点、离线站点、异常项）
• 控制栏（搜索、刷新、设置）
• 四个可折叠监控板块（系统配置、服务状态、软件版本、网络状态）
• 每个监控项采用紧凑网格布局，显示名称和正常/异常计数

相关依赖文件：

• /app/page.tsx - 主页面路由（case "中心监控" 指向此组件）
• /components/ui/* - shadcn/ui 基础组件（Card, Button, Badge, Input, Dialog, Collapsible 等）
• /app/globals.css - 全局样式变量
• lucide-react - 图标库

提供给开发的方式：