Merge pull request #36 from sijinhui/users

用户管理表初步成型

app/api/admin/users/[...path]/route.ts

@@ -0,0 +1,23 @@
+import { NextRequest, NextResponse } from "next/server";
+import prisma from "@/lib/prisma";
+
+async function handle(
+  req: NextRequest,
+  { params }: { params: { path: string[] } },
+) {
+  // 判断网址和请求方法
+  // const method = req.method;
+  // // const url = req.url;
+  // const { pathname } = new URL(req.url);
+  //
+  // console.log('123', method, pathname,)
+  // const result = await prisma.user.findMany({
+  //     orderBy: {
+  //         createdAt: "desc",
+  //     },
+  // });
+  return NextResponse.json({ error: "暂未开发" }, { status: 400 });
+}
+
+export const GET = handle;
+export const POST = handle;

app/api/admin/users/route.ts

@@ -0,0 +1,58 @@
+import { NextRequest, NextResponse } from "next/server";
+import prisma from "@/lib/prisma";
+
+async function handle(
+  req: NextRequest,
+  { params }: { params: { path: string[] } },
+) {
+  // 判断网址和请求方法
+  const method = req.method;
+  // const url = req.url;
+  const { pathname, searchParams } = new URL(req.url);
+  const searchText = searchParams.get("search");
+  // console.log(req)
+
+  if (method === "GET") {
+    // 是否有查询
+    const result = searchText
+      ? await prisma.user.findMany({
+          orderBy: {
+            createdAt: "desc",
+          },
+          where: {
+            OR: [
+              {
+                name: {
+                  contains: searchText,
+                  mode: "insensitive", // 不区分大小写
+                },
+              },
+              {
+                username: {
+                  contains: searchText,
+                  mode: "insensitive", // 不区分大小写
+                },
+              },
+              {
+                email: {
+                  contains: searchText,
+                  mode: "insensitive", // 不区分大小写
+                },
+              },
+            ],
+          },
+        })
+      : await prisma.user.findMany({
+          orderBy: {
+            createdAt: "desc",
+          },
+        });
+    const count = result.length;
+    return NextResponse.json({ count: count, results: result });
+  }
+
+  return NextResponse.json({ error: "当前方法不支持" }, { status: 400 });
+}
+
+export const GET = handle;
+export const POST = handle;

app/app/(admin)/admin/users/page.tsx

@@ -1,24 +1,24 @@
 import { Flex } from "antd";
 import prisma from "@/lib/prisma";
 import { User } from "@prisma/client";
-import UsersTable from "../../components/users-table";
+import UsersTablePart from "../../components/users-table";
 
