import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import { RouterProvider } from 'react-router-dom'
import router from '@/router'
import { ConfigProvider, App as AntdApp } from 'antd'
import zhCN from 'antd/locale/zh_CN'
import { QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { queryClient } from '@/lib/queryClient' // 👈 从独立模块导入

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <ConfigProvider locale={zhCN}>
        <AntdApp>
          <RouterProvider router={router} />
        </AntdApp>
      </ConfigProvider>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  </StrictMode>,
)

import { Layout } from 'antd';
import { Outlet, NavLink } from 'react-router-dom';

const { Header, Content } = Layout;

export default function App() {
  return (
    <Layout className="min-h-screen">
      <Header>
          <NavLink to="/users" className="text-white">用户列表</NavLink>
      </Header>
      <Layout>
        <Content className="m-6 p-6 bg-white">
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
}

// Home.tsx
import { Typography } from 'antd';
import { Link } from 'react-router-dom';
export default function Home() {
  return <div><Typography.Title>首页</Typography.Title><Link to="/users">前往用户列表</Link></div>;
}

// Users.tsx
import { Typography } from 'antd';
export default function Users() {
  return <Typography.Title> 用户列表页 </Typography.Title>;
}

import { createBrowserRouter } from "react-router-dom";
import App from "@/App";
import Home from "@/pages/Home";
import Users from "@/pages/User";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      { index: true, element: <Home /> },
      { path: "users", element: <Users /> },
    ],
  },
]);

export default router;

import { createBrowserRouter } from 'react-router-dom';
import App from '@/App';
import Home from '@/pages/Home';
import Users from '@/pages/Users';
import { queryClient } from '@/lib/queryClient';
import { usersQueryOptions } from '@/queries/userQueries';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      { index: true, element: <Home /> },
      {
        path: 'users',
        element: <Users />,
        // ✅ 最佳实践：非阻塞式预加载
        loader: () => {
          // prefetchQuery 会在后台触发数据获取，但会立即返回一个 Promise
          // 我们不 await 它，直接返回 null，让路由立即渲染组件。
          queryClient.prefetchQuery(usersQueryOptions);
          return null; 
        },
      },
    ],
  },
]);

export default router;

import { useQuery } from "@tanstack/react-query";
import { usersQueryOptions } from "@/queries/userQueries";
import { List, Typography, Alert, Spin } from "antd";

export default function Users() {
  // 调用 useQuery hook，传入与 loader 中完全相同的 query options
  // 由于使用了 defer + prefetchQuery，路由会立即渲染组件
  // 此时数据可能还在加载中，isLoading 会正确反映这个状态
  const {
    data: users,
    isLoading,
    isError,
    error,
    isFetching,
  } = useQuery(usersQueryOptions);

  // 处理错误状态
  if (isError) {
    return (
      <Alert
        message="数据加载失败"
        description={error.message}
        type="error"
        showIcon
      />
    );
  }

  return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <Typography.Title level={2} className="!mb-0">
          用户列表
        </Typography.Title>
        {/* isFetching 且不是 isLoading：表示后台刷新
            触发场景：
            1. 窗口重新获得焦点时（refetchOnWindowFocus）
            2. 网络重新连接时（refetchOnReconnect）
            3. 手动调用 refetch() 时
            4. staleTime 过期后自动重新获取
            5. 使用 invalidateQueries 使缓存失效后
        */}
        {isFetching && !isLoading && <Spin size="small" tip="刷新中..." />}
      </div>

      <List
        loading={isLoading}
        bordered
        dataSource={users}
        renderItem={(user) => (
          <List.Item>
            <List.Item.Meta title={user.name} description={user.email} />
          </List.Item>
        )}
      />
    </div>
  );
}

import { createBrowserRouter } from 'react-router-dom';
import App from '@/App';
import Home from '@/pages/Home';
import Users from '@/pages/Users';
import UserDetail from '@/pages/UserDetail'; // 👈 1. 导入新页面
import { queryClient } from '@/lib/queryClient';
import { usersQueryOptions, userQueryOptions } from '@/queries/userQueries'; // 👈 2. 导入新选项

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      { index: true, element: <Home /> },
      {
        path: 'users',
        element: <Users />,
        loader: () => {
          queryClient.prefetchQuery(usersQueryOptions);
          return null;
        },
      },
      // 👇 3. 新增用户详情页路由
      {
        path: 'users/:userId',
        element: <UserDetail />,
        loader: ({ params }) => {
          // 从路由参数中获取 userId
          const userId = Number(params.userId);
          // 使用动态的 query options 进行预取
          queryClient.prefetchQuery(userQueryOptions(userId));
          return { userId }; // 将 userId 传递给组件
        }
      }
    ],
  },
]);

export default router;

import { useQuery } from '@tanstack/react-query';
import { useParams } from 'react-router-dom';
import { userQueryOptions } from '@/queries/userQueries';
import { Card, Spin, Alert, Descriptions } from 'antd';

