FQuant Document

Appearance

FQuantWeb2 前端项目地图 ​

本文档旨在提供 FQuantWeb2 前端应用的高层结构概览，明确各目录的核心职责，作为新开发者快速理解项目的“地图”。

FQuantWeb2 是一个基于 Nuxt.js 3 的纯静态单页面应用 (SPA)，负责所有数据的可视化展示。

1. pages/ - 页面目录 ​

职责: 项目的核心，遵循 Nuxt 的“基于文件的路由”原则。

  • 结构: 目录结构直接映射为应用的 URL 路由（例如 pages/after/industry.vue 对应路由 /after/industry）。
  • 功能: 每个 .vue 文件都是一个独立的页面，负责组织该页面的整体布局和数据获取。
  • 子目录: after/, bidding/, days/ 等子目录，按照业务场景对页面进行了清晰的分类。

2. components/ - 组件目录 ​

职责: 存放所有可复用的 Vue 组件。

  • Layout/: 包含构成应用骨架的布局组件，如 Header.vue (顶部导航) 和 LeftTab.vue (左侧主菜单)。
  • Left/: 存放与左侧菜单项对应的具体子菜单或面板组件。
  • 根目录组件: 如 MDayMarketAllView.vue 等，是独立的、可在多个页面中复用的通用组件。

3. composables/ - 组合式函数目录 ​

职责: 存放 Nuxt 3 的组合式函数 (Composables)，用于封装和复用有状态的逻辑。

  • store.ts: 核心状态管理。基于 Pinia 实现，用于管理需要跨组件、跨页面共享的全局状态。

4. utils/ - 工具函数目录 ​

职责: 存放通用的、无状态的辅助函数。

  • http.js: 网络请求核心。基于 Axios 封装了 get 和 post 方法，是应用与外部数据（静态 JSON 文件）交互的唯一入口。

5. public/ - 公共资源目录 ​

职责: 存放完全静态的资源，如 favicon.ico, robots.txt 等。这些文件会被直接复制到最终构建输出的根目录下。

6. server/ - 服务器目录 ​

职责: 此目录下的代码用于定义 Nuxt 的服务器端逻辑。

  • middleware/: 定义了服务器中间件。log.ts 是一个日志记录中间件。
  • 注意: 本项目是一个纯静态应用，不包含任何服务器端 API 逻辑 (server/api/ 目录为空或不存在)。

7. 根目录核心文件 ​

  • nuxt.config.ts: 项目配置文件。定义了所有 Nuxt 模块（如 Quasar, Pinia, PWA）、插件、构建选项和应用元数据。
  • app.vue: 应用根组件。是所有页面渲染的入口，通常包含全局布局组件 (<NuxtLayout>) 和页面内容的占位符 (<NuxtPage>)。
  • package.json: 定义了项目依赖和脚本命令（如 dev, build）。