xinyin025/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-10-01 23:56: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 prisma from "@/lib/prisma";
import { User } from "@prisma/client";
import UsersTable from "../../components/users-table";
import UsersTablePart from "../../components/users-table";
async function getData() {
return await prisma.user.findMany({
orderBy: {
createdAt: "desc",
},
});
}
// async function getData() {
// return await prisma.user.findMany({
// orderBy: {
// 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>
</>
);

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

@ -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(() => {
// 如果按钮和路径不相等，那其实应该跳转到按钮的网址
if (current != pathname) {
router.push(current);
}
}, [current, pathname, router]);
// useEffect(() => {
// // 如果按钮和路径不相等，那其实应该跳转到按钮的网址
// if (current != pathname) {
// router.push(current);
// }
// }, [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}

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

@ -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) {
// const data = {}
// console.log('[data]', users)
function UserTableSearchInput({ users, setUsers, setLoading }: UserInterface) {
const [searchText, setSearchText] = useState("");
const [searchedColumn, setSearchedColumn] = useState("");
const searchInput = useRef<InputRef>(null);
const handleSearch = (
selectedKeys: string[],
confirm: FilterDropdownProps["confirm"],
dataIndex: DataIndex,
) => {
confirm();
setSearchText(selectedKeys[0]);
setSearchedColumn(dataIndex);
// 这里直接搜索，并获取数据不传递搜索的值给表格了。
const onSearch: SearchProps["onSearch"] = (value, _e, info) => {
setSearchText(value);
};
const handleReset = (clearFilters: () => void) => {
clearFilters();
setSearchText("");
};
useEffect(() => {
setLoading(true);
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 = (
dataIndex: DataIndex,
): TableColumnType<User> => ({
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
clearFilters,
close,
}) => (
<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={() =>
handleSearch(selectedKeys as string[], confirm, dataIndex)
}
icon={<SearchOutlined />}
size="small"
style={{ width: 90 }}
>
Search
</Button>
<Button
onClick={() => clearFilters && handleReset(clearFilters)}
size="small"
style={{ width: 90 }}
>
Reset
</Button>
<Button
type="link"
size="small"
onClick={() => {
confirm({ closeDropdown: false });
setSearchText((selectedKeys as string[])[0]);
setSearchedColumn(dataIndex);
}}
>
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
),
});
fetchUsers();
console.log(users, "users1");
}, [searchText]);
return (
<Search
placeholder="input search text"
onSearch={onSearch}
enterButton
style={{ width: 304 }}
/>
);
}
function UsersTable({ users, setUsers, loading }: UserInterface) {
// const [searchText, setSearchText] = useState("");
// const [searchedColumn, setSearchedColumn] = useState("");
// const searchInput = useRef<InputRef>(null);
// const handleSearch = (
// selectedKeys: string[],
// confirm: FilterDropdownProps["confirm"],
// dataIndex: DataIndex,
// ) => {
// confirm();
// setSearchText(selectedKeys[0]);
// setSearchedColumn(dataIndex);
// };
// const handleReset = (clearFilters: () => void) => {
// clearFilters();
// setSearchText("");
// };
// const getColumnSearchProps = (
// dataIndex: DataIndex,
// ): TableColumnType<User> => ({
// filterDropdown: ({
// setSelectedKeys,
// selectedKeys,
// confirm,
// clearFilters,
// close,
// }) => (
// <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={() =>
// handleSearch(selectedKeys as string[], confirm, dataIndex)
// }
// icon={<SearchOutlined />}
// size="small"
// style={{ width: 90 }}
// >
// Search
// </Button>
// <Button
// onClick={() => clearFilters && handleReset(clearFilters)}
// size="small"
// style={{ width: 90 }}
// >
// Reset
// </Button>
// <Button
// type="link"
// size="small"
// onClick={() => {
// confirm({ closeDropdown: false });
// setSearchText((selectedKeys as string[])[0]);
// setSearchedColumn(dataIndex);
// }}
// >
// 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> = [
{ 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;

28
app/styles/globals.scss
View File

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