lobe-chat/.cursor/rules/recent-data-usage.mdc

# Recent Data 使用指南

## 概述

Recent 数据（recentTopics, recentResources, recentPages）存储在 session store 中，可以在应用的任何地方访问。

## 数据初始化

在应用顶层（如 `RecentHydration.tsx`）中初始化所有 recent 数据：

```tsx
import { useInitRecentPage } from '@/hooks/useInitRecentPage';
import { useInitRecentResource } from '@/hooks/useInitRecentResource';
import { useInitRecentTopic } from '@/hooks/useInitRecentTopic';

const App = () => {
  // 初始化所有 recent 数据
  useInitRecentTopic();
  useInitRecentResource();
  useInitRecentPage();

  return <YourComponents />;
};
```

## 使用方式

### 方式一：直接从 Store 读取（推荐用于多处使用）

在任何组件中直接访问 store 中的数据：

```tsx
import { useSessionStore } from '@/store/session';
import { recentSelectors } from '@/store/session/selectors';

const Component = () => {
  // 读取数据
  const recentTopics = useSessionStore(recentSelectors.recentTopics);
  const isInit = useSessionStore(recentSelectors.isRecentTopicsInit);

  if (!isInit) return <div>Loading...</div>;

  return (
    <div>
      {recentTopics.map((topic) => (
        <div key={topic.id}>{topic.title}</div>
      ))}
    </div>
  );
};
```

### 方式二：使用 Hook 返回的数据（用于单一组件）

```tsx
import { useInitRecentTopic } from '@/hooks/useInitRecentTopic';

const Component = () => {
  const { data: recentTopics, isLoading } = useInitRecentTopic();

  if (isLoading) return <div>Loading...</div>;

  return <div>{/* 使用 recentTopics */}</div>;
};
```

## 可用的 Selectors

### Recent Topics (最近话题)

```tsx
import { recentSelectors } from '@/store/session/selectors';

// 数据
const recentTopics = useSessionStore(recentSelectors.recentTopics);
// 类型: RecentTopic[]

// 初始化状态
const isInit = useSessionStore(recentSelectors.isRecentTopicsInit);
// 类型: boolean
```

**RecentTopic 类型：**

```typescript
interface RecentTopic {
  agent: {
    avatar: string | null;
    backgroundColor: string | null;
    id: string;
    title: string | null;
  } | null;
  id: string;
  title: string | null;
  updatedAt: Date;
}
```

### Recent Resources (最近文件)

```tsx
import { recentSelectors } from '@/store/session/selectors';

// 数据
const recentResources = useSessionStore(recentSelectors.recentResources);
// 类型: FileListItem[]

// 初始化状态
const isInit = useSessionStore(recentSelectors.isRecentResourcesInit);
// 类型: boolean
```

### Recent Pages (最近页面)

```tsx
import { recentSelectors } from '@/store/session/selectors';

// 数据
const recentPages = useSessionStore(recentSelectors.recentPages);
// 类型: any[]

// 初始化状态
const isInit = useSessionStore(recentSelectors.isRecentPagesInit);
// 类型: boolean
```

## 特性

1. **自动登录检测**：只有在用户登录时才会加载数据
2. **数据缓存**：数据存储在 store 中，多处使用无需重复加载
3. **自动刷新**：使用 SWR，在用户重新聚焦时自动刷新（5分钟间隔）
4. **类型安全**：完整的 TypeScript 类型定义

## 最佳实践

1. **初始化位置**：在应用顶层统一初始化所有 recent 数据
2. **数据访问**：使用 selectors 从 store 读取数据
3. **多处使用**：同一数据在多个组件中使用时，推荐使用方式一（直接从 store 读取）
4. **性能优化**：使用 selector 确保只有相关数据变化时才重新渲染