ops/front

Fork 0

Files

yanweidonog d5388f3f08 add hemo,help

2026-03-21 10:26:44 +08:00

4.6 KiB

Raw Blame History

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

新增页面

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

1. 官网首页 (`/home`)

功能特点：

🎨 现代化的渐变背景设计
📱 响应式布局，适配各种设备
🎯 清晰的功能特性展示区域
📊 数据中心关键指标展示
🔗 快速导航到登录系统和帮助中心
💬 完整的页脚信息

主要板块：

顶部导航栏 - 包含 Logo、导航链接和登录按钮
Banner 区域 - 醒目的标题和行动号召按钮
功能特性 - 6 个核心功能卡片展示
数据中心 - 关键运行指标统计
行动号召 - 引导用户登录或查看帮助
页脚 - 版权信息和快速链接

访问方式：

直接访问：http://your-domain/#/home
根路径自动重定向到首页

2. 帮助中心页面 (`/help`)

功能特点：

🔍 文档搜索功能
📑 左侧分类导航菜单
❓ 常见问题 FAQ（折叠面板）
📖 使用指南卡片
📥 操作手册下载
📞 联系方式展示

主要内容：

常见问题 - 8 个典型问题的问答
使用指南 - 6 个分类的详细教程
- 快速入门
- 仪表盘
- 告警管理
- 数据中心
- 报表分析
- 系统设置
操作手册 - 可下载的文档资料
联系我们 - 电话、邮件、在线客服

访问方式：

直接访问：http://your-domain/#/help
从首页导航点击"帮助中心"

技术实现

文件结构

src/
├── views/
│   ├── home/              # 官网首页
│   │   └── index.vue
│   └── help/              # 帮助中心
│       └── index.vue
├── layout/
│   └── standalone-layout.vue  # 独立布局（无侧边栏）
└── router/
    ├── index.ts           # 路由配置
    └── constants.ts       # 路由常量（白名单）

路由配置

// 根路径配置
{
  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 中的数据：

// 添加 FAQ
const faqs = ref([
  {
    question: '您的问题',
    answer: '您的答案',
    category: '分类'
  }
])

// 添加使用指南
const guides = ref([
  {
    id: 1,
    title: '指南标题',
    description: '描述',
    icon: '图标',
    category: '分类',
    categoryName: '分类名称',
    updatedAt: '更新日期'
  }
])

修改配色方案

页面使用了 Arco Design 的设计令牌（Design Tokens），可以通过修改主题变量来调整配色：

// 主要颜色
rgb(var(--primary-6))  // 主色调
rgb(var(--success-6))  // 成功色
rgb(var(--warning-6))  // 警告色

登录页面优化

在登录页面右上角添加了"访问官网首页"按钮，方便用户在登录前了解系统功能。

下一步建议

添加真实数据 - 将演示数据替换为实际的帮助文档
集成客服系统 - 接入第三方在线客服工具
添加视频教学 - 在帮助中心增加视频教程
SEO 优化 - 添加 meta 标签、title 等 SEO 元素
多语言支持 - 如果需要，可以添加国际化支持
访问统计 - 集成网站分析工具（如百度统计、Google Analytics）

运行项目

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

浏览器兼容性

✅ Chrome (推荐)
✅ Firefox
✅ Edge
✅ Safari
⚠️ IE11（需要额外 polyfill）

注意事项

确保 logo 文件路径正确（@/assets/logo.svg）
如果部署在子目录，需要调整路由的 base 配置
如需启用 SSR 或 SEO，建议使用 Vue Router 的 history 模式
生产环境部署时，确保服务器正确处理 hash 路由

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

4.6 KiB Raw Blame History Unescape Escape