热榜新闻/黄金实时价格监控系统 - 项目结构说明

📁 项目结构

gold_trend/
├── index.html              # 主入口文件
├── README.md               # 项目说明文档
├── AI_CONFIG.md            # AI配置文件
├── REFACTOR.md             # 重构说明
├── performance_test.js     # 性能测试脚本
├── css/
│   ├── gold-monitor.css    # 黄金监控主样式
│   ├── style.css           # 通用样式
│   ├── contact-style.css   # 联系页面样式
│   ├── data-sources-style.css  # 数据来源页面样式
│   ├── disclaimer-style.css    # 免责声明页面样式
│   └── support-style.css      # 支持页面样式
├── js/
│   ├── main.js             # 主JavaScript逻辑
│   ├── main.js.bak         # 主JavaScript备份
│   ├── ai-chat.js          # AI聊天功能
│   ├── disclaimer-modal.js # 免责声明模态框
│   └── weather-notify.js   # 天气通知功能
├── images/
│   ├── aikefu.png          # AI客服图标
│   └── loading.gif         # 加载动画图片
├── includes/
│   ├── header.html         # 头部导航
│   └── footer.html         # 底部信息
├── contact.html            # 联系页面
├── data-sources.html       # 数据来源页面
├── disclaimer.html         # 免责声明页面
├── support.html            # 支持页面
└── .trae/
    └── documents/          # 项目文档
        ├── js_transfer_plan.md     # JS代码转移计划
        └── nav_tab_url_params_plan.md  # 导航标签URL参数计划

🚀 使用方法

直接在浏览器中打开 index.html 即可使用
确保所有文件夹(css, js, includes, images)与index.html在同一目录下

📝 文件说明

index.html

主HTML文件,包含页面结构和布局
引用外部CSS和JS文件
使用语义化HTML标签
包含导航栏、内容区域和页脚

css/gold-monitor.css

黄金监控主样式文件
包含响应式设计
深色主题配色
动画和过渡效果
加载动画样式

css/style.css

通用样式文件
基础样式定义

css/contact-style.css

联系页面专用样式

css/data-sources-style.css

数据来源页面专用样式

css/disclaimer-style.css

免责声明页面专用样式

css/support-style.css

支持页面专用样式

js/main.js

主JavaScript逻辑文件
包含:
- 黄金价格监控
- K线图渲染
- 热搜数据获取
- 电影榜数据
- 周期资讯
- 舆情分析
- 价格告警
- 巨鲸检测
- 导航标签URL参数处理

js/ai-chat.js

AI聊天功能实现

js/disclaimer-modal.js

免责声明模态框功能

js/weather-notify.js

天气通知功能

includes/header.html

头部导航栏
品牌标识
页面切换标签

includes/footer.html

底部信息栏
数据来源说明

contact.html

联系页面
包含联系方式和表单

data-sources.html

数据来源页面
说明数据来源和API信息

disclaimer.html

免责声明页面
包含法律声明和免责条款

support.html

支持页面
包含使用说明和常见问题

performance_test.js

性能测试脚本
用于测试页面加载性能和渲染性能

images/loading.gif

加载动画图片
用于页面加载和数据获取过程中显示

🎯 功能模块

黄金监控 - 实时监控AU9999、伦敦金、工银积存金、浙商积存金价格
K线图 - 支持分时、日K、周K、月K查看
热搜 - 8大平台实时热搜数据
电影榜 - 全球电影票房排行榜
周期资讯 - 每日简报、AI动态、汇率、历史等

🔄 数据更新频率

黄金价格: 每10秒刷新
舆情数据: 每5分钟自动更新，支持获取当日最新文章（带真实时间戳）
其他数据: 手动刷新

🎨 技术栈

纯HTML/CSS/JavaScript
无需任何框架或依赖
Canvas图表绘制
响应式设计

📊 核心功能模块技术实现

1. 黄金价格监控系统

功能概述

实时监控AU9999、伦敦金、工银积存金、浙商积存金价格，支持价格变动告警和趋势分析。

实现架构

数据源管理：采用多源数据获取策略，确保数据可靠性
- 主要数据源：60s-api (60s.viki.moe/v2/gold-price)
- 备用数据源：新浪财经、东方财富、lolimi API
- 数据获取优先级：60s-api → 新浪财经 → 东方财富JSONP → 东方财富XHR → lolimi兜底
数据处理流程：
1. fetch60sGoldPrice()：获取60s-api数据，包含现货贵金属、品牌金店零售、银行投资金条等信息
2. fetchAU9999()：获取新浪财经期货接口数据
3. fetchLondonGold()：获取伦敦金价格数据
4. updateBankGold()：基于AU9999实时价格计算银行积存金价格
5. updateSymPrice()：统一更新品种价格状态，处理价格变化、告警检查和K线数据生成
价格计算逻辑：
- 银行积存金价格 = AU9999价格 + 点差（工银：-5.0至-8.0元/克，浙商：-5.5至-8.5元/克）
- 价格变化计算：基于开盘价和前一价格的差值

