feat: 本次提交更新内容如下
构建完成
This commit is contained in:
笔记本里的永平
@@ -1,275 +1,275 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { Search, X } from 'lucide-react';
|
import { Search, X } from 'lucide-react';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||||
import { get } from '@/api/request';
|
import { get } from '@/api/request';
|
||||||
|
|
||||||
// 微信好友接口类型
|
// 微信好友接口类型
|
||||||
interface WechatFriend {
|
interface WechatFriend {
|
||||||
id: string;
|
id: string;
|
||||||
nickname: string;
|
nickname: string;
|
||||||
wechatId: string;
|
wechatId: string;
|
||||||
avatar: string;
|
avatar: string;
|
||||||
customer: string;
|
customer: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 好友列表API响应类型
|
// 好友列表API响应类型
|
||||||
interface FriendsResponse {
|
interface FriendsResponse {
|
||||||
code: number;
|
code: number;
|
||||||
msg: string;
|
msg: string;
|
||||||
data: {
|
data: {
|
||||||
list: Array<{
|
list: Array<{
|
||||||
id: number;
|
id: number;
|
||||||
nickname: string;
|
nickname: string;
|
||||||
wechatId: string;
|
wechatId: string;
|
||||||
avatar?: string;
|
avatar?: string;
|
||||||
customer?: string;
|
customer?: string;
|
||||||
}>;
|
}>;
|
||||||
total: number;
|
total: number;
|
||||||
page: number;
|
page: number;
|
||||||
limit: number;
|
limit: number;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取好友列表API函数
|
// 获取好友列表API函数
|
||||||
const fetchFriendsList = async (page: number = 1, limit: number = 20, deviceIds: string[]): Promise<FriendsResponse> => {
|
const fetchFriendsList = async (page: number = 1, limit: number = 20, deviceIds: string[]): Promise<FriendsResponse> => {
|
||||||
if (deviceIds.length === 0) {
|
if (deviceIds.length === 0) {
|
||||||
return {
|
return {
|
||||||
code: 200,
|
code: 200,
|
||||||
msg: 'success',
|
msg: 'success',
|
||||||
data: {
|
data: {
|
||||||
list: [],
|
list: [],
|
||||||
total: 0,
|
total: 0,
|
||||||
page,
|
page,
|
||||||
limit
|
limit
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const deviceIdsParam = deviceIds.join(',');
|
const deviceIdsParam = deviceIds.join(',');
|
||||||
return get<FriendsResponse>(`/v1/friend?page=${page}&limit=${limit}&deviceIds=${deviceIdsParam}`);
|
return get<FriendsResponse>(`/v1/friend?page=${page}&limit=${limit}&deviceIds=${deviceIdsParam}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 组件属性接口
|
// 组件属性接口
|
||||||
interface FriendSelectionProps {
|
interface FriendSelectionProps {
|
||||||
selectedFriends: string[];
|
selectedFriends: string[];
|
||||||
onSelect: (friends: string[]) => void;
|
onSelect: (friends: string[]) => void;
|
||||||
deviceIds: string[];
|
deviceIds: string[];
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
className?: string;
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function FriendSelection({
|
export default function FriendSelection({
|
||||||
selectedFriends,
|
selectedFriends,
|
||||||
onSelect,
|
onSelect,
|
||||||
deviceIds,
|
deviceIds,
|
||||||
placeholder = "选择微信好友",
|
placeholder = "选择微信好友",
|
||||||
className = ""
|
className = ""
|
||||||
}: FriendSelectionProps) {
|
}: FriendSelectionProps) {
|
||||||
const [dialogOpen, setDialogOpen] = useState(false);
|
const [dialogOpen, setDialogOpen] = useState(false);
|
||||||
const [friends, setFriends] = useState<WechatFriend[]>([]);
|
const [friends, setFriends] = useState<WechatFriend[]>([]);
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const [totalPages, setTotalPages] = useState(1);
|
const [totalPages, setTotalPages] = useState(1);
|
||||||
const [totalFriends, setTotalFriends] = useState(0);
|
const [totalFriends, setTotalFriends] = useState(0);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
// 当弹窗打开时获取好友列表
|
// 当弹窗打开时获取好友列表
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (dialogOpen && deviceIds.length > 0) {
|
if (dialogOpen && deviceIds.length > 0) {
|
||||||
fetchFriends(currentPage);
|
fetchFriends(currentPage);
|
||||||
}
|
}
|
||||||
}, [dialogOpen, currentPage, deviceIds]);
|
}, [dialogOpen, currentPage, deviceIds]);
|
||||||
|
|
||||||
// 当设备ID变化时，重置页码
|
// 当设备ID变化时，重置页码
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (deviceIds.length > 0) {
|
if (deviceIds.length > 0) {
|
||||||
setCurrentPage(1);
|
setCurrentPage(1);
|
||||||
}
|
}
|
||||||
}, [deviceIds]);
|
}, [deviceIds]);
|
||||||
|
|
||||||
// 获取好友列表API
|
// 获取好友列表API
|
||||||
const fetchFriends = async (page: number) => {
|
const fetchFriends = async (page: number) => {
|
||||||
if (deviceIds.length === 0) return;
|
if (deviceIds.length === 0) return;
|
||||||
|
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const res = await fetchFriendsList(page, 20, deviceIds);
|
const res = await fetchFriendsList(page, 20, deviceIds);
|
||||||
|
|
||||||
if (res && res.code === 200 && res.data) {
|
if (res && res.code === 200 && res.data) {
|
||||||
setFriends(res.data.list.map((friend) => ({
|
setFriends(res.data.list.map((friend) => ({
|
||||||
id: friend.id?.toString() || '',
|
id: friend.id?.toString() || '',
|
||||||
nickname: friend.nickname || '',
|
nickname: friend.nickname || '',
|
||||||
wechatId: friend.wechatId || '',
|
wechatId: friend.wechatId || '',
|
||||||
avatar: friend.avatar || '',
|
avatar: friend.avatar || '',
|
||||||
customer: friend.customer || '',
|
customer: friend.customer || '',
|
||||||
})));
|
})));
|
||||||
|
|
||||||
setTotalFriends(res.data.total || 0);
|
setTotalFriends(res.data.total || 0);
|
||||||
setTotalPages(Math.ceil((res.data.total || 0) / 20));
|
setTotalPages(Math.ceil((res.data.total || 0) / 20));
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取好友列表失败:', error);
|
console.error('获取好友列表失败:', error);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 过滤好友
|
// 过滤好友
|
||||||
const filteredFriends = friends.filter(friend =>
|
const filteredFriends = friends.filter(friend =>
|
||||||
friend.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
friend.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
friend.wechatId.toLowerCase().includes(searchQuery.toLowerCase())
|
friend.wechatId.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
);
|
);
|
||||||
|
|
||||||
// 处理好友选择
|
// 处理好友选择
|
||||||
const handleFriendToggle = (friendId: string) => {
|
const handleFriendToggle = (friendId: string) => {
|
||||||
if (selectedFriends.includes(friendId)) {
|
if (selectedFriends.includes(friendId)) {
|
||||||
onSelect(selectedFriends.filter(id => id !== friendId));
|
onSelect(selectedFriends.filter(id => id !== friendId));
|
||||||
} else {
|
} else {
|
||||||
onSelect([...selectedFriends, friendId]);
|
onSelect([...selectedFriends, friendId]);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 获取显示文本
|
// 获取显示文本
|
||||||
const getDisplayText = () => {
|
const getDisplayText = () => {
|
||||||
if (selectedFriends.length === 0) return '';
|
if (selectedFriends.length === 0) return '';
|
||||||
return `已选择 ${selectedFriends.length} 个好友`;
|
return `已选择 ${selectedFriends.length} 个好友`;
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleConfirm = () => {
|
const handleConfirm = () => {
|
||||||
setDialogOpen(false);
|
setDialogOpen(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* 输入框 */}
|
{/* 输入框 */}
|
||||||
<div className={`relative ${className}`}>
|
<div className={`relative ${className}`}>
|
||||||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
|
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
|
||||||
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<Input
|
<Input
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
className="pl-10 h-12 rounded-xl border-gray-200 text-base"
|
className="pl-10 h-12 rounded-xl border-gray-200 text-base"
|
||||||
readOnly
|
readOnly
|
||||||
onClick={() => setDialogOpen(true)}
|
onClick={() => setDialogOpen(true)}
|
||||||
value={getDisplayText()}
|
value={getDisplayText()}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 微信好友选择弹窗 */}
|
{/* 微信好友选择弹窗 */}
|
||||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||||
<DialogContent className="max-w-xl max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
|
<DialogContent className="max-w-xl max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
<DialogTitle className="text-center text-xl font-medium mb-6">选择微信好友</DialogTitle>
|
<DialogTitle className="text-center text-xl font-medium mb-6">选择微信好友</DialogTitle>
|
||||||
|
|
||||||
<div className="relative mb-4">
|
<div className="relative mb-4">
|
||||||
<Input
|
<Input
|
||||||
placeholder="搜索好友"
|
placeholder="搜索好友"
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
className="pl-10 py-2 rounded-full border-gray-200"
|
className="pl-10 py-2 rounded-full border-gray-200"
|
||||||
/>
|
/>
|
||||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 rounded-full"
|
className="absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 rounded-full"
|
||||||
onClick={() => setSearchQuery('')}
|
onClick={() => setSearchQuery('')}
|
||||||
>
|
>
|
||||||
<X className="h-4 w-4" />
|
<X className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ScrollArea className="flex-1 overflow-y-auto">
|
<ScrollArea className="flex-1 overflow-y-auto">
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<div className="flex items-center justify-center h-full">
|
<div className="flex items-center justify-center h-full">
|
||||||
<div className="text-gray-500">加载中...</div>
|
<div className="text-gray-500">加载中...</div>
|
||||||
</div>
|
</div>
|
||||||
) : filteredFriends.length > 0 ? (
|
) : filteredFriends.length > 0 ? (
|
||||||
<div className="divide-y">
|
<div className="divide-y">
|
||||||
{filteredFriends.map((friend) => (
|
{filteredFriends.map((friend) => (
|
||||||
<label
|
<label
|
||||||
key={friend.id}
|
key={friend.id}
|
||||||
className="flex items-center px-6 py-4 hover:bg-gray-50 cursor-pointer"
|
className="flex items-center px-6 py-4 hover:bg-gray-50 cursor-pointer"
|
||||||
onClick={() => handleFriendToggle(friend.id)}
|
onClick={() => handleFriendToggle(friend.id)}
|
||||||
>
|
>
|
||||||
<div className="mr-3 flex items-center justify-center">
|
<div className="mr-3 flex items-center justify-center">
|
||||||
<div className={`w-5 h-5 rounded-full border ${selectedFriends.includes(friend.id) ? 'border-blue-600' : 'border-gray-300'} flex items-center justify-center`}>
|
<div className={`w-5 h-5 rounded-full border ${selectedFriends.includes(friend.id) ? 'border-blue-600' : 'border-gray-300'} flex items-center justify-center`}>
|
||||||
{selectedFriends.includes(friend.id) && (
|
{selectedFriends.includes(friend.id) && (
|
||||||
<div className="w-3 h-3 rounded-full bg-blue-600"></div>
|
<div className="w-3 h-3 rounded-full bg-blue-600"></div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center space-x-3 flex-1">
|
<div className="flex items-center space-x-3 flex-1">
|
||||||
<div className="w-10 h-10 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center text-white text-sm font-medium overflow-hidden">
|
<div className="w-10 h-10 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center text-white text-sm font-medium overflow-hidden">
|
||||||
{friend.avatar ? (
|
{friend.avatar ? (
|
||||||
<img src={friend.avatar} alt={friend.nickname} className="w-full h-full object-cover" />
|
<img src={friend.avatar} alt={friend.nickname} className="w-full h-full object-cover" />
|
||||||
) : (
|
) : (
|
||||||
friend.nickname.charAt(0)
|
friend.nickname.charAt(0)
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<div className="font-medium">{friend.nickname}</div>
|
<div className="font-medium">{friend.nickname}</div>
|
||||||
<div className="text-sm text-gray-500">微信ID: {friend.wechatId}</div>
|
<div className="text-sm text-gray-500">微信ID: {friend.wechatId}</div>
|
||||||
{friend.customer && (
|
{friend.customer && (
|
||||||
<div className="text-sm text-gray-400">归属客户: {friend.customer}</div>
|
<div className="text-sm text-gray-400">归属客户: {friend.customer}</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</label>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex items-center justify-center h-full">
|
<div className="flex items-center justify-center h-full">
|
||||||
<div className="text-gray-500">
|
<div className="text-gray-500">
|
||||||
{deviceIds.length === 0 ? '请先选择设备' : '没有找到好友'}
|
{deviceIds.length === 0 ? '请先选择设备' : '没有找到好友'}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</ScrollArea>
|
</ScrollArea>
|
||||||
|
|
||||||
<div className="border-t p-4 flex items-center justify-between bg-white">
|
<div className="border-t p-4 flex items-center justify-between bg-white">
|
||||||
<div className="text-sm text-gray-500">
|
<div className="text-sm text-gray-500">
|
||||||
总计 {totalFriends} 个好友
|
总计 {totalFriends} 个好友
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
|
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
|
||||||
disabled={currentPage === 1 || loading}
|
disabled={currentPage === 1 || loading}
|
||||||
className="px-2 py-0 h-8 min-w-0"
|
className="px-2 py-0 h-8 min-w-0"
|
||||||
>
|
>
|
||||||
<
|
<
|
||||||
</Button>
|
</Button>
|
||||||
<span className="text-sm">{currentPage} / {totalPages}</span>
|
<span className="text-sm">{currentPage} / {totalPages}</span>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
|
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
|
||||||
disabled={currentPage === totalPages || loading}
|
disabled={currentPage === totalPages || loading}
|
||||||
className="px-2 py-0 h-8 min-w-0"
|
className="px-2 py-0 h-8 min-w-0"
|
||||||
>
|
>
|
||||||
>
|
>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="border-t p-4 flex items-center justify-between bg-white">
|
<div className="border-t p-4 flex items-center justify-between bg-white">
|
||||||
<Button variant="outline" onClick={() => setDialogOpen(false)} className="px-6 rounded-full border-gray-300">
|
<Button variant="outline" onClick={() => setDialogOpen(false)} className="px-6 rounded-full border-gray-300">
|
||||||
取消
|
取消
|
||||||
</Button>
|
</Button>
|
||||||
<Button onClick={handleConfirm} className="px-6 bg-blue-600 hover:bg-blue-700 rounded-full">
|
<Button onClick={handleConfirm} className="px-6 bg-blue-600 hover:bg-blue-700 rounded-full">
|
||||||
确定 ({selectedFriends.length})
|
确定 ({selectedFriends.length})
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -11,38 +11,15 @@ import { Button } from '@/components/ui/button';
|
|||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
||||||
import { Checkbox } from '@/components/ui/checkbox';
|
import { Checkbox } from '@/components/ui/checkbox';
|
||||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||||
import Layout from '@/components/Layout';
|
import Layout from '@/components/Layout';
|
||||||
import PageHeader from '@/components/PageHeader';
|
import PageHeader from '@/components/PageHeader';
|
||||||
|
import DeviceSelection from '@/components/DeviceSelection';
|
||||||
import { useToast } from '@/components/ui/toast';
|
import { useToast } from '@/components/ui/toast';
|
||||||
import { fetchAccountList, Account } from '@/api/trafficDistribution';
|
import { fetchAccountList, Account } from '@/api/trafficDistribution';
|
||||||
import '@/components/Layout.css';
|
import '@/components/Layout.css';
|
||||||
|
|
||||||
// 移除原来的步骤指示器组件
|
|
||||||
// function StepIndicator({ currentStep, steps }: { currentStep: number; steps: Step[] }) {
|
|
||||||
// return (
|
|
||||||
// <div className="flex justify-between items-center w-full mb-6 px-4">
|
|
||||||
// {steps.map((step, index) => (
|
|
||||||
// <div key={step.id} className="flex flex-1 items-center">
|
|
||||||
// <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
|
||||||
// index < currentStep ? 'bg-blue-500 text-white' :
|
|
||||||
// index === currentStep ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-500'
|
|
||||||
// }`}>
|
|
||||||
// {React.cloneElement(step.icon as React.ReactElement, { className: "w-5 h-5" })}
|
|
||||||
// </div>
|
|
||||||
// {index < steps.length - 1 && (
|
|
||||||
// <div className={`flex-1 h-1 mx-2 ${
|
|
||||||
// index < currentStep ? 'bg-blue-500' : 'bg-gray-200'
|
|
||||||
// }`}></div>
|
|
||||||
// )}
|
|
||||||
// </div>
|
|
||||||
// ))}
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
interface BasicInfoData {
|
interface BasicInfoData {
|
||||||
name: string;
|
name: string;
|
||||||
distributionMethod: 'equal' | 'priority' | 'ratio';
|
distributionMethod: 'equal' | 'priority' | 'ratio';
|
||||||
@@ -55,7 +32,6 @@ interface BasicInfoData {
|
|||||||
|
|
||||||
interface TargetSettingsData {
|
interface TargetSettingsData {
|
||||||
selectedDevices: string[];
|
selectedDevices: string[];
|
||||||
selectedCustomerServices: string[];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface TrafficPoolData {
|
interface TrafficPoolData {
|
||||||
@@ -68,18 +44,6 @@ interface FormData {
|
|||||||
trafficPool: Partial<TrafficPoolData>;
|
trafficPool: Partial<TrafficPoolData>;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Device {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
status: 'online' | 'offline';
|
|
||||||
}
|
|
||||||
|
|
||||||
interface CustomerService {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
status: 'online' | 'offline';
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TrafficPool {
|
interface TrafficPool {
|
||||||
id: string;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
@@ -367,7 +331,7 @@ export default function NewDistribution() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 基本信息步骤组件
|
// 基本信息步骤组件
|
||||||
const BasicInfoStep = ({ onNext, initialData = {} }: { onNext: (data: BasicInfoData) => void; initialData?: Partial<BasicInfoData> }) => {
|
const BasicInfoStep = ({ onNext, initialData = {} }: { onNext: (data: BasicInfoData) => void; initialData?: Partial<BasicInfoData> }) => {
|
||||||
const [formData, setFormData] = useState<BasicInfoData>({
|
const [formData, setFormData] = useState<BasicInfoData>({
|
||||||
name: initialData.name || generateDefaultName(),
|
name: initialData.name || generateDefaultName(),
|
||||||
@@ -579,50 +543,11 @@ export default function NewDistribution() {
|
|||||||
// 目标设置步骤组件
|
// 目标设置步骤组件
|
||||||
const TargetSettingsStep = ({ onNext, onBack, initialData = {} }: { onNext: (data: TargetSettingsData) => void; onBack: () => void; initialData?: Partial<TargetSettingsData> }) => {
|
const TargetSettingsStep = ({ onNext, onBack, initialData = {} }: { onNext: (data: TargetSettingsData) => void; onBack: () => void; initialData?: Partial<TargetSettingsData> }) => {
|
||||||
const [selectedDevices, setSelectedDevices] = useState<string[]>(initialData.selectedDevices || []);
|
const [selectedDevices, setSelectedDevices] = useState<string[]>(initialData.selectedDevices || []);
|
||||||
const [selectedCustomerServices, setSelectedCustomerServices] = useState<string[]>(initialData.selectedCustomerServices || []);
|
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
|
||||||
|
|
||||||
// 模拟设备数据
|
|
||||||
const devices: Device[] = [
|
|
||||||
{ id: "1", name: "设备 1", status: "online" },
|
|
||||||
{ id: "2", name: "设备 2", status: "online" },
|
|
||||||
{ id: "3", name: "设备 3", status: "offline" },
|
|
||||||
{ id: "4", name: "设备 4", status: "online" },
|
|
||||||
{ id: "5", name: "设备 5", status: "offline" },
|
|
||||||
];
|
|
||||||
|
|
||||||
// 模拟客服数据
|
|
||||||
const customerServices: CustomerService[] = [
|
|
||||||
{ id: "1", name: "客服 A", status: "online" },
|
|
||||||
{ id: "2", name: "客服 B", status: "online" },
|
|
||||||
{ id: "3", name: "客服 C", status: "offline" },
|
|
||||||
{ id: "4", name: "客服 D", status: "online" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const filteredDevices = devices.filter(device =>
|
|
||||||
device.name.toLowerCase().includes(searchTerm.toLowerCase())
|
|
||||||
);
|
|
||||||
|
|
||||||
const filteredCustomerServices = customerServices.filter(cs =>
|
|
||||||
cs.name.toLowerCase().includes(searchTerm.toLowerCase())
|
|
||||||
);
|
|
||||||
|
|
||||||
const toggleDevice = (id: string) => {
|
|
||||||
setSelectedDevices(prev =>
|
|
||||||
prev.includes(id) ? prev.filter(deviceId => deviceId !== id) : [...prev, id]
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleCustomerService = (id: string) => {
|
|
||||||
setSelectedCustomerServices(prev =>
|
|
||||||
prev.includes(id) ? prev.filter(csId => csId !== id) : [...prev, id]
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = () => {
|
const handleSubmit = () => {
|
||||||
if (selectedDevices.length === 0 && selectedCustomerServices.length === 0) {
|
if (selectedDevices.length === 0) {
|
||||||
toast({
|
toast({
|
||||||
title: "请选择至少一个设备或客服",
|
title: "请选择至少一个设备",
|
||||||
variant: "destructive"
|
variant: "destructive"
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
@@ -630,102 +555,26 @@ export default function NewDistribution() {
|
|||||||
|
|
||||||
onNext({
|
onNext({
|
||||||
selectedDevices,
|
selectedDevices,
|
||||||
selectedCustomerServices,
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-white rounded-lg p-6">
|
<div className="bg-white rounded-lg p-6">
|
||||||
<h2 className="text-xl font-bold mb-6">目标设置</h2>
|
<h2 className="text-xl font-bold mb-6">目标设置</h2>
|
||||||
|
|
||||||
<div className="mb-4">
|
<div className="mb-6">
|
||||||
<div className="relative">
|
<DeviceSelection
|
||||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
|
selectedDevices={selectedDevices}
|
||||||
<Input
|
onSelect={setSelectedDevices}
|
||||||
placeholder="搜索设备或客服"
|
placeholder="选择执行设备"
|
||||||
value={searchTerm}
|
/>
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
|
||||||
className="pl-10 h-12"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Tabs defaultValue="devices" className="w-full">
|
|
||||||
<TabsList className="grid w-full grid-cols-2 mb-4">
|
|
||||||
<TabsTrigger value="devices">设备选择</TabsTrigger>
|
|
||||||
<TabsTrigger value="customerService">客服选择</TabsTrigger>
|
|
||||||
</TabsList>
|
|
||||||
|
|
||||||
<TabsContent value="devices" className="space-y-4">
|
|
||||||
<div className="grid grid-cols-1 gap-3">
|
|
||||||
{filteredDevices.map(device => (
|
|
||||||
<div
|
|
||||||
key={device.id}
|
|
||||||
className={`cursor-pointer border rounded-lg p-3 ${selectedDevices.includes(device.id) ? "border-blue-500 bg-blue-50" : "border-gray-200"}`}
|
|
||||||
onClick={() => toggleDevice(device.id)}
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${device.status === "online" ? "bg-green-100" : "bg-gray-100"}`}>
|
|
||||||
<span className={`text-sm font-medium ${device.status === "online" ? "text-green-600" : "text-gray-600"}`}>
|
|
||||||
{device.name.substring(2, 3)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="font-medium">{device.name}</p>
|
|
||||||
<p className={`text-xs ${device.status === "online" ? "text-green-600" : "text-gray-500"}`}>
|
|
||||||
{device.status === "online" ? "在线" : "离线"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Checkbox
|
|
||||||
checked={selectedDevices.includes(device.id)}
|
|
||||||
onCheckedChange={() => toggleDevice(device.id)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</TabsContent>
|
|
||||||
|
|
||||||
<TabsContent value="customerService" className="space-y-4">
|
|
||||||
<div className="grid grid-cols-1 gap-3">
|
|
||||||
{filteredCustomerServices.map(cs => (
|
|
||||||
<div
|
|
||||||
key={cs.id}
|
|
||||||
className={`cursor-pointer border rounded-lg p-3 ${selectedCustomerServices.includes(cs.id) ? "border-blue-500 bg-blue-50" : "border-gray-200"}`}
|
|
||||||
onClick={() => toggleCustomerService(cs.id)}
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${cs.status === "online" ? "bg-green-100" : "bg-gray-100"}`}>
|
|
||||||
<span className={`text-sm font-medium ${cs.status === "online" ? "text-green-600" : "text-gray-600"}`}>
|
|
||||||
{cs.name.substring(2, 3)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="font-medium">{cs.name}</p>
|
|
||||||
<p className={`text-xs ${cs.status === "online" ? "text-green-600" : "text-gray-500"}`}>
|
|
||||||
{cs.status === "online" ? "在线" : "离线"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Checkbox
|
|
||||||
checked={selectedCustomerServices.includes(cs.id)}
|
|
||||||
onCheckedChange={() => toggleCustomerService(cs.id)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</TabsContent>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
<div className="mt-8 flex justify-between">
|
<div className="mt-8 flex justify-between">
|
||||||
<Button variant="outline" onClick={onBack}>
|
<Button variant="outline" onClick={onBack}>
|
||||||
← 上一步
|
← 上一步
|
||||||
</Button>
|
</Button>
|
||||||
<Button onClick={handleSubmit}>
|
<Button onClick={handleSubmit} disabled={selectedDevices.length === 0}>
|
||||||
下一步 →
|
下一步 →
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user