export default function UserDetail() {
  const { userId } = useParams<{ userId: string }>();
  const id = Number(userId);

  const { data: user, isLoading, isError, error } = useQuery(userQueryOptions(id));

  if (isLoading) {
    return <Spin tip="加载用户详情中..." size="large" />;
  }

  if (isError) {
    return <Alert message="加载失败" description={error.message} type="error" showIcon />;
  }

  return (
    <Card title="用户详情">
      <Descriptions bordered>
        <Descriptions.Item label="ID">{user.id}</Descriptions.Item>
        <Descriptions.Item label="姓名">{user.name}</Descriptions.Item>
        <Descriptions.Item label="邮箱">{user.email}</Descriptions.Item>
      </Descriptions>
    </Card>
  );
}

import { useQuery } from "@tanstack/react-query";
import { usersQueryOptions } from "@/queries/userQueries";
import { List, Typography, Alert, Spin } from "antd";
import { useNavigate } from "react-router-dom";
export default function Users() {
  const navigate = useNavigate();
      <List
        loading={isLoading}
        bordered
        dataSource={users}
        renderItem={(user) => (
          <List.Item className="cursor-pointer hover:bg-gray-100" onClick={() => navigate(`/users/${user.id}`)}>
            <List.Item.Meta title={user.name} description={user.email} />
          </List.Item>
        )}
      />
    </div>
  );
}

// ... (保留 Users 组件的 import 和代码)

// 👇 新增一个组件
function UserNames() {
  // 我们复用 usersQueryOptions，但添加了 select 选项
  const { data: userNames } = useQuery({
    ...usersQueryOptions,
    // `data` 参数是 `getUsers` 函数返回的完整的 `User[]` 数组
    select: (data) => data.map(user => user.name),
  });
  
  // `userNames` 的类型被自动推断为 string[] | undefined
  
  return (
    <Card title="用户名列表 (select 转换)" className="mt-8">
      <List
        dataSource={userNames}
        renderItem={(name) => <List.Item>{name}</List.Item>}
      />
    </Card>
  )
}

// 在 Users 组件的 return 中添加 <UserNames />
export default function Users() {
  // ... (保留 Users 组件的现有逻辑)
  return (
    <div>
      {/* ... (保留 Users 组件的 JSX) ... */}
      <UserNames /> {/* 👈 在这里渲染新组件 */}
    </div>
  )
}

const { 
  mutate,      // 👈 触发变更的函数
  isPending,   // 👈 变更是否正在进行中
  // ... 其他状态
} = useMutation({
  // ... 配置选项
});

import { useMutation, useQueryClient } from "@tanstack/react-query";
import { createUser } from "@/api/user";
import { usersQueryOptions } from "@/queries/userQueries";
import { Button, Form, Input, App as AntdApp } from "antd";

export default function AddUserForm() {
  const { message } = AntdApp.useApp();
  const queryClient = useQueryClient();
  const [form] = Form.useForm();

  const { mutate, isPending } = useMutation({
    mutationFn: createUser,
    onSuccess: () => {
      message.success("新用户添加成功！");
      form.resetFields();
      queryClient.invalidateQueries(usersQueryOptions);
    },
    onError: (error) => { message.error(`添加失败: ${error.message}`); }
  });

  const onFinish = (values: { name: string; email: string }) => {
    mutate(values);
  };

  return (
    <Form form={form} onFinish={onFinish} layout="vertical" className="mb-8">
      <Form.Item name="name" label="姓名" rules={[{ required: true }]}>
        <Input placeholder="请输入用户名"/>
      </Form.Item>
      <Form.Item name="email" label="邮箱" rules={[{ required: true, type: 'email' }]}>
        <Input placeholder="请输入邮箱"/>
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit" loading={isPending}>
          {isPending ? "添加中..." : "添加用户"}
        </Button>
      </Form.Item>
    </Form>
  );
}

import AddUserForm from '@/components/AddUserForm';
// ...
export default function Users() {
  // ...
  return (
    <div>
      <Typography.Title level={2} className="!mb-4"> 添加新用户 </Typography.Title>
      <AddUserForm />
      {/* ... 列表部分 */}
    </div>
  );
}

import { useAddUser } from "@/hooks/useUserMutations"; // 👈 导入我们创建的 Hook
import { Button, Form, Input } from "antd";
import { useEffect } from "react";

export default function AddUserForm() {
  const [form] = Form.useForm();
  
  // ✨ 一行代码，就获得了所有数据变更的逻辑和状态
  const { mutate, isPending, isSuccess } = useAddUser();

  const onFinish = (values: { name: string; email: string }) => {
    mutate(values);
  };
  
  // 监听 isSuccess 状态，用于清空表单
  useEffect(() => {
    if (isSuccess) {
      form.resetFields();
    }
  }, [isSuccess, form]);

  return (
    // ... 表单 JSX 保持不变 ...
    <Form form={form} onFinish={onFinish} layout="vertical" className="mb-8">
      <Form.Item name="name" label="姓名" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item
        name="email"
        label="邮箱"
        rules={[{ required: true, type: "email" }]}
      >
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit" loading={isPending}>
          {isPending ? "添加中..." : "添加用户"}
        </Button>
      </Form.Item>
    </Form>
  );
}

