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 # 公共模板（含 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 `。 | 接口 | 方法 | 说明 | |------|------|------| | `/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 | 意见反馈提交 | --- ## 🚀 快速开始 ### 本地预览 ```bash # 克隆项目 git clone <仓库地址> cd BlackFruit-UI # 启动本地服务（任选一种） python3 -m http.server 8080 # 或 npx http-server -p 8080 # 浏览器访问 open http://localhost:8080 ``` > ⚠️ 请勿使用 `file://` 直接打开，AJAX 请求会因同源策略失败。 ### 接口联调 ```nginx # 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` 注入菜单数据即可动态渲染。 ### 新增产品页 1. 复制 `cloud.html` 并重命名 2. 引入 `css/product.css` + `js/product.js` 3. 替换图文内容 ### 主题定制 - 颜色/字体：修改 `common/theme.css` - 控制台风格：修改 `clientarea/hgcloud/css/dark-override.css` - LESS 编译：`lessc css/product.less css/product.css` ### 插件扩展在 `` 标签设置 `addons_js`： ```html ``` --- ## 📝 注意事项 - **缓存刷新**：更新 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 黑果云团队}