fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
保存下场景建设数据
This commit is contained in:
笔记本里的永平
2025-07-16 15:18:54 +08:00
parent 8d1362303d
commit 9e1dc36853
13 changed files with 1329 additions and 1020 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
nkebao/src/components/FriendSelection.tsx
View File

@@ -1,10 +1,15 @@
import React, { useState, useEffect } from 'react';
import { Search, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { get } from '@/api/request';
import React, { useState, useEffect } from "react";
import { Search, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { get } from "@/api/request";
// 微信好友接口类型
interface WechatFriend {
@@ -42,18 +47,20 @@ const fetchFriendsList = async (params: {
if (params.deviceIds && params.deviceIds.length === 0) {
return {
code: 200,
msg: 'success',
msg: "success",
data: {
list: [],
total: 0,
page: params.page,
limit: params.limit
}
limit: params.limit,
},
};
}
const deviceIdsParam = params?.deviceIds?.join(',') || ''
return get<FriendsResponse>(`/v1/friend?page=${ params.page}&limit=${params.limit}&deviceIds=${deviceIdsParam}`);
const deviceIdsParam = params?.deviceIds?.join(",") || "";
return get<FriendsResponse>(
`/v1/friend?page=${params.page}&limit=${params.limit}&deviceIds=${deviceIdsParam}`
);
};
// 组件属性接口
@@ -67,18 +74,18 @@ interface FriendSelectionProps {
className?: string;
}
export default function FriendSelection({
selectedFriends,
onSelect,
export default function FriendSelection({
selectedFriends,
onSelect,
onSelectDetail,
deviceIds = [],
enableDeviceFilter = true,
placeholder = "选择微信好友",
className = ""
className = "",
}: FriendSelectionProps) {
const [dialogOpen, setDialogOpen] = useState(false);
const [friends, setFriends] = useState<WechatFriend[]>([]);
const [searchQuery, setSearchQuery] = useState('');
const [searchQuery, setSearchQuery] = useState("");
const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
const [totalFriends, setTotalFriends] = useState(0);
@@ -116,49 +123,52 @@ export default function FriendSelection({
} else {
res = await fetchFriendsList({ page, limit: 20 });
}
if (res && res.code === 200 && res.data) {
setFriends(res.data.list.map((friend) => ({
id: friend.id?.toString() || '',
nickname: friend.nickname || '',
wechatId: friend.wechatId || '',
avatar: friend.avatar || '',
customer: friend.customer || '',
})));
setFriends(
res.data.list.map((friend) => ({
id: friend.id?.toString() || "",
nickname: friend.nickname || "",
wechatId: friend.wechatId || "",
avatar: friend.avatar || "",
customer: friend.customer || "",
}))
);
setTotalFriends(res.data.total || 0);
setTotalPages(Math.ceil((res.data.total || 0) / 20));
}
} catch (error) {
console.error('获取好友列表失败:', error);
console.error("获取好友列表失败:", error);
} finally {
setLoading(false);
}
};
// 过滤好友
const filteredFriends = friends.filter(friend =>
friend.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
friend.wechatId.toLowerCase().includes(searchQuery.toLowerCase())
const filteredFriends = friends.filter(
(friend) =>
friend.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
friend.wechatId.toLowerCase().includes(searchQuery.toLowerCase())
);
// 处理好友选择
const handleFriendToggle = (friendId: string) => {
let newIds: string[];
if (selectedFriends.includes(friendId)) {
newIds = selectedFriends.filter(id => id !== friendId);
newIds = selectedFriends.filter((id) => id !== friendId);
} else {
newIds = [...selectedFriends, friendId];
}
onSelect(newIds);
if (onSelectDetail) {
const selectedObjs = friends.filter(f => newIds.includes(f.id));
const selectedObjs = friends.filter((f) => newIds.includes(f.id));
onSelectDetail(selectedObjs);
}
};
// 获取显示文本
const getDisplayText = () => {
if (selectedFriends.length === 0) return '';
if (selectedFriends.length === 0) return "";
return `已选择 ${selectedFriends.length} 个好友`;
};
@@ -171,8 +181,19 @@ export default function FriendSelection({
{/* 输入框 */}
<div className={`relative ${className}`}>
<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">
<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
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"
/>
</svg>
</span>
<Input
@@ -186,10 +207,12 @@ export default function FriendSelection({
{/* 微信好友选择弹窗 */}
<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 bg-white">
<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">
<Input
placeholder="搜索好友"
@@ -198,11 +221,11 @@ export default function FriendSelection({
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" />
<Button
variant="ghost"
size="icon"
<Button
variant="ghost"
size="icon"
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" />
</Button>
@@ -223,7 +246,13 @@ export default function FriendSelection({
onClick={() => handleFriendToggle(friend.id)}
>
<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) && (
<div className="w-3 h-3 rounded-full bg-blue-600"></div>
)}
@@ -232,16 +261,24 @@ export default function FriendSelection({
<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">
{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)
)}
</div>
<div className="flex-1">
<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 && (
<div className="text-sm text-gray-400">归属客户: {friend.customer}</div>
<div className="text-sm text-gray-400">
归属客户: {friend.customer}
</div>
)}
</div>
</div>
@@ -251,7 +288,7 @@ export default function FriendSelection({
) : (
<div className="flex items-center justify-center h-full">
<div className="text-gray-500">
{deviceIds.length === 0 ? '请先选择设备' : '没有找到好友'}
{deviceIds.length === 0 ? "请先选择设备" : "没有找到好友"}
</div>
</div>
)}
@@ -271,11 +308,15 @@ export default function FriendSelection({
>
&lt;
</Button>
<span className="text-sm">{currentPage} / {totalPages}</span>
<span className="text-sm">
{currentPage} / {totalPages}
</span>
<Button
variant="ghost"
size="sm"
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
onClick={() =>
setCurrentPage(Math.min(totalPages, currentPage + 1))
}
disabled={currentPage === totalPages || loading}
className="px-2 py-0 h-8 min-w-0"
>
@@ -285,10 +326,17 @@ export default function FriendSelection({
</div>
<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 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})
</Button>
</div>
@@ -296,4 +344,4 @@ export default function FriendSelection({
</Dialog>
</>
);
}
}