xinyin025/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-10-02 16:16:39 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #36 from sijinhui/users

Browse Source 
用户管理表初步成型
This commit is contained in:
sijinhui 2024-03-26 23:26:10 +08:00 committed by GitHub
commit 016a68b69b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 331 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/api/admin/users/[...path]/route.ts Normal file
View File

@ -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;

58
app/api/admin/users/route.ts Normal file
View File

@ -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;

20
app/app/(admin)/admin/users/page.tsx
View File

@ -1,24 +1,24 @@
import { Flex } from "antd"; import { Flex } from "antd";
import prisma from "@/lib/prisma"; import prisma from "@/lib/prisma";
import { User } from "@prisma/client"; 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() { export default async function UsersPage() {
const users: User[] = await getData(); // const users: User[] = await getData();
// console.log("data", data); // console.log("data", data);
return ( return (
<> <>
<Flex gap="middle" vertical> <Flex gap="middle" vertical>
<UsersTable users={users} /> <UsersTablePart />
</Flex> </Flex>
</> </>
); );

16
app/app/(admin)/components/sidebar.tsx
View File

@ -50,7 +50,7 @@ const items: MenuItem[] = [
const SideBar: React.FC = () => { const SideBar: React.FC = () => {
const [theme, setTheme] = useState<MenuTheme>("dark"); const [theme, setTheme] = useState<MenuTheme>("dark");
const [current, setCurrent] = useState("/admin/ana"); const [current, setCurrent] = useState("");
const router = useRouter(); const router = useRouter();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const pathname = usePathname(); const pathname = usePathname();
@ -63,12 +63,12 @@ const SideBar: React.FC = () => {
setCurrent(e.key); setCurrent(e.key);
router.push(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 ( return (
<> <>
@ -78,7 +78,7 @@ const SideBar: React.FC = () => {
theme={theme} theme={theme}
onClick={onClick} onClick={onClick}
// style={{ width: 256 }} // style={{ width: 256 }}
defaultOpenKeys={["dashboard"]} // defaultOpenKeys={["dashboard"]}
selectedKeys={[current]} selectedKeys={[current]}
mode="inline" mode="inline"
items={items} items={items}

336
app/app/(admin)/components/users-table.tsx
View File

@ -1,6 +1,12 @@
"use client"; "use client";
import React, { useRef, useState } from "react"; import React, {
Dispatch,
SetStateAction,
useEffect,
useRef,
useState,
} from "react";
import { User } from "@prisma/client"; import { User } from "@prisma/client";
import { Space, Table, Tag, Input, Button } from "antd"; import { Space, Table, Tag, Input, Button } from "antd";
import { SearchOutlined } from "@ant-design/icons"; import { SearchOutlined } from "@ant-design/icons";
@ -9,145 +15,194 @@ import type { GetRef, TableColumnsType, TableColumnType } from "antd";
import Highlighter from "react-highlight-words"; import Highlighter from "react-highlight-words";
// 后期考虑删除该依赖 // 后期考虑删除该依赖
import type { SearchProps } from "antd/es/input/Search";
const { Search } = Input;
import { getCurrentTime } from "@/app/utils/custom"; import { getCurrentTime } from "@/app/utils/custom";
interface UserInterface { interface UserInterface {
users: User[]; 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 DataIndex = keyof User;
type InputRef = GetRef<typeof Input>; 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 [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]}
onChange={(e) =>
setSelectedKeys(e.target.value ? [e.target.value] : [])
}
onPressEnter={() =>
handleSearch(selectedKeys as string[], confirm, dataIndex)
}
style={{ marginBottom: 8, display: "block" }}
/> />
<Space> );
<Button }
type="primary"
onClick={() => function UsersTable({ users, setUsers, loading }: UserInterface) {
handleSearch(selectedKeys as string[], confirm, dataIndex) // const [searchText, setSearchText] = useState("");
} // const [searchedColumn, setSearchedColumn] = useState("");
icon={<SearchOutlined />} // const searchInput = useRef<InputRef>(null);
size="small" // const handleSearch = (
style={{ width: 90 }} // selectedKeys: string[],
> // confirm: FilterDropdownProps["confirm"],
Search // dataIndex: DataIndex,
</Button> // ) => {
<Button // confirm();
onClick={() => clearFilters && handleReset(clearFilters)} // setSearchText(selectedKeys[0]);
size="small" // setSearchedColumn(dataIndex);
style={{ width: 90 }} // };
>
Reset // const handleReset = (clearFilters: () => void) => {
</Button> // clearFilters();
<Button // setSearchText("");
type="link" // };
size="small"
onClick={() => { // const getColumnSearchProps = (
confirm({ closeDropdown: false }); // dataIndex: DataIndex,
setSearchText((selectedKeys as string[])[0]); // ): TableColumnType<User> => ({
setSearchedColumn(dataIndex); // filterDropdown: ({
}} // setSelectedKeys,
> // selectedKeys,
Filter // confirm,
</Button> // clearFilters,
<Button // close,
type="link" // }) => (
size="small" // <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
onClick={() => { // <Input
close(); // ref={searchInput}
}} // placeholder={`Search ${dataIndex}`}
> // value={selectedKeys[0]}
close // onChange={(e) =>
</Button> // setSelectedKeys(e.target.value ? [e.target.value] : [])
</Space> // }
</div> // onPressEnter={() =>
), // handleSearch(selectedKeys as string[], confirm, dataIndex)
filterIcon: (filtered: boolean) => ( // }
<SearchOutlined style={{ color: filtered ? "#1677ff" : undefined }} /> // style={{ marginBottom: 8, display: "block" }}
), // />
onFilter: (value, record: User) => { // <Space>
let result = record?.[dataIndex]; // <Button
if (result) { // type="primary"
return result // onClick={() =>
.toString() // handleSearch(selectedKeys as string[], confirm, dataIndex)
.toLowerCase() // }
.includes((value as string).toLowerCase()); // icon={<SearchOutlined />}
} // size="small"
return false; // style={{ width: 90 }}
}, // >
onFilterDropdownOpenChange: (visible) => { // Search
if (visible) { // </Button>
// @ts-ignore // <Button
setTimeout(() => searchInput.current?.select(), 100); // onClick={() => clearFilters && handleReset(clearFilters)}
} // size="small"
}, // style={{ width: 90 }}
render: (text) => // >
searchedColumn === dataIndex ? ( // Reset
// @ts-ignore // </Button>
<Highlighter // <Button
highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }} // type="link"
searchWords={[searchText]} // size="small"
autoEscape // onClick={() => {
textToHighlight={text ? text.toString() : ""} // confirm({ closeDropdown: false });
/> // setSearchText((selectedKeys as string[])[0]);
) : ( // setSearchedColumn(dataIndex);
text // }}
), // >
}); // Filter
// </Button>
// <Button
// type="link"
// size="small"
// onClick={() => {
// close();
// }}
// >
// close
// </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> = [ const columns: TableColumnsType<User> = [
{ title: "Name", dataIndex: "name", ...getColumnSearchProps("name") }, { title: "Name", dataIndex: "name" },
{ {
title: "UserName", title: "UserName",
dataIndex: "username", dataIndex: "username",
...getColumnSearchProps("username"),
}, },
{ title: "Email", dataIndex: "email", ...getColumnSearchProps("email") }, { title: "Email", dataIndex: "email" },
{ {
title: "createdAt", title: "createdAt",
dataIndex: "createdAt", dataIndex: "createdAt",
render: (value) => getCurrentTime(value), render: (value) => getCurrentTime(new Date(value)),
sorter: (a, b) => { sorter: (a, b) => {
if (a.createdAt < b.createdAt) return 1; if (a.createdAt < b.createdAt) return 1;
return -1; return -1;
@ -156,11 +211,52 @@ function UsersTable({ users }: UserInterface) {
{ {
title: "updatedAt", title: "updatedAt",
dataIndex: "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;

28
app/styles/globals.scss
View File

@ -219,20 +219,20 @@ input[type="range"]::-ms-thumb:hover {
@include thumbHover(); @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 { div.math {
overflow-x: auto; overflow-x: auto;