InvestCool 架构图解与更新日志

欢迎来到 InvestCool 的底层实验室。本页面旨在通过架构图解和更新日志，向访问者分享我们是如何一步步构建这个“技术 + 投资”驱动的个人站点的。

🏗️ 系统架构

InvestCool 采用了现代化的 前后端分离 (Decoupled) 架构：

• Frontend: 基于 Nuxt 4 (Vue 3)，利用其卓越的 SSR (服务端渲染) 能力确保极致的 SEO 和首屏加载速度。
• Backend: 采用轻量级的 Flask，负责高频次金融数据的抓取、复杂权重的计算以及 SQLite 数据的管理。
• Data Source: 集成 yfinance 实时拉取雅虎财经数据。
• Deployment: 使用 PM2 进行进程守护，确保 7x24 小时稳定在线。

🛠️ 全站更新日志

📅 2026-03-16 (Invest Studio Harmony 2.0 & Backend Stability)

1. Invest Studio "Harmony 2.0" 视觉平衡重构 (UI Refinement)

• 瑞士网格系统 (Grid Alignment): 彻底重构布局逻辑，通过标准化的横向内边距与 50/50 比例分配，解决文字与容器边缘“贴合不严”的视觉违和感。
• 极简排版精度 (Precision Typography):
  • Prose-Invest 引擎: 升级 Markdown 渲染样式，优化行高至 1.8，段落间距更加和谐，确保长文阅读的呼吸感。
  • 层级清晰化: 标题采用 900 超重黑体，并规范了数值与单位的对齐方式（Base-line alignment）。
• 去噪设计 (Visual De-cluttering): 移除干扰性的渐变背景与超大背景图标，采用细腻的 Slate 描边与单色阴影，让创作者完全聚焦于内容。
• 编辑器沉浸增强: 增加了输入区与预览区的视觉中轴线，并为元数据区域增加了侧边呼吸条指示。

2. 后端数据抓取鲁棒性加固 (Backend Resilience)

• NoneType 全局防御: 针对雅虎财经数据回传异常，实现全链路安全校验，彻底解决“不可索引”导致的后台崩溃。
• 智能数值转换: 引入 safe_float 转换层，确保在金融数据缺失时系统能平滑降级至默认值。

3. 生产环境构建优化 (Build Performance)

• 内存受限适配: 成功解决了 2GB 内存服务器在 Nuxt 4 构建时的 OOM 问题，通过精确控制 max-old-space-size 提升构建稳定性。

📅 2026-03-12 (Luxury Content Experience)

1. 投资分析杂志级排版 (Premium Layout)

• 卡片网格系统: 将分析列表重构为响应式卡片流，支持按“AI”、“宏观”、“半导体”等分类进行即时前端过滤。
• 沉浸式阅读交互:
  • 顶部进度条: 实现随滚动实时变化的精简阅读进度指示。
  • 阅读时间预估: 引入基于智能算法的分钟级阅读时间提示。
• 视觉美学升级:
  • 引入了带大型引号占位符的艺术级引用块（Blockquote）。
  • 详情页采用了 2.5rem 的超大加粗标题与核心摘要盒，大幅增强内容的权威感。

2. 移动端 App 级导航体验 (Mobile UX)

• 底部 Tab 导航栏: 在移动端引入了固定底部导航，支持首页、分析、工具及管理页面的单手快速切换，极大提升了小屏幕下的操作效率。
• 响应式布局重构: 优化了移动端下的安全区域（Padding Bottom），确保内容不被导航栏遮挡。

2. 全球宏观资产看板 (Macro Watch)

• 跨市场数据集成: 后端异步线程现已支持实时抓取 美元指数 (DXY)、黄金 (GOLD) 及 比特币 (BTC) 数据。
• 三位一体视觉: 在右侧面板新增了宏观资产卡片，与 MAG7 观察名单、情绪指数共同构成全方位的市场洞察矩阵。

