本资料是 RedisInsight UI 的 React/Redux 前端开发规范，用于统一组件编写、样式、状态管理与测试方式。
用途：指导开发者按项目约定编写前端代码，减少风格分歧。
主要能力与约定： 组件：使用函数组件与 hooks，不用类组件；优先命名导出；每个组件独立目录，包含 ComponentName.tsx、ComponentName.styles.ts、ComponentName.types.ts、ComponentName.spec.tsx、ComponentName.constants.ts、ComponentName.story.tsx，以及 hooks/、components/、utils/ 子目录。Props 接口命名为 ComponentNameProps，禁止使用 any。导入顺序为外部依赖、内部模块、本地导入、样式（样式最后）。barrel 文件（index.ts）仅在导出 3 个及以上条目时使用，且导出只出现在一个 barrel 文件中。 样式：正从 SCSS modules 迁移到 styled-components，样式集中在 .styles.ts，文件名用 PascalCase。使用命名空间导入 import * as S from './ComponentName.styles'，该写法仅限本地样式；引用外部组件样式需在本地样式文件中重新导出。优先使用 FlexGroup、Row、Col 等布局组件而非 div，布局属性作为组件 props 传入，间距用 gap，尺寸与颜色使用主题的 space 与 semantic color，避免魔法数字、CSS 变量和 !important；瞬态 props 用 $ 前缀。 状态管理：全局状态用 Redux，UI 状态用 useState，派生值用 selectors；使用 Redux Toolkit 的 createSlice、createAsyncThunk、PayloadAction，selectors 放在 selectors.ts，复杂计算用 reselect 的 createSelector。 React 实践：用 useCallback、useMemo、React.memo 优化性能，useEffect 中清理订阅与定时器，列表 key 用稳定唯一 ID，条件渲染用提前返回。表单用 Formik 与 Yup。 UI 组件与图标：Elastic UI 已弃用，迁移到 Redis UI（@redis-ui/），但不得直接导入 @redis-ui/，须使用 uiSrc/components/ui 的内部封装；图标通过 iconRegistry.tsx 使用 RiIcon，不新建自定义 SVG，除非库中不存在。 测试：每个测试文件创建 renderComponent 辅助函数，实体数据来自 redisinsight/ui/src/mocks/factories/ 的 Fishery 工厂，Redux 组件用 configureStore 创建测试 store。
限制：资料未提供安装命令、版本号、收费与平台信息；上述为项目内部规范，不涉及对外功能说明。