深入探索AngularJS项目目录的最佳组织方式与结构设计提升开发效率与代码可维护性及团队协作能力

AngularJS作为一款强大的前端JavaScript框架，为开发者提供了构建动态Web应用的完整解决方案。然而，随着项目规模的扩大和团队成员的增加，一个混乱的目录结构会迅速成为开发效率的绊脚石。本文将深入探讨AngularJS项目目录的最佳组织方式，分析不同结构设计的优缺点，并提供实用的建议，帮助开发团队提升代码可维护性、开发效率和协作能力。

项目目录结构的重要性

在AngularJS项目中，目录结构不仅仅是一个文件组织系统，它是整个应用的骨架。一个精心设计的目录结构能够：

提高代码可读性和可维护性
减少开发人员之间的冲突
简化新团队成员的上手过程
优化构建和部署流程
促进代码重用和模块化设计

相反，一个糟糕的目录结构会导致代码难以定位、功能耦合严重、测试困难以及团队协作效率低下。因此，在项目初期就建立合理的目录结构，对于项目的长期成功至关重要。

AngularJS项目目录结构的基本原则

在深入探讨具体的目录组织方式之前，我们首先需要了解一些基本原则，这些原则将指导我们做出合理的结构设计决策：

1. 关注点分离（Separation of Concerns）

AngularJS本身遵循MVC（Model-View-Controller）架构模式，我们的目录结构应当反映这一点。将模型、视图和控制器相关的代码分别组织，使每个部分都有明确的职责。

2. 模块化（Modularity）

将应用拆分为多个功能模块，每个模块负责特定的业务功能。这不仅有助于代码组织，还能提高代码的可重用性和可测试性。

3. 一致性（Consistency）

在整个项目中保持一致的组织方式，使开发人员能够快速定位所需文件，减少认知负担。

4. 可扩展性（Scalability）

设计一种能够随项目增长而轻松扩展的结构，避免在项目后期进行大规模重构。

5. 直观性（Intuitiveness）

目录结构应当直观明了，使新团队成员能够快速理解项目组织方式。

常见的目录组织方式

在AngularJS项目中，主要有三种常见的目录组织方式：按功能/模块组织、按层/类型组织和混合结构。让我们详细分析每种方式的优缺点。

1. 按功能/模块组织（Feature-based/Module-based）

这种方式将相关功能的代码组织在同一目录下，每个目录代表一个功能模块。

/app /core /auth auth.service.js auth.controller.js auth.module.js /layout header.directive.js sidebar.directive.js layout.module.js core.module.js /dashboard dashboard.controller.js dashboard.service.js dashboard.html dashboard.module.js /users user-list.controller.js user-detail.controller.js user.service.js user-list.html user-detail.html users.module.js app.js index.html

优点：

高内聚性：相关功能的代码集中在一起，便于理解和维护。
团队协作友好：不同团队成员可以负责不同功能模块，减少冲突。
易于扩展：添加新功能只需创建新目录，不会影响现有结构。
模块边界清晰：便于实现懒加载，提高应用性能。

缺点：

代码重复：通用组件可能需要在多个模块中重复定义。
学习曲线：对于习惯按类型组织的开发者可能需要适应。
跨模块依赖管理：需要谨慎处理模块间的依赖关系。

2. 按层/类型组织（Layer-based/Type-based）

这种方式按照代码类型（控制器、服务、指令等）组织目录。

/app /controllers dashboard.controller.js user-list.controller.js user-detail.controller.js /services auth.service.js user.service.js /directives header.directive.js sidebar.directive.js /filters date.filter.js status.filter.js /views dashboard.html user-list.html user-detail.html app.js index.html

优点：

简单直观：结构简单，易于理解和实现。
便于查找：需要特定类型的文件时，只需查看相应目录。
适合小型项目：对于功能较少的项目，这种方式足够高效。

缺点：

功能分散：相关功能的代码分散在不同目录，不利于维护。
扩展性差：随着项目增长，目录会变得庞大，难以管理。
团队协作困难：多人同时修改同一类型文件时容易产生冲突。

3. 混合结构（Hybrid Structure）

混合结构结合了按功能和按类型的组织方式，通常将共享组件按类型组织，而将特定功能按模块组织。

/app /common /services api.service.js auth.service.js /directives header.directive.js sidebar.directive.js /filters date.filter.js status.filter.js common.module.js /features /dashboard dashboard.controller.js dashboard.service.js dashboard.html dashboard.module.js /users user-list.controller.js user-detail.controller.js user.service.js user-list.html user-detail.html users.module.js app.js index.html

