前端架构思维导图
2026-01-23 13:13:43 0 举报AI智能生成
bbs
作者其他创作
大纲/内容
仓库前端项目
ui（论坛/博客前台，React）
new-framework-front（Vue3 通用框架/管理端工程）
ui（论坛/博客前台，目录：/ui）
技术栈
语言：TypeScript
构建：Vite 6
框架：React 19
路由：react-router-dom 7（HashRouter）
HTTP：Axios（utils/request.ts） fetch（刷新 Token 流程）
富文本/Markdown
@wangeditor/editor（富文本）
md-editor-rt / marked（Markdown 编辑/渲染）
highlight.js（代码高亮）
安全/加密
crypto-js
请求签名 headers（utils/sign.ts，用于防重放）
AI 能力
@google/genai（Gemini）
可选：DeepSeek（通过环境变量注入）
工程与运行
dev：Vite Dev Server（端口 3000）
代理：/app-api、/admin-api -> VITE_API_BASE_URL
环境变量：VITE_API_BASE_URL、GEMINI_API_KEY、DEEPSEEK_API_KEY
入口与路由
入口：index.tsx -> App.tsx
主要页面（pages）
Home：首页列表/搜索/分页/排序
BlogDetail：详情 评论树 点赞/收藏
CreateBlog：发布/草稿 Markdown/富文本双编辑器 AI 辅助
UserCenter：个人中心（我的博客/收藏/评论/资料）
UserPublicPage：他人主页
Login：登录
ErrorPage：错误页
组件（components）
Navbar：导航/搜索/登录态
BlogCard：列表卡片
CommentSection：评论与回复
ImageUpload：上传组件
WangEditor / MarkdownEditor：编辑器封装
Toast：消息提示
API/数据流（services utils）
services/apiClient.ts
apiFetchJson 封装
登录失效回调处理
utils/request.ts
Axios 请求/响应拦截器
Authorization 注入：Weichai <accessToken>
tenant-id 注入（如存在）
401 自动刷新：调用 /admin-api/system/auth/refresh-token
刷新队列：并发请求等待刷新完成后重试
utils/auth.ts
localStorage：accessToken/refreshToken/tenantId
clearAuth：清理登录态
utils/eventBus.ts
Toast/弹窗等全局事件
部署
nginx/default.conf（静态站点发布/反向代理示例）
new-framework-front（目录：/new-framework-front）
技术栈
框架：Vue 3
路由：vue-router
状态：pinia pinia-plugin-persistedstate
UI：ant-design-vue iconify
国际化：vue-i18n
图表：echarts vue-echarts
工程化：Vite ESLint Husky Commitlint
测试：Vitest
文档：VitePress（/docs）
OpenAPI：内置 codegen 脚本（/scripts）
微前端：@ice/stark（依赖中）
结构特征
src/api：OpenAPI 生成的 models/schema
public：tinymce/SDK 等静态资源
nginx：发布配置与基础鉴权文件示例
0 条评论
下一页
