diff --git a/PAGES_README.md b/PAGES_README.md new file mode 100644 index 0000000..b03ef4b --- /dev/null +++ b/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 路由 + +--- + +如有任何问题或需要进一步的技术支持，请联系开发团队。 diff --git a/QUICK_START.md b/QUICK_START.md new file mode 100644 index 0000000..65ba422 --- /dev/null +++ b/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 路由管理 + +--- + +享受您的新页面！🎊 diff --git a/src/layout/standalone-layout.vue b/src/layout/standalone-layout.vue new file mode 100644 index 0000000..5043f66 --- /dev/null +++ b/src/layout/standalone-layout.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/src/router/constants.ts b/src/router/constants.ts index e21073e..1b22cb9 100644 --- a/src/router/constants.ts +++ b/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 = { diff --git a/src/router/index.ts b/src/router/index.ts index 1150ef2..f055e03 100644 --- a/src/router/index.ts +++ b/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', diff --git a/src/views/help/index.vue b/src/views/help/index.vue new file mode 100644 index 0000000..900410a --- /dev/null +++ b/src/views/help/index.vue @@ -0,0 +1,839 @@ + + + + + diff --git a/src/views/home/index.vue b/src/views/home/index.vue new file mode 100644 index 0000000..c5aad51 --- /dev/null +++ b/src/views/home/index.vue @@ -0,0 +1,530 @@ + + + + + diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 672092c..0cbd45b 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -10,6 +10,13 @@
+
+ + + + + +
@@ -27,7 +34,12 @@ export default defineComponent({ }, setup() { const showQr = ref(false) - return { showQr } + + const goToHome = () => { + window.location.href = '/#/home' + } + + return { showQr, goToHome } }, }) @@ -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; + } +}