logo
1
0
WeChat Login

桂子面板静态版

这是一个仿桂子面板的静态Web应用,实现了桂子面板的核心功能和界面。

功能特点

  • 登录验证:使用 sessionStorage 进行会话管理,只有账号密码正确才能进入页面
  • 仪表盘:显示系统状态、资源使用情况、快捷操作和操作日志
  • 网站管理:添加、编辑、删除网站,查看网站列表和统计信息
  • 数据库管理:添加、备份、删除数据库,查看 MySQL 信息
  • 文件管理:浏览、上传、编辑、删除文件,支持文件夹操作
  • 设置中心:基本设置、安全设置、系统设置、通知设置、备份设置

登录信息

  • 用户名: admin
  • 密码: qwer123456!

项目结构

. ├── index.html # 登录页面 ├── dashboard.html # 仪表盘 ├── sites.html # 网站管理 ├── database.html # 数据库管理 ├── files.html # 文件管理 ├── settings.html # 设置 ├── css/ │ ├── login.css # 登录页面样式 │ ├── main.css # 主面板通用样式 │ ├── dashboard.css # 仪表盘样式 │ ├── sites.css # 网站管理样式 │ ├── database.css # 数据库管理样式 │ ├── files.css # 文件管理样式 │ └── settings.css # 设置样式 └── js/ ├── common.js # 公共工具函数 ├── login.js # 登录页面逻辑 ├── dashboard.js # 仪表盘逻辑 ├── sites.js # 网站管理逻辑 ├── database.js # 数据库管理逻辑 ├── files.js # 文件管理逻辑 └── settings.js # 设置逻辑

使用说明

  1. 直接在浏览器中打开 index.html 文件
  2. 输入用户名 admin 和密码 qwer123456! 进行登录
  3. 登录成功后可以访问各个功能模块
  4. 点击右上角的"退出"按钮可以退出登录

技术特点

  • 纯静态:完全使用 HTML、CSS 和 JavaScript,无需后端服务器
  • 会话管理:使用 sessionStorage 进行登录状态验证
  • 响应式设计:适配各种屏幕尺寸
  • 现代化UI:采用桂子面板的经典设计风格
  • 交互体验:包含 Toast 提示、弹窗、表格等交互组件

注意事项

  • 这是一个静态演示版本,数据仅保存在浏览器内存中,刷新后会重置
  • 所有功能都是前端模拟,不会真正操作服务器
  • 生产环境需要配合后端服务器使用

About

小桂子面板

Language
HTML100%