-async function getData() {
+// async function getData() {
-  return await prisma.user.findMany({
+//   return await prisma.user.findMany({
-    orderBy: {
+//     orderBy: {
-      createdAt: "desc",
+//       createdAt: "desc",
-    },
+//     },
-  });
+//   });
-}
+// }
 export default async function UsersPage() {
-  const users: User[] = await getData();
+  // const users: User[] = await getData();
 
   // console.log("data", data);
 
   return (
     <>
       <Flex gap="middle" vertical>
-        <UsersTable users={users} />
+        <UsersTablePart />
       </Flex>
     </>
   );

app/app/(admin)/components/sidebar.tsx

@@ -50,7 +50,7 @@ const items: MenuItem[] = [
 
 const SideBar: React.FC = () => {
   const [theme, setTheme] = useState<MenuTheme>("dark");
-  const [current, setCurrent] = useState("/admin/ana");
+  const [current, setCurrent] = useState("");
   const router = useRouter();
   const [loading, setLoading] = useState(false);
   const pathname = usePathname();
@@ -63,12 +63,12 @@ const SideBar: React.FC = () => {
     setCurrent(e.key);
     router.push(e.key);
   };
-  useEffect(() => {
+  // useEffect(() => {
-    // 如果按钮和路径不相等，那其实应该跳转到按钮的网址
+  //   // 如果按钮和路径不相等，那其实应该跳转到按钮的网址
-    if (current != pathname) {
+  //   if (current != pathname) {
-      router.push(current);
+  //     router.push(current);
-    }
+  //   }
-  }, [current, pathname, router]);
+  // }, [current, pathname, router]);
 
   return (
     <>
@@ -78,7 +78,7 @@ const SideBar: React.FC = () => {
         theme={theme}
         onClick={onClick}
         // style={{ width: 256 }}
-        defaultOpenKeys={["dashboard"]}
+        // defaultOpenKeys={["dashboard"]}
         selectedKeys={[current]}
         mode="inline"
         items={items}

app/app/(admin)/components/users-table.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import React, { useRef, useState } from "react";
+import React, {
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { User } from "@prisma/client";
 import { Space, Table, Tag, Input, Button } from "antd";
 import { SearchOutlined } from "@ant-design/icons";
@@ -9,145 +15,194 @@ import type { GetRef, TableColumnsType, TableColumnType } from "antd";
 import Highlighter from "react-highlight-words";
 // 后期考虑删除该依赖
 
+import type { SearchProps } from "antd/es/input/Search";
+
+const { Search } = Input;
+
 import { getCurrentTime } from "@/app/utils/custom";
 
 interface UserInterface {
   users: User[];
+  setUsers: Dispatch<SetStateAction<User[]>>;
+  loading: Boolean;
+  setLoading: Dispatch<SetStateAction<boolean>>;
 }
+interface SearchTextProps {
+  searchText: string;
+  setSearchText: Dispatch<SetStateAction<string>>;
+}
+
 type DataIndex = keyof User;
 type InputRef = GetRef<typeof Input>;
 
-function UsersTable({ users }: UserInterface) {
+function UserTableSearchInput({ users, setUsers, setLoading }: UserInterface) {
-  // const data = {}
-  // console.log('[data]', users)
   const [searchText, setSearchText] = useState("");
-  const [searchedColumn, setSearchedColumn] = useState("");
+  // 这里直接搜索，并获取数据不传递搜索的值给表格了。
-  const searchInput = useRef<InputRef>(null);
+  const onSearch: SearchProps["onSearch"] = (value, _e, info) => {
-  const handleSearch = (
+    setSearchText(value);
-    selectedKeys: string[],
-    confirm: FilterDropdownProps["confirm"],
-    dataIndex: DataIndex,
-  ) => {
-    confirm();
-    setSearchText(selectedKeys[0]);
-    setSearchedColumn(dataIndex);
   };
 
-  const handleReset = (clearFilters: () => void) => {
+  useEffect(() => {
-    clearFilters();
+    setLoading(true);
-    setSearchText("");
+    const fetchUsers = async () => {
-  };
+      try {
+        const url = new URL("/api/admin/users/", "http://localhost:3000");
+        url.searchParams.append("search", searchText);
+        console.log(url, "url");
+        const response = await fetch(url);
+        if (response.ok) {
+          const data = await response.json();
+          setUsers(data["results"]);
+          setLoading(false);
+        }
+      } catch (e) {
+        setLoading(false);
+        console.log("fetch user error: ", e);
+      }
+    };
 
-  const getColumnSearchProps = (
+    fetchUsers();
-    dataIndex: DataIndex,
+    console.log(users, "users1");
-  ): TableColumnType<User> => ({
+  }, [searchText]);
-    filterDropdown: ({
+
-      setSelectedKeys,
+  return (
-      selectedKeys,
+    <Search
-      confirm,
+      placeholder="input search text"
-      clearFilters,
+      onSearch={onSearch}
-      close,
+      enterButton
-    }) => (
+      style={{ width: 304 }}
-      <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
+    />
-        <Input
+  );
-          ref={searchInput}
+}
-          placeholder={`Search ${dataIndex}`}
+
-          value={selectedKeys[0]}
+function UsersTable({ users, setUsers, loading }: UserInterface) {
-          onChange={(e) =>
+  // const [searchText, setSearchText] = useState("");
-            setSelectedKeys(e.target.value ? [e.target.value] : [])
+  // const [searchedColumn, setSearchedColumn] = useState("");
-          }
+  // const searchInput = useRef<InputRef>(null);
-          onPressEnter={() =>
+  // const handleSearch = (
-            handleSearch(selectedKeys as string[], confirm, dataIndex)
+  //   selectedKeys: string[],
-          }
+  //   confirm: FilterDropdownProps["confirm"],
-          style={{ marginBottom: 8, display: "block" }}
+  //   dataIndex: DataIndex,
-        />
+  // ) => {
-        <Space>
+  //   confirm();
-          <Button
+  //   setSearchText(selectedKeys[0]);
-            type="primary"
+  //   setSearchedColumn(dataIndex);
-            onClick={() =>
+  // };
-              handleSearch(selectedKeys as string[], confirm, dataIndex)
+
-            }
+  // const handleReset = (clearFilters: () => void) => {
-            icon={<SearchOutlined />}
+  //   clearFilters();
-            size="small"
+  //   setSearchText("");
-            style={{ width: 90 }}
+  // };
-          >
+
-            Search
+  // const getColumnSearchProps = (
-          </Button>
+  //   dataIndex: DataIndex,
-          <Button
+  // ): TableColumnType<User> => ({
-            onClick={() => clearFilters && handleReset(clearFilters)}
+  //   filterDropdown: ({
-            size="small"
+  //     setSelectedKeys,
-            style={{ width: 90 }}
+  //     selectedKeys,
-          >
+  //     confirm,
-            Reset
+  //     clearFilters,
-          </Button>
+  //     close,
-          <Button
+  //   }) => (
-            type="link"
+  //     <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
-            size="small"
+  //       <Input
-            onClick={() => {
+  //         ref={searchInput}
-              confirm({ closeDropdown: false });
+  //         placeholder={`Search ${dataIndex}`}
-              setSearchText((selectedKeys as string[])[0]);
+  //         value={selectedKeys[0]}
-              setSearchedColumn(dataIndex);
+  //         onChange={(e) =>
-            }}
+  //           setSelectedKeys(e.target.value ? [e.target.value] : [])
-          >
+  //         }
-            Filter
+  //         onPressEnter={() =>
-          </Button>
+  //           handleSearch(selectedKeys as string[], confirm, dataIndex)
-          <Button
+  //         }
-            type="link"
+  //         style={{ marginBottom: 8, display: "block" }}
-            size="small"
+  //       />
-            onClick={() => {
+  //       <Space>
-              close();
+  //         <Button
-            }}
+  //           type="primary"
-          >
+  //           onClick={() =>
-            close
+  //             handleSearch(selectedKeys as string[], confirm, dataIndex)
-          </Button>
+  //           }
-        </Space>
+  //           icon={<SearchOutlined />}
-      </div>
+  //           size="small"
-    ),
+  //           style={{ width: 90 }}
-    filterIcon: (filtered: boolean) => (
+  //         >
-      <SearchOutlined style={{ color: filtered ? "#1677ff" : undefined }} />
+  //           Search
-    ),
+  //         </Button>
-    onFilter: (value, record: User) => {
+  //         <Button
-      let result = record?.[dataIndex];
+  //           onClick={() => clearFilters && handleReset(clearFilters)}
-      if (result) {
+  //           size="small"
-        return result
+  //           style={{ width: 90 }}
-          .toString()
+  //         >
-          .toLowerCase()
+  //           Reset
-          .includes((value as string).toLowerCase());
+  //         </Button>
-      }
+  //         <Button
-      return false;
+  //           type="link"
-    },
+  //           size="small"
-    onFilterDropdownOpenChange: (visible) => {
+  //           onClick={() => {
-      if (visible) {
+  //             confirm({ closeDropdown: false });
-        // @ts-ignore
+  //             setSearchText((selectedKeys as string[])[0]);
-        setTimeout(() => searchInput.current?.select(), 100);
+  //             setSearchedColumn(dataIndex);
-      }
+  //           }}
-    },
+  //         >
-    render: (text) =>
+  //           Filter
-      searchedColumn === dataIndex ? (
+  //         </Button>
-        // @ts-ignore
+  //         <Button
-        <Highlighter
+  //           type="link"
-          highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
+  //           size="small"
-          searchWords={[searchText]}
+  //           onClick={() => {
-          autoEscape
+  //             close();
-          textToHighlight={text ? text.toString() : ""}
+  //           }}
-        />
+  //         >
-      ) : (
+  //           close
-        text
+  //         </Button>
-      ),
+  //       </Space>
-  });
+  //     </div>
+  //   ),
+  //   filterIcon: (filtered: boolean) => (
+  //     <SearchOutlined style={{ color: filtered ? "#1677ff" : undefined }} />
+  //   ),
+  //   onFilter: (value, record: User) => {
+  //     let result = record?.[dataIndex];
+  //     if (result) {
+  //       return result
+  //         .toString()
+  //         .toLowerCase()
+  //         .includes((value as string).toLowerCase());
+  //     }
+  //     return false;
+  //   },
+  //   onFilterDropdownOpenChange: (visible) => {
+  //     if (visible) {
+  //       // @ts-ignore
+  //       setTimeout(() => searchInput.current?.select(), 100);
+  //     }
+  //   },
+  //   render: (text) =>
+  //     searchedColumn === dataIndex ? (
+  //       // @ts-ignore
+  //       <Highlighter
+  //         highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
+  //         searchWords={[searchText]}
+  //         autoEscape
+  //         textToHighlight={text ? text.toString() : ""}
+  //       />
+  //     ) : (
+  //       text
+  //     ),
+  // });
 
   const columns: TableColumnsType<User> = [
-    { title: "Name", dataIndex: "name", ...getColumnSearchProps("name") },
+    { title: "Name", dataIndex: "name" },
     {
       title: "UserName",
       dataIndex: "username",
-      ...getColumnSearchProps("username"),
     },
-    { title: "Email", dataIndex: "email", ...getColumnSearchProps("email") },
+    { title: "Email", dataIndex: "email" },
     {
       title: "createdAt",
       dataIndex: "createdAt",
-      render: (value) => getCurrentTime(value),
+      render: (value) => getCurrentTime(new Date(value)),
       sorter: (a, b) => {
         if (a.createdAt < b.createdAt) return 1;
         return -1;
@@ -156,11 +211,52 @@ function UsersTable({ users }: UserInterface) {
     {
       title: "updatedAt",
       dataIndex: "updatedAt",
-      render: (value) => getCurrentTime(value),
+      render: (value) => getCurrentTime(new Date(value)),
+    },
+    {
+      title: "Action",
+      dataIndex: "",
+      key: "id",
+      render: () => (
+        <Space size="middle">
+          <a>编辑</a>
+          <a>删除</a>
+        </Space>
+      ),
     },
   ];
+  console.log(users, "users2");
 
-  return <Table dataSource={users} rowKey="id" columns={columns} />;
+  return (
+    <Table
+      dataSource={users}
+      rowKey="id"
+      columns={columns}
+      loading={loading as boolean}
+    />
+  );
 }
 
-export default UsersTable;
+function UsersTablePart() {
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <>
+      <UserTableSearchInput
+        users={users}
+        setUsers={setUsers}
+        loading={loading}
+        setLoading={setLoading}
+      />
+      <UsersTable
+        users={users}
+        setUsers={setUsers}
+        loading={loading}
+        setLoading={setLoading}
+      />
+    </>
+  );
+}
+
+export default UsersTablePart;

app/styles/globals.scss

@@ -219,20 +219,20 @@ input[type="range"]::-ms-thumb:hover {
   @include thumbHover();
 }
 
-input[type="number"],
+//input[type="number"],
-input[type="text"],
+//input[type="text"],
-input[type="password"] {
+//input[type="password"] {
-  appearance: none;
+//  appearance: none;
-  border-radius: 10px;
+//  border-radius: 10px;
-  border: var(--border-in-light);
+//  border: var(--border-in-light);
-  min-height: 36px;
+//  min-height: 36px;
-  box-sizing: border-box;
+//  box-sizing: border-box;
-  background: var(--white);
+//  background: var(--white);
-  color: var(--black);
+//  color: var(--black);
-  padding: 0 10px;
+//  padding: 0 10px;
-  max-width: 50%;
+//  max-width: 50%;
-  font-family: inherit;
+//  font-family: inherit;
-}
+//}
 
 div.math {
   overflow-x: auto;