# 官网首页和帮助中心页面说明

## 新增页面

本次为系统添加了两个全新的对外页面，无需登录即可访问：

### 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 路由

---

如有任何问题或需要进一步的技术支持，请联系开发团队。