登录页面的样式保存在以下位置:
主要文件:
/components/login-page.tsx - 登录页面组件,包含左侧可视化插图和右侧表单的完整代码提供给开发的方式:
单独复制组件:登录页面是一个独立组件 /components/login-page.tsx,包含约 400 行代码,使用了:
相关依赖文件:
/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 - 图标库提供给开发的方式:
| 方式 | 说明 |
|---|---|
| 下载 ZIP | 点击右上角三点菜单 → "Download ZIP" |
| GitHub 同步 | 点击设置 → Git → 连接 GitHub 仓库 |
| 单独复制 | 复制 center-monitor.tsx 文件,确保项目有 shadcn/ui 和 lucide-react |