+
+ ) : (
+ children
+ )}
+ 加载中...
+
+ }
+ 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}"的账号`
+ : "没有找到账号"}
+
+
+
+ );
+};
+
+export default AndroidCompatibilityCheck;
diff --git a/Touchkebao/src/components/CompatibilityCheck.tsx b/Touchkebao/src/components/CompatibilityCheck.tsx
new file mode 100644
index 00000000..563d4242
--- /dev/null
+++ b/Touchkebao/src/components/CompatibilityCheck.tsx
@@ -0,0 +1,125 @@
+import React, { useEffect, useState } from "react";
+
+interface CompatibilityInfo {
+ isCompatible: boolean;
+ browser: string;
+ version: string;
+ issues: string[];
+}
+
+const CompatibilityCheck: React.FC = () => {
+ const [compatibility, setCompatibility] = useState
+ 🚨 Android 兼容性警告
+
+
+
+ 系统版本: Android {compatibility.androidVersion}
+ {compatibility.chromeVersion > 0 &&
+ ` | Chrome: ${compatibility.chromeVersion}`}
+ {compatibility.webViewVersion > 0 &&
+ ` | WebView: ${compatibility.webViewVersion}`}
+
+
+
+
+
+ {compatibility.suggestions.length > 0 && (
+
+ 检测到的问题:
+
+
+ {compatibility.issues.map((issue, index) => (
+
+
+ • {issue}
+
+ ))}
+
+
+ )}
+
+
+ 建议解决方案:
+
+
+ {compatibility.suggestions.map((suggestion, index) => (
+
+
+ • {suggestion}
+
+ ))}
+
+ 💡 应用已启用兼容模式，但建议升级系统以获得最佳体验
+
+
+
+
+
+ );
+};
+
+export default CompatibilityCheck;
diff --git a/Touchkebao/src/components/ContentSelection/api.ts b/Touchkebao/src/components/ContentSelection/api.ts
new file mode 100644
index 00000000..a4d4bf3e
--- /dev/null
+++ b/Touchkebao/src/components/ContentSelection/api.ts
@@ -0,0 +1,5 @@
+import request from "@/api/request";
+
+export function getContentLibraryList(params: any) {
+ return request("/v1/content/library/list", params, "GET");
+}
diff --git a/Touchkebao/src/components/ContentSelection/data.ts b/Touchkebao/src/components/ContentSelection/data.ts
new file mode 100644
index 00000000..1bf8fdb8
--- /dev/null
+++ b/Touchkebao/src/components/ContentSelection/data.ts
@@ -0,0 +1,21 @@
+// 内容库接口类型
+export interface ContentItem {
+ id: number;
+ name: string;
+ [key: string]: any;
+}
+
+// 组件属性接口
+export interface ContentSelectionProps {
+ selectedOptions: ContentItem[];
+ onSelect: (selectedItems: ContentItem[]) => void;
+ placeholder?: string;
+ className?: string;
+ visible?: boolean;
+ onVisibleChange?: (visible: boolean) => void;
+ selectedListMaxHeight?: number;
+ showInput?: boolean;
+ showSelectedList?: boolean;
+ readonly?: boolean;
+ onConfirm?: (selectedItems: ContentItem[]) => void;
+}
diff --git a/Touchkebao/src/components/ContentSelection/index.module.scss b/Touchkebao/src/components/ContentSelection/index.module.scss
new file mode 100644
index 00000000..f877360a
--- /dev/null
+++ b/Touchkebao/src/components/ContentSelection/index.module.scss
@@ -0,0 +1,117 @@
+.inputWrapper {
+ position: relative;
+}
+.selectedListWindow {
+ margin-top: 8px;
+ border: 1px solid #e5e6eb;
+ border-radius: 8px;
+ background: #fff;
+}
+.selectedListRow {
+ display: flex;
+ align-items: center;
+ padding: 4px 8px;
+ border-bottom: 1px solid #f0f0f0;
+ font-size: 14px;
+}
+.libraryList {
+ flex: 1;
+ overflow-y: auto;
+}
+.libraryListInner {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ padding: 16px;
+}
+.libraryItem {
+ 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;
+ }
+}
+.checkboxWrapper {
+ margin-top: 4px;
+}
+.checkboxSelected {
+ width: 20px;
+ height: 20px;
+ border-radius: 4px;
+ background: #1677ff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.checkboxUnselected {
+ width: 20px;
+ height: 20px;
+ border-radius: 4px;
+ border: 1px solid #e5e6eb;
+ background: #fff;
+}
+.checkboxDot {
+ width: 12px;
+ height: 12px;
+ border-radius: 2px;
+ background: #fff;
+}
+.libraryInfo {
+ flex: 1;
+}
+.libraryHeader {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.libraryName {
+ font-weight: 500;
+ font-size: 16px;
+ color: #222;
+}
+.typeTag {
+ font-size: 12px;
+ color: #1677ff;
+ border: 1px solid #1677ff;
+ border-radius: 12px;
+ padding: 2px 10px;
+ margin-left: 8px;
+ background: #f4f8ff;
+ font-weight: 500;
+}
+.libraryMeta {
+ font-size: 12px;
+ color: #888;
+}
+.libraryDesc {
+ 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;
+}
+.emptyBox {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100px;
+}
+.emptyText {
+ color: #888;
+ font-size: 15px;
+}
diff --git a/Touchkebao/src/components/ContentSelection/index.tsx b/Touchkebao/src/components/ContentSelection/index.tsx
new file mode 100644
index 00000000..eadb64bc
--- /dev/null
+++ b/Touchkebao/src/components/ContentSelection/index.tsx
@@ -0,0 +1,145 @@
+import React, { useState } from "react";
+import { SearchOutlined, DeleteOutlined } from "@ant-design/icons";
+import { Button, Input } from "antd";
+import style from "./index.module.scss";
+import { ContentItem, ContentSelectionProps } from "./data";
+import SelectionPopup from "./selectionPopup";
+
+const ContentSelection: React.FC
+ 浏览器兼容性警告
+
+
+ 当前浏览器: {compatibility.browser} {compatibility.version}
+
+
+ {compatibility.issues.map((issue, index) => (
+
+ {issue}
+ ))}
+
+ 建议使用 Chrome 50+、Firefox 50+、Safari 10+ 或 Edge 12+
+
+
+ }
+ allowClear={!readonly}
+ onClear={handleClearAll}
+ 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)}
+ />
+ )}
+
+ {libraries.map(item => (
+
+ ))}
+
+ ) : (
+
+
+ );
+ };
+
+ return (
+ 数据为空
+
+ {loading ? (
+
+
+
+ ) : (
+ OptionsList()
+ )}
+ 加载中...
+
+ }
+ allowClear={!readonly}
+ onClear={handleClearAll}
+ size="large"
+ readOnly={readonly}
+ disabled={readonly}
+ style={
+ readonly ? { background: "#f5f5f5", cursor: "not-allowed" } : {}
+ }
+ />
+
+ )}
+ {/* 已选设备列表窗口 */}
+ {mode === "input" && showSelectedList && selectedOptions.length > 0 && (
+
+ {selectedOptions.map(device => (
+
+ )}
+ {/* 弹窗 */}
+
+ {/* 头像 */}
+
+ ))}
+
+ {device.avatar ? (
+ 
+ ) : (
+
+ {(device.memo || device.wechatId || "设")[0]}
+
+ )}
+
+
+
+ {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 => (
+
+ )}
+
+ {/* 顶部行：选择框和IMEI */}
+
+ ))}
+
+
+
+ {/* 主要内容区域：头像和详细信息 */}
+
+ v.id === device.id,
+ )}
+ onChange={() => handleDeviceToggle(device)}
+ className={style.deviceCheckbox}
+ />
+
+
+ IMEI: {device.imei?.toUpperCase()}
+
+
+ {/* 头像 */}
+
+
+ {device.avatar ? (
+
+ ) : (
+
+ {(device.memo || device.wechatId || "设")[0]}
+
+ )}
+
+
+ {/* 设备信息 */}
+
+
+
+ {device.memo}
+
+
+ {device.status === "online" ? "在线" : "离线"}
+
+
+
+
+ 微信号:
+
+ {device.wechatId}
+
+
+
+ 好友数:
+
+ {device.totalFriend ?? "-"}
+
+
+
+ {/* 触发器 */}
+
+ );
+};
+
+export default EmojiPicker;
diff --git a/Touchkebao/src/components/EmojiSeclection/index.ts b/Touchkebao/src/components/EmojiSeclection/index.ts
new file mode 100644
index 00000000..d4aa499f
--- /dev/null
+++ b/Touchkebao/src/components/EmojiSeclection/index.ts
@@ -0,0 +1,18 @@
+// 导出主要组件
+export { default as EmojiPicker } from "./EmojiPicker";
+
+// 导出表情数据和类型
+export {
+ EmojiCategory,
+ type EmojiInfo,
+ type EmojiName,
+ getAllEmojis,
+ getEmojisByCategory,
+ getEmojiInfo,
+ getEmojiPath,
+ searchEmojis,
+ EMOJI_CATEGORIES,
+} from "./wechatEmoji";
+
+// 默认导出
+export { default } from "./EmojiPicker";
diff --git a/Touchkebao/src/components/EmojiSeclection/wechatEmoji.ts b/Touchkebao/src/components/EmojiSeclection/wechatEmoji.ts
new file mode 100644
index 00000000..5e2f3807
--- /dev/null
+++ b/Touchkebao/src/components/EmojiSeclection/wechatEmoji.ts
@@ -0,0 +1,858 @@
+/**
+ * 微信表情包 TypeScript 模块
+ * 提供类型安全的表情访问和图片路径获取功能
+ */
+
+/**
+ * 表情类别枚举
+ */
+export enum EmojiCategory {
+ /** 人脸表情 */
+ FACE = "face",
+ /** 手势表情 */
+ GESTURE = "gesture",
+ /** 动物表情 */
+ ANIMAL = "animal",
+ /** 祝福表情 */
+ BLESSING = "blessing",
+ /** 其他表情 */
+ OTHER = "other",
+}
+
+/**
+ * 表情信息接口
+ */
+export interface EmojiInfo {
+ /** 表情名称 */
+ name: string;
+ /** 表情类别 */
+ category: EmojiCategory;
+ /** 图片文件路径 */
+ path: string;
+ /** 英文名称（可选） */
+ englishName?: string;
+}
+
+/**
+ * 表情名称类型
+ */
+export type EmojiName =
+ // 人脸表情
+ | "微笑"
+ | "撇嘴"
+ | "色"
+ | "发呆"
+ | "得意"
+ | "流泪"
+ | "害羞"
+ | "闭嘴"
+ | "睡"
+ | "大哭"
+ | "尴尬"
+ | "发怒"
+ | "调皮"
+ | "呲牙"
+ | "惊讶"
+ | "难过"
+ | "囧"
+ | "抓狂"
+ | "吐"
+ | "偷笑"
+ | "愉快"
+ | "白眼"
+ | "傲慢"
+ | "困"
+ | "惊恐"
+ | "憨笑"
+ | "悠闲"
+ | "咒骂"
+ | "疑问"
+ | "嘘"
+ | "晕"
+ | "衰"
+ | "骷髅"
+ | "敲打"
+ | "再见"
+ | "擦汗"
+ | "抠鼻"
+ | "鼓掌"
+ | "坏笑"
+ | "右哼哼"
+ | "鄙视"
+ | "委屈"
+ | "快哭了"
+ | "阴险"
+ | "亲亲"
+ | "可怜"
+ | "笑脸"
+ | "生病"
+ | "脸红"
+ | "破涕为笑"
+ | "恐惧"
+ | "失望"
+ | "无语"
+ | "嘿哈"
+ | "捂脸"
+ | "机智"
+ | "皱眉"
+ | "耶"
+ | "吃瓜"
+ | "加油"
+ | "汗"
+ | "天啊"
+ | "Emm"
+ | "社会社会"
+ | "旺柴"
+ | "好的"
+ | "打脸"
+ | "哇"
+ | "翻白眼"
+ | "666"
+ | "让我看看"
+ | "叹气"
+ | "苦涩"
+ | "裂开"
+ | "奸笑"
+ // 手势表情
+ | "握手"
+ | "胜利"
+ | "抱拳"
+ | "勾引"
+ | "拳头"
+ | "OK"
+ | "合十"
+ | "强"
+ | "拥抱"
+ | "弱"
+ // 动物表情
+ | "猪头"
+ | "跳跳"
+ | "发抖"
+ | "转圈"
+ // 祝福表情
+ | "庆祝"
+ | "礼物"
+ | "红包"
+ | "發"
+ | "福"
+ | "烟花"
+ | "爆竹"
+ // 其他表情
+ | "嘴唇"
+ | "爱心"
+ | "心碎"
+ | "啤酒"
+ | "咖啡"
+ | "蛋糕"
+ | "凋谢"
+ | "菜刀"
+ | "炸弹"
+ | "便便"
+ | "太阳"
+ | "月亮"
+ | "玫瑰";
+
+/**
+ * 表情数据映射
+ * 将表情名称映射到完整的表情信息
+ */
+const EMOJI_DATA: Record setIsOpen(!isOpen)}>{trigger || defaultTrigger}
+
+ {/* 表情选择器面板 */}
+ {isOpen && (
+
+ {/* 分类标签 */}
+
+ )}
+
+ {categories.map(category => (
+
+ ))}
+
+
+ {/* 表情网格 */}
+
+ {currentEmojis.map(emoji => (
+
+
+ {/* 空状态 */}
+ {currentEmojis.length === 0 && (
+ handleEmojiClick(emoji)}
+ title={emoji.name}
+ >
+ 
+
+ ))}
+ 暂无表情
+ )}
+
+ }
+ 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}"的好友`
+ : "没有找到好友"}
+
+
+ }
+ 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} }
+
+ {loading ? (
+
+ {footer && }
+
+ );
+};
+
+export default Layout;
diff --git a/Touchkebao/src/components/Layout/LayoutFiexd.tsx b/Touchkebao/src/components/Layout/LayoutFiexd.tsx
new file mode 100644
index 00000000..9a5cefd5
--- /dev/null
+++ b/Touchkebao/src/components/Layout/LayoutFiexd.tsx
@@ -0,0 +1,48 @@
+import React 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 LayoutFiexd: React.FC
+
+ );
+};
+
+export default LayoutFiexd;
diff --git a/Touchkebao/src/components/Layout/layout.module.scss b/Touchkebao/src/components/Layout/layout.module.scss
new file mode 100644
index 00000000..3818f44d
--- /dev/null
+++ b/Touchkebao/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/Touchkebao/src/components/LineChart.tsx b/Touchkebao/src/components/LineChart.tsx
new file mode 100644
index 00000000..bb93e512
--- /dev/null
+++ b/Touchkebao/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{header}
+
+ {loading ? (
+
+
+
+ ) : (
+ children
+ )}
+ 加载中...
+ {footer}
+
+ {/* 左侧：成员列表 */}
+
+
+
+
+ {/* 右侧：已选成员 */}
+
+ handleSearch(e.target.value)}
+ prefix={
+
+
+ {filteredMembers.length > 0 ? (
+ filteredMembers.map(member => {
+ const isSelected = selectedMembers.some(m => m.id === member.id);
+ return (
+
+ handleSelectMember(member)}
+ >
+
+ {member.nickname?.charAt(0)}
+
+
+ );
+ })
+ ) : (
+
+
+ {member.nickname}
+ {member.id}
+
+ {searchQuery ? `没有找到包含"${searchQuery}"的成员` : '暂无成员'}
+
+ )}
+
+
+
+ 已选成员 ({selectedMembers.length})
+ {!allowMultiple && （单选）}
+
+
+
+ {selectedMembers.length > 0 ? (
+ selectedMembers.map(member => (
+
+
+
+ {member.nickname?.charAt(0)}
+
+
+ ))
+ ) : (
+
+
+
+ {member.nickname}
+
+ 暂无选择
+
+ )}
+ - (
+
+
+ {
+ if (backFn) {
+ backFn();
+ } else {
+ navigate(-1);
+ }
+ }}
+ />
+
+ )
+ }
+ right={right}
+ >
+
+ {title}
+
+
+
+ );
+};
+
+export default NavCommon;
diff --git a/Touchkebao/src/components/PlaceholderPage.tsx b/Touchkebao/src/components/PlaceholderPage.tsx
new file mode 100644
index 00000000..69a8ddde
--- /dev/null
+++ b/Touchkebao/src/components/PlaceholderPage.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import { NavBar, Button } from "antd-mobile";
+import { PlusOutlined } from "@ant-design/icons";
+import Layout from "@/components/Layout/Layout";
+
+interface PlaceholderPageProps {
+ title: string;
+ showBack?: boolean;
+ showAddButton?: boolean;
+ addButtonText?: string;
+}
+
+const PlaceholderPage: React.FC
+ {title}
+
+ }
+ right={
+ showAddButton ? (
+
+ ) : undefined
+ }
+ />
+ }
+ >
+
+
+ {title}页面
+此页面正在开发中...
+
+ }
+ allowClear={!readonly}
+ size="large"
+ readOnly={readonly}
+ disabled={readonly}
+ style={
+ readonly ? { background: "#f5f5f5", cursor: "not-allowed" } : {}
+ }
+ />
+
+ )}
+ {/* 已选流量池列表窗口 */}
+ {showSelectedList && selectedOptions.length > 0 && (
+
+ {selectedOptions.map(item => (
+
+ )}
+ {/* 弹窗 */}
+
+
+ ))}
+
+
+
+ {(item.nickname || item.name || "").charAt(0)}
+
+
+
+ {!readonly && (
+ }
+ size="small"
+ style={{
+ marginLeft: 4,
+ color: "#ff4d4f",
+ border: "none",
+ background: "none",
+ minWidth: 24,
+ height: 24,
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ }}
+ onClick={() => handleRemoveItem(item.id)}
+ />
+ )}
+ {item.nickname || item.name}
+ {item.wechatId || item.mobile}
+
+ {loading ? (
+
+
+
+ ) : poolPackages.length > 0 ? (
+ 加载中...
+
+ {poolPackages.map(item => (
+
+ ) : (
+
+ g.id === String(item.id),
+ )}
+ onChange={() => !readonly && handlePackageToggle(item)}
+ disabled={readonly}
+ style={{ marginRight: 12 }}
+ />
+
+ ))}
+
+
+
+ {item.name ? item.name.charAt(0) : "?"}
+
+
+
+ {item.name}
+
+ 描述: {item.description || "无描述"}
+
+
+ 创建时间: {item.createTime}
+
+
+ 包含数量: {item.num}
+
+
+
+ )}
+
+ {searchQuery
+ ? `没有找到包含"${searchQuery}"的流量池包`
+ : "没有找到流量池包"}
+
+
+
+
+ onSelectAll(e.target.checked)}
+ className={style.selectAllCheckbox}
+ >
+ 全选当前页
+
+
+
+
+
+ {currentPage} / {totalPages}
+
+
+
+
+
+
+ );
+};
+
+export default PopupFooter;
diff --git a/Touchkebao/src/components/PopuLayout/header.module.scss b/Touchkebao/src/components/PopuLayout/header.module.scss
new file mode 100644
index 00000000..f54cbbee
--- /dev/null
+++ b/Touchkebao/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/Touchkebao/src/components/PopuLayout/header.tsx b/Touchkebao/src/components/PopuLayout/header.tsx
new file mode 100644
index 00000000..51cad1b2
--- /dev/null
+++ b/Touchkebao/src/components/PopuLayout/header.tsx
@@ -0,0 +1,89 @@
+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;
+ onSearch?: (query: string) => 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)}
+ onSearch={() => onSearch && onSearch(searchQuery)}
+ prefix={
+
+ {showRefresh && onRefresh && (
+
+ )}
+
+
+ {steps.map((step, idx) => (
+
+ {step.id}
+
+ }
+ />
+ ))}
+
+
+ );
+};
+
+export default StepIndicator;
diff --git a/Touchkebao/src/components/TwoColumnSelection/TwoColumnSelection.module.scss b/Touchkebao/src/components/TwoColumnSelection/TwoColumnSelection.module.scss
new file mode 100644
index 00000000..5f53a343
--- /dev/null
+++ b/Touchkebao/src/components/TwoColumnSelection/TwoColumnSelection.module.scss
@@ -0,0 +1,153 @@
+.twoColumnModal {
+ .ant-modal-body {
+ padding: 0;
+ }
+}
+
+.container {
+ display: flex;
+ height: 500px;
+ border: 1px solid #e8e8e8;
+}
+
+.leftColumn {
+ flex: 1;
+ border-right: 1px solid #e8e8e8;
+ display: flex;
+ flex-direction: column;
+}
+
+.rightColumn {
+ width: 300px;
+ display: flex;
+ flex-direction: column;
+ background: #fafafa;
+}
+
+.searchWrapper {
+ padding: 16px;
+ border-bottom: 1px solid #e8e8e8;
+
+ .ant-input {
+ border-radius: 6px;
+ }
+}
+
+.friendList {
+ flex: 1;
+ overflow-y: auto;
+ padding: 8px 0;
+}
+
+.friendItem {
+ display: flex;
+ align-items: center;
+ padding: 12px 16px;
+ cursor: pointer;
+ transition: background-color 0.2s;
+
+ &:hover {
+ background-color: #f5f5f5;
+ }
+
+ &.selected {
+ background-color: #e6f7ff;
+ }
+
+ .ant-checkbox {
+ margin-right: 12px;
+ }
+}
+
+.friendInfo {
+ margin-left: 12px;
+ flex: 1;
+}
+
+.friendName {
+ font-size: 14px;
+ font-weight: 500;
+ color: #333;
+ margin-bottom: 2px;
+}
+
+.friendId {
+ font-size: 12px;
+ color: #999;
+}
+
+.selectedHeader {
+ padding: 16px;
+ border-bottom: 1px solid #e8e8e8;
+ font-weight: 500;
+ color: #333;
+ background: #fff;
+}
+
+.selectedList {
+ flex: 1;
+ overflow-y: auto;
+ padding: 8px 0;
+}
+
+.selectedItem {
+ display: flex;
+ align-items: center;
+ padding: 8px 16px;
+ background: #fff;
+ margin: 4px 8px;
+ border-radius: 6px;
+ border: 1px solid #e8e8e8;
+}
+
+.selectedInfo {
+ margin-left: 8px;
+ flex: 1;
+}
+
+.selectedName {
+ font-size: 13px;
+ color: #333;
+}
+
+.removeBtn {
+ color: #999;
+ font-size: 16px;
+ padding: 0;
+ width: 20px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover {
+ color: #ff4d4f;
+ background: #fff2f0;
+ }
+}
+
+.loading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100px;
+ color: #999;
+}
+
+.empty {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100px;
+ color: #999;
+ font-size: 14px;
+}
+
+.emptySelected {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100px;
+ color: #999;
+ font-size: 14px;
+}
diff --git a/Touchkebao/src/components/TwoColumnSelection/TwoColumnSelection.tsx b/Touchkebao/src/components/TwoColumnSelection/TwoColumnSelection.tsx
new file mode 100644
index 00000000..e5400bf6
--- /dev/null
+++ b/Touchkebao/src/components/TwoColumnSelection/TwoColumnSelection.tsx
@@ -0,0 +1,329 @@
+import React, { useState, useCallback, useEffect, useMemo, memo } from "react";
+import { Modal, Input, Avatar, Button, Checkbox, message } from "antd";
+import { SearchOutlined } from "@ant-design/icons";
+import { getFriendList } from "../FriendSelection/api";
+import type { FriendSelectionItem } from "../FriendSelection/data";
+import styles from "./TwoColumnSelection.module.scss";
+
+// 使用 React.memo 优化好友列表项组件
+const FriendListItem = memo<{
+ friend: FriendSelectionItem;
+ isSelected: boolean;
+ onSelect: (friend: FriendSelectionItem) => void;
+}>(({ friend, isSelected, onSelect }) => {
+ return (
+ onSelect(friend)}
+ >
+
+ {friend.nickname?.charAt(0)}
+
+
+ );
+});
+
+FriendListItem.displayName = "FriendListItem";
+
+interface TwoColumnSelectionProps {
+ visible: boolean;
+ onCancel: () => void;
+ onConfirm: (
+ selectedIds: string[],
+ selectedItems: FriendSelectionItem[],
+ ) => void;
+ title?: string;
+ deviceIds?: number[];
+ enableDeviceFilter?: boolean;
+ dataSource?: FriendSelectionItem[];
+}
+
+const TwoColumnSelection: React.FC
+
+ {friend.nickname}
+ {friend.wechatId}
+
+ {/* 左侧：好友列表 */}
+
+
+
+
+ {/* 右侧：已选好友 */}
+
+ {
+ const value = e.target.value;
+ setSearchQuery(value); // 立即更新显示
+ handleSearch(value); // 防抖处理搜索
+ }}
+ prefix={
+
+
+ {loading ? (
+
+ 加载中...
+ ) : friends.length > 0 ? (
+ // 使用 React.memo 优化列表项渲染
+ friends.map(friend => {
+ const isSelected = selectedFriendsMap.has(friend.id);
+ return (
+
+ {searchQuery
+ ? `没有找到包含"${searchQuery}"的好友`
+ : "暂无好友"}
+
+ )}
+
+ {hasMoreFriends && (
+
+
+
+ )}
+
+
+
+ 已选联系人 ({selectedFriends.length})
+
+
+
+ {selectedFriends.length > 0 ? (
+ selectedFriends.map(friend => (
+
+
+
+ {friend.nickname?.charAt(0)}
+
+
+ ))
+ ) : (
+
+
+
+ {friend.nickname}
+ 暂无选择
+ )}
+
+
+ );
+};
+
+export default UpdateNotification;
diff --git a/Touchkebao/src/components/Upload/AudioRecorder/index.tsx b/Touchkebao/src/components/Upload/AudioRecorder/index.tsx
new file mode 100644
index 00000000..1bcc705e
--- /dev/null
+++ b/Touchkebao/src/components/Upload/AudioRecorder/index.tsx
@@ -0,0 +1,411 @@
+import React, { useState, useRef, useCallback } from "react";
+import { Button, message, Modal } from "antd";
+import {
+ AudioOutlined,
+ PlayCircleOutlined,
+ PauseCircleOutlined,
+ SendOutlined,
+ DeleteOutlined,
+} from "@ant-design/icons";
+import { uploadFile } from "@/api/common";
+
+interface AudioRecorderProps {
+ onAudioUploaded: (audioData: { url: string; durationMs: number }) => void;
+ className?: string;
+ disabled?: boolean;
+ maxDuration?: number; // 最大录音时长（秒）
+}
+
+type RecordingState =
+ | "idle"
+ | "recording"
+ | "recorded"
+ | "playing"
+ | "uploading";
+
+const AudioRecorder: React.FC
+ {/* 左侧内容 */}
+
+
+ {/* 动画样式 */}
+
+
+ {/* 更新图标 */}
+
+
+ {/* 右侧按钮组 */}
+
+
+ {/* 文本信息 */}
+
+
+
+ 发现新版本
+
+
+ 建议立即更新获得更好体验
+
+
+
+
+
+
+
+ );
+
+ case "recording":
+ return (
+
+ 点击下方按钮开始录音
+
+ }
+ onClick={startRecording}
+ style={{
+ borderRadius: "50%",
+ width: "80px",
+ height: "80px",
+ fontSize: "24px",
+ }}
+ />
+
+
+ );
+
+ case "recorded":
+ case "playing":
+ return (
+
+
+
+
+ {formatTime(recordingTime)}
+
+
+ 正在录音中...
+
+
+
+ );
+
+ case "uploading":
+ return (
+
+
+
+
+ 录音时长: {formatTime(recordingTime)}
+
+
+ {state === "playing"
+ ? "正在播放..."
+ : "录音完成，可以试听或发送"}
+
+
+
+ ) : (
+
+
+
+ }
+ onClick={sendAudio}
+ loading={state === ("uploading" as RecordingState)}
+ style={{ minWidth: "120px" }}
+ >
+ 发送录音
+
+
+
+
+
+ );
+
+ default:
+ return null;
+ }
+ };
+
+ return (
+ <>
+ }
+ onClick={openRecorder}
+ className={className}
+ disabled={disabled}
+ title="点击录音"
+ />
+
+
+
+ );
+};
+
+// 创建 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()}
+
+