feat: 保存了

nkebao/src/api/content.ts

@@ -0,0 +1,69 @@
+import { get, post, put, del } from './request';
+import type { ApiResponse, PaginatedResponse } from '@/types/common';
+
+// 内容库类型定义
+export interface ContentLibrary {
+  id: string;
+  name: string;
+  sourceType: number;
+  creatorName: string;
+  updateTime: string;
+  status: number;
+}
+
+// 内容库列表响应
+export interface ContentLibraryListResponse {
+  code: number;
+  msg: string;
+  data: {
+    list: ContentLibrary[];
+    total: number;
+    page: number;
+    limit: number;
+  };
+}
+
+// 获取内容库列表
+export const fetchContentLibraryList = async (
+  page: number = 1, 
+  limit: number = 100, 
+  keyword?: string
+): Promise<ContentLibraryListResponse> => {
+  const params = new URLSearchParams();
+  params.append('page', page.toString());
+  params.append('limit', limit.toString());
+  
+  if (keyword) {
+    params.append('keyword', keyword);
+  }
+  
+  return get<ContentLibraryListResponse>(`/v1/content/library/list?${params.toString()}`);
+};
+
+// 内容库API对象
+export const contentLibraryApi = {
+  // 获取内容库列表
+  async getList(page: number = 1, limit: number = 100, keyword?: string): Promise<ContentLibraryListResponse> {
+    return fetchContentLibraryList(page, limit, keyword);
+  },
+
+  // 创建内容库
+  async create(params: { name: string; sourceType: number }): Promise<ApiResponse<ContentLibrary>> {
+    return post<ApiResponse<ContentLibrary>>('/v1/content/library', params);
+  },
+
+  // 更新内容库
+  async update(id: string, params: Partial<ContentLibrary>): Promise<ApiResponse<ContentLibrary>> {
+    return put<ApiResponse<ContentLibrary>>(`/v1/content/library/${id}`, params);
+  },
+
+  // 删除内容库
+  async delete(id: string): Promise<ApiResponse<void>> {
+    return del<ApiResponse<void>>(`/v1/content/library/${id}`);
+  },
+
+  // 获取内容库详情
+  async getById(id: string): Promise<ApiResponse<ContentLibrary>> {
+    return get<ApiResponse<ContentLibrary>>(`/v1/content/library/${id}`);
+  },
+}; 

nkebao/src/components/ContentLibrarySelectionDialog.tsx

