Merge branch 'yongpxu-dev' into yongpxu-master

# Conflicts: # Cunkebao/app/content/[id]/materials/new/page.tsx resolved by yongpxu-master version # Cunkebao/app/content/[id]/materials/page.tsx resolved by yongpxu-master version # Cunkebao/app/workspace/moments-sync/[id]/page.tsx resolved by yongpxu-master version # nkebao/package-lock.json resolved by yongpxu-master version # nkebao/src/api/autoLike.ts resolved by yongpxu-dev version # nkebao/src/components/ui/input.tsx resolved by yongpxu-dev version # nkebao/yarn.lock resolved by yongpxu-master version
2025-07-09 18:32:30 +08:00
parent 5ef6a47cb0 4421cf8ce8
commit d78698aa6b
12 changed files with 1602 additions and 739 deletions
--- a/nkebao/package.json
+++ b/nkebao/package.json
@@ -25,7 +25,7 @@
    "@radix-ui/react-scroll-area": "latest",
    "@radix-ui/react-select": "latest",
    "@radix-ui/react-separator": "^1.1.1",
-    "@radix-ui/react-slider": "latest",
+    "@radix-ui/react-slider": "^1.3.5",
    "@radix-ui/react-slot": "^1.1.1",
    "@radix-ui/react-switch": "latest",
    "@radix-ui/react-tabs": "latest",
@@ -65,7 +65,7 @@
    "recharts": "latest",
    "regenerator-runtime": "latest",
    "sonner": "^1.7.4",
-    "tailwind-merge": "^2.5.5",
+    "tailwind-merge": "^2.6.0",
    "tailwindcss-animate": "^1.0.7",
    "tdesign-mobile-react": "^0.16.0",
    "vaul": "^0.9.6",
