七、AI工程化与前端工具链（18题）

用户9618

4月8日修改

1.
如何设计一个AI前端项目的标准化目录结构 ​

核心设计原则：模块化、关注点分离、可扩展性、易于维护。按功能领域组织代码，而非按技术类型。​

目录结构设计：

代码块

ai-frontend/​
├── src/​
│   ├── app/                    # 应用级配置​
│   │   ├── layout/            # 布局组件​
│   │   ├── providers/         # 上下文提供者​
│   │   ├── routes/            # 路由配置​
│   │   └── store/             # 全局状态​
│   ├── features/              # 功能模块（按业务领域划分）​
│   │   ├── chat/              # 聊天功能​
│   │   │   ├── api/          # API接口​
│   │   │   ├── components/   # 组件​
│   │   │   ├── hooks/        # 自定义Hook​
│   │   │   ├── store/        # 模块状态​
│   │   │   └── types/        # 类型定义​
│   │   ├── code-generation/   # 代码生成​
│   │   └── image-generation/  # 图像生成​
│   ├── shared/                # 共享资源​
│   │   ├── components/        # 通用UI组件​
│   │   ├── hooks/             # 通用Hook​
│   │   ├── utils/             # 工具函数​
│   │   ├── constants/         # 常量定义​
│   │   └── configs/           # 配置​
│   ├── ai/                    # AI核心模块​
│   │   ├── models/            # 模型接口​
│   │   ├── prompts/           # 提示词模板​
│   │   ├── tools/             # AI工具函数​
│   │   └── evaluators/        # 评估器​
│   ├── types/                 # 全局类型定义​
│   └── styles/                # 全局样式​
├── tests/                     # 测试文件​
├── public/                    # 静态资源​
└── docs/                      # 项目文档​

关键设计决策：

1.
按功能模块组织而非技术类型，便于功能扩展​

2.
AI相关代码集中管理，便于模型切换和更新​

3.
严格区分业务逻辑和通用逻辑​

4.
测试文件靠近被测试代码，便于维护​

2.
请设计一套AI前端代码规范 ​

代码规范体系：建立编码规范、提交规范、命名规范三位一体的规范体系。​

ESLint配置策略：

1.
基础规则：基于eslint:recommended​

2.
TypeScript集成：@typescript-eslint​

3.
React规范：eslint-plugin-react和eslint-plugin-react-hooks​

4.
导入排序：eslint-plugin-import管理导入顺序​

5.
AI特定规则：自定义规则如禁止直接暴露API密钥​

Prettier配置：

七、AI工程化与前端工具链（18题） ​

七、AI工程化与前端工具链（18题）