@@ -0,0 +1,174 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Search, RefreshCw, Loader2 } from 'lucide-react';
+import { fetchContentLibraryList } from '@/api/content';
+import { ContentLibrary } from '@/api/content';
+import { useToast } from '@/components/ui/toast';
+
+interface ContentLibrarySelectionDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedLibraries: string[];
+  onSelect: (libraries: string[]) => void;
+}
+
+export function ContentLibrarySelectionDialog({
+  open,
+  onOpenChange,
+  selectedLibraries,
+  onSelect,
+}: ContentLibrarySelectionDialogProps) {
+  const { toast } = useToast();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [libraries, setLibraries] = useState<ContentLibrary[]>([]);
+  const [tempSelected, setTempSelected] = useState<string[]>([]);
+
+  // 获取内容库列表
+  const fetchLibraries = useCallback(async () => {
+    setLoading(true);
+    try {
+      const response = await fetchContentLibraryList(1, 100, searchQuery);
+      if (response.code === 200 && response.data) {
+        setLibraries(response.data.list);
+      } else {
+        toast({ title: '获取内容库列表失败', description: response.msg, variant: 'destructive' });
+      }
+    } catch (error) {
+      console.error('获取内容库列表失败:', error);
+      toast({ title: '获取内容库列表失败', description: '请检查网络连接', variant: 'destructive' });
+    } finally {
+      setLoading(false);
+    }
+  }, [searchQuery, toast]);
+
+  useEffect(() => {
+    if (open) {
+      fetchLibraries();
+      setTempSelected(selectedLibraries);
+    }
+  }, [open, searchQuery, selectedLibraries, fetchLibraries]);
+
+  const handleRefresh = () => {
+    fetchLibraries();
+  };
+
+  const handleSelectAll = () => {
+    if (tempSelected.length === libraries.length) {
+      setTempSelected([]);
+    } else {
+      setTempSelected(libraries.map(lib => lib.id));
+    }
+  };
+
+  const handleLibraryToggle = (libraryId: string) => {
+    setTempSelected(prev => 
+      prev.includes(libraryId) 
+        ? prev.filter(id => id !== libraryId)
+        : [...prev, libraryId]
+    );
+  };
+
+  const handleDialogOpenChange = (open: boolean) => {
+    if (!open) {
+      setTempSelected(selectedLibraries);
+    }
+    onOpenChange(open);
+  };
+
+  const handleConfirm = () => {
+    onSelect(tempSelected);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>选择内容库</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex items-center space-x-2 my-4">
+          <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={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+          <Button variant="outline" size="icon" onClick={handleRefresh} disabled={loading}>
+            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
+          </Button>
+        </div>
+
+        <div className="flex justify-between items-center mb-2">
+          <div className="text-sm text-gray-500">
+            已选择 {tempSelected.length} 个内容库
+          </div>
+          <div className="flex gap-2">
+            <Button 
+              variant="outline" 
+              size="sm" 
+              onClick={handleSelectAll}
+              disabled={loading || libraries.length === 0}
+            >
+              {tempSelected.length === libraries.length ? "取消全选" : "全选"}
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto -mx-6 px-6 max-h-[400px]">
+          <div className="space-y-2">
+            {loading ? (
+              <div className="flex items-center justify-center h-full text-gray-500">
+                加载中...
+              </div>
+            ) : libraries.length === 0 ? (
+              <div className="flex items-center justify-center h-full text-gray-500">
+                暂无数据
+              </div>
+            ) : (
+              libraries.map((library) => (
+                <label
+                  key={library.id}
+                  className="flex items-center justify-between p-4 rounded-lg border hover:bg-gray-50 cursor-pointer"
+                >
+                  <div className="flex items-center space-x-3 flex-1 min-w-0 pr-4">
+                    <Checkbox 
+                      checked={tempSelected.includes(library.id)}
+                      onCheckedChange={() => handleLibraryToggle(library.id)}
+                    />
+                    <div className="min-w-0 flex-1">
+                      <div className="font-medium truncate mb-1">{library.name}</div>
+                      <div className="text-sm text-gray-500 truncate mb-1">创建人：{library.creatorName}</div>
+                      <div className="text-sm text-gray-500 truncate">更新时间：{new Date(library.updateTime).toLocaleString()}</div>
+                    </div>
+                  </div>
+                </label>
+              ))
+            )}
+          </div>
+        </div>
+
+        <div className="flex justify-between items-center mt-4 pt-4 border-t">
+          <div className="text-sm text-gray-500">
+            已选择 {tempSelected.length} 个内容库
+          </div>
+          <div className="flex space-x-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              取消
+            </Button>
+            <Button onClick={handleConfirm}>
+              确定{tempSelected.length > 0 ? ` (${tempSelected.length})` : ''}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+} 

nkebao/src/components/DeviceSelectionDialog.tsx

@@ -0,0 +1,184 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Search, RefreshCw, Loader2 } from 'lucide-react';
+import { fetchDeviceList } from '@/api/devices';
+import { ServerDevice } from '@/types/device';
+import { useToast } from '@/components/ui/toast';
+
+interface Device {
+  id: string;
+  name: string;
+  imei: string;
+  wxid: string;
+  status: 'online' | 'offline';
+  usedInPlans: number;
+}
+
+interface DeviceSelectionDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedDevices: string[];
+  onSelect: (devices: string[]) => void;
+}
+
+export function DeviceSelectionDialog({ 
+  open, 
+  onOpenChange, 
+  selectedDevices, 
+  onSelect 
+}: DeviceSelectionDialogProps) {
+  const { toast } = useToast();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [loading, setLoading] = useState(false);
+  const [devices, setDevices] = useState<Device[]>([]);
+
+  // 获取设备列表
+  const fetchDevices = useCallback(async () => {
+    setLoading(true);
+    try {
+      const response = await fetchDeviceList(1, 100, searchQuery);
+      if (response.code === 200 && response.data) {
+        // 转换服务端数据格式为组件需要的格式
+        const convertedDevices: Device[] = response.data.list.map((serverDevice: ServerDevice) => ({
+          id: serverDevice.id.toString(),
+          name: serverDevice.memo || `设备 ${serverDevice.id}`,
+          imei: serverDevice.imei,
+          wxid: serverDevice.wechatId || '',
+          status: serverDevice.alive === 1 ? 'online' : 'offline',
+          usedInPlans: 0, // 这个字段需要从其他API获取
+        }));
+        setDevices(convertedDevices);
+      } else {
+        toast({ title: '获取设备列表失败', description: response.msg, variant: 'destructive' });
+      }
+    } catch (error) {
+      console.error('获取设备列表失败:', error);
+      toast({ title: '获取设备列表失败', description: '请检查网络连接', variant: 'destructive' });
+    } finally {
+      setLoading(false);
+    }
+  }, [searchQuery, toast]);
+
+  useEffect(() => {
+    if (open) {
+      fetchDevices();
+    }
+  }, [open, searchQuery, fetchDevices]);
+
+  const filteredDevices = devices.filter((device) => {
+    const matchesSearch =
+      device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      device.imei.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      device.wxid.toLowerCase().includes(searchQuery.toLowerCase());
+
+    const matchesStatus =
+      statusFilter === 'all' ||
+      (statusFilter === 'online' && device.status === 'online') ||
+      (statusFilter === 'offline' && device.status === 'offline');
+
+    return matchesSearch && matchesStatus;
+  });
+
+  const handleDeviceSelect = (deviceId: string) => {
+    if (selectedDevices.includes(deviceId)) {
+      onSelect(selectedDevices.filter(id => id !== deviceId));
+    } else {
+      onSelect([...selectedDevices, deviceId]);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>选择设备</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex items-center space-x-4 my-4">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+            <Input
+              placeholder="搜索设备IMEI/备注/微信号"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+          <select 
+            value={statusFilter} 
+            onChange={(e) => setStatusFilter(e.target.value)}
+            className="w-32 px-3 py-2 border border-gray-300 rounded-md text-sm"
+          >
+            <option value="all">全部状态</option>
+            <option value="online">在线</option>
+            <option value="offline">离线</option>
+          </select>
+          <Button variant="outline" size="icon" onClick={fetchDevices} disabled={loading}>
+            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
+          </Button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto -mx-6 px-6 max-h-[400px]">
+          <div className="space-y-2">
+            {loading ? (
+              <div className="flex items-center justify-center h-full text-gray-500">
+                加载中...
+              </div>
+            ) : filteredDevices.length === 0 ? (
+              <div className="flex items-center justify-center h-full text-gray-500">
+                暂无数据
+              </div>
+            ) : (
+              filteredDevices.map((device) => (
+                <label
+                  key={device.id}
+                  className="flex items-start space-x-3 p-4 rounded-lg hover:bg-gray-50 cursor-pointer border"
+                >
+                  <input
+                    type="checkbox"
+                    checked={selectedDevices.includes(device.id)}
+                    onChange={() => handleDeviceSelect(device.id)}
+                    className="mt-1 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"
+                  />
+                  <div className="flex-1">
+                    <div className="flex items-center justify-between">
+                      <span className="font-medium">{device.name}</span>
+                      <Badge variant={device.status === 'online' ? 'default' : 'secondary'}>
+                        {device.status === 'online' ? '在线' : '离线'}
+                      </Badge>
+                    </div>
+                    <div className="text-sm text-gray-500 mt-1">
+                      <div>IMEI: {device.imei}</div>
+                      <div>微信号: {device.wxid}</div>
+                    </div>
+                    {device.usedInPlans > 0 && (
+                      <div className="text-sm text-orange-500 mt-1">已用于 {device.usedInPlans} 个计划</div>
+                    )}
+                  </div>
+                </label>
+              ))
+            )}
+          </div>
+        </div>
+
+        <div className="flex justify-between items-center mt-4 pt-4 border-t">
+          <div className="text-sm text-gray-500">
+            已选择 {selectedDevices.length} 个设备
+          </div>
+          <div className="flex space-x-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              取消
+            </Button>
+            <Button onClick={() => onOpenChange(false)}>
+              确定{selectedDevices.length > 0 ? ` (${selectedDevices.length})` : ''}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+} 

nkebao/src/components/ui/checkbox.tsx

@@ -7,6 +7,7 @@ interface CheckboxProps {
   disabled?: boolean;
   className?: string;
   id?: string;
+  onClick?: (e: React.MouseEvent) => void;
 }
 
 export function Checkbox({ 
@@ -15,7 +16,8 @@ export function Checkbox({
   onChange, 
   disabled = false, 
   className = '',
-  id 
+  id,
+  onClick
 }: CheckboxProps) {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newChecked = e.target.checked;
@@ -29,6 +31,7 @@ export function Checkbox({
       id={id}
       checked={checked}
       onChange={handleChange}
+      onClick={onClick}
       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}`}
     />

nkebao/src/components/ui/dialog.tsx

@@ -27,7 +27,7 @@ export function Dialog({ open, onOpenChange, children }: DialogProps) {
         className="fixed inset-0 bg-black bg-opacity-50"
         onClick={() => onOpenChange(false)}
       />
-      <div className="relative bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
+      <div className="relative z-10">
         {children}
       </div>
     </div>
@@ -41,7 +41,7 @@ interface DialogContentProps {
 
 export function DialogContent({ children, className = '' }: DialogContentProps) {
   return (
-    <div className={`p-6 ${className}`}>
+    <div className={`p-6 bg-white rounded-lg shadow-xl max-w-md w-full mx-4 ${className}`}>
       {children}
     </div>
   );

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

@@ -8,6 +8,8 @@ import { createMomentsSyncTask } from '@/api/momentsSync';
 import { ChevronLeft, Clock, Plus, Minus, Search } from 'lucide-react';
 import Layout from '@/components/Layout';
 import BottomNav from '@/components/BottomNav';
+import { DeviceSelectionDialog } from '@/components/DeviceSelectionDialog';
+import { ContentLibrarySelectionDialog } from '@/components/ContentLibrarySelectionDialog';
 
 // 步骤指示器组件
 interface StepIndicatorProps {
@@ -23,6 +25,17 @@ function StepIndicator({ currentStep }: StepIndicatorProps) {
 
   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}
@@ -31,10 +44,10 @@ function StepIndicator({ currentStep }: StepIndicatorProps) {
           }`}
         >
           <div
-            className={`w-8 h-8 rounded-full flex items-center justify-center transition-all ${
+            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 border-gray-200 text-gray-400"
+                : "bg-white border-2 border-gray-200 text-gray-400"
             }`}
           >
             {step.id}
@@ -42,12 +55,6 @@ function StepIndicator({ currentStep }: StepIndicatorProps) {
           <div className="text-xs mt-2 font-medium">{step.subtitle}</div>
         </div>
       ))}
-      <div className="absolute top-4 left-0 right-0 h-[1px] bg-gray-100 -z-10">
-        <div
-          className="absolute top-0 left-0 h-full bg-blue-600 transition-all duration-300"
-          style={{ width: `${((currentStep - 1) / (steps.length - 1)) * 100}%` }}
-        />
-      </div>
     </div>
   );
 }
@@ -59,8 +66,12 @@ interface BasicSettingsProps {
     startTime: string;
     endTime: string;
     syncCount: number;
+    interval: number;
     accountType: "business" | "personal";
     enabled: boolean;
+    contentTypes: ('text' | 'image' | 'video')[];
+    targetTags: string[];
+    filterKeywords: string[];
   };
   onChange: (data: Partial<BasicSettingsProps["formData"]>) => void;
   onNext: () => void;
@@ -112,23 +123,47 @@ function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
               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"
+              className="h-12 w-12 rounded-xl bg-white border-gray-200 text-xl font-bold"
             >
-              <Minus className="h-5 w-5" />
+              -
             </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"
+              className="h-12 w-12 rounded-xl bg-white border-gray-200 text-xl font-bold"
             >
-              <Plus className="h-5 w-5" />
+             +
             </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">
@@ -161,6 +196,32 @@ function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
           </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)
