9
bun.lock
9
bun.lock
@@ -8,6 +8,7 @@
|
|||||||
"@hookform/resolvers": "^4.1.3",
|
"@hookform/resolvers": "^4.1.3",
|
||||||
"@radix-ui/react-checkbox": "^1.3.3",
|
"@radix-ui/react-checkbox": "^1.3.3",
|
||||||
"@radix-ui/react-label": "^2.1.8",
|
"@radix-ui/react-label": "^2.1.8",
|
||||||
|
"@radix-ui/react-scroll-area": "^1.2.10",
|
||||||
"@radix-ui/react-separator": "^1.1.8",
|
"@radix-ui/react-separator": "^1.1.8",
|
||||||
"@radix-ui/react-slot": "^1.2.4",
|
"@radix-ui/react-slot": "^1.2.4",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
@@ -147,6 +148,8 @@
|
|||||||
|
|
||||||
"@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@16.1.1", "https://registry.npmmirror.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.1.tgz", { "os": "win32", "cpu": "x64" }, "sha512-Ncwbw2WJ57Al5OX0k4chM68DKhEPlrXBaSXDCi2kPi5f4d8b3ejr3RRJGfKBLrn2YJL5ezNS7w2TZLHSti8CMw=="],
|
"@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@16.1.1", "https://registry.npmmirror.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.1.tgz", { "os": "win32", "cpu": "x64" }, "sha512-Ncwbw2WJ57Al5OX0k4chM68DKhEPlrXBaSXDCi2kPi5f4d8b3ejr3RRJGfKBLrn2YJL5ezNS7w2TZLHSti8CMw=="],
|
||||||
|
|
||||||
|
"@radix-ui/number": ["@radix-ui/number@1.1.1", "https://registry.npmmirror.com/@radix-ui/number/-/number-1.1.1.tgz", {}, "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="],
|
||||||
|
|
||||||
"@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "https://registry.npmmirror.com/@radix-ui/primitive/-/primitive-1.1.3.tgz", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],
|
"@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "https://registry.npmmirror.com/@radix-ui/primitive/-/primitive-1.1.3.tgz", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],
|
||||||
|
|
||||||
"@radix-ui/react-checkbox": ["@radix-ui/react-checkbox@1.3.3", "https://registry.npmmirror.com/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw=="],
|
"@radix-ui/react-checkbox": ["@radix-ui/react-checkbox@1.3.3", "https://registry.npmmirror.com/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw=="],
|
||||||
@@ -155,16 +158,22 @@
|
|||||||
|
|
||||||
"@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "https://registry.npmmirror.com/@radix-ui/react-context/-/react-context-1.1.2.tgz", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
|
"@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "https://registry.npmmirror.com/@radix-ui/react-context/-/react-context-1.1.2.tgz", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
|
||||||
|
|
||||||
|
"@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.1", "https://registry.npmmirror.com/@radix-ui/react-direction/-/react-direction-1.1.1.tgz", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw=="],
|
||||||
|
|
||||||
"@radix-ui/react-label": ["@radix-ui/react-label@2.1.8", "https://registry.npmmirror.com/@radix-ui/react-label/-/react-label-2.1.8.tgz", { "dependencies": { "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A=="],
|
"@radix-ui/react-label": ["@radix-ui/react-label@2.1.8", "https://registry.npmmirror.com/@radix-ui/react-label/-/react-label-2.1.8.tgz", { "dependencies": { "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A=="],
|
||||||
|
|
||||||
"@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.5", "https://registry.npmmirror.com/@radix-ui/react-presence/-/react-presence-1.1.5.tgz", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ=="],
|
"@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.5", "https://registry.npmmirror.com/@radix-ui/react-presence/-/react-presence-1.1.5.tgz", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ=="],
|
||||||
|
|
||||||
"@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "https://registry.npmmirror.com/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
|
"@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "https://registry.npmmirror.com/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
|
||||||
|
|
||||||
|
"@radix-ui/react-scroll-area": ["@radix-ui/react-scroll-area@1.2.10", "https://registry.npmmirror.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A=="],
|
||||||
|
|
||||||
"@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.8", "https://registry.npmmirror.com/@radix-ui/react-separator/-/react-separator-1.1.8.tgz", { "dependencies": { "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g=="],
|
"@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.8", "https://registry.npmmirror.com/@radix-ui/react-separator/-/react-separator-1.1.8.tgz", { "dependencies": { "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g=="],
|
||||||
|
|
||||||
"@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "https://registry.npmmirror.com/@radix-ui/react-slot/-/react-slot-1.2.4.tgz", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
|
"@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "https://registry.npmmirror.com/@radix-ui/react-slot/-/react-slot-1.2.4.tgz", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
|
||||||
|
|
||||||
|
"@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "https://registry.npmmirror.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
|
||||||
|
|
||||||
"@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.2", "https://registry.npmmirror.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz", { "dependencies": { "@radix-ui/react-use-effect-event": "0.0.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg=="],
|
"@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.2", "https://registry.npmmirror.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz", { "dependencies": { "@radix-ui/react-use-effect-event": "0.0.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg=="],
|
||||||
|
|
||||||
"@radix-ui/react-use-effect-event": ["@radix-ui/react-use-effect-event@0.0.2", "https://registry.npmmirror.com/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA=="],
|
"@radix-ui/react-use-effect-event": ["@radix-ui/react-use-effect-event@0.0.2", "https://registry.npmmirror.com/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA=="],
|
||||||
|
|||||||
@@ -11,6 +11,7 @@
|
|||||||
"@hookform/resolvers": "^4.1.3",
|
"@hookform/resolvers": "^4.1.3",
|
||||||
"@radix-ui/react-checkbox": "^1.3.3",
|
"@radix-ui/react-checkbox": "^1.3.3",
|
||||||
"@radix-ui/react-label": "^2.1.8",
|
"@radix-ui/react-label": "^2.1.8",
|
||||||
|
"@radix-ui/react-scroll-area": "^1.2.10",
|
||||||
"@radix-ui/react-separator": "^1.1.8",
|
"@radix-ui/react-separator": "^1.1.8",
|
||||||
"@radix-ui/react-slot": "^1.2.4",
|
"@radix-ui/react-slot": "^1.2.4",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
|
|||||||
@@ -3,8 +3,20 @@ import { cookies } from "next/headers"
|
|||||||
import type { ApiResponse } from "@/lib/api"
|
import type { ApiResponse } from "@/lib/api"
|
||||||
import { callByDevice } from "./base"
|
import { callByDevice } from "./base"
|
||||||
|
|
||||||
export async function login(params: LoginReq): Promise<ApiResponse> {
|
export type TokenResp = {
|
||||||
const resp = await callByDevice<LoginRes>("/api/auth/token", {
|
access_token: string
|
||||||
|
refresh_token: string
|
||||||
|
expires_in: number
|
||||||
|
token_type: string
|
||||||
|
scope?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function login(params: {
|
||||||
|
username: string
|
||||||
|
password: string
|
||||||
|
remember: boolean
|
||||||
|
}): Promise<ApiResponse> {
|
||||||
|
const resp = await callByDevice<TokenResp>("/api/auth/token", {
|
||||||
grant_type: "password",
|
grant_type: "password",
|
||||||
login_type: "password",
|
login_type: "password",
|
||||||
login_pool: "admin",
|
login_pool: "admin",
|
||||||
@@ -34,16 +46,49 @@ export async function login(params: LoginReq): Promise<ApiResponse> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export type LoginReq = {
|
export async function refreshAuth() {
|
||||||
username: string
|
const cookie = await cookies()
|
||||||
password: string
|
|
||||||
remember: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export type LoginRes = {
|
const userRefresh = cookie.get("auth_refresh")?.value
|
||||||
access_token: string
|
if (!userRefresh) {
|
||||||
refresh_token: string
|
throw new Error("未授权访问")
|
||||||
expires_in: number
|
}
|
||||||
token_type: string
|
|
||||||
scope?: string
|
// 请求刷新访问令牌
|
||||||
|
const resp = await callByDevice<TokenResp>(`/api/auth/token`, {
|
||||||
|
grant_type: "refresh_token",
|
||||||
|
refresh_token: userRefresh,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 处理请求
|
||||||
|
if (!resp.success) {
|
||||||
|
if (resp.status === 401) {
|
||||||
|
cookie.delete("auth_refresh")
|
||||||
|
}
|
||||||
|
throw new Error("未授权访问")
|
||||||
|
}
|
||||||
|
|
||||||
|
// 解析响应
|
||||||
|
const data = resp.data
|
||||||
|
const nextAccessToken = data.access_token
|
||||||
|
const nextRefreshToken = data.refresh_token
|
||||||
|
const expiresIn = data.expires_in
|
||||||
|
|
||||||
|
// 保存令牌到 cookies
|
||||||
|
cookie.set("auth_token", nextAccessToken, {
|
||||||
|
httpOnly: true,
|
||||||
|
sameSite: "strict",
|
||||||
|
maxAge: Math.max(expiresIn, 0),
|
||||||
|
})
|
||||||
|
cookie.set("auth_refresh", nextRefreshToken, {
|
||||||
|
httpOnly: true,
|
||||||
|
sameSite: "strict",
|
||||||
|
maxAge: Number.MAX_SAFE_INTEGER,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 返回新的访问令牌
|
||||||
|
return {
|
||||||
|
access_token: nextAccessToken,
|
||||||
|
refresh_token: nextRefreshToken,
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,24 +1,40 @@
|
|||||||
'use client'
|
"use client"
|
||||||
import {useState, useRef, useEffect} from 'react'
|
import Image from "next/image"
|
||||||
import Image from 'next/image'
|
import Link from "next/link"
|
||||||
import Link from 'next/link'
|
import { usePathname } from "next/navigation"
|
||||||
import {usePathname} from 'next/navigation'
|
import { useEffect, useRef, useState } from "react"
|
||||||
|
|
||||||
export type AppbarProps = {}
|
export default function Appbar() {
|
||||||
|
|
||||||
export default function Appbar(props: AppbarProps) {
|
|
||||||
const [currentUser] = useState({
|
const [currentUser] = useState({
|
||||||
name: '张三',
|
name: "张三",
|
||||||
avatar: '/avatar.png',
|
avatar: "/avatar.png",
|
||||||
role: '管理员',
|
role: "管理员",
|
||||||
})
|
})
|
||||||
|
|
||||||
const [showDropdown, setShowDropdown] = useState(false)
|
const [showDropdown, setShowDropdown] = useState(false)
|
||||||
const [showNotifications, setShowNotifications] = useState(false)
|
const [showNotifications, setShowNotifications] = useState(false)
|
||||||
const [notifications] = useState([
|
const [notifications] = useState([
|
||||||
{id: 1, title: '系统通知', content: '您有新的待审核内容', time: '10分钟前', read: false},
|
{
|
||||||
{id: 2, title: '安全提醒', content: '您的账号于昨天登录了新设备', time: '1小时前', read: true},
|
id: 1,
|
||||||
{id: 3, title: '系统更新', content: '系统将在今晚进行例行维护', time: '2小时前', read: true},
|
title: "系统通知",
|
||||||
|
content: "您有新的待审核内容",
|
||||||
|
time: "10分钟前",
|
||||||
|
read: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "安全提醒",
|
||||||
|
content: "您的账号于昨天登录了新设备",
|
||||||
|
time: "1小时前",
|
||||||
|
read: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "系统更新",
|
||||||
|
content: "系统将在今晚进行例行维护",
|
||||||
|
time: "2小时前",
|
||||||
|
read: true,
|
||||||
|
},
|
||||||
])
|
])
|
||||||
|
|
||||||
const pathname = usePathname()
|
const pathname = usePathname()
|
||||||
@@ -28,28 +44,34 @@ export default function Appbar(props: AppbarProps) {
|
|||||||
// 处理点击外部关闭下拉菜单
|
// 处理点击外部关闭下拉菜单
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
function handleClickOutside(event: MouseEvent) {
|
function handleClickOutside(event: MouseEvent) {
|
||||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
if (
|
||||||
|
dropdownRef.current &&
|
||||||
|
!dropdownRef.current.contains(event.target as Node)
|
||||||
|
) {
|
||||||
setShowDropdown(false)
|
setShowDropdown(false)
|
||||||
}
|
}
|
||||||
if (notificationRef.current && !notificationRef.current.contains(event.target as Node)) {
|
if (
|
||||||
|
notificationRef.current &&
|
||||||
|
!notificationRef.current.contains(event.target as Node)
|
||||||
|
) {
|
||||||
setShowNotifications(false)
|
setShowNotifications(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('mousedown', handleClickOutside)
|
document.addEventListener("mousedown", handleClickOutside)
|
||||||
return () => document.removeEventListener('mousedown', handleClickOutside)
|
return () => document.removeEventListener("mousedown", handleClickOutside)
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
// 根据路径生成面包屑
|
// 根据路径生成面包屑
|
||||||
const generateBreadcrumbs = () => {
|
const generateBreadcrumbs = () => {
|
||||||
const paths = pathname.split('/').filter(Boolean)
|
const paths = pathname.split("/").filter(Boolean)
|
||||||
|
|
||||||
const breadcrumbs = [
|
const breadcrumbs = [
|
||||||
{path: '/', label: '首页'},
|
{ path: "/", label: "首页" },
|
||||||
...paths.map((path, index) => {
|
...paths.map((path, index) => {
|
||||||
const url = `/${paths.slice(0, index + 1).join('/')}`
|
const url = `/${paths.slice(0, index + 1).join("/")}`
|
||||||
const label = getBreadcrumbLabel(path)
|
const label = getBreadcrumbLabel(path)
|
||||||
return {path: url, label}
|
return { path: url, label }
|
||||||
}),
|
}),
|
||||||
]
|
]
|
||||||
|
|
||||||
@@ -58,14 +80,14 @@ export default function Appbar(props: AppbarProps) {
|
|||||||
|
|
||||||
const getBreadcrumbLabel = (path: string) => {
|
const getBreadcrumbLabel = (path: string) => {
|
||||||
const labels: Record<string, string> = {
|
const labels: Record<string, string> = {
|
||||||
'dashboard': '控制台',
|
dashboard: "控制台",
|
||||||
'content': '内容管理',
|
content: "内容管理",
|
||||||
'articles': '文章管理',
|
articles: "文章管理",
|
||||||
'media': '媒体库',
|
media: "媒体库",
|
||||||
'users': '用户管理',
|
users: "用户管理",
|
||||||
'roles': '角色权限',
|
roles: "角色权限",
|
||||||
'settings': '系统设置',
|
settings: "系统设置",
|
||||||
'logs': '系统日志',
|
logs: "系统日志",
|
||||||
}
|
}
|
||||||
|
|
||||||
return labels[path] || path
|
return labels[path] || path
|
||||||
@@ -81,15 +103,26 @@ export default function Appbar(props: AppbarProps) {
|
|||||||
{breadcrumbs.map((crumb, index) => (
|
{breadcrumbs.map((crumb, index) => (
|
||||||
<div key={crumb.path} className="flex items-center">
|
<div key={crumb.path} className="flex items-center">
|
||||||
{index > 0 && (
|
{index > 0 && (
|
||||||
<svg className="mx-2 h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<svg
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7"/>
|
className="mx-2 h-4 w-4 text-gray-400"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
<Link
|
<Link
|
||||||
href={crumb.path}
|
href={crumb.path}
|
||||||
className={index === breadcrumbs.length - 1
|
className={
|
||||||
? 'text-gray-800 font-medium'
|
index === breadcrumbs.length - 1
|
||||||
: 'text-gray-500 hover:text-gray-700'
|
? "text-gray-800 font-medium"
|
||||||
|
: "text-gray-500 hover:text-gray-700"
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{crumb.label}
|
{crumb.label}
|
||||||
@@ -108,11 +141,17 @@ export default function Appbar(props: AppbarProps) {
|
|||||||
className="pl-10 pr-4 py-2 bg-gray-100 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-56"
|
className="pl-10 pr-4 py-2 bg-gray-100 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-56"
|
||||||
/>
|
/>
|
||||||
<svg
|
<svg
|
||||||
className="h-4 w-4 text-gray-400 absolute left-3 top-2.5" fill="none" viewBox="0 0 24 24"
|
className="h-4 w-4 text-gray-400 absolute left-3 top-2.5"
|
||||||
stroke="currentColor">
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
<path
|
<path
|
||||||
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
strokeLinecap="round"
|
||||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -123,15 +162,23 @@ export default function Appbar(props: AppbarProps) {
|
|||||||
className="relative p-2 rounded-full text-gray-600 hover:bg-gray-100 hover:text-gray-800 transition-colors"
|
className="relative p-2 rounded-full text-gray-600 hover:bg-gray-100 hover:text-gray-800 transition-colors"
|
||||||
aria-label="通知"
|
aria-label="通知"
|
||||||
>
|
>
|
||||||
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<svg
|
||||||
|
className="h-6 w-6"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
<path
|
<path
|
||||||
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
|
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
{unreadCount > 0 && (
|
{unreadCount > 0 && (
|
||||||
<span
|
<span className="absolute top-1 right-1 h-4 w-4 text-xs flex items-center justify-center rounded-full bg-red-500 text-white">
|
||||||
className="absolute top-1 right-1 h-4 w-4 text-xs flex items-center justify-center rounded-full bg-red-500 text-white">{unreadCount}</span>
|
{unreadCount}
|
||||||
|
</span>
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
@@ -147,25 +194,39 @@ export default function Appbar(props: AppbarProps) {
|
|||||||
|
|
||||||
<div className="max-h-72 overflow-y-auto">
|
<div className="max-h-72 overflow-y-auto">
|
||||||
{notifications.length > 0 ? (
|
{notifications.length > 0 ? (
|
||||||
notifications.map((notification) => (
|
notifications.map(notification => (
|
||||||
<div
|
<div
|
||||||
key={notification.id}
|
key={notification.id}
|
||||||
className={`px-4 py-3 border-b border-gray-100 hover:bg-gray-50 ${
|
className={`px-4 py-3 border-b border-gray-100 hover:bg-gray-50 ${
|
||||||
notification.read ? 'bg-white' : 'bg-blue-50'
|
notification.read ? "bg-white" : "bg-blue-50"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="flex justify-between items-start">
|
<div className="flex justify-between items-start">
|
||||||
<h4 className="text-sm font-medium text-gray-800">{notification.title}</h4>
|
<h4 className="text-sm font-medium text-gray-800">
|
||||||
<span className="text-xs text-gray-500">{notification.time}</span>
|
{notification.title}
|
||||||
|
</h4>
|
||||||
|
<span className="text-xs text-gray-500">
|
||||||
|
{notification.time}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-xs text-gray-600 mt-1">{notification.content}</p>
|
<p className="text-xs text-gray-600 mt-1">
|
||||||
|
{notification.content}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
) : (
|
) : (
|
||||||
<div className="py-8 px-4 text-center">
|
<div className="py-8 px-4 text-center">
|
||||||
<svg className="w-12 h-12 text-gray-300 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<svg
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1}
|
className="w-12 h-12 text-gray-300 mx-auto"
|
||||||
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={1}
|
||||||
|
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<p className="mt-2 text-sm text-gray-500">暂无通知</p>
|
<p className="mt-2 text-sm text-gray-500">暂无通知</p>
|
||||||
@@ -174,7 +235,10 @@ export default function Appbar(props: AppbarProps) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="border-t border-gray-100 p-2 text-center">
|
<div className="border-t border-gray-100 p-2 text-center">
|
||||||
<Link href="/notifications" className="text-xs text-blue-600 hover:text-blue-800">
|
<Link
|
||||||
|
href="/notifications"
|
||||||
|
className="text-xs text-blue-600 hover:text-blue-800"
|
||||||
|
>
|
||||||
查看全部通知
|
查看全部通知
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
@@ -192,27 +256,37 @@ export default function Appbar(props: AppbarProps) {
|
|||||||
className="flex items-center space-x-2 rounded-lg hover:bg-gray-100 p-2 transition-colors"
|
className="flex items-center space-x-2 rounded-lg hover:bg-gray-100 p-2 transition-colors"
|
||||||
aria-label="用户菜单"
|
aria-label="用户菜单"
|
||||||
>
|
>
|
||||||
<div
|
<div className="h-8 w-8 rounded-full bg-blue-100 text-blue-800 flex items-center justify-center overflow-hidden border-2 border-white shadow-sm">
|
||||||
className="h-8 w-8 rounded-full bg-blue-100 text-blue-800 flex items-center justify-center overflow-hidden border-2 border-white shadow-sm">
|
|
||||||
<Image
|
<Image
|
||||||
src={currentUser.avatar}
|
src={currentUser.avatar}
|
||||||
alt="用户头像"
|
alt="用户头像"
|
||||||
width={32}
|
width={32}
|
||||||
height={32}
|
height={32}
|
||||||
onError={(e) => {
|
onError={e => {
|
||||||
const target = e.target as HTMLImageElement
|
const target = e.target as HTMLImageElement
|
||||||
target.style.display = 'none'
|
target.style.display = "none"
|
||||||
target.parentElement!.innerHTML = currentUser.name.charAt(0)
|
target.parentElement!.innerHTML = currentUser.name.charAt(0)
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden md:block text-left">
|
<div className="hidden md:block text-left">
|
||||||
<p className="text-sm font-medium text-gray-800">{currentUser.name}</p>
|
<p className="text-sm font-medium text-gray-800">
|
||||||
|
{currentUser.name}
|
||||||
|
</p>
|
||||||
<p className="text-xs text-gray-500">{currentUser.role}</p>
|
<p className="text-xs text-gray-500">{currentUser.role}</p>
|
||||||
</div>
|
</div>
|
||||||
<svg
|
<svg
|
||||||
className="h-4 w-4 text-gray-400 hidden md:block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
className="h-4 w-4 text-gray-400 hidden md:block"
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7"/>
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M19 9l-7 7-7-7"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
@@ -225,44 +299,88 @@ export default function Appbar(props: AppbarProps) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="py-1">
|
<div className="py-1">
|
||||||
<Link href="/profile" className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
<Link
|
||||||
<svg className="mr-3 h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
href="/profile"
|
||||||
|
className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="mr-3 h-5 w-5 text-gray-500"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
<path
|
<path
|
||||||
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
strokeLinecap="round"
|
||||||
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
个人资料
|
个人资料
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="/settings/account"
|
href="/settings/account"
|
||||||
className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||||
<svg className="mr-3 h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
>
|
||||||
|
<svg
|
||||||
|
className="mr-3 h-5 w-5 text-gray-500"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
<path
|
<path
|
||||||
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
strokeLinecap="round"
|
||||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
||||||
|
/>
|
||||||
<path
|
<path
|
||||||
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
strokeLinecap="round"
|
||||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
账号设置
|
账号设置
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="/system/help" className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
href="/system/help"
|
||||||
<svg className="mr-3 h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="mr-3 h-5 w-5 text-gray-500"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
<path
|
<path
|
||||||
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
strokeLinecap="round"
|
||||||
d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
帮助中心
|
帮助中心
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="border-t border-gray-100 mt-1">
|
<div className="border-t border-gray-100 mt-1">
|
||||||
<Link href="/login" className="flex items-center px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
|
<Link
|
||||||
<svg className="mr-3 h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
href="/login"
|
||||||
|
className="flex items-center px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="mr-3 h-5 w-5 text-red-500"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
<path
|
<path
|
||||||
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
strokeLinecap="round"
|
||||||
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
退出登录
|
退出登录
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -1,191 +1,253 @@
|
|||||||
'use client'
|
"use client"
|
||||||
import {useState} from 'react'
|
import {
|
||||||
import Link from 'next/link'
|
Activity,
|
||||||
import {usePathname} from 'next/navigation'
|
BarChart3,
|
||||||
|
ChevronsLeft,
|
||||||
|
ChevronsRight,
|
||||||
|
ClipboardList,
|
||||||
|
Code,
|
||||||
|
Database,
|
||||||
|
DollarSign,
|
||||||
|
FileText,
|
||||||
|
Globe,
|
||||||
|
Home,
|
||||||
|
type LucideIcon,
|
||||||
|
Package,
|
||||||
|
Server,
|
||||||
|
Settings,
|
||||||
|
Shield,
|
||||||
|
Users,
|
||||||
|
} from "lucide-react"
|
||||||
|
import Link from "next/link"
|
||||||
|
import { usePathname } from "next/navigation"
|
||||||
|
import { createContext, type ReactNode, useContext, useState } from "react"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||||
|
import { Separator } from "@/components/ui/separator"
|
||||||
|
|
||||||
export type NavigationProps = {}
|
// Navigation Context
|
||||||
|
interface NavigationContextType {
|
||||||
// 菜单组接口
|
collapsed: boolean
|
||||||
interface MenuGroup {
|
pathname: string
|
||||||
title: string;
|
isActive: (path: string) => boolean
|
||||||
items: MenuItem[];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 菜单项接口
|
const NavigationContext = createContext<NavigationContextType | undefined>(
|
||||||
interface MenuItem {
|
undefined,
|
||||||
path: string;
|
)
|
||||||
icon: string;
|
|
||||||
label: string;
|
const useNavigation = () => {
|
||||||
|
const context = useContext(NavigationContext)
|
||||||
|
if (!context) {
|
||||||
|
throw new Error("Navigation components must be used within Navigation")
|
||||||
|
}
|
||||||
|
return context
|
||||||
}
|
}
|
||||||
|
|
||||||
// 定义菜单组
|
// NavigationGroup Component
|
||||||
const menuGroups: MenuGroup[] = [
|
interface NavigationGroupProps {
|
||||||
{
|
title: string
|
||||||
title: '概览',
|
children: ReactNode
|
||||||
items: [
|
}
|
||||||
{
|
|
||||||
path: '/',
|
|
||||||
icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
|
|
||||||
label: '首页',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/statistics',
|
|
||||||
icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z',
|
|
||||||
label: '数据统计',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'IP 资源',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
path: '/proxy/nodes',
|
|
||||||
icon: 'M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9',
|
|
||||||
label: '节点列表',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/proxy/pools',
|
|
||||||
icon: 'M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01',
|
|
||||||
label: 'IP池管理',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/proxy/sources',
|
|
||||||
icon: 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10',
|
|
||||||
label: '代理源管理',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '客户',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
path: '/clients',
|
|
||||||
icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z',
|
|
||||||
label: '客户管理',
|
|
||||||
},
|
|
||||||
{path: '/packages', icon: 'M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10', label: '套餐管理'},
|
|
||||||
{
|
|
||||||
path: '/orders',
|
|
||||||
icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2',
|
|
||||||
label: '订单管理',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '运营',
|
|
||||||
items: [
|
|
||||||
{path: '/api/management', icon: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4', label: 'API管理'},
|
|
||||||
{
|
|
||||||
path: '/traffic',
|
|
||||||
icon: 'M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
|
|
||||||
label: '流量监控',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/billing',
|
|
||||||
icon: 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
|
|
||||||
label: '计费系统',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '系统',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
path: '/settings',
|
|
||||||
icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z',
|
|
||||||
label: '系统设置',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/security',
|
|
||||||
icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
|
|
||||||
label: '安全管理',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/logs',
|
|
||||||
icon: 'M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
|
|
||||||
label: '系统日志',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
export default function Navigation(props: NavigationProps) {
|
function NavigationGroup({ title, children }: NavigationGroupProps) {
|
||||||
|
const { collapsed } = useNavigation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="px-3">
|
||||||
|
{!collapsed && (
|
||||||
|
<h3 className="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
)}
|
||||||
|
<ul className={`${collapsed ? "mt-0" : "mt-2"} space-y-1`}>{children}</ul>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// NavigationItem Component
|
||||||
|
interface NavigationItemProps {
|
||||||
|
href: string
|
||||||
|
icon: LucideIcon
|
||||||
|
label: string
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationItem({ href, icon: Icon, label }: NavigationItemProps) {
|
||||||
|
const { collapsed, isActive } = useNavigation()
|
||||||
|
const active = isActive(href)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
href={href}
|
||||||
|
className={`flex items-center px-3 py-2 rounded-md transition-colors ${
|
||||||
|
active
|
||||||
|
? "bg-blue-50 text-blue-700"
|
||||||
|
: "text-gray-700 hover:bg-gray-100"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
className={`h-5 w-5 ${active ? "text-blue-600" : "text-gray-500"}`}
|
||||||
|
/>
|
||||||
|
{!collapsed && (
|
||||||
|
<span className="ml-3 font-medium text-sm">{label}</span>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// NavigationSeparator Component
|
||||||
|
function NavigationSeparator() {
|
||||||
|
const { collapsed } = useNavigation()
|
||||||
|
|
||||||
|
if (collapsed) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="my-4">
|
||||||
|
<Separator />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Main Navigation Component
|
||||||
|
export default function Navigation() {
|
||||||
const [collapsed, setCollapsed] = useState(false)
|
const [collapsed, setCollapsed] = useState(false)
|
||||||
const pathname = usePathname()
|
const pathname = usePathname()
|
||||||
|
|
||||||
const isActive = (path: string) => {
|
const isActive = (path: string) => {
|
||||||
return path === '/'
|
return path === "/" ? pathname === path : pathname.startsWith(path)
|
||||||
? pathname === path
|
}
|
||||||
: pathname.startsWith(path)
|
|
||||||
|
const contextValue: NavigationContextType = {
|
||||||
|
collapsed,
|
||||||
|
pathname,
|
||||||
|
isActive,
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<aside
|
<NavigationContext.Provider value={contextValue}>
|
||||||
className={`bg-white border-r border-gray-200 transition-all duration-300 ease-in-out flex flex-col ${collapsed ? 'w-20' : 'w-64'}`}>
|
<aside
|
||||||
{/* Logo */}
|
className={`bg-white border-r border-gray-200 transition-all duration-300 ease-in-out flex flex-col ${
|
||||||
<div className="h-16 flex items-center px-5 border-b border-gray-200">
|
collapsed ? "w-20" : "w-64"
|
||||||
{!collapsed ? (
|
}`}
|
||||||
<span className="text-xl font-bold tracking-wide text-gray-800">管理系统</span>
|
>
|
||||||
) : (
|
{/* Logo */}
|
||||||
<span className="text-xl font-bold mx-auto text-gray-800">系</span>
|
<div className="h-16 flex items-center px-5 border-b border-gray-200">
|
||||||
)}
|
{!collapsed ? (
|
||||||
</div>
|
<span className="text-xl font-bold tracking-wide text-gray-800">
|
||||||
|
管理系统
|
||||||
{/* 导航菜单 */}
|
</span>
|
||||||
<nav className="flex-1 py-4 overflow-y-auto">
|
) : (
|
||||||
<div className="space-y-4">
|
<span className="text-xl font-bold mx-auto text-gray-800">系</span>
|
||||||
{menuGroups.map((group, groupIndex) => (
|
)}
|
||||||
<div key={groupIndex} className="px-3">
|
|
||||||
{!collapsed && (
|
|
||||||
<h3 className="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
|
||||||
{group.title}
|
|
||||||
</h3>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<ul className={`mt-${collapsed ? '0' : '2'} space-y-1`}>
|
|
||||||
{group.items.map((item) => (
|
|
||||||
<li key={item.path}>
|
|
||||||
<Link
|
|
||||||
href={item.path}
|
|
||||||
className={`flex items-center px-3 py-2 rounded-md transition-colors ${
|
|
||||||
isActive(item.path)
|
|
||||||
? 'bg-blue-50 text-blue-700'
|
|
||||||
: 'text-gray-700 hover:bg-gray-100'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
className={`h-5 w-5 ${isActive(item.path) ? 'text-blue-600' : 'text-gray-500'}`}
|
|
||||||
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={item.icon}/>
|
|
||||||
</svg>
|
|
||||||
{!collapsed && <span className="ml-3 font-medium text-sm">{item.label}</span>}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
{!collapsed && groupIndex < menuGroups.length - 1 && (
|
|
||||||
<div className="my-4 border-t border-gray-200"></div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
|
||||||
|
|
||||||
{/* 侧边栏底部按钮 */}
|
{/* Navigation Menu */}
|
||||||
<div className="p-4 border-t border-gray-200 mt-auto">
|
<ScrollArea className="flex-1 py-4">
|
||||||
<button
|
<nav className="space-y-4">
|
||||||
onClick={() => setCollapsed(!collapsed)}
|
{/* 概览 */}
|
||||||
className="flex items-center justify-center w-full p-2 text-gray-600 hover:bg-gray-100 rounded-md transition-colors"
|
<NavigationGroup title="概览">
|
||||||
>
|
<NavigationItem href="/" icon={Home} label="首页" />
|
||||||
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<NavigationItem
|
||||||
<path
|
href="/statistics"
|
||||||
strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
icon={BarChart3}
|
||||||
d={collapsed ? 'M13 5l7 7-7 7M5 5l7 7-7 7' : 'M11 19l-7-7 7-7m8 14l-7-7 7-7'}/>
|
label="数据统计"
|
||||||
</svg>
|
/>
|
||||||
{!collapsed && <span className="ml-2 text-sm">收起菜单</span>}
|
</NavigationGroup>
|
||||||
</button>
|
|
||||||
</div>
|
<NavigationSeparator />
|
||||||
</aside>
|
|
||||||
|
{/* IP 资源 */}
|
||||||
|
<NavigationGroup title="IP 资源">
|
||||||
|
<NavigationItem
|
||||||
|
href="/proxy/nodes"
|
||||||
|
icon={Globe}
|
||||||
|
label="节点列表"
|
||||||
|
/>
|
||||||
|
<NavigationItem
|
||||||
|
href="/proxy/pools"
|
||||||
|
icon={Server}
|
||||||
|
label="IP池管理"
|
||||||
|
/>
|
||||||
|
<NavigationItem
|
||||||
|
href="/proxy/sources"
|
||||||
|
icon={Database}
|
||||||
|
label="代理源管理"
|
||||||
|
/>
|
||||||
|
</NavigationGroup>
|
||||||
|
|
||||||
|
<NavigationSeparator />
|
||||||
|
|
||||||
|
{/* 客户 */}
|
||||||
|
<NavigationGroup title="客户">
|
||||||
|
<NavigationItem href="/clients" icon={Users} label="客户管理" />
|
||||||
|
<NavigationItem
|
||||||
|
href="/packages"
|
||||||
|
icon={Package}
|
||||||
|
label="套餐管理"
|
||||||
|
/>
|
||||||
|
<NavigationItem
|
||||||
|
href="/orders"
|
||||||
|
icon={ClipboardList}
|
||||||
|
label="订单管理"
|
||||||
|
/>
|
||||||
|
</NavigationGroup>
|
||||||
|
|
||||||
|
<NavigationSeparator />
|
||||||
|
|
||||||
|
{/* 运营 */}
|
||||||
|
<NavigationGroup title="运营">
|
||||||
|
<NavigationItem
|
||||||
|
href="/api/management"
|
||||||
|
icon={Code}
|
||||||
|
label="API管理"
|
||||||
|
/>
|
||||||
|
<NavigationItem
|
||||||
|
href="/traffic"
|
||||||
|
icon={Activity}
|
||||||
|
label="流量监控"
|
||||||
|
/>
|
||||||
|
<NavigationItem
|
||||||
|
href="/billing"
|
||||||
|
icon={DollarSign}
|
||||||
|
label="计费系统"
|
||||||
|
/>
|
||||||
|
</NavigationGroup>
|
||||||
|
|
||||||
|
<NavigationSeparator />
|
||||||
|
|
||||||
|
{/* 系统 */}
|
||||||
|
<NavigationGroup title="系统">
|
||||||
|
<NavigationItem
|
||||||
|
href="/settings"
|
||||||
|
icon={Settings}
|
||||||
|
label="系统设置"
|
||||||
|
/>
|
||||||
|
<NavigationItem href="/security" icon={Shield} label="安全管理" />
|
||||||
|
<NavigationItem href="/logs" icon={FileText} label="系统日志" />
|
||||||
|
</NavigationGroup>
|
||||||
|
</nav>
|
||||||
|
</ScrollArea>
|
||||||
|
|
||||||
|
{/* Toggle Button */}
|
||||||
|
<div className="p-4 border-t border-gray-200 mt-auto">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => setCollapsed(!collapsed)}
|
||||||
|
className="w-full justify-center text-gray-600 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
{collapsed ? (
|
||||||
|
<ChevronsRight className="h-5 w-5" />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<ChevronsLeft className="h-5 w-5" />
|
||||||
|
<span className="ml-2 text-sm">收起菜单</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</NavigationContext.Provider>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
58
src/components/ui/scroll-area.tsx
Normal file
58
src/components/ui/scroll-area.tsx
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function ScrollArea({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<ScrollAreaPrimitive.Root
|
||||||
|
data-slot="scroll-area"
|
||||||
|
className={cn("relative", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ScrollAreaPrimitive.Viewport
|
||||||
|
data-slot="scroll-area-viewport"
|
||||||
|
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</ScrollAreaPrimitive.Viewport>
|
||||||
|
<ScrollBar />
|
||||||
|
<ScrollAreaPrimitive.Corner />
|
||||||
|
</ScrollAreaPrimitive.Root>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function ScrollBar({
|
||||||
|
className,
|
||||||
|
orientation = "vertical",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
|
||||||
|
return (
|
||||||
|
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||||
|
data-slot="scroll-area-scrollbar"
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
"flex touch-none p-px transition-colors select-none",
|
||||||
|
orientation === "vertical" &&
|
||||||
|
"h-full w-2.5 border-l border-l-transparent",
|
||||||
|
orientation === "horizontal" &&
|
||||||
|
"h-2.5 flex-col border-t border-t-transparent",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ScrollAreaPrimitive.ScrollAreaThumb
|
||||||
|
data-slot="scroll-area-thumb"
|
||||||
|
className="bg-border relative flex-1 rounded-full"
|
||||||
|
/>
|
||||||
|
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { ScrollArea, ScrollBar }
|
||||||
44
src/proxy.ts
Normal file
44
src/proxy.ts
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import { type NextRequest, NextResponse, type ProxyConfig } from "next/server"
|
||||||
|
import { refreshAuth } from "@/actions/auth"
|
||||||
|
|
||||||
|
export const config: ProxyConfig = {
|
||||||
|
matcher: [
|
||||||
|
"/((?!api|_next/static|_next/image|.well-known|sw.js|favicon.ico|sitemap.xml|robots.txt).*(?<!.svg|.webp|.jpg)$)",
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function proxy(request: NextRequest) {
|
||||||
|
console.log(
|
||||||
|
"👀 middleware triggered",
|
||||||
|
request.method,
|
||||||
|
request.nextUrl.pathname,
|
||||||
|
)
|
||||||
|
|
||||||
|
// 记录请求页面
|
||||||
|
request.headers.set("x-pathname", request.nextUrl.pathname)
|
||||||
|
|
||||||
|
// 刷新访问令牌
|
||||||
|
try {
|
||||||
|
const accessToken = request.cookies.get("auth_token")
|
||||||
|
const refreshToken = request.cookies.get("auth_refresh")
|
||||||
|
if (!accessToken && !!refreshToken) {
|
||||||
|
console.log("💡 refresh token")
|
||||||
|
const token = await refreshAuth()
|
||||||
|
request.cookies.set("auth_token", token.access_token)
|
||||||
|
request.cookies.set("auth_refresh", token.refresh_token)
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.log("刷新访问令牌失败", request.url, (e as Error).message)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证访问令牌
|
||||||
|
const hasToken = !!request.cookies.get("auth_token")
|
||||||
|
const isToAdmin = request.nextUrl.pathname.startsWith("/admin")
|
||||||
|
if (!hasToken && isToAdmin) {
|
||||||
|
return NextResponse.redirect(
|
||||||
|
`${request.nextUrl.origin}/login?redirect=${request.nextUrl.pathname}`,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return NextResponse.next({ request })
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user