优点：

灵活性高：可以根据项目需求调整组织方式。
平衡了共享和特定功能：共享组件和特定功能模块分离良好。
适合中大型项目：能够很好地适应项目规模的增长。

缺点：

结构复杂：需要明确的规范来避免混乱。
边界模糊：有时难以决定某个组件应该放在common还是features中。

命名约定

一致的命名约定对于项目维护至关重要。以下是一些推荐的命名约定：

文件命名

使用小写字母和连字符（kebab-case）：user-list.controller.js
描述性名称：user-authentication.service.js 而不是 user-auth.service.js
类型后缀：
- 控制器：.controller.js
- 服务：.service.js
- 指令：.directive.js
- 过滤器：.filter.js
- 模块：.module.js
- 配置：.config.js
- 测试：.spec.js

模块命名

使用点号分隔的命名空间：app.users
主应用模块：app
核心模块：app.core
功能模块：app.users、app.products
共享模块：app.shared

控制器命名

使用大写驼峰式（PascalCase）：UserListController
以功能名称开头，后跟”Controller”：DashboardController

服务和工厂命名

使用大写驼峰式（PascalCase）：UserService
以功能名称开头，后跟”Service”：AuthenticationService

指令命名

在HTML中使用小写字母和连字符：user-card
在JavaScript中使用大写驼峰式：userCard

模块化策略

有效的模块化策略是AngularJS项目成功的关键。以下是一些推荐的模块化实践：

1. 模块划分原则

按功能划分：每个功能模块对应一个业务功能，如用户管理、产品管理等。
按层次划分：核心模块、共享模块和功能模块。
按复用性划分：通用功能放在共享模块，特定功能放在对应的功能模块。

2. 模块依赖关系

保持单向依赖：功能模块可以依赖核心模块和共享模块，但核心模块不应依赖功能模块。
避免循环依赖：这会导致应用无法启动。
明确定义模块接口：每个模块应明确定义其提供的服务和组件。

3. 懒加载策略

对于大型应用，实现模块的懒加载可以显著提高初始加载速度：

// 在路由配置中实现懒加载 $routeProvider .when('/users', { template: '<div ng-include="'/src/app/features/users/views/user-list.html'"></div>', resolve: { loadModule: ['$q', '$rootScope', function($q, $rootScope) { var deferred = $q.defer(); require(['./src/app/features/users/users.module'], function() { $rootScope.$apply(function() { deferred.resolve(); }); }); return deferred.promise; }] } });

代码组织最佳实践

1. 控制器组织

保持控制器精简：控制器主要负责连接视图和模型，不应包含业务逻辑。
使用”控制器为”语法：angular.module('app').controller('UserController', function() { ... });
避免在控制器中操作DOM：这应该通过指令完成。

示例：

// user-list.controller.js (function() { 'use strict'; angular .module('app.users') .controller('UserListController', UserListController); UserListController.$inject = ['userService', 'logger']; function UserListController(userService, logger) { var vm = this; vm.users = []; vm.title = 'Users'; vm.deleteUser = deleteUser; activate(); function activate() { return getUsers().then(function() { logger.info('Activated Users View'); }); } function getUsers() { return userService.getUsers() .then(function(data) { vm.users = data; return vm.users; }); } function deleteUser(id) { return userService.deleteUser(id) .then(function() { return getUsers(); }); } } })();

2. 服务和工厂组织

单一职责原则：每个服务只负责一个特定功能。
使用工厂模式创建服务：这提供了更多的灵活性。
在服务中处理业务逻辑和数据操作。

示例：