2. K线图渲染系统

功能概述

提供AU9999、伦敦金、工银积存金、浙商积存金的K线图展示，支持分时、日K、周K、月K切换，包含MA均线、成交量等技术指标。

实现架构

Canvas渲染：使用HTML5 Canvas API绘制K线图，采用离屏Canvas优化渲染性能
数据结构：K线数据包含时间、开盘价、最高价、最低价、收盘价、成交量
性能优化：
- 渲染状态缓存：避免重复计算和绘制
- 分片加载：初始加载最近20条数据，延迟加载完整数据
- 节流函数：限制鼠标移动事件触发频率
- requestAnimationFrame：优化渲染队列管理
核心函数：
- buildKChart()：构建K线图，将渲染任务加入队列
- processRenderQueue()：处理渲染队列，检查是否需要渲染
- renderKChart()：实际渲染K线图，包括背景、网格、价格标注、MA均线、平滑曲线、成交量等
- genKline()：生成K线数据
- loadKlineDataInChunks()：分片加载K线数据
交互功能：
- 十字光标：显示鼠标位置对应的价格和时间
- 图例：显示MA5、MA10、MA20指标
- 价格标签：显示当前价格和涨跌信息

3. 热搜数据系统

功能概述

聚合8大平台实时热搜数据，包括微博、百度、知乎、抖音等。

实现架构

平台配置：定义热搜平台配置，包含名称、API URL、解析规则等
数据获取：
- fetchOnePlatform()：获取单个平台的热搜数据
- fetchAllHot()：并行获取所有平台的热搜数据
数据渲染：将获取的热搜数据渲染到页面，支持平台切换

4. 电影榜系统

功能概述

展示全球电影票房排行榜，包括猫眼票房、豆瓣口碑、实时热度等数据。

实现架构

数据源配置：定义电影数据源配置，包含名称、API URL、解析规则等
数据获取：
- fetchOneMovie()：获取单个数据源的电影数据
- fetchAllMovies()：并行获取所有数据源的电影数据
数据渲染：将获取的电影数据渲染到页面，支持数据源切换

5. 周期资讯系统

功能概述

提供每日简报、AI动态、汇率、历史、游戏、IT等周期资讯。

实现架构

数据源配置：定义资讯数据源配置，包含名称、API URL、解析规则等
数据获取：
- fetchOneNews()：获取单个数据源的资讯数据
- fetchAllNews()：并行获取所有数据源的资讯数据
数据渲染：将获取的资讯数据渲染到页面，支持数据源切换

6. 信号系统与告警机制

功能概述

提供价格告警、交易信号分析和巨鲸监测功能。

实现架构

告警系统：
- checkAlert()：检查价格是否触发告警条件
- updateAlertStatus()：更新告警状态显示
信号系统：
- addSignal()：添加交易信号
- renderSignals()：渲染信号列表
- analyzeSignals()：分析价格趋势，生成交易信号
巨鲸监测：
- updateWhaleScores()：计算巨鲸活动评分，监测大额资金流动

7. 性能优化策略

前端性能优化

Canvas渲染优化：
- 离屏Canvas缓存
- 渲染状态缓存
- 分片加载数据
- 节流函数处理鼠标事件
数据处理优化：
- 多数据源并行获取
- 数据缓存机制
- 延迟加载非关键数据
DOM操作优化：
- 批量DOM操作
- 事件委托
- 减少不必要的重排重绘

数据获取优化

多源数据获取：确保数据可靠性和实时性
数据优先级：根据数据源可靠性设置优先级
错误处理：完善的错误处理和 fallback 机制
缓存策略：合理使用内存缓存，减少重复请求

8. 响应式设计实现

布局策略

Flexbox布局：使用Flexbox实现灵活的布局结构
Grid布局：使用Grid布局实现复杂的网格结构
媒体查询：根据屏幕尺寸调整布局和样式

响应式断点

大屏幕（>1200px）：完整布局，多列显示
中等屏幕（900px-1200px）：调整为2列布局
小屏幕（<900px）：单列布局，简化导航
移动设备（<500px）：进一步简化布局，优化触摸体验

🛠️ 关键技术点

1. Canvas图表绘制

使用HTML5 Canvas API实现高性能K线图绘制
支持自定义颜色方案和样式
实现平滑曲线、发光效果和动画效果
优化渲染性能，避免卡顿

2. 多源数据获取

实现多源数据获取和优先级管理
完善的错误处理和 fallback 机制
并行数据获取，提高数据加载速度
数据缓存策略，减少重复请求

3. 实时数据更新

使用setInterval实现定期数据更新
价格变化动画效果
交易状态实时更新
信号系统实时分析

4. 模块化设计

功能模块化，便于维护和扩展
事件驱动架构，提高代码可维护性
状态管理集中化，便于追踪和调试
工具函数封装，提高代码复用性

