Merge branch 'main' of https://git.apinb.com/ops/front

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

QUICK_START.md

@@ -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 路由管理
+
+---
+
+享受您的新页面！🎊

src/layout/standalone-layout.vue

@@ -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>

src/router/constants.ts

@@ -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 = {

src/router/index.ts

@@ -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',

src/views/help/index.vue

@@ -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>

src/views/home/index.vue

@@ -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>数据中心可视化管理楼层，机柜，U位等空间信息</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>

src/views/login/index.vue

@@ -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>