超管后台 - 对接项目概览

SuperAdmin/app/dashboard/projects/[id]/edit/page.tsx

@@ -17,36 +17,34 @@ interface Device {
   memo: string
 }
 
-export default function EditProjectPage({ params }: { params: { id: string } }) {
-  const { id } = use(params)
+interface Project {
+  id: number
+  name: string
+  memo: string
+  companyId: number
+  createTime: string
+  account: string
+  phone: string | null
+  deviceCount: number
+  friendCount: number
+  userCount: number
+}
 
+export default function EditProjectPage({ params }: { params: { id: string } }) {
   const router = useRouter()
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [isLoading, setIsLoading] = useState(true)
-  const [projectName, setProjectName] = useState("")
-  const [account, setAccount] = useState("")
-  const [description, setDescription] = useState("")
-  const [devices, setDevices] = useState<Device[]>([])
-  const [phone, setPhone] = useState("")
-  const [nickname, setNickname] = useState("")
-  const [status, setStatus] = useState("1")
-  const [password, setPassword] = useState("")
-  const [confirmPassword, setConfirmPassword] = useState("")
+  const [project, setProject] = useState<Project | null>(null)
+  const { id } = use(params)
 
   useEffect(() => {
-    const fetchProjectDetail = async () => {
+    const fetchProject = async () => {
       try {
         const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/company/detail/${id}`)
         const data = await response.json()
 
         if (data.code === 200) {
-          setProjectName(data.data.name || "")
-          setAccount(data.data.account || "")
-          setDescription(data.data.memo || "")
-          setDevices(data.data.devices || [])
-          setPhone(data.data.phone || "")
-          setNickname(data.data.username || "")
-          setStatus(data.data.status.toString())
+          setProject(data.data)
         } else {
           toast.error(data.msg || "获取项目信息失败")
         }
@@ -57,7 +55,7 @@ export default function EditProjectPage({ params }: { params: { id: string } })
       }
     }
 
-    fetchProjectDetail()
+    fetchProject()
   }, [id])
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -77,11 +75,11 @@ export default function EditProjectPage({ params }: { params: { id: string } })
           "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          id: id,
-          name: projectName,
-          account,
-          memo: description,
-          phone,
+          id: parseInt(id),
+          name: project?.name,
+          account: project?.account,
+          memo: project?.memo,
+          phone: project?.phone,
           username: nickname,
           status: parseInt(status),
           ...(password && { password })
@@ -134,8 +132,8 @@ export default function EditProjectPage({ params }: { params: { id: string } })
               <Label htmlFor="projectName">项目名称</Label>
               <Input
                 id="projectName"
-                value={projectName}
-                onChange={(e) => setProjectName(e.target.value)}
+                value={project?.name || ""}
+                onChange={(e) => setProject({ ...project, name: e.target.value })}
                 placeholder="请输入项目名称"
                 required
               />
@@ -146,8 +144,8 @@ export default function EditProjectPage({ params }: { params: { id: string } })
                 <Label htmlFor="account">登录账号</Label>
                 <Input
                   id="account"
-                  value={account}
-                  onChange={(e) => setAccount(e.target.value)}
+                  value={project?.account || ""}
+                  onChange={(e) => setProject({ ...project, account: e.target.value })}
                   placeholder="请输入登录的账号"
                   required
                 />
@@ -157,8 +155,8 @@ export default function EditProjectPage({ params }: { params: { id: string } })
                 <Label htmlFor="nickname">昵称</Label>
                 <Input
                   id="nickname"
-                  value={nickname}
-                  onChange={(e) => setNickname(e.target.value)}
+                  value={project?.username || ""}
+                  onChange={(e) => setProject({ ...project, username: e.target.value })}
                   placeholder="用于账号登录后显示的用户名，可以填真实姓名"
                   required
                 />
@@ -169,8 +167,8 @@ export default function EditProjectPage({ params }: { params: { id: string } })
                 <Input
                   id="phone"
                   type="number"
-                  value={phone}
-                  onChange={(e) => setPhone(e.target.value)}
+                  value={project?.phone || ""}
+                  onChange={(e) => setProject({ ...project, phone: e.target.value as string })}
                   placeholder="手机号可用于登录"
                   required
                 />
@@ -180,8 +178,8 @@ export default function EditProjectPage({ params }: { params: { id: string } })
                 <Label htmlFor="status">状态</Label>
                 <select
                   id="status"
-                  value={status}
-                  onChange={(e) => setStatus(e.target.value)}
+                  value={project?.status.toString() || "1"}
+                  onChange={(e) => setProject({ ...project, status: parseInt(e.target.value) })}
                   className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                 >
                   <option value="1">启用</option>
@@ -215,7 +213,7 @@ export default function EditProjectPage({ params }: { params: { id: string } })
             <div className="space-y-2">
               <Label>关联设备</Label>
               <div className="space-y-3">
-                {devices.length > 0 && devices.map((device) => (
+                {project?.devices.length > 0 && project.devices.map((device) => (
                   <div key={device.id} className="flex items-center gap-2">
                     <Input
                       value={device.memo}
@@ -233,8 +231,8 @@ export default function EditProjectPage({ params }: { params: { id: string } })
               <Label htmlFor="description">项目介绍</Label>
               <Textarea
                 id="description"
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
+                value={project?.memo || ""}
+                onChange={(e) => setProject({ ...project, memo: e.target.value })}
                 placeholder="请输入项目介绍（选填）"
                 rows={4}
               />

SuperAdmin/app/dashboard/projects/[id]/page.tsx

@@ -1,39 +1,63 @@
 "use client"
 
-import { useState, use } from "react"
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { ArrowLeft, Edit } from "lucide-react"
+import { toast } from "sonner"
+import { use } from "react"
 
-// Sample project data
-const projectData = {
-  id: "1",
-  name: "电商平台项目",
-  phone: "13800138000",
-  account: "ecommerce_admin",
-  description: "这是一个电商平台推广项目，主要针对年轻用户群体，通过微信社交渠道进行产品推广和销售转化。",
-  createdAt: "2023-05-15",
-  devices: [
-    { id: "d1", name: "iPhone 13 Pro", wechatFriends: 120 },
-    { id: "d2", name: "Huawei P40", wechatFriends: 85 },
-    { id: "d3", name: "Samsung S21", wechatFriends: 40 },
-  ],
-  subAccounts: [
-    { id: "a1", username: "sales_team1", createdAt: "2023-05-16" },
-    { id: "a2", username: "sales_team2", createdAt: "2023-05-16" },
-    { id: "a3", username: "marketing_team", createdAt: "2023-05-17" },
-    { id: "a4", username: "support_team", createdAt: "2023-05-18" },
-    { id: "a5", username: "admin_assistant", createdAt: "2023-05-20" },
-  ],
+interface ProjectProfile {
+  id: number
+  name: string
+  memo: string
+  companyId: number
+  createTime: string
+  account: string
+  phone: string | null
+  deviceCount: number
+  friendCount: number
+  userCount: number
 }
 
 export default function ProjectDetailPage({ params }: { params: { id: string } }) {
+  const router = useRouter()
+  const [isLoading, setIsLoading] = useState(true)
+  const [profile, setProfile] = useState<ProjectProfile | null>(null)
   const { id } = use(params)
 
-  const [activeTab, setActiveTab] = useState("overview")
+  useEffect(() => {
+    const fetchProjectProfile = async () => {
+      try {
+        const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/company/profile/${id}`)
+        const data = await response.json()
+
+        if (data.code === 200) {
+          setProfile(data.data)
+        } else {
+          toast.error(data.msg || "获取项目信息失败")
+        }
+      } catch (error) {
+        toast.error("网络错误，请稍后重试")
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchProjectProfile()
+  }, [id])
+
+  if (isLoading) {
+    return <div className="flex items-center justify-center min-h-screen">加载中...</div>
+  }
+
+  if (!profile) {
+    return <div className="flex items-center justify-center min-h-screen">未找到项目信息</div>
+  }
 
   return (
     <div className="space-y-6">
@@ -44,7 +68,7 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
               <ArrowLeft className="h-4 w-4" />
             </Link>
           </Button>
-          <h1 className="text-2xl font-bold">{projectData.name}</h1>
+          <h1 className="text-2xl font-bold">{profile.name}</h1>
         </div>
         <Button asChild>
           <Link href={`/dashboard/projects/${id}/edit`}>
@@ -53,7 +77,7 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
         </Button>
       </div>
 
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
+      <Tabs value="overview" className="space-y-4">
         <TabsList>
           <TabsTrigger value="overview">项目概览</TabsTrigger>
           <TabsTrigger value="devices">关联设备</TabsTrigger>
@@ -69,23 +93,23 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
               <dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                 <div>
                   <dt className="text-sm font-medium text-muted-foreground">项目名称</dt>
-                  <dd className="text-sm">{projectData.name}</dd>
+                  <dd className="text-sm">{profile.name}</dd>
                 </div>
                 <div>
                   <dt className="text-sm font-medium text-muted-foreground">手机号</dt>
-                  <dd className="text-sm">{projectData.phone}</dd>
+                  <dd className="text-sm">{profile.phone || "未设置"}</dd>
                 </div>
                 <div>
                   <dt className="text-sm font-medium text-muted-foreground">账号</dt>
-                  <dd className="text-sm">{projectData.account}</dd>
+                  <dd className="text-sm">{profile.account}</dd>
                 </div>
                 <div>
                   <dt className="text-sm font-medium text-muted-foreground">创建时间</dt>
-                  <dd className="text-sm">{projectData.createdAt}</dd>
+                  <dd className="text-sm">{profile.createTime}</dd>
                 </div>
                 <div className="sm:col-span-2">
                   <dt className="text-sm font-medium text-muted-foreground">项目介绍</dt>
-                  <dd className="text-sm">{projectData.description}</dd>
+                  <dd className="text-sm">{profile.memo}</dd>
                 </div>
               </dl>
             </CardContent>
@@ -97,7 +121,7 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
                 <CardTitle className="text-sm font-medium">关联设备数</CardTitle>
               </CardHeader>
               <CardContent>
-                <div className="text-2xl font-bold">{projectData.devices.length}</div>
+                <div className="text-2xl font-bold">{profile.deviceCount}</div>
               </CardContent>
             </Card>
             <Card>
@@ -105,7 +129,7 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
                 <CardTitle className="text-sm font-medium">子账号数</CardTitle>
               </CardHeader>
               <CardContent>
-                <div className="text-2xl font-bold">{projectData.subAccounts.length}</div>
+                <div className="text-2xl font-bold">{profile.userCount}</div>
               </CardContent>
             </Card>
             <Card>
@@ -113,9 +137,7 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
                 <CardTitle className="text-sm font-medium">微信好友总数</CardTitle>
               </CardHeader>
               <CardContent>
-                <div className="text-2xl font-bold">
-                  {projectData.devices.reduce((sum, device) => sum + device.wechatFriends, 0)}
-                </div>
+                <div className="text-2xl font-bold">{profile.friendCount}</div>
               </CardContent>
             </Card>
           </div>
@@ -136,12 +158,14 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
                   </TableRow>
                 </TableHeader>
                 <TableBody>
-                  {projectData.devices.map((device) => (
+                  {/* Assuming devices are fetched from the profile */}
+                  {/* Replace with actual devices data */}
+                  {/* {profile.devices.map((device) => (
                     <TableRow key={device.id}>
                       <TableCell className="font-medium">{device.name}</TableCell>
                       <TableCell className="text-right">{device.wechatFriends}</TableCell>
                     </TableRow>
-                  ))}
+                  ))} */}
                 </TableBody>
               </Table>
             </CardContent>
@@ -163,12 +187,14 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
                   </TableRow>
                 </TableHeader>
                 <TableBody>
-                  {projectData.subAccounts.map((account) => (
+                  {/* Assuming subAccounts are fetched from the profile */}
+                  {/* Replace with actual subAccounts data */}
+                  {/* {profile.subAccounts.map((account) => (
                     <TableRow key={account.id}>
                       <TableCell className="font-medium">{account.username}</TableCell>
                       <TableCell className="text-right">{account.createdAt}</TableCell>
                     </TableRow>
-                  ))}
+                  ))} */}
                 </TableBody>
               </Table>
             </CardContent>