# czefan/tuxun-fe architecture

> Architecture diagram of the GitHub repository czefan/tuxun-fe, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/czefan/tuxun-fe
- Repository: https://github.com/czefan/tuxun-fe

## Overview

图寻前端是面向 H5 与微信小程序的图像寻题、答题及社区应用。主要用户流程是浏览题目、查看详情并提交答案；周边还包括活动、评论互动、投稿记录、积分商城、通知和个人资料。查询层连接各领域 API，并通过 Vue Query 管理分页、缓存和乐观更新。README 与抽样代码未展示页面到领域模块及 API 到后端的具体接线，因此不推断这些边。

Main entry points: [`src/App.vue`](https://github.com/czefan/tuxun-fe/blob/main/src/App.vue) (应用生命周期), [`src/features/photo/query.ts`](https://github.com/czefan/tuxun-fe/blob/main/src/features/photo/query.ts) (题目查询), [`src/features/attempt/query.ts`](https://github.com/czefan/tuxun-fe/blob/main/src/features/attempt/query.ts) (答题查询), [`src/features/comment/query.ts`](https://github.com/czefan/tuxun-fe/blob/main/src/features/comment/query.ts) (评论查询)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["应用与导航"]
  node_app["应用生命周期<br/>[App.vue]"]
  node_routes["页面路由<br/>[routes.ts]"]
  node_home["首页<br/>[index.vue]"]
  node_activity_page["活动页<br/>[index.vue]"]
end

subgraph group_questions["题目与互动"]
  node_question_detail["题目详情<br/>[detail.vue]"]
  node_question_submit["提交答案<br/>[submit.vue]"]
  node_photo_query["题目查询<br/>[query.ts]"]
  node_attempt_query["答题查询<br/>[query.ts]"]
  node_comment_query["评论查询<br/>[query.ts]"]
  node_activity_query["活动查询<br/>[query.ts]"]
  node_attempt_api["答题 API<br/>[api.ts]"]
  node_photo_api["题目 API<br/>[api.ts]"]
  node_comment_api["评论 API<br/>[api.ts]"]
  node_activity_api["活动 API<br/>[api.ts]"]
end

subgraph group_account["账户与记录"]
  node_record_query["个人记录<br/>[query.ts]"]
  node_user_query["用户资料<br/>[query.ts]"]
  node_auth["认证状态<br/>[auth.ts]"]
  node_record_api["记录 API<br/>[api.ts]"]
  node_user_api["用户 API<br/>[api.ts]"]
end

subgraph group_community["社区与服务"]
  node_mall_page["积分商城<br/>[index.vue]"]
  node_mall_query["商城查询<br/>[query.ts]"]
  node_notification_page["通知页面<br/>[index.vue]"]
  node_notification_query["通知查询<br/>[query.ts]"]
  node_mall_api["商城 API<br/>[api.ts]"]
  node_notification_api["通知 API<br/>[api.ts]"]
end

subgraph group_platform["请求与查询"]
  node_query_client["查询客户端<br/>[client.ts]"]
  node_http["HTTP 请求<br/>[http.ts]"]
end

node_user(("用户"))

node_user -->|"启动应用"| node_app
node_app -->|"使用路由"| node_routes
node_user -->|"浏览题目"| node_home
node_user -->|"查看活动"| node_activity_page
node_user -->|"查看题目"| node_question_detail
node_user -->|"提交答案"| node_question_submit
node_user -->|"兑换商品"| node_mall_page
node_user -->|"查看通知"| node_notification_page
node_photo_query -->|"调用题目 API"| node_photo_api
node_attempt_query -->|"调用作答 API"| node_attempt_api
node_comment_query -->|"调用评论 API"| node_comment_api
node_mall_query -->|"调用商城 API"| node_mall_api
node_notification_query -->|"调用通知 API"| node_notification_api
node_record_query -->|"调用记录 API"| node_record_api
node_user_query -->|"调用用户 API"| node_user_api
node_activity_query -->|"调用活动 API"| node_activity_api

click node_app "https://github.com/czefan/tuxun-fe/blob/main/src/App.vue"
click node_routes "https://github.com/czefan/tuxun-fe/blob/main/src/router/routes.ts"
click node_home "https://github.com/czefan/tuxun-fe/blob/main/src/pages/index/index.vue"
click node_activity_page "https://github.com/czefan/tuxun-fe/blob/main/src/pages/activity/index.vue"
click node_question_detail "https://github.com/czefan/tuxun-fe/blob/main/src/subPages/question/detail.vue"
click node_question_submit "https://github.com/czefan/tuxun-fe/blob/main/src/subPages/question/submit.vue"
click node_photo_query "https://github.com/czefan/tuxun-fe/blob/main/src/features/photo/query.ts"
click node_attempt_query "https://github.com/czefan/tuxun-fe/blob/main/src/features/attempt/query.ts"
click node_comment_query "https://github.com/czefan/tuxun-fe/blob/main/src/features/comment/query.ts"
click node_activity_query "https://github.com/czefan/tuxun-fe/blob/main/src/features/activity/query.ts"
click node_mall_page "https://github.com/czefan/tuxun-fe/blob/main/src/subPages/mall/index.vue"
click node_mall_query "https://github.com/czefan/tuxun-fe/blob/main/src/features/mall/query.ts"
click node_notification_page "https://github.com/czefan/tuxun-fe/blob/main/src/pages/notice/index.vue"
click node_notification_query "https://github.com/czefan/tuxun-fe/blob/main/src/features/notification/query.ts"
click node_record_query "https://github.com/czefan/tuxun-fe/blob/main/src/features/record/query.ts"
click node_user_query "https://github.com/czefan/tuxun-fe/blob/main/src/features/user/query.ts"
click node_auth "https://github.com/czefan/tuxun-fe/blob/main/src/store/auth.ts"
click node_query_client "https://github.com/czefan/tuxun-fe/blob/main/src/service/query/client.ts"
click node_http "https://github.com/czefan/tuxun-fe/blob/main/src/service/request/http.ts"
click node_attempt_api "https://github.com/czefan/tuxun-fe/blob/main/src/features/attempt/api.ts"
click node_photo_api "https://github.com/czefan/tuxun-fe/blob/main/src/features/photo/api.ts"
click node_comment_api "https://github.com/czefan/tuxun-fe/blob/main/src/features/comment/api.ts"
click node_mall_api "https://github.com/czefan/tuxun-fe/blob/main/src/features/mall/api.ts"
click node_notification_api "https://github.com/czefan/tuxun-fe/blob/main/src/features/notification/api.ts"
click node_record_api "https://github.com/czefan/tuxun-fe/blob/main/src/features/record/api.ts"
click node_user_api "https://github.com/czefan/tuxun-fe/blob/main/src/features/user/api.ts"
click node_activity_api "https://github.com/czefan/tuxun-fe/blob/main/src/features/activity/api.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_routes,node_home,node_activity_page toneBlue
class node_question_detail,node_question_submit,node_photo_query,node_attempt_query,node_comment_query,node_activity_query,node_attempt_api,node_photo_api,node_comment_api,node_activity_api toneAmber
class node_record_query,node_user_query,node_auth,node_record_api,node_user_api toneMint
class node_mall_page,node_mall_query,node_notification_page,node_notification_query,node_mall_api,node_notification_api toneRose
class node_query_client,node_http,node_user toneIndigo
```

## Components

### 应用与导航

- [应用生命周期](https://github.com/czefan/tuxun-fe/blob/main/src/App.vue): `src/App.vue`
- [页面路由](https://github.com/czefan/tuxun-fe/blob/main/src/router/routes.ts): `src/router/routes.ts`
- [首页](https://github.com/czefan/tuxun-fe/blob/main/src/pages/index/index.vue): `src/pages/index/index.vue`
- [活动页](https://github.com/czefan/tuxun-fe/blob/main/src/pages/activity/index.vue): `src/pages/activity/index.vue`

### 题目与互动

- [题目详情](https://github.com/czefan/tuxun-fe/blob/main/src/subPages/question/detail.vue): `src/subPages/question/detail.vue`
- [提交答案](https://github.com/czefan/tuxun-fe/blob/main/src/subPages/question/submit.vue): `src/subPages/question/submit.vue`
- [题目查询](https://github.com/czefan/tuxun-fe/blob/main/src/features/photo/query.ts): `src/features/photo/query.ts`
- [答题查询](https://github.com/czefan/tuxun-fe/blob/main/src/features/attempt/query.ts): `src/features/attempt/query.ts`
- [评论查询](https://github.com/czefan/tuxun-fe/blob/main/src/features/comment/query.ts): `src/features/comment/query.ts`
- [活动查询](https://github.com/czefan/tuxun-fe/blob/main/src/features/activity/query.ts): `src/features/activity/query.ts`
- [答题 API](https://github.com/czefan/tuxun-fe/blob/main/src/features/attempt/api.ts): `src/features/attempt/api.ts`
- [题目 API](https://github.com/czefan/tuxun-fe/blob/main/src/features/photo/api.ts): `src/features/photo/api.ts`
- [评论 API](https://github.com/czefan/tuxun-fe/blob/main/src/features/comment/api.ts): `src/features/comment/api.ts`
- [活动 API](https://github.com/czefan/tuxun-fe/blob/main/src/features/activity/api.ts): `src/features/activity/api.ts`

### 账户与记录

- [个人记录](https://github.com/czefan/tuxun-fe/blob/main/src/features/record/query.ts): `src/features/record/query.ts`
- [用户资料](https://github.com/czefan/tuxun-fe/blob/main/src/features/user/query.ts): `src/features/user/query.ts`
- [认证状态](https://github.com/czefan/tuxun-fe/blob/main/src/store/auth.ts): `src/store/auth.ts`
- [记录 API](https://github.com/czefan/tuxun-fe/blob/main/src/features/record/api.ts): `src/features/record/api.ts`
- [用户 API](https://github.com/czefan/tuxun-fe/blob/main/src/features/user/api.ts): `src/features/user/api.ts`

### 社区与服务

- [积分商城](https://github.com/czefan/tuxun-fe/blob/main/src/subPages/mall/index.vue): `src/subPages/mall/index.vue`
- [商城查询](https://github.com/czefan/tuxun-fe/blob/main/src/features/mall/query.ts): `src/features/mall/query.ts`
- [通知页面](https://github.com/czefan/tuxun-fe/blob/main/src/pages/notice/index.vue): `src/pages/notice/index.vue`
- [通知查询](https://github.com/czefan/tuxun-fe/blob/main/src/features/notification/query.ts): `src/features/notification/query.ts`
- [商城 API](https://github.com/czefan/tuxun-fe/blob/main/src/features/mall/api.ts): `src/features/mall/api.ts`
- [通知 API](https://github.com/czefan/tuxun-fe/blob/main/src/features/notification/api.ts): `src/features/notification/api.ts`

### 请求与查询

- [查询客户端](https://github.com/czefan/tuxun-fe/blob/main/src/service/query/client.ts): `src/service/query/client.ts`
- [HTTP 请求](https://github.com/czefan/tuxun-fe/blob/main/src/service/request/http.ts): `src/service/request/http.ts`

### Other components

- **用户**

## Connections

- 用户 → 应用生命周期: 启动应用
- 应用生命周期 → 页面路由: 使用路由
- 用户 → 首页: 浏览题目
- 用户 → 活动页: 查看活动
- 用户 → 题目详情: 查看题目
- 用户 → 提交答案: 提交答案
- 用户 → 积分商城: 兑换商品
- 用户 → 通知页面: 查看通知
- 题目查询 → 题目 API: 调用题目 API
- 答题查询 → 答题 API: 调用作答 API
- 评论查询 → 评论 API: 调用评论 API
- 商城查询 → 商城 API: 调用商城 API
- 通知查询 → 通知 API: 调用通知 API
- 个人记录 → 记录 API: 调用记录 API
- 用户资料 → 用户 API: 调用用户 API
- 活动查询 → 活动 API: 调用活动 API