docs: 清理旧文档
This commit is contained in:
203
PAGES_README.md
203
PAGES_README.md
@@ -1,203 +0,0 @@
|
|||||||
# 官网首页和帮助中心页面说明
|
|
||||||
|
|
||||||
## 新增页面
|
|
||||||
|
|
||||||
本次为系统添加了两个全新的对外页面，无需登录即可访问：
|
|
||||||
|
|
||||||
### 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 路由
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
如有任何问题或需要进一步的技术支持，请联系开发团队。
|
|
||||||
@@ -1,89 +0,0 @@
|
|||||||
# 快速启动指南
|
|
||||||
|
|
||||||
## 🎉 新增功能
|
|
||||||
|
|
||||||
已成功为您的智能运维管理系统添加了两个全新的对外页面：
|
|
||||||
|
|
||||||
### ✅ 已完成的工作
|
|
||||||
|
|
||||||
1. **官网首页** (`/#/home`)
|
|
||||||
- 现代化的 UI 设计
|
|
||||||
- 功能特性展示（6 个核心功能）
|
|
||||||
- 数据中心关键指标
|
|
||||||
- 响应式布局
|
|
||||||
2. **帮助中心** (`/#/help`)
|
|
||||||
- 常见问题 FAQ
|
|
||||||
- 使用指南分类
|
|
||||||
- 操作手册下载
|
|
||||||
- 联系方式展示
|
|
||||||
|
|
||||||
3. **登录页面优化**
|
|
||||||
- 添加"访问官网首页"按钮
|
|
||||||
|
|
||||||
4. **路由配置**
|
|
||||||
- 无需登录即可访问
|
|
||||||
- 独立布局（无侧边栏）
|
|
||||||
- 根路径自动重定向到首页
|
|
||||||
|
|
||||||
## 🚀 立即查看效果
|
|
||||||
|
|
||||||
### 方式一：直接访问 URL
|
|
||||||
|
|
||||||
在浏览器中访问：
|
|
||||||
|
|
||||||
```
|
|
||||||
http://localhost:5173/#/home
|
|
||||||
http://localhost:5173/#/help
|
|
||||||
```
|
|
||||||
|
|
||||||
### 方式二：从登录页跳转
|
|
||||||
|
|
||||||
访问登录页面，点击右上角的"首页"图标即可跳转到官网首页。
|
|
||||||
|
|
||||||
## 📝 下一步自定义建议
|
|
||||||
|
|
||||||
### 1. 修改 Logo
|
|
||||||
|
|
||||||
替换 `src/assets/logo.svg` 文件为您公司的 logo
|
|
||||||
|
|
||||||
### 2. 更新联系信息
|
|
||||||
|
|
||||||
编辑以下文件中的联系方式：
|
|
||||||
|
|
||||||
- `src/views/home/index.vue` - 页脚联系方式
|
|
||||||
- `src/views/help/index.vue` - 联系我们板块
|
|
||||||
|
|
||||||
### 3. 添加真实的帮助文档
|
|
||||||
|
|
||||||
编辑 `src/views/help/index.vue` 中的：
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
const faqs = ref([...]) // 常见问题
|
|
||||||
const guides = ref([...]) // 使用指南
|
|
||||||
const manuals = ref([...]) // 操作手册
|
|
||||||
```
|
|
||||||
|
|
||||||
### 4. 调整配色方案
|
|
||||||
|
|
||||||
页面使用了 Arco Design 主题色，可以通过 CSS 变量调整：
|
|
||||||
|
|
||||||
```less
|
|
||||||
rgb(var(--primary-6)) // 主色调
|
|
||||||
```
|
|
||||||
|
|
||||||
## 💡 提示
|
|
||||||
|
|
||||||
- 所有页面都已经适配移动端，可以在手机上查看效果
|
|
||||||
- 页面使用了 Vue Router 的 hash 模式，部署简单
|
|
||||||
- 无需后端支持，纯静态页面，可直接部署
|
|
||||||
|
|
||||||
## 📦 技术栈
|
|
||||||
|
|
||||||
- Vue 3 + TypeScript
|
|
||||||
- Arco Design 组件库
|
|
||||||
- Vite 构建工具
|
|
||||||
- Vue Router 路由管理
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
享受您的新页面！🎊
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
## 组件说明
|
|
||||||
|
|
||||||
该组件非官方最终设计规范，以单独组件存在。
|
|
||||||
|
|
||||||
同时仅仅提供最基本的功能，后续进行优化及更改。
|
|
||||||
|
|
||||||
## Component description
|
|
||||||
|
|
||||||
The component unofficial final design specification exists as a separate component.
|
|
||||||
|
|
||||||
At the same time, only the most basic functions are provided, and subsequent optimizations and changes will be made.
|
|
||||||
Reference in New Issue
Block a user