--- a/nkebao/src/App.tsx
+++ b/nkebao/src/App.tsx
@@ -61,6 +61,7 @@ function App() {
                  <Route path="/workspace/auto-like" element={<AutoLike />} />
                  <Route path="/workspace/auto-like/new" element={<NewAutoLike />} />
                  <Route path="/workspace/auto-like/:id" element={<AutoLikeDetail />} />
+                  <Route path="/workspace/auto-like/:id/edit" element={<NewAutoLike />} />
                  <Route path="/workspace/auto-group" element={<AutoGroup />} />
                  <Route path="/workspace/auto-group/:id" element={<AutoGroupDetail />} />
                  <Route path="/workspace/group-push" element={<GroupPush />} />
--- a/nkebao/src/api/autoLike.ts
+++ b/nkebao/src/api/autoLike.ts
@@ -26,10 +26,28 @@ export async function fetchAutoLikeTasks(): Promise<LikeTask[]> {
 // 获取单个任务详情
 export async function fetchAutoLikeTaskDetail(id: string): Promise<LikeTask | null> {
  try {
-    const res = await get<ApiResponse<LikeTask>>(`/v1/workbench/detail?id=${id}`);
-    if (res.code === 200 && res.data) {
-      return res.data;
+    console.log(`Fetching task detail for id: ${id}`);
+    // 使用any类型来处理可能的不同响应结构
+    const res = await get<any>(`/v1/workbench/detail?id=${id}`);
+    console.log('Task detail API response:', res);
+    
+    if (res.code === 200) {
+      // 检查响应中的data字段
+      if (res.data) {
+        // 如果data是对象，直接返回
+        if (typeof res.data === 'object') {
+          return res.data;
+        } else {
+          console.error('Task detail API response data is not an object:', res.data);
+          return null;
+        }
+      } else {
+        console.error('Task detail API response missing data field:', res);
+        return null;
+      }
    }
+    
+    console.error('Task detail API error:', res.msg || 'Unknown error');
    return null;
  } catch (error) {
    console.error('获取任务详情失败:', error);
--- a/nkebao/src/components/LayoutWrapper.tsx
+++ b/nkebao/src/components/LayoutWrapper.tsx
@@ -2,25 +2,12 @@ import React from 'react';
 import { useLocation } from 'react-router-dom';
 import BottomNav from './BottomNav';

-// 不需要底部导航的页面路径
-const NO_BOTTOM_NAV_PATHS = [
-  '/login',
-  '/register',
-  '/forgot-password',
-  '/reset-password',
-  '/devices',
-  '/devices/',
-  '/wechat-accounts',
-  '/wechat-accounts/',
-  '/scenarios/new',
-  '/scenarios/',
-  '/plans/',
-  '/workspace/auto-group/',
-  '/workspace/moments-sync/',
-  '/workspace/traffic-distribution/',
-  '/workspace/auto-like', 
-  '/404',
-  '/500'
+// 配置需要底部导航的页面路径（白名单）
+const BOTTOM_NAV_CONFIG = [
+  '/',                    // 首页
+  '/scenarios',           // 场景获客
+  '/workspace',           // 工作台
+  '/profile',             // 我的
 ];

 interface LayoutWrapperProps {
@@ -31,16 +18,20 @@ export default function LayoutWrapper({ children }: LayoutWrapperProps) {
  const location = useLocation();

  // 检查当前路径是否需要底部导航
-  const shouldShowBottomNav = !NO_BOTTOM_NAV_PATHS.some(path => 
-    location.pathname.startsWith(path)
-  );
+  const shouldShowBottomNav = BOTTOM_NAV_CONFIG.some(path => {
+    // 特殊处理首页路由 '/'
+    if (path === '/') {
+      return location.pathname === '/';
+    }
+    return location.pathname === path;
+  });

  // 如果是登录页面，直接渲染内容（不显示底部导航）
  if (location.pathname === '/login') {
    return <>{children}</>;
  }

-  // 其他页面显示底部导航
+  // 只有在配置列表中的页面才显示底部导航
  return (
    <div className="flex flex-col h-screen">
      <div className="flex-1 overflow-y-auto">
--- a/nkebao/src/components/ui/checkbox.tsx
+++ b/nkebao/src/components/ui/checkbox.tsx
@@ -2,6 +2,7 @@ import React from 'react';

 interface CheckboxProps {
  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
  onChange?: (checked: boolean) => void;
  disabled?: boolean;
  className?: string;
@@ -10,17 +11,24 @@ interface CheckboxProps {

 export function Checkbox({ 
  checked = false, 
+  onCheckedChange,
  onChange, 
  disabled = false, 
  className = '',
  id 
 }: CheckboxProps) {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newChecked = e.target.checked;
+    onCheckedChange?.(newChecked);
+    onChange?.(newChecked);
+  };
+
  return (
    <input
      type="checkbox"
      id={id}
      checked={checked}
-      onChange={(e) => onChange?.(e.target.checked)}
+      onChange={handleChange}
      disabled={disabled}
      className={`w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2 ${className}`}
    />
--- a/nkebao/src/components/ui/input.tsx
+++ b/nkebao/src/components/ui/input.tsx
@@ -4,47 +4,45 @@ interface InputProps {
  value?: string;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
  placeholder?: string;
  className?: string;
  readOnly?: boolean;
+  readonly?: boolean;
  id?: string;
-  name?: string;
  type?: string;
-  required?: boolean;
  min?: number;
  max?: number;
-  step?: number;
 }

 export function Input({ 
  value, 
  onChange, 
  onKeyDown,
+  onClick,
  placeholder, 
  className = '',
  readOnly = false,
+  readonly = false,
  id,
-  name,
  type = 'text',
-  required = false,
  min,
-  max,
-  step,
+  max
 }: InputProps) {
+  const isReadOnly = readOnly || readonly;
+  
  return (
    <input
      id={id}
-      name={name}
      type={type}
      value={value}
      onChange={onChange}
      onKeyDown={onKeyDown}
+      onClick={onClick}
      placeholder={placeholder}
-      readOnly={readOnly}
-      required={required}
+      readOnly={isReadOnly}
      min={min}
      max={max}
-      step={step}
      className={`flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
    />
  );
--- a/nkebao/src/components/ui/radio-group.tsx
+++ b/nkebao/src/components/ui/radio-group.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem } 
--- a/nkebao/src/components/ui/scroll-area.tsx
+++ b/nkebao/src/components/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar } 
--- a/nkebao/src/components/ui/switch.tsx
+++ b/nkebao/src/components/ui/switch.tsx
@@ -5,15 +5,17 @@ interface SwitchProps {
  onCheckedChange: (checked: boolean) => void;
  disabled?: boolean;
  className?: string;
+  id?: string;
 }

-export function Switch({ checked, onCheckedChange, disabled = false, className = '' }: SwitchProps) {
+export function Switch({ checked, onCheckedChange, disabled = false, className = '', id }: SwitchProps) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      disabled={disabled}
+      id={id}
      onClick={() => !disabled && onCheckedChange(!checked)}
      className={`
        relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50
--- a/nkebao/src/components/ui/toast.tsx
+++ b/nkebao/src/components/ui/toast.tsx
@@ -85,4 +85,48 @@ export function ToastProvider({ children }: ToastProviderProps) {
      </div>
    </ToastContext.Provider>
  );
-} 
+}
+
+// 直接导出toast函数，用于在组件中直接使用
+export const toast = (toastData: Omit<Toast, 'id'>) => {
+  // 这里需要确保ToastProvider已经包装了应用
+  // 在实际使用中，应该通过useToast hook来调用
+  console.warn('toast function called without context. Please use useToast hook instead.');
+  
+  // 创建一个简单的DOM toast作为fallback
+  const toastElement = document.createElement('div');
+  toastElement.className = `fixed top-4 right-4 z-50 max-w-sm w-full bg-white rounded-lg shadow-lg border p-4 transform transition-all duration-300 ${
+    toastData.variant === 'destructive' 
+      ? 'border-red-200 bg-red-50' 
+      : 'border-gray-200'
+  }`;
+  
+  toastElement.innerHTML = `
+    <div class="flex items-start justify-between">
+      <div class="flex-1">
+        <h4 class="font-medium ${toastData.variant === 'destructive' ? 'text-red-800' : 'text-gray-900'}">
+          ${toastData.title}
+        </h4>
+        ${toastData.description ? `
+          <p class="text-sm mt-1 ${toastData.variant === 'destructive' ? 'text-red-600' : 'text-gray-600'}">
+            ${toastData.description}
+          </p>
+        ` : ''}
+      </div>
+      <button class="ml-4 text-gray-400 hover:text-gray-600" onclick="this.parentElement.parentElement.remove()">
+        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
+      </button>
+    </div>
+  `;
+  
+  document.body.appendChild(toastElement);
+  
+  // 自动移除
+  setTimeout(() => {
+    if (toastElement.parentElement) {
+      toastElement.remove();
+    }
+  }, 5000);
+}; 
--- a/nkebao/src/pages/workspace/auto-like/NewAutoLike.tsx
+++ b/nkebao/src/pages/workspace/auto-like/NewAutoLike.tsx
--- a/nkebao/src/pages/workspace/traffic-distribution/TrafficDistribution.tsx
+++ b/nkebao/src/pages/workspace/traffic-distribution/TrafficDistribution.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
  Plus,
@@ -9,17 +9,9 @@ import {
  Clock,
  Edit,
  Trash2,
-  Eye,
-  Copy,
-  ChevronDown,
-  ChevronUp,
-  Settings,
-  // Calendar,
+  Pause,
  Users,
  Share2,
-  // CheckCircle,
-  // XCircle,
-  TrendingUp,
 } from 'lucide-react';
 import { Card } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -27,12 +19,13 @@ import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
 import { Switch } from '@/components/ui/switch';
 import { Progress } from '@/components/ui/progress';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+// 不再使用 DropdownMenu 组件
+// import {
+//   DropdownMenu,
+//   DropdownMenuContent,
+//   DropdownMenuItem,
+//   DropdownMenuTrigger,
+// } from '@/components/ui/dropdown-menu';
 import Layout from '@/components/Layout';
 import PageHeader from '@/components/PageHeader';
 import BottomNav from '@/components/BottomNav';
@@ -61,18 +54,19 @@ interface DistributionRule {
 export default function TrafficDistribution() {
  const navigate = useNavigate();
  const { toast } = useToast();
-  const [expandedRuleId, setExpandedRuleId] = useState<string | null>(null);
+  // 移除expandedRuleId状态
  const [searchTerm, setSearchTerm] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
  const [tasks, setTasks] = useState<DistributionRule[]>([
    {
      id: '1',
-      name: 'VIP客户流量分发',
-      deviceCount: 3,
-      totalTraffic: 1000,
-      distributedTraffic: 756,
-      lastDistributionTime: '2025-02-06 13:12:35',
+      name: '流量分发',
+      deviceCount: 2,
+      totalTraffic: 2,
+      distributedTraffic: 125,
+      lastDistributionTime: '2025-07-02 09:00',
      createTime: '2024-11-20 19:04:14',
-      creator: 'admin',
+      creator: '售前',
      status: 'running',
      distributionInterval: 300,
      maxDistributionPerDay: 2000,
@@ -86,32 +80,9 @@ export default function TrafficDistribution() {
      priority: 'high',
      filterConditions: ['VIP客户', '高价值'],
    },
-    {
-      id: '2',
-      name: '新客户流量分发',
-      deviceCount: 2,
-      totalTraffic: 500,
-      distributedTraffic: 234,
-      lastDistributionTime: '2024-03-04 14:09:35',
-      createTime: '2024-03-04 14:29:04',
-      creator: 'manager',
-      status: 'paused',
-      distributionInterval: 600,
-      maxDistributionPerDay: 1000,
-      timeRange: { start: '09:00', end: '21:00' },
-      targetChannels: ['抖音', '快手'],
-      distributionRatio: {
-        '抖音': 60,
-        '快手': 40,
-      },
-      priority: 'medium',
-      filterConditions: ['新客户', '潜在客户'],
-    },
  ]);

-  const toggleExpand = (ruleId: string) => {
-    setExpandedRuleId(expandedRuleId === ruleId ? null : ruleId);
-  };
+  // 移除展开功能

  const handleDelete = (ruleId: string) => {
    const ruleToDelete = tasks.find((rule) => rule.id === ruleId);
@@ -169,7 +140,67 @@ export default function TrafficDistribution() {

  const handleCreateNew = () => {
    navigate('/workspace/traffic-distribution/new');
+    toast({
+      title: '创建新分发',
+      description: '正在前往创建页面',
+    });
  };
+  
+  // 添加卡片菜单组件
+  type CardMenuProps = {
+    onEdit: () => void;
+    onPause: () => void;
+    onDelete: () => void;
+  };
+  
+  function CardMenu({ onEdit, onPause, onDelete }: CardMenuProps) {
+    const [open, setOpen] = useState(false);
+    const menuRef = useRef<HTMLDivElement | null>(null);
+  
+    useEffect(() => {
+      function handleClickOutside(event: MouseEvent) {
+        if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+          setOpen(false);
+        }
+      }
+      if (open) document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [open]);
+  
+    return (
+      <div style={{ position: "relative" }}>
+        <button onClick={() => setOpen((v) => !v)} style={{ background: "none", border: "none", padding: 0, margin: 0, cursor: "pointer" }}>
+          <MoreVertical className="h-4 w-4" />
+        </button>
+        {open && (
+          <div
+            ref={menuRef}
+            style={{
+              position: "absolute",
+              right: 0,
+              top: 28,
+              background: "#fff",
+              borderRadius: 8,
+              boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+              zIndex: 100,
+              minWidth: 120,
+              padding: 4,
+            }}
+          >
+            <div onClick={() => { onEdit(); setOpen(false); }} style={{ padding: 8, cursor: "pointer", display: "flex", alignItems: "center", borderRadius: 6, fontSize: 14, gap: 6, transition: "background .2s" }} onMouseOver={e => (e.currentTarget as HTMLDivElement).style.background="#f5f5f5"} onMouseOut={e => (e.currentTarget as HTMLDivElement).style.background=""}>
+              <Edit className="h-4 w-4 mr-2" />编辑计划
+            </div>
+            <div onClick={() => { onPause(); setOpen(false); }} style={{ padding: 8, cursor: "pointer", display: "flex", alignItems: "center", borderRadius: 6, fontSize: 14, gap: 6, transition: "background .2s" }} onMouseOver={e => (e.currentTarget as HTMLDivElement).style.background="#f5f5f5"} onMouseOut={e => (e.currentTarget as HTMLDivElement).style.background=""}>
+              <Pause className="h-4 w-4 mr-2" />暂停计划
+            </div>
+            <div onClick={() => { onDelete(); setOpen(false); }} style={{ padding: 8, cursor: "pointer", display: "flex", alignItems: "center", borderRadius: 6, fontSize: 14, gap: 6, color: "#e53e3e", transition: "background .2s" }} onMouseOver={e => (e.currentTarget as HTMLDivElement).style.background="#f5f5f5"} onMouseOut={e => (e.currentTarget as HTMLDivElement).style.background=""}>
+              <Trash2 className="h-4 w-4 mr-2" />删除计划
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }

  const filteredRules = tasks.filter((rule) =>
    rule.name.toLowerCase().includes(searchTerm.toLowerCase()),
@@ -201,31 +232,32 @@ export default function TrafficDistribution() {
    }
  };

-  const getPriorityColor = (priority: string) => {
-    switch (priority) {
-      case 'high':
-        return 'bg-red-100 text-red-800';
-      case 'medium':
-        return 'bg-yellow-100 text-yellow-800';
-      case 'low':
-        return 'bg-green-100 text-green-800';
-      default:
-        return 'bg-gray-100 text-gray-800';
-    }
-  };
+  // 模拟加载数据
+  useEffect(() => {
+    const fetchData = async () => {
+      setIsLoading(true);
+      try {
+        // 这里可以添加实际的API调用
+        // const response = await fetch('/api/traffic-distribution');
+        // const data = await response.json();
+        // setTasks(data);
+        
+        // 模拟加载延迟
+        await new Promise(resolve => setTimeout(resolve, 500));
+      } catch (error) {
+        console.error('获取流量分发数据失败:', error);
+        toast({
+          title: '获取数据失败',
+          description: '无法获取流量分发数据，请稍后重试',
+          variant: 'destructive',
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    };

-  const getPriorityText = (priority: string) => {
-    switch (priority) {
-      case 'high':
-        return '高';
-      case 'medium':
-        return '中';
-      case 'low':
-        return '低';
-      default:
-        return '未知';
-    }
-  };
+    fetchData();
+  }, [toast]);

  return (
    <Layout
@@ -234,9 +266,9 @@ export default function TrafficDistribution() {
          title="流量分发"
          defaultBackPath="/workspace"
          rightContent={
-            <Button onClick={handleCreateNew}>
+            <Button onClick={handleCreateNew} className="bg-blue-600 hover:bg-blue-700">
              <Plus className="h-4 w-4 mr-2" />
-              新建规则
+              新建分发
            </Button>
          }
        />
@@ -251,7 +283,7 @@ export default function TrafficDistribution() {
              <div className="relative flex-1">
                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
                <Input
-                  placeholder="搜索规则名称"
+                  placeholder="搜索计划名称"
                  className="pl-9"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
@@ -260,7 +292,7 @@ export default function TrafficDistribution() {
              <Button variant="outline" size="icon">
                <Filter className="h-4 w-4" />
              </Button>
-              <Button variant="outline" size="icon">
+              <Button variant="outline" size="icon" onClick={() => window.location.reload()}>
                <RefreshCw className="h-4 w-4" />
              </Button>
            </div>
@@ -268,189 +300,81 @@ export default function TrafficDistribution() {

          {/* 规则列表 */}
          <div className="space-y-4">
-            {filteredRules.length === 0 ? (
+            {isLoading ? (
+              // 加载状态
+              <div className="flex justify-center items-center py-12">
+                <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
+              </div>
+            ) : filteredRules.length === 0 ? (
              <Card className="p-8 text-center">
                <Share2 className="h-12 w-12 text-gray-300 mx-auto mb-3" />
-                <p className="text-gray-500 text-lg font-medium mb-2">暂无分发规则</p>
-                <p className="text-gray-400 text-sm mb-4">创建您的第一个流量分发规则</p>
+                <p className="text-gray-500 text-lg font-medium mb-2">暂无分发计划</p>
+                <p className="text-gray-400 text-sm mb-4">创建您的第一个流量分发计划</p>
                <Button onClick={handleCreateNew}>
                  <Plus className="h-4 w-4 mr-2" />
-                  创建第一个规则
+                  新建分发
                </Button>
              </Card>
            ) : (
              filteredRules.map((rule) => (
-                <Card key={rule.id} className="p-4">
-                  <div className="flex items-center justify-between mb-4">
-                    <div className="flex items-center space-x-2">
+                <Card key={rule.id} className="overflow-hidden">
+                  <div className="p-4 border-b">
+                    <div className="flex items-center justify-between">
                      <h3 className="font-medium">{rule.name}</h3>
-                      <Badge className={getStatusColor(rule.status)}>
-                        {getStatusText(rule.status)}
-                      </Badge>
-                      <Badge className={getPriorityColor(rule.priority)}>
-                        优先级: {getPriorityText(rule.priority)}
-                      </Badge>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <Switch
-                        checked={rule.status === 'running'}
-                        onCheckedChange={() => toggleRuleStatus(rule.id)}
-                        disabled={rule.status === 'completed'}
-                      />
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-                            <MoreVertical className="h-4 w-4" />
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                          <DropdownMenuItem onClick={() => handleView(rule.id)}>
-                            <Eye className="h-4 w-4 mr-2" />
-                            查看
-                          </DropdownMenuItem>
-                          <DropdownMenuItem onClick={() => handleEdit(rule.id)}>
-                            <Edit className="h-4 w-4 mr-2" />
-                            编辑
-                          </DropdownMenuItem>
-                          <DropdownMenuItem onClick={() => handleCopy(rule.id)}>
-                            <Copy className="h-4 w-4 mr-2" />
-                            复制
-                          </DropdownMenuItem>
-                          <DropdownMenuItem onClick={() => handleDelete(rule.id)}>
-                            <Trash2 className="h-4 w-4 mr-2" />
-                            删除
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </div>
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-4 mb-4">
-                    <div className="text-sm text-gray-500">
-                      <div>执行设备：{rule.deviceCount} 个</div>
-                      <div>目标渠道：{rule.targetChannels.length} 个</div>
-                    </div>
-                    <div className="text-sm text-gray-500">
-                      <div>已分发：{rule.distributedTraffic}/{rule.totalTraffic}</div>
-                      <div>创建人：{rule.creator}</div>
-                    </div>
-                  </div>
-
-                  {/* 分发进度 */}
-                  <div className="mb-4">
-                    <div className="flex justify-between text-sm mb-1">
-                      <span className="text-gray-500">分发进度</span>
-                      <span className="font-medium">
-                        {Math.round((rule.distributedTraffic / rule.totalTraffic) * 100)}%
-                      </span>
-                    </div>
-                    <Progress
-                      value={(rule.distributedTraffic / rule.totalTraffic) * 100}
-                      className="h-2"
-                    />
-                  </div>
-
-                  <div className="flex items-center justify-between text-xs text-gray-500 border-t pt-4">
-                    <div className="flex items-center">
-                      <Clock className="w-4 h-4 mr-1" />
-                      上次分发：{rule.lastDistributionTime}
-                    </div>
-                    <div className="flex items-center">
-                      <span>创建时间：{rule.createTime}</span>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="ml-2 p-0 h-6 w-6"
-                        onClick={() => toggleExpand(rule.id)}
-                      >
-                        {expandedRuleId === rule.id ? (
-                          <ChevronUp className="h-4 w-4" />
-                        ) : (
-                          <ChevronDown className="h-4 w-4" />
-                        )}
-                      </Button>
-                    </div>
-                  </div>
-
-                  {expandedRuleId === rule.id && (
-                    <div className="mt-4 pt-4 border-t border-dashed">
-                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <div className="space-y-4">
-                          <div className="flex items-center">
-                            <Settings className="h-5 w-5 mr-2 text-gray-500" />
-                            <h4 className="font-medium">基本设置</h4>
-                          </div>
-                          <div className="space-y-2 pl-7">
-                            <div className="flex justify-between text-sm">
-                              <span className="text-gray-500">分发间隔：</span>
-                              <span>{rule.distributionInterval} 秒</span>
-                            </div>
-                            <div className="flex justify-between text-sm">
-                              <span className="text-gray-500">每日最大分发数：</span>
-                              <span>{rule.maxDistributionPerDay}</span>
-                            </div>
-                            <div className="flex justify-between text-sm">
-                              <span className="text-gray-500">执行时间段：</span>
-                              <span>
-                                {rule.timeRange.start} - {rule.timeRange.end}
-                              </span>
-                            </div>
-                            <div className="flex justify-between text-sm">
-                              <span className="text-gray-500">优先级：</span>
-                              <span>{getPriorityText(rule.priority)}</span>
-                            </div>
-                          </div>
-                        </div>
-
-                        <div className="space-y-4">
-                          <div className="flex items-center">
-                            <Share2 className="h-5 w-5 mr-2 text-gray-500" />
-                            <h4 className="font-medium">分发渠道</h4>
-                          </div>
-                          <div className="space-y-2 pl-7">
-                            <div className="flex flex-wrap gap-2">
-                              {rule.targetChannels.map((channel) => (
-                                <Badge key={channel} variant="outline" className="bg-gray-50">
-                                  {channel}
-                                </Badge>
-                              ))}
-                            </div>
-                          </div>
-                        </div>
-
-                        <div className="space-y-4">
-                          <div className="flex items-center">
-                            <TrendingUp className="h-5 w-5 mr-2 text-gray-500" />
-                            <h4 className="font-medium">分发比例</h4>
-                          </div>
-                          <div className="space-y-2 pl-7">
-                            {Object.entries(rule.distributionRatio).map(([channel, ratio]) => (
-                              <div key={channel} className="flex justify-between text-sm">
-                                <span className="text-gray-500">{channel}：</span>
-                                <span>{ratio}%</span>
-                              </div>
-                            ))}
-                          </div>
-                        </div>
-
-                        <div className="space-y-4">
-                          <div className="flex items-center">
-                            <Users className="h-5 w-5 mr-2 text-gray-500" />
-                            <h4 className="font-medium">筛选条件</h4>
-                          </div>
-                          <div className="space-y-2 pl-7">
-                            <div className="flex flex-wrap gap-2">
-                              {rule.filterConditions.map((condition) => (
-                                <Badge key={condition} variant="outline" className="bg-gray-50">
-                                  {condition}
-                                </Badge>
-                              ))}
-                            </div>
-                          </div>
-                        </div>
+                      <div className="flex items-center space-x-2">
+                        <Badge className="bg-blue-100 text-blue-800 rounded-full px-3">
+                          进行中
+                        </Badge>
+                        <Switch
+                          checked={rule.status === 'running'}
+                          onCheckedChange={() => toggleRuleStatus(rule.id)}
+                          disabled={rule.status === 'completed'}
+                        />
+                        <CardMenu
+                          onEdit={() => handleEdit(rule.id)}
+                          onPause={() => toggleRuleStatus(rule.id)}
+                          onDelete={() => handleDelete(rule.id)}
+                        />
                      </div>
                    </div>
-                  )}
+                  </div>
+
+                  {/* 统计数据 - 第一行 */}
+                  <div className="grid grid-cols-3 divide-x text-center">
+                                          <div className="py-3">
+                      <div className="text-2xl font-bold">2</div>
+                      <div className="text-xs text-gray-500 mt-1">分发账号</div>
+                    </div>
+                                          <div className="py-3">
+                      <div className="text-2xl font-bold">7</div>
+                      <div className="text-xs text-gray-500 mt-1">分发设备</div>
+                    </div>
+                    <div className="py-3">
+                      <div className="text-2xl font-bold">ALL</div>
+                      <div className="text-xs text-gray-500 mt-1">流量池</div>
+                    </div>
+                  </div>
+
+                  {/* 统计数据 - 第二行 */}
+                  <div className="grid grid-cols-2 divide-x text-center border-t">
+                                          <div className="py-3">
+                      <div className="text-2xl font-bold">125</div>
+                      <div className="text-xs text-gray-500 mt-1">日均分发量</div>
+                    </div>
+                    <div className="py-3">
+                      <div className="text-2xl font-bold">2</div>
+                      <div className="text-xs text-gray-500 mt-1">总流量池数量</div>
+                    </div>
+                  </div>
+
+                  {/* 底部信息 */}
+                  <div className="flex items-center justify-between text-xs text-gray-500 p-3 border-t">
+                    <div className="flex items-center">
+                      <Clock className="w-4 h-4 mr-1" />
+                      上次执行: {rule.lastDistributionTime}
+                    </div>
+                    <div>创建人: {rule.creator}</div>
+                  </div>
                </Card>
              ))
            )}