import { useAddUser } from "@/hooks/useUserMutations";
// ... (其他 imports)

export default function AddUserForm() {
  const [form] = Form.useForm();
  
  // Hook 的调用方式完全不变
  const { mutate, isPending } = useAddUser();

  const onFinish = (values: { name: string; email: string }) => {
    // 为了达到最佳体验，我们在调用 mutate 的同时立即重置表单
    // 因为UI是乐观更新的，用户感觉不到延迟
    form.resetFields();
    mutate(values);
  };
  
  // 不再需要 useEffect 来监听 isSuccess

  return (
    <Form form={form} onFinish={onFinish} layout="vertical" className="mb-8">
      {/* ... Form.Items ... */}
      <Form.Item>
        <Button type="primary" htmlType="submit" loading={isPending}>
          {isPending ? "处理中..." : "添加用户 (乐观更新)"}
        </Button>
      </Form.Item>
    </Form>
  );
}

import { Radio, type RadioChangeEvent } from "antd";
import { useAppStore } from "@/stores/useAppStore";
import type { UserStatus } from "@/stores/slices/filterSlice";

export default function UserFilter() {
  // 从 Store 中读取状态和更新函数
  const userStatus = useAppStore((state) => state.userStatus);
  const setUserStatus = useAppStore((state) => state.setUserStatus);

  const onChange = (e: RadioChangeEvent) => {
    setUserStatus(e.target.value as UserStatus);
  };

  return (
    <div className="mb-4">
      <Radio.Group onChange={onChange} value={userStatus}>
        <Radio.Button value="all">所有用户</Radio.Button>
        <Radio.Button value="active">活跃用户</Radio.Button>
        <Radio.Button value="inactive">非活跃用户</Radio.Button>
      </Radio.Group>
    </div>
  );
}

import { useQuery } from "@tanstack/react-query";
import { List, Typography, Alert, Spin } from "antd";
import { useNavigate } from "react-router-dom";
import AddUserForm from "@/components/AddUserForm";
import UserFilter from "@/components/UserFilter";
import { useAppStore } from "@/stores/useAppStore";
// 👈 1. 只需导入我们新创建的动态 query options 函数
import { usersByStatusQueryOptions } from "@/queries/userQueries"; 

export default function Users() {
  const navigate = useNavigate();
  // 2. 从 Zustand Store 中订阅筛选状态
  const userStatus = useAppStore((state) => state.userStatus);

  // 3. ✨ 核心改造：一行代码，优雅地消费动态查询
  const {
    data: users,
    isLoading,
    isError,
    error,
    isFetching,
  } = useQuery(usersByStatusQueryOptions(userStatus));

  if (isError) {
    return (
      <Alert message="数据加载失败" description={error.message} type="error" showIcon/>
    );
  }

  return (
    <div>
      <Typography.Title level={2} className="!mb-4">
        添加新用户
      </Typography.Title>
      <AddUserForm />

      <div className="flex items-center justify-between mt-8 mb-4">
        <Typography.Title level={2} className="!mb-0">
          用户列表
        </Typography.Title>
        {isFetching && !isLoading && <Spin size="small" tip="刷新中..." />}
      </div>
      
      <UserFilter />
      
      <List
        loading={isLoading}
        bordered
        dataSource={users}
        renderItem={(user) => (
          <List.Item
            className="cursor-pointer hover:bg-gray-100"
            onClick={() => navigate(`/users/${user.id}`)}
          >
            <List.Item.Meta title={user.name} description={user.email} />
          </List.Item>
        )}
      />
    </div>
  );
}

import { Layout, Badge } from "antd";
import { Outlet, NavLink } from "react-router-dom";
import { useAppStore } from "./stores/useAppStore";
import { useQuery } from "@tanstack/react-query";
import { usersCountQueryOptions } from "./queries/userQueries";
import { useEffect } from "react";

const { Header, Content } = Layout;

export default function App() {
  const userCount = useAppStore((state) => state.userCount);
  const setUserCount = useAppStore((state) => state.setUserCount);

  // 这个 useQuery 不会触发独立网络请求
  // 它会智能地从 ['users'] 查询的缓存中派生数据
  const { data: serverUserCount } = useQuery(usersCountQueryOptions);

  // effect 的作用是：在应用加载时，用服务器的初始状态来“水合”我们的客户端 store
  useEffect(() => {
    // 只有当服务器返回了确切的数字时，才更新 Zustand 状态
    if (typeof serverUserCount === "number") {
      setUserCount(serverUserCount);
    }
  }, [serverUserCount, setUserCount]);

  return (
    <Layout className="min-h-scree">
      <Header className="flex items-center" style={{ background: "#fff" }}>
        <NavLink to="/users" className="text-blue-600">
          <Badge count={userCount} overflowCount={99}>
            <span className="pr-2">用户列表</span>
          </Badge>
        </NavLink>
      </Header>
      <Layout>
        <Content className="m-6 p-6 bg-white">
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
}