+                      ? formData.contentTypes.filter(t => t !== type)
+                      : [...formData.contentTypes, type];
+                    onChange({ contentTypes: newTypes });
+                  }}
+                  className={`w-full h-12 justify-between rounded-lg ${
+                    formData.contentTypes.includes(type)
+                      ? "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
@@ -186,15 +247,21 @@ export default function NewMomentsSyncTask() {
   const { toast } = useToast();
   const [currentStep, setCurrentStep] = useState(1);
   const [loading, setLoading] = useState(false);
+  const [deviceDialogOpen, setDeviceDialogOpen] = useState(false);
+  const [contentLibraryDialogOpen, setContentLibraryDialogOpen] = useState(false);
   const [formData, setFormData] = useState({
     taskName: '',
     startTime: '06:00',
     endTime: '23:59',
     syncCount: 5,
+    interval: 30, // 时间间隔，单位：分钟
     accountType: 'business' as 'business' | 'personal',
     enabled: true,
     selectedDevices: [] as string[],
     selectedLibraries: [] as string[],
+    contentTypes: ['text', 'image', 'video'] as ('text' | 'image' | 'video')[],
+    targetTags: [] as string[],
+    filterKeywords: [] as string[],
   });
 
   const handleUpdateFormData = (data: Partial<typeof formData>) => {
@@ -230,13 +297,13 @@ export default function NewMomentsSyncTask() {
           devices: formData.selectedDevices,
           contentLib: formData.selectedLibraries.join(','),
           syncMode: formData.accountType === 'business' ? 'auto' : 'manual',
-          interval: 30,
+          interval: formData.interval,
           maxSync: formData.syncCount,
           startTime: formData.startTime,
           endTime: formData.endTime,
-          targetTags: [],
+          targetTags: formData.targetTags,
-          contentTypes: ['text', 'image', 'video'],
+          contentTypes: formData.contentTypes,
-          filterKeywords: [],
+          filterKeywords: formData.filterKeywords,
           friends: [],
         });
       toast({ title: '创建成功' });
@@ -279,16 +346,21 @@ export default function NewMomentsSyncTask() {
                   <Input
                     placeholder="选择设备"
                     className="h-12 pl-11 rounded-xl border-gray-200 text-base"
-                      onClick={() => {
+                    onClick={() => setDeviceDialogOpen(true)}
-                        // TODO: 打开设备选择弹窗
-                        toast({ title: '设备选择功能开发中' });
-                      }}
                     readOnly
                   />
                 </div>
 
                 {formData.selectedDevices.length > 0 && (
-                    <div className="text-base text-gray-500">已选设备：{formData.selectedDevices.length} 个</div>
+                  <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">
@@ -302,6 +374,15 @@ export default function NewMomentsSyncTask() {
                     下一步
                   </Button>
                 </div>
+
+                <DeviceSelectionDialog
+                  open={deviceDialogOpen}
+                  onOpenChange={setDeviceDialogOpen}
+                  selectedDevices={formData.selectedDevices}
+                  onSelect={(devices) => {
+                    handleUpdateFormData({ selectedDevices: devices });
+                  }}
+                />
               </div>
             )}
 
@@ -312,16 +393,21 @@ export default function NewMomentsSyncTask() {
                   <Input 
                     placeholder="选择内容库" 
                     className="h-12 pl-11 rounded-xl border-gray-200 text-base"
-                      onClick={() => {
+                    onClick={() => setContentLibraryDialogOpen(true)}
-                        // TODO: 打开内容库选择弹窗
-                        toast({ title: '内容库选择功能开发中' });
-                      }}
                     readOnly
                   />
                 </div>
 
                 {formData.selectedLibraries.length > 0 && (
-                    <div className="text-base text-gray-500">已选内容库：{formData.selectedLibraries.join(', ')}</div>
+                  <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">
@@ -336,6 +422,15 @@ export default function NewMomentsSyncTask() {
                     {loading ? '创建中...' : '完成'}
                   </Button>
                 </div>
+
+                <ContentLibrarySelectionDialog
+                  open={contentLibraryDialogOpen}
+                  onOpenChange={setContentLibraryDialogOpen}
+                  selectedLibraries={formData.selectedLibraries}
+                  onSelect={(libraries) => {
+                    handleUpdateFormData({ selectedLibraries: libraries });
+                  }}
+                />
               </div>
             )}
             </div>