完善用户认领功能

Signed-off-by: luorijun <luorijun@outlook.com>

src/actions/user.ts

@@ -5,3 +5,9 @@ import { callByUser } from "./base"
 export async function getPageUsers(params: { page: number; size: number }) {
   return callByUser<PageRecord<User>>("/api/admin/user/page", params)
 }
+
+export async function bindAdmin(params: { id: number }) {
+  return callByUser("/api/admin/user/bind", {
+    user_id: params.id,
+  })
+}

src/app/(root)/(dashboard)/page.tsx

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link"
 
 export type DashboardPageProps = {}
 
@@ -9,16 +9,18 @@ export default function DashboardPage(props: DashboardPageProps) {
       <div className="bg-white border border-gray-200 rounded-md">
         <div className="flex items-center justify-between p-5">
           <div>
-            <h1 className="text-xl font-bold text-gray-800">IP代理管理控制台</h1>
-            <p className="text-gray-500 mt-1">上次更新: {new Date().toLocaleString('zh-CN')}</p>
+            <h1 className="text-xl font-bold text-gray-800">
+              IP代理管理控制台
+            </h1>
+            <p className="text-gray-500 mt-1">
+              上次更新: {new Date().toLocaleString("zh-CN")}
+            </p>
           </div>
           <div className="flex space-x-3">
-            <button
-              className="px-4 py-2 bg-gray-100 text-gray-700 border border-gray-200 rounded-md hover:bg-gray-200 transition-colors text-sm font-medium">
+            <button className="px-4 py-2 bg-gray-100 text-gray-700 border border-gray-200 rounded-md hover:bg-gray-200 transition-colors text-sm font-medium">
               查看使用报告
             </button>
-            <button
-              className="px-4 py-2 bg-blue-600 text-white border border-blue-700 rounded-md hover:bg-blue-700 transition-colors text-sm font-medium">
+            <button className="px-4 py-2 bg-blue-600 text-white border border-blue-700 rounded-md hover:bg-blue-700 transition-colors text-sm font-medium">
               添加新代理
             </button>
           </div>
@@ -37,8 +39,18 @@ export default function DashboardPage(props: DashboardPageProps) {
               change="+12.5%"
               isIncrease={true}
               icon={
-                <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M12 5l7 7-7 7"/>
+                <svg
+                  className="h-6 w-6"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M5 12h14M12 5l7 7-7 7"
+                  />
                 </svg>
               }
             />
@@ -48,9 +60,18 @@ export default function DashboardPage(props: DashboardPageProps) {
               change="+8.2%"
               isIncrease={true}
               icon={
-                <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
-                    strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
+                  />
                 </svg>
               }
             />
@@ -60,10 +81,18 @@ export default function DashboardPage(props: DashboardPageProps) {
               change="+2.4%"
               isIncrease={true}
               icon={
-                <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
-                    strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
-                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
               }
             />
@@ -73,10 +102,18 @@ export default function DashboardPage(props: DashboardPageProps) {
               change="-12.3%"
               isIncrease={true}
               icon={
-                <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
-                    strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
-                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
               }
             />
@@ -119,14 +156,18 @@ export default function DashboardPage(props: DashboardPageProps) {
             <div className="p-5 border-b border-gray-200">
               <div className="flex justify-between items-center">
                 <h2 className="font-bold text-gray-800">活跃代理IP</h2>
-                <Link href="/proxies" className="text-blue-600 text-sm hover:underline">查看全部</Link>
+                <Link
+                  href="/proxies"
+                  className="text-blue-600 text-sm hover:underline"
+                >
+                  查看全部
+                </Link>
               </div>
             </div>
             <div className="overflow-x-auto">
               <table className="w-full">
                 <thead>
-                  <tr
-                    className="bg-gray-50 text-left text-xs text-gray-500 uppercase tracking-wider border-b border-gray-200">
+                  <tr className="bg-gray-50 text-left text-xs text-gray-500 uppercase tracking-wider border-b border-gray-200">
                     <th className="px-5 py-3">IP地址</th>
                     <th className="px-5 py-3">位置</th>
                     <th className="px-5 py-3">状态</th>
@@ -136,12 +177,18 @@ export default function DashboardPage(props: DashboardPageProps) {
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-gray-200">
-                  {[1, 2, 3, 4, 5].map((item) => (
+                  {[1, 2, 3, 4, 5].map(item => (
                     <ContentRow
                       key={item}
                       ip={`192.168.${item}.${item * 10}`}
-                      location={item % 2 === 0 ? '中国' : '美国'}
-                      status={item % 3 === 0 ? 'error' : item % 2 === 0 ? 'warning' : 'active'}
+                      location={item % 2 === 0 ? "中国" : "美国"}
+                      status={
+                        item % 3 === 0
+                          ? "error"
+                          : item % 2 === 0
+                            ? "warning"
+                            : "active"
+                      }
                       requests={Math.floor(Math.random() * 10000)}
                       successRate={`${95 + Math.floor(Math.random() * 5)}%`}
                     />
@@ -150,8 +197,12 @@ export default function DashboardPage(props: DashboardPageProps) {
               </table>
             </div>
             <div className="p-3 bg-gray-50 border-t border-gray-200 flex justify-end">
-              <button className="px-3 py-1 bg-white border border-gray-200 rounded-md text-sm mr-2">上一页</button>
-              <button className="px-3 py-1 bg-blue-600 text-white rounded-md text-sm">下一页</button>
+              <button className="px-3 py-1 bg-white border border-gray-200 rounded-md text-sm mr-2">
+                上一页
+              </button>
+              <button className="px-3 py-1 bg-blue-600 text-white rounded-md text-sm">
+                下一页
+              </button>
             </div>
           </div>
         </div>
@@ -191,7 +242,9 @@ export default function DashboardPage(props: DashboardPageProps) {
             <div className="p-5 border-b border-gray-200">
               <div className="flex justify-between items-center">
                 <h2 className="font-bold text-gray-800">告警通知</h2>
-                <span className="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">3 个新告警</span>
+                <span className="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">
+                  3 个新告警
+                </span>
               </div>
             </div>
             <div className="p-3 space-y-3">
@@ -215,8 +268,7 @@ export default function DashboardPage(props: DashboardPageProps) {
               />
             </div>
             <div className="p-4 border-t border-gray-200">
-              <button
-                className="w-full py-2 bg-gray-100 text-gray-600 border border-gray-200 rounded-md text-sm hover:bg-gray-200 transition-colors">
+              <button className="w-full py-2 bg-gray-100 text-gray-600 border border-gray-200 rounded-md text-sm hover:bg-gray-200 transition-colors">
                 查看全部告警
               </button>
             </div>
@@ -227,35 +279,22 @@ export default function DashboardPage(props: DashboardPageProps) {
             <div className="p-5 border-b border-gray-200">
               <div className="flex justify-between items-center">
                 <h2 className="font-bold text-gray-800">系统状态</h2>
-                <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full font-medium">运行正常</span>
+                <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full font-medium">
+                  运行正常
+                </span>
               </div>
             </div>
             <div className="p-3 space-y-3">
-              <StatusBar
-                title="代理服务器负载"
-                value={28}
-                status="normal"
-              />
-              <StatusBar
-                title="带宽使用率"
-                value={65}
-                status="normal"
-              />
-              <StatusBar
-                title="存储空间"
-                value={82}
-                status="warning"
-              />
-              <StatusBar
-                title="API请求队列"
-                value={45}
-                status="normal"
-              />
+              <StatusBar title="代理服务器负载" value={28} status="normal" />
+              <StatusBar title="带宽使用率" value={65} status="normal" />
+              <StatusBar title="存储空间" value={82} status="warning" />
+              <StatusBar title="API请求队列" value={45} status="normal" />
             </div>
             <div className="p-4 border-t border-gray-200">
               <Link
                 href="/system/status"
-                className="block w-full py-2 text-center bg-gray-100 text-gray-600 border border-gray-200 rounded-md text-sm hover:bg-gray-200 transition-colors">
+                className="block w-full py-2 text-center bg-gray-100 text-gray-600 border border-gray-200 rounded-md text-sm hover:bg-gray-200 transition-colors"
+              >
                 查看详细状态
               </Link>
             </div>
@@ -274,11 +313,11 @@ function DataCard({
   isIncrease,
   icon,
 }: {
-  title: string;
-  value: string;
-  change: string;
-  isIncrease: boolean;
-  icon: React.ReactNode;
+  title: string
+  value: string
+  change: string
+  isIncrease: boolean
+  icon: React.ReactNode
 }) {
   return (
     <div className="bg-white border border-gray-200 rounded-md p-5">
@@ -287,14 +326,17 @@ function DataCard({
           <h3 className="text-sm text-gray-500">{title}</h3>
           <p className="text-xl font-bold mt-1 text-gray-800">{value}</p>
           <div className="flex items-center mt-2">
-            <span className={`text-xs font-medium ${isIncrease ? 'text-green-600' : 'text-red-600'}`}>
+            <span
+              className={`text-xs font-medium ${isIncrease ? "text-green-600" : "text-red-600"}`}
+            >
               {change}
             </span>
             <span className="text-xs text-gray-400 ml-1">相比上周期</span>
           </div>
         </div>
         <div
-          className={`p-3 rounded-md ${isIncrease ? 'bg-blue-50 text-blue-600' : 'bg-orange-50 text-orange-500'} border ${isIncrease ? 'border-blue-100' : 'border-orange-100'}`}>
+          className={`p-3 rounded-md ${isIncrease ? "bg-blue-50 text-blue-600" : "bg-orange-50 text-orange-500"} border ${isIncrease ? "border-blue-100" : "border-orange-100"}`}
+        >
           {icon}
         </div>
       </div>
@@ -310,16 +352,22 @@ function ContentRow({
   requests,
   successRate,
 }: {
-  ip: string;
-  location: string;
-  status: 'active' | 'warning' | 'error';
-  requests: number;
-  successRate: string;
+  ip: string
+  location: string
+  status: "active" | "warning" | "error"
+  requests: number
+  successRate: string
 }) {
   const statusConfig = {
-    active: {color: 'bg-green-100 text-green-800 border-green-200', label: '在线'},
-    warning: {color: 'bg-yellow-100 text-yellow-800 border-yellow-200', label: '不稳定'},
-    error: {color: 'bg-red-100 text-red-800 border-red-200', label: '离线'},
+    active: {
+      color: "bg-green-100 text-green-800 border-green-200",
+      label: "在线",
+    },
+    warning: {
+      color: "bg-yellow-100 text-yellow-800 border-yellow-200",
+      label: "不稳定",
+    },
+    error: { color: "bg-red-100 text-red-800 border-red-200", label: "离线" },
   }
 
   return (
@@ -331,36 +379,67 @@ function ContentRow({
         <div className="text-sm text-gray-700">{location}</div>
       </td>
       <td className="px-5 py-4">
-        <span className={`px-2 py-1 text-xs rounded-md ${statusConfig[status].color} border`}>
+        <span
+          className={`px-2 py-1 text-xs rounded-md ${statusConfig[status].color} border`}
+        >
           {statusConfig[status].label}
         </span>
       </td>
       <td className="px-5 py-4 text-sm text-gray-700">
         {requests.toLocaleString()}
       </td>
-      <td className="px-5 py-4 text-sm text-gray-700">
-        {successRate}
-      </td>
+      <td className="px-5 py-4 text-sm text-gray-700">{successRate}</td>
       <td className="px-5 py-4">
         <div className="flex space-x-2">
           <button className="p-1 border border-gray-200 rounded-md hover:bg-gray-50">
-            <svg className="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+            <svg
+              className="h-4 w-4 text-gray-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
               <path
-                strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
-                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+              />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+              />
             </svg>
           </button>
           <button className="p-1 border border-gray-200 rounded-md hover:bg-gray-50">
-            <svg className="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg
+              className="h-4 w-4 text-gray-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
               <path
-                strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
-                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+              />
             </svg>
           </button>
           <button className="p-1 border border-red-200 rounded-md hover:bg-red-50">
-            <svg className="h-4 w-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12"/>
+            <svg
+              className="h-4 w-4 text-red-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
             </svg>
           </button>
         </div>
@@ -376,22 +455,24 @@ function AlertItem({
   time,
   message,
 }: {
-  title: string;
-  severity: 'high' | 'medium' | 'low';
-  time: string;
-  message: string;
+  title: string
+  severity: "high" | "medium" | "low"
+  time: string
+  message: string
 }) {
   const severityConfig = {
-    high: {color: 'bg-red-50 border-red-200', dot: 'bg-red-500'},
-    medium: {color: 'bg-yellow-50 border-yellow-200', dot: 'bg-yellow-500'},
-    low: {color: 'bg-blue-50 border-blue-200', dot: 'bg-blue-500'},
+    high: { color: "bg-red-50 border-red-200", dot: "bg-red-500" },
+    medium: { color: "bg-yellow-50 border-yellow-200", dot: "bg-yellow-500" },
+    low: { color: "bg-blue-50 border-blue-200", dot: "bg-blue-500" },
   }
 
   return (
     <div className={`p-3 rounded-md ${severityConfig[severity].color} border`}>
       <div className="flex justify-between items-start">
         <div className="flex items-center">
-          <span className={`h-2 w-2 rounded-full ${severityConfig[severity].dot} mr-2`}></span>
+          <span
+            className={`h-2 w-2 rounded-full ${severityConfig[severity].dot} mr-2`}
+          ></span>
           <span className="font-medium text-gray-800 text-sm">{title}</span>
         </div>
         <span className="text-xs text-gray-500">{time}</span>
@@ -407,14 +488,14 @@ function StatusBar({
   value,
   status,
 }: {
-  title: string;
-  value: number;
-  status: 'normal' | 'warning' | 'error';
+  title: string
+  value: number
+  status: "normal" | "warning" | "error"
 }) {
   const statusConfig = {
-    normal: {color: 'bg-green-500', bgColor: 'bg-green-100'},
-    warning: {color: 'bg-yellow-500', bgColor: 'bg-yellow-100'},
-    error: {color: 'bg-red-500', bgColor: 'bg-red-100'},
+    normal: { color: "bg-green-500", bgColor: "bg-green-100" },
+    warning: { color: "bg-yellow-500", bgColor: "bg-yellow-100" },
+    error: { color: "bg-red-500", bgColor: "bg-red-100" },
   }
 
   return (
@@ -423,10 +504,12 @@ function StatusBar({
         <span className="text-sm text-gray-700">{title}</span>
         <span className="text-sm font-medium">{value}%</span>
       </div>
-      <div className={`w-full h-2 ${statusConfig[status].bgColor} rounded-full`}>
+      <div
+        className={`w-full h-2 ${statusConfig[status].bgColor} rounded-full`}
+      >
         <div
           className={`h-2 ${statusConfig[status].color} rounded-full`}
-          style={{width: `${value}%`}}
+          style={{ width: `${value}%` }}
         ></div>
       </div>
     </div>

src/app/(root)/navigation.tsx

@@ -95,7 +95,7 @@ function NavItem({ href, icon: Icon, label }: NavItemProps) {
           : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
       }`}
     >
-      <Icon className={`h-5 w-5 ${collapsed ? "" : "flex-shrink-0"}`} />
+      <Icon className={`h-5 w-5 ${collapsed ? "" : "shrink-0"}`} />
       {!collapsed && <span className="ml-3 font-medium text-sm">{label}</span>}
     </Link>
   )
@@ -175,13 +175,13 @@ export default function Navigation() {
                 <NavItem href="/statistics" icon={BarChart3} label="数据统计" />
               </NavGroup>
 
-              <NavSeparator />
+              {/*<NavSeparator />*/}
 
               {/* IP 资源 */}
-              <NavGroup title="IP 资源">
+              {/*<NavGroup title="IP 资源">
                 <NavItem href="/proxy/nodes" icon={Globe} label="节点列表" />
                 <NavItem href="/proxy/pools" icon={Server} label="IP池管理" />
-              </NavGroup>
+              </NavGroup>*/}
 
               <NavSeparator />
 
@@ -205,9 +205,9 @@ export default function Navigation() {
 
               {/* 系统 */}
               <NavGroup title="系统">
-                <NavItem href="/settings" icon={Settings} label="系统设置" />
-                <NavItem href="/security" icon={Shield} label="安全管理" />
-                <NavItem href="/logs" icon={FileText} label="系统日志" />
+                {/*<NavItem href="/settings" icon={Settings} label="系统设置" />*/}
+                <NavItem href="/security" icon={Shield} label="管理员" />
+                {/*<NavItem href="/logs" icon={FileText} label="系统日志" />*/}
               </NavGroup>
             </nav>
           </ScrollArea>

src/app/(root)/user/page.tsx

@@ -1,13 +1,17 @@
 "use client"
 import { Suspense } from "react"
-import { getPageUsers } from "@/actions/user"
+import { bindAdmin, getPageUsers } from "@/actions/user"
 import { DataTable, useDataTable } from "@/components/data-table"
 import { Button } from "@/components/ui/button"
+import { useFetch } from "@/hooks/data"
 import type { User } from "@/models/user"
 
 export default function UserPage() {
   const table = useDataTable<User>((page, size) => getPageUsers({ page, size }))
-
+  const bind = useFetch((id: number) => bindAdmin({ id }), {
+    done: "用户已认领",
+    fail: "用户认领失败",
+  })
   return (
     <div>
       <Suspense>
@@ -27,10 +31,14 @@ export default function UserPage() {
             { header: "创建时间", accessorKey: "created_at" },
             {
               header: "操作",
-              cell: () => (
-                <div>
-                  <Button>认领</Button>
-                </div>
+              cell: ctx => (
+                <Button
+                  size={"sm"}
+                  onClick={() => bind(ctx.row.original.id)}
+                  disabled={ctx.row.original.admin_id !== null}
+                >
+                  {ctx.row.original.admin_id !== null ? "已认领" : "认领"}
+                </Button>
               ),
             },
           ]}

src/hooks/data.ts

@@ -1,5 +1,42 @@
-import { useState } from "react"
+import {
+  type Dispatch,
+  type SetStateAction,
+  useCallback,
+  useState,
+} from "react"
+import { toast } from "sonner"
+import type { ApiResponse } from "@/lib/api"
 
 export function useStatus() {
   return useState<"load" | "fail" | "done">("load")
 }
+
+export function useFetch<TArgs extends unknown[], TResult>(
+  fetchData: (...args: TArgs) => Promise<ApiResponse<TResult>>,
+  messages: {
+    done?: string
+    fail?: string
+  },
+  setStatus?: Dispatch<SetStateAction<"load" | "fail" | "done">>,
+) {
+  return useCallback(
+    async (...args: TArgs) => {
+      try {
+        setStatus?.("load")
+        const resp = await fetchData(...args)
+        if (!resp.success) {
+          throw new Error(resp.message)
+        }
+
+        setStatus?.("done")
+        toast.success(messages.done || "获取数据成功")
+      } catch (e) {
+        setStatus?.("fail")
+        toast.error(messages.fail || "获取数据失败", {
+          description: (e as Error).message || "未知错误",
+        })
+      }
+    },
+    [fetchData, setStatus, messages],
+  )
+}