下面提供你一份 专门为前端项目优化的《技术文档自动生成 Prompt 模板》 ，适用于：
- React / Vue / Angular / Svelte / Next.js / Nuxt / Vite / Webpack
- 单页应用（SPA）、组件库、管理后台、大型前端工程
- 任意 JS/TS 前端项目结构
这是你可以 长期复用 的版本。
✅ 《前端项目技术文档生成器》Prompt（可复用模板）
只需上传你的前端项目代码，然后贴入下面这段 Prompt，就能自动生成一整套专业文档。
你现在扮演一名「前端架构师 + 工程化专家 + 技术文档工程师」。
我将提供你一个前端项目（Vue/React/Angular/Next/其他）。
请基于我提供的代码，自动生成可用于入职培训和项目交接的技术文档。
请严格按以下结构输出（每一部分都必须生成）：
====================================
1. 项目概述（Project Overview）
- 项目功能、用途、业务定位
- 前端技术栈（框架、语言、主要依赖）
- 基础工程化工具（Vite/Webpack、ESLint、Prettier、TS 等）
- 项目亮点和架构意图
===========================================
2. 项目目录结构（Project Structure）
请扫描我提供的代码，生成一个简洁但完整的前端目录树（建议 2-3 层），并解释：
对每个目录请输出：
- 该目录作用
- 是否为核心业务目录 / 公用组件目录 / 工具模块 / 配置目录
重点关注前端常见结构：
- src/
- pages/ 或 views/
- components/
- hooks/ composables/
- store/（Pinia、Redux、MobX、Zustand）
- router/
- assets/
- utils/
- api/
- types/
- public/
=======================================
3. 核心模块分析（Core Modules）
对前端项目中的关键模块进行详细说明：
- 页面 / 路由模块
- 状态管理（Vuex / Pinia / Redux / Zustand）
- API 请求封装模块
- 公用组件库
- 工具库（utils）
- 权限模块（ACL / Router Guards）
- 配置模块（config）
- 国际化模块（i18n，如存在）
- 构建配置（vite.config.js / webpack.config.js）
每个模块需包含：
- 职责
- 内部核心文件
- 核心逻辑
- 模块之间的依赖关系
==========================================
4. 关键代码深度解析（Important Code Insight）
请自动识别「关键文件」并深入讲解，包括：
对每个关键文件分析：
- 文件职责
- 关键函数 / 组件
- 组件的 Props / emits / 状态
- 生命周期或钩子逻辑
- 与其他模块的交互
- 异常情况处理
可包含（如存在）：
- main.ts / main.js
- App.vue / App.tsx
- router/index.ts
- store/index.ts
- api/index.ts
- layout 相关文件
=======================================
5. 前端架构设计（Architecture）
生成基于代码的前端架构说明：
- 分层结构（组件层 / 页面层 / 服务层 / 状态层）
- 数据流动方式（自上而下的 props、事件、全局 store、API）
- 组件通信方式
- 状态同步模型（如 Redux flow / Vue reactivity flow）
- 可视化架构图（推荐用 Mermaid）
示例（AI 可根据实际项目生成）：
==================================
6. 应用运行流程（Runtime Flow）
请解释整个前端应用从启动到渲染的完整流程：
- 如何初始化应用（入口文件 main.ts）
- 路由加载流程
- Store 初始化流程
- API 初始化（如 Axios 拦截器）
- 页面渲染顺序
- 数据加载流程（从页面 → 服务 → API）
- 用户权限验证流程（如存在）
如可行请生成：
- 请求流程时序图
- 登录流程图
- 页面渲染流程图
=============================
7. 工程化配置分析（Build & Tooling）
解释工程化相关内容：
- 打包工具（Vite / Webpack）
- 插件（如自动导入、压缩、代码分割、路由自动生成）
- TypeScript 配置
- Lint 工具（ESLint、Stylelint）
- Prettier 格式化
- Husky / lint-staged（如存在）
- 环境变量机制（.env 文件说明）
==============================
8. 启动 & 开发指南（Run & Development Guide）
根据代码自动生成项目启动与开发说明：
开发：
- 安装依赖
- 运行开发环境
- 打包生产环境
- 调试建议
- 热更新机制讲解
常见问题：
- 依赖报错的原因与解决
- TS 报错解决方式
- 打包失败的常见原因
- 浏览器 CORS 问题（如存在）
======================================
9. 新人快速上手指南（Onboarding Guide）
为新加入的前端开发者生成：
- 先看哪些文件？
- 如何运行项目？
- 如何调试一个页面？
- 如何新增一个页面？
- 如何新增 API？
- 组件开发规范
- 提交规范（如存在：commitlint）
=======================================
10. 技术债 & 改进建议（Technical Debt & Improvements）
基于代码自动分析：
- 代码可读性问题
- 重复逻辑
- 组件过度耦合
- 状态冗余
- API 封装改进建议
- 可工程化的提升点
- 文档缺失点
========================================
输出要求：
- 使用 Markdown
- 清晰分区、分标题
- 内容必须基于实际代码，不猜测未出现内容
- 若项目缺少信息，请明确标注"代码不足以判断"