File contents 1 --- 2 name: architecture 3 description: 系统架构设计规范 4 --- 5 # 系统架构设计规范 6 7 ## 1. 技能概述 8 9 本技能提供了家族树应用的系统架构设计规范,包括架构风格选择、技术栈选型、模块划分、数据流设计等。通过本规范,开发者可以构建一个可扩展、可维护、高性能的系统架构。 10 11 ## 2. 架构设计原则 12 13 ### 2.1 核心原则 14 - **高内聚,低耦合**:模块内部高度内聚,模块之间低耦合 15 - **可扩展性**:系统能够方便地添加新功能和模块 16 - **可维护性**:代码结构清晰,易于理解和修改 17 - **性能优化**:系统响应速度快,资源利用率高 18 - **可靠性**:系统稳定运行,容错能力强 19 - **安全性**:系统安全可靠,保护用户数据 20 21 ### 2.2 设计模式 22 - **分层架构**:表现层、业务逻辑层、数据访问层 23 - **依赖注入**:使用Spring的依赖注入管理组件 24 - **工厂模式**:创建对象的最佳实践 25 - **单例模式**:管理全局资源 26 - **策略模式**:灵活切换算法或行为 27 - **观察者模式**:事件处理和消息传递 28 29 ## 3. 技术栈选型 30 31 ### 3.1 后端技术 32 - **框架**:Spring Boot 3.1.10+ 33 - **JDK**:21+ 34 - **数据库**:PostgreSQL 15+(生产环境)/ H2(开发环境) 35 - **缓存**:Redis(可选) 36 - **消息队列**:RabbitMQ(可选) 37 - **搜索**:Elasticsearch(可选) 38 39 ### 3.2 前端技术 40 - **框架**:Vue 3.5.30+ 41 - **构建工具**:Vite 8.0.1+ 42 - **状态管理**:Pinia 3.0.4+ 43 - **路由**:Vue Router 4.6.4+ 44 - **HTTP客户端**:Axios 1.14.0+ 45 - **CSS框架**:Tailwind CSS 4.2.2+ 46 47 ### 3.3 基础设施 48 - **容器化**:Docker 49 - **编排**:Docker Compose 50 - **CI/CD**:GitHub Actions / GitLab CI 51 - **监控**:Prometheus + Grafana 52 - **日志**:ELK Stack 53 54 ## 4. 系统架构图 55 56 ```mermaid 57 flowchart TD 58 subgraph Client 59 Browser[浏览器] 60 Mobile[移动应用] 61 end 62 63 subgraph Frontend 64 Web[Vue前端] 65 MobileApp[Flutter移动端] 66 end 67 68 subgraph Backend 69 API[API Gateway] 70 Auth[认证服务] 71 Family[家族管理服务] 72 Member[成员管理服务] 73 Relationship[关系管理服务] 74 Event[事件管理服务] 75 Media[媒体管理服务] 76 Permission[权限管理服务] 77 AI[AI服务] 78 end 79 80 subgraph Data 81 DB[PostgreSQL] 82 Cache[Redis] 83 Storage[对象存储] 84 end 85 86 subgraph DevOps 87 CI[CI/CD] 88 Monitor[监控系统] 89 Log[日志系统] 90 end 91 92 Browser -->|HTTP| Web 93 Mobile -->|HTTP| MobileApp 94 Web -->|API请求| API 95 MobileApp -->|API请求| API 96 97 API -->|认证| Auth 98 API -->|家族管理| Family 99 API -->|成员管理| Member 100 API -->|关系管理| Relationship 101 API -->|事件管理| Event 102 API -->|媒体管理| Media 103 API -->|权限管理| Permission 104 API -->|AI功能| AI 105 106 Auth -->|存储| DB 107 Family -->|存储| DB 108 Member -->|存储| DB 109 Relationship -->|存储| DB 110 Event -->|存储| DB 111 Media -->|存储| Storage 112 Media -->|存储元数据| DB 113 Permission -->|存储| DB 114 AI -->|存储| DB 115 AI -->|缓存| Cache 116 117 CI -->|部署| Backend 118 CI -->|部署| Frontend 119 Monitor -->|监控| Backend 120 Log -->|收集日志| Backend 121 ``` 122 123 ## 5. 模块划分 124 125 ### 5.1 后端模块 126 127 | 模块 | 职责 | 主要功能 | 128 |------|------|----------| 129 | **认证模块** | 用户认证和授权 | 登录、注册、JWT管理 | 130 | **家族管理模块** | 家族信息管理 | 创建、编辑、删除家族 | 131 | **成员管理模块** | 家族成员管理 | 添加、编辑、删除成员 | 132 | **关系管理模块** | 成员关系管理 | 建立、修改、删除关系 | 133 | **事件管理模块** | 家族事件管理 | 创建、编辑、删除事件 | 134 | **媒体管理模块** | 多媒体文件管理 | 上传、管理照片和文档 | 135 | **权限管理模块** | 权限控制 | 角色分配、权限验证 | 136 | **AI模块** | 智能功能 | 人脸识别、关系预测、故事生成 | 137 138 ### 5.2 前端模块 139 140 | 模块 | 职责 | 主要功能 | 141 |------|------|----------| 142 | **认证模块** | 用户登录注册 | 登录、注册、忘记密码 | 143 | **家族模块** | 家族管理界面 | 家族列表、家族详情、家族创建 | 144 | **成员模块** | 成员管理界面 | 成员列表、成员详情、成员编辑 | 145 | **关系模块** | 关系管理界面 | 关系绑定、关系可视化 | 146 | **事件模块** | 事件管理界面 | 事件列表、事件详情、事件创建 | 147 | **媒体模块** | 媒体管理界面 | 照片上传、相册管理、文档管理 | 148 | **设置模块** | 系统设置 | 个人设置、隐私设置、数据备份 | 149 | **AI模块** | AI功能界面 | 人脸识别、关系预测、故事生成 | 150 151 ## 6. 数据流设计 152 153 ### 6.1 数据模型 154 155 #### 6.1.1 用户表 (users) 156 - id: 主键 157 - email: 邮箱(唯一) 158 - password: 密码(加密) 159 - nickname: 昵称 160 - avatar: 头像 161 - phone: 电话 162 - created_at: 创建时间 163 - updated_at: 更新时间 164 165 #### 6.1.2 家族表 (families) 166 - id: 主键 167 - name: 家族名称 168 - description: 家族描述 169 - avatar: 家族头像 170 - creator_id: 创建者ID 171 - created_at: 创建时间 172 - updated_at: 更新时间 173 174 #### 6.1.3 成员表 (members) 175 - id: 主键 176 - family_id: 家族ID 177 - name: 成员姓名 178 - gender: 性别 179 - birth_date: 出生日期 180 - death_date: 死亡日期 181 - photo: 照片 182 - details: 详细信息 183 - created_at: 创建时间 184 - updated_at: 更新时间 185 186 #### 6.1.4 关系表 (relationships) 187 - id: 主键 188 - member_id1: 成员1 ID 189 - member_id2: 成员2 ID 190 - relationship_type: 关系类型 191 - created_at: 创建时间 192 - updated_at: 更新时间 193 194 #### 6.1.5 事件表 (events) 195 - id: 主键 196 - family_id: 家族ID 197 - title: 事件标题 198 - description: 事件描述 199 - date: 事件日期 200 - location: 事件地点 201 - created_at: 创建时间 202 - updated_at: 更新时间 203 204 #### 6.1.6 媒体表 (media) 205 - id: 主键 206 - family_id: 家族ID 207 - file_name: 文件名 208 - file_path: 文件路径 209 - description: 描述 210 - created_at: 创建时间 211 - updated_at: 更新时间 212 213 #### 6.1.7 权限表 (permissions) 214 - id: 主键 215 - user_id: 用户ID 216 - family_id: 家族ID 217 - role: 角色 218 - created_at: 创建时间 219 - updated_at: 更新时间 220 221 ### 6.2 数据流向 222 223 1. **用户操作** → 前端界面 → API请求 → 后端服务 → 数据库 224 2. **数据变更** → 数据库 → 后端服务 → API响应 → 前端界面 225 3. **媒体上传** → 前端界面 → API请求 → 后端服务 → 对象存储 → 数据库 226 4. **AI处理** → 前端界面 → API请求 → 后端服务 → AI服务 → 数据库 → 前端界面 227 228 ## 7. 性能优化策略 229 230 ### 7.1 后端优化 231 - **数据库优化**:索引设计、查询优化、连接池配置 232 - **缓存策略**:Redis缓存热点数据,减少数据库访问 233 - **异步处理**:使用消息队列处理耗时操作 234 - **负载均衡**:多实例部署,负载均衡 235 - **代码优化**:减少循环嵌套,优化算法 236 237 ### 7.2 前端优化 238 - **组件懒加载**:按需加载组件,减少初始加载时间 239 - **资源优化**:图片压缩,代码分割,CDN加速 240 - **缓存策略**:合理使用浏览器缓存 241 - **状态管理**:优化Pinia状态,避免不必要的重渲染 242 - **API调用优化**:合并请求,避免重复请求 243 244 ### 7.3 基础设施优化 245 - **容器化**:使用Docker容器化部署,提高部署效率 246 - **自动扩缩容**:根据负载自动调整实例数量 247 - **CDN加速**:使用CDN加速静态资源 248 - **数据库读写分离**:提高数据库性能 249 250 ## 8. 安全设计 251 252 ### 8.1 认证与授权 253 - **JWT认证**:无状态认证,便于水平扩展 254 - **密码加密**:使用BCrypt加密存储密码 255 - **权限控制**:基于角色的访问控制(RBAC) 256 - **API保护**:所有API端点都需要认证 257 258 ### 8.2 数据安全 259 - **数据加密**:敏感数据加密存储 260 - **HTTPS传输**:所有通信使用HTTPS 261 - **SQL注入防护**:使用参数化查询 262 - **XSS防护**:前端输入验证,后端输出编码 263 - **CSRF防护**:使用CSRF令牌 264 265 ### 8.3 安全监控 266 - **日志监控**:记录所有安全相关事件 267 - **异常检测**:检测异常登录和访问行为 268 - **漏洞扫描**:定期进行安全漏洞扫描 269 - **安全审计**:定期进行安全审计 270 271 ## 9. 部署架构 272 273 ### 9.1 开发环境 274 - **本地开发**:Docker Compose启动完整环境 275 - **数据库**:H2内存数据库 276 - **服务**:本地启动所有服务 277 278 ### 9.2 测试环境 279 - **环境**:独立的测试服务器 280 - **数据库**:PostgreSQL 281 - **服务**:完整部署所有服务 282 - **CI/CD**:自动部署测试分支 283 284 ### 9.3 生产环境 285 - **环境**:云服务器或容器平台 286 - **数据库**:PostgreSQL(主从复制) 287 - **服务**:容器化部署,负载均衡 288 - **监控**:Prometheus + Grafana 289 - **日志**:ELK Stack 290 - **CI/CD**:自动部署master分支 291 292 ## 10. 扩展性设计 293 294 ### 10.1 水平扩展 295 - **无状态设计**:服务设计为无状态,便于水平扩展 296 - **负载均衡**:使用负载均衡器分发请求 297 - **数据库分片**:数据量大时进行数据库分片 298 299 ### 10.2 垂直扩展 300 - **模块化设计**:服务模块化,便于独立扩展 301 - **微服务架构**:将大型服务拆分为微服务 302 - **API网关**:统一管理API,支持服务发现 303 304 ### 10.3 功能扩展 305 - **插件架构**:支持插件扩展功能 306 - **钩子系统**:提供钩子点,便于功能扩展 307 - **配置管理**:集中化配置管理,支持动态配置 308 309 ## 11. 监控与维护 310 311 ### 11.1 监控指标 312 - **服务指标**:响应时间、错误率、QPS 313 - **系统指标**:CPU、内存、磁盘、网络 314 - **数据库指标**:查询性能、连接数、缓存命中率 315 - **业务指标**:用户活跃度、功能使用频率 316 317 ### 11.2 告警机制 318 - **阈值告警**:设置合理的阈值,超过阈值触发告警 319 - **异常告警**:检测到异常行为触发告警 320 - **可用性告警**:服务不可用触发告警 321 322 ### 11.3 维护策略 323 - **定期备份**:定期备份数据库和配置 324 - **版本管理**:代码和配置的版本管理 325 - **变更管理**:变更前评估,变更后验证 326 - **灾备方案**:制定灾难恢复方案 327 328 ## 12. 最佳实践 329 330 1. **架构设计先行**:在编码前进行充分的架构设计 331 2. **模块化开发**:按功能模块进行开发,提高代码复用率 332 3. **测试驱动开发**:编写测试用例,确保代码质量 333 4. **持续集成**:使用CI/CD工具,自动化构建和部署 334 5. **监控先行**:在开发阶段就加入监控 335 6. **安全第一**:在设计阶段就考虑安全因素 336 7. **性能优化**:定期进行性能分析和优化 337 8. **文档完备**:保持架构文档的更新 338 339 ## 13. 常见架构问题及解决方案 340 341 | 问题 | 原因 | 解决方案 | 342 |------|------|----------| 343 | 服务响应慢 | 数据库查询效率低 | 优化查询,添加索引,使用缓存 | 344 | 系统可用性低 | 单点故障 | 多实例部署,负载均衡,故障转移 | 345 | 数据一致性问题 | 分布式事务 | 使用分布式事务或最终一致性 | 346 | 系统扩展性差 | 紧耦合设计 | 模块化设计,微服务架构 | 347 | 安全漏洞 | 安全意识不足 | 定期安全审计,使用安全框架 | 348 349 ## 14. 总结 350 351 本架构设计规范提供了全面的系统架构设计指南,包括架构原则、技术栈选型、模块划分、数据流设计、性能优化、安全设计、部署架构、扩展性设计和监控维护等方面。通过遵循本规范,开发者可以构建一个高性能、可扩展、安全可靠的家族树应用系统。
bage2014/study/tree/main/study-ai-myapp-fimaly/.trae/skills/architecture commit c672b260bf
Frequently asked questions How do I install the Architecture skill? Run npx skillmds@latest add bage2014/architecture in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
What does the Architecture skill do? 系统架构设计规范 It is listed under Coding & Dev Tools on SkillMD.
Is Architecture safe to use? This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
Which AI agents work with Architecture? This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Is Architecture free to use? Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Who published Architecture? bage2014 (@bage2014) published this skill. Their other Agent Skills are listed on their SkillMD profile.