ops/front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add hemo,help

Browse Source
This commit is contained in:
yanweidonog
2026-03-21 10:26:44 +08:00
parent 93713e3e3c
commit d5388f3f08
8 changed files with 1726 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
PAGES_README.md Normal file
View File

@@ -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 路由
---
如有任何问题或需要进一步的技术支持，请联系开发团队。

86
QUICK_START.md Normal file
View File

@@ -0,0 +1,86 @@
# 快速启动指南
## 🎉 新增功能
已成功为您的智能运维管理系统添加了两个全新的对外页面：
### ✅ 已完成的工作
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 路由管理
---
享受您的新页面！🎊

16
src/layout/standalone-layout.vue Normal file
View File

@@ -0,0 +1,16 @@
<template>
<div class="standalone-layout">
<router-view />
</div>
</template>
<script lang="ts" setup>
// 独立页面布局，不包含系统的导航栏和侧边栏
</script>
<style scoped lang="less">
.standalone-layout {
width: 100%;
min-height: 100vh;
}
</style>

3
src/router/constants.ts
View File

@@ -1,6 +1,9 @@
export const WHITE_LIST = [
{ name: 'notFound', children: [] },
{ name: 'login', children: [] },
{ name: 'root', children: [] },
{ name: 'Home', children: [] },
{ name: 'Help', children: [] },
]
export const NOT_FOUND = {

22
src/router/index.ts
View File

@@ -13,7 +13,27 @@ const router = createRouter({
routes: [
{
path: '/',
redirect: 'login',
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,
},
},
],
},
{
path: '/login',

839
src/views/help/index.vue Normal file
View File

@@ -0,0 +1,839 @@
<template>
<div class="help-page">
<!-- 顶部导航 -->
<header class="navbar">
<div class="navbar-content">
<div class="logo" @click="goToHome">
<img src="@/assets/logo.svg" alt="Logo" />
<span class="logo-text">智能运维管理系统</span>
</div>
<nav class="nav-links">
<a href="#" @click.prevent="goToHome">首页</a>
<a href="#help">帮助中心</a>
<a-button type="primary" @click="goToLogin">登录系统</a-button>
</nav>
</div>
</header>
<!-- Banner 区域 -->
<section class="help-banner">
<div class="banner-content">
<h1>帮助中心</h1>
<p>查找您需要的答案，快速解决问题</p>
<div class="search-box">
<a-input
v-model="searchQuery"
placeholder="搜索帮助文档..."
size="large"
allow-clear
@press-enter="handleSearch"
>
<template #prefix>
<icon-search />
</template>
</a-input>
</div>
</div>
</section>
<!-- 主要内容区 -->
<main class="help-content">
<div class="content-container">
<!-- 左侧目录 -->
<aside class="help-sidebar">
<a-menu :default-selected-keys="[activeCategory]" @menu-item-click="handleCategoryClick">
<a-menu-item key="all">
<template #icon><icon-list /></template>
全部文档
</a-menu-item>
<a-menu-item key="quickstart">
<template #icon><icon-rocket /></template>
快速入门
</a-menu-item>
<a-menu-item key="dashboard">
<template #icon><icon-dashboard /></template>
仪表盘
</a-menu-item>
<a-menu-item key="alert">
<template #icon><icon-alert /></template>
告警管理
</a-menu-item>
<a-menu-item key="datacenter">
<template #icon><icon-storage /></template>
数据中心
</a-menu-item>
<a-menu-item key="report">
<template #icon><icon-chart-line /></template>
报表分析
</a-menu-item>
<a-menu-item key="system">
<template #icon><icon-settings /></template>
系统设置
</a-menu-item>
</a-menu>
</aside>
<!-- 右侧内容 -->
<div class="help-main">
<!-- FAQ 常见问题 -->
<section id="faq" class="help-section">
<h2 class="section-title">
<icon-question-circle />
常见问题
</h2>
<div class="faq-list">
<a-collapse>
<a-collapse-item
v-for="(item, index) in filteredFaqs"
:key="index"
:header="item.question"
>
<div class="faq-answer">
{{ item.answer }}
</div>
</a-collapse-item>
</a-collapse>
</div>
</section>
<!-- 使用指南 -->
<section id="guides" class="help-section">
<h2 class="section-title">
<icon-book />
使用指南
</h2>
<div class="guide-grid">
<div
v-for="guide in filteredGuides"
:key="guide.id"
class="guide-card"
@click="viewGuideDetail(guide)"
>
<div class="guide-icon">
<component :is="guide.icon" />
</div>
<h3>{{ guide.title }}</h3>
<p>{{ guide.description }}</p>
<div class="guide-meta">
<span class="guide-category">{{ guide.categoryName }}</span>
<span class="guide-updated">{{ guide.updatedAt }}</span>
</div>
</div>
</div>
</section>
<!-- 操作手册 -->
<section class="help-section">
<h2 class="section-title">
<icon-file />
操作手册
</h2>
<div class="manual-list">
<div
v-for="manual in manuals"
:key="manual.id"
class="manual-item"
>
<div class="manual-icon">
<icon-download />
</div>
<div class="manual-info">
<h3>{{ manual.title }}</h3>
<p>{{ manual.description }}</p>
<div class="manual-meta">
<span>格式：{{ manual.format }}</span>
<span>大小：{{ manual.size }}</span>
<span>更新：{{ manual.updatedAt }}</span>
</div>
</div>
<a-button type="primary" @click="downloadManual(manual)">
下载
</a-button>
</div>
</div>
</section>
<!-- 联系我们 -->
<section class="help-section contact-section">
<h2 class="section-title">
<icon-customer-service />
需要更多帮助？
</h2>
<div class="contact-cards">
<div class="contact-card">
<div class="contact-icon">
<icon-phone />
</div>
<h3>电话联系</h3>
<p>工作日 9:00-18:00</p>
<p class="contact-value">400-XXX-XXXX</p>
</div>
<div class="contact-card">
<div class="contact-icon">
<icon-email />
</div>
<h3>邮件咨询</h3>
<p>我们会在 24 小时内回复</p>
<p class="contact-value">support@example.com</p>
</div>
<div class="contact-card">
<div class="contact-icon">
<icon-message />
</div>
<h3>在线客服</h3>
<p>实时在线解答</p>
<a-button type="primary" @click="openChat">
开始聊天
</a-button>
</div>
</div>
</section>
</div>
</div>
</main>
<!-- 页脚 -->
<footer class="footer">
<div class="footer-content">
<p>&copy; 2026 智能运维管理系统。All rights reserved.</p>
</div>
</footer>
</div>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const searchQuery = ref('')
const activeCategory = ref('all')
// FAQ 数据
const faqs = ref([
{
question: '如何登录系统？',
answer: '在登录页面输入您的用户名和密码，点击登录按钮即可。如果忘记密码，可以点击"忘记密码"链接进行重置。',
category: 'quickstart'
},
{
question: '如何查看监控仪表盘？',
answer: '登录后，在左侧菜单点击"仪表盘" -> "工作台"即可查看实时监控仪表盘。您可以根据需要切换不同的视图和筛选条件。',
category: 'dashboard'
},
{
question: '如何配置告警策略？',
answer: '进入"告警管理" -> "告警策略"页面，点击"新建策略"按钮，填写相关配置信息，包括告警条件、通知方式等，保存后即可生效。',
category: 'alert'
},
{
question: '如何添加新的机房？',
answer: '在"数据中心" -> "机房管理"页面，点击"新增机房"按钮，填写机房名称、位置、面积等信息，完成后点击保存。',
category: 'datacenter'
},
{
question: '如何导出报表数据？',
answer: '在相应的报表页面，选择需要导出的时间范围和数据类型，点击右上角的"导出"按钮，选择导出格式（Excel/PDF），即可下载报表文件。',
category: 'report'
},
{
question: '如何修改个人信息？',
answer: '点击右上角的用户头像，选择"个人设置"，可以修改您的个人信息、密码、联系方式等。修改后记得点击保存。',
category: 'system'
},
{
question: '系统支持哪些浏览器？',
answer: '系统支持主流的现代浏览器，包括 Chrome、Firefox、Edge、Safari 等。建议使用最新版本的浏览器以获得最佳体验。',
category: 'system'
},
{
question: '遇到技术问题如何反馈？',
answer: '您可以通过以下方式反馈问题：1. 拨打技术支持热线；2. 发送邮件至 support@example.com；3. 使用在线客服功能。',
category: 'system'
}
])
// 使用指南数据
const guides = ref([
{
id: 1,
title: '新手入门指南',
description: '帮助您快速了解系统的基本功能和操作流程',
icon: 'icon-rocket',
category: 'quickstart',
categoryName: '快速入门',
updatedAt: '2026-03-15'
},
{
id: 2,
title: '仪表盘使用详解',
description: '详细介绍仪表盘的各个功能模块和使用技巧',
icon: 'icon-dashboard',
category: 'dashboard',
categoryName: '仪表盘',
updatedAt: '2026-03-18'
},
{
id: 3,
title: '告警配置完整教程',
description: '从基础到高级的告警策略配置方法',
icon: 'icon-alert',
category: 'alert',
categoryName: '告警管理',
updatedAt: '2026-03-20'
},
{
id: 4,
title: '机房设备管理手册',
description: '机房、机柜、设备等资源的规范管理方法',
icon: 'icon-storage',
category: 'datacenter',
categoryName: '数据中心',
updatedAt: '2026-03-19'
},
{
id: 5,
title: '数据报表生成指南',
description: '学习如何生成和导出各类业务报表',
icon: 'icon-chart-line',
category: 'report',
categoryName: '报表分析',
updatedAt: '2026-03-17'
},
{
id: 6,
title: '系统权限管理说明',
description: '用户角色和权限配置的详细讲解',
icon: 'icon-settings',
category: 'system',
categoryName: '系统设置',
updatedAt: '2026-03-16'
}
])
// 操作手册数据
const manuals = ref([
{
id: 1,
title: '系统用户手册（完整版）',
description: '包含系统所有功能的详细说明和操作步骤',
format: 'PDF',
size: '5.2 MB',
updatedAt: '2026-03-01'
},
{
id: 2,
title: '快速入门指南',
description: '快速上手指南，适合新用户阅读',
format: 'PDF',
size: '1.8 MB',
updatedAt: '2026-03-01'
},
{
id: 3,
title: '运维管理规范',
description: '标准化的运维操作流程和规范文档',
format: 'Word',
size: '2.5 MB',
updatedAt: '2026-02-28'
},
{
id: 4,
title: '常见问题汇编',
description: '汇总了常见问题及解决方案',
format: 'PDF',
size: '3.1 MB',
updatedAt: '2026-03-10'
}
])
// 计算属性
const filteredFaqs = computed(() => {
if (activeCategory.value === 'all') {
return faqs.value
}
return faqs.value.filter(faq => faq.category === activeCategory.value)
})
const filteredGuides = computed(() => {
if (activeCategory.value === 'all') {
return guides.value
}
return guides.value.filter(guide => guide.category === activeCategory.value)
})
// 方法
const goToHome = () => {
router.push('/')
}
const goToLogin = () => {
router.push('/login')
}
const handleCategoryClick = (key: string) => {
activeCategory.value = key
}
const handleSearch = () => {
// 实现搜索逻辑
console.log('搜索:', searchQuery.value)
}
const viewGuideDetail = (guide: any) => {
// 查看指南详情
console.log('查看指南:', guide)
}
const downloadManual = (manual: any) => {
// 下载手册
console.log('下载手册:', manual)
}
const openChat = () => {
// 打开在线客服
console.log('打开在线客服')
}
</script>
<style scoped lang="less">
.help-page {
min-height: 100vh;
background: #f5f7fa;
// 顶部导航
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
z-index: 1000;
.navbar-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 24px;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.logo {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
img {
height: 32px;
width: auto;
}
.logo-text {
font-size: 20px;
font-weight: 600;
color: var(--color-text-1);
}
}
.nav-links {
display: flex;
align-items: center;
gap: 24px;
a {
color: var(--color-text-2);
text-decoration: none;
font-size: 14px;
transition: color 0.3s;
&:hover {
color: rgb(var(--primary-6));
}
}
}
}
}
// Banner 区域
.help-banner {
padding: 140px 24px 80px;
background: linear-gradient(135deg, rgb(var(--primary-6)), rgb(var(--primary-4)));
text-align: center;
color: #fff;
.banner-content {
max-width: 800px;
margin: 0 auto;
h1 {
font-size: 48px;
font-weight: 700;
margin-bottom: 16px;
}
p {
font-size: 18px;
margin-bottom: 40px;
opacity: 0.9;
}
.search-box {
max-width: 600px;
margin: 0 auto;
:deep(.arco-input) {
background: #fff;
border: none;
font-size: 16px;
&::placeholder {
color: var(--color-text-3);
}
}
}
}
}
// 主要内容区
.help-content {
padding: 40px 24px;
.content-container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
}
.help-sidebar {
position: sticky;
top: 100px;
height: fit-content;
background: #fff;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
:deep(.arco-menu) {
background: transparent;
.arco-menu-item {
border-radius: 4px;
margin-bottom: 8px;
&.arco-menu-selected {
background: rgb(var(--primary-1));
color: rgb(var(--primary-6));
}
&:hover:not(.arco-menu-selected) {
background: var(--color-fill-2);
}
}
}
}
.help-main {
.help-section {
margin-bottom: 48px;
.section-title {
font-size: 24px;
font-weight: 600;
color: var(--color-text-1);
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 8px;
}
// FAQ 样式
.faq-list {
:deep(.arco-collapse) {
border: none;
.arco-collapse-item {
border: 1px solid var(--color-border);
border-radius: 8px;
margin-bottom: 16px;
.arco-collapse-item-header {
padding: 16px 20px;
background: var(--color-fill-1);
font-weight: 500;
}
.arco-collapse-item-content {
padding: 20px;
line-height: 1.8;
color: var(--color-text-2);
}
}
}
}
// 指南网格
.guide-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
.guide-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 24px;
cursor: pointer;
transition: all 0.3s;
&:hover {
border-color: rgb(var(--primary-6));
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-4px);
}
.guide-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: rgb(var(--primary-1));
border-radius: 8px;
color: rgb(var(--primary-6));
font-size: 24px;
margin-bottom: 16px;
}
h3 {
font-size: 18px;
font-weight: 600;
color: var(--color-text-1);
margin-bottom: 8px;
}
p {
font-size: 14px;
color: var(--color-text-2);
line-height: 1.6;
margin-bottom: 16px;
}
.guide-meta {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--color-text-3);
.guide-category {
background: var(--color-fill-2);
padding: 2px 8px;
border-radius: 4px;
}
}
}
}
// 手册列表
.manual-list {
.manual-item {
display: flex;
align-items: center;
gap: 20px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 20px;
margin-bottom: 16px;
transition: all 0.3s;
&:hover {
border-color: rgb(var(--primary-6));
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.manual-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: rgb(var(--success-1));
border-radius: 8px;
color: rgb(var(--success-6));
font-size: 24px;
}
.manual-info {
flex: 1;
h3 {
font-size: 16px;
font-weight: 600;
color: var(--color-text-1);
margin-bottom: 8px;
}
p {
font-size: 14px;
color: var(--color-text-2);
margin-bottom: 12px;
}
.manual-meta {
display: flex;
gap: 16px;
font-size: 12px;
color: var(--color-text-3);
}
}
}
}
// 联系我们
.contact-section {
.contact-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
.contact-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 32px 24px;
text-align: center;
transition: all 0.3s;
&:hover {
border-color: rgb(var(--primary-6));
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.contact-icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: rgb(var(--primary-1));
border-radius: 50%;
color: rgb(var(--primary-6));
font-size: 32px;
margin: 0 auto 16px;
}
h3 {
font-size: 18px;
font-weight: 600;
color: var(--color-text-1);
margin-bottom: 8px;
}
p {
font-size: 14px;
color: var(--color-text-2);
margin-bottom: 8px;
&.contact-value {
font-size: 16px;
font-weight: 600;
color: rgb(var(--primary-6));
}
}
}
}
}
}
}
}
// 页脚
.footer {
background: var(--color-bg-1);
padding: 24px;
text-align: center;
border-top: 1px solid var(--color-border);
.footer-content {
max-width: 1400px;
margin: 0 auto;
p {
font-size: 14px;
color: var(--color-text-3);
}
}
}
}
// 响应式设计
@media (max-width: 1024px) {
.help-page {
.help-content {
.content-container {
grid-template-columns: 1fr;
}
.help-sidebar {
position: static;
margin-bottom: 24px;
}
}
}
}
@media (max-width: 768px) {
.help-page {
.navbar {
.navbar-content {
.nav-links {
gap: 12px;
a {
display: none;
}
}
}
}
.help-banner {
padding: 100px 16px 60px;
.banner-content {
h1 {
font-size: 32px !important;
}
p {
font-size: 16px !important;
}
}
}
.help-content {
padding: 24px 16px;
.guide-grid {
grid-template-columns: 1fr;
}
.contact-cards {
grid-template-columns: 1fr;
}
}
}
}
</style>

530
src/views/home/index.vue Normal file
View File

@@ -0,0 +1,530 @@
<template>
<div class="home-page">
<!-- 顶部导航 -->
<header class="navbar">
<div class="navbar-content">
<div class="logo">
<img src="@/assets/logo.svg" alt="Logo" />
<span class="logo-text">智能运维管理系统</span>
</div>
<nav class="nav-links">
<a href="#home">首页</a>
<a href="#help">帮助中心</a>
<a-button type="primary" @click="goToLogin">登录系统</a-button>
</nav>
</div>
</header>
<!-- Banner 区域 -->
<section id="home" class="banner">
<div class="banner-content">
<h1 class="banner-title">智能运维管理系统</h1>
<p class="banner-subtitle">
提供全方位的 IT 运维管理解决方案，让系统运行更稳定、更高效
</p>
</div>
<div class="banner-decoration">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
</div>
</section>
<!-- 功能特性区域 -->
<section id="features" class="features">
<div class="section-container">
<h2 class="section-title">核心功能</h2>
<p class="section-subtitle">全面的运维管理工具，满足您的各种需求</p>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">
<icon-dashboard />
</div>
<h3>实时监控仪表盘</h3>
<p>多维度数据展示，实时掌握系统运行状态，关键指标一目了然</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<icon-alert />
</div>
<h3>智能告警管理</h3>
<p>灵活的告警策略配置，多渠道通知，确保问题及时发现和处理</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<icon-chart-line />
</div>
<h3>数据分析报表</h3>
<p>丰富的可视化报表，深度数据分析，为决策提供有力支持</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<icon-settings />
</div>
<h3>资源配置管理</h3>
<p>统一的资源配置中心，规范化管理，提升运维效率</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<icon-shield />
</div>
<h3>权限安全管理</h3>
<p>细粒度的权限控制，多重安全保障，确保系统数据安全</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<icon-feedback />
</div>
<h3>问题反馈跟踪</h3>
<p>完善的问题反馈机制，全流程跟踪，快速响应解决</p>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="footer-content">
<div class="footer-section">
<h4>系统信息</h4>
<p>系统版本:v1.2.0 部署环境:生产环境</p>
</div>
<div class="footer-section">
<h4>帮助中心</h4>
<p><a href="#help" target="_blank">帮助中心</a>，技术支持邮箱:<a href="mailto:david.yan@qq.com">david.yan@qq.com</a></p>
</div>
<div class="footer-section">
<h4>版权信息</h4>
<p>Copyright &copy; 2026 智能运维管理系统。All rights reserved.</p>
</div>
</div>
</footer>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const goToLogin = () => {
router.push('/login')
}
const scrollToSection = (id: string) => {
const element = document.getElementById(id)
if (element) {
element.scrollIntoView({ behavior: 'smooth' })
}
}
</script>
<style scoped lang="less">
.home-page {
min-height: 100vh;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
// 顶部导航
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
z-index: 1000;
.navbar-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.logo {
display: flex;
align-items: center;
gap: 12px;
img {
height: 32px;
width: auto;
}
.logo-text {
font-size: 20px;
font-weight: 600;
color: var(--color-text-1);
}
}
.nav-links {
display: flex;
align-items: center;
gap: 24px;
a {
color: var(--color-text-2);
text-decoration: none;
font-size: 14px;
transition: color 0.3s;
&:hover {
color: rgb(var(--primary-6));
}
}
}
}
}
// Banner 区域
.banner {
position: relative;
padding: 160px 24px 100px;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
.banner-content {
text-align: center;
z-index: 1;
.banner-title {
font-size: 48px;
font-weight: 700;
color: var(--color-text-1);
margin-bottom: 16px;
background: linear-gradient(135deg, rgb(var(--primary-6)), rgb(var(--primary-4)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.banner-subtitle {
font-size: 20px;
color: var(--color-text-2);
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.banner-actions {
display: flex;
gap: 16px;
justify-content: center;
}
}
.banner-decoration {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
.circle {
position: absolute;
border-radius: 50%;
opacity: 0.1;
&.circle-1 {
width: 400px;
height: 400px;
background: rgb(var(--primary-6));
top: -200px;
right: -100px;
}
&.circle-2 {
width: 300px;
height: 300px;
background: rgb(var(--success-6));
bottom: -150px;
left: -100px;
}
&.circle-3 {
width: 200px;
height: 200px;
background: rgb(var(--warning-6));
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
}
// 功能特性区域
.features {
padding: 100px 24px;
background: #fff;
.section-container {
max-width: 1200px;
margin: 0 auto;
.section-title {
font-size: 36px;
font-weight: 700;
text-align: center;
margin-bottom: 16px;
color: var(--color-text-1);
}
.section-subtitle {
font-size: 16px;
text-align: center;
color: var(--color-text-2);
margin-bottom: 60px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 32px;
.feature-card {
padding: 32px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 12px;
transition: all 0.3s;
cursor: pointer;
&:hover {
transform: translateY(-8px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
.feature-icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: rgb(var(--primary-6));
border-radius: 12px;
margin-bottom: 24px;
color: #fff;
font-size: 32px;
}
h3 {
font-size: 20px;
font-weight: 600;
color: var(--color-text-1);
margin-bottom: 12px;
}
p {
font-size: 14px;
color: var(--color-text-2);
line-height: 1.6;
}
}
}
}
}
// 数据中心区域
.datacenter {
padding: 100px 24px;
background: linear-gradient(135deg, rgb(var(--primary-1)) 0%, rgb(var(--primary-2)) 100%);
.section-container {
max-width: 1200px;
margin: 0 auto;
.section-title {
font-size: 36px;
font-weight: 700;
text-align: center;
margin-bottom: 16px;
color: var(--color-text-1);
}
.section-subtitle {
font-size: 16px;
text-align: center;
color: var(--color-text-2);
margin-bottom: 60px;
}
.datacenter-content {
.datacenter-info {
.stat-item {
text-align: center;
padding: 32px;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
.stat-number {
font-size: 48px;
font-weight: 700;
color: rgb(var(--primary-6));
margin-bottom: 8px;
}
.stat-label {
font-size: 16px;
color: var(--color-text-2);
}
}
}
}
}
}
// CTA 区域
.cta-section {
padding: 100px 24px;
background: #fff;
text-align: center;
.section-container {
max-width: 800px;
margin: 0 auto;
h2 {
font-size: 36px;
font-weight: 700;
color: var(--color-text-1);
margin-bottom: 16px;
}
p {
font-size: 18px;
color: var(--color-text-2);
margin-bottom: 40px;
}
.arco-btn {
margin: 8px;
}
}
}
// 页脚
.footer {
background: var(--color-bg-1);
padding: 60px 24px 24px;
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 40px;
.footer-section {
h4 {
font-size: 18px;
font-weight: 600;
color: var(--color-text-1);
margin-bottom: 16px;
}
p {
font-size: 14px;
color: var(--color-text-2);
line-height: 1.6;
}
ul {
list-style: none;
padding: 0;
margin: 0;
li {
margin-bottom: 12px;
a {
color: var(--color-text-2);
text-decoration: none;
font-size: 14px;
transition: color 0.3s;
&:hover {
color: rgb(var(--primary-6));
}
}
}
}
}
}
.footer-bottom {
max-width: 1200px;
margin: 0 auto;
padding-top: 24px;
border-top: 1px solid var(--color-border);
text-align: center;
p {
font-size: 14px;
color: var(--color-text-3);
}
}
}
}
// 响应式设计
@media (max-width: 768px) {
.home-page {
.navbar {
.navbar-content {
.nav-links {
gap: 12px;
a {
display: none;
}
}
}
}
.banner {
padding: 120px 16px 60px;
min-height: 400px;
.banner-title {
font-size: 32px !important;
}
.banner-subtitle {
font-size: 16px !important;
}
}
.features,
.datacenter,
.cta-section {
padding: 60px 16px;
}
.features {
.feature-grid {
grid-template-columns: 1fr;
}
}
}
}
</style>

36
src/views/login/index.vue
View File

@@ -10,6 +10,13 @@
<div class="content-inner">
<LoginForm />
</div>
<div class="home-link" @click="goToHome">
<a-tooltip content="访问官网首页">
<a-button type="text" shape="circle">
<icon-home />
</a-button>
</a-tooltip>
</div>
</div>
</div>
</div>
@@ -27,7 +34,12 @@ export default defineComponent({
},
setup() {
const showQr = ref(false)
return { showQr }
const goToHome = () => {
window.location.href = '/#/home'
}
return { showQr, goToHome }
},
})
</script>
@@ -109,4 +121,26 @@ export default defineComponent({
background: transparent;
}
}
.home-link {
position: absolute;
top: 32px;
right: 32px;
z-index: 2;
.arco-btn {
color: var(--color-text-2);
font-size: 20px;
transition: all 0.3s;
&:hover {
color: rgb(var(--primary-6));
background: rgba(0, 0, 0, 0.05);
}
}
@media (max-width: 900px) {
position: static;
margin: 16px auto 0 auto;
}
}
</style>