197 lines
4.6 KiB
Markdown
197 lines
4.6 KiB
Markdown
# 官网首页和帮助中心页面说明
|
||
|
||
## 新增页面
|
||
|
||
本次为系统添加了两个全新的对外页面，无需登录即可访问：
|
||
|
||
### 1. 官网首页 (`/home`)
|
||
|
||
**功能特点：**
|
||
- 🎨 现代化的渐变背景设计
|
||
- 📱 响应式布局，适配各种设备
|
||
- 🎯 清晰的功能特性展示区域
|
||
- 📊 数据中心关键指标展示
|
||
- 🔗 快速导航到登录系统和帮助中心
|
||
- 💬 完整的页脚信息
|
||
|
||
**主要板块：**
|
||
1. **顶部导航栏** - 包含 Logo、导航链接和登录按钮
|
||
2. **Banner 区域** - 醒目的标题和行动号召按钮
|
||
3. **功能特性** - 6 个核心功能卡片展示
|
||
4. **数据中心** - 关键运行指标统计
|
||
5. **行动号召** - 引导用户登录或查看帮助
|
||
6. **页脚** - 版权信息和快速链接
|
||
|
||
**访问方式：**
|
||
- 直接访问：`http://your-domain/#/home`
|
||
- 根路径自动重定向到首页
|
||
|
||
### 2. 帮助中心页面 (`/help`)
|
||
|
||
**功能特点：**
|
||
- 🔍 文档搜索功能
|
||
- 📑 左侧分类导航菜单
|
||
- ❓ 常见问题 FAQ（折叠面板）
|
||
- 📖 使用指南卡片
|
||
- 📥 操作手册下载
|
||
- 📞 联系方式展示
|
||
|
||
**主要内容：**
|
||
1. **常见问题** - 8 个典型问题的问答
|
||
2. **使用指南** - 6 个分类的详细教程
|
||
- 快速入门
|
||
- 仪表盘
|
||
- 告警管理
|
||
- 数据中心
|
||
- 报表分析
|
||
- 系统设置
|
||
3. **操作手册** - 可下载的文档资料
|
||
4. **联系我们** - 电话、邮件、在线客服
|
||
|
||
**访问方式：**
|
||
- 直接访问：`http://your-domain/#/help`
|
||
- 从首页导航点击"帮助中心"
|
||
|
||
## 技术实现
|
||
|
||
### 文件结构
|
||
|
||
```
|
||
src/
|
||
├── views/
|
||
│ ├── home/ # 官网首页
|
||
│ │ └── index.vue
|
||
│ └── help/ # 帮助中心
|
||
│ └── index.vue
|
||
├── layout/
|
||
│ └── standalone-layout.vue # 独立布局（无侧边栏）
|
||
└── router/
|
||
├── index.ts # 路由配置
|
||
└── constants.ts # 路由常量（白名单）
|
||
```
|
||
|
||
### 路由配置
|
||
|
||
```typescript
|
||
// 根路径配置
|
||
{
|
||
path: '/',
|
||
name: 'root',
|
||
component: () => import('@/layout/standalone-layout.vue'),
|
||
redirect: '/home',
|
||
children: [
|
||
{
|
||
path: '/home',
|
||
name: 'Home',
|
||
component: () => import('@/views/home/index.vue'),
|
||
meta: { requiresAuth: false }
|
||
},
|
||
{
|
||
path: '/help',
|
||
name: 'Help',
|
||
component: () => import('@/views/help/index.vue'),
|
||
meta: { requiresAuth: false }
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 权限控制
|
||
|
||
- 两个页面都设置了 `requiresAuth: false`，无需登录即可访问
|
||
- 已添加到路由白名单 `WHITE_LIST` 中
|
||
- 使用独立的 `standalone-layout`，不显示系统的导航栏和侧边栏
|
||
|
||
## 自定义内容
|
||
|
||
### 修改公司信息
|
||
|
||
在两个页面的页脚部分，可以修改：
|
||
- 版权信息
|
||
- 联系方式（电话、邮箱）
|
||
- 公司地址
|
||
|
||
### 添加更多帮助文档
|
||
|
||
编辑 `help/index.vue` 中的数据：
|
||
|
||
```typescript
|
||
// 添加 FAQ
|
||
const faqs = ref([
|
||
{
|
||
question: '您的问题',
|
||
answer: '您的答案',
|
||
category: '分类'
|
||
}
|
||
])
|
||
|
||
// 添加使用指南
|
||
const guides = ref([
|
||
{
|
||
id: 1,
|
||
title: '指南标题',
|
||
description: '描述',
|
||
icon: '图标',
|
||
category: '分类',
|
||
categoryName: '分类名称',
|
||
updatedAt: '更新日期'
|
||
}
|
||
])
|
||
```
|
||
|
||
### 修改配色方案
|
||
|
||
页面使用了 Arco Design 的设计令牌（Design Tokens），可以通过修改主题变量来调整配色：
|
||
|
||
```less
|
||
// 主要颜色
|
||
rgb(var(--primary-6)) // 主色调
|
||
rgb(var(--success-6)) // 成功色
|
||
rgb(var(--warning-6)) // 警告色
|
||
```
|
||
|
||
## 登录页面优化
|
||
|
||
在登录页面右上角添加了"访问官网首页"按钮，方便用户在登录前了解系统功能。
|
||
|
||
## 下一步建议
|
||
|
||
1. **添加真实数据** - 将演示数据替换为实际的帮助文档
|
||
2. **集成客服系统** - 接入第三方在线客服工具
|
||
3. **添加视频教学** - 在帮助中心增加视频教程
|
||
4. **SEO 优化** - 添加 meta 标签、title 等 SEO 元素
|
||
5. **多语言支持** - 如果需要，可以添加国际化支持
|
||
6. **访问统计** - 集成网站分析工具（如百度统计、Google Analytics）
|
||
|
||
## 运行项目
|
||
|
||
```bash
|
||
# 安装依赖
|
||
pnpm install
|
||
|
||
# 启动开发服务器
|
||
pnpm dev
|
||
|
||
# 构建生产版本
|
||
pnpm build
|
||
```
|
||
|
||
## 浏览器兼容性
|
||
|
||
- ✅ Chrome (推荐)
|
||
- ✅ Firefox
|
||
- ✅ Edge
|
||
- ✅ Safari
|
||
- ⚠️ IE11（需要额外 polyfill）
|
||
|
||
## 注意事项
|
||
|
||
1. 确保 logo 文件路径正确（`@/assets/logo.svg`）
|
||
2. 如果部署在子目录，需要调整路由的 base 配置
|
||
3. 如需启用 SSR 或 SEO，建议使用 Vue Router 的 history 模式
|
||
4. 生产环境部署时，确保服务器正确处理 hash 路由
|
||
|
||
---
|
||
|
||
如有任何问题或需要进一步的技术支持，请联系开发团队。
|