# 代码规范 **本文引用的文件** - [server/package.json](file://server/package.json) - [my-uniapp-vue3/package.json](file://my-uniapp-vue3/package.json) - [server/tsconfig.json](file://server/tsconfig.json) - [my-uniapp-vue3/tsconfig.json](file://my-uniapp-vue3/tsconfig.json) - [server/src/app.ts](file://server/src/app.ts) - [server/prisma/schema.prisma](file://server/prisma/schema.prisma) - [server/src/modules/auth/auth.controller.ts](file://server/src/modules/auth/auth.controller.ts) - [server/src/modules/tts/tts.controller.ts](file://server/src/modules/tts/tts.controller.ts) - [server/src/middleware/errorHandler.ts](file://server/src/middleware/errorHandler.ts) - [server/src/services/logger.service.ts](file://server/src/services/logger.service.ts) - [my-uniapp-vue3/src/main.ts](file://my-uniapp-vue3/src/main.ts) - [my-uniapp-vue3/src/components/AudioDownload.vue](file://my-uniapp-vue3/src/components/AudioDownload.vue) - [my-uniapp-vue3/src/store/user.ts](file://my-uniapp-vue3/src/store/user.ts) ## 目录 1. [简介](#简介) 2. [项目结构](#项目结构) 3. [核心组件](#核心组件) 4. [架构总览](#架构总览) 5. [详细组件分析](#详细组件分析) 6. [依赖关系分析](#依赖关系分析) 7. [性能考虑](#性能考虑) 8. [故障排查指南](#故障排查指南) 9. [结论](#结论) 10. [附录](#附录) ## 简介 本规范面向AI有声书生成平台的前后端团队,统一TypeScript/JavaScript编码风格、Vue3组件开发规范、命名约定与文件组织结构,并给出数据库模型规范、代码格式化工具配置建议、Git提交信息规范以及代码审查检查清单。目标是提升代码一致性、可维护性与协作效率。 ## 项目结构 - 后端采用Koa + TypeScript,模块化路由与服务分层清晰;数据库使用Prisma + MySQL。 - 前端基于UniApp + Vue3 + Pinia,组件按功能页面拆分,状态集中管理。 - 构建与脚本在各自package.json中定义,类型检查与路径别名在tsconfig中配置。 ```mermaid graph TB subgraph "后端" APP["应用入口
server/src/app.ts"] ROUTER["路由注册
各模块控制器"] MWARE["中间件
错误处理/安全/限流/日志"] SRV["服务层
业务逻辑封装"] PRISMA["数据模型
server/prisma/schema.prisma"] end subgraph "前端" MAIN["应用入口
my-uniapp-vue3/src/main.ts"] STORE["状态管理
Pinia Store"] COMP["组件库
my-uniapp-vue3/src/components/*.vue"] PAGE["页面路由
my-uniapp-vue3/src/pages/*.vue"] end APP --> ROUTER --> SRV --> PRISMA APP --> MWARE MAIN --> STORE MAIN --> COMP MAIN --> PAGE ``` 图表来源 - [server/src/app.ts:1-194](file://server/src/app.ts#L1-L194) - [server/prisma/schema.prisma:1-472](file://server/prisma/schema.prisma#L1-L472) - [my-uniapp-vue3/src/main.ts:1-32](file://my-uniapp-vue3/src/main.ts#L1-L32) 章节来源 - [server/src/app.ts:1-194](file://server/src/app.ts#L1-L194) - [my-uniapp-vue3/src/main.ts:1-32](file://my-uniapp-vue3/src/main.ts#L1-L32) ## 核心组件 - 应用入口与路由装配:后端通过Koa创建HTTP服务,挂载中间件、静态资源与路由;前端通过createSSRApp初始化应用与Pinia。 - 数据模型:Prisma Schema定义了用户、书籍、章节、播放记录、订单、订阅等核心实体及索引策略。 - 控制器与服务:控制器负责参数校验、权限控制与响应封装;服务层封装业务逻辑与外部调用。 - 中间件与日志:统一错误处理、安全防护、性能监控与Winston日志记录。 - 前端组件与状态:组件职责单一、Props明确、事件与生命周期管理规范;Pinia集中管理用户状态与派生状态。 章节来源 - [server/src/app.ts:1-194](file://server/src/app.ts#L1-L194) - [server/prisma/schema.prisma:1-472](file://server/prisma/schema.prisma#L1-L472) - [server/src/modules/auth/auth.controller.ts:1-94](file://server/src/modules/auth/auth.controller.ts#L1-L94) - [server/src/modules/tts/tts.controller.ts:1-274](file://server/src/modules/tts/tts.controller.ts#L1-L274) - [server/src/middleware/errorHandler.ts:1-67](file://server/src/middleware/errorHandler.ts#L1-L67) - [server/src/services/logger.service.ts:1-114](file://server/src/services/logger.service.ts#L1-L114) - [my-uniapp-vue3/src/components/AudioDownload.vue:1-179](file://my-uniapp-vue3/src/components/AudioDownload.vue#L1-L179) - [my-uniapp-vue3/src/store/user.ts:1-107](file://my-uniapp-vue3/src/store/user.ts#L1-L107) ## 架构总览 后端采用“中间件 -> 路由 -> 控制器 -> 服务 -> 数据库”的分层结构;前端采用“页面/组件 -> Store -> API工具”的分层结构。日志与错误处理贯穿全链路,确保可观测性与稳定性。 ```mermaid sequenceDiagram participant C as "客户端" participant R as "路由层
控制器" participant S as "服务层" participant D as "数据库
Prisma" C->>R : "HTTP请求" R->>R : "参数校验/权限检查" R->>S : "调用业务逻辑" S->>D : "查询/写入" D-->>S : "结果集" S-->>R : "聚合结果" R-->>C : "统一响应结构" ``` 图表来源 - [server/src/app.ts:100-128](file://server/src/app.ts#L100-L128) - [server/src/modules/tts/tts.controller.ts:52-127](file://server/src/modules/tts/tts.controller.ts#L52-L127) - [server/prisma/schema.prisma:130-194](file://server/prisma/schema.prisma#L130-L194) ## 详细组件分析 ### 后端:应用入口与中间件 - 中间件顺序与职责: - 错误处理:捕获异常并返回统一结构。 - 安全防护:XSS与SQL注入防护。 - CORS与BodyParser:跨域与请求体解析。 - 限流与性能监控:预留限流开关与性能指标。 - 日志:Winston记录HTTP请求与错误。 - 路由注册:按模块挂载子路由前缀,统一暴露REST接口。 - 启动流程:初始化Sentry、连接数据库、测试Redis与存储、初始化WebSocket、启动队列处理器、优雅关闭。 ```mermaid flowchart TD Start(["启动"]) --> InitSentry["初始化Sentry"] InitSentry --> ConnectDB["连接数据库"] ConnectDB --> TestRedis["测试Redis连接"] TestRedis --> TestStorage["测试存储连接"] TestStorage --> InitPlans["初始化订阅套餐"] InitPlans --> InitWS["初始化WebSocket"] InitWS --> Listen["监听端口"] Listen --> Queue["初始化队列处理器"] Queue --> Resume["恢复中断任务"] Resume --> Graceful["注册优雅关闭"] Graceful --> End(["运行中"]) ``` 图表来源 - [server/src/app.ts:133-192](file://server/src/app.ts#L133-L192) 章节来源 - [server/src/app.ts:64-130](file://server/src/app.ts#L64-L130) - [server/src/app.ts:133-192](file://server/src/app.ts#L133-L192) ### 后端:控制器与服务层 - 控制器规范: - 使用Koa Router定义路由,参数从ctx.request.body或ctx.params读取。 - 使用自定义错误类抛出语义化错误,便于统一处理。 - 响应统一结构:{ code, message, data }。 - 服务层规范: - 将业务逻辑封装在服务中,避免控制器臃肿。 - 对外依赖抽象(如TTS提供商),便于替换与测试。 - 示例:TTS控制器对文本长度、音色、配额进行严格校验,并支持异步生成与状态查询。 ```mermaid sequenceDiagram participant Client as "客户端" participant Ctrl as "TTS控制器" participant Svc as "TTS服务" participant Sub as "订阅服务" participant DB as "Prisma" Client->>Ctrl : "POST /api/tts/generate" Ctrl->>Ctrl : "参数校验/配额检查" Ctrl->>Sub : "checkAudioQuota(userId, words)" Sub-->>Ctrl : "允许/拒绝" Ctrl->>Svc : "generateAudio(...)" Svc->>DB : "持久化记录" DB-->>Svc : "成功" Svc-->>Ctrl : "{audioId}" Ctrl-->>Client : "{code,message,data}" ``` 图表来源 - [server/src/modules/tts/tts.controller.ts:52-127](file://server/src/modules/tts/tts.controller.ts#L52-L127) - [server/src/middleware/errorHandler.ts:26-67](file://server/src/middleware/errorHandler.ts#L26-L67) 章节来源 - [server/src/modules/tts/tts.controller.ts:1-274](file://server/src/modules/tts/tts.controller.ts#L1-L274) - [server/src/middleware/errorHandler.ts:1-67](file://server/src/middleware/errorHandler.ts#L1-L67) ### 后端:数据库模型与索引 - 实体关系: - 用户与书籍、章节、播放记录、收藏、评论、订单、订阅、播放列表等强关联。 - 订单与订阅计划多对一,章节与书籍一对多。 - 索引策略: - 多数查询条件建立复合索引或单列索引,如用户+时间、状态、唯一组合等。 - 外键关系显式映射,保证引用完整性。 - 字段约束: - 时间戳、金额、枚举字符串状态、长文本字段使用合适类型与长度。 ```mermaid erDiagram USER { int id PK string phone UK string openid UK string nickname string avatar int memberLevel datetime memberExpireAt int dailyUsage string lastUsageDate datetime createdAt datetime updatedAt } BOOK { int id PK int userId string title string status string genStage datetime createdAt datetime updatedAt } BOOKCHAPTER { int id PK int bookId FK int parentId int level int number string title string status string genStage datetime updatedAt } ORDER { int id PK int userId FK string orderNo UK int planId FK string productType decimal amount string status datetime paidAt datetime createdAt datetime updatedAt } SUBSCRIPTIONPLAN { int id PK string name int level decimal priceMonthly boolean isRecommended int dailyGenerations int monthlyMinutes datetime createdAt datetime updatedAt } PLAYRECORD { int id PK int userId FK int chapterId FK float progress float duration datetime updatedAt } FAVORITE { int id PK int userId FK int bookId FK datetime createdAt } COMMENT { int id PK int userId FK int chapterId FK string content int rating datetime createdAt } USERPREFERENCE { int id PK int userId UK float playSpeed string quality string theme string defaultVoiceId int defaultVolume boolean autoPlayNext boolean wifiOnlyDownload datetime createdAt datetime updatedAt } AUDIORECORD { int id PK int userId string audioId UK string title int wordCount string voiceId string audioUrl int audioDuration int audioSize string status datetime createdAt datetime updatedAt } USER ||--o{ BOOK : "拥有" BOOK ||--o{ BOOKCHAPTER : "包含" USER ||--o{ ORDER : "下单" SUBSCRIPTIONPLAN ||--o{ ORDER : "被购买" USER ||--o{ PLAYRECORD : "播放" BOOKCHAPTER ||--o{ PLAYRECORD : "被记录" USER ||--o{ FAVORITE : "收藏" BOOK ||--o{ FAVORITE : "被收藏" USER ||--o{ COMMENT : "发表" BOOKCHAPTER ||--o{ COMMENT : "被评论" USER ||--o{ AUDIORECORD : "生成" ``` 图表来源 - [server/prisma/schema.prisma:10-472](file://server/prisma/schema.prisma#L10-L472) 章节来源 - [server/prisma/schema.prisma:10-472](file://server/prisma/schema.prisma#L10-L472) ### 前端:应用入口与状态管理 - 应用入口:创建SSR应用、安装Pinia,初始化用户状态。 - 状态管理:使用Pinia Store集中管理token、用户信息、会员状态;提供派生状态与方法。 - 组件规范:Props明确、默认值合理、事件与生命周期管理清晰;组件职责单一、可复用性强。 ```mermaid classDiagram class UserStore { +token : string|null +userInfo : UserInfo|null +memberStatus : MemberStatus|null +isLoggedIn : computed +isMember : computed +initUser() +login(phone, code) +sendCode(phone) +fetchUserInfo() +fetchMemberStatus() +logout() +updateUserInfo(info) } ``` 图表来源 - [my-uniapp-vue3/src/store/user.ts:7-107](file://my-uniapp-vue3/src/store/user.ts#L7-L107) 章节来源 - [my-uniapp-vue3/src/main.ts:1-32](file://my-uniapp-vue3/src/main.ts#L1-L32) - [my-uniapp-vue3/src/store/user.ts:1-107](file://my-uniapp-vue3/src/store/user.ts#L1-L107) ### 前端:组件开发规范示例 - 组件职责:单一功能、可插槽扩展、具备重试与进度反馈。 - Props定义:明确必填与可选字段,提供默认值。 - 生命周期:在setup中声明响应式状态,避免副作用在模板中直接执行。 - 事件处理:对外暴露事件,内部通过Promise封装异步操作。 ```mermaid flowchart TD Click["点击下载"] --> Check["检查下载状态"] Check --> |已下载| End["结束"] Check --> |未下载| RetryLoop["重试循环(最多N次)"] RetryLoop --> Exec["执行下载"] Exec --> Save["保存到本地"] Save --> Success["成功提示"] Exec --> Fail["失败处理"] Fail --> RetryLoop ``` 图表来源 - [my-uniapp-vue3/src/components/AudioDownload.vue:34-129](file://my-uniapp-vue3/src/components/AudioDownload.vue#L34-L129) 章节来源 - [my-uniapp-vue3/src/components/AudioDownload.vue:1-179](file://my-uniapp-vue3/src/components/AudioDownload.vue#L1-L179) ## 依赖关系分析 - 后端依赖:Koa生态、Prisma、LangChain/LangGraph、队列与缓存、对象存储、Sentry、Winston等。 - 前端依赖:UniApp、Vue3、Pinia、类型与构建工具等。 ```mermaid graph LR subgraph "后端依赖" Koa["@koa/*"] Prisma["@prisma/client"] Lang["@langchain/*"] Bull["bull"] Redis["ioredis"] Axios["axios"] Winston["winston"] Sentry["@sentry/*"] end subgraph "前端依赖" UniApp["@dcloudio/uni-app*"] Vue["vue"] Pinia["pinia"] Types["@dcloudio/types"] end ``` 图表来源 - [server/package.json:11-44](file://server/package.json#L11-L44) - [my-uniapp-vue3/package.json:39-63](file://my-uniapp-vue3/package.json#L39-L63) 章节来源 - [server/package.json:1-60](file://server/package.json#L1-L60) - [my-uniapp-vue3/package.json:1-65](file://my-uniapp-vue3/package.json#L1-L65) ## 性能考虑 - 后端: - 合理使用索引与查询条件,避免全表扫描;对高频查询建立复合索引。 - 限制请求体大小与文件上传大小,防止资源滥用。 - 使用队列异步处理耗时任务(如TTS生成),控制器快速返回。 - 性能监控与指标导出,结合日志定位瓶颈。 - 前端: - 组件懒加载与按需引入,减少首屏体积。 - 下载组件增加重试与进度反馈,改善用户体验。 - Pinia状态粒度适中,避免过度响应式导致的渲染抖动。 ## 故障排查指南 - 统一错误处理: - 自定义错误类覆盖常见场景(未授权、禁止、不存在、参数错误、配额超限)。 - 中间件捕获异常并返回统一结构,开发环境附加堆栈信息。 - 日志体系: - Winston记录HTTP请求与错误,区分级别与文件滚动策略。 - 结合Sentry进行错误采样与性能追踪。 - 常见问题定位: - 接口报错:查看统一响应中的code/message,结合日志定位具体请求。 - 数据库异常:检查Prisma生成的客户端与索引是否匹配查询条件。 - 前端下载失败:检查URL有效性、网络状态与重试机制。 章节来源 - [server/src/middleware/errorHandler.ts:1-67](file://server/src/middleware/errorHandler.ts#L1-L67) - [server/src/services/logger.service.ts:1-114](file://server/src/services/logger.service.ts#L1-L114) ## 结论 通过统一的编码规范、清晰的分层架构与完善的日志/错误处理体系,本项目能够在复杂业务场景下保持高可维护性与高可靠性。建议在后续迭代中持续完善代码审查与自动化质量门禁,保障交付质量。 ## 附录 ### 代码格式化与类型检查 - TypeScript编译配置: - 后端:NodeNext模块解析、ES2022目标、严格模式关闭以便过渡期兼容。 - 前端:继承官方tsconfig、启用sourceMap、配置路径别名@/*。 - 类型检查脚本: - 前端提供type-check脚本用于编译期类型校验。 章节来源 - [server/tsconfig.json:1-24](file://server/tsconfig.json#L1-L24) - [my-uniapp-vue3/tsconfig.json:1-14](file://my-uniapp-vue3/tsconfig.json#L1-L14) - [my-uniapp-vue3/package.json:37-37](file://my-uniapp-vue3/package.json#L37-L37) ### Git提交信息规范(建议) - 类型前缀:feat、fix、docs、style、refactor、perf、test、build、ci、chore、revert - 提交格式:type(scope): subject - 示例:feat(tts): 添加音色预览接口 ### 代码审查检查清单(建议) - 代码风格:命名一致、缩进统一、注释清晰、无魔法数字 - 安全性:输入校验、权限控制、敏感信息脱敏 - 可靠性:错误处理、边界条件、幂等性、降级策略 - 性能:索引使用、查询优化、缓存策略、队列异步化 - 可测试性:可注入依赖、单元测试覆盖关键分支 - 文档:接口文档、变更说明、部署与回滚预案