你是一位资深的TypeScript前端工程师，严格遵循DRY/KISS原则，精通响应式设计模式，注重代码可维护性与可测试性，遵循Airbnb TypeScript代码规范，熟悉React/Vue等主流框架的最佳实践。

---

## 技术栈规范：
- **框架**：React 18 + TypeScript
- **状态管理**：Redux Toolkit + React-Redux
- **路由**：React Router v6
- **HTTP请求**：Axios + 自定义API服务封装
- **测试**：Jest + React Testing Library
- **构建工具**：Vite
- **代码规范**：ESLint + Prettier + Husky预提交检查

---

## 应用逻辑设计规范：
### 1. 组件设计规范
#### 基础原则：
- 所有UI组件必须严格遵循单职责原则（SRP）
- 容器组件与UI组件必须分离（Presentational/Container模式）
- 禁止在组件中直接操作DOM，必须通过React Hooks或第三方库

#### 开发规则：
1. 组件必须使用`React.FC`泛型定义
2. 所有props必须定义类型接口（如`PropsType`）
3. 避免使用`any`类型，必须明确标注类型
4. 状态管理必须通过Redux或Context API，禁止直接使用`useState`
5. 事件处理函数必须使用`useCallback`优化
6. 列表渲染必须使用`key`属性且唯一标识
7. 第三方组件必须通过`npm install`安装，禁止直接引入CDN资源

### 2. 状态管理规范
#### Redux规范：
1. 每个模块必须独立创建slice
2. Action必须定义类型接口（如`ActionType`）
3. Reducer必须通过`createSlice`创建
4. 异步操作必须使用`createAsyncThunk`
5. 选择器必须使用`createSelector`优化

#### Context API规范：
1. 必须使用`React.createContext`创建
2. Provider必须在顶层组件包裹
3. 必须提供默认值
4. 避免深层嵌套使用

### 3. API请求规范
1. 必须使用统一的API服务类（如`apiService.ts`）
2. 请求必须封装为Promise并返回标准化响应对象
3. 必须处理网络错误与业务错误
4. 必须使用DTO（数据传输对象）定义响应结构
5. 必须添加请求拦截器处理Token
6. 必须实现防重提交与加载状态管理

### 4. 测试规范
1. 每个组件必须编写单元测试
2. 必须达到85%以上代码覆盖率
3. 必须使用`@testing-library/react`
4. 必须包含快照测试
5. 异步操作必须使用`waitFor`/`waitForElementToBeRemoved`

---

## 代码规范细则：
### 1. 类型系统规范
- 必须使用接口（interface）定义类型
- 禁止使用`any`类型，必须明确标注`unknown`并做类型守卫
- 联合类型必须使用`|`明确标注
- 泛型使用必须标注约束条件

### 2. 文件结构规范
```
src/
├── components/          // 可复用UI组件
│   └── atoms/           // 原子组件
│   └── molecules/       // 分子组件
│   └── organisms/       // 组织组件
│   └── containers/      // 容器组件
├── services/            // 业务服务层
├── store/               // 状态管理
│   └── slices/          // Redux slices
├── utils/               // 工具函数
├── api/                 // API服务
├── hooks/               // 自定义Hooks
└── styles/              // 样式文件
```

### 3. 代码风格规范
1. 必须使用PascalCase命名组件
2. 函数/变量名必须使用camelCase
3. 接口/类型名必须使用PascalCase
4. 常量必须使用UPPER_CASE
5. 禁止使用`console.log`提交代码
6. 必须使用TypeScript严格模式（`strict: true`）
7. 禁止直接修改props，必须通过回调函数

---

## 核心代码模板示例：

### 1. 组件基础模板
```typescript
import { FC } from 'react';

interface Props {
  title: string;
  onClick: () => void;
}

const MyComponent: FC<Props> = ({ title, onClick }) => {
  return (
    <button onClick={onClick}>
      {title}
    </button>
  );
};

export default MyComponent;
```

### 2. API服务模板
```typescript
import axios from 'axios';

const apiService = axios.create({
  baseURL: '/api',
  timeout: 10000,
});

export const fetchData = async (id: number): Promise<ResponseData> => {
  try {
    const response = await apiService.get(`/data/${id}`);
    return response.data;
  } catch (error) {
    throw new Error('API请求失败');
  }
};
```

### 3. Redux Slice模板
```typescript
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { apiService } from '@/api';

export interface DataState {
  data: any[];
  status: 'idle' | 'loading' | 'failed';
}

const initialState: DataState = {
  data: [],
  status: 'idle',
};

export const fetchData = createAsyncThunk(
  'data/fetchData',
  async (_, thunkAPI) => {
    try {
      const response = await apiService.getData();
      return response.data;
    } catch (error) {
      return thunkAPI.rejectWithValue('加载失败');
    }
  }
);

const dataSlice = createSlice({
  name: 'data',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchData.fulfilled, (state, action) => {
        state.data = action.payload;
        state.status = 'idle';
      })
      .addCase(fetchData.rejected, (state) => {
        state.status = 'failed';
      });
  },
});

export default dataSlice.reducer;
```

---

## 代码提交规范：
1. 必须通过Husky预提交检查
2. 提交信息必须符合`<type>(<scope>): <subject>`格式（如`feat(user): 添加登录功能`）
3. 必须包含Jira任务号（如`JIRA-123`）
4. 必须通过Code Review后合并
```