5. 用户体验优化

加载动画和过渡效果
响应式设计，适配不同设备
交互反馈和提示信息
错误处理和用户引导

📈 数据更新机制

黄金价格数据

更新频率：每10秒
数据源：60s-api、新浪财经、东方财富、lolimi API
数据处理：多源数据融合，确保准确性

舆情数据

更新频率：每5分钟
数据源：金十数据、新浪财经RSS
数据处理：情感分析，分类展示

热搜数据

更新方式：手动刷新
数据源：8大平台热搜API
数据处理：实时抓取，分类展示

电影榜数据

更新方式：手动刷新
数据源：猫眼票房、豆瓣口碑等
数据处理：实时抓取，排名展示

周期资讯数据

更新方式：手动刷新
数据源：多个资讯平台
数据处理：分类聚合，时间排序

🔧 部署与使用

本地部署

克隆或下载项目到本地
确保所有文件夹（css, js, includes）与index.html在同一目录下
直接在浏览器中打开 index.html 即可使用

服务器部署

将项目文件上传到Web服务器
确保服务器支持静态文件访问
通过服务器URL访问项目

浏览器兼容性

支持所有现代浏览器（Chrome, Firefox, Safari, Edge）
不支持IE11及以下版本

📁 项目结构详情

核心文件说明

index.html

主HTML文件，包含页面结构和布局
引用外部CSS和JS文件
使用语义化HTML标签
包含导航栏、内容区域和页脚

css/gold-monitor.css

所有CSS样式
包含响应式设计
深色主题配色
动画和过渡效果

js/main.js

所有JavaScript逻辑
包含：
- 黄金价格监控
- K线图渲染
- 热搜数据获取
- 电影榜数据
- 周期资讯
- 舆情分析
- 价格告警
- 巨鲸检测

includes/header.html

头部导航栏
品牌标识
页面切换标签

includes/footer.html

底部信息栏
数据来源说明

📚 API文档

黄金价格API

60s-api

URL: https://60s.viki.moe/v2/gold-price
方法: GET
返回格式: JSON
数据结构:
- code: 状态码
- data:
  - metals: 现货贵金属数据
  - stores: 品牌金店零售数据
  - banks: 银行投资金条数据
  - recycle: 回收价数据

新浪财经期货接口

URL: https://hq.sinajs.cn/list=hf_AU0
方法: GET
返回格式: 文本
数据格式: var hq_str_hf_AU0="开盘价,最高价,最低价,收盘价,成交量..."

东方财富API

URL: https://push2.eastmoney.com/api/qt/stock/get?secid={secid}&fields={fields}
方法: GET
返回格式: JSON
参数:
- secid: 品种代码（118.Au9999 或 122.XAU）
- fields: 字段列表（f43,f44,f45,f46,f58,f60,f152）

热搜API

微博热搜

URL: https://weibo.com/ajax/statuses/hot_band
方法: GET
返回格式: JSON

百度热搜

URL: https://top.baidu.com/api/board?platform=pc&tab=realtime
方法: GET
返回格式: JSON

电影榜API

猫眼票房

URL: https://piaofang.maoyan.com/dashboard
方法: GET
返回格式: HTML

豆瓣口碑

URL: https://movie.douban.com/chart
方法: GET
返回格式: HTML

🛡️ 安全与隐私

数据安全

所有数据均来自公开API，不涉及用户隐私数据
数据传输采用HTTPS协议
不存储用户数据

隐私保护

不收集用户个人信息
不使用第三方跟踪代码
不设置Cookie

📝 开发与扩展

开发环境

无需特殊开发环境，使用任何文本编辑器即可
推荐使用VS Code、Sublime Text等现代编辑器

扩展指南

添加新的黄金品种

在 ST 全局状态中添加品种配置
在 SYM_META 中添加品种元数据
实现对应的数据源获取函数
在UI中添加对应的标签和卡片

添加新的热搜平台

在 HS_PLATFORMS 中添加平台配置
实现对应的数据解析函数
在UI中添加对应的标签

添加新的电影数据源

在 MV_SOURCES 中添加数据源配置
实现对应的数据解析函数
在UI中添加对应的标签

添加新的资讯数据源

在 NS_SOURCES 中添加数据源配置
实现对应的数据解析函数
在UI中添加对应的标签

🤝 贡献指南

提交代码

Fork 项目
创建特性分支
提交更改
推送到分支
开启 Pull Request

代码规范

遵循JavaScript标准风格
使用语义化变量和函数命名
添加必要的注释
保持代码简洁和可读性

📄 许可证

本项目采用 MIT 许可证，详见 LICENSE 文件。

📞 联系方式

如有问题或建议，可通过以下方式联系：

邮箱：contact@example.com
GitHub：https://github.com/example/gold-monitor

黄金实时监控面板 v3 - 为您提供专业、实时的黄金市场监控服务！