+ }
+ allowClear={!readonly}
+ size="large"
+ readOnly={readonly}
+ disabled={readonly}
+ style={
+ readonly ? { background: "#f5f5f5", cursor: "not-allowed" } : {}
+ }
+ />
+
+ )}
+ {/* 已选账号列表窗口 */}
+ {showSelectedList && selectedOptions.length > 0 && (
+
+ {selectedOptions.map(acc => (
+
+ )}
+ {/* 弹窗 */}
+
+
+ ))}
+
+ 【{acc.realName}】 {acc.userName}
+
+ {!readonly && (
+ }
+ size="small"
+ style={{
+ marginLeft: 4,
+ color: "#ff4d4f",
+ border: "none",
+ background: "none",
+ minWidth: 24,
+ height: 24,
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ }}
+ onClick={() => handleRemoveAccount(acc.id)}
+ />
+ )}
+
+ {loading ? (
+
+
+
+ ) : accounts.length > 0 ? (
+ 加载中...
+
+ {accounts.map(acc => (
+
+ ))}
+
+ ) : (
+
+
+ )}
+
+ {searchQuery
+ ? `没有找到包含"${searchQuery}"的账号`
+ : "没有找到账号"}
+
+
-
- );
-}
\ No newline at end of file
diff --git a/Cunkebao/src/components/ContentLibrarySelectionDialog.tsx b/Cunkebao/src/components/ContentLibrarySelectionDialog.tsx
deleted file mode 100644
index a2ecd9d4..00000000
--- a/Cunkebao/src/components/ContentLibrarySelectionDialog.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import React, { useState, useEffect, useCallback } from "react";
-import {
- Dialog,
- DialogContent,
- DialogHeader,
- DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Search, RefreshCw, Loader2 } from "lucide-react";
-import { fetchContentLibraryList } from "@/api/content";
-import { ContentLibrary } from "@/api/content";
-import { useToast } from "@/components/ui/toast";
-
-interface ContentLibrarySelectionDialogProps {
- open: boolean;
- onOpenChange: (open: boolean) => void;
- selectedLibraries: string[];
- onSelect: (libraries: string[]) => void;
-}
-
-export function ContentLibrarySelectionDialog({
- open,
- onOpenChange,
- selectedLibraries,
- onSelect,
-}: ContentLibrarySelectionDialogProps) {
- const { toast } = useToast();
- const [searchQuery, setSearchQuery] = useState("");
- const [loading, setLoading] = useState(false);
- const [libraries, setLibraries] = useState
- {navItems.map((item) => {
- const IconComponent = item.icon;
- const isActive = activeTab ? activeTab === item.id : item.active(location.pathname);
-
- return (
-
-
-
+ }
+ allowClear={!readonly}
+ size="large"
+ readOnly={readonly}
+ disabled={readonly}
+ style={
+ readonly ? { background: "#f5f5f5", cursor: "not-allowed" } : {}
+ }
+ />
+
+ )}
+ {/* 已选内容库列表窗口 */}
+ {showSelectedList && selectedOptions.length > 0 && (
+
+ {selectedOptions.map(item => (
+
+ )}
+ {/* 弹窗 */}
+
+
+ ))}
+
+ {item.name || item.id}
+
+ {!readonly && (
+ }
+ size="small"
+ style={{
+ marginLeft: 4,
+ color: "#ff4d4f",
+ border: "none",
+ background: "none",
+ minWidth: 24,
+ height: 24,
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ }}
+ onClick={() => handleRemoveLibrary(item.id)}
+ />
+ )}
+
+ {loading ? (
+
+
+
+ ) : libraries.length > 0 ? (
+ 加载中...
+
+ {libraries.map(item => (
+
+ ))}
+
+ ) : (
+
+
+ )}
+
+ {searchQuery
+ ? `没有找到包含"${searchQuery}"的内容库`
+ : "没有找到内容库"}
+
+
-
-
- {/* 设备选择弹窗 */}
-
-
- );
-}
diff --git a/Cunkebao/src/components/DeviceSelection/api.ts b/Cunkebao/src/components/DeviceSelection/api.ts
new file mode 100644
index 00000000..db175dda
--- /dev/null
+++ b/Cunkebao/src/components/DeviceSelection/api.ts
@@ -0,0 +1,10 @@
+import request from "@/api/request";
+
+// 获取设备列表
+export function getDeviceList(params: {
+ page: number;
+ limit: number;
+ keyword?: string;
+}) {
+ return request("/v1/devices", params, "GET");
+}
diff --git a/Cunkebao/src/components/DeviceSelection/data.ts b/Cunkebao/src/components/DeviceSelection/data.ts
new file mode 100644
index 00000000..abc9a214
--- /dev/null
+++ b/Cunkebao/src/components/DeviceSelection/data.ts
@@ -0,0 +1,26 @@
+// 设备选择项接口
+export interface DeviceSelectionItem {
+ id: number;
+ memo: string;
+ imei: string;
+ wechatId: string;
+ status: "online" | "offline";
+ wxid?: string;
+ nickname?: string;
+ usedInPlans?: number;
+}
+
+// 组件属性接口
+export interface DeviceSelectionProps {
+ selectedOptions: DeviceSelectionItem[];
+ onSelect: (devices: DeviceSelectionItem[]) => void;
+ placeholder?: string;
+ className?: string;
+ mode?: "input" | "dialog"; // 新增，默认input
+ open?: boolean; // 仅mode=dialog时生效
+ onOpenChange?: (open: boolean) => void; // 仅mode=dialog时生效
+ selectedListMaxHeight?: number; // 新增，已选列表最大高度，默认500
+ showInput?: boolean; // 新增
+ showSelectedList?: boolean; // 新增
+ readonly?: boolean; // 新增
+}
diff --git a/Cunkebao/src/components/DeviceSelection/index.module.scss b/Cunkebao/src/components/DeviceSelection/index.module.scss
new file mode 100644
index 00000000..ea776f81
--- /dev/null
+++ b/Cunkebao/src/components/DeviceSelection/index.module.scss
@@ -0,0 +1,182 @@
+.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;
+}
+
+.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;
+}
+.refreshBtn {
+ width: 36px;
+ height: 36px;
+}
+.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;
+ border-radius: 16px;
+}
+.pageInfo {
+ font-size: 14px;
+ color: #222;
+ margin: 0 8px;
+}
diff --git a/Cunkebao/src/components/DeviceSelection/index.tsx b/Cunkebao/src/components/DeviceSelection/index.tsx
new file mode 100644
index 00000000..9d31e268
--- /dev/null
+++ b/Cunkebao/src/components/DeviceSelection/index.tsx
@@ -0,0 +1,139 @@
+import React, { useState } from "react";
+import { SearchOutlined } from "@ant-design/icons";
+import { Input, Button } from "antd";
+import { DeleteOutlined } from "@ant-design/icons";
+import { DeviceSelectionProps } from "./data";
+import SelectionPopup from "./selectionPopup";
+import style from "./index.module.scss";
+
+const DeviceSelection: React.FC
+ }
+ allowClear={!readonly}
+ size="large"
+ readOnly={readonly}
+ disabled={readonly}
+ style={
+ readonly ? { background: "#f5f5f5", cursor: "not-allowed" } : {}
+ }
+ />
+
+ )}
+ {/* 已选设备列表窗口 */}
+ {mode === "input" && showSelectedList && selectedOptions.length > 0 && (
+
+ {selectedOptions.map(device => (
+
+ )}
+ {/* 弹窗 */}
+
+
+ ))}
+
+ 【 {device.memo}】 - {device.wechatId}
+
+ {!readonly && (
+ }
+ size="small"
+ style={{
+ marginLeft: 4,
+ color: "#ff4d4f",
+ border: "none",
+ background: "none",
+ minWidth: 24,
+ height: 24,
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ }}
+ onClick={() => handleRemoveDevice(device.id)}
+ />
+ )}
+
+ {loading ? (
+
+
+
+ ) : (
+ 加载中...
+
+ {filteredDevices.map(device => (
+
+ ))}
+
+ )}
+
-
-
-
-
-
-
- {/* 微信好友选择弹窗 */}
-
-
- );
-}
diff --git a/Cunkebao/src/components/FriendSelection/api.ts b/Cunkebao/src/components/FriendSelection/api.ts
new file mode 100644
index 00000000..346253ef
--- /dev/null
+++ b/Cunkebao/src/components/FriendSelection/api.ts
@@ -0,0 +1,11 @@
+import request from "@/api/request";
+
+// 获取好友列表
+export function getFriendList(params: {
+ page: number;
+ limit: number;
+ deviceIds?: string; // 逗号分隔
+ keyword?: string;
+}) {
+ return request("/v1/friend", params, "GET");
+}
diff --git a/Cunkebao/src/components/FriendSelection/data.ts b/Cunkebao/src/components/FriendSelection/data.ts
new file mode 100644
index 00000000..30b9ec70
--- /dev/null
+++ b/Cunkebao/src/components/FriendSelection/data.ts
@@ -0,0 +1,27 @@
+export interface FriendSelectionItem {
+ id: number;
+ wechatId: string;
+ nickname: string;
+ avatar: string;
+ [key: string]: any;
+}
+
+// 组件属性接口
+export interface FriendSelectionProps {
+ selectedOptions?: FriendSelectionItem[];
+ onSelect: (friends: FriendSelectionItem[]) => void;
+ deviceIds?: string[];
+ enableDeviceFilter?: boolean;
+ placeholder?: string;
+ className?: string;
+ visible?: boolean; // 新增
+ onVisibleChange?: (visible: boolean) => void; // 新增
+ selectedListMaxHeight?: number;
+ showInput?: boolean;
+ showSelectedList?: boolean;
+ readonly?: boolean;
+ onConfirm?: (
+ selectedIds: number[],
+ selectedItems: FriendSelectionItem[],
+ ) => void; // 新增
+}
diff --git a/Cunkebao/src/components/FriendSelection/index.module.scss b/Cunkebao/src/components/FriendSelection/index.module.scss
new file mode 100644
index 00000000..f450dde2
--- /dev/null
+++ b/Cunkebao/src/components/FriendSelection/index.module.scss
@@ -0,0 +1,246 @@
+.inputWrapper {
+ position: relative;
+}
+.selectedListRow {
+ padding: 8px;
+ border-bottom: 1px solid #f0f0f0;
+ font-size: 14px;
+}
+.selectedListRowContent {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+}
+.selectedListRowContentText {
+ flex: 1;
+}
+.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: 100vh;
+ 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 {
+ 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;
+}
+.cancelBtn {
+ padding: 0 24px;
+ border-radius: 24px;
+ border: 1px solid #e5e6eb;
+}
+.confirmBtn {
+ padding: 0 24px;
+ border-radius: 24px;
+}
diff --git a/Cunkebao/src/components/FriendSelection/index.tsx b/Cunkebao/src/components/FriendSelection/index.tsx
new file mode 100644
index 00000000..63c04a45
--- /dev/null
+++ b/Cunkebao/src/components/FriendSelection/index.tsx
@@ -0,0 +1,140 @@
+import React, { useState } from "react";
+import { SearchOutlined, DeleteOutlined } from "@ant-design/icons";
+import { Button, Input } from "antd";
+import { Avatar } from "antd-mobile";
+import style from "./index.module.scss";
+import { FriendSelectionProps } from "./data";
+import SelectionPopup from "./selectionPopup";
+
+export default function FriendSelection({
+ selectedOptions = [],
+ onSelect,
+ deviceIds = [],
+ enableDeviceFilter = true,
+ placeholder = "选择微信好友",
+ className = "",
+ visible,
+ onVisibleChange,
+ selectedListMaxHeight = 300,
+ showInput = true,
+ showSelectedList = true,
+ readonly = false,
+ onConfirm,
+}: FriendSelectionProps) {
+ const [popupVisible, setPopupVisible] = useState(false);
+ // 内部弹窗交给 selectionPopup 处理
+
+ // 受控弹窗逻辑
+ const realVisible = visible !== undefined ? visible : popupVisible;
+ const setRealVisible = (v: boolean) => {
+ if (onVisibleChange) onVisibleChange(v);
+ if (visible === undefined) setPopupVisible(v);
+ };
+
+ // 打开弹窗
+ const openPopup = () => {
+ if (readonly) return;
+ setRealVisible(true);
+ };
+
+ // 获取显示文本
+ const getDisplayText = () => {
+ if (!selectedOptions || selectedOptions.length === 0) return "";
+ return `已选择 ${selectedOptions.length} 个好友`;
+ };
+
+ // 删除已选好友
+ const handleRemoveFriend = (id: number) => {
+ if (readonly) return;
+ onSelect((selectedOptions || []).filter(v => v.id !== id));
+ };
+
+ // 弹窗确认回调
+ const handleConfirm = (
+ selectedIds: number[],
+ selectedItems: typeof selectedOptions,
+ ) => {
+ onSelect(selectedItems);
+ if (onConfirm) onConfirm(selectedIds, selectedItems);
+ setRealVisible(false);
+ };
+
+ return (
+ <>
+ {/* 输入框 */}
+ {showInput && (
+
+ }
+ allowClear={!readonly}
+ size="large"
+ readOnly={readonly}
+ disabled={readonly}
+ style={
+ readonly ? { background: "#f5f5f5", cursor: "not-allowed" } : {}
+ }
+ />
+
+ )}
+ {/* 已选好友列表窗口 */}
+ {showSelectedList && (selectedOptions || []).length > 0 && (
+
+ {(selectedOptions || []).map(friend => (
+
+ )}
+ {/* 弹窗 */}
+
+
+ ))}
+
+
+
+
+ {!readonly && (
+ }
+ size="small"
+ style={{
+ marginLeft: 4,
+ color: "#ff4d4f",
+ border: "none",
+ background: "none",
+ minWidth: 24,
+ height: 24,
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ }}
+ onClick={() => handleRemoveFriend(friend.id)}
+ />
+ )}
+ {friend.nickname}
+ {friend.wechatId}
+
+ {loading ? (
+
+
+
+ ) : friends.length > 0 ? (
+ 加载中...
+
+ {friends.map(friend => (
+
+ ) : (
+
+ f.id === friend.id)}
+ onChange={() => !readonly && handleFriendToggle(friend)}
+ disabled={readonly}
+ style={{ marginRight: 12 }}
+ />
+
+ ))}
+
+
+
+ {friend.avatar ? (
+ 
+ ) : (
+ friend.nickname.charAt(0)
+ )}
+
+
+
+ {friend.nickname}
+
+ 微信ID: {friend.wechatId}
+
+ {friend.customer && (
+
+ 归属客户: {friend.customer}
+
+ )}
+
+
+ )}
+
+ {deviceIds.length === 0
+ ? "请先选择设备"
+ : searchQuery
+ ? `没有找到包含"${searchQuery}"的好友`
+ : "没有找到好友"}
+
+
-
-
-
-
-
-
- {/* 群组选择弹窗 */}
-
-
- );
-}
diff --git a/Cunkebao/src/components/GroupSelection/api.ts b/Cunkebao/src/components/GroupSelection/api.ts
new file mode 100644
index 00000000..cda84b81
--- /dev/null
+++ b/Cunkebao/src/components/GroupSelection/api.ts
@@ -0,0 +1,10 @@
+import request from "@/api/request";
+
+// 获取群组列表
+export function getGroupList(params: {
+ page: number;
+ limit: number;
+ keyword?: string;
+}) {
+ return request("/v1/chatroom", params, "GET");
+}
diff --git a/Cunkebao/src/components/GroupSelection/data.ts b/Cunkebao/src/components/GroupSelection/data.ts
new file mode 100644
index 00000000..b042b6d3
--- /dev/null
+++ b/Cunkebao/src/components/GroupSelection/data.ts
@@ -0,0 +1,43 @@
+// 群组接口类型
+export interface WechatGroup {
+ id: string;
+ chatroomId: string;
+ name: string;
+ avatar: string;
+ ownerWechatId: string;
+ ownerNickname: string;
+ ownerAvatar: string;
+}
+
+export interface GroupSelectionItem {
+ id: string;
+ avatar: string;
+ chatroomId?: string;
+ createTime?: number;
+ identifier?: string;
+ name: string;
+ ownerAlias?: string;
+ ownerAvatar?: string;
+ ownerNickname?: string;
+ ownerWechatId?: string;
+ [key: string]: any;
+}
+
+// 组件属性接口
+export interface GroupSelectionProps {
+ selectedOptions: GroupSelectionItem[];
+ onSelect: (groups: GroupSelectionItem[]) => void;
+ onSelectDetail?: (groups: WechatGroup[]) => void;
+ placeholder?: string;
+ className?: string;
+ visible?: boolean;
+ onVisibleChange?: (visible: boolean) => void;
+ selectedListMaxHeight?: number;
+ showInput?: boolean;
+ showSelectedList?: boolean;
+ readonly?: boolean;
+ onConfirm?: (
+ selectedIds: string[],
+ selectedItems: GroupSelectionItem[],
+ ) => void; // 新增
+}
diff --git a/Cunkebao/src/components/GroupSelection/index.module.scss b/Cunkebao/src/components/GroupSelection/index.module.scss
new file mode 100644
index 00000000..bedba3ef
--- /dev/null
+++ b/Cunkebao/src/components/GroupSelection/index.module.scss
@@ -0,0 +1,206 @@
+.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;
+}
+.selectedListRow {
+ padding: 8px;
+ border-bottom: 1px solid #f0f0f0;
+ font-size: 14px;
+}
+.selectedListRowContent {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+}
+.selectedListRowContentText {
+ flex: 1;
+}
+
+.popupContainer {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ 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;
+ transition: background 0.2s;
+ &:hover {
+ background: #f5f6fa;
+ }
+}
+.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 {
+ 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;
+}
diff --git a/Cunkebao/src/components/GroupSelection/index.tsx b/Cunkebao/src/components/GroupSelection/index.tsx
new file mode 100644
index 00000000..fe180054
--- /dev/null
+++ b/Cunkebao/src/components/GroupSelection/index.tsx
@@ -0,0 +1,126 @@
+import React, { useState } from "react";
+import { SearchOutlined, DeleteOutlined } from "@ant-design/icons";
+import { Button, Input } from "antd";
+import { Avatar } from "antd-mobile";
+import style from "./index.module.scss";
+import SelectionPopup from "./selectionPopup";
+import { GroupSelectionProps } from "./data";
+export default function GroupSelection({
+ selectedOptions,
+ onSelect,
+ onSelectDetail,
+ placeholder = "选择群聊",
+ className = "",
+ visible,
+ onVisibleChange,
+ selectedListMaxHeight = 300,
+ showInput = true,
+ showSelectedList = true,
+ readonly = false,
+ onConfirm,
+}: GroupSelectionProps) {
+ const [popupVisible, setPopupVisible] = useState(false);
+
+ // 删除已选群聊
+ const handleRemoveGroup = (id: string) => {
+ if (readonly) return;
+ onSelect(selectedOptions.filter(g => g.id !== id));
+ };
+
+ // 受控弹窗逻辑
+ const realVisible = visible !== undefined ? visible : popupVisible;
+ const setRealVisible = (v: boolean) => {
+ if (onVisibleChange) onVisibleChange(v);
+ if (visible === undefined) setPopupVisible(v);
+ };
+
+ // 打开弹窗
+ const openPopup = () => {
+ if (readonly) return;
+ setRealVisible(true);
+ };
+
+ // 获取显示文本
+ const getDisplayText = () => {
+ if (selectedOptions.length === 0) return "";
+ return `已选择 ${selectedOptions.length} 个群聊`;
+ };
+
+ return (
+ <>
+ {/* 输入框 */}
+ {showInput && (
+
+ }
+ allowClear={!readonly}
+ size="large"
+ readOnly={readonly}
+ disabled={readonly}
+ style={
+ readonly ? { background: "#f5f5f5", cursor: "not-allowed" } : {}
+ }
+ />
+
+ )}
+ {/* 已选群聊列表窗口 */}
+ {showSelectedList && selectedOptions.length > 0 && (
+
+ {selectedOptions.map(group => (
+
+ )}
+ {/* 弹窗 */}
+
+
+ ))}
+
+
+
+
+ {!readonly && (
+ }
+ size="small"
+ style={{
+ marginLeft: 4,
+ color: "#ff4d4f",
+ border: "none",
+ background: "none",
+ minWidth: 24,
+ height: 24,
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ }}
+ onClick={() => handleRemoveGroup(group.id)}
+ />
+ )}
+ {group.name}
+ {group.chatroomId}
+
+ {loading ? (
+
+
+
+ ) : groups.length > 0 ? (
+ 加载中...
+
+ {groups.map(group => (
+
+ ) : (
+
+ g.id === group.id)}
+ onChange={() => !readonly && handleGroupToggle(group)}
+ disabled={readonly}
+ style={{ marginRight: 12 }}
+ />
+
+ ))}
+
+
+
+ {group.avatar ? (
+ 
+ ) : (
+ group.name.charAt(0)
+ )}
+
+
+
+ {group.name}
+
+ 群ID: {group.chatroomId}
+
+ {group.ownerNickname && (
+
+ 群主: {group.ownerNickname}
+
+ )}
+
+
+ )}
+
+ {searchQuery
+ ? `没有找到包含"${searchQuery}"的群聊`
+ : "没有找到群聊"}
+
+
+ {renderItem(item, index)}
+
+ ));
+ };
+
+ // 渲染加载更多按钮
+ const renderLoadMoreButton = () => {
+ if (!enableLoadMoreButton || !hasMore) return null;
+
+ return (
+
+
+
+ );
+ };
+
+ // 渲染无更多数据提示
+ const renderNoMoreText = () => {
+ if (hasMore || data.length === 0) return null;
+
+ return {noMoreText}
;
+ };
+
+ // 渲染空状态
+ const renderEmptyState = () => {
+ if (data.length > 0 || loading) return null;
+
+ return (
+
+
+ );
+ };
+
+ const content = (
+ 📝
+ 暂无数据
+
+ {renderListItems()}
+ {renderLoadMoreButton()}
+ {renderNoMoreText()}
+ {renderEmptyState()}
+
+ {/* 无限滚动组件 */}
+ {enableInfiniteScroll && (
+
+ );
+
+ // 如果启用下拉刷新，包装PullToRefresh
+ if (enablePullToRefresh && onRefresh) {
+ return (
+
- {header && {header} }
- {children}
- {footer && }
-
- );
-};
-
-export default Layout;
diff --git a/Cunkebao/src/components/Layout/Layout.tsx b/Cunkebao/src/components/Layout/Layout.tsx
new file mode 100644
index 00000000..160d993e
--- /dev/null
+++ b/Cunkebao/src/components/Layout/Layout.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect } from "react";
+import { SpinLoading } from "antd-mobile";
+import styles from "./layout.module.scss";
+
+interface LayoutProps {
+ loading?: boolean;
+ children?: React.ReactNode;
+ header?: React.ReactNode;
+ footer?: React.ReactNode;
+}
+
+const Layout: React.FC
+ {header && {header} }
+
+ {loading ? (
+
+ {footer && }
+
+ );
+};
+
+export default Layout;
diff --git a/Cunkebao/src/components/Layout/layout.module.scss b/Cunkebao/src/components/Layout/layout.module.scss
new file mode 100644
index 00000000..3818f44d
--- /dev/null
+++ b/Cunkebao/src/components/Layout/layout.module.scss
@@ -0,0 +1,28 @@
+.container {
+ display: flex;
+ height: 100vh;
+ flex-direction: column;
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+}
+
+.container main {
+ flex: 1;
+ overflow: auto;
+}
+
+.loadingContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ min-height: 300px;
+ background: rgba(255, 255, 255, 0.8);
+}
+
+.loadingText {
+ margin-top: 16px;
+ color: #666;
+ font-size: 14px;
+ text-align: center;
+}
diff --git a/Cunkebao/src/components/LayoutWrapper.tsx b/Cunkebao/src/components/LayoutWrapper.tsx
deleted file mode 100644
index 859eb2e7..00000000
--- a/Cunkebao/src/components/LayoutWrapper.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { useLocation } from 'react-router-dom';
-import BottomNav from './BottomNav';
-
-// 配置需要底部导航的页面路径（白名单）
-const BOTTOM_NAV_CONFIG = [
- '/', // 首页
- '/scenarios', // 场景获客
- '/workspace', // 工作台
- '/profile', // 我的
-];
-
-interface LayoutWrapperProps {
- children: React.ReactNode;
-}
-
-export default function LayoutWrapper({ children }: LayoutWrapperProps) {
- const location = useLocation();
-
- // 检查当前路径是否需要底部导航
- const shouldShowBottomNav = BOTTOM_NAV_CONFIG.some(path => {
- // 特殊处理首页路由 '/'
- if (path === '/') {
- return location.pathname === '/';
- }
- return location.pathname === path;
- });
-
- // 如果是登录页面，直接渲染内容（不显示底部导航）
- if (location.pathname === '/login') {
- return <>{children};
- }
-
- // 只有在配置列表中的页面才显示底部导航
- return (
-
+
+ ) : (
+ children
+ )}
+ 加载中...
+
-
- );
-}
\ No newline at end of file
diff --git a/Cunkebao/src/components/LineChart.tsx b/Cunkebao/src/components/LineChart.tsx
new file mode 100644
index 00000000..bb93e512
--- /dev/null
+++ b/Cunkebao/src/components/LineChart.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import ReactECharts from "echarts-for-react";
+
+interface LineChartProps {
+ title?: string;
+ xData: string[];
+ yData: number[];
+ height?: number | string;
+}
+
+const LineChart: React.FC
- {children}
-
- {shouldShowBottomNav &&
+
+ {
+ if (backFn) {
+ backFn();
+ } else {
+ navigate(-1);
+ }
+ }}
+ />
+
+ )
+ }
+ right={right}
+ >
+
+ {title}
+
+
+
+ );
+};
+
+export default NavCommon;
diff --git a/Cunkebao/src/components/PageHeader.tsx b/Cunkebao/src/components/PageHeader.tsx
deleted file mode 100644
index 33f4cd5f..00000000
--- a/Cunkebao/src/components/PageHeader.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react';
-import BackButton from './BackButton';
-import { useSimpleBack } from '@/hooks/useBackNavigation';
-
-interface PageHeaderProps {
- /** 页面标题 */
- title: string;
- /** 返回按钮文本 */
- backText?: string;
- /** 自定义返回逻辑 */
- onBack?: () => void;
- /** 默认返回路径 */
- defaultBackPath?: string;
- /** 是否显示返回按钮 */
- showBack?: boolean;
- /** 右侧扩展内容 */
- rightContent?: React.ReactNode;
- /** 自定义CSS类名 */
- className?: string;
- /** 标题样式类名 */
- titleClassName?: string;
- /** 返回按钮样式变体 */
- backButtonVariant?: 'icon' | 'button' | 'text';
- /** 返回按钮自定义样式类名 */
- backButtonClassName?: string;
- /** 是否显示底部边框 */
- showBorder?: boolean;
-}
-
-/**
- * 通用页面Header组件
- * 支持返回按钮、标题和右侧扩展插槽
- */
-export const PageHeader: React.FC
-
-
- {showBack && (
-
-
- {rightContent && (
- - {title} -
-
- {rightContent}
-
- )}
-
+ {title}
+
+ }
+ right={
+ showAddButton ? (
+
+ ) : undefined
+ }
+ />
+ }
+ footer={showFooter ?
+
+ {title}页面
+此页面正在开发中...
+
+
+ 总计 {total} 条记录
+
+
+
+ {currentPage} / {totalPages}
+
+
+
+
+
+
+ );
+};
+
+export default PopupFooter;
diff --git a/Cunkebao/src/components/PopuLayout/header.module.scss b/Cunkebao/src/components/PopuLayout/header.module.scss
new file mode 100644
index 00000000..f54cbbee
--- /dev/null
+++ b/Cunkebao/src/components/PopuLayout/header.module.scss
@@ -0,0 +1,51 @@
+.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: 5px;
+ padding: 16px;
+}
+
+.popupSearchInputWrap {
+ position: relative;
+ flex: 1;
+}
+
+.inputIcon {
+ position: absolute;
+ left: 12px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: #bdbdbd;
+ z-index: 10;
+ font-size: 18px;
+}
+
+.refreshBtn {
+ width: 36px;
+ height: 36px;
+}
+
+.loadingIcon {
+ animation: spin 1s linear infinite;
+ font-size: 16px;
+}
+
+@keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
diff --git a/Cunkebao/src/components/PopuLayout/header.tsx b/Cunkebao/src/components/PopuLayout/header.tsx
new file mode 100644
index 00000000..652433c3
--- /dev/null
+++ b/Cunkebao/src/components/PopuLayout/header.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
+import { Input, Button } from "antd";
+import { Tabs } from "antd-mobile";
+import style from "./header.module.scss";
+
+interface PopupHeaderProps {
+ title: string;
+ searchQuery: string;
+ setSearchQuery: (value: string) => void;
+ searchPlaceholder?: string;
+ loading?: boolean;
+ onRefresh?: () => void;
+ showRefresh?: boolean;
+ showSearch?: boolean;
+ showTabs?: boolean;
+ tabsConfig?: {
+ activeKey: string;
+ onChange: (key: string) => void;
+ tabs: Array<{ title: string; key: string }>;
+ };
+}
+
+const PopupHeader: React.FC已选择 {selectedCount} 条记录
+
+
+
+
+
+
+
+ {showSearch && (
+ {title}
+
+
+ )}
+
+ {showTabs && tabsConfig && (
+
+ setSearchQuery(e.target.value)}
+ prefix={
+
+ {showRefresh && onRefresh && (
+
+ )}
+
-
- );
- }
-
- // 如果未登录且不是公共页面，不渲染内容（等待重定向）
- if (!isAuthenticated && !isPublicPath) {
- return null;
- }
-
- // 如果已登录且在登录页面，不渲染内容（等待重定向）
- if (isAuthenticated && location.pathname === '/login') {
- return null;
- }
-
- // 其他情况正常渲染
- return <>{children};
-}
\ No newline at end of file
diff --git a/Cunkebao/src/components/ScenarioAcquisitionCard.tsx b/Cunkebao/src/components/ScenarioAcquisitionCard.tsx
deleted file mode 100644
index ad8343c8..00000000
--- a/Cunkebao/src/components/ScenarioAcquisitionCard.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Card } from './ui/card';
-import { Button } from './ui/button';
-import { Badge } from './ui/badge';
-import { MoreHorizontal, Copy, Pencil, Trash2, Clock, Link } from 'lucide-react';
-
-interface Task {
- id: string;
- name: string;
- status: "running" | "paused" | "completed";
- stats: {
- devices: number;
- acquired: number;
- added: number;
- };
- lastUpdated: string;
- executionTime: string;
- nextExecutionTime: string;
- trend: { date: string; customers: number }[];
- reqConf?: {
- device?: string[];
- selectedDevices?: string[];
- };
- acquiredCount?: number;
- addedCount?: number;
- passRate?: number;
-}
-
-interface ScenarioAcquisitionCardProps {
- task: Task;
- channel: string;
- onEdit: (taskId: string) => void;
- onCopy: (taskId: string) => void;
- onDelete: (taskId: string) => void;
- onOpenSettings?: (taskId: string) => void;
- onStatusChange?: (taskId: string, newStatus: "running" | "paused") => void;
-}
-
-export function ScenarioAcquisitionCard({
- task,
- channel,
- onEdit,
- onCopy,
- onDelete,
- onOpenSettings,
- onStatusChange,
-}: ScenarioAcquisitionCardProps) {
- // 兼容后端真实数据结构
- const deviceCount = Array.isArray(task.reqConf?.device)
- ? task.reqConf!.device.length
- : Array.isArray(task.reqConf?.selectedDevices)
- ? task.reqConf!.selectedDevices.length
- : 0;
- // 获客数和已添加数可根据 msgConf 或其它字段自定义
- const acquiredCount = task.acquiredCount ?? 0;
- const addedCount = task.addedCount ?? 0;
- const passRate = task.passRate ?? 0;
- const [menuOpen, setMenuOpen] = useState(false);
- const menuRef = useRef加载中...
-
-
-
-
-
- {isActive ? "进行中" : "已暂停"}
-
-
- {task.name}
-
-
-
- {menuOpen && (
-
-
-
-
- {onOpenSettings && (
-
- )}
-
-
- )}
-
-
-
-
-
-
-
-
-
-
- 设备数
- {deviceCount}
-
-
-
-
-
- 已获客
- {acquiredCount}
-
-
-
-
-
- 已添加
- {addedCount}
- 通过率
- {passRate}%
-
-
-
-
-
+
+ {steps.map((step, idx) => (
+
+ {step.id}
+
+ }
+ />
+ ))}
+
+
+ );
+};
+
+export default StepIndicator;
diff --git a/Cunkebao/src/components/TestComponent.tsx b/Cunkebao/src/components/TestComponent.tsx
deleted file mode 100644
index 2591be21..00000000
--- a/Cunkebao/src/components/TestComponent.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { cn } from '@/utils';
-
-interface TestComponentProps {
- title: string;
- className?: string;
-}
-
-const TestComponent: React.FC
-
- );
-};
-
-export default TestComponent;
\ No newline at end of file
diff --git a/Cunkebao/src/components/ThrottledButton.tsx b/Cunkebao/src/components/ThrottledButton.tsx
deleted file mode 100644
index 09d545cf..00000000
--- a/Cunkebao/src/components/ThrottledButton.tsx
+++ /dev/null
@@ -1,291 +0,0 @@
-import React from 'react';
-import {
- useThrottledRequestWithLoading,
- useThrottledRequestWithError,
- useRequestWithRetry,
- useCancellableRequest
-} from '../hooks/useThrottledRequest';
-
-interface ThrottledButtonProps {
- onClick: () => Promise{title}
-- 这是一个测试组件，用于验证路径别名 @/ 是否正常工作。 -
-
- ✓ 成功使用 @/utils 导入工具函数
-
-
-
-
- {error && errorText && (
- {errorText}
- )}
-
- );
-};
-
-// 重试按钮内容组件
-const RetryButtonContent: React.FC<{
- onClick: () => Promise
-
-
- {loading && cancelRequest && (
-
- )}
-
- );
-};
-
-// 导出其他类型的按钮组件
-export const DebouncedButton: React.FC
-
-
-
- {/* 流量池选择弹窗 */}
-
-
- );
-}
\ No newline at end of file
diff --git a/Cunkebao/src/components/UnifiedHeader.tsx b/Cunkebao/src/components/UnifiedHeader.tsx
deleted file mode 100644
index 862f1c46..00000000
--- a/Cunkebao/src/components/UnifiedHeader.tsx
+++ /dev/null
@@ -1,296 +0,0 @@
-import React from 'react';
-import { ChevronLeft, Settings, Bell, Search, RefreshCw, Filter, Plus, MoreVertical } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { useNavigate, useLocation } from 'react-router-dom';
-
-interface HeaderAction {
- type: 'button' | 'icon' | 'search' | 'custom';
- icon?: React.ComponentType{action.content}
;
- }
-
- if (action.type === 'search') {
- return (
-
-
- );
- }
-
- const IconComponent = action.icon || MoreVertical;
-
- return (
-
- );
- };
-
- return (
-
- {/* 左侧：返回按钮和标题 */}
-
-
- {showBack && (
-
- )}
- {!centerTitle && (
-
-
- {/* 中间：居中标题 */}
- {centerTitle && (
- - {title} -
- )} -
-
- )}
-
- {/* 右侧：搜索框、操作按钮、自定义内容 */}
- - {title} -
-
- {showSearch && !actions.some(a => a.type === 'search') && (
-
-
-
- )}
-
- {actions.map((action, index) => renderAction(action, index))}
-
- {rightContent && (
-
- {rightContent}
-
- )}
-
+ {/* 背景装饰 */}
+
+ );
+};
+
+export default UpdateNotification;
diff --git a/Cunkebao/src/components/Upload/AvatarUpload/index.module.scss b/Cunkebao/src/components/Upload/AvatarUpload/index.module.scss
new file mode 100644
index 00000000..abec0b86
--- /dev/null
+++ b/Cunkebao/src/components/Upload/AvatarUpload/index.module.scss
@@ -0,0 +1,484 @@
+.uploadContainer {
+ width: 100%;
+
+ // 自定义上传组件样式
+ :global {
+ .adm-image-uploader {
+ .adm-image-uploader-upload-button {
+ width: 100px;
+ height: 100px;
+ border: 1px dashed #d9d9d9;
+ border-radius: 8px;
+ background: #fafafa;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: all 0.3s;
+
+ &:hover {
+ border-color: #1677ff;
+ background: #f0f8ff;
+ }
+
+ .adm-image-uploader-upload-button-icon {
+ font-size: 32px;
+ color: #999;
+ }
+ }
+
+ .adm-image-uploader-item {
+ width: 100px;
+ height: 100px;
+ border-radius: 8px;
+ overflow: hidden;
+ position: relative;
+
+ .adm-image-uploader-item-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ .adm-image-uploader-item-delete {
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ width: 24px;
+ height: 24px;
+ background: rgba(0, 0, 0, 0.6);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-size: 14px;
+ cursor: pointer;
+ }
+
+ .adm-image-uploader-item-loading {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(255, 255, 255, 0.8);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ }
+ }
+}
+
+// 禁用状态
+.uploadContainer.disabled {
+ opacity: 0.6;
+ pointer-events: none;
+}
+
+// 错误状态
+.uploadContainer.error {
+ :global {
+ .adm-image-uploader-upload-button {
+ border-color: #ff4d4f;
+ background: #fff2f0;
+ }
+ }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+ .uploadContainer {
+ :global {
+ .adm-image-uploader {
+ .adm-image-uploader-upload-button,
+ .adm-image-uploader-item {
+ width: 80px;
+ height: 80px;
+ }
+
+ .adm-image-uploader-upload-button-icon {
+ font-size: 28px;
+ }
+ }
+ }
+ }
+}
+
+// 头像上传组件样式
+.avatarUploadContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 12px;
+
+ .avatarWrapper {
+ position: relative;
+ border-radius: 50%;
+ overflow: hidden;
+ background: #f0f0f0;
+ border: 2px solid #e0e0e0;
+ cursor: pointer;
+ transition: all 0.3s ease;
+
+ &:hover {
+ border-color: var(--primary-color);
+ box-shadow: 0 4px 12px rgba(24, 142, 238, 0.3);
+ }
+
+ .avatarImage {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ .avatarPlaceholder {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ font-size: 40px;
+ }
+
+ .avatarUploadOverlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-size: 24px;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+
+ &:hover {
+ opacity: 1;
+ }
+
+ .uploadLoading {
+ font-size: 12px;
+ text-align: center;
+ line-height: 1.4;
+ }
+ }
+
+ .avatarDeleteBtn {
+ position: absolute;
+ top: -8px;
+ right: -8px;
+ width: 24px;
+ height: 24px;
+ background: #ff4d4f;
+ color: white;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 16px;
+ font-weight: bold;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ z-index: 10;
+
+ &:hover {
+ background: #ff7875;
+ transform: scale(1.1);
+ }
+ }
+
+ &:hover .avatarUploadOverlay {
+ opacity: 1;
+ }
+ }
+
+ .avatarTip {
+ font-size: 12px;
+ color: #999;
+ text-align: center;
+ line-height: 1.4;
+ max-width: 200px;
+ }
+}
+
+// 视频上传组件样式
+.videoUploadContainer {
+ width: 100%;
+
+ .videoUploadButton {
+ width: 100%;
+ min-height: 120px;
+ border: 2px dashed #d9d9d9;
+ border-radius: 12px;
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+
+ &:hover {
+ border-color: #1890ff;
+ background: linear-gradient(135deg, #f0f8ff 0%, #e6f7ff 100%);
+ transform: translateY(-2px);
+ box-shadow: 0 8px 25px rgba(24, 144, 255, 0.15);
+ }
+
+ &:active {
+ transform: translateY(0);
+ }
+
+ .uploadingContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 12px;
+ width: 100%;
+ padding: 20px;
+
+ .uploadingIcon {
+ font-size: 32px;
+ color: #1890ff;
+ animation: pulse 2s infinite;
+ }
+
+ .uploadingText {
+ font-size: 14px;
+ color: #666;
+ font-weight: 500;
+ }
+
+ .uploadProgress {
+ width: 100%;
+ max-width: 200px;
+ }
+ }
+
+ .uploadContent {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 12px;
+ padding: 20px;
+ text-align: center;
+
+ .uploadIcon {
+ font-size: 48px;
+ color: #1890ff;
+ transition: all 0.3s ease;
+ }
+
+ .uploadText {
+ .uploadTitle {
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 4px;
+ }
+
+ .uploadSubtitle {
+ font-size: 12px;
+ color: #666;
+ line-height: 1.4;
+ }
+ }
+
+ &:hover .uploadIcon {
+ transform: scale(1.1);
+ color: #40a9ff;
+ }
+ }
+ }
+
+ .videoItem {
+ width: 100%;
+ background: #fff;
+ border: 1px solid #f0f0f0;
+ border-radius: 8px;
+ padding: 12px;
+ margin-bottom: 8px;
+ transition: all 0.3s ease;
+
+ &:hover {
+ border-color: #1890ff;
+ box-shadow: 0 4px 12px rgba(24, 144, 255, 0.1);
+ }
+
+ .videoItemContent {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+
+ .videoIcon {
+ width: 40px;
+ height: 40px;
+ background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-size: 18px;
+ flex-shrink: 0;
+ }
+
+ .videoInfo {
+ flex: 1;
+ min-width: 0;
+
+ .videoName {
+ font-size: 14px;
+ font-weight: 500;
+ color: #333;
+ margin-bottom: 4px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .videoSize {
+ font-size: 12px;
+ color: #666;
+ }
+ }
+
+ .videoActions {
+ display: flex;
+ gap: 4px;
+ flex-shrink: 0;
+
+ .previewBtn,
+ .deleteBtn {
+ padding: 4px 8px;
+ border-radius: 6px;
+ transition: all 0.3s ease;
+
+ &:hover {
+ background: #f5f5f5;
+ }
+ }
+
+ .previewBtn {
+ color: #1890ff;
+
+ &:hover {
+ color: #40a9ff;
+ background: #e6f7ff;
+ }
+ }
+
+ .deleteBtn {
+ color: #ff4d4f;
+
+ &:hover {
+ color: #ff7875;
+ background: #fff2f0;
+ }
+ }
+ }
+ }
+
+ .itemProgress {
+ margin-top: 8px;
+ }
+ }
+
+ .videoPreview {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #000;
+ border-radius: 8px;
+ overflow: hidden;
+
+ video {
+ border-radius: 8px;
+ }
+ }
+}
+
+// 动画效果
+@keyframes pulse {
+ 0% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.1);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+// 暗色主题支持
+@media (prefers-color-scheme: dark) {
+ .videoUploadContainer {
+ .videoUploadButton {
+ background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
+ border-color: #434343;
+
+ &:hover {
+ background: linear-gradient(135deg, #1a365d 0%, #2d3748 100%);
+ border-color: #40a9ff;
+ }
+
+ .uploadingContainer {
+ .uploadingText {
+ color: #ccc;
+ }
+ }
+
+ .uploadContent {
+ .uploadText {
+ .uploadTitle {
+ color: #fff;
+ }
+
+ .uploadSubtitle {
+ color: #ccc;
+ }
+ }
+ }
+ }
+
+ .videoItem {
+ background: #2a2a2a;
+ border-color: #434343;
+
+ &:hover {
+ border-color: #40a9ff;
+ }
+
+ .videoItemContent {
+ .videoInfo {
+ .videoName {
+ color: #fff;
+ }
+
+ .videoSize {
+ color: #ccc;
+ }
+ }
+
+ .videoActions {
+ .previewBtn,
+ .deleteBtn {
+ &:hover {
+ background: #434343;
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/Cunkebao/src/components/Upload/AvatarUpload/index.tsx b/Cunkebao/src/components/Upload/AvatarUpload/index.tsx
new file mode 100644
index 00000000..6c696375
--- /dev/null
+++ b/Cunkebao/src/components/Upload/AvatarUpload/index.tsx
@@ -0,0 +1,188 @@
+import React, { useState, useEffect } from "react";
+import { Toast, Dialog } from "antd-mobile";
+import { UserOutlined, CameraOutlined } from "@ant-design/icons";
+import style from "./index.module.scss";
+
+interface AvatarUploadProps {
+ value?: string;
+ onChange?: (url: string) => void;
+ disabled?: boolean;
+ className?: string;
+ size?: number; // 头像尺寸
+}
+
+const AvatarUpload: React.FC
+
+
+ {/* 主要内容 */}
+
+ {/* 图标 */}
+
+
+ {/* 动画样式 */}
+
+
+
+
+ {/* 标题 */}
+
+ 发现新版本
+
+
+ {/* 描述 */}
+
+ 为了给您提供更好的体验，请更新到最新版本
+
+
+ {/* 更新按钮 */}
+
+
+ {/* 提示文字 */}
+
+ 更新将自动重启应用
+
+
+
+ );
+};
+
+// 创建 ref
+const fileInputRef = React.createRef
+ {avatarUrl ? (
+ 
+ ) : (
+
+
+ {/* 隐藏的文件输入 */}
+
+
+ {/* 提示文字 */}
+
+
+ )}
+
+ {/* 上传覆盖层 */}
+
+ !disabled && !uploading && fileInputRef.current?.click()
+ }
+ >
+ {uploading ? (
+
+
+ {/* 删除按钮 */}
+ {avatarUrl && !disabled && (
+ 上传中...
+ ) : (
+
+ ×
+
+ )}
+
+ {uploading
+ ? "正在上传头像..."
+ : "点击头像可更换，支持JPG、PNG格式，大小不超过5MB"}
+
+
+
+
+ 功能特点：
+
+
+
+ {/* 聊天消息区域 */}
+
+ {messages.length === 0 ? (
+
+
+ {/* 输入区域 */}
+
+
+
-
+
- 点击文件按钮直接唤醒文件选择框 +
- 选择文件后自动上传 +
- 上传成功后自动发送到聊天框 +
- 支持各种文件类型和大小限制 +
- 显示文件图标和大小信息 +
+ 暂无消息，开始聊天吧！
+
+ ) : (
+
+ {messages.map(message => (
+
+ )}
+
+
+ ))}
+
+ {message.type === "text" ? (
+
+ {message.content}
+ ) : (
+
+
+ )}
+
+
+ {getFileTypeIcon(
+ message.fileInfo!.type,
+ message.fileInfo!.name,
+ )}
+
+ {message.fileInfo!.name}
+
+
+ 大小: {formatFileSize(message.fileInfo!.size)}
+
+
+ 类型: {message.fileInfo!.type}
+
+
+ 查看文件
+
+
+ {message.timestamp.toLocaleTimeString()}
+
+