2. 私密内容管理后台 (Admin Dashboard)

• 权限隔离: 引入了基于 ADMIN_TOKEN 的环境变量鉴权机制。仅持有正确令牌的管理员可进入 /admin 页面进行创作。
• 全流程 CRUD: 实现了文章的在线发布、实时编辑与一键删除功能，彻底告别手动操作数据库的原始方式。
• 集成编辑器: 前端内置了 Markdown 生产力工具，支持标题、摘要及正文的结构化输入。

2. 动态文章 Markdown 渲染引擎 (Content Rendering)

• 解析器集成: 在前端集成了极速的 marked 库，支持将后端数据库返回的纯文本实时转换为富文本 HTML。
• 专业级排版: 为投资分析详情页（[id].vue）应用了定制化的 .prose 样式域，完美支持多级标题、引用块、列表及代码高亮的优雅呈现。

2. 全站深色模式 (Dark Mode Support)

• 多主题体系: 构建了完整的 CSS 变量主题系统，支持一键切换 Light/Dark 模式。
• 图表智能适配: 针对市场情绪仪表盘等 ECharts 组件，实现了基于主题变化的动态重绘功能，确保在深色背景下依然具备卓越的视觉清晰度。
• 状态持久化: 系统会自动记录用户的主题偏好，并在下次访问时自动恢复。

2. 深度数据展示优化 (Visual Intelligence)

• 情绪趋势折线图: 新增了市场情绪历史趋势组件，通过 ECharts 展示最近 30 次采样的得分演变。用户现在可以直观判断市场情绪的边际变化方向。
• 后端历史 API: 扩展了 /api/market-index/history 接口，支持时序数据的高效回溯。

2. 性能与交互极致优化 (Performance & UX)

• 后台预计算引擎: 引入了后端异步工作线程，每 10 分钟自动更新纳斯达克指数、市场情绪及科技巨头行情。彻底消除了用户访问时的等待感，实现 API 秒级响应。
• 骨架屏系统 (Skeleton Loaders): 全站核心组件（仪表盘、行情列表）接入骨架屏技术，在数据加载瞬间提供平滑的视觉占位，提升感知速度。
• 仪表盘视觉修复: 优化了市场情绪仪表盘的缩放比例与布局，使其在紧凑侧边栏中显示更加精致协调。

2. 核心布局优化 (Layout Refinement)

• 居中式布局: 优化了 CSS Grid 定义，在大屏幕下自动居中并限制最大宽度，消除了两侧过度留白，提升阅读沉浸感。
• 移动端交互: 将侧边栏菜单按钮移至左上角，Logo 居中平移，更符合单手握持手机时的操作习惯。
• 紧凑型视觉: 全面缩减了侧边栏宽度、卡片内边距及基础字号，显著提高了页面信息密度。

2. 科技巨头 (MAG7) 监测站

• 实时行情: 右侧面板新增了实时追踪苹果、微软、英伟达等核心科技股的行情卡片。
• 性能优化: 为后端数据接口增加了 10 分钟内存缓存，极大缩短了页面加载时的等待时间。

3. 市场情绪仪表盘 (Sentiment Gauge)

• 多因子模型: 引入了综合 RSI、VIX 恐慌指数、价格水位和美债收益率的加权评分系统。
• ECharts 可视化: 采用半圆型仪表盘设计，直观展示市场处于“恐惧”还是“贪婪”区间。

4. 社交媒体集成

• 规范化管理: 将二维码图片移入 public/images/qrcodes/ 目录进行工程化管理。
• 侧边栏置顶: 在右侧面板首位展示公众号与小红书关注入口。

5. 基础建设

• 中文化适配: 完成了全站 UI 的翻译及中文字体族的优化。
• README 更新: 完善了生产环境编译与 PM2 启动的详细操作手册。

“代码不仅是实现功能的工具，更是我们思考投资与世界的逻辑表达。”