mcpField
R
recent-data

recent-data

github.com/lobehub开发83.6k863 次安装今天更新
代码仓库

关于 recent-data

LobeHub 应用中近期主题、资源和页面数据的使用指南，面向开发者。它说明如何初始化会话存储、通过选择器读取数据，以及利用缓存和自动刷新。

主要功能

  1. 01初始化近期数据钩子
  2. 02通过会话存储和选择器读取
  3. 03提供钩子返回值读取方式
  4. 04缓存数据并避免重复加载
  5. 05焦点时自动刷新

适用场景

  1. 01在应用顶部初始化近期数据
  2. 02在多个组件中读取近期记录
  3. 03等待数据初始化后再渲染内容

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/lobehub/lobehub --skill recent-data

安装后在 Claude Code 中输入/recent-data确认已加载。

详细介绍

最近数据使用指南

最近数据（recentTopics、recentResources、recentPages）存储在会话存储中。

初始化

在应用顶层（例如，RecentHydration.tsx）：

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

const App = () => {
  useInitRecentTopic();
  useInitRecentResource();
  useInitRecentPage();
  return <YourComponents />;
};

使用方法

方法 1：从 Store 读取（推荐）
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>
  );
};
方法 2：使用 Hook 返回值（单个组件）
const { data: recentTopics, isLoading } = useInitRecentTopic();

可用的选择器

最近主题
const recentTopics = useSessionStore(recentSelectors.recentTopics);
// Type: RecentTopic[]

const isInit = useSessionStore(recentSelectors.isRecentTopicsInit);
// Type: boolean

RecentTopic 类型：

interface RecentTopic {
  agent: {
    avatar: string | null;
    backgroundColor: string | null;
    id: string;
    title: string | null;
  } | null;
  id: string;
  title: string | null;
  updatedAt: Date;
}
最近资源
const recentResources = useSessionStore(recentSelectors.recentResources);
// Type: FileListItem[]

const isInit = useSessionStore(recentSelectors.isRecentResourcesInit);
最近页面
const recentPages = useSessionStore(recentSelectors.recentPages);
const isInit = useSessionStore(recentSelectors.isRecentPagesInit);

功能

  1. 自动检测登录状态：仅在用户登录时加载
  2. 数据缓存：存储在 Store 中，无需重复加载
  3. 自动刷新：SWR 在窗口聚焦时刷新（间隔 5 分钟）
  4. 类型安全：完整的 TypeScript 类型

最佳实践

  1. 在应用顶层初始化所有最近数据
  2. 使用选择器从 Store 读取数据
  3. 在多个组件中使用时，优先选择方法 1
  4. 使用选择器优化渲染

评论

支持 Markdown