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

选择设备弹窗构建完成

nkebao/src/api/index.ts

@@ -8,6 +8,7 @@ export * from './request';
 export * from './devices';
 export * from './scenarios';
 export * from './wechat-accounts';
+export * from './trafficDistribution';
 
 // 默认导出request实例
 export { default as request } from './request'; 

nkebao/src/api/request.ts

@@ -3,7 +3,7 @@ import { requestInterceptor, responseInterceptor, errorInterceptor } from './int
 
 // 创建axios实例
 const request: AxiosInstance = axios.create({
-  baseURL: process.env.REACT_APP_API_BASE_URL || 'http://www.yishi.com',
+  baseURL: process.env.REACT_APP_API_BASE_URL || 'https://ckbapi.quwanzhi.com',
   timeout: 20000,
   headers: {
     'Content-Type': 'application/json',

nkebao/src/api/trafficDistribution.ts

@@ -0,0 +1,125 @@
+import { get, post, put, del } from './request';
+import type { ApiResponse } from '@/types/common';
+
+// 工作台任务类型
+export enum WorkbenchTaskType {
+  MOMENTS_SYNC = 1, // 朋友圈同步
+  GROUP_PUSH = 2, // 社群推送
+  AUTO_LIKE = 3, // 自动点赞
+  AUTO_GROUP = 4, // 自动建群
+  TRAFFIC_DISTRIBUTION = 5, // 流量分发
+}
+
+// 工作台任务状态
+export enum WorkbenchTaskStatus {
+  PENDING = 0, // 待处理
+  RUNNING = 1, // 运行中
+  PAUSED = 2, // 已暂停
+  COMPLETED = 3, // 已完成
+  FAILED = 4, // 失败
+}
+
+// 流量分发规则类型
+export interface DistributionRule {
+  id: string;
+  name: string;
+  status: number;
+  deviceCount: number;
+  totalTraffic: number;
+  distributedTraffic: number;
+  lastDistributionTime: string;
+  createTime: string;
+  creator: string;
+  distributionInterval: number;
+  maxDistributionPerDay: number;
+  timeRange: { start: string; end: string };
+  targetChannels?: string[];
+  distributionRatio?: Record<string, number>;
+  priority?: 'high' | 'medium' | 'low';
+  filterConditions?: string[];
+}
+
+// 流量分发列表响应类型
+export interface TrafficDistributionListResponse {
+  list: DistributionRule[];
+  total: number;
+  page: number;
+  limit: number;
+}
+
+/**
+ * 获取流量分发规则列表
+ * @param params 查询参数
+ * @returns 流量分发规则列表
+ */
+export const fetchDistributionRules = async (params: {
+  page?: number;
+  limit?: number;
+  keyword?: string;
+} = {}): Promise<ApiResponse<TrafficDistributionListResponse>> => {
+  const { page = 1, limit = 10, keyword = "" } = params;
+  
+  const queryParams = new URLSearchParams();
+  queryParams.append('type', WorkbenchTaskType.TRAFFIC_DISTRIBUTION.toString());
+  queryParams.append('page', page.toString());
+  queryParams.append('limit', limit.toString());
+  
+  if (keyword) {
+    queryParams.append('keyword', keyword);
+  }
+  
+  return get<ApiResponse<TrafficDistributionListResponse>>(`/v1/workbench/list?${queryParams.toString()}`);
+};
+
+/**
+ * 获取流量分发规则详情
+ * @param id 规则ID
+ * @returns 流量分发规则详情
+ */
+export const fetchDistributionRuleDetail = async (id: string): Promise<ApiResponse<DistributionRule>> => {
+  return get<ApiResponse<DistributionRule>>(`/v1/workbench/detail/${id}`);
+};
+
+/**
+ * 创建流量分发规则
+ * @param params 创建参数
+ * @returns 创建结果
+ */
+export const createDistributionRule = async (params: any): Promise<ApiResponse<{ id: string }>> => {
+  return post<ApiResponse<{ id: string }>>('/v1/workbench/create', {
+    ...params,
+    type: WorkbenchTaskType.TRAFFIC_DISTRIBUTION
+  });
+};
+
+/**
+ * 更新流量分发规则
+ * @param id 规则ID
+ * @param params 更新参数
+ * @returns 更新结果
+ */
+export const updateDistributionRule = async (id: string, params: any): Promise<ApiResponse<any>> => {
+  return put<ApiResponse<any>>(`/v1/workbench/update/${id}`, {
+    ...params,
+    type: WorkbenchTaskType.TRAFFIC_DISTRIBUTION
+  });
+};
+
+/**
+ * 删除流量分发规则
+ * @param id 规则ID
+ * @returns 删除结果
+ */
+export const deleteDistributionRule = async (id: string): Promise<ApiResponse<any>> => {
+  return del<ApiResponse<any>>(`/v1/workbench/delete/${id}`);
+};
+
+/**
+ * 启动/暂停流量分发规则
+ * @param id 规则ID
+ * @param status 状态：1-启动，2-暂停
+ * @returns 操作结果
+ */
+export const toggleDistributionRuleStatus = async (id: string, status: WorkbenchTaskStatus.RUNNING | WorkbenchTaskStatus.PAUSED): Promise<ApiResponse<any>> => {
+  return put<ApiResponse<any>>(`/v1/workbench/status/${id}`, { status });
+}; 

nkebao/src/components/BottomNav.tsx

@@ -3,13 +3,17 @@ import { Link, useLocation } from 'react-router-dom';
 import { Home, Users, User, Briefcase } from 'lucide-react';
 
 const navItems = [
-  { href: "/", icon: Home, label: "首页" },
-  { href: "/scenarios", icon: Users, label: "场景获客" },
-  { href: "/workspace", icon: Briefcase, label: "工作台" },
-  { href: "/profile", icon: User, label: "我的" },
+  { href: "/", icon: Home, label: "首页", id: "home" },
+  { href: "/scenarios", icon: Users, label: "场景获客", id: "scenarios" },
+  { href: "/workspace", icon: Briefcase, label: "工作台", id: "workspace" },
+  { href: "/profile", icon: User, label: "我的", id: "profile" },
 ];
 
-export default function BottomNav() {
+interface BottomNavProps {
+  activeTab?: string;
+}
+
+export default function BottomNav({ activeTab }: BottomNavProps) {
   const location = useLocation();
 
   return (
@@ -17,7 +21,7 @@ export default function BottomNav() {
       <div className="w-full h-full mx-auto flex justify-around items-center">
         {navItems.map((item) => {
           const IconComponent = item.icon;
-          const isActive = location.pathname === item.href;
+          const isActive = activeTab ? activeTab === item.id : location.pathname === item.href;
           
           return (
             <Link

nkebao/src/components/DeviceSelectionDialog.tsx

@@ -15,6 +15,7 @@ interface Device {
   wxid: string;
   status: 'online' | 'offline';
   usedInPlans: number;
+  nickname: string;
 }
 
 interface DeviceSelectionDialogProps {
@@ -50,6 +51,7 @@ export function DeviceSelectionDialog({
           wxid: serverDevice.wechatId || '',
           status: serverDevice.alive === 1 ? 'online' : 'offline',
           usedInPlans: 0, // 这个字段需要从其他API获取
+          nickname: serverDevice.nickname || '',
         }));
         setDevices(convertedDevices);
       } else {
@@ -93,7 +95,7 @@ export function DeviceSelectionDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
+      <DialogContent className="flex flex-col">
         <DialogHeader>
           <DialogTitle>选择设备</DialogTitle>
         </DialogHeader>
@@ -102,7 +104,7 @@ export function DeviceSelectionDialog({
           <div className="relative flex-1">
             <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
             <Input
-              placeholder="搜索设备IMEI/备注/微信号"
+              placeholder="搜索设备IMEI/备注"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               className="pl-9"
@@ -153,7 +155,8 @@ export function DeviceSelectionDialog({
                     </div>
                     <div className="text-sm text-gray-500 mt-1">
                       <div>IMEI: {device.imei}</div>
-                      <div>微信号: {device.wxid}</div>
+                      <div>微信号: {device.wxid||'-'}</div>
+                      <div>昵称: {device.nickname||'-'}</div>
                     </div>
                     {device.usedInPlans > 0 && (
                       <div className="text-sm text-orange-500 mt-1">已用于 {device.usedInPlans} 个计划</div>

nkebao/src/components/ui/dialog.tsx

@@ -41,7 +41,7 @@ interface DialogContentProps {
 
 export function DialogContent({ children, className = '' }: DialogContentProps) {
   return (
-    <div className={`p-6 bg-white rounded-lg shadow-xl max-w-md w-full mx-4 ${className}`}>
+    <div className={`p-6 bg-white rounded-lg shadow-xl mx-4 ${className}`}>
       {children}
     </div>
   );

nkebao/src/pages/workspace/moments-sync/new.tsx

@@ -5,8 +5,7 @@ import { Input } from '@/components/ui/input';
 import { Switch } from '@/components/ui/switch';
 import { useToast } from '@/components/ui/toast';
 import { createMomentsSyncTask, updateMomentsSyncTask, fetchMomentsSyncTaskDetail } from '@/api/momentsSync';
-import { ChevronLeft, Clock, Search } from 'lucide-react';
-import Layout from '@/components/Layout';
+import { ChevronLeft } from 'lucide-react';
 import { DeviceSelectionDialog } from '@/components/DeviceSelectionDialog';
 import { ContentLibrarySelectionDialog } from '@/components/ContentLibrarySelectionDialog';
 import { ContentType } from '@/types/moments-sync';
@@ -18,230 +17,33 @@ interface StepIndicatorProps {
 
 function StepIndicator({ currentStep }: StepIndicatorProps) {
   const steps = [
-    { id: 1, title: "步骤 1", subtitle: "基础设置" },
-    { id: 2, title: "步骤 2", subtitle: "设备选择" },
-    { id: 3, title: "步骤 3", subtitle: "选择内容库" },
+    { id: 1, title: "基础设置" },
+    { id: 2, title: "设备选择" },
+    { id: 3, title: "选择内容库" },
   ];
 
   return (
-    <div className="relative flex justify-between px-6">
-      {/* 背景连线 */}
-      <div className="absolute top-4 left-6 right-6 h-[2px] bg-gray-200">
-        <div
-          className="absolute top-0 left-0 h-full bg-blue-600 transition-all duration-300 ease-in-out"
-          style={{ 
-            width: currentStep > 1 ? `${((currentStep - 1) / (steps.length - 1)) * 100}%` : '0%' 
-          }}
-        />
-      </div>
-      
-      {/* 步骤圆圈 */}
-      {steps.map((step) => (
-        <div
-          key={step.id}
-          className={`flex flex-col items-center relative z-10 transition-colors ${
-            currentStep >= step.id ? "text-blue-600" : "text-gray-400"
-          }`}
-        >
-          <div
-            className={`w-8 h-8 rounded-full flex items-center justify-center transition-all duration-300 ${
-              currentStep >= step.id
-                ? "bg-blue-600 text-white shadow-sm"
-                : "bg-white border-2 border-gray-200 text-gray-400"
+    <div className="flex justify-between px-6 mb-8">
+      {steps.map((step, index) => (
+        <div key={step.id} className="flex flex-col items-center">
+          <div 
+            className={`w-10 h-10 rounded-full flex items-center justify-center mb-2 ${
+              currentStep === index + 1 
+                ? "bg-blue-600 text-white" 
+                : "bg-white text-gray-400 border border-gray-200"
             }`}
           >
-            {step.id}
+            {index + 1}
+          </div>
+          <div className={`text-sm ${currentStep === index + 1 ? "text-blue-600" : "text-gray-400"}`}>
+            {step.title}
           </div>
-          <div className="text-xs mt-2 font-medium">{step.subtitle}</div>
         </div>
       ))}
     </div>
   );
 }
 
-// 基础设置组件
-interface BasicSettingsProps {
-  formData: {
-    taskName: string;
-    startTime: string;
-    endTime: string;
-    syncCount: number;
-    interval: number;
-    accountType: "business" | "personal";
-    enabled: boolean;
-    contentTypes: ContentType[];
-    targetTags: string[];
-    filterKeywords: string[];
-  };
-  onChange: (data: Partial<BasicSettingsProps["formData"]>) => void;
-  onNext: () => void;
-}
-
-function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
-  return (
-    <div className="space-y-6 p-4">
-      <div className="grid grid-cols-1 gap-4">
-        <div>
-          <div className="text-base font-medium mb-2">任务名称</div>
-          <Input
-            value={formData.taskName}
-            onChange={(e) => onChange({ taskName: e.target.value })}
-            placeholder="请输入任务名称"
-            className="h-12 border-0 border-b border-gray-200 rounded-none focus-visible:ring-0 focus-visible:border-blue-600 px-0 text-base"
-          />
-        </div>
-
-        <div>
-          <div className="text-base font-medium mb-2">允许发布时间段</div>
-          <div className="flex items-center space-x-4">
-            <div className="relative flex-1">
-              <Input
-                type="time"
-                value={formData.startTime}
-                onChange={(e) => onChange({ startTime: e.target.value })}
-                className="h-12 pl-10 rounded-xl border-gray-200 text-base"
-              />
-              <Clock className="absolute left-3 top-4 h-4 w-4 text-gray-400" />
-            </div>
-            <span className="text-gray-500">至</span>
-            <div className="relative flex-1">
-              <Input
-                type="time"
-                value={formData.endTime}
-                onChange={(e) => onChange({ endTime: e.target.value })}
-                className="h-12 pl-10 rounded-xl border-gray-200 text-base"
-              />
-              <Clock className="absolute left-3 top-4 h-4 w-4 text-gray-400" />
-            </div>
-          </div>
-        </div>
-
-        <div>
-          <div className="text-base font-medium mb-2">每日同步数量</div>
-          <div className="flex items-center space-x-5">
-            <Button
-              variant="outline"
-              size="lg"
-              onClick={() => onChange({ syncCount: Math.max(1, formData.syncCount - 1) })}
-              className="h-12 w-12 rounded-xl bg-white border-gray-200 text-xl font-bold"
-            >
-              -
-            </Button>
-            <span className="w-8 text-center text-lg font-medium">{formData.syncCount}</span>
-            <Button
-              variant="outline"
-              size="lg"
-              onClick={() => onChange({ syncCount: formData.syncCount + 1 })}
-              className="h-12 w-12 rounded-xl bg-white border-gray-200 text-xl font-bold"
-            >
-             +
-            </Button>
-            <span className="text-gray-500">条朋友圈</span>
-          </div>
-        </div>
-
-        <div>
-          <div className="text-base font-medium mb-2">同步间隔</div>
-          <div className="flex items-center space-x-5">
-            <Button
-              variant="outline"
-              size="lg"
-              onClick={() => onChange({ interval: Math.max(1, formData.interval - 1) })}
-              className="h-12 w-12 rounded-xl bg-white border-gray-200 text-xl font-bold"
-            >
-              -
-            </Button>
-            <span className="w-8 text-center text-lg font-medium">{formData.interval}</span>
-            <Button
-              variant="outline"
-              size="lg"
-              onClick={() => onChange({ interval: formData.interval + 1 })}
-              className="h-12 w-12 rounded-xl bg-white border-gray-200 text-xl font-bold"
-            >
-              +
-            </Button>
-            <span className="text-gray-500">分钟</span>
-          </div>
-        </div>
-
-        <div>
-          <div className="text-base font-medium mb-2">账号类型</div>
-          <div className="flex space-x-4">
-            <div className="flex-1">
-              <Button
-                variant="ghost"
-                onClick={() => onChange({ accountType: "business" })}
-                className={`w-full h-12 justify-between rounded-lg ${
-                  formData.accountType === "business"
-                    ? "bg-blue-600 hover:bg-blue-600 text-white"
-                    : "bg-white hover:bg-gray-50"
-                }`}
-              >
-                业务号
-              </Button>
-            </div>
-            <div className="flex-1">
-              <Button
-                variant="ghost"
-                onClick={() => onChange({ accountType: "personal" })}
-                className={`w-full h-12 justify-between rounded-lg ${
-                  formData.accountType === "personal"
-                    ? "bg-blue-600 hover:bg-blue-600 text-white"
-                    : "bg-white hover:bg-gray-50"
-                }`}
-              >
-                人设号
-              </Button>
-            </div>
-          </div>
-        </div>
-
-        <div>
-          <div className="text-base font-medium mb-2">内容类型</div>
-          <div className="flex space-x-4">
-            {(['text', 'image', 'video'] as const).map((type) => (
-              <div key={type} className="flex-1">
-                <Button
-                  variant="ghost"
-                  onClick={() => {
-                    const newTypes = formData.contentTypes.includes(type as ContentType)
-                      ? formData.contentTypes.filter(t => t !== type as ContentType)
-                      : [...formData.contentTypes, type as ContentType];
-                    onChange({ contentTypes: newTypes });
-                  }}
-                  className={`w-full h-12 justify-between rounded-lg ${
-                    formData.contentTypes.includes(type as ContentType)
-                      ? "bg-blue-600 hover:bg-blue-600 text-white"
-                      : "bg-white hover:bg-gray-50"
-                  }`}
-                >
-                  {type === 'text' ? '文字' : type === 'image' ? '图片' : '视频'}
-                </Button>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div className="flex items-center justify-between py-2">
-          <span className="text-base font-medium">是否启用</span>
-          <Switch
-            checked={formData.enabled}
-            onCheckedChange={(checked) => onChange({ enabled: checked })}
-            className="data-[state=checked]:bg-blue-600 h-7 w-12"
-          />
-        </div>
-      </div>
-
-      <Button
-        onClick={onNext}
-        className="w-full h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base font-medium shadow-sm"
-      >
-        下一步
-      </Button>
-    </div>
-  );
-}
-
 export default function NewMomentsSyncTask() {
   const navigate = useNavigate();
   const { id } = useParams<{ id: string }>();
@@ -364,118 +166,236 @@ export default function NewMomentsSyncTask() {
     }
   };
 
-  return (
-    <Layout
-      header={
-        <div className="bg-white border-b">
-          <div className="flex items-center p-4">
-            <Button variant="ghost" size="icon" onClick={() => navigate(-1)} className="hover:bg-gray-50 mr-2">
-              <ChevronLeft className="h-5 w-5" />
-            </Button>
-            <h1 className="text-lg font-medium">{isEditMode ? '编辑朋友圈同步' : '新建朋友圈同步'}</h1>
+  // 基础设置步骤内容
+  const renderBasicSettings = () => {
+    return (
+      <div className="px-4">
+        <div className="mb-6">
+          <div className="text-base font-medium mb-2">任务名称</div>
+          <Input
+            value={formData.taskName}
+            onChange={(e) => handleUpdateFormData({ taskName: e.target.value })}
+            placeholder="请输入任务名称"
+            className="h-12 rounded-lg border border-gray-200 focus-visible:ring-0 focus-visible:border-blue-600"
+          />
+        </div>
+
+        <div className="mb-6">
+          <div className="text-base font-medium mb-2">每日同步数量</div>
+          <div className="flex items-center">
+            <button 
+              onClick={() => handleUpdateFormData({ syncCount: Math.max(1, formData.syncCount - 1) })}
+              className="w-12 h-12 rounded-lg bg-white border border-gray-200 flex items-center justify-center text-xl"
+            >
+              -
+            </button>
+            <div className="flex-1 text-center text-lg font-medium">
+              {formData.syncCount}
+            </div>
+            <button 
+              onClick={() => handleUpdateFormData({ syncCount: formData.syncCount + 1 })}
+              className="w-12 h-12 rounded-lg bg-white border border-gray-200 flex items-center justify-center text-xl"
+            >
+              +
+            </button>
+            <span className="ml-2 text-gray-500">条/天</span>
           </div>
         </div>
-      }
-    >
-      <div className="bg-gray-50">
-        <div className="p-4 space-y-6">
-          <div className="mt-4">
-            <StepIndicator currentStep={currentStep} />
-            <div className="mt-8">
-              {currentStep === 1 && (
-                <BasicSettings formData={formData} onChange={handleUpdateFormData} onNext={handleNext} />
-              )}
-              {currentStep === 2 && (
-                <div className="space-y-6">
-                  <div className="relative">
-                    <Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
-                    <Input
-                      placeholder="选择设备"
-                      className="h-12 pl-11 rounded-xl border-gray-200 text-base"
-                      onClick={() => setDeviceDialogOpen(true)}
-                      readOnly
-                    />
-                  </div>
-                  {formData.selectedDevices.length > 0 && (
-                    <div className="text-base text-gray-500">
-                      已选设备：{formData.selectedDevices.length} 个
-                      <div className="text-sm text-gray-400 mt-1">
-                        {formData.selectedDevices.map(id => {
-                          // 这里可以根据实际API获取设备名称
-                          return `设备 ${id}`;
-                        }).join(', ')}
-                      </div>
-                    </div>
-                  )}
-                  <div className="flex space-x-4 pt-4">
-                    <Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
-                      上一步
-                    </Button>
-                    <Button
-                      onClick={handleNext}
-                      className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
-                    >
-                      下一步
-                    </Button>
-                  </div>
-                  <DeviceSelectionDialog
-                    open={deviceDialogOpen}
-                    onOpenChange={setDeviceDialogOpen}
-                    selectedDevices={formData.selectedDevices}
-                    onSelect={(devices) => {
-                      handleUpdateFormData({ selectedDevices: devices });
-                    }}
-                  />
-                </div>
-              )}
-              {currentStep === 3 && (
-                <div className="space-y-6">
-                  <div className="relative">
-                    <Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
-                    <Input
-                      placeholder="选择内容库"
-                      className="h-12 pl-11 rounded-xl border-gray-200 text-base"
-                      onClick={() => setContentLibraryDialogOpen(true)}
-                      readOnly
-                    />
-                  </div>
-                  {formData.selectedLibraries.length > 0 && (
-                    <div className="text-base text-gray-500">
-                      已选内容库：{formData.selectedLibraries.length} 个
-                      <div className="text-sm text-gray-400 mt-1">
-                        {formData.selectedLibraries.map(id => {
-                          // 这里可以根据实际API获取内容库名称
-                          return `朋友圈内容库${id}`;
-                        }).join(', ')}
-                      </div>
-                    </div>
-                  )}
-                  <div className="flex space-x-4 pt-4">
-                    <Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
-                      上一步
-                    </Button>
-                    <Button
-                      onClick={handleComplete}
-                      loading={loading}
-                      className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
-                    >
-                      {loading ? (isEditMode ? '更新中...' : '创建中...') : (isEditMode ? '更新' : '完成')}
-                    </Button>
-                  </div>
-                  <ContentLibrarySelectionDialog
-                    open={contentLibraryDialogOpen}
-                    onOpenChange={setContentLibraryDialogOpen}
-                    selectedLibraries={formData.selectedLibraries}
-                    onSelect={(libraries) => {
-                      handleUpdateFormData({ selectedLibraries: libraries });
-                    }}
-                  />
-                </div>
-              )}
+
+        <div className="mb-6">
+          <div className="text-base font-medium mb-2">同步间隔</div>
+          <div className="flex items-center">
+            <button 
+              onClick={() => handleUpdateFormData({ interval: Math.max(1, formData.interval - 1) })}
+              className="w-12 h-12 rounded-lg bg-white border border-gray-200 flex items-center justify-center text-xl"
+            >
+              -
+            </button>
+            <div className="flex-1 text-center text-lg font-medium">
+              {formData.interval}
+            </div>
+            <button 
+              onClick={() => handleUpdateFormData({ interval: formData.interval + 1 })}
+              className="w-12 h-12 rounded-lg bg-white border border-gray-200 flex items-center justify-center text-xl"
+            >
+              +
+            </button>
+            <span className="ml-2 text-gray-500">分钟</span>
+          </div>
+          <div className="text-xs text-gray-500 mt-1">设置每次发朋友圈的时间间隔</div>
+        </div>
+
+        <div className="mb-6">
+          <div className="text-base font-medium mb-2">同步时间</div>
+          <div className="flex items-center space-x-4">
+            <div className="flex-1">
+              <Input
+                type="time"
+                value={formData.startTime}
+                onChange={(e) => handleUpdateFormData({ startTime: e.target.value })}
+                className="h-12 rounded-lg border-gray-200 text-base"
+              />
+            </div>
+            <span className="text-gray-500">至</span>
+            <div className="flex-1">
+              <Input
+                type="time"
+                value={formData.endTime}
+                onChange={(e) => handleUpdateFormData({ endTime: e.target.value })}
+                className="h-12 rounded-lg border-gray-200 text-base"
+              />
             </div>
           </div>
         </div>
+
+        <div className="mb-6">
+          <div className="text-base font-medium mb-2">账号类型</div>
+          <div className="flex space-x-4">
+            <button
+              onClick={() => handleUpdateFormData({ accountType: "business" })}
+              className={`flex-1 h-12 rounded-lg flex items-center justify-center ${
+                formData.accountType === "business"
+                  ? "bg-blue-50 border border-blue-500 text-blue-600"
+                  : "bg-white border border-gray-200"
+              }`}
+            >
+              业务号
+            </button>
+            <button
+              onClick={() => handleUpdateFormData({ accountType: "personal" })}
+              className={`flex-1 h-12 rounded-lg flex items-center justify-center ${
+                formData.accountType === "personal"
+                  ? "bg-blue-50 border border-blue-500 text-blue-600"
+                  : "bg-white border border-gray-200"
+              }`}
+            >
+              人设号
+            </button>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between mb-6">
+          <span className="text-base font-medium">是否启用</span>
+          <Switch
+            checked={formData.enabled}
+            onCheckedChange={(checked) => handleUpdateFormData({ enabled: checked })}
+            className="data-[state=checked]:bg-blue-600 h-7 w-12"
+          />
+        </div>
+
+        <Button
+          onClick={handleNext}
+          className="w-full h-12 bg-blue-500 hover:bg-blue-600 rounded-lg text-base font-medium text-white"
+        >
+          下一步
+        </Button>
       </div>
-    </Layout>
+    );
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <header className="sticky top-0 z-10 bg-white border-b">
+        <div className="flex items-center h-14 px-4">
+          <Button variant="ghost" size="icon" onClick={() => navigate(-1)} className="hover:bg-gray-50">
+            <ChevronLeft className="h-6 w-6" />
+          </Button>
+          <h1 className="ml-2 text-lg font-medium">新建朋友圈同步</h1>
+        </div>
+      </header>
+
+      <div className="mt-8">
+        <StepIndicator currentStep={currentStep} />
+
+        {currentStep === 1 && renderBasicSettings()}
+        
+        {currentStep === 2 && (
+          <div className="px-4 space-y-6">
+            <Input
+              placeholder="选择设备"
+              className="h-12 rounded-lg border-gray-200"
+              onClick={() => setDeviceDialogOpen(true)}
+              readOnly
+            />
+            
+            {formData.selectedDevices.length > 0 && (
+              <div className="text-base text-gray-500">
+                已选设备：{formData.selectedDevices.length} 个
+              </div>
+            )}
+            
+            <div className="flex space-x-4 pt-4">
+              <Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-lg">
+                上一步
+              </Button>
+              <Button
+                onClick={handleNext}
+                className="flex-1 h-12 bg-blue-500 hover:bg-blue-600 rounded-lg text-white"
+              >
+                下一步
+              </Button>
+            </div>
+            
+            <DeviceSelectionDialog
+              open={deviceDialogOpen}
+              onOpenChange={setDeviceDialogOpen}
+              selectedDevices={formData.selectedDevices}
+              onSelect={(devices) => {
+                handleUpdateFormData({ selectedDevices: devices });
+              }}
+            />
+          </div>
+        )}
+        
+        {currentStep === 3 && (
+          <div className="px-4 space-y-6">
+            <Input
+              placeholder="选择内容库"
+              className="h-12 rounded-lg border-gray-200"
+              onClick={() => setContentLibraryDialogOpen(true)}
+              readOnly
+            />
+            
+            {formData.selectedLibraries.length > 0 && (
+              <div className="text-base text-gray-500">
+                已选内容库：{formData.selectedLibraries.length} 个
+              </div>
+            )}
+            
+            <div className="flex space-x-4 pt-4">
+              <Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-lg">
+                上一步
+              </Button>
+              <Button
+                onClick={handleComplete}
+                loading={loading}
+                className="flex-1 h-12 bg-blue-500 hover:bg-blue-600 rounded-lg text-white"
+              >
+                {loading ? '创建中...' : '完成'}
+              </Button>
+            </div>
+            
+            <ContentLibrarySelectionDialog
+              open={contentLibraryDialogOpen}
+              onOpenChange={setContentLibraryDialogOpen}
+              selectedLibraries={formData.selectedLibraries}
+              onSelect={(libraries) => {
+                handleUpdateFormData({ selectedLibraries: libraries });
+              }}
+            />
+          </div>
+        )}
+      </div>
+
+      <div className="fixed bottom-0 left-0 right-0 p-4">
+        <div className="flex justify-center">
+          <button className="w-12 h-12 bg-white rounded-full shadow-md flex items-center justify-center">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M13 10V3L4 14H11V21L20 10H13Z" stroke="#CCCCCC" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
   );
 }

nkebao/src/pages/workspace/traffic-distribution/TrafficDistribution.tsx

@@ -10,6 +10,7 @@ import {
   Edit,
   Trash2,
   Pause,
+  Play,
   Users,
   Share2,
 } from 'lucide-react';
@@ -23,70 +24,57 @@ import PageHeader from '@/components/PageHeader';
 import BottomNav from '@/components/BottomNav';
 import { useToast } from '@/components/ui/toast';
 import '@/components/Layout.css';
-
-interface DistributionRule {
-  id: string;
-  name: string;
-  status: 'running' | 'paused' | 'completed';
-  deviceCount: number;
-  totalTraffic: number;
-  distributedTraffic: number;
-  lastDistributionTime: string;
-  createTime: string;
-  creator: string;
-  distributionInterval: number;
-  maxDistributionPerDay: number;
-  timeRange: { start: string; end: string };
-  targetChannels: string[];
-  distributionRatio: Record<string, number>;
-  priority: 'high' | 'medium' | 'low';
-  filterConditions: string[];
-}
+import { 
+  fetchDistributionRules, 
+  deleteDistributionRule, 
+  toggleDistributionRuleStatus,
+  DistributionRule,
+  WorkbenchTaskStatus
+} from '@/api/trafficDistribution';
 
 export default function TrafficDistribution() {
   const navigate = useNavigate();
   const { toast } = useToast();
-  // 移除expandedRuleId状态
   const [searchTerm, setSearchTerm] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const [tasks, setTasks] = useState<DistributionRule[]>([
-    {
-      id: '1',
-      name: '流量分发',
-      deviceCount: 2,
-      totalTraffic: 2,
-      distributedTraffic: 125,
-      lastDistributionTime: '2025-07-02 09:00',
-      createTime: '2024-11-20 19:04:14',
-      creator: '售前',
-      status: 'running',
-      distributionInterval: 300,
-      maxDistributionPerDay: 2000,
-      timeRange: { start: '08:00', end: '22:00' },
-      targetChannels: ['抖音', '小红书', '公众号'],
-      distributionRatio: {
-        '抖音': 40,
-        '小红书': 35,
-        '公众号': 25,
-      },
-      priority: 'high',
-      filterConditions: ['VIP客户', '高价值'],
-    },
-  ]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalItems, setTotalItems] = useState(0);
+  const [tasks, setTasks] = useState<DistributionRule[]>([]);
 
-  // 移除展开功能
-
-  const handleDelete = (ruleId: string) => {
+  // 处理删除
+  const handleDelete = async (ruleId: string) => {
     const ruleToDelete = tasks.find((rule) => rule.id === ruleId);
     if (!ruleToDelete) return;
 
     if (!window.confirm(`确定要删除"${ruleToDelete.name}"吗？`)) return;
 
-    setTasks(tasks.filter((rule) => rule.id !== ruleId));
-    toast({
-      title: '删除成功',
-      description: '已成功删除分发规则',
-    });
+    try {
+      setIsLoading(true);
+      const response = await deleteDistributionRule(ruleId);
+      
+      if (response.code === 200) {
+        setTasks(tasks.filter((rule) => rule.id !== ruleId));
+        toast({
+          title: '删除成功',
+          description: '已成功删除分发规则',
+        });
+      } else {
+        toast({
+          title: '删除失败',
+          description: response.msg || '操作失败，请稍后重试',
+          variant: 'destructive',
+        });
+      }
+    } catch (error) {
+      console.error('删除流量分发规则失败:', error);
+      toast({
+        title: '删除失败',
+        description: '操作失败，请稍后重试',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   const handleEdit = (ruleId: string) => {
@@ -97,57 +85,86 @@ export default function TrafficDistribution() {
     navigate(`/workspace/traffic-distribution/${ruleId}`);
   };
 
-  const handleCopy = (ruleId: string) => {
+  const handleCopy = async (ruleId: string) => {
     const ruleToCopy = tasks.find((rule) => rule.id === ruleId);
     if (ruleToCopy) {
-      const newRule = {
-        ...ruleToCopy,
-        id: `${Date.now()}`,
-        name: `${ruleToCopy.name} (复制)`,
-        createTime: new Date().toISOString().replace('T', ' ').substring(0, 19),
-      };
-      setTasks([...tasks, newRule]);
-      toast({
-        title: '复制成功',
-        description: '已成功复制分发规则',
-      });
+      try {
+        // 这里可以添加复制API调用
+        toast({
+          title: '复制成功',
+          description: '已成功复制分发规则',
+        });
+        // 重新加载列表
+        fetchData();
+      } catch (error) {
+        console.error('复制流量分发规则失败:', error);
+        toast({
+          title: '复制失败',
+          description: '操作失败，请稍后重试',
+          variant: 'destructive',
+        });
+      }
     }
   };
 
-  const toggleRuleStatus = (ruleId: string) => {
+  const toggleRuleStatus = async (ruleId: string) => {
     const rule = tasks.find((r) => r.id === ruleId);
     if (!rule) return;
 
-    setTasks(
-      tasks.map((rule) =>
-        rule.id === ruleId ? { ...rule, status: rule.status === 'running' ? 'paused' : 'running' } : rule,
-      ),
-    );
+    try {
+      setIsLoading(true);
+      const newStatus = rule.status === WorkbenchTaskStatus.RUNNING 
+        ? WorkbenchTaskStatus.PAUSED 
+        : WorkbenchTaskStatus.RUNNING;
+      
+      const response = await toggleDistributionRuleStatus(ruleId, newStatus);
+      
+      if (response.code === 200) {
+        setTasks(
+          tasks.map((task) =>
+            task.id === ruleId ? { ...task, status: newStatus } : task
+          )
+        );
 
-    toast({
-      title: rule.status === 'running' ? '已暂停' : '已启动',
-      description: `${rule.name}规则${rule.status === 'running' ? '已暂停' : '已启动'}`,
-    });
+        toast({
+          title: newStatus === WorkbenchTaskStatus.RUNNING ? '已启动' : '已暂停',
+          description: `${rule.name}规则${newStatus === WorkbenchTaskStatus.RUNNING ? '已启动' : '已暂停'}`,
+        });
+      } else {
+        toast({
+          title: '操作失败',
+          description: response.msg || '操作失败，请稍后重试',
+          variant: 'destructive',
+        });
+      }
+    } catch (error) {
+      console.error('切换流量分发规则状态失败:', error);
+      toast({
+        title: '操作失败',
+        description: '操作失败，请稍后重试',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   const handleCreateNew = () => {
     navigate('/workspace/traffic-distribution/new');
-    toast({
-      title: '创建新分发',
-      description: '正在前往创建页面',
-    });
   };
   
   // 添加卡片菜单组件
   type CardMenuProps = {
+    rule: DistributionRule;
     onEdit: () => void;
-    onPause: () => void;
+    onToggleStatus: () => void;
     onDelete: () => void;
   };
   
-  function CardMenu({ onEdit, onPause, onDelete }: CardMenuProps) {
+  function CardMenu({ rule, onEdit, onToggleStatus, onDelete }: CardMenuProps) {
     const [open, setOpen] = useState(false);
     const menuRef = useRef<HTMLDivElement | null>(null);
+    const isRunning = rule.status === WorkbenchTaskStatus.RUNNING;
   
     useEffect(() => {
       function handleClickOutside(event: MouseEvent) {
@@ -182,8 +199,9 @@ export default function TrafficDistribution() {
             <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 onClick={() => { onToggleStatus(); 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=""}>
+              {isRunning ? <Pause className="h-4 w-4 mr-2" /> : <Play className="h-4 w-4 mr-2" />}
+              {isRunning ? '暂停计划' : '启动计划'}
             </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" />删除计划
@@ -198,180 +216,216 @@ export default function TrafficDistribution() {
     rule.name.toLowerCase().includes(searchTerm.toLowerCase()),
   );
 
-  const getStatusColor = (status: string) => {
+  const getStatusColor = (status: number) => {
     switch (status) {
-      case 'running':
+      case WorkbenchTaskStatus.RUNNING:
         return 'bg-green-100 text-green-800';
-      case 'paused':
+      case WorkbenchTaskStatus.PAUSED:
         return 'bg-gray-100 text-gray-800';
-      case 'completed':
+      case WorkbenchTaskStatus.COMPLETED:
         return 'bg-blue-100 text-blue-800';
+      case WorkbenchTaskStatus.FAILED:
+        return 'bg-red-100 text-red-800';
       default:
         return 'bg-gray-100 text-gray-800';
     }
   };
 
-  const getStatusText = (status: string) => {
+  const getStatusText = (status: number) => {
     switch (status) {
-      case 'running':
+      case WorkbenchTaskStatus.RUNNING:
         return '进行中';
-      case 'paused':
+      case WorkbenchTaskStatus.PAUSED:
         return '已暂停';
-      case 'completed':
+      case WorkbenchTaskStatus.COMPLETED:
         return '已完成';
+      case WorkbenchTaskStatus.FAILED:
+        return '已失败';
+      case WorkbenchTaskStatus.PENDING:
+        return '待处理';
       default:
         return '未知';
     }
   };
 
-  // 模拟加载数据
-  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);
+  // 加载数据
+  const fetchData = async (page = currentPage, keyword = searchTerm) => {
+    setIsLoading(true);
+    try {
+      const response = await fetchDistributionRules({
+        page,
+        limit: 10,
+        keyword
+      });
+      
+      if (response.code === 200 && response.data) {
+        setTasks(response.data.list);
+        setTotalItems(response.data.total);
+        setCurrentPage(response.data.page);
+      } else {
         toast({
           title: '获取数据失败',
-          description: '无法获取流量分发数据，请稍后重试',
+          description: response.msg || '无法获取流量分发数据，请稍后重试',
           variant: 'destructive',
         });
-      } finally {
-        setIsLoading(false);
       }
-    };
+    } catch (error) {
+      console.error('获取流量分发数据失败:', error);
+      toast({
+        title: '获取数据失败',
+        description: '无法获取流量分发数据，请稍后重试',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
+  // 初始加载和搜索
+  useEffect(() => {
+    fetchData(1, searchTerm);
+  }, []);
+
+  // 处理搜索
+  const handleSearch = () => {
+    fetchData(1, searchTerm);
+  };
+
+  // 处理刷新
+  const handleRefresh = () => {
     fetchData();
-  }, [toast]);
+  };
 
   return (
     <Layout
-      header={
-        <PageHeader
-          title="流量分发"
-          defaultBackPath="/workspace"
-          rightContent={
-            <Button onClick={handleCreateNew} className="bg-blue-600 hover:bg-blue-700">
-              <Plus className="h-4 w-4 mr-2" />
+      header={<PageHeader title="流量分发" defaultBackPath="/workspace" />}
+      footer={<BottomNav activeTab="workspace" />}
+    >
+      <div className="p-4 space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={16} />
+              <Input
+                placeholder="搜索规则名称"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="pl-9 h-10 w-48"
+              />
+            </div>
+            <Button variant="outline" size="sm" onClick={handleSearch} className="h-10">
+              搜索
+            </Button>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Button variant="outline" size="icon" onClick={handleRefresh} className="h-10 w-10">
+              <RefreshCw size={16} />
+            </Button>
+            <Button onClick={handleCreateNew} className="h-10">
+              <Plus size={16} className="mr-1" />
               新建分发
             </Button>
-          }
-        />
-      }
-      footer={<BottomNav />}
-    >
-      <div className="bg-gray-50 min-h-screen pb-20">
-        <div className="p-4">
-          {/* 搜索和筛选 */}
-          <Card className="p-4 mb-4">
-            <div className="flex items-center space-x-2">
-              <div className="relative flex-1">
-                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
-                <Input
-                  placeholder="搜索计划名称"
-                  className="pl-9"
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                />
-              </div>
-              <Button variant="outline" size="icon">
-                <Filter className="h-4 w-4" />
-              </Button>
-              <Button variant="outline" size="icon" onClick={() => window.location.reload()}>
-                <RefreshCw className="h-4 w-4" />
-              </Button>
-            </div>
-          </Card>
-
-          {/* 规则列表 */}
-          <div className="space-y-4">
-            {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>
-                <Button onClick={handleCreateNew}>
-                  <Plus className="h-4 w-4 mr-2" />
-                  新建分发
-                </Button>
-              </Card>
-            ) : (
-              filteredRules.map((rule) => (
-                <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>
-                      <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>
-              ))
-            )}
           </div>
         </div>
+
+        {isLoading ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {[1, 2, 3].map((i) => (
+              <Card key={i} className="p-4 animate-pulse">
+                <div className="h-6 bg-gray-200 rounded w-3/4 mb-2"></div>
+                <div className="h-4 bg-gray-200 rounded w-1/2 mb-4"></div>
+                <div className="flex justify-between items-center">
+                  <div className="h-5 bg-gray-200 rounded w-1/4"></div>
+                  <div className="h-5 bg-gray-200 rounded w-1/4"></div>
+                </div>
+              </Card>
+            ))}
+          </div>
+        ) : filteredRules.length > 0 ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {filteredRules.map((rule) => (
+              <Card key={rule.id} className="overflow-hidden">
+                <div className="p-4">
+                  <div className="flex justify-between items-start">
+                    <h3 
+                      className="font-medium text-lg cursor-pointer hover:text-blue-600 truncate max-w-[200px]"
+                      onClick={() => handleView(rule.id)}
+                    >
+                      {rule.name}
+                    </h3>
+                    <CardMenu 
+                      rule={rule}
+                      onEdit={() => handleEdit(rule.id)} 
+                      onToggleStatus={() => toggleRuleStatus(rule.id)} 
+                      onDelete={() => handleDelete(rule.id)} 
+                    />
+                  </div>
+                  <div className="mt-1 text-sm text-gray-500 flex items-center">
+                    <Clock className="h-3.5 w-3.5 mr-1" />
+                    创建于 {rule.createTime?.substring(0, 16) || '未知时间'}
+                  </div>
+                  <div className="mt-4 flex justify-between items-center">
+                    <Badge className={getStatusColor(rule.status)}>
+                      {getStatusText(rule.status)}
+                    </Badge>
+                    <div className="text-sm text-gray-500">
+                      <span className="font-medium">{rule.distributedTraffic || 0}</span>
+                      <span className="mx-1">/</span>
+                      <span>{rule.totalTraffic || 0}</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="bg-gray-50 px-4 py-2 flex justify-between items-center">
+                  <div className="text-sm text-gray-500 flex items-center">
+                    <Users className="h-3.5 w-3.5 mr-1" />
+                    {rule.deviceCount || 0} 个设备
+                  </div>
+                  <div className="flex items-center">
+                    <Switch
+                      checked={rule.status === WorkbenchTaskStatus.RUNNING}
+                      onCheckedChange={() => toggleRuleStatus(rule.id)}
+                      className="data-[state=checked]:bg-blue-600"
+                    />
+                  </div>
+                </div>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-20">
+            <div className="text-gray-400 mb-2">暂无流量分发规则</div>
+            <Button variant="outline" onClick={handleCreateNew}>
+              <Plus size={16} className="mr-1" />
+              创建新规则
+            </Button>
+          </div>
+        )}
+
+        {totalItems > 10 && (
+          <div className="flex justify-center mt-6">
+            <div className="flex space-x-1">
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={currentPage === 1}
+                onClick={() => fetchData(currentPage - 1)}
+              >
+                上一页
+              </Button>
+              <div className="flex items-center px-3 text-sm">
+                第 {currentPage} 页，共 {Math.ceil(totalItems / 10)} 页
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={currentPage >= Math.ceil(totalItems / 10)}
+                onClick={() => fetchData(currentPage + 1)}
+              >
+                下一页
+              </Button>
+            </div>
+          </div>
+        )}
       </div>
     </Layout>
   );

nkebao/src/types/device.ts

@@ -20,6 +20,7 @@ export interface ServerDevice {
   wechatId: string;
   alive: number;
   totalFriend: number;
+  nickname: string;
 }
 
 // 服务端API返回的设备列表响应