229 lines
8.9 KiB
Markdown
229 lines
8.9 KiB
Markdown
<p align="center">
|
||
<img src="assets/img/index/logo.png" alt="黑果云 Logo" height="60">
|
||
</p>
|
||
|
||
<h1 align="center">BlackFruit-UI</h1>
|
||
|
||
<p align="center">
|
||
<strong>黑果云 · 云服务商官网 & 控制台前端模板</strong><br>
|
||
开箱即用的全链路 UI 解决方案，覆盖品牌官网 + 客户控制台双场景
|
||
</p>
|
||
|
||
<p align="center">
|
||
<img src="https://img.shields.io/badge/jQuery-3.5.1-0769AD?logo=jquery&logoColor=white" alt="jQuery">
|
||
<img src="https://img.shields.io/badge/Bootstrap-3.x-7952B3?logo=bootstrap&logoColor=white" alt="Bootstrap">
|
||
<img src="https://img.shields.io/badge/Element_UI-2.x-409EFF?logo=element&logoColor=white" alt="Element UI">
|
||
<img src="https://img.shields.io/badge/Vue-2.x-4FC08D?logo=vuedotjs&logoColor=white" alt="Vue">
|
||
<img src="https://img.shields.io/badge/Template-Smarty/ThinkPHP-8DC813" alt="Template Engine">
|
||
<img src="https://img.shields.io/badge/License-Private-red" alt="License">
|
||
</p>
|
||
|
||
---
|
||
|
||
## 📋 简介
|
||
|
||
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 | 意见反馈提交 |
|
||
|
||
---
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 本地预览
|
||
|
||
```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`
|
||
|
||
### 插件扩展
|
||
|
||
在 `<html>` 标签设置 `addons_js`：
|
||
|
||
```html
|
||
<!-- 启用 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`）
|
||
|
||
---
|
||
|
||
<p align="center">
|
||
<sub>Made with ❤️ by 黑果云团队</sub>
|
||
</p>
|