// user.service.js (function() { 'use strict'; angular .module('app.users') .factory('userService', userService); userService.$inject = ['$http', 'apiUrl', 'logger']; function userService($http, apiUrl, logger) { var service = { getUsers: getUsers, getUserById: getUserById, createUser: createUser, updateUser: updateUser, deleteUser: deleteUser }; return service; function getUsers() { return $http.get(apiUrl + '/users') .then(getUsersComplete) .catch(getUsersFailed); function getUsersComplete(response) { return response.data; } function getUsersFailed(error) { logger.error('Failed to get users: ' + error.data); throw error; } } function getUserById(id) { return $http.get(apiUrl + '/users/' + id) .then(getUserByIdComplete) .catch(getUserByIdFailed); function getUserByIdComplete(response) { return response.data; } function getUserByIdFailed(error) { logger.error('Failed to get user: ' + error.data); throw error; } } function createUser(user) { return $http.post(apiUrl + '/users', user) .then(createUserComplete) .catch(createUserFailed); function createUserComplete(response) { return response.data; } function createUserFailed(error) { logger.error('Failed to create user: ' + error.data); throw error; } } function updateUser(user) { return $http.put(apiUrl + '/users/' + user.id, user) .then(updateUserComplete) .catch(updateUserFailed); function updateUserComplete(response) { return response.data; } function updateUserFailed(error) { logger.error('Failed to update user: ' + error.data); throw error; } } function deleteUser(id) { return $http.delete(apiUrl + '/users/' + id) .then(deleteUserComplete) .catch(deleteUserFailed); function deleteUserComplete(response) { return response.data; } function deleteUserFailed(error) { logger.error('Failed to delete user: ' + error.data); throw error; } } } })();

3. 指令组织

使用指令创建可重用的组件。
遵循单一职责原则：每个指令只做一件事。
使用隔离作用域以提高指令的可重用性。

示例：

// user-card.directive.js (function() { 'use strict'; angular .module('app.users') .directive('userCard', userCard); userCard.$inject = []; function userCard() { var directive = { restrict: 'EA', templateUrl: '/src/app/features/users/components/user-card.html', scope: { user: '=', onDelete: '&' }, link: linkFunc, controller: UserCardController, controllerAs: 'vm', bindToController: true }; return directive; function linkFunc(scope, element, attrs) { // Link function logic } } UserCardController.$inject = ['logger']; function UserCardController(logger) { var vm = this; vm.deleteUser = deleteUser; function deleteUser() { vm.onDelete({ userId: vm.user.id }); } } })();

4. 过滤器组织

创建简单、纯函数的过滤器。
避免在过滤器中引入状态或副作用。

示例：

// date.filter.js (function() { 'use strict'; angular .module('app.shared') .filter('date', dateFilter); function dateFilter() { return dateFilter; function dateFilter(date, format) { if (!date) return ''; format = format || 'MM/dd/yyyy'; return moment(date).format(format); } } })();

工具和自动化支持

良好的目录结构需要适当的工具支持才能发挥最大效用。以下是一些推荐的工具和实践：

1. 构建工具

使用现代构建工具如Gulp、Webpack或Grunt来自动化以下任务：

文件合并和压缩
代码检查和格式化
自动化测试
部署流程

示例Gulp配置：

// gulpfile.js var gulp = require('gulp'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var jshint = require('gulp-jshint'); var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcemaps'); var ngAnnotate = require('gulp-ng-annotate'); var plumber = require('gulp-plumber'); var notify = require('gulp-notify'); // JavaScript任务 gulp.task('js', function() { return gulp.src(['src/app/**/*.module.js', 'src/app/**/*.js']) .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })) .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(sourcemaps.init()) .pipe(ngAnnotate()) .pipe(concat('app.js')) .pipe(uglify()) .pipe(sourcemaps.write()) .pipe(gulp.dest('dist/js')) .pipe(notify({ message: 'JavaScript task complete' })); }); // SCSS任务 gulp.task('sass', function() { return gulp.src('src/assets/scss/**/*.scss') .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })) .pipe(sourcemaps.init()) .pipe(sass({ outputStyle: 'compressed' })) .pipe(sourcemaps.write()) .pipe(gulp.dest('dist/css')) .pipe(notify({ message: 'SASS task complete' })); }); // 监视任务 gulp.task('watch', function() { gulp.watch('src/app/**/*.js', ['js']); gulp.watch('src/assets/scss/**/*.scss', ['sass']); }); // 默认任务 gulp.task('default', ['js', 'sass', 'watch']);

2. 代码生成器

使用Yeoman等代码生成工具快速创建符合项目结构的组件：

