BlackFruit-UI
黑果云 · 云服务商官网 & 控制台前端模板
开箱即用的全链路 UI 解决方案，覆盖品牌官网 + 客户控制台双场景
📋 简介
BlackFruit-UI 是一套面向云服务商的完整前端模板，包含两大核心模块：
| 模块 | 路径 | 框架 | 说明 |
|---|---|---|---|
| 品牌官网 | / (根目录) |
jQuery + Bootstrap 3 | 40+ 静态页面：首页、产品、解决方案、文档、新闻、合作伙伴等 |
| 客户控制台 | /clientarea/hgcloud/ |
Vue 2 + Element UI | 用户中心、订单管理、工单系统、服务管理等后台功能 |
所有页面兼容 Smarty / ThinkPHP 模板引擎语法（{include}、{if}、{foreach}），可直接嵌入现有 PHP 业务系统。
🏗 项目结构
BlackFruit-UI/
├── index.html # 官网首页
├── header.html # 公共 <head> 模板（含 SSR 配置注入）
├── footer.html # 公共底部入口
├── public/
│ ├── header.html # 导航栏组件（支持多级菜单）
│ └── footer.html # 页脚组件（备案/友链/联系方式）
│
├── common/ # 全局公共资源
│ ├── common.js # 登录态、导航交互、全局配置
│ ├── reset.css # CSS Reset
│ ├── style.css # 基础布局
│ ├── theme.css # 主题变量（颜色/字体）
│ └── common.css # 导航/页脚/浮窗等通用样式
│
├── css/ # 页面级样式 + LESS 源文件
├── js/ # 页面级脚本
│ ├── tools.js # 登录状态同步、Swiper 初始化
│ ├── index.js # 首页轮播/荣誉/新闻
│ ├── i18n.js # 中英多语言切换
│ ├── ai.js # AI 知识库插件加载器
│ ├── float-widget.js # 侧边浮窗（客服/二维码等）
│ └── nav-third-level.js # 三级导航菜单交互
│
├── assets/
│ ├── img/ # 按模块分类的图片资源
│ ├── font/ # IconFont 字体文件
│ └── country/ # 国旗图标（用于区域选择）
│
├── vender/ # 第三方依赖
│ ├── jQuery/ # jQuery 3.5.1
│ ├── bootstrap/ # Bootstrap 3.x
│ ├── swiper/ # Swiper 轮播
│ └── animate/ # Animate.css
│
├── clientarea/hgcloud/ # 【控制台】Vue 2 + Element UI
│ ├── components/ # Vue 组件（topMenu/sidebar 等）
│ ├── css/
│ │ ├── common/common.css # 控制台基础样式
│ │ └── dark-override.css # 布局覆盖（VMRack 风格）
│ └── header.php # 控制台公共头模板
│
├── solution/ # 行业解决方案详情页
├── partner/ # 代理/CPS 合作页面
├── plugins/ # 后端插件模板
├── .drone.yml # Drone CI/CD 配置
└── favicon.ico
🎨 官网页面一览
| 模块 | 页面 | 说明 |
|---|---|---|
| 首页 & 品牌 | index.html · about.html |
Banner 轮播、产品入口、荣誉资质、新闻公告 |
| 云产品 | cloud.html · dedicated.html · rent.html · trusteeship.html |
云服务器、物理机、GPU 租赁、服务器托管 |
| 增值服务 | sms.html · ssl.html · icp.html · trademark.html |
短信服务、SSL 证书、ICP 备案、商标注册 |
| 域名 | domain.html · domain_buy.html · domain_register.html · domain_shop.html |
域名查询、注册、购买（支持插件模式） |
| 解决方案 | solution.html · solution/*.html |
8+ 行业方案：游戏、电商、教育、金融等 |
| 新闻 & 公告 | news.html · announce.html · *-details.html |
分类列表、分页、详情与推荐阅读 |
| 文档中心 | document.html · document-view.html · document-details.html |
搜索、分类、树形导航 |
| 合作伙伴 | partner/agent.html · partner/cps.html |
代理合作、CPS 推广（含流程/权益/FAQ） |
| 客户支持 | contact.html · feedback.html · service-guarantee.html |
联系我们、反馈、服务保障 |
| 营销活动 | activities.html |
限时秒杀、爆款特惠、优惠礼包 |
🖥 控制台（clientarea）
位于 clientarea/hgcloud/，基于 Vue 2 + Element UI 构建的用户管理后台。
布局特性
- CSS Grid 布局：顶栏全宽 + 侧边栏 / 内容区并排
- VMRack 风格：渐变背景 + 浮岛式磨砂玻璃面板
- 自适应设计：侧边栏 190px，内容区自动填充
核心文件
| 文件 | 说明 |
|---|---|
css/dark-override.css |
Grid 布局 + 磨砂玻璃样式覆盖 |
css/common/common.css |
控制台基础样式 |
components/topMenu/topMenu.js |
顶栏组件（Logo / 购物车 / 语言切换 / 用户菜单） |
header.php |
公共模板（CSS/JS 引入、loading 遮罩） |
🔌 接口约定
所有接口返回 { status: 200, data: { ... } }，鉴权使用 Authorization: Bearer <jwt>。
| 接口 | 方法 | 说明 |
|---|---|---|
/console/v1/account |
GET | 账户信息（用户名/头像） |
/console/v1/certification/info |
GET | 实名认证状态 |
/console/v1/common |
GET | 站点配置（Logo/电话/备案/友链等） |
/console/v1/news |
GET | 新闻列表（支持 page/limit） |
/console/v1/announcement |
GET | 公告列表 |
/console/v1/help |
GET | 文档中心（支持 keywords 搜索） |
/console/v1/consult |
POST | 咨询表单提交 |
/console/v1/feedback |
POST | 意见反馈提交 |
🚀 快速开始
本地预览
# 克隆项目
git clone <仓库地址>
cd BlackFruit-UI
# 启动本地服务（任选一种）
python3 -m http.server 8080
# 或
npx http-server -p 8080
# 浏览器访问
open http://localhost:8080
⚠️ 请勿使用
file://直接打开，AJAX 请求会因同源策略失败。
接口联调
# Nginx 反向代理示例
location /console/ {
proxy_pass http://backend:8080;
proxy_set_header Authorization $http_authorization;
}
调试登录态：在浏览器控制台执行 localStorage.jwt = "<测试 token>"。
部署
项目使用 Drone CI 自动部署（参见 .drone.yml）。推送到 main 分支后自动触发构建。
手动部署时，将整个目录同步到 Web Server 根目录即可，保持相对路径不变。
🛠 二次开发
修改导航
编辑 public/header.html，后端通过 $data.header_nav 注入菜单数据即可动态渲染。
新增产品页
- 复制
cloud.html并重命名 - 引入
css/product.css+js/product.js - 替换图文内容
主题定制
- 颜色/字体：修改
common/theme.css - 控制台风格：修改
clientarea/hgcloud/css/dark-override.css - LESS 编译：
lessc css/product.less css/product.css
插件扩展
在 <html> 标签设置 addons_js：
<!-- 启用 AI 知识库 -->
<html addons_js='[{"name":"AiKnowledge"}]'>
<!-- 启用域名插件 -->
<html addons_js='[{"name":"IdcsmartDomain"}]'>
📝 注意事项
- 缓存刷新：更新 CSS/JS 后，在
header.html中追加版本参数（如?v=202403） - 模板引擎：页面中的
{$variable}、{if}、{foreach}等语法需要 ThinkPHP/Smarty 解析 - 登录状态：基于
localStorage.jwt判断，JS 通过 inline style 控制显隐，CSS 中不要对.no-login/.login-in使用display: ... !important - Bootstrap 版本：项目使用 Bootstrap 3.x，不支持 Bootstrap 4+ 的工具类（如
d-none）
Made with ❤️ by 黑果云团队