chore: update references from react-layout-kit to @lobehub/ui for Flexbox and Center components in documentation and rules

Signed-off-by: Innei <tukon479@gmail.com>

.cursor/rules/packages/react-layout-kit.mdc

@@ -1,11 +1,12 @@
 ---
-description: react flex layout package `react-layout-kit` usage
-globs: 
+description: flex layout components from `@lobehub/ui` usage
+globs:
 alwaysApply: false
 ---
-# React Layout Kit 使用指南
 
-react-layout-kit 是一个功能丰富的 React flex 布局组件库，在 lobe-chat 项目中被广泛使用。以下是重点组件的使用方法：
+# Flexbox 布局组件使用指南
+
+`@lobehub/ui` 提供了 `Flexbox` 和 `Center` 组件用于创建弹性布局。以下是重点组件的使用方法：
 
 ## Flexbox 组件
 
@@ -14,7 +15,7 @@ Flexbox 是最常用的布局组件，用于创建弹性布局，类似于 CSS
 ### 基本用法
 
 ```jsx
-import { Flexbox } from 'react-layout-kit';
+import { Flexbox } from '@lobehub/ui';
 
 // 默认垂直布局
 <Flexbox>
@@ -58,14 +59,14 @@ import { Flexbox } from 'react-layout-kit';
   >
     <SidebarContent />
   </Flexbox>
-  
+
   {/* 中间内容区 */}
   <Flexbox flex={1} style={{ height: '100%' }}>
     {/* 主要内容 */}
     <Flexbox flex={1} padding={24} style={{ overflowY: 'auto' }}>
       <MainContent />
     </Flexbox>
-    
+
     {/* 底部区域 */}
     <Flexbox
       style={{
@@ -86,9 +87,11 @@ Center 是对 Flexbox 的封装，使子元素水平和垂直居中。
 ### 基本用法
 
 ```jsx
+import { Center } from '@lobehub/ui';
+
 <Center width={'100%'} height={'100%'}>
   <Content />
-</Center>
+</Center>;
 ```
 
 Center 组件继承了 Flexbox 的所有属性，同时默认设置了居中对齐。主要用于快速创建居中布局。
@@ -116,4 +119,4 @@ Center 组件继承了 Flexbox 的所有属性，同时默认设置了居中对
 - 嵌套 Flexbox 创建复杂布局
 - 设置 overflow: 'auto' 使内容可滚动
 - 使用 horizontal 创建水平布局，默认为垂直布局
-- 与 antd-style 的 useTheme hook 配合使用创建主题响应式的布局
+- 与 antd-style 的 useTheme hook 配合使用创建主题响应式的布局

.cursor/rules/project-introduce.mdc

@@ -23,7 +23,6 @@ logo emoji: 🤯
 - `@lobehub/ui`, antd for component framework
 - antd-style for css-in-js framework
 - lucide-react, `@ant-design/icons` for icons
-- react-layout-kit for flex layout component
 - react-i18next for i18n
 - zustand for state management
 - nuqs for search params management

.cursor/rules/react.mdc

@@ -7,7 +7,7 @@ alwaysApply: false
 # React Component Writing Guide
 
 - Use antd-style for complex styles; for simple cases, use the `style` attribute for inline styles
-- Use `Flexbox` and `Center` components from react-layout-kit for flex and centered layouts
+- Use `Flexbox` and `Center` components from `@lobehub/ui` for flex and centered layouts
 - Component selection priority: src/components > installed component packages > lobe-ui > antd
 - Use selectors to access zustand store data instead of accessing the store directly
 
@@ -69,7 +69,9 @@ alwaysApply: false
   - Drawer
   - Modal
 - Layout
+  - Center
   - DraggablePanel
+  - Flexbox
   - Footer
   - Grid
   - Header

AGENTS.md

@@ -87,7 +87,7 @@ All following rules are saved under `.cursor/rules/` directory:
 - `react.mdc` – React component style guide and conventions
 - `i18n.mdc` – Internationalization guide using react-i18next
 - `typescript.mdc` – TypeScript code style guide
-- `packages/react-layout-kit.mdc` – Usage guide for react-layout-kit
+- `packages/react-layout-kit.mdc` – Usage guide for Flexbox and Center components from @lobehub/ui
 
 ### State Management
 

docs/development/basic/feature-development.mdx

@@ -239,7 +239,7 @@ We're adding a new category of settings this time. In `src/features/AgentSetting
 
 - [ant-design](https://ant.design/) and [lobe-ui](https://github.com/lobehub/lobe-ui): component libraries
 - [antd-style](https://ant-design.github.io/antd-style): css-in-js solution
-- [react-layout-kit](https://github.com/arvinxx/react-layout-kit): responsive layout components
+- [@lobehub/ui](https://ui.lobehub.com/): UI component library (includes Flexbox and Center for responsive layouts)
 - [@ant-design/icons](https://ant.design/components/icon-cn) and [lucide](https://lucide.dev/icons/): icon libraries
 - [react-i18next](https://github.com/i18next/react-i18next) and [lobe-i18n](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n): i18n framework and multi-language automatic translation tool
 
@@ -252,12 +252,11 @@ Let's take the subcomponent `OpeningQuestion.tsx` as an example. Component imple
 'use client';
 
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
-import { SortableList } from '@lobehub/ui';
+import { Flexbox, SortableList } from '@lobehub/ui';
 import { Button, Empty, Input } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
 import { useStore } from '../store';
 import { selectors } from '../store/selectors';

docs/development/basic/feature-development.zh-CN.mdx

@@ -239,7 +239,7 @@ export const agentSelectors = {
 
 - [ant-design](https://ant.design/) 和 [lobe-ui：](https://github.com/lobehub/lobe-ui)组件库
 - [antd-style](https://ant-design.github.io/antd-style) ： css-in-js 方案
-- [react-layout-kit](https://github.com/arvinxx/react-layout-kit)：响应式布局组件
+- [@lobehub/ui](https://ui.lobehub.com/)：UI 组件库（包含 Flexbox 和 Center 用于响应式布局）
 - [@ant-design/icons](https://ant.design/components/icon-cn) 和 [lucide](https://lucide.dev/icons/): 图标库
 - [react-i18next](https://github.com/i18next/react-i18next) 和 [lobe-i18n](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n) ：i18n 框架和多语言自动翻译工具
 
@@ -252,12 +252,11 @@ lobe-chat 是个国际化项目，新加的文案需要更新默认的 `locale`
 'use client';
 
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
-import { SortableList } from '@lobehub/ui';
+import { Flexbox, SortableList } from '@lobehub/ui';
 import { Button, Empty, Input } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
 import { useStore } from '../store';
 import { selectors } from '../store/selectors';