feat: 本次提交更新内容如下

流量池逻辑构建完成

nkebao/src/App.tsx

@@ -36,6 +36,7 @@ import Orders from './pages/orders/Orders';
 import TrafficPool from './pages/traffic-pool/TrafficPool';
 import ContactImport from './pages/contact-import/ContactImport';
 import Content from './pages/content/Content';
+import TrafficPoolDetail from './pages/traffic-pool/TrafficPoolDetail';
 
 function App() {
   // 初始化HTTP拦截器
@@ -85,6 +86,7 @@ function App() {
                   <Route path="/plans/:planId" element={<PlanDetail />} />
                   <Route path="/orders" element={<Orders />} />
                   <Route path="/traffic-pool" element={<TrafficPool />} />
+                  <Route path="/traffic-pool/:id" element={<TrafficPoolDetail />} />
                   <Route path="/contact-import" element={<ContactImport />} />
                   <Route path="/content" element={<Content />} />
                   {/* 你可以继续添加更多路由 */}

nkebao/src/pages/traffic-pool/TrafficPool.tsx

@@ -20,9 +20,10 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import Layout from '@/components/Layout';
 
-// 接口定义
-interface Device {
+// 1. 类型定义
+export interface Device {
   id: string;
   name: string;
   status: "online" | "offline" | "busy";
@@ -32,8 +33,7 @@ interface Device {
   dailyAddLimit: number;
   todayAdded: number;
 }
-
-interface WechatAccount {
+export interface WechatAccount {
   id: string;
   nickname: string;
   wechatId: string;
@@ -43,16 +43,14 @@ interface WechatAccount {
   friendCount: number;
   dailyAddLimit: number;
 }
-
-interface CustomerService {
+export interface CustomerService {
   id: string;
   name: string;
   avatar: string;
   status: "online" | "offline" | "busy";
   assignedUsers: number;
 }
-
-interface TrafficPool {
+export interface TrafficPool {
   id: string;
   name: string;
   description: string;
@@ -60,8 +58,7 @@ interface TrafficPool {
   tags: string[];
   createdAt: string;
 }
-
-interface RFMScore {
+export interface RFMScore {
   recency: number;
   frequency: number;
   monetary: number;
@@ -69,23 +66,20 @@ interface RFMScore {
   segment: string;
   priority: "high" | "medium" | "low";
 }
-
-interface UserTag {
+export interface UserTag {
   id: string;
   name: string;
   color: string;
   source: string;
 }
-
-interface UserInteraction {
+export interface UserInteraction {
   id: string;
   type: "message" | "purchase" | "view" | "click";
   content: string;
   timestamp: string;
   value?: number;
 }
-
-interface TrafficUser {
+export interface TrafficUser {
   id: string;
   avatar: string;
   nickname: string;
@@ -113,8 +107,8 @@ interface TrafficUser {
   interactions: UserInteraction[];
 }
 
-// 场景数据
-const SCENARIOS = [
+// 2. mock数据和常量声明时直接export
+export const SCENARIOS = [
   { id: "poster", name: "海报获客", icon: "🎨" },
   { id: "phone", name: "电话获客", icon: "📞" },
   { id: "douyin", name: "抖音获客", icon: "🎵" },
@@ -124,8 +118,7 @@ const SCENARIOS = [
   { id: "order", name: "订单获客", icon: "📦" },
   { id: "payment", name: "付款码获客", icon: "💳" },
 ];
-
-const RFM_SEGMENTS = {
+export const RFM_SEGMENTS = {
   "555": {
     name: "重要价值客户",
     color: "bg-gradient-to-r from-red-500 to-pink-500 text-white border-0",
@@ -175,9 +168,7 @@ const RFM_SEGMENTS = {
     priority: "low",
   },
 } as const;
-
-// 模拟数据生成函数
-const generateMockDevices = (): Device[] => {
+export const generateMockDevices = (): Device[] => {
   return Array.from({ length: 8 }, (_, i) => ({
     id: `device-${i + 1}`,
     name: `设备${i + 1}`,
@@ -189,8 +180,7 @@ const generateMockDevices = (): Device[] => {
     todayAdded: Math.floor(Math.random() * 15),
   }));
 };
-
-const generateMockWechatAccounts = (devices: Device[]): WechatAccount[] => {
+export const generateMockWechatAccounts = (devices: Device[]): WechatAccount[] => {
   const accounts: WechatAccount[] = [];
   devices.forEach((device) => {
     for (let i = 0; i < device.wechatAccounts; i++) {
@@ -208,8 +198,7 @@ const generateMockWechatAccounts = (devices: Device[]): WechatAccount[] => {
   });
   return accounts;
 };
-
-const generateMockCustomerServices = (): CustomerService[] => {
+export const generateMockCustomerServices = (): CustomerService[] => {
   return Array.from({ length: 5 }, (_, i) => ({
     id: `cs-${i + 1}`,
     name: `客服${i + 1}`,
@@ -218,8 +207,7 @@ const generateMockCustomerServices = (): CustomerService[] => {
     assignedUsers: Math.floor(Math.random() * 100) + 50,
   }));
 };
-
-const generateMockTrafficPools = (): TrafficPool[] => {
+export const generateMockTrafficPools = (): TrafficPool[] => {
   return [
     {
       id: "pool-1",
@@ -247,8 +235,7 @@ const generateMockTrafficPools = (): TrafficPool[] => {
     },
   ];
 };
-
-const generateRFMScore = (): RFMScore => {
+export const generateRFMScore = (): RFMScore => {
   const recency = Math.floor(Math.random() * 5) + 1;
   const frequency = Math.floor(Math.random() * 5) + 1;
   const monetary = Math.floor(Math.random() * 5) + 1;
@@ -271,7 +258,7 @@ const generateRFMScore = (): RFMScore => {
   return { recency, frequency, monetary, total, segment, priority };
 };
 
-const generateMockInteractions = (): UserInteraction[] => {
+export const generateMockInteractions = (): UserInteraction[] => {
   const types = ["message", "purchase", "view", "click"] as const;
   return Array.from({ length: Math.floor(Math.random() * 10) + 1 }, (_, i) => {
     const type = types[Math.floor(Math.random() * types.length)];
@@ -287,7 +274,7 @@ const generateMockInteractions = (): UserInteraction[] => {
   });
 };
 
-const generateUserTags = (rfmScore: RFMScore): UserTag[] => {
+export const generateUserTags = (rfmScore: RFMScore): UserTag[] => {
   const allTags = [
     { id: "tag-1", name: "活跃用户", color: "bg-green-100 text-green-800", source: "system" },
     { id: "tag-2", name: "高消费", color: "bg-red-100 text-red-800", source: "system" },
@@ -319,7 +306,7 @@ const mockWechatAccounts = generateMockWechatAccounts(mockDevices);
 const mockCustomerServices = generateMockCustomerServices();
 const mockTrafficPools = generateMockTrafficPools();
 
-const generateMockUsers = (
+export const generateMockUsers = (
   devices: Device[],
   wechatAccounts: WechatAccount[],
   customerServices: CustomerService[],
@@ -582,8 +569,7 @@ export default function TrafficPool() {
       <div
         className="cursor-pointer"
         onClick={() => {
-          setSelectedUser(user);
-          setShowUserDetail(true);
+          navigate(`/traffic-pool/${user.id}`);
         }}
       >
         <Card className="p-4 bg-white border-gray-200 hover:shadow-md transition-shadow">
@@ -679,8 +665,10 @@ export default function TrafficPool() {
   };
 
   return (
-    <div className="flex flex-col h-screen bg-gray-50">
-      {/* 顶部导航栏 */}
+
+    <Layout
+      header={
+        <>
         <header className="sticky top-0 z-10 bg-white border-b">
           <div className="flex items-center justify-between p-4">
             <div className="flex items-center space-x-3">
@@ -730,7 +718,6 @@ export default function TrafficPool() {
             </div>
           </div>
         </header>
-
              {/* 数据分析面板 - 可折叠 */}
       {showAnalytics && (
         <div className="bg-white border-b p-4 space-y-4">
@@ -786,6 +773,63 @@ export default function TrafficPool() {
           </Card>
         </div>
       )}
+        {/* 操作栏 */}
+        <div className="sticky top-0 bg-white border-b p-4 z-10">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-2">
+              <input
+                type="checkbox"
+                checked={selectedUsers.length === paginatedUsers.length && paginatedUsers.length > 0}
+                onChange={(e) => handleSelectAll(e.target.checked)}
+                className="rounded border-gray-300"
+              />
+              <span className="text-sm text-gray-600">全选</span>
+              {selectedUsers.length > 0 && (
+                <Button size="sm" onClick={handleAddToPool}>
+                  添加到流量池
+                </Button>
+              )}
+            </div>
+            <div className="text-sm text-gray-500">
+              共 {filteredUsers.length} 个用户
+            </div>
+          </div>
+        </div>
+        </>
+      }
+      footer={
+        <>
+          {/* 分页 */}
+          {totalPages > 1 && (
+            <div className="p-4 border-t bg-white">
+              <div className="flex items-center justify-center space-x-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={currentPage === 1}
+                  onClick={() => setCurrentPage(currentPage - 1)}
+                >
+                  上一页
+                </Button>
+                <span className="text-sm text-gray-600">
+                  {currentPage} / {totalPages}
+                </span>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={currentPage === totalPages}
+                  onClick={() => setCurrentPage(currentPage + 1)}
+                >
+                  下一页
+                </Button>
+              </div>
+            </div>
+          )}
+        </>
+      }
+    >
+
+ 
 
       {/* 筛选器侧边栏 */}
       {showFilters && (
@@ -878,30 +922,7 @@ export default function TrafficPool() {
 
       {/* 主内容区域 */}
       <div className="flex-1 overflow-auto">
-        {/* 操作栏 */}
-        <div className="sticky top-0 bg-white border-b p-4 z-10">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-2">
-              <input
-                type="checkbox"
-                checked={selectedUsers.length === paginatedUsers.length && paginatedUsers.length > 0}
-                onChange={(e) => handleSelectAll(e.target.checked)}
-                className="rounded border-gray-300"
-              />
-              <span className="text-sm text-gray-600">
-                已选择 {selectedUsers.length} 个用户
-              </span>
-              {selectedUsers.length > 0 && (
-                <Button size="sm" onClick={handleAddToPool}>
-                  添加到流量池
-                </Button>
-              )}
-            </div>
-            <div className="text-sm text-gray-500">
-              共 {filteredUsers.length} 个用户，第 {currentPage}/{totalPages} 页
-            </div>
-          </div>
-        </div>
+        
 
         {/* 用户列表 */}
         <div className="p-4 space-y-3">
@@ -928,32 +949,6 @@ export default function TrafficPool() {
           )}
         </div>
 
-        {/* 分页 */}
-        {totalPages > 1 && (
-          <div className="p-4 border-t bg-white">
-            <div className="flex items-center justify-center space-x-2">
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={currentPage === 1}
-                onClick={() => setCurrentPage(currentPage - 1)}
-              >
-                上一页
-              </Button>
-              <span className="text-sm text-gray-600">
-                {currentPage} / {totalPages}
-              </span>
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={currentPage === totalPages}
-                onClick={() => setCurrentPage(currentPage + 1)}
-              >
-                下一页
-              </Button>
-            </div>
-          </div>
-        )}
       </div>
 
       {/* 用户详情弹窗 */}
@@ -1052,6 +1047,7 @@ export default function TrafficPool() {
           </div>
         </DialogContent>
       </Dialog>
-    </div>
+    </Layout>
+  
   );
 } 

nkebao/src/pages/traffic-pool/TrafficPoolDetail.tsx

@@ -0,0 +1,225 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import Layout from '@/components/Layout';
+import UnifiedHeader from '@/components/UnifiedHeader';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { useState } from 'react';
+// 复用mock数据生成
+import {
+  generateMockDevices,
+  generateMockWechatAccounts,
+  generateMockCustomerServices,
+  generateMockTrafficPools,
+  generateMockUsers,
+  RFM_SEGMENTS,
+  TrafficUser,
+} from './TrafficPool';
+
+const devices = generateMockDevices();
+const wechatAccounts = generateMockWechatAccounts(devices);
+const customerServices = generateMockCustomerServices();
+const trafficPools = generateMockTrafficPools();
+const users = generateMockUsers(devices, wechatAccounts, customerServices, trafficPools);
+
+function getUserById(id: string): TrafficUser | undefined {
+  return users.find((u: TrafficUser) => u.id === id);
+}
+
+function getWechatAccount(accountId: string) {
+  return wechatAccounts.find((acc) => acc.id === accountId);
+}
+function getCustomerService(csId: string) {
+  return customerServices.find((cs) => cs.id === csId);
+}
+function getDevice(deviceId: string) {
+  return devices.find((device) => device.id === deviceId);
+}
+function getPoolNames(poolIds: string[]) {
+  return poolIds.map(id => trafficPools.find((pool) => pool.id === id)?.name).filter(Boolean).join(', ');
+}
+function formatDate(dateString: string) {
+  if (!dateString) return '--';
+  try {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('zh-CN');
+  } catch (error) {
+    return dateString;
+  }
+}
+
+export default function TrafficPoolDetail() {
+  const { id } = useParams();
+  const user = getUserById(id as string);
+  if (!user) {
+    return <div className="p-8 text-center text-gray-400">未找到该用户</div>;
+  }
+  const wechatAccount = getWechatAccount(user.wechatAccountId);
+  const customerService = getCustomerService(user.customerServiceId);
+  const device = getDevice(user.deviceId);
+  // RFM分段
+  const rfmSegment = Object.values(RFM_SEGMENTS).find((seg: any) => seg.name === user.rfmScore.segment) as { name: string; color: string } | undefined;
+  const [activeTab, setActiveTab] = useState<'base' | 'journey' | 'tags'>('base');
+
+  return (
+    <Layout
+      header={
+        <UnifiedHeader title="用户详情" showBack />
+      }
+    >
+      <div className="p-4 space-y-4">
+        {/* 头像与基本信息 */}
+        <div className="flex items-center space-x-4">
+          <Avatar className="h-16 w-16">
+            <AvatarImage src={user.avatar} />
+            <AvatarFallback>{user.nickname?.slice(0, 2) || '用户'}</AvatarFallback>
+          </Avatar>
+          <div>
+            <div className="flex items-center space-x-2">
+              <span className="text-lg font-bold">{user.nickname}</span>
+              {user.poolIds.length > 0 && (
+                <Badge className="bg-purple-100 text-purple-700 border-0">{getPoolNames(user.poolIds)}</Badge>
+              )}
+              {user.status === 'added' && <Badge className="bg-green-100 text-green-700 border-0">优先添加</Badge>}
+            </div>
+            <div className="text-blue-600 text-sm font-medium">{user.wechatId}</div>
+          </div>
+        </div>
+        {/* 重要保持客户/优先添加等 */}
+        <div className="flex items-center gap-2">
+          {rfmSegment && (
+            <Badge className={rfmSegment.color + ' border-0'}>{rfmSegment.name}</Badge>
+          )}
+          {user.status === 'added' && <Badge className="bg-pink-100 text-pink-700 border-0">优先添加</Badge>}
+        </div>
+        {/* Tab栏 */}
+        <div className="flex border-b mb-2">
+          <div
+            className={`px-4 py-2 font-medium cursor-pointer ${activeTab === 'base' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-400'}`}
+            onClick={() => setActiveTab('base')}
+          >基本信息</div>
+          <div
+            className={`px-4 py-2 font-medium cursor-pointer ${activeTab === 'journey' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-400'}`}
+            onClick={() => setActiveTab('journey')}
+          >用户旅程</div>
+          <div
+            className={`px-4 py-2 font-medium cursor-pointer ${activeTab === 'tags' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-400'}`}
+            onClick={() => setActiveTab('tags')}
+          >用户标签</div>
+        </div>
+
+        {/* Tab内容区 */}
+        {activeTab === 'base' && (
+          <>
+            {/* 关键信息卡片 */}
+            <Card className="p-4 space-y-2">
+              <div className="text-sm text-gray-500 font-medium mb-1">关键信息</div>
+              <div className="grid grid-cols-2 gap-2 text-sm">
+                <div>设备：{device?.name || '--'}</div>
+                <div>微信号：{wechatAccount?.nickname || '--'}</div>
+                <div>客服：{customerService?.name || '--'}</div>
+                <div>添加时间：{formatDate(user.addTime)}</div>
+                <div>最近互动：{formatDate(user.lastInteraction)}</div>
+              </div>
+            </Card>
+            {/* RFM评分卡片 */}
+            <Card className="p-4 space-y-2">
+              <div className="text-sm text-gray-500 font-medium mb-1">RFM评分</div>
+              <div className="flex gap-4 text-center">
+                <div>
+                  <div className="text-lg font-bold text-blue-600">{user.rfmScore.recency}</div>
+                  <div className="text-xs text-gray-500">最近性(R)</div>
+                </div>
+                <div>
+                  <div className="text-lg font-bold text-green-600">{user.rfmScore.frequency}</div>
+                  <div className="text-xs text-gray-500">频率(F)</div>
+                </div>
+                <div>
+                  <div className="text-lg font-bold text-purple-600">{user.rfmScore.monetary}</div>
+                  <div className="text-xs text-gray-500">金额(M)</div>
+                </div>
+              </div>
+            </Card>
+            {/* 流量池按钮 */}
+            <div className="flex gap-2">
+              <Button size="sm" variant="outline">潜在客户池</Button>
+              <Button size="sm" variant="outline">流失预警池</Button>
+            </div>
+            {/* 统计数据卡片 */}
+            <Card className="p-4 grid grid-cols-2 gap-4 text-center">
+              <div>
+                <div className="text-lg font-bold text-green-600">¥{user.totalSpent}</div>
+                <div className="text-xs text-gray-500">总消费</div>
+              </div>
+              <div>
+                <div className="text-lg font-bold text-blue-600">{user.interactionCount}</div>
+                <div className="text-xs text-gray-500">互动次数</div>
+              </div>
+              <div>
+                <div className="text-lg font-bold text-orange-600">{user.conversionRate}%</div>
+                <div className="text-xs text-gray-500">转化率</div>
+              </div>
+              <div>
+                <div className="text-lg font-bold text-red-600">{user.status === 'failed' ? '添加失败' : user.status === 'added' ? '添加成功' : '未添加'}</div>
+                <div className="text-xs text-gray-500">添加状态</div>
+              </div>
+            </Card>
+          </>
+        )}
+        {activeTab === 'journey' && (
+          <Card className="p-4 space-y-4">
+            <div className="text-sm font-medium mb-2">互动记录</div>
+            {user.interactions && user.interactions.length > 0 ? (
+              user.interactions.slice(0, 4).map((it, idx) => (
+                <div key={it.id} className="flex items-start gap-3 border-b last:border-b-0 pb-3 last:pb-0">
+                  <div className="mt-1">
+                    {it.type === 'click' && <span className="inline-block w-6 h-6 rounded-full bg-orange-50 text-orange-400 text-center">📱</span>}
+                    {it.type === 'message' && <span className="inline-block w-6 h-6 rounded-full bg-blue-50 text-blue-400 text-center">💬</span>}
+                    {it.type === 'purchase' && <span className="inline-block w-6 h-6 rounded-full bg-green-50 text-green-400 text-center">💲</span>}
+                    {it.type === 'view' && <span className="inline-block w-6 h-6 rounded-full bg-purple-50 text-purple-400 text-center">👁️</span>}
+                  </div>
+                  <div className="flex-1">
+                    <div className="font-medium text-gray-700">
+                      {it.type === 'click' && '点击行为'}
+                      {it.type === 'message' && '消息互动'}
+                      {it.type === 'purchase' && '购买行为'}
+                      {it.type === 'view' && '页面浏览'}
+                    </div>
+                    <div className="text-gray-500 text-sm mb-1">{it.content}{it.type === 'purchase' && it.value && <span className="text-green-600 font-bold ml-1">¥{it.value}</span>}</div>
+                  </div>
+                  <div className="text-xs text-gray-400 mt-1 whitespace-nowrap">{formatDate(it.timestamp)} {new Date(it.timestamp).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}</div>
+                </div>
+              ))
+            ) : (
+              <div className="text-gray-400 text-center">暂无互动记录</div>
+            )}
+          </Card>
+        )}
+        {activeTab === 'tags' && (
+          <div className="space-y-4">
+            <Card className="p-4">
+              <div className="text-sm font-medium mb-2">用户标签</div>
+              <div className="flex flex-wrap gap-2 mb-2">
+                {user.tags.map(tag => (
+                  <Badge key={tag.id} className="px-3 py-1 text-sm">{tag.name}</Badge>
+                ))}
+              </div>
+              <div className="text-sm font-medium mb-2">价值标签</div>
+              <div className="flex items-center gap-2 mb-2">
+                <Badge className="bg-purple-100 text-purple-700 border-0">重要保持客户</Badge>
+                <span className="text-gray-400 text-xs">RFM总分：{user.rfmScore.recency + user.rfmScore.frequency + user.rfmScore.monetary}/15</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-gray-500 text-sm">价值等级：</span>
+                <Badge className="bg-red-100 text-red-600 border-0">高价值</Badge>
+              </div>
+            </Card>
+            <Button className="w-full mt-2" size="lg" variant="outline">➕ 添加新标签</Button>
+          </div>
+        )}
+      </div>
+    </Layout>
+  );
+}