// generator-angular-fullstack中的用户模块生成器示例 'use strict'; var generator = require('yeoman-generator'); var chalk = require('chalk'); var yosay = require('yosay'); module.exports = generator.extend({ prompting: function () { var done = this.async(); this.log(yosay( 'Welcome to the ' + chalk.red('AngularJS Module') + ' generator!' )); var prompts = [{ type: 'input', name: 'name', message: 'What is the name of your module?', default: this.appname }]; this.prompt(prompts, function (props) { this.props = props; done(); }.bind(this)); }, writing: function () { var moduleName = this.props.name.toLowerCase(); var capitalizedName = this.props.name.charAt(0).toUpperCase() + this.props.name.slice(1); // 创建模块目录 this.mkdir('src/app/features/' + moduleName); this.mkdir('src/app/features/' + moduleName + '/controllers'); this.mkdir('src/app/features/' + moduleName + '/services'); this.mkdir('src/app/features/' + moduleName + '/views'); // 创建模块文件 this.template('src/app/features/_module/_module.module.js', 'src/app/features/' + moduleName + '/' + moduleName + '.module.js', { name: moduleName, capitalizedName: capitalizedName }); // 创建控制器文件 this.template('src/app/features/_module/controllers/_controller.controller.js', 'src/app/features/' + moduleName + '/controllers/' + moduleName + '.controller.js', { name: moduleName, capitalizedName: capitalizedName }); // 创建服务文件 this.template('src/app/features/_module/services/_service.service.js', 'src/app/features/' + moduleName + '/services/' + moduleName + '.service.js', { name: moduleName, capitalizedName: capitalizedName }); // 创建视图文件 this.template('src/app/features/_module/views/_view.html', 'src/app/features/' + moduleName + '/views/' + moduleName + '.html', { name: moduleName, capitalizedName: capitalizedName }); } });

3. 代码检查和质量控制

使用ESLint或JSHint进行代码检查，确保代码质量和一致性：

// .eslintrc.json { "extends": "angular", "env": { "browser": true, "node": true }, "rules": { "angular/controller-as": 2, "angular/controller-as-vm": 2, "angular/di": [2, "array"], "angular/di-unused": 2, "angular/no-services": 1, "angular/on-watch": 2, "angular/watchers-execution": 2 }, "globals": { "angular": true, "_": true, "$": true, "moment": true } }

团队协作考虑因素

良好的目录结构不仅影响代码质量，还直接影响团队协作效率。以下是一些团队协作的最佳实践：

1. 版本控制策略

Git工作流：采用功能分支工作流（Feature Branch Workflow）或GitFlow。
分支命名：使用一致的分支命名约定，如feature/user-management、bugfix/login-issue。
提交信息：使用清晰的提交信息格式，如feat: Add user management module或fix: Resolve login authentication issue。

2. 代码审查流程

拉取请求：所有代码更改都应通过拉取请求进行审查。
审查清单：创建代码审查清单，确保代码符合项目标准。
自动化检查：集成自动化代码检查工具，确保代码质量。

3. 文档和规范

README文档：维护详细的项目README文档，包括项目结构说明、设置步骤和开发指南。
代码风格指南：制定并遵循一致的代码风格指南。
API文档：使用工具如JSDoc自动生成API文档。

4. 持续集成和部署

自动化测试：设置自动化测试流程，包括单元测试和端到端测试。
构建自动化：设置自动化构建流程，确保每次提交都通过完整构建。
部署自动化：设置自动化部署流程，减少人为错误。

案例研究

为了更好地理解不同项目规模下的目录结构设计，让我们看三个案例研究。

案例研究1：小型项目

项目描述：一个简单的博客管理应用，包含文章管理、分类管理和用户管理功能。

目录结构：

/blog-app /src /app /auth auth.service.js auth.controller.js auth.module.js /posts post-list.controller.js post-detail.controller.js post.service.js post-list.html post-detail.html posts.module.js /categories category-list.controller.js category.service.js category-list.html categories.module.js /shared directives.js filters.js shared.module.js app.module.js app.routes.js /assets /css /images index.html /tests /unit auth.service.spec.js post.service.spec.js category.service.spec.js package.json gulpfile.js README.md

设计决策：

采用简化的按功能组织方式，每个主要功能一个模块。
共享指令和过滤器放在一个共享模块中。
测试结构简单，只包含必要的单元测试。
使用Gulp作为构建工具，自动化基本任务。

案例研究2：中型项目

项目描述：一个电子商务平台，包含产品管理、订单处理、用户管理、支付集成和库存管理功能。

目录结构：

/ecommerce-platform /src /app /core /auth auth.service.js auth.interceptor.js auth.module.js /config app.config.js routes.config.js /layout header.directive.js sidebar.directive.js footer.directive.js layout.module.js /services api.service.js data.service.js cache.service.js core.module.js /features /products /components product-card.directive.js product-filter.directive.js /controllers product-list.controller.js product-detail.controller.js /services product.service.js /views product-list.html product-detail.html products.module.js /orders /controllers order-list.controller.js order-detail.controller.js checkout.controller.js /services order.service.js payment.service.js /views order-list.html order-detail.html checkout.html orders.module.js /users /controllers user-list.controller.js user-profile.controller.js user-register.controller.js /services user.service.js /views user-list.html user-profile.html user-register.html users.module.js /inventory /controllers inventory-list.controller.js inventory-detail.controller.js /services inventory.service.js /views inventory-list.html inventory-detail.html inventory.module.js /shared /components modal.directive.js notification.directive.js loading.directive.js /directives file-upload.directive.js image-preview.directive.js /filters date.filter.js currency.filter.js truncate.filter.js /services validation.service.js notification.service.js shared.module.js app.module.js app.routes.js /assets /images /fonts /css /scss /tests /unit /core /auth auth.service.spec.js /services api.service.spec.js /features /products product.service.spec.js product-list.controller.spec.js /orders order.service.spec.js checkout.controller.spec.js /users user.service.spec.js user-profile.controller.spec.js /inventory inventory.service.spec.js /shared /services validation.service.spec.js /filters date.filter.spec.js /e2e /pages login.page.js product-list.page.js checkout.page.js /specs login.spec.js product-list.spec.js checkout.spec.js /docs /api /architecture /deployment index.html /tools /build /deploy /scripts .gitignore package.json bower.json gulpfile.js README.md

设计决策：

采用推荐的混合结构，核心功能、功能模块和共享组件分离。
每个功能模块内部进一步组织为组件、控制器、服务和视图。
完整的测试结构，包括单元测试和端到端测试。
详细的项目文档，包括API文档、架构文档和部署文档。
使用构建工具自动化开发流程。

案例研究3：大型企业级项目

项目描述：一个企业资源规划（ERP）系统，包含财务管理、人力资源管理、供应链管理、客户关系管理和项目管理等多个复杂模块。

目录结构：

/erp-system /src /app /core /auth /services auth.service.js session.service.js /interceptors auth.interceptor.js error.interceptor.js auth.module.js /config app.config.js routes.config.js constants.js /layout /directives header.directive.js sidebar.directive.js footer.directive.js breadcrumb.directive.js /services menu.service.js layout.service.js layout.module.js /services /api api.service.js request.service.js response.service.js /data data.service.js cache.service.js storage.service.js /utils date.service.js string.service.js validation.service.js core.module.js /modules /finance /accounting /components account-chart.directive.js transaction-list.directive.js /controllers dashboard.controller.js ledger.controller.js journal.controller.js /services account.service.js transaction.service.js report.service.js /views dashboard.html ledger.html journal.html accounting.module.js /payroll /components payslip.directive.js tax-calculator.directive.js /controllers payroll-list.controller.js payroll-detail.controller.js tax-setting.controller.js /services payroll.service.js tax.service.js /views payroll-list.html payroll-detail.html tax-setting.html payroll.module.js /budgeting /controllers budget-list.controller.js budget-detail.controller.js budget-allocation.controller.js /services budget.service.js allocation.service.js /views budget-list.html budget-detail.html budget-allocation.html budgeting.module.js finance.module.js /hr /employees /components employee-card.directive.js org-chart.directive.js /controllers employee-list.controller.js employee-detail.controller.js employee-onboarding.controller.js /services employee.service.js department.service.js onboarding.service.js /views employee-list.html employee-detail.html employee-onboarding.html employees.module.js /recruitment /controllers job-list.controller.js job-detail.controller.js application-list.controller.js interview.controller.js /services job.service.js application.service.js interview.service.js /views job-list.html job-detail.html application-list.html interview.html recruitment.module.js /performance /controllers review-list.controller.js review-detail.controller.js goal-setting.controller.js /services review.service.js goal.service.js /views review-list.html review-detail.html goal-setting.html performance.module.js hr.module.js /supply-chain /procurement /controllers purchase-order.controller.js vendor.controller.js receiving.controller.js /services purchase-order.service.js vendor.service.js receiving.service.js /views purchase-order.html vendor.html receiving.html procurement.module.js /inventory /controllers inventory-list.controller.js inventory-detail.controller.js stock-movement.controller.js /services inventory.service.js warehouse.service.js movement.service.js /views inventory-list.html inventory-detail.html stock-movement.html inventory.module.js /logistics /controllers shipping.controller.js tracking.controller.js fleet.controller.js /services shipping.service.js tracking.service.js fleet.service.js /views shipping.html tracking.html fleet.html logistics.module.js supply-chain.module.js /crm /customers /controllers customer-list.controller.js customer-detail.controller.js customer-segment.controller.js /services customer.service.js segment.service.js /views customer-list.html customer-detail.html customer-segment.html customers.module.js /sales /controllers opportunity.controller.js quote.controller.js contract.controller.js /services opportunity.service.js quote.service.js contract.service.js /views opportunity.html quote.html contract.html sales.module.js /support /controllers ticket-list.controller.js ticket-detail.controller.js knowledge-base.controller.js /services ticket.service.js knowledge.service.js /views ticket-list.html ticket-detail.html knowledge-base.html support.module.js crm.module.js /projects /planning /controllers project-list.controller.js project-detail.controller.js task-list.controller.js /services project.service.js task.service.js /views project-list.html project-detail.html task-list.html planning.module.js /execution /controllers time-tracking.controller.js resource-allocation.controller.js progress-tracking.controller.js /services time.service.js resource.service.js progress.service.js /views time-tracking.html resource-allocation.html progress-tracking.html execution.module.js /reporting /controllers project-report.controller.js resource-report.controller.js financial-report.controller.js /services report.service.js analytics.service.js /views project-report.html resource-report.html financial-report.html reporting.module.js projects.module.js /shared /components /ui modal.directive.js notification.directive.js loading.directive.js tooltip.directive.js date-picker.directive.js /data data-table.directive.js chart.directive.js filter-panel.directive.js /directives file-upload.directive.js image-preview.directive.js auto-complete.directive.js /filters date.filter.js currency.filter.js truncate.filter.js percentage.filter.js /services /validation form-validation.service.js business-rules.service.js /communication notification.service.js messaging.service.js /utility export.service.js import.service.js shared.module.js app.module.js app.routes.js /assets /images /fonts /css /scss /icons /tests /unit /core /auth auth.service.spec.js session.service.spec.js /services api.service.spec.js data.service.spec.js utils.service.spec.js /modules /finance /accounting account.service.spec.js transaction.service.spec.js dashboard.controller.spec.js /payroll payroll.service.spec.js tax.service.spec.js payroll-list.controller.spec.js /budgeting budget.service.spec.js allocation.service.spec.js budget-list.controller.spec.js /hr /employees employee.service.spec.js department.service.spec.js employee-list.controller.spec.js /recruitment job.service.spec.js application.service.spec.js job-list.controller.spec.js /performance review.service.spec.js goal.service.spec.js review-list.controller.spec.js /supply-chain /procurement purchase-order.service.spec.js vendor.service.spec.js purchase-order.controller.spec.js /inventory inventory.service.spec.js warehouse.service.spec.js inventory-list.controller.spec.js /logistics shipping.service.spec.js tracking.service.spec.js shipping.controller.spec.js /crm /customers customer.service.spec.js segment.service.spec.js customer-list.controller.spec.js /sales opportunity.service.spec.js quote.service.spec.js opportunity.controller.spec.js /support ticket.service.spec.js knowledge.service.spec.js ticket-list.controller.spec.js /projects /planning project.service.spec.js task.service.spec.js project-list.controller.spec.js /execution time.service.spec.js resource.service.spec.js time-tracking.controller.spec.js /reporting report.service.spec.js analytics.service.spec.js project-report.controller.spec.js /shared /components modal.directive.spec.js data-table.directive.spec.js /services validation.service.spec.js notification.service.spec.js export.service.spec.js /filters date.filter.spec.js currency.filter.spec.js /e2e /pages login.page.js dashboard.page.js finance/accounting.page.js hr/employees.page.js supply-chain/inventory.page.js crm/customers.page.js projects/planning.page.js /specs login.spec.js dashboard.spec.js finance/accounting.spec.js hr/employees.spec.js supply-chain/inventory.spec.js crm/customers.spec.js projects/planning.spec.js /integration /auth auth-flow.spec.js permissions.spec.js /modules finance-integration.spec.js hr-integration.spec.js supply-chain-integration.spec.js crm-integration.spec.js projects-integration.spec.js /docs /api /core auth.md services.md /modules finance.md hr.md supply-chain.md crm.md projects.md /shared components.md services.md /architecture overview.md module-structure.md data-flow.md security.md /deployment setup.md configuration.md monitoring.md /user-guides getting-started.md finance.md hr.md supply-chain.md crm.md projects.md index.html /tools /build webpack.config.js build.js /deploy deploy.js environments dev.js staging.js prod.js /scripts generate-module.js generate-component.js migrate.js .gitignore package.json bower.json webpack.config.js README.md CHANGELOG.md CONTRIBUTING.md

设计决策：