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

feta

Browse Source
This commit is contained in:
ygx
2026-03-28 15:44:57 +08:00
parent 1020699b8c
commit 877e3115c4
11 changed files with 497 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
src/views/help/index.vue
View File

@@ -4,7 +4,7 @@
<header class="navbar">
<div class="navbar-content">
<div class="logo" @click="goToHome">
<img src="@/assets/logo.svg" alt="Logo" />
<img src="@/assets/logo.png" alt="Logo" />
<span class="logo-text">智能运维管理系统</span>
</div>
<nav class="nav-links">
@@ -17,6 +17,8 @@
<!-- Banner 区域 -->
<section class="help-banner">
<img src="@/assets/images/home1.jpg" alt="Banner" class="banner-image" />
<div class="banner-overlay"></div>
<div class="banner-content">
<h1>帮助中心</h1>
<p>查找您需要的答案，快速解决问题</p>
@@ -29,7 +31,7 @@
@press-enter="handleSearch"
>
<template #prefix>
<icon-search />
<IconSearch />
</template>
</a-input>
</div>
@@ -43,31 +45,31 @@
<aside class="help-sidebar">
<a-menu :default-selected-keys="[activeCategory]" @menu-item-click="handleCategoryClick">
<a-menu-item key="all">
<template #icon><icon-list /></template>
<template #icon><IconList /></template>
全部文档
</a-menu-item>
<a-menu-item key="quickstart">
<template #icon><icon-rocket /></template>
<template #icon><IconRocket /></template>
快速入门
</a-menu-item>
<a-menu-item key="dashboard">
<template #icon><icon-dashboard /></template>
<template #icon><IconDashboard /></template>
仪表盘
</a-menu-item>
<a-menu-item key="alert">
<template #icon><icon-alert /></template>
<template #icon><IconAlertCircle /></template>
告警管理
</a-menu-item>
<a-menu-item key="datacenter">
<template #icon><icon-storage /></template>
<template #icon><IconDatabase /></template>
数据中心
</a-menu-item>
<a-menu-item key="report">
<template #icon><icon-chart-line /></template>
<template #icon><IconChartLine /></template>
报表分析
</a-menu-item>
<a-menu-item key="system">
<template #icon><icon-settings /></template>
<template #icon><IconSettings /></template>
系统设置
</a-menu-item>
</a-menu>
@@ -78,7 +80,7 @@
<!-- FAQ 常见问题 -->
<section id="faq" class="help-section">
<h2 class="section-title">
<icon-question-circle />
<IconHelp />
常见问题
</h2>
@@ -100,7 +102,7 @@
<!-- 使用指南 -->
<section id="guides" class="help-section">
<h2 class="section-title">
<icon-book />
<IconBook />
使用指南
</h2>
@@ -127,7 +129,7 @@
<!-- 操作手册 -->
<section class="help-section">
<h2 class="section-title">
<icon-file />
<IconFile />
操作手册
</h2>
@@ -138,7 +140,7 @@
class="manual-item"
>
<div class="manual-icon">
<icon-download />
<IconDownload />
</div>
<div class="manual-info">
<h3>{{ manual.title }}</h3>
@@ -159,38 +161,45 @@
<!-- 联系我们 -->
<section class="help-section contact-section">
<h2 class="section-title">
<icon-customer-service />
<IconHeadset />
需要更多帮助？
</h2>
<p class="section-desc">我们提供多种联系方式，随时为您解答疑问</p>
<div class="contact-cards">
<div class="contact-card">
<div class="contact-icon">
<icon-phone />
<IconPhone />
</div>
<div class="contact-content">
<h3>电话联系</h3>
<p class="contact-time">工作日 9:00-18:00</p>
<p class="contact-value">400-XXX-XXXX</p>
</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 />
<IconMail />
</div>
<div class="contact-content">
<h3>邮件咨询</h3>
<p class="contact-time">我们会在 24 小时内回复</p>
<p class="contact-value">support@example.com</p>
</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 />
<IconMessage />
</div>
<div class="contact-content">
<h3>在线客服</h3>
<p class="contact-time">实时在线解答</p>
<a-button type="primary" @click="openChat">
开始聊天
</a-button>
</div>
<h3>在线客服</h3>
<p>实时在线解答</p>
<a-button type="primary" @click="openChat">
开始聊天
</a-button>
</div>
</div>
</section>
@@ -210,6 +219,24 @@
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import {
IconSearch,
IconList,
IconRocket,
IconDashboard,
IconAlertCircle,
IconDatabase,
IconChartLine,
IconSettings,
IconHelp,
IconBook,
IconFile,
IconDownload,
IconHeadset,
IconPhone,
IconMail,
IconMessage,
} from '@tabler/icons-vue'
const router = useRouter()
const searchQuery = ref('')
@@ -265,7 +292,7 @@ const guides = ref([
id: 1,
title: '新手入门指南',
description: '帮助您快速了解系统的基本功能和操作流程',
icon: 'icon-rocket',
icon: IconRocket,
category: 'quickstart',
categoryName: '快速入门',
updatedAt: '2026-03-15'
@@ -274,7 +301,7 @@ const guides = ref([
id: 2,
title: '仪表盘使用详解',
description: '详细介绍仪表盘的各个功能模块和使用技巧',
icon: 'icon-dashboard',
icon: IconDashboard,
category: 'dashboard',
categoryName: '仪表盘',
updatedAt: '2026-03-18'
@@ -283,7 +310,7 @@ const guides = ref([
id: 3,
title: '告警配置完整教程',
description: '从基础到高级的告警策略配置方法',
icon: 'icon-alert',
icon: IconAlertCircle,
category: 'alert',
categoryName: '告警管理',
updatedAt: '2026-03-20'
@@ -292,7 +319,7 @@ const guides = ref([
id: 4,
title: '机房设备管理手册',
description: '机房、机柜、设备等资源的规范管理方法',
icon: 'icon-storage',
icon: IconDatabase,
category: 'datacenter',
categoryName: '数据中心',
updatedAt: '2026-03-19'
@@ -301,7 +328,7 @@ const guides = ref([
id: 5,
title: '数据报表生成指南',
description: '学习如何生成和导出各类业务报表',
icon: 'icon-chart-line',
icon: IconChartLine,
category: 'report',
categoryName: '报表分析',
updatedAt: '2026-03-17'
@@ -310,7 +337,7 @@ const guides = ref([
id: 6,
title: '系统权限管理说明',
description: '用户角色和权限配置的详细讲解',
icon: 'icon-settings',
icon: IconSettings,
category: 'system',
categoryName: '系统设置',
updatedAt: '2026-03-16'
@@ -467,36 +494,60 @@ const openChat = () => {
// Banner 区域
.help-banner {
position: relative;
padding: 140px 24px 80px;
background: linear-gradient(135deg, rgb(var(--primary-6)), rgb(var(--primary-4)));
text-align: center;
color: #fff;
overflow: hidden;
.banner-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.banner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 100%);
z-index: 1;
}
.banner-content {
position: relative;
max-width: 800px;
margin: 0 auto;
z-index: 2;
h1 {
font-size: 48px;
font-weight: 700;
margin-bottom: 16px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
p {
font-size: 18px;
margin-bottom: 40px;
opacity: 0.9;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.search-box {
max-width: 600px;
margin: 0 auto;
:deep(.arco-input) {
background: #fff;
border: none;
font-size: 16px;
&::placeholder {
color: var(--color-text-3);
}
@@ -704,54 +755,88 @@ const openChat = () => {
// 联系我们
.contact-section {
text-align: center;
.section-desc {
font-size: 16px;
color: var(--color-text-2);
margin-bottom: 32px;
}
.contact-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
.contact-card {
background: #fff;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 32px 24px;
text-align: center;
border-radius: 16px;
padding: 24px;
transition: all 0.3s;
flex: 1 1 300px;
max-width: 360px;
min-width: 280px;
display: flex;
align-items: center;
gap: 20px;
&:hover {
border-color: rgb(var(--primary-6));
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transform: translateY(-4px);
}
.contact-icon {
width: 64px;
height: 64px;
display: flex;
width: 56px;
height: 56px;
display: inline-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;
background: linear-gradient(135deg, rgb(var(--primary-6)) 0%, rgb(var(--primary-5)) 100%);
border-radius: 12px;
color: #fff;
flex-shrink: 0;
transition: all 0.3s;
svg {
width: 28px;
height: 28px;
}
}
h3 {
font-size: 18px;
font-weight: 600;
color: var(--color-text-1);
margin-bottom: 8px;
&:hover .contact-icon {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
p {
font-size: 14px;
color: var(--color-text-2);
margin-bottom: 8px;
&.contact-value {
.contact-content {
flex: 1;
text-align: left;
h3 {
font-size: 16px;
font-weight: 600;
color: var(--color-text-1);
margin-bottom: 8px;
}
.contact-time {
font-size: 13px;
color: var(--color-text-3);
margin-bottom: 6px;
}
.contact-value {
font-size: 15px;
font-weight: 600;
color: rgb(var(--primary-6));
}
.arco-btn {
margin-top: 8px;
}
}
}
}
@@ -831,7 +916,19 @@ const openChat = () => {
}
.contact-cards {
grid-template-columns: 1fr;
flex-direction: column;
align-items: center;
.contact-card {
max-width: 100%;
flex: 1 1 100%;
flex-direction: column;
text-align: center;
.contact-content {
text-align: center;
}
}
}
}
}

87
src/views/home/index.vue
View File

@@ -17,17 +17,14 @@
<!-- Banner 区域 -->
<section id="home" class="banner">
<img src="@/assets/images/home1.jpg" alt="Banner" class="banner-image" />
<div class="banner-overlay"></div>
<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>
<!-- 功能特性区域 -->
@@ -206,77 +203,55 @@ const scrollToSection = (id: string) => {
align-items: center;
justify-content: center;
overflow: hidden;
.banner-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.banner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 100%);
z-index: 1;
}
.banner-content {
text-align: center;
z-index: 1;
z-index: 2;
.banner-title {
font-size: 48px;
font-weight: 700;
color: var(--color-text-1);
color: #fff;
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;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.banner-subtitle {
font-size: 20px;
color: var(--color-text-2);
color: rgba(255, 255, 255, 0.9);
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.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%);
}
}
}
}
// 功能特性区域

26
src/views/login/components/banner.vue
View File

@@ -22,20 +22,20 @@ import bannerImage from '@/assets/images/login-banner.png'
const { t } = useI18n()
const carouselItem = computed(() => [
{
slogan: t('login.banner.slogan1'),
subSlogan: t('login.banner.subSlogan1'),
image: bannerImage,
},
{
slogan: t('login.banner.slogan2'),
subSlogan: t('login.banner.subSlogan2'),
image: bannerImage,
},
{
slogan: t('login.banner.slogan3'),
subSlogan: t('login.banner.subSlogan3'),
image: bannerImage,
// slogan: t('login.banner.slogan1'),
// subSlogan: t('login.banner.subSlogan1'),
image: 'https://ops.apinb.com/assets/login-image-CPDtwfmL.png',
},
// {
// slogan: t('login.banner.slogan2'),
// subSlogan: t('login.banner.subSlogan2'),
// image: bannerImage,
// },
// {
// slogan: t('login.banner.slogan3'),
// subSlogan: t('login.banner.subSlogan3'),
// image: bannerImage,
// },
])
</script>

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

@@ -22,26 +22,18 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import LoginBanner from './components/banner.vue'
import LoginForm from './components/login-form.vue'
export default defineComponent({
components: {
LoginBanner,
LoginForm,
},
setup() {
const showQr = ref(false)
const goToHome = () => {
window.location.href = '/#/home'
}
return { showQr, goToHome }
},
})
const router = useRouter()
const showQr = ref(false)
const goToHome = () => {
router.push('/home')
}
</script>
<style lang="less" scoped>