Merge branch 'yongpxu-dev2' of https://e.coding.net/g-xtcy5189/cunkebao/cunkebao_v3 into yongpxu-dev2
# Conflicts: # nkebao/src/pages/workspace/auto-like/new/index.tsx resolved by origin/yongpxu-dev2(远端) version
This commit is contained in:
笔记本里的永平
208
nkebao/src/components/DeviceSelection/index.tsx
Normal file
208
nkebao/src/components/DeviceSelection/index.tsx
Normal file
@@ -0,0 +1,208 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
|
||||
import { Input, Button, Checkbox, Popup, Toast } from "antd-mobile";
|
||||
import request from "@/api/request";
|
||||
import style from "./module.scss";
|
||||
|
||||
// 设备选择项接口
|
||||
interface DeviceSelectionItem {
|
||||
id: string;
|
||||
name: string;
|
||||
imei: string;
|
||||
wechatId: string;
|
||||
status: "online" | "offline";
|
||||
}
|
||||
|
||||
// 组件属性接口
|
||||
interface DeviceSelectionProps {
|
||||
selectedDevices: string[];
|
||||
onSelect: (devices: string[]) => void;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function DeviceSelection({
|
||||
selectedDevices,
|
||||
onSelect,
|
||||
placeholder = "选择设备",
|
||||
className = "",
|
||||
}: DeviceSelectionProps) {
|
||||
const [popupVisible, setPopupVisible] = useState(false);
|
||||
const [devices, setDevices] = useState<DeviceSelectionItem[]>([]);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState("all");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// 获取设备列表，支持keyword
|
||||
const fetchDevices = async (keyword: string = "") => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await request(
|
||||
"/v1/device/list",
|
||||
{
|
||||
page: 1,
|
||||
limit: 100,
|
||||
keyword: keyword.trim() || undefined,
|
||||
},
|
||||
"GET"
|
||||
);
|
||||
|
||||
if (res && Array.isArray(res.list)) {
|
||||
setDevices(
|
||||
res.list.map((d: any) => ({
|
||||
id: d.id?.toString() || "",
|
||||
name: d.memo || d.imei || "",
|
||||
imei: d.imei || "",
|
||||
wechatId: d.wechatId || "",
|
||||
status: d.alive === 1 ? "online" : "offline",
|
||||
}))
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取设备列表失败:", error);
|
||||
Toast.show({ content: "获取设备列表失败", position: "top" });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 打开弹窗时获取设备列表
|
||||
const openPopup = () => {
|
||||
setSearchQuery("");
|
||||
setPopupVisible(true);
|
||||
fetchDevices("");
|
||||
};
|
||||
|
||||
// 搜索防抖
|
||||
useEffect(() => {
|
||||
if (!popupVisible) return;
|
||||
const timer = setTimeout(() => {
|
||||
fetchDevices(searchQuery);
|
||||
}, 500);
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchQuery, popupVisible]);
|
||||
|
||||
// 过滤设备（只保留状态过滤）
|
||||
const filteredDevices = devices.filter((device) => {
|
||||
const matchesStatus =
|
||||
statusFilter === "all" ||
|
||||
(statusFilter === "online" && device.status === "online") ||
|
||||
(statusFilter === "offline" && device.status === "offline");
|
||||
return matchesStatus;
|
||||
});
|
||||
|
||||
// 处理设备选择
|
||||
const handleDeviceToggle = (deviceId: string) => {
|
||||
if (selectedDevices.includes(deviceId)) {
|
||||
onSelect(selectedDevices.filter((id) => id !== deviceId));
|
||||
} else {
|
||||
onSelect([...selectedDevices, deviceId]);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取显示文本
|
||||
const getDisplayText = () => {
|
||||
if (selectedDevices.length === 0) return "";
|
||||
return `已选择 ${selectedDevices.length} 个设备`;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 输入框 */}
|
||||
<div className={`${style.inputWrapper} ${className}`}>
|
||||
<SearchOutlined className={style.inputIcon} />
|
||||
<Input
|
||||
placeholder={placeholder}
|
||||
className={style.input}
|
||||
readOnly
|
||||
onClick={openPopup}
|
||||
value={getDisplayText()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 设备选择弹窗 */}
|
||||
<Popup
|
||||
visible={popupVisible}
|
||||
onMaskClick={() => setPopupVisible(false)}
|
||||
position="bottom"
|
||||
bodyStyle={{ height: "80vh" }}
|
||||
>
|
||||
<div className={style.popupContainer}>
|
||||
<div className={style.popupHeader}>
|
||||
<div className={style.popupTitle}>选择设备</div>
|
||||
</div>
|
||||
<div className={style.popupSearchRow}>
|
||||
<div className={style.popupSearchInputWrap}>
|
||||
<SearchOutlined className={style.inputIcon} />
|
||||
<Input
|
||||
placeholder="搜索设备IMEI/备注/微信号"
|
||||
value={searchQuery}
|
||||
onChange={(val) => setSearchQuery(val)}
|
||||
className={style.popupSearchInput}
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
className={style.statusSelect}
|
||||
>
|
||||
<option value="all">全部状态</option>
|
||||
<option value="online">在线</option>
|
||||
<option value="offline">离线</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className={style.deviceList}>
|
||||
{loading ? (
|
||||
<div className={style.loadingBox}>
|
||||
<div className={style.loadingText}>加载中...</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className={style.deviceListInner}>
|
||||
{filteredDevices.map((device) => (
|
||||
<label key={device.id} className={style.deviceItem}>
|
||||
<Checkbox
|
||||
checked={selectedDevices.includes(device.id)}
|
||||
onChange={() => handleDeviceToggle(device.id)}
|
||||
className={style.deviceCheckbox}
|
||||
/>
|
||||
<div className={style.deviceInfo}>
|
||||
<div className={style.deviceInfoRow}>
|
||||
<span className={style.deviceName}>{device.name}</span>
|
||||
<div
|
||||
className={
|
||||
device.status === "online"
|
||||
? style.statusOnline
|
||||
: style.statusOffline
|
||||
}
|
||||
>
|
||||
{device.status === "online" ? "在线" : "离线"}
|
||||
</div>
|
||||
</div>
|
||||
<div className={style.deviceInfoDetail}>
|
||||
<div>IMEI: {device.imei}</div>
|
||||
<div>微信号: {device.wechatId}</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={style.popupFooter}>
|
||||
<div className={style.selectedCount}>
|
||||
已选择 {selectedDevices.length} 个设备
|
||||
</div>
|
||||
<div className={style.footerBtnGroup}>
|
||||
<Button fill="outline" onClick={() => setPopupVisible(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button color="primary" onClick={() => setPopupVisible(false)}>
|
||||
确定
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Popup>
|
||||
</>
|
||||
);
|
||||
}
|
||||
156
nkebao/src/components/DeviceSelection/module.scss
Normal file
156
nkebao/src/components/DeviceSelection/module.scss
Normal file
@@ -0,0 +1,156 @@
|
||||
.inputWrapper {
|
||||
position: relative;
|
||||
}
|
||||
.inputIcon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #bdbdbd;
|
||||
z-index: 10;
|
||||
font-size: 18px;
|
||||
}
|
||||
.input {
|
||||
padding-left: 38px !important;
|
||||
height: 56px;
|
||||
border-radius: 16px !important;
|
||||
border: 1px solid #e5e6eb !important;
|
||||
font-size: 16px;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.popupContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
.popupHeader {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.popupTitle {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
.popupSearchRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
.popupSearchInputWrap {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
.popupSearchInput {
|
||||
padding-left: 36px !important;
|
||||
border-radius: 12px !important;
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
border: 1px solid #e5e6eb !important;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
.statusSelect {
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e5e6eb;
|
||||
font-size: 15px;
|
||||
padding: 0 10px;
|
||||
background: #fff;
|
||||
}
|
||||
.deviceList {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.deviceListInner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
.deviceItem {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #f0f0f0;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
&:hover {
|
||||
background: #f5f6fa;
|
||||
}
|
||||
}
|
||||
.deviceCheckbox {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.deviceInfo {
|
||||
flex: 1;
|
||||
}
|
||||
.deviceInfoRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.deviceName {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #222;
|
||||
}
|
||||
.statusOnline {
|
||||
width: 56px;
|
||||
height: 24px;
|
||||
border-radius: 12px;
|
||||
background: #52c41a;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.statusOffline {
|
||||
width: 56px;
|
||||
height: 24px;
|
||||
border-radius: 12px;
|
||||
background: #e5e6eb;
|
||||
color: #888;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.deviceInfoDetail {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.loadingBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.loadingText {
|
||||
color: #888;
|
||||
font-size: 15px;
|
||||
}
|
||||
.popupFooter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
background: #fff;
|
||||
}
|
||||
.selectedCount {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
}
|
||||
.footerBtnGroup {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
216
nkebao/src/components/DeviceSelectionDialog/index.tsx
Normal file
216
nkebao/src/components/DeviceSelectionDialog/index.tsx
Normal file
@@ -0,0 +1,216 @@
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
|
||||
import { Input, Button, Checkbox, Popup, Toast } from "antd-mobile";
|
||||
import request from "@/api/request";
|
||||
import style from "./module.scss";
|
||||
|
||||
interface Device {
|
||||
id: string;
|
||||
name: string;
|
||||
imei: string;
|
||||
wxid: string;
|
||||
status: "online" | "offline";
|
||||
usedInPlans: number;
|
||||
nickname: string;
|
||||
}
|
||||
|
||||
interface DeviceSelectionDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
selectedDevices: string[];
|
||||
onSelect: (devices: string[]) => void;
|
||||
}
|
||||
|
||||
export function DeviceSelectionDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
selectedDevices,
|
||||
onSelect,
|
||||
}: DeviceSelectionDialogProps) {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState("all");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [devices, setDevices] = useState<Device[]>([]);
|
||||
|
||||
// 获取设备列表，支持keyword
|
||||
const fetchDevices = useCallback(async (keyword: string = "") => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await request(
|
||||
"/v1/device/list",
|
||||
{
|
||||
page: 1,
|
||||
limit: 100,
|
||||
keyword: keyword.trim() || undefined,
|
||||
},
|
||||
"GET"
|
||||
);
|
||||
|
||||
if (response && Array.isArray(response.list)) {
|
||||
// 转换服务端数据格式为组件需要的格式
|
||||
const convertedDevices: Device[] = response.list.map(
|
||||
(serverDevice: any) => ({
|
||||
id: serverDevice.id.toString(),
|
||||
name: serverDevice.memo || `设备 ${serverDevice.id}`,
|
||||
imei: serverDevice.imei,
|
||||
wxid: serverDevice.wechatId || "",
|
||||
status: serverDevice.alive === 1 ? "online" : "offline",
|
||||
usedInPlans: 0, // 这个字段需要从其他API获取
|
||||
nickname: serverDevice.nickname || "",
|
||||
})
|
||||
);
|
||||
setDevices(convertedDevices);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取设备列表失败:", error);
|
||||
Toast.show({
|
||||
content: "获取设备列表失败，请检查网络连接",
|
||||
position: "top",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 打开弹窗时获取设备列表
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
fetchDevices("");
|
||||
}
|
||||
}, [open, fetchDevices]);
|
||||
|
||||
// 搜索防抖
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const timer = setTimeout(() => {
|
||||
fetchDevices(searchQuery);
|
||||
}, 500);
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchQuery, open, fetchDevices]);
|
||||
|
||||
// 过滤设备（只保留状态过滤）
|
||||
const filteredDevices = devices.filter((device) => {
|
||||
const matchesStatus =
|
||||
statusFilter === "all" ||
|
||||
(statusFilter === "online" && device.status === "online") ||
|
||||
(statusFilter === "offline" && device.status === "offline");
|
||||
return matchesStatus;
|
||||
});
|
||||
|
||||
const handleDeviceSelect = (deviceId: string) => {
|
||||
if (selectedDevices.includes(deviceId)) {
|
||||
onSelect(selectedDevices.filter((id) => id !== deviceId));
|
||||
} else {
|
||||
onSelect([...selectedDevices, deviceId]);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Popup
|
||||
visible={open}
|
||||
onMaskClick={() => onOpenChange(false)}
|
||||
position="bottom"
|
||||
bodyStyle={{ height: "80vh" }}
|
||||
>
|
||||
<div className={style.popupContainer}>
|
||||
<div className={style.popupHeader}>
|
||||
<div className={style.popupTitle}>选择设备</div>
|
||||
</div>
|
||||
<div className={style.popupSearchRow}>
|
||||
<div className={style.popupSearchInputWrap}>
|
||||
<SearchOutlined className={style.inputIcon} />
|
||||
<Input
|
||||
placeholder="搜索设备IMEI/备注"
|
||||
value={searchQuery}
|
||||
onChange={(val) => setSearchQuery(val)}
|
||||
className={style.popupSearchInput}
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
className={style.statusSelect}
|
||||
>
|
||||
<option value="all">全部状态</option>
|
||||
<option value="online">在线</option>
|
||||
<option value="offline">离线</option>
|
||||
</select>
|
||||
<Button
|
||||
fill="outline"
|
||||
size="mini"
|
||||
onClick={() => fetchDevices(searchQuery)}
|
||||
disabled={loading}
|
||||
className={style.refreshBtn}
|
||||
>
|
||||
{loading ? (
|
||||
<div className={style.loadingIcon}>⟳</div>
|
||||
) : (
|
||||
<ReloadOutlined />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<div className={style.deviceList}>
|
||||
{loading ? (
|
||||
<div className={style.loadingBox}>
|
||||
<div className={style.loadingText}>加载中...</div>
|
||||
</div>
|
||||
) : filteredDevices.length === 0 ? (
|
||||
<div className={style.emptyBox}>
|
||||
<div className={style.emptyText}>暂无数据</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className={style.deviceListInner}>
|
||||
{filteredDevices.map((device) => (
|
||||
<label key={device.id} className={style.deviceItem}>
|
||||
<Checkbox
|
||||
checked={selectedDevices.includes(device.id)}
|
||||
onChange={() => handleDeviceSelect(device.id)}
|
||||
className={style.deviceCheckbox}
|
||||
/>
|
||||
<div className={style.deviceInfo}>
|
||||
<div className={style.deviceInfoRow}>
|
||||
<span className={style.deviceName}>{device.name}</span>
|
||||
<div
|
||||
className={
|
||||
device.status === "online"
|
||||
? style.statusOnline
|
||||
: style.statusOffline
|
||||
}
|
||||
>
|
||||
{device.status === "online" ? "在线" : "离线"}
|
||||
</div>
|
||||
</div>
|
||||
<div className={style.deviceInfoDetail}>
|
||||
<div>IMEI: {device.imei}</div>
|
||||
<div>微信号: {device.wxid || "-"}</div>
|
||||
<div>昵称: {device.nickname || "-"}</div>
|
||||
</div>
|
||||
{device.usedInPlans > 0 && (
|
||||
<div className={style.usedInPlans}>
|
||||
已用于 {device.usedInPlans} 个计划
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={style.popupFooter}>
|
||||
<div className={style.selectedCount}>
|
||||
已选择 {selectedDevices.length} 个设备
|
||||
</div>
|
||||
<div className={style.footerBtnGroup}>
|
||||
<Button fill="outline" onClick={() => onOpenChange(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button color="primary" onClick={() => onOpenChange(false)}>
|
||||
确定
|
||||
{selectedDevices.length > 0 ? ` (${selectedDevices.length})` : ""}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Popup>
|
||||
);
|
||||
}
|
||||
170
nkebao/src/components/DeviceSelectionDialog/module.scss
Normal file
170
nkebao/src/components/DeviceSelectionDialog/module.scss
Normal file
@@ -0,0 +1,170 @@
|
||||
.popupContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
.popupHeader {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.popupTitle {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
.popupSearchRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
.popupSearchInputWrap {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
.inputIcon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #bdbdbd;
|
||||
z-index: 10;
|
||||
font-size: 16px;
|
||||
}
|
||||
.popupSearchInput {
|
||||
padding-left: 36px !important;
|
||||
border-radius: 12px !important;
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
border: 1px solid #e5e6eb !important;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
.statusSelect {
|
||||
width: 128px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e5e6eb;
|
||||
font-size: 14px;
|
||||
padding: 0 12px;
|
||||
background: #fff;
|
||||
}
|
||||
.refreshBtn {
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.loadingIcon {
|
||||
animation: spin 1s linear infinite;
|
||||
font-size: 16px;
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.deviceList {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.deviceListInner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
.deviceItem {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #f0f0f0;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
&:hover {
|
||||
background: #f5f6fa;
|
||||
}
|
||||
}
|
||||
.deviceCheckbox {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.deviceInfo {
|
||||
flex: 1;
|
||||
}
|
||||
.deviceInfoRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.deviceName {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #222;
|
||||
}
|
||||
.statusOnline {
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
background: #52c41a;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.statusOffline {
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
background: #e5e6eb;
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.deviceInfoDetail {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.usedInPlans {
|
||||
font-size: 13px;
|
||||
color: #fa8c16;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.loadingBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.loadingText {
|
||||
color: #888;
|
||||
font-size: 15px;
|
||||
}
|
||||
.emptyBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.emptyText {
|
||||
color: #888;
|
||||
font-size: 15px;
|
||||
}
|
||||
.popupFooter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
background: #fff;
|
||||
}
|
||||
.selectedCount {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
}
|
||||
.footerBtnGroup {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
332
nkebao/src/components/FriendSelection/index.tsx
Normal file
332
nkebao/src/components/FriendSelection/index.tsx
Normal file
@@ -0,0 +1,332 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
SearchOutlined,
|
||||
CloseOutlined,
|
||||
LeftOutlined,
|
||||
RightOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { Input, Button, Popup, Toast } from "antd-mobile";
|
||||
import request from "@/api/request";
|
||||
import style from "./module.scss";
|
||||
|
||||
// 微信好友接口类型
|
||||
interface WechatFriend {
|
||||
id: string;
|
||||
nickname: string;
|
||||
wechatId: string;
|
||||
avatar: string;
|
||||
customer: string;
|
||||
}
|
||||
|
||||
// 组件属性接口
|
||||
interface FriendSelectionProps {
|
||||
selectedFriends: string[];
|
||||
onSelect: (friends: string[]) => void;
|
||||
onSelectDetail?: (friends: WechatFriend[]) => void;
|
||||
deviceIds?: string[];
|
||||
enableDeviceFilter?: boolean;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function FriendSelection({
|
||||
selectedFriends,
|
||||
onSelect,
|
||||
onSelectDetail,
|
||||
deviceIds = [],
|
||||
enableDeviceFilter = true,
|
||||
placeholder = "选择微信好友",
|
||||
className = "",
|
||||
}: FriendSelectionProps) {
|
||||
const [popupVisible, setPopupVisible] = useState(false);
|
||||
const [friends, setFriends] = useState<WechatFriend[]>([]);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [totalFriends, setTotalFriends] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// 打开弹窗并请求第一页好友
|
||||
const openPopup = () => {
|
||||
setCurrentPage(1);
|
||||
setSearchQuery("");
|
||||
setPopupVisible(true);
|
||||
fetchFriends(1, "");
|
||||
};
|
||||
|
||||
// 当页码变化时，拉取对应页数据（弹窗已打开时）
|
||||
useEffect(() => {
|
||||
if (popupVisible && currentPage !== 1) {
|
||||
fetchFriends(currentPage, searchQuery);
|
||||
}
|
||||
}, [currentPage, popupVisible, searchQuery]);
|
||||
|
||||
// 搜索防抖
|
||||
useEffect(() => {
|
||||
if (!popupVisible) return;
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
setCurrentPage(1);
|
||||
fetchFriends(1, searchQuery);
|
||||
}, 500);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchQuery, popupVisible]);
|
||||
|
||||
// 获取好友列表API - 添加 keyword 参数
|
||||
const fetchFriends = async (page: number, keyword: string = "") => {
|
||||
setLoading(true);
|
||||
try {
|
||||
let params: any = {
|
||||
page,
|
||||
limit: 20,
|
||||
};
|
||||
|
||||
if (keyword.trim()) {
|
||||
params.keyword = keyword.trim();
|
||||
}
|
||||
|
||||
if (enableDeviceFilter) {
|
||||
if (deviceIds.length === 0) {
|
||||
setFriends([]);
|
||||
setTotalFriends(0);
|
||||
setTotalPages(1);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
params.deviceIds = deviceIds.join(",");
|
||||
}
|
||||
|
||||
const res = await request("/v1/friend", params, "GET");
|
||||
|
||||
if (res && Array.isArray(res.list)) {
|
||||
setFriends(
|
||||
res.list.map((friend: any) => ({
|
||||
id: friend.id?.toString() || "",
|
||||
nickname: friend.nickname || "",
|
||||
wechatId: friend.wechatId || "",
|
||||
avatar: friend.avatar || "",
|
||||
customer: friend.customer || "",
|
||||
}))
|
||||
);
|
||||
setTotalFriends(res.total || 0);
|
||||
setTotalPages(Math.ceil((res.total || 0) / 20));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取好友列表失败:", error);
|
||||
Toast.show({ content: "获取好友列表失败", position: "top" });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理好友选择
|
||||
const handleFriendToggle = (friendId: string) => {
|
||||
let newIds: string[];
|
||||
if (selectedFriends.includes(friendId)) {
|
||||
newIds = selectedFriends.filter((id) => id !== friendId);
|
||||
} else {
|
||||
newIds = [...selectedFriends, friendId];
|
||||
}
|
||||
onSelect(newIds);
|
||||
if (onSelectDetail) {
|
||||
const selectedObjs = friends.filter((f) => newIds.includes(f.id));
|
||||
onSelectDetail(selectedObjs);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取显示文本
|
||||
const getDisplayText = () => {
|
||||
if (selectedFriends.length === 0) return "";
|
||||
return `已选择 ${selectedFriends.length} 个好友`;
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
setPopupVisible(false);
|
||||
};
|
||||
|
||||
// 清空搜索
|
||||
const handleClearSearch = () => {
|
||||
setSearchQuery("");
|
||||
setCurrentPage(1);
|
||||
fetchFriends(1, "");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 输入框 */}
|
||||
<div className={`${style.inputWrapper} ${className}`}>
|
||||
<span className={style.inputIcon}>
|
||||
<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
|
||||
placeholder={placeholder}
|
||||
className={style.input}
|
||||
readOnly
|
||||
onClick={openPopup}
|
||||
value={getDisplayText()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 微信好友选择弹窗 */}
|
||||
<Popup
|
||||
visible={popupVisible}
|
||||
onMaskClick={() => setPopupVisible(false)}
|
||||
position="bottom"
|
||||
bodyStyle={{ height: "80vh" }}
|
||||
>
|
||||
<div className={style.popupContainer}>
|
||||
<div className={style.popupHeader}>
|
||||
<div className={style.popupTitle}>选择微信好友</div>
|
||||
<div className={style.searchWrapper}>
|
||||
<Input
|
||||
placeholder="搜索好友"
|
||||
value={searchQuery}
|
||||
onChange={(val) => setSearchQuery(val)}
|
||||
className={style.searchInput}
|
||||
/>
|
||||
<SearchOutlined className={style.searchIcon} />
|
||||
{searchQuery && (
|
||||
<Button
|
||||
fill="none"
|
||||
size="mini"
|
||||
className={style.clearBtn}
|
||||
onClick={handleClearSearch}
|
||||
>
|
||||
<CloseOutlined />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={style.friendList}>
|
||||
{loading ? (
|
||||
<div className={style.loadingBox}>
|
||||
<div className={style.loadingText}>加载中...</div>
|
||||
</div>
|
||||
) : friends.length > 0 ? (
|
||||
<div className={style.friendListInner}>
|
||||
{friends.map((friend) => (
|
||||
<label
|
||||
key={friend.id}
|
||||
className={style.friendItem}
|
||||
onClick={() => handleFriendToggle(friend.id)}
|
||||
>
|
||||
<div className={style.radioWrapper}>
|
||||
<div
|
||||
className={
|
||||
selectedFriends.includes(friend.id)
|
||||
? style.radioSelected
|
||||
: style.radioUnselected
|
||||
}
|
||||
>
|
||||
{selectedFriends.includes(friend.id) && (
|
||||
<div className={style.radioDot}></div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={style.friendInfo}>
|
||||
<div className={style.friendAvatar}>
|
||||
{friend.avatar ? (
|
||||
<img
|
||||
src={friend.avatar}
|
||||
alt={friend.nickname}
|
||||
className={style.avatarImg}
|
||||
/>
|
||||
) : (
|
||||
friend.nickname.charAt(0)
|
||||
)}
|
||||
</div>
|
||||
<div className={style.friendDetail}>
|
||||
<div className={style.friendName}>
|
||||
{friend.nickname}
|
||||
</div>
|
||||
<div className={style.friendId}>
|
||||
微信ID: {friend.wechatId}
|
||||
</div>
|
||||
{friend.customer && (
|
||||
<div className={style.friendCustomer}>
|
||||
归属客户: {friend.customer}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className={style.emptyBox}>
|
||||
<div className={style.emptyText}>
|
||||
{deviceIds.length === 0
|
||||
? "请先选择设备"
|
||||
: searchQuery
|
||||
? `没有找到包含"${searchQuery}"的好友`
|
||||
: "没有找到好友"}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={style.paginationRow}>
|
||||
<div className={style.totalCount}>总计 {totalFriends} 个好友</div>
|
||||
<div className={style.paginationControls}>
|
||||
<Button
|
||||
fill="none"
|
||||
size="mini"
|
||||
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
|
||||
disabled={currentPage === 1 || loading}
|
||||
className={style.pageBtn}
|
||||
>
|
||||
<LeftOutlined />
|
||||
</Button>
|
||||
<span className={style.pageInfo}>
|
||||
{currentPage} / {totalPages}
|
||||
</span>
|
||||
<Button
|
||||
fill="none"
|
||||
size="mini"
|
||||
onClick={() =>
|
||||
setCurrentPage(Math.min(totalPages, currentPage + 1))
|
||||
}
|
||||
disabled={currentPage === totalPages || loading}
|
||||
className={style.pageBtn}
|
||||
>
|
||||
<RightOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={style.popupFooter}>
|
||||
<Button
|
||||
fill="outline"
|
||||
onClick={() => setPopupVisible(false)}
|
||||
className={style.cancelBtn}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
onClick={handleConfirm}
|
||||
className={style.confirmBtn}
|
||||
>
|
||||
确定 ({selectedFriends.length})
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Popup>
|
||||
</>
|
||||
);
|
||||
}
|
||||
223
nkebao/src/components/FriendSelection/module.scss
Normal file
223
nkebao/src/components/FriendSelection/module.scss
Normal file
@@ -0,0 +1,223 @@
|
||||
.inputWrapper {
|
||||
position: relative;
|
||||
}
|
||||
.inputIcon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #bdbdbd;
|
||||
font-size: 20px;
|
||||
}
|
||||
.input {
|
||||
padding-left: 38px !important;
|
||||
height: 48px;
|
||||
border-radius: 16px !important;
|
||||
border: 1px solid #e5e6eb !important;
|
||||
font-size: 16px;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.popupContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
.popupHeader {
|
||||
padding: 24px;
|
||||
}
|
||||
.popupTitle {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.searchWrapper {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.searchInput {
|
||||
padding-left: 40px !important;
|
||||
padding-top: 8px !important;
|
||||
padding-bottom: 8px !important;
|
||||
border-radius: 24px !important;
|
||||
border: 1px solid #e5e6eb !important;
|
||||
font-size: 15px;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
.searchIcon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #bdbdbd;
|
||||
font-size: 16px;
|
||||
}
|
||||
.clearBtn {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
border-radius: 50%;
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
.friendList {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.friendListInner {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
.friendItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
&:hover {
|
||||
background: #f5f6fa;
|
||||
}
|
||||
}
|
||||
.radioWrapper {
|
||||
margin-right: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.radioSelected {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #1890ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.radioUnselected {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #e5e6eb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.radioDot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #1890ff;
|
||||
}
|
||||
.friendInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
.friendAvatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatarImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.friendDetail {
|
||||
flex: 1;
|
||||
}
|
||||
.friendName {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #222;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.friendId {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.friendCustomer {
|
||||
font-size: 13px;
|
||||
color: #bdbdbd;
|
||||
}
|
||||
|
||||
.loadingBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.loadingText {
|
||||
color: #888;
|
||||
font-size: 15px;
|
||||
}
|
||||
.emptyBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.emptyText {
|
||||
color: #888;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.paginationRow {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
}
|
||||
.totalCount {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
}
|
||||
.paginationControls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.pageBtn {
|
||||
padding: 0 8px;
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
}
|
||||
.pageInfo {
|
||||
font-size: 14px;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.popupFooter {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
}
|
||||
.cancelBtn {
|
||||
padding: 0 24px;
|
||||
border-radius: 24px;
|
||||
border: 1px solid #e5e6eb;
|
||||
}
|
||||
.confirmBtn {
|
||||
padding: 0 24px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
317
nkebao/src/components/GroupSelection/index.tsx
Normal file
317
nkebao/src/components/GroupSelection/index.tsx
Normal file
@@ -0,0 +1,317 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
SearchOutlined,
|
||||
CloseOutlined,
|
||||
LeftOutlined,
|
||||
RightOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { Input, Button, Popup, Toast } from "antd-mobile";
|
||||
import request from "@/api/request";
|
||||
import style from "./module.scss";
|
||||
|
||||
// 群组接口类型
|
||||
interface WechatGroup {
|
||||
id: string;
|
||||
chatroomId: string;
|
||||
name: string;
|
||||
avatar: string;
|
||||
ownerWechatId: string;
|
||||
ownerNickname: string;
|
||||
ownerAvatar: string;
|
||||
}
|
||||
|
||||
// 组件属性接口
|
||||
interface GroupSelectionProps {
|
||||
selectedGroups: string[];
|
||||
onSelect: (groups: string[]) => void;
|
||||
onSelectDetail?: (groups: WechatGroup[]) => void;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function GroupSelection({
|
||||
selectedGroups,
|
||||
onSelect,
|
||||
onSelectDetail,
|
||||
placeholder = "选择群聊",
|
||||
className = "",
|
||||
}: GroupSelectionProps) {
|
||||
const [popupVisible, setPopupVisible] = useState(false);
|
||||
const [groups, setGroups] = useState<WechatGroup[]>([]);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [totalGroups, setTotalGroups] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// 打开弹窗并请求第一页群组
|
||||
const openPopup = () => {
|
||||
setCurrentPage(1);
|
||||
setSearchQuery("");
|
||||
setPopupVisible(true);
|
||||
fetchGroups(1, "");
|
||||
};
|
||||
|
||||
// 当页码变化时，拉取对应页数据（弹窗已打开时）
|
||||
useEffect(() => {
|
||||
if (popupVisible && currentPage !== 1) {
|
||||
fetchGroups(currentPage, searchQuery);
|
||||
}
|
||||
}, [currentPage, popupVisible, searchQuery]);
|
||||
|
||||
// 搜索防抖
|
||||
useEffect(() => {
|
||||
if (!popupVisible) return;
|
||||
const timer = setTimeout(() => {
|
||||
setCurrentPage(1);
|
||||
fetchGroups(1, searchQuery);
|
||||
}, 500);
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchQuery, popupVisible]);
|
||||
|
||||
// 获取群组列表API - 支持keyword
|
||||
const fetchGroups = async (page: number, keyword: string = "") => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params: any = {
|
||||
page,
|
||||
limit: 20,
|
||||
};
|
||||
if (keyword.trim()) {
|
||||
params.keyword = keyword.trim();
|
||||
}
|
||||
|
||||
const res = await request("/v1/chatroom", params, "GET");
|
||||
|
||||
if (res && Array.isArray(res.list)) {
|
||||
setGroups(
|
||||
res.list.map((group: any) => ({
|
||||
id: group.id?.toString() || "",
|
||||
chatroomId: group.chatroomId || "",
|
||||
name: group.name || "",
|
||||
avatar: group.avatar || "",
|
||||
ownerWechatId: group.ownerWechatId || "",
|
||||
ownerNickname: group.ownerNickname || "",
|
||||
ownerAvatar: group.ownerAvatar || "",
|
||||
}))
|
||||
);
|
||||
setTotalGroups(res.total || 0);
|
||||
setTotalPages(Math.ceil((res.total || 0) / 20));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取群组列表失败:", error);
|
||||
Toast.show({ content: "获取群组列表失败", position: "top" });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理群组选择
|
||||
const handleGroupToggle = (groupId: string) => {
|
||||
let newIds: string[];
|
||||
if (selectedGroups.includes(groupId)) {
|
||||
newIds = selectedGroups.filter((id) => id !== groupId);
|
||||
} else {
|
||||
newIds = [...selectedGroups, groupId];
|
||||
}
|
||||
onSelect(newIds);
|
||||
if (onSelectDetail) {
|
||||
const selectedObjs = groups.filter((g) => newIds.includes(g.id));
|
||||
onSelectDetail(selectedObjs);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取显示文本
|
||||
const getDisplayText = () => {
|
||||
if (selectedGroups.length === 0) return "";
|
||||
return `已选择 ${selectedGroups.length} 个群聊`;
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
setPopupVisible(false);
|
||||
};
|
||||
|
||||
// 清空搜索
|
||||
const handleClearSearch = () => {
|
||||
setSearchQuery("");
|
||||
setCurrentPage(1);
|
||||
fetchGroups(1, "");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 输入框 */}
|
||||
<div className={`${style.inputWrapper} ${className}`}>
|
||||
<span className={style.inputIcon}>
|
||||
<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
|
||||
placeholder={placeholder}
|
||||
className={style.input}
|
||||
readOnly
|
||||
onClick={openPopup}
|
||||
value={getDisplayText()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 群组选择弹窗 */}
|
||||
<Popup
|
||||
visible={popupVisible}
|
||||
onMaskClick={() => setPopupVisible(false)}
|
||||
position="bottom"
|
||||
bodyStyle={{ height: "80vh" }}
|
||||
>
|
||||
<div className={style.popupContainer}>
|
||||
<div className={style.popupHeader}>
|
||||
<div className={style.popupTitle}>选择群聊</div>
|
||||
<div className={style.searchWrapper}>
|
||||
<Input
|
||||
placeholder="搜索群聊"
|
||||
value={searchQuery}
|
||||
onChange={(val) => setSearchQuery(val)}
|
||||
className={style.searchInput}
|
||||
/>
|
||||
<SearchOutlined className={style.searchIcon} />
|
||||
{searchQuery && (
|
||||
<Button
|
||||
fill="none"
|
||||
size="mini"
|
||||
className={style.clearBtn}
|
||||
onClick={handleClearSearch}
|
||||
>
|
||||
<CloseOutlined />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={style.groupList}>
|
||||
{loading ? (
|
||||
<div className={style.loadingBox}>
|
||||
<div className={style.loadingText}>加载中...</div>
|
||||
</div>
|
||||
) : groups.length > 0 ? (
|
||||
<div className={style.groupListInner}>
|
||||
{groups.map((group) => (
|
||||
<label
|
||||
key={group.id}
|
||||
className={style.groupItem}
|
||||
onClick={() => handleGroupToggle(group.id)}
|
||||
>
|
||||
<div className={style.radioWrapper}>
|
||||
<div
|
||||
className={
|
||||
selectedGroups.includes(group.id)
|
||||
? style.radioSelected
|
||||
: style.radioUnselected
|
||||
}
|
||||
>
|
||||
{selectedGroups.includes(group.id) && (
|
||||
<div className={style.radioDot}></div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={style.groupInfo}>
|
||||
<div className={style.groupAvatar}>
|
||||
{group.avatar ? (
|
||||
<img
|
||||
src={group.avatar}
|
||||
alt={group.name}
|
||||
className={style.avatarImg}
|
||||
/>
|
||||
) : (
|
||||
group.name.charAt(0)
|
||||
)}
|
||||
</div>
|
||||
<div className={style.groupDetail}>
|
||||
<div className={style.groupName}>{group.name}</div>
|
||||
<div className={style.groupId}>
|
||||
群ID: {group.chatroomId}
|
||||
</div>
|
||||
{group.ownerNickname && (
|
||||
<div className={style.groupOwner}>
|
||||
群主: {group.ownerNickname}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className={style.emptyBox}>
|
||||
<div className={style.emptyText}>
|
||||
{searchQuery
|
||||
? `没有找到包含"${searchQuery}"的群聊`
|
||||
: "没有找到群聊"}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={style.paginationRow}>
|
||||
<div className={style.totalCount}>
|
||||
总计 {totalGroups} 个群聊
|
||||
{searchQuery && ` (搜索: "${searchQuery}")`}
|
||||
</div>
|
||||
<div className={style.paginationControls}>
|
||||
<Button
|
||||
fill="none"
|
||||
size="mini"
|
||||
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
|
||||
disabled={currentPage === 1 || loading}
|
||||
className={style.pageBtn}
|
||||
>
|
||||
<LeftOutlined />
|
||||
</Button>
|
||||
<span className={style.pageInfo}>
|
||||
{currentPage} / {totalPages}
|
||||
</span>
|
||||
<Button
|
||||
fill="none"
|
||||
size="mini"
|
||||
onClick={() =>
|
||||
setCurrentPage(Math.min(totalPages, currentPage + 1))
|
||||
}
|
||||
disabled={currentPage === totalPages || loading}
|
||||
className={style.pageBtn}
|
||||
>
|
||||
<RightOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={style.popupFooter}>
|
||||
<Button
|
||||
fill="outline"
|
||||
onClick={() => setPopupVisible(false)}
|
||||
className={style.cancelBtn}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
onClick={handleConfirm}
|
||||
className={style.confirmBtn}
|
||||
>
|
||||
确定 ({selectedGroups.length})
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Popup>
|
||||
</>
|
||||
);
|
||||
}
|
||||
223
nkebao/src/components/GroupSelection/module.scss
Normal file
223
nkebao/src/components/GroupSelection/module.scss
Normal file
@@ -0,0 +1,223 @@
|
||||
.inputWrapper {
|
||||
position: relative;
|
||||
}
|
||||
.inputIcon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #bdbdbd;
|
||||
font-size: 20px;
|
||||
}
|
||||
.input {
|
||||
padding-left: 38px !important;
|
||||
height: 48px;
|
||||
border-radius: 16px !important;
|
||||
border: 1px solid #e5e6eb !important;
|
||||
font-size: 16px;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.popupContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
.popupHeader {
|
||||
padding: 24px;
|
||||
}
|
||||
.popupTitle {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.searchWrapper {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.searchInput {
|
||||
padding-left: 40px !important;
|
||||
padding-top: 8px !important;
|
||||
padding-bottom: 8px !important;
|
||||
border-radius: 24px !important;
|
||||
border: 1px solid #e5e6eb !important;
|
||||
font-size: 15px;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
.searchIcon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #bdbdbd;
|
||||
font-size: 16px;
|
||||
}
|
||||
.clearBtn {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
border-radius: 50%;
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
.groupList {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.groupListInner {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
.groupItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
&:hover {
|
||||
background: #f5f6fa;
|
||||
}
|
||||
}
|
||||
.radioWrapper {
|
||||
margin-right: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.radioSelected {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #1890ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.radioUnselected {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #e5e6eb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.radioDot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #1890ff;
|
||||
}
|
||||
.groupInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
.groupAvatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatarImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.groupDetail {
|
||||
flex: 1;
|
||||
}
|
||||
.groupName {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #222;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.groupId {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.groupOwner {
|
||||
font-size: 13px;
|
||||
color: #bdbdbd;
|
||||
}
|
||||
|
||||
.loadingBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.loadingText {
|
||||
color: #888;
|
||||
font-size: 15px;
|
||||
}
|
||||
.emptyBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.emptyText {
|
||||
color: #888;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.paginationRow {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
}
|
||||
.totalCount {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
}
|
||||
.paginationControls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.pageBtn {
|
||||
padding: 0 8px;
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
}
|
||||
.pageInfo {
|
||||
font-size: 14px;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.popupFooter {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
}
|
||||
.cancelBtn {
|
||||
padding: 0 24px;
|
||||
border-radius: 24px;
|
||||
border: 1px solid #e5e6eb;
|
||||
}
|
||||
.confirmBtn {
|
||||
padding: 0 24px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
258
nkebao/src/pages/mine/Profile.tsx
Normal file
258
nkebao/src/pages/mine/Profile.tsx
Normal file
@@ -0,0 +1,258 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { ChevronRight, Settings, Bell, LogOut, Smartphone, MessageCircle, Database, FolderOpen } from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { useToast } from '@/components/ui/toast';
|
||||
import Layout from '@/components/Layout';
|
||||
import BottomNav from '@/components/BottomNav';
|
||||
import UnifiedHeader from '@/components/UnifiedHeader';
|
||||
import '@/components/Layout.css';
|
||||
|
||||
export default function Profile() {
|
||||
const navigate = useNavigate();
|
||||
const { user, logout, isAuthenticated } = useAuth();
|
||||
const { toast } = useToast();
|
||||
const [showLogoutDialog, setShowLogoutDialog] = useState(false);
|
||||
const [userInfo, setUserInfo] = useState<any>(null);
|
||||
const [stats, setStats] = useState({
|
||||
devices: 12,
|
||||
wechat: 25,
|
||||
traffic: 8,
|
||||
content: 156,
|
||||
});
|
||||
|
||||
// 从localStorage获取用户信息
|
||||
useEffect(() => {
|
||||
const userInfoStr = localStorage.getItem('userInfo');
|
||||
if (userInfoStr) {
|
||||
setUserInfo(JSON.parse(userInfoStr));
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 用户信息
|
||||
const currentUserInfo = {
|
||||
name: userInfo?.username || user?.username || "卡若",
|
||||
email: userInfo?.email || "zhangsan@example.com",
|
||||
role: "管理员",
|
||||
joinDate: "2023-01-15",
|
||||
lastLogin: "2024-01-20 14:30",
|
||||
};
|
||||
|
||||
// 功能模块数据
|
||||
const functionModules = [
|
||||
{
|
||||
id: "devices",
|
||||
title: "设备管理",
|
||||
description: "管理您的设备和微信账号",
|
||||
icon: <Smartphone className="h-5 w-5 text-blue-500" />,
|
||||
count: stats.devices,
|
||||
path: "/devices",
|
||||
bgColor: "bg-blue-50",
|
||||
},
|
||||
{
|
||||
id: "wechat",
|
||||
title: "微信号管理",
|
||||
description: "管理微信账号和好友",
|
||||
icon: <MessageCircle className="h-5 w-5 text-green-500" />,
|
||||
count: stats.wechat,
|
||||
path: "/wechat-accounts",
|
||||
bgColor: "bg-green-50",
|
||||
},
|
||||
{
|
||||
id: "traffic",
|
||||
title: "流量池",
|
||||
description: "管理用户流量池和分组",
|
||||
icon: <Database className="h-5 w-5 text-purple-500" />,
|
||||
count: stats.traffic,
|
||||
path: "/traffic-pool",
|
||||
bgColor: "bg-purple-50",
|
||||
},
|
||||
{
|
||||
id: "content",
|
||||
title: "内容库",
|
||||
description: "管理营销内容和素材",
|
||||
icon: <FolderOpen className="h-5 w-5 text-orange-500" />,
|
||||
count: stats.content,
|
||||
path: "/content",
|
||||
bgColor: "bg-orange-50",
|
||||
},
|
||||
];
|
||||
|
||||
// 加载统计数据
|
||||
const loadStats = async () => {
|
||||
try {
|
||||
// 这里可以调用实际的API
|
||||
// const [deviceStats, wechatStats, trafficStats, contentStats] = await Promise.allSettled([
|
||||
// getDeviceStats(),
|
||||
// getWechatStats(),
|
||||
// getTrafficStats(),
|
||||
// getContentStats(),
|
||||
// ]);
|
||||
|
||||
// 暂时使用模拟数据
|
||||
setStats({
|
||||
devices: 12,
|
||||
wechat: 25,
|
||||
traffic: 8,
|
||||
content: 156,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("加载统计数据失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadStats();
|
||||
}, []);
|
||||
|
||||
const handleLogout = () => {
|
||||
// 清除本地存储的用户信息
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('token_expired');
|
||||
localStorage.removeItem('s2_accountId');
|
||||
localStorage.removeItem('userInfo');
|
||||
setShowLogoutDialog(false);
|
||||
logout();
|
||||
navigate('/login');
|
||||
toast({
|
||||
title: '退出成功',
|
||||
description: '您已安全退出系统',
|
||||
});
|
||||
};
|
||||
|
||||
const handleFunctionClick = (path: string) => {
|
||||
navigate(path);
|
||||
};
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return (
|
||||
<div className="flex h-screen items-center justify-center">
|
||||
<div className="text-gray-500">请先登录</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<UnifiedHeader
|
||||
title="我的"
|
||||
showBack={false}
|
||||
titleColor="blue"
|
||||
actions={[
|
||||
{
|
||||
type: 'icon',
|
||||
icon: Bell,
|
||||
onClick: () => console.log('Notifications'),
|
||||
},
|
||||
{
|
||||
type: 'icon',
|
||||
icon: Settings,
|
||||
onClick: () => console.log('Settings'),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
}
|
||||
footer={<BottomNav />}
|
||||
>
|
||||
<div className="bg-gray-50 pb-16">
|
||||
<div className="p-4 space-y-4">
|
||||
{/* 用户信息卡片 */}
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Avatar className="h-16 w-16">
|
||||
<AvatarImage src={userInfo?.avatar || user?.avatar || ''} />
|
||||
<AvatarFallback className="bg-gray-200 text-gray-600 text-lg font-medium">
|
||||
{currentUserInfo.name.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<h2 className="text-lg font-medium">{currentUserInfo.name}</h2>
|
||||
<span className="px-2 py-1 text-xs bg-gradient-to-r from-orange-400 to-orange-500 text-white rounded-full font-medium shadow-sm">
|
||||
{currentUserInfo.role}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mb-2">{currentUserInfo.email}</p>
|
||||
<div className="text-xs text-gray-500">
|
||||
<div>最近登录: {currentUserInfo.lastLogin}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col space-y-2">
|
||||
<Button variant="ghost" size="icon">
|
||||
<Bell className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Settings className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 我的功能 */}
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="space-y-2">
|
||||
{functionModules.map((module) => (
|
||||
<div
|
||||
key={module.id}
|
||||
className="flex items-center p-4 rounded-lg border hover:bg-gray-50 cursor-pointer transition-colors w-full"
|
||||
onClick={() => handleFunctionClick(module.path)}
|
||||
>
|
||||
<div className={`p-2 rounded-lg ${module.bgColor} mr-3`}>{module.icon}</div>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-sm">{module.title}</div>
|
||||
<div className="text-xs text-gray-500">{module.description}</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="px-2 py-1 text-xs bg-gray-50 text-gray-700 rounded-full border border-gray-200 font-medium shadow-sm">
|
||||
{module.count}
|
||||
</span>
|
||||
<ChevronRight className="h-4 w-4 text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 退出登录 */}
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full text-red-600 border-red-200 hover:bg-red-50 bg-transparent"
|
||||
onClick={() => setShowLogoutDialog(true)}
|
||||
>
|
||||
<LogOut className="h-4 w-4 mr-2" />
|
||||
退出登录
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 退出登录确认对话框 */}
|
||||
<Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>确认退出登录</DialogTitle>
|
||||
<DialogDescription>
|
||||
您确定要退出登录吗？退出后需要重新登录才能使用完整功能。
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex justify-end space-x-2 mt-4">
|
||||
<Button variant="outline" onClick={() => setShowLogoutDialog(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleLogout}>
|
||||
确认退出
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,5 @@
|
||||
.mine-page {
|
||||
padding: 16px;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
@@ -59,22 +57,24 @@
|
||||
.menu-card {
|
||||
margin-bottom: 16px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
|
||||
:global(.adm-card-body) {
|
||||
padding: 0;
|
||||
|
||||
:global(.adm-list-body) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
:global(.adm-card-body) {
|
||||
padding: 14px 0 0 0;
|
||||
}
|
||||
:global(.adm-list-body-inner) {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
:global(.adm-list-item) {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
padding: 0px;
|
||||
:global(.adm-list-item-content) {
|
||||
padding: 0;
|
||||
border: 1px solid #f0f0f0;
|
||||
margin-bottom: 12px;
|
||||
padding: 0 12px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
:global(.adm-list-item-content-prefix) {
|
||||
@@ -104,9 +104,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.logout-section {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
border-radius: 8px;
|
||||
|
||||
@@ -1,78 +1,179 @@
|
||||
import React from "react";
|
||||
import { Card, NavBar, List, Button } from "antd-mobile";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Card, NavBar, List, Button, Dialog, Toast } from "antd-mobile";
|
||||
import {
|
||||
UserOutline,
|
||||
AppOutline,
|
||||
BellOutline,
|
||||
HeartOutline,
|
||||
StarOutline,
|
||||
MessageOutline,
|
||||
SendOutline,
|
||||
MailOutline,
|
||||
} from "antd-mobile-icons";
|
||||
LogoutOutlined,
|
||||
PhoneOutlined,
|
||||
MessageOutlined,
|
||||
DatabaseOutlined,
|
||||
FolderOpenOutlined,
|
||||
BellOutlined,
|
||||
SettingOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import style from "./index.module.scss";
|
||||
|
||||
const Mine: React.FC = () => {
|
||||
const userInfo = {
|
||||
name: "张三",
|
||||
avatar: "https://via.placeholder.com/60",
|
||||
level: "VIP会员",
|
||||
points: 1280,
|
||||
const navigate = useNavigate();
|
||||
const [userInfo, setUserInfo] = useState<any>(null);
|
||||
const [stats, setStats] = useState({
|
||||
devices: 12,
|
||||
wechat: 25,
|
||||
traffic: 8,
|
||||
content: 156,
|
||||
});
|
||||
const [showLogoutDialog, setShowLogoutDialog] = useState(false);
|
||||
|
||||
// 从localStorage获取用户信息
|
||||
useEffect(() => {
|
||||
const userInfoStr = localStorage.getItem("userInfo");
|
||||
if (userInfoStr) {
|
||||
setUserInfo(JSON.parse(userInfoStr));
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 用户信息
|
||||
const currentUserInfo = {
|
||||
name: userInfo?.username || "售前",
|
||||
email: userInfo?.email || "zhangsan@example.com",
|
||||
role: "管理员",
|
||||
lastLogin: "2024-01-20 14:30",
|
||||
avatar: userInfo?.avatar || "",
|
||||
};
|
||||
|
||||
const menuItems = [
|
||||
// 功能模块数据
|
||||
const functionModules = [
|
||||
{
|
||||
icon: <UserOutline />,
|
||||
title: "个人资料",
|
||||
subtitle: "修改个人信息",
|
||||
path: "/profile",
|
||||
id: "devices",
|
||||
title: "设备管理",
|
||||
description: "管理您的设备和微信账号",
|
||||
icon: <PhoneOutlined />,
|
||||
count: stats.devices,
|
||||
path: "/devices",
|
||||
bgColor: "#e6f7ff",
|
||||
iconColor: "#1890ff",
|
||||
},
|
||||
{
|
||||
icon: <AppOutline />,
|
||||
title: "系统设置",
|
||||
subtitle: "应用设置与偏好",
|
||||
path: "/settings",
|
||||
id: "wechat",
|
||||
title: "微信号管理",
|
||||
description: "管理微信账号和好友",
|
||||
icon: <MessageOutlined />,
|
||||
count: stats.wechat,
|
||||
path: "/wechat-accounts",
|
||||
bgColor: "#f6ffed",
|
||||
iconColor: "#52c41a",
|
||||
},
|
||||
{
|
||||
icon: <BellOutline />,
|
||||
title: "消息通知",
|
||||
subtitle: "通知设置",
|
||||
path: "/notifications",
|
||||
id: "traffic",
|
||||
title: "流量池",
|
||||
description: "管理用户流量池和分组",
|
||||
icon: <DatabaseOutlined />,
|
||||
count: stats.traffic,
|
||||
path: "/traffic-pool",
|
||||
bgColor: "#f9f0ff",
|
||||
iconColor: "#722ed1",
|
||||
},
|
||||
{
|
||||
icon: <HeartOutline />,
|
||||
title: "我的收藏",
|
||||
subtitle: "收藏的内容",
|
||||
path: "/favorites",
|
||||
},
|
||||
{
|
||||
icon: <StarOutline />,
|
||||
title: "我的评价",
|
||||
subtitle: "查看评价记录",
|
||||
path: "/reviews",
|
||||
},
|
||||
{
|
||||
icon: <MessageOutline />,
|
||||
title: "意见反馈",
|
||||
subtitle: "问题反馈与建议",
|
||||
path: "/feedback",
|
||||
},
|
||||
{
|
||||
icon: <SendOutline />,
|
||||
title: "联系客服",
|
||||
subtitle: "在线客服",
|
||||
path: "/customer-service",
|
||||
},
|
||||
{
|
||||
icon: <MailOutline />,
|
||||
title: "关于我们",
|
||||
subtitle: "版本信息",
|
||||
path: "/about",
|
||||
id: "content",
|
||||
title: "内容库",
|
||||
description: "管理营销内容和素材",
|
||||
icon: <FolderOpenOutlined />,
|
||||
count: stats.content,
|
||||
path: "/content",
|
||||
bgColor: "#fff7e6",
|
||||
iconColor: "#fa8c16",
|
||||
},
|
||||
];
|
||||
|
||||
// 加载统计数据
|
||||
const loadStats = async () => {
|
||||
try {
|
||||
// 这里可以调用实际的API
|
||||
// const [deviceStats, wechatStats, trafficStats, contentStats] = await Promise.allSettled([
|
||||
// getDeviceStats(),
|
||||
// getWechatStats(),
|
||||
// getTrafficStats(),
|
||||
// getContentStats(),
|
||||
// ]);
|
||||
|
||||
// 暂时使用模拟数据
|
||||
setStats({
|
||||
devices: 12,
|
||||
wechat: 25,
|
||||
traffic: 8,
|
||||
content: 156,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("加载统计数据失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadStats();
|
||||
}, []);
|
||||
|
||||
const handleLogout = () => {
|
||||
// 清除本地存储的用户信息
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("token_expired");
|
||||
localStorage.removeItem("s2_accountId");
|
||||
localStorage.removeItem("userInfo");
|
||||
setShowLogoutDialog(false);
|
||||
navigate("/login");
|
||||
Toast.show({
|
||||
content: "退出成功",
|
||||
position: "top",
|
||||
});
|
||||
};
|
||||
|
||||
const handleFunctionClick = (path: string) => {
|
||||
navigate(path);
|
||||
};
|
||||
|
||||
// 渲染用户头像
|
||||
const renderUserAvatar = () => {
|
||||
if (currentUserInfo.avatar) {
|
||||
return <img src={currentUserInfo.avatar} alt="头像" />;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "#1890ff",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
color: "white",
|
||||
fontSize: "24px",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
售
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 渲染功能模块图标
|
||||
const renderModuleIcon = (module: any) => (
|
||||
<div
|
||||
style={{
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
backgroundColor: module.bgColor,
|
||||
borderRadius: "8px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
color: module.iconColor,
|
||||
fontSize: "20px",
|
||||
}}
|
||||
>
|
||||
{module.icon}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
@@ -88,54 +189,112 @@ const Mine: React.FC = () => {
|
||||
{/* 用户信息卡片 */}
|
||||
<Card className={style["user-card"]}>
|
||||
<div className={style["user-info"]}>
|
||||
<div className={style["user-avatar"]}>
|
||||
<img src={userInfo.avatar} alt="头像" />
|
||||
</div>
|
||||
<div className={style["user-avatar"]}>{renderUserAvatar()}</div>
|
||||
<div className={style["user-details"]}>
|
||||
<div className={style["user-name"]}>{userInfo.name}</div>
|
||||
<div className={style["user-level"]}>{userInfo.level}</div>
|
||||
<div className={style["user-points"]}>
|
||||
积分: {userInfo.points}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
marginBottom: "4px",
|
||||
}}
|
||||
>
|
||||
<div className={style["user-name"]}>{currentUserInfo.name}</div>
|
||||
<span
|
||||
style={{
|
||||
padding: "2px 8px",
|
||||
backgroundColor: "#fa8c16",
|
||||
color: "white",
|
||||
borderRadius: "12px",
|
||||
fontSize: "12px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
{currentUserInfo.role}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={{ fontSize: "14px", color: "#666", marginBottom: "4px" }}
|
||||
>
|
||||
{currentUserInfo.email}
|
||||
</div>
|
||||
<div style={{ fontSize: "12px", color: "#666" }}>
|
||||
最近登录: {currentUserInfo.lastLogin}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{ display: "flex", flexDirection: "column", gap: "8px" }}
|
||||
>
|
||||
<BellOutlined style={{ fontSize: "20px", color: "#666" }} />
|
||||
<SettingOutlined style={{ fontSize: "20px", color: "#666" }} />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 菜单列表 */}
|
||||
{/* 我的功能 */}
|
||||
<Card className={style["menu-card"]}>
|
||||
<List>
|
||||
{menuItems.map((item, index) => (
|
||||
{functionModules.map((module) => (
|
||||
<List.Item
|
||||
key={index}
|
||||
prefix={item.icon}
|
||||
title={item.title}
|
||||
description={item.subtitle}
|
||||
key={module.id}
|
||||
prefix={renderModuleIcon(module)}
|
||||
title={module.title}
|
||||
description={module.description}
|
||||
extra={
|
||||
<span
|
||||
style={{
|
||||
padding: "2px 8px",
|
||||
backgroundColor: "#f0f0f0",
|
||||
borderRadius: "12px",
|
||||
fontSize: "12px",
|
||||
color: "#666",
|
||||
}}
|
||||
>
|
||||
{module.count}
|
||||
</span>
|
||||
}
|
||||
arrow
|
||||
onClick={() => {
|
||||
// 这里可以添加导航逻辑
|
||||
console.log(`点击了: ${item.title}`);
|
||||
}}
|
||||
onClick={() => handleFunctionClick(module.path)}
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
</Card>
|
||||
|
||||
{/* 退出登录按钮 */}
|
||||
<div className={style["logout-section"]}>
|
||||
<Button
|
||||
block
|
||||
color="danger"
|
||||
fill="outline"
|
||||
className={style["logout-btn"]}
|
||||
onClick={() => {
|
||||
// 这里可以添加退出登录逻辑
|
||||
console.log("退出登录");
|
||||
}}
|
||||
>
|
||||
退出登录
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
block
|
||||
color="danger"
|
||||
fill="outline"
|
||||
className={style["logout-btn"]}
|
||||
onClick={() => setShowLogoutDialog(true)}
|
||||
>
|
||||
<LogoutOutlined style={{ marginRight: "8px" }} />
|
||||
退出登录
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 退出登录确认对话框 */}
|
||||
<Dialog
|
||||
content="您确定要退出登录吗？退出后需要重新登录才能使用完整功能。"
|
||||
visible={showLogoutDialog}
|
||||
closeOnAction
|
||||
actions={[
|
||||
[
|
||||
{
|
||||
key: "cancel",
|
||||
text: "取消",
|
||||
},
|
||||
{
|
||||
key: "confirm",
|
||||
text: "确认退出",
|
||||
bold: true,
|
||||
danger: true,
|
||||
onClick: handleLogout,
|
||||
},
|
||||
],
|
||||
]}
|
||||
onClose={() => setShowLogoutDialog(false)}
|
||||
/>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -5,7 +5,7 @@ import {
|
||||
UpdateLikeTaskData,
|
||||
LikeRecord,
|
||||
PaginatedResponse,
|
||||
} from "@/types/auto-like";
|
||||
} from "@/pages/workspace/auto-like/record/api";
|
||||
|
||||
// 获取自动点赞任务列表
|
||||
export function fetchAutoLikeTasks(
|
||||
|
||||
@@ -22,7 +22,7 @@ import {
|
||||
toggleAutoLikeTask,
|
||||
copyAutoLikeTask,
|
||||
} from "./api";
|
||||
import { LikeTask } from "@/types/auto-like";
|
||||
import { LikeTask } from "@/pages/workspace/auto-like/record/api";
|
||||
import style from "./index.module.scss";
|
||||
|
||||
// 卡片菜单组件
|
||||
|
||||
@@ -3,7 +3,7 @@ import {
|
||||
CreateLikeTaskData,
|
||||
UpdateLikeTaskData,
|
||||
LikeTask,
|
||||
} from "@/types/auto-like";
|
||||
} from "@/pages/workspace/auto-like/record/api";
|
||||
|
||||
// 获取自动点赞任务详情
|
||||
export function fetchAutoLikeTaskDetail(id: string): Promise<LikeTask | null> {
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { Button, Input, Switch, message, Spin } from "antd";
|
||||
import {
|
||||
ArrowLeftOutlined,
|
||||
PlusOutlined,
|
||||
MinusOutlined,
|
||||
CheckOutlined,
|
||||
ArrowLeftOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { Button, Input, Switch, message, Spin } from "antd";
|
||||
import { NavBar } from "antd-mobile";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import {
|
||||
@@ -14,7 +13,11 @@ import {
|
||||
updateAutoLikeTask,
|
||||
fetchAutoLikeTaskDetail,
|
||||
} from "./api";
|
||||
import { ContentType } from "@/types/auto-like";
|
||||
import {
|
||||
CreateLikeTaskData,
|
||||
UpdateLikeTaskData,
|
||||
ContentType,
|
||||
} from "@/pages/workspace/auto-like/record/api";
|
||||
import style from "./new.module.scss";
|
||||
|
||||
const contentTypeLabels: Record<ContentType, string> = {
|
||||
@@ -24,32 +27,28 @@ const contentTypeLabels: Record<ContentType, string> = {
|
||||
link: "链接",
|
||||
};
|
||||
|
||||
const steps = ["基础设置", "设备选择", "人群选择"];
|
||||
|
||||
const defaultForm = {
|
||||
name: "",
|
||||
interval: 5,
|
||||
maxLikes: 200,
|
||||
startTime: "08:00",
|
||||
endTime: "22:00",
|
||||
contentTypes: ["text", "image", "video"] as ContentType[],
|
||||
devices: [] as string[],
|
||||
friends: [] as string[],
|
||||
targetTags: [] as string[],
|
||||
friendMaxLikes: 10,
|
||||
enableFriendTags: false,
|
||||
friendTags: "",
|
||||
};
|
||||
|
||||
const NewAutoLike: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const isEditMode = !!id;
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
const [currentStep, setCurrentStep] = useState(1);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(isEditMode);
|
||||
const [autoEnabled, setAutoEnabled] = useState(false);
|
||||
const [formData, setFormData] = useState({ ...defaultForm });
|
||||
const [formData, setFormData] = useState<CreateLikeTaskData>({
|
||||
name: "",
|
||||
interval: 5,
|
||||
maxLikes: 200,
|
||||
startTime: "08:00",
|
||||
endTime: "22:00",
|
||||
contentTypes: ["text", "image", "video"],
|
||||
devices: [],
|
||||
friends: [],
|
||||
targetTags: [],
|
||||
friendMaxLikes: 10,
|
||||
enableFriendTags: false,
|
||||
friendTags: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isEditMode && id) {
|
||||
@@ -90,12 +89,12 @@ const NewAutoLike: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateFormData = (data: Partial<typeof formData>) => {
|
||||
const handleUpdateFormData = (data: Partial<CreateLikeTaskData>) => {
|
||||
setFormData((prev) => ({ ...prev, ...data }));
|
||||
};
|
||||
|
||||
const handleNext = () => setCurrentStep((prev) => Math.min(prev + 1, 2));
|
||||
const handlePrev = () => setCurrentStep((prev) => Math.max(prev - 1, 0));
|
||||
const handleNext = () => setCurrentStep((prev) => Math.min(prev + 1, 3));
|
||||
const handlePrev = () => setCurrentStep((prev) => Math.max(prev - 1, 1));
|
||||
|
||||
const handleComplete = async () => {
|
||||
if (!formData.name.trim()) {
|
||||
@@ -125,104 +124,90 @@ const NewAutoLike: React.FC = () => {
|
||||
|
||||
// 步骤1：基础设置
|
||||
const renderBasicSettings = () => (
|
||||
<div className={style.formStep}>
|
||||
<div className={style.formItem}>
|
||||
<div className={style.formLabel}>任务名称</div>
|
||||
<div className={style["form-section"]}>
|
||||
<div className={style["form-item"]}>
|
||||
<label className={style["form-label"]}>任务名称</label>
|
||||
<Input
|
||||
placeholder="请输入任务名称"
|
||||
value={formData.name}
|
||||
onChange={(e) => handleUpdateFormData({ name: e.target.value })}
|
||||
className={style.input}
|
||||
className={style["form-input"]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={style.formItem}>
|
||||
<div className={style.formLabel}>点赞间隔</div>
|
||||
<div className={style.counterRow}>
|
||||
<button
|
||||
type="button"
|
||||
className={style.counterBtn}
|
||||
<div className={style["form-item"]}>
|
||||
<label className={style["form-label"]}>点赞间隔</label>
|
||||
<div className={style["stepper-group"]}>
|
||||
<Button
|
||||
icon={<MinusOutlined />}
|
||||
onClick={() =>
|
||||
handleUpdateFormData({
|
||||
interval: Math.max(1, formData.interval - 1),
|
||||
})
|
||||
}
|
||||
>
|
||||
<MinusOutlined />
|
||||
</button>
|
||||
<span className={style.counterValue}>{formData.interval} 秒</span>
|
||||
<button
|
||||
type="button"
|
||||
className={style.counterBtn}
|
||||
className={style["stepper-btn"]}
|
||||
/>
|
||||
<span className={style["stepper-value"]}>{formData.interval} 秒</span>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() =>
|
||||
handleUpdateFormData({ interval: formData.interval + 1 })
|
||||
}
|
||||
>
|
||||
<PlusOutlined />
|
||||
</button>
|
||||
className={style["stepper-btn"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={style.counterTip}>设置两次点赞之间的最小时间间隔</div>
|
||||
</div>
|
||||
|
||||
<div className={style.formItem}>
|
||||
<div className={style.formLabel}>每日最大点赞数</div>
|
||||
<div className={style.counterRow}>
|
||||
<button
|
||||
type="button"
|
||||
className={style.counterBtn}
|
||||
<div className={style["form-item"]}>
|
||||
<label className={style["form-label"]}>每日上限</label>
|
||||
<div className={style["stepper-group"]}>
|
||||
<Button
|
||||
icon={<MinusOutlined />}
|
||||
onClick={() =>
|
||||
handleUpdateFormData({
|
||||
maxLikes: Math.max(1, formData.maxLikes - 10),
|
||||
})
|
||||
}
|
||||
>
|
||||
<MinusOutlined />
|
||||
</button>
|
||||
<span className={style.counterValue}>{formData.maxLikes} 次</span>
|
||||
<button
|
||||
type="button"
|
||||
className={style.counterBtn}
|
||||
className={style["stepper-btn"]}
|
||||
/>
|
||||
<span className={style["stepper-value"]}>{formData.maxLikes} 次</span>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() =>
|
||||
handleUpdateFormData({ maxLikes: formData.maxLikes + 10 })
|
||||
}
|
||||
>
|
||||
<PlusOutlined />
|
||||
</button>
|
||||
className={style["stepper-btn"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={style.counterTip}>设置每天最多点赞的次数</div>
|
||||
</div>
|
||||
|
||||
<div className={style.formItem}>
|
||||
<div className={style.formLabel}>点赞时间范围</div>
|
||||
<div className={style.timeRow}>
|
||||
<div className={style["form-item"]}>
|
||||
<label className={style["form-label"]}>执行时间</label>
|
||||
<div className={style["time-range"]}>
|
||||
<Input
|
||||
type="time"
|
||||
value={formData.startTime}
|
||||
onChange={(e) =>
|
||||
handleUpdateFormData({ startTime: e.target.value })
|
||||
}
|
||||
className={style.inputTime}
|
||||
className={style["time-input"]}
|
||||
/>
|
||||
<span className={style.timeTo}>至</span>
|
||||
<span className={style["time-separator"]}>至</span>
|
||||
<Input
|
||||
type="time"
|
||||
value={formData.endTime}
|
||||
onChange={(e) => handleUpdateFormData({ endTime: e.target.value })}
|
||||
className={style.inputTime}
|
||||
className={style["time-input"]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={style.formItem}>
|
||||
<div className={style.formLabel}>点赞内容类型</div>
|
||||
<div className={style.contentTypes}>
|
||||
{(["text", "image", "video"] as ContentType[]).map((type) => (
|
||||
<div className={style["form-item"]}>
|
||||
<label className={style["form-label"]}>内容类型</label>
|
||||
<div className={style["content-types"]}>
|
||||
{(["text", "image", "video", "link"] as ContentType[]).map((type) => (
|
||||
<span
|
||||
key={type}
|
||||
className={
|
||||
formData.contentTypes.includes(type)
|
||||
? style.contentTypeTagActive
|
||||
: style.contentTypeTag
|
||||
? style["content-type-tag-active"]
|
||||
: style["content-type-tag"]
|
||||
}
|
||||
onClick={() => {
|
||||
const newTypes = formData.contentTypes.includes(type)
|
||||
@@ -236,109 +221,78 @@ const NewAutoLike: React.FC = () => {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={style.formItem}>
|
||||
<div className={style.switchRow}>
|
||||
<span className={style.switchLabel}>启用好友标签</span>
|
||||
<Switch
|
||||
checked={formData.enableFriendTags}
|
||||
onChange={(checked) =>
|
||||
handleUpdateFormData({ enableFriendTags: checked })
|
||||
}
|
||||
className={style.switch}
|
||||
/>
|
||||
</div>
|
||||
{formData.enableFriendTags && (
|
||||
<div className={style.formItem}>
|
||||
<div className={style.formLabel}>好友标签</div>
|
||||
<Input
|
||||
placeholder="请输入标签"
|
||||
value={formData.friendTags}
|
||||
onChange={(e) =>
|
||||
handleUpdateFormData({ friendTags: e.target.value })
|
||||
}
|
||||
className={style.input}
|
||||
/>
|
||||
<div className={style.counterTip}>只给有此标签的好友点赞</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={style["form-item"]}>
|
||||
<label className={style["form-label"]}>自动开启</label>
|
||||
<Switch checked={autoEnabled} onChange={setAutoEnabled} />
|
||||
</div>
|
||||
|
||||
<div className={style.formItem}>
|
||||
<div className={style.switchRow}>
|
||||
<span className={style.switchLabel}>自动开启</span>
|
||||
<Switch
|
||||
checked={autoEnabled}
|
||||
onChange={setAutoEnabled}
|
||||
className={style.switch}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={style.formStepBtnRow}>
|
||||
<Button type="primary" onClick={handleNext} className={style.nextBtn}>
|
||||
<div className={style["form-actions"]}>
|
||||
<Button
|
||||
type="primary"
|
||||
block
|
||||
onClick={handleNext}
|
||||
size="large"
|
||||
className={style["main-btn"]}
|
||||
>
|
||||
下一步
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// 步骤2：设备选择
|
||||
// 步骤2：设备选择（占位）
|
||||
const renderDeviceSelection = () => (
|
||||
<div className={style.formStep}>
|
||||
<div className={style.formItem}>
|
||||
<div className={style.formLabel}>选择设备</div>
|
||||
<Input
|
||||
placeholder="请选择设备"
|
||||
value={formData.devices.join(", ")}
|
||||
readOnly
|
||||
onClick={() => message.info("这里应弹出设备选择器")}
|
||||
className={style.input}
|
||||
/>
|
||||
{formData.devices.length > 0 && (
|
||||
<div className={style.selectedTip}>
|
||||
已选设备: {formData.devices.length}个
|
||||
</div>
|
||||
)}
|
||||
<div className={style["form-section"]}>
|
||||
<div className={style["placeholder-content"]}>
|
||||
<span className={style["placeholder-icon"]}>[设备选择组件占位]</span>
|
||||
<div className={style["placeholder-text"]}>设备选择功能开发中...</div>
|
||||
<div className={style["placeholder-subtext"]}>
|
||||
当前已选择 {formData.devices?.length || 0} 个设备
|
||||
</div>
|
||||
</div>
|
||||
<div className={style.formStepBtnRow}>
|
||||
<Button onClick={handlePrev} className={style.prevBtn}>
|
||||
<div className={style["form-actions"]}>
|
||||
<Button
|
||||
onClick={handlePrev}
|
||||
size="large"
|
||||
className={style["secondary-btn"]}
|
||||
>
|
||||
上一步
|
||||
</Button>
|
||||
<Button type="primary" onClick={handleNext} className={style.nextBtn}>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleNext}
|
||||
size="large"
|
||||
className={style["main-btn"]}
|
||||
>
|
||||
下一步
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// 步骤3：人群选择
|
||||
const renderFriendSelection = () => (
|
||||
<div className={style.formStep}>
|
||||
<div className={style.formItem}>
|
||||
<div className={style.formLabel}>选择微信好友</div>
|
||||
<Input
|
||||
placeholder="请选择微信好友"
|
||||
value={formData.friends.join(", ")}
|
||||
readOnly
|
||||
onClick={() => message.info("这里应弹出好友选择器")}
|
||||
className={style.input}
|
||||
/>
|
||||
{formData.friends.length > 0 && (
|
||||
<div className={style.selectedTip}>
|
||||
已选好友: {formData.friends.length}个
|
||||
</div>
|
||||
)}
|
||||
// 步骤3：好友设置（占位）
|
||||
const renderFriendSettings = () => (
|
||||
<div className={style["form-section"]}>
|
||||
<div className={style["placeholder-content"]}>
|
||||
<span className={style["placeholder-icon"]}>[好友选择组件占位]</span>
|
||||
<div className={style["placeholder-text"]}>好友设置功能开发中...</div>
|
||||
<div className={style["placeholder-subtext"]}>
|
||||
当前已选择 {formData.friends?.length || 0} 个好友
|
||||
</div>
|
||||
</div>
|
||||
<div className={style.formStepBtnRow}>
|
||||
<Button onClick={handlePrev} className={style.prevBtn}>
|
||||
<div className={style["form-actions"]}>
|
||||
<Button
|
||||
onClick={handlePrev}
|
||||
size="large"
|
||||
className={style["secondary-btn"]}
|
||||
>
|
||||
上一步
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleComplete}
|
||||
size="large"
|
||||
loading={isSubmitting}
|
||||
className={style.completeBtn}
|
||||
className={style["main-btn"]}
|
||||
>
|
||||
{isEditMode ? "更新任务" : "创建任务"}
|
||||
</Button>
|
||||
@@ -367,39 +321,21 @@ const NewAutoLike: React.FC = () => {
|
||||
</NavBar>
|
||||
}
|
||||
>
|
||||
<div className={style.formBg}>
|
||||
<div className={style.formSteps}>
|
||||
{steps.map((s, i) => (
|
||||
<div
|
||||
key={s}
|
||||
className={
|
||||
style.formStepIndicator +
|
||||
" " +
|
||||
(i === currentStep
|
||||
? style.formStepActive
|
||||
: i < currentStep
|
||||
? style.formStepDone
|
||||
: "")
|
||||
}
|
||||
>
|
||||
<span className={style.formStepNum}>
|
||||
{i < currentStep ? <CheckOutlined /> : i + 1}
|
||||
</span>
|
||||
<span>{s}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<div className={style.formLoading}>
|
||||
<Spin />
|
||||
<div className={style["new-page-bg"]}>
|
||||
<div className={style["new-page-center"]}>
|
||||
{/* 步骤器保留新项目的 */}
|
||||
{/* 你可以在这里插入新项目的步骤器组件 */}
|
||||
<div className={style["form-card"]}>
|
||||
{currentStep === 1 && renderBasicSettings()}
|
||||
{currentStep === 2 && renderDeviceSelection()}
|
||||
{currentStep === 3 && renderFriendSettings()}
|
||||
{isLoading && (
|
||||
<div className={style["loading"]}>
|
||||
<Spin />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{currentStep === 0 && renderBasicSettings()}
|
||||
{currentStep === 1 && renderDeviceSelection()}
|
||||
{currentStep === 2 && renderFriendSelection()}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { request } from "./request";
|
||||
import { request } from "../../../../api/request";
|
||||
import {
|
||||
LikeTask,
|
||||
CreateLikeTaskData,
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
LikeRecord,
|
||||
ApiResponse,
|
||||
PaginatedResponse,
|
||||
} from "@/types/auto-like";
|
||||
} from "@/pages/workspace/auto-like/record/api";
|
||||
|
||||
// 获取自动点赞任务列表
|
||||
export async function fetchAutoLikeTasks(): Promise<LikeTask[]> {
|
||||
@@ -12,8 +12,8 @@ import {
|
||||
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
import { fetchLikeRecords, fetchAutoLikeTaskDetail } from "@/api/autoLike";
|
||||
import { LikeRecord, LikeTask } from "@/types/auto-like";
|
||||
import { fetchLikeRecords, fetchAutoLikeTaskDetail } from "./data";
|
||||
import { LikeRecord, LikeTask } from "./api";
|
||||
import style from "./record.module.scss";
|
||||
|
||||
// 格式化日期
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import request from "./request";
|
||||
import request from "../../../../api/request";
|
||||
|
||||
export interface GroupPushTask {
|
||||
id: string;
|
||||
@@ -10,7 +10,10 @@ import {
|
||||
} from "@ant-design/icons";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
import { getGroupPushTaskDetail, GroupPushTask } from "@/api/groupPush";
|
||||
import {
|
||||
getGroupPushTaskDetail,
|
||||
GroupPushTask,
|
||||
} from "@/pages/workspace/group-push/detail/groupPush";
|
||||
import styles from "./index.module.scss";
|
||||
|
||||
const Detail: React.FC = () => {
|
||||
|
||||
@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
|
||||
import { Button } from "antd-mobile";
|
||||
import { NavBar } from "antd-mobile";
|
||||
import { LeftOutline } from "antd-mobile-icons";
|
||||
import { createGroupPushTask } from "@/api/groupPush";
|
||||
import { createGroupPushTask } from "@/pages/workspace/group-push/detail/groupPush";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
import StepIndicator from "./components/StepIndicator";
|
||||
|
||||
@@ -38,7 +38,7 @@ import {
|
||||
toggleGroupPushTask,
|
||||
copyGroupPushTask,
|
||||
GroupPushTask,
|
||||
} from "@/api/groupPush";
|
||||
} from "@/pages/workspace/group-push/detail/groupPush";
|
||||
import styles from "./index.module.scss";
|
||||
|
||||
const { Search } = Input;
|
||||
|
||||
Reference in New Issue
Block a user