移除废案只修复请求域名排行显示

This commit is contained in:
Alex Yang
2025-11-28 17:08:34 +08:00
parent 25a21e284b
commit bc912056cd
28 changed files with 119596 additions and 109 deletions

View File

@@ -0,0 +1,87 @@
# 实现hash路由功能避免刷新时返回到主页
## 问题分析
当前系统使用简单的页面切换逻辑,通过隐藏/显示不同的内容区域来实现页面切换。这种方式的缺点是:
1. 刷新页面后会返回到主页
2. 无法通过URL直接访问特定页面
3. 无法在浏览器历史记录中保存页面状态
## 解决方案
实现hash路由功能将页面状态保存在URL的hash部分例如
- http://localhost:8080/#dashboard
- http://localhost:8080/#blacklists
- http://localhost:8080/#query
- http://localhost:8080/#config
## 实现步骤
### 1. 修改handlePageSwitch函数
* 在页面切换时更新URL的hash
* 移除e.preventDefault()允许默认的hash变化
### 2. 添加hashchange事件监听器
* 监听window的hashchange事件
* 在hash变化时根据hash值显示相应的内容
* 更新页面标题和活动菜单项
### 3. 添加initHashRoute函数
* 在页面加载时调用
* 获取URL的hash值
* 如果没有hash值默认设置为#dashboard
* 根据hash值显示相应的内容
* 更新页面标题和活动菜单项
### 4. 在页面加载时调用initHashRoute函数
* 确保在DOMContentLoaded事件中调用initHashRoute函数
## 预期效果
* 页面切换时URL的hash会相应更新
* 刷新页面后会显示与URL hash对应的页面
* 默认情况下http://localhost:8080会显示dashboard内容URL变为http://localhost:8080/#dashboard
* 可以通过URL直接访问特定页面
* 浏览器历史记录中会保存页面状态
## 技术要点
* 使用window.location.hash获取和设置URL的hash值
* 使用window.addEventListener('hashchange', ...)监听hash变化
* 使用window.addEventListener('DOMContentLoaded', ...)在页面加载时初始化
* 确保在页面加载时检查hash值如果没有则设置为#dashboard
## 实现时间
* 预计30分钟完成所有修改和测试
## 风险评估
* 低风险:修改范围明确,不涉及核心功能
* 可回滚:所有修改均为前端修改,可通过恢复文件轻松回滚
## 依赖关系
* 依赖现有的页面切换逻辑
* 依赖现有的CSS类和HTML结构
## 测试策略
* 手动测试页面切换时URL hash的变化
* 测试刷新页面后是否显示正确的页面
* 测试直接访问带hash的URL是否显示正确的页面
* 测试默认情况下是否显示dashboard内容
## 验收标准
* 页面切换时URL的hash会相应更新
* 刷新页面后会显示与URL hash对应的页面
* 默认情况下http://localhost:8080会显示dashboard内容URL变为http://localhost:8080/#dashboard
* 可以通过URL直接访问特定页面
* 浏览器历史记录中会保存页面状态