add hemo,help
This commit is contained in:
16
src/layout/standalone-layout.vue
Normal file
16
src/layout/standalone-layout.vue
Normal 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>
|
||||
@@ -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 = {
|
||||
|
||||
@@ -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
839
src/views/help/index.vue
Normal 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>© 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
530
src/views/home/index.vue
Normal 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 © 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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user