add hemo,help

2026-03-21 10:26:44 +08:00
parent 93713e3e3c
commit d5388f3f08
8 changed files with 1726 additions and 2 deletions
--- a/PAGES_README.md
+++ b/PAGES_README.md
@@ -0,0 +1,196 @@
+# 官网首页和帮助中心页面说明
+
+## 新增页面
+
+本次为系统添加了两个全新的对外页面，无需登录即可访问：
+
+### 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 路由
+
+---
+
+如有任何问题或需要进一步的技术支持，请联系开发团队。