# 前端组件开发规范

FastGPT 使用 React + TypeScript + Chakra UI。

## 3.1 组件结构

**审查要点**:
- ✅ 使用函数式组件和 Hooks
- ✅ 对有实际重复渲染成本的组件按需使用 `React.memo`，不要求所有组件一律 memo
- ✅ Props 有明确的类型定义
- ✅ 使用 TypeScript type 而不是 interface (项目约定)

**示例**:
```typescript
import React from 'react';
import { Box, Button } from '@chakra-ui/react';

type YourComponentProps = {
  title: string;
  onClick: () => void;
  disabled?: boolean;
};

export const YourComponent = React.memo(function YourComponent({
  title,
  onClick,
  disabled = false
}: YourComponentProps) {
  return (
    <Box>
      <Button onClick={onClick} isDisabled={disabled}>
        {title}
      </Button>
    </Box>
  );
});
```

## 3.2 状态管理

**审查要点**:
- ✅ 本地状态使用 `useState`
- ✅ 全局状态使用 Zustand store
- ✅ 表单状态使用 `useForm` (react-hook-form)
- ✅ 复杂状态逻辑使用 `useReducer`

## 3.3 样式规范

**审查要点**:
- ✅ 优先使用 Chakra UI props
- ✅ 响应式设计使用 Chakra UI 的断点系统
- ✅ 自定义样式放在 `styles/theme.ts`
- ✅ 避免内联样式

**示例**:
```typescript
// ❌ 不好的实践
<Box style={{ backgroundColor: 'blue', padding: '16px' }}>

// ✅ 好的实践
<Box bg="blue.500" p={4}>
```

## 3.4 国际化

**审查要点**:
- ✅ 所有用户可见文本使用 `t`, 服务端使用`i18nT`
- ✅ 翻译 key 使用命名空间
- ✅ 动态文本使用插值

**示例**:
```typescript
import { i18nT } from '@fastgpt/web/i18n/utils';
const message = i18nT('user:welcome', { name: userName });
```

```typescript
import { useTranslation } from 'next-i18next';
const { t } = useTranslation();
const message = t('user:welcome', { name: userName });
```
## 3.5 性能优化

**审查要点**:
- ✅ 列表渲染使用 key
- ✅ 大列表使用虚拟化
- ✅ 当对象/函数引用确实影响 memo 子组件或 effect 依赖时，检查是否需要稳定引用
- ✅ 按实际计算成本决定是否使用 `useMemo` / `useCallback`，不把缺少缓存本身当作阻塞缺陷