From 46559fe955f669c19d506701c269306fee6c4741 Mon Sep 17 00:00:00 2001 From: zxr <271055687@qq.com> Date: Fri, 7 Aug 2026 17:36:24 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B8=85=E7=90=86=E6=97=A7=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- PAGES_README.md | 203 ------------------------------- QUICK_START.md | 89 -------------- src/components/tab-bar/readme.md | 11 -- 3 files changed, 303 deletions(-) delete mode 100644 PAGES_README.md delete mode 100644 QUICK_START.md delete mode 100644 src/components/tab-bar/readme.md diff --git a/PAGES_README.md b/PAGES_README.md deleted file mode 100644 index 2978b88..0000000 --- a/PAGES_README.md +++ /dev/null @@ -1,203 +0,0 @@ -# 官网首页和帮助中心页面说明 - -## 新增页面 - -本次为系统添加了两个全新的对外页面，无需登录即可访问： - -### 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 deleted file mode 100644 index 1b45200..0000000 --- a/QUICK_START.md +++ /dev/null @@ -1,89 +0,0 @@ -# 快速启动指南 - -## 🎉 新增功能 - -已成功为您的智能运维管理系统添加了两个全新的对外页面： - -### ✅ 已完成的工作 - -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/components/tab-bar/readme.md b/src/components/tab-bar/readme.md deleted file mode 100644 index 4e4ac25..0000000 --- a/src/components/tab-bar/readme.md +++ /dev/null @@ -1,11 +0,0 @@ -## 组件说明 - -该组件非官方最终设计规范，以单独组件存在。 - -同时仅仅提供最基本的功能，后续进行优化及更改。 - -## Component description - -The component unofficial final design specification exists as a separate component. - -At the same time, only the most basic functions are provided, and subsequent